@charset "utf-8";
/* CSS Document */
.box0{ width:1800px; max-width:96%; margin:0 auto;}
.box1{ width:1400px; max-width:96%; margin:0 auto;}
.box2{ width: 1200px; max-width: 96%; margin: 0 auto;}
html:not(.pop) body{ min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)}
html {scroll-behavior: smooth;}
.pcHide{ display:none;}
.moHide{}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none !important;}
.gnb .blank .arrow:before{ content:"\e980";}

.sns .list{ gap:.5em;}
.sns .list > li .in{ width:2em; height:2em; background:#fff; border-radius:50%; color:#000; transition:.2s;}
.sns .list > li .in .xi{ font-size:1em;}
.sns .list > li .in .tt{ display:none;}
.sns .list > li .in:hover{ background:#ff6c31; color:#fff;}

.fullH{ height:calc(100vh); box-sizing:border-box;}
.fullMH{ min-height:calc(100vh) !important; box-sizing:border-box;}

.filW{ filter:brightness(0) invert(1);}/*화이트*/
.filB{ filter:brightness(0) invert(0);}/*블랙*/
.filRE{ filter:invert(1);}/*색상반전*/


/*header*/
.headT{ padding-top:6.875em;}
.headH,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1{ height:6.875em; transition:height .2s, background .2s; box-sizing:border-box;}
/* #header .gnb_wrap .gnb > li.m_product .dp2 {display: none;} */

#header{ z-index:999; position:fixed; top:0; left:0; width:100%;}
#header:before{ content:""; position:absolute; left:0; top:calc(6.875em - 1px); width:100%; height:1px; background:#fff; opacity:0; transition:.2s;}
#header .inner{ color:#fff;}
#header .logo,
#header .all_wrap .all_btn{ filter:brightness(0) invert(1);}

#header .logo{ position:relative;}
#header .logo > .in img{ width:10em; transition:.2s; transform-origin:left center;}

#header .gnb_wrap { margin-left: auto; margin-right: 10em; }
#header .gnb_wrap .gnb > li{ overflow:hidden;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; padding:0 3.5em;}
#header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.250em; font-weight:500; text-transform:uppercase;}
#header .gnb_wrap .gnb > li .dp1:after{ content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#ff6c31; opacity:0; transform:scaleX(0); transition:transform .3s;}
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1; transform:scaleX(.7);}
#header:not(.active) .gnb_wrap .gnb > li .dp1:after{ filter:brightness(0) invert(1);}

#header .gnb_wrap .gnb > li .dp2{ display:block; max-width:9.25em; margin:0 auto; transition:.2s;}
#header .gnb_wrap .gnb > li .dp2 > li > a{ display:block; padding:.75em .5em; transition:.2s;}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.063em;}
#header .gnb_wrap .gnb > li .dp2 > li > .blank .in{ display:inline-flex; align-items:center; gap:0 .25em;}
#header .gnb_wrap .gnb > li .dp2 > li > .blank .arrow{ font-size:.938em;}
#header .gnb_wrap .gnb > li .dp2 > li.act > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ background:#f5f5f5;}
#header .gnb_wrap .gnb > li.m_product  .dp2 > li.on > a {background: #fff;}
#header .gnb_wrap .gnb > li .dp3{ display:none;}

#header .side_wrap{ margin-left: 5%; gap:0 2em;}
#header .side_wrap .sns .list{ gap:0;}
#header .side_wrap .sns .list > li .in{ font-size:1.063em;}
#header .side_wrap .sns .list > li .in .xi{ font-size:1.125em;}
#header .side_wrap .sns .list > li .in:not(:hover){ background:transparent;}
#header .side_wrap .sns .list > li .in{ color:#fff;}

#header .side_wrap .lang{ position:relative;}
#header .side_wrap .lang .lang_btn{ height:2.5em; padding:0 1em; gap:0 .5em; border:1px solid rgba(255,255,255,.15); border-radius:3em; transition: .2s; position: relative; background: transparent; z-index: 10;}
/* #header .side_wrap .lang.on .lang_btn {border-bottom-color: transparent;} */
#header .side_wrap .lang .lang_btn .tt{ font-size:.938em; font-weight:500;}
#header .side_wrap .lang .lang_btn .arrow{ font-size:1.125em; transition:transform .2s;}
#header .side_wrap .lang .lang_btn .arrow:before{ content:"\e942";}
#header .side_wrap .lang .drop{ opacity: 0; visibility: hidden; position:absolute; top:100%; left:0; padding:1.5em .5em .5em .5em; width:100%; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:0 0 1em 1em; box-sizing:border-box; text-align:center; color:#000; transition: .2s; margin-top: -1em;}
#header .side_wrap .lang .drop > li > a{ display:block; padding:.25em .25em; transition:.2s;}
#header .side_wrap .lang .drop > li > a .tt{ font-size:.875em;}
#header .side_wrap .lang .drop > li > a:hover{ background:rgba(0,0,0,.15);}
#header .side_wrap .lang.on .drop{ opacity: 1; visibility: visible; box-shadow: 5px 5px 10px rgba(0,0,0,.1);}
#header .side_wrap .lang.on .lang_btn .arrow{ transform:rotate(-180deg);}

#header.active .side_wrap .lang .drop > li > a:hover{ background:#f5f5f5;}
#header.active .side_wrap .lang .lang_btn {border: 1px solid rgba(0,0,0,.1); }
#header.active .side_wrap .lang .drop {background: #fff; border: 1px solid rgba(0,0,0,.1); border-top-color: transparent;}

#header:not(.active) .side_wrap .lang .lang_btn{border-color: 1px solid rgba(0,0,0,.15);}
#header:not(.active) .side_wrap .lang .drop{ background: transparent; border-color:rgba(255,255,255,.15); color:#fff; border-top-color: transparent;}
/* #header:not(.active) .side_wrap .lang .drop > li > a:hover{ background:rgba(0,0,0,.4);} */


#header .util_wrap{ gap:0 1.5em;}
#header .util_wrap > li .in .ico{ font-size:1.750em;}

#header .util_search{ position:fixed; top:0; left:0; width:100%; z-index:99; opacity:0; visibility:hidden; pointer-events:none;}
#header .util_search .wrap_bg{ position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5;}
#header .util_search .wrap_con{ position:absolute; top:0; left:0; width:100%; padding:6em 0; background:#fff; box-shadow:0 .5em 1em rgba(0,0,0,.2); text-align:center; color:#000;}
#header .util_search .wrap_con .wrap_in{ gap:2em 0; width:800px;}
#header .util_search .wrap_con .tit .tt{ font-size:2.500em;}
#header .util_search .wrap_con .search{ position:relative;}
#header .util_search .wrap_con .search .inp{ width:3.5em; height:3.5em; box-sizing:border-box; border:none; font-size:1.375em;}
#header .util_search .wrap_con .search .inp.txt{ flex:1; padding:0 1em; background:#f5f5f5;}
#header .util_search .wrap_con .search .inp.btn{ background:#ff6c31; color:#fff;}
#header .util_search .hot_keyword{ gap:.25em;}
#header .util_search .hot_keyword > li{}
#header .util_search .hot_keyword > li .in{ padding:0 1em; height:2.5em; border:1px solid #eee; border-radius:6em; color:#555; transition:.2s;}
#header .util_search .hot_keyword > li .in:hover{ background:#ff6c31; border-color:#ff6c31; color:#fff;}

#header.searchOn .headH{ height:6.875em !important;}
#header.searchOn .logo{ z-index:999; filter:none;}
#header.searchOn .logo > .in img{ transform:scale(1) !important;}
#header.searchOn .side_wrap{ position:relative;}
#header.searchOn .util_wrap .search_btn{ position:absolute; z-index:999; top:2em; right:3vw; color:#000;}
#header.searchOn .util_wrap .search_btn .ico{ font-size:2.500em; transition:.4s;}
#header.searchOn .util_wrap .search_btn .ico:before{ content:"\e921";}
#header.searchOn .util_wrap .search_btn:hover .ico{ transform:rotate(180deg);}
#header.searchOn .util_search{ opacity:1; visibility:visible; pointer-events:auto;}

#header .all_wrap{ color:#000;}
#header .all_wrap .all{ width:2.5em;}
#header .all_wrap .all_btn{ position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto;}
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display:block; width:100%; height:1px; background:#000; transition:.2s, background 0s;}
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0;}
#header .all_wrap .all_btn .ham:before{ top:calc(50% - 1px); width:75%;}
#header .all_wrap .all_btn .ham:after { top:calc(100% - 2px); width:88%;}
#header .all_wrap .all_btn:hover .ham:before{ width:100%;}
#header .all_wrap .all_btn:hover .ham:after { width:100%;}

