@charset "utf-8";
/* CSS Document */
body{ font-size:16px}
.box0{ width:94%; margin:0 auto}
.box1{ width:1200px; margin:0 auto; max-width:95%}
.box2{ width:1160px; margin:0 auto; max-width:100%}/*sub 페이지*/
.PC{ display:block !important}
.PHONE{ display:none !important}



/*퀵메뉴*/
.quick_tel{ position:fixed; z-index:999; left:1.5%; bottom:60px; text-align:center}
.quick_tel .cs{ background:#2685c7; border-radius:8px 8px; width:200px; padding:2em 0em 1em 1em; position:relative}
.quick_tel .cs > li {text-align:left}
.quick_tel .cs > li .xicon {margin-right:5px;}

.quick_tel .go_btn{ line-height:35px; padding:0 35px; font-size:.875em; transition:.3s;}
.quick_tel .go_btn.c1{ background:#1f57aa; border:1px solid #1f57aa; color:#ffffff;}
.quick_tel .icon{ width:3em; height:3em; line-height:3em; border-radius:100%; background:#292f35; font-size:1.125em; color:#fff; margin:0 auto 0.3em auto; position:absolute; top:-1em; left:35%; z-index:1}
.quick_tel .tt{ font-size:1.125em; color:#fff; font-weight:lighter;}
.quick_tel .b1{ font-weight:500;}
.quick_tel .line{ background:#fff; width:80%; margin:12px auto 0 auto; height:4px; display:block}
.quick_tel .tt.tel{ color:#fff6ad; font-size:1em; font-family: 'notokrM'; margin:.5em 0; display:block;}
.quick_tel .xi-angle-right{ vertical-align:bottom; padding-left:.5em; font-size:.938em}
.quick_tel .kakao{ position:relative; margin-top:2em;}
.quick_tel .kakao .cs{ background:#FBE300;}
.quick_tel .kakao .tt{ color:#3B1E1E;}
.quick_tel .kakao .icon{ background:#3B1E1E;}
.quick_tel .kakao .go_btn{ margin-top:1em; background:#3B1E1E; border-color:#3B1E1E;}

.img_quick_wrap {position:fixed; z-index:999; right:1.2%; bottom:60px; text-align:center;}
.img_quick_wrap .con:first-child  {margin-bottom:1em;}
.img_quick_wrap .con .ti {text-align:center; background:#003876; color:#fff; padding:8px 5px; letter-spacing:-.2px; font-size:.875em; line-height:1.3;}
.img_quick_wrap .con .img {border:1px solid #ddd; border-top:none;}

#header{ position: fixed; z-index:1000; left:0; top:0; width:100%; transition:.3s}
#header:after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; opacity:.3; background:#fff}
#header .va_wrap{ height:4.5em}
.headerPD{ padding-top:4.5em}
#header .logo{ float:left; z-index:99; position:relative}
#header .logo > a{ position:relative; text-align:left;}
#header .logo img{/*max-height:55%*/ max-width:80%;}

#header .menu_wrap{ margin-right:.5em}
#header .gnb_wrap{}
#header .gnb_wrap .gnb > li{ position:relative}

#header .gnb_wrap .gnb > li .dp1{ color:#222; padding:0 1em; /*min-width:7em;*/ min-width:5.5em; position:relative; overflow:hidden; transition:.3s}
#header .gnb_wrap .gnb > li .dp1:after{ font-family:xeicon!important; content:"\e92f"; position:absolute; left:0; bottom:-.4em; width:100%; text-align:center; color:#003f87; line-height:1; opacity:0;  transition:.3s}
#header .gnb_wrap .gnb > li .dp1 .va{ position:relative; z-index:1; font-size:1.2em}
#header .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; margin-left:-5rem; width:10rem; opacity:0; visibility:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); border-top:1px solid #003f87;}
#header .gnb_wrap .gnb > li:nth-child(2) .dp2{margin-left:-10rem; width:20rem;}
#header .gnb_wrap .gnb > li:nth-child(2) .dp2 > li{width:50%; float:left;}
#header .gnb_wrap .gnb > li .dp2 > li{ display:block}
#header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; color:#777; text-align:center; padding:.9em 1em;}
#header .gnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top:none}
#header .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:.9em; position:relative;}
#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:#222}
#header .gnb_wrap .gnb > li .dp2 > li:hover .va:after{ display:block; content:''; width:4px; height:4px; border-radius:50%; background:#0074c1; position:absolute; top:7px; left:-9px;}

#header .etc_wrap{ float:right; z-index:1; position:relative}
#header .etc{ float:left}
#header .etc > li > a { width:3em; text-align:center}
#header .etc > li > a .va{ font-size:.938em; color:#000; opacity:.5; transition:.3s}
#header .etc > li > a:hover .va{ opacity:1; color:#0074c1}

#header .all_wrap{ float:left}
#header .all_wrap .allBtn{ width:5em; text-align:center; margin-left:1em}
#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:16.5%; position:relative; box-sizing:border-box;}
#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:#003f87; 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:500px;}
#header .all_wrap .gnb > li .dp2 .vm_wrap{ height:auto; text-align:left;}
#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:.5em 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;}
#header .all_wrap .gnb > li .dp3 > li:hover > a .vm_tt{ text-decoration:underline;}
#header .all_wrap .gnb li:hover > a{ color:#003f87;} 
#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:#0074c1;}


.sub #header,
.scroll #header,
#header:hover{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.sub #header:after,
.scroll #header:after,
#header:hover:after{ display:none} 

#footer{ background:#282828; margin-top:4em}
#footer .f_logo{margin-bottom:20px; width:22%;}
#footer .menu_wrap .box1{ position:relative}
#footer .menu_wrap .gnb_wrap{}
#footer .menu_wrap .gnb_wrap .gnb > li{ width:14%; position:relative}
#footer .menu_wrap .gnb_wrap .gnb > li:nth-child(2){ width:28%;}
#footer .menu_wrap .gnb_wrap .gnb > li:after,
#footer .menu_wrap .gnb_wrap .gnb > li:first-child:before{ content:""; position:absolute; right:0; top:0; width:1px; height:100%; background:#fff; opacity:.1}
#footer .menu_wrap .gnb_wrap .gnb > li:first-child:before{ left:0}
#footer .menu_wrap .gnb_wrap .gnb > li .dp1{ padding:1.5em 1.5em 1em 1.5em; color:#fff; text-align:left}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2{ padding-bottom:4rem}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2:after{ display:block; clear:both; content:'';}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li{ display:block}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em 1.5em; text-align:left; color:#fff; opacity:.6; transition:.3s}
#footer .menu_wrap .gnb_wrap .gnb > li:nth-child(2) .dp2 > li{ width:50%; float:left;}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:.813em}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ opacity:1}
#footer .link_wrap{ border:1px solid #333; border:1px solid rgba(255,255,255,.1); border-left:none; border-right:none}
#footer .link_wrap .va_wrap{ height:3em}
#footer .link_wrap .link > li > a{ margin:0 2.5em; color:#fff; opacity:.8; transition:.3s}
#footer .link_wrap .link > li > a:first-child{ margin-left:0}
#footer .link_wrap .link > li > a .va{ font-size:.875em}
#footer .link_wrap .link > li > a:hover{ opacity:1}
#footer .link_wrap .link > li > a:hover .va{ text-decoration:underline}
#footer .link_wrap .gotop{ display:block; width:3.5em; background:#111; background:rgba(0,0,0,.4); opacity:.7; color:#fff; text-align:center; transition:.3s}
#footer .link_wrap .gotop .xi{ display:block}
#footer .link_wrap .gotop .tt{ display:block; font-size:.625em; letter-spacing:0}
#footer .link_wrap .gotop:hover{ background:#003f87; color:#fff; opacity:1}
#footer .link_wrap{ border:1px solid #333; border:1px solid rgba(255,255,255,.1); border-left:none; border-right:none}
#footer .link_wrap .va_wrap{ height:3em}
#footer .link_wrap .link > li > a{ margin:0 2.5em; color:#fff}
#footer .link_wrap .link > li > a:first-child{ margin-left:0}
#footer .link_wrap .link > li > a .va{ font-size:.875em}
#footer .link_wrap .link > li > a:hover .va{ text-decoration:underline}
#footer .info_wrap{ padding:2em 0 3em 0; border:1px solid rgba(255,255,255,.1);}
#footer .info_wrap .info{ }
#footer .info_wrap .info > li{ margin-right:4em; font-size:.813em; color:#fff; opacity:.6; line-height:2; letter-spacing:0}
#footer .info_wrap .info > li.copyright{ clear:both; padding-top:.5em; font-size:.688em; color:#fff; opacity:.3; text-transform:uppercase}

#contents{}
#contents .sub_visual_wrap{ position:relative}
#contents .sub_visual_wrap .va_wrap{ position:relative; height:23em; 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; padding-top:3em}
#contents .sub_visual_wrap .slogan .tit{ font-size:2.25em; font-family:notokrB; color:#fff; margin-right:5em; opacity:0; transition:1s;}
#contents .sub_visual_wrap .slogan .sec{ display:block; width:0; height:.1em; margin:1.25em auto; background:#eee; transition:1s; transition-delay:.5s}
#contents .sub_visual_wrap .slogan .nav{ font-size:.875em; color:#fff; opacity:0; line-height:1.5; transition:1s; transition-delay:.5s; display:none;}
#contents .sub_visual_wrap .slogan .nav .xi{ font-size:1em;}
#contents .sub_visual_wrap .slogan .nav .arrow{ margin:0 .3em 0 .2em}
#contents .sub_visual_wrap .slogan .nav .arrow:before{content:"\e93f"}
.load #contents .sub_visual_wrap .slogan .tit{ margin-right:0; opacity:1}
.load #contents .sub_visual_wrap .slogan .nav{ opacity:1}
.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:33.33% max-width:14%; */ width:14% !important;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li:nth-child(2) .dp2 > li{/* max-width:33.33% width:14% !important;*/}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a{ background:#222; height:3em; color:#fff; border-left:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); transition:.3s; opacity:.6}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li:nth-child(2) .dp2 > li > a{height:2.8em;}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:1.125em}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li:nth-child(2) .dp2 > li > a .va{ font-size:.95em}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li:hover > a{ opacity:.8}
#contents .sub_visual_wrap .sub_gnb_wrap .gnb > li .dp2 > li.on > a{ background:#003f87;  opacity:1}

#contents .sub_tit{ text-align:center; padding:2em 0; border-bottom:1px solid #ddd; position:relative}
#contents .sub_tit:after{ content:""; position:absolute; width:20em; height:1px; left:50%; bottom:-1px; margin-left:-10em; background:#002654; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #002654 50%, rgba(255,255,255,0) 100%)}
#contents .sub_tit .tit{ font-family:notokrB, sans-serif; font-size:2em; color:#222; font-weight:bold;}

#contents .doc{ padding:2em 0 5em 0}


/**/
.mainVisual_wrap{ position:relative;}
.mainVisual_wrap,
.mainVisual .img .in{ height:57em}
.mainVisual .slides{ overflow:hidden}
.mainVisual .img{ position:relative}
.mainVisual .img .in{ position:relative}
.mainVisual .img .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; background-attachment:fixed; transform:scale(1.4,1.4); transition-delay:2s}
.mainVisual .img .box1{ position:relative}
.mainVisual .img .slogan_wrap{ padding-top:13em; transition:.2s}
.mainVisual .img .slogan{ text-align:center}
.mainVisual .img .slogan .t0{ font-size:.938em; margin-bottom:2em; letter-spacing:.5em; opacity:.6; font-family:'notokrM';}
.mainVisual .img .slogan .t1{ font-size:3.6em; color:#111; opacity:0; margin-right:5em; letter-spacing:-2px; font-family:'notokrB';}
.mainVisual .img .slogan .t2{ font-family:notokrR, sans-serif; font-size:1.05em; color:#111; line-height:1.8; opacity:0; margin-left:5em; line-height:1.5; font-family:'notokrM';}
.mainVisual .img .slogan .sec{ width:0; height:.313em; background: #0074c1; transform:skew(-45deg); margin:3em auto; position:relative}
.mainVisual .img:before,
.mainVisual .img:after{ content:""; position:absolute; left:3%; bottom:.5em; width:94%; height:.3em; border-radius:1em; background:#fff; z-index:100}
.mainVisual .img:before{ background:#fff; opacity:.5}
.mainVisual .img:after{ background: #fff; width:0}
.mainVisual .img.flex-active-slide .bg{ transform:scale(1,1); transition-delay:0; transition:4.5s}
.mainVisual .img.flex-active-slide .slogan .t1{ opacity:1; margin-right:0; transition:2s}
.mainVisual .img.flex-active-slide .slogan .t2{ opacity:1; margin-left:0; transition:2s; transition-delay:1s}
.mainVisual .img.flex-active-slide .slogan .sec{ width:4em; transition:2s; transition-delay:1s}
.mainVisual .img.flex-active-slide:after{ width:94%; transition:5s}
.mainVisual .flex-control-paging{ position:absolute; top:34em; left:0; width:100%; text-align:center; z-index:100; transition:.2s}
.mainVisual .flex-control-paging > li{ display:inline-block; *display:inline; zoom:1;}
.mainVisual .flex-control-paging > li > a{ display:block; width:12px; height:12px; margin:0 10px; font-size:0; position:relative; background:#333;  transition:.5s; border-radius:100%}
.mainVisual .flex-control-paging > li > a.flex-active{ background:#003f87; transform:rotate(45deg) scale(1.3,1.3); border-radius:0}

.main_nav{ position:fixed; right:30px; top:0; z-index:999; height:100%; transition:.3s}
.main_nav .nav{ background:#000; background:rgba(0,0,0,.7); padding:15px; text-align:center; border-radius:50px}
.main_nav .nav > li{ }
.main_nav .nav > li > a{ display:block; width:15px; height:15px; border-radius:17px; background:#fff; margin:5px 0; transition:.3s; opacity:.7}
.main_nav .nav > li:hover > a{ opacity:1}
.main_nav .nav > li.on > a{ height:40px; opacity:1; background:#00a1ef !important; }

#scrollAni{ position: absolute; left:50%; width:7em; margin-left:-3.5em; text-align:center; bottom:3em; opacity:1; z-index:100; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,.5)}
#scrollAni .xi{ vertical-align:middle}
#scrollAni .xi-mouse{font-size:3.5em; color:#fff; margin-right:-.4em}
#scrollAni .xi-scroll{font-size:2.5em; color:#fff}
#scrollAni .tt{ display:block; color:#fff; font-size:.75em; text-transform:uppercase; font-weight:bold; letter-spacing:.1em; font-family:Arial, Helvetica, sans-serif; margin-top:.5em}

.scroll .mainVisual .img .slogan_wrap,
.scroll .mainVisual .flex-control-paging,
.scroll #scrollAni{ opacity:0}

/*메인 타이틀*/
.main_tit {text-align:center; padding:50px 0;}
.main_tit.pd_none {padding:0;}

.main_tit .tit {font-size:2.188em; vertical-align:middle; font-family:'notokrB';}
.main_tit .tit_col {color:#fff; }
.main_tit .tit > strong {color:#999999; vertical-align:bottom;}
.main_tit .txt {color:#555; padding-top:1em; }
.main_tit.main03_st {position:relative;}
.main_tit.main03_st .txt:after {position:absolute; content:""; width:2px; height:25px; background:#003f87; left:50%; bottom:0;}

/*main 01*/
.main01 {margin:3em 0 10em 0;}
.main01 .main01_bisw {}
.main01 .main01_bisw .main_bisul {overflow:hidden; margin-left:-15px;}
.main01 .main01_bisw .main_bisul .main_bisli {float:left; width:33.33%; cursor:pointer;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in {margin-left:10px; position:relative;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w {padding:3em 0;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w .ko {color:#fff; font-size:1.750em; font-family:notokrM, sans-serif;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w .en {color:#fff; font-size:.750em; font-family:notokrL, sans-serif; letter-spacing:2px;}  
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w .line {background:#fff; width:320px; height:1px; margin:2em 0; position:relative;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w .line .icon {position:absolute; left:50%; top:-6px; background:#fff; width:15px; height:15px; transform:rotate(45deg); margin-left:-7.5px;  transition:.3s;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .t_w:hover .icon {transform:rotate(80deg); transition:.3s;}

.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in.bg01 {background:url(../images/main/main01_img01.jpg) no-repeat center center; background-size:cover}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in.bg02 {background:url(../images/main/main01_img02.jpg) no-repeat center center; background-size:cover}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in.bg03 {background:url(../images/main/main01_img03.jpg) no-repeat center center; background-size:cover }

.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w {padding:1em;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w .more_btn > a {color:#fff; display:block; text-align:center; font-size:1.063em; font-family:notokrR, sans-serif;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w .more_btn .xi {color:#fff; vertical-align:middle; transition:.3s;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w:hover .more_btn .xi {padding-left:1em; transition:.3s;}

.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w.co01 {background:#360f21;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w.co02 {background:#212737;}
.main01 .main01_bisw .main_bisul .main_bisli .main_bis_in .b_w.co03 {background:#321646;}

/*main 02*/
.main02 {background:url(../images/main/main02_bg.jpg) no-repeat center; background-size:cover; margin-bottom:4em;}
.main02 .main02_t_w {text-align:center; padding-top:1em;}
.main02 .main02_t_w .line {background:#fff; width:30px; height:3px; margin:60px auto 20px auto;}
.main02 .main02_t_w .ti {color:#fff; font-size:2em; font-family:notokrB; letter-spacing:.5px;}
.main02 .main02_t_w .tx {color:#fff; padding:40px 0 50px; font-size:1.125em;  font-family:notokrR, sans-serif; line-height:1.8;}
.main02 .main02_t_w .main02_more {display:inline-block; color:#fff; font-size:.875em; border:1px solid #fff; padding:10px 25px; margin-bottom:70px;} 
.main02 .main02_t_w .main02_more .xi {padding-left:10px; vertical-align:text-bottom; transition:.3s;}
.main02 .main02_t_w .main02_more:hover {background:#003e87; border:1px solid #003e87; transition:.3s; }
.main02 .main02_t_w .main02_more:hover .xi {color:#fff;  transform:translate(6px);}

/*main 03*/
.main03 .main03_in {background:url(../images/main/main03_bg.jpg) no-repeat center center; background-size:cover; padding:3em 0 10em 0; position:relative;}
.main03 .main03_in:before {position:absolute; content:""; width:1px; height:30px; background:#11345a; left:50%; top:-30px;}
.main03 .result_tab { width:50%; margin:25px auto 30px; overflow:hidden; }
.main03 .result_tab li { float:left; width:20%; height:45px; line-height:45px; text-align:center; background:rgba(255,255,255,0.55); margin-left:-1px; cursor:pointer; color:#000;}
.main03 .result_tab li.on { background:#0090d6; color:#fff; }

.main03 .result_box { background:#d0d7df; position:relative; padding:20px 20px 75px 20px;}
.main03 .result_box .img { width:64%; }
.main03 .result_box .img .resize{ padding-bottom:57%;}
.main03 .result_box .img .bg{ background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.main03 .result_box .txt { position:absolute; right:20px; bottom:20px; width:540px; }
.main03 .result_box .tt { color:#263f7f; font-size:1.750em; font-family:notokrB, sans-serif; letter-spacing:-0.5px; text-align:center; position:absolute; top:150px; right:70px; width:540px; }
.main03 .result_box .txt .in_box { background:rgba(14,83,160,.9); padding:60px 140px 60px 45px; position:relative; box-sizing:border-box; max-height:300px; }
.main03 .result_box .txt .in_box .line {width:40px; height:2px; background:#aaa;margin:2em 0 1em 0;}
.main03 .result_box .txt .in_box .title { font-size:1.375em; color:#fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.main03 .result_box .txt .in_box dl {position:relative; padding:10px 0 10px 80px;}
.main03 .result_box .txt .in_box dl .ti {position:absolute; left:0; top:10px; color:#fff;}
.main03 .result_box .txt .in_box dl .ti .icon {display:inline-block; vertical-align:top; padding-left:.5em;}
.main03 .result_box .txt .in_box dl .tx {color:#fff;}

.main03 .result_box .txt .slick-dots { position:absolute; left:-100px; top:290px;}
.main03 .result_box .txt .slick-dots li { display:inline-block; margin:0 3px; }
.main03 .result_box .txt .slick-dots li button { font-size:0; border:0; background:#777; width:10px; height:10px; border-radius:10px; }
.main03 .result_box .txt .slick-dots li.slick-active button { background:#1a82cc; }

/*공지슬라이드*/
.customer_w{position:relative;  height:70px; margin-bottom:40px; border-bottom:1px solid #ddd; border-top:1px solid #ddd;}
.customer_w .customer_slide .tt{position:absolute; left:0; top:16px; z-index:3;}
.customer_w .customer_slide .tt .xi{display:inline-block; *display:inline; zoom:1; vertical-align:middle; color:#000; font-size:30px; color:#000;}
.customer_w .customer_slide .tt span{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; color:#fff; font-size:0.938em;  cursor:pointer; background:#003e87; padding:10px 30px;}
.customer_w .customer_slide .slides{}
.customer_w .customer_slide .slides li{height:70px; line-height:70px; position:relative;}
.customer_w .customer_slide .slides li .notice_tit {cursor:pointer; color:#000; font-family:notokrR; font-size: 1em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-right:180px; margin-left:130px; vertical-align:middle; width:50%;}
.customer_w .customer_slide .slides li .notice_tit .xi {vertical-align:bottom; padding-right:5px; padding-left:20px;}
.customer_w .customer_slide .flex-direction-nav{position:absolute; right:0; bottom:16px;}
.customer_w .customer_slide .flex-direction-nav li{display:inline-block;}
.customer_w .customer_slide .flex-direction-nav a{display:block; height:40px; width:40px; font-size:0;}
.customer_w .customer_slide .flex-direction-nav a:hover{background-color:#111;}
.customer_w .customer_slide .flex-direction-nav .flex-prev{background-color:#595959; background-image:url(../images/main/arr_up.png); background-repeat:no-repeat; background-position:center center; margin-right:1px;}
.customer_w .customer_slide .flex-direction-nav .flex-next{background-color:#595959; background-image:url(../images/main/arr_down.png);  background-repeat:no-repeat; background-position:center center;}
.customer_w .customer_slide .slides li .notice_date{position:absolute; right:120px; top:0; color:#999; font-family:notokrR; font-size:.875em;}

.main04 {margin:2em 0 8em 0;}
.main04 .custom_ul {overflow:hidden; margin-left:-10px;}
.main04 .custom_ul .li_in {float:left; width:25%;}
.main04 .custom_ul .li_in .con_in {margin-left:10px; border:1px solid #ddd; position:relative; overflow:hidden;}
.main04 .custom_ul .li_in .con_in:after {position:absolute; content:""; right:-35px; bottom:-35px; width:65px; height:65px; transform:rotate(45deg); border-left:1px solid #ddd; transition:all .7s;}
.main04 .custom_ul .li_in .con_in  .con_im_wrap {position:relative;  z-index:101;}
.main04 .custom_ul .li_in .con_in  .con_tx_wrap {padding:20px 30px 30px 30px; position:relative;  z-index:101; height:100px;}
.main04 .custom_ul .li_in .con_in  .con_tx_wrap .ti {color:#000; font-size:1.250em; font-family:notokrM;}
.main04 .custom_ul .li_in .con_in  .con_tx_wrap .tx {color:#8d8d8d; font-size:0.875em; padding:15px 10px 0 0px; font-family:notokrR; line-height:1.5;}
.main04 .custom_ul .li_in .con_in  .con_tx_wrap .bis_more {color:#656565; position:absolute; right:0; bottom:0;}
.main04 .custom_ul .li_in .con_in  .con_tx_wrap .bis_more .xi {font-size:21px;}
.main04 .custom_ul .li_in .con_in:hover{  cursor:pointer;}
.main04 .custom_ul .li_in .con_in:hover .xi {color:#fff; transition:.3s;}
.main04 .custom_ul .li_in .con_in:hover:after{ background:#003e87;}

/*연혁*/
.sub_history_img { text-align:center; }
.sub_history_tit{ text-align:right; padding:71px 0 60px 65px; background:url(../images/sub/sub_1/history_top.jpg) no-repeat bottom center; }
.sub_history_tit .t1{ font-size:2.5em; color:#003f87; letter-spacing:-1px; padding-right:30px;}
.sub_history_tit .t2{  font-size:.938em; color:#999; margin-top:10px;  padding-right:30px;}
.sub_history_tit .t1 .col {color:#F00;}

.sub_history_wrap{ position:relative; z-index:inherit; padding-left: 120px;}
.sub_history_wrap .sub_history_line{ position:absolute; z-index:inherit; width:1px; background:#ddd; left:7%; height:100%; margin-left:1px; top:-40px}
.sub_history_wrap .sub_history > li{ position:relative; z-index:inherit; width:100%; margin-top:40px}
.sub_history_wrap .sub_history > li .history{ padding:0 20px; border-bottom: 1px dotted #ccc;}
.sub_history_wrap .sub_history > li .history .year{ font-family:ns, sans-serif; font-size:1.9em; font-weight:600; color:#555; position:relative; z-index:inherit; letter-spacing:-1px; opacity:.6;}

.sub_history_wrap .sub_history > li .history .list{ position:relative; z-index:inherit; margin-top:15px}
.sub_history_wrap .sub_history > li .history .list .tt{ display:block; font-size:1em; color:#222; line-height:1.4; margin-bottom:15px; font-family:notokrM, sans-serif; vertical-align:middle;}
.sub_history_wrap .sub_history > li .history .list .txt {position:relative; padding-left:10px;}
.sub_history_wrap .sub_history > li .history .list .txt:before {position:absolute; content:""; width:5px; height:2px; background:#888; left:0; top:10px;}
.sub_history_wrap .sub_history > li.odd{ left:0; text-align:right;  }
.sub_history_wrap .sub_history > li.odd .history .list .tt { background:url(../images/inc/dot_tm1.png) no-repeat top 8px right; padding-right:10px; }
.sub_history_wrap .sub_history > li.even{ left:50%;  }
.sub_history_wrap .sub_history > li.even .history .list .tt { background:url(../images/inc/dot_tm1.png) no-repeat top 8px left; padding-left:10px; }
.sub_history_wrap .sub_history > li.odd .history .year .dot{ right:-25px}
.sub_history_wrap .sub_history > li.even .history .year .dot{ left:-25px}
.sub_history_wrap .sub_history > li.odd .history .list .month{ right:5px}
.sub_history_wrap .sub_history > li.even .history .list .month{ left:5px}
span.month { font-family: ns, sans-serif;font-size:1.063; vertical-align: bottom; font-weight:600; margin:0 20px 0 10px; color:#003f87; opacity:.9;}
.sub_history_wrap .sub_history > li .history:before{content:''; position:absolute; top:20px;  left:-42px; width:10px; height:10px; background:#003f87; /*transform:rotate(45deg);*/ border-radius:100%;}

/*시공사례*/
.col_wrap.fl_St{ *zoom:1;}
.col_wrap.fl_St:after{ content:""; display:block; clear:both;}
.col_wrap.fl_St > *{ float:left;}
.col_wrap.di_St{ text-align:center; white-space:nowrap; font-size:0;}
.col_wrap.di_St > *{ display:inline-block; *display:inline; zoom:1; white-space:normal; font-size:1rem;}
.col_wrap.sec1 > * { width:100%;}
.col_wrap.sec2 > * { width:50%;}
.col_wrap.sec3 > * { width:33.33%;}
.col_wrap.sec4 > * { width:25%;}
.col_wrap.sec5 > * { width:20%;}
.col_wrap.sec6 > * { width:16.66%;}
.col_wrap.sec7 > * { width:14.285%;}
.col_wrap.sec8 > * { width:12.5%;}
.col_wrap.sec9 > * { width:11.11%;}
.col_wrap.sec10 > *{ width:10%;}
.col_wrap.sec11 > *{ width:9%;}

.sub4_tab{border:1px solid #ccc; background:#fff; border-radius:0 0 10px 10px; padding:.6em; box-shadow:0 1px 2px rgba(0,0,0,.2); margin-bottom:1.5em;}
.sub4_tab .list > li{}
.sub4_tab .list > li > a{display:block; height:30px; line-height:30px; word-break:break-all; margin:0px 0 -1px -1px; border:1px solid #ddd; background:#f9f9f9; color:#222; transition:.3s; font-size:.938em; font-family:notokrR;}
.sub4_tab .list > li:hover > a{ color:#0c61b5;}
.sub4_tab .list > li.on > a{color:#fff; z-index:1; background:#003f87; position:relative; border-color:transparent;}
.sub4_tab .list > li.on > a:after{ content:"\e935"; font-family:xeicon!important; color:#fff; position:absolute; width:100%; text-align:center; top:-14px; left:0; font-size:11px;}

/*개인정보처리방침*/
.sub_agree_wrap{padding:30px; border-top:2px solid #333; border-bottom:1px solid #eee; border-right:1px solid #eee; border-left:1px solid #eee; font-size:0.938em; color:#888; font-family:'notokrR', sans-serif; margin-top:10px;}
.sub_agree_wrap p{padding:10px; line-height:1.5;}
.sub_agree_wrap strong{color:#555;}
.sub_agree_wrap .cont{overflow-y: scroll; height: 140px; overflow-y: scroll; }
.cont_check{text-align: right; margin: 10px 0 40px 0; font-size:0.875em; color:#555;}
.sub_agree_wrap .span{text-align: center; padding-left: 40px;}

/*sub tit*/
.sub_tit_wrap {margin-bottom:20px;}
.sub_tit_wrap .tit {font-size:1.375em; position:relative; padding-left:38px;}
.sub_tit_wrap .tit:before,
.sub_tit_wrap .tit:after{ content:""; position:absolute; top:9px; left:2px; width:15px; height:7px; transform:rotate(135deg);}
.sub_tit_wrap .tit:before{ background:#eca2a1}
.sub_tit_wrap .tit:after{ background:#316ab4; margin-left:.625em}

.sub_tit_wrap.mg_st {margin-top:1.8em; margin-bottom:10px;}

/*오시는길*/
.location_wrap .location_in {}
.location_wrap.b_st {margin-top:3em;}

.table_st{ width:100%; border-top:2px solid #333}
.table_st th,
.table_st td{ border:1px solid #ddd; height:2em; padding:.5em 1em; font-size:.875em; text-align:center}
.table_st th{ background:#f5f5f5}
.table_st td{ color:#666}

.table_st.location_st {margin-top:1em; border-top:2px solid #003f87;}
.table_st.location_st th {color:#333; height:2.8em; font-size:1em;}
.table_st.location_st th .xi {font-size:1.125em; padding-right:5px;}
.table_st.location_st td {height:2.8em; font-size:.938em;}

/**/
.prod_wrap .prod{ margin:0 -15px -15px 0}
.prod_wrap .prod > li{ width:25%}
.prod_wrap .prod > li .in{ border:1px solid #ddd; margin:0 15px 15px 0; transition:.3s; position:relative; background:#fff;}
.prod_wrap .prod > li .in .img_wrap{ position:relative;}
.prod_wrap .prod > li .in .img_wrap .layer{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,.5); opacity:0; transition:.3s}
.prod_wrap .prod > li .in .img_wrap .layer .xi{ position:absolute; width:40px; line-height:40px; left:50%; top:50%; margin:-20px 0 0 -20px; background:rgba(0,0,0,.8); text-align:center; border-radius:100%; color:#fff}
.prod_wrap .prod > li .in .img_wrap .layer .xi:before{ content:"\e97a"; font-family:xeicon!important}
.prod_wrap .prod > li .in .img_wrap:hover .layer{ opacity:1}

.prod_wrap .prod > li .in .tit_wrap{ text-align:center; border-top:1px solid #ddd; background:#f9f9f9; padding:.7em 0;} 
.prod_wrap .prod > li .in .tit_wrap .tit{font-size:1.063em; }

.prod_wrap .prod > li .in:hover .tit_wrap{ background:linear-gradient(to right,#0090d6, #003f87); color:#fff;}

.search_wrap {text-align:right; margin-bottom:1em;}
.search_wrap .page_search {}
.search_wrap .page_search .page_search_bt {height:2.5em; line-height:1em; font-size:.875em;}

/*제품*/
.prod_view_top  { border:1px solid #ccc; padding:1em; }
.img_wrap .small{ width:25%;}
.img_wrap .small > li .in{ display:block; border:2px solid #0c61b5; margin-top:0.5em; padding:1em; filter:alpha(opacity=50);opacity:0.5; transition:.3s}
.img_wrap .small > li:first-child .in{ margin-top:0}
.img_wrap .small > li.on .in{ filter:alpha(opacity=100);opacity:1}
.img_wrap .small.st1{ /*margin:-.5em 0 0 -.5em;*/ width:21.5%;}
.img_wrap .small.st1 > li{/* width:50%*/}
.img_wrap .small.st1 > li .in{/*margin:.5em 0 0 .5em; padding:0.3em;*/ padding:0;}

.img_wrap .big{ width:55%; /*padding-right:15%; margin-left:5%;*/  position:relative}
.img_wrap .big .in{/*padding:2em; border:1px solid #222;*/}
.img_wrap .big .btn{ position:absolute; left:0; bottom:0; width:100%; text-align:right}
.img_wrap .big .btn:before{ content:""; width:100%; height:1px; position: absolute; left:0; top:50%; background:#000}
.img_wrap .big .btn .more{ position:relative; display:inline-block; *display:inline; zoom:1; padding:0 3em; background:#000; line-height:4em; color:#ffcc00; margin-right:2em; transition:.3s}
.img_wrap .big .btn .more .xi{ font-size:1.625em}
.img_wrap .big .btn .more .tt{ font-size:1.25em; font-family:notokrR, sans-serif}
.img_wrap .big .btn .more:hover{ margin-right:0}
.img_wrap .big.st1{ width:68%; padding-right:0;}

.sub_pro_tw {border:1px solid #ccc; padding:1em 1.5em;}
.sub_pro_tw .tx {line-height:2; position:relative; padding-left:.5em;}
.sub_pro_tw .tx:before {position:absolute; content:""; width:3px; height:3px; left:0; top:12px; background:#2365ad; }

.sub_pro_img {border:1px solid #ccc; padding:2em 1.5em;}

/**/
.page_viewWrap{overflow:hidden;}
.page_viewWrap .slider_for  {float:left; width:80%;}


.page_viewWrap .slider_for .item{}
.page_viewWrap .slider_for .item .img_wrap{position:relative; /*width:70%;*/ margin:1em auto 0 auto; border:1px solid #ddd;}
.page_viewWrap .slider_for .item .img_wrap .resize{ background:#fff;}
/*.page_viewWrap .slider_for .item .img_wrap .resize img {width:100% !important;}*/

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


.page_viewWrap .page_viewB{ /*margin-top:1em;*/ position:relative; width:70%; margin:1em auto 1em auto; float:right; width:20%;}
.page_viewWrap .page_viewB .pro_tw {text-align:center; margin-bottom:1em;}
.page_viewWrap .page_viewB .pro_tw .pro_name {text-align:center; font-size:1.438em; color:#003f87; padding-bottom:5px;}
.page_viewWrap .page_viewB .pro_tw .pro_line {width:80px; height:2px; background:#003f87; margin:0 auto;}


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

.page_viewWrap .control_arrow{ position:absolute; bottom:-60px; left:50%; width:100%; text-align:center;}
.page_viewWrap .control_arrow li{ position:absolute; top:0; margin-top:-1.5em;}
.page_viewWrap .control_arrow li.prev{ left:-4em;}
.page_viewWrap .control_arrow li.next{ /*right:-4em;*/}
.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;}
.page_viewWrap .control_arrow li:hover .xi{ background:#222; border-color:#222; color:#fff;}

/**/
.greetings_top_w {text-align:center; padding:2em; box-shadow:0px 0px 20px rgba(0,0,0,0.1); border:1px solid #ddd; margin:0 0 2em 0; background:#f9f9f9;}
.greetings_top_w .tx {width:100%; max-width:600px; margin:0 auto; line-height:1.3; font-size:1.250em; color:#003f87;}

.greetings_bot_w .greetings_ul {overflow:hidden;}
.greetings_bot_w .greetings_ul > li {float:left;}
.greetings_bot_w .greetings_ul > li.left {width:54%;}
.greetings_bot_w .greetings_ul > li.right {width:45%;}
.greetings_bot_w .greetings_ul > li.right .greetings_in {margin-left:15%;}
.greetings_bot_w .greetings_ul > li .greetings_in {}
.greetings_bot_w .greetings_ul > li .greetings_in .tx {font-size:1em; color:#555; font-family:notokrR, sans-serif; line-height:1.5; padding-bottom:1.5em; letter-spacing:.1px; vertical-align:middle;}
.greetings_bot_w .greetings_ul > li .greetings_in .tx .col {color:#003f87; font-family:notokrM ,sans-serif; vertical-align:bottom;}
.greetings_bot_w .greetings_ul > li .greetings_in .tx .col2 {display:block; color:#003f87; font-family:notokrM;}
.greetings_bot_w .greetings_ul > li .greetings_in .tx.t1 {font-size:1.3em; font-family:notokrM, sans-serif; color:#222;}
.greetings_bot_w .greetings_ul > li .greetings_in .tx.t2 {padding-top:1em;}
.greetings_bot_w .greetings_ul > li .greetings_in .sign {text-align:right; padding-top:1em;}


/**/
.greet_w{ overflow:hidden;}
.greet_w .greet_img{ float:left; width:42%;}
.greet_w .greet_txt{ float:right; width:52.9%;}
.greet_w .top_t{color:#000; line-height:1.4;}
.greet_w .tit1{font-family:notokrR; font-size:1.8em;}
.greet_w .tit2{color:#003f87; font-size:1.3em; font-family:notokrM;}

.greet_w .mid_t{color:#333; font-size:1em; line-height:1.7; font-family:notokrM;}

.greet_w .mid_t .txt1{padding-bottom:10px; font-size:.938em;}
.greet_w .mid_t .txt1.ceo_t {text-align:right;}

.sign {text-align:right;}
.sign .ti {vertical-align:middle; color:#555;}
.sign .img {padding-left:5px; vertical-align:middle; display:block; padding-top:10px;}

/**/
.agree_wrap{ padding:.5em; font-size:.875em; line-height:1.5; border-top:2px solid #333; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; box-shadow:3px 4px 3px rgba(0,0,0,.2); padding:2em;}
 
/*이메일*/
.page_email{ letter-spacing:-1px;}
.page_email .email_top{ padding:20px 30px; background:#f9f9f9; border:1px solid #ddd; text-align:center; color:#111; font-weight:400; line-height:1.4;}
.page_email .email_con{}
.page_email .email_con .tit{ text-align:center; font-size:1.125em; color:#000; padding-top:1em;}
.page_email .email_con .con_wrap{ margin-top:40px;}
.page_email .email_con .con_wrap > dt{ margin-bottom:10px;}
.page_email .email_con .con_wrap > dt > span{ display:block; position:relative; padding-top:2px; padding-left:25px; color:#333;}
.page_email .email_con .con_wrap > dt > span:before{ content:"\eb1f"; position:absolute; top:0; left:0; width:20px; font-family:xeicon; font-size:1.250em;}
.page_email .email_con .con_wrap > dd{ margin-left:25px; font-size:0.938em; color:#666; font-weight:400; line-height:1.8;}