@charset "utf-8";
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Reset */
html{height: 100%;}
body {margin:0;padding:0;font-size:0.75em;height:100%;font-family: 'GmarketSans', '돋움', sans-serif;font-weight:400;word-break: keep-all;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, dl, dt, dd, p {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
header ul, nav ul, footer ul {margin:0;padding:0;list-style:none}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-size:1em}
button,input[type=button],input[type=submit]{cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {border-radius:0;-webkit-appearance:none}
textarea, select {font-size:1em;}
textarea {border-radius:0;-webkit-appearance:none}
p {margin:0;padding:0;word-break:break-all}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited {color:inherit;text-decoration:none}
ul,ol,li{list-style:none;padding:0;margin:0;}
input, button, textarea, select {font-family: 'GmarketSans', '돋움', sans-serif;outline: none}
hr {content: '';display:block;padding:0;border:0;margin: 0;}


/*사파리 버튼 초기화*/
input[type="text"], input[type="password"], input[type="button"], input[type="submit"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; }


/*placeholder*/
input::-ms-input-placeholder { font-weight: 400; color: #a0a0a0; }
input::-webkit-input-placeholder { font-weight: 400; color: #a0a0a0; }
input::-moz-placeholder { font-weight: 400; color: #a0a0a0; }

textarea::-ms-input-placeholder { font-weight: 400; color: #a0a0a0; }
textarea::-webkit-input-placeholder { font-weight: 400; color: #a0a0a0; }
textarea::-moz-placeholder { font-weight: 400; color: #a0a0a0; }


/*셀렉트 스타일*/
select {
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none; /* 화살표 없애기 공통*/
    background-image: url('../img/ico_arrow_select1.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 15px;
    background-color: #fff;
    cursor: pointer;
}
select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }


/*드래그*/
::selection { background: #ffa9be; color: #fff; }
::-moz-selection { background: #ffa9be; color: #fff; }


/*--------------------------------------------------------------------------------------------------------------------------*/


/*공통 CSS*/
/*header style*/
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; }
.hd { height: 116px; }
.hd .inner { display: flex; justify-content: space-between; align-items: center; position: relative; width: 1180px; max-width: 100%; height: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.hd .hd-logo { width: 115px; height: 56px; background: url('../img/img_logo1.png') center center no-repeat; background-size: contain; }

.header.active { box-shadow: 0 5px 10px rgba(38, 41, 44, 0.08); box-sizing: border-box; background: #fff; animation: slide-down 0.5s; }
.header.active .hd { height: 80px; }
.header.active .hd .hd-logo { background-image: url('../img/img_logo2.png'); }

@keyframes slide-down { 
	0% { opacity: 0; transform: translateY(-100%); } 
	100% { opacity: 1; transform: translateY(0); } 
}


/*footer style*/
.footer { background: #eff0f4; }
.ft { width: 1140px; max-width: 100%; margin: 0 auto; padding: 40px 20px 105px; box-sizing: border-box; }
.ft .ft-logo { margin-bottom: 15px; font-size: 23px; font-weight: 500; color: #3f4045; }
.ft .ft-info { margin-bottom: 10px; font-size: 14px; font-weight: 300; color: #94989b; line-height: 24px; }
.ft .ft-contact { display: inline-flex; align-items: center; padding: 15px 35px 12px; border-radius: 10px; box-sizing: border-box; background: #fff; font-size: 20px; font-weight: 500; color: #121214; }
.ft .ft-contact div { margin-right: 20px; }
.ft .ft-contact div:last-child { margin-right: 0; }
.ft .ft-contact div img { margin-right: 5px; }


/*페이지별 CSS*/
/*메인*/
.main .sec1 { height: 1348px; padding-bottom: 40px; box-sizing: border-box; background: url('../img/bg_main1.png') left top no-repeat; }
.main .sec1 .wrap { width: 1120px; max-width: 100%; margin: 0 auto; }
.main .sec1 .group { display: flex; align-items: center; padding: 170px 0 120px; box-sizing: border-box; }

.main .sec1 .info .logo-group { margin-bottom: 28px; text-align: center; }
.main .sec1 .info .logo-group .txt { margin-bottom: 2px; font-size: 26px; font-weight: 300; color: #121214; }
.main .sec1 .info .logo-group img { display: block; margin: 0 auto; }
.main .sec1 .info .download-group { display: flex; justify-content: center; align-items: center; }
.main .sec1 .info .download-group a { margin-right: 17px; }
.main .sec1 .info .download-group a:last-child { margin-right: 0; }

/*motion*/
.js-motion1 { display: inline-block; transform: translateY(0); animation: motion1 0.5s ease-in-out 0s infinite alternate; }
@keyframes motion1 {
	0% { transform: translateY(0); }
	100% { transform: translateY(-10%); }
}

.slide-review { position: relative; margin-bottom: 95px; }
.slide-review .swiper { margin: -30px -15px; margin-bottom: 0; padding: 30px 15px; box-sizing: border-box; }
.slide-review .swiper:after { content: ''; position: absolute; right: 0; bottom: 0; z-index: 1; width: 100px; height: 100%; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); }
.slide-review .swiper-slide { height: 100%; padding: 18px 20px; border-radius: 20px; box-shadow: 0 0 15px #e5e5e5; box-sizing: border-box; background: #fff; cursor: pointer; }
.slide-review .swiper-slide .review-writer { margin-bottom: 2px; font-size: 16px; font-weight: 300; color: #121214; }
.slide-review .swiper-slide .review-point { margin-bottom: 8px; }
.slide-review .swiper-slide .review-content { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; max-height: 120px; line-height: 24px; white-space: normal; overflow: hidden; font-size: 16px; font-weight: 300; color: #121214; }

.slide-review .swiper-nav { display: flex; justify-content: center; align-items: center; bottom: 0; }
.slide-review .swiper-nav .swiper-button-prev,
.slide-review .swiper-nav .swiper-button-next { position: relative; left: auto; right: auto; width: 36px; height: 36px; margin: 0 15px; border-radius: 50%; box-sizing: border-box; background: center center no-repeat #eff0f4; transition: .2s all ease-out; outline: none; }
.slide-review .swiper-nav .swiper-button-prev { background-image: url('../img/ico_arrow_prev1.png'); }
.slide-review .swiper-nav .swiper-button-next { background-image: url('../img/ico_arrow_next1.png'); }
.slide-review .swiper-nav .swiper-button-prev:hover,
.slide-review .swiper-nav .swiper-button-next:hover { background-color: #ffa9be; opacity: 1; }
.slide-review .swiper-nav .swiper-button-prev:hover { background-image: url('../img/ico_arrow_prev2.png'); }
.slide-review .swiper-nav .swiper-button-next:hover { background-image: url('../img/ico_arrow_next2.png'); }
.slide-review .swiper-nav .swiper-button-prev:after,
.slide-review .swiper-nav .swiper-button-next:after { display: none; }

.tab-menu { display: flex; justify-content: center; align-items: center; width: 552px; height: 100px; margin: 0 auto; border: 1px solid #ccccce; border-radius: 5px; box-sizing: border-box; }
.tab-menu div { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; padding-top: 10px; box-sizing: border-box; background: #fff; font-size: 44px; font-weight: 300; color: #121214; cursor: pointer; }
.tab-menu div.active { background: #ffa9be; font-weight: 700; color: #fff; }
.tab-menu div:first-child { border-radius: 5px 0 0 5px; box-sizing: border-box; }
.tab-menu div:last-child { border-radius: 0 5px 5px 0; box-sizing: border-box; }

.tab-menu.active { position: fixed; top: 15px; left: 0; right: 0; z-index: 100; width: 300px; height: 50px; }
.tab-menu.active div { padding-top: 5px; box-sizing: border-box; font-size: 18px; }

.sec2 .info .wrap { display: flex; justify-content: space-between; align-items: center; width: 1120px; max-width: 100%; margin: 0 auto; padding: 72px 0 52px; box-sizing: border-box; }
.sec2 .info .txt-group { text-align: center; }
.sec2 .info .txt-group .txt { margin-bottom: 15px; font-size: 44px; font-weight: 300; color: #121214; line-height: 54px; }
.sec2 .info .txt-group .txt span { color: #ffa9be; }
.sec2 .info .txt-group .txt2 { font-size: 20px; font-weight: 300; color: #121214; }

.sec2 .info:nth-child(odd) { background: #f8f9fb; }
.sec2 .info:nth-child(odd) .wrap { padding-left: 47px; padding-right: 75px; box-sizing: border-box; }
.sec2 .info:nth-child(even) .wrap { flex-direction: row-reverse; padding-left: 82px; padding-right: 76px; box-sizing: border-box; }


@media only screen and (max-width: 1180px) {
	.hd { height: 70px; }
	.hd .hd-logo { width: 74px; height: 36px; }
	
	.header.active .hd { height: 60px; }
	
	.main .sec1 { height: auto; }
	.main .sec1 .swiper { margin: -30px 0; margin-bottom: 0; padding: 30px 20px; box-sizing: border-box; }
	.main .sec1 .group { justify-content: center; margin: 0 auto; zoom: .8; }
	
	.slide-review { margin-bottom: 60px; }
	.slide-review .swiper:after { display: none; }
	
	.tab-menu { max-width: calc(100% - 40px); height: 60px; }
	.tab-menu div { padding-top: 5px; box-sizing: border-box; font-size: 24px; }
	
	.tab-menu.active { top: auto; bottom: 4%; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-sizing: border-box; }
	.tab-menu.active div { padding-top: 2px; box-sizing: border-box; }
	
	.sec2 .info .wrap { display: block; padding: 50px 20px !important; box-sizing: border-box; }
	.sec2 .info img { display: block; max-width: 80%; margin: 0 auto 30px; }
	.sec2 .info .txt-group .txt { margin-bottom: 10px; font-size: 28px; line-height: normal; }
	.sec2 .info .txt-group .txt2 { font-size: 16px; }
}

@media only screen and (max-width: 960px) {
	.main .sec1 .group { display: block; padding: 100px 0 50px; zoom: 1; }
	.main .sec1 .group .info { margin-bottom: 40px; }
	.main .sec1 .info .logo-group { margin-bottom: 20px; }
	.main .sec1 .info .logo-group .txt { font-size: 20px; }
	.main .sec1 .info .logo-group img { max-width: 60%; }
	.main .sec1 .info .download-group a { margin-right: 10px; }
	.main .sec1 .info .download-group img { width: 124px; }
	.main .sec1 .img-graphic { max-width: 90%; }
}

@media only screen and (max-width: 540px) {
	.ft .ft-contact { display: block; padding: 12px 20px 15px; box-sizing: border-box; font-size: 16px; }
	.ft .ft-contact div { margin-right: 0; margin-bottom: 10px; }
	.ft .ft-contact div:last-child { margin-bottom: 0; }
	.ft .ft-contact div img { margin-right: 8px; zoom: .9; }
	
	.main .sec1 { background-position-X: 70%; }
}