@charset "utf-8";
@import url('lib/animated.css');
@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');

/* ==============================
 * common - 컨텐츠 공통
 * ============================== */
body { overflow-x:hidden; margin:0 auto;}
 body.scrollLock { overflow:hidden;}
.hidden { position:absolute; top:0; left:0; font-size:0;}
 
 /* layerPopup */
.layerPopWrap { visibility:hidden; display:flex; display:-ms-flex; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; opacity:0; transition:all .2s ease}
.layerPopWrap .bg {position:fixed; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.layerPopWrap .layerPopCont { display:flex; display:-ms-flex; flex-direction:column; position:relative; width:500px; max-height:90%; border-radius:8px; margin:0 auto; border:1px solid #cccccc; opacity:0; background:#fff;}
.layerPopWrap .layerPopCont .popTitle { height:62px; padding-left:30px; border-radius:8px 8px 0 0; font-size:20px; color:#333333; font-weight:bold; line-height:62px; background:#f1f3f4;}
.layerPopWrap .layerPopCont .contBox { overflow:hidden; overflow-y:auto; height:calc(100% - 62px); height:-ms-calc(100 - 62px); padding:30px;}
.layerPopWrap .layerPopCont > .btnPopClose { position:absolute; top:0; right:0; width:62px; height:62px; font-size:0; background:url('../images/common/btn_pop_close.png') no-repeat center center;}
.layerPopWrap .layerPopCont .btnPopGroup { margin-top:10px; text-align:center; font-size:0;}
.layerPopWrap .layerPopCont .btnPopGroup .btn { display:inline-block; min-width:145px; height:50px; padding:0 30px; border-radius:5px; font-size:17px; color:#fff; line-height:50px; background:#1c9bd7;}
.layerPopWrap .layerPopCont .btnPopGroup .btn + .btn { margin-left:10px;}

.layerPopWrap.alertPop .layerPopCont { width:300px; border:0;}
.layerPopWrap.alertPop .layerPopCont .contBox { height:auto; padding:30px 30px 0px; font-size:15px; color:#666666;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup { overflow:hidden; display:flex; display:-ms-flex; margin:40px -30px 0; border-radius:0 0 8px 8px;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup .btn { width:100%; border-radius:0;}
.layerPopWrap.alertPop .layerPopCont .btnPopGroup .btn + .btn { margin:0; background:silver}

.layerPopWrap.on { visibility:visible; opacity:1;}
.layerPopWrap.on .layerPopCont{ animation:fadeInUp .4s ease-in-out forwards;}


/* header */
#headerWrap { position:absolute; top:0; left:0; right:0; z-index:5; height:120px; transition:top .3s ease;}
#headerWrap.fixed { position:fixed; top:0; background:rgba(255,255,255,0.8)}
#headerWrap .innerBox { position:relative;}
#headerWrap h1 a { position:absolute; top:50%; left:20px; width:140px; height:40px; font-size:0; background:url('../images/logo.png') no-repeat; background-size:100%; transform:translateY(-50%);}
#headerWrap ul { padding:45px 0; margin-left:240px; font-size:0; transition:all .3s ease;}
#headerWrap ul li { display:inline-block; }
#headerWrap ul li + li { padding-left:8%;}
#headerWrap ul li a { position:relative; font-size:21px; color:#ffffff; font-family: 'NotoSans'; font-weight:200; transition:all .3s ease;}
#headerWrap ul li a:after { content:''; display:block; position:absolute; bottom:-10px; left:50%; width:0%; height:4px; background:#d2584b; transition:all .3s ease;}
#headerWrap ul li.on a:after { left:0; width:100%;}
#headerWrap .btnAll { position:absolute; top:50%; right:20px; width:60px; height:60px; padding-left:53px; font-size:0px; color:#ffffff; font-family: 'NotoSans'; font-weight:200; transform:translateY(-50%);}
#headerWrap .btnAll span { position:absolute; top:50%; right:0; width:25px; height:2px; margin-top:2px; background:#fff; transform:translateY(-50%); background:#fff;}
#headerWrap .btnAll span:before { content:''; display:block; position:absolute; top: -6px; right:0; width:25px; height:2px; background:#fff;}
#headerWrap .btnAll span:after { content:''; display:block; position:absolute; top:6px; right:0; width:25px; height:2px; background:#fff;}

.subWrap #headerWrap ul li a:after { bottom:0;}

/* 2020-02-06 */
.bannerOn #headerWrap { top:80px;}
.bannerOn #container { padding-top:80px;}
.bannerOn #container .sec01 { margin-top:80px;}
/* //2020-02-06 */

.close ~ #headerWrap { top:0;}
.close ~ #container { padding-top:0;}
.close ~ #container .sec01 { margin-top:0;}

/* btnAll */
.btnAllWrapBox { visibility:hidden; opacity:0; position:fixed; top:0; left:0; z-index:10; width:100%; height:100%; transition:all .3s ease;}
.btnAllWrapBox .bg { position:absolute; top:0; left:100%; width:100%; height:100%; background:rgba(0,0,0,0.8); transition:all .3s ease .1s;}
.btnAllWrapBox .allBox { position:absolute; top:0; left:100%; width:500px; height:100%; background:#e08776; transform:translateX(0%); transition:all .3s ease .3s;}
.btnAllWrapBox .allBox .btnClose { display:block; width:22px; height:22px; margin:105px auto; font-size:0; background:url('../images/btn_all_close.png') no-repeat; transition:all .3s ease;}
.btnAllWrapBox .allBox .btnClose:hover { transform:rotate(180deg);}
.btnAllWrapBox .allBox li { text-align:center;}
.btnAllWrapBox .allBox li + li { margin-top:65px;}
.btnAllWrapBox .allBox li a { font-size:24px; color:#ffffff; transition:all .3s ease;}
.btnAllWrapBox .allBox li a:hover { font-weight:bold;}

.btnAllWrapBox.on { opacity:1; visibility:visible;}
.btnAllWrapBox.on .bg { left:0;}
.btnAllWrapBox.on .allBox { transform:translateX(-100%);}

/* footer */
#footerWrap { position:fixed; top:100%; left:0; right:0; height:115px; background:#303338; transform:translateY(-100%);}
#footerWrap .innerBox { top:50%; transform:translateY(-50%);}
#footerWrap .logo { position:absolute; top:50%; transform:translateY(-50%); margin-right:80px; width:202px; height:35px; font-size:0; background:url('../images/img_logo1.gif') no-repeat; background-size:cover;}
#footerWrap .textBox { margin-left:278px;}
#footerWrap .text { display:inline-block; font-size:14px; font-weight:300; color:#fff; font-family: 'Spoqa Han Sans'}
#footerWrap .text span + span:before { content:''; display:inline-block; width:1px; height:8px; margin:0 12px; vertical-align:middle; background:#4b4f56;}
#footerWrap .copy { color:#fff; font-size:10px; font-family: 'Gmarket Sans'; font-weight:bold;}
#footerWrap .btnGroup { position:absolute; top:50%; right:20px; transform:translateY(-50%);}
#footerWrap .btnGroup > a {  display:block; width:200px; height:50px; border:1px solid #414448; padding-left:34px; line-height:50px; color:#f4f4f4; font-size:14px; font-weight:bold; transition:all .3s ease; font-family: 'Spoqa Han Sans';}
#footerWrap .btnGroup > a:after { content:''; display:block; position:absolute; top:50%; right:32px; width:9px; height:6px; background:url('../images/btn_footer_arrow.png') no-repeat; transition:all .3s ease;}
#footerWrap .btnGroup > a.on:after { transform:rotate(180deg);}
#footerWrap .btnGroup .sub { display:none; position:absolute; bottom:50px; left:0; width:100%; border:1px solid #b4b5b9;}
#footerWrap .btnGroup .sub a { position:relative; display:block; width:200px; height:50px; padding-left:34px; line-height:50px; color:#111; font-size:14px; font-weight:bold; transition:all .3s ease; font-family: 'Spoqa Han Sans'; background:#fff;}
#footerWrap .btnGroup .sub a + a { border-top:1px solid #e8e9e9;}
#footerWrap .btnGroup .sub a:after { content:''; display:block; position:absolute; top:50%; right:34px; width:20px; height:6px; margin-top:-3px; background:url('../images/icon_footer_arrow.png') no-repeat; transition:all .3s ease;}

 /* ==============================
 * subWrap
 * ============================== */

.subWrap .topbanner { top:-100%;}
.subWrap #headerWrap { top:0; height:60px; border-bottom:1px solid #e5e5e5;}
.subWrap #headerWrap h1 a { width:140px; height:18px; background:url('../images/logo2.png') no-repeat;}
.subWrap #headerWrap ul { padding:0;}
.subWrap #headerWrap li {}
.subWrap #headerWrap li a { display:block; font-size:16px; line-height:60px; color:#111111;}
.subWrap #headerWrap .btnAll span,
.subWrap #headerWrap .btnAll span:before,
.subWrap #headerWrap .btnAll span:after { background:#111111}

.subWrap #container { padding-top:60px;}

 /* ==============================
 * content
 * ============================== */

img { max-width:100%;}

.innerBox { position:relative; max-width:1440px; margin:0 auto; padding:0 20px;}

.topbanner { overflow:hidden; position:absolute; top:0; left:0; z-index:3; width:100%; height:80px; background:url('../images/bg_topbanner.jpg') no-repeat; background-size:cover; transition:all .5s ease;}
.topbanner .title { display:block; line-height:80px; text-align:center; font-size:24px; font-family: 'NotoSans'; font-weight:300;}
.topbanner .title strong { font-family: 'NotoSans'; font-weight:bold;}
.topbanner .title:after { content:''; display:inline-block; width:91px; height:20px; margin-left:78px; font-family: 'NotoSans'; font-size:14px; color:#111; vertical-align:middle; background:url('../images/btn_topbanner.png') no-repeat;}
.topbanner .checkbox {position:absolute; top:30px; right:100px; font-size:13px; color:#000; font-family: 'NotoSans';}
.topbanner .btnClose { position:absolute; top:30px; right:40px; width:19px; height:19px; font-size:0; background:url('../images/btn_topbanner_close.png') no-repeat; background-size:100%;}

.topbanner.close { height:0px; opacity:0;}

#container { overflow:hidden; position:relative; z-index:2; min-height:600px; background:#fff;}
#container > section { display:none; position:absolute; top:0; left:0; bottom:0; width:100%; margin-top:60px;}
#container > section.on { display:block;}
#container > section.off { display:block; z-index:3; animation:sectionOff1 .5s ease-in-out both;}


@keyframes sectionOff1 {
	0% {left:0%; opacity:1;}
	100% {left:-100%; opacity:0;}
}

#container .btnSectionNext { display:none; position:absolute; top:50%; right:0; z-index:4; width:60px; height:250px; background:#000; transform: translateY(-50%); }
#container .btnSectionNext span { display:block; width:200px; margin-top:-10px; line-height:60px; font-size:12px; color:#ffffff; transform-origin:0 100%; transform:rotate(90deg);}
#container .btnSectionNext:after { content:''; display:block; position:absolute; bottom:50px; left:50%; width:16px; height:6px; margin-left:-8px; background:url('../images/btnNextArrow.png') no-repeat;}
#container .btnSectionPrev { display:none; position:absolute; top:50%; left:0; z-index:4; width:60px; height:250px; background:#000; transform: translateY(-50%); }
#container .btnSectionPrev span { display:block; width:200px; margin-top:-10px; line-height:60px; font-size:12px; color:#ffffff; transform-origin:0 100%; transform:rotate(90deg);}
#container .btnSectionPrev:after { content:''; display:block; position:absolute; bottom:50px; left:50%; width:16px; height:6px; margin-left:-8px; background:url('../images/btnNextArrow2.png') no-repeat;}

#container .on .btnSectionNext { display:block; animation:btnSectionNext 1s ease-in-out .2s both;}
#container .on .btnSectionPrev { display:block; animation:btnSectionPrev 1s ease-in-out .2s both;}

@keyframes btnSectionNext {
	0% {right:-100%;}
	100% {right:0%;}
}
@keyframes btnSectionPrev {
	0% {left:-100%;}
	100% {left:0%;}
}

#container .sec01 { margin-top:0; min-height:600px;}
.sec01 { overflow:hidden; width:100%;}
.sec01 .visualImg .bg1 { position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; background:url('../images/bg_sec01_1.jpg') no-repeat center center; background-size:cover; animation:sec01_2 10s linear infinite alternate}
.sec01 .visualImg .bg2 { display:none; position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; background:url('../images/bg_sec01_2.jpg') no-repeat center center; background-size:cover; animation:sec01_2 10s linear infinite alternate}

.sec01 .innerBox { display:block; position:absolute; top:50%; left:0; right:0; width:1440px; transform:translateY(-50%);}
.sec01 .logoWrap { display:none; position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);}
.sec01 .logoWrap .logo { width:270px; margin:-30px auto 0; height:76px; font-size:0; background:url('../images/icon_logo.png') no-repeat; background-size:100%;}
.sec01 h1 {}
.sec01 h1 span { display:block; font-size:44px; color:#000; opacity:0; line-height:1.14;  font-family: 's-core_dream1_thin';}
.sec01 p { margin-top:55px; font-size:20px; color:#ffffff; opacity:0; font-weight:100;  font-family: "notoSans"}

.sec02 {}
.sec02 .bgSec {}
.sec02 .bgSec span { position:absolute;}
.sec02 .bgSec span:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.sec02 .bgSec span:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
.sec02 .bgSec .bg1 { top:0; left:0; width:30%; height:35%; background:url('../images/bg_sec02_1.jpg') no-repeat center center; background-size:cover;}
.sec02 .bgSec .bg2 { top:35%; left:0; width:30%; height:65%; background:url('../images/bg_sec02_2.jpg') no-repeat center center; background-size:cover;}
.sec02 .bgSec .bg3 { top:0%; left:30%; width:70%; height:65%; background:url('../images/bg_sec02_3.jpg') no-repeat center center; background-size:cover;}
.sec02 .bgSec .bg4 { top:65%; left:30%; width:70%; height:35%; background:url('../images/bg_sec02_4.jpg') no-repeat center center; background-size:cover;}

.sec02 h1 { position:absolute; top:10%; left:35%; font-size:50px; color:#fff; font-weight:100;}
.sec02 .textBox { position:absolute; top:60%; left:35%;}
.sec02 .textBox .title { font-size:48px; color:#ffffff; font-weight:100;  font-family: 'NotoSans';}
.sec02 .textBox .text { margin-top:12%; color:#fff; font-size:18px; line-height:1.8; font-weight:300;  font-family: 'NotoSans';}
.sec02 .textBox .text strong { font-weight:300;}

.sec02.on .bgSec .bg1:before { animation:sec01_1 .9s ease-in-out .3s both;}
.sec02.on .bgSec .bg1:after { animation:sec01_1 1s ease-in-out both;}
.sec02.on .bgSec .bg2:before { animation:sec01_1 .9s ease-in-out .5s both;}
.sec02.on .bgSec .bg2:after { animation:sec01_1 1s ease-in-out .2s both;}
.sec02.on .bgSec .bg3:before { animation:sec01_1 .9s ease-in-out .4s both;}
.sec02.on .bgSec .bg3:after { animation:sec01_1 1s ease-in-out .1s both;}
.sec02.on .bgSec .bg4:before { animation:sec01_1 .9s ease-in-out .6s both;}
.sec02.on .bgSec .bg4:after { animation:sec01_1 1s ease-in-out .3s both;}

@keyframes sec01_1 {
	0% {left:0; width:100%;}
	100% {left:100%; width:0%;}
}
@keyframes sec01_2 {
	0% { transform:scale(1) rotate(0deg);}
	100% { transform:scale(1.05) rotate(.001deg)}
}


.sec03 {}
.sec03 .video { position:absolute; top:0; left:0; width:100%; height:70%; text-align:center; background:#000;}
.sec03 .video iframe { width:100%; max-width:1200px; height:100%; margin:0 auto;}
.sec03 .video:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.sec03 .video:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
.sec03 .innerBox { display:none; width:100%;}
.sec03 .textBox { display:flex; position:relative; top:70%; height:30%; align-items:center; background:url('../images/bg_sec03_1.jpg') center center no-repeat; background-size:cover;}
.sec03 .textBox h1 { position:relative; z-index:1; font-size:48px; color:#f3b499;  font-family: 'NotoSans';; font-weight:100;}
.sec03 .textBox p { position:relative; z-index:1; font-size:18px; color:#fff; line-height:1.5;  font-family: 'NotoSans';;font-weight:300;}
.sec03 .textBox p strong { font-weight:300;}
.sec03 .textBox .bg { position:absolute; top:0; right:0; width:30%; height:100%; background:url('../images/bg_sec03_2.jpg') center center no-repeat; background-size:cover;}

.sec03.on .video:before { animation:sec01_1 .9s ease-in-out .3s both;}
.sec03.on .video:after { animation:sec01_1 1s ease-in-out both;}
.sec03.on .innerBox { display:block;}

.sec04 { display:none; overflow:hidden; background:#fff;}
.sec04 > .innerBox { top:50%; max-width:1520px; padding:0 60px; transform:translateY(-50%);}
.sec04 h1 { margin:0px 0 100px; font-size:48px; color:#d2584b; font-family: 'Gmarket Sans'; font-weight:300;}
.sec04 .biWrap { display:flex; display:-ms-flex;}
.sec04 .biWrap + .biWrap { padding-top:50px; margin-top:50px; border-top:1px solid #eeeeee; transition:all .3s ease;}
.sec04 .biWrap .img { position:relative; margin-right:100px;}
.sec04 .biWrap .img:after { content:''; display:block; position:absolute; top:-51px; right:-100px; width:100px; height:1px; background:#fff;}
.sec04 .biWrap h2 { font-size:24px;  font-family: 'NotoSans';;}
.sec04 .biWrap .text { font-size:18px;  font-family: 'NotoSans';;}
.sec04 .colorWrap { display:flex; display:-ms-flex; margin-top:95px; padding-top:95px; border-top:2px solid #000000; transition:all .3s ease;}
.sec04 .colorText { width:100%;}
.sec04 .colorText > span { display:inline-block; width:80px; height:80px; border:4px solid skyblue; border-radius:50%; vertical-align:middle; background:#fff;}
.sec04 .colorText .color1 { border-color:#ca705b;}
.sec04 .colorText .color2 { border-color:#f7a890;}
.sec04 .colorText .color3 { border-color:#101820;}
.sec04 .colorText .color4 { border-color:#4e4b48;}
.sec04 .colorText .color5 { border-color:#707372;}
.sec04 .colorText p { display:inline-block; margin-left:35px; vertical-align:middle; font-weight:bold; font-size:14px;  font-family: 'NotoSans';;}
.sec04 .colorText p span { display:block; color:#999;  font-family: 'NotoSans';;}

.sec04 .btnDownload { position:absolute; top:0; right:60px; display:block; width:320px; height:70px; padding-left:50px; font-size:18px; font-weight:normal;  font-family: 'NotoSans';; line-height:70px; border:1px solid #e2e2e2; transition:all .3s ease;}
.sec04 .btnDownload:after { content:'';  position:absolute; top:50%; right:50px; width:29px; height:26px; background:url('../images/btn_download.png') no-repeat; transform:translateY(-50%);}
.sec04 .btnDownload span { position:relative;}

.sec04.on > .innerBox { display:block;}

.sec05 { background:url('../images/bg_sec05.jpg') no-repeat center center; background-size:cover;}
.sec05:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.sec05:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fff;}
.sec05 .textBox { display:none; opacity:0; position:absolute; bottom:0; right:0; width:66.666%; height:300px; padding-left:100px; background:rgba(202,112,91,0.95);}
.sec05 .textBox h1 { margin-top:-30px; font-size:50px; color:#f3b499; font-weight:200;}
.sec05 .textBox p { margin-top:130px; font-size:18px; color:#fff;   font-family: 'NotoSans';; font-weight:300;}
.sec05 .textBox p strong {  font-family: 'NotoSans';; font-weight:300;}

.sec05.on:before { animation:sec01_1 .9s ease-in-out .3s both;}
.sec05.on:after { animation:sec01_1 1s ease-in-out both;}
.sec05.on .textBox { display:block;}


.sec06 {}
.sec06 .list { display:flex; display:-ms-flex; height:100%;}
.sec06 .list > div { display:none; width:33.333%; height:100%;}
.sec06 .list .img { overflow:hidden; position:relative; height:calc(100% - 120px);}
.sec06 .list .img img { transition:all .3s ease;}
.sec06 .list .img span { display:block; position:absolute; top:8.9%; left:10.8%; width:100%;}
.sec06 .list .img em { position:absolute; top:0; left:0; font-size:12px; color:#fbfbfb; text-transform:uppercase; letter-spacing: 3px; transform-origin:0 0; transform:rotate(90deg)}
.sec06 .list .img:hover img { transform:scale(1.1)}
.sec06 .list .imgText { height:120px; line-height:120px; text-align:center; color:#fff; font-size:18px;  font-family: 'NotoSans';;}

.sec06 .list .type1 .img { background:url('../images/img_sec06_1.jpg') no-repeat center center; background-size:cover;}
.sec06 .list .type2 .img { background:url('../images/img_sec06_2.jpg') no-repeat center center; background-size:cover;}
.sec06 .list .type3 .img { background:url('../images/img_sec06_3.jpg') no-repeat center center; background-size:cover;}
.sec06 .list .type1 .imgText { background:url('../images/img_sec06_1_1.jpg') no-repeat center center; background-size:cover;}
.sec06 .list .type2 .imgText { background:url('../images/img_sec06_2_1.jpg') no-repeat center center; background-size:cover;}
.sec06 .list .type3 .imgText { background:url('../images/img_sec06_3_1.jpg') no-repeat center center; background-size:cover;}

.sec06.on .list > div { display:block;}

.sec07 { margin-bottom:115px; background:url('../images/bg_sec07.jpg') no-repeat center bottom; background-size:cover;}
.sec07 .innerBox {}
.sec07 .arrowBtn { position:absolute; top:0; right:20px; font-size:0}
.sec07 .arrowBtn a { display:inline-block; width:50px; height:50px; font-size:0;}
.sec07 .arrowBtn .btnLeft { background:url('../images/btn_left.png') no-repeat; background-size:cover;}
.sec07 .arrowBtn .btnRight { margin-left:1px; background:url('../images/btn_right.png') no-repeat; background-size:cover;}
.sec07 .list { margin-top:50px;}
.sec07 .list a { display:block}
.sec07 .list .slick-list { overflow:visible;}
.sec07 .list .slick-slide { margin-right:80px;}
.sec07 .list .img { overflow:hidden; position:relative; box-shadow:20px 20px 30px rgba(0,0,0,0.2)}
.sec07 .list .img img { transition:all .3s ease;}
.sec07 .list .img:hover img { transform:scale(1.1)}
.sec07 .list .img span { position:absolute; top:40px; left:40px; width:60px; height:60px; padding-top:10px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); font-size:14px; color:#ffffff; text-align:center;vertical-align:middle;}
.sec07 .list .img span.type2 { padding-top:20px;text-align:center;vertical-align:middle;}
.sec07 .list .textBox { position:relative; z-index:1; width:340px; padding:0 0 0 30px; margin:20px 0 0px;}
.sec07 .list .date { position:relative; font-size:18px; color:#656565; font-weight:300; transition:all .3s ease;  font-family: 'NotoSans';;}
.sec07 .list .date.color { color:#f47721;}
/*.sec07 .list .title { position:absolute; top:0; right:30px; font-size:18px; transition:all .3s ease;  font-family: 'NotoSans';; font-weight:normal;}*/
.sec07 .list .title { position:absolute; top:0; font-size:18px; transition:all .3s ease;  font-family: 'NotoSans';; font-weight:normal;}
.sec07 .list .text { margin-top:15px; font-size:14px; line-height:1.875; transition:all .3s ease;  font-family: 'NotoSans';;}
.sec07 .list .text strong { font-weight:bold;}
.sec07 .list .phone { margin-top:15px; font-size:24px; color:#c86f5b; font-weight:200; transition:all .3s ease;  font-family: 'NotoSans';;}
.sec07 .btnMore { position:relative; display:block; width:200px; height:50px; margin-top:50px; padding-left:22px; font-size:14px; font-weight:normal;font-family: 'Spoqa Han Sans'; line-height:50px; border:1px solid #e2e2e2; transition:all .3s ease;}
.sec07 .btnMore:after { content:''; display:block; position:absolute; top:50%; right:25px; width:21px; height:17px; background:url('../images/btn_arrow.png') no-repeat; background-size:100%; transform:translateY(-50%);}


/* smothImg 10s ease-in-out infinite alternate*/

@media screen and (max-height:900px){
	.sec04 h1 { margin-bottom:50px;}
	.sec04 .biWrap + .biWrap { padding-top:30px; margin-top:30px;}
	.sec04 .colorWrap { margin-top:50px; padding-top:50px;}
	
	.sec05 .textBox p { margin-top:100px;}
	
	.sec07 { margin-bottom:60px;}
	.sec07 .innerBox { top:50%; transform:translateY(-50%)}
	.sec07 .btnMore { margin-top:0;}
	.sec07 .list { margin-top:10px;}
	
	.sec07 .list .textBox { margin-top:10px; padding-left:15px;}
	.sec07 .list .text { margin-top:10px;}
	.sec07 .list .phone { margin-top:5px;}
	
	
	#footerWrap { height:60px;}
	
}

@media screen and (max-height:700px){
	.sec02 .textBox { top:59%}
	.sec02 .textBox .text { margin-top:5%;}
	
	.sec07 .list .img { overflow:hidden; height:280px;}
}


@media screen and (max-width:1440px){
	.topbanner { height:80px;}
	.topbanner .title { font-size:20px; line-height:80px;}
	.topbanner .title:after { width:50px; height:12px; margin-left:10px; background-size:100%;}
	.topbanner .btnClose { right:20px; top:10px;}
	.topbanner .checkbox { right:20px; top:50px;}
	
	#headerWrap { top:0;}
	#headerWrap h1 a { width: 140px; height: 18px; background: url(../images/logo2.png) no-repeat;}
	#headerWrap ul { margin-left:170px;}
	#headerWrap ul li + li { padding-left:5%}
	#headerWrap ul li a { font-size:18px;}
	
	#container { top:0;}
	#container .btnSectionNext { width:50px; height:200px;}
	#container .btnSectionNext span { margin-top:-25px; line-height:50px;}
	#container .btnSectionNext:after { bottom:25px;}
	#container .btnSectionPrev { width:50px; height:200px;}
	#container .btnSectionPrev span { margin-top:-25px; line-height:50px;}
	#container .btnSectionPrev:after { bottom:25px;}
	
	#container .sec01 { margin-top:0;}
	.sec01 h1 span { font-size:40px;}
	.sec01 p { font-size:20px;}
	
	.sec02 h1 { font-size:40px;}
	.sec02 .textBox .title { font-size:45px;}
	.sec02 .textBox .text { font-size:15px;}
	
	.sec03 .textBox h1 { font-size:45px;}
	.sec03 .textBox p { font-size:15px;}
	
	.sec03 .textBox .bg { display:none;}
	
	.sec04 h1 { font-size:40px;}
	.sec04 .btnDownload { width:250px; height:50px; padding-left:25px; line-height:50px; font-size:15px;}
	.sec04 .btnDownload:after { right:25px; width:15px; height:14px; background-size:100%;}
	
	.sec04 .biWrap .img { width:250px; margin-right:50px;}
	.sec04 .biWrap h2 { font-size:20px;}
	.sec04 .biWrap .text { font-size:16px;}
	.sec04 .colorText > span { width:50px; height:50px;}
	.sec04 .colorText p { display:block; margin-left:0; margin-top:5px;}
	
	.sec05 .textBox { padding-left:50px;}
	.sec05 .textBox h1 { font-size:40px;}
	.sec05 .textBox p { font-size:18px;}
	
	.sec06 .list .imgText { display:flex; display:-ms-flxe; align-items:center; line-height:1.5; text-align:center;justify-content:center}
	.sec06 .list .type1 .imgText,
	.sec06 .list .type2 .imgText,
	.sec06 .list .type3 .imgText { font-size:15px; text-align:center;}
	
	.sec07 .btnMore { width:250px; height:50px;padding-left:25px; line-height:50px;}
	.sec07 .btnMore:after { right:25px; width:15px; height:12px;}
	.sec07 .arrowBtn .btnLeft,
	.sec07 .arrowBtn .btnRight { width:50px; height:50px;}
}


@media screen and (max-width:768px){
	.topbanner { height:80px;}
	.topbanner .title { font-size:13px; line-height:50px; text-align:left;}
	.topbanner .title:after { display:block; margin-left:0;}
	.topbanner .btnClose { width:15px; height:15px; top:15px;}
	.topbanner .checkbox { top:55px; font-size:12px;}
	
	#headerWrap { top:0; height:60px;}
	#headerWrap .innerBox { height:60px;}
	#headerWrap ul { display:none;}
	
	#headerWrap .btnAll span,
	#headerWrap .btnAll span:before,
	#headerWrap .btnAll span:after { background:#111;}
	
	.btnAllWrapBox .allBox { width:200px;}
	.btnAllWrapBox .allBox .btnClose {margin:40px auto;}
	.btnAllWrapBox .allBox li + li { margin-top:20px;}
	.btnAllWrapBox .allBox li a { font-size:14px;}
	
	#container { height:auto !important;}
	#container > section { display:block; position:relative; margin-top:0;}
	#container .sec01 { margin-top:0; min-height:inherit;}
	
	#container .btnSectionNext,
	#container .btnSectionPrev { display:none !important;}
	
	.sec01 {}
	.sec01 .innerBox { display:block;}
	.sec01 .visualImg .bg1 { background-image:url('../images/bg_sec01_1_m.jpg');}
	.sec01 .visualImg .bg2 { background-image:url('../images/bg_sec01_2_m.jpg');}
	.sec01 .logoWrap .logo { width:135px; height:38px;}
	.sec01 h1 { padding-top:10%;}
	.sec01 h1 span { font-size:30px;}
	.sec01 p { margin-top:4%; font-size:15px;}
	
	.sec02 {}
	.sec02 h1 { left:20px; font-size:25px;}
	.sec02 .bgSec { overflow:hidden;}
	.sec02 .bgSec span { display:block; position:relative;}
	.sec02 .bgSec .bg1 { top:0; left:0; float:left; width:50%; height:auto; padding-top:47%; background-image:url('../images/bg_sec02_1_m.jpg');}
	.sec02 .bgSec .bg2 { top:0; left:0; float:left; width:50%; height:auto; padding-top:47%; background-image:url('../images/bg_sec02_2_m.jpg');}
	.sec02 .bgSec .bg3 { clear:both; top:0; left:0; width:100%; height:auto; padding-top:82%; background-image:url('../images/bg_sec02_3_m.jpg');}
	.sec02 .bgSec .bg4 { clear:both; top:0; left:0; width:100%; height:auto; padding-top:40%; background-image:url('../images/bg_sec02_4_m.jpg');}
	.sec02 .textBox { top:73%; left:20px; right:20px;}
	.sec02 .textBox .title { font-size:27px;}
	.sec02 .textBox .text { font-size:12px;}
	.sec02 .textBox .text br { display:none;}
	
	.sec03 .video { position:relative; height:auto; padding-top:56%;}
	.sec03 .video:before,
	.sec03 .video:after { display:none;}
	.sec03 .video iframe { position:absolute; top:0; left:0; width:100%; height:100%;}
	.sec03 .textBox { display:block; top:0;}
	.sec03 .innerBox { display:block; padding:20% 20px;}
	.sec03 .textBox h1 { font-size:27px; }
	.sec03 .textBox p { margin-top:10px; font-size:12px;}
	
	.sec04 > .innerBox { top:0; padding:0 20px; transform:translateY(0);}
	.sec04 h1 { margin-top:10%; margin-bottom:0; font-size:25px;}
	.sec04 .btnDownload { position:relative; right:0; margin:20px 0 50px;}
	.sec04 .biWrap { display:block;}
	.sec04 .biWrap .img { width:70%; margin:0 0 30px;}
	.sec04 .biWrap .img:after { display:none;}
	.sec04 .biWrap h2 { margin-bottom:10px; font-size:16px;}
	.sec04 .biWrap .text { font-size:14px;}
	.sec04 .biWrap .text br { display:none;}
	.sec04 .colorWrap { display:block;}
	.sec04 .colorText { float:left; width:50%; animation-delay: 0ms !important; margin-bottom:20px;}
	.sec04 .colorText + .colorText { margin-top:00px;}
	.sec04 .colorText > span { display:block; margin-bottom:10px;}
	.sec04 .colorText p { display:inline-block; margin-top:0; margin-left:10px;}
	
	.sec05 { overflow:hidden; margin-top:30px !important; background:none;}
	.sec05:before,
	.sec05:after { display:none;}
	.sec05:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:auto; padding-top:85%; background: url(../images/bg_sec05.jpg) no-repeat center center; background-size: cover;}
	.sec05 .textBox { display:block; position:relative; width:100%; height:auto; margin-top:85%; padding:40px 20px;}
	.sec05 .textBox h1 { margin-top:0; font-size:25px;}
	.sec05 .textBox p { font-size:12px; margin-top:65px;}
	
	.sec06 .list { display:block;}
	.sec06 .list > div { display:block; width:100%;}
	.sec06 .list .img { padding-top:100%;}
	.sec06 .list .imgText { height:60px; font-size:12px;}
	
	.sec07 { margin-bottom:0;}
	.sec07 .innerBox { top:0; transform:translateY(0);}
	.sec07 .btnMore { width:200px; height:40px; line-height:40px; margin:50px 0 0;}
	.sec07 .arrowBtn .btnLeft, .sec07 .arrowBtn .btnRight { width:40px; height:40px;}
	.sec07 .list .slick-slide { width:320px;}
	.sec07 .list .img span { top:20px; left:20px; width:50px; height:50px; font-size:12px;vertical-align:middle;}
	.sec07 .list .img span.type2 { padding-top:17px; top:20px;}
	.sec07 .list .textBox { padding:0 20px; margin-top:30px; margin-bottom:100px;}
	.sec07 .list .date { font-size:18px; color:#111;}
	.sec07 .list .title { margin-top:20px; font-size:15px;}
	.sec07 .list .text { font-size:12px; margin-top:15px;}
	.sec07 .list .phone{ font-size:17px;}
	
	#footerWrap { position:static; height:auto; transform:none;}
	#footerWrap .innerBox { top:0; padding:40px 20px; transform:none;}
	#footerWrap .logo { display:block; position:static; width:101px; height:17.5px; transform:none;}
	#footerWrap .textBox { margin-left:0; margin-top:20px;}
	#footerWrap .text { font-size:12px;}
	#footerWrap .btnGroup { top:20px; transform:none;}
	#footerWrap .btnGroup > a { width:150px; height:40px; padding-left:10px; font-size:12px; line-height:40px;}
	#footerWrap .btnGroup > a:after { right:20px;}
	#footerWrap .btnGroup .sub { bottom:40px;}
	#footerWrap .btnGroup .sub a { width:150px; height:40px; padding-left:10px; font-size:12px; line-height:40px;}
	#footerWrap .btnGroup .sub a:after { right:20px;}
}