@charset "utf-8";

/*******************************************************
	Animation CSS
*******************************************************/

@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}@keyframes slide-top{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}

/*******************************************************
	Common Custom
*******************************************************/

#wrap {padding:0;}
#fp-nav ul li a span {background:#000;}
.fp-viewing-0 #fp-nav ul li a span {background:#fff;}
.fp-viewing-1 #fp-nav ul li a span {background:#ccc;}

.section {position:relative;}
.section .inner {max-width:1440px;}
.section .fp-tableCell {padding-top:5em;}
.sec-inner {padding-left:1em; padding-right:1em;}
@media all and (max-width:1024px) {
	.section .fp-tableCell {padding-top:4em;}
}
@media all and (max-width:480px) {
	.sec-inner {padding-left:.5em; padding-right:.5em;}	
}

.slogunPcArea {position:fixed; left:0; right:0; bottom:0; margin:0; z-index:1; transform:translateY(100%); -webkit-transform:translateY(100%); transition:.3s all; -webkit-transition:.3s all;}

.bakVideoArea {position:fixed; top:0; left:0; right:0; bottom:0; background:#173187; z-index:-1; overflow:hidden;}
.bakVideoArea .frame {position:relative; height:100%; padding:5em 2.5em 2.5em; box-sizing:border-box; z-index:0;}
.bakVideoArea .frame .in {position:relative; border-radius:1em; height:100%; overflow:hidden;}
.bakVideoArea .frame .in > div:not(.video) {display:block; position:absolute; width:100vw; height:auto; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
/*.bakVideoArea .frame .in > div.video-container {width:100vw !important; height:100vh !important;}*/
.bakVideoArea video {display:block; position:relative; width:100%; z-index:0;}
body:not(.fp-viewing-0):not(.fp-viewing-1) .bakVideoArea {visibility:hidden; opacity:0;}
body:not(.fp-viewing-0) #main_fullpage {background:url(../img/main/bak_resource.png) no-repeat 50% 100% #fff; background-size:100% auto;}

@media screen and (max-aspect-ratio:1280/720) {
 	.bakVideoArea .frame .in > div:not(.video) {width:auto; height:100vh;}
 	.bakVideoArea video {width:auto; height:100%;}
}
@media all and (max-width:1790px) {
	.bakVideoArea .frame {padding:5em 1em 1em;}
}
@media all and (max-width:1024px) {
	.bakVideoArea {padding:4em 1em 2em; bottom:auto;}
	.bakVideoArea .frame {padding:0;}
	.bakVideoArea .frame:before {content:""; display:block; position:Relative; padding-top:56.25%; z-index:-1;}
	.bakVideoArea .frame .in {position:absolute; top:0; left:0; right:0; bottom:0; height:auto;}
	.bakVideoArea .frame .in > div.poster {width:100% !important; height:100% !important;}
	
	body:not(.fp-viewing-0):not(.fp-viewing-1) #main_fullpage {background-image:url(../img/main/bak_resource_mo.png);}
}
@media all and (max-width:480px) {
	.bakVideoArea {padding-left:.5em; padding-right:.5em;}
}

body.fp-viewing-1[data-secion-ci-index="2"] .slogunBelt {transform:translateY(0); -webkit-transform:translateY(0);}


@media all and (max-width:1024px) {
	.fullpage-wrapper,
	.fp-section:not(.mo-full),
	.fp-section:not(.mo-full) .fp-tableCell,
	.fp-section:not(.mo-full) .fp-scrollable {height:auto !important; min-height:0 !important;}
}

.more a {display:inline-block; position:relative; width:8.6em; height:2em; text-indent:-999px; background:url(../img/main/btn_more.svg) no-repeat 50% 50%; background-size:contain; overflow:hidden;}


/*******************************************************
	Footer Custom
*******************************************************/

#footerarea {padding:0 1em; height:auto !important; min-height:0 !important; margin-top:0 !important; background:transparent;}
#footerarea .fp-tableCell {padding-top:0 !important;}
#footerarea > * {height:auto !important;}
#footerWrap {margin-top:0;}
#footerWrap .inner {max-width:1700px !important;}
@media all and (max-width:1024px) {
	#footerarea,
	#footerarea > * {height:auto !important;}
}


/**********************************************************
	Header Style
**********************************************************/

#headerWrap {transition:.3s transform; -webkit-transition:.3s -webkit-transform;}

#headerWrap .goto-home:before {background-position:top -2.6em left -1em;}
#headerWrap .goto-home span {color:#0094FF;}

body:not(.fp-viewing-0) #headerWrap:before {background:#fff;}
body:not(.fp-viewing-0) #headerWrap .logo a {background-image:url(../img/common/logo.png);}
body:not(.fp-viewing-0) #lnb > li > a > * {color:#111;}
body:not(.fp-viewing-0) #lnbWrap:before {content:""; display:block; position:absolute; left:50%; top:5em; width:100vw; height:1px; margin-top:-1px; margin-left:-50vw; background:#E0E6EC; z-index:-1;}
body:not(.fp-viewing-0) #headerWrap .control-menu {background-position:-12.5em -1.1em;}

@media all and (min-width:1025px) {
	body.fp-viewing-1 #headerWrap {transform:translateY(-100%); -webkit-transform:translateY(-100%);}
}


/**********************************************************
	Section 1 : Visual (Intro Area)
**********************************************************/

#intro_section {position:relative; background:transparent; padding:0;}
#intro_section .frame {position:relative; height:100%; padding:0 2.5em 2.5em; box-sizing:border-box; z-index:0;}
#intro_section .frame > .in {position:relative; height:100%;}

#intro_section .txtArea .in {position:absolute; top:3em; left:3em; right:3em; bottom:3em; color:#fff; z-index:1;}
#intro_section .txtArea h2 {display:inline-block; position:relative; font-weight:800; font-family:'Raleway', sans-serif; font-size:3em; line-height:1.3em; margin-bottom:.4em; background:rgba(000,000,000,.15); padding:1em; border-radius:0.3em;}
#intro_section .txtArea p {display:block; position:relative; font-size:.9em; font-weight:300;}
#intro_section .control {display:block; position:absolute; right:3em; top:3em; z-index:1;}
#intro_section .control a {display:inline-block; position:relative; background:rgba(000,000,000,.3); border-radius:9em; padding:.6em 1.5em; width:8em;}
#intro_section .control a span {display:block; position:relative; font-size:.9em; color:#fff; line-height:1.445em;}
#intro_section .control a:after {content:""; display:block; position:absolute; width:1.2em; height:1.2em; top:50%; right:1.2em; margin-top:-.6em; background:no-repeat 50% 50%; background-size:contain;}
#intro_section .control a.play:after {background-image:url(../img/main/ico_play.svg);}
#intro_section .control a.stop:after {background-image:url(../img/main/ico_stop.svg);}
#intro_section .control a.play {display:none;}

#intro_section .contactUs {display:block; position:absolute; right:2.5em; bottom:2.5em; width:6.5em; height:6.5em; z-index:1;}
#intro_section .contactUs a {display:block; position:relative; width:100%; height:100%; text-indent:-999px; z-index:0; overflow:hidden;}
#intro_section .contactUs a:before,
#intro_section .contactUs a:after {content:""; display:block; position:absolute;}
#intro_section .contactUs a:before {top:0; left:0; right:0; bottom:0; background:url(../img/main/bak_contact_us.svg) no-repeat 50% 50%; background-size:contain; -webkit-animation:rotate-center 5s linear infinite both; animation:rotate-center 5s linear infinite both;}
#intro_section .contactUs a:after {top:50%; left:50%; margin:-1.25em 0 0 -1.25em; width:2.5em; height:2.5em; background:url(../img/main/ico_contact_us.png) no-repeat 50% 50%; background-size:contain;}

#intro_section .news {display:block; position:absolute; bottom:2.5em; left:0; width:23em; box-sizing:border-box; z-index:10;}
#intro_section .news a.more {display:block; position:relative; width:100%; height:100%; padding:.55em; border-bottom:2px solid #fff; color:#fff; font-size:1.35em; font-weight:700;}
#intro_section .news a.more span {display:block; float:right; margin-left:1em; margin-top:0.27em; font-size:.7em; font-weight:500;}
#intro_section .news a.more span:after {content:''; display:inline-block; width:.635em; height:.635em; margin-left:.45em; background:url(/knext-assets/img/main/news_btn_more.svg) no-repeat; background-size:contain;}


@media all and (max-width:1790px) {
	#intro_section .frame {padding:0 1em 1em;}
	#intro_section:before {bottom:1em; left:1em; right:1em;}
	#intro_section:after {height:1em;}
}
/* 데스크톱(≥1025px) 인트로 오버레이(타이틀·STOP·news)를 고정 헤더(5em) 밑으로 오프셋 —
 * 배경 영상 .bakVideoArea .frame(padding-top:5em)과 동일 논리. 위 max-width:1790 규칙이
 * padding:0 으로 덮으므로 그 뒤에서 데스크톱만 top 을 복원(모바일 ≤1024 는 top:0 현행 유지). */
@media all and (min-width:1025px) {
	#intro_section .frame {padding-top:5em;}
}
@media all and (max-width:1534px) {
	#intro_section .txtArea .in {width:auto; margin-left:0; left:3em; right:3em;}
}
@media all and (max-width:1024px) {
	#intro_section:before {bottom:2em;}
	#intro_section:after {height:2em;}
	#intro_section .frame {padding-bottom:2em;}
	#intro_section .frame > .in {z-index:0;}
	#intro_section .frame > .in:before {content:""; display:block; position:relative; padding-top:56.25%; z-index:-1;}
	
	#intro_section .txtArea .in {position:static; top:auto; right:auto; transform:none; -webkit-transform:none;}
	#intro_section .txtArea h2,
	#intro_section .txtArea p {display:none;}
	#intro_section .control {position:absolute; bottom:2em; left:2em; margin:0;}
	
	#intro_section .contactUs {right:1em; bottom:1em; font-size:.8907em;}
	
	#intro_section .news {width:auto; left:2em;}
	#intro_section .news a.more {font-size:1em;}
	
}
@media all and (max-width:640px) {
	#intro_section .control {top:1em; left:1em;}
	#intro_section .contactUs {font-size:.7em;}
	#intro_section .news {left:1em; bottom:1.5em;}
	#intro_section .news a.more span {float:none; margin-top:1em; margin-left:0; }
}
@media all and (max-width:480px) {
	#intro_section .frame {padding:0 .5em 2em;}
}


/**********************************************************
	Section 2 : CI
**********************************************************/

#ci_section {background:url(../img/main/bak_bg.jpg) no-repeat 50% 50%; background-size:cover; overflow:hidden; padding:0;}

#ci_section .fp-tableCell {transition:.5s all; -webkit-transition:.5s all; transition-delay:.5s; -webkit-transition-delay:.5s;}
body.fp-viewing-0 #ci_section .fp-tableCell {transform:translateY(20%); -webkit-transform:translateY(20%); opacity:0;}

#ci_section .CIAniGroup {text-align:center;}
#ci_section .CIAniGroup .ani {transition:.4s all; -webkit-transition:.4s all;}

#ci_section .vis {position:absolute; left:0; right:0; bottom:50%; margin-bottom:2em;}
#ci_section .slogun {display:block; position:relative; width:10.5em; height:2em; overflow:hidden; text-indent:-999px; background:url(../img/main/txt_sub_title.svg) no-repeat 50% 50%; background-size:100% auto; margin:0 auto;}
#ci_section .logo {display:block; height:5.5em; overflow:hidden; white-space:nowrap;}
#ci_section .logo > * {display:inline-block; position:relative; height:5.5em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:auto 100%;}
#ci_section .logo .ci {width:8em; background-image:url(../img/main/txt_logo_1.svg);}
#ci_section .logo .txt {width:30.5em; background-image:url(../img/main/txt_logo_2.svg);}
#ci_section .desc {position:absolute; left:0; right:0; top:50%; bottom:0; margin-top:-2.5em; padding-left:1em; padding-right:1em; background:#fff; color:#111; z-index:0; overflow:hidden;}
#ci_section .desc .inner {display:block; position:relative; max-width:1480px; padding:2.5em 0 4em;}
#ci_section .desc .inner span {display:block; position:relative; color:#111; font-size:.85em; line-height:2em; min-height:10.64em;}
#ci_section .desc .inner span i {display:block; font-size:1.2em; font-weight:bold;}
#ci_section .desc .more {display:block; position:relative; text-align:center; margin-top:1em;}

#ci_section .slogunBelt {position:absolute; left:0; right:0; bottom:0; z-index:1;}

/*	Animation Effect  */
@media all and (min-width:1025px) {
	#ci_section:not([data-index="2"]) .desc {top:100%; margin:0; opacity:0;}
	#ci_section:not([data-index="2"]) .slogunBelt {transform:translateY(100%); -webkit-transform:translateY(100%);}
	
	#ci_section[data-index="0"] .vis {margin-bottom:-2.75em;}
	#ci_section[data-index="0"] .slogun {height:0;}
	#ci_section[data-index="0"] .logo .txt {width:0;}
	
	#ci_section[data-index="1"] .vis {margin-bottom:-2.75em;}	
}
@media all and (max-width:1024px) {
	#ci_section .fp-tableCell {padding-top:0;}
	#ci_section .vis {position:relative; bottom:auto; padding-top:10.36em; margin-bottom:0;}
	#ci_section .desc {position:Relative; top:auto; bottom:auto; margin-top:-5px;}
	#ci_section .slogunBelt {position:relative; margin:0;}
}
@media all and (max-width:750px) {
	#ci_section .vis {font-size:.8em;}
}
@media all and (max-width:550px) {
	#ci_section .vis {font-size:.5em;}
}


/**********************************************************
	Section 3 : Partners
**********************************************************/

#partner_section {z-index:0; overflow:hidden; background:transparent;}
#partner_section:before {content:""; display:block; position:absolute; top:18.3em; left:0; width:42em; height:30em; background:url(../img/main/bak_partner.svg) no-repeat 50% 50%; background-size:contain; z-index:-1;}
#partner_section .fp-tableCell {padding-top:0;}
#partner_section .sec-inner {padding-top:5em;}
@media all and (max-width:1024px) {
	#partner_section .sec-inner {padding-top:4em;}
}

.partnersSlider {position:absolute; top:0; height:58.5em; right:50%; margin-right:-720px; z-index:1;}
.partnersSlider > * {display:block; position:relative; width:15.4em; height:100%; float:left; padding:0 1.2em; overflow:hidden;}
.partnersSlider .slick-list {height:100% !important; overflow:visible;}
.partnersSlider .slick-list {margin-top:-3.25em;}
.partnersSlider .slick-track {transition-timing-function:linear !important; -webkit-transition-timing-function:linear !important;}
.partnersSlider #partnerSliderUp {transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.partnersSlider #partnerSliderUp .slick-list .slick-slide > * {transform:rotate(-180deg); -webkit-transform:rotate(-180deg);}
.partnersSlider .slick-list .slick-slide {padding:.75em 0;}
.partnersSlider .slick-list .slick-slide a {display:block; position:relative; padding:.5em; height:5em; background:#fff; border-radius:.5em; -webkit-box-shadow:0 0 1em 0 rgba(0,0,0,0.05); -moz-box-shadow:0 0 1em 0 rgba(0,0,0,0.05); box-shadow:0 0 1em 0 rgba(0,0,0,0.05);}
.partnersSlider .slick-list .slick-slide a img {display:block; position:relative; border-radius:.5em; height:100%; max-width:300%; margin:0 auto;}
.partnersSlider .slick-list .slick-slide a:hover,
.partnersSlider .slick-list .slick-slide a:focus {background:#00388B;}
.partnersSlider .slick-list .slick-slide a:hover img,
.partnersSlider .slick-list .slick-slide a:focus img {-webkit-filter:brightness(0) invert(1); filter:brightness(0) invert(1);}
@media all and (max-width:1440px) {
	.partnersSlider {right:0; margin-right:0;}
}
@media all and (max-width:1260px) {
	.partnersSlider {font-size:.9em;}
}
@media all and (max-width:1130px) {
	.partnersSlider {font-size:.7em;}
}
@media all and (max-width:1024px) {
	.partnersSlider {font-size:1em; position:relative; margin:0 -1em; height:auto; right:auto; margin-bottom:5em;}
	.partnersSlider > * {width:auto; float:none; height:auto;}
	.partnersSlider .slick-list {height:auto !important;  margin-top:0;}
	.partnersSlider .slick-track {width:15.2em; padding:0 .75em;}
	.partnersSlider .slick-list .slick-slide {padding:.75em;}
}
@media all and (max-width:640px) {
	.partnersSlider .slick-list .slick-slide a {height:5em;}
}


.partnerArea {display:block; position:relative; height:26em; margin-right:28.5em;}
.partnerArea .in {display:table; width:100%; height:100%;}
.partnerArea .in > * {display:table-cell; vertical-align:middle;}
.partnerArea .tit {display:block; position:relative; margin-bottom:5em;}
.partnerArea .tit > * {display:block; position:relative;}
.partnerArea .tit span {font-weight:800; color:#00388B; padding-left:1em; margin-bottom:1.1em;}
.partnerArea .tit span:before {content:""; display:block; position:absolute; width:.5em; height:.5em; border-radius:100%; background:#00388B; left:0; top:50%; margin-top:-.25em;}
.partnerArea .tit strong {font-family:'Raleway', sans-serif; font-size:2.5em; color:#000; font-weight:800; line-height:1.3em;}
.partnerArea .tit em {color:#00388B !important;}

@media all and (max-width:1260px) {
	.partnerArea {margin-right:27em;}
}
@media all and (max-width:1130px) {
	.partnerArea {margin-right:22em;}
}
@media all and (max-width:1024px) {
	.partnerArea {margin-right:0; height:auto;}
	.partnerArea .in,
	.partnerArea .txt {display:block;}
	.partnerArea .txt {margin-bottom:5em;}
	.partnerArea .tit {position:relative; margin:0;}
	.partnerArea .more {position:absolute; right:0; bottom:0;}

	.keyFrigureAreaTitle {display:block; position:relative; margin-bottom:5em;}
	.keyFrigureAreaTitle > * {display:block; position:relative;}
	.keyFrigureAreaTitle span {font-weight:800; color:#111; padding-left:1em; margin-bottom:1.1em;}
	.keyFrigureAreaTitle span:before {content:""; display:block; position:absolute; width:.5em; height:.5em; border-radius:100%; background:#00388B; left:0; top:50%; margin-top:-.25em;}
	.keyFrigureAreaTitle strong {font-family:'Raleway', sans-serif; font-size:2.5em; color:#000; font-weight:800; line-height:1.3em;}
	.keyFrigureAreaTitle em {color:#009BE2 !important;}
}
@media all and (max-width:680px) {
	.partnerArea .more {position:relative; text-align:center; margin-top:1em;}
}
@media all and (max-width:640px) {
	.partnerArea .txt {margin-bottom:3em;}
	.keyFrigureAreaTitle {margin-bottom:3em;}
	.partnerArea .tit strong,
	.keyFrigureAreaTitle strong {font-size:2.1em;}
	.partnerArea .tit strong br,
	.keyFrigureAreaTitle strong br {display:none !important;}
}




.keyFiguresArea {display:flex; flex-wrap:nowrap; position:relative; padding:0 4em; flex-direction:row-reverse; z-index:5; background:url(../img/main/bak_keyfigures.png) no-repeat 50% 50% #000; background-size:cover; height:24em; border-radius:1em;}
.keyFiguresArea > * {display:block; position:relative; flex-grow:1; width:20.5em; color:#fff; border-left:1px solid rgba(255,255,255,.15);}
.keyFiguresArea > *:before {content:""; display:block; position:absolute; width:3px; height:1.5em; left:-2px; top:5em; background:#D9D9D9;}
.keyFiguresArea .in {display:block; position:relative; padding:5em 2.5em 2em;}
.keyFiguresArea .title {width:42em; padding-top:4.5em; text-align:right;}
.keyFiguresArea .title:before {display:none;}
.keyFiguresArea .title > * {display:inline-block; position:relative; padding-right:0; text-align:left;}
.keyFiguresArea .title span,
.keyFiguresArea .title strong {display:block; position:relative;}
.keyFiguresArea .title span {padding-left:1em; font-weight:800; margin-bottom:1.5em;}
.keyFiguresArea .title span:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-.25em; width:.5em; height:.5em; border-radius:100%; background:#fff;}
.keyFiguresArea .title strong {font-family:'Raleway', sans-serif; font-size:2.5em; line-height:1.3em; font-weight:800;}
.keyFiguresArea .title strong em {color:#009BE2;}

.keyFiguresArea .descript p {min-height:12.5em; margin-bottom:.5em;}
.keyFiguresArea .descript p strong {display:block; position:relative; font-family:'Raleway', sans-serif; font-size:1.4em; font-weight:700; margin-bottom:1em;}
.keyFiguresArea .descript p span {display:block; position:relative; font-size:.8em; opacity:.6; line-height:1.5em; font-weight:300;}
.keyFiguresArea .descript a {display:inline-block; position:relative; width:8.75em; max-width:100%; padding:0 1em; color:#fff; font-weight:600; z-index:0;}
.keyFiguresArea .descript a:before,
.keyFiguresArea .descript a:after {content:""; display:block; position:absolute;}
.keyFiguresArea .descript a:before {top:0; left:0; right:0; bottom:0; border:1px solid rgba(255,255,255,.4); z-index:-1;}
.keyFiguresArea .descript a:after {width:1.2em; height:1.2em; top:50%; right:1em; margin-top:-.6em; background:url(../img/common/ico_figure.svg) no-repeat 50% 50%; background-size:contain;}
.keyFiguresArea .descript a span {display:block; position:relative; height:auto; font-size:.9em; opacity:1; line-height:2.77778em; min-height:0; margin:0; font-weight:700;}
.keyFiguresArea .descript a:hover:before,
.keyFiguresArea .descript a:focus:before {border-color:#009BE2; background:#009BE2;}

@media all and (max-width:1570px) {
	.keyFiguresArea {padding-left:3em; padding-right:3em;}
	.keyFiguresArea .title {width:30em;}
}
@media all and (max-width:1230px) {
	.keyFiguresArea > *:before {top:3em;}
	.keyFiguresArea .in {padding:3em 1.5em 1.5em;}
	.keyFiguresArea .title > * {padding-top:2em;}
	.keyFiguresArea .title strong {line-height:1.1em;}
	.keyFiguresArea .descript p {min-height:15.5em;}
}
@media all and (max-width:1024px) {
	.keyFiguresArea {display:block; height:auto; padding:0;}
	.keyFiguresArea > * {width:auto; border:none}
	.keyFiguresArea > * + * {border-top:1px solid rgba(255,255,255,.15);}
	.keyFiguresArea > *:before {display:none;}
	.keyFiguresArea .descript {text-align:center; padding:3.33em 1em;}
	.keyFiguresArea .descript .in {padding:0;}
	.keyFiguresArea .descript p {min-height:0; text-align:center; margin:0;}
	.keyFiguresArea .descript p span {display:none;}
}



/**********************************************************
	Section 4 : Resource
**********************************************************/

#resource_section {height:auto !important; min-height:0 !important; background:transparent;}
#resource_section:before,
#resource_section:after {content:""; display:block; position:absolute; background:no-repeat 50% 50%; background-size:contain; -webkit-animation:slide-top .7s cubic-bezier(.25,.46,.45,.94) infinite alternate both; animation:slide-top .7s cubic-bezier(.25,.46,.45,.94) infinite alternate both;}
#resource_section:before {top:8.5em; left:50%; margin-left:-790px;; width:5.25em; height:5.25em; background-image:url(../img/main/bak_resource_01.png); animation-delay:-2.3s; -webkit-animation-delay:-2.3s;}
#resource_section:after {top:26.3em; right:-2.15em; width:4.35em; height:4.4em; background-image:url(../img/main/bak_resource_02.png);}
#resource_section .fp-tableCell {padding:4.5em 1em 5em; height:auto !important;}

#resource_section .resourceSlider {height:31em;} 

#resource_section .tit {display:block; position:relative; line-height:1.4em; font-size:2.5em; color:#111; font-family:'Raleway', sans-serif; text-align:center; margin-bottom:.5em; font-weight:800;}
#resource_section .tit strong {font-weight:800;}
#resource_section .control {display:flex; position:relative; margin:0 auto 4em; justify-content:center; align-items:center;}
#resource_section .control > * + * {margin-left:1.5em;}
#resource_section .control button {display:block; position:relative; height:1.2em; width:1.2em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain;}
#resource_section .control button.prev {width:1.5em; background-image:url(../img/main/ico_prev.svg);}
#resource_section .control button.next {width:1.5em; background-image:url(../img/main/ico_next.svg);}
#resource_section .control button.stop {background-image:url(../img/main/ico_stop_b.svg);}
#resource_section .control button.play {background-image:url(../img/main/ico_play_b.svg); display:none;}
#resource_section .pagerArea {display:flex; justify-content:center; align-items:center;}
#resource_section .pagerArea .now,
#resource_section .pagerArea .total {font-size:.9em; color:#222; font-weight:700; min-width:1.5em; text-align:center;}
#resource_section .pagerArea .pager {margin:0 1.5em; display:block; position:relative; width:5em; height:3px; background:#eaeaea; border-radius:9em; overflow:hidden;}
#resource_section .pagerArea .pager span {background:#0098A1 !important; border-radius:9em;}
#resource_section .more {position:absolute; right:0; top:4.15em;}
#resource_section .more a {width:8.9em; background-image:url(../img/main/btn_more2.svg);}

#resource_section .slider {display:block; position:relative; /*width:21.5em;*/ width:64.5em; max-width:100%; margin:0 auto;}
#resource_section .swiper-container {overflow:visible;}
#resource_section .swiper-slide .scale {position:relative; text-align:center; transition:.3s all; -webkit-transition:.3s all;}


#resource_section .catalog {display:inline-block; position:relative; z-index:0; width:14.2em; padding:0 1.85em; transition:.3s all;-webkit-transition:.3s all;}
#resource_section .catalog .cate {display:block; position:absolute; top:0; right:.5em; z-index:1;}
#resource_section .catalog .cate span {display:block; position:absolute; white-space:nowrap; top:0; left:0; width:100%; font-size:.7em; color:#222; font-weight:400; padding-left:2.35em; text-align:left; transform:rotate(90deg); -webkit-transform:rotate(90deg); transform-origin:0 0; -webkit-transform-origin:0 0;}
#resource_section .catalog .cate span:before {content:""; display:block; position:absolute; left:1em; top:50%; margin-top:-.28571425em; width:.571428em; height:.571428em; border-radius:100%; background:#0098A1;}
#resource_section .catalog .thumb {display:block; position:relative; width:100%; border-radius:.5em; overflow:hidden; margin:0 auto .6em; z-index:1; -webkit-box-shadow:0 0 1em 0 rgba(0,0,0,0.2); -moz-box-shadow:0 0 1em 0 rgba(0,0,0,0.2); box-shadow:0 0 1em 0 rgba(0,0,0,0.2);}
#resource_section .catalog .thumb:before {content:""; display:block; position:relative; padding-top:141.4285714285714%;}
#resource_section .catalog .thumb img {display:block; position:absolute; top:0; left:50%; height:100%; transform:translateX(-50%);-webkit-transform:translateX(-50%);}
#resource_section .catalog .desc {display:block; position:relative; text-align:center; z-index:0;}
#resource_section .catalog .desc strong {display:block; position:relative; font-size:.9em; color:#111; font-weight:600; margin-bottom:1.33em;}
#resource_section .catalog .desc a {display:none; height:3.4em; line-height:3.2em;}
#resource_section .catalog .desc a span {color:#fff; font-size:.85em; font-weight:400;}
#resource_section .catalog .desc a:after {content:""; display:inline-block; margin-left:.5em; width:1.024em; height:1.024em; vertical-align:middle; background:url(../img/common/ico_blank_white.svg) no-repeat 50% 50%; background-size:contain;}
#resource_section .catalog .desc .bak {display:block; position:absolute; bottom:0; left:50%; margin-left:-10.75em; width:21.5em; height:21.5em; background:#0098A1; border-radius:100%; overflow:hidden; z-index:-1; transform:scale(0); -webkit-transform:scale(0); transform-origin:50% 100%; -webkit-transform-origin:50% 100%; transition:.3s all; -webkit-transition:.3s all;}
#resource_section .catalog .desc .bak:before {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:3.4em; background:rgba(0,0,0,.2);}

#resource_section .swiper-slide-active .catalog .desc strong {color:#fff;}
#resource_section .swiper-slide-active .catalog .desc a {display:block;}

@media all and (max-width:1024px) {
	#resource_section .slider {width:22.63em;}
}
@media all and (min-width:641px) {
	#resource_section .swiper-slide:not(.swiper-slide-active) .scale {transform:scale(.7); -webkit-transform:scale(.7);}
	#resource_section .swiper-slide:not(.swiper-slide-active) .catalog {transform:scale(1.42857142857); -webkit-transform:scale(1.42857142857);}
	#resource_section .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.first):not(.swiper-slide-next):not(.last) {visibility:hidden;}
	
	#resource_section .swiper-slide.last .catalog,
	#resource_section .swiper-slide.swiper-slide-prev .catalog {margin-top:3.9em;}
	#resource_section .swiper-slide.first .catalog,
	#resource_section .swiper-slide.swiper-slide-next .catalog {margin-top:7.4em;}
	
	#resource_section .swiper-slide.first .scale {margin-right:-80%;}
	#resource_section .swiper-slide.swiper-slide-prev .scale {margin-right:-20%;}
	#resource_section .swiper-slide.last .scale {margin-left:-80%;}
	#resource_section .swiper-slide.swiper-slide-next .scale {margin-left:-20%;}
	
	#resource_section .swiper-slide-active .catalog {width:16.6em;}
	#resource_section .swiper-slide-active .catalog .thumb {margin-bottom:.9em;}
	#resource_section .swiper-slide-active .catalog .desc .bak {transform:scale(1);-webkit-transform:scale(1); transition-delay:.3s; -webkit-transition-delay:.3s;}
}
@media all and (max-width:640px) {
	#resource_section .resourceSlider {height:auto;}
	#resource_section .slider {width:auto; margin:0 -1em; max-width:inherit;}
	#resource_section .more {position:relative; top:auto; right:auto; text-align:center; margin-top:1.8em;}
	
	#resource_section .slider:before {content:""; display:block; position:absolute; bottom:0; left:0; right:0; top:8.2em; background:#0098A1; z-index:-1;}
	#resource_section .slider:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:3.4em; background:rgba(0,0,0,.2);}
	
	#resource_section .catalog {width:17em;}
	#resource_section .catalog .desc .bak {display:none !important;}
}