/*basic*/
#whole {overflow:hidden; position:relative left:-200px;}
.wrap {max-width:1200px; margin:0 auto; position:relative;}
.shadow_upper {position:absolute; top:0; left:0; width:100%; height:10px; background:url({{$template}}/img/theme/main/shadow_upper.png); z-index:10;}
.shadow_lower {position:absolute; bottom:0; left:0; width:100%; height:10px; background:url({{$template}}/img/theme/main/shadow_lower.png); z-index:10;}
/*header*/
#header {position:fixed; top:0; left:0; width:100%; height:80px; line-height:80px; z-index:999999; transition:all 0.1s ease-out;}
#header h1 {font-size:0; letter-spacing:0; word-spacing:0; float:left;}
#header h1 img {vertical-align:middle;}
#header h1 img.color {display:none;}
#header #gnb {float:right;}
#header #gnb>ul>li {float:left; position:relative;}
#header #gnb>ul>li.mobile_title {display:none;}
#header #gnb>ul>li>a {color:#fff; font-size:17px; padding:0 30px; display:block;}
#header #gnb>ul>li>a.mobile {display:none;}
#header #gnb>ul>li:hover>a {color:#fff; background-color:#55b9ff;}
#header #gnb>ul>li>ul {background-color:#fff; position:absolute; top:80px; left:0; width:100%; min-width:200px; display:none;}
#header #gnb>ul>li:last-child>ul {left:auto; right:0;}
#header #gnb>ul>li:hover>ul {display:block;}
#header #gnb>ul>li>ul>li {font-size:13px; line-height:18px;}
#header #gnb>ul>li>ul>li>a {display:block; padding:10px 15px; font-weight:400; transition:all 0.1s ease-out; border-bottom:1px solid #ddd; position:relative;}
#header #gnb>ul>li>ul>li>a span.icon {display:block; position:absolute; top:50%; right:10px; margin-top:-8px;}
#header #gnb>ul>li>ul>li>a span.icon i {font-size:20px; color:#404c59;}
#header #gnb>ul>li>ul>li>a span.icon i.off {display:none;}
#header #gnb>ul>li>ul>li>a:hover {background-color:#505a64; border-bottom:1px solid #505a64; color:#fff;}
#header #gnb>ul>li>ul>li>a:hover span.icon i {color:#fff;}
#header #gnb>ul>li>ul>li.active>a {background-color:#505a64; border-bottom:1px solid #505a64; color:#fff;}
#header #gnb>ul>li>ul>li.active>a span.icon i.on {display:none;}
#header #gnb>ul>li>ul>li.active>a span.icon {margin-top:-10px;}
#header #gnb>ul>li>ul>li.active>a span.icon i.off {display:block; color:#fff;}
#header #gnb>ul>li>ul>li>ul {display:none;}
#header #gnb>ul>li>ul>li>ul li a {display:block; padding:8px 12px; border-bottom:1px solid #a1a8ae; font-size:12px; line-height:15px; background-color:#7d8790; color:#fff; transition:all 0.25s ease-out;}
#header #gnb>ul>li>ul>li>ul li a:hover {background-color:#404c59;}
#header .mg_control {display:none;}
#header.changed {background-image:none !important; background-color:#fff; border-bottom:1px solid #eee; height:60px; line-height:60px;}
#header.changed h1 img.white {display:none;}
#header.changed h1 img.color {display:inline-block;}
#header.changed #gnb>ul>li>a {color:#000;}
#header.changed #gnb>ul>li:hover>a {color:#fff;}
#header.changed #gnb>ul>li>ul {top:60px; border-top:1px solid #ddd;}
#header.changed #gnb>ul>li>ul>li>a {border:1px solid #ddd; border-top:0;}
/*footer*/
#footer {clear:both;}
#footer .quickmenu {background-color:#505a64; font-size:0; letter-spacing:0; word-spacing:0; font-size:14px;}
#footer .quickmenu * {height:60px; line-height:60px;}
#footer .quickmenu .wrap br {display:none;}
#footer .quickmenu .wrap>a {color:#bec8d2; font-weight:400; transition:all 0.1s ease-out;}
#footer .quickmenu .wrap>span {color:#788296; margin:0 10px;}
#footer .quickmenu .wrap>a:hover {color:#fff;}
#footer .quickmenu .btn_top {position:absolute; top:0; right:0;}
#footer .quickmenu .btn_top a {display:block;}
#footer .quickmenu .btn_top i {color:#fff; width:60px; text-align:center; background-color:#55b9ff; transition:all 0.1s ease-out;}
#footer .quickmenu .btn_top i:hover {color:#55b9ff; background-color:#fff;}
#footer .information {padding:50px 0; overflow:hidden; zoom:1;}
#footer .information h6 {float:left; width:25%;}
#footer .information h6 img {max-width:100%; height:auto;}
#footer .information .info {float:left; width:60%; margin-right:5%;}
#footer .information .info li {font-size:13px; line-height:18px; font-weight:400; color:#505a64;}
#footer .information .info li span {width:50px; display:inline-block; color:#55b9ff; font-weight:700;}
/* #footer .information .info li.address {padding:5px 0; margin:5px 0; border-top:1px solid #bec8d2; border-bottom:1px solid #bec8d2;} */
#footer .information .social {float:left; width:20%;}
#footer .information .social li.title {color:#55b9ff; font-weight:700; margin-bottom:20px;}
#footer .information .social li.icon {font-size:0; float:left; margin-right:5px;}
#footer .information .social li.icon a {display:block; width:36px; height:36px; overflow:hidden;}
#footer .information .social li.icon a:hover img {margin-top:-36px;}
#footer .information .more {float:right; width:20%;}
#footer .information .more li {text-align:right; margin-bottom:5px;}
#footer .information .more li a {display:inline-block; text-align:left; height:34px; line-height:34px; min-width:175px; text-indent:20px; border:1px solid #bec8d2; color:#505a64; font-size:13px; font-weight:400; border-radius:18px; background:url({{$template}}/img/theme/main/more_case_b.png) no-repeat right 20px center; transition:all 0.1s ease-out;}
#footer .information .more li a:hover {background:url({{$template}}/img/theme/main/more_case_w.png) no-repeat right 20px center #55b9ff; border:1px solid #55b9ff; color:#fff;}
@media screen and (max-width:1280px) {
 .wrap {padding:0 20px;}
}

