@charset "utf-8";
/*메인 배너 비주얼*/
.banner-area { position: relative; }
.banner-area .banner { width: 1280px; padding: 220px 50px; margin: 0 auto; }
.banner-area .banner .banner-header { color: #fff; font-size: 4rem; font-weight: 100; letter-spacing: -2px; line-height: 60px; margin-bottom: 80px; text-shadow: 0 0 5px rgba(0,0,0,0.1); }
.banner-area .banner .banner-header .en { letter-spacing: 0; }
.banner-area .banner .banner-txt { color: #fff; font-size: 2rem; font-weight: 500; text-shadow: 0 0 5px rgba(0,0,0,0.1); }
.banner-area .banner .banner-txt .imp { color: #ffdf0a; }

.banner-area .banner .btn-wrap { margin-top: 80px; }
.banner-area .banner .btn-wrap .banner-btn { height: 45px; display: inline-block; line-height: 45px; color: #fff; letter-spacing: 0; padding: 0 45px; border-radius: 30px; margin-right: 10px; float: left; }
.banner-area .banner .btn-wrap .banner-btn:last-child { margin-right: 0; }
.banner-area .banner .btn-wrap .banner-btn.start-btn { background: #001ad9; font-weight: 500; box-shadow: 0 10px 20px 0px rgba(0,0,0,0.3); transition: background .25s ease; }
.banner-area .banner .btn-wrap .banner-btn.start-btn:hover { background: #0017C1; }
.banner-area .banner .btn-wrap .banner-btn.trs-btn { border: 1px solid rgba(255,255,255,0.5); line-height: 43px; }
.banner-area .table-cell { position: relative; z-index: 3; }
.banner-area .banner-bg { position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; }
.banner-area .banner-bg video { position: absolute; z-index: 1; min-width: 100%; min-height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }

@media all and (max-width: 1279px)
{
	.banner-area .banner { width: 100%; padding:  250px 30px; }
}

@media all and (max-width: 639px)
{
	.banner-area .banner { text-align: center; }
	.banner-area .banner .banner-header { line-height: 48px; margin-bottom: 50px; }
	.banner-area .banner .btn-wrap .banner-btn { float: none; }
	.banner-area .banner-bg { background: url(../img/common/main_bg.PNG); background-size: cover; background-position: center; }
	.banner-area .banner-bg video { display: none; }
}

/* 각 섹션 공통 */
.keyword-title { font-size: 3.2rem; line-height: 40px; letter-spacing: -1.5px; font-weight: 300; margin-bottom: 35px; }
.keyword-title .under { position: relative; font-weight: 600; }
.keyword-title .under:after { background: #222; width: 100%; position: absolute; height: 2px; left: 0; bottom: 0; content: ''; }
.key-text { font-size: 1.8rem; font-weight: 300; color: #555; line-height: 30px; letter-spacing: -1px; }

/* 퍼즐링이란 ? */
.section-area.section01 .section .section-content-area { padding: 110px 0; }
.section-area.section01 .section .section-content-area .img-area { float: left; width: 50%; }
.section-area.section01 .section .section-content-area .img-area .about-svg { width: 100%; }
.section-area.section01 .section .section-content-area .img-area img { display: none; }
.section-area.section01 .section .section-content-area .img-area.no-animation .about-svg { display: none; height: 0; overflow: hidden; }
.section-area.section01 .section .section-content-area .img-area.no-animation img { display: inline-block; width: 100%; vertical-align: top; }
.section-area.section01 .section .section-content-area .sliding-txt { float: right; width: 50%; position: relative; }
.section-area.section01 .section .section-content-area .sliding-txt .keyword { display: block; width: 152px; height: 21px; font-size: 2rem; font-weight: bold; margin-bottom: 40px; }

.section-area.section01 .section .section-content-area .sliding-txt>div { width: 100%; overflow: hidden; }
.section-area.section01 .section .section-content-area .sliding-txt ul.slide-list { white-space: nowrap; overflow: hidden; width: 301%; }
.section-area.section01 .section .section-content-area .sliding-txt ul.slide-list li { width: 33.3333%; transition: transform .5s ease-in-out; padding: 30px 110px; float: left; }
.section-area.section01 .section .section-content-area .sliding-txt.list01 ul.slide-list li { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
.section-area.section01 .section .section-content-area .sliding-txt.list02 ul.slide-list li { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); }
.section-area.section01 .section .section-content-area .sliding-txt.list03 ul.slide-list li { -webkit-transform: translate(-200%, 0); -ms-transform: translate(-200%, 0); transform: translate(-200%, 0); }

.section-area.section01 .section .section-content-area .sliding-txt ul.slide-navi { position: absolute; left: 110px; bottom: -20px; }
.section-area.section01 .section .section-content-area .sliding-txt ul.slide-navi li { float: left; width: 10px; height: 10px; cursor: pointer; border: 1px solid #555; border-radius: 50%; margin-right: 5px; transition: background .5s ease, border-color .5s ease; }
.section-area.section01 .section .section-content-area .sliding-txt ul.slide-navi li:last-child { margin-right: 0; }
.section-area.section01 .section .section-content-area .sliding-txt.list01 ul.slide-navi li:nth-child(1) { border-color: #001ad9; background: #001ad9; }
.section-area.section01 .section .section-content-area .sliding-txt.list02 ul.slide-navi li:nth-child(2) { border-color: #001ad9; background: #001ad9; }
.section-area.section01 .section .section-content-area .sliding-txt.list03 ul.slide-navi li:nth-child(3) { border-color: #001ad9; background: #001ad9; }

@media all and (max-width: 1279px)
{
	.section-area.section01 .section .section-content-area { padding: 50px 0; }
	.section-area.section01 .section .section-content-area .sliding-txt ul.slide-list li { padding: 30px 0 30px 50px; }
	.section-area.section01 .section .section-content-area .sliding-txt ul.slide-navi { left: 50px; }
	.section-area.section01 .section .section-content-area .img-area { width: 50%; }
	.section-area.section01 .section .section-content-area .sliding-txt { width: 50%; }
	.section-area.section01 .keyword-title,
	.section-area.section01 .key-text { word-break: break-all; white-space: pre-wrap; }
}
@media all and (max-width: 840px)
{
	.section-area.section01 .section .section-content-area .img-area { width: 40%; }
	.section-area.section01 .section .section-content-area .sliding-txt { width: 60%; }
}
@media all and (max-width: 639px)
{
	.section-area.section01 .section .section-content-area .img-area,
	.section-area.section01 .section .section-content-area .sliding-txt { width: 100%; }
	.section-area.section01 .section .section-content-area .sliding-txt ul.slide-list li { padding: 30px 0 30px 0;  }
	.section-area.section01 .section .section-content-area .img-area { padding: 0 50px 0 0; }
	.section-area.section01 .section .section-content-area .sliding-txt ul.slide-navi { left: 0; }
}

/* 특징 */
.section-area.section02 { background: #dee3eb; }
.section-area.section02 .section .section-content-area { position: relative; }
.section-area.section02 .section .section-content-area .key-text-area { position: absolute; top: 0; left: 0; width: 50%; z-index: 1; height: 174px; }
.section-area.section02 .section .section-content-area .box-wrap .box-container { width: 25%; float: left; height: 280px; position: relative; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: #f1f4f8; padding: 50px 40px; cursor: pointer; border-right: 1px solid #dee3eb; border-bottom: 1px solid #dee3eb; transition: background .25s ease,width .5s ease; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box:hover { background: #F7F9FB; }
.section-area.section02 .section .section-content-area .box-wrap .box-container:nth-child(4n) .box { left: auto; right: 0; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area { height: 110px; position: relative; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico { height: 100%; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico img { height: 100%; display: none; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico svg { height: 100%; width: auto; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico svg.normal { display: block; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico svg.onload { display: none; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box:hover .ico-area .key-ico svg.onload { display: block; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box:hover .ico-area .key-ico svg.normal { display: none; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico.no-animation svg { display: none!important; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box:hover .ico-area .key-ico.no-animation svg.onload { display: none; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box:hover .ico-area .key-ico.no-animation svg.normal { display: none; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .key-ico.no-animation img { display: block; }

.section-area.section02 .section .section-content-area .box-wrap .box-container .box .feature { font-weight: bold; font-size: 2rem; letter-spacing: -1.5px; display: block; overflow: hidden; text-overflow: ellipsis; width: 100%; white-space: nowrap; margin-bottom: 10px; transition: color .25s ease; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .exp { font-size: 1.6rem; color: #666; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; line-height: 21px; max-height: 42px; letter-spacing: -0.5px; transition: color .25s ease; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .plus-ico { width: 24px; height: 24px; position: absolute; right: 0; top: 0; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .plus-ico span { display: block; width: 100%; height: 100%; position: relative; transition: transform .5s ease; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .plus-ico span:after { position: absolute; width: 100%; height: 2px; background: #d1d1d1; content: ''; top: 50%; margin-top: -1px; transition: background .35s ease; }
.section-area.section02 .section .section-content-area .box-wrap .box-container .box .ico-area .plus-ico span:before { position: absolute; height: 100%; width: 2px; background: #d1d1d1; content: ''; left: 50%; margin-left: -1px; transition: background .35s ease; }

.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box { z-index: 2; background: #001ad9; width: 200%; height: 560px;}
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box:hover { background: #001ad9; }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .ico-area { height: 150px; }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .ico-area .plus-ico span { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .ico-area .plus-ico span:after { background: #fff; }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .ico-area .plus-ico span:before { background: #fff; }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .txt-area { margin-top: 15px; }
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .feature { color: #fff; font-weight: 500; font-size: 2.5rem;}
.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .exp { color: #fff; font-weight: 100; font-size: 1.7rem; text-overflow: inherit; overflow: inherit; display: block; line-height: 27px; letter-spacing: -0.2px; max-height: 270px; overflow: hidden;}
.section-area.section02 .section .section-content-area .box-wrap .box-container.select.bt-box .box { top: -280px; }

@media all and (max-width: 1279px)
{
	.section-area.section02 .section .section-content-area .box-wrap .box-container { height: 260px; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container .box { padding: 30px; transition: height .25s ease; }
}
@media all and (max-width: 1039px)
{
	.section-area.section02 .section .section-content-area .key-text-area { position: relative; width: 100%; margin-bottom: 50px; height: auto; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container:nth-child(1),
	.section-area.section02 .section .section-content-area .box-wrap .box-container:nth-child(2) { display: none; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container { width: 50%; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container:nth-child(2n) .box { left: auto; right: 0; }
}
@media all and (max-width: 599px)
{
	.section-area.section02 .section .section-content-area .key-text-area .key-text br { display: none; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container { width: 100%; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box { width: 100%; height: 125%; box-shadow: 0 15px 30px -15px rgba(0,0,0,0.5); border: none; }
	.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .feature { overflow: auto; white-space: normal; text-overflow: auto;  }
	.section-area.section02 .section .section-content-area .box-wrap .box-container.select .box .exp { display: block; text-overflow: auto; overflow: auto; max-height: none; }
}

/* 사례 */
.section-area.section03 { background: #263d62; }
.section-area.section03 .section .section-title-area .section-title { color: #fff; }
.section-area.section03 .section .section-title-area .section-title:after { background: #fff; }
.section-area.section03 .section .section-content-area { position: relative; padding: 80px 0; }
.section-area.section03 .section .section-content-area .slide-list { float: left; width: 740px; height: 520px; padding-left: 80px; overflow: hidden; }
.section-area.section03 .section .section-content-area .key-text-area { float: right; text-align: right; padding: 80px 0; width: 440px; }
.section-area.section03 .section .section-content-area .key-text-area .keyword-title { color: #fff; }
.section-area.section03 .section .section-content-area .key-text-area .keyword-title .under:after { background: #fff; }
.section-area.section03 .section .section-content-area .key-text-area .key-text { color: #fff; }
.section-area.section03 .section .section-content-area .slide-list ul { display: block; height: 100%; white-space: nowrap; }
.section-area.section03 .section .section-content-area .slide-list ul li { display: inline-block; height: 100%; width: 100%; position: relative; z-index: -1; opacity: 0; transition: opacity 1s ease, z-index .25s ease,transform .5s ease-in-out; }
.section-area.section03 .section .section-content-area.list01 .slide-list ul li:nth-child(1) { opacity: 1; z-index: 1; }
.section-area.section03 .section .section-content-area.list02 .slide-list ul li:nth-child(2) { opacity: 1; z-index: 1; }
.section-area.section03 .section .section-content-area.list03 .slide-list ul li:nth-child(3) { opacity: 1; z-index: 1; }
.section-area.section03 .section .section-content-area.list04 .slide-list ul li:nth-child(4) { opacity: 1; z-index: 1; }
.section-area.section03 .section .section-content-area.list05 .slide-list ul li:nth-child(5) { opacity: 1; z-index: 1; }

.section-area.section03 .section .section-content-area.list01 .slide-list ul li { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
.section-area.section03 .section .section-content-area.list02 .slide-list ul li { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); }
.section-area.section03 .section .section-content-area.list03 .slide-list ul li { -webkit-transform: translate(-200%, 0); -ms-transform: translate(-200%, 0); transform: translate(-200%, 0); }
.section-area.section03 .section .section-content-area.list04 .slide-list ul li { -webkit-transform: translate(-300%, 0); -ms-transform: translate(-300%, 0); transform: translate(-300%, 0); }
.section-area.section03 .section .section-content-area.list05 .slide-list ul li { -webkit-transform: translate(-400%, 0); -ms-transform: translate(-400%, 0); transform: translate(-400%, 0); }

.section-area.section03 .section .section-content-area .dot-navi { position: absolute; right: 0; bottom: 175px; }
.section-area.section03 .section .section-content-area .dot-navi ul li { border: 1px solid #ffffff; width: 10px; height: 10px; float: left; border-radius: 50%; margin-left: 5px; transition: background .25s ease; cursor: pointer; }
.section-area.section03 .section .section-content-area.list01 .dot-navi ul li:nth-child(1) { background: #fff; }
.section-area.section03 .section .section-content-area.list02 .dot-navi ul li:nth-child(2) { background: #fff; }
.section-area.section03 .section .section-content-area.list03 .dot-navi ul li:nth-child(3) { background: #fff; }
.section-area.section03 .section .section-content-area.list04 .dot-navi ul li:nth-child(4) { background: #fff; }
.section-area.section03 .section .section-content-area.list05 .dot-navi ul li:nth-child(5) { background: #fff; }

.section-area.section03 .section .section-content-area .slide-list ul li .img-area { width: 100%; height: 400px; overflow: hidden; }
.section-area.section03 .section .section-content-area .slide-list ul li .img-area img { width: 100%; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area { position: absolute; background: #fff; width: 100%; left: -65px; bottom: 0px; padding: 55px; box-shadow: 0 10px 30px 0 rgba(0,0,0,0.2); }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .logo-area { height: 40px; margin-bottom: 25px; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .logo-area img { height: 100%; width: auto; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .logo-area img.patentpia { height: 30px; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-key { font-size: 2.6rem; font-weight: 300; display: block; margin-bottom: 25px; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-key .imp { color: #001ad9; position: relative; font-weight: 600; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-key .imp:after { background: #001ad9; width: 100%; position: absolute; height: 2px; left: 0; bottom: 0; content: ''; }
.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-exp { font-size: 1.35rem; color: #666; font-weight: 400; letter-spacing: -1px; white-space: normal; }

.section-area.section03 .section .section-content-area .arrow-navi { position: absolute; width: 60px; height: 60px; background: rgba(0,0,0,0.3); border: none; transition: background .25s ease; cursor: pointer; top: 50%; margin-top: -30px; z-index: 2; outline: 0; }
.section-area.section03 .section .section-content-area .arrow-navi img { width: 10px; margin-top: 4px; opacity: .5; }
.section-area.section03 .section .section-content-area .arrow-navi:hover { background: rgba(0,0,0,0.5); }
.section-area.section03 .section .section-content-area .arrow-navi.left { left: -40px; }
.section-area.section03 .section .section-content-area .arrow-navi.right { right: -40px; }

@media all and (max-width: 1279px)
{
	.section-area.section03 .section .section-content-area  { padding: 50px 0; }
	.section-area.section03 .section .section-content-area .key-text-area { width: 100%; padding-top: 0; padding-bottom: 80px; text-align: left; }
	.section-area.section03 .section .section-content-area .slide-list { float: right; width: 100%; padding: 0 30px 0 80px; }
	
	.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-key { white-space: normal; }
	.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-exp { white-space: normal; }
	
	.section-area.section03 .section .section-content-area .dot-navi { left: 0; right: auto; bottom: auto; top: 250px; }
	
	.section-area.section03 .section .section-content-area .arrow-navi.left { left: 0; }
	.section-area.section03 .section .section-content-area .arrow-navi.right { right: 0; }
}
@media all and (max-width: 639px)
{
	.section-area.section03 .section .section-content-area .slide-list { padding: 0; }
	.section-area.section03 .section .section-content-area .slide-list ul li .txt-area { padding: 40px; left: 0; }
	.section-area.section03 .section .section-content-area .slide-list ul li .txt-area .case-exp br { display: none; }
}
/* 가이드 */
.section-area.section04 .section .section-content-area { padding: 50px 0; }
.section-area.section04 .section .section-content-area .key-text-area { text-align: center; }
.section-area.section04 .section .section-content-area .key-text-area .keyword-title { margin-bottom: 20px; }
.section-area.section04 .section .section-content-area .guide-type-select { text-align: center; margin: 30px 0; }
.section-area.section04 .section .section-content-area .guide-type-select  ul li { display: inline-block; margin: 0 10px; }
.section-area.section04 .section .section-content-area .guide-type-select  ul li a { font-size: 1.8rem; font-weight: 500; color: #666; opacity: .5; }
.section-area.section04 .section .section-content-area .guide-type-select  ul li.select a { opacity: 1; }

.section-area.section04 .section .section-content-area .guide-list { white-space: nowrap; overflow: hidden; }
.section-area.section04 .section .section-content-area .guide-list>div { width: 301%; }
.section-area.section04 .section .section-content-area .guide-list ul { display: block; width: 33.3333%; opacity: 0; transition: opacity 1.5s ease, transform .5s ease-in-out; float: left; }
.section-area.section04 .section .section-content-area .guide-list ul li { width: 280px; float: left; margin-right: 20px; }
.section-area.section04 .section .section-content-area .guide-list ul li:nth-child(4n) { margin-right: 0; }
.section-area.section04 .section .section-content-area .guide-list ul li a { display: block; }
.section-area.section04 .section .section-content-area .guide-list ul li a .img-area { height: 180px; background: #f8f8f8; margin-bottom: 25px; position: relative; transition: box-shadow .25s ease; }
.section-area.section04 .section .section-content-area .guide-list ul li a .img-area .play-ico { width: 70px; height: 70px; background: #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px; opacity: .5; transition: opacity .25s ease; }
.section-area.section04 .section .section-content-area .guide-list ul li a .img-area .play-ico span { display: block; width: 100%; height: 100%; position: relative; }
.section-area.section04 .section .section-content-area .guide-list ul li a .img-area .play-ico span:after { position: absolute; content: ''; border-left: 18px solid #001AD9; border-top: 11px solid transparent; border-bottom: 11px solid transparent; left: 50%; margin-left: -8px; top: 50%; margin-top: -11px; }

.section-area.section04 .section .section-content-area .guide-list ul li:hover a .img-area { box-shadow: 0 10px 25px 0 rgba(0,0,0,0.1); }
.section-area.section04 .section .section-content-area .guide-list ul li:hover a .img-area .play-ico { opacity: 1; }

.section-area.section04 .section .section-content-area .guide-list ul li a .txt-area .category { color: #999; font-size: 1.4rem; display: block; margin-bottom: 5px; }
.section-area.section04 .section .section-content-area .guide-list ul li a .txt-area .guide-name { font-size: 1.8rem; color: #222; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; line-height: 23px; max-height: 42px; letter-spacing: -0.5px; transition: color .25s ease; white-space: normal; }
.section-area.section04 .section .section-content-area .guide-list ul li:hover a .txt-area .guide-name { color: #001ad9; }

.section-area.section04 .section .section-content-area ul.slide-navi { display: block; text-align: center; margin-top: 70px; }
.section-area.section04 .section .section-content-area ul.slide-navi li { display: inline-block; width: 10px; height: 10px; cursor: pointer; border: 1px solid #555; border-radius: 50%; margin-right: 5px; transition: background .5s ease, border-color .5s ease; }
.section-area.section04 .section .section-content-area ul.slide-navi li:last-child { margin-right: 0; }

.section-area.section04 .section .section-content-area .guide-list.list01 ul:nth-child(1) { opacity: 1; }
.section-area.section04 .section .section-content-area .guide-list.list02 ul:nth-child(2) { opacity: 1; }
.section-area.section04 .section .section-content-area .guide-list.list03 ul:nth-child(3) { opacity: 1; }
.section-area.section04 .section .section-content-area .guide-list.list01 ul { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
.section-area.section04 .section .section-content-area .guide-list.list02 ul { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); }
.section-area.section04 .section .section-content-area .guide-list.list03 ul { -webkit-transform: translate(-200%, 0); -ms-transform: translate(-200%, 0); transform: translate(-200%, 0); }

.section-area.section04 .section .section-content-area .guide-list.list01 + ul.slide-navi li:nth-child(1) { border-color: #001ad9; background: #001ad9; }
.section-area.section04 .section .section-content-area .guide-list.list02 + ul.slide-navi li:nth-child(2) { border-color: #001ad9; background: #001ad9; }
.section-area.section04 .section .section-content-area .guide-list.list03 + ul.slide-navi li:nth-child(3) { border-color: #001ad9; background: #001ad9; }

@media all and (max-width: 1279px)
{
	.section-area.section04 .section .section-content-area .guide-list { text-align: center; }
	.section-area.section04 .section .section-content-area .guide-list ul { white-space: normal; }
	.section-area.section04 .section .section-content-area .guide-list ul li { float: none; display: inline-block; text-align: left; margin: 0 35px 50px 35px; }
	.section-area.section04 .section .section-content-area .guide-list ul li:last-child { margin-right: 35px; }
}
@media all and (max-width: 770px)
{
	.section-area.section04 .section .section-content-area .guide-list ul li { margin: 0 15px 40px 15px; }
	.section-area.section04 .section .section-content-area .guide-list ul li:nth-child(2n) { margin-right: 0; }
	.section-area.section04 .section .section-content-area .guide-list ul li:nth-child(2n-1) { margin-left: 0; }
}
@media all and (max-width: 660px)
{
	.section-area.section04 .section .section-content-area .guide-list ul li { width: 100%; margin: 0 0 30px 0; }
	.section-area.section04 .section .section-content-area .guide-list ul li a { overflow: hidden; }
	.section-area.section04 .section .section-content-area .guide-list ul li a .img-area { float: left; width: 50%; margin-bottom: 0; border-radius: 8px; overflow: hidden; height: 150px; }
	.section-area.section04 .section .section-content-area .guide-list ul li:hover a .img-area { box-shadow: none; }
	.section-area.section04 .section .section-content-area .guide-list ul li a .img-area .play-ico { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
	.section-area.section04 .section .section-content-area .guide-list ul li a .img-area .play-ico span:after { position: absolute; content: ''; border-left: 15px solid #ddd; border-top: 8px solid transparent; border-bottom: 8px solid transparent; left: 50%; margin-left: -6px; top: 50%; margin-top: -8px; }
	
	.section-area.section04 .section .section-content-area .guide-list ul li a .txt-area { width: 50%; float: right; padding-left: 30px; padding-top: 30px; }
}
/* 플랜 */
.section-area.section05 { background: #001ad9; }
.section-area.section05 .section .section-title-area .section-title { color: #fff; }
.section-area.section05 .section .section-title-area .section-title:after { background: #fff; }
.section-area.section05 .section .section-content-area { text-align: center; }
.section-area.section05 .section .section-content-area .key-text-area { color: #fff; }
.section-area.section05 .section .section-content-area .key-text-area .key-text { color: #fff; }
.section-area.section05 .section .section-content-area .price-card { margin-top: 35px; padding: 0 50px; }
.section-area.section05 .section .section-content-area .price-card>div { width: 100%; overflow-x: auto; }
.section-area.section05 .section .section-content-area .price-card>div>ul { width: 300%; max-width: 1080px; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li { background: #fff; float: left; display: block; padding: 40px; width: 346px; margin-right: 20px; margin-top: 25px; box-shadow: 0 20px 30px 0 rgba(0,0,0,0.15); }
.section-area.section05 .section .section-content-area .price-card>div>ul>li.pro { margin-top: 0; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li:last-child { margin-right: 0; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .plan-name { font-size: 2.7rem; font-weight: 800; display: block; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .exp { color: #666; font-size: 1.6rem; line-height: 23px; margin-top: 15px; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .price-area { margin: 20px 0; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .price-area .price { font-size: 3.2rem; font-weight: 800; display: inline-block; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .price-area .unit { color: #999; font-size: 2rem; font-weight: 300; vertical-align: top; margin-left: 5px; margin-top: 12px; display: inline-block; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .index { display: block; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .index li { position: relative; width: auto; margin-bottom: 8px; display: block; font-size: 1.5rem; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .index li .dot { display: inline-block; width: 5px; height: 5px; background: #dee3eb; margin-right: 8px; margin-top: 8px; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .start-btn { display: block; margin-top: 30px; height: 45px; line-height: 43px; border-radius: 4px; border: 1px solid #001ad9; color: #001ad9; transition: background .25s ease, color .25s ease; font-size: 1.5rem; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li .start-btn:hover { background: #001ad9; color: #fff; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li.pro .start-btn { background: #001ad9; color: #fff; }
.section-area.section05 .section .section-content-area .price-card>div>ul>li.pro .start-btn:hover { background: #0014B1; border-color: #0014B1; }

.section-area.section05 .section .section-content-area .price-card>div.block { position: relative; }
.section-area.section05 .section .section-content-area .price-card>div.block img { width: 100%; }
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block { position: absolute; width: 500px; background: #fff; left: 50%; margin-left: -250px; top: 50%; margin-top: -150px; box-shadow: 0 8px 15px -5px rgba(0,0,0,0.5); border: 1px solid #dee3eb; text-align: center; }
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block .text-area { padding: 50px 30px; } 
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block .title { font-size: 2.4rem; font-weight: 800; letter-spacing: 0; margin-bottom: 10px; display: block; }
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block p { font-size: 1.6rem; font-weight: 300; color: #666; }
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block .start-btn { display: block; margin-top: 30px; height: 45px; line-height: 43px; border-radius: 4px; border: 1px solid #001ad9; color: #fff; background: #001ad9; transition: background .25s ease, color .25s ease; font-size: 1.6rem; }
.section-area.section05 .section .section-content-area .price-card>div.block .beta-block .start-btn:hover { background: #0017C1; }

@media all and (max-width: 1279px)
{
	.section-area.section05 .section .section-content-area .price-card { padding: 0; }
	.section-area.section05 .section .section-content-area .price-card>div { overflow-x: auto; -ms-overflow-style: none; }
	.section-area.section05 .section .section-content-area .price-card>div::-webkit-scrollbar { display: none; }
	.section-area.section05 .section .section-content-area .price-card>div>ul>li { white-space: normal; margin-top: 0; }
	.section-area.section05 .section .section-content-area .price-card>div.block { height: 500px; background: url(../img/plan/blur-main.png); background-size: cover; background-position: center; }
	.section-area.section05 .section .section-content-area .price-card>div.block img { display: none; }
}

@media all and (max-width: 660px)
{
	.section-area.section05 .section .section-content-area .price-card>div>ul>li { width: 30%; }
	.section-area.section05 .section .section-content-area .price-card>div.block .beta-block { width: 90%; margin-left: 0; left: 5%; }
}

/* 고객사 */
.section-area.section06 .section .section-content-area { padding: 50px 0; }
.section-area.section06 .section .section-content-area .customer-list { white-space: nowrap; overflow: hidden; }
.section-area.section06 .section .section-content-area .customer-list>div { width: 301%; }
.section-area.section06 .section .section-content-area .customer-list>div ul { display: block; width: 33.3333%; opacity: 0; transition: opacity 1.5s ease, transform .5s ease-in-out;  float: left; }
.section-area.section06 .section .section-content-area .customer-list>div ul li { float: left; width: 20%; text-align: center; height: 120px; margin-bottom: 30px; vertical-align: middle; }
.section-area.section06 .section .section-content-area .customer-list>div ul li img { max-height: 100%; max-width: 100%; display: inline-block; filter: grayscale(100%); opacity: .5; transition: filter .3s ease, opacity .3s ease; }
.section-area.section06 .section .section-content-area .customer-list>div ul li:hover img { filter: grayscale(0%); opacity: 1; }

.section-area.section06 .section .section-content-area ul.slide-navi { display: block; text-align: center; margin-top: 70px; }
.section-area.section06 .section .section-content-area ul.slide-navi li { display: inline-block; width: 10px; height: 10px; cursor: pointer; border: 1px solid #555; border-radius: 50%; margin-right: 5px; transition: background .5s ease, border-color .5s ease; }
.section-area.section06 .section .section-content-area ul.slide-navi li:last-child { margin-right: 0; }

.section-area.section06 .section .section-content-area .customer-list.list01 ul:nth-child(1) { opacity: 1; }
.section-area.section06 .section .section-content-area .customer-list.list02 ul:nth-child(2) { opacity: 1; }
.section-area.section06 .section .section-content-area .customer-list.list03 ul:nth-child(3) { opacity: 1; }
.section-area.section06 .section .section-content-area .customer-list.list01 ul { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
.section-area.section06 .section .section-content-area .customer-list.list02 ul { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); }
.section-area.section06 .section .section-content-area .customer-list.list03 ul { -webkit-transform: translate(-200%, 0); -ms-transform: translate(-200%, 0); transform: translate(-200%, 0); }

.section-area.section06 .section .section-content-area .customer-list.list01 + ul.slide-navi li:nth-child(1) { border-color: #001ad9; background: #001ad9; }
.section-area.section06 .section .section-content-area .customer-list.list02 + ul.slide-navi li:nth-child(2) { border-color: #001ad9; background: #001ad9; }
.section-area.section06 .section .section-content-area .customer-list.list03 + ul.slide-navi li:nth-child(3) { border-color: #001ad9; background: #001ad9; }

@media all and (max-width: 1279px)
{
	.section-area.section06 .section .section-content-area .customer-list>div ul li { width: 33.333%; }
}
@media all and (max-width: 660px)
{
	.section-area.section06 .section .section-content-area { padding: 30px 0; }
	.section-area.section06 .section .section-content-area .customer-list>div ul li { height: 90px; }
	.section-area.section06 .section .section-content-area .customer-list>div ul li img { transform: scale(0.7); -ms-transform: scale(0.7); -webkit-transform: scale(0.7); }
}
@media all and (max-width: 440px)
{
	.section-area.section06 .section .section-content-area .customer-list>div ul li { width: 50%; }
}

/* 스크롤링 처리 */
.table { display: table; width: 100%; }
.table-cell { display: table-cell; width: 100%; vertical-align: middle; padding: 70px 0; }
.view-container { height: 100%;/* overflow: hidden;*/ }

.scroll-wrap { overflow: hidden; position: relative; }