/*
	ID : LAYOUT CSS
	WORK : Shinjunho
	DATE : 2015.10.29
	NOTE : 레이아웃 / 공통 CSS
*/

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/*browser reset*/
html {height:100%;}
html, body {width:100%;}

body, div, ul, li, ol, input, h1, h2, h3, p, pre, select, dd, dt{margin:0; padding:0; list-style:none;}
body {font-size:0.75em; font-family:'Nanum Gothic', Dotum; min-height:100%; position: relative; /* Required for static Slidebars to function properly. */}
img {border:0;}
a{text-decoration:none;}
input, textarea {font-family:'Nanum Gothic', Dotum; -webkit-border-radius:0;}
input[type=text],input[type=button], input[type=submit], input[type=password], input[type=tel]{-webkit-appearance:none;}
*{-webkit-text-size-adjust:none;}
select {font-family:'Nanum Gothic'; background:#fff url('/images/layout/bt_select_arrow.png') no-repeat 95% center; background-size:12px 7px; -webkit-border-radius:0; -webkit-appearance:none; padding:0 5px; }
label input{margin:-1px 4px 0 4px; vertical-align:middle;}

/*layout set*/
.base {width:100%;}
.wrap {margin:0 auto; width:1200px; position:relative; }
.wrap ul{position:absolute;}


/*Footer Banner*/
.footer_banner {max-width:640px; margin:0 auto;}
.footer_banner ul{overflow:hidden;}
.footer_banner ul li {width:50%; float:left;}
.footer_banner ul li a{display:block;}
.footer_banner ul li img {width:100%;}


/*Footer*/
.footer { font-weight:bold; background:#e0e3e6; border-top:#7d8790 solid 2px; padding:13px 5%; font-size:1em; position:relative;}
.footer ul.bt{height:44px; position:relative;}

.footer ul.bt a{color:#393939; padding:10px 20px; border:#a3a3a3 solid 1px; -moz-border-radius:5px; position:absolute; 
-webkit-border-radius:5px; border-radius:5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,e0e3e6+100 */
background: rgb(247,247,247); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(224,227,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(224,227,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(224,227,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(224,227,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(224,227,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(224,227,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#e0e3e6',GradientType=0 ); /* IE6-9 */
}

.footer ul.bt a:active, .footer ul.bt a:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e3e6+0,f7f7f7+100 */
background: rgb(224,227,230); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(224,227,230,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,227,230,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(224,227,230,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(224,227,230,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(224,227,230,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(224,227,230,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e3e6', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
-moz-box-shadow: 2px 2px 5px #bbb;
-webkit-box-shadow: 2px 2px 5px #bbb;
box-shadow: 2px 2px 5px #bbb;
}
.footer ul.bt a.bt1 {left:0%;}
.footer ul.bt a.bt2 {left:50%; margin:0 0 0 -37px;}
.footer ul.bt a.bt3 {right:0%; }
.footer ul.bt a.bt4 {left:50%; margin:0 0 0 -50px;}

.footer .address {color:#666; font-size:0.9em; line-height:1.3em;}
.footer .address a{color:#666;}
.footer .address a:hover, .footer .address a:active {color:#fffeaa; background:#555;}
.footer .address span {color:#aaa; display:block; font-size:1.1em;}

#topmove {position:absolute; right:20px;  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity:0; z-index:500;}
#topmove img{width:45px; height:45px; opacity:0.8;}


/* SelectBox*/

.select_gnb {background:#55606e; width:100%; height:45px;}
div.dropdown.border {border-right:#404852 solid 2px; width:45%;}
div.dropdown {position:relative; width:46%; padding:13px 2%;  cursor: pointer; outline: none; z-index:10; float:left; font-size:1.3em; background:#55606e url('/images/layout/bt_select_arrow.png') no-repeat 95% 55%; background-size:12px 7px; height:19px; color:#fff; font-weight:bold;}

/*
.dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}
*/
.dropdown ul.dropdown {position: absolute; top:100%;  left:0px; right:0px; opacity: 0; pointer-events: none; list-style: none;
    -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; 
}

.dropdown .dropdown li a {display:block; text-decoration:none;  padding:14px 5%; height:21px width:90%; font-size:0.9em; background:#647a95; border-bottom:#526379 solid 1px; color:#fff; font-weight:100;
	-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}

/*
.dropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}
*/

/* Hover state */
.dropdown .dropdown li:hover a {color:yellow;}

/* Active state */
.dropdown.active:after {border-left:#f0f solid 2px;}
.dropdown.active .dropdown {opacity:1; pointer-events:auto;}

/* No CSS3 support */
.no-opacity       .dropdown ul.dropdown,
.no-pointerevents .dropdown ul.dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .dropdown.active ul.dropdown,
.no-pointerevents .dropdown.active ul.dropdown {
    display: block;
}