@charset "utf-8";
/* CSS Document */
.box0{ width:var(--fullWidth); margin:0 auto;}
.box1{ width:var(--baseWidth); margin:0 auto; max-width:var(--fullWidth);}
.box3{ width:var(--prodWidth); margin:0 auto; max-width:var(--fullWidth);}

.cp{ cursor: pointer;}

.pcHide{ display:none !important;}
.moHide{}

.gnb li.m_hide{ display:none}
.gnb .layer{ display:none !important;}
.gnb .blank .arrow:before{ content:"\e980";}

.sns_st{ gap:.5em;}
.sns_st > li .in{ width:2.5em; height:2.5em; background:#fff; border-radius:50%; color:#000; transition:.3s;}
.sns_st > li .in .tt{ display:none;}
.sns_st > li .in:hover{ background:var(--siteC); color:#fff;}
.cw > .sns_st > li .in{ background:transparent; color:#fff;}
.cw > .sns_st > li .in:hover{ background:#fff; color:#000;}

.fullH{ height:calc(100vh); box-sizing:border-box;}
.fullMH{ min-height:calc(100vh) !important; box-sizing:border-box;}

.filW{ filter:var(--crWhitefil);}/*화이트*/
.filB{ filter:var(--crBlackfil);}/*블랙*/
.filRE{ filter:var(--crfilRE);}  /*색상반전*/

/*header*/
.headT{ padding-top:var(--headH);}
.headH,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1{ height:var(--headH); transition:height .2s, background .2s; box-sizing:border-box;}

/* #header .gnb_wrap .gnb > li { pointer-events: none; } */  /* 시안제출 시 gnb 클릭 방지 */

#header{ z-index:1235; position:fixed; top:0; left:0; width:100%; transition:background .2s;}
#header .inner{ gap:0 2vw; color:#fff;}
#header .logo{ filter:var(--crWhitefil);}
#header .logo > .in{ transform-origin:left center; transition:.2s;}
#header .logo > .in img{ max-width: 12em;}
#header .menu_wrap{ gap:0 5vw;}

#header .gnb_wrap{ }
#header .gnb_wrap .gnb{}
#header .gnb_wrap .gnb > li{ position:relative; overflow:hidden;}
#header .gnb_wrap .gnb > li .dp3{ display:none;}
#header .gnb_wrap .gnb > li .dp1{ padding:0 2vw;}
#header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.250em; font-weight:600;}
#header .gnb_wrap .gnb > li .dp2{ display:block; position:absolute; top:80%; left:50%; width:14.5em; padding:0 1.5em; background:var(--siteC); box-shadow:0 2px .625em rgba(0,0,0,.1); border-radius:1em; color:#fff; opacity:0; visibility:hidden; transform:translateX(-50%); transition:padding .2s;}
#header .gnb_wrap .gnb > li .dp2 > li > a{ padding:.75em 1em; transition:.2s;}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.063em;}
#header .gnb_wrap .gnb > li.act{ overflow:visible;}
#header .gnb_wrap .gnb > li.act .dp2{ padding-top:1.5em; padding-bottom:1.5em; opacity:1; visibility:visible;}
#header .gnb_wrap .gnb > li .dp2 > li.act > a{ background:rgba(0,0,0,.2);}

#header .util_wrap{ gap:0 1.5vw;}
#header .util_wrap .menu > li .in{}
#header .util_wrap .menu > li + li .in:before{ content:""; margin:0 1em; width:1px; height:1em; background:#fff; opacity:.3;}
#header .util_wrap .menu > li .in .tt{ font-size:.938em;}
#header .util_wrap .menu > li .in:hover .tt{ text-decoration:underline;}
#header .search_wrap{}
#header .search_wrap .sc{}
#header .search_wrap .sc_btn .xi{ font-size:1.625em;}
#header .search_wrap .search_layer{ position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden; transition:.2s;}
#header .search_wrap .search_layer .sc_bg{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); backdrop-filter:blur(.375em);}
#header .search_wrap .search_layer .sc_inner{ position:relative; padding:4.5em 0 8em 0; background:#fff; box-shadow:0 3px 1em rgba(0,0,0,.2); text-align:center; color:#000;}
#header .search_wrap .search_layer .wrap_in{ gap:2em; width:52em; padding:0 3vw; margin:0 auto;}
#header .search_wrap .search_layer .sc_close{ position:relative; z-index:2;}
#header .search_wrap .search_layer .sc_close .close_btn{ position:absolute; top:2em; right:4vw; width:4em; height:4em; background:#000; border-radius:50%; color:#fff;}
#header .search_wrap .search_layer .sc_close .close_btn .xi{ font-size:1.875em; transition:.3s;}
#header .search_wrap .search_layer .sc_close .close_btn:hover .xi{ transform:rotate(180deg);}
#header .search_wrap .search_layer .sc_tit .tt{ font-size:2.500em; text-transform:uppercase;}
#header .search_wrap .search_layer .search{ max-width:100%; height:5em; border-bottom:2px solid #000;}
#header .search_wrap .search_layer .search .input_st{ height:100%; font-size:1.250em; border:none; background:none;}
#header .search_wrap .search_layer .search .inp_txt{ flex:1;}
#header .search_wrap .search_layer .search .inp_btn .xi{ font-size:1.500em;}
#header .search_wrap .search_layer .search .inp_btn:hover{ color:var(--siteC3);}

#header .search_wrap .search_layer .search select.input_st { background: url(../images/inc/arrow_down.svg) right .75em center no-repeat #fff; }


#header .search_wrap .search_layer .sc_keyword{ text-align:left;}
#header .search_wrap .search_layer .sc_keyword .kw_tit{ margin-bottom:1em;}
#header .search_wrap .search_layer .sc_keyword .kw_tit .tt{ font-size:1.188em; font-weight:700;}
#header .search_wrap .search_layer .sc_keyword .kw_list{ gap:.75em 1.5em;}
#header .search_wrap .search_layer .sc_keyword .kw_list > li{}
#header .search_wrap .search_layer .sc_keyword .kw_list > li > a{ display:block; color:#666;}
#header .search_wrap .search_layer .sc_keyword .kw_list > li > a .tt:before{ content:"# "}
#header .search_wrap .search_layer .sc_keyword .kw_list > li > a:hover{ color:#000; text-decoration:underline;}

.searchOn{ overflow-y:hidden}
.searchOn #header.active{ backdrop-filter:none !important;}
.searchOn #header .search_wrap .search_layer{ opacity:1; visibility:visible;}


#header .all_wrap{}
#header .all_wrap .all{}
#header .all_wrap .all_btn{ width:4em; height:4em; border:1px solid rgba(255,255,255,.2); border-radius:50%; transition:.2s;}
#header .all_wrap .all_btn .xi{ font-size:1.750em;}
#header .all_wrap .all_btn:hover{ background:#000; border-color:#000; color:#fff; transform:rotate(90deg);}

#header .all_wrap .all_layer{ position:fixed; top:0; left:0; width:100%; height:100vh; background:var(--siteBg1); color:#fff; transform:translateY(-80%); opacity:0; visibility:hidden; transition:.3s;}
#header .all_wrap .all_layer .all_header{ padding:2em 0 0;}
#header .all_wrap .all_layer .all_header .all_logo{ max-width:15em; }
#header .all_wrap .all_layer .all_header .close_btn{ width:5em; height:5em; background:var(--siteC); border-radius:50%;}
#header .all_wrap .all_layer .all_header .close_btn .xi{ font-size:1.875em; transition:.3s;}
#header .all_wrap .all_layer .all_header .close_btn:hover .xi{ transform:rotate(180deg);}

#header .all_wrap .all_layer .all_inner{ flex:1; opacity:0; transition:.3s;}
#header .all_wrap .all_layer .all_inner > .wrap_in{ gap:2em; padding:3em 0 0 0;}
#header .all_wrap .all_layer .wrap_top .all_mem{ gap:.5em;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in{ height:2.75em; padding:0 2em; border:1px solid rgba(255,255,255,.3); border-radius:6em; transition:.2s;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt{ font-size:.938em; font-weight:500;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover{ background:var(--siteC); border-color:var(--siteC);}

#header .all_wrap .all_layer .wrap_middle .gnb{ flex-wrap:wrap; gap: 1.5em 0;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{ flex: 0 0 calc(100% / 3); padding:1.5em 2.5em 0 2.5em; border-left:1px solid rgba(255,255,255,.1);}
#header .all_wrap .all_layer .wrap_middle .gnb > li ul{ display:block; padding:1.25em 0 2em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li a{ justify-content:flex-start; text-align:left !important; padding:.5em .375em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .in{ display:flex; align-items:flex-end; gap:.75em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size:2.250em; font-weight:700; background:linear-gradient(to right, var(--gradC2), var(--gradC1) 50%, #fff 50%); background-size:200% 100%; background-position:100%; transition: background-position 0.2s linear; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .arrow{ display:inline-block; margin-bottom:.375em; width:.5em; height:.5em; background:var(--siteC3); border-radius:50%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.act{ background:rgba(0,0,0,.2);}
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1 .tt{ background-position: 0 100%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in{ display:inline-block; position:relative;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in:after{ content:""; position:absolute; left:0; bottom:-.25em; width:100%; height:2px; background:#fff; transform:scaleX(0); transform-origin:left bottom; transition:.2s;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{ font-size:1.188em; font-weight:500;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .in:after{ transform:scaleX(1)}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a{ gap:0 .75em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a:before{ content:""; width:4px; height:2px; background:rgba(255,255,255,.4);}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a .tt{ opacity:.7;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li.act > a .tt{ text-decoration:underline; opacity:1;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp4{ display:none;}

#header .all_wrap .all_layer .wrap_bottom{ display:none;}


#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.more a.link{ display: none;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.more a.layer{ display: flex!important;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.more > a.layer .xi{ content: '\e942';}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp3{ display: none;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.on .dp3{ display: block;}



.allGnbOn{ overflow-y:hidden}
.allGnbOn #header .all_wrap .all_layer{ transform:translateY(0); opacity:1; visibility:visible;}
.allGnbOn #header .all_wrap .all_layer .all_inner{ opacity:1; transition-delay:.4s;}

.stickyT{ position:sticky !important; top:var(--headHS);}
#header.act .headH,
.wrapHide,
.scroll .headH,
#header.act .gnb_wrap .gnb > li,
#header.act .gnb_wrap .gnb > li .dp1,
.scroll #header .gnb_wrap .gnb > li,
.scroll #header .gnb_wrap .gnb > li .dp1{ height:var(--headHS);}
.scroll #header .logo{ filter:none;}
#header.act .logo > .in
.scroll #header .logo > .in{ transform:scale(.85,.85);}
#header.act,
.scroll #header.active{ background:rgba(255,255,255,.9); backdrop-filter:blur(.25em); box-shadow: 0 0 2em rgba(0,0,0,.1);}
.simple #header .inner,
#header.act .inner,
.scroll #header.active .inner{ color:#000;}
#header.act .gnb_wrap .gnb > li.act .dp1,
.simple #header .gnb_wrap .gnb > li.act .dp1,
.simple #header .gnb_wrap .gnb > li.on .dp1,
.scroll #header.active .gnb_wrap .gnb > li.act .dp1,
.scroll #header.active .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC);}
#header.act .util_wrap .menu > li + li .in:before,
.simple #header .util_wrap .menu > li + li .in:before,
.scroll #header.active .util_wrap .menu > li + li .in:before{ background:#000; opacity:.15;}
#header.act .all_wrap .all_btn,
.simple #header .all_wrap .all_btn,
.scroll #header.active .all_wrap .all_btn{ border:1px solid rgba(0,0,0,.1);}

.sub #header{ border-bottom: 1px solid #eee;}
.sub #header .logo{ filter: none;}
.sub #header .inner{  color:#000;}


/*footer*/
#footer{ background:#0d0d0d;}
#footer .inner{ padding:4.25em 0; gap:1em 5vw; color:#fff;}
#footer .inner .logo{ width: 12em; filter: var(--crWhitefil); opacity: .6;}
#footer .info_wrap{ flex:1;}
#footer .info_wrap .menu{}
#footer .info_wrap .menu > li > .in{ padding:.5em 0;}
#footer .info_wrap .menu > li:not(:last-child) > .in:after{ content:""; margin:0 1.25em; width:1px; height:1em; background:#fff; opacity:.3;}
#footer .info_wrap .menu > li > .in .tt{ font-size:1.125em;}
#footer .info_wrap .menu > li > .point{ font-weight:600; color:var(--siteC2);}
#footer .info_wrap .menu > li > .in:hover{ text-decoration:underline;}
#footer .info_wrap .info{ overflow:hidden; margin-top:3em;}
#footer .info_wrap .info > li{ float:left; margin:0 1.5em .75em 0; opacity:.7;}
#footer .info_wrap .info > li.br{ clear:left;}
#footer .info_wrap .info > li .tt{}
#footer .info_wrap .info .copyright{ margin-top:2em; font-size:.813em; text-transform:uppercase; opacity:.5;}

#footer .goTop{ z-index:998; position:fixed; right:0; bottom:0; width:3.5em; height:3.5em; text-align:center; background:var(--siteC3); 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)}


/*contents*/
#contents{}
#contents .sub_page_top { box-sizing:border-box; display:flex; flex-direction:column } 
#contents .sub_page_top .visual_wrap { height:27em; position:relative; overflow:hidden; transition:.5s } 
html:not(.scroll) #contents .sub_page_top .visual_wrap { padding:0 } 
#contents .sub_page_top .visual_wrap .wrapIn { position:relative; height:100% } 
#contents .sub_page_top .visual_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; opacity: 1; /*transform: translateX(4.5em); */ transition:.3s; } 
#contents .sub_page_top .visual_wrap .bg:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; } 
.load #contents .sub_page_top .visual_wrap .bg {   } 

#contents .sub_page_top .tit_wrap { } 
#contents .sub_page_top .tit_wrap .wrapIn { display:flex; flex-direction: column-reverse; height: 12em; margin-bottom: 2em; position: relative; } 
#contents .sub_page_top .tit_wrap .wrapIn .tit { } 
#contents .sub_page_top .tit_wrap .tit .t1 { font-size:3.85em; font-weight:800 } 
#contents .sub_page_top .nav { display:flex; align-items:center; margin-bottom: 1em; position: absolute; right: 0; bottom: 0; zoom: .8; opacity: .5;} 
#contents .sub_page_top .nav > li { position:relative; text-transform:uppercase; font-weight: 600; color: #999999; font-size: 1.1em; } 
#contents .sub_page_top .nav > li:not(.home):before { content: ''; display: inline-block; vertical-align: middle; margin: 0 10px; width: 16px; height: 2px; background: #DDDDDD; border-radius: 10px; transform: rotateZ(110deg); } 
#contents .sub_page_top .nav > li:last-of-type { color: #111; font-weight: 800; } 
#contents .sub_page_top .nav > li.home { } 
#contents .sub_page_top .nav > li.home > a { width:1.5em; height:1.5em; border-radius:50%; display:flex; align-items:center; justify-content:center } 
#contents .sub_page_top .nav > li.home > a .xi { font-size:1.45em } 
#contents .sub_page_top .sub_tab { position: absolute; bottom: 0; width:100%; background: rgba(0,0,0, .2); backdrop-filter: blur(2px); box-shadow: 6px 0 18px rgba(0,0,0,.05); } 
#contents .sub_page_top .sub_tab .gnb > li { width:100% } 
#contents .sub_page_top .sub_tab .gnb .dp2 { justify-content:center } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li { position: relative; flex: 1; max-width: 20%; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li.on:after { position: absolute; top: 0; width: 100%; height: 3px; background: #fff; content: ''; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li:last-of-type:before { display: none; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li:before { position: absolute; right: 0; width: 1px; height: 20px; background: rgba(255,255,255, .35); content: ''; top: 50%; transform: translateY(-50%); } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li > a { display:flex; align-items:center; letter-spacing: .03em; justify-content:center; font-size: 1.25em; font-weight: 500; color: #fff; opacity: .65; height:4.25em; padding:0 .5em; transition: .15s; position:relative } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li > a:hover { opacity: 1; transition: .15s; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li > a .va { font-weight:600; font-size:1.125em; opacity:.7; position:relative; z-index:1 } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a { color:#fff; opacity: 1; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li:hover > a .va,
#contents .sub_page_top .sub_tab .gnb .dp2 > li.on > a .va { opacity:1; } 
#contents .sub_page_top .sub_tab .gnb .dp2 > li > .layer { display: none; } 

#contents .sub_page_menu { padding-top: 1.15em; position: relative; } 
#contents .sub_page_menu .gnb { display:block; transform:translateX(-2em); } 
#contents .sub_page_menu .gnb .dp2 { } 
#contents .sub_page_menu .gnb .dp2 > li { } 
#contents .sub_page_menu .gnb .dp2 > li > a { padding:1em 2em; color:#888; } 
#contents .sub_page_menu .gnb .dp2 > li > a .tt { font-size:1.250em; font-weight:500; } 
#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:-.875em; width:100%; height:3px; background: var(--siteC); transform:scaleX(0); transition:transform .3s; } 
#contents .sub_page_menu .gnb .dp2 > li.act > a .in,
#contents .sub_page_menu .gnb .dp2 > li.on > a .in { color:var(--siteC); } 
#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 .gnb .dp3{ display: none;}

/*  */
.dp1_product #contents .sub_page_con {padding-top: 8.5em;}
#contents .sub_page_con{ padding:5em 0 0; text-align:center;}
#contents .sub_page_con .con_tit{}
#contents .sub_page_con .con_tit .tt{ display:block; font-size:3.000em; font-weight:700;}

#contents .sub_page_con .con_menu{ margin-top:3.5em;}
#contents .sub_page_con .con_menu .gnb,
#contents .sub_page_con .con_menu .gnb ul:not(.dp3){ display:block;}
#contents .sub_page_con .con_menu .gnb > li .dp3{ gap:1em; justify-content:center;}
#contents .sub_page_con .con_menu .gnb > li .dp3 > li{ width:calc(16.66% - .83333em);}
#contents .sub_page_con .con_menu .gnb > li .dp3 > li > a{ padding:.5em .5em; height:4.25em; border:1px dashed #bbb; color:#666; font-weight:500; transition:.2s;}
#contents .sub_page_con .con_menu .gnb > li .dp3 > li > a .tt{ font-size:1.188em;}
#contents .sub_page_con .con_menu .gnb > li .dp3 > li.act > a{ background:var(--crGray3);}
#contents .sub_page_con .con_menu .gnb > li .dp3 > li.on > a{ border:none; background:var(--siteC); color:#fff; font-weight:600;}

#contents .prd_menu{ /* position: relative; */}
/* #contents .prd_menu::before{ content: ''; width: 100vw; height: 1px; background: #ddd; position: absolute; left: 50%; top:calc(-2vh - 4px); z-index: -1; transform: translateX(-50%);} */
#contents .prd_menu .gnb > li .dp2 > li.on{}
#contents .prd_menu .gnb > li .dp3{ gap:1em .5em;}
#contents .prd_menu .gnb > li .dp3 > li > a{ padding: .5em 1.25em; border-radius: 2em; border: 1px solid #ddd;}
#contents .prd_menu .gnb > li .dp3 > li > a .tt{ font-size: 1.125em; color:#555; text-align: center;}
#contents .prd_menu .gnb > li .dp3 > li.on > a{ border-color:var(--siteC); background: #f8f8f8;}
#contents .prd_menu .gnb > li .dp3 > li.on > a .tt{ color:var(--siteC)}

#contents .doc{ padding:5em 0 10em;}
#contents .doc.s2{ padding:2em 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}
.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}

.simple #contents{ padding-top:var(--headH);}
.simple #contents .sub_page_top{ display:none;}
.simple #contents .sub_page_top + .doc{ padding-top:2em;}
.simple #contents .sub_page_con{ padding:2em 0 0;}
.simple #contents .sub_page_con .con_tit .tt{ font-size:2.750em;}

/*SUB PAGE*******************/
/*inc*/
.page_con{ padding:6em 0;}
.page_con.conP1{ padding:3em 0;}
.page_con.bg1{}
.doc.pd0 .page_con:last-child,
.doc.pb0 .page_con:last-child{ padding-bottom:10em;}

.page_txt:not(:last-child){ margin-bottom:3.5em;}
.page_txt.m0{ margin-bottom:.75em;}
.page_txt.m1{ margin-bottom:1.25em;}
.page_txt.m2{ margin-bottom:5em;}
.page_txt .tit.icon .page_tt{ position:relative;}
.page_txt .tit.icon .page_tt:before,
.page_txt .tit.icon .page_tt:after{ content:"";}
.page_txt .tit.icon.st1 .page_tt{ display:inline-block; padding-left:1em; line-height:1.4;}
.page_txt .tit.icon.st1 .page_tt:before,
.page_txt .tit.icon.st1 .page_tt:after{ position:absolute; left:0; top:.375em; width:.625em; height:.625em; border-radius:50%; box-sizing:border-box;}
.page_txt .tit.icon.st1 .page_tt:before{ border:1px solid rgba(0,0,0,.15);}
.page_txt .tit.icon.st1 .page_tt:after{ background:var(--siteC); transform:scale(.5);}

.page_txt .tit + .tit{ margin-top:1em;}
.page_txt .tit + .txt{ margin-top:2em;}
.page_txt .txt + .tit{ margin-top:2.5em;}
.page_txt > .txt:not(:first-child){ margin-top:2em;}

.page_list{ counter-reset:subListIdx;}
.page_list > li{ counter-increment:subListIdx;}
.page_list > li .num:before{ content:counter(subListIdx, decimal-leading-zero);}
.page_list.st2 > li .num:before{ content:counter(subListIdx);}

.page_mq{ overflow:hidden;}
.page_mq .mqTT{ display:flex; flex-shrink:0; white-space:nowrap;}
.page_mq .mqTT > *{ margin:0 .375em;}

.page_col .gsimgFix{}
.page_col .gsimgFix .posImg{ position:relative; height:100%; min-height:90vh;}
.page_col .gsimgFix .posImg img{ position:absolute; bottom:0; width:100%; height:130%;}
.page_col .gsimgFix.st2 .posImg{ height:30em; min-height:auto;}
.page_col .gsimgFix.st2 .posImg img{ height:150%;}


.conLay{ gap:5em;}
.conLay .txt_wrap{ flex:1;}
.conLay .img_wrap{ width: 45%;}
.conLay .img_wrap .img{ padding-bottom: 65%;}
.conLay.layR{}
.conLay.layR .txt_wrap{ padding-left: 2em;}

.dot_list{}
.dot_list .dot + .dot{ margin-top: 0.8em;}
.dot_list .dot{ 
  padding-left: 0.8em;
  position: relative;
}
.dot_list .dot.s1{ 
  font-size: 1.125em; 
  color:#555;
  word-break: keep-all;
}
.dot_list .dot.s1::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background:var(--siteC2);
  position: absolute;
  left: 0; top: 8px;
}

.page_tt.tit.dot1{
  padding-left: .8em;
  font-weight: 600;
  font-size: 1.5em;
  color:#111;
  position: relative;
}
.page_tt.tit.dot1::before{
  content: '';
  width: 0px;
  height: 0px;
  border-top: 8px solid transparent;
  border-left: 10px solid var(--siteC);
  border-bottom: 8px solid transparent;
  position: absolute;
  left: 0;
  top: 5px;
}




/*회사소개*/
.page_col.overview {}
.page_col.overview > li {flex: 1;}
.page_col.overview .img-wrap {height: 27.5em; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.1);}

.page_list.info{border-top: 2px solid var(--crBlack);}
.page_list.info > li{ width: 100%; border-bottom: 1px solid #eee;}
.page_list.info > li .in{ flex:1;}
.page_list.info > li .in .ico_wrap{ width:65%; margin:0 auto;}
.page_list.info > li .in .ico_wrap .ico{ background:#fff; box-shadow:0 2px 1.25em rgba(0,0,0,.05); border-radius:50%;}
.page_list.info > li .in .ico_wrap .ico img{ width:30%;}
.page_list.info > li .in .con_wrap{ gap:1.25em; padding: 1.5em 0;}
.page_list.info > li .in .con_wrap .t1{ font-size:1.250em; color:#555; min-width: 7em;}
.page_list.info > li .in .con_wrap .t2{ font-size:1.250em; font-weight:600;}

.table_wrap{}
.table_wrap .table_tit{margin-bottom: .8em; font-weight: 600; font-size: 1.25em; color:#555;}

/* new product */
.newPrd_page{}
.newPrd_page section + section{ margin-top: 6em;}
.newPrd_page .tit_wrap{ margin-bottom: 2.5em;}
.newPrd_page .tit_wrap .top_tit{ margin-bottom: 0.25em;}
.newPrd_page .tit_wrap .desc{ 
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.5em;
  color:#555;
}
.newPrd_page .tit_wrap .tit_ico01{ 
  padding-left: .5em;
  color:#333;
  position: relative;
}
.newPrd_page .tit_wrap .tit_ico01::before{
  content:'';
  width: 5px; height: 0.8em;
  background: var(--siteC2);
  position: absolute;
  left: 0; top: 12px;
}
.newPrd_page .cont_wrap{
  overflow: hidden;
}
.cont_wrap .dig_box{
  padding: 2em 3vw;
  box-sizing: border-box;
  border:1px solid #ddd;
  border-radius:.5em;  
}
.cont_wrap .line_box{
  padding: 2.5em 2em;
  box-sizing: border-box;
  border:1px solid #ddd;
  border-radius:.5em;
}
.cont_wrap .line_box .tit{ margin-bottom: .5em;}


.newPrd_page .main_newPrd .inner .txt_wrap .main_txt .tit{ opacity: 1;}

.composition_wrap{ padding: 3em 2em; border-radius: .5em; border: 1px solid #ddd;}
.composition_wrap .prd_img{width: 20em; margin:0 auto;}
.composition_wrap .compList{ display: flex; flex-wrap: wrap; gap: 3em 1em; margin-top: 3em;}
.composition_wrap .compList > li{ width: calc((100% - 4em) / 5);}
.composition_wrap .compList > li .img{ width: 10em; height: 10em; margin:0 auto; border-radius: 50%; border:1px solid #ddd; box-shadow: 0 5px 10px rgba(0, 0, 0, .1);}
.composition_wrap .compList > li .txt{ margin-top: 1.5em; text-align: center;}
.composition_wrap .compList > li .txt .tit{ margin-bottom: 0.25em; font-weight: 600; font-size: 1.25em; color:#111;}
.composition_wrap .compList > li .txt .desc{ color:#555;}

.page_arrow{ padding-bottom:4.5%; background:url(../images/inc/page_arrow.svg) no-repeat; background-size:100% 100%; margin:3em 0 3em 0}
.page_arrow.up{ transform: rotate(180deg);}

.front_manual{ gap:3em }
.front_manual .img{ width: 50%;}
.front_manual .txt_wrap{ flex:1;}
.front_manual .txt_wrap .numList{ }
.front_manual .txt_wrap .numList > li{ }
.front_manual .txt_wrap .numList > li + li{ margin-top: 1em;}
.front_manual .txt_wrap .numList > li .tit{ 
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.5rem;
  color:#111;
}
.front_manual .txt_wrap .numList > li .tit .num{
  margin-right: 0.25em; 
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color:var(--siteC2)
}
.front_manual .txt_wrap .numList > li .desc{ 
  margin-top: 0.5em;
  padding-left: 1.5em;
  font-size: 1.125em;
  line-height: 1.5;
  color:#333;
  word-break: keep-all;
}

.stepList_wrap { } 
.stepList { gap: 2em 3em; counter-reset: stepNum; } 
.stepList > li {width: calc((100% - 6em) / 3);padding:2em 1.5em 2.5em;box-sizing: border-box;border:1px solid #ddd;/* border-radius: 1em; */position: relative;counter-increment: stepNum;box-shadow: 0 3px 10px rgba(0,0,0,.05);} 
.stepList > li + li { } 
.stepList > li:after { content: ''; width: 3em; height: 100%; background:url(../images/inc/steps.gif) no-repeat center center; position: absolute; right: calc(-3em - 1px); top: 0; opacity: .5;} 
.stepList > li:first-child .txt_wrap .num{ color:var(--siteC3)}
.stepList > li:nth-child(1){ border-top:3px solid #2bbcb5}
.stepList > li:nth-child(2){ border-top:3px solid #4ba6dd}
.stepList > li:nth-child(3){ border-top:3px solid #25408f}
.stepList > li:last-child::after { display:none; }  
.stepList > li .icon_wrap { margin-bottom: 1em; } 
.stepList > li .icon_wrap .icon { display: block; width: 6em; height: 6em; margin:0 auto; opacity: .85;} 
.stepList > li .txt_wrap { text-align: center; } 
.stepList > li .txt_wrap .num { margin-bottom: 10px; font-weight: 600; font-size: 1.125em; color: var(--siteC); opacity: .6; } 
.stepList > li .txt_wrap .num::after { content:'0'counter(stepNum) } 
.stepList > li .txt_wrap .tit { font-weight: 600; font-size: 1.25em; color:#333; } 
.stepList > li .txt_wrap .desc{ font-weight: 500; font-size: 1.125em; color:#555; line-height:1.5; letter-spacing:-1px; word-break: keep-all;}
.stepList > li .img_wrap{ margin-bottom: 2em; box-shadow: 0 3px 10px rgba(0, 0, 0,  .1);}
.stepList > li .img_wrap .img{ max-width: 95%; margin:0 auto; padding-bottom: 15em;}

.ktr_img_list{ gap:1em;}
.ktr_img_list > li{ width: calc((100% - 1em) / 2); padding: 1em; box-shadow: 0 0 10px rgba(0, 0, 0,  .1);}
.ktr_img_list > li .img{ width: 100%;}

.certList_wrap{ padding: 0 2em}
.certList{ gap:2em 4em}
.certList > li{ width: calc((100% - 8em) / 3);}
.certList > li .cert{margin-bottom: 1em;padding: 1.5em;border: 1px solid #eee;box-shadow: 0 2px 10px rgba(0, 0, 0, .1);}
.certList > li .name{font-weight: 600;font-size: 1.25em;color: var(--siteC);text-align: center;}

/* Product */
.prdList_wrap{}
.prdList{ gap:5em 2em;}
.prdList > li{ width: calc((100% - 6em) / 4);}
.prdList > li .wrap_in{ gap:2em; height:100%; color:#111;}
.prdList > li .wrap_in .img_wrap{ margin-top:auto; background:#fff; border-radius:.75em; border:1px solid #ddd; overflow:hidden;}
.prdList > li .wrap_in .con_wrap{ gap:.5em; padding:1.5em .5em 0; border-top:1px solid rgba(0, 0, 0, .15);}
.prdList > li .wrap_in .con_wrap .cate{ color:var(--siteC);}
.prdList > li .wrap_in .con_wrap .txt{ font-size:1.063em; opacity:.6;}
.prdList > li .wrap_in .con_wrap .tit{ font-size:1.5em; font-weight:700;}

/* Product view */
.prodView_page{}
.prodView_intro{ margin-bottom: 6em;}
.prodView_intro .prodView_img{ width:40%; border:1px solid #ddd; box-shadow:0 0 5px rgba(0, 0, 0, .1)}
.prodView_intro .prodView_img .img{ width: 100%;}
.prodView_intro .prodView_img .img img{}
.prodView_intro .prodView_info{ flex:1; padding-top:1em; padding-left:4em; position:relative;}
.prodView_intro .prodView_info .prod_tit{ /* border-bottom:2px solid var(--siteC2); */ padding:.5em .5em 1.5em .5em}
.prodView_intro .prodView_info .prod_tit .t1{ font-size:2.25em; color:#111; font-weight:600;}
.prodView_intro .prodView_info .prod_tit .t2{ font-size:1.1em; color:#555; padding-top:.625em;}
.prodView_intro .prodView_info .memo_box{
  min-height: 8em;
  margin: 0 0 2.5em;
  padding: 2em 1em;
  border-top: 2px solid var(--siteC2);
  border-bottom: 1px solid #ddd;
}
.prodView_intro .prodView_info .memo_box > p{ font-size: 1.125em; color:#555;}

.prodView_intro .prodView_info .table_st{ border-top: 2px solid var(--siteC2);}
.prodView_intro .prodView_info .table_st .w_form_tit{ width:12em;}
.prodView_intro .prodView_info .table_st th,
.prodView_intro .prodView_info .table_st td{ padding:1.2em 1.5em; text-align-last: left;}
.prodView_intro .prodView_info .table_st tr:not(:last-child) th,
.prodView_intro .prodView_info .table_st tr:not(:last-child) td{ border-bottom:1px solid #ddd}
.prodView_intro .prodView_info .table_st th{ background-color:#f6f6f6;}
.prodView_intro .prodView_info .table_st.prod_info{ border-bottom:2px solid #333; margin-bottom:3em;}
.prodView_intro .prodView_info .table_st.prod_info .tt{ font-size:1.1em; color:#111; }
.prodView_intro .prodView_info .table_st.prod_info .td{ font-size:1.1em; color:#555;}

.prodView_intro .prodView_btn{ gap:.2em;}
.prodView_intro .prodView_btn > li{ flex:1;}
.prodView_intro .prodView_btn > li *{ transition:.3s}
.prodView_intro .prodView_btn > li.st1{}
.prodView_intro .prodView_btn > li.st2{}
.prodView_intro .prodView_btn > li.st3{}
.prodView_intro .prodView_btn > li.st4{}
.prodView_intro .prodView_btn > li .btn{ display:block; line-height:3.5em; text-align:center; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative;}
.prodView_intro .prodView_btn > li .btn *{ vertical-align:top;}
.prodView_intro .prodView_btn > li .btn .icon{ font-size:1.5em; padding-right:10px}
.prodView_intro .prodView_btn > li.st1 .btn{ background:var(--siteC2); color:#fff}
.prodView_intro .prodView_btn > li.st2 .btn{ background:#333; color:#fff}
.prodView_intro .prodView_btn > li.st3 .btn{ background:#fff; border-color:#333; color:#333}
.prodView_intro .prodView_btn > li.st4 .btn{ background:#844890; color:#fff}
.prodView_intro .prodView_btn > li .btn .arrow{ font-size:1em; width:0; overflow:hidden}
.prodView_intro .prodView_btn > li .btn .arrow:after{ content:"\e93f"; padding-left:3px}
.prodView_intro .prodView_btn > li:hover .btn .arrow{ width:20px}

.prodView_spec{}
.prodView_spec .spec_wrap{}
.prodView_spec .spec_wrap + .spec_wrap{ margin-top:2em;}
.prodView_spec .spec_wrap .spec_tit{border-bottom: 1px solid #111;
    padding: 0.75em 0;}
.prodView_spec .spec_wrap .spec_tit .t1{font-weight: 700;
    font-size: 1.75em;}
.prodView_spec .spec_wrap .spec_con{ padding:3em 0;}
.prodView_spec .spec_wrap .spec_con.spec{ padding:2em 1.5em;}
.prodView_spec .spec_wrap .spec_con.as{ padding:2em 3em;}
.prodView_spec .spec_wrap .spec_con.bg{background-color:#f6f6f6;}
.prodView_spec .spec_wrap .spec_con.bg .inner{ padding:2.5em 1.5em; border-radius:.5em; background-color:#fff;}
.prodView_spec .spec_wrap .spec_con.spec .inner > p{ font-size:1.125em; line-height: 1.4; color:#333; word-break:keep-all;}
.prodView_spec .spec_wrap .spec_con.spec .inner > p + p{ margin-top:2em;}
.prodView_spec .spec_wrap .spec_con.spec .inner > p strong{ font-weight: 600; color:var(--siteC2);}
.prodView_spec .spec_wrap .spec_con.spec .inner table{ margin:0 auto}


/* company-ceo인사말 */
.greet_wrap{}
.greet_wrap .greet-top{ margin-bottom: 5em;}
.greet_wrap .greet-top .t2{ margin-top: 10px; line-height: 1.2;}
.greet_wrap .greet-con{ gap:4.5em; padding: 0 3em;}
.greet_wrap .greet-con .img_wrap{ width: 45%;}
.greet_wrap .greet-con .img_wrap .img{ width: 100%; padding-bottom: 100%; border-radius: 1em; box-shadow: -3px 3px 15px rgba(0,0,0,.1);}
.greet_wrap .greet-con .txt_wrap{ flex:1; padding-top: 5em;}
.greet_wrap .greet-con .txt_wrap .page_tt{ color:#333;}
.greet_wrap .greet-con .txt_wrap .page_tt + .page_tt{ margin-top: 1em;}
.greet_wrap .greet-con .txt_wrap p.ceo{ margin-top: 3em; padding-right: 3em; font-size: 1.25em; text-align: right;}
.greet_wrap .greet-con .txt_wrap p.ceo strong{ padding-left: 1em; font-weight: 600; font-size: 1.5rem;}


/* prodeuct 공통 */
.dp1_prd #contents .sub_page_top .visual_wrap{ display: none;}
.dp1_prd #contents .sub_page_con{ display: none;}
.dp1_prd #contents .sub_page_top .tit_wrap .wrapIn{ margin-bottom: 2vh;}
.dp1_prd #contents .sub_page_menu::after{ content: ''; width: 100vw; height: 1px; background-color: #ddd; position: absolute; left: 50%; bottom: 3px; z-index: -1; transform: translateX(-50%);}

.dp1_prdVi #contents .sub_page_top .visual_wrap,
.dp1_prdFn #contents .sub_page_top .visual_wrap{ display: none;}
.dp1_prdVi #contents .sub_page_con,
.dp1_prdFn #contents .sub_page_con{ display: none;}
.dp1_prdVi #contents .sub_page_top .tit_wrap .wrapIn,
.dp1_prdFn #contents .sub_page_top .tit_wrap .wrapIn{ margin-bottom: 2vh;}
.dp1_prdVi #contents .sub_page_menu::after,
.dp1_prdFn #contents .sub_page_menu::after{ content: ''; width: 100vw; height: 1px; background-color: #ddd; position: absolute; left: 50%; bottom: 3px; z-index: -1; transform: translateX(-50%);}




/* 다운로드 */
/* .dp1_down #contents .sub_page_top .visual_wrap{ display: none;}
.dp1_down #contents .sub_page_menu::after{ content: ''; width: 100vw; height: 1px; background-color: #ddd; position: absolute; left: 50%; bottom: 3px; z-index: -1; transform: translateX(-50%);}
.dp1_down #contents .sub_page_con{ padding-top: 3em;}
.dp1_down #contents .sub_page_top .tit_wrap .wrapIn{ margin-bottom: 0vh;} */


/* 연혁 */
.history-con .history-inner {transform: scale(1); /* height: 100vh; */ margin-bottom: 5em;}
.history-con .history-inner:last-child {margin-bottom: 0;}
.history-con .history-inner.reverse {flex-direction: row-reverse;}
.history-con .history-inner.reverse .history-left .img-wrap {margin-right: 0; margin-left: 3em; }
.history-con .history-left .img-wrap { margin-right:3em; width: 55vw; margin-left: -22vw; position: sticky; top:10em; }
.history-con .history-left .img-wrap .imgfix{ overflow: hidden; border-radius: 2em; height:calc(100vh - 15em)}
.history-con .history-inner .history-right {flex:1; padding-left: 5em; box-sizing: border-box;}
.history-con .history-inner .history-right .item{ margin-bottom:15em;}
.history-con .history-inner .history-right .item .years-title h2{ display: inline-block;}
/* .history-con .history-inner .history-right .item .years-title h2::after{ content: "'"; margin-left: -10px; font-style: italic;} */
.history-con .history-inner .history-right .item .info_list > li{ display: flex; gap: 1em;}
.history-con .history-inner .history-right .item .info_list > li + li{ margin-top:1em;}
.history-con .history-inner .history-right .item .year{min-width: 3em;}
.history-con .history-inner .history-right .item .info{}


/* 조직도 */
.org_wrap{ text-align: center;}

/* 거래업체 */
.prtnersList_wrap{}
.prtnersList{ gap:4em 2em}
.prtnersList > li{width: calc((100% - 4em) / 3);padding: 2em;border:1px solid #ddd; transition: all .3s;}
.prtnersList > li .tit_wrap{}
.prtnersList > li .tit_wrap .logo{max-width: 70%;height: 3em;margin:0 auto}
.prtnersList > li .tit_wrap .name{margin-top: 1em;font-weight: 600;font-size: 1.25em;color: #111;text-align: center;}
.prtnersList > li .con_wrap{margin-top: 2em;padding: 2em .5em 0;border-top:1px dotted var(--siteC2);}
.prtnersList > li .con_wrap .con{ padding-left: 1em; color:#333; position: relative; word-break: keep-all;}
.prtnersList > li .con_wrap .con + .con{ margin-top: 0.5em;}
.prtnersList > li .con_wrap .con::before{content: '';width: 5px;height: 5px;border-radius: 50%;background: #aaa;position: absolute;left: 0;top: 7px;}
.prtnersList > li:hover{ border-color:var(--siteC); box-shadow: 0 0 20px rgba(0, 0, 0, .05);}

/* 오시는길 */
.mapWrap .root_daum_roughmap .wrap_controllers{ display: none;}
.mapInfoWrap{}
.mapInfoWrap .in{ gap:1em;}
.mapInfo{ flex:1; padding: 2em 2.5em; background: #f4f4f4; border:1px solid #ddd; position: relative;}
.mapInfo .tit_wrap{ margin-bottom: 1.5em;}
.mapInfo .info{}
.mapInfo .info p + p{ margin-top: 0.8em;}
.mapInfo .icon{ width: 3em; height: 3em; border-radius: 50%;}
.mapInfo.info01 .icon{ background:var(--siteC)}
.mapInfo.info02 .icon{ background:#555}
.mapInfo .xi{ color:#fff;}


/* 인증서 */
.page_certificate { } 
.page_certificate .list { gap: 4.5em 2em; } 
.page_certificate .list > li { position: relative; flex: 0 0 calc(25% - 2em); cursor: pointer; } 
.page_certificate .list > li .img-area { position: relative; padding: 2.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } 
.page_certificate .list > li .xi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.5em; height: 2.5em; border: 3px solid var(--siteC); border-radius: 50%; color: var(--crWhite); background: var(--siteC); opacity: 0; visibility: hidden; transition: 0.3s; display: flex; align-items: center; justify-content: center; } 
.page_certificate .list > li:hover .xi { opacity: 1; visibility: visible; } 
.page_certificate .list > li:hover .img-area { border-color: var(--siteC); } 
.page_certificate .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 210px; height: 310px; margin: 0 auto;} 
.page_certificate .list > li .txt { margin-top: 1.5em; text-align: center; } 
.page_certificate .list > li .txt > p { font-size: 1.125rem; } 
.page_certificate .list > li .txt > span { display: inline-block; font-size: 1rem; color: var(--crGray3); margin-top: 10px; } 

.page_certificate.st2 .list { gap: 2em 2em; }
.page_certificate.st2 .list > li .img-area { position: relative; padding: 1.5em; background: var(--crGray2); border: 3px solid transparent; transition: 0.3s; box-sizing: border-box; } 
.page_certificate.st2 .list > li .img-area .imgfix { box-shadow: 0 0 30px rgba(0, 0, 0, .075); width: 272px; height: 100px; background: #fff; text-align: center;} 
.page_certificate.st2 .list > li .img-area .imgfix img {width: 14em; max-height: 45px; height: 45px; object-fit: contain; padding-top: 1.5em;}

.page_certificate.st_main {background: #fff; flex: 1 100%; padding: 3em; border-radius: 1.5em; box-shadow: 0 0 10px rgba(0, 0, 0, .05);}
.page_certificate.st_main .list {gap: 1em;}
.page_certificate.st_main .list > li {flex: 0 0 calc(20% - 1em);}

html.pop .popWrap.img {width: 25vw; opacity: 0; transform: scale(0.5); transition: 0.5s;}
html.pop .popWrap.img.ani {opacity: 1; transform: scale(1);}
html.pop .popWrap.img .popTit {background: transparent; padding: 0; justify-content: flex-end;}
html.pop .popWrap.img .popTit .popClose .xi {color: #fff; text-align: right;}
html.pop .popWrap.img .tit .t1 {display: inline-block; font-size: 1.125rem; color: #fff; font-weight: 500; margin-top: 1rem;}
/* html.pop .popWrap.img .imgarea {width: 30vw;} */

/* 사업영역 */

.dp1_company.dp2_business #contents .sub_page_con {display: none;}

.page_col{ gap:2em 6em;}
.page_col.gp1{}
.page_col > li{}
.page_col > li.w1{ width:45%;}
.page_col > li.w2{ width: 25%;}
.page_col + .page_col{ margin-top:8em;}
.page_col > li .p1{ padding:4em 0 5em 0;}
.page_col > li .p2{ padding:3em 0 2em 0;}
.page_col > li .round{ border-radius:1.25em; overflow:hidden;}
.page_col > li.inImg:not(.flex) .wrap_img:not(.resize){ position:relative; height:100%;}
.page_col > li.inImg.flex .wrap_img{ flex:1;}
.page_col > li .stkH1{ height:var(--maxHeight);}
.page_col > li .stkH1 .wrap_img{ flex:1;}

.page_list.number { } 
.page_list.number > li { } 
.page_list.number > li .in { gap:1.5em; padding:2em 0; } 
.page_list.number > li:not(:last-child) .in { border-bottom:1px solid #ddd; } 
.page_list.number > li .in .num_wrap { gap:1.125em; } 
.page_list.number > li .in .num_wrap .num { min-width:1.5em; font-size:1.5em; font-weight: 500;} 
.page_list.number > li .in .num_wrap:after { content:""; width:2.5em; height:1px; background:#999; } 
.page_list.number > li .in .con_wrap { flex:1; } 

.memo_box {border: 1px dashed var(--gradC1); padding: 1em; border-radius: .8em; margin-top: 1em; background: var(--crGray3);}
.ttdot{ position:relative; padding-left:1rem; line-height:1.3; font-size: 1.125em; margin-bottom: .3em;}
.ttdot:before{ content:""; position:absolute; left:0; top:.495em; width:.313rem; height:.313rem; background:var(--siteC); border-radius:50%;}
.mark {width: 10em;}



/***********************/
/*MAIN******************/
.visualSlider .el{ position:relative; overflow:hidden; height:100vh;}
.visualSlider .el .vod_wrap,
.visualSlider .el .img_wrap{height: 100vh;}
.visualSlider .el .vod,
.visualSlider .el .imgfix { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.visualSlider .el .vod_wrap:after,
.visualSlider .el .img_wrap:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(0, 0, 0, .6), transparent);}
.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{ position:sticky; top:0;}
.visualSlider_wrap .slogan{ width:100%; position:absolute; left:0;  top:35vh; z-index:10; color:#fff;}
.visualSlider_wrap .slogan .wrap_in{}
.visualSlider_wrap .slogan .tt.line{padding-bottom:1.5em;margin-bottom: 1em;border-bottom:1px solid rgba(255,255,255,.4);}
.visualSlider_wrap .slogan [txt-split] .word{ display:flex !important; justify-content:space-between;}
.visualSlider_wrap .slogan .t1{font-size: 3.500em;font-weight:700;line-height: 1.2;text-transform:uppercase;}
.visualSlider_wrap .slogan .t2{ font-size:1.75em; line-height:1.2;}
.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_control{ position:absolute; left:0; bottom:4vh; width:100%; z-index:10}
.visualSlider_control .swiperPG{ margin-right:2em;}
.visualSlider_control .swiperBtn{}

/**/
.main_wrapper{ position:relative; background:#fff;}
.main_con{ padding:8em 0; word-break:keep-all;}
.main_con.bg1{ background:var(--siteBg2);}
.main_con.bg2{ background:var(--crGray3);}

.main_txt{ position:relative;}
.main_txt:not(:last-child){ margin-bottom:3.5em;}
.main_txt.m1{ margin-bottom:1em;}
.main_txt.m2{ margin-bottom:5em;}
.main_txt .nw{ white-space:nowrap;}
.main_txt .tit{ margin-top:1em;}
.main_txt .txt{ margin-top:2em; line-height:1.6;}
.main_txt .txt + .txt{ margin-top:1em;}
.main_txt .tit:first-child,
.main_txt .txt:first-child{ margin-top:0;}
.main_txt .o1{ opacity:.6;}
.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.250em;}
.main_txt .t9{ font-size:3.000em;}
.main_txt .t10{ font-size:4.500em;}
.main_txt .t11{ font-size:5.500em;}
.main_txt .t12{ font-size:6.500em;}
.main_txt .t13{ font-size:8.500em;}
.main_txt .t14{ font-size:10em;}

.main_txt .wordSpace [txt-split],
.main_txt .wordSpace [txt-split] > .word,
.main_txt .wordSpace [txt-split] > .word .char{ display:flex !important; justify-content:space-between; gap:.15vw;}

.main_txt .inPosVod{ position:absolute; max-width:100%;}
.main_txt .inPosVod ~ *{ position:relative;}
.main_txt .inPosVod.st1{ width:20vw; top:0; left:50%; transform:translate(-50%,-15%); background:#000; border-radius:1em; overflow:hidden;}
.main_txt .inPosVod.st1::after{ content:''; width: 100%; height:100%; background:var(--siteBg1); position:absolute; left:0; top:0; opacity:.6;}

.main_txt .line{ display:inline-block; width:2px; height:2px;}
.main_txt .line:before{ content:""; display:block; width:100%; height:100%; background:var(--siteC);}
.main_txt .line.w{ margin:2em 0; width:2.5em;}
.main_txt .line.h{ margin:1.5em .125em; height:1.5em;}
.main_txt .line:first-child{ margin-top:0;}
.main_txt .line:last-child{ margin-bottom:0;}
.main_txt .line + .tit,
.main_txt .line + .txt{ margin-top:0;}

.main_txt_wrap:not(:last-child){ margin-bottom:3.5em;}
.main_txt_wrap.flex{}
.main_txt_wrap.flex .main_txt{ margin-bottom:0;}

.main_more > .more{ position:relative; gap:0 1em; padding:.5em 2em; height:3.75em; min-width:12em; max-width:100%; background:var(--siteC); border-radius:6em; text-align:center; color:#fff; transition:.2s;}
.main_more > .more .in_tt{ font-size:1.125em; font-weight:500;}
.main_more > .more .xi{ font-size:1.250em;}
.main_more > .more.re{ background:transparent; border:1px solid var(--siteC); color:var(--siteC);}
.main_more > .more.re:hover{ background:var(--siteC); color:#fff;}

.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%; color:#000; transition:.2s;}
.main_more > .more.st1 .xi{ font-size:1.250em;}
.main_more > .more.st1:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;}

.main_more > .more.st2{ height:3.25em; min-width:10em; font-size:.813em; text-transform:uppercase;}

.main_txt.cw .tt{ color:#fff;}
.main_txt.cw .line:before{ background:#fff;}
.main_more.cw > .more{ background:var(--siteC2);}
.main_more.cw > .more.re{ background:transparent; border:1px solid var(--siteC2); color:var(--siteC2);}
.main_more.cw > .more.st1{ background:transparent; border-color:var(--siteC2); color:var(--siteC2);}
.main_more.cw > .more.re:hover,
.main_more.cw > .more.st1:hover{ background:var(--siteC2); color:#fff;}

.main_layout{ gap:2em 6em;}
.main_layout > li{}
.main_layout > li.w1{ width:35%;}
.main_layout > li.w2{ width:25%;}
.main_layout + .main_layout{ margin-top:14em;}
.main_layout > li .p1{ padding:4em 0 5em 0;}
.main_layout > li .p2{ padding:1.5em 0;}
.main_layout > li .round{ border-radius:1.5em; overflow:hidden;}
.main_layout > li .wrap_img{ position:relative; height:100%;}
.main_layout > li.stickyT{ height:100%;}
.main_layout > li.inm1{ margin-top:8em; margin-left:10em;}
.main_layout > li.inm2{ margin-top:-8em;}

.main .blurCircle{ position:absolute; width:20%; padding:15%; border-radius:50%; background:var(--crGrad2); filter:blur(4em); opacity:.4; transition:all 1s linear; animation: blurCircle 4s linear infinite;}
.main .blurCircle.pos1{ left:5%; bottom:15%; position:fixed;}
.main .blurCircle.pos2{ right:0; bottom:0;}

.main_scroll{ position:relative;}

/* main - new product */
.main_newPrd{ position: relative; z-index: 1;}
.newPrdSlider_warp{ position: relative;}
.newPrdSlider{ padding-bottom: 3em; position: relative; overflow: hidden;}
.newPrdSlider .swiper-wrapper{}
.newPrdSlider .swiper-wrapper .swiper-slide{ background: #fff;}
/* .newPrdSlider .swiperBtn_wrap{ width: 50%;position: absolute; left: 0;}
.newPrdSlider .swiperBtn_wrap .btn.next{ position: absolute; left: 0;}
.newPrdSlider .swiperBtn_wrap .btn.prev{ position: absolute; right: 0;} */
.newPrdSlider .newPrd_pagination{ position: absolute; bottom: 0;}
.main_newPrd .inner{ gap:6em; }
.main_newPrd .inner .txt_wrap{ flex:1;}
.main_newPrd .inner .txt_wrap .main_txt .tit{ opacity:0; transition: opacity .5s;}
.main_newPrd .inner .txt_wrap .main_txt .desc{ margin-top: 1.5em; color:#555;}
.main_newPrd .inner .txt_wrap .info_list{ max-width: 80%; border-top: 2px solid var(--siteC2);}
/* .main_newPrd .inner .txt_wrap .info_list{ max-width: 80%; min-height: 24em; border-top: 2px solid var(--siteC2);} */
.main_newPrd .inner .txt_wrap .info_list > li{padding: 1.5em 2em;border-bottom: 1px solid #ddd;}
.main_newPrd .inner .txt_wrap .info_list > li + li{ border-bottom: 1px solid #ddd;}
.main_newPrd .inner .txt_wrap .info_list > li .tt{ padding-left:1em; font-weight:600; font-size: 1.125em; color:#333; position:relative;}
.main_newPrd .inner .txt_wrap .info_list > li .tt::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--siteC2); position:absolute; left:0; top:8px;}
.main_newPrd .inner .txt_wrap .main_more{ margin-top: 3em;}
.main_newPrd .inner .img_wrap{ width: 40%; position: relative}
.main_newPrd .inner .img_wrap .img{ position:relative; z-index:1}
.main_newPrd .inner .img_wrap .img img{ height: 100%; object-fit: contain}
.main_newPrd .inner .img_wrap .svgW{width: 15em;height: 15em;position:absolute;right: -4em;top: -4em;}
.main_newPrd .inner .img_wrap .svgW .svgtt{width:100%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.main_newPrd .inner .img_wrap .svgW .svgtt .tt{ font-size:1.5em; fill:var(--siteC2); word-spacing:.375em}

.newPrdSlider .swiper-slide.swiper-slide-active .inner .txt_wrap .main_txt .tit{ opacity: 1;}


/**/
.main_about{}
/* .main_about .itemList{ gap:1em; color:#fff;}
.main_about .itemList > li{ display:flex;}
.main_about .itemList > li .in{ flex:1; padding:3em 2.5em 1.5em 2.5em; background-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(46,59,128,.5) 100%); border:1px solid rgba(255,255,255,.3); border-radius:1em; box-sizing:border-box;}
.main_about .itemList > li .in .ico_wrap{ max-width:60%; width:6em; margin-left:auto;}
.main_about .itemList > li .in .ico_wrap img{ width:100%; opacity:.8;}
.main_about .itemList > li:nth-child(1){ width:45%; height:24em;}
.main_about .itemList > li:nth-child(2){ width:35%; margin-top:auto;}
.main_about .itemList > li:nth-child(3){ width:calc(50% - .5em);}
.main_about .itemList > li:nth-child(4){ width:calc(50% - .5em);}
.main_about .itemList > li:nth-child(5){ width:calc(31% - .6666em); margin-top:auto;}
.main_about .itemList > li:nth-child(6){ width:calc(31% - .6666em); height:20em;}
.main_about .itemList > li:nth-child(7){ width:calc(31% - .6666em); height:20em;}
.main_about .itemList > li:nth-child(8){ width:100%;} */

.main_about .prdPart{ padding: .5em 0 6em;}
.main_about .prdPart ul{ margin-top: 3em;}
.main_about .prdPart ul > li{ display: flex; gap: 6em;}
.main_about .prdPart ul > li .img_wrap{ width: 45%; position: relative;}
.main_about .prdPart ul > li:nth-child(even) .img_wrap{ order:1;}
.main_about .prdPart ul > li + li{ margin-top: 8em;}
.main_about .prdPart ul > li .img_wrap img{ display: block; width: 100%; position: relative; z-index: 1;}
.main_about .prdPart ul > li .img_wrap::after{ content: ''; width: 100%; height: 100%; border:1px solid #fff;  position: absolute; left: 1em; top: 1em; }  
.main_about .prdPart ul > li .txt_wrap{flex:1; padding-top: 5em;}
.main_about .prdPart ul > li .txt_wrap .tit{ padding: 4em 0 2.5em 1.5em; position: relative;} 
.main_about .prdPart ul > li .txt_wrap .tit .num{ font-weight: 600; font-size: 6em; color:rgba(255, 255, 255, .3); position: absolute; left:0; top:0;}
.main_about .prdPart ul > li .txt_wrap .tit .t1{ font-weight: 600; font-size:2.75em; color:#fff;}
.main_about .prdPart ul > li .txt_wrap .desc{ padding-left:1.5rem; font-size: 1.125em; line-height: 1.5;}
.main_about .prdPart ul > li .txt_wrap .main_more{ margin-top:5em; padding-left:1.5rem;}

@keyframes blurCircle {
50% { -webkit-filter:blur(6em); filter:blur(6em); opacity:.2;}
}



.main_business .img_box .main_txt{ margin-top:-2em; padding:0 1.5em;}

.main_product{ position:relative;}
.main_product .main_prod_wrap{ position:absolute; top:0; right:0; height:100%; width:calc((100vw - var(--baseWidth)) / 2 + (var(--baseWidth) * 0.7)); padding:2em 5em; overflow:hidden; box-sizing:border-box;}
.main_product .main_prod_wrap .posBg{ position:absolute; top:0; left:0; width:100%; height:100%; filter:blur(.5em); transform:scale(1.1);}
.mainProdSlider .el{ height:auto;}
.mainProdSlider .el .wrap_in{ gap:2em; height:100%; padding:2em; background:#fff; border-radius:.75em; overflow:hidden;}
.mainProdSlider .el .wrap_in .con_wrap{ gap:1em;}
.mainProdSlider .el .wrap_in .con_wrap .cate{}
.mainProdSlider .el .wrap_in .con_wrap .cate .tt{ display:inline-block; padding:.375em .625em; background:var(--siteC3); color:#fff;}
.mainProdSlider .el .wrap_in .con_wrap .tit{ font-size:1.500em; font-weight:700;}
.mainProdSlider .el .wrap_in .con_wrap .txt .tt{ font-size:.875em; color:#555;}
.mainProdSlider .el .wrap_in .con_wrap .txt .tt + .tt{ margin-top:.5em;}
.mainProdSlider_wrap{ flex:1; position:relative;}
.mainProdSlider_wrap .swiperControl{ position:absolute; top:50%; left:-2em; right:-2em;}
.mainProdSlider_wrap .swiperControl .swiperBtn{ position:absolute; top:0; transform:translateY(-50%);}

.main_agency{ position:relative; overflow:hidden;}
.mainAgencySlider_wrap{}
.mainAgencySlider{}
.mainAgencySlider .el{ height:auto;}
.mainAgencySlider .el .wrap_in{ gap:2em; height:100%; color:#111;}
.mainAgencySlider .el .wrap_in .img_wrap{ margin-top:auto; background:#fff; border-radius:.75em; border:1px solid #ddd; overflow:hidden;}
.mainAgencySlider .el .wrap_in .con_wrap{ gap:.5em; padding:1.5em .5em 0; border-top:1px solid rgba(0, 0, 0, .15);}
.mainAgencySlider .el .wrap_in .con_wrap .cate{ color:var(--siteC);}
.mainAgencySlider .el .wrap_in .con_wrap .txt{ font-size:1.063em; opacity:.6;}
.mainAgencySlider .el .wrap_in .con_wrap .tit{ font-size:1.5em; font-weight:700;}

/* main - partners */
.main_partners {
  overflow-x: hidden;
}
.main_partners_list {}
.main_partners_list .list {
  width: fit-content;
}
.main_partners_list .list.marqueeAni {
  animation-duration: 45s;
}
.main_partners_list .list > li {
  min-width: 15em;
  position: relative;
}
.main_partners_list .list > li::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 3em;
  background: #ddd;
  top: 50%;
  right: -2.5em;
  transform: translateY(-50%);
}
.main_partners_list .list > li .img-area {}
.main_partners_list .list > li .img-area .imgfix {
  height: 7em;
  /* max-width: 13em; */
}


.main_customer{}
.main_customer{ background:#f1f1f1}
.main_customer .wrapIn{display:flex;flex-wrap:wrap;justify-content:space-between;width: 100%;gap: 4.5em;box-sizing: border-box;}
.main_news{flex: 1;background:#fff;padding:4em;border-radius: 1.5em;box-sizing:border-box;box-shadow: 0 0 10px rgba(0, 0, 0, .05);}
.main_news .list{ display:flex; justify-content:flex-start; gap:1.5em; margin-top:2em}
.main_news .list > li{ flex: 0 0 calc((100% - 3em) / 3);}
.main_news .list > li .in{width: 100%;background:#fff;border: 1px solid #ddd;border-radius: 0 3em 0 0;}
.main_news .list > li .in .img_wrap .resize{ padding-bottom:56.25%}
.main_news .list > li .in .con_wrap{padding:2em 1.5em;display:flex;flex-direction:column;gap:1em;word-break: break-all;}
.main_news .list > li .in .con_wrap .tit{ min-height: 2.5em;padding-top: 2.5em; font-weight: 700; font-size:1.25em; word-break: keep-all;position:relative}
.main_news .list > li .in .con_wrap .tit::before{ content:''; width:1em; height:3px; background:var(--siteC); position:absolute; left:0; top:0;}
.main_news .list > li .in .con_wrap .date{ font-size:.813em; font-weight:500; color:#777}
.main_news .list > li .in .con_wrap .tt{ font-size:.938em; font-weight:500; line-height:1.5em; height:4.5em}
.main_link{width:30%;display:flex;flex-direction:column;gap: .5em;}
.main_link > li{flex:1 1 1%;border-radius: 1.5em;overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0,  .1);}
.main_link > li .in{ position:relative; box-sizing:border-box; height:100%}
.main_link > li .in .bg,
.main_link > li .in .bg:after{ position:absolute; left:0; top:0; width:100%; height:100%}
.main_link > li .in .bg:after{ content:""; opacity:.7}
.main_link > li .in .con{position:relative;box-sizing:border-box;padding:2em;height:100%;display:flex;flex-direction:column;gap:1em;color:#fff;justify-content:center}
.main_link > li .in .con .tit{ font-size:1.5em; font-weight:700}
.main_link > li .in .con .more{ width:2em; height:2em; border-radius:50%; border:1px solid #fff; transform:rotate(-30deg); display:flex; align-items:center; justify-content:center}
.main_link > li .in .con .more .arrow{ font-size:1em}
.main_link > li .in .con .more .arrow:before{ content:"\e907"}
.main_link > li.m1 .in .bg:after{ background:var(--siteC)}
.main_link > li.m2 .in .bg:after{ background:#002658/* #009507 */}
.main_link > li.m3 .in .bg:after{ background:#111}


.main_inquiry{}
.main_inquiry .form_wrap{}
.main_inquiry .form_wrap .form{ gap:1em; font-size:1.063em;}
.main_inquiry .form_wrap .form > li{}
.main_inquiry .form_wrap .form > li:not(.w100){ width:calc(50% - .5em);}
.main_inquiry .form_wrap .form > li .inp_wrap{ position:relative;}
.main_inquiry .form_wrap .form > li .inp_wrap .tit,
.main_inquiry .form_wrap .form > li .inp_wrap .input_st:not(textarea){ height:4em;}
.main_inquiry .form_wrap .form > li .inp_wrap .tit{ position:absolute; top:0; left:0; padding-left:1.5em;}
.main_inquiry .form_wrap .form > li .inp_wrap .tit .tt{ font-size:1.063em; font-weight:600;}
.main_inquiry .form_wrap .form > li .inp_wrap .input_st:not(textarea){ width:100%; padding-left:7em;}
.main_inquiry .form_wrap .form > li .inp_wrap textarea.input_st{ padding-top:4em; padding-left:1.5em; height:12em;}
.main_inquiry .form_wrap .form > li .inp_wrap .input_st{ border:none; box-shadow:0 2px 1em rgba(0,0,0,.05);}
.main_inquiry .form_wrap .form_chk{ margin-top:2em;}
.main_inquiry .form_wrap .form_chk .chk{ gap:1em;}
.main_inquiry .form_wrap .form_chk .btn .input_st{ width:10em;}



/* Mobile */
.moblie-filter-wrap {
  position: fixed;
  top: 100%;
  left: 0;
  padding: 2em 4vw;
  box-sizing: border-box;
  border: 1px solid #000;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 1024;
  display: none !important;
  transition: top 0.3s;
} 
.moblie-filter-wrap.active {
  top: 0;
  display: block !important;
}
.mo-filter-btn .input_st {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0.5em;
  width: 2.5em;
  height: 2.5em;
}
.filter-closer .xi {
  font-size: 1.5em;
}

.captcha-wrap {}
.captcha-wrap .tit {
  position: static !important;
}
.captcha-wrap .captcha-inner {
  flex: 1;
  gap: 1em;
}
.captcha-wrap .captcha-inner #loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.captcha-wrap .input_st {
  padding-left: 1em !important;
}

.main_inquiry .captcha-wrap .tit {
  padding-left: 0 !important;
}


/* .rotateAni{ animation-name: rotateAni; animation-duration: 20s; transform-origin:center; animation-timing-function:linear; animation-iteration-count: infinite}
@keyframes rotateAni{
100% {transform:rotate(360deg)}
} */

