@charset "utf-8";
/* CSS Document */
body{ font-size:16px}
.box0{ margin:0 3%}
.box1{ width:75em; margin:0 auto}
.box2{ width:87.500em; margin:0 auto}
.box3{ width:113.750em; margin:0 auto}
.box4{ width:81.250em; margin:0 auto}
.section{ position:relative; overflow:hidden; background:#fff; background-repeat:no-repeat; background-position:center top;  background-size:cover}
.section .wrap_bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; background-size:cover}
.section .wrap_bg.st { opacity:0; transform:translateY(10em)}
.section.active .wrap_bg.st {opacity:1; transform:translateY(0); transition:1s; transition-delay:.25s}

.section .wrap_con{ position:relative; height:100%; display:flex; align-items:center; opacity:0; transform:translateY(10em)}
.section.active .wrap_con{opacity:1; transform:translateY(0); transition:1s; transition-delay:.25s}
.section.fix .wrap_con{ opacity:1; transform:translateY(0); transition:0; transition-delay:0}
.section.active .wrap_con .main_tit{opacity:1; transform:translateY(0); transition:1s; transition-delay:.25s}


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


#header{ position:fixed; left:0; top:0; width:100%; z-index:1000}
#header:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; background:#fff; opacity:0;}
#header .top_wrap{ height:5em;}
#header .logo{ position:relative; height:100%; box-sizing:border-box}
#header .logo > a{ display:block; position:relative; background-image:url(../images/inc/logo.png); background-repeat:no-repeat; background-position:left center; background-size:contain; width:15em; height:95%; top:3%}
#header .logo > a img{ max-height:100%}


/*#header .logo{ position:relative; height:100%; box-sizing:border-box}
#header .logo > a{ display:block; position:relative; background-image:url(../images/inc/logo.png); background-repeat:no-repeat; background-position:left center; background-size:contain; width:15em; height:95%; top:3%}
#header .logo > a img{ max-height:100%}*/

#header .gnb_wrap{ position:absolute; width:100%; left:0; top:0; box-sizing:border-box; padding:0 20em; text-align:center}
#header .gnb_wrap .gnb{ display:inline-flex; justify-content:center; margin:0 auto}
#header .gnb_wrap .gnb:before{ content:""; position:absolute; left:0; top:5em; width:100%; height:calc(100% - 5em); background:#fff; transform:scaleY(0); transform-origin:left top; transition:.5s; z-index:-1; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,.2)}
#header .gnb_wrap .gnb > li{ position:relative}
#header .gnb_wrap .gnb > li.fSt,
#header .gnb_wrap .gnb > li.m_member,
#header .gnb_wrap .gnb > li.m_mypage,
#header .gnb_wrap .gnb > li.m_guide {display:none;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; z-index:1; color:#fff; display:block; padding:0 1em; min-width:12em}
#header .gnb_wrap .gnb > li .dp1:after{content:""; position:absolute; bottom:0; width:0; margin-left:-1.5em; left:50%; height:3px; background:#043b89; transition:.3s;}
#header .gnb_wrap .gnb > li:hover .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ width:3em}
#header .gnb_wrap .gnb > li .dp1 .va{ padding-top:.25em; font-size:1.375em;}
#header .gnb_wrap .gnb > li:hover .dp1{ color:#043b89}
#header .gnb_wrap .gnb > li.on .dp1 {}
#header .gnb_wrap .gnb > li:hover .dp1:after{ transform:scaleX(1)}x
#header .gnb_wrap .gnb > li .dp1 .va{ font-size:1.25em; font-weight:500}
#header .gnb_wrap .gnb > li .dp2{ display:block; opacity:0; height:0; overflow:hidden}
#header .gnb_wrap .gnb > li .dp2 > li > a{ height:auto; padding:.75em 0; color:#5c5e5e}
#header .gnb_wrap .gnb > li .dp2 > li > a .va{font-size:.938em;}

#header .gnb_wrap .gnb > li .dp2 {border-right:1px solid #eee;}
#header .gnb_wrap .gnb > li:first-child .dp2 {border-left:1px solid #eee;}
#header .gnb_wrap .gnb > li .dp2 > li:hover > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ color:#043b89}
#header .gnb_wrap .gnb > li .dp3{ display:none}
#header .gnb_wrap:hover .gnb:before{transform:scaleY(1); transition:.3s; transition-delay:.1s}
#header .gnb_wrap:hover .gnb:after{ visibility:visible; transition-delay:.3s}
#header .gnb_wrap:hover .gnb > li .dp2{ opacity:1; height:calc(100% - 5em); overflow: visible; transition:.3s; transition-delay:.1s; padding:1em 0 2em 0}
#header .gnb_wrap  + .gnb_bg{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:-2; opacity:0; visibility:hidden}
#header .gnb_wrap:hover + .gnb_bg{opacity:1; visibility: visible; transition:.3s; transition-delay:.1s;}
#header .gnb_wrap .gnb > li:hover .dp1 .va{ color:#043b89}
#header .gnb_wrap .gnb > li:hover .dp2 {background:#f9f9f9}

#header .etc_wrap {z-index:999}
#header .etc_wrap .mem_wrap {}
#header .etc_wrap .mem_wrap .etc {}
#header .etc_wrap .mem_wrap .etc > li {}
#header .etc_wrap .mem_wrap .etc > li .in {color:#fff; display:block;}
#header .etc_wrap .mem_wrap .etc > li .in .xi {vertical-align:middle; display:inline-block; padding-right:3px; font-size:1em;}
#header .etc_wrap .mem_wrap .etc > li .in .tt {font-size:.938em; vertical-align:middle}
#header .etc_wrap .mem_wrap .etc > li .in .tt.st1 {border-radius:3em; border:1px solid #fff; padding:.2em 1.3em; font-size:.875em !important}
#header .etc_wrap .mem_wrap .etc > li:hover .in .tt {color:#043b89; transition:.3s;}

#header .etc_wrap .all_wrap{}
#header .etc_wrap .all_wrap .all_btn{ display:block; color:#fff; line-height:5em; width:5em; text-align:center; position:relative}
#header .etc_wrap .all_wrap .all_btn:before{ content:""; position:absolute; left:0; top:0; width:100%; height:0; background:#1f56a4; transition:.3s}
#header .etc_wrap .all_wrap .all_btn .xi{ font-size:3em; position:relative}

#header .etc_wrap .all_wrap:hover .all_btn,
#header .etc_wrap .all_wrap.on .all_btn{ color:#fff !important; }
#header .etc_wrap .all_wrap:hover .all_btn:before,
#header .etc_wrap .all_wrap.on .all_btn:before{ height:100%}
#header .etc_wrap .all_wrap.on .all_btn {line-height:4em;}
.scroll #header .etc_wrap .all_wrap .all_btn {line-height:4em;}

