@charset "utf-8";
@import url('./fonts.css');
html{width:100%;height:100%;/*overflow-y:auto;*/-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input,select,textarea,form,fieldset,legend,body{margin:0;padding:0; }
*+html body body, *+html body div, *+html body li, *+html body dt, *+html body dd, *+html body p, *+html body tr, *+html body td, *+html body h2 {font-family: 'Noto Sans KR', 'Nanum Gothic', "NanumBarunGothic", "Malgun Gothic","Nanum Gothic",NanumGothic,Dotum,"돋움",sans-serif;}
body{visibility:visible; /*overflow-x: hidden !important;*/ width:100%;  font-size:14px; color:#202020; background:#fff; line-height:1.5em; font-weight:400; letter-spacing:-0.02em;}
@media  (max-width: 1280px){ body{font-size:13px;}}
@media  (max-width: 1024px){ body{font-size:12px;}}
@media  (max-width: 768px){ body{font-size:11px; line-height:1.4;}}
body, input, select, textarea {font-family:'Noto Sans KR', 'Nanum Gothic', "NanumBarunGothic", "Malgun Gothic","Nanum Gothic",NanumGothic,Dotum,"돋움",sans-serif;}
* {word-break:keep-all;}
img,fieldset{border:none;}
em,address{font-style:normal;}
a{text-decoration:none;color:#202020;}
li{list-style:none;}
input, select,textarea {outline:0;border-radius:0;}
.clear {}
.clear:after {content:"";display:block;clear:both;}
.clear_div {clear:both;}
.blind, .sound_only{visibility:hidden;width:0;height:0;font-size:0;line-height:0;overflow:hidden;}
img { max-width:100%; vertical-align:top;}
.img_100 {width:100%; height:auto !important; vertical-align:top;}
select{min-width:50px;height:26px;margin:0;padding:0;font-size:1em;line-height:26px;}
.underline {text-decoration:underline; }
.tl { text-align:left;}
.tc { text-align:center;}
.tr { text-align:right;}
.vt {vertical-align:top;}
.mb0 { margin-bottom:0 !important;}
.mb3 { margin-bottom:3px !important;}
.mb20 { margin-bottom:20px !important;}
.mb_1em {margin-bottom:1em !important;}
.mb_2em {margin-bottom:2em !important;}
.mb_3em {margin-bottom:3em !important;}
.pb1 { padding-bottom:1px;}
.bg_white { background-color:#fff;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*:focus {outline:none;}
.boxShadow {-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); box-shadow:2px 2px 3px rgba(0, 0, 0, 0.1);}
strong {font-weight:500;}

.none_select {pointer-events: none; user-select: none; -webkit-user-select: none;}
.mot1 { -webkit-transition: all 0.01s; -moz-transition: all 0.01s; -ms-transition: all 0.01s; transition: all 0.01s;}
.mot2 { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.mot3 { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.mot4 { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}
.mot5 { -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.mot6 { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.mot3-delay { -webkit-transition: all 0.3s ease-out 0.3s; -moz-transition: all 0.3s ease-out 0.3s; -ms-transition: all 0.3s ease-out 0.3s; transition: all 0.3s ease-out 0.3s;}
.mot4-delay { -webkit-transition: all 0.3s ease-out 0.4s; -moz-transition: all 0.3s ease-out 0.4s; -ms-transition: all 0.3s ease-out 0.4s; transition: all 0.3s ease-out 0.4s;}
.scale01 {-webkit-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -moz-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -ms-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1);}
.scale01:hover, .scale01:focus {-ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}

.strongColor01 { color:#2f5c99;}

.block1280, .block1024, .block768, .block560, .block480, .block380 {display:none !important;}
.in-block1280, .in-block1024, .in-block768, .in-block560, .in-block480, .in-block380 {display:none !important;}

#wrap {overflow-x:hidden;}
#skip{position:fixed;top:-9999px;left:0;z-index:1000;width:240px;height:30px;background:#676462;}
#skip a{display:block;height:30px;padding:0 0 0 20px;line-height:30px;font-size:12px;color:#333;}
#skip.on{top:0;}
#wrap {/*overflow:hidden;*/}
.inner_wrap { position:relative; max-width:1320px; width:96%; margin:0 auto;}


@media (min-width: 1025px){
#header, .main_visual { /*opacity:0;*/}
#header {width:100%;}
}

#header { position:absolute; /*width:100%;*/ left:0; top:0; z-index:10;}
.logo { position:absolute; display:inline-block; height:50px; padding:0; left:3%; top:50%; transform:translateY(-50%); z-index:5;}
.logo img { height:100%; width:auto; vertical-align:top; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.logo_white {position:relative; z-index:1;}
.logo_black {position:absolute; left:0; top:0; opacity:0; z-index:3;}

#header:hover {z-index:100;}
#header:hover .logo_white, #header.open_nav .logo_white{opacity:0;}
#header:hover .logo_black, #header.open_nav .logo_black{opacity:1;}
#header .inner_wrap { max-width:100%; width:100%; padding:0; text-align:center; padding-left:8em; z-index:5;}
#header .inner_wrap::after {content:"";display:block;clear:both;}
#header .gnbArea { display:inline-block; vertical-align:middle; z-index:1; }

.gnbArea .gnb > li {position:relative; float:left; padding:0 ; padding:0 1.5em; -webkit-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -moz-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -ms-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1);}
/*@media  (min-width: 1025px){.gnbArea .gnb > li::before {display:inline-block; content:" / "; font-size:1.3em; opacity:0.5;}}
.gnbArea .gnb > li:first-child { margin-left:0 !important;}*/

.topFixed .gnbArea .gnb > li {}

.gnbArea .gnb li a.depth1 {position:relative; display:inline-block; font-family: 'NEXON Lv2 Gothic'; font-size:1.2em; color:#fff; line-height:1.42em; font-weight:400; padding:1.7em 2em 1.7em 0; z-index:5; }
.gnbArea .gnb li a.depth1:hover, .gnb li a.depth1:focus, .gnb li.on a.depth1, .gnb li.this a.depth1 { /*color:#67f6a4;*/ }
.depth1_mobile { display:none;}
/*.gnbArea .gnb li a.depth1::after {content:""; position:absolute; width:100%; height:6px; background-color:rgba(89,171,255,0); left:0; bottom:-4px; z-index:5;}
.gnbArea .gnb li.this a.depth1::after, .gnbArea .gnb li.on a.depth1::after {background-color:rgba(89,171,255,1);}*/
.gnbArea .gnb li.this a.depth1 { font-weight:700;}
.gnbArea .gnb li a.depth1::after { position:absolute; content:"";display:block; width:100%; height:3px; left:50%; bottom:-1px; transform:translateX(-50%); background:rgba(0,85,54,0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.gnbArea .gnb li:hover a.depth1::after, .gnbArea .gnb li.this a.depth1::after { width:100%; background:rgba(0,85,54,1)}
.gnbArea .gnb_sub { position:absolute; /*width:100%; padding:15px 10px;*/ text-align:left; white-space: nowrap; z-index:5; /*transform:translateY(-10px); background:#fff; padding:10px 20px; border:1px solid #eee; border-radius:2px;*/ }
#header .gnb5::after, #header .gnb6::after { position:absolute; content:""; width:100%; height:100%; right:0em; top:0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  z-index:1; }
#header:hover .gnb5::after, #header:hover .gnb6::after {height:calc(100% + 11em); }
#header .gnb5:hover::after {border:1px solid rgba(0,145,79,0.3); background:rgba(0,1145,79,0.08);}
#header .gnb6:hover::after {border:1px solid rgba(0,155,183,0.3); background:rgba(0,155,183,0.08);}

/* logo */
@media  (min-width: 1280px){.logo_mobile {display:none;}}
@media  (max-width: 1279px){.logo_pc {display:none;}#header .inner_wrap {padding-left:0;padding-right:5%}}

@media  (min-width: 1025px){
.gnbArea .gnb_sub {visibility:hidden; opacity: 0; padding-top:1em; transform:translateY(-10px); padding: 1.5em 0; }
.gnbArea .gnb_sub li {/*margin:0 0.6em;*/}
/*.gnbArea .gnb > li:hover .gnb_sub {opacity:1; visibility:visible;  transform:translateY(0); transition:all 0.3s cubic-bezier(0.694, 0, 0.335, 1);}*/

#header:hover a.depth1 {color:#000;}
#header:hover .gnb_sub {opacity:1; visibility:visible;  transform:translateY(0); transition:all 0.3s cubic-bezier(0.694, 0, 0.335, 1); }
[class^="header_bg_img"] {position:absolute; max-width:340px; width:18%; bottom:0; opacity:0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index:2;}
.header_bg_img01 {left:0;}
.header_bg_img02 {right:0;}
#header:hover .header_bg { height:calc(100% + 11em);}
}

.gnbArea .gnb_sub ul { display:inline-block; text-align:left;}
.gnbArea .this .gnb_sub { /*display:block;*/}
.gnbArea .gnb_sub:after {content:"";display:block;clear:both;}
.gnbArea .gnb_sub li {  }
.gnbArea .gnb_sub li a { /*font-family: 'NEXON Lv2 Gothic';*/ font-size:1em; line-height:2em;}
.gnbArea .gnb_sub li.this a { font-weight:700; }	
.gnbArea .gnb_sub li a:hover, .gnb_sub li a:focus { text-decoration:underline; }

#header .header_bg { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0); left:0; top:0;  -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; /*box-shadow:0 3px 5px rgba(0,0,0,0.05);*/ z-index:1; }
#header:hover .header_bg { background:#fff !important; box-shadow:5px 0 22px rgba(0,0,0,0.3);}

#header:hover [class^="header_bg_img"] {opacity:1;}
#header.topFixed .header_bg { background:rgba(0,0,0,0.8);}

.main #header.topFixed .header_bg { background:rgba(0,0,0,0.7);}

#header .header_line { position:absolute; width:calc(100% - 60px); height:1px; background:rgba(255,255,255,0.3); left:0; bottom:0; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index:3; }
#header:hover .header_line, #header.open_nav .header_line {width:100%;background:rgba(0,0,0,0.1);}

.link_sns {position:relative; display:inline-block; vertical-align:middle; z-index:10;}
.link_sns li { float:left; margin-left:6px;}
.link_sns li a {display:inline-block; background:#202020;}
.link_sns li a:hover {background:#d23137;}
.btn_shop {  font-size:1.2em; line-height:40px; padding:0 20px; border-radius:20px; color:#fff;}
.btn_sns { border-radius:8px;}
.btn_shop span {margin-left:10px; vertical-align:middle;}
.btn_shop span img {vertical-align: baseline;}

.btn_lan_wrap { position:absolute; right:20px; top:50%; -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:2;}
.btn_lan { display:inline-block; width:3em; height:3em; border:1px solid #404040; border-radius:50%; text-align:center; font-size:12px; line-height:2.9em; padding-bottom:0.1em; margin-left:0.5em; -webkit-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -moz-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -ms-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1); transition: all 0.3s cubic-bezier(0.694, 0, 0.335, 1);}
.btn_lan:hover { background-color:rgba(89,171,255,0.5);}


#header.topFixed {position:fixed;}
#header.topFixed .logo { height:40px;}
#header.topFixed .gnbArea .gnb li a.depth1 { padding:1.2em 2em 1.2em 0;}

.top_nav {position:absolute; right:59px; top:0; border-right:1px solid rgba(255,255,255,0);z-index:5;}
.top_nav > li {float:left;position:relative; display:inline-block; vertical-align:top;}
.top_nav > li a {}
.related_sites { border-left:1px solid rgba(255,255,255,0.3); border-right:1px solid rgba(255,255,255,0.3);}
.btn_site {position:relative;display:inline-block;font-family: 'NEXON Lv2 Gothic'; font-size:1.2em; color:#fff; line-height:1.36em; font-weight:400; letter-spacing: -0.02em; padding:1.7em 1.5em; z-index:5;}
.btn_site span {display:inline-block; width:0.9em; height:0.9em; margin-left:0.9em;vertical-align:baseline;-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.btn_site span svg { vertical-align:middle;}
.related_sites_div {position:absolute; /*width:calc(100% + 2px);*/ width:calc(100% + 5.75em); height:12.85em; left:-1px; border-left: 1px solid rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.1); font-size:12px; text-align:left; overflow-x:hidden; overflow-y:auto; padding:8px 12px; background:rgba(255,255,255,1); opacity:0; visibility: hidden; transform:translateY(-10px); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.related_sites .btn_sites { position:absolute; right:10px; bottom:0; font-size:11px; opacity:0; visibility: hidden; z-index:10; }
.related_sites .btn_sites span {color:#007242;}
.related_sites:hover .btn_sites { opacity:1; visibility: visible;}

.btn_site.open span {transform:rotate(180deg);transform-origin:center center;}
.related_sites_div.open {opacity:1; visibility:visible;transform:translateY(1px);}

.top_nav > li.btn_nav_wrap {/*display:none;*/}
.btn_nav { position:relative; display:inline-block; width:24px; height:24px; margin:1.72em 1.5em; cursor:pointer; vertical-align: top; z-index:21;}
.btn_nav .line, .btn_nav .line::before, .btn_nav .line::after {position:absolute; width:17px; height:2px; background:#fff; left:0;top:50%; transform:translate(0,-50%); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.btn_nav .line { z-index:1;}
.btn_nav .line::before {content:""; width:21px; margin-top:-8px;  z-index:2; }
.btn_nav .line::after {content:""; width:19px; margin-top:8px;  z-index:2; }

.btn_nav.open_nav .line::before { left:50%; margin:0; transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -webkit-transform: translate(-50%, -50%) rotate(-45deg);}
.btn_nav.open_nav .line { background:rgba(255,255,255,0) !important; }
.btn_nav.open_nav .line::after {left:50%; width:21px; margin:0; transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg);}

#header:hover .related_sites, #header:hover .top_nav, #header.open_nav .related_sites, #header.open_nav .top_nav {border-color:rgba(0,0,0,0.1);}
#header:hover .btn_site, #heaedr.open_nav .btn_site {color:#000;}
#header:hover .btn_nav .line, #header:hover .btn_nav .line::before, #header:hover .btn_nav .line::after {background:#000;}

#header.topFixed .btn_site {padding:1.18em 1.5em;}
#header.topFixed .btn_nav {margin:1.35em 1.5em;}

#header:hover {z-index:103}

@media  (max-width: 1520px){
#header { font-size:1em;}
.logo { height:50px; }
#header.topFixed .logo { height:40px;}
.gnbArea .gnb > li {padding: 0 1.2em;}
.gnbArea .gnb li a.depth1, #header.topFixed .gnbArea .gnb li a.depth1 {font-size:1.1em; padding-right:1.5em}
.btn_site {font-size:1.1em;}
.related_sites_div {font-size:11px; height:14em;}
}

@media  (max-width: 1024px){
html.open_nav {overflow:hidden;}
#header { position:absolute; width:100%; left:0; top:0; box-shadow:0 0 3px rgba(0,0,0,0.1);}
#header .inner_wrap, #header.topFixed .inner_wrap { height:50px; padding:5px 0; text-align:right;}
.top_nav {right:39px;}
.logo, #header.topFixed .logo { height:34px;}
.btn_nav, #header.topFixed .btn_nav { display:block; right:0; margin:1.1em 1.3em;}
.btn_site, #header.topFixed .btn_site {padding: 1.2em 1.3em;}
.related_sites_div {width:140%; font-size:12px;}
#header .top_nav, #header.topFixed .top_nav  { margin-bottom:10px;}
#header .gnbArea { position:fixed; width:100%; height:calc(100% - 50px); left:0; top:50px; /*transform:translateY(-50%);*/ background-color:#fff; font-size:1.35em; text-align:left; opacity:0; visibility:hidden; overflow-y: auto;}
#header .gnbArea .gnb { position:absolute; max-width:600px; width:96%; left:50%; top:0; -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); transform:translateX(-50%); opacity:0; -webkit-transition: all 1s cubic-bezier(0.694, 0, 0.335, 1); -moz-transition: all 1s cubic-bezier(0.694, 0, 0.335, 1); -ms-transition: all 1s cubic-bezier(0.694, 0, 0.335, 1); -o-transition: all 1s cubic-bezier(0.694, 0, 0.335, 1); transition: all 0.6s cubic-bezier(0.694, 0, 0.335, 1); }
.gnbArea .gnb > li { float:none; display:block; margin:0; padding:2% 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
#header:hover .gnb5::after, #header:hover .gnb6::after {height:100%;}
.gnbArea .gnb li a.depth1, #header.topFixed .gnbArea .gnb li a.depth1 { display:inline-block; line-height:1.8em; padding:0.2em 0; color:#222; }
.gnbArea .gnb li a.depth1::after { height:2px;}
.gnbArea .gnb_sub { position:relative; display:block !important; padding:5px 0 0; text-align:left; background-color:transparent; border:0; }
.gnbArea .gnb_sub li { display:inline-block; margin:0 1em 0 0; }
.gnbArea .gnb_sub li a {font-size:1em; color:#444; line-height:1.8em; letter-spacing:-0.05em;}

#header .header_line {width:calc(100% - 40px);}

[class^="header_bg_img"] { display:none;}

#header.open_nav .gnbArea {opacity:1; visibility:visible;}
#header.open_nav .gnbArea .gnb { top:30px; opacity:1; margin-top:20px;}
}
@media (max-width:768px){
.top_nav {right:0;} 
.btn_nav, #header.topFixed .btn_nav {  margin:1.3em 1.3em;}
.btn_site, #header.topFixed .btn_site {padding: 1.35em 1.3em;}
#header .header_line {width:100%;}
}
@media (max-width: 600px){
.gnbArea .gnb > li { padding:2% 4%;}
}
@media (max-width: 520px){
#header { font-size:0.85em;}
.gnbArea .gnb > li { margin-left:0;}
.gnbArea .gnb li a.depth1, #header.topFixed .gnbArea .gnb li a.depth1 { font-size:1.55em;line-height:1em; }
.gnbArea .gnb_sub li a {font-size:1.2em;}
#header .top_nav { font-size:1.4em;}
.btn_nav, #header.topFixed .btn_nav {  margin:1.13em 1.2em;}
.btn_site, #header.topFixed .btn_site {padding: 1.05em 1.2em}
}

/* side */
.aside { position:fixed; background:rgba(255,255,255,1); z-index:101;}

.btn_popupZone {position:absolute;display:block; width:100%; height:46%; left:0; top:0; cursor:pointer; z-index:101;}
.btn_popupZone a {position:absolute; display:inline-block; text-align:center; font-family: 'NEXON Lv2 Gothic'; font-size:1.2em;line-height: 59px; letter-spacing:0.1em; color:#fff;}
.popupZone {position:fixed;max-width:500px; width:30%; right:60px; top:0; transform:translateX(10px); opacity:0; visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index:100;}
.popupZone_slider {position:relative;  padding:3% 8% 8%; background:#fff; }
.popupZone_slider .swiper-wrapper {max-height:calc(100vh - 260px); overflow-y:auto;}
.popupZone_slider .swiper-slide img {max-width: initial; width:100%; }

.popupZone_navigation {text-align:right; margin-bottom:3%;}
[class^="popup-swiper"] {cursor:pointer;}
[class^="popup-swiper"] svg {width:20px; height:20px; color:#000;}
.popup_btnArea {}
.popup_btnArea::after {content:"";display:block;clear:both;}
.close_popup, .close_day_popup {display:inline-block; float:left; width:50%; background:#005536; text-align:center; font-family: 'NEXON Lv2 Gothic'; font-size:1.1em;line-height:1.5em; letter-spacing:0.1em; color:#fff; padding:1.1em 0 }
.close_popup:hover, .close_day_popup:hover {background:#ffcb18;}
.close_popup { border-left:1px solid rgba(255,255,255,0.2);}
.close_popup svg, .close_day_popup svg { display:inline-block; width:0.7em; height:0.7em; vertical-align:middle;}

.sub .aside {border-left:1px solid rgba(0,0,0,0.1);}
.sub .btn_popupZone a {color:#000;}

.btn_popupZone.open { background:#fff;}
.btn_popupZone.open a {color:#000;}
.popupZone.open {opacity:1; visibility: visible; transform:translateX(0)}

.loing_nav { position:absolute; width:100%; left:0; top:46%; margin-top:190px; z-index:6; }
.loing_nav li a {display:block;font-family: 'Roboto Condensed', sans-serif; font-size:11px; font-weight:500; line-height:2em; text-align:center; text-transform:uppercase; color:#989895;}
.main .loing_nav li a { color:#fff;}



.quick_nav li a {display:block; -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out;}
.quick_nav li a:hover {background-color:#ffa518;}
.quick_nav li a span {display:block; width:100%; height:0; padding-bottom:100%; background-image:url("/theme/dtree/images/common/quick_link.png"); background-size:300%;}

.sub .quick_nav, .sub .quick_nav li {border-color:rgba(0,0,0,0.1);}

.quick_link01 {background-position:0 0;}
.quick_link02 {background-position:-100% 0;}
.quick_link03 {background-position:-200% 0;}

.quick_nav li a:hover .quick_link01 {background-position:0 -100%;}
.quick_nav li a:hover .quick_link02 {background-position:-100% -100%;}
.quick_nav li a:hover .quick_link03 {background-position:-200% -100%;}
@media  (min-width:768px){
.aside { width:60px; height:100%; right:0; top:0; border-left:1px solid rgba(255,255,255,0.3);}
.main .aside { background:rgba(255,255,255,0.2) !important;}

.btn_popupZone a { width:200px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(90deg); }

.quick_nav { position:absolute; width:100%; left:0; top:46%; /*transform:translateY(-50%);*/border-top:1px solid rgba(255,255,255,0.3);z-index:5;}
.quick_nav li {border-bottom:1px solid rgba(255,255,255,0.3);}

.main .quick_link01 {background-position:0 -100%;}
.main .quick_link02 {background-position:-100% -100%;}
.main .quick_link03 {background-position:-200% -100%;}

}
@media  (max-width:1024px) and (min-width: 768px) {
.aside { width:40px;}
.loing_nav { margin-top:130px; }
.loing_nav li a {font-size:10px;}
}

@media (max-width: 767px){
.aside {width:100%; height:50px; left:0; bottom:0; border-top:1px solid rgba(0,0,0,0.1);}

.btn_popupZone { width:40%; height:100%; left:0; top:0; cursor:pointer; text-align:center; z-index:101;}
.btn_popupZone a { width:100%; font-size:1.45em; line-height:50px; color:#000 !important; left:50%; transform:translateX(-50%);}

.popupZone {width:80%; left:50%; top:50%; right:auto; transform:translate(-50%,-50%); box-shadow:0 0 5px rgba(0,0,0,0.2);}
.popupZone.open {transform:translate(-50%,-50%);}
.close_popup, .close_day_popup {font-size:1.3em;}

.quick_nav { position:absolute; width:50%; height:50px; left:40%; top:0; border-left:1px solid rgba(0,0,0,0.1);z-index:5;}
.quick_nav li {border-right:1px solid rgba(0,0,0,0.1); float:left; width:50px;}

.loing_nav { width:50px; left:40%; top:0; margin-top:0; margin-left:150px; }
.loing_nav li a {font-size:10px; line-height:50px;}
.main .loing_nav li a { color:#989895;}
}


/* footer */
footer { position:relative; font-weight:400; z-index:1; padding:40px 0; margin-top:3%; clear:both; background:#fff; z-index:100; }
.main footer { margin-top:0}
footer .inner_wrap { max-width:1320px; width:94%; font-size:13px; line-height:1.5; color:#777; }
footer .inner_wrap a {color:#777;}
.footer_link { margin-bottom:1em;}
.footer_link li {display:inline-block;}
.footer_link li a { font-size:1.1em; color:#333;}

.footer_info {margin-bottom:0.3em;}
.footer_info li, .footer_info li p {display:inline-block;}
.footer_info li::before, .footer_info li p:last-child::before, .footer_link li::before {display:inline-block; content:"|"; font-size:11px; line-height:1.8em; color:#cdcdcd; margin:0 1.5em; vertical-align:text-bottom;}
.footer_info li:first-child::before, .footer_link li:first-child::before {display:none;}
.copyright span {color:#333}
.footer_adm { display:inline-block; opacity:0; margin-left:1em;}
.footer_adm:hover { opacity:0.3;}

@media  (max-width: 1280px){
.footer_info li::before, .footer_info li p:last-child::before, .footer_link li::before {margin:0 0.6em;}
}

@media  (max-width: 768px){
footer {padding:20px 0 70px; margin-top:50px;}
footer .inner_wrap {}
.footer_info li {display:block;}
.footer_info li::before {display:none;}
.footer_link li a { font-size:1em;}
}


/*.fadeIn_ { opacity:0;}
.fadeIn_.active_a { opacity:1; transition: all 0.6s ease 0.5s;}*/


@media  (max-width: 1280px){

.none1280 {display:none;}
.block1280 {display:block !important;}
.in-block1280 {display:inline-block !important;}
}

@media  (max-width: 1024px){
.none1024 {display:none !important;}
.block1024 {display:block !important;}
.in-block1024 {display:inline-block !important;}
}

@media  (max-width: 768px){
.none768 {display:none !important;}
.block768 {display:block !important;}
.in-block768 {display:inline-block !important;}
}

@media  (max-width: 560px){
.none560 {display:none !important;}
.block560 {display:block !important;}
.in-block560 {display:inline-block !important;}
}

@media  (max-width: 480px){
.none480 {display:none !important;}
.block480 {display:block !important;}
.in-block480 {display:inline-block !important;}
}


@media  (max-width: 380px){
.none380 {display:none;}
.block380 {display:block;}
.in-block380 {display:inline-block;}
}


/* typo */
.font_viga {font-family: 'Viga', sans-serif;font-size:2.25em; color:#d23137; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.6em;}
.typo_01 { font-size:1.485em; line-height:1.6;}
.typo_01 dt {   /*padding-left:0.1em;*/ }
.typo_01 dd {}
.typo_01 dd .text01 {/*font-family: 'NotoSerifKR';*/ font-family: 'Noto Serif KR', serif; font-size:1.3em; letter-spacing:-0.04em; font-weight:300;}
.typo_01 dd .text01.mb_1 { margin-bottom:1em;}

@media  (max-width: 1024px){
.typo_01 { font-size:1.2em;}
}

@media  (max-width: 768px){
.typo_01 { font-size:1.1em;}
}
.search_wrap {font-size:15px; margin-bottom:1.2em;}
.search_wrap_form {}
.search_wrap_form .box { display:inline-block;}
.search_wrap_form .box.box-word { position:relative; width:18em; height:42px; background:#fff; padding: 6px 16px; text-align: left; vertical-align:bottom;}
.search_wrap_form .box.box-word input { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:15px; line-height:30px; height:30px; background:none; border:none; vertical-align:top; }
.search_wrap_form .box.box-word input::placeholder { font-family: 'Montserrat', sans-serif; font-size:15px; line-height:30px; letter-spacing:0.05em; font-weight:500; color:#202020;}
.search_wrap_form select {display:none;}
.btn_search { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none;}
.btn_search svg { width:16px;}
.hot_keyword {}
.hot_keyword li { display:inline-block; margin:0 0.6em; font-size:15px; line-height:30px; color:#fff;}
.hot_keyword li a { color:#fff;}

@media  (max-width: 768px){
.search_wrap { font-size:1.1em;}
}

@media  (max-width: 620px){
.search_wrap { font-size:1.1em;}
.search_wrap_form .box:not(.box-word) { width:49.5%;}
.search_wrap_form .box:not(.box-word) .nice-select { width:100%;}
.search_wrap_form .box { display:inline-block;}
.search_wrap_form .box.box-word { width:99.5%; margin-top:3px;}
}

.video_wrap { position:relative; width:100%; height:0; padding-bottom:56%; overflow:hidden;}
.video_wrap video { position:absolute; width:100%; z-index:1;}
.video_typo { position:absolute; width:80%;  left:50%; top:50%; transform:translate(-50%,-50%); font-size:1.5em; line-height:1.2; color:#fff; font-weight:300; text-align:center; text-shadow:0 0 5px rgba(3,17,41,0.3); z-index:5;}
.video_typo .text01 { font-family: 'Montserrat', sans-serif; font-size:3.333em; font-weight:700; text-transform:uppercase;}

@media  (max-width: 1024px){
.video_typo { font-size:1.35em;}
.video_typo .text01 { font-size:2.5em;}
}

@media  (max-width: 768px){
.video_typo { font-size:1.25em;}
.video_typo .text01 { font-size:2.3em;}
}
.techno_box { padding: 2% 0; margin-top:5%; background-color: rgba(11,23,43,1);}
.techno_slider_wrap { font-size:1.285em; line-height:1.2em; color:#fff;}
.techno_slider_wrap dt { margin-bottom:1em;}
.techno_slider_wrap dt .title01 {font-size:1.38em; font-weight:500;}
.techno_slider_wrap dt .title02 {font-family: 'Montserrat', sans-serif; font-size:0.95em; font-weight:600; margin-left:0.5em;}

.techno_slider { position:relative;}
.techno_slider .slick-list { width:calc(100% - 200px); margin-left:-2.5em;}
.techno_slider .slick-slide a { display:block; color:#fff; padding-left:2.5em;}
.techno_slider .slick-slide a img { max-width:initial; width:100%; }
.techno_slider .slick-slide a .img {display:block; width:100%; height:0; padding-bottom:56%; background-size:cover; background-repeat:no-repeat; background-position:center center !important;}
.techno_slider .slick-slide a .organ { display:block; font-size:0.85em; margin:1em 0 0.2em;}
.techno_slider .slick-slide a .subject { display:block;}

.techno_slider .slick-arrow { position:absolute; top:40%; transform:translateY(-50%); border:0; background:none; color:#fff; z-index:5;}
.techno_slider .slick-arrow:hover, .techno_slider .slick-arrow:focus { border:0;}
.techno_slider .slick-arrow svg { width:1.1em;}
.techno_slider .slick-arrow span { display:block; font-family: 'Montserrat', sans-serif;; font-size:0.9em; font-weight:500;}
.slick-prev { right:120px;}
.slick-next { right:20px;}

@media (max-width:1420px){
.techno_slider .slick-list { width:calc(100% - 180px); margin-left:-2em;}
.techno_slider .slick-slide a { display:block; color:#fff; padding-left:2em;}
.slick-prev { right:100px;}
}

@media (max-width:1280px){
.techno_slider_wrap dt { font-size:0.95em;}
.techno_slider .slick-list { width:100%;  margin-left:-1em;}
.techno_slider .slick-slide a {  padding-left:2em;}
}

@media (max-width:1024px){
.techno_slider_wrap dt { font-size:0.9em;}
.techno_slider .slick-list { width:100%;  margin-left:-0.75em;}
.techno_slider .slick-slide a {  padding-left:1.5em;}
}

@media (max-width:768px){
.techno_slider_wrap dt { font-size:0.85em;}
.techno_slider .slick-list { width:100%;  margin-left:-0.5em;}
.techno_slider .slick-slide a {  padding-left:1em;}
}

#refusal_email { position:fixed; display:none; max-width:800px; width:96%; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border:3px solid #ddd; padding:30px 20px; z-index:1000;}
#refusal_email .refusal_div { display:flex;}
.email_icon { position:relative; width:20%; text-align:center;}
.email_icon > div { position:relative; width:80%; margin:0 auto;}
.email_icon .email_icon01 { position:relative; }
.email_icon .email_icon01 svg { width:100%; vertical-align:top; color:#77a3da;}
.email_icon .email_icon02 { position:absolute; width:60%; left:50%; top:54%;  transform:translate(-50%,-50%); z-index:5;}
.email_icon .email_icon02 svg { width:100%; color:#a30800;;}
.email_text { width:80%; padding-left:5%; font-size:15px; line-height:1.5;}
.email_text dt { font-size:1.5em; margin-bottom:1em; color:#202020;}
.email_text dd .box {display:inline-block; margin-top:1em; padding:10px 15px; background:#efefef; border-radius:4px; }
#refusal_email .refusal_email { position:absolute; width:30px; padding:5px; right:10px; top:10px; cursor:pointer; z-index:5;}
#refusal_email .refusal_email svg { width:20px;}

.refusal_email_bg {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    left: 0;
    top: 0;
    z-index: 100;
}

@media (max-width:520px){
.email_icon { display:none;}
.email_text { width:100%; padding:0; font-size:13px;}
}

.btn_board { display:inline-block; font-size:13px; line-height:1.8em; padding:0.3em 1em; background:#333; color:#fff; border-radius:4px;}