@charset "utf-8";


@font-face {
    font-family: 'KccImKwonTaek';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202@1.0/KCCImkwontaek.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}


.doc{font-size: 16px;}
.box0{width: 1800px; max-width: 96%; margin: 0 auto;}
.box1{ width:1280px; max-width: 96%; margin:0 auto; position:relative } 
.mobile_only{display:none;}


:root{
	--mainColor: #0074be;
	--item_r:20px;
	--Color01:#f2f6fa;
	--Color02:#00497c;
	--fs_01: 'KccImKwonTaek';
}


/*header*/
#header{z-index: 200; position: fixed; top: 0; left: 0; width:100%;}
#header .va_wrap,
#header .h_wrap{height:var(--header_H);}
#header #logo{z-index:800; margin-right: auto;}
#header #logo .a_ver{display:none;}
#header #logo img{display:block;}
#header .gnb_wrap{margin-right: 12px;} 
#header .gnb_wrap .gnb .depth1{margin:0 38px; position: relative;}
#header .gnb_wrap .gnb .depth1 > a{font-size: 1.125em; line-height: inherit; font-weight:400; color:#fff; position: relative;}
#header .gnb_wrap .gnb .depth1 > ul{background:#fff; min-width: 160px; border: 1px solid #ddd; border-top:0; margin-top:-2px; transition:all .5s; position:absolute; left:50%; transform:translateX(-50%); max-height:0; overflow:hidden; opacity:0 }
#header .gnb_wrap .gnb .depth1 > ul:after{content: ""; position: absolute; left: 0; top: -2px; width: 100%; height:5px; background-color:var(--mainColor); transform: scaleX(0); transition: .3s;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a{display: block; text-align: center; color:#444; border-top: 1px dotted #ddd; font-weight:400; padding: 15px 10px;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a:hover{background: #f5f5f5;}
#header .gnb_wrap .gnb .depth1:hover ul{ max-height:500px; opacity:1 }
#header .gnb_wrap .gnb .depth1:hover > ul:after{transform: scaleX(1);}

/*검색*/
#header .hd_sch_btn{font-size:1.125em; color:#fff; cursor: pointer;}
#header .hd_sch_btn.on .xi:before{content:'\e921';}
#header .hd_sch_wr #hd_sch{border:1px solid rgba(255,255,255,.8); border-radius: 50px; position: relative; width:240px; overflow: hidden;}
#header .hd_sch_wr #hd_sch #sch_stx{border:0; background:transparent; color:#fff; width:100%; height: 45px; padding:5px 55px 5px 20px; font-size:.95em; box-sizing: border-box;}
#header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:rgba(255,255,255,.8)!important;}
#header .hd_sch_wr #hd_sch button{border:0; background-color:var(--mainColor); width:38px; height: 38px; color:#fff; position: absolute; top:50%; transform: translateY(-50%); right:4px; border-radius: 50%; font-size:.9em;}

/*회원*/
#header .hd_login{margin-left:20px;}
#header .hd_login > li a{color:#fff; margin-left:15px; font-weight: 300;}
#header .hd_login > li:first-child a{margin-left:0px;}
#header .hd_login > li .xi{vertical-align: baseline; margin-right:4px;}

/*전체메뉴버튼*/
#header .btn_gnb{width:22px; height: 30px; position: relative; z-index: 10000; margin-left:6px;}
#header .btn_gnb .bar_i{width:22px; height: 2px; background:#fff; margin:6px 0; display: block; transition:.3s;}
#header .btn_gnb .bar_i.n_02{width:16px; margin-left:auto;}
#header .btn_gnb:hover .bar_i.n_02{width:22px;}
.pc_all_menu .gnb_all{padding: 4em 0 0;}
.pc_all_menu .gnb_all > li.depth1{margin-bottom: 2.5em;}
.pc_all_menu .gnb_all > li.depth1 > a.dp1{width: 400px; font-size: 2.25em; font-weight: 700; line-height: inherit; position: relative;}
.pc_all_menu .gnb_all > li.depth1 .dp2_menu > li a:after{height: 6px;}
#header .btn_gnb.on .bar_i{background: #333;}
#header .btn_gnb.on .bar_i.n_02{display:none;}
#header .btn_gnb.on .bar_i:nth-child(1){position: absolute; top: 30%; left: 0px; transform:translateY(-50%) rotate(45deg)}
#header .btn_gnb.on .bar_i:nth-child(2){position: absolute; top: 30%; right: 0px; transform:translateY(-50%) rotate(-45deg)}
.scroll #header .btn_gnb .bar_i{background: #333!important;}



