@charset "utf-8";

#wrap {overflow:hidden; min-width:320px; position:relative;}

#main {margin-top:60px;}

#header {position:fixed; top:0; left:0; z-index:100; min-width:320px; width:100%; text-align:center;z-index:9999;}
#header .btn_menu {position:absolute; top:19px; left:10px;}
#header .btn_menu img {width:27px;}
#header .logo {position:relative; text-align:center; height:60px; background:#fff;}
#header .logo img {height:60px;}
#header .btn_tel {position:absolute; top:9px; right:10px;}
#header .btn_tel img {width:42px;}

#gnb {position:fixed; top:0; left:-100%; z-index:101; width:100%; bottom:0; min-width:320px; text-align:left; transition:left 0.4s;}
#gnb.open {left:0;}
#gnb .gnb_logo {padding-left:23px; background:#fff; }
#gnb .gnb_logo img {height:60px;}

#gnb .btn_close {position:absolute; top:18px; right:15px; width:23px;}
#gnb .btn_close img {width:23px;}


.gnb_scroll {overflow:auto; position:absolute; top:60px; left:0; right:0; bottom:0; padding-bottom:50px; background:#fff;}

.gnb_quick {overflow:hidden; margin-left:-1px; text-align:center; background:#333333;}
.gnb_quick img {max-width:100%;}
.gnb_quick li {float:left; width:33.333%; border-left:1px solid rgba(255,255,255,0.2);}
.gnb_quick li a {display:block;}

.gnb_list {position:relative; overflow:hidden; text-align:left; background:#fff; margin-top:-1px; min-height:147px;}
.gnb_list:after {position:absolute; left:0; bottom:0; right:0; height:2px; background:#333333; content:'';}
.gnb_list .depth1 {}
.gnb_list .depth1 > a {position:relative; display:block; width:33.333%; padding-left:10px; font-size:15px; color:#333333; line-height:48px; border-right:1px solid #b4b4b4; background:#efefef;}
.gnb_list .depth1.on > a {background:#fff; border-right:0;}
.gnb_list .depth1.on > a:before {position:absolute; top:-1px; left:0; bottom:0; right:0; border-top:1px solid #b4b4b4; border-bottom:1px solid #b4b4b4; content:'';}
.gnb_list .depth1.on .sub {display:block;height:480px;overflow-y:scroll;}
.gnb_list .sub {display:none; position:absolute; top:0; left:0; right:0; margin-left:33.333%; padding:0 15px;}
.gnb_list .depth2 {border-bottom:1px solid #b4b4b4;}
.gnb_list .depth2 > a {position:relative; display:block; padding-left:7px; font-size:14px; color:#333333; line-height:48px;}
.gnb_list .depth2 > a:after {position:absolute; top:50%; right:0; width:10px; height:10px; margin-top:-5px; background:url('../images/common/gnb_arr.png') no-repeat center; background-size:contain; content:'';}
.gnb_list .depth2.on > a:after {background-image:url('../images/common/icon_arr_dw.png');}



.gnb_login_link {overflow:hidden; padding:13px 0; text-align:center;}
.gnb_login_link li {display:inline-block; }
.gnb_login_link li+li {margin-left:5px;}
.gnb_login_link li a {display:block; width:135px; font-size:15px; color:#717374; line-height:30px; border:1px solid #9b9d9d;}

.dimmed_bg {position:fixed; top:0; left:-100%; right:0; bottom:0; z-index:99; width:100%; background:rgba(51,51,51,0.85);}
.dimmed_bg.open {left:0;}

#counsel_link {position:fixed; top:60px; right:-100%; z-index:112; width:125px; transition:all 0.4s;}
#counsel_link.open {right:15px;}
#counsel_link li {}
#counsel_link li+li {border-top:1px solid #2d2e30;}
#counsel_link li a {display:block; padding-left:38px;  font-size:15px; color:#54565a; line-height:40px; background:url('../images/common/counsel_pop.png') no-repeat #fff; background-size:40px auto;}
#counsel_link li.s01 a {background-position:0 0;}
#counsel_link li.s02 a {background-position:0px -40px; background-color:#ffd34c;}
#counsel_link li.s03 a {background-position:0px -80px;}
#counsel_link li.s04 a {background-position:0px -120px;}
#counsel_link li.s05 a {background-position:0px -162px;}
#counsel_link .btn_close {position:absolute; top:-38px; right:0px; width:22px;}


#spakage {position:relative; padding:45px 0 40px 20px; background:#3d3d3d;}
#spakage h2 {}
#spakage h2 img {width:230px;}
#spakage img {width:100%;}
#spakage_swiper {margin-top:20px;} 
#spakage_swiper .swiper-container {margin-right:-20%; padding-bottom:35px;}
#spakage_swiper .swiper-slide {opacity:0.6; transition:all 0.4s;}
#spakage_swiper .swiper-slide-active {opacity:1;}
#spakage_swiper .inbox {position:relative;}
#spakage_swiper .swiper-scrollbar {position:relative; bottom:0; left:0; right:0; margin-right:20px; height:5px; -webkit-border-radius:0;  border-radius:0; background:#f4eff0;}
#spakage_swiper .swiper-scrollbar-drag {-webkit-border-radius:0;  border-radius:0; background:#db4952;}
#spakage_swiper .swiper-button-prev,
#spakage_swiper .swiper-button-next {top:auto; bottom:0; left:0; right:auto; width:50px; height:50px; background:no-repeat center;}



#bna {overflow:hidden; position:relative; padding:40px 20px; background:url('../images/main/bna_bg.jpg') no-repeat center; background-size:cover;}
#bna .tit {}
#bna .txt01 {width:275px; margin-top:20px;}
#bna .tab {overflow:hidden; margin-top:25px;}
#bna .tab li {float:left; width:20%;}

#bna .tab a { display:block; font-size:20px; color:#c2c2c2; text-align:center; font-weight:bold; transition:all .4s; -webkit-transition:all .4s;}
#bna .tab a span {position:relative;}
#bna .tab a span:before {position:absolute; top:0; left:0; width:100%; height:3px; background:#d3d3d3; content:''; transition:all .4s; -webkit-transition:all .4s;}
#bna .tab li.on a span:before {background:#db4952;}
#bna .sbtn {display:inline-block; margin-top:25px;}
#bna .sbtn img {width:162px;}

#dragstage_area {position:relative; margin-top:20px;}
#dragstage_area .txt_box {position:absolute; top:10px; left:10px; z-index:10; width:100%; height:50px; font-size:12px; color:#ffffff; font-weight:500;}
#dragstage_area .txt_after {position:absolute; top:0px; right:20px; color:#333333; }
.dragstage {}
.dragstage img {width:100%; height:auto;}
.dragstage .stageimage{position:absolute;top:0;left:0;z-index:1;}
.dragstage .stageimage img {opacity:0;}
.dragstage .coverimage{position:absolute;top:0;left:0;z-index:3; width:100%; height:100%; max-width:none;}
.dragstage .coverimage img {position: absolute; height: 100%; width: 100%;  max-width:none; clip: rect(0px, auto, auto, 0px);}
.dragstage .coverimage:hover{cursor:e-resize;}
.dragstage .coverimage:before {position:absolute; top:0; left:0; z-index:5; width:100%; height:100%; background:rgba(0,0,0,0.5); content:'';}
.dragstage .active .handle {position:absolute; top:50%; right:0; width:45px; height:45px; margin-top:-23px; bottom:auto; z-index:90; transition: opacity .4s;}
.dragstage .active .handle:before {position:absolute; top:0; right:0; background:#f3f3f3; content:'';}
.dragstage .active .handle:after {position:absolute; bottom:auto; top:50%; left:50%; width:45px; height:45px; margin-top:-23px; background:url('../images/main/bna_control.png') no-repeat; background-size:45px auto; content:''; transition: opacity .4s;}
.dragstage .active .handle.on {opacity:1;}
.dragstage .active .handle > span {display:block;font-size:12px; color:#fff; margin-top:90px;text-align:center}
.dragstage .active .handle.drag_start:after {opacity:1;}

#f_info {padding:35px 20px; background:#f8f8f8;}

#q_counsel {padding:25px 20px; text-align:left; background:#fff;}
#q_counsel h2 img {width:230px;}
#q_counsel .qrow {margin-top:20px;}
#q_counsel .qfew {position:relative; padding-left:50px}
#q_counsel .qfew+.qfew {margin-top:18px;}
#q_counsel .qfew label {position:absolute; top:8px; left:0; font-size:15px; color:#000000;}
#q_counsel input[type="text"] {width:100%; font-size:15px; color:#000000; border:0; border-bottom:1px solid #cacaca;  background:none;}
#q_counsel .qbtn_area {overflow:hidden; margin-top:13px; }
#q_counsel .qbtn_area input,
#q_counsel .qbtn_area a {float:left; width:50%;}
#q_counsel .agree_cont {margin-top:29px;}
.qcheckbox {display:inline-block; position:relative; text-align:left; font-size:13px; color:#616161; line-height:20px;}
.qcheckbox input {position:absolute; left:0; top:50%; width:20px; height:20px; margin-top:-11px; opacity:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; outline:0}
.qcheckbox label {padding-left:25px; }
.qcheckbox label:before {position:absolute; top:50%; left:0; width:20px; height:20px; margin-top:-11px; border:1px solid #cacaca; background:center #fff; background-size:100% auto; content:'';}
.qcheckbox input:checked + label:before {background:url('/m/images/common/ico_checkbox.png') no-repeat center; background-size:16px auto;}
.qcheckbox input:focus + label:before {outline:1px dotted #000}

#f_map {overflow:hidden; position:relative; height:300px; margin-top:10px;}
.root_daum_roughmap {width:100% !important; margin-top:-50px;}
.map_info img {width:100%;}

#footer {padding:25px 20px 50px; background:#333333; text-align:center;}

.f_logo img {width:110px;}

#address {margin-top:15px; font-size:12px; color:#bcbcbc; line-height:1.5;}
#address span {display:inline-block;}
#address span+span {margin-left:10px;}

#f_sns {margin-top:15px; text-align:center; font-size:0;}
#f_sns a {display:inline-block; }
#f_sns a+a {margin-left:2px;}
#f_sns a img {width:30px;}



/** 자체 제작 css  모바일 퀵배너 **/
#quick_ban {font-family:"Malgun Gothic", sans-serif;width:50px;position:fixed;bottom:40px;right:4px;z-index:11111;}
#quick_ban li {width:100%;height:50px;text-align:center; border-radius:50%; line-height:50px; margin-bottom:5px;}


#quick_ban li .p01 {display:block;width:100%;height:100%;background:rgba(56,56,56,0.7);color:#fff; border-radius:50%; padding-top:8px;}
#quick_ban li .p02 {display:block;width:100%;height:100%;background:rgba(56,56,56,0.7);color:#fff; border-radius:50%; padding-top:10px;}
#quick_ban li .p03 {display:block;width:100%;height:100%;background:rgba(56,30,31,0.7);color:#fff; border-radius:50%; padding-top:10px;}
#quick_ban li .p04 {display:block;width:100%;height:100%;background:rgba(67,175,67,0.7);color:#fff; border-radius:50%; padding-top:8px;  }
#quick_ban li .p05 {display:block;width:100%;height:100%;background:#1b264c;color:#fff; border-radius:50%; padding-top:8px;  }
#quick_ban li .p04 a {border-bottom:0;}
#quick_ban li a img {width:35px}