#header .all_wrap .all_layer{ position:fixed; z-index:-1; top:0; left:0; width:100%; height:100vh; background:#fff; opacity:0; visibility:hidden; pointer-events:none;}
/* #header .all_wrap .all_layer .all_inner{ gap:0 5em; min-height:100%; padding:18vh 0 12vh 0;} */
#header .all_wrap .all_layer .all_inner{ gap:0 5em; min-height:100%; padding:0;}
#header .all_wrap .all_layer .all_inner > .wrap_info{ width:20%; opacity:0;}
/* #header .all_wrap .all_layer .all_inner > .wrap_in{ flex:1;} */
#header .all_wrap .all_layer .wrap_top .all_logo{ position:fixed; top:4vh; left:3em; filter: brightness(0) invert(1);}
#header .all_wrap .all_layer .wrap_top .all_logo img{ width:7.5em;}
#header .all_wrap .all_layer .wrap_info {gap: 0 3em; margin-top: 3em; opacity:0; transform:translateY(2em);}
#header .all_wrap .all_layer .wrap_info > li{ padding:1em 0;}
#header .all_wrap .all_layer .wrap_info > li:first-child {flex: 1 1 100%;}
#header .all_wrap .all_layer .wrap_info > li .tt{ padding:.25em 0;}
#header .all_wrap .all_layer .wrap_info > li .t1{ font-size:1.063em; font-weight:700; text-transform:uppercase;}
#header .all_wrap .all_layer .wrap_info > li .t2{ font-size:1.250em; color:#444;}

