@charset "utf-8";
/* CSS Document */
.box0{ margin:0 2%;}
.box1{ width:1400px; max-width:96%; margin:0 auto;}

html:not(.pop) body{ min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)}

.pcHide{ display:none !important;}
.moHide{}

.gnb li.m_hide{ display:none}
.gnb_cate .layer,
.gnb .layer{ display:none !important;}
.gnb_cate .dp3 > li .img{ display:none;}

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

.headT{ padding-top:calc(5.5em);}
.headH,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1{ height:5.5em; transition:.2s;}

.wrapHide{ height:4em;}
.stickyT{ position:sticky; top:4em;}

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


/*header*/
#header{ z-index:999; position:fixed; top:0; left:0; width:100%; background:#fff; box-shadow:0 .25em .5em rgba(0,0,0,.15);}
#header .logo .in img{ height:4.25em; transform-origin:left center; transition:.2s;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; padding:0 1.5vw; color:#333;}
#header .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:.5em; right:.5em; bottom:0; height:3px; background:#999; opacity:0; transition:.2s;}
#header .gnb_wrap .gnb > li .dp1 .tt{ font-size:.875em; text-transform:uppercase; letter-spacing:.125em;}
#header .gnb_wrap .gnb > li .dp2{ display:none;}
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after,
#header.open .gnb_wrap .gnb > li.m_products .dp1:after{ opacity:1;}
#header .gnb_wrap .gnb > li.on .dp1{ color:#005c9d; font-weight:600;}
#header .gnb_wrap .gnb > li.on .dp1:after{ background:#005c9d;}

#header .gnb_wrap .gnb > li.m_products .dp1.link{ display:none;}
#header .gnb_wrap .gnb > li.m_products .dp1.layer{ display:flex !important;}

#header .prod_cate{ padding:1.5em 0; display:none;}
#header.open .prod_cate{ display:block;}
#header .prod_cate .cate_tit{ padding:0 .75em 1em; margin-bottom:1.5em; border-bottom:1px solid #ddd;}
#header .prod_cate .cate_tit .tt{ font-size:1.063em; font-weight:500; border-bottom:1px solid transparent; transition:.2s;}
#header .prod_cate .cate_tit .tt:after{ content:"\e907"; font-family:xeicon; padding-left:.5em; vertical-align:middle;}
#header .prod_cate .cate_tit .tt:hover{ border-bottom-color:#333;}
#header .prod_cate .gnb_cate{}
#header .prod_cate .gnb_cate .cate_img{ width:34%;}
#header .prod_cate .gnb_cate .cate_img .img{}
#header .prod_cate .gnb_cate .cate_img .txt{ min-height:2.5em; padding-top:1em; box-sizing:border-box;}
#header .prod_cate .gnb_cate .cate_img .txt .tt{ font-size:.938em;}
#header .prod_cate .gnb_cate .dp2{ flex:1}
#header .prod_cate .gnb_cate .dp2 a{ display:block; text-align:left !important;}
#header .prod_cate .gnb_cate .dp2 > li{ flex:1; padding-right:3em;}
#header .prod_cate .gnb_cate .dp2 > li > a{ padding:0 .75em .5em;}
#header .prod_cate .gnb_cate .dp2 > li > a .tt{ font-size:1.750em; font-weight:500; color:#005c9d;}
#header .prod_cate .gnb_cate .dp3{ display:block;}
#header .prod_cate .gnb_cate .dp3 > li{ transition:.2s;}
#header .prod_cate .gnb_cate .dp3 > li > a{ padding:.375em .75em;}
#header .prod_cate .gnb_cate .dp3 > li > a .in{ position:relative;}
#header .prod_cate .gnb_cate .dp3 > li > a .tt{ font-size:.875em;}
#header .prod_cate .gnb_cate .dp3 > li.act{ background:#f2f2f2;}

