@charset "utf-8";
/* 퍼즐링 */
.sub-content-area {padding-bottom: 0;}
.puzzling-area .puzzling { width: 1180px; margin: 0 auto; }
.puzzling-area .puzzling .row:nth-child(2n-1) .img-area { float: left; }
.puzzling-area .puzzling .row:nth-child(2n-1) .text-area { float: right; padding-right:0;}
.puzzling-area .puzzling .row:nth-child(2n) .img-area { float: right; }
.puzzling-area .puzzling .row:nth-child(2n) .text-area { float: left; text-align: right; }
.puzzling-area .puzzling .row .text-area { width: calc(100% - 550px); padding: 20px 50px; min-height: 450px; display: table; }

.puzzling-area .puzzling .row { padding: 50px 0; }
.puzzling-area .puzzling .row .img-area { width: 550px; min-height: 450px; position: relative; }
.puzzling-area .puzzling .row:nth-child(2n) .text-area { padding-left: 0; }
.puzzling-area .puzzling .row .text-area h2 { font-size: 3rem; line-height: 45px; font-weight: 300; margin-bottom: 30px; letter-spacing: -1.5px; }
.puzzling-area .puzzling .row .text-area h2 .under { font-weight: 500; position: relative; }
.puzzling-area .puzzling .row .text-area h2 .under:after { position: absolute; content: ''; left: 0; width: 100%; height: 2px; background: #222; bottom: 0; }
.puzzling-area .puzzling .row .text-area p { font-size: 1.8rem; font-weight: 300; }
.puzzling-area .puzzling .row .text-area>div { display: table-cell; vertical-align: middle; }

.puzzling-area .puzzling .row .btn-wrap { margin-top: 30px; }
.puzzling-area .puzzling .row .btn-wrap a { display: inline-block; height: 45px; border: 1px solid #555; border-radius: 30px; padding: 0 35px; line-height: 43px; margin-right: 5px; transition: background .25s ease, color .25s ease, border-color .25s ease,box-shadow .25s ease; }
.puzzling-area .puzzling .row .btn-wrap a:last-child { margin-right: 0; }
.puzzling-area .puzzling .row .btn-wrap a:hover { background: #001AD9; color: #fff; border-color: #001AD9; box-shadow: 0 10px 20px 0px rgba(0,0,0,0.1); }

.features-ul {position: relative; margin-top: 20px;}
.features-ul ul {width: 70%; float: right;}
.features-ul ul li {display: inline-block; margin-left:5px; border-radius: 30px; margin-top: 10px; padding:3px 20px; background: #e9ecff; color:#545fb9; font-size:1.3rem;}

.start-area {text-align: center; width: 100%; position: relative; color:#fff; background: #001AD9; padding:80px 0; margin-top:50px;}
.start-area h2 { font-size: 4.5rem; font-weight: 900; }
.start-area p { font-size:1.8rem; padding:15px 0 30px; }
.start-area .btn-wrap a { display: inline-block; height: 45px; color:#fff; border:1px solid #fff; border-radius: 30px; padding:0 60px; line-height: 43px;transition: background .25s ease, color .25s ease, border-color .25s ease,box-shadow .25s ease;  }
.start-area .btn-wrap a:hover {background:#fff; color:#001ad9; border-color: #fff; box-shadow: 0 10px 20px 0px rgba(0,0,0,0.1); }

.puzzling-area .puzzling .row .scr-area {position: relative;}
.puzzling-area .puzzling .row .scr-area ul li { overflow: hidden; border-radius: 10px; box-shadow: 10px 10px 25px -15px rgba(0, 0, 0, 0.6); position: absolute;}
.puzzling-area .puzzling .row .scr-area ul li img {width:100%;}
.puzzling-area .puzzling .row .scr-area ul li.gif01 { width:350px; top:50%; left:50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);z-index: 2;}
.puzzling-area .puzzling .row .scr-area ul li.gif02 { width:210px; z-index: 3; top:100px; left:40px; }
.puzzling-area .puzzling .row .scr-area ul li.gif03 { width:230px; z-index: 1; bottom:35px; right:0; }
.puzzling-area .puzzling .row .scr-area ul li.gif04 { width:175px; z-index: 1; top:60px; right:30px;}
.puzzling-area .puzzling .row .scr-area ul li.gif06 { width:150px; z-index: 1; top:95px; left:-10px;}
.puzzling-area .puzzling .row .scr-area ul li.gif05 { width:250px; z-index: 1; bottom:60px; left:-30px;}

.puzzling-area .puzzling .row .ill-area {position: relative;}
.puzzling-area .puzzling .row .ill-area ul li {width:175px; position: absolute;}
.puzzling-area .puzzling .row .ill-area ul li.ill03 { top:50%; left:50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 190px;}
.puzzling-area .puzzling .row .ill-area ul li.ill02 { top: 0; left: 0; }
.puzzling-area .puzzling .row .ill-area ul li.ill01 { top: 0; right: 0; width: 155px;}
.puzzling-area .puzzling .row .ill-area ul li.ill04 { bottom: 0; left: 0; }
.puzzling-area .puzzling .row .ill-area ul li.ill05 { bottom: 0; right: 0; }

.puzzling-area .puzzling .row .browser {position: relative; }
.puzzling-area .puzzling .row .browser img { position: absolute; top:50%; max-width:100%; max-height: 100%; border-radius: 10px; box-shadow: 10px 10px 25px -15px rgba(0, 0, 0, 0.6); z-index: 2; -webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}


@media all and (max-width: 1279px)
{
	.puzzling-area .puzzling { width: 100%; padding:  0 30px; }
	.puzzling-area .puzzling .row .img-area { width: 50% }
	.puzzling-area .puzzling .row .text-area { width: 50%; }
}
@media all and (max-width: 1024px)
{
	.puzzling-area .puzzling .row .ill-area ul li {width: 140px;}
	.puzzling-area .puzzling .row .ill-area ul li.ill01 {width: 120px;}
	.puzzling-area .puzzling .row .ill-area ul li.ill03 {width:170px;}
}

@media all and (max-width: 840px)
{
	.puzzling-area .puzzling .row .img-area { width: 100% !important; min-height: 300px; }
	.puzzling-area .puzzling .row .scr-area { width: 100% !important; min-height: 450px; }
	.puzzling-area .puzzling .row .text-area { width: 100% !important; padding: 30px 0; display: block; min-height: auto; }
	.puzzling-area .puzzling .row:nth-child(2n) .text-area { text-align: left; }
	.features-ul ul {float:none;}
}
@media all and (max-width: 639px)
{
	.puzzling-area .puzzling .row .text-area h2 { line-height: 40px; }
}
@media all and (max-width: 530px) {
	.puzzling-area .puzzling .row {padding:30px 0;}
	.puzzling-area .puzzling .row .scr-area ul li.gif02 {left:75px; top:70px; width: 180px; }
	.puzzling-area .puzzling .row .scr-area ul li.gif03 {right: 0; bottom:60px; width:180px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif04 {right: 0; top:60px; width: 180px; }
	.puzzling-area .puzzling .row .scr-area ul li.gif05 {left: 0; bottom:60px;width:180px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif06 {top:60px; width: 180px;}
}
@media all and (max-width: 425px) {
	.features-ul ul {width:100%;}
	.puzzling-area .puzzling .row .scr-area {min-height: 300px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif02 {top: 0; z-index: 1; top:0;}
	.puzzling-area .puzzling .row .scr-area ul li.gif01 {width: 95%;}
	.puzzling-area .puzzling .row .scr-area ul li.gif03,
	.puzzling-area .puzzling .row .scr-area ul li.gif05 {bottom:0;}
	.puzzling-area .puzzling .row .ill-area {min-height: 220px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif05, .puzzling-area .puzzling .row .scr-area ul li.gif06 {left:-5px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif02, .puzzling-area .puzzling .row .scr-area ul li.gif04 {right:-5px;}
	.puzzling-area .puzzling .row .ill-area ul li {width:30%;}
	.puzzling-area .puzzling .row .ill-area ul li.ill01 {width:25%;}
	.puzzling-area .puzzling .row .ill-area ul li.ill03 {width: 40%; bottom:20px;}
	.puzzling-area .puzzling .row .scr-area ul li.gif06, .puzzling-area .puzzling .row .scr-area ul li.gif04 {top:0;}
	.puzzling-area .puzzling .row .btn-wrap {text-align: center;}
	.puzzling-area .puzzling .row .btn-wrap a {width:100%; background: #001AD9; color: #fff; border-color: #001AD9; box-shadow: 0 10px 20px 0px rgba(0,0,0,0.1); }
	.start-area {padding: 50px 30px;}
	.start-area .btn-wrap a {width:100%;}
	.start-area h2 {font-size: 3rem;}
	.puzzling-area .puzzling .row .text-area h2 {line-height: 32px; font-size: 2.3rem; margin-bottom: 10px;}
	.puzzling-area .puzzling .row .text-area>div {display: block;}
	.puzzling-area .puzzling .row .browser {min-height: 200px; margin-bottom: 15px;}
	.puzzling-area .puzzling .row .browser img {max-width: 100%; max-height: unset;}

}
@media all and (max-width: 375px) {
	.puzzling-area .puzzling .row .scr-area ul li.gif03, 
	.puzzling-area .puzzling .row .scr-area ul li.gif04,
	.puzzling-area .puzzling .row .scr-area ul li.gif05,
	.puzzling-area .puzzling .row .scr-area ul li.gif06 {width: 150px;}
}