@charset "utf-8";

#wrapper {position:relative;overflow:hidden;width:100%;}

/* 전체 메뉴 버튼 */ 
.btn-allmenu {float:right; position:relative; width:40px; height:40px; border:none; background:transparent; cursor:pointer; outline:none}
.btn-allmenu span {position:absolute; left:50%; display:block; width:30px; height:3px; margin-left:-15px; background:#fff; transition:all .25s ease-in}
.btn-allmenu span.line1 {top:10px}
.btn-allmenu span.line2 {top:18px}
.btn-allmenu span.line3 {top:26px}
/* 전체 메뉴 버튼 */

/* 전체 메뉴 */
#m_menu_toggle {display: block;position: absolute;top: 5px;right: 10px;cursor: pointer;z-index: 25;}
.mobile_menu {position: fixed;top: 0px;right: -80%;width: 80%;height: 100%;background:#000;}
.mobile_right_menu {}
.moblie_right_menu_body {position: relative;top: 0;left: 0;}
.m_menu {margin-top:81px;}
.m_menu>li {line-height:36px;border-top:solid 1px #222;}
.m_menu li>a {color: #fff;font-size:14px;text-decoration: none;display:block;margin-left:30px;}
.m_menu li a.active {font-weight: bold;line-height:36px;}
#m_close {position: absolute;top: 35px;right: 20px;cursor: pointer;}
ul.menu2 {display: none;margin-top: 6px;margin-bottom:-20px;}
ul.menu2 li {padding: 6px 0;}
ul.menu2 li a {color: rgba(255, 255, 255, 0.7);font-size: 13px;}
ul.menu2 li a:hover {color:#;font-weight: normal;}
ul.m_menu2 {display: none;margin: 6px 0 0px 0px;}
ul.m_menu2 li {padding: 0px 0;background:#2e2e2e;}
ul.m_menu2 li a {color:#999;font-size:13px;display:block;line-height:36px;}
ul.m_menu2 li a:hover {color:#fff;font-weight: normal;} 
/* 전체 메뉴 */

/* 상단 레이아웃 */
#hd {width:100%;z-index: 20 !important;position: absolute; min-width: 100%;}
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_wrapper {position:relative;margin:0 auto;padding:26px 0;width:970px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding-top: 10px;padding-left: 10px;}
#main_hd_wrapper {position: fixed;margin: 0px auto;width: 100%;zoom: 1;background:#1c1c1c;padding-bottom:10px;border-top:solid 1px #292828;}
#main_hd_wrapper:after {display: block;visibility: hidden;clear: both;content: "";}
#hd_lang {position:relative;z-index:20;width:100%;min-width:100%;min-height:30px;background:#000;}
#hd_lang .hd_lang_wrapper {width: 100%;margin: 0 auto;}
#hd_lang .hd_lang_txt {text-align: right;color: #fefefe;padding-top: 9px;padding-right:15px;font-size:10px;letter-spacing:1px;}
#hd_lang .hd_lang_txt a {color: #fefefe;margin-left:10px;}
/* 상단 레이아웃 */

/* 모바일메뉴 */
.mobile_menu {
 -webkit-transition: -webkit-transform 600ms ease;
 -moz-transition: -moz-transform 600ms ease;
 -o-transition: -o-transform 600ms ease;
 transition: transform 600ms ease;
 -webkit-font-smoothing: subpixel-antialiased;
}
.mobile_right_menu_open {
 transform: translate3d(-100%, 0, 0);
 -webkit-transform: translate3d(-100%, 0, 0);
 -moz-transform: translate3d(-100%, 0, 0);
 -ms-transform: translate3d(-100%, 0, 0);
 -o-transform: translate3d(-100%, 0, 0);
}
.moblie_right_menu_body {
 -webkit-transition: -webkit-transform 600ms ease;
 -moz-transition: -moz-transform 600ms ease;
 -o-transition: -o-transform 600ms ease;
 transition: transform 600ms ease;
 -webkit-font-smoothing: subpixel-antialiased;
}
.moblie_right_menu_toright {
 transform: translate3d(-80%, 0, 0);
 -webkit-transform: translate3d(-80%, 0, 0);
 -moz-transform: translate3d(-80%, 0, 0);
 -ms-transform: translate3d(-80%, 0, 0);
 -o-transform: translate3d(-80%, 0, 0);
}
/* 모바일메뉴 */

/* 모바일추가메뉴 */

.mobile_fix {top:80px;position:fixed;z-index:90;background:#292828;width:100%;}
.mobile_fix ul {font-size:0px;}
.mobile_fix .depth1 > li {display:inline-block;font-size:12px;width:25%;text-align:center;border-right:solid 1px #000000;border-bottom:solid 1px #000000;height:35px;padding-top:10px;}
.mobile_fix .depth1 > li a {display:block;}
.mobile_fix .depth1 > li:nth-child(4) {border-right:0px;}
.mobile_fix .depth1 > li:nth-child(8) {border-right:0px;}
.mobile_fix .depth1 > li > .depth2 {display:none; position:absolute; top:35px; left:50%; width:100vw; background-color:#292828; transform:translateX(-50%); text-align:left;}
.mobile_fix .depth1 > li.active > .depth2 {display:block;}
.mobile_fix .depth1 > li > .depth2 > li {display:inline-block; width:25%;text-align:center;border-right:solid 1px #000000;border-bottom:solid 1px #000000;height:35px;padding-top:10px; text-align:center;}
.mobile_fix .depth1 > li:nth-child(3) > .depth2 > li:nth-child(3){width:50%;}
.mobile_fix .depth1 > li > .depth2 > li a{color:#adadad; font-size:11px;}
/* .mobile_fix.fix0 .depth1 > li:nth-child(5),
.mobile_fix.fix0 .depth1 > li:nth-child(6),
.mobile_fix.fix0 .depth1 > li:nth-child(7),
.mobile_fix.fix0 .depth1 > li:nth-child(8){margin-top:70px;}
.mobile_fix.fix1 .depth1 > li:nth-child(5),
.mobile_fix.fix1 .depth1 > li:nth-child(6),
.mobile_fix.fix1 .depth1 > li:nth-child(7),
.mobile_fix.fix1 .depth1 > li:nth-child(8){margin-top:70px;}
.mobile_fix.fix2 .depth1 > li:nth-child(5),
.mobile_fix.fix2 .depth1 > li:nth-child(6),
.mobile_fix.fix2 .depth1 > li:nth-child(7),
.mobile_fix.fix2 .depth1 > li:nth-child(8){margin-top:35px;}
.mobile_fix.fix3 .depth1 > li:nth-child(5),
.mobile_fix.fix3 .depth1 > li:nth-child(6),
.mobile_fix.fix3 .depth1 > li:nth-child(7),
.mobile_fix.fix3 .depth1 > li:nth-child(8){margin-top:35px;} */
.mobile_fix.fix4 .depth1 > li > .depth2,
.mobile_fix.fix5 .depth1 > li > .depth2,
.mobile_fix.fix6 .depth1 > li > .depth2,
.mobile_fix.fix7 .depth1 > li > .depth2{top:70px;}

#container .inner {padding:0px 20px;}

/* 모바일추가메뉴 */

/*메인아래롤링*/
.main_visual_02 {width:100%;height:200px; max-width:100%; margin:0 auto; overflow:hidden; position:relative;}
.main_visual_02 .imgs {width:100%; height:100%; position:relative; overflow:hidden;}
.main_visual_02 .imgs li {width:100%; height:100%; position:absolute; top:100%; left:0;}
.main_visual_02 .imgs li.li_03 {top:0; background:url('../img/main_bottom_img1.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_02 .imgs li.li_04 {background:url('../img/main_bottom_img2.jpg') center 0 no-repeat;background-size:cover;}
.main_visual_02 .imgs li a {display:block; width:100%; height:100%; position:relative;}
.main_visual_02 .bn_wrap {width:38px; height:78px; position:absolute; top:50%; right:20px;  margin:-20px 0 0 10px;}
.main_visual_02 .bn_wrap .bns {/*width:19px; height:19px;*/ }
.main_visual_02 .bn_wrap .bns a {width:100%; height:100%; display:block;}
.main_visual_02 .bn_wrap .down_bn {margin-top:2px;}
/*메인아래롤링*/

/*메인전후사진*/
.main_collections {width:100%;background:#f9f9f8 url();padding:30px 0px 20px;}
.main_collections {text-align:center;color:#000;font-size:14px;}
.main_collections span.bo {font-family:'NanumMyeongjo';font-size:28px;color:#cca865;}
.main_collections span.af {color:#;font-size:28px;font-family:'NanumMyeongjo';margin-bottom:10px;display:inline-block;}

.img_zoom_wrapper span {position:absolute;width:50px;height:50px;text-align:center;font-family:"Gotham-Book";line-height:50px;font-size:12px;z-index:20;}
.img_zoom_wrapper span.circle {background:#000;margin-top:0px;left:50%;margin-left:-50px;color:#fff;}
.img_zoom_wrapper span.circle2 {background:#fff;margin-top:0px;margin-left:50%;color:#000;}
/*메인전후사진*/

.middlebanner .swiper-pagination-bullet-active {background:#ffd88f;}

/*웹스리스토리*/
.content_wrap span.title {display:inline-block;font-size:24px;width:100%;text-align:center;color:#333;font-family:'NanumMyeongjo';font-weight:normal;margin-top:30px;}
.content_wrap p {display:inline-block;font-size:14px;width:100%;text-align:center;color:#cca865;margin:5px auto 20px;font-family:Gotham-Black;letter-spacing:10px;}
.content_wrap {width:100%;  margin:0 auto;}
.content_wrap ul {position:relative;}
.content_wrap .conleftbanner {width:100%;height:215px;background:#c9c9c9 url(../img/content_leftbg.jpg) no-repeat;}
.content_wrap .bannertext {position:absolute;margin-top:50px;right:20px;color:#fff;line-height:16px !important;}
.content_wrap span.subjec {font-size:22px;font-weight:bold;line-height:24px !important;font-family:NanumSquare;}
.content_wrap span.mungu {font-size:12px;padding-left:2px;display:block;}
.content_wrap span.btn {display:block;width:120px;height:30px;background:#000;text-align:center;margin-left:3px;margin-top:20px;}
.content_wrap span.btn a {display:block;color:#fff;line-height:30px;}
  
.content_wrap .concenterbanner li {width:100%;clear:both;}
.content_wrap .concenterbanner li img {float:right;}
.content_wrap .concenterbanner .tp {height:215px;background:url(../img/content_centerbg.jpg) repeat-x;}
.content_wrap .concenterbanner .bt {height:215px;background:url(../img/content_center2bg.jpg) repeat-x;}
.content_wrap .concenterbanner .bannertext2 {position:absolute;margin-top:30px;margin-left:20px;color:#fff;line-height:16px !important;}
.content_wrap .concenterbanner span.btn2 {display:block;width:50px;height:20px;background:#000;text-align:center;margin-left:1px;margin-top:30px;font-family:Gotham-Book;font-size:10px;}
.content_wrap .concenterbanner span.btn2 a {display:block;color:#fff;line-height:20px;}
.bannertext3 {position:absolute;margin-top:10px;margin-left:20px;font-family:Gotham-Black,'NanumBarunGothic';color:#fff;line-height:16px !important;z-index:9999;}
.content_wrap ul.conbottombanner {font-size:0px;}
.content_wrap ul.conbottombanner li {display:inline-block;width:33.33333%;font-size:0px;}
.content_wrap ul.conbottombanner li img {width:100%;}
/*웹스리스토리*/



/* 푸터 */
#footer {clear:both; margin-top:40px; padding:30px 20px; text-align:center; background:#222}
#footer ul > li {display:inline-block; font-weight:600; color:#818181; margin:0 4px}
#footer address {font-weight:600; color:#818181}
#footer address span {display:inline-block; margin-left:8px}
#footer a {color:#818181}

.quick_warp {width:40px;position:fixed;right:20px;bottom:50px;z-index:1000;overflow:hidden;}
.quick_warp .quick_area {width:100%;/* height:100%; */position:relative;}
.quick_area .bns2 {width:100%;position:relative;}
.quick_area .bns2 li {position:relative;width:40px;height:40px;background:#000;text-align:center;border-radius:40px;margin-bottom:5px;}
.quick_area .bns2 li a {color:#fff;display:block;font-size:11px;padding-top:13px;}
.quick_area .bns2 li a i {font-size:20px;margin-top:-3px;}
/*.quick_area .bns2 li a:hover {background:pink;border-radius:80px;}*/
.quick_area .bns2 li a {opacity:0.8;}

/* quickmenu2 */
#quickmenu2{position:fixed; right:20px; bottom:20px; z-index:999;}
#quickmenu2 a{display:block;}
#quickmenu2 a + a{margin-top:10px;}
#quickmenu2 a img{width:60px;}