#header .all_wrap .all_layer .wrap_middle{ position:relative; opacity:0; transform:translateY(2em);}
#header .all_wrap .all_layer .wrap_middle .gnb{ display:block; counter-reset:gnbListIdx;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{ counter-increment:gnbListIdx;}
#header .all_wrap .all_layer .wrap_middle .gnb > li ul{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb > li a{ display:block; text-align:left !important;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1{ position:relative; width:35%; padding:2em 0; border-bottom:1px solid #eee;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1:before{ content:counter(gnbListIdx)'.'; position:absolute; left:-1.5em; margin-top:-.25em; font-size:1.375em; font-weight:500; color:#ff6c31;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1:after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:3px; background:#ff6c31; transform:scaleX(0); transition:.2s; transform-origin:left center;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size:2.000em; font-weight:700;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2{ position:absolute; top:0; left:40%; right:0; min-height:100%; margin-bottom:4vw; padding:2.5em 4em; background:#f5f5f5; opacity:0; visibility:hidden; transition:.5s ease;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li{ border-bottom:1px dashed #ccc;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a{ padding:1.25em 0; color:#444;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{ font-size:1.375em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > .blank .arrow{ margin-left:.5em; font-size:1.125em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3{ padding:0 1em 2em 1em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a{ position:relative; padding:.625em 0 .625em 1em; color:#444;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a:before{ content:""; position:absolute; top:1em; left:0; width:5px; height:5px; background:#ff6c31; border-radius:50%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a .tt{ font-size:1.125em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1:after{ transform:scaleX(1);}
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp2{ opacity:1; visibility:visible;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.on > a{ color:#000;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .tt,
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.on > a .tt{ text-decoration:underline;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li.act > a,
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li.on > a{ color:#ff6c31;}

.allGnbOn{ overflow-y:hidden}
.allGnbOn body{ overflow-y:scroll}
.allGnbOn #header .all_wrap .all_btn{ z-index:999; position:fixed; top:2em; right:3em; width:3.5em; height:3.5em; filter:none;}
.allGnbOn #header .all_wrap .all_btn .ham{ background:transparent !important; transition:0s;}
.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important;}
.allGnbOn #header .all_wrap .all_btn .ham:before{ transform:rotate(45deg);}
.allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg);}
.allGnbOn #header .all_wrap .all_layer{ z-index:99; opacity:1; visibility:visible; pointer-events:auto;}
.allGnbOn #header .all_wrap .all_layer .all_inner > .wrap_info{ opacity:1; transition:1s; transition-delay:.2s;}
.allGnbOn #header .all_wrap .all_layer .wrap_middle{ opacity:1; transform:translate(0); transition:1s; transition-delay:.2s;}
.allGnbOn #header .all_wrap .all_layer .wrap_info {opacity:1; transform:translate(0); transition:1s; transition-delay:.2s;}
#header .all_wrap .all_layer .all_inner > .wrap-bg{ width:40%; /* padding:15vh 4vw 3em 4vw; */}
#header .all_wrap .all_layer .all_inner > .wrap_in{ flex:1 1 50%; padding:15vh 3em 3em; overflow:hidden;}

#header .all_wrap .all_layer .all_inner > .wrap-bg .img {flex: 1;}
#header .all_wrap .all_layer .all_inner > .wrap-bg .cs{ padding-top:2em; font-size:1.188em;}
.scroll .headH,
.scroll #header .gnb_wrap .gnb > li,
.scroll #header .gnb_wrap .gnb > li .dp1{ height:5em;}
.scroll #header .logo > .in img{ transform:scale(.85,.85);}
.scroll #header:before{ top:calc(5em - 1px);}

.wrapHide{ height:5em;}
.stickyT{ position:sticky !important; top:5em;}

.white #header,
#header.active{ background:#fff;}
.white #header .inner,
#header.active .inner{ color:#000;}
.white #header .logo,
.white #header .all_wrap .all_btn,
#header.active .logo,
#header.active .all_wrap .all_btn{ filter:none;}
.white #header .side_wrap .sns .list > li .in:not(:hover),
#header.active .side_wrap .sns .list > li .in:not(:hover){ color:#000;}
.white #header .gnb_wrap .gnb > li.act .dp1,
.white #header .gnb_wrap .gnb > li.on .dp1,
#header.active .gnb_wrap .gnb > li.act .dp1,
#header.active .gnb_wrap .gnb > li.on .dp1{ color:#ff6c31;}

#header.gnbOpen{ box-shadow:0 4px 1em rgba(0,0,0,.15);}
#header.gnbOpen:before{ background:#000; opacity:.1;}
#header.gnbOpen .gnb_wrap .gnb > li{ height:auto;}
#header.gnbOpen .gnb_wrap .gnb .dp2{ padding:2em 0;}


/*footer*/
#footer .goTop{ z-index:999; position:fixed; right:0; bottom:0; width:3.5em; height:3.5em; text-align:center; background:#8a2200; color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s}
#footer .goTop .xi{ font-size:1.5em; transition:.3s}
#footer .goTop:hover .xi{ transform:translateY(-.25em)}
.scroll #footer .goTop{ opacity:1; transform:translateY(0)}

#footer{ background:#222327; color:#fff;}
#footer .logo_wrap{ padding:2em 0;}
#footer .logo_wrap .logo img{ width:10em;}
#footer .logo_wrap .family{ position:relative; z-index:99;}
#footer .logo_wrap .family > .btn{ width:14em; height:3em; padding:0 1em; text-transform:uppercase;}
#footer .logo_wrap .family > .btn .xi{ font-size:1.125em; transition:.2s;}
#footer .logo_wrap .family > .list{ position:absolute; left:0; bottom:100%; width:100%; max-height:20em; padding:1em 1em; background:#000; box-sizing:border-box; display:none;}
#footer .logo_wrap .family > .list > li > a{ display:block; padding:.5em 0; font-size:.938em;}
#footer .logo_wrap .family > .list > li > a:hover{ text-decoration:underline;}
#footer .logo_wrap .family.on > .btn{ background:#000;}
#footer .logo_wrap .family.on > .btn .xi{ transform:rotate(45deg);}
#footer .logo_wrap .family.on > .list{ display:block;}

#footer .info_wrap{}
#footer .info_wrap .inner{ padding:3em 0 4em; border-top:1px solid rgba(255,255,255,.1);}
#footer .info_wrap .menu{ gap:0 3em}
#footer .info_wrap .menu > li > a{ font-size:1.125em; position:relative;}
#footer .info_wrap .menu > li + li > a:before{ content:"·"; position:absolute; left:-1.5em; top:0; color:#fff;}
#footer .info_wrap .menu > li > a.point{ color:#ff6c31; font-weight:500;}
#footer .info_wrap .menu > li > a:hover{ text-decoration:underline}

#footer .info_wrap .wrap_in{ gap:1em; margin-top:2.5em;}
#footer .info_wrap .info{ flex:1;}
#footer .info_wrap .info > li{ float:left; margin-right:2.5em; margin-bottom:.625em; font-size:.938em; font-weight:300;}
#footer .info_wrap .info > li.point{ font-weight:500;}
#footer .info_wrap .info > li.br{ clear:left}
#footer .info_wrap .info > li.copyright{ font-size:.813em; opacity:.6; text-transform:uppercase; margin-top:1.5em}
#footer .info_wrap .info:after{ content:""; display:block; clear:both}
#footer .info_wrap .banner{ gap:.25em;}
#footer .info_wrap .banner > li{}
#footer .info_wrap .banner > li .in{ padding:.5em .75em; background:#fff; border-radius:.625em; overflow:hidden;}
#footer .info_wrap .banner > li .in img{ height:1.875em;}

/*contents*/
#contents{}
#contents .sub_page_top{ position:relative; height:40em; overflow:hidden;}
#contents .sub_page_top > .bg{ position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(1.07); transition:3.5s;}
#contents .sub_page_top > .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg,rgba(0,0,0,.5) 40%,rgba(0,0,0,.15) 100%);}
.load #contents .sub_page_top > .bg{ transform:scale(1);}
#contents .sub_page_tit{ position:relative; flex:1; color:#fff;}
#contents .sub_page_tit .wrap_in{ gap:1em 0;}
#contents .sub_page_tit .sub_en .tt{ font-size:1.875em;}
#contents .sub_page_tit .sub_tit .tt{ font-size:3.500em; font-weight:700;}
#contents .sub_page_tit .sub_txt{ max-width:45%;}
#contents .sub_page_tit .sub_txt .tt{ font-size:1.188em; line-height:1.6; opacity:.8;}
#contents .sub_page_menu{ position:relative; padding:2em 0; background:rgba(0,0,0,.4);}
#contents .sub_page_menu > .box1 {justify-content: center; position: relative;}
#contents .sub_page_menu .gnb{ display:block;}
#contents .sub_page_menu .gnb .dp3,
#contents .sub_page_menu .gnb .dp4{ display:none;}
#contents .sub_page_menu .gnb .dp2{}
#contents .sub_page_menu .gnb .dp2 > li{}
#contents .sub_page_menu .gnb .dp2 > li > a{ padding:0 3.5em; border:solid rgba(255,255,255,.6); border-width:0 1px 0 0; color:#fff;}
.dp1_customer  #contents .sub_page_menu .gnb .dp2 > li > a{ padding:0 2.5em; border:solid rgba(255,255,255,.6); border-width:0 1px 0 0; color:#fff;}
#contents .sub_page_menu .gnb .dp2 > li:first-of-type > a{ border-width:0 1px 0 1px;}
#contents .sub_page_menu .gnb .dp2 > li > a .tt{ font-size:1.313em; font-weight:500;}
#contents .sub_page_menu .gnb .dp2 > li > .blank .in{ display:flex; align-items:center; gap:0 1em;}
#contents .sub_page_menu .gnb .dp2 > li > .blank .xi{ font-size:1.188em;}
#contents .sub_page_menu .gnb .dp2 > li > a .in{ position:relative; padding:0 .5em;}
#contents .sub_page_menu .gnb .dp2 > li > a .in:after{ content:""; position:absolute; left:0; bottom:-.75em; width:100%; height:3px; background:#ff6c31; transform:scaleX(0); transition:transform .3s;}
#contents .sub_page_menu .gnb .dp2 > li.act > a .in:after,
#contents .sub_page_menu .gnb .dp2 > li.on > a .in:after{ transform:scaleX(1);}

#contents .sub_page_menu .nav{ color:#fff; position: absolute; right: 0;}
#contents .sub_page_menu .nav > li{}
#contents .sub_page_menu .nav > li .xi{ width:1.5em; height:1.5em; background:#ff6c31; border-radius:50%; font-size:1.125em;}
#contents .sub_page_menu .nav > li .xi:before{ line-height:1.125em;}
#contents .sub_page_menu .nav > li .tt{ vertical-align:middle;}
#contents .sub_page_menu .nav > li + li:before{ content:"\e940"; font-family:xeicon; padding:0 .5em; vertical-align:middle; opacity:.8;}
#contents .sub_page_menu .nav > li:last-child .tt{ text-decoration:underline;}

.white #contents .sub_page_top{ height:auto; padding:3em 0 1em 0;}
.white #contents .sub_page_top > .bg{ display:none;}
.white #contents .sub_page_tit{ color:#000;}

#contents .doc{ padding:3em 0 10em;}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1{ display:none!important}

.dp2on .gnb > li.on{ display:block!important}
.dp2on .gnb > li.on .dp1 {}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

/*SUB PAGE*******************/
/*inc*/
.page_con{ padding:6em 0;}
.page_con:last-child{ padding-bottom:10em;}
.page_con.bg1{ background:#fafafa;}
.page_con.bg2{ position:relative;}
.page_con.bg2:before{ content:""; position:absolute; top:0; left:0; bottom:-4em; width:30vw; background:#ff6c31;}
.page_con.line{ border:solid #ddd; border-width:1px 0;}
.page_pd{ padding:0 0 0 4vw;}

.page_txt:not(:last-child){ margin-bottom:3em;}
.page_txt.m1{ margin-bottom:1.5em;}
.page_txt.m2{ margin-bottom:5em;}
.page_txt.b1{ padding:1em 1.5em; background:#f5f5f5;}
.page_txt .tit.icon{ position:relative;}
.page_txt .tit.icon:before{ content:"";}

.page_txt .tit + .tit{ margin-top:1em;}
.page_txt .tit + .txt{ margin-top:2em;}
.page_txt > .txt{ margin-top:2em;}
.page_txt > .txt:first-child{ margin-top:0;}

.page_txt .line{}
.page_txt .line:before{ content:""; display:inline-block; width:1px; height:2px; background:#ff6c31;}
.page_txt .line.w{ margin:1.75em 0;}
.page_txt .line.w:before{ width:2.25em;}
.page_txt .line.h{ margin:1.5em .125em;}
.page_txt .line.h:before{ height:1.5em;}
.page_txt .line:first-child{ margin-top:0;}
.page_txt .line:last-child{ margin-bottom:0;}
.page_txt .line + .tit,
.page_txt .line + .txt{ margin-top:0;}

.page_col{ gap:2em 6em;}
.page_col.gp1{ gap:2em 8em;}
.page_col > li{}
.page_col > li.w1{ width:35%;}
.page_col > li.w2{ width:28%;}
.page_col + .page_col{ margin-top:8em;}
.page_col > li .p1{ padding:4em 0 5em 0;}
.page_col > li .round{ border-radius:2em; overflow:hidden;}
.page_col > li .wrap_img{ position:relative; height:100%;}
.page_col > li .wrap_logo{ width:10em;}
.page_col > li .wrap_logo img{ width:100%;}

.page_list{ counter-reset:subListIdx;}
.page_list > li{ counter-increment:subListIdx;}
.page_list > li .num:before{ content:counter(subListIdx);}

.page_list.st1{}
.page_list.st1 > li{ padding:1.25em .5em; border:dashed #ddd; border-width:0 0 1px 0;}
.page_list.st1 > li:first-child{ border-top:3px solid #ff6c31;}
.page_list.st1 > li .tit{ position:relative; width:16em; margin-bottom:auto; padding-left:1em;}
.page_list.st1 > li .tit:before{ content:""; position:absolute; top:.438em; left:0; width:.313em; height:.313em; background:#ff6c31; border-radius:50%;}
.page_list.st1 > li .con{ flex:1;}
.page_list.st1 > li .t1{ font-size:1.125em; font-weight:600;}
.page_list.st1 > li .t2{ font-size:1.188em; color:#444;}

/*history*/
.history_tab{ position:relative;}
.history_tab:before{ content:""; position:absolute; top:0; left:50%; width:2px; height:100%; background:#ff6c31;}
.history_tab > li{ width:100%; margin:0 auto; transition:.3s;}
.history_tab > li:not(.on){ width:50%;}
.history_tab > li + li{ margin-top:1.5em;}
.history_tab > li .in{ display:block; color:#fff;}
.history_tab > li .in .img{ position:absolute; top:0; left:0; width:100%; height:100%;}
.history_tab > li .in .img:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.3; transition:.3s;}
.history_tab > li .in .tt{ position:relative; padding:.5em .5em; font-size:2.000em; transition:.3s;}
.history_tab > li:not(.on) .in .tt{ font-size:1em;}
.history_tab > li:hover .in .img:before,
.history_tab > li.on .in .img:before{ background:#ff6c31; opacity:.8;}

.history_wrap{}
.history_wrap .his_list{}
.history_wrap .his_list > li{ padding:2em 0; border:solid #e5e5e5; border-width:0 0 1px 0;}
.history_wrap .his_list > li:first-child{ border-width:1px 0;}
.history_wrap .his_list > li .year{ width:5em; font-size:1.875em; color:#ff6c31;}
.history_wrap .his_list > li .list{ flex:1;}
.history_wrap .his_list > li .list > li{ gap:0 .5em; padding:.5em 0; color:#555; line-height:1.5;}
.history_wrap .his_list > li .list > li:before{ content:""; margin-top:.625em; width:.313em; height:.313em; background:#ff6c31; border-radius:50%;}
.history_wrap .his_list > li .list > li .date{ width:5.5em; font-size:1.125em; font-weight:600;}
.history_wrap .his_list > li .list > li .txt{ flex:1; font-size:1.125em;}


/*product*/
.prod_tab{ padding:4em 0 0 0;}
.prod_tab .tab{ padding:0 0 1px 1px;}
.prod_tab .tab > li{}
.prod_tab .tab > li .in{ gap:0 .5em; position:relative; padding:0 4em; height:4em; margin:0 0 -1px -1px; border:1px solid rgba(0,0,0,.1); color:#777; transition:.2s;}
.prod_tab .tab > li .in:before{ content:""; display:block; width:.375em; height:.375em; background:#ff6c31; border-radius:50%;}
.prod_tab .tab > li .in .tt{ font-size:1.250em; font-weight:500;}
.prod_tab .tab > li:hover,
.prod_tab .tab > li.on{ position:relative; z-index:2;}
.prod_tab .tab > li:hover .in,
.prod_tab .tab > li.on .in{ background:#ff6c31; color:#fff;}
.prod_tab .tab > li:hover .in:before,
.prod_tab .tab > li.on .in:before{ background:#fff;}

/**/
.agree_box{ border-radius:.5em; border:1px solid #ddd; padding:1.5em 2em; color:#555; line-height:1.8;}
.agree_box.h1{ height:12em; overflow-y:auto;}
.agree_box p{ padding:.5em 0;}
.agree_box strong{ font-size:1.125em; color:#000;}


/***********************/
/*POPUP******************/
.popWrap.def{ width:52em;}
.popWrap.mem{ width:28em;}
.popWrap.msg{ width:38em;}


/***********************/
/*MAIN******************/
.visualSlider .el{ position:relative; overflow:hidden; height:100vh;}
.visualSlider .el .vod{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.visualSlider .el .vod_wrap:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4);}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:calc(100% + 8em); height:100%; opacity:0; transition:3s, opacity 5s;}
.visualSlider .el .bg:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4);}
.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ left:-4em; opacity:1; transition:5s, opacity 1s;}
.visualSlider_wrap .slogan{ position:absolute; left:0; width:100%; top:50vh; z-index:10; color:#fff;}
.visualSlider_wrap .slogan .wrap_in{}
.visualSlider_wrap .slogan .t1{ font-size:2.000em; margin-bottom:1em;}
.visualSlider_wrap .slogan .t2{ font-size:4.250em; font-weight:600; line-height:1.1;}
.visualSlider_wrap .slogan .t3{ font-size:1.375em; line-height:1.5; margin-top:1.5em; opacity:.8;}
.visualSlider_wrap .slogan .tt{ opacity:0; transform:translateY(4em); transition:1s;}
.visualSlider_wrap .el.swiper-slide-active .slogan .tt{ opacity:1; transform:translateY(0); transition:2s;}
.visualSlider_wrap .el.swiper-slide-active .slogan .tt:nth-child(1){ transition-delay:.2s;}
.visualSlider_wrap .el.swiper-slide-active .slogan .tt:nth-child(2){ transition-delay:.8s;}
.visualSlider_wrap .el.swiper-slide-active .slogan .tt:nth-child(3){ transition-delay:1.2s;}

.visualSlider_wrap .prod-visual {position: absolute; right: 6vw; top: 35vh; }
.visualSlider_wrap .prod-visual .in-wrap {width: 25vw; height: 25vw; overflow: hidden; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); box-shadow: 0 0 30px rgba(0,0,0,.2); transition: all 3s; opacity: 0;}
.visualSlider_wrap .el.swiper-slide-active .prod-visual .in-wrap {opacity: 1;}
.visualSlider_wrap .prod-visual .link-btn {position: absolute; top: 75%; left: 5%; z-index: 111; transition: all 3s; opacity: 0;}
.visualSlider_wrap .prod-visual .link-btn .btn {padding: 0.5em; color: #fff; background: #ff6c31; border: 2px solid #ff6c31; border-radius: 50%; overflow: hidden; font-size: 2em; transition: all 0.3s; transform: rotate(0); }
.visualSlider_wrap .el.swiper-slide-active .prod-visual .link-btn {opacity: 1;}
.visualSlider_wrap .prod-visual .link-btn .btn:hover {background: #fff; color: #ff6c31; transform: rotate(90deg);}


.visualSlider_control{ position:absolute; left:0; bottom:4vh; width:100%; z-index:10}
.visualSlider_control .swiperPG{ margin-right:2em;}
.visualSlider_control .swiperBtn{}

.visualSlider_arrow{ position:absolute; top:50%; left:0; width:100%; z-index:10;}
.visualSlider_arrow .swiperBtn{ position:absolute; top:0; transform:translateY(-50%); font-size:4.500em; cursor:pointer; opacity:.6; transition:.2s;}
.visualSlider_arrow .swiperBtn.prev{ left:1vw;}
.visualSlider_arrow .swiperBtn.next{ right:1vw;}
.visualSlider_arrow .swiperBtn:hover{ opacity:1;}

.main #contents{ overflow:hidden;}

.main_con{ padding:6.5em 0; word-break:keep-all;}
.main_con .inner_pd{ padding:0 4vw;}
.main_con:before{ content:"";}
.main_con.bg1{ position:relative;}
/* .main_con.bg1:before{ z-index:-1; position:absolute; top:0; right:0; width:40%; height:100%; background:#ff6c31;} */
.main_con.bg2{ position:relative;}
.main_con.bg2:before{ position:absolute; left:50%; bottom:0; height:45vh; width:1800px; max-width:96%; transform:translateX(-50%); background:#222327; z-index: -11;}

.main_txt{ margin-bottom:3.5em;}
.main_txt:last-child{ margin-bottom:0;}
.main_txt.m1{ margin-bottom:1em;}
.main_txt.m2{ margin-bottom:5em;}
.main_txt .tit{ margin-top:1.25em;}
.main_txt .txt{ margin-top:2em; line-height:1.6;}
.main_txt .tit:first-child,
.main_txt .txt:first-child{ margin-top:0;}
.main_txt .o1{ opacity:.7;}
.main_txt .t1{ font-size:1.000em;}
.main_txt .t2{ font-size:1.063em;}
.main_txt .t3{ font-size:1.125em;}
.main_txt .t4{ font-size:1.250em;}
.main_txt .t5{ font-size:1.375em;}
.main_txt .t6{ font-size:1.500em;}
.main_txt .t7{ font-size:1.750em;}
.main_txt .t8{ font-size:2.000em;}
.main_txt .t9{ font-size:2.625em;}
.main_txt .t10{ font-size:3.000em;}
.main_txt .t11{ font-size:3.750em;}
.main_txt .t12{ font-size:6.750em;}

.main_more_wrap{ gap:.5em;}
.main_more > .more{ position:relative; gap:0 1em; padding:.5em 2em; height:3.75em; min-width:12em; background:#ff6c31; border-radius:6em; text-align:center; color:#fff;}
.main_more > .more .in_tt{ font-size:1.125em; font-weight:500;}
.main_more > .more .xi{ font-size:1.250em;}

.main_more > .more.st1{ padding:0 0; width:3.75em; height:3.75em; min-width:auto; background:transparent; border:1px solid rgba(0,0,0,.4); border-radius:50%; transition:.2s;}
.main_more > .more.st1 .xi{ font-size:1.250em;}
.main_more > .more.st1:hover{ background:#ff6c31; border-color:#ff6c31; color:#fff;}

.main_txt.cw .tt{ color:#fff;}
.main_txt .nw{ white-space:nowrap;}
.main_more.cw > .more{}
.main_more.cw > .more.st1{ border-color:#ff6c31; color:#fff;}

.posi_re{ position: relative;}
.posi_re:before{ position: absolute; width: 100%; background: #ff6c31; width: 1em; height: 1em; border-radius: 50%; opacity: 0.45; content: ''; top: -18px; left: -22px; right: -21px; z-index: -1;}


.main_layout{ gap:2em 6em;}
.main_layout > li{}
.main_layout > li.w1{ width:40%;}
.main_layout + .page_col{ margin-top:8em;}
.main_layout > li .p1{ padding:4em 0 5em 0;}
.main_layout > li .round{ border-radius:2em; overflow:hidden;}
.main_layout > li .wrap_img{ position:relative; height:100%;}

.main_about{}
.main_about .ico_list{}
.main_about .ico_list > li{ min-width:30%; max-width:33.33%;}
.main_about .ico_list > li .in{ padding:1em 1em; text-align:center; }
.main_about .ico_list > li .in > .imgfix {box-shadow: 0 0 30px rgba(0,0,0,.3);}
.main_about .ico_list > li .in .ico{ height:3.125em;}
.main_about .ico_list > li .in .tt{ margin-top:.75em; font-weight:500;}

/* .mainSensorSlide .el {visibility: hidden;} */
.mainSensorSlide {overflow: visible !important;}
.mainSensorSlide .el {opacity: 0 !important;}
.mainSensorSlide .el.el.swiper-slide-active {opacity: 1 !important;}
.mainSensorSlide li .round {z-index: 111;}

.main_system {}
.main_system .system-inner {}
.main_system .system-sec {}
.main_system .system-sec .list {}
.main_system .system-sec .list > li {flex: 1}
.main_system .system-sec .list > li .in-wrap {padding: 3.5em 0;}
.main_system .system-sec .list > li .in-wrap .tit {padding-bottom: 1.5em; box-sizing: border-box;}
.main_system .system-sec .list > li .in-wrap .img-wrap {}
.main_system .system-sec .list > li .in-wrap .img-wrap .imgfix {width: 15vw; height: 15vw; overflow: hidden; border-radius: 50%; margin: 0 auto;}
.main_system .system-sec .list > li .in-wrap .ware {padding-top: 1.5em; box-sizing: border-box;}
.main_system .system-info-wrap {margin-top: 3em;}
.main_system .system-info-wrap > p {display: inline-block;}


.main_monitoring {}
.main_monitoring .inner {}
.main_monitoring .title-wrapper > ul > li {flex: 1;}
.monitoring-list {margin-top: 1em;}
.monitoring-list > li {}
.monitoring-list > li:not(.line-wrap) {flex: 1;}
.monitoring-list > li.line-wrap {flex: 0 0 50px;}
.monitoring-list > li.line-wrap.st2 {justify-content: space-around; margin: 0 1em;}
.monitoring-list > li.line-wrap .svg-wrap {position: relative; transform: translateX(10px);}
.monitoring-list > li.line-wrap .svg-wrap:before {content: ''; position: absolute; right: 100%; top: 50%; background: #ff6c31; width: 1.5em; height: 2px; transform: translateY(-50%);}
.monitoring-list > li.line-wrap .svg-wrap:after {content: ''; position: absolute; right: calc(100% + 1.5em); top: 50%; width: 0.5em; height: 0.5em; border-radius: 50%; background: #ff6c31; box-shadow: 0 0 0 7px #ff6c3150; transform: translateY(-50%); animation: aniball 1s alternate infinite;}
.monitoring-list > li.line-wrap > svg {}
.monitoring-list > li.monitoring-st .in .prod-box-wrap {background: transparent; padding: 1em;}
.monitoring-list > li.monitoring-st .in .prod-box-wrap .main_txt {margin-top: 1em;}
.monitoring-list .info-container {gap: 3em; width: 100%;}
.monitoring-list .sensor-st .in {width: 100%;}
.monitoring-list .sensor-st .terminal {width: 100%; gap: 1.5em;}
.monitoring-list .sensor-st .terminal > li .img-wrap {width: 6.125em; margin: 0 auto;}
.monitoring-list .communication-st .in {height: 100%;} 
.monitoring-list .communication-st .prod-box-wrap .box-inner {padding: 1em; background: #f5f5f5; border-radius: 1.5em;}
.monitoring-list .center-arrow {max-width: 4.125em; min-width: 4.125em;}
.monitoring-list .prod-box-wrap {padding: 1em; background: transparent; border-radius: 1em; height: 100%;}
.monitoring-list .prod-box-wrap .box-inner {gap: 1.5em;}
.monitoring-list .prod-box-wrap .box-inner .img-wrap:not(.single) {width: 10.625em; height: 10.625em;}
.monitoring-list .prod-box-wrap .box-inner .img-wrap.single {height: 11em;}

.dot-arrow svg circle,
.dot-arrow svg path {animation: blinkCircle 2s infinite;}
.dot-arrow svg circle:nth-child(1) {animation-delay: 0.1s;}
.dot-arrow svg circle:nth-child(2) {animation-delay: 0.2s;}
.dot-arrow svg circle:nth-child(3) {animation-delay: 0.3s;}
.dot-arrow svg circle:nth-child(4) {animation-delay: 0.4s;}
.dot-arrow svg circle:nth-child(5) {animation-delay: 0.5s;}
.dot-arrow svg path {animation-delay: 0.6s;}

@keyframes blinkCircle {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes aniball {
	0% {
		box-shadow: 0 0 0 0px #ff6c3150;
	}
	100% {
		box-shadow: 0 0 0 7px #ff6c3150;
	}
}


.main_solutions{ position:relative;}
.main_solutions .bgPos{ position:absolute; top:0; bottom:-3vw; left:0; width:100%; z-index: -1;}
.main_solutions .bgPos .pos{ position:absolute; opacity:.5;}
.main_solutions .bgPos .pos img{ width:100%;}
.main_solutions .bgPos .pos1{ width:24vw; top:5vw; left:2vw;}
.main_solutions .bgPos .pos2{ width:15vw; top:0; left:-4vw;}
.main_solutions .bgPos .pos3{ width:18vw; right:-4vw; bottom:0;}
.main_solutions .bgPos .pos4{ width:8vw; right:4vw; bottom:13vw;}
.main_solutions .bgPos .pos5{ width:8vw; top:5vw; right:2vw; opacity:1;}

.main_solutions .bgPos ~ *{ position:relative; z-index:10;}

.main_solutions .img_list{ gap:2em 2em;}
.main_solutions .img_list > li{ flex:1; transition:.3s;}
.main_solutions .img_list > li .in{ position:relative; padding:2em 2em 3em; height:30em; color:#fff; box-shadow:.938em .938em 1.75em rgba(0,0,0,.3)}
.main_solutions .img_list > li .in .bg{ position:absolute; top:0; left:0; width:100%; height:100%;}
.main_solutions .img_list > li .in .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.15; transition:.3s;}
.main_solutions .img_list > li .in .con{ flex:1; position:relative;}
.main_solutions .img_list > li .in .con .ico{ margin-bottom:1em;}
.main_solutions .img_list > li .in .con .ico img{ width:3em; filter:invert(1);}
.main_solutions .img_list > li .in .con .tit .tt{}
.main_solutions .img_list > li .in .con .tit .t1{ font-size:1.750em; opacity:.6; height:0; overflow:hidden; transition:.3s;}
.main_solutions .img_list > li .in .con .tit .t2{ font-size:1.375em; font-weight:600;}
.main_solutions .img_list > li .in .menu{ position:absolute; top:calc(100% + 2em); left:0; width:100%; opacity:0; visibility:hidden; transform:translateY(3em); transition:.3s;}
.main_solutions .img_list > li .in .menu > li > a{ position:relative; display:block; padding:.25em 1em;}
.main_solutions .img_list > li .in .menu > li + li > a:before{ content:""; position:absolute; left:0; top:50%; width:1px; height:1em; background:#fff; opacity:.3; transform:translateY(-50%);}
.main_solutions .img_list > li .in .menu > li > a .tt{ font-size:1.063em;}
.main_solutions .img_list > li .in .menu > li > a:hover .tt{ text-decoration:underline;}

.main_solutions .img_list > li:hover{ flex:1.2;}
.main_solutions .img_list > li:hover .in .bg:before{ opacity:.9;}
.main_solutions .img_list > li:nth-child(1):hover .in .bg:before{ background:#0e306d;}
.main_solutions .img_list > li:nth-child(2):hover .in .bg:before{ background:#027659;}
.main_solutions .img_list > li:nth-child(3):hover .in .bg:before{ background:#b85302;}
.main_solutions .img_list > li:hover .in .con .tit .t1{ padding:.125em 0; height:1.25em;}
.main_solutions .img_list > li:hover .in .menu{ opacity:1; visibility:visible; transform:translateY(0);}

.mainNewsSlide{}
.mainNewsSlide .el{}
.mainNewsSlide .el .slide_st{}
.mainNewsSlide .el .slide_st .img{ position:relative; overflow:hidden;}
.mainNewsSlide .el .slide_st .img:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; transition:.3s;}
.mainNewsSlide .el .slide_st .img .resize{ transition:.3s;}
.mainNewsSlide .el .slide_st .con{ gap:1em 0; padding:2.5em .5em;}
.mainNewsSlide .el .slide_st .con .cate{ font-size:1.125em; font-weight:600;}
.mainNewsSlide .el .slide_st .con .tit{ font-size:1.313em; font-weight:500;}
.mainNewsSlide .el .slide_st .con .txt{ font-size:1.063em; color:#555; line-height:1.4;}

.mainNewsSlide .el .slide_st:hover .img:after{ opacity:.4;}
.mainNewsSlide .el .slide_st:hover .img .resize{ transform:scale(1.1);}
.mainNewsSlide .el .slide_st:hover .con .tit{ text-decoration:underline;}

.mainSlide_control{ gap:0 1.5em;}
.mainSlide_control .swiperPG{ flex:1;}

.main_inquiry{ position:relative; overflow:hidden; padding:8em 0;}
.main_inquiry .gsBg_wrap{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}
.main_inquiry .gsBg{ position:absolute; top:0; left:0; width:100%; height:100vh;}
.main_inquiry .gsBg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#18232e; opacity:.85;}
.main_inquiry .inner{ position:relative;}

.main_inquiry .gsImg_wrap{ position:absolute; top:0; right:4vw; mix-blend-mode:hard-light;}
.main_inquiry .gsImg_wrap .gsImg{ width:30vw;}
.main_inquiry .gsImg_wrap .gsImg img{ width:100%; opacity:.7;}
.main_inquiry .rotateAni{ animation-duration:22s;}


.rotateAni{ animation:rotateAni 10s linear infinite;}
@keyframes rotateAni{
100% { transform:rotate(360deg);}
}

/* 메인 레이어 팝업 */
.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:95vw; max-height:calc(95vh - 6em); width:25em; margin-top:1em; margin-bottom:5em; background:#fff; border:1px solid #000; overflow-y:auto;}
	.mainLayerPop .moSlide .el .popLayer{ position:static; height:auto !important; width:25em !important; max-width:100% !important; max-height:100%; border:none;}
	.mainLayerPop .moSlide .el .popLayer img{ width:100%;}
	.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;}
	.mainLayerPop .moHide{ display:none;}
	.mainLayerPop .pcHide{ display:block;}
	.mainLayerPop div.popLayer_closeW{ display:flex; align-content:center; align-items:center;}
	.mainLayerPop div.popLayer_closeW .popLayer_close{ flex:1;}
	.mainLayerPop div.popLayer_closeW .tt{font-size:1.3em; line-height:2.1em;}
}