@charset "utf-8";
/* CSS Document */

.doc{font-size:16px;}
.box1, .wrap{width:1280px; max-width:96%; margin: 0 auto; position: relative;}
.box0{padding:0 3em;}


/*header*/
#header,
.h_wrap,
#header .va_wrap{height:80px;}
#header{background-color:#fff; font-size:16px; z-index: 1000; position: fixed; top: 0; left: 0; width:100%; border-bottom:1px solid rgba(255,255,255,.3);}
#header .h_wrap .h_logo{z-index:10000;}
#header .h_wrap .gnb{flex:auto;}
#header .h_wrap .gnb .depth1{float:none; padding: 0; margin:0 25px; position: relative;}
#header .h_wrap .gnb .depth1 > a{font-size: 1.2em; line-height: inherit; font-weight:500; color:#111; min-width: inherit; position: relative;}
#header .h_wrap .gnb .depth1 > ul{background:#fff; min-width: 170px; 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 .h_wrap .gnb .depth1 > ul:after{content: ""; position: absolute; left: 0; top: -2px; width: 100%; height:5px; background:#00b5f1; transform: scaleX(0); transition: .3s;}
#header .h_wrap .gnb .depth1 > ul > .depth2 a{display: block; text-align: center; color:#444; border-top: 1px dotted #ddd; font-weight:400; font-size:1em; padding: 15px 10px; letter-spacing: 0;}
#header .h_wrap .gnb .depth1 > ul > .depth2 a:hover{background: #f5f5f5;}
#header .h_wrap .gnb .depth1:hover ul { max-height:500px;  opacity:1 }
#header .h_wrap .gnb .depth1:hover > ul:after{transform: scaleX(1);}

#header .btn_gnb{width:30px; height: 30px; position: relative; z-index: 10000;}
#header .btn_gnb .a_rd{width:10px; height: 10px; background-color: #555; 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:#00b5f1; 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.a_on .a_rd.a1,
#header .btn_gnb:hover .a_rd.a4,
#header .btn_gnb.a_on .a_rd.a4{display:none;}
#header .btn_gnb:hover .a_rd.a2,
#header .btn_gnb.a_on .a_rd.a2,
#header .btn_gnb:hover .a_rd.a3,
#header .btn_gnb.a_on .a_rd.a3{width:30px; border-radius: 50px;}


/*footer*/
#pt_footer{margin-top:10em; padding: 50px 0 50px; background-color: #222; font-size:16px;}
#pt_footer .f_logo{}

#pt_footer .f_menu{ }
#pt_footer .f_menu > li{margin-left: 40px; position: relative;}
#pt_footer .f_menu > li:before{content:''; width:3px; height: 3px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: -20px;}
#pt_footer .f_menu > li:first-child:before{display:none;}
#pt_footer .f_menu > li a{color:#fff; opacity: .8; position: relative; font-size:.938em;}
#pt_footer .f_menu > li a:hover{opacity: 1;}

#pt_footer .site_wrap{ position: relative; width:180px; }
#pt_footer .site_wrap .siteBtn{ border:1px solid #ddd; background:#222; color: #aaa; padding:.9em 1em; transition:.3s; border-radius: 10px;}
#pt_footer .site_wrap .siteBtn .xi{ margin-left:15px;}
#pt_footer .site_wrap .site{ position:absolute; left:0; z-index:10; top:0; margin-top:3.3em; width:100%; background:#222; opacity:0; visibility:hidden; transition:.3s; border:1px solid #ccc; box-sizing:border-box; height:115px; overflow-y: scroll; border-radius: 10px;}
#pt_footer .site_wrap:hover .site{ opacity:1; visibility:visible}
#pt_footer .site_wrap .site > li{ border-bottom:1px solid #ddd; text-align: left;}
#pt_footer .site_wrap .site > li:last-child{ border-bottom:0;}
#pt_footer .site_wrap .site > li > a{ display:block; font-size:.875em; padding:.75em; font-weight:300; color:#aaa; overflow:hidden; position:relative; transition:.3s; letter-spacing: -.5px;}
#pt_footer .site_wrap .site > li > a .icon:before{ content:"\e980"; font-size:.813em; margin-right:.125em}
#pt_footer .site_wrap .site > li > a:after{ content:"\e907"; font-family:xeicon!important; position:absolute; right:1em; top:50%; margin-top:-12px; transition:.3s}
#pt_footer .site_wrap:hover .siteBtn,
#pt_footer .site_wrap .site > li:hover > a{ background:#1b1b1b; color:#aaa; opacity:1}

