@charset "utf-8";
/* CSS Document */
/*body { font-size:16px;}
.box0{ width:1680px; max-width:94%; margin:0 auto;}
.box1{ width:1200px; max-width:94%; margin:0 auto;}
.box0 .box1{ max-width:100%;}*/
body { font-size:16px;}
.box0{ margin:0 5%;}
.box1{ width:1200px; max-width:94%; margin:0 auto;}
.box2{ padding:0 3%;}
.box3{ padding:0 10%;}

.txt_red{color:#6d3289; vertical-align:baseline;}
.txt_up{text-transform:uppercase; vertical-align:baseline;}

.pcHide{ display:none !important;}
.moHide{}

/*header*/
/*#header{ position:fixed; z-index:999; top:0; left:0; right:0;}
#header .top_wrap .logo,
#header .gnb_wrap .gnb > li,
#header .gnb_wrap .gnb > li .dp1,
#header .all_wrap{ height:5.25em;}
#header .top_wrap .logo,
#header .all_wrap{ width:7.5em;}
#header .line{ position:absolute; left:0; top:0; background:#fff; opacity:.3;}
#header .lineB{ width:100%; height:1px; top:5.25em; margin-top:-1px;}
#header .lineL{ width:1px; height:100%;}

#header .top_wrap .logo .img{ display:block;}
#header .top_wrap .logo .img img{ width:18.125em;}
#header .top_wrap .logo .imgA{ display:block;}
#header .top_wrap .logo .imgB{ display:none;}

#header .gnb_wrap{}
#header .gnb_wrap .gnb > li{ overflow:hidden;}
#header .gnb_wrap .gnb > li .dp1{ position:relative; padding:0 2em; color:#fff;}
#header .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; bottom:0; left:50%; margin-left:0; width:0; height:3px; background:#fff; opacity:0; transition:.2s;}
#header .gnb_wrap .gnb > li .dp1 .tt{ font-size:1.250em; font-weight:500;}
#header .gnb_wrap .gnb > li .dp2{ display:block; padding:1.75em 0 2em 0;}
#header .gnb_wrap .gnb > li .dp2 > li > a{ padding:.5em .25em; color:#333;}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:.938em;}
#header .gnb_wrap .gnb > li .dp2 > li > a:hover .tt{ text-decoration:underline;}
#header .gnb_wrap .gnb > li:hover{ background:#f7f7f7; transition:.6s;}
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ color:#3e55a7;}
#header .gnb_wrap .gnb > li:hover .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ margin-left:-40%; width:80%; opacity:1;}

#header .all_wrap{ position:relative;}
#header .all_wrap .all_btn{}
#header .all_wrap .all_btn .tt{ font-size:.938em; color:#fff; text-transform:uppercase;}
#header .all_wrap .all_btn .btn{ position:relative; display:block; width:1.875em; height:1.375em; margin-left:2.5em; text-align:right;}
#header .all_wrap .all_btn .btn .ham,
#header .all_wrap .all_btn .btn .ham:before,
#header .all_wrap .all_btn .btn .ham:after { display:inline-block; width:100%; height:2px; background:#fff; transition:.2s;}
#header .all_wrap .all_btn .btn .ham:before,
#header .all_wrap .all_btn .btn .ham:after { content:""; position:absolute; right:0;}
#header .all_wrap .all_btn .btn .ham:before{ top:50%;}
#header .all_wrap .all_btn .btn .ham:after { top:100%;}
#header .all_wrap .all_btn .btn:hover .ham{ width:90%;}
#header .all_wrap .all_btn .btn:hover .ham:before{ width:70%;}
#header .all_wrap .all_btn .btn:hover .ham:after { width:110%;}
#header .all_wrap.on .all_btn .tt{ display:none;}
#header .all_wrap.on .all_btn .btn{ width:3.5em; height:3.5em; z-index:99;}
#header .all_wrap.on .all_btn .btn .ham{ background:transparent; transition:0s;}
#header .all_wrap.on .all_btn .btn .ham:before,
#header .all_wrap.on .all_btn .btn .ham:after { width:100% !important; top:50% !important; background:#fff;}
#header .all_wrap.on .all_btn .btn .ham:before{ transform:rotate(45deg);}
#header .all_wrap.on .all_btn .btn .ham:after { transform:rotate(-45deg);}

#header .all_wrap .all{ position:fixed; top:0; bottom:0; left:0; right:0; opacity:0; visibility:hidden;}
#header .all_wrap .all .wrap_bg{ position:absolute; top:0; bottom:0; left:0; right:0; background:#000; opacity:.4; cursor:pointer;}
#header .all_wrap .all .wrap_in{ position:absolute; top:0; right:0; width:40%; height:100%; background:#1f2c5c; box-shadow:0 -3px .5em rgba(0,0,0,.6); transform:translateX(100%);}
#header .all_wrap .all .all_gnb{ height:inherit; box-sizing:border-box;}
#header .all_wrap .all .all_gnb .flex{ display:block; text-align:left !important;}
#header .all_wrap .all .gnb{ padding:7em 10em 7em 6em;}
#header .all_wrap .all .gnb > li a{ color:#fff;}
#header .all_wrap .all .gnb > li{ display:flex; flex-wrap:wrap; padding:1.5em 0; border-top:1px solid rgba(255,255,255,.2);}
#header .all_wrap .all .gnb > li:first-child{ border-top-width:0;}
#header .all_wrap .all .gnb > li .dp1{ width:14em;}
#header .all_wrap .all .gnb > li .dp1 .tt{ font-size:1.750em; font-weight:500; letter-spacing:-1px;}
#header .all_wrap .all .gnb > li .dp2{ flex:1;}
#header .all_wrap .all .gnb > li .dp2 > li > a{ padding:.25em 0;}
#header .all_wrap .all .gnb > li .dp2 > li > a:before{ content:""; display:inline-block; vertical-align:middle; width:0; height:1px; background:#fff; visibility:hidden; transition:.2s;}
#header .all_wrap .all .gnb > li .dp2 > li > a .tt{ display:inline-block;}
#header .all_wrap .all .gnb > li .dp2 > li:hover > a:before,
#header .all_wrap .all .gnb > li .dp2 > li.on > a:before{ width:2em; margin-right:1em; visibility:visible;}
#header .all_wrap.on .all{ opacity:1; visibility:visible;}
#header .all_wrap.on .all .wrap_in{ transform:translateX(0); transition:.4s;}

#header.gnbOpen{ box-shadow:3px 0 5px rgba(0,0,0,.2);}
#header.gnbOpen .gnb_wrap .gnb > li{ height:auto !important; overflow:visible;}

#header.active{ background:#fff;}
#header.active .line{ background:#000; opacity:.1;}
#header.active .top_wrap .logo .imgA{ display:none;}
#header.active .top_wrap .logo .imgB{ display:block;}
#header.active .gnb_wrap .gnb > li .dp1{ color:#111;}
#header.active .gnb_wrap .gnb > li .dp1:after{ background:#6d3289;}
#header.active .gnb_wrap .gnb > li:hover .dp1,
#header.active .gnb_wrap .gnb > li.on .dp1{ color:#3e55a7;}
#header.active .all_wrap .all_btn .tt{ color:#111;}
#header.active .all_wrap:not(.on) .all_btn .btn .ham,
#header.active .all_wrap:not(.on) .all_btn .btn .ham:before,
#header.active .all_wrap:not(.on) .all_btn .btn .ham:after { background:#111;}

#header.main_active{ background:#fff;}
#header.main_active .line{ background:#000; opacity:.1;}
#header.main_active .top_wrap .logo .imgA{ display:none;}
#header.main_active .top_wrap .logo .imgB{ display:block;}
#header.main_active .gnb_wrap .gnb > li .dp1{ color:#111;}
#header.main_active .gnb_wrap .gnb > li .dp1:after{ background:#3e55a7;}
#header.main_active .gnb_wrap .gnb > li:hover .dp1,
#header.main_active .gnb_wrap .gnb > li.on .dp1{ color:#3e55a7;}
#header.main_active .all_wrap .all_btn .tt{ color:#111;}
#header.main_active .all_wrap:not(.on) .all_btn .btn .ham,
#header.main_active .all_wrap:not(.on) .all_btn .btn .ham:before,
#header.main_active .all_wrap:not(.on) .all_btn .btn .ham:after { background:#111;}

footer
#footer{ background:#202937;}
#footer .menu_wrap{ border-bottom:1px solid rgba(255,255,255,.2);}
#footer .menu_wrap .menu{ height:6.875em;}
#footer .menu_wrap .menu > li .in{ display:block; position:relative; padding:0 1.5em; color:#fff;}
#footer .menu_wrap .menu > li .in:after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:.75em; background:#fff; opacity:.2;}
#footer .menu_wrap .menu > li.home .in{ padding-left:0;}
#footer .menu_wrap .menu > li.home .in:after,
#footer .menu_wrap .menu > li:last-child .in:after{ display:none;}
#footer .menu_wrap .menu > li .in .xi{ font-size:1.375em;}
#footer .menu_wrap .menu > li .in .tt{ font-size:1.063em;}
#footer .menu_wrap .menu > li .in:hover .tt{ text-decoration:underline;}

#footer .info_wrap{ padding:1.75em 0 1.5em 0;}
#footer .info_wrap .info{ flex:1;}
#footer .info_wrap .info .list > li.tit{ flex:1 1 100%;}
#footer .info_wrap .info .list > li{ padding:.375em 2.125em .375em 0;}
#footer .info_wrap .info .list > li .tt{ font-size:.938em; color:#fff; vertical-align:baseline;}
#footer .info_wrap .info .list > li a[href]:hover{ text-decoration:underline;}
#footer .info_wrap .info .copy{ margin-top:2.375em;}
#footer .info_wrap .info .copy .tt{ font-size:.688em; color:#fff; text-transform:uppercase; opacity:.4;}

#footer .info_wrap .family{ position:relative;}
#footer .info_wrap .family .btn{ height:3.125em; padding:0 .5em; border-bottom:2px solid #fff; color:#fff;}
#footer .info_wrap .family .btn .tt{ font-size:.938em;}
#footer .info_wrap .family .btn .icon{ font-size:.938em; margin-left:6em;}
#footer .info_wrap .family .btn .icon:before{ content:"\e944";}
#footer .info_wrap .family .list_wrap{ position:absolute; bottom:100%; left:0; right:0; padding:1em 1em; max-height:20em; background:#202937; border:1px solid #0d1118; box-shadow:2px 2px 3px rgba(0,0,0,.15); display:none;}
#footer .info_wrap .family .list > li .in{ display:block; padding:.25em 0; color:#fff;}
#footer .info_wrap .family .list > li .in .tt{ font-size:.813em;}
#footer .info_wrap .family .list > li .in:hover .tt{ text-decoration:underline;}
#footer .info_wrap .family.on .btn .icon:before{ content:"\e941";}
#footer .info_wrap .family.on .list_wrap{ display:block;}

#footer .goTop{ position:fixed; z-index:99; bottom:-2em; right:1.5em; width:4em; height:4em; background:#fff; border:5px solid #ddd; color:#fc0700; opacity:0; visibility:hidden; transition:.2s;}
#footer .goTop .tt{ display:block; font-size:.688em; font-weight:700;}
#footer .goTop:hover{ background:#3e55a7; border-color:#3e55a7; color:#fff;}
.scroll #footer .goTop{ bottom:2em; opacity:1; visibility:visible;}*/

/*header*/
#header{ position: fixed; left:0; top:0; width:100%; z-index:1000; background:#fff}
#header .top_wrap{ position:relative}
#header .top_wrap,
#header .top_wrap .va_wrap{ height:5.5em}
.headerT{ padding-top:5.5em !important;}
#header .cw{ display:none}

#header .logo{ width:9.5em;}

#header .gnb_wrap{ margin-left:auto; margin-right:2vw}
#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{/*display:block;*/ padding:0 2vw; position:relative; transition:.3s; height:5.5em;}
#header .gnb_wrap .gnb > li .dp1:after{ content:""; position:absolute; left:50%; top:0; width:1px; height:0; background:#6d3289}
#header .gnb_wrap .gnb > li .dp1 .va{ position:relative; z-index:1; font-size:1.125em; font-weight:500;}
#header .gnb_wrap .gnb > li .dp2{ position:absolute; left:50%; margin-left:-5.5rem; width:11rem; opacity:0; visibility:hidden; border:1px solid #ddd;  background:#fff; flex-direction:column;}
#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 #999;}
#header .gnb_wrap .gnb > li .dp2 > li:first-child > a{ border-top:none}
#header .gnb_wrap .gnb > li .dp2 > li > a .va{ font-size:.938em; position:relative;}
#header .gnb_wrap .gnb > li:hover .dp1,
#header .gnb_wrap .gnb > li.on .dp1{ color:#6d3289; }
#header .gnb_wrap .gnb > li.on .dp1:after{ height:1.5em}
#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:#6d3289}
#header .gnb_wrap .gnb > li .dp2:after{ content:""; position:absolute; left:0; top:-3px; width:0; height:3px; background:#6d3289; 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 > li.m_guide{ display:none;}

.sub #header{ position:relative;}
.scroll #header{ position:fixed;}


#header .all_wrap .all_btn .va{font-size: 1.5em;}
#header .all_wrap .all{ position: fixed; z-index:1; right:0; top:0; width:100%; height:50vh; 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:5em 0 0; box-sizing:border-box;}
#header .all_wrap.on .all{ opacity:1; visibility:visible}
#header .all_wrap.on .all .in{ top:0}
#header .all_wrap .gnb > li{ flex: 20%; position:relative; box-sizing:border-box; padding:0 .3em; margin-bottom:2.5em;}
#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:#6d3289; width:0;}
#header .all_wrap .gnb > li:hover:after { width:96%;}
#header .all_wrap .gnb > li .dp1{ height:70px; font-size:1.250em; color:#000;}
#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:200px;  color:#000; display:block;}
#header .all_wrap .gnb > li .dp2 .va_wrap{ height:inherit;}
#header .all_wrap .gnb > li .dp2 > li{ padding:.5em 1.5em; vertical-align: top; zoom: 1; display:block;}
#header .all_wrap .gnb > li .dp2 > li > a{ position:relative; font-size:.938em; transition:.2s; text-align: left; /*padding-left:10px;*/}
/*#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:hover > a{ color:#6d3289;}
#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:3.5em; font-size:1.8em; transition:.3s; color: #bbb;}
#header .all_wrap .tit_wrap .allClose:hover{ color:#6d3289;}

.mainScroll{ position:absolute; left:50%; bottom:0;  z-index:1000}
.mainScroll .box0{ position:relative}
.mainScroll .line{ display:block; width:1px; height:4em; background:#fff}
.mainScroll .tt{ color:#fff; word-spacing:2px; position:absolute; left:.5em; top:.25em; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite}
.mainScroll .tt > i{ font-size:.75em}
@keyframes downAni{
70% {margin-top:0}
90% {margin-top:.5em}
100% {margin-top:0}
}

.mainNav{ position:fixed; left:1.5%; top:0; height:100%; z-index:999}
.mainNav .list > li > a{ display:block; width:1em; height:1em; border:1px solid #111; margin:1em auto; font-size:.5em; transition:.3s}
.fp-viewing-0 .mainNav .list > li > a{border-color:#fff;}
.fp-viewing-3 .mainNav .list > li > a{border-color:#fff;}
.mainNav .list > li.on > a{ width:1px; border:none; height:10em; background:#6d3289}

.mainSlider{}
.mainSlider .el{ height:91vh; position:relative}
.mainSlider .el .slogan{ position:absolute; left:0; top:0%; padding:20vh 0 0 6em; color:#fff}
.mainSlider .el .slogan .t1{ font-size:1.25em; letter-spacing:.5em; opacity:0; transform:translateX(10%)}
.mainSlider .el .slogan .t2{ font-weight:700; margin:.25em 0; opacity:0; transform:translateX(10%); display:inline-block; position:relative; padding:0 0 1em 0}
.mainSlider .el .slogan .t2 > i{ font-size:3em;}
.mainSlider .el .slogan .t2:after{ content:""; position:absolute; left:-6em; bottom:0; width:calc(100% + 6em); padding-right:1em; height:1px; background:#fff; opacity:0; transform:scaleX(0); transform-origin:left top}
.mainSlider .el .slogan .t3{ font-size:1.313em; margin-top:1em; line-height:2; opacity:0; transform:translateY(20%)}
.mainSlider .el.swiper-slide-active .slogan .t1{ transition:1s; opacity:1; transform:translateX(0)}
.mainSlider .el.swiper-slide-active .slogan .t2{ transition:1s; opacity:1; transform:translateX(0)}
.mainSlider .el.swiper-slide-active .slogan .t2:after{ transition:2s; opacity:.5; transform:scaleX(1); transition-delay:.5s}
.mainSlider .el.swiper-slide-active .slogan .t3{ transition:1s; opacity:1; transform:translateX(0); transition-delay:1s}

#section0 > div{ position:relative}
#section0 > div .control_wrap{ position:absolute; left:3%; bottom:5em; width:100%; z-index:10; color:#fff}
#section0 > div .control_wrap .wrap_in{}
#section0 > div .control_wrap .paging{ margin-right:1em}
#section0 > div .control_wrap .paging > span{ background:none; width:2.5em; font-weight:700; font-size:1.25em; position:relative; height:2em; margin:0; opacity:.5; margin-right:1rem;}
#section0 > div .control_wrap .paging > span:after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#fff; transition:1s}
#section0 > div .control_wrap .paging > span.swiper-pagination-bullet-active{ opacity:1}
#section0 > div .control_wrap .paging > span.swiper-pagination-bullet-active:after{ width:100%}
#section0 > div .control_wrap .btn{ width:2em; text-align:center; line-height:2em; cursor:pointer}
#section0 > div .control_wrap .btn.nav{ width:2.5em; opacity:.5}
#section0 > div .control_wrap .btn.nav:hover{ opacity:1}
#section0 > div .control_wrap .visualSliderPauseWrap{ margin-left:1em; position:relative}
#section0 > div .control_wrap .visualSliderPauseWrap .visualSlider-pause{}
#section0 > div .control_wrap .visualSliderPauseWrap .visualSlider-play{ display:none}
#section0 > div .control_wrap .visualSliderPauseWrap .visualSlider-play .xi{ margin-left:.125em}
#section0 > div .control_wrap .visualSliderPauseWrap.pause .visualSlider-pause{ display:none}
#section0 > div .control_wrap .visualSliderPauseWrap.pause .visualSlider-play{ display:block; background:#fff; border-radius:50%; color:#6d3289}

.main_tit{ margin:0 0 1em 0}
.main_tit .t1{ font-weight:800; font-size:2em; color:#6d3289}
#section3 .main_tit .t1{color:#fff;}
.main_tit .t2{ font-size:1em; color:#666; margin-top:1em; line-height:1.8; letter-spacing:.2px;}
.main_tit .more{ padding:.5em 2em; background:#6d3289; color:#fff; margin-top:2em}

.main_bg_wrap{ padding:3em 0}

.main_business > li{ width:50%}
.main_business > li > .in{ background:#000}
.main_business > li > .in .resize{ padding-bottom:38%}
.main_business > li > .in .bg{ opacity:.9; background-position:center bottom; /*filter:grayscale(40%) brightness(.5);*/ transition:.3s;}
.main_business > li > .in .bg:after{content:''; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.3); transition:.3s;}
.main_business > li:hover > .in .bg{filter:none;}
.main_business > li:hover > .in .bg:after{background:rgba(0,0,0,0);}
.main_business > li > .in .info{ display:block; position:relative; color:#fff; padding:5em 3em 3em;}
.main_business > li > .in .info .t1{ display:block; font-weight:700; font-size:1.5em}
.main_business > li > .in .info .t2{ display:block;margin-top:1em}
.main_business > li > .in .info .more{ margin-top:2em;}
.main_business > li > .in .info .more:before{content:"\e917"; font-size:1.5em}
.main_business > li.search > .in{ background:#fff}
.main_business > li.search > .in .info {}
.main_business > li.search > .in .info .t1{ color:#6d3289}
.main_business > li.search > .in .info .t2{ color:#666}
.main_business > li.search > .in .inp_wrap{ position:relative; margin:1em 0}
.main_business > li.search > .in .inp_wrap .inp{ border:1px solid #ddd; padding:1em; padding-right:4.5em; box-sizing:border-box; width:100%; color: #000;}
.main_business > li.search > .in .inp_wrap .btn{ position:absolute; right:0; top:0; width:4em; height:100%; text-align:center; color:#fff; background:#111; border:none}
.main_business > li.search > .in .etc{ margin-top: 2em}
.main_business > li.search > .in .etc .btn{ background:#ed1c24; color:#fff; padding:.5em 2em}
.main_business > li.search > .in .etc .btn .arrow{ font-size:1em; margin-left:1em}
.main_business > li.st1 > .in .bg{ background-position: center bottom; opacity: .95;}
.main_business > li.st1 > .in .info{color:#061f41;}
.main_business > li.st1 > .in .info .more{color:#586481;}

.main_wrap{ padding:7.5em 0 1em 0; position:relative}
.main_wrap .bg_wrap{ position:absolute; left:-7.5%; top:0; width:100%; height:100vh; background-color:#f5f5f5; width:105vw}
.main_wrap .bg_wrap ~ *{ position:relative}

#section2 .main_wrap{ padding:12em 0 1em 0;}
#section3 .main_wrap{ padding:13em 0 1em 0;}
#section4 .main_wrap{ padding:11em 0 1em 0;}

.main_csm{ margin:-2em 0 0 -2em}
.main_csm > li{ width:33.33%}
.main_csm > li .in{ display:block; margin:2em 0 0 2em; cursor:pointer;}
.main_csm > li .in .img_wrap{}
.main_csm > li .in .con_wrap{ display:block; padding:1.5em 0}
.main_csm > li .in .con_wrap .t1{ display:block; font-size:1.375em; font-weight:700; margin-bottom:1em}
.main_csm > li .in .con_wrap .t2{ font-size:1em; color:#666; line-height:1.5em; height:7.5em; overflow:hidden; letter-spacing:.1px;}
.main_csm > li .in .con_wrap .more{}
.main_csm > li .in .con_wrap .more .xi{ margin-left:1em; font-size:1em; color:#6d3289;}
.main_csm > li .in .con_wrap .more .xi:before{ content:"\e917"}

.main_company .con_wrap{ flex:1 1 1%}
.main_company .link > li{ width:50%; background:#fff;}
.main_company .link > li > a{ display:block; padding:1.5em 1em 1.2em; margin:-1px 0 0 -1px; border:1px solid #ddd; position:relative; text-align:center}
.main_company .link > li > a .icon{ display:block; font-size:2.5em; color:#ccc;}
.main_company .link > li > a .t1{ display:block; margin-top:.7em; font-weight:700; font-size:1.125em;}
.main_company .vod_wrap{ width:55%; max-width:800px; margin-left:5em; position:relative;/* text-align: center;*/}
.main_company .vod_wrap .img .tit{ position:absolute; left:0; top:0; width:100%; box-sizing:border-box; padding:1em; color:#fff; font-size:1.125em; font-weight:700}
.main_company .vod_wrap .img .btnPlay{ position:absolute; left:50%; top:50%; width:2em; line-height:2em; border-radius:50%; background:#6d3289; color:#fff; transform:translate(-50%,-50%); font-size:2em; text-align:center; box-shadow:0 0 1em rgba(0,0,0,.2)}
.main_company .vod_wrap .vod{ width:100%; height:auto;}

.scrollst{ overflow:hidden}

.loading_st{position:fixed; left:0; top:0; width:100%; height:100%; z-index:1001; text-align:center; transition:.3s}
.loading_st .xi:before{ content:"\ec34"; font-size:3em; color:#00a3dd}
.load .loading_st{ display:none}

.swiper-wrapper.center{ justify-content:center}
.slide_wrap{ position:relative}
.swiper-pagination.st1{ bottom:1em}
.swiper-pagination.st1 span{ position:relative; width:1.5em; height:.25em; border-radius:0; background:#333; opacity:.5; transition:.3s}
.swiper-pagination.st1 span.swiper-pagination-bullet-active{ opacity:1; width:3em}

.fadeAni{ animation-name: fadeAni; animation-duration: 2s; animation-iteration-count: infinite}
@keyframes fadeAni{
30% {opacity:0}
50% {opacity:1}
}
.fadeAni:hover{animation-name:none;}

.scrollAni{ visibility:hidden; opacity:0}
.scrollAni.on{ visibility:visible; opacity:1; transition:.7s; transition-timing-function:ease-in;}
.scrollAni.fade{ opacity:0}
.scrollAni.fade.on{ opacity:1}
.scrollAni.moveL{ transform:translateX(-20%); }
.scrollAni.moveL.on{ transform:translateX(0); }
.scrollAni.moveR{ transform:translateX(20%)}
.scrollAni.moveR.on{ transform:translateX(0)}
.scrollAni.moveT{ transform:translateY(20%)}
.scrollAni.moveT.on{ transform:translateY(0)}
.scrollAni.moveB{ transform:translateY(-20%)}
.scrollAni.moveB.on{ transform:translateY(0)}
.scrollAni.scale{ transform:scale(0)}
.scrollAni.scale.on{ transform:scale(1)}
.scrollAni.scaleX{ transform:scaleX(0); transform-origin:left top}
.scrollAni.scaleX.on{ transform:scaleX(1)}
.scrollAni.scaleX.right{transform-origin:right top}
.scrollAni.scaleY{ transform:scaleY(0); transform-origin:left top}
.scrollAni.scaleY.on{ transform:scaleY(1)}
.scrollAni.rotate{}
.scrollAni.rotate.on{ transform:rotate(180deg)}
.scrollAni.delay.on:nth-child(1){ transition-delay:.3s}
.scrollAni.delay.on:nth-child(2){ transition-delay:.6s}
.scrollAni.delay.on:nth-child(3){ transition-delay:.9s}
.scrollAni.delay.on:nth-child(4){ transition-delay:1.2s}
.scrollAni.delay.on:nth-child(5){ transition-delay:1.5s}
.section.fix .scrollAni{ transition:1s; transition-delay:.3s; transform:translateY(0); opacity:1}

.main .inq_dv{height:100%;}
.main .inq_dv .pd_dv{background:#f1f1f1; border:1px solid #ccc; padding:1em 1.5em; position:relative; height:100%; box-sizing:border-box;}
.main .inq_dv .pd_dv .tit01{font-weight:500; margin-bottom:.5em; font-size:1.125em;}
.main .inq_dv .pd_dv .label01{display:block; width:100%; position:relative; margin-bottom:5px;}
.main .inq_dv .pd_dv .label01 .input01{display:block; background:#fff; position:relative; padding:.5em .3em .5em 40px;  border:0; box-sizing:border-box; width:100%;}
.main .inq_dv .pd_dv .label01 .xi{color:#999; position:absolute; left:10px; top:8px; z-index:3;}
.main .inq_dv .pd_dv .label01 textarea{height:200px;}
.main .inq_dv .pd_dv .btn01{background:#6d3289; text-align:center; color:#fff; font-size:1.25em; font-weight:500; border:0; width:100%; padding:10px 0;}
.main .inq_dv .pd_dv .btn01 span{margin-left:3px;}
.main .inq_dv .pd_dv .pri_click{position:absolute; right:20px; top:10px; font-size:.813em; color:#666;}
.main .inq_dv .pd_dv .pri_click .pri_view{font-size:22px; margin-right:0px; cursor:pointer;}

.main_service{}
.main_service > li{ width:20%; height:60vh; border-left:1px solid rgba(255,255,255,.2); box-sizing:border-box; position:relative;}
.main_service > li > a{ text-align:left; box-sizing:border-box; padding:0 1.2em; height:100%; position:relative; display:block; width:100%; padding-top:22vh; transition:.3s; z-index:5;}
.main_service > li > a .info{ display:block; color:#fff; /*margin-top:22vh;*/ text-align:center; transition:.3s;}
.main_service > li > a .info .t1{ display:block; font-weight:500; font-size:1.375em; margin-top:2rem;}
.main_service > li > a .info .t2{ display:block; margin-top:1em; font-weight: 300; opacity:.85; font-size:1.125em;}
.main_service > li > a .info .icon{ font-size:3.75em;}
.main_service > li > a .more{ width:2em; height:2em; line-height:2em; text-align:center; border-radius:50%; background:#fff; color:#177cf5; font-size:1.375em; display:block; margin:1.5em auto 0; opacity:0; transition:.3s;}
.main_service > li > a:after{ content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:#6d3289; opacity:0; transition: 0.3s; z-index:-1;}
.main_service > li > a:hover{padding-top:20vh;}
.main_service > li > a:hover:after{ opacity:.65;}
.main_service > li > a:hover .info{ /*margin-top:20vh; */transition:.3s;}
.main_service > li > a:hover .more{ opacity:1;}

#footer{ background:#303234;}
#footer .inner{ padding:2.5em 0 3.5em 0;}
/*#footer .inner .logo{ margin-top:.625em;}*/
#footer .inner .logo{}
#footer .inner .logo img{ width:7.5em;}
#footer .inner .con{ /*flex:1;*/ /*padding-left:4.125em;*/ width:calc(100% - 11em);}

#footer .menu_wrap{}
#footer .menu_wrap .menu{ flex:1; padding-top:.5em;}
#footer .menu_wrap .menu > li .in{ position:relative; display:block; padding:0 1.375em; color:#fff;}
#footer .menu_wrap .menu > li .in:after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#fff; opacity:.2;}
#footer .menu_wrap .menu > li:first-child .in{ padding-left:0;}
#footer .menu_wrap .menu > li:last-child .in{ padding-right:0;}
#footer .menu_wrap .menu > li:last-child .in:after{ display:none;}
#footer .menu_wrap .menu > li .in .tt{ font-size:1.063em;}
#footer .menu_wrap .menu.st2 > li .in .tt{ font-size:.9375em; font-weight:200;}
#footer .menu_wrap .menu > li .point{ color:#f5918e;}
#footer .menu_wrap .menu > li .in:hover .tt{ text-decoration:underline;}

#footer .menu_wrap .family{ position:relative;}
#footer .menu_wrap .family .btn{ height:3.125em; padding:0 .375em; border-bottom:2px solid #fff; color:#fff;}
#footer .menu_wrap .family .btn .tt{ font-size:.875em;}
#footer .menu_wrap .family .btn .icon{ font-size:.938em; margin-left:5em;}
#footer .menu_wrap .family .btn .icon:before{ content:"\e944";}
#footer .menu_wrap .family .list_wrap{ position:absolute; bottom:100%; left:0; right:0; padding:1em 1em; max-height:20em; background:#303234; border:1px solid #151617; box-shadow:2px 2px 3px rgba(0,0,0,.15); display:none;}
#footer .menu_wrap .family .list > li .in{ display:block; padding:.25em 0; color:#fff;}
#footer .menu_wrap .family .list > li .in .tt{ font-size:.813em;}
#footer .menu_wrap .family .list > li .in:hover .tt{ text-decoration:underline;}
#footer .menu_wrap .family.on .btn .icon:before{ content:"\e941";}
#footer .menu_wrap .family.on .list_wrap{ display:block;}

/*#footer .info_wrap{ margin-top:2.125em;}*/
#footer .info_wrap .info > li{ padding:.25em 2em .25em 0;}
#footer .info_wrap .info > li .tt{ vertical-align:baseline; font-size:.938em; color:#fff; opacity:.6;}
#footer .info_wrap .info > li a[href]:hover{ opacity:1;}
#footer .info_wrap .copy{ margin-top:2.5em; font-size:.688em; color:#fff; opacity:.4;}

#footer .goTop{ position:fixed; z-index:99; bottom:-2em; right:3%; width:4em; height:4em; background:#fff; border:5px solid #ddd; color:#6d3289; opacity:0; visibility:hidden; transition:.2s;}
#footer .goTop .tt{ display:block; font-size:.688em; font-weight:700;}
#footer .goTop:hover{ background:#6d3289; border-color:#6d3289; color:#fff;}
.scroll #footer .goTop{ bottom:2em; opacity:1; visibility:visible;}

/*contents*/
#contents{}
body.sub #contents{margin-top:-88px;}
#contents .sub_page_top{ overflow:hidden;}
#contents .sub_page_top.bg_1    { background-image:url(../images/sub/sub_visual_product.jpg);}
#contents .sub_page_top.bg_2 { background-image:url(../images/sub/sub_visual_engineering.jpg);}
#contents .sub_page_top.bg_3    { background-image:url(../images/sub/sub_visual_about.jpg?v=1.1);}
#contents .sub_page_top.bg_4{ background-image:url(../images/sub/sub_visual_contact.jpg);}
/*#contents .sub_page_top.bg_customer { background-image:url(../images/sub/sub_visual_customer.jpg);}*/
#contents .sub_page_top .inner{ height:25em;}

#contents .sub_page_top .sub_tit{ padding-top:12em; text-align:center; color:#fff; margin-bottom:4rem;}
#contents .sub_page_top .sub_tit .line{ display:inline-block; margin:1.25em auto; width:2em; height:2px; background:#fff;}
#contents .sub_page_top .sub_tit .tit1 .tt{ font-size:1.125em;}
#contents .sub_page_top .sub_tit .tit2 .tt{ font-size:2.750em; font-weight:700; letter-spacing:-1px;}
#contents .sub_page_top .sub_tit .tit3 .tt{ font-size:1.250em; font-weight:200; letter-spacing:-1px;}

#contents .sub_page_top .sub_menu{ background:rgba(0,0,0,.7);}
#contents .sub_page_top .sub_menu .gnb > li,
#contents .sub_page_top .sub_menu .gnb > li .dp1{ display:none;}
#contents .sub_page_top .sub_menu .gnb,
#contents .sub_page_top .sub_menu .gnb > li.on{ display:block;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li{ flex:1;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li > a{ position:relative; height:4.5em; padding:0 .5em; color:#fff;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li > a:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#fff; opacity:.4;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li:first-child > a:before{ display:none;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li > a .tt{ position:relative; padding:.5em .125em; font-size:1.125em;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li > a .tt:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#6d3289; display:none;}
#contents .sub_page_top .sub_menu .gnb > li .dp2 > li.on > a .tt:after{ display:block;}

#contents .con_page_top{ padding:2em 0 3.5em 0; text-align:center;}
#contents .con_page_top .con_tit{ font-size:2.500em; color:#222; font-weight:500; letter-spacing:-1px;}

#contents .doc{ padding-bottom:12em;}


/*SUB PAGE************************/
/*inc*/
.page_sec { margin-top:3.5em !important;}
.page_sec1{ margin-top:1em !important;}
.page_sec2{ margin-top:6em !important;}
.page_sec3{ margin-top:.375em !important;}

.page_box{ padding:1.5em 1.75em; border:1px solid #e6e6e6; box-sizing:border-box;}
.page_col{ margin-bottom:1em;}
.page_col > *{ margin-top:0 !important; margin-bottom:0 !important;}

.en{ font-family:'ms','NotoSans',sans-serif; letter-spacing:0;}
.bold{ font-weight:700;}
.ttBig{ font-size:1.250em;}
.ttSmall{ font-size:.938em;}
.ttLine{ text-decoration:underline;}

.ttF{ vertical-align:baseline;}
.ttF.t1{ font-size:.750em;}
.ttF.t2{ font-size:.813em;}
.ttF.t3{ font-size:.875em;}
.ttF.t4{ font-size:.938em;}
.ttF.t5{ font-size:1.063em;}
.ttF.t6{ font-size:1.125em;}
.ttF.t7{ font-size:1.250em;}
.ttF.t8{ font-size:1.625em;}
.ttF.c1{ color:#002460;}
.ttF.c2{ color:#0b9087;}
.ttF.c3{ color:#a3d063;}
.ttF.c4{ color:#dc232d;}
.ttF.c5{ color:#f57440;}
.ttF.c6{ color:#2d3951;}
.ttF.c7{ color:#0d121b;}
.ttF.c8{ color:#999999;}
.ttF.c9{ color:#111111;}


/*****************************/
/*MAIN************************/


/*secAni*/
.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;}


.prod_tab_wrap{}
.prod_tab_wrap .prod_tab{width:24%; display:flex; justify-content:center; align-items:center; align-content:center; border:1px solid #ddd; font-size:1.125em; height:60px; cursor:pointer; transition:.3s;}
.prod_tab_wrap.st2 .prod_tab{width:32%;}
.prod_tab_wrap .prod_tab.on{border-color:#6d3289; color:#6d3289; box-shadow:0 0 5px rgba(137,34,79,.6);}
.prod_tab_wrap .prod_tab:hover{border-color:#6d3289; color:#6d3289;}

.prod_ctt_wrap{margin-top:2rem;}
.prod_ctt_wrap .prod_ctt{display:none;}
.prod_ctt_wrap .prod_ctt.on{display:block;}
.prod_ctt_wrap .page_tit{margin:1.5rem 0;}
.prod_ctt_wrap .page_tit:first-of-type{margin-top:0;}
.prod_ctt_wrap .page_tit.tt{font-size:1.25em; font-weight:bold; color:#222;}
.prod_ctt_wrap .page_tit.tt i{font-size:1.225em; margin-top:-3px; color:#6a2342;}
.prod_ctt_wrap .page_tit.notice{font-size:.9375em; color:#555;}
.prod_ctt_wrap .page_ctt_box{}
.prod_ctt_wrap .page_ctt_box .img_box{}
.prod_ctt_wrap .page_ctt_box .img_box .img_cv{padding:1em; transition:.3s; border-radius:12px;}
.prod_ctt_wrap .page_ctt_box .img_box .img_cv:hover{background:#333;}
.prod_ctt_wrap .page_ctt_box .img_box.st2 .img_cv:hover{background:#777;}
.prod_ctt_wrap .product_list{}
.prod_ctt_wrap .product_list li{width:24%; margin-bottom:1.33%; border:1px solid #ddd; padding:1em; transition:.3s; margin-right:1.33%;}
.prod_ctt_wrap .product_list li:nth-of-type(4n){margin-right:0;}
.prod_ctt_wrap .product_list.st2 li{width:32%; margin-bottom:2%; margin-right:2%;}
.prod_ctt_wrap .product_list.st2 li:nth-of-type(3n){margin-right:0;}
.prod_ctt_wrap .product_list li.li_txt{border:none; width:74.66%; display:flex; justify-content:center; align-items:center; text-align:center; margin-right:0;}
.prod_ctt_wrap .product_list li.li_txt .tt{font-size:1.025em; letter-spacing:-.5px; line-height:1.4;}
.prod_ctt_wrap .product_list:not(.st3) li:not(.li_txt):hover{border-color:#333; background:#333;}
.prod_ctt_wrap .product_list li a{display:block}
.prod_ctt_wrap .product_list li .img_box{height:300px; margin-bottom:1rem;}
.prod_ctt_wrap .product_list li .info_box{text-align:center;}
.prod_ctt_wrap .product_list li .info_box .prd_name{font-size:1.125em; margin-bottom:1rem; transition:.3s; color:#111; transition:.3s;}
.prod_ctt_wrap .product_list:not(.st3) li:not(.li_txt):hover .info_box .prd_name{color:#fff;}
.prod_ctt_wrap .product_list li .info_box .prd_exp{transition:.3s; color:#000;}
.prod_ctt_wrap .product_list:not(.st3) li:not(.li_txt):hover .info_box .prd_exp{color:#fff;}

.txt_small{font-size:.875em; vertical-align:baseline;}
.txt_small2{font-size:8px !important; vertical-align:baseline;}
.txt_gray{color:#888 !important; vertical-align:baseline;}

.dv45{}
/*.dv45 > div{width:45%;}*/ 
.ul_dots{padding-top:.5rem;}
.ul_dots.indent1{margin-left:1.5rem; padding-top:0;}
.ul_dots li{list-style:inside; margin-bottom:.5rem; line-height:1.6;}
.ul_dots li.no_dots{list-style:none;}

.eng_service_wrap{}
.eng_service_wrap .dv45 > div .tt{font-size:1.5em; font-weight:bold; margin-bottom:1.5rem;}
.eng_service_wrap .dv45 > div .tt i{font-size:1em; color:#6a2342; margin-top:-3px;}
.eng_service_wrap .dv45 > div .t1{font-size:1.25em;}

.eng_turnkey_wrap{}
.eng_turnkey_wrap .bg_box{height:350px; padding:3em 4em; box-sizing:border-box;}
.eng_turnkey_wrap .bg_box .inner{border-top:1px solid #fff; border-bottom:1px solid #fff; height:100%; position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; background:rgba(0,0,0,.2); box-sizing:border-box;}
.eng_turnkey_wrap .bg_box .inner:before{content:''; display:block; width:100%; height:3em; border-left:1px solid #fff; border-right:1px solid #fff; position:absolute; left:0; top:0; box-sizing:border-box;}
.eng_turnkey_wrap .bg_box .inner:after{content:''; display:block; width:100%; height:3em; border-left:1px solid #fff; border-right:1px solid #fff; position:absolute; left:0; bottom:0; box-sizing:border-box;}
.eng_turnkey_wrap .bg_box .inner .tt{font-size:1.5em; color:#fff; font-weight:bold;}
.eng_turnkey_wrap .bg_box .inner .line{width:80px; height:2px; margin:2rem auto; background:#fff;}
.eng_turnkey_wrap .bg_box .inner .t1{font-size:1.33em; color:#fff; font-weight:200;}
.eng_turnkey_wrap .turnkey_icons_wrap{margin-top:3rem;}
.eng_turnkey_wrap .turnkey_icons_wrap .turnkey_icon{width:33.33%; margin-bottom:3.5rem; display:flex; flex-direction:column; align-items:center;}
.eng_turnkey_wrap .turnkey_icons_wrap .turnkey_icon .icon_box{width:160px; height:160px; border-radius:50%; background:linear-gradient(149deg, rgba(255,255,255,1) 0%, rgba(238,238,238,0.65) 80%, rgba(193,193,193,0.85) 100%); box-shadow:4px 4px 12px rgba(0,0,0,.4); display:flex; justify-content:center; align-items:center;}
.eng_turnkey_wrap .turnkey_icons_wrap .turnkey_icon .text_box{margin-top:1.25rem;}
.eng_turnkey_wrap .turnkey_icons_wrap .turnkey_icon .text_box .tt{font-size:1.125em; font-weight:bold;}

.contact_wrap .page_tit{ margin-bottom:.75em; margin-top:3.5em}
.contact_wrap .page_tit:first-child{ margin-top:0}
.contact_wrap .page_tit .t1{ font-size:1.85em; color:#222; letter-spacing:-2px; word-spacing:2px;}

.agree_box{ border:1px solid #ddd; background:#fff; border-radius:5px; font-size:.875em;}
.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 strong{ font-weight:600; vertical-align:baseline;}

.ul_testing{font-size:1.5em; justify-content:center; margin-bottom:5rem;}
.ul_testing > li:nth-of-type(2){margin:0 1.5rem;}

/*POPUP****************************/
.popWrap.popAgree{ width:50em;}
.popWrap.popSecret{ width:35em;}
.popWrap.popProd{ width:42em;}
.popWrap.popPrint{ width:55em;}