@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : Layout.CSS
	Company : The Webstyle co.,ltd
 	Author : Jong Hoon, Park 2015-12
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/
body {-webkit-text-size-adjust:none; -moz-text-size-adjust:none; }

/* SkipMenu */
#SkipMenu {overflow:hidden; position:absolute; left:0; top:0; z-index:500; width:100%; height:0px; background-color:#105d9c;}
#SkipMenu .skipNav {position:relative; height:35px; text-align:center;}
#SkipMenu .skipNav ul {display:inline-block; overflow:hidden;}
#SkipMenu .skipNav ul li {display:inline;}
#SkipMenu .skipNav ul li a {display:inline-block; font-size:12px; line-height:35px; font-weight:bold; color:#fff;}
#SkipMenu .skipNav .skipClose {display:inline-block; position:absolute; right:20px; top:11px;}
#SkipMenu .skipNav .skipClose a {display:block; width:13px; height:13px; text-indent:-9999px; background:url('/Images/Common/btn_skipMenu_close.png') center center no-repeat;}
#SkipMenu a:active, visited, link, hover {color:#fff;}

.inner {display:block; position:relative; max-width:1180px; margin:auto;}


/* header */
.header {display:block; position:absolute; width:100%; height:125px; z-index:50;}
.header .inner {height:100%;}
.header .logo {display:block; position:absolute; width:252px; height:42px; top:50%; left:0; margin-top:-21px;}
.header .gnb {display:none;}

