@charset "utf-8";
/* CSS Document */
body{ font-size:16px}
.box0{ margin:0 5em;}
.box1{ width:1400px; margin:0 auto; max-width:100%}
.box2{ width:1200px; margin:0 auto; max-width:95%}

.PC{ display:block !important}
.PHONE{ display:none !important}
.mo_link_b{ display:none;}

#header .top_wrap,
#header .top_wrap .va_wrap{ height:4em}
#header .top_wrap{ background:#fff}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ display:block; position:relative; padding:0 2em; color:#333; margin-left:2em}
#header .top_wrap .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:0; top:50%; height:1px; width:1.5em; background:#fd8c00; transform:scaleX(0); transform-origin:left top; transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ font-size:1.188em; font-weight:500}
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover{ color:#fd8c00}
#header .top_wrap .gnb_wrap .gnb > li .dp1:hover:after{ transform:scaleX(1)}
#header .top_wrap .all_wrap{ padding:0 1em;}
#header .top_wrap .all_wrap .btn{ font-size:1.6em;}
#header .headerWrap{ visibility:hidden; opacity:0; transition:.3s}
#header .headerWrap .headerBg{ transform:scaleX(0); transition:.3s; transform-origin:right top}
#header .headerWrap .menu_wrap{ transform:scaleX(0); transition:.3s; transform-origin:left top}
#header.headerOn .headerWrap{ visibility: visible; opacity:1}
#header.headerOn .headerWrap .headerBg{transform:scaleX(1)}
#header.headerOn .headerWrap .menu_wrap{transform:scaleX(1)}

.layoutL{ margin-left:3em}
.layoutR{ padding-right:3em}
.layoutT{ padding-top:4em}


#header{ position: fixed; left:0; top:0; width:100%; z-index:1000}
#header .gnb_wrap .gnb{ text-align:center;}
#header .gnb_wrap .gnb > li{ position:relative}
#header .gnb_wrap .gnb > li:before,
#header .gnb_wrap .gnb > li:before{ left:50%}
#header .gnb_wrap .gnb > li:after{ right:50%}
#header .gnb_wrap .gnb > li .dp1{ color:#333; display:block; padding:0 2em; min-width:6.5em; font-weight:500; position:relative; transition:.3s}
#header .gnb_wrap .gnb > li .dp1 .va{ position:relative; z-index:1; font-size:1.25em}
#header .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; margin-left:-4.5rem; width:11rem; opacity:0; visibility:hidden; border:1px solid #ddd;  background:#fff;}
#header .gnb_wrap .gnb > li .dp2 > li{ display:block}
#header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; color:#888; text-align:center; padding:.8em .5em; border-top:1px dotted #bbb;}
#header .gnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top:none}
#header .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1em; position:relative;}
#header .gnb_wrap .gnb > li .dp2 > li > a .va i,
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a .va i{ vertical-align:baseline}
#header .gnb_wrap .gnb > li .dp2 > li > a .va i{ display:block}
#header .gnb_wrap .gnb > li:hover .dp1,
#header .gnb_wrap .gnb > li.on .dp1{}
#header .gnb_wrap .gnb > li:hover:before,
#header .gnb_wrap .gnb > li.on:before,
#header .gnb_wrap .gnb > li:hover:after,
#header .gnb_wrap .gnb > li.on:after{ opacity:1; width:50%}
#header .gnb_wrap .gnb > li:hover .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1}
#header .gnb_wrap .gnb > li:hover .dp2{ opacity:1; visibility:visible}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a{ color:#fd8c00}
#header .gnb_wrap .gnb > li .dp2:after{ content:""; position:absolute; left:0; top:-3px; width:0; height:3px; background:#fd8c00; z-index:1; transition:.3s;}
#header .gnb_wrap .gnb > li:hover .dp2:after,
#header .gnb_wrap .gnb > li.on .dp2:after{ width:100%;}
#header .gnb_wrap .gnb > li .dp3{ display:none;}

#header .all_wrap{ float:left}
#header .all_wrap .allBtn{ width:3em; text-align:center;}
#header .all_wrap .allBtn .va{ font-size:1.6em; color:#111}
#header .all_wrap .all{ position: fixed; z-index:1; right:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:.3s}
#header .all_wrap .all:before{ content:""; position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:.5}
#header .all_wrap .all .in{ position: absolute; top:-100%; width:100%; height:100%; background:#fff; transition:.3s; padding:10em 0 10em 0; }
#header .all_wrap.on .all{ opacity:1; visibility:visible}
#header .all_wrap.on .all .in{ top:0}
#header .all_wrap .gnb > li{ width:25%; position:relative; box-sizing:border-box; padding:0 .3em;}
#header .all_wrap .gnb > li:before,
#header .all_wrap .gnb > li:after { content:""; position:absolute; top:0; left:4%; width:92%; height:8px; transform:skew(-45deg); transition:.5s;}
#header .all_wrap .gnb > li:before{ background:#ccc;}
#header .all_wrap .gnb > li:after { background:#fd8c00; width:0;}
#header .all_wrap .gnb > li:hover:after { width:96%;}
#header .all_wrap .gnb > li .dp1{ height:70px; font-size:1.250em;}
#header .all_wrap .gnb > li .dp2{ margin:0 8px; padding:1rem 0; background:#fff; border:1px solid #ddd; box-shadow:1px 1px 5px rgba(0,0,0,.1); height:450px;}
#header .all_wrap .gnb > li .dp2 .va_wrap{ height:inherit;}
#header .all_wrap .gnb > li .dp2 li{ display:block;}
#header .all_wrap .gnb > li .dp2 li > a{ padding-left:10px !important;}
#header .all_wrap .gnb > li .dp2 > li{ padding:1em 1.5em;}
#header .all_wrap .gnb > li .dp2 > li > a{ position:relative; font-size:.938em; transition:.2s; text-align: left;}
#header .all_wrap .gnb > li .dp2 > li > a:after{ content:""; position:absolute; left:0; top:.5em; width:4px; height:2px; background:#999;}
#header .all_wrap .gnb > li .dp2 > li:hover > a{ margin-left:.3em;}
#header .all_wrap .gnb > li .dp3{ padding:.6rem 0;}
#header .all_wrap .gnb > li .dp3 > li > a{ padding:.3em 0; font-size:.813em; color:#666; text-align:left;}
#header .all_wrap .gnb > li .dp3 > li:hover > a .va{ text-decoration:underline;}
#header .all_wrap .gnb li:hover > a{ color:#fd8c00;} 
#header .all_wrap .gnb li:hover .dp2{ background:#fcfcfc; border-color:#ccc; transition:.2s;}
#header .all_wrap .tit_wrap .allClose{ position:absolute; top:1%; right:4%; font-size:1.8em; color:#999; transition:.3s;}
#header .all_wrap .tit_wrap .allClose:hover{ color:#fd8c00;}

#header .logo{ position:relative; height:4em; box-sizing:border-box}
#header .logo > a{ display:block;}

#header .etc_wrap .lang{ position:relative;}
#header .etc_wrap .lang .tit{ cursor:pointer;}
#header .etc_wrap .lang .tit .tt{ position:relative; padding:.5em; color:#555; font-size:.875em}




#footer{}
#footer .gotop{ width:5em; line-height:5em; border:5px solid #f1f1f1; text-align:center; display:block; margin:0 auto; color:#aaa; margin-bottom:2em; transition:.3s}
#footer .gotop .xi{ font-size:3em}
#footer .gotop:hover{ background:#e77918; color:#fff}
#footer:after{ display:block; clear:both; content:'';}
#footer .info_wrap{ padding:1.5em 0; background:#1b2435;}
#footer .info_wrap .f_logo{ text-align:center; margin-right:6em; margin-left:6em; opacity:.3; margin-top:.5em}
#footer .info_wrap .info{ text-align:left; margin-top:.5em;}
#footer .info_wrap .info:after{ display:block; clear:both; content:'';}
#footer .info_wrap .info > li{ margin:0 1.5em; color:#fff; opacity:.8; line-height:1.6; letter-spacing:0; font-size:.938em; margin-bottom:5px; display:inline-block; font-weight:300;}
#footer .etc{ width:13em; margin-top:.5em;}
#footer .site_wrap{ position:relative;}
#footer .site_wrap .siteBtn{ font-family:'Ms'; border:1px solid rgba(255,255,255,.2); line-height:3.5em; font-size:.813em; padding:0 1em 0 1.5em; color:#fff; transition:.3s; text-transform:uppercase;}
#footer .site_wrap .site{ position:absolute; left:0; z-index:10; width:100%; text-align:left; background:#171f2e; opacity:0; visibility:hidden; transition:.3s}
#footer .site_wrap:hover .site{ opacity:1; visibility:visible}
#footer .site_wrap .site > li{ border-bottom:1px solid rgba(255,255,255,.1);}
#footer .site_wrap .site > li > a{ display:block; font-size:.875em; padding:1em 1.5em; padding-right:3em; font-weight:300; color:#fff; overflow:hidden; position:relative; opacity:.7; transition:.3s}
#footer .site_wrap .site > li > a .icon:before{ content:"\e980"; font-size:.813em; margin-right:.125em}
#footer .site_wrap .site > li > a:after{ content:"\e907"; font-family:xeicon!important; position:absolute; right:-2em; top:50%; margin-top:-.5em; transition:.3s}
#footer .site_wrap:hover .siteBtn,
#footer .site_wrap .site > li:hover > a{ background:rgba(0,0,0,.3); opacity:1}
#footer .site_wrap .site > li:hover > a:after{ right:1.5em}

#footer .f_top{ text-align:left;}
#footer .f_top .f_top_list{margin:.5em 0; text-align:center;}
#footer .f_top .f_top_list li{position:relative; padding:0 25px; transition:.3s; font-size:.938em; display:inline-block; }
#footer .f_top .f_top_list li:after{ content:''; position:absolute; top:6.5px; right:0; background:rgba(255,255,255,.3); width:1px; height:11px;}
#footer .f_top .f_top_list li:last-child:after{ display:none;}
#footer .f_top .f_top_list li a{color:#fff; display:block; opacity:.8; font-weight:300}
#footer .f_top .f_top_list li:hover a{ opacity:1;} 

#footer .copyright{ padding:10px 0; color:rgba(255,255,255,.7); font-size:.75em; text-align:center; font-weight:300; font-family:'Ms'; background:#171f2e;}


#contents{}
#contents .sub_visual_wrap{ position:relative}
#contents .sub_visual_wrap .va_wrap{ position:relative; height:20em; overflow:hidden}
#contents .sub_visual_wrap .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; background-color:#aaa; transform:scale(1,1); transition:2s}
#contents .sub_visual_wrap .slogan{ position:relative; margin-top:-3em;}
#contents .sub_visual_wrap .slogan .tit{ font-size:2.4em; font-weight:600; color:#fff; margin-right:5em; opacity:0; transition:1s;}
#contents .sub_visual_wrap .slogan .sub_slogan{ font-size:1em; font-weight:300; color:#fff; margin-left:5em; opacity:0; transition:1s; letter-spacing:3.5px;}
#contents .sub_visual_wrap .slogan .sec{ display:block; width:0; height:.13em; margin:1em auto; background:#fff; transition:1s; transition-delay:.5s}
#contents .sub_visual_wrap .slogan .nav{ font-size:.813em; color:#fff; opacity:0; line-height:1.5; transition:1s; transition-delay:.5s; letter-spacing:7px;}
.load #contents .sub_visual_wrap .slogan .tit{ margin-right:0; opacity:1}
.load #contents .sub_visual_wrap .slogan .sub_slogan{ margin-left:0; opacity:1;}
.load #contents .sub_visual_wrap .slogan .nav{ opacity:.8}
.load #contents .sub_visual_wrap .slogan .sec{ width:2.5em}
#contents .sub_visual_wrap .sub_gnb_wrap{ position:absolute; left:0; bottom:0; width:100%;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb{ text-align:center; margin-top:-1em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li,
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp1{ display:none}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li.on,
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li.on .dp2{ display:block}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li{ max-width:25%;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a{ height:4em; color:#fefefe; position:relative;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1.125em; font-weight:400;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li:hover > a{}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li.on > a:after{ content:''; display:block; width:100%; height:5px; background:#fff; position:absolute; top:0; left:0;}
#contents .sub_visual_wrap .sub_gnb_wrap .line{ width:100%; height:1px; background:rgba(255,255,255,.5); position:absolute; top:2px;}


/*#contents .subNav_wrap{ position:absolute; z-index:inherit; left:0; bottom:0; width:100%; font-size:.938em; padding:.7em 0; border-bottom:1px solid #eee; display:none;}
#contents .subNav_wrap .bg{ position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
#contents .subNav_wrap .tt{ display:block; height:40px; line-height:40px; color:#333; transition:.2s;}
#contents .subNav_wrap .nav{ float:left;  border-left:1px solid #ddd; width:100%;}
#contents .subNav_wrap .nav > div{ float:left; position:relative; z-index:999;}
#contents .subNav_wrap .nav .tt{ border-radius:50px;}
#contents .subNav_wrap .nav .home .tt{ width:40px; height:40px; line-height:40px; border-radius:50%; text-align:center; background:#3b3f56; color:#fff;}
#contents .subNav_wrap .nav .home .tt .xi{ font-size:1.438em;}
#contents .subNav_wrap .nav div[class^="depth"]{ border:1px solid #ddd; border-radius:50px; margin-left:5px;}
#contents .subNav_wrap .nav div[class^="depth"] .tt{width:100px; padding:0 60px 0 30px; cursor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#contents .subNav_wrap .nav div[class^="depth"] .tt:after{ content:"\e942"; font-family:xeicon !important; font-style:normal; font-size:1.438em; color:#888; position:absolute; top:0; right:20px;}
#contents .subNav_wrap .nav div[class^="depth"]:hover .tt{ background:#f4f4f4;}
#contents .subNav_wrap .nav .gnb{ display:none;}
#contents .subNav_wrap .nav .gnb{ position:absolute; top:100%; left:0; right:0;}
#contents .subNav_wrap .nav .gnb li{ width:100%; box-sizing:border-box;}
#contents .subNav_wrap .nav .gnb li > a{ text-align:left; display:block; border:1px solid #ddd; background:#fff; border-radius:5px; margin-top:2px; padding:10px 20px 10px 30px; color:#333; font-weight:300; transition:.3s; height:auto; font-size:.813em;}
#contents .subNav_wrap .nav .gnb li:hover > a{ background-color:#f4f4f4;}
#contents .subNav_wrap .nav .gnb li.on > a{ background-color:#3b3f56; color:#fff;}
*/

/**/
#contents .conTit{ border-bottom:1px solid #ddd; display:none}
#contents .conTit .nav_wrap{ text-align:right; padding:2.5em 0 0 0; /*position:absolute; right:0*/ }
#contents .conTit .nav_wrap .nav > li{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; font-size:.813em; color:#999;}
#contents .conTit .nav_wrap .nav > li:before{ content:"\e93f"; font-family:xeicon !important; font-style:normal; color:#999; padding:0 2px;}
#contents .conTit .nav_wrap .nav > li:first-child:before{ display:none;}
#contents .conTit .nav_wrap .nav .home{ font-size:.688em;}
#contents .conTit .nav_wrap .nav .on{ color:#444; font-weight:500;}
#contents .conTit .tit_wrap{ padding:.8em 0; text-align:center; font-size:1.875em; color:#45464b; letter-spacing:-3px; position:relative}

#contents .con_gnb{ position:relative; margin-bottom:-1px; text-align:center;}
#contents .con_gnb .gnb{ margin-bottom:-1px;}
#contents .con_gnb .gnb > li,
#contents .con_gnb .gnb > li .dp1,
#contents .con_gnb .gnb > li .dp2 > li,
#contents .con_gnb .gnb > li .dp2 > li > a{ display:none;}
#contents .con_gnb .gnb > li.on,
#contents .con_gnb .gnb > li .dp2 > li.on{ display:block;}
#contents .con_gnb .gnb > li .dp3 .vm_wrap{ height:45px; color:#999;}
#contents .con_gnb .gnb > li .dp3{ padding-left:1px;}
#contents .con_gnb .gnb > li .dp3 > li{ width:20%;}
#contents .con_gnb .gnb > li .dp3 > li > a{ position:relative; z-index:1; margin-left:-1px; border:1px solid #dce1e6; border-bottom-color:transparent; box-sizing:border-box; transition:.2s;}
#contents .con_gnb .gnb > li .dp3 > li:hover > a{ color:#000;}
#contents .con_gnb .gnb > li .dp3 > li.on > a{ z-index:2; background:#f2f5f8; border-color:#0d298e; border-top-width:3px; border-bottom-color:#f2f5f8; color:#0d298e;}



#contents .doc{ padding:3em 0 10em 0}
#contents .doc_pt{ padding-top:0}
#contents .doc_pb{ padding-bottom:0}
#contents .doc_pd{ padding:0}

.agree_wrap{ padding:.5em; font-size:.875em; line-height:1.5}
.agree_wrap strong{ vertical-align:inherit; font-weight:bold;}

.sub #header{ position: relative; box-shadow:1px 3px 3px rgba(0,0,0,0.1);}
.sub #footer{ margin-top:0;}
.sub #contents .sub_visual_wrap .sub_gnb_wrap .gnb{ display:block;}

 
.scrollAni{ visibility:hidden; transition:.8s; transition-timing-function:ease-in-out }
.scrollAni.on{ visibility:visible}
.scrollAni.fade{ opacity:0}
.scrollAni.fade.on{ opacity:1; transition-delay:.2s}
.scrollAni.moveL{ transform:translateX(-10em); opacity:0}
.scrollAni.moveL.on{ transform:translateX(0); opacity:1}
.scrollAni.moveR{ transform:translateX(10em); opacity:0}
.scrollAni.moveR.on{ transform:translateX(0); opacity:1}
.scrollAni.moveT{ transform:translateY(7em); opacity:0}
.scrollAni.moveT.on{ transform:translateY(0); opacity:1}
.scrollAni.moveB{ transform:translateY(-7em); opacity:0}
.scrollAni.moveB.on{ transform:translateY(0); opacity:1}
.scrollAni.scaleX{ transform:scaleX(0); transform-origin:left top}
.scrollAni.scaleX.on{ transform:scaleX(1)}
.scrollAni.scaleY{ transform:scaleY(0); transform-origin:left top}
.scrollAni.scaleY.on{ transform:scaleY(1)}
.scrollAni.delay1{ transition-delay:.3s;}
.scrollAni.delay2{ transition-delay:.6s;}
.scrollAni.delay3{ transition-delay:.9s;}
.scrollAni.delay4{ transition-delay:1.2s;}

.scrollAni.fade{ opacity:0}
.scrollAni.fade.on.delay1{ transition-delay:.3s;}
.scrollAni.fade.on.delay2{ transition-delay:.6s;}
.scrollAni.fade.on.delay3{ transition-delay:.9s;}
.scrollAni.fade.on.delay4{ transition-delay:1.2s;}

/*======================================================================sub======================================================================*/

/*공통*/
.page_basic_tit{ margin-bottom:1em; padding-left:1.2em;}
.page_basic_tit > *[class^="t"] *{ vertical-align:baseline;}
.page_basic_tit > *[class^="t"] strong{ font-weight:500;}
.page_basic_tit > *[class^="t"] span  { font-weight:300;}
.page_basic_tit > .t1{ position:relative; font-size:1.357em; color:#414244; line-height:1.4; letter-spacing:-1px; font-weight:500}
.page_basic_tit > .t1:before{ content:""; position:absolute; top:.16em; left:-.8em; width:.3em; height:1em; background:#e77918; border-radius:.2em;}
.page_basic_tit > .t2{ padding-top:.6em; font-size:1.125em; color:#555; line-height:1.5;}
.page_basic_tit > .t3{ display:inline-block; padding:.5em 1em; border:1px solid #d4d5d8; border-radius:.3em; font-size:.875em; color:#72727d;}
.page_basic_tit > .t3 strong{ color:#3c3c3d;}
.page_basic_tit .point{ color:#ef7c00;}


.sub_tit{ margin-bottom:2em}
.sub_tit .t1{ text-align:center; font-size:2.125em; color:#000; margin:0 0 .5em 0; font-weight:500}
.sub_tit .line{ display:block; width:1px; height:2em; background:#000; margin-bottom:.25em; margin:0 auto}
.sub_tit .t1 .line{ margin-left:auto; margin-right:auto}
.load .sub_tit .line{transform: scaleY(1); visibility: visible;}
.sub_tit .tw_x{ text-align:center; margin:-1.5em auto 2em; color:#649c39; font-size:1.125em; width:80%;}

.page_tit{ margin-bottom:.75em; margin-top:4em}
.page_tit:first-child{ margin-top:0}
.page_tit .t1{ font-size:2em; color:#222; letter-spacing:-2px; word-spacing:2px;}
.page_tit .tw{ display:inline-block; color:#666; margin-left:10px;}
.page_tit .t2{ font-size:1.625em; color:#222; letter-spacing:-2px; word-spacing:2px; display: inline-block;}
.page_tit .t3{ font-size:1.85em; color:#222; letter-spacing:-2px; word-spacing:2px; display: inline-block;}


/*.tab_idx{ margin:-1em 0 3em -1em;}
.tab_idx > li{flex:1 50%;}
.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:#0c66c6; border-color:#0c66c6}
.tab_idx.sw4 > li{ flex: 1 25%;}
.tab_idx.sw3 > li{ flex: 1 33.33%;}

.tab_idx.sth3 > li > a{ height:4.5em;}
.tab_idx.sth3 > li > a .in_st{ display:block; font-size:.875em;}*/

/*.tab_idx.gt_st > li.on > a{ position:relative;}
.tab_idx.gt_st > li.on > a:after{ content:"\e936"; font-family:'xeicon'; position:absolute; bottom:-30px; left:50%; margin-left:-16px; font-size:2em;}
*/
.memo_st{ border:1px solid #ddd; background:#fafafa; padding:1.5em 2.5em; position:relative}
.memo_st:before,
.memo_st:after{ content:""; position:absolute; width:1em; height:1em; border:3px solid #0c66c6}
.memo_st:before{ left:-1px; top:-1px; border-right:none; border-bottom:none}
.memo_st:after{ right:-1px; bottom:-1px; border-left:none; border-top:none}
.memo_st .in_ml > li{ margin-bottom:5px;}
.memo_st .in_ml > li .xi{ margin-right:10px; width:30px; line-height:30px; color:#fff; background:#003f87; text-align:center; border-radius:50%; font-size:.938em;}
.memo_st.stn:before,
.memo_st.stn:after{ display:none;}
.memo_st.stn{ background:#fff;}

.do_list > li{ margin-top:5px; padding-left:.7em;  position:relative;}
.do_list > li:before{ content:''; width:3px; height:3px; border-radius:50%; background:#0074c1; position:absolute; top:12px; left:0;}

.img_list{ margin-right:-30px; margin-top:1.5em; margin-bottom:-20px;}
.img_list:after{ display:block; clear:both; content:'';}
.img_list > li{ float:left; width:33.33%;}
.img_list > li .in_w{ margin-right:30px; border:1px solid #ddd; box-sizing:border-box; margin-bottom:20px;}
.img_list > li .in_w .iw_img{ height:200px; background-position:center; background-size:cover; background-repeat:no-repeat;}
.img_list > li .in_w .iw_txt{ text-align:center; box-sizing:border-box; padding:1em .5em; font-size:.938em;}

.img_list.sec4{ margin-right:-15px;}
.img_list.sec4 > li .in_w{ margin-right:15px;}

.img_list.st2{ margin-right:-50px;}
.img_list.st2 > li .in_w{ margin-right:50px; position:relative;}
.img_list.st2 > li .in_w .iw_txt .iw_nm{ display:block; /*margin:0 auto 5px;*/ color:#0074c1; font-family:'Ms'; font-weight:600;}
.img_list.st2 > li .in_w:before{ position: absolute; content: "\ea3e"; right: -15%; top: 40%; color: #013a73; font-family: xeicon !important; font-style: normal; font-size: 2em;}
.img_list.st2 > li:last-child .in_w:before{ display:none;}


.sub_tbl .tbl_st {border:1px solid #ccc;  border-top:2px solid #85a1b9; width:100%;}
.sub_tbl .tbl_st tbody th {background:#f0f4f7; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:.7em 1em; color:#333; }
.sub_tbl .tbl_st tbody td {background:#fff;  color:#666; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:.7em 1em; line-height:1.5; text-align:center;}


.newsSlider_wrap{ padding:2em 0; background:#f5f5f5; position:relative; overflow:hidden; margin-top:4em;}
.newsSlider_wrap > .box1{ position:relative; padding:1em; overflow:hidden}
.newsSlider_wrap .newsSlider{ overflow:visible}
.newsSlider_wrap .swiper-container-initialized .board_gallery{ margin:0}
.newsSlider_wrap .swiper-container-initialized .board_gallery > li > div{ margin:0;}
.newsSlider_wrap .newsControl{ position:absolute; left:0; top:20em; width:100%; background:#fff;}
.newsSlider_wrap .newsControl .box1{ position:relative}
.newsSlider_wrap .newsControl .newsSliderBtn{ position:absolute; width:4em; line-height:4em; top:-11em; margin:0 -1em; text-align:center; background:#fff; color:#888; transition:.3s}
.newsSlider_wrap .newsControl .newsSliderBtn .xi{ font-size:2em}
.newsSlider_wrap .newsControl .newsSlider-prev{ left:-5em}
.newsSlider_wrap .newsControl .newsSlider-next{ right:-5em}
.newsSlider_wrap .newsControl .newsSliderBtn:hover{ color:#fff; background:#0c66c6}
.bgfix{background-repeat:no-repeat; background-position:center center; background-size:cover; background-color:#fff;}
.board_gallery{ margin:-1em 0 0 -2em}
.board_gallery > li{ width:25%}
.board_gallery > li > div{ display:block; box-shadow:0 0 15px rgba(0,0,0,.15); margin:2em 0 0 2em}
.board_gallery > li > div .img{ display:block; overflow:hidden}



/*분야 인트로*/
.sub_Conwrap_bg{ padding:0 0 3em;}
.sub_Conwrap.st2 .page_cover .in_wrap.hAuto{ height:40vh !important;}
.sub_Conwrap.st2 .page_cover .in_wrap{flex:1 32.33%;}
.page_cover{ margin-right:-20px;}
.page_cover .in_wrap{ position:relative; text-align:center; overflow:hidden; flex:1 47%; margin:0 .5%; margin-bottom:20px; }
.page_cover .in_wrap.hAuto{ height:50vh !important;}
.page_cover .cover_layer{position:absolute; top:0; left:0; width:100%; height:100%;   box-sizing:border-box; transition:.3s;}
.page_cover .cover_bg{ position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; opacity:.95;}
.page_cover .cover_bg.bg_01{ background-image:url(../images/sub/sub_bg2.jpg);}
.page_cover .cover_bg.bg_02{ background-image:url(../images/sub/sub_bg1.jpg);}
.page_cover .cover_bg.bg_03{ background-image:url(../images/sub/sub_bg3.jpg);}
.page_cover .cover_bg.bg_04{ background-image:url(../images/sub/sub_bg4.jpg);}
.page_cover .cover_bg.bg_05{ background-image:url(../images/sub/sub_bg5.jpg);}
.page_cover .cover_bg.bg_06{ background-image:url(../images/sub/sub_bg6.jpg);}
.page_cover .cover_bg.bg_07{ background-image:url(../images/sub/sub_bg7.jpg);}
.page_cover .cover_layer ~ *,
.page_cover .cover_bg ~ *:not(.cover_layer){ position:relative;}
.page_cover .en{ font-family:'Ms';}
.page_cover .tt{ color:#fff;}
.page_cover .cover_cell{ position:relative; width:80%; margin:0 auto;  padding:1em;  transition:.3s;}
.page_cover .cover_cell .t1{ font-size:1em; letter-spacing:.1em;}
.page_cover .cover_cell .t2{ font-size:2.125em; padding:.4em 0 0 0; font-weight:700;}
.page_cover .cover_cell .t3{ font-size:1.25em; margin-top:3px;}
.page_cover .cover_cell .t1 > span{ position:relative; display:inline-block; padding:0 1em;}
.page_cover .cover_cell .t1 > span:before,
.page_cover .cover_cell .t1 > span:after { content:""; position:absolute; top:50%; width:3em; height:1px; background:#fff; opacity:.3;}
.page_cover .cover_cell .t1 > span:before{ left:-3em;}
.page_cover .cover_cell .t1 > span:after { right:-3em;}
.page_cover .cover_cell .icon{ width:2.2em; line-height:2.2em; border-radius:50%; background:#1c2932; text-align:center; color:#fff; margin:1.3em auto 0; transition:.3s;}
.page_cover .in_list{opacity:0; position:absolute; top:8em; left:0; width:100%; text-align:left;}
.page_cover .in_list > li{width:50%;}
.page_cover .in_list > li > a{color:#fff; text-align:center; opacity:.9; font-size:1.068em; position:relative; display:block; border:1px solid #fff; padding:.5em .7em; margin:0 5px 15px; transition:.3s;}
.page_cover .in_list > li > a:hover{border-color:#1a99ed; background:#1a99ed;}

.sub_Conwrap .page_cover .line_wrap{}
.sub_Conwrap .page_cover .line_wrap .line{ position:absolute; background:#fff; width:1px; height:1px; transition:1s; opacity:.5; display:none}
.sub_Conwrap .page_cover .line_wrap .line.hor{ transition-delay:1s}
.sub_Conwrap .page_cover .line_wrap .line.top{ top:1em}
.sub_Conwrap .page_cover .line_wrap .line.bot{ bottom:1em}
.sub_Conwrap .page_cover .line_wrap .line.left{ left:1em}
.sub_Conwrap .page_cover .line_wrap .line.right{ right:1em}
.load .sub_Conwrap .page_cover .line_wrap .line.ver{height: calc(100% - 2em);}
.load .sub_Conwrap .page_cover .line_wrap .line.hor{ width:40%}
.load .sub_Conwrap .page_cover .line_wrap .line{ display:block}

.ptn_con{ padding:3em 0 9em; background:#f9f5f5;}
.ptn_con .ptn_list{ margin-right:-10px; margin-top:1em;}
.ptn_con .ptn_list > li{width:16.66%;}
.ptn_con .ptn_list > li .in{ margin-right:10px; border:1px solid #ddd; margin-bottom:15px; background:#fff; box-sizing:border-box; padding:1em;}
.ptn_con .ptn_list > li .in .resize{ padding-bottom:35%;}

/*마우스 오버*/
.sub_Conwrap.st2 .page_cover .in_wrap.movr:hover .cover_cell{ margin:-25% auto 0;}
.page_cover .in_wrap.movr:hover .cover_cell{ transition:.6s; margin:-37% auto 0;}
.page_cover .in_wrap.movr:hover .cover_cell .t1{ display:none;}
.page_cover .in_wrap.movr:hover .cover_cell .in_list{ opacity:1; transition:.3s;}
.page_cover .in_wrap.movr:hover .cover_cell .in_list > li a:hover{ opacity:1;}
.page_cover .in_wrap.movr:hover .cover_cell .icon{ display:none; background:#000;}
.page_cover .in_wrap:hover{ cursor:pointer;}
.page_cover .in_wrap:hover .cover_cell .icon{ background:#0074c1;}
.page_cover .in_wrap:hover .cover_layer{ background-color:rgba(0,0,0,0.5);}
.page_cover .in_wrap:hover .cover_bg{ opacity:.6;}

/*sub 애니메이팅*/
.conSection .ani{ opacity:0; transition:.5s;}
.conSection .ani.aniT{ transform:translateY(60px)}
.conSection .ani.aniB{ transform:translateY(-60px)}
.conSection .ani.aniL{ transform:translateX(30px)}
.conSection .ani.aniR{ transform:translateX(-30px)}
.conSection.secAni .ani{ opacity:1;}
.conSection.secAni .ani.aniT{ transform:translateY(0)}
.conSection.secAni .ani.aniB{ transform:translateY(0)}
.conSection.secAni .ani.aniL{ transform:translateX(0)}
.conSection.secAni .ani.aniR{ transform:translateX(0)}
.conSection.secAni .ani.delay1 { transition-delay:.3s;}
.conSection.secAni .ani.delay2 { transition-delay:.6s;}
.conSection.secAni .ani.delay3 { transition-delay:.9s;}
.conSection.secAni .ani.delay4 { transition-delay:1.2s;}
.conSection.secAni .ani.delay5 { transition-delay:1.5s;}
.conSection.secAni .ani.delay6 { transition-delay:1.8s;}
.conSection.secAni .ani.delay7 { transition-delay:2.1s;}
.conSection.secAni .ani.delay8 { transition-delay:2.4s;}
.conSection.secAni .ani.delay9 { transition-delay:2.7s;}
.conSection.secAni .ani.delay10{ transition-delay:3.0s;}

/*찾아오시는 길*/
.root_daum_roughmap{ width:100% !important;}

.map_info1 { overflow:hidden; margin-bottom:20px; box-shadow:2px 3px 8px -1px #a4a4a4; padding:1.5em; margin-top:1em; font-weight:400; box-sizing:border-box; text-align:center;}
.map_info1 .t1 span { color:#666; display:inline-block; margin-right:55px; margin-bottom:5px; margin-top:5px; line-height:1.5;}
.map_info1 .t1 span:last-child { margin-right:0;}
.map_info1 .t1 .xi { font-size:1em; color:#fff; margin-right:10px; border-radius:50%; width:1.8em; height:1.8em; line-height:1.8em; text-align:center; background:#3c4968}

.map_info2 { margin-top:30px; font-weight:400}
.map_info2 .info_list > li { overflow:hidden; padding:2em 1em; border-bottom:1px solid #ddd}
.map_info2 .info_list > li h3 { float:left; color:#222222; font-size:1.375em; font-weight:500;}
.map_info2 .info_list > li h3 .xi { font-size:1.5rem; vertical-align:top; }
.map_info2 .info_list > li .info { margin:0 0 0 240px;}
.map_info2 .info_list > li .info strong { display:block;}
.map_info2 .info_list > li .info p { color:#333; line-height:26px;}
.map_info2 .info_list > li.bus .info span { display:block; margin:2px 0 6px; color:#333; }
.map_info2 .info_list > li.bus .info p { position:relative; line-height:30px; color:#222; letter-spacing:.1px; font-size:1em; padding-left:85px;}
.map_info2 .info_list > li.bus .info .st:before {width:70px; height:26px; border-radius:26px; background:#47af1b; color:#fff; text-align:center; line-height:26px; position:absolute; left:0; top:50%; margin-top:-11px; font-size:0.813em; }
.map_info2 .info_list > li.bus .info .st.st1:before { content:"간선버스"; background:#0e4194;}
.map_info2 .info_list > li.bus .info .st.st2:before { content:"지선버스";}
.map_info2 .info_list > li.bus .info .st.st3:before { content:"일반버스"; background:#198aeb;}
.map_info2 .info_list > li.bus .info .st.st4:before { content:"급행버스"; background:#ca2d2d;}
.map_info2 .info_list > li.subway .info span { display:block; margin:2px 0 6px; color:#333; }
.map_info2 .info_list > li.subway .bs1{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; padding:0 15px; font-size:0.875em; color:#fff; line-height:25px; border-radius:30px; background:#198aeb; margin:0 10px 5px 0}
.map_info2 .info_list > li.subway .bs1.sub_col1{ background:#396600;}
.map_info2 .info_list > li.subway .info { margin-top:-1px;}
.map_info2 .info_list > li.subway .info span { display:block; margin:2px 0 6px;}
.map_info2 .info_list > li.subway .info p { display:inline-block; margin-right:34px;}
.map_info2 .info_list > li.subway .info em { display:inline-block;}


/*인사말*/
.about_content2{ background:url(../images/sub/greetings_img2.jpg) no-repeat center; background-size:cover; box-sizing:border-box; padding:6em 0 8em;}
.about_content2 .in_tx_box{color:#333; line-height:1.5; padding:7em 15em 6em; box-sizing:border-box; background:rgba(255,255,255,.95); text-align:center;}
.about_content2 .in_tx_box .tw_en{ color:#999; letter-spacing:6px; font-size:1.068em;}
.about_content2 .in_tx_box .tw_tit{ font-size:2.125em; line-height:1.4; margin-bottom:20px; font-weight:500;}
.about_content2 .in_tx_box .tw{ margin-bottom:15px; font-size:1.068em;}
.about_content2 .in_tx_box .bar{ width:40px; height:2px; background:#ddd; display:block; margin:40px auto;}
.about_content2 .in_tx_box .ceo{ text-align:center; margin-top:4em; font-size:1.3em;}


/*사례*/
.facility_w .sub_tit{ margin-bottom:.5em;}
.facility_w .page_viewWrap{overflow:hidden; padding-bottom:3em;}
.facility_w .page_viewWrap .slider_for  {float:left; width:80%;}
.facility_w .page_viewWrap .slider_for .item{}
.facility_w .page_viewWrap .slider_for .item .img_wrap{position:relative; margin:0 1em 1em 0; border:1px solid #ddd; text-align:center;}
.facility_w .page_viewWrap .slider_for .item .img_wrap .resize{ background:#fff;}
.facility_w .page_viewWrap .slider_for .item .img_wrap .tit_w {position:absolute; left:0; bottom:2px; width:96%; height:3em; padding:0 2%; background:rgba(0,0,0,.8); font-size:1.250em; color:#fff; text-align:left !important;}
.facility_w .page_viewWrap .slider_for .item .img_wrap .resize .img_iw{ position:relative;}
.facility_w .page_viewWrap .slider_for .item .img_wrap .resize .img_iw:before{ content:''; width:250px; height:110px; background:url(../images/inc/logo_g.png) no-repeat center; background-size:cover; position:absolute; top:50%; margin-top:-55px; left:50%; margin-left:-125px;}


.facility_w .page_viewWrap .page_viewB{position:relative; width:70%; margin:1em auto 1em auto; float:right; width:20%;}
.facility_w .page_viewWrap .page_viewB .pro_tw {text-align:center; margin-bottom:1.5em;}
.facility_w .page_viewWrap .page_viewB .pro_tw .pro_name {text-align:center; font-size:1.125em; color:#003f87; padding-bottom:15px;}
.facility_w .page_viewWrap .page_viewB .pro_tw .pro_line {width:40px; height:1px; background:#003f87; margin:0 auto;}

.facility_w .page_viewWrap .slider_nav{ margin-right:-6px;}
.facility_w .page_viewWrap .slider_nav .item{ margin-right:10px; margin-bottom:10px;}
.facility_w .page_viewWrap .slider_nav .item .img_wrap{border:1px solid #ddd; transition:.2s; cursor:pointer; }
.facility_w .page_viewWrap .slider_nav .item:hover .img_wrap img{ opacity:.5;}
.facility_w .page_viewWrap .slider_nav .item:hover .img_wrap,
.facility_w .page_viewWrap .slider_nav .item.slick-current .img_wrap{ border-color:#003f87; box-shadow:2px 2px 10px rgba(0,0,0,.2);}

.facility_w .page_viewWrap .slider_nav .item .resize .img_iw{ position:relative;}
.facility_w .page_viewWrap .slider_nav .item .resize .img_iw:before{ content:''; width:72px; height:31px; background:url(../images/inc/logo_g.png) no-repeat center; background-size:cover; position:absolute; top:0; left:50%; margin-left:-36px;}
.facility_w .page_viewWrap .slider_nav .item .resize .va_wrap img{ max-width:100%;}

.facility_w .page_viewWrap .control_arrow{ position:absolute; bottom:-30px; left:50%; width:100%; text-align:center;}
.facility_w .page_viewWrap .control_arrow li{ position:absolute; top:0; margin-top:-1.5em;}
.facility_w .page_viewWrap .control_arrow li.prev{ left:-4em;}
.facility_w .page_viewWrap .control_arrow li.next{}
.facility_w .page_viewWrap .control_arrow li .xi{ width:2em; line-height:2em; border:1px solid #ddd; border-radius:50%; font-size:1.500em; color:#003f87; cursor:pointer; transition:.2s;}
.facility_w .page_viewWrap .control_arrow li:hover .xi{ background:#222; border-color:#222; color:#fff;}

.draggable{ overflow: hidden;}

/*분야*/
.pro_tit_b{ position: relative; padding: 45px 0 0 680px; margin-bottom:5em;}
.pro_tit_b .box_img{ position: absolute; top: 0; left: 0; z-index: -1; width:790px; height:395px; background-repeat:no-repeat; background-size:cover; background-position:center;}
.pro_tit_b .box_cont{ height: 350px; background-color: #013a73; padding: 0 65px 0 65px; color: #fff; box-sizing:border-box; text-align:left;}
.pro_tit_b .box_cont .in_tit{ display: block; font-size: 2em; font-weight: 500; }
.pro_tit_b .box_cont .in_tit:after{ opacity: .3; content: ""; display: block; width: 60px; height: 1px; background-color: #fff; margin: 15px 0; }
.pro_tit_b .box_cont .in_txt{ opacity: .7; line-height: 1.6; }

.page_txt_wrap{ margin-top:2.5em;}
.page_txt_wrap:first-of-type{ margin-top:0;}
.page_txt_wrap.flex > *{ padding:1.4em .4em; border-top:2px solid #e8e8e8;}
.page_txt_wrap.flex > .flex_w1{ flex:1; position:relative; padding-left:0; padding-right:0; border-top-color:#c6cad1;}
.page_txt_wrap.flex > .flex_w1:before,
.page_txt_wrap.flex > .flex_w1:after { content:""; position:absolute; top:-2px; height:2px; width:.8em;}
.page_txt_wrap.flex > .flex_w1:before{ left:0; background:#6574b7;}
.page_txt_wrap.flex > .flex_w1:after { left:.8em; background:#01b695;}
.page_txt_wrap.flex > .flex_w2{ flex:4; margin-left:2em;}
.page_txt_wrap.flex > .flex_w2 .midd_tt{ font-size:1.25em; margin-top:2em;}
.page_txt_wrap.flex > .flex_w2 .midd_tt:first-child{ margin-top:0;}
.page_txt_wrap.flex > .flex_w2 .midd_tw{ color:#333; font-size:.938em; margin-top:5px;}
.page_tit.dp1{ margin-bottom:.6em; font-size:1.375em; color:#0d2d4f; line-height:1.4em; letter-spacing:-1px; font-weight:500;}

.sect2 .iw_img{ width:45%; box-sizing:border-box; padding-right:20px;}
.sect2 .iw_img img{border:1px solid #ddd;}
.sect2 .sub_tbl.fr{ width:55%;}

/*수장공간 설계시공*/ 
.descon_01 .dec_list{ margin-right:-20px;}
.descon_01 .dec_list > li{flex:1 33.33%;}
.descon_01 .dec_list > li .in_wrap{ border:1px solid #ddd; margin-right:20px; margin-bottom:30px; padding:4em 2em 2.5em; position:relative;}
.descon_01 .dec_list > li .in_wrap:before{ content:''; width:40px; height:1px; background:#2573ec; position:absolute; top:-1px; left:0;}
.descon_01 .dec_list > li .in_wrap .de_icon{ margin-bottom:25px;}
.descon_01 .dec_list > li .in_wrap .de_tit{ font-weight:600; font-size:1.25em; margin-bottom:10px;}
.descon_01 .dec_list > li .in_wrap .de_txt{ line-height:1.8; color:#333;}

.descon_02{ margin-top:3em;}
.descon_02 .ck_tt{ text-align:center; height:300px; background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed;}
.descon_02 .ck_bk{ text-align:center; background-size:cover; background-repeat:no-repeat; background-position:center; padding:3.5em 0;}
.descon_02 .ck_tw{text-align:center; background:#fff; padding:3.5em 10em 3em;  margin-top:-13em; box-shadow:0 0 15px rgba(0,0,0,.15);}
.descon_02 .ck_bk .ck_tw{ background:rgba(255,255,255,.8);}
.descon_02 .bar{ display:block; margin:1.5em auto 0; width:60px; height:1px; background:#73a8cb;}
.descon_02 .ck_tx{line-height:1.8; color:#222; margin-top:1.5em;}
.descon_02 .ck_cr{ font-size:.938em; color:#002c4f; margin-top:2.5em;}

.descon_03{ text-align:center; margin-top:4em;}
.descon_03 .list_wrap{ margin:3em 0;}
.descon_03 .list > li{flex:1 20%; margin-bottom:3em;}
.descon_03 .list > li .inner{ padding:1em 2.5em; border-left:1px solid #ddd;}
.descon_03 .list > li:first-child .inner{ border-left:none;}
/*.descon_03 .list > li:nth-child(4) .inner{ border-left:none;}*/
.descon_03 .list .icon{ height:50px;}
.descon_03 .list .icon img{ max-height:100%;}
.descon_03 .list .txt{ margin-top:1.5em;}
.descon_03 .list .txt .t1{ font-size:1.063em; font-weight:600; text-transform:uppercase;}
.descon_03 .list .txt .t2{ font-size:1.125em; color:#005295; font-weight:500;  padding:.8em 0 .5em 0;}
.descon_03 .list .txt .t3{ font-size:.938em; color:#666;}
 
/*수행실적*/

.sub_bgbox{ background:#f9f5f5; padding:5em 0 10em;}
.all_mapWrap{ position:relative; text-align:center; margin:-10em auto 0; background:#fff; border-radius:20px; padding:6em 1em 0;}
.all_mapWrap .mapList{ position:absolute; z-index:-1; display:none}
.all_mapWrap .mapList .ro{ position:relative;  opacity:0; top:.5em;}
.all_mapWrap .mapList .ro:before{content:''; display:block; width:8px; height:8px; background:#333; border-radius:50%;}
.all_mapWrap .mapList .area{ position:absolute; top:0; width:8em; border:1px solid #ae5555; background:#fff; line-height:1.5; text-align:center; border-radius:.25em; box-shadow:1px 1px 3px rgba(0,0,0,.5)}
.all_mapWrap .mapList .area.wl{left:.8em;}
.all_mapWrap .mapList .area.wr{right:.8em;}
.all_mapWrap .mapList .area .tt{ display:block; font-size:.75em; background:#ae5555; color:#fff; padding:.188em 3px;}
.all_mapWrap .mapList.on{ z-index:1; display:block}
.all_mapWrap .mapList.on .mark{ top:0; opacity:1; transition:.3s}


/*특수목적용 비품*/
.sd_content{ position:relative;}
.sd_content .sub_sd_con{ margin-top:3em; position:static}
.sd_content .sub_sd_con .sd_paging{ margin-bottom:1.5em;}
.sd_content .sub_sd_con .swiper-slide .in_con{ margin-right:-30px;}
.sd_content .sub_sd_con .swiper-slide .in_con .img_c{width:50%;}
.sd_content .sub_sd_con .swiper-slide .in_con .img_c .in{ margin-right:30px; border:1px solid #ddd;  box-sizing:border-box;}
.sd_content .sub_sd_con .swiper-pagination-bullet{ font-size:1.1em; width:24%; border-radius:0; background:#fff; height:auto; text-align:center; border-bottom:5px solid #ddd; padding-bottom:8px; opacity:.6;}
.sd_content .sub_sd_con .swiper-pagination-bullet.swiper-pagination-bullet-active{ border-color:#0c66c6; color:#0c66c6; opacity:1;}
.sd_content  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 !important; margin-right:1.33% !important;}
.sd_content  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet:last-child{ margin-right:0 !important;}
.sd_content .sub_sd_con .sd_control{ position:absolute; top:49%; left:0; width:100%;}
.sd_content .sub_sd_con .sd_control .btn i{ border:1px solid #ccc; width:2.6em; line-height:2.6em; text-align:center; border-radius:50%;  color:#003f87; transition:.3s; cursor:pointer; background:#fff;}
.sd_content .sub_sd_con .sd_control .btn i:hover{ background:#222; color:#fff; border-color:#222;}
.sd_content .sub_sd_con .sd_control .btn i.sd_prev{ position:absolute; left:-3.5em; z-index:999;}
.sd_content .sub_sd_con .sd_control .btn i.sd_next{ position:absolute; right:-3.5em; z-index:999;}

/*온라인문의*/

.agree_box{ border:1px solid #ddd; background:#fff; border-radius:5px}
.agree_box:after{ display:block; clear:both; content:'';}
.agree_box .con{  padding:2em; font-size:1em; color:#333}
.agree_box .con.scrollst{ height:13em; overflow-y:scroll; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .con.scrollst.h1{ height:10em}
.agree_box .btn{ border-top:1px solid #ddd; background:#f5f5f5; padding:.5em 2em; text-align:right; font-size:.813em}
.agree_box .btn label{ margin-left:2em}
.file_txt{ display:block; color:#127fc5; margin-top:0;}


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


/*메인슬라이드*/
.mainSlider_wrap{ position:relative; padding-bottom:1em; margin-bottom:4em}
.mainSlider{ position:relative; background:#f5f5f5}
.mainSlider .el{ height:calc(100vh - 7em); position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; right:0; bottom:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; }
.mainSlider .el .box1{ position:relative}
.mainSlider .slogan{ position: absolute; left:0; top:11em; color:#fff;}
.mainSlider .slogan .t1{ font-size:1.25em; transform:translateY(2em); opacity:0; text-transform:uppercase; letter-spacing:.375em}
.mainSlider .slogan .t2{ font-size:3em; font-weight:700; transform:translateY(2em); opacity:0; margin-top:.188em; margin-left:-.125em}
.mainSlider .slogan .line{ margin:2em 0; width:4em; height:1px; background:#fff; transform:scaleX(0); transform-origin:left top}
.mainSlider .slogan .t3{ font-size:1.25em; font-weight:300; line-height:1.8}
.mainSlider .slogan .t3 > i{ display:block; transform:translateY(2em); opacity:0}
.mainSlider .el.swiper-slide-prev .bg,
.mainSlider .el.swiper-slide-next .bg{ transition-delay:1s}
.mainSlider .el.swiper-slide-active .bg,
.mainSlider .el.swiper-slide-duplicate-active .bg{}
.mainSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s; transition-timing-function:ease}
.mainSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s; transition-timing-function:ease}
.mainSlider .el.swiper-slide-active .slogan .line{ transform:scaleX(1); transition:1s; transition-delay:1.5s}
.mainSlider .el.swiper-slide-active .slogan .t3 > i{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1.5s; transition-timing-function:ease}
.mainSlider .el.swiper-slide-active .slogan .t3 > i:nth-child(2){ transition-delay:1.5s}

.mainControl{ position:absolute; right:0; z-index:100; bottom:4em}
.mainControl .mainSlider-btn{ width:2.5em; line-height:2.5em; cursor:pointer; color:#fff; border:1px solid #fff; outline:none; text-align:center; transition:.3s; margin:0 .25em}
.mainControl .mainSlider-btn .xi{ font-size:1.5em}
.mainControl .mainSlider-btn:hover{ color:#fd8c00; border-color:#fd8c00; opacity:1}
.mainControl .mainPauseWrap{ margin-left:1em}
.mainControl .mainPauseWrap .mainSlider-play{ display:none; background:#fd8c00; color:#fff; border-color:transparent}
.mainControl .mainPauseWrap.pause .mainSlider-play{ display:block}
.mainControl .mainPauseWrap.pause .mainSlider-pause{ display:none}

.mainPaging{ position: absolute; z-index:100; left:0; bottom:0; width:100%;}
.mainPaging .mainSlider-pagination{ position: relative; height:.25em; background:rgba(0,0,0,.1)}
.mainPaging .mainSlider-pagination span{background:#fd8c00!important}
 
.mainScroll{ position:absolute; left:0; bottom:1em; z-index:100}
.mainScroll .box0{ position:relative}
.mainScroll .line{ display:block; width:1px; height:10em; background:#fff}
.mainScroll .tt{ color:#fff; word-spacing:2px; letter-spacing:1px; transform:rotate(90deg); transform-origin:0 0; position:absolute; left:1.25em; top:0; width:10em; padding:0 .25em; box-sizing:border-box; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite}
.mainScroll .tt > i{ font-size:.625em}

.mainNav{ position:fixed; right:1em; top:0; height:100%; width:2em; z-index:999}
.mainNav .list{ padding-bottom:3em; position:relative}
.mainNav .list > li{ counter-increment: myIndex}
.mainNav .list > li:before{ content:"0" counter(myIndex); font-size:.75em; font-weight:700; position:absolute; left:0; bottom:0; display:block; width:100%; text-align:center; opacity:0; transition:.3s}
.mainNav .list > li > a{ display:block; margin-top:1em; transition:.3s}
.mainNav .list > li > a .line{ display:block; height:.5em; width:.5em; background:#333; margin:0 auto; transition:.3s}
.mainNav .list > li > a:hover .line,
.mainNav .list > li.on > a .line{ background:#fd8c00}
.mainNav .list > li.on:before{ opacity:1}

/*gotop*/
.goTop{ z-index:998; position:fixed; right:2em; bottom:2em; width:3.6em; height:3.6em; background:#3c4968; border-radius:100%; color:#fff; transition:.2s;}
.goTop .xi{ display:block; line-height:1em; color:#fff;}
.goTop .tt{ font-size:.750em; color:#fff;}
.goTop:hover{ background:#fd8c00;}

/*섹션*/
.main_tit .t1{ text-align:center; font-size:3em; color:#000; margin:0 0 1em 0; font-weight:300}
.main_tit .t2{ font-size:2.5em; font-weight:300; color:#000; margin:0 0 .5em 0}
.main_tit .line{ display:block; width:1px; height:.75em; background:#000; margin-bottom:.25em; margin-left:10px;}
.main_tit .t1 .line{ margin-left:auto; margin-right:auto}

.main_box{ padding:3em 0 4em 0}
.main_more{ display:block;}
.main_more a{ display:inline-block; padding:1em 0; margin-top:1em; font-size:.875em; font-weight:500; color:#777; }
.main_more .xi{ font-size:1em; margin-left:.5em; transition:.3s;}
.main_more .xi:before{ content:"\e913"}
.main_more a:hover{ color:#fd8c00}
.main_more a:hover .xi{ padding-left:1em}

/*분야*/
.main_business > li{ margin-bottom:8em}
.main_business > li:last-child{ margin-bottom:0;}
.main_business > li .scaleX{ transform-origin:left top}
.main_business > li .img{ width:42%}
.main_business > li .img .resize{ padding-bottom:120%;}
.main_business > li .info{ width:58%; padding:2em 0 4em 4em; box-sizing:border-box;}
.main_business > li .info .in_tt{ font-size:2.5em; font-weight:500;}
.main_business > li .info .in_tx{ color:#444; padding:2em 0 0; line-height:1.8; width:80%;}
.main_business > li .in_s_list{ margin-right:-20px; padding-bottom:20px;}
.main_business > li .in_s_list > li{ width:50%;}
.main_business > li .in_s_list > li .in{ display:block; transition:.3s; box-shadow: 0 0 15px rgba(0,0,0,0.15); margin:0 15px; transition:.3s;}
.main_business > li .in_s_list > li .in:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.3);}
.main_business > li .in_s_list > li .in .in_iz{ height:230px; background-size:cover; background-position:center;}
.main_business > li .in_s_list > li .in .in_ix{ box-sizing:border-box; padding:1.3em 2em;}
.main_business > li .in_s_list > li .in .in_itt{ font-size:1.25em; margin-bottom:10px;}
.main_business > li .in_s_list > li .in .in_itx{ font-size:.938em; color:#444; height:44px; overflow:hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; text-overflow: ellipsis; white-space: normal;}
.main_business > li .bus_control{ margin-top:1.5em; position:relative; margin-right:15px;}
.main_business > li .bus_control .paging{ position:absolute; top:18px; right:6.5em;}
.main_business > li .bus_control .paging .swiper-pagination-bullet{ display:inline-block; width:30px; height:5px; background:#ccc; border-radius:0; opacity:1;}
.main_business > li .bus_control .paging .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#3c4968;}
.main_business > li .bus_control .btn{ text-align:right; margin-bottom:10px;}
.main_business > li .bus_control .btn .in{ width:1.7em; line-height:1.7em; font-size:1.25em; border:3px solid #ddd; color:#888; text-align:center; border-radius:50%; margin:0 2px; cursor:pointer; transition:.3s;}
.main_business > li .bus_control .btn .in:hover{ border-color:#56668b; color:#3c4968;}
.main_business > li:nth-child(2n) .info{ order:-1}
.main_business > li:nth-child(2n) .img{ width:42%}
.main_business > li:nth-child(2n) .info{ width:58%; padding:2em 4em 4em 0; box-sizing:border-box;}
.main_business > li:nth-child(2n) .scaleX{ transform-origin:right top}
.main_business > li:nth-child(2n) .info .in_tt{ text-align:right;}
.main_business > li:nth-child(2n) .info .in_tx{ text-align:right; margin-left:auto;}
.main_business > li:nth-child(2n) .in_s_list{margin-left:auto; margin-right:0;}
.main_business > li:nth-child(2n) .bus_control{ margin-left:15px; margin-right:0;}
.main_business > li:nth-child(2n) .bus_control .btn{ text-align:left;}
.main_business > li:nth-child(2n) .bus_control .paging{ left:6.5em; right:inherit;}

/*about us*/
.main_section3{ margin-bottom:5em;}
.main_section3 .cont > ul{ margin:0 0 0 -30px}
.main_section3 .cont > ul > li{ width:50%}
.main_section3 .cont > ul > li > div{ margin:0 0 0 30px; background:#f5f5f5; border:1px solid #fff; border-radius:10px; box-shadow:1px 3px 10px rgba(0,0,0,0.2); transition:.3s;}
.main_section3 .cont > ul > li > div:hover{ border:1px solid #1b88dc;}
.main_section3 .cont > ul > li .txbox{ padding:35px 30px;}
.main_section3 .cont > ul > li .txbox .tt_en{  font-size:1.125em; color:#fff; padding-bottom:5px; letter-spacing:-1px}
.main_section3 .cont > ul > li .txbox .tt_en.st{ color:#003f87 !important}
.main_section3 .cont > ul > li .txbox .t1{  color:#fff; font-size:1.5em; padding-bottom:22px}
.main_section3 .cont > ul > li .txbox .t1.st{ color:#333 !important;}
.main_section3 .cont > ul > li .txbox .tx{ width:70%; color:#fff; line-height:1.6; font-size:.938em; }
.main_section3 .cont > ul > li .txbox .tx.st{ color:#888 !important;}
.main_section3 .cont > ul > li .div_mb{ margin-bottom:1em}
.main_section3 .cont > ul > li .business_area{ background-color:#0039ba; min-height:387px; height:100%; border:1px solid #0039ba;}
.main_section3 .cont > ul > li .business_area .txbox{ padding:40px 40px}
.main_section3 .cont > ul > li .business_area .business_list{ color:#fff; line-height:1.6;}
.main_section3 .cont > ul > li .business_area .business_list > li{ float:left; width:50%;}
.main_section3 .cont > ul > li .business_area .business_list .tt{ color:#fff; font-size:1.250em; margin-bottom:5px}
.main_section3 .cont > ul > li .business_area .business_list .tx{ font-size:.938em; letter-spacing:-1.5px; width:100%; word-break:break-all}
.main_section3 .cont > ul > li .business_area .business_list .tx > li > a{ display:block; color:#fff; opacity:.7; margin-top:12px; transition:.3s;}
.main_section3 .cont > ul > li .business_area .business_list .tx > li > a:hover{ opacity:.9; margin-left:7px;}
.main_section3 .cont > ul > li .ceo_area,
.main_section3 .cont > ul > li .location_area{ background:#fff; position:relative; cursor:pointer}
.main_section3 .cont > ul > li .p_btn{ position:absolute; right:12px; bottom:12px; width:2.5em; line-height:2.5em; font-size:1.125em; text-align:center; border-radius:50%; color:#fff; text-align:center;}
.main_section3 .cont > ul > li .p_btn.st3{ background:#0babd0; }
.main_section3 .cont > ul > li .p_btn.st4{ background:#1b88dc; }



/*골드스틸 메인*/
.main .goTop{ display:none}
.main_tit .t1{ text-align:center; font-size:3em; color:#000; margin:0 0 1em 0; font-weight:400;}
.main_tit .t2{ font-size:2.5em; font-weight:300; color:#000; margin:0 0 .5em 0}
.main_tit .line{ display:block; width:1px; height:.75em; background:#000; margin-bottom:.25em}
.main_tit .t1 .line{ margin-left:auto; margin-right:auto}

.main_box{ padding:3em 0 4em 0}
.main_box.mainBg{}

.main_about{ margin:-3em 0 0 -3em}
.main_about > li{ width:33.33%}
.main_about > li .in{ margin:3em 0 0 3em;}
.main_about > li:nth-child(2n) .in{ padding-top:0}
.main_about > li .info{ padding:1em}
.main_about > li .info .t1{ font-size:1.25em; font-weight:700; text-transform:uppercase}
.main_about > li .info .t2{ padding:1em 0; color:#666; }

.main_more{ display:block; padding:1em 0; margin-top:1em; font-size:.875em; font-weight:500; color:#777; text-transform:uppercase;}
.main_more .xi{ font-size:1em; margin-left:.5em; transition:.3s}
.main_more .xi:before{ content:"\e913"}
.main_more:hover{ color:#ff3333}
.main_more:hover .xi{ padding-left:1em}

.main_more2{ text-align:center}
.main_more2 > a{ display:inline-block; padding:1.5em 3em; border:2px solid #ff3333; color:#ff3333; position:relative; transition:.3s; min-width:50%}
.main_more2 > a:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; transform:scaleX(0); transform-origin:left top; transition:.3s; background:#ff3333}
.main_more2 > a > i{ position:relative}
.main_more2 > a .xi{ font-size:1em; margin-left:2em}
.main_more2 > a .xi:before{content:"\e913"}
.main_more2 > a:hover{ color:#fff}
.main_more2 > a:hover:before{transform:scaleX(1)}

.main_business > li{ margin-bottom:4em}
.main_business > li .scaleX{ transform-origin:left top}
.main_business > li .img{ width:50%}
.main_business > li .info{ width:45%; padding:2em 0}
.main_business > li .info .t1{ font-weight:700; font-size:2.125em; line-height:1; color:#333}
.main_business > li .info .t2{ font-size:1.125em; color:#777; padding:2em 0; line-height:1.8}
.main_business > li:nth-child(2n) .info{ order:-1}
.main_business > li:nth-child(2n) .scaleX{ transform-origin:right top}
.main_business > li:nth-child(2n) .info{ text-align:right}

.main_news{ overflow:hidden; padding-bottom:3px}
.main_news > li{ width:50%; float:left;}
.main_news > li:nth-child(even) a{ margin-left:-1px}
.main_news > li > a{ display:block; padding:2em 3em; padding-right:7em; border:1px solid #ddd; color:#333; margin-bottom:-1px; position:relative}
.main_news > li > a:after{ content:""; position:absolute; left:0; top:-1px; height:3px; width:100%; background:#ff3333; transition:.3s; transform:scaleX(0)}
.main_news > li > a .date{ display:block; opacity:.4; margin:0 0 .5em .125em}
.main_news > li > a .tit{ display:block; font-size:1.25em; font-weight:400}
.main_news > li > a .more{ position:absolute; right:1em; top:50%; margin-top:-.625em; width:5em; line-height:1em; font-size:1em; text-align:center; opacity:.5}
.main_news > li > a .more:before{ font-size:2em; background:#f5f5f5; padding:.5em}
.main_news > li > a:hover:after{ transform:scaleX(1)}
.main_news > li > a:hover .more{ color:#ff3333; opacity:1}
.main_news > li > a:hover .date{ color:#ff3333; opacity:1}
.main_news > li > a:hover .tit{ font-weight:400}

.main_partner{ text-align:center;}
.main_partner .con_wrap{ position:relative; margin-top:2rem; margin-bottom:2em;}
.main_partner .con_wrap .list_slide{ text-align:left; margin:-1px 0 0 -1px;}
.main_partner .con_wrap .list_slide .resize{ padding-bottom:30%; margin:1px 0 0 1px; background:#fff; overflow:hidden;}
.main_partner .con_wrap .list_slide .resize img{ max-width:85%; max-height:75%;}
.main_partner .con_wrap .list_slide .layer{ position:absolute; left:0; top:100%; width:100%; height:100%; background-color:rgba(31, 87, 170,.8); opacity:0; transition:all .3s; display:none}
.main_partner .con_wrap .list_slide .layer .tt{ color:#fff;}
.main_partner .con_wrap .list_slide a:hover .layer{ top:0; opacity:1;}
.main_partner .con_box{ position:relative}
.main_partner .arrow_wrap{ position:absolute; top:50%; left:0; width:100%;}
.main_partner .arrow_wrap > li{ position:absolute; top:0; margin-top:-1.5em; text-align:center;}
.main_partner .arrow_wrap > li.prev{ left:-4em;}
.main_partner .arrow_wrap > li.next{ right:-4em;}
.main_partner .arrow_wrap > li .xi{ width:2em; line-height:2em; border:1px solid #ddd; background:#fff; border-radius:50%; color:#aaa; cursor:pointer;}
.main_partner .arrow_wrap > li:hover .xi{ border-color:#435363;}

.page_sec{ margin-top:4em}
.page_sec1{ margin-top:1em}
.page_sec2{ margin-top:2em}


.main_subject > li{ margin-bottom:6em}
.main_subject > li:last-child{ margin-bottom:0;}
.main_subject > li .img { width:70%;}
.main_subject > li .scaleX{ transform-origin:left top}
.main_subject > li .info{ flex:1; box-sizing:border-box; position:relative; padding:3em 4em; background:#f7f7f7; margin-top:15em; margin-left:-15em;}
.main_subject > li .info .t1{ font-size:.875em; color:#999; margin-bottom:1em; text-transform:uppercase}
.main_subject > li .info .t2{ font-weight:700; font-size:2.000em; padding-bottom:1em; color:#333}
.main_subject > li .info .t3{ font-size:1.125em; padding-bottom:1em; color:#666}
.main_subject > li .info .t3 > span{/* padding-right:1em; *//* border-right:1px solid #ddd; */margin-right:1em; /*border-bottom: 1px solid #ddd; */padding:.5em 1em;display: block; position:relative; transition:.3s all; cursor:pointer;}
.main_subject > li .info .t3 > span:hover{ color:#e77918}
/*.main_subject > li .info .t3 > span:hover,
.main_subject > li .info .t3 > span:hover .xi{ color:#ff3333; border-color:#ff3333;}*/
.main_subject > li .info .t3 .xi{ position:absolute; right:1em; color:#999}
.main_subject > li:nth-child(2n) .scaleX{ transform-origin:right top}
.main_subject > li:nth-child(2n) .info{ order:-1; margin-left:auto; margin-right:-15em;}

.main .gotop{ width:5em; line-height:5em; border:5px solid #f1f1f1; text-align:center; display:block; margin:0 auto; color:#aaa; margin-bottom:4em; transition:.3s}
.main .gotop .xi{ font-size:3em}
.main .gotop:hover{ background:#e77918; color:#fff}




/*페이지탭*/
.tab_st{ position:relative; margin-bottom:2em; padding:1px 0 0 1px;}
.tab_st:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#111;}
.tab_st > li{ flex:1; position:relative;}
.tab_st > li .in{ height:3.5em; margin:-1px 0 0 -1px; padding:0 .5em; background:#f7f7f7; border:1px solid #ddd; color:#444; transition:.1s;}
.tab_st > li .in .tt{ font-size:1.063em;}
.tab_st > li:hover .in{ background:#fff; color:#111;}
.tab_st > li.on{ z-index:1;}
.tab_st > li.on .in{ background:#fff; border-color:#111; border-bottom-color:transparent; color:#111;}
.tab_st > li.on .in .tt{ font-weight:500;}



.tab_st2{ position:relative; margin-bottom:2em; padding:1px 0 0 1px; text-align:center}
.tab_st2:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;}
.tab_st2 > li{ width:16.66%; position:relative; margin:0 5px;}
.tab_st2 > li .in{ height:8em; margin:-1px 0 0 -1px; padding:0 .5em; background:#f7f7f7; border:1px solid #ddd; color:#444; transition:.1s; position:relative}
.tab_st2 > li .in .icon{ display:block; padding-top:1.2em}
.tab_st2 > li .in .tt{ font-size:1.063em; display:block; padding-top:.3em;}
.tab_st2 > li:hover .in{ background:#fff; color:#111;}
.tab_st2 > li.on{ z-index:1;}
.tab_st2 > li.on .in:after{ content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:#e77918}
.tab_st2 > li.on .in{ background:#fff; color:#111;}
.tab_st2 > li.on .in .tt{ font-weight:500;}




/*개인정보처리방침*/
.member_agree .agree{ padding:3em; border:1px solid #ddd; border-top:2px solid #3c3c3d; font-size:.938em; color:#69696b; line-height:1.4em;}
.member_agree .agree.H{ padding:1.5em; border-top-width:1px; height:8em; overflow-y:scroll;}
.member_agree .agree p{ padding:.5em 0; line-height:1.6}
.member_agree .agree *{ vertical-align:baseline;}
.member_agree .agree .c1{ color:#cd3350}
.member_agree .agree strong{ color:#3c3c3d;}
.member_agree .check{ padding:0 2em; border:1px solid #ddd; border-top:none; border-radius:0 0 5px 5px; text-align:right; background:#f5f5f5}
.member_agree h1{ color:#111; padding-bottom:.5em}


/*생산공정*/
.program_step_wrap{}
.program_step_wrap .sec4 .w2{ width:50% !important;}
.program_step_wrap .sec5 .w2{ width:40% !important;}
.program_step_wrap .sec5 .w3{ width:60% !important;}
.program_step_wrap .sec5 .w4{ width:80% !important;}
.program_step_wrap .w100{ width:100% !important;}
.program_step{ margin:0 0 -1.5em -1.5em}
.program_step.fl_wrap > .right{ float:right}
.program_step .inner{ position:relative; margin:0 0 1.5em 1.5em; background:#fff; border:1px solid #333; box-shadow:.3em .3em 0 rgba(113,83,15,.2); text-align:center; box-sizing:border-box;}
.program_step .h1 > .inner{ height:18em;}
.program_step .h2 > .inner{ height:21.5em;}
.program_step .h3 > .inner{ height:20em;}
.program_step .in_h1{ height:7em;}
.program_step .in_h2{ height:3em;}
.program_step .in_h3{ height:4.5em;}
.program_step .in_h4{ height:12em;}
.program_step .line:before,
.program_step .line:after { content:""; position:absolute; top:50%; margin-top:-5px; width:10px; height:10px; background:#e77918; display:none;}
.program_step .lineL:before{ width:1.5em; left:-1.5em; /*margin-left:-3px; */display:block;}
.program_step .lineR:after { width:1.5em; right:-1.5em; margin-right:-3px; display:block;}
.program_step .lineB:after { height:1.5em; left:50%; margin-left:-5px; top:auto; margin-top:auto; bottom:-1.5em; margin-bottom:-3px; display:block;}
.program_step .vm_tt{ box-sizing:border-box; width:100%;}
.program_step .num{ font-family:'Ms','notokr',sans-serif; font-size:1em; color:#e77918; font-weight:600; text-transform:uppercase; letter-spacing:0;}
.program_step .icon .xi{ font-size:1.875em; color:#095282;}
.program_step .icon .xi:before{ content:"\e92b";}
.program_step .txt{ padding:0 .8em; color:#3c3c3d; letter-spacing:-1px; text-transform:uppercase;}
.program_step .txt > *{ display:block; padding:.2em 0;}
.program_step .txt .t1{ font-size:1.250em; color:#111; font-weight:500}
.program_step .txt .t2{ font-size:1em; height:40px; margin:10px 0; line-height:1.4}
.program_step .txt .t3{ font-size:1.375em;}
.program_step .txt .t4{ font-size:1.063em;}
.program_step .or{ display:inline-block; *display:inline; zoom:1; margin:-.5em 0; padding:.3em 1.5em; background:#ff7041; border-radius:40px; font-family:'Ms','notokr',sans-serif; color:#fff; font-weight:500;}
.program_step .t_bd{ padding:.8em .6em; background:#f0f0f6; border:1px dashed #afafeb;}

.program_step .h1 > .inner .num{ padding:2em 0 0 0;}
.program_step .h2 > .inner .num{ padding-top:5em;}
.program_step .h1 > .inner .t0{ font-size:1.250em}
.program_step .inner .icon{ padding:.8em 0;}
.program_step .inner .img{ margin:1em 0}
.program_step.first .inner .img > img{ width:80%}
.program_step .inner .img > img{ border-radius:10px; width:60%}
.program_step .inner .img2 img{ max-width:80%;}
.program_step .in_h1 .num{ padding-top:0 !important;}
.program_step .in_h4 .num{ padding:1em 0 .4em 0;}

.program_step .finish .inner{ background:#095282;}
.program_step .finish .inner *{ color:#fff;}
.program_step .finish .icon .xi{ color:#ff7041;}
.program_step .finish.st2 .inner{ background:#fff; border-width:0;}
.program_step .finish.st2 .in_h1{ background:#095282;}
.program_step .finish.st2 .in_h2 *{ color:#3c3c3d;}

.program_step .bg1 .inner{ background:#095282;}
.program_step .bg1 .inner *{ color:#fff;}
.program_step .bg2 .inner{ background:#fff; border-width:0; padding:0 2em;}
.program_step .bg3 .inner{ background:#fef6e0;}
.program_step .bg4 .inner{ background:#e4f3fd;}
.program_step .bg5 .inner{ background:#ebffec;}
.program_step .ex_con{ border-top:1px solid #afafeb;}
.program_step .page_ex_list{ display:inline-block; *display:inline; zoom:1; text-align:left;}

.program_step.st2{ margin:0;}
.program_step.st2 .inner{ margin-bottom:0;}
.program_step.st2 .inner_wrap{ padding:0 2px 0 0; box-shadow:.3em .3em 0 rgba(15,40,113,.2);}
.program_step.st2 .inner_wrap .inner{ margin:0 -2px 0 0; box-shadow:none;}
.program_step.st2 .inner_wrap .w100{ width:99.99% !important;}

.program_step .price_wrap{ width:100%;}
.program_step .price_wrap > *{ display:inline-block; *display:inline; zoom:1; vertical-align:middle;}
.program_step .price_wrap .price_icon{ margin-right:1em;}
.program_step .price_wrap .price_txt .t1{ font-size:1.250em;}
.program_step .price_wrap .price_txt .t2{ font-size:1.250em; font-weight:200; text-decoration:line-through; padding-right:.4em;}
.program_step .price_wrap .price_txt .t3{ font-family:'Ms','NotoSans',sans-serif; font-size:1.875em; color:#ff7041; font-weight:600;}
.program_step .price_wrap .price_txt.st2{ display:block;}


/**/
.sub_tt_wrap {margin-bottom:15px;}
.sub_tt_wrap .tit { font-size:1.375em; position:relative; padding-left:42px; font-weight:500}
.sub_tt_wrap .tit:before,
.sub_tt_wrap .tit:after{ content:""; position:absolute; top:12px; left:2px; width:19px; height:8px; transform:rotate(45deg);}
.sub_tt_wrap .tit:before{ background:#e77918}
.sub_tt_wrap .tit:after{ background:#9b9994; margin-left:.625em}


/**/
.conWrap{ padding:3em 0 5em 0; background:#f9f9f9}
.conWrap.bg1{ background:#f5f5f5}
.conWrap.bg2{ background:#efedeb; padding-bottom:10em}
.conWrap.bg3{ background:#f5f5f5; padding-bottom:2em}
.conWrap.bg_w{ background:#fff}

.main .top_Btn{ display:none !important}
.top_Btn{display:none;}
.top_Btn a{ position:fixed; bottom:30px; right:30px; width:70px; height:70px; line-height:70px; text-align:center; border-radius:50%; background:#313851; cursor:pointer; color:#fff; transition:0.3s; z-index:15; font-size:.938em}
.top_Btn a:hover{ transform:translate(0,-10px); background:linear-gradient(300deg, #ff5200 0%,#fd8c00 100%);}

/*사업분야*/
.page_box{ padding-left:1.5em}
.page_box.st1{ border:1px solid #ccc; padding:2em 1.5em; margin-left:1.5em; border-top:4px solid #ccc}
.page_box > * { color:#222}
.page_box .t1{ line-height:1.6; color:#222; text-align:justify; word-break:break-all}
.page_box .list1{}
.page_box .list1 > li{ line-height:1.6; position:relative; padding-left:1.5em;}
.page_box .list1 > li > strong,
.page_box .list3 > li > strong{ font-weight:500; margin-top:8px; color:#333; display:block}
.page_box .list3 > li > strong{ display:inline-block !important; margin-top:0; vertical-align:baseline}
.page_box .list3 > li > .t1{ display:inline-block !important; padding-left:.5em}
.page_box .list1 > li:first-child > strong,
.page_box .list3 > li:first-child > strong{ margin-top:0; color:#111}
.page_box .list1 > li:before{ content:"\e91b"; position:absolute; left:0; color:#555; top:0; font-family:xeicon!important}
.page_box .list2{ padding-top:.5em; margin-left:-1.5em}
.page_box .list2 > li{ line-height:1.7; position:relative; padding-left:1.5em}
.page_box .list2 > li:before{ content:"\e91b"; position:absolute; left:0; color:#555; top:0; font-family:xeicon!important}
.page_box .list3{ margin-left:-1.5em; margin-top:1em;}
.page_box .list3 > li{ line-height:1.6; padding-left:.5em;}
.page_box.st2{ padding:1.2em 1.5em; border:1px solid #ccc; border-radius:.4em; box-shadow:.25em .25em 0 rgba(0,0,0,.08);}
.page_box.st3{ background:#f9f9f9;}


.page_box .img_area{ width:10%; float:left; position:relative; top:1em; text-align:center}
.page_box .txt_area{ width:80%; float:left; padding-left:1em}



.businessWrap .vision_list.st2{ margin:0 0 0 -.5em}
.businessWrap .vision_list.area0 > li{ width:100%;}
.businessWrap .vision_list.area0 > li .pd{ min-height:auto !important}
.businessWrap .vision_list.st2 > li .pd.st{ min-height:205px}
.businessWrap .vision_list.area1 > li{ width:50%;}
.businessWrap .vision_list.area2 > li{ width:25%;}
.businessWrap .vision_list.area3 > li{ width:33.33%;}
.businessWrap .vision_list.area3 .tit{ font-size:1em !important}
.businessWrap .vision_list.st2 > li .in{ height:100%; background:#fff; border:1px solid #d4d5d8; border-top-width:3px; border-top-color:#fd8c00; border-radius:0 0 .6em .6em; margin:0 0 .5em .5em}
.businessWrap .vision_list.st2 > li .pd{ padding:1.2em .8em; min-height:120px}
.businessWrap .vision_list.st2 .tit{ margin-bottom:.8em; padding:.6em .2em; background:#f6f5f4; border:2px dotted #e2d9cf; font-size:1.125em; color:#341f03; text-align:center; font-weight:500}
.businessWrap .vision_list.st2 .con{ padding:0 .3em; text-align:left;}
.businessWrap .page_list .tt{ line-height:1.6; font-size:1em;}
.businessWrap .c1{ color:#005aab; vertical-align:baseline}

.businessWrap .list1{ margin-left:-2em}
.businessWrap .list1 li{ flex:1; margin-left:2em;}
.businessWrap .list1 li .tt{ padding:1em 1.7em; font-size:1.250em; font-weight:500; position:relative}
.businessWrap .list1 li .tt:before{ width:1.2em; height:1px; background:#111; content:""; position:absolute; top:34px; left:0;}
.businessWrap .list1 li .txt{ font-size:.938em; margin-top:-.5em; padding-left:1.7em}


/*오시는길*/
.page_location_wrap{ margin-top:1em}
.root_daum_roughmap {width:100% !important; padding:0 !important; border:none !important}


.map_info1 { overflow:hidden; margin-bottom:20px; box-shadow:2px 3px 8px -1px #a4a4a4; padding:1.5em; margin-top:2em;}
.map_info1 .t1 { float:left; }
.map_info1 .t1 span { color:#666; display:inline-block; margin-right:20px; line-height:38px; }
.map_info1 .t1 span:last-child { margin-right:0;}
.map_info1 .t1 .xi { font-size: 1.250em; vertical-align:middle; color:#fff; margin-right:5px; background:#e77918; border-radius:50px; width:1.7em; height:1.7em; line-height:1.7em; text-align:center;}
.map_info1 .map_btn { float:right; display:inline-block; padding:11px 45px 10px 45px; color:#fff; background:#003f87; border:1px solid #ddd; }
.map_info1 .map_btn .tx{ font-size:.875em; color:#fff; vertical-align:middle}

.map_info2 { margin-top:30px;}
.map_info2 > li { overflow:hidden; padding:2em 1em; border-bottom:1px solid #ddd}
.map_info2 > li h3 { float:left; color:#222222; font-size:1.375em; }
.map_info2 > li h3 .xi { font-size:1.625rem; vertical-align:text-top; }
.map_info2 > li .info { margin:0 0 0 240px;}
.map_info2 > li .info strong { display:block;}
.map_info2 > li .info p { color:#333; line-height:26px;}
.map_info2 > li .info ul li:first-child strong { padding-top:0}
.map_info2 > li.bus .info span { display:block; margin:2px 0 6px; color:#333; }
.map_info2 > li.bus .info p { padding-left:80px; position:relative; line-height:30px; color:#666; }
.map_info2 > li.bus .info .g:before { content:"마을"; width:60px; height:23px; border-radius:23px; background:#53a135; color:#fff; text-align:center; line-height:22px; position:absolute; left:0; top:50%; margin-top:-11px; font-size:0.813em; }
.map_info2 > li.bus .info .r:before { content:"R"; width:23px; height:23px; border-radius:23px; background:#df262e; color:#fff; text-align:center; line-height:22px; position:absolute; left:0; top:50%; margin-top:-11px; font-size:0.813em; }
.map_info2 > li.bus .info .b:before { content:"일반"; width:60px; height:23px; border-radius:23px; background:#00aeab; color:#fff; text-align:center; line-height:22px; position:absolute; left:0; top:50%; margin-top:-11px; font-size:0.813em; }

.map_info2 > li.subway {}
.map_info2 > li.subway .info { margin-top:-1px;}
.map_info2 > li.subway .info span { display:block; margin:2px 0 6px;}
.map_info2 > li.subway .info p { display:inline-block; margin-right:34px;}
.map_info2 > li.subway .info em { display:inline-block; font-weight:500; margin-right:20px}
.map_info2 > li.subway .info .r em { color:#fff;}
.map_info2 > li.car .info .r em { color:#f62c11;}

.bs1{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; padding:0 15px; font-size:0.875em; font-weight:600; color:#fff; line-height:25px; border-radius:30px; background:#ffce32; margin:0 5px 0 0}

.btn_in{ float:right; margin-top:2px}
.btn_in .more{ display:block; border:1px solid #e77918; color:#e77918; height:30px; padding:5px; transition:.3s; width:140px; margin-left:0.5em; border-radius:4px;}
.btn_in .more .tt{ vertical-align:middle; font-size:.875em; padding-left:.5em;}
.btn_in .more.va_wrap{ height:30px !important}
.btn_in .xi{ vertical-align:middle; margin-left:5px; }


/*조직도*/
.groupWrap{ background:url(../images/sub/group_bg.png) no-repeat center center;}


/*인사말*/
.greetingWrap{}
.greetingWrap .greeting_tit{ text-align:center; letter-spacing:-.2px;}
.greetingWrap .greeting_tit .t1{ font-size:1.375em; display:block; color:#555; margin-top:.5em}
.greetingWrap .greeting_tit > i{ font-size:2.75em; font-family:'Ms'}
.greetingWrap .c1{ color:#eb7812; font-weight:700;}
.greetingWrap .c2{ color:#555; font-weight:500}
.greetingWrap .greeting_tit:after{ content:""; width:1px; height:50px; background:#888; text-align:center; display:block; margin:1.5em auto;}
.greetingWrap .t2{ font-size:1.375em; color:#333; line-height:1.6; padding:0 5%; text-align:center; font-weight:300}
.greetingWrap .page_tit .t1{ font-size:1.375em; display:block}
.greetingWrap .page_tit .tt{ font-size:2.570em;}

.greetingWrap .tb_in{ width:45%; padding:1em; float:left}
.greetingWrap .tb_in dt{ font-weight:500; padding-bottom:.5em}
.greetingWrap .tb_in dd{ padding-left:1em; position:relative; line-height:1.6}
.greetingWrap .tb_in dd:before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; background:#888; border-radius:50%}
.greetingWrap .board_table .tbl01_btn01{display:inline-block; color:#fff; background:#eb7812; border-radius:20px; padding:5px 10px; font-size:0.813em; margin-left:10px; transition:0.3s;}


/**/
.bn_wrap{ padding:0 3em 1em 3em;}
.bn_wrap .bn{ overflow:hidden;}
.bn_wrap .bn > li{ float:left; width:33.33%; cursor:pointer; }
.bn_wrap .bn > li > p{ height:160px; margin:0 10px; background-repeat:no-repeat; background-size:cover;}
.bn_wrap .bn .st1 > p{ background-image:url(../images/sub/greeting_img1.jpg);}
.bn_wrap .bn .st2 > p{ background-image:url(../images/sub/greeting_img2.jpg);}
.bn_wrap .bn .st3 > p{ background-image:url(../images/sub/greeting_img3.jpg);}
.bn_wrap .bn > li > p .btn { display:inline-block; padding:10px 0; width:130px; border:1px solid rgba(255,255,255,0.5); color:#fff; text-align:center; transition:0.3s; }
.bn_wrap .bn > li:hover .btn { border-color:#eb7812; background-color:#eb7812; }

.vg_wrap{ text-align:center}
.vg{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; width:0; height:100%}
.vg_tt{display:inline-block; *display:inline; zoom:1; vertical-align:middle; width:auto; height:auto;}
.vg_wrap img{vertical-align:middle; display:inline-block; *display:inline; zoom:1;}


/*개인정보처리방침*/
.privacy_area{ border-top:2px solid #333; border-bottom:1px solid #666; position:relative; /*height:800px; overflow-y:scroll;*/}
.privacy_area.st .privacy_box strong{ vertical-align:baseline; color:#555}
.privacy_area.st .privacy_box .privacy_in > strong{ font-weight:500; font-size:1.125em; }
.privacy_area .privacy_tt{ position:absolute; left:0; top:0; width:178px; height:100%; border-left:1px solid #ccc; border-right:1px solid #ccc; background:url(../images/member/agree_bg.png) no-repeat left top; text-align:right;}
.privacy_area .privacy_tt strong{ display:inline-block; *display:inline; zoom:1; font-size:1.308em; font-weight:600; color:#fff; padding:20px 15px 0;}
.privacy_area .privacy_box{  background-color:#f9f9f9; padding:30px;}
.privacy_area .privacy_box .txt{ font-weight:600; color:#444; line-height:20px; margin-bottom:15px;}
.privacy_area .privacy_box .privacy_in{ height:140px; padding:30px; border:1px solid #ccc; background:#fff; line-height:18px; overflow-y:scroll;}
.privacy_area .privacy_box .privacy_in p{ line-height:1.4; margin-bottom:10px; color:#555; font-size:0.875em; font-family:notokrR;}
.privacy_area .privacy_box .privacy_in.h_st{ overflow-y:hidden; height:auto;}
.privacy_area .privacy_box .privacy_inp{ margin-top:25px; text-align:right;}
.privacy_area .privacy_box .privacy_inp input,
.privacy_area .privacy_box .privacy_inp label{ vertical-align:middle; cursor:pointer;}
.privacy_area .privacy_box .privacy_inp input{ margin-left:15px;}
.privacy_area .privacy_box .privacy_inp label{ margin-left:8px;}
.privacy_area .privacy_box .privacy_inp label:hover{ color:#3992ed;}

.privacy_area.st .privacy_box{ margin-left:0; padding:30px;}
.privacy_area.st .privacy_box .privacy_in{ padding:30px; font-size:0.938em; line-height:1.6}
.privacy_area.st .privacy_box .privacy_in h3{ font-size:1.250em; font-weight:600}

.privacy_area .privacy_box .privacy_in .privacy_tit{border:1px solid #ccc; padding:20px; background:#f1f1f1; text-align:center;}
.privacy_area.st .privacy_box .privacy_in p{color:#666;  line-height:21px; padding-left:5px;}
.privacy_area.st .privacy_box .privacy_in p > strong{font-size:1.154em; color:#333; margin-left:-5px;}


/*사업분야 가공*/
.hexagon_wrap { margin:5% 0 10% 0; background:url(../images/sub/sec2_bg.png) no-repeat;} 
.hexagon_wrap > li{width: 25%; margin-bottom: 1.8%;	position: relative;	visibility: hidden}
.hexagon_wrap > li:nth-of-type(5n-4) { margin-left: 25%}
.hexagon_wrap > li:nth-of-type(5n-2) { margin-left: 12.5%;}
.hexagon_wrap > li::after {content: '';	display: block;	padding-bottom: 80%}
.hexagon { position: absolute;width: 99%; left:0; top:0; padding-bottom: 114.6%;overflow: hidden;visibility: hidden;transform: rotate3d(0, 0, 1, -60deg) skewY(30deg)}
.hexagon .wrap_in{ position: absolute;	visibility: visible; width: 100%; height: 100%; overflow: hidden; transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg); background: #f5f5f5}
.hexagon .wrap_in:hover{ background:#fd8c00; transition:.3s all;}
.hexagon.bg{ transform: rotate3d(0, 0, 1, -60deg) skewY(30deg) scale(.9); left:.5%; top:.5%}
.hexagon.bg .wrap_in{ background:#fff}
.hexagon.bg .wrap_in.bg{ background-size:cover !important; transition:.3s all;}
.hexagon.bg .wrap_in.bg1{ background:url(../images/sub/busi_bg01.jpg); display:none}
.hexagon.bg .wrap_in.bg2{ background:url(../images/sub/busi_bg02.jpg); display:none}
.hexagon.bg .wrap_in.bg3{ background:url(../images/sub/busi_bg05.jpg); display:none}
.hexagon.bg .wrap_in.bg4{ background:url(../images/sub/busi_bg03.jpg); display:none}
.hexagon_wrap > li:hover .hexagon.bg .wrap_in.bg{ display:block}
.hexagon_wrap > li:hover .wrap_in .in{ opacity:0}
.hexagon .wrap_in .in{ position:relative; text-align:center; box-sizing:border-box}
.hexagon .wrap_in .in img{ width:80%}
.hexagon .wrap_in .in .t1{ font-size:1.375em; font-weight:500; padding-bottom:.5em;}
.hexagon .wrap_in .in .t2{ font-size:1.125em;}
.sub_bg1{ background:url(../images/sub/sec2_bg1.png) no-repeat 80% 72%; padding-bottom:5em; padding-top:3em; background-color:#f9f9f9}


.flex_di{ display:flex;}
.flex_di.vt{ align-content:flex-start; align-items:flex-start}
.flex_di.vc{ align-content:center; align-items:center}
.flex_di.vb{ align-content:flex-end; align-items:flex-end}
.flex_di.wrap{ flex-wrap:wrap}
.flex_di.space{ justify-content:space-between;}


.hg_img{ padding:4em 0 3em 0}