@charset "utf-8";
/* base */
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@font-face {
 font-family: 'na200';
 src: url(../font/NanumSquareL.eot);
 src: url(../font/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(../font/NanumSquareL.woff) format('woff'),
      url(../font/NanumSquareL.ttf) format('truetype');
}
@font-face {
 font-family: 'na300';
 src: url(../font/NanumSquareR.eot);
 src: url(../font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(../font/NanumSquareR.woff) format('woff'),
      url(../font/NanumSquareR.ttf) format('truetype');
}
@font-face {
 font-family: 'na400';
 src: url(../font/NanumSquareB.eot);
 src: url(../font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(../font/NanumSquareB.woff) format('woff'),
      url(../font/NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: 'na500';
 src: url(../font/NanumSquareEB.eot);
 src: url(../font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(../font/NanumSquareEB.woff) format('woff'),
      url(../font/NanumSquareEB.ttf) format('truetype');
}
@font-face {
    font-family: 'no200';
    src: url('../font/notokr-light.eot');
    src: url('../font/notokr-light.eot?#iefix') format('embedded-opentype'),
         url('../font/notokr-light.woff2') format('woff2'),
         url('../font/notokr-light.woff') format('woff'),
         url('../font/notokr-light.ttf') format('truetype'),
         url('../font/notokr-light.svg#notokr-light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'no300';
    src: url('../font/notokr-regular.eot');
    src: url('../font/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('../font/notokr-regular.woff2') format('woff2'),
         url('../font/notokr-regular.woff') format('woff'),
         url('../font/notokr-regular.ttf') format('truetype'),
         url('../font/notokr-regular.svg#notokr-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'no400';
    src: url('../font/notokr-medium.eot');
    src: url('../font/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('../font/notokr-medium.woff2') format('woff2'),
         url('../font/notokr-medium.woff') format('woff'),
         url('../font/notokr-medium.ttf') format('truetype'),
         url('../font/notokr-medium.svg#notokr-medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'no500';
    src: url('../font/notokr-bold.eot');
    src: url('../font/notokr-bold.eot?#iefix') format('embedded-opentype'),
         url('../font/notokr-bold.woff2') format('woff2'),
         url('../font/notokr-bold.woff') format('woff'),
         url('../font/notokr-bold.ttf') format('truetype'),
         url('../font/notokr-bold.svg#notokr-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'no600';
    src: url('../font/notokr-black.eot');
    src: url('../font/notokr-black.eot?#iefix') format('embedded-opentype'),
         url('../font/notokr-black.woff2') format('woff2'),
         url('../font/notokr-black.woff') format('woff'),
         url('../font/notokr-black.ttf') format('truetype'),
         url('../font/notokr-black.svg#notokr-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: "timon";
  src: url("../font/TmonMonsori.eot");
  src: url("../font/TmonMonsori.eot?#iefix") format("embedded-opentype"),
  url("../font/TmonMonsori.woff") format("woff"),
  url("../font/TmonMonsori.woff2") format("woff2"),
  url("../font/TmonMonsori.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/fontawesome-webfont.woff2') format('woff2'),
        url('../font/fontawesome-webfont.woff') format('woff'),
        url('../font/fontawesome-webfont.ttf') format('truetype'),
        url('../font/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'score4';
    src: url(../font/S-CoreDream-4Regular.eot);
    src: url(../font/S-CoreDream-4Regular.eot?#iefix) format('embedded-opentype'),
    url(../font/S-CoreDream-4Regular.woff) format('woff'),
    url(../font/S-CoreDream-4Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'score5';
    src: url(../font/S-CoreDream-5Medium.eot);
    src: url(../font/S-CoreDream-5Medium.eot?#iefix) format('embedded-opentype'),
    url(../font/S-CoreDream-5Medium.woff) format('woff'),
    url(../font/S-CoreDream-5Medium.ttf) format('truetype');
}
/* common */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body , input { padding:0;margin:0;font-family: 'no300','나눔고딕',NanumGothic, '돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif !important; }
#land { width:100%;overflow:hidden;min-width:1025px; }
.section_wrap { max-width:1025px;width:100%;margin:0 auto; }
div { font-size:0; }
div:after { content:'';display:block;clear:both; }

/*이미지맵*/
img[usemap] {
  border: none;
  height: auto;
 max-width: 100%; 
  width: auto;
}

@media (max-width: 991px) {
	img[usemap] {
		  border: none;
		  height: auto !important;
		  max-width: 100%;
		  width: 100% !important;
   }
}



/* section1 */
.section1 { background: url(/images/goo/section1_bg.jpg) top center no-repeat;width:100%; }
.section1_wrap { position:relative;min-height:808px;padding:0;}
.section1_left { float:left;padding-top:156px; }
.section1_btn { padding:90px 0; }
.section1_right { position:absolute;top:0;right:0;margin-right:-43.7%;margin-top:0 !important; }

/*pay wrap*/
.pay_wrap {
	text-align: center;
}
.pay_wrap ul {
	padding: 80px 0 0;
}
.pay_wrap ul:after {content:"";display:block;clear:both}
.pay_wrap ul li {
	float: left;
	display:block;
	/* display: inline-block; */
	width: 20%;
	/* padding:0 5px; */
	text-align: center;
}
.pay_wrap ul li img {
	width: calc(100% - 10px);
	padding-bottom: 10px;
}
.log_btn {
	text-align: center;
	padding:80px 15px 0;
}
.log_modal {
	display: inline-block;
	max-width: 350px;
	width: 100%;
	height: 80px;
	border-radius:10px;
	color: #fff;
	background:linear-gradient(#ffcc28, #ffb415);
	font-size:30px;
	text-decoration:none;
	line-height: 80px;
}

/* section2 */
.section2 {padding:70px 0 30px;}
.section2_wrap { padding:0; }
.section2_title {width:100%;display:inline-block;text-align:center;}
.section2_all_wrap { padding-top:40px;position:relative; }
.section2_left { float:left; }
.section2_right_1 { position:absolute;top:180px;right:0;display:inline-block; }
.section2_right_2 {position:absolute;top:230px;right:-445px;display:inline-block; }
	

/* section3 */
.section3 { position:relative;margin:60px 0; }
.section3:before { content:'';position:absolute;top:0;left:0;height:100%;width:100%;background:#fafafa;transform:skew(0deg, 6deg);}
.section3_all_wrap { position:relative;padding:50px 0; }
.section3_left { position:absolute;top:190px;left:0; }
.section3_right { float:right; }

/* section4 */	
.section4_wrap { padding-top:30px; }
.section4_all_wrap { position:relative; }
.section4_left { float:left;margin-left:-33px; }
.section4_right { display:inline-block;position:absolute;top:130px;right:40px; }

/* section5 */
.section5 { background: url(/images/goo/section5_bg.png) top center;width:100%;margin-top:100px;overflow:hidden; }
.section5_wrap { position:relative;min-height:484px;}
.section5_left { float:left;padding:52px 0; }
.section5_btn { padding:56px 0 0; }
.section5_right { position:absolute;right:-147px;bottom:-113px;font-size:0; }

/* footer */
.footer_logo { display:inline-block;width:100%;text-align:center;padding:40px 0; }
.footer_info { text-align:center;padding-bottom:60px; }
.f_info { margin-bottom:5px; }
.f_info span { font-size:16px;color:#777;letter-spacing:-1px;word-break:keep-all; }
.f_info span:after { display:inline-block;content:'';width:1px;height:12px;background:#ccc;margin:0 10px; }
.f_info span:last-child:after { display:none; }
.f_info_2 { margin-bottom:20px; }
.f_info_3 { margin-bottom:0; }
.company_name { font-weight:900; }


/*log in*/

.login {
	position:fixed;
	top:50%;
	left: 50%;
	transform:translate(-50%,-50%);
	border-radius:30px;
	background:#fff;
	max-width: 400px;
	width: calc(100% - 40px);
	padding:50px 40px;
	text-align: center;
	z-index: 10;
}

.login .box {
	padding: 40px 0;
}
.login .box input{
	display: block;
	width: 100%;
	padding:15px;
	border:1px solid #e9e9e9;
	border-radius:6px;
	margin-bottom: 10px;
	font-size:16px;
	box-sizing : border-box;
}

.logmodal_btn {
	display: inline-block;
	max-width: 280px;
	width: 100%;
	border-radius:10px;
	font-size:26px;
	font-weight: 600;
	background:#3d3d40;
	color: #fff;
	text-decoration: none;
	padding: 15px;
}

.logex {
	position:absolute;
	top:0;
	right: 0;
	transform: translate(30%,-30%);
	cursor: pointer;
}

.modal_bg {
	position:fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#000;
	opacity: 0.5;
}


#modal.on .modal_bg {
	width: 0;
	height: 0;
}

#modal.on .login {
	top:-100%;
	transition:0.5s
}


@media (max-width: 991px) {
	img[usemap] {
		width: calc(100% - 10px) !important
	}
}

@media screen and (max-width:760px){
	/* common */
	#land { min-width:100%; }
	#land img { max-width:100%; }
	.section_wrap { padding-top:50px; }

	/* section1 */
	.section1 { background-size:cover; }
	.section1_wrap { min-height:100%;padding-top:0; }
	.section1_left { float:none;display:inline-block;padding:0;width:100%; }
	.section1_txt { padding:6vw; }
	.section1_btn { padding:3vw 6vw; }
	.section1_btn a { display:block;width:40%; }
	.section1_right { position:static;margin-right:0;width:100%;float:left;}

	/* section2 */
	.section2_title { width:auto;padding:0 6vw;display:block; }
	.section2_all_wrap { padding:0 6vw; }
	.section2_right { float:none;text-align:left;margin-right:0;width:100%;position:static;padding-top:50px; }
	.section2_right_1 { width:80%; position:static;padding-top:0}
	.section2_left { float:none;margin-left:0; }

	/* section3 */
	.section3_all_wrap { padding:6vw; }
	.section3_left { float:none;margin-left:0;position:static;display:inline-block;text-align:right;width:100%; }
	.section3_left_1 { text-align:right;padding-top:0;width:80%;margin:0 auto;display:inline-block; }
	.section3_right { float:none;margin-right:0;text-align:center; }

	/* section4 */
	.section4_all_wrap { padding:0 6vw; }
	.section4_right { float:none;text-align:left;width:100%;position:static;display:inline-block; }
	.section4_right_1 { text-align:left;text-indent:0;padding-top:0;width:100%;margin:0 auto;display:inline-block; }
	.section4_left { float:none;margin-left:0;margin:0 auto;display:inline-block;text-align:center;width:100%; }

	/* section5 */
	.section5_wrap { padding:0;min-height:100%; }
	.section5_left { float:none;padding:6vw 0;display:inline-block;width:100%;text-align:center; }
	.section5_txt { padding:0 6vw; }
	.section5_right { float:none;padding-top:0;width:90%;margin:0 auto;position:static; }
	.section5_btn { padding:6vw; }
	.section5_btn a { width:60%;display:inline-block; }

	/* footer */
	.footer span{ font-size:14px; display: inline-block;}
	.footer_info { padding:0 10px 60px;}

	.pay_wrap ul {
		padding: 40px 15px 0;
	}
	.pay_wrap ul li {
		width: 33.333%;
	}

	.log_modal {
		height: 50px;
		line-height: 50px;
		font-size:18px;
		width: auto;
		display: inline-block;
		padding: 0 40px;
		font-weight: 600;
	}
	.login {
		padding: 30px 20px;
	}
	.login .box {
		padding: 20px 0;
	}
	.section2 {padding:0;}
	.section2_right_2 {display:none;}
	.section2_left, .section3_right, .section4_left {padding-top:25px}
	.footer_wrap {padding-top:0;}
}

@media screen and (max-width:500px){
	.pay_wrap ul li {
		width: 50%;
	}
}