@media screen and (max-width:1024px) {
 #footer .quickmenu * {height:50px; line-height:50px;}
 #footer .quickmenu .wrap {font-size:13px;}
 #footer .quickmenu .wrap>span {margin:0 5px;}
 #footer .quickmenu .btn_top i {width:50px;}
 #footer .information {padding:40px 0;}
 #footer .information h6 {float:none; width:100%; text-align:center; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;}
 #footer .information .info {float: none; width:80%; margin: 0 auto; text-align: center;}
 #footer .information .social {width:30%;}
 #footer .information .more {width:25%;}
}
@media screen and (max-width:965px) {
 #whole {position:relative;}
 #header {background-image:none !important; background-color:#fff; border-bottom:1px solid #eee; height:60px; line-height:60px;}
 #header .wrap {padding:0 0 0 20px;}
 #header {height:50px; line-height:50px;}
 #header.changed {height:50px; line-height:50px;}
 #header h1 {float:none;}
 #header h1 img{padding-top: 6px;}
 #header h1 img.white {display:none;}
 #header h1 img.color{display: block;}
 #header.changed h1 img.color {display:inline-block; padding-top: 2px;}
 #header #gnb {position:fixed; top:0; right:-200px; width:200px; height:100%; z-index:999999; background-color:#444; /*box-shadow:0 0 3px #444;*/}
 #header #gnb>ul {padding-top:50px; position:relative;}
 #header #gnb>ul>li {float:none;}
 #header #gnb>ul>li.mobile_title {display:block; position:absolute; top:0; left:0; width:100%; height:51px; line-height:51px; text-indent:20px; color:#fff; font-size:16px; font-family: "NanumSquare", sans-serif; font-weight:400; background-color:#333;}
 #header #gnb>ul>li>a {color:#bbb !important; font-size:13px; font-weight:400; height:45px; line-height:45px; padding:0 20px; border-bottom:1px solid #666;}
 #header #gnb>ul>li>a.pc {display:none;}
 #header #gnb>ul>li>a.mobile {display:block;} 
 #header #gnb>ul>li:hover>a {color:#fff !important; border-color:#309ce8;}
 #header #gnb>ul>li ul {position:relative; top:auto !important;}
 #header #gnb>ul>li ul li a {border-bottom:1px solid #ddd; font-size:12px; line-height:17px;}
 #header .mg_control {display:block; width:51px; text-align:center; height:51px; line-height:51px; position:absolute; top:0; right:0; background-color:#309ce8; font-size:0; letter-spacing:0; word-spacing:0; cursor:pointer;}
 #header .mg_control i {color:#fff; vertical-align:middle;}
 #header .mg_control #mg_close {display:none;}


}
@media screen and (max-width:640px) {
 .wrap {padding:0 40px;}
 #footer .information .social {width:40%; float:right;}
 #footer .information .more {width:100%; clear:both; margin-top:20px; padding-top:20px; border-top:1px solid #eee; text-align:center;}
 #footer .information .more li {display:inline-block;}
}
@media screen and (max-width:480px) {
 .wrap {padding:0 30px;}
 #footer .quickmenu * {height:auto; line-height:24px;}
 #footer .quickmenu .wrap {padding:15px 65px 15px 15px;}
 #footer .quickmenu .wrap br {display:block;}
 #footer .quickmenu .wrap>span.mobile {display:none;}
 #footer .quickmenu .btn_top {right:10px; top:50%; margin-top:-18px;}
 #footer .quickmenu .btn_top i {width:36px; height:36px; line-height:36px; border-radius:20px;}
 #footer .information h6 {display:none;}
 #footer .information .info {float:none; width:auto; margin:0;}
 #footer .information .info li.address {border:0;}
 #footer .information .info li.address br {display:none;}
 #footer .information .social {float:none; width:auto; margin:0; text-align:center; border:1px solid #ddd; margin-top:20px; padding:20px; background-color:#f9f9fb;}
 #footer .information .social li.icon {float:none; display:inline-block; margin:0;}
 #footer .information .more {border:0; padding:0; display:none;}
 #footer .information .info {width: 90%;}
}
@media screen and (max-width:320px) {
 #whole {min-width:260px;}
 #footer .quickmenu .wrap {padding:10px 50px 10px 15px;}
}