#header .btn_gnb .a_rd{width:10px; height: 10px; background-color: #fff; border-radius: 50%;}
#header .btn_gnb .a_rd.a1{position: absolute; top: 0; left: 0; transition:.3s;}
#header .btn_gnb .a_rd.a2{position: absolute; top: 0; right: 0; background-color:var(--mainColor)!important; transition:.3s;}
#header .btn_gnb .a_rd.a3{position: absolute; bottom: 0; left: 0; transition:.3s; }
#header .btn_gnb .a_rd.a4{position: absolute; bottom: 0; right: 0; transition:.3s; }

#header .btn_gnb:hover .a_rd.a1,
#header .btn_gnb:hover .a_rd.a4{display:none;}
#header .btn_gnb:hover .a_rd.a2,
#header .btn_gnb:hover .a_rd.a3{width:100%; border-radius: 50px;}

#header .btn_gnb.on .a_rd.a1,
#header .btn_gnb.on .a_rd.a4{display:none;}
#header .btn_gnb.on .a_rd.a2{width:100%; border-radius: 50px;}
#header .btn_gnb.on .a_rd.a3{width:100%; border-radius: 50px; background-color: #666;}

/*스크롤 header*/
.scroll #header{background-color:#fff; border-bottom:1px solid #ddd;}
.scroll #header #logo .a_ver{display:block;}
.scroll #header #logo .b_ver{display:none;}
.scroll #header .gnb_wrap .gnb .depth1 > a{color:#222;}
.scroll #header .hd_sch_btn{color:#555;}
.scroll #header .hd_sch_wr #hd_sch{border-color:#ccc;}
.scroll #header .hd_sch_wr #hd_sch #sch_stx{color:#555;}
.scroll #header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:#aaa!important;}
.scroll #header .hd_login > li a{color:#555;}
.scroll #header .btn_gnb .a_rd{background-color:#666;}


/*탑버튼*/
.qk_list{position: fixed; bottom:20px; right: 26px; z-index: 100;font-size: 16px; }
.qk_list li{ margin-top: 5px;}
.qk_list li a{display: block; width: 52px; height: 52px; line-height: 52px; text-align: center;  border-radius: 50%; font-size: 1.45em;  box-shadow: 2px 2px 3px rgb(0 0 0 / 20%); overflow: hidden; margin-left: auto; background-color: #333; color: #fff; transition: .5s;}
.qk_list li .xi{width: 52px; line-height: 52px; text-align:center;}
.qk_list li .stx{font-size: .75em; width:0; overflow: hidden; display: none; font-weight: 600;}
.qk_list li a:hover .stx{width:auto; overflow: hidden; display: block;}
.qk_list li .qk_pro{background: #0074be; border: 1px solid #0074be;}
.qk_list li .qk_pro .stx{font-size:.7em; }
.qk_list li .qk_pro:hover{width:140px; border-radius: 50px;}


/*footer*/
#footer{border-top: 1px solid #ddd; padding:67px 0 56px; margin-top:8em;}
#footer .f_menu{margin-top: 15px; margin-bottom:28px;}
#footer .f_menu > li a{color:#333; margin-right:17px;}
#footer .f_menu > li a:hover{opacity: .9;}
#footer .f_menu > li:last-child a{margin-right:0px;}
#footer .f_info > li{color:#333; font-weight: 400; margin-right:36px; font-size:1em; line-height: 1.6; position: relative;}
#footer .f_info > li:before{content: ''; display: block; width: 1px; height: 15px; background: #999; position: absolute; top: 6px; right: -20px;}
#footer .f_info > li.st:before,
#footer .f_info > li:last-child:before{display: none;}
#footer .f_info > li span{color: #999; margin-right: 15px;}
#footer .f_copy{font-size:1em; color:#999; margin-top:30px; text-transform: uppercase;}

#footer .f_pv_right{position: relative;}
#footer .f_pv_right .f_logo{position: absolute; bottom: 0; right: 0;}
#footer .f_site{width:200px; position: relative; margin-left:auto;}
#footer .f_site .f_site_btn{width:100%; font-size: .937em; color:#999; padding:11px 20px; cursor: pointer; border:1px solid #ddd; background: #fff; border-radius: 5px;}
#footer .f_site .f_site_btn .xi{vertical-align: middle; margin-left:auto;}
#footer .f_site .f_site_list{width:100%; background-color: #f9f9f9; border: 1px solid #ddd; padding:3px 10px; max-height: 150px; border-radius: 5px; overflow-y: scroll; position: absolute; top:-100px; left: 0; display: none; z-index: 5;}
#footer .f_site .f_site_list.on{display:block;}
#footer .f_site .f_site_list > li a{ color:#999; padding:10px 0; border-bottom:1px dotted #ddd; display:block; font-size:.938em;}
#footer .f_site .f_site_list > li a:hover{ color:#333;}
#footer .f_site .f_site_list > li:last-child a{border-bottom:none;}
#footer .f_site .f_site_list::-webkit-scrollbar{width:3px;}
#footer .f_site .f_site_list::-webkit-scrollbar-thumb{background-color: #999; border-radius: 5px;}
#footer .f_site .f_site_list::-webkit-scrollbar-track{}


/*서브 비주얼*/
.sub_v_wrap{position: relative;}
#sub_visual{height:430px; position: relative; overflow: hidden;}
#sub_visual .bgfix{position:absolute; top: 0; left:0; width:100%; height: 100%; transform: scale(1.15); transition-timing-function: ease-in-out; transition: 1s;}
#sub_visual .sub_v_tit{ font-weight: 700; text-align:center; font-size:3.625em; color:#fff; position: relative; z-index: 10; margin-right:3em; opacity:0; transition:1s;}
.load #sub_visual .bgfix{transform: scale(1);}
.load #sub_visual .sub_v_tit{margin-right:0; opacity:1}

#sub_visual.sub10 .bgfix{background-image:url(../img/sub/sub_v_01.jpg);}
#sub_visual.sub20 .bgfix{background-image:url(../img/sub/sub_v_02.jpg);}
#sub_visual.sub30 .bgfix{background-image:url(../img/sub/sub_v_03.jpg);}
#sub_visual.sub40 .bgfix{background-image:url(../img/sub/sub_v_04.jpg);}
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/sub_v_05.jpg);}