#header .etc_wrap .all_wrap .all{ position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; visibility:hidden; opacity:0; overflow-y:auto; transition:.3s; transform:scale(.5); z-index:10000}
#header .etc_wrap .all_wrap.on .all{ visibility:visible; opacity:1; transform:scale(1)}
#header .etc_wrap .all_wrap .all .close_btn{ position:absolute; top:1em; right:2em; width:3em; line-height:3em; text-align:center; opacity:.5; transition:.3s}
#header .etc_wrap .all_wrap .all .close_btn .xi{ font-size:3em}
#header .etc_wrap .all_wrap .all .close_btn:hover{ transform:rotate(90deg); opacity:1}
#header .etc_wrap .all_wrap .all .all_logo{ text-align:center; padding:3em 0}
#header .etc_wrap .all_wrap .all .all_logo img {width:15em;}
#header .etc_wrap .all_wrap .all .gnb a{ height:auto}
#header .etc_wrap .all_wrap .all .gnb{ justify-content:space-between; padding-bottom:5em}
#header .etc_wrap .all_wrap .all .gnb > li{ flex:0 1 24%}
#header .etc_wrap .all_wrap .all .gnb > li.fSt,
#header .etc_wrap .all_wrap .all .gnb > li.m_member,
#header .etc_wrap .all_wrap .all .gnb > li.m_mypage,
#header .etc_wrap .all_wrap .all .gnb > li.m_guide {display:none;}
#header .etc_wrap .all_wrap .all .gnb > li .dp2,
#header .etc_wrap .all_wrap .all .gnb > li .dp3{ display:block}
#header .etc_wrap .all_wrap .all .gnb > li .dp1{ border-top:5px solid #ddd; border-bottom:1px solid #aaa; height:5em; position:relative}
#header .etc_wrap .all_wrap .all .gnb > li .dp1:after{ content:""; position:absolute; left:0; top:-5px; width:0; height:5px; background:#043b89; transition:.3s}
#header .etc_wrap .all_wrap .all .gnb > li .dp1 .va{ font-size:1.25em; font-weight:700}
#header .etc_wrap .all_wrap .all .gnb > li:hover .dp1{ color:#043b89}
#header .etc_wrap .all_wrap .all .gnb > li:hover .dp1:after{ width:100%}
#header .etc_wrap .all_wrap .all .gnb > li .dp2{}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a{ padding:1em; border-bottom:1px solid #ddd; text-align:left; position:relative; padding-left:2em; font-size:.938em;}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a:after{ content:"\e913"; font-family:xeicon!important; position:absolute; left:0; top:1em; width:2em; text-align:center; color:#aaa}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a{ background:#f5f5f5; color:#043b89}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a:after{ color:#043b89}
#header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > .dp3{ background:#f9f9f9}
#header .etc_wrap .all_wrap .all .gnb > li .dp3{ padding:.5em 0; border-bottom:1px solid #ddd}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a{ padding:.25em .75em; text-align:left}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va{ font-size:.875em; color:#666}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va:before{ content:"- "; display:inline-block; padding-right:1em}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va{ text-decoration:underline; color:#333}
#header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va:before{ text-decoration:none}

#header .mem_wrap .etc > li .in {color:#fff; display:inline-block; width:5em;}
#header .mem_wrap .etc > li .in > * {vertical-align:middle !important; display:inline-block}
#header .mem_wrap .etc > li .in .xi {font-size:1em; padding-right:3px; }
#header .mem_wrap .etc > li .in .tt {font-size:.875em; font-family:score,sans-serif;}

#header:hover {background:#fff;}
#header.hide{ transform:translateY(-6em)}
.headerH,
#header .va_wrap{ height:5em}
.headerT{ padding-top:5em}

#header:hover:before {opacity:1; transition:.3s;}
#header:hover .gnb_wrap .gnb > li .dp1 .va {color:#5c5e5e}
#header:hover .etc_wrap .mem_wrap .etc > li .in {color:#5c5e5e}
#header:hover .etc_wrap .all_wrap .all_btn .xi {transition:.3s; color:#5c5e5e}
#header:hover .etc_wrap .mem_wrap .etc > li .in .tt.st1 {border:1px solid #5c5e5e;}
#header .etc_wrap .all_wrap .all_btn:hover {background:#043b89; transition:.3s;}
#header .etc_wrap .all_wrap .all_btn:hover .xi {color:#fff !important;}
#header:hover .logo > a{ background-image:url(../images/inc/logo.png); z-index:111 !important; }

#header.hide{ transform:translateY(-6em)}
#header.on .etc_wrap .all_wrap .all_btn:before{ height:100%}
#header.on:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff; opacity:.2}
#header.on:before{ opacity:1; height:100%; box-shadow:0 1px 5px rgba(0,0,0,.3); z-index:-1;}
#header.on .gnb_wrap .gnb > li .dp1{ color:#333}
#header.on .etc_wrap .lang .lang_btn{ border-color:#ccc; color:#666}
#header.on .logo > a{ background-image:url(../images/inc/logo.png)}
#header.on .mem_wrap .etc > li .in{ color:#333}

.dp1_member #header .gnb_wrap .gnb > li .dp1 {color:#111;}
.dp1_member #header .etc_wrap .mem_wrap .etc > li .in {color:#222;}
.dp1_member #header .etc_wrap .all_wrap .all_btn {color:#222;}

.sub #header {background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.3);}
.sub #header .gnb_wrap .gnb > li .dp1 {color:#111;}
.sub #header .etc_wrap .mem_wrap .etc > li .in {color:#111;}
.sub #header .etc_wrap .all_wrap .all_btn {color:#111;}

/**/
.main_con {padding-top:180px;}
.main_con.st {padding-top:0;}