.gnb_cate .dp3 > li > a{ text-align:left !important;}
.gnb_cate .dp3 > li > a .in{ flex:1; position:relative; display:block; padding-left:.875em;}
.gnb_cate .dp3 > li > a .in:before{ content:""; position:absolute; left:0; top:.375em; width:.25em; height:.25em; background:#333;}
.gnb_cate .dp3 > li > a .in .tt:after{ content:"\e940"; font-family:xeicon; font-size:.938em; color:#aaa; font-weight:normal; padding-left:.5em; vertical-align:middle; transition:.2s;}
.gnb_cate .dp3 > li.act > a{ color:#005c9d; font-weight:600;}
.gnb_cate .dp3 > li.act > a .in .tt:after{ padding-left:1em;}

.scroll .headH,
.scroll #header .gnb_wrap .gnb > li,
.scroll #header .gnb_wrap .gnb > li .dp1{ height:4em;}
.scroll #header .logo .in img{ transform:scale(.75);}


/*footer*/
#footer .goTop{ z-index:999; position:fixed; right:1em; bottom:1em; width:3em; height:3em; background:#fff; box-shadow:1px 1px .5em rgba(0,0,0,.15); opacity:0; transform:translateY(8em); transition:.3s;}
#footer .goTop:hover{ background:#222; color:#fff;}
.scroll #footer .goTop{ opacity:1; transform:translateY(0);}

#footer{ background:#000;}
#footer .inner{ padding:3em 0; gap:0 2em; color:#fff;}
#footer .logo img{ width:8em;}
#footer .info_wrap{ flex:1;}
#footer .info_wrap .menu{ margin-bottom:1.75em;}
#footer .info_wrap .menu > li + li .in:before{ content:""; width:1px; height:1em; background:rgba(255,255,255,.3); margin:0 1em;}
#footer .info_wrap .info{ gap:.5em 1em;}
#footer .info_wrap .info > li:not(.copy) .tt{ font-size:.938em; opacity:.7;}
#footer .info_wrap .info > li.add{ width:100%;}
#footer .info_wrap .info > li.copy{ width:100%; padding-top:.5em;}
#footer .info_wrap .info > li.copy .tt{ font-size:.750em; text-transform:uppercase; opacity:.4;}


/*contents*/
#contents{}
#contents .sub_page_top{}
#contents .sub_page_top .sub_tit{ padding:4em 0 0;}
#contents .sub_page_top .sub_tit .tit{ font-size:2.750em; color:#333; font-weight:300;}
#contents .sub_page_top .sub_tit .txt{ margin-top:1em; font-size:1.125em; color:#555;}
#contents .sub_page_top + .page_line{ margin-top:2em;}

#contents .sub_prod_top{ padding:3em 0; background:#f5f5f5;}
#contents .sub_prod_top .sub_tit .tit{ font-size:2.000em; color:#333; font-weight:600;}
#contents .sub_prod_top .sub_nav{ margin-bottom:3em;}
#contents .sub_prod_top .sub_nav .nav{}
#contents .sub_prod_top .sub_nav .nav > li{}
#contents .sub_prod_top .sub_nav .nav > li > a{ color:#555;}
#contents .sub_prod_top .sub_nav .nav > li + li > a:before{ content:"\e940"; font-family:xeicon; margin:0 .25em; font-size:.875em; color:#888;}
#contents .sub_prod_top .sub_nav .nav > li .xi{ font-size:1.125em;}
#contents .sub_prod_top .sub_nav .nav > li .tt{ font-size:.938em;}
#contents .sub_prod_top .sub_nav .nav > li:last-child .tt{ font-weight:600;}
#contents .sub_prod_top .sub_nav .nav > li > a:hover .tt{ text-decoration:underline;}

#contents .doc{ padding:3em 0 8em 0;}
#contents .page_line + .doc{ padding-top:4em;}

.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}

.cateOn1 .dp2 > li,
.cateOn2 .dp2 > li,
.cateOn1 .dp2 > li > a,
.cateOn2 .dp2 > li > a{ display:none;}
.cateOn1 .dp2 > li:nth-child(1),
.cateOn2 .dp2 > li:nth-child(2){ display:block;}


/*SUB PAGE*******************/
/*inc*/
.page_txt:not(:last-child){ margin-bottom:3em;}
.page_txt .tit.icon{ position:relative;}
.page_txt .tit.icon:before{ content:""; position:absolute; left:-1em; width:.75em; height:.75em; background:#005c9d; border-radius:50%;}
.page_txt .tit.icon2{ position:relative;}
.page_txt .tit.icon2 .mark{ position:absolute; width:2em; left:-1.875em; top:-1em;}
.page_txt .tit.icon2 .mark img{ width:100%;}
.page_txt .tit.icon2 .mark + *{ position:relative;}

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

.page_top_tit:not(:last-child){ margin-bottom:4em;}
.page_top_tit > .inner{ position:relative; overflow:hidden;}
.page_top_tit .wrap_bg{ position:relative;}
.page_top_tit .wrap_bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2);}
.page_top_tit .wrap_pos{ position:absolute; left:0; bottom:-.25em; width:100%; box-sizing:border-box;}
.page_top_tit .wrap_pos .logo{ display:inline-block; width:11em; margin-bottom:3em;}
.page_top_tit .wrap_pos .logo img{ width:100%;}
.page_top_tit .wrap_pos .tt{ color:#fff;}
.page_top_tit .wrap_pos .tt.fStroke{ -webkit-text-fill-color:rgba(255,255,255,.1);}
.page_top_tit .wrap_pos .t1{ font-size:6.000em; line-height:1;}

.page_top_tit.st1 .wrap_bg{ height:26em;}

.page_top_tit.st2 .wrap_bg{ min-height:26em;}
.page_top_tit.st2 .wrap_bg:before{ background:rgba(0,0,0,.4);}
.page_top_tit.st2 .wrap_bg:after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:40%; background:linear-gradient(-180deg,transparent, #fff)}
.page_top_tit.st2 .wrap_pos{ bottom:0; height:100%; padding:1em 0 8em 0; text-align:center;}

.page_tbox.st1{ position:relative; margin:-10em -6em 0 -6em; padding:5em 6em 0; background:#fff;}
.page_tbox.st2{ padding:2.5em 3em; background:#f5f5f5;}

.page_line > .line{ position:relative; height:1px; background:#e5e5e5;}
.page_line > .line:after{ content:""; position:absolute; left:0; bottom:0; width:4em; height:1px; background:#005c9d;}

.tab_wrap{}
.tab_wrap.st1{ position:relative; padding:0 1px 0 0; margin-bottom:4em;}
.tab_wrap.st1 > li{ flex:1;}
.tab_wrap.st1 > li > a{ display:block; text-align:center; margin:0 -1px 0 0; padding:.5em 1em; background:#fff; border:solid #e0e0e0; border-width:3px 1px 1px 1px; filter:brightness(.97) grayscale(1);}
.tab_wrap.st1 > li .in{ gap:0 3em;}
.tab_wrap.st1 > li .in .img{ width:8.5em;}
.tab_wrap.st1 > li .in .txt{ flex:1; padding:0 3em 0 0;}
.tab_wrap.st1 > li .in .tt{ font-size:1.625em; font-weight:600;}
.tab_wrap.st1 > li.on > a{ border-bottom-color:#fff; border-top-color:#005c9d; filter:brightness(1) grayscale(0);}

.sub_map{ border:1px solid #ddd;}
.sub_map .map{ width:100%; height:34em;}

.page_layout{ gap:2em 6em;}
.page_layout > li.w1{ width:45%;}
.page_layout > li.w2{ width:35%; min-width:19em;}
.page_layout > li > .wrap_con{ padding:2em 0;}
.page_layout > li > .wrap_img{ height:100%;}
.page_layout > li > .wrap_img .inMark{ width:50%; margin-top:-4em;}
.page_layout > li > .wrap_img .inMark img{ width:100%;}

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

.page_list{ gap:1em 1em;}
.page_list > li{ flex:1;}
.page_list > li .in .circle{ border:1px solid #e5e5e5; border-radius:50%;}
.page_list > li .in .ico{ margin-bottom:1.25em;}
.page_list > li .in .ico img{ width:2.75em;}
.page_list > li .in .txt{}
.page_list > li .in .txt .t1{ font-size:1.125em;}
.page_list > li:nth-child(1) .in .txt .t1{ color:#4e901f;}
.page_list > li:nth-child(2) .in .txt .t1{ color:#f27523;}
.page_list > li:nth-child(3) .in .txt .t1{ color:#005c9d;}
.page_list > li:nth-child(4) .in .txt .t1{ color:#de232a;}

/*products*/
.page_prod_wrap{}
.page_prod_wrap .gnb_cate{}
.page_prod_wrap .gnb_cate .dp2{ display:block;}
.page_prod_wrap .gnb_cate .dp3{ flex-wrap:wrap;}
.page_prod_wrap .gnb_cate .dp3 > li{ width:50%;}
.page_prod_wrap .gnb_cate .dp3 > li > a{ gap:1em 2em; margin:.5em 1em .5em 0;}
.page_prod_wrap .gnb_cate .dp3 > li > a .img{ display:block; width:6em;}
.page_prod_wrap .gnb_cate .dp3 > li > a .in{ flex:1; padding-left:0;}
.page_prod_wrap .gnb_cate .dp3 > li > a .in:before{ display:none;}

.prod_form_wrap{}
.prod_form{}
.prod_form .wrap_in{ gap:2em 5em; position:relative; padding:2em 0; border-bottom:1px solid #e5e5e5;}
.prod_form .wrap_in:after{ content:""; position:absolute; left:0; bottom:-1px; width:10em; height:1px; background:#005c9d;}
.prod_form .wrap_in > .img{ width:40%;}
.prod_form .wrap_in > .img img{ width:100%;}
.prod_form .wrap_in > .img .in_img + .in_txt{ margin-top:1.5em;}
.prod_form .wrap_in > .img .in_txt + .in_img{ margin-top:.5em;}
.prod_form .wrap_in > .img .in_txt{ padding:.5em 1em; background:#f5f5f5;}
.prod_form .wrap_in > .con{ flex:1;}
.prod_form .wrap_in.flex.vc > .con{ padding-bottom:3em;}

.form_st{}
.form_st > li{}
.form_st .inp_wrap{ position:relative;}
.form_st .inp_wrap .inp_tit{ position:absolute; top:0; left:0; height:100%; padding:0 .5em;}
.form_st .inp_wrap .inp_tit .tt{ font-weight:600;}
.form_st .inp_wrap .inp{ width:100%; height:3.5em; padding-left:10em; border-width:0 0 1px 0;}

.form_layout{ gap:2em 5em;}
.form_layout .form_txt{ width:40%;}
.form_layout .form_con{ flex:1;}

.prod_list{}
.prod_list .list{ margin:-1.25em;}
.prod_list .list > li{ width:20%;}
.prod_list .list > li .wrap_in{ flex:1; margin:1.25em; text-align:center;}
.prod_list .list > li .wrap_in .txt{ padding:1.5em 0 2.5em;}
.prod_list .list > li .wrap_in .txt .tt{ font-size:1.313em; font-weight:600;}
.prod_list .list > li .wrap_in .btn .input_st{ width:100%;}

/**/
.agree_box{ color:#444; word-break:keep-all; line-height:1.8;}
.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******************/
.mainVisual_wrap{ overflow:hidden; position:relative;}
.mainVisual{ height:100%;}
.mainVisual .el{ position:relative; height:100%; overflow:hidden; background:#333;}
.mainVisual .bg{ width:calc(100% + 3em); opacity:0; transition:opacity .6s, transform 2s;}
.mainVisual .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4);}
.mainVisual_wrap .slogan{ z-index:2; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; color:#fff;}
.mainVisual_wrap .slogan .inner{ padding:2vh 0 15vh;}
.mainVisual_wrap .slogan .mark{ margin-bottom:1em;}
.mainVisual_wrap .slogan .mark img{ width:6em; transition-duration:3s;}
.mainVisual_wrap .slogan .tt{ font-size:4.500em; font-weight:700; min-height:1em;}
.mainVisual_wrap .slogan .tt > *{ display:inline-block; vertical-align:middle;}

.mainVisual .el.swiper-slide-active .bg{ opacity:1; transform:translateX(-3em);}
.load .mainVisual_wrap .slogan .mark img{ transform:rotate(360deg);}

.mainVisual_wrap .main_control{ z-index:3; position:absolute; left:0; bottom:2em; width:100%;}
.mainVisual_wrap .main_control .inner{ gap:0 .25em;}
.mainVisual_wrap .main_control .swiperPG{ margin-right:2em;}

.typing + .blink{ display:inline-block; width:2px; height:1em; margin-left:.25em; background:rgba(255,255,255,.6); animation:blink 0.8s infinite;}

@keyframes blink {
to { opacity:0;}
}

.main_con{ padding:4em 0;}
.main_con.bg1{ background:#f5f5f5;}
.main_con.bg2{ border-top:4px solid #eee;}

.main_txt{ margin-bottom:2em;}
.main_txt:last-child{ margin-bottom:0;}
.main_txt.m1{ margin-bottom:1em;}
.main_txt .tit{ margin-top:1.5em;}
.main_txt .txt{ margin-top:2em; line-height:1.6;}
.main_txt > div:first-child{ margin-top:0;}
.main_txt .line{ display:inline-block; width:1px; height:2px; background:#005c9d;}
.main_txt .line.w{ width:2.25em; margin:1.75em 0;}
.main_txt .line.h{ height:1.5em; margin:1.5em .125em;}
.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 > .ico img{ width:3em;}
.main_txt .o1{ opacity:.7;}
.main_txt .t1{ font-size:1.000em;}
.main_txt .t2{ font-size:1.250em;}
.main_txt .t3{ font-size:1.375em;}
.main_txt .t4{ font-size:1.500em;}
.main_txt .t5{ font-size:1.750em;}
.main_txt .t6{ font-size:2.250em;}
.main_txt .t7{ font-size:2.625em;}
.main_txt .t8{ font-size:6.000em;}
.main_txt .t9{ font-size:6.750em;}
.main_txt .t10{ font-size:3.000em;}

.main_txt.cw .tt{ color:#fff;}
.main_txt.cw > .line{ background:#fff;}
.main_txt .nw{ white-space:nowrap;}

.main_txt .tt.bgfix{ color:transparent; background-clip:text; -webkit-background-clip:text; -webkit-text-stroke:1px rgba(255,255,255,1);}

.main_txt_wrap{ gap:0 3em;}
.main_txt_wrap > *{ margin-bottom:0;}
.main_txt_wrap .main_ico .ico{ width:4.5em;}
.main_txt_wrap .main_ico .ico img{ width:100%;}

.main_more > .more{ gap:0 .5em; color:#333; transition:.2s;}
.main_more > .more .in_tt{ font-size:1.063em;}
.main_more > .more .icon{ font-size:1.188em; line-height:1; transition:.2s;}
.main_more > .more:hover{ color:#005c9d;}
.main_more > .more:hover .icon{ transform:rotate(180deg);}

.main_more > .more.st2{ height:3em; padding:0 1.5em; border:1px solid #333; color:#000;}
.main_more > .more.st2:hover{ background:#005c9d; border-color:#005c9d; color:#fff;}

.main_pruduct{}
.main_pruduct .gnb_cate .dp2{ display:block;}
.main_pruduct .gnb_cate .dp3{ flex-wrap:wrap; flex-direction:column; gap:.75em 0;}
.main_pruduct .gnb_cate .dp3 > li > a{ display:inline-block;}
.main_pruduct .gnb_cate .dp3 > li > a .in .tt{ font-size:.938em;}

.main_col{ gap:0 8em;}
.main_col + .main_col{ margin-top:4em;}
.main_col > li{}
.main_col > li.w1{ width:46%;}
.main_col > li.w2{ width:30%;}
.main_col > li .wrap_img{ height:100%;}
.main_col > li .wrap_con{ padding:3em 0 4em 0;}

.main_applications{}
.applications_list{}
.applications_list > li .wrap_in{ flex:1;}
.applications_list > li .wrap_in .img{ overflow:hidden;}
.applications_list > li .wrap_in .img:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0); backdrop-filter:grayscale(0); transition:.2s;}
.applications_list > li .wrap_in .con{ padding:1.25em .25em;}
.applications_list > li .wrap_in .con .tt{ font-size:1.063em;}
.applications_list > li .wrap_in .con .tt:after{ content:"\e940"; font-family:xeicon; font-size:.875em; vertical-align:middle; padding-left:.375em;}
.applications_list > li .wrap_in:hover{ color:#005c9d;}
.applications_list > li .wrap_in:hover .img:after{ background:rgba(0,0,0,.4); backdrop-filter:grayscale(1);}

.main_applications .applications_list{ gap:1em 1em;}
.main_applications .applications_list > li{ flex:1;}

.sub_applications .applications_list{ margin:-1.25em;}
.sub_applications .applications_list > li{ width:33.33%;}
.sub_applications .applications_list > li .wrap_in{ margin:1.25em;}
.sub_applications .applications_list > li .wrap_in .con{ padding:1.5em .25em 2.5em;}
.sub_applications .applications_list > li .wrap_in .con .tt{ font-size:1.313em;}

.contact_list{ gap:1em 1em;}
.contact_list > li{ flex:1; text-align:center;}
.contact_list > li .in{ flex:1;}
.contact_list > li + li .in{ padding-left:1em; border-left:1px solid #ddd;}