/*snb*/
#snb { position: absolute; bottom:4em; left:50%; transform: translateX(-50%); z-index: 10; opacity: 0; transition: 1.5s; width:96%;}
#snb .snb_list .sdp1 a{display:block; width:55px; height: 55px; line-height: 55px; border-radius: 50%; text-align:center; background-color:var(--mainColor); color:#fff; font-size:1.125em;}
#snb .snb_list .sdp2,
#snb .snb_list .sdp3,
#snb .snb_list .last{position: relative; width:250px; border-bottom:1px solid rgba(255,255,255,.3);padding:15px 20px; margin-left:20px; cursor: pointer; box-sizing: border-box;}
#snb .snb_list .last{cursor: default;}
#snb .snb_list .sdp_tt{ color:#fff; font-size:1.125em; font-weight: 500; padding-right:20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#snb .snb_list .sdp_tt:before{content:'\e943'; font-family: 'xeicon'; position: absolute; top: 50%; right:20px; transform: translateY(-50%); font-size:.938em;}
#snb .snb_list .last .sdp_tt:before{display:none;}
#snb .snb_list .sdp_list_wrap{ max-height: 0px; position: absolute; top: 75px; left: 0;  width: 100%;  background: #fff; border-radius: 20px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10); z-index: 10; transition: .3s; transition-timing-function: ease-in-out; opacity: 0; overflow: hidden;}
#snb .snb_list .Aon .sdp_list_wrap{ max-height: 1000px; opacity: 1;}
#snb .snb_list .sdp_list{ padding: 25px; }
#snb .snb_list .sdp_list > li{margin-bottom:7px;}
#snb .snb_list .sdp_list > li:last-child{margin-bottom:0;}
#snb .snb_list .sdp_list > li a{color:#777; font-size:1.05em;}
#snb .snb_list .sdp_list > li.on a{color:var(--mainColor); font-weight: 500;}
.load #snb{ opacity: 1;}

/*컨텐츠 페이지*/
.ctt_admin{display:none;}/*관리자 내용수정 버튼*/
#ctt header{display:none;}/*컨텐츠 페이지 타이틀 header*/