.mainSlider{ position:relative}
.mainSlider .el{ height:100vh; position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.3,1.3); transition-delay:1s}
.mainSlider .el .box1{ position:relative}
.mainSlider .slogan{ position:relative; top:30vh; color:#fff; text-align:center}
.mainSlider .slogan .icon{ font-size:4em; transform:translateY(1em); opacity:0}
.mainSlider .slogan .t1{ font-size:1.8em; font-weight:700;letter-spacing:.3em; word-spacing:2px; transform:translateY(1em); opacity:0}
.mainSlider .slogan .t1 strong {display:block; font-size:1.8em; padding-top:.2em;}
.mainSlider .slogan .t2{ font-size:1.5em;  line-height:1.6; font-weight:500; word-spacing:2px;  transform:translateY(2em); opacity:0; margin-top:3em; letter-spacing:-1px;}
.mainSlider .slogan .line{ position:relative; margin:2em 0}
.mainSlider .slogan .line:before,
.mainSlider .slogan .line:after{ content:""; position:absolute; height:2px; background:#fff; width:0; opacity:0}
.mainSlider .slogan .line:before{ left:50%;}
.mainSlider .slogan .line:after{ right:50%;}
.mainSlider .el.swiper-slide-active .bg,
.mainSlider .el.swiper-slide-duplicate-active .bg{transform:scale(1,1); transition:3s; transition-delay:0; transition-timing-function:ease-in-out}
.mainSlider .el.swiper-slide-active .slogan .icon{ transform:translateY(0); opacity:1; transition:1s}
.mainSlider .el.swiper-slide-active .slogan .t1{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}
.mainSlider .el.swiper-slide-active .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:1s}
.mainSlider .el.swiper-slide-active .slogan .line:before,
.mainSlider .el.swiper-slide-active .slogan .line:after{ width:2em; opacity:1; transition:2s; transition-delay:.5s}

.mainControl{ position:absolute; left:0; bottom:2em; width:100%; z-index:100}
.mainControl .box0{ position:relative}
.mainControl .mainSlider-btn{ width:3.25em; cursor:pointer; line-height:2.5em; color:#fff; outline:none; text-align:center}
.mainControl .mainSlider-btn .xi{ font-size:1.5em}
.mainControl .mainSlider-btn:hover{ color:#fff; opacity:1}
.mainControl .mainProgress{ text-align:center; margin-right:1em}
.mainControl .mainPauseWrap{ position:absolute; left:0; width:4.375em; text-align:center; top:0}
.mainControl .mainPauseWrap .mainSlider-btn{ line-height:3.25em}
.mainControl .mainPauseWrap .mainSlider-btn .xi{ font-size:1.5em;}
.mainControl .mainPauseWrap .mainSlider-play{ display:none}
.mainControl .mainPauseWrap.pause .mainSlider-pause{ display:none}
.mainControl .mainPauseWrap.pause .mainSlider-play{ display:block; opacity:1; color:#fff}
.mainControl .mainSlider-pagination{ margin-top:2em}
.mainControl .mainSlider-pagination span{ width:1em; height:1em; background:#fff; border-radius:0; font-size:.625em; opacity:.7; margin:0 .25em; transition:.3s}
.mainControl .mainSlider-pagination span.swiper-pagination-bullet-active{ width:7em; opacity:1;}

#scrollAni{ position: absolute; left:50%; width:6em; margin-left:-3em; text-align:center; bottom:2em; opacity:1; z-index:100; text-decoration:none; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite}
#scrollAni .xi{ vertical-align:middle}
#scrollAni .xi-mouse{font-size:3em; color:#fff; margin-right:-7px}
#scrollAni .xi-scroll{font-size:2em; color:#fff; margin-left:-7px}
#scrollAni .tt{ display:block; color:#fff; font-size:.75em; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; letter-spacing:0}
#scrollAni.hide{ opacity:0; z-index:-1}

@keyframes downAni{
60% {margin-bottom:0}
80% {margin-bottom:-1em}
100% {margin-bottom:0}
}

.main_tit{ text-align:center; position:relative; z-index:999; padding-top:3em; display:none;}
.main_tit.st {padding-top:4em}
.main_tit .t1{ display:inline-block; font-weight:400; color:#777; letter-spacing:.125em; border:1px solid #777; border-top:none; border-bottom:none; padding:.075em 1.5em; margin-bottom:1.5em; font-size:.813em; font-family:'score'}

.mainNav_wrap{ position:fixed; z-index:999; right:0; top:0; height:100%}
#mainNav > li *{transition:.3s}
#mainNav > li > a{ display:block; text-align:right; margin:10px 0}
#mainNav > li > a .line,
#mainNav > li > a .tt{ display:inline-block; *display:inline; zoom:1; vertical-align:middle}
#mainNav > li > a .line{ height:4px; width:4px; border-radius:50%; background:#555; margin-left:.5em; margin-right:2em; opacity:.5}
#mainNav > li > a .line .xi {opacity:0;}
#mainNav > li > a .tt{ letter-spacing:1px; font-family: 'score'; color:#ccc; font-size:.6em; opacity:0; visibility:hidden; display:none}
#mainNav > li:hover> a .line,
#mainNav > li.on > a .line{ width:1.8em; line-height:1.8em; height:1.8em; border-radius:50%; opacity:1; text-align:center;}
#mainNav > li.on > a .line .xi {opacity:1; font-size:.938em; color:#fff;}
#mainNav > li:hover > a .tt,
#mainNav > li.on > a .tt{ opacity:1; visibility:visible; transition:.3s}
#mainNav > li:hover> a .line .xi {opacity:1; visibility:visible; font-size:.938em; color:#fff; text-align:center;}
#mainNav > li:hover:not(.on) > a .tt{ opacity:1}
.color #mainNav > li > a .line{ background:#333}
.color #mainNav > li > a .tt{ color:#333}

.main_service{width:100%; height:100%;}
.main_service > li{box-sizing:border-box; flex-basis:25%; position:relative; overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.main_service > li > a{ text-align:center; box-sizing:border-box; position:relative; z-index:11; height:100%; transform: scale(1.0,1.0); transition:transform 1300ms ease-in-out; }
.main_service > li > a .t1{ display:block; font-weight:700; font-size:1.6em; color:#fff; letter-spacing:.15em;}
.main_service > li > a .t2{ display:block; margin-top:1em; font-weight: 300; opacity:.85; font-size:1.125em; color:#fff; font-size:1em; letter-spacing:-.2px; display:none}
.main_service > li > a .t3{ color:#fff; font-size:.875em; line-height:1.5; display:block}
.main_service > li > a .line {background:#fff; display:inline-block; width:30px; height:1px; margin:1.5em auto;}
.main_service > li.bg1 {background-image:url(../new/main2/images/temp/con4_bg1.jpg)}
.main_service > li.bg2 {background-image:url(../new/main2/images/temp/con4_bg2.jpg)}
.main_service > li.bg3 {background-image:url(../new/main2/images/temp/con4_bg3.jpg)}
.main_service > li.bg4 {background-image:url(../new/main2/images/temp/con4_bg4.jpg)}

.main_service > li:after{ content:''; width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; background:#114a76; opacity:.2; transition:0.3s; z-index:10;}
.main_service > li:nth-child(2n+1):after{ background:#000; opacity:.2;}
.main_service > li:hover:after{opacity:.6; background:#043b89} 
.main_service > li:hover .info{transition:.3s;}
.main_service > li:hover .more{ opacity:1;}
.main_service > li:hover > a { transform: scale(1.15,1.15) rotate(0.01deg);}

/**/
.con2_In {margin-top:1em;}
.con2_In.st2 {width:100%;}
.con2_In .con2_list {margin:2em 0 0 -1.5em;}
.con2_In .con2_list > li {flex:1;}
.con2_In .con2_list > li .inner {margin:0 0 0 1.5em; border:1px solid rgba(255,255,255,.4); text-align:center; color:#fff; padding:3em 2em; position:relative;}
.con2_In .con2_list > li .inner:after { content:""; position:absolute; z-index:2; left:0; right:0; top:0; bottom:0; background:#043b89; box-shadow:2px 2px .75em rgba(0,0,0,.4); transform:scale(1); opacity:0; visibility:hidden; transition:.2s;}
.con2_In .con2_list > li .inner .con {z-index:3; position:relative;}
.con2_In .con2_list > li .inner .icon {}
.con2_In .con2_list > li .inner .t1 {font-size:1.7em; font-weight:500; padding:1.3em 0;}
.con2_In .con2_list > li .inner .t2.st2 {font-size:.938em; line-height:1.4; opacity:.9; color: #1f56a4;}
.con2_In .con2_list > li .inner:hover .t2 {color : #fff;}
.con2_In .con2_list > li .inner:hover:after{ transform:scale(1.12); opacity:1; visibility:visible;} 
.btn01{ color:#fff !important; font-size:0.938em; display:inline-block; margin-top:3em;}
.btn01.color{ color:#333 !important}
.btn01.color .xi{ border-color:#333 !important}
.btn01.color:hover .xi{ border-color:#043b89 !important}
.btn01 .xi{width:40px; height:40px; text-align:center; line-height:40px; border:1px solid #fff; border-radius:50%; margin-left:1.3em;  transition:0.3s;}
.btn01:hover{ color:#043b89}
.btn01:hover .xi{ margin-left:2em; background:#043b89; border-color:#043b89; color:#fff;}
.main3_main_tit{ /*padding:12em 0 2em 0;*/ padding:0 0 2em 0; text-align:center; font-family:score,sans-serif;}
.main3_main_tit .t1{ font-weight:600; color:#333; font-size:2.5em; padding-bottom:.3em; letter-spacing:-.2px; }
.main3_main_tit .t2{ color:#666; font-size:1.125em}
.main3_main_tit .t1.st {color:#fff !important;} 
.main3_main_tit .t2.st {color:#fff !important;}

.main_con.st2 {padding-top:160px;} 
.main_con.st2 .con2_In {margin-top:0;}
.main_con.st2 .con2_In .con2_list {margin:0 0 0 -1.5em;} 
.main_con.st2 .con2_In .con2_list > li {flex:1 1 33.333%; }
.main_con.st2 .con2_In .con2_list > li .inner { margin:0 0 1em 1.5em; padding:1em 2em 1em 2em; box-shadow:2px 2px .75em rgba(0,0,0,.4); color:#333; text-align: inherit; border:none;}
.main_con.st2 .con2_In .con2_list > li .inner .t1 {padding:0;}
.main_con.st2 .con2_In .con2_list > li .inner:hover {color:#fff;}
.main_con.st2 .con2_In .con2_list > li .inner.bg1 { background:url(../images/sub/prod01.jpg) no-repeat center ;}
.main_con.st2 .con2_In .con2_list > li .inner.bg2 { background:url(../images/sub/prod02.jpg) no-repeat center ;}
.main_con.st2 .con2_In .con2_list > li .inner.bg3 { background:url(../images/sub/prod03.jpg) no-repeat center ;}
.main_con.st2 .con2_In .con2_list > li .inner.bg4 { background:url(../images/sub/prod04.jpg) no-repeat center ;} 
.main_con.st2 .con2_In .con2_list > li .inner.bg5 { background:url(../images/sub/prod05.jpg) no-repeat center ;}
.main_con.st2 .con2_In .con2_list > li .inner:after { content:""; position:absolute; z-index:2; left:0; right:0; top:0; bottom:0; background:#043b89;  transition:.2s;} 
.main_con.st2 .con2_In .con2_list > li .inner:hover:after{ transform: none; opacity:0.6; visibility:visible; transition:.2s; color:#fff}
.btnSt2{ color:#333 !important; font-size:0.938em; display:inline-block; margin-top:13em;}
.btnSt2.color{ color:#333 !important}
.btnSt2.color .xi{ border-color:#333 !important}
.btnSt2.color:hover .xi{ border-color:#fff !important}
.btnSt2 .xi{width:40px; height:40px; text-align:center; line-height:40px; border:1px solid #333; border-radius:50%; margin-left:1.3em;  transition:0.3s;}
.main_con.st2 .con2_In .con2_list > li .inner:hover .btnSt2{ color:#fff !important;}
.main_con.st2 .con2_In .con2_list > li .inner:hover .btnSt2 .xi{ margin-left:2em; background:#ddd; border-color:#ddd; color:#333;}

/**/
.main_brand{ }
.main_brand .prodBg{ position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/temp/con5_bg_n.jpg); background-size:cover;}
.main_brand .left{width:50%; position:relative; text-align:center;}
/*.main_brand .right{ flex:1; min-width:0; margin:3% 4% 0 2%;}*/
.main_brand .left .in{ position:relative; /*padding-left:25%;*/}

.main_brand .left .in .p1{font-size:4em; font-weight:600; opacity:.2; color:#fff;}
.main_brand .left .in .p1 .st1{display:block; margin-top:-10px; color:#fff; font-weight:400;}
.main_brand .left .in .p11 {font-size:3.250em; font-weight:700; color:#fff; margin-top:-.9em;}
.main_brand .left .in .p2{color:#fff; font-size:1.125em; margin-top:1.8em; line-height:1.6; font-weight:300; letter-spacing:-.5px;}
.main_brand .left .in .in_btn {border:1px solid #fff; padding:.8em 1.5em; margin-top:2em; border-radius:2em; display:inline-block}
.main_brand .left .in .in_btn .tt {color:#fff; text-align:center; font-size:.938em;}
.main_brand .left .in .in_btn:hover {background:rgba(0,0,0,.8); transition:.3s; border:1px solid #333;}

.main_brand .right{width:50%; position:relative; text-align:center;}
.main_brand .right .in{ position:relative;/* padding-right:25%;*/}
.main_brand .right .in .p1{font-size:4em; font-weight:600; opacity:.2; color:#fff;}
.main_brand .right .in .p1 .st1{display:block; margin-top:-10px; color:#fff; font-weight:400;}
.main_brand .right .in .p11 {font-size:3.250em; font-weight:700; color:#fff; margin-top:-.9em;}
.main_brand .right .in .p2{color:#fff; font-size:1.125em; margin-top:1.8em; line-height:1.6; font-weight:300; letter-spacing:-.5px;}
.main_brand .right .in .in_btn {border:1px solid #fff; padding:.8em 1.5em; margin-top:2em; border-radius:2em; display:inline-block}
.main_brand .right .in .in_btn .tt {color:#fff; text-align:center; font-size:.938em;}
.main_brand .right .in .in_btn:hover {background:rgba(0,0,0,.8); transition:.3s; border:1px solid #333;}


/*.main_brand .right .in .p_tit{font-size:2.5em; font-weight:600; color:#000;}

.main_brand .right .in .tab_idx{margin-top:22px;}
.main_brand .right .in .tab_idx > li{display:inline-block; border:1px solid #ccc; border-radius:20px; padding:.7em 1.5em; color:#666; cursor:pointer;}
.main_brand .right .in .tab_idx > li.on{background:#c60e3b; border-color:#c60e3b; color:#fff;}*/

.sub_v_slide .in_s_list{ margin-right:-20px; padding-bottom:20px; margin-top:2em;}
.sub_v_slide .in_s_list > li{ width:50%;}
.sub_v_slide .in_s_list > li .in{ display:block; transition:.3s; box-shadow:0 0 15px rgba(0,0,0,0.15); margin:0 10px; transition:.3s; background:#fff; padding:2em 1.5em 3em 1.5em}
.sub_v_slide .in_s_list > li .in .type {width:180px; line-height:35px; text-align:center; background:#043c89; margin-bottom:30px; border-radius:30px;}
.sub_v_slide .in_s_list > li .in .type .tt {color:#fff; font-size:.938em;}
.sub_v_slide .in_s_list > li .in .date {font-size:.875em; color:#666;}
.sub_v_slide .in_s_list > li .in .t1 {color:#333; font-size:1.063em; font-weight:500; padding:.5em 0 2em 0;}
.sub_v_slide .in_s_list > li .in .t2 {color:#535353; font-size:.875em; line-height:1.5;}

.bus_control{padding-left:25%; padding-top:5em;}
.bus_control .paging{}
.bus_control .paging .swiper-pagination-bullet{ display:inline-block; width:30px; height:5px; background:#ccc; border-radius:0; opacity:1;}
.bus_control .paging .swiper-pagination-bullet.swiper-pagination-bullet-active{ background:#3c4968;}
.bus_control .btn{ text-align:right; margin-bottom:10px; margin-left:10px;}
.bus_control .btn .inn{ width:2em; line-height:2em; font-size:1.25em; border:1px solid #ddd; color:#888; text-align:center; margin:0 2px; cursor:pointer; transition:.3s;}
.bus_control .btn .inn:hover{ border-color:#0077c0; color:#0077c0;}

.btn02{ color:#333 !important; font-size:.8758em; display:inline-block; margin-top:2em; }
.btn02 .xi{width:23px; height:23px; text-align:center; line-height:23px; border:1px solid #ccc; border-radius:50%; margin-left:.5em;  transition:0.3s;}
.btn02:hover{ color:#1bc377}
.btn02:hover .xi{ margin-left:2em; background:#043c89; border-color:#043c89; color:#fff;}

.main_tit2.sec4St{ text-align:center}
.main_tit2.sec4St .t1{ font-weight:600; color:#333; font-size:2.5em; padding-bottom:.3em; }
.main_tit2.sec4St .t2{ color:#666; font-size:1.125em}

/**/
#footer{background:#444; position:relative;}
#footer .gotop.top_st{ position:absolute; z-index:1;text-align:center; background:rgba(255,255,255,.6); color:#111; box-shadow:0 0 1em .125em rgba(0,0,0,.3); z-index:100; width:2em; line-height:2em; height:2em; bottom:2.5em; right:7.5em;}
#footer .gotop.top_st .xi{ font-size:1em}
#footer .gotop.top_st:hover{ background:#043b89; color:#fff; transition:.3s; border-radius:25px; transform:rotate(180deg);}
#footer .gotop.top_st:hover .xi {transform:rotate(180deg)!important}
#footer .gotop.top_st,
#footer .gotop.top_st:before{ transition: all .5s ease-out !important}

#footer .menu_wrap .box1{ position:relative}
#footer .menu_wrap .gnb_wrap{}
#footer .menu_wrap .gnb_wrap .gnb > li{ width:16.66%; position:relative}
#footer .menu_wrap .gnb_wrap .gnb > li.m_mypage,
#footer .menu_wrap .gnb_wrap .gnb > li.m_member {display:none;}
#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; opacity:0;}
#footer .menu_wrap .gnb_wrap .gnb > li .dp1{ padding:2em 1em .5em 1em; color:#fff; text-align:left}
#footer .menu_wrap .gnb_wrap .gnb > li .dp1 .va {font-size:.813em;}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2{ padding-bottom:3rem; display:block}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li{ display:block}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em 1em; text-align:left; color:#fff; opacity:.6; transition:.3s; position:relative}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a:before {position:absolute; content:""; width:5px; height:1px; background:#fff; opacity:.6; left:13px; top:15px;}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:.688em; font-weight:300; padding-left:.5em;}
#footer .menu_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover{ opacity:1}
#footer .menu_wrap .etc_wrap{ width:16.7%; position:absolute; right:0; top:0; height:100%}
#footer .menu_wrap .etc_wrap:before,
#footer .menu_wrap .etc_wrap:after{ content:""; position:absolute; top:0; width:1px; height:100%; background:#fff; opacity:.1}
#footer .menu_wrap .etc_wrap:after{ right:0}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt {width:35% !important;}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in {padding:1.250em}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in .t1 {padding-bottom:1em;}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in .info {}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in .info > li {color:#fff;}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in .info > li .tt {font-size:.813em; color:#fff; opacity:.6; font-weight:300;}
#footer .menu_wrap .gnb_wrap .gnb > li.fSt .in .info > li.copy {font-size:.625em; font-weight:300; padding-top:1em; opacity:.3; letter-spacing:1px;} 

/**/
#contents{}
#contents .doc{ padding:4em 0 9em 0}

#contents .subtop_wrap {position:relative; background:#000}
#contents .subtop_wrap .sub_visual{ height:25em; position:relative; overflow:hidden}
#contents .subtop_wrap .sub_visual .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
#contents .subtop_wrap .sub_visual .wrap_in{ position:relative; height:100%}
#contents .subtop_wrap .sub_visual .wrap_in .sub_slogan{ flex:1 1 auto;}
#contents .subtop_wrap .sub_visual .wrap_in .sub_menu{ flex:0 0 auto; background:#fafafa; border-bottom:1px solid #ddd}

#contents .sub_slogan{ color:#fff; transform:translateY(2em); opacity:0}
#contents .sub_slogan .in{ width:100%; text-align:center}
#contents .sub_slogan .t1{ font-size:2em;}
#contents .sub_slogan .line {display:block; width:0; height:.1em; margin:1.25em auto; background:#fff; transition:1s; transition-delay:.5s}
#contents .sub_slogan .t2 {font-size:.938em; letter-spacing:7px;}

.load #contents .sub_slogan .line{ width:2.5em}
.load #contents .sub_slogan{ transform:translateY(0); opacity:1; transition:1s}

#contents .sub_menu{ padding-bottom:0}
#contents .sub_menu .gnb{ flex-wrap: wrap}
#contents .sub_menu .gnb > li{ width:100%}
#contents .sub_menu .gnb > li .dp2{justify-content:center;overflow:hidden;}
#contents .sub_menu .gnb > li .dp2 > li{ flex:1 1 50%; max-width:50%}
#contents .sub_menu .gnb > li .dp2 > li > a{ display:block; height:4.25em; color:#000; position:relative;}
#contents .sub_menu .gnb > li .dp2 > li > a:after{ content:""; position:absolute; left:-1px; top:25%; height:50%; width:1px; background:#ddd}
#contents .sub_menu .gnb > li .dp2 > li > a .va{font-size:1em}
#contents .sub_menu .gnb > li .dp2 > li:hover > a{ color:#043b89}
#contents .sub_menu .gnb > li .dp2 > li.on{ z-index:1;}
#contents .sub_menu .gnb > li .dp2 > li.on > a{ color:#fff; background:rgba(4,59,137,.7); /*border-bottom:2px solid #043b89;*/}
#contents .sub_menu .gnb > li .dp2 > li.on > a:after{ background:#fff; width:100%; height:3px; top:-3px; left:0}

#contents .con_page_top{ padding:2.250em 0; border-bottom:1px solid #eee;}
#contents .con_page_top .con_tit{ position:relative;}
#contents .con_page_top .con_tit .tit{ font-size:1.8em; color:#222; font-weight:500;}

#contents .con_page_top .con_nav{ padding-right:.25em;}
#contents .con_page_top .con_nav > li{ color:#888;}
#contents .con_page_top .con_nav > li:before{ content:"\e93e"; font-family:xeicon; display:inline-block; vertical-align:middle; padding:0 .5em; font-size:.750em; color:#999;}
#contents .con_page_top .con_nav > li:first-child:before{ visibility:hidden;}
#contents .con_page_top .con_nav > li:last-child{ color:#333;}
#contents .con_page_top .con_nav > li > *{ display:inline-block;}
#contents .con_page_top .con_nav > li .home{ font-size:.813em; color:#555;}
#contents .con_page_top .con_nav > li .tt{ font-size:.813em;}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

/**/
.page_Sec1 {margin-top:1em !important;}
.page_Sec2 {margin-top:2em !important;}
.page_Sec3 {margin-top:3em !important;}
.page_Sec4 {margin-top:4em !important;}
.page_Sec5 {margin-top:5em !important;}
.page_Sec6 {margin-top:6em !important;}
.page_Sec7 {margin-top:7em !important;}
.page_Sec8 {margin-top:8em !important;}
.page_Sec9 {margin-top:9em !important;}


/*greeting*/ 
.box5 { width:1000px; margin:0 auto}
.greeting_Wrap {margin-top:4em;}
.greeting_Wrap .top_tw {margin-bottom:3em;}
.greeting_Wrap .top_tw .hi { line-height:1.35; font-size:1.8em; color:#333; font-weight:500;}
.greeting_Wrap .col {color:#292c6f; font-weight:700; vertical-align:baseline; font-size:1.7em;}
.greeting_Wrap .con2 {flex:1 1 0%; min-width:0; position:relative;}
.greeting_Wrap .con2:before {content:"";position:absolute;left: -300px;top: 220px;width: 27em;height: .7em;box-sizing:border-box;background:#8faadc;border-right: 5em solid #ffd966;border-left: 12em solid #292c6f;transform: rotate(90deg);}
.greeting_Wrap .con2 > p { font-size:1.2em; color:#555; line-height:1.6; padding-bottom:2em;}
.greeting_Wrap .con2 .tt2 {margin-bottom: 1.5em; padding-bottom:0em;}
.greeting_Wrap .con2 .tt2.st2 {margin-top:8.5em;}
.greeting_Wrap .con2 .t2{ font-size:1.125em; margin-top:3em; text-align:right}
.greeting_Wrap .con2 .t2 .name{ font-size:1.188em; margin-left:1em; color:#222;}
.greeting_Wrap .imgw {margin-left:4em; flex:0 0 auto; position:relative; margin-top:43px;}
.greeting_Wrap .imgw:before{ content:""; position:absolute; right:0; top:0; width:8em; height:8em; transform:translate(40%,85%); border-radius:50%; background:#292c6f}
.greeting_Wrap .imgw:after{ content:""; position:absolute; right:0; top:0; width:3em; height:3em; transform:translate(200%,120%); border-radius:50%; background:#292c6fc2}
.greeting_Wrap .imgw img{ position:relative; width:17em; margin-top:11em;}

.greeting_Wrap.st2 .imgw:before{ width:0;}
.greeting_Wrap.st2 .imgw:after{ width:0;}
.greeting_Wrap.st2 .con2 {margin-top:2em;}
.greeting_Wrap.st2 .con2 > p {font-size:1.125em;}
.greeting_Wrap.st2 .imgw img {width:inherit;}


/*sub_product*/
.page_tab .tab,
.page_tab .tab > li,
.page_tab .tab > li > a{ }
.page_tab {text-align:center;} 
.page_tab .tab{margin-bottom:5em;}
.page_tab .tab > li {width:25%;}
.page_tab .tab > li > a{padding:1.3em 1em; border:1px solid #ddd; margin:.5em 0 0 .5em; color:#666; transition:.3s; display:block; }
.page_tab .tab > li > a > .tt {font-size:1em; letter-spacing:.1px;}
.page_tab .tab > li > a > *{ display:inline-block; *display:inline; zoom:1;}
.page_tab .tab > li .icon{ margin-left:.5em; color:#292c6f;}
.page_tab .tab > li .icon:before{ content:"\e937";}
.page_tab .tab > li:hover > a,
.page_tab .tab > li.on > a{box-shadow: 0 0 1em 0.125em rgba(0,0,0,.1);color: #fff;/* border-color:#292c6f; */background: rgba(4,59,137,.7);}
.page_tab .tab > li:hover .icon,
.page_tab .tab > li.on .icon{ color:#fff;}

.page_tab.performance_st .tab {margin:-.5em 0 0 -.5em; margin-bottom:2em;}
.page_tab.performance_st .tab > li {width:10%;}
.page_tab.performance_st .tab > li > a {padding:1em;}

.page_tab .tab.sEC1 > li {width:100%;}
.page_tab .tab.sEC3 > li {width:33.333%;}
.page_tab .tab.sEC4 > li {width:25%;}
.page_tab .tab.sEC5 > li {width:20%;}

/*view*/
/*.prod_detail_wrap{ background:#f2f5f8; padding:15px 0;}*/
.prod_detail_wrap .inner{ *zoom:1;}
.prod_detail_wrap .inner:after{ content:""; display:block; clear:both;}
.prod_detail_wrap .inner .slide_wrap{ float:left; width:40%; position:relative;}
.prod_detail_wrap .inner .info_wrap { float:right; width:60%;}
.prod_detail_wrap .inner .slide_wrap .vm_tt{ max-width:100%;}
.prod_detail_wrap .inner .slide_wrap img{ display:inline-block; *display:inline; zoom:1;}

.prod_detail_wrap .inner .slide_wrap .item .img{ background:#fff; border:1px solid #ddd;}
.prod_detail_wrap .inner .slide_wrap .prod_slide .item .img{ padding:120px; box-sizing:border-box; text-align:center;}
.prod_detail_wrap .inner .slide_wrap .prod_thumb{ margin:0 -2px; margin-top:5px;}
.prod_detail_wrap .inner .slide_wrap .prod_thumb .item .img{ margin:0 4px; padding:55px; cursor:pointer; text-align:center;}
.prod_detail_wrap .inner .slide_wrap .prod_thumb .slick-current .img{ border-color:#292c6f;}
.prod_detail_wrap .inner .slide_wrap .control_box{ position:absolute; top:50%; left:0; right:0;}
.prod_detail_wrap .inner .slide_wrap .control_arrow > li{ position:absolute; top:0; margin-top:-80px;}
.prod_detail_wrap .inner .slide_wrap .control_arrow > li .xi{ width:40px; height:40px; line-height:40px; text-align:center; background:#fff; border:1px solid #ccc; border-radius:100%; color:#777; cursor:pointer;}
.prod_detail_wrap .inner .slide_wrap .control_arrow .prev{ left:-50px;}
.prod_detail_wrap .inner .slide_wrap .control_arrow .next{ right:-50px;}
.prod_detail_wrap .inner .slide_wrap .control_arrow > li:hover .xi{ background:#292c6f; border-color:#292c6f; color:#fff; transition:.3s;}

.prod_detail_wrap .info_wrap .in{ padding:30px 0 0 130px;}
.prod_detail_wrap .info_wrap .prod_tit{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px dashed #ccc;}
.prod_detail_wrap .info_wrap .prod_tit .t1{ display:inline-block;*display:inline;zoom:1; vertical-align:middle; color:#1b5b8f; font-weight:700; font-size:.938em;}
.prod_detail_wrap .info_wrap .prod_tit .t1 .xi {vertical-align:middle; color:#1b5b8f; padding-right:1px;}
.prod_detail_wrap .info_wrap .prod_tit .t2{ display:block; font-size:2em; font-weight:700;}

.prod_detail_wrap .info_wrap .prod_info{}
.info_wrap .noti {font-size:.9em; color:#999; margin-top:3em;}
.prod_detail_wrap .info_wrap .prod_info .info{ position:relative; padding:10px 0 10px 10px;  font-weight:400;}
.prod_detail_wrap .info_wrap .prod_info .info .tit{ position:absolute; top:10px; left:0; padding-left:10px; }
.prod_detail_wrap .info_wrap .prod_info .info .tit:before{ content:""; position:absolute; left:0; top:55%; margin-top:-1px; width:4px; height:2px; background:#777;}
.prod_detail_wrap .info_wrap .prod_info .info .txt{ color:#666;}

.prod_detail_wrap .info_wrap .prod_btn{ margin-top:65px; text-align: center;}
.prod_detail_wrap .info_wrap .prod_btn > li{ display:inline-block; *display:inline; zoom:1; vertical-align:top; width:33.33%;}
.prod_detail_wrap .info_wrap .prod_btn .btn{ width:100%; height:50px; border:1px solid transparent; overflow:hidden; font-size:.875em;}
.prod_detail_wrap .info_wrap .prod_btn .btn.c1{ background:#292c6f; color:#fff;}
.prod_detail_wrap .info_wrap .prod_btn .btn.c2{ background:#38393F; color:#fff;}
.prod_detail_wrap .info_wrap .prod_btn .btn.c3{ background:#ffffff; border-color:#aaa;}
.prod_detail_wrap .info_wrap .prod_btn .btn i{ vertical-align:middle;}
.prod_detail_wrap .info_wrap .prod_btn .btn .xi{ padding-right:1px;}

.hover_st1{ position:relative; transition:.3s}
.hover_st1:after{content:"\e93f"; font-family:xeicon!important; position:absolute; right:-20px; top:50%; margin-top:-8px; transition:.3s}
.hover_st1:hover{ padding-right:20px;}
.hover_st1:hover:after{ right:10px}


.pro_detail_con {margin-top:3em;}
.pro_detail_con .pro_view_tab_st{padding-right:1px; border-bottom:1px solid #ccc;}
.pro_detail_con .pro_view_tab_st > li{width:25%;}
.pro_detail_con .pro_view_tab_st > li > a{vertical-align:middle; background:#f8f8f8; height:3.5em; color:#2c476b; border:1px solid #ccc; margin-right:-1px; position:relative; padding:0 5em; font-size:.938em; font-weight:400; margin-bottom:-1px; border-bottom:none;}
.pro_detail_con .pro_view_tab_st > li > a:after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#fff; display:none; z-index:1}
.pro_detail_con .pro_view_tab_st > li:hover > a{ color:#111}
.pro_detail_con .pro_view_tab_st > li > a .xi {vertical-align:middle; padding-right:2px; color:#2c476b;}

.pro_detail_con .pro_view_tab_st > li.on > a{ background:#fff; border:2px solid #292c6f; color:#111; z-index:1; border-bottom:none;}
.pro_detail_con .pro_view_tab_st > li.on > a:after{ display:block}

.pro_detail_con .pro_view_tab_st > li.btn{ width:auto !important}
.pro_detail_con .pro_view_tab_st > li.btn > a{ margin-left:1em; background:#8c655d; color:#fff; padding:0 1.5em}
.pro_detail_con .pro_view_tab_st > li.btn > a .xi{ margin-top:-.125em}

.pro_detail_con .prdo_view_con .prod_name_w {text-align:center; padding:2em 0; }
.pro_detail_con .prdo_view_con .prod_name_w .t1 {font-size:1.688em; font-weight:700; padding-bottom:10px;}
.pro_detail_con .prdo_view_con .prod_name_w .t2 {font-size:.938em; letter-spacing:.1px; color:#2c476b; font-weight:400;}

.pro_detail_con .prdo_view_con {border:1px solid #ccc;}
.pro_detail_con .prdo_view_con .prod_view_middle{}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail{ padding:0 1px 0 0}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li{ width:25%}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li.w1{ width:100%}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in{ margin:0 -1px 0 0;  padding:30px; text-align:center;}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .tit{ padding-bottom:5px}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .tit .xi{ width:28px; line-height:28px; text-align:center; background:#1b5b8f; color:#fff; font-size:1.063em; border-radius:100%; margin-right:5px}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .tit .tt{ font-size:.938em; color:#111; letter-spacing:.1px; display:block; padding:7px 0 10px 0;}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .con{ }
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .con .con_tit{ font-size:.938em; color:#3399CC; position:relative; margin:15px 0 5px 0;}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .con .con_tit:first-child{ margin-top:0}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .con .con_tit:before{ content:""; position:absolute; width:6px; height:6px; border-radius:100%; left:-10px; top:8px; background:#3399CC}
.pro_detail_con .prdo_view_con .prod_view_middle .prod_detail > li .in.detail .con .tt{font-size:1.063em; font-weight:700; color:#444;}

.pro_detail_con .tab_in {}
.pro_detail_con .prod_view_edit{padding:50px 30px; font-size:1em; color:#222; border:1px solid #ccc; border-top:none;  font-family:'ns','ng',sans-serif !important ; line-height:1.5;}
.pro_con_in {border:1px solid #ccc; border-top:none;}

.pro_detail_con .prod_view_edit table {table-layout:fixed; }
.pro_detail_con .prod_view_edit table th {border:1px solid #ccc; padding:5px; font-size:inherit !important;}
.pro_detail_con .prod_view_edit table td {border:1px solid #ccc; padding:5px; font-size:inherit !important;}

/**/
.board_gallery.cert{}
.board_gallery{ margin:-3em 0 0 -2em}
.board_gallery > li{ width:50%}
.board_gallery > li .in{ margin:3em 0 0 2em; position:relative; background:#fff; cursor:pointer; transition:.3s}
.board_gallery > li .in .img_wrap{ overflow:hidden}
.board_gallery > li .in .img_wrap .img{ transition:.5s}
.board_gallery > li .in .info_wrap{ padding:1em; text-align:center; transition:.3s}
.board_gallery > li .in .info_wrap .t1{ color:#111; font-size:.95em}
.board_gallery > li .in .info_wrap .t2{ color:#111; font-size:1.125em; font-weight:500}
.board_gallery > li .in:hover{ border-color:#aaa}
.board_gallery > li .in:hover .img_wrap .img{ transform:scale(1.1)}
.board_gallery.cert > li{ width:25%}
.board_gallery.cert > li .in{ border:1px solid #ddd;}
.board_gallery.cert > li .in:before{ content:""; position:absolute; width:100%; height:100%; z-index:-1; right:-.5em; bottom:-.5em; background:#000; opacity:.1}
.board_gallery.cert > li .in .img_wrap{ padding:1em}
.board_gallery.cert > li .in .info_wrap{ opacity:.8; border-top:1px solid #aaa; height:2.5em;}
.board_gallery.cert > li .in:hover .info_wrap{ background:#f7f7f7; opacity:1}
.pop_cert_v{ height:calc(96vh - 10em)} 
 
.layer_more_wrap{ position:relative}
.layer_more{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.3s}
.layer_more .icon{ font-size:1.5em; width:2em; line-height:2em; text-align:center; border-radius:50%; background:#fff; color:#292c6f; transform:translateY(3em); transition:.3s}
.layer_more.zoom .icon:before{ content:"\e97b"}
.layer_more_wrap:hover .layer_more{ opacity:1; visibility:visible}
.layer_more_wrap:hover .layer_more .icon{ transform:translateY(0)}
/**/
.prod_wrap{ margin:-2em 0 0 -2em}
.prod_wrap > li{ width:33.33%}
/*.prod_wrap.st2 > li {width:25%;}*/
.prod_wrap.st3 > li {width:100%;}
.prod_wrap > li .in{ margin:2em 0 0 2em; border:1px solid #ddd; padding:1em 1em 2em 1em; text-align:center;}
/*.prod_wrap.st2 > li .in {padding:1em 1em 1em 1em;}*/
.prod_wrap.st3 > li .in {padding:1em 1em 1em 1em; }
.prod_wrap > li .in .img img{transform:scale(.9,.9); transition:.3s}
.prod_wrap.st3 > li .in .resize {padding-bottom:41%;}
.prod_wrap > li .in .tit{ font-size:1.5em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; padding:1em 0 .5em 0; border-top:1px solid #ddd;}
.prod_wrap.st2 > li .in .tit {padding:.5em 0 .5em 0;}
.prod_wrap > li .in .more{ position:relative; width:1.5em; height:1.5em; line-height:1.7em; margin:.5em 0}
.prod_wrap > li .in .more:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; background:#f5f5f5; transform:rotate(45deg); transition:.3s}
.prod_wrap > li .in .more:after{ content:"\e9c5"; position:relative}
.prod_wrap > li .in .info > li{ margin-top:1em; height: 2.5em;}
.prod_wrap > li .in .info .t1{ float:left; text-align:right; width:35%; color:#000; font-size:.938em}
/*.prod_wrap > li .in .info .t1:after{ content:" :"; margin-left:1em;}*/
.prod_wrap > li .in .info .tt{  color:#777; font-size:.938em;} 
.prod_wrap > li .in:hover .img img{transform:scale(1,1)}
.prod_wrap > li .in:hover .more{ color:#fff}
.prod_wrap > li .in:hover .more:before{transform:rotate(135deg); background:#003f87; border-color:transparent;}

.prod_wrap > li .in .img .prodLogo{ position:absolute; top:0; right:0; z-index:1111111;}
/**/
.va_wrap2 img {vertical-align: middle; display: inline-block;*display: inline;zoom: 1; max-width: 100%;max-height: 100%;}
.va2 {display: inline-block; *display: inline; zoom: 1;vertical-align: middle;width: 0;height: 100%;}
.va_wrap2 {text-align:center; white-space: nowrap;}
.layerImg_bg{ width: 100%; height: 100%; background: #000; position: fixed; z-index: 9999; left: 0; top: 0; display: none; filter: alpha(opacity=70); opacity: 0.9;}
.layer_img{ /*background:#fff; border:5px solid #002654;*/ /*padding:5em 0; *//*width:500px !important; left:50% !important; top:50% !important; margin-left:-250px !important;*/}
.layerImg_bg .btn{position:absolute; right:30px; top:30px; font-size:2em; color:#fff; cursor:pointer;}