#pt_footer .f_info{margin-top:25px;}
#pt_footer .f_info > li{font-size: .938em; color:#fff; font-weight: 200; margin-right:60px; margin-bottom: 5px; letter-spacing:0px; opacity: .6;}
#pt_footer .f_info > li .st{font-weight:500; margin-right:10px;}
#pt_footer .f_copy{color:#fff; opacity: .3; font-size:.875em; margin-top:20px; text-transform: uppercase; font-weight: 200; letter-spacing: .5px;}



.qk_list{position:fixed; bottom:.7em; right:.7em; z-index: 100;}
.qk_list .qk_btn{ display:block; width:2em; height: 2em; line-height: 2.1em; border-radius: 50%; text-align: center; box-shadow: 0 3px 0 rgb(0 0 0 / 15%); font-size: 1.85em; margin-top: 5px;}
.qk_list .qk_btn.kakao_btn{background:#ffcf3d; color:#512929!important;}
.qk_list .qk_btn.wechat_btn{background:#3bb51c; color:#fff!important;}
.qk_list .qk_btn.whatsapp_btn{background:#fff; color:#25d366!important; border:2px solid #25d366; box-sizing: border-box; line-height: 1.9em;}
.qk_list .qk_btn.face_btn{background:#124db7; color:#fff!important;}
.qk_list .qk_btn.ins_btn{background:linear-gradient(120deg, #574dc0, #b23086, #f09336); color:#fff!important;}
.qk_list .qk_btn.yout_btn{background:#d92121; color:#fff!important;}
.qk_list .qk_btn.top_btn{background:#333; color:#fff!important;}
/*=================================================================SUB=================================================================*/


/*서브공통*/
.container_title{font-weight:200; font-size:2.5em; padding-top:45px;}
.container_title:before{width:1px; height: 30px; margin-left:0; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top;}
.load .container_title:before{transform: scaleY(1); visibility: visible;}
.root_daum_roughmap .wrap_controllers{display:none;}
.map_con{border-radius: 50px 0 50px 0; overflow: hidden;}

#sub_visual{height:340px; margin-top:80px; position: relative;}
#sub_visual .sub_v_line{ position: absolute; top: 1.7em; left:1.7em; width:calc(100% - 3.4em); height: calc(100% - 3.4em); opacity: .6;}
#sub_visual .line_01{background-color: #fff; width:0%; height: 1px; position: absolute; top: 0; left:0; transition: .8s;}
#sub_visual .line_02{background-color: #fff; width:1px; height:0%; position: absolute; top: 0; right:0; transition: .8s; transition-delay: .8s;}
#sub_visual .line_03{background-color: #fff; width:0%; height: 1px; position: absolute; bottom: 0; right:0; transition: .8s;}
#sub_visual .line_04{background-color: #fff; width:1px; height:0%; position: absolute; bottom: 0; left:0; transition: .8s; transition-delay: .8s;}

.load #sub_visual .line_01{width:100%;}
.load #sub_visual .line_02{height:100%;}
.load #sub_visual .line_03{width:100%;}
.load #sub_visual .line_04{height:100%;}

#sub_visual h2{padding:0; font-weight: 700; font-size: 3.5em;}
#sub_visual h2:after{display:none;}

.sub .tab_idx{ margin:-10px 0 3em -10px;}
.sub .tab_idx > li{flex:1 16.66%;}
.sub .tab_idx.st_w2 > li{flex:1 25%;}
.sub .tab_idx > li > a{ padding:0 .5em; height:4em; border:1px solid #ddd; margin:10px 0 0 10px; color:#666; transition:.3s; border-radius: 10px;}
.sub .tab_idx > li > a .va{font-size:1.125em; font-weight:500}
.sub .tab_idx > li > a:hover{border-color:#2fae3b; color:#177c3b;}
.sub .tab_idx > li.on > a{ background-color:#2fae3b; border-color:#2fae3b; color:#fff;}

/*게시판 스킨 수정*/
#bo_list_total{font-size:17px;}
#bo_list_total .total_icon{border: 1px solid #ddd; border-radius: 50%;  width: 2em; line-height:2em !important; height: 2em; text-align: center; font-size: 1.25em; margin-right: 7px; box-shadow: 1px 1px 4px rgb(0 0 0 / 15%);}
#bo_list_total .c_point{font-weight: 500;}

#sub_visual.sub10{background-image:url("../img/sub/sub01_top.jpg");}
#sub_visual.sub20{background-image:url("../img/sub/sub02_top.jpg");}
#sub_visual.sub30{background-image:url("../img/sub/sub03_top.jpg");}
#sub_visual.sub40{background-image:url("../img/sub/sub04_top.jpg");}
#sub_visual.sub50{background-image:url("../img/sub/sub05_top.jpg");}
#sub_visual.sub60{background-image:url("../img/sub/sub06_top.jpg");}

/*비밀번호*/
.mbskin.pw_st{max-width: 96%; width:380px; margin:30px auto 0;}
.mbskin.pw_st .mbskin_tt{font-size:1.825em; font-weight: 600; margin-bottom: 30px; color:#555;}
.mbskin.pw_st .mbskin_in{}
.mbskin.pw_st .mbskin_in fieldset{padding:0!important;}
.mbskin.pw_st .mbskin_in .input_st{font-size:1.125em;}
.mbskin.pw_st .mbskin_in .in{position:relative;}
.mbskin.pw_st .mbskin_in .in .input_st{padding:1em 1em 1em 3.5em !important;}
.mbskin.pw_st .mbskin_in .in .xi{position: absolute;left: 0; top: 50%; width: 3em; line-height: 3em; margin-top: -1.5em; text-align: center; color: #666; font-size:1.375em;}

/*개인정보처리방침*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px; font-size:.95em;}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{color:#333;}
.agree_box .in_con .agree_wrap span{ display: block;}

/*inc*/
.page_tt{font-size:1.75em; margin-bottom: 15px; color:#111;}
.page_stt{font-size:1.45em;}
.page_tx{font-size:1.068em; line-height: 1.7; color:#333;}
.dot_list > li{position:relative; padding-left: 15px; margin-bottom: 10px;}
.dot_list > li:last-child{margin-bottom: 0px;}
.dot_list > li:before{content:''; width:4px; height: 4px; background-color: #007ec6; border-radius: 50%; position:absolute; top: 11px; left: 0;}
.bg_box{padding:80px 0; background-color: #f9f9f9; margin-top:80px;}

/*인사말*/
.intro_tit{ background-color:#aaa;  padding: 8.5em 0;}	
.intro_tit .in_tt { font-size:4.125em; font-weight: 900; line-height: 1; width:42%; padding-top: 70px;}
.intro_tit .in_tt .t1{ color: #fff; font-style: italic; margin-bottom:10px; font-size:.9em;}
.intro_tit .in_tt .t2{ color: transparent; -webkit-text-stroke: 1px #fff; font-style: italic;}
.intro_box{background-color:#fff; padding:7em 5.5em; width:58%; box-sizing: border-box;}
.intro_box .page_tx{ margin-top: 30px; }
.intro_box .ceo_tx{margin-top:50px; font-size:1.1em; color:#666;}

/*오시는 길*/
.location_box{ margin: 0 auto; padding: 0 1em;}
.location_box .map_tw{padding-bottom:1em; font-size:1.5em;}
.location_box .map_tw .xi{ width: 44px; height: 44px; background: #007ec6; border-radius: 50%; line-height: 44px; margin-right: 10px; font-size:.938em; color:#fff;}
.location_box .map_view{ border-top:3px solid #00408f; box-shadow: 0 0.25em 0.5em rgba(0,0,0,.2); transition: .3s;  padding: 1em; border-radius: 0 0 1em 1em;}
.location_box .map_view .tt {padding-bottom:10px; font-size:1.125em; color:#333; letter-spacing:-2px; vertical-align:middle;}
.location_box .map_view .xi {vertical-align:middle; font-size:1.125em; padding-right:5px;}
.location_box .map_view .map_cont .root_daum_roughmap .wrap_controllers{display:none;}
.location_box .info_list{margin-top:1em;}
.location_box .info_list > li { padding:2.5em 0; border-bottom:1px dotted #ddd;}
.location_box .info_list > li h3 { float:left; font-size:1.375em; font-weight:500; position: relative; padding-top:7px;}
.location_box .info_list > li h3:before{content:''; width:25px; height: 2px; background: #007ec6; position: absolute; top:0; left: 0;}
.location_box .info_list > li h3 .xi { font-size:1.125em; margin-right: 5px;}
.location_box .info_list > li .info { margin:0 0 0 240px;}
.location_box .info_list > li .info .in_tbox{border: 1px solid #ddd; padding: 1.5em; background-color: #f9f9f9; color:#333; border-radius: 10px;}
.location_box .info_list > li .info .in_tbox .fwB{margin-right:8px; font-weight: 500;}

/*전문분야*/
.spe_wrap{padding:6em 0 7em;}
.spe_wrap .spe_list{margin-right:-25px;}
.spe_wrap .spe_list > li:nth-child(1){margin-left:16.66%;}
.spe_wrap .spe_list > li:nth-child(2){margin-right:16.66%;}
.spe_wrap .spe_list > li{width:33.33%; text-align: center; margin-bottom: 25px;}
.spe_wrap .spe_list > li .in{display: block; margin-right: 25px; padding: 90px 20px; text-align: center; height: 100%; position: relative; overflow: hidden;}
.spe_wrap .spe_list > li .in .bg{width:100%; height: 100%; position: absolute; top: 0; left: 0; transition: .3s; }
.spe_wrap .spe_list > li .in .bg.st1{background-image: url(../img/sub/spe_img01.jpg)}
.spe_wrap .spe_list > li .in .bg.st2{background-image: url(../img/sub/spe_img02.jpg)}
.spe_wrap .spe_list > li .in .bg.st3{background-image: url(../img/sub/spe_img03.jpg)}
.spe_wrap .spe_list > li .in .bg.st4{background-image: url(../img/sub/spe_img04.jpg)}
.spe_wrap .spe_list > li .in .bg.st5{background-image: url(../img/sub/spe_img05.jpg)}
.spe_wrap .spe_list > li .in .icon{margin-bottom: 15px; position: relative; z-index: 10;}
.spe_wrap .spe_list > li .in .page_stt{color:#fff; position: relative; z-index: 10;}
.spe_wrap .spe_list > li .in:hover .bg{transform: scale(1.1);}
.spe_wrap .spe_list > li:nth-child(1) .in{border-radius: 50px 0 50px 0;}
.spe_wrap .spe_list > li:nth-child(2) .in{border-radius: 0 50px 0 50px;}
.spe_wrap .spe_list > li:nth-child(3) .in{border-radius: 0 50px 0 50px;}
.spe_wrap .spe_list > li:nth-child(4) .in{border-radius: 50px}
.spe_wrap .spe_list > li:nth-child(5) .in{border-radius: 50px 0 50px 0;}


/*=================================================================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%, -55%); color:#fff;}
.mainSlider .slogan .t1{ font-size:4.685em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.1;}
.mainSlider .slogan .t1 .t1_st{ color: transparent; -webkit-text-stroke: 1px #fff;}
.mainSlider .slogan .t3{ font-size:1.25em; font-weight: 200; 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 .t3{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}

.mainSlider .mainSlider-control{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width:1600px; max-width:96%;}
.mainSlider .mainSlider-control > li{ border:1px solid #fff; opacity: .6;}
.mainSlider .mainSlider-control > li:hover{ opacity: 1; border-color: #fff;}
.mainSlider .mainSlider-pagination{ position:absolute; bottom:0; left:0; z-index: 100; height: 4px; width:100%; background: #ddd;}
.mainSlider .mainSlider-pagination .swiper-pagination-progressbar-fill{background: #00b5f1;}

.scroll_wrap{position: absolute; bottom: 0; left:0;width:100%; z-index: 10;}
.scroll_wrap .mainSlide_scroll{ color: #fff; font-size: 0.9em; text-align: center; letter-spacing: 4px; font-weight: 300;}
.scroll_wrap .mainSlide_scroll_bar{ width: 1px; height: 53px; background: #fff; margin: 15px auto 0; position: relative;}
.scroll_wrap .scroll_bar {width:5px; height: 5px; background: #fff; animation: box-ani 2s linear infinite backwards; margin-left:-5px; border-radius: 50%;}

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


/*main_inc*/
.main_tit{ margin-bottom: 35px;}
.main_tit .c_point{ font-size:1.068em; margin-bottom: 5px; font-weight: 300;}
.main_tit .in_tt{ font-size:3.875em; color:#222; font-weight: 500; line-height: 1;}
.main_tit .in_tt:after{content:'.'; font-size:1.125em; color:#007ec6;}
.main_tit .in_tx{color:#fff; font-size:1.125em; margin-top:30px; line-height: 1.8;}
.main_tit .in_more{margin-top:60px; display: block; transition: .4s;}
.main_tit .in_more:hover{padding-left:30px;}

.arr_st .in-btn{width:75px; height: 75px; line-height: 75px; border-radius: 50%; border:1px solid #ddd; text-align: center; cursor: pointer; }
.arr_st .in-btn:hover{border-color:#00b5f1;}
.arr_st .in-btn img{vertical-align:-3px;}
.arr_st .in-btn .st1{}
.arr_st .in-btn .st2{display:none;}
.arr_st .in-btn:hover .st1{display:none;}
.arr_st .in-btn:hover .st2{display:inline-block;}
.arr_st .in-pagen{width:100%; height: 4px; position: relative; background: #ddd;}
.arr_st .in-pagen .swiper-pagination-progressbar-fill{background-color:#00b5f1;}

.main_able{padding:110px 0 120px;}
.main_able .about_list{margin-right:-25px;}
.main_able .about_list > li{width:33.33%;}
.main_able .about_list > li .in{display:block; margin-right:25px;position: relative; height: 465px; box-sizing: border-box; overflow: hidden;}
.main_able .about_list > li:nth-child(1) .in{border-radius: 50px 50px 50px 0px;}
.main_able .about_list > li:nth-child(2) .in{border-radius: 50px;}
.main_able .about_list > li:nth-child(3) .in{border-radius: 50px 0 50px 50px;}
.main_able .about_list > li .in .bgfix{position: absolute; top: 0; left: 0; width:100%; height: 100%; transition: .3s;}
.main_able .about_list > li .in .in_tbox{position: absolute; top: 0; left: 0; padding:60px; width:100%;}
.main_able .about_list > li .in .in_tbox .tt{font-size:1.5em; font-weight: 500; color:#fff;}
.main_able .about_list > li .in:hover .bgfix{ transform: scale(1.1);}

.main_bus{padding:90px 0;}
.main_bus .in_w50{width:50%;}
.main_bus .main_tit{margin-bottom:0;}
.main_bus .main_tit .c_point,
.main_bus .main_tit .in_tt,
.main_bus .main_tit .in_tt:after{color:#fff!important;}
.main_bus .bus_list{margin-right:-25px; margin-top:-25px;}
.main_bus .bus_list > li{width:50%; margin-top: 25px;}
.main_bus .bus_list > li .in{display:block; margin-right:25px; border-radius: 50px 0 50px 0; border:1px solid rgba(255,255,255,.5); background-color: rgba(0,0,0,.25); padding: 65px 20px; text-align: center; height:100%;}
.main_bus .bus_list > li:nth-child(2) .in,
.main_bus .bus_list > li:nth-child(3) .in{border-radius:0 50px 0 50px;}
.main_bus .bus_list > li .in .icon{margin-bottom: 15px;}
.main_bus .bus_list > li .in .tt{font-size:1.435em; color:#fff; margin-bottom: 20px;}
.main_bus .bus_list > li .in:hover{border-color:rgba(255,255,255,.8);}

.main_prod{padding:110px 0 120px;}

.main_equ{padding:90px 0;}
.main_equ .main_tit{margin-bottom:0;}
.main_equ .main_tit .c_point,
.main_equ .main_tit .in_tt,
.main_equ .main_tit .in_tt:after{color:#fff!important;}
.main_equ .txt_box{width:calc(100% - 730px);}
.main_equ .slide_box{width:730px;}

.main_location{padding-top:110px;}
.main_location .loc_info{margin-bottom:25px;}
.main_location .loc_info > li{margin-right:60px; font-size:1.25em;}
.main_location .loc_info > li .tt{ font-weight: 500; color:#333; margin-right:5px;}
.main_location .loc_info > li .tx{ font-weight: 300; color:#555;}