/*컨텐츠 타이틀*/
.container_title{font-weight: 500; font-size: 2.125em; padding-top: 35px; margin: 55px 0; text-align: center; position: relative;}
.container_title:before{content:''; width:1px; height: 26px; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top; background: #222; position: absolute; top: 0; left: 50%;}
.load .container_title:before{transform: scaleY(1); visibility: visible;} 

/*개인정보&이용약관*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{ font-size: .938em;}
.agree_box .in_con .agree_wrap span{ display: block;}


/*구글언어*/
#google_notranslate_top{position: relative; width:76px;}
#google_notranslate_top > a{ display: block; padding: 7px 0; position: relative;}
#google_notranslate_top > a:before{content:'\e942'; font-family: 'xeicon'; position: absolute; top: 50%; right:10px; transform: translateY(-50%);}
#google_notranslate_top > a .xi{margin-right: 5px; color: #000;}
#google_notranslate_top .translation-links{position: absolute; top: 38px; left: 0; background-color: #fff; width:100%; border-radius: 10px; padding:5px; border:1px solid #ddd;}
#google_notranslate_top .translation-links > a{display:block; text-align: center;}
#header #google_notranslate_top > a .xi{color: #fff;}
#header #google_notranslate_top > a img.st{filter: brightness(100);}
#header #google_notranslate_top > a:before{color: #fff;}
 
.scroll #header #google_notranslate_top > a .xi{color: inherit;}
.scroll #header #google_notranslate_top > a img.st{filter: inherit;}
.scroll #header #google_notranslate_top > a:before{color: inherit;}

/*구글번역*/
body{top:0!important;}
.skiptranslate{display:none;}

/*구글언어 텍스트 안내창*/
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{background:transparent!important; box-shadow: 0 0 0 transparent!important;}
.VIpgJd-yAWNEb-L7lbkb{display: none!important; }


/*영문CSS*/
html[lang="ko"] .ko_ver{display: block!important;}
html[lang="ko"] .en_ver{display: none!important;}
html[lang="en"] .ko_ver{display: none!important;}
html[lang="en"] .en_ver{display: block!important;}



/*=================================================================main============================================================*/

/*메인 비주얼*/
.mainSlider{position:relative;}
.mainSlider .el{ height:100vh; position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.2,1.2); transition-delay:1s}
.mainSlider .slogan{ position:absolute; top:50%; left:50%; transform: translate(-50%, -60%); color:#fff;}
.mainSlider .slogan .t1{ font-size:3.875em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.2;}
.mainSlider .slogan .t2{ font-size:1.75em; font-weight: 500; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:40px;}
.mainSlider .slogan .t3{ font-size:1.25em; font-weight: 300; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:30px;}
.mainSlider .el.swiper-slide-active .bg{ transform:scale(1); transition:2s; transition-delay:0; transition-timing-function:ease-in}
.mainSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.mainSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.mainSlider .el.swiper-slide-active .slogan .t3{ transform:translateY(0); opacity:.8; transition:1s; transition-delay:1.5s}

.mainSlider .mainSlider-pagination{ position: absolute; left:50%; bottom:3em; transform: translateX(-50%); z-index: 100;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet{width:120px; height:auto; margin: 0 20px 0 0; border-radius: 0; opacity: .4; background:transparent; color:#fff; border-bottom:2px solid #fff; padding-bottom:5px;}
.mainSlider .mainSlider-pagination .swiper-pagination-bullet-active{opacity: 1;}


/*메인 동영상*/
.yt_box {position:relative; width:100%; height:100vh; overflow:hidden; background:#000 url('../img/main/video_bg.jpg') no-repeat center center / cover;}
.yt_cover {position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;background:rgba(0,0,0,.1);}
.yt_box iframe {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:0; width:100vw; height:56.25vw; min-width:177.78vh; min-height:100vh;}

.yt_box .slogan{ position:absolute; top:53%; left:50%; transform: translate(-50%, -50%); color:#fff; z-index: 10;}
.yt_box .slogan .t1{font-size:4.0625em; display:block; transform:translateY(1em); font-weight: 700; opacity:0; margin-bottom: 20px; line-height: 1.2;}
.yt_box .slogan .t2{ font-size:1.75em; font-weight: 200; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:20px;}
.yt_box .slogan .t3{ font-size:1.5em; font-weight: 300; transform:translateY(1em); opacity:0; line-height: 1.5; margin-top:35px;}
.load .yt_box .slogan .t1{transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.load .yt_box .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.load .yt_box .slogan .t3{ transform:translateY(0); opacity:.9; transition:1s; transition-delay:1.5s}

.scroll_wrap{position: absolute; bottom: 0; left:0;width:100%; z-index: 10;}
.scroll_wrap .mainSlide_scroll{ color: #fff; font-size: 0.937em; text-align: center; letter-spacing: 0px; font-weight: 300;}
.scroll_wrap .mainSlide_scroll_bar{ width: 1px; height: 45px; background: rgba(255,255,255,.5); margin: 5px auto 0; position: relative; overflow: hidden;}
.scroll_wrap .scroll_bar {width:3px; height: 16px; background: #fff; animation: box-ani 2s linear infinite backwards; margin-left:-2px;}

@keyframes box-ani { 
0% {transform: translate(50%, 0);} 
100% {transform: translate(50%, 53px);}
}

/*비디오*/
.main_video{width:100%; height:100%; object-fit:cover; display:block;}



/*메인 샘플용 css*/
.main_tit{ margin-bottom: 45px;}
.main_tit .in_en{ font-size:1.125em; font-weight: 600; color: var(--mainColor); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px;}
.main_tit .in_tt{ font-size:2.875em; color:#000; font-weight: 500; line-height: 1.3;}
.main_tit .in_tx{font-size: 1.25em; color: #333; line-height: 1.6; margin-top: 15px;}
.main_more{}
.main_more a{display: inline-block; padding:9px 15px 11px 22px; border:1px solid #ddd; transition: .3s; color:#999; font-size:.937em; font-weight: 400; letter-spacing: 0px; border-radius: 50px;  text-align: center;}
.main_more a:hover{border-color:var(--mainColor); background-color:var(--mainColor); color:#fff;}
.main_more a .xi{width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: #111; color: #fff; margin-left: 24px; transition: .3s;} 
.main_more a:hover .xi{background: #fff; color: var(--mainColor); transform: rotate(90deg);}


.main_box{position: relative; overflow: hidden;}
.main_box .bg{position: absolute; top: 57%; right: 0; transform: translateY(-50%);}

/*main R&D*/
.main_rnd{padding-top: 120px;}
.main_rnd > div{width: 50%;}
.main_rnd .left_box{padding-right: 80px;}
.main_rnd .right_box{padding-left: 80px;}
.main_rnd .left_box .img_z{width: 100%; height: 560px; border-radius: var(--item_r); overflow: hidden;}

/*main product*/
.main_product{padding: 170px 0 120px; overflow: hidden;}
.main_product .main_tit{margin-bottom: 35px; text-transform: uppercase;}
.main_product .product_slider{display:flex; position: relative;}
.main_product .left_box{width:50%; padding-right: 80px; position: absolute; bottom: 0; left: 0; z-index: 10;}
.main_product .left_box .product_thumb{overflow: hidden;}
.main_product .left_box .txt_box{font-size: 1.0625em; font-weight: 500; color: #666; line-height: 1.6; letter-spacing: -.5px;}
.main_product .left_box .product_thumb li .in{}
.main_product .left_box .product_thumb li .in .img_box{width:100%; height:173px;  background: var(--Color01); border-radius: 15px; padding: 20px;}
.main_product .left_box .product_thumb li .in .img_box img{width: 100%; height: 100%; object-fit: contain;}
.main_product .left_box .product_thumb li .in .ti{text-align: center; margin-top: 15px; font-size: 1.125em; color: #333; text-transform: uppercase;}
.main_product .right_box{width:100%;}
.main_product .right_box .product_main{overflow: hidden;}
.main_product .right_box .product_main li .in .txt_box{width:50%; padding-right: 80px;} 
.main_product .right_box .product_main li .in .img_box{width:50%; padding-left: 80px;}
.main_product .right_box .product_main li .in .img_box .img_z{height:560px; background: var(--Color01); border-radius: var(--item_r); padding: 20px;}
.main_product .right_box .product_main li .in .img_box .img_z img{width: 100%; height: 100%; object-fit: contain;}

.main_product .product_nav{}
.main_product .product_nav .in-btn{position: absolute; top: 38%; transform: translateY(-50%);}
.main_product .product_nav .in_prev{left: -60px;}
.main_product .product_nav .in_next{right: 30px;}
.main_product .pagen_st{margin-top: 25px;}
.main_product .pagen_st .in-page{width: calc(100% - 80px); height: 3px; background: #ddd;}
.main_product .main_product_pagen{display: none;}

/*main cer*/
.main_cer{background: var(--Color01); border-radius: var(--item_r); padding: 120px 0;}
.main_cer .main_more a{background: #fff; border-color: #fff;}
.main_cer .main_more a:hover{border-color:var(--mainColor);}

/*main notice*/
.main_notice{padding: 120px 0;}
.main_notice{}
 
/*main contact*/
.main_contact{padding: 85px 0 100px; border-radius: var(--item_r);}
.main_contact .main_tit .in_en,
.main_contact .main_tit .in_tt{color: #fff;}
.main_contact .main_more a{color: #fff;}
.main_contact .main_more a .xi{color: var(--mainColor); background: #fff;}

.main_more a:hover{background-color:#fff; color:var(--mainColor);}
.main_more a:hover .xi{background: var(--mainColor); color: #fff;}

 
/**/
.tab_idx{ margin:-1em 0 3em -1em;}
.tab_idx > li{flex:1 20%;}
.tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; margin:1em 0 0 1em; color:#666; transition:.3s;}
.tab_idx > li > a .va{font-size:1.068em; font-weight:500}
.tab_idx > li > a:hover,
.tab_idx > li.on > a{ box-shadow:0 0 1em .125em rgba(0,0,0,.1); color:var(--mainColor); border-color:var(--mainColor)}

/**/
.nm_page_tt{font-size:1.5em; text-align: center; margin:80px auto 30px;}
.nm_page_tt .nmb{width:50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--mainColor); display: inline-block; color:#fff; margin-right:5px;}
.page_tt{font-size:2em; font-weight: 600;}
.page_stt{font-size:1.45em; font-weight: 600;}
.page_tx{font-size:1.125em; font-weight: 300; line-height: 1.6;}
.page_stx{font-size:1em; font-weight: 300;}
.page_en{font-size: 1em; font-weight:400; color: #999; margin-bottom:20px; letter-spacing:.5px; text-transform: capitalize;}

.dot_list{padding: 0!important; margin: 0!important; text-align: left;}
.dot_list > li{line-height: 1.8; font-size: 1em; color: #222; position: relative; padding-left: 10px;}
.dot_list > li:before{content: ''; display: block; width: 3px; height: 3px; background: #bbb; border-radius: 50%; position: absolute; top: 10px; left: 0;}

.table_st{table-layout:fixed; border-top: 2px solid #333; margin-bottom: 10px;}
.table_st th, 
.table_st td{padding: 1em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; line-height: 1.6;}
.table_st th{color:#222; /*background-color:#f9f9f9; */font-size:1em; font-weight: 500;}
.table_st td{color:#666;} 
.table_st .co_1{background: #f9f9f9;}
.table_st .co_2{background: var(--mainColor); color: #fff;}
.table_info{display: none;}


/*인사말*/
.com_wrap{}
.com_wrap .page_tt{margin-bottom: 40px; line-height: 1.4; color: #222;}
.com_wrap .page_tx{margin-bottom: 10px; color: #333;}
.com_wrap .page_stt{margin-bottom: 15px;}
.com_wrap .page_stx{line-height: 1.6;}
.com_wrap .com_con{margin-bottom: 7em;}
.com_wrap .com_con .left_box{width: 50%; padding-right: 40px;}
.com_wrap .com_con .right_box{width: 50%; padding-left: 40px;}
.com_wrap .com_con .right_box .img_box{}
.com_wrap .com_con .right_box .img_box .img_z{width: 100%; height: 530px; border-radius: var(--item_r); }
.com_wrap .com_con.rev .left_box{padding-left: 40px; padding-right: 0;}
.com_wrap .com_con.rev .right_box{padding-left: 0; padding-right: 40px;}
.com_wrap .com_con .ceo{font-weight: 600; margin-top: 40px;}
.com_wrap .com_con .ceo .ceo_name{font-family: var(--fs_01); font-size: 2em; font-weight: 400; margin-left: 10px;}
.com_wrap .com_list{margin-right: -20px; margin-bottom: 7em;}
.com_wrap .com_list > li{width: 33.33%;}
.com_wrap .com_list > li .in{ margin-right: 20px;}
.com_wrap .com_list > li .in .img_box{width: 100%; height: 400px; padding: 40px; border-radius: var(--item_r); align-content: end; position: relative; overflow: hidden;}
.com_wrap .com_list > li .in .img_box:before{content: ''; display: block; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 70%); position: absolute; top: 0; left: 0;}
.com_wrap .com_list > li .in .img_box .page_stt{color: #fff;}
.com_wrap .com_list > li .in .img_box .page_stt span{display: block;}
.com_wrap .com_list > li .in .img_box .page_stx{color: #fff; opacity: .8;}
.com_wrap .com_list > li .in .img_box .txt_z{position: relative; z-index: 1;}


/*연혁*/
.his_wrap{position: relative;}
.his_wrap .his_con{position: relative}
.his_wrap .his_con:before{content: ''; display: block; width: 1px; height: 100%; background: #ddd; position: absolute; top: 0; left: 50%;}
.his_wrap .his_con > li:not(first-child){margin-top: 6em;}
.his_wrap .in_box{width: 50%;}
.his_wrap .in_box .left_box{position: sticky; top: 80px; left: 0; padding-right: 6em;}
.his_wrap .in_box .left_box .tit{font-size: 4em; font-weight: 700; line-height: 1; margin-bottom: 30px; text-align: right; color: #222;}
.his_wrap .in_box .left_box .img_box{}
.his_wrap .in_box .left_box .img_box .img_z{width: 100%; height: 300px; border-radius: 20px;}

.his_wrap .his_list{padding-left: 3em;}
.his_wrap .his_list > li{margin-bottom: 6em;}
.his_wrap .his_list > li .page_stt{position: relative; font-weight: 700;}
.his_wrap .his_list > li .page_stt:after{content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--mainColor); position: absolute; top: 6px; left: -52px;}
.his_wrap .his_list > li .page_stt:before{content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--mainColor); opacity: .2; position: absolute; top: 0; left: -2.5em;}
.his_wrap .his_list > li .page_tx{margin-top: 10px;}
.his_wrap .his_list > li .page_tx span{font-weight: 600; margin-right: 10px; color: #333;}

 
/*조직도*/
.org_wrap{background: var(--Color01); padding: 20px; border-radius: var(--item_r); padding: 80px 0;}
.org_wrap .org_box{margin: 2em 0 3em; text-align: center;}
.org_wrap .org_box img{position: relative; z-index: 1; margin: 0 auto;}
.org_wrap .org_box .txt{position: absolute; bottom: -190px; left: 50%; font-size: 10em; font-weight: 500; color: #fff; text-transform: uppercase; transform: translateX(-50%);}

/*오시는길*/
.root_daum_roughmap .wrap_controllers{display: none; }
.root_daum_roughmap .map_border{border: 0!important; background-color: transparent;}

.loca_wrap{}
.loca_wrap .map_con{margin-top: 20px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: var(--item_r); overflow: hidden; }
.loca_wrap .info_list{margin-top: 20px; margin-right: -20px;}
.loca_wrap .info_list > li{width: 50%; margin-bottom: 20px;}
.loca_wrap .info_list > li .in{margin-right: 20px; background: var(--Color01); border-radius: var(--item_r); padding: 30px;}
.loca_wrap .info_list > li .in .page_tx{margin-top: 10px; font-weight: 400; color: #666;}
.loca_wrap .info_list > li .in .page_tx.fwB{color: #222;}
.loca_wrap .info_list > li .in .page_tx .xi{font-size: .937em; line-height: 1; margin-right: 5px;}


/*제품소개*/
.pro_wrap{}
.pro_wrap .pro_con{padding: 80px; background: #03509e; border-radius: var(--item_r);}
.pro_wrap .pro_con .map_list{}
.pro_wrap .pro_con .map_list > li{position: absolute;}
.pro_wrap .pro_con .map_list > li a{overflow: hidden;}
.pro_wrap .pro_con .map_list > li a .xi{width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: rgba(0,0,0,.4); backdrop-filter: blur(2px); color: #fff; text-align: center; transition: .3s;}
.pro_wrap .pro_con .map_list > li a .map_box{width: 0; background: #fff; border-radius: var(--item_r); color: var(--mainColor); text-align: center; white-space: nowrap; margin-left: 10px; padding: 4px 10px; opacity: 0; transition: .3s; z-index: 10;}
.pro_wrap .pro_con .map_list > li.ri_st .map_box{margin-left: 0; margin-right: 10px;}
.pro_wrap .pro_con .map_list > li a:hover .xi{transform: rotate(90deg); background: rgba(0,0,0,1);}
.pro_wrap .pro_con .map_list > li a:hover .map_box{width:150px; opacity: 1;}
.pro_wrap .pro_con .map_list > li.li_01{top: 20%; left: 20%;}
.pro_wrap .pro_con .map_list > li.li_02{top: 30%; left: 30%;}
.pro_wrap .pro_con .map_list > li.li_03{top: 39%; left: 26%}
.pro_wrap .pro_con .map_list > li.li_04{top: 45%; right: 17%;}
.pro_wrap .pro_con .map_list > li.li_05{top: 28%; right: 5%;}
.pro_wrap .pro_con .map_list > li.li_06{top: 55%; right: 8%;} 
.pro_wrap .pro_con .map_list > li.li_07{top: 71%; right: 11%;}
.pro_wrap .pro_con .map_list > li.li_08{bottom: 12%; left: 50%;}
.pro_wrap .pro_con .map_list > li.li_09{bottom: 14%; left: 26%;}
.pro_wrap .pro_con .map_list > li.li_10{bottom: 7%; left: 17%;}
.pro_wrap .pro_con .map_list > li.li_11{top: 48%; left: 13%;}
.pro_wrap .pro_con .map_list > li.li_12{top: 60%; left: 1%;}
.pro_wrap .pro_con .map_list > li.li_13{top: 29%; left: 6%;}
.pro_wrap .pro_con .map_list > li.st1 a:hover .map_box{width: 170px;} 
.pro_wrap .pro_con .map_list > li.st2 a:hover .map_box{width: 125px;} 
.pro_wrap .pro_con .map_list > li.st3 a:hover .map_box{width: 100px;} 

.hook_wrap{}
.hook_wrap .hook_box{margin-bottom: 80px;}
.hook_wrap .hook_box .left_box{width: 50%; padding-right: 40px;}
.hook_wrap .hook_box .left_box .dot_list{margin-top: 10px!important;} 
.hook_wrap .hook_box .right_box{width: 50%; padding-left: 40px;}
.hook_wrap .hook_box .right_box .img_box{border-radius: var(--item_r); overflow: hidden;}
.hook_wrap .hook_box .right_box .img_box .img_z{height: 500px;}
.hook_wrap .in_box{padding: 80px 0; margin-top: 2em; background: var(--Color01); border-radius: var(--item_r);}
.hook_wrap .in_box .page_stt{margin-bottom: 10px;}
.hook_wrap .in_box .page_stt span{font-size: .666em; padding: 3px 15px; background: var(--Color02); border-radius: var(--item_r); color: #fff; margin-right: 7px;} 
.hook_wrap .pro_list{margin-top: 20px; margin-right: -20px;}
.hook_wrap .pro_list > li{width: 33.33%; margin-bottom: 20px;}
.hook_wrap .pro_list > li .in{height: 100%; padding: 30px; background: #fff; border-radius: var(--item_r); margin-right: 20px;}
.hook_wrap .pro_list > li .in .img_box{width: 100%; height: 135px; padding: 0 20px; background: #fff; border-radius: var(--item_r); border: 1px solid #eee; overflow: hidden; margin-bottom: 20px;}
.hook_wrap .pro_list > li .in .st{display:inline-block; width:25px; height:25px; line-height:25px; border-radius:50%; background:var(--Color01); color:var(--mainColor); font-size: .938em; font-weight:600; margin-right:5px;}
.hook_wrap .pro_list > li .in .img_box.ht{height:250px; text-align:center; padding: 20px; border: 0;}
.hook_wrap .pro_list > li .in .img_box.ht img{width: 100%; height: 100%; object-fit: contain;}
.hook_wrap .step_list{margin-top: 20px; margin-right: -20px;}
.hook_wrap .step_list > li{width: 50%; margin-bottom: 20px;}
.hook_wrap .step_list > li .in{height: 100%; padding: 30px; background: #fff; border: 1px dashed #ddd; border-radius: var(--item_r); margin-right: 20px;}
.hook_wrap .step_list > li .in .img_b{width: 100%; height: 200px; padding: 0 20px; margin-top: 20px;}
.hook_wrap .step_list > li .in .img_b img{width: 100%; height: 100%; object-fit: contain;}

/*rnd*/
.rnd_wrap{}
.rnd_wrap .tit_box{margin-bottom: 20px;}
.rnd_wrap .tit_box .page_tt{margin-bottom: 10px;}
.rnd_wrap .rnd_int{width: 100%; height: 450px; border-radius: var(--item_r); padding: 3em 20px; margin-top: 6em;}
.rnd_wrap .rnd_int .page_tt{margin-bottom: 10px; color: #fff;}
.rnd_wrap .rnd_int .page_stt{color: #fff;}
.rnd_wrap .in_box{margin-top: 6em;}
.rnd_wrap .txt_con{padding: 40px; background: var(--Color01); border-radius: var(--item_r); margin-top: 20px;}
.rnd_wrap .rnd_list{margin-top: 20px; margin-right: -20px;}
.rnd_wrap .rnd_list > li{width: 33.33%;}
.rnd_wrap .rnd_list > li .in{height: 100%; padding: 30px; background: var(--Color01); border-radius: var(--item_r); margin-right: 20px;}
.rnd_wrap .rnd_list > li .in .img_box{margin-bottom: 20px;}
.rnd_wrap .rnd_list > li .in .img_box .img_z{width: 100%; height: 250px; border-radius: var(--item_r);}
.rnd_wrap .rnd_list > li .in .txt_box{}
.rnd_wrap .rnd_list > li .in .txt_box .page_tx{margin-bottom: 10px;}
.rnd_wrap .rnd_list > li .in .txt_box .page_stx{color: #333;}