@charset "utf-8";
/* CSS Document */
html{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-y:scroll;}
html,body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,form,input,select,textarea,button,label,fieldset,table,tr,td,th,tbody,thead,tfoot,caption,video,strong,em,i,b{ margin:0; padding:0; word-break:keep-all; font-size:inherit; font-weight:inherit; color:inherit;}
ul,ol,li{ list-style:none;}
img { border:none; max-width:100%;}
em,i{ font-style:normal;}
strong,th{ font-weight:500;}
b{ font-weight:700;}
table{ table-layout:fixed; border-collapse:collapse; border-spacing:0;}
span, strong, a, em, i, b, input, button, textarea, select{ font-size:inherit; font-family:inherit; vertical-align:middle;}
input[type=button], input[type=submit], button{ cursor:pointer;}
select{ max-width:100%;}
*:focus, a:focus, input:focus, button:focus, textarea:focus, select:focus{ outline:none;}
a, input, button, textarea, select, li{ -webkit-tap-highlight-color:transparent;}
input[type="text"],input[type="password"],input[type=button],input[type=submit],input[type="file"],button,label,textarea,select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; -webkit-border-radius:0;}

::selection     { background:var(--siteC2); color:#fff !important;}
::-moz-selection{ background:var(--siteC2); color:#fff !important;}

a,
a:visited,
a:active,
a:hover{ text-decoration:none;}

body{ font-family:'NanumSquareNeo','Noto Sans KR',sans-serif; font-weight:400; line-height:1.2;}
html.hidden{ overflow-y:hidden;}

/*inc*/
.al{ text-align: left !important;}
.ac{ text-align: center !important;}
.ar{ text-align: right !important;}

.vt{ vertical-align:top !important;}
.vm{ vertical-align:middle !important;}
.vb{ vertical-align:bottom !important;}

.fl{ float:left !important;}
.fr{ float:right !important;}
.cl{ clear:both !important; display:block;}
.oh{ overflow:hidden !important;}

.pr{ position:relative; z-index:inherit;}
.pa{ position:absolute; z-index:inherit;}
.pf{ position:fixed; z-index:inherit;}

.di{ display:inline-block; *display:inline; zoom:1;}
.db{ display:block !important;}
.dn{ display:none !important;}

.di_wrap{ font-size:0;}
.di_wrap > *{ display:inline-block; *display:inline; zoom:1; vertical-align:top; font-size:16px; font-size:1rem;}
.di_wrap > * > .in{ display:block;}

.fl_wrap{ *zoom:1;}
.fl_wrap:after{ content:""; display:block; clear:both;}
.fl_wrap > *     { float:left;}
.fl_wrap > .left { float:left;}
.fl_wrap > .right{ float:right;}
.fl_wrap > * > .in{ display:block;}

.di_table,
.di_table .th,
.di_table .td{ box-sizing:border-box;}
.di_table{ display:table; table-layout:fixed; width:100%; border-collapse:collapse; border-spacing:0;}
.di_table .tr{ display:table-row;}
.di_table .th,
.di_table .td{ display:table-cell; vertical-align:middle;}

.flex{ display:flex; box-sizing:border-box; min-width:0;}
.flex > *{ box-sizing:border-box; min-width:0;}
.flex.di{ display:inline-flex;}
.flex.wrap{ flex-wrap:wrap;}
.flex.col{ flex-direction:column;}
.flex.col > *{ width:100%;}
.flex.space { justify-content:space-between;}
.flex.vspace{ align-content:space-between;}
.flex.hc{ justify-content:center;}
.flex.hr{ justify-content:flex-end;}
.flex.vt{ align-content:flex-start; align-items:flex-start;}
.flex.vc{ align-content:center; align-items:center;}
.flex.vb{ align-content:flex-end; align-items:flex-end;}
.flex.ac{ align-content:center; align-items:center; justify-content:center; text-align:center;}
.flex .mgL{ margin-left:auto;}
.flex .mgR{ margin-right:auto;}
.flex .mgT{ margin-top:auto;}
.flex > .grow{ flex:1 1 0%;}
.flex > .fix{ flex:0 0 auto;}
.flex.gap05{ gap:.5em;}
.flex.gap1 { gap:1em;}
.flex.gap15{ gap:1.5em;}

.va_wrap{ display:block; text-align:center; white-space:nowrap;}
.va_wrap:before{ content:""; display:inline-block; vertical-align:middle; width:0; height:100%;}
.va_wrap img{ display:inline-block; vertical-align:middle; max-width:100%; max-height:100%;}
.va{ display:inline-block; vertical-align:middle; max-width:100%; height:auto; white-space:normal; box-sizing:border-box;}

.resize{ position:relative; display:block; height:0; padding-bottom:100%; box-sizing:border-box;}
.resize .re{ position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box;}
.resize.s1{ padding-bottom:66.66%;}
.resize.s2{ padding-bottom:56.25%;}
.resize.s3{ padding-bottom:75%;}
.resize.s4{ padding-bottom:135%;}
.resize.s5{ padding-bottom:8%;}

.con_idx{ position:relative;}
.con_idx > .idx{ position:absolute; left:0; top:0; width:100%; height:0; overflow:hidden; visibility:hidden; filter:alpha(opacity=0); opacity:0;}
.con_idx > .idx.on{ position:relative; height:auto; overflow:visible; visibility:visible; filter:alpha(opacity=100); opacity:1;}

.fixWrap{position:relative;}
.fixWrap .fixIn{ position:absolute; height:100%; top:0}
.fixWrap .fixIn .fixObj{ position:absolute; transition:.3s}
.scroll .fixWrap .fixIn .fixObj{ position:fixed}
.fixWrap .fixIn .fixObj.bottom{ position:absolute; bottom:0}

/*popup*/
.popOpen{ overflow-y:hidden; padding-right:1em}

.layer_wrap{ position:fixed; left:0; top:0; width:100%; height:100%; visibility:hidden; z-index:100000000;}
.layer_wrap .layer_bg{ position:absolute; z-index:9999; width:100%; height:100%; left:0; top:0; background:#000; opacity:0; transition:.5s;}
.layer_wrap .layer_frame{ position:absolute; z-index:10000; left:0; top:0; width:100%; height:100%; opacity:0; transition:.2s;}
.layer_wrap .layer_img{ position:absolute; z-index:10000; left:2%; top:2%; width:96%; height:96%;}
.layer_wrap .layer_img img{ position:relative; z-index:2;}
.layer_closeBg{ position:fixed; z-index:1; left:0; top:0; width:100%; height:100%;}

.layer_wrap.on{ visibility:visible;}
.layer_wrap.on .layer_bg{ opacity:.5;}
.layer_wrap.on .layer_frame{ opacity:1; transition-delay:.6s;}

/*layer popup*/
.mainLayerPop{}
.mainLayerPop .popLayer{ display:block; position:absolute; overflow:auto; background:#fff; border:1px solid #000; box-sizing:border-box;}
.mainLayerPop .popLayer_closeW{ height:35px; padding:0 1em; text-align:right; background:#343b4d;}
.mainLayerPop .popLayer_closeW *{ color:#fff;}
.mainLayerPop .popLayer_close .tt{ font-size:.875em;}
.mainLayerPop .popLayer_close a{ display:inline-block; margin-left:.5em; font-weight:500;}
@media screen and (max-width:1024px){
  .mainLayerPop{ position:fixed; top:0; bottom:0; left:0; right:0; z-index:2000; display:flex; align-content:center; align-items:center; justify-content:center; text-align:center; background:rgba(0,0,0,.4);}
  .mainLayerPop .in_w{ box-sizing:border-box; max-width:100%; width:30em; margin-top:1em; margin-bottom:5em; background:#fff; border:1px solid #000; overflow-y:auto;}
  .mainLayerPop .in_w .slick-track {width: 100%;}
  .mainLayerPop .moSlide .el .popLayer{ position:static; height:auto !important; width:100% !important; max-width:100% !important; max-height:100%; border:none;}
  .mainLayerPop .moSlide .el .popLayer img{ width:100%; height: unset;}
  .mainLayerPop .dot_wrap{ position:fixed; left:0; right:0; bottom:1em; text-align:center;}
  .mainLayerPop .slick-dots > ul > li{ display:inline-block; margin:0 .125em;}
  .mainLayerPop .slick-dots > ul > li button{ width:1em; height:1em; border:none; background:#fff; border-radius:100%; text-indent:-999999px; overflow:hidden; transition:.2s;}
  .mainLayerPop .slick-dots > ul > li.slick-active button{ width:3em; border-radius:5em;}
  .mainLayerPop.hide{ display:none !important;}
  .mainLayerPop .PC{ display:none !important;}
  .mainLayerPop .PHONE{ display:block !important;}
  .mainLayerPop div.popLayer_closeW{ display:flex; align-content:center; align-items:center;}
  .mainLayerPop div.popLayer_closeW .popLayer_close{ flex:1;}
  .mainLayerPop .popLayer_closeW {height:auto; padding: 1.2em 1em;}
  .mainLayerPop .popLayer_close {font-size: 15px;}
}

/**/
html.pop body{ background:transparent; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; overflow-x:hidden; overflow-y:auto;}
html.pop .popWrap .popIn,
html.pop .popWrap .popIn:before,
html.pop .popWrap .popIn .popCon{ box-sizing:border-box;}
html.pop .popWrap{ position:absolute; left:2%; top:2%; width:96%; height:96%; text-align:center; white-space:nowrap;}
html.pop .popWrap:before{ content: ""; display:inline-block; width:0; height:100%; margin-right:-4px; vertical-align:middle;}
html.pop .popWrap .popIn{ position:relative; z-index:2; display:inline-block; vertical-align:middle; overflow-y:auto; max-width:100%; max-height:100%; background:#fff; box-shadow:1px 1px 10px #333; text-align:left; white-space:normal;}
html.pop .popWrap .popIn::-webkit-scrollbar{ width:10px; height:10px;}
html.pop .popWrap .popIn::-webkit-scrollbar-thumb{ background:var(--siteC2); border-radius:1em;}
html.pop .popWrap .popIn::-webkit-scrollbar-track{ background:#e6e6e6;}
html.pop .popWrap .popIn:before,
html.pop .popWrap .popIn .popCon{ padding:1.5em 25px;}
html.pop .popWrap .popIn:before{ content:attr(data-tit); display:block; padding-bottom:0; padding-right:3em; font-size:1.375em; color:#111; font-weight:500;}
html.pop .popWrap .popIn .popCon{ padding-top:1.5em; padding-bottom:2em;}
html.pop .popWrap .popIn .popClose{ position:absolute; z-index:2; top:1.25em; right:1.375em; width:2.4em; line-height:2.4em; background:#fff; border-radius:100%; box-shadow:1px 1px 8px rgba(0,0,0,.2); text-align:center; color:#222;}
html.pop .popWrap .popIn .popClose .xi{ font-size:1.375em;}
html.pop .popWrap .popIn .popClose:hover{ background:#222; color:#fff; transition:.3s;}
html.pop .popWrap.titNon .popIn:before,
html.pop .popWrap.btnNon .popIn .popClose,
html.pop .popWrap.bgNon .layer_closeBg{ display:none;}

html.pop .popWrap .popVideo{ position:relative; z-index:2; display:inline-block; vertical-align:middle; min-width:720px; max-width:1280px;}
html.pop .popWrap .popVideo video{ max-width:100%;}
html.pop .popWrap .popVideo .fixClose{ position:fixed; top:2em; right:2em; width:4em; line-height:4em; background:#000; border-radius:100%; text-align:center; color:#fff;}
html.pop .popWrap .popVideo .fixClose .xi{ font-size:3.000em;}
html.pop .popWrap .popVideo .fixClose:hover{ background:#ee2c49; transition:.2s;}

.scrollst{ overflow-y:auto; scrollbar-width:thin; scrollbar-color:gray transparent; scrollbar-face-color:#666;
scrollbar-track-color:#f1f1f1;
scrollbar-arrow-color:none;
scrollbar-highlight-color:#f1f1f1;
scrollbar-3dlight-color:none;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:none;}
.scrollst::-webkit-scrollbar{ width:.5em; height:.5em}
.scrollst::-webkit-scrollbar-track { background-color:#ddd}
.scrollst::-webkit-scrollbar-thumb { border-radius:1em; background-color:#8d1d26; background-clip:padding-box; border:none;}
.scrollst::-webkit-scrollbar-button{ width:0; height:0;}

.wrapHide{ position:absolute; opacity:0; width:0; z-index:-1; visibility:hidden; transform:translateY(-100%);}

/**/
.pd0{ padding:0 !important;}
.pt0{ padding-top:0 !important;}
.pb0{ padding-bottom:0 !important;}

.mt0{ margin-top:0 !important;}
.mt5{ margin-top:5px !important;}
.mt10{ margin-top:10px !important;}
.mt20{ margin-top:20px !important;}
.mt30{ margin-top:30px !important;}
.mt40{ margin-top:40px !important;}
.mt50{ margin-top:50px !important;}

.mb0{ margin-bottom:0 !important;}
.mb5{ margin-bottom:5px !important;}
.mb10{ margin-bottom:10px !important;}
.mb20{ margin-bottom:20px !important;}
.mb30{ margin-bottom:30px !important;}
.mb40{ margin-bottom:40px !important;}
.mb50{ margin-bottom:50px !important;}

.ml0{ margin-left:0 !important;}
.ml5{ margin-left:5px !important;}
.ml10{ margin-left:10px !important;}
.ml20{ margin-left:20px !important;}
.ml30{ margin-left:30px !important;}
.ml40{ margin-left:40px !important;}
.ml50{ margin-left:50px !important;}

.mr0{ margin-right:0 !important;}
.mr5{ margin-right:5px !important;}
.mr10{ margin-right:10px !important;}
.mr20{ margin-right:20px !important;}
.mr30{ margin-right:30px !important;}
.mr40{ margin-right:40px !important;}
.mr50{ margin-right:50px !important;}

/**/
.c_white{ color:#fff !important;}
.c_black{ color:#000 !important;}
.c_gray { color:#999 !important;}
.c_blue { color:#2a5caa !important;}
.c_red  { color:#b91515 !important;}
.c_mint { color:#019299 !important}
.c_point { color:var(--siteC) !important;}
.c_point2{ color:var(--siteC2) !important;}
.c_grad1{ background-image:var(--crGrad1);}
.c_grad2{ background-image:var(--crGrad2);}

.fs10{ font-size:0.625em !important;}
.fs11{ font-size:0.688em !important;}
.fs12{ font-size:0.750em !important;}
.fs13{ font-size:0.813em !important;}
.fs14{ font-size:0.875em !important;}
.fs15{ font-size:0.938em !important;}
.fs16{ font-size:1.000em !important;}
.fs17{ font-size:1.063em !important;}
.fs18{ font-size:1.125em !important;}
.fs19{ font-size:1.188em !important;}
.fs20{ font-size:1.250em !important;}

.fwT { font-weight:100;}
.fwEL{ font-weight:200;}
.fwL { font-weight:300;}
.fwR { font-weight:400;}
.fwM { font-weight:500;}
.fwB { font-weight:700;}
.fwBL{ font-weight:800;}
.fwEB{ font-weight:900;}

.fstL { text-decoration:underline;}
.fstLV{ text-decoration:line-through;}
.fstUC{ text-transform:uppercase;}
.fstIT{ font-style:italic;}
.fstS0{ letter-spacing:0 !important;}
.fstS1{ letter-spacing:-.063em !important;}
.fstS2{ letter-spacing:-.125em !important;}

.lh0{ line-height:1;}
.lh1{ line-height:1.2;}
.lh2{ line-height:1.6;}
.lh3{ line-height:1.8;}

.sec1 > * { width:100% !important;}
.sec2 > * { width:50% !important;}
.sec3 > * { width:33.33% !important;}
.sec4 > * { width:25% !important;}
.sec5 > * { width:20% !important;}
.sec6 > * { width:16.66% !important;}
.sec7 > * { width:14.28% !important;}
.sec8 > * { width:12.5% !important;}
.sec9 > * { width:11.11% !important;}
.sec10 > *{ width:10% !important;}

.dataLink:before{ content:attr(data-link)}
.dataLink:hover:before,
.dataLink:focus:before{ text-decoration:underline}

/**/
.swiperBtn{ width:2em; height:2em; position: static; display:flex; align-items:center; justify-content:center; z-index:100; cursor:pointer; font-size:1em; color:#111; opacity:.5; transition:.3s}
.swiperBtn.prev{ left:0}
.swiperBtn.next{ right:0}
.swiperBtn:before{font-family:xeicon}
.swiperBtn.prev:before{content:"\e93d"}
.swiperBtn.next:before{content:"\e940"}
.swiperBtn.pause:before{content:"\ea3b"}
.swiperBtn.play:before{content:"\ea3e"}
.swiperBtn:focus,
.swiperBtn:hover,
.swiperBtn.play{ opacity:1}
.swiperBtn.st1{ border:1px solid #ddd; border-radius:.25em}
.a1 .swiperBtn.st1{ margin-right:-1px}
.a1 .swiperBtn.st1.pause,
.a1 .swiperBtn.st1.play{ border-radius:.25em 0 0 .25em}
.a1 .swiperBtn.st1.prev{ border-radius:0}
.a1 .swiperBtn.st1.next{ border-radius:0 .25em .25em 0}

.swiperBtn.white{ color:#fff; opacity:1}
.swiperBtn.st1.white{ border-color:rgba(0,0,0,.5)}
/* .swiperBtn.st1.white:focus,
.swiperBtn.st1.white:hover,
.swiperBtn.st1.white.play{ background:#a6c108; border-color:rgba(255,255,255,.2)} */
.swiperBtn.st1.white:hover,
.swiperBtn.st1.white.play{ background:#a6c108; border-color:rgba(255,255,255,.2)}

.swiperBtn.black{ background:rgba(0,0,0,.8); border-color:#333; color:#fff; opacity:1;}
.swiperBtn.st1.black:focus,
.swiperBtn.st1.black:hover,
.swiperBtn.st1.black.play{ background:#a6c108; border-color:rgba(255,255,255,.2)}

.swiperBtn.s1{ font-size:1.5em}
.swiperBtn.s2{ font-size:1.188em}
.swiperBtn.c1{ opacity:1; background:#fff; color:#999; border-left:1px solid rgba(0,0,0,.05)}
.swiperBtn.c1:hover{ opacity:1; background:#f1f1f1; color:#111}
.swiperBtn.c2{ background:rgba(0,0,0,.2); color:#fff}
.swiperBtn.c2:hover,
.swiperBtn.c2.play{ background:rgba(0,0,0,.5)}
.swiperBtn.round{ border-radius:50%}
.swiperPauseWrap .play{ display: none}
.swiperPauseWrap.pause .play{ display: flex}
.swiperPauseWrap.pause .pause{ display: none}

.swiperPG .paging{ gap:0 1.25em;}
.swiperPG .paging > span{ position:relative; width:1.125em; height:1.125em; margin:0 0; background:transparent; border:1px solid transparent; border-radius:50%; opacity:1; transition:.3s}
.swiperPG .paging > span:before{ content:""; position:absolute; top:3px; bottom:3px; left:3px; right:3px; background:#000; border-radius:50%; opacity:.4; transition:.3s}
.swiperPG .paging > span.swiper-pagination-bullet-active{ border-color:var(--siteC2);}
.swiperPG .paging > span.swiper-pagination-bullet-active:before{ background:var(--siteC2); opacity:1 !important;}
.swiperPG.st1 .paging{ gap:0 .5em;}
.swiperPG.st1 .paging > span{ width:5.5em; height:3px; border-radius:0; margin:0; position:relative; background:#fff; border:none;}
.swiperPG.st1 .paging > span:not(.swiper-pagination-bullet-active){ background:#fff; opacity:.8;}
.swiperPG.st1 .paging > span:before{ display:none;}
.swiperPG.st1 .paging > span:after{ content:""; position:absolute; left:0; top:0; width:0; height:100%; background:#04857a}
.swiperPG.st1 .paging > span.swiper-pagination-bullet-active:after{ width:100%; transition:4s}

.swiperPG .progress{ position:relative; width:100%; height:3px; background:none;}
.swiperPG .progress:before{ content:""; position:absolute; top:1px; left:0; width:100%; height:1px; background:rgba(0,0,0,.1);}
.swiperPG .progress > span{ position:absolute; left:0; height:100%; background:var(--siteC); transition:.4s !important;}

.swiperBtn.white{ color:#000; opacity:1}
.swiperBtn.white .total *{ color:inherit;}
.swiperBtn.st1.white{ border-color:rgba(0,0,0,.5);}
.swiperBtn.st1.white:hover,
.swiperBtn.st1.white.play{ background:var(--siteC2); border-color:var(--siteC2);}
.swiperPG.white{ filter:var(--crWhitefil);}

/**/
#div_loading{ position:fixed; text-align:center; top:50%; left:50%; margin-top:0px; margin-left:0px; z-index:1000;}
#div_loading .xi{ font-size:3em;-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}
#div_loading .tt{ font-size:1em}

.scrollAni{ opacity:0}
.scrollAni.on{ opacity:1; transition:1s; transition-timing-function:ease-out;}
.scrollAni.on.ts2{ transition:2s}
.scrollAni.fade{ opacity:0}
.scrollAni.fade.on{ opacity:1}
.scrollAni.moveL{ transform:translateX(-10rem); }
.scrollAni.moveL.on{ transform:translateX(0); }
.scrollAni.moveR{ transform:translateX(10rem)}
.scrollAni.moveR.on{ transform:translateX(0)}
.scrollAni.moveT{ transform:translateY(10rem)}
.scrollAni.moveT.on{ transform:translateY(0)}
.scrollAni.moveB{ transform:translateY(-10rem)}
.scrollAni.moveB.on{ transform:translateY(0)}
.scrollAni.width{ width:0}
.scrollAni.width.on{ width:100%}
.scrollAni.scale.on{ transform:scale(1)}
.scrollAni.scale{ transform:scale(0)}
.scrollAni.scale.on{ transform:scale(1)}
.scrollAni.scaleX{ transform:scaleX(0); transform-origin:left top}
.scrollAni.scaleX.on{ transform:scaleX(1)}
.scrollAni.scaleX.right{transform-origin:right top}
.scrollAni.scaleY{ transform:scaleY(0); transform-origin:left top}
.scrollAni.scaleY.on{ transform:scaleY(1)}
.scrollAni.zoomOut{ transform:scale(1.3)}
.scrollAni.zoomOut.on{ transform:scale(1)}
.scrollAni.zoomIn{ transform:scale(.7); border-radius:1em}
.scrollAni.zoomIn.on{ transform:scale(1); border-radius:0}
.scrollAni.radius{ border-radius:3em; transition:3s;}
.scrollAni.radius.on{ border-radius:0}
.scrollAni.delay.on:nth-child(2){ transition-delay:.3s}
.scrollAni.delay.on:nth-child(3){ transition-delay:.6s}
.scrollAni.delay.on:nth-child(4){ transition-delay:.9s}
.scrollAni.delay.on:nth-child(5){ transition-delay:1.2s}
.scrollAni.delay.on:nth-child(6){ transition-delay:1.5s}
.scrollAni.delay.on:nth-child(7){ transition-delay:1.8s}
.scrollAni.delay.on:nth-child(8){ transition-delay:2.1s}
.scrollAni.delay.on:nth-child(9){ transition-delay:2.4s}
.scrollAni.delay.on:nth-child(10){ transition-delay:2.7s}