.wrapper.sub .header {background:url('/microsite/images/common/bg_header.jpg') center top no-repeat; background-color:#161616;}
.wrapper.sub .header .gnb {display:block; padding-top:90px; text-align:right;}
.wrapper.sub .header .gnb .gnb-list {display:inline-block; position:relative; overflow:hidden;}
.wrapper.sub .header .gnb .gnb-list li {display:block; float:left; position:relative;}
.wrapper.sub .header .gnb .gnb-list li:before {display:block; position:absolute; width:1px; height:10px; top:2px; left:-15px; background-color:#999; content:"";}
.wrapper.sub .header .gnb .gnb-list li:first-child:before {display:none;}
.wrapper.sub .header .gnb .gnb-list li + li {margin-left:30px;}
.wrapper.sub .header .gnb .gnb-list li a {font-size:14px; color:#fff;}

.content {display:block; position:relative;}
.content.content-main {padding-bottom:180px;}
.main-section {display:block; position:relative;}
.wrapper.sub .container {padding-top:125px;}

/* section01 */
.main-section.section01 {display:block; height:841px; background:linear-gradient(to top, rgba(28, 28, 28, 1), rgba(0, 0, 0, 1) 100%);}
.main-section.section01 .section01-wrap {display:block; width:100%; height:100%; padding:125px 0 67px; background:url(/microsite/images/main/bg_mainvisual01.png) no-repeat; content:"";}}
.main-section.section01 .inner {padding:37px 0 67px;}
/* .main-section.section01:before {display:block; position:absolute; width:1705px; height:828px; top:0; left:50%; margin-left:-852px; background:url(/microsite/images/main/bg_mainvisual01.png) no-repeat; content:"";} */
.main-section.section01 .txt-wrap {display:block; position:relative; height:612px; background:url(/microsite/images/main/img_mainvisual01.png) left bottom no-repeat;}
.main-section.section01 .txt-wrap .main-txt {width:545px; height:163px;}
.main-section.section01 .txt-wrap .sub-txt {width:520px; padding:160px 0 0 50px; font-family:'InkLipquid'; font-weight:100; font-size:24px; color:#fff; line-height:1.3; word-break:keep-all;}
.main-section.section01 .txt-wrap .sub-txt + .sub-txt {padding:0px 0 0 50px;}
.main-section.section01 .search-box {display:block; position:absolute; width:400px; height:580px; top:23px; right:0; padding:78px 35px 31px 35px; background:#202020;}
.main-section.section01 .search-box:before {display:block; position:absolute; width:20px; height:18px; top:30px; left:50%; margin-left:-10px; background:url(/microsite/images/common/ico_double_arr.png) no-repeat; background-size:20px 18px; content:"";}
.main-section.section01 .search-box .agree-wrap {display:block; position:relative; margin-top:19px;}
.main-section.section01 .search-box .agree-wrap .agree-txt {margin-bottom:13px; color:#666;}
.main-section.section01 .search-box .agree-wrap .form-check label {width:86px;}
.main-section.section01 .search-box .agree-wrap .btn-agreePop {color:#666;}
.main-section.section01 .search-box .agree-wrap .btn-agreePop:after {display:block; position:absolute; width:12px; height:12px; top:50%; right:-21px; margin-top:-6px; background:url(/microsite/images/common/ico_btnpop.png) no-repeat; background-size:100%; content:"";}
.main-section.section01 .search-box .btn-wrap {margin-top:40px;}
.main-section.section01 .search-box .btn-wrap .btn-schMain {width:100%; height:55px; line-height:55px; background-color:#4b4b4b; border-radius:4px;}
.main-section.section01 .search-box .btn-wrap .btn-schMain span {font-weight:700; font-size:18px; color:#fff;}
.main-section.section01 .section01-wrap .txt-wrap .btn_video {display:block; position:relative; width:335px; margin-top:255px; margin-left:160px; border:2px solid #1f5e79; border-radius:5px; }
.main-section.section01 .section01-wrap .txt-wrap .btn_video button {display:inline-block; position:relative; width:100%; height:60px; line-height:60px; text-indent:35px; background:url('/microsite/images/common/ico_videoPlay.png') no-repeat; background-position:23px; font-size:18px; font-weight:500; font-family:"Noto Sans KR"; text-align:center; color:#fff;}
.main-section.section01 .section01-wrap .txt-wrap .btn_video span.blue {display:inline; padding-left:10px; font-weight:700; color:#2589b6;}
.main-section.section01 .section01-wrap .pop-wrapper {padding:0;}
.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content {width:846px;}
.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content {overflow:hidden; height:100%; padding:0; border-bottom:none;}
.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content .lp_body {line-height:0;}
.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content .lp_body iframe {width:846px; height:416px;}
.main-section.section01 .section01-wrap  .pop-wrapper .btn-pop-close {position:absolute; top:-1px; right:-76px; overflow:hidden; width:30px; height:30px; text-indent:-9999px; background:url(/microsite/images/common/btn_lp_close.png) no-repeat center center;}
.main-section.section01 .section01-wrap  .pop-wrapper .btn-pop-close::after {display:block; position:absolute; top:2px; right:2px; width:25px; height:25px;background-color:rgba(255, 255, 255, 0.1);content:"";}

/* sec-txtWrap */
.sec-txtWrap {display:block; width:450px; position:relative;}
.sec-txtWrap .sec-tit {display:block; font-family:'OTEnjoystoriesBA'; font-size:40px; color:#333;}
.sec-txtWrap .hashtag {display:block; margin-top:18px; color:#2dabe2;}
.sec-txtWrap .sub-txt {display:block; margin-top:25px; font-size:16px; color:#666; line-height:1.6;}

.sec-txtWrap.bg-black .sec-tit {color:#fff;}
.sec-txtWrap.bg-black .sub-txt {color:#999;}

/* section02 */
.main-section.section02 {height:560px; padding-top:115px; background:url(/microsite/images/main/bg_section02.jpg) right bottom no-repeat;}

/* section03 */
.main-section.section03 {height:400px; background:#161616;}
.main-section.section03 .inner {padding-top:60px; text-align:right;}
.main-section.section03 .inner:before {display:block; position:absolute; width:480px; height:460px; top:-120px; left:0; background:url(/microsite/images/main/bg_section03.jpg) no-repeat; content:"";}
.main-section.section03 .sec-txtWrap {display:inline-block;  text-align:left;}

/* section04 */
.main-section.section04 {height:490px; margin-top:180px; overflow:hidden;}
.main-section.section04:before {display:block; position:absolute; width:1370px; height:370px; top:120px; left:0; background:url(/microsite/images/main/bg_section04.jpg) no-repeat; content:"";}
.main-section.section04 .inner {text-align:right;}
.main-section.section04 .sec-txtWrap {display:inline-block; width:70%; height:350px; padding:60px 0 0 80px; background-color:#f4f4f4; text-align:left;}
.main-section.section04 .sec-txtWrap:after {display:block; position:absolute; width:calc(50vw - 590px); height:100%; top:0; right:-370px; background:#f4f4f4; content:"";}
.main-section.section04 .sec-txtWrap .sub-txt {width:420px;}

/* section05 */
.main-section.section05 {height:490px; margin-top:180px; overflow:hidden;}
.main-section.section05:before {display:block; position:absolute; width:1370px; height:370px; top:120px; right:0; background:url(/microsite/images/main/bg_section05.jpg) no-repeat; content:"";}
.main-section.section05 .sec-txtWrap {display:inline-block; width:70%; height:350px; padding:60px 0 0 80px; background-color:#161616; text-align:left;}
.main-section.section05 .sec-txtWrap:after {display:block; position:absolute; width:calc(50vw - 590px); height:100%; top:0; left:-370px; background:#161616; content:"";}
.main-section.section05 .sec-txtWrap .sub-txt {width:420px;}

/* footer */
.footer {display:block; position:relative; height:80px; padding:28px 0; background-color:#f4f4f4;}
.footer .inner {overflow:hidden;}
.footer .company-info {display:flex; float:left; margin-top:5px;}
.footer .company-info li {font-size:12px; color:#999;}
.footer .company-info li + li {margin-left:50px;}
.footer .sns-wrap {float:right;}
.footer .sns-list {display:flex;}
.footer .sns-list li + li {margin-left:20px;}
.footer .sns-list li .item {display:block; width:24px; height:24px; text-indent:-9999px;}
.footer .sns-list li .item.sns-homepage {background:url(/microsite/images/common/ico_homepage.png) center no-repeat; background-size:100%;}
.footer .sns-list li .item.sns-blog {background:url(/microsite/images/common/ico_blog.png) center no-repeat; background-size:100%;}
.footer .sns-list li .item.sns-youtube {background:url(/microsite/images/common/ico_youtube.png) center no-repeat; background-size:100%;}
.footer .sns-list li .item.sns-facebook {background:url(/microsite/images/common/ico_facebook.png) center no-repeat; background-size:100%;}

.wrapper.sub .footer {background-color:#161616;}


@media all and (max-width:1550px) {
	.main-section.section02 .sec-txtWrap {width:300px;}
}

@media all and (max-width:768px) {
	.inner {display:block; position:relative; max-width:100%; padding:0 15px;}

	/* Header */
	.header {height:71px;}
	.header .logo {width:126px; height:auto; top:50%; left:50%; margin:-10px 0 0 -63px;}

	.wrapper.sub .header {height:116px;}
	.wrapper.sub .header .logo {top:30px; margin-top:0;}
	.wrapper.sub .header .gnb {text-align:center;}
	.wrapper.sub .header .gnb .gnb-list li + li {margin-left:28px;}
	.wrapper.sub .header .gnb .gnb-list li a {font-size:1.4rem;}

	.content.content-main {padding-bottom:90px;}
	.wrapper.sub .container {padding-top:116px;}

	/* sec-txtWrap */
	.sec-txtWrap {width:100%;}
	.sec-txtWrap .sec-tit {font-size:3rem;}
	.sec-txtWrap .hashtag {margin-top:15px; color:#2dabe2;}
	.sec-txtWrap .sub-txt {width:100%; margin-top:28px; font-size:1.6rem;line-height:1.6;}

	/* section01 */
	.main-section .inner  {padding:0 30px;}
	.main-section.section01 {overflow:hidden; height:auto;}
	.main-section.section01 .section01-wrap {padding:71px 0 30px; background-position:20% top; background-size:auto 31%;}
	.main-section.section01 .txt-wrap {width:315px; height:405px; margin:auto; background:url(/microsite/images/main/img_mainvisual01_m.png) left bottom no-repeat; background-size:100%;}
	.main-section.section01 .txt-wrap .sub-txt {width:245px; padding:114px 0 0 0; margin:auto; font-size:1.6rem;}
	.main-section.section01 .txt-wrap .sub-txt + .sub-txt {padding:0px 0 0 0px;}
	.main-section.section01 .search-box {position:relative; width:100%; height:auto; top:0; padding:62px 15px 30px 15px;}
	.main-section.section01 .search-box:before {width:15px; height:15px; top:23px; margin-left:-7px; background-size:100%;}
	.main-section.section01 .search-box .btn-wrap {margin-top:30px;}
	.main-section.section01 .search-box .btn-wrap .btn-schMain {height:44px; line-height:44px;}
	.main-section.section01 .search-box .btn-wrap .btn-schMain span {font-size:1.5rem;}
	.main-section.section01 .section01-wrap .txt-wrap .btn_video {position:absolute; left:10%; width:80%; height:40px; margin-top:145px; margin-left:0;}
	.main-section.section01 .section01-wrap .txt-wrap .btn_video button {height:100%; line-height:0; text-indent:25px; background:url('/microsite/images/common/ico_videoPlay.png') no-repeat; background-position:23px; background-size:18px; font-size:12px;}
	.main-section.section01 .section01-wrap .txt-wrap .btn_video span.blue {padding-left:5px;}

	.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content {width:100%;}
	.main-section.section01 .section01-wrap .pop-modal.pop-agree .pop-wrapper .pop-content .lp_body iframe {width:100%; height:350px;}
	.main-section.section01 .section01-wrap  .pop-wrapper .btn-pop-close {position:absolute; top:-25px; right:0; overflow:hidden; width:30px; height:26px; text-indent:-9999px; background:url(/microsite/images/common/btn_lp_close.png) no-repeat center center;}


	/* section02 */
	.main-section.section02 {height:auto; padding:45px 0 189px; background-size:292px 134px;}

	/* section03 */
	.main-section.section03 {height:auto; margin-top:90px; padding-bottom:45px;}
	.main-section.section03 .inner {padding-top:230px;}
	.main-section.section03 .inner:before {width:240px; height:230px; top:-45px; left:15px; background-size:100%;}

	/* section04 */
	.main-section.section04 {margin-top:90px; height:auto; background:url(/microsite/images/main/bg_section04_m.jpg) no-repeat; background-size:cover; overflow:inherit;}
	.main-section.section04:before {display:none;}
	.main-section.section04 .inner {padding:0 0 45px 0;}
	.main-section.section04 .sec-txtWrap {width:75%; height:auto; top:-45px; right:0; padding:45px 30px 45px 40px;}
	.main-section.section04 .sec-txtWrap .sub-txt {width:100%;}

	/* section05 */
	.main-section.section05 {margin-top:90px;}
	.main-section.section05 {margin-top:90px; height:auto; background:url(/microsite/images/main/bg_section05_m.jpg) no-repeat; background-size:cover; overflow:inherit;}
	.main-section.section05:before {display:none;}
	.main-section.section05 .inner {padding:0 0 45px 0;}
	.main-section.section05 .sec-txtWrap {width:75%; height:auto; top:-45px; left:0; padding:45px 30px 45px 30px;}
	.main-section.section05 .sec-txtWrap .sub-txt {width:100%;}

	/* footer */
	.footer{height:auto; padding:55px 0 15px;}
	.footer .inner {overflow:inherit;}
	.footer .company-info {display:block; float:none; margin-top:0;}
	.footer .company-info li {font-size:0.9rem; text-align:center;}
	.footer .company-info li + li {margin-left:0; margin-top:5px;}
	.footer .sns-wrap{float:none; position:absolute; width:calc(100% - 60px); top:-35px;}
	.footer .sns-list {justify-content:center;}
	.footer .sns-list li .item {width:19px; height:19px; background-size:100%;}



}