@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'GmarketSansBold';
    src: url('font/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('font/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 공통 */
html{ width: 100%; height: 100%; }
body { width: 100%; height: 100% ;font-family:'GmarketSansBold', sans-serif;}
.wrap {position:fixed; overflow:auto; width: 100%; height: 100%;}
.page1,.page2,.page3,.page4 {width:100%; height:100%;}
.content {width:90%; margin:5% auto 0;}
.top {width:100%; height:200px; position:relative; }

.top {
	background:-o-linear-gradient(90deg, #0c152d, #33246e) !important;
	background:-moz-linear-gradient( center top, #0c152d 0%, #33246e 100% ) !important;
	background:-webkit-gradient( linear, left top, right top, color-stop(0, #0c152d), color-stop(1, #33246e) ) !important;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c152d', endColorstr='#33246e') !important;
	background:-webkit-linear-gradient(#0c152d, #33246e) !important;
	background:-ms-linear-gradient(#0c152d, #33246e) !important;
	background:linear-gradient(#0c152d, #33246e) !important;
}

.top .top_txt {color:#fff; position:absolute; top:50%; transform:translate(0,-50%); font-size:45px; line-height:50px;word-break:keep-all;width:100%;}
.top .top_txt span {font-size:35px; display:block;  font-family:'GmarketSansMedium', sans-serif;}
.top .top_logo {position:absolute; top:50%; right:3%; width:25%; transform:translate(0,-50%); max-width:270px;}
img {width:100%;}

/* page1 */
.page1 .logo_b {margin: 0 auto; }
.page1 .txt {text-align:center; font-size:80px; }
.page1 .txt span {display:block; color:#33246e;}
.page1 .txt p {font-size:35px; margin-top:3%; letter-spacing:-1px; font-family:'GmarketSansMedium', sans-serif;}
.page1 .toon {width:75%; margin:0 auto 5%;}
.page1 .btn {background: -webkit-gradient(linear, left top, right top, color-stop(0, #0c152d), color-stop(1, #33246e)); max-width:360px; height:100px; margin:0 auto; border-radius:100px;}
.page1 .btn a { display:block; text-align:center; color:#fff; font-size:40px; line-height:110px;}

/*page2*/


.page2 .box {width:100%; margin-bottom:8%;}
.page2 .box .box_txt {padding-top:20px; font-size:50px; text-align:center; line-height:65px; word-break:keep-all;}
.page2 .box.refresh .box_txt, .page2 .box.scent .box_txt {padding-top:20px;} 
.page2 .box .box_txt .p {color:#33246e; font-size:70px;}
.page2 .box .box_txt .small {font-size:40px; line-height:65px; font-family:'GmarketSansMedium', sans-serif;}
.page2 .box .box_choice {width:100%; height:60px; border:3px solid #000; border-radius:50px; box-sizing:border-box; overflow:hidden; margin-top:15px;}
.page2 .box .box_choice:after {display:block; content:""; clear:both;}
.page2 .box .box_choice li {width:18%; height:100%; float:left; border-right:3px dotted #ddd; box-sizing:border-box;}
.page2 .box .box_choice li.zero {width:10%;}
.page2 .box .box_choice li:last-child {border:none;}
.page2 .box .box_number {width:100%;}
.page2 .box .box_number:after {display:block; content:""; clear:both;}
.page2 .box .box_number li {width:18%; float:left; text-align:right;  padding-top:15px; font-size:25px;  font-family:'GmarketSansMedium', sans-serif;}
.page2 .box .box_number li.zero {width:10%;}

.page2 .box.acl .box_choice li {width:9.5%; height:100%; float:left; border-right:3px dotted #ddd; box-sizing:border-box;}
.page2 .box.acl .box_choice li.zero {width:5%;}
.page2 .box.acl .box_number li {width:9.5%; float:left; text-align:right;  padding-top:15px; font-size:25px;}
.page2 .box.acl .box_number li.zero {width:5%;} 


/* 막대 색상 
.page2 .box.sweet .box_choice li.zero {background:#33246e;}
.page2 .box.sour .box_choice li.zero,
.page2 .box.sour .box_choice li.one {background:#33246e;}

.page2 .box.refresh .box_choice li.zero,
.page2 .box.refresh .box_choice li.one,
.page2 .box.refresh .box_choice li.two {background:#33246e;} 

.page2 .box.body .box_choice li.zero,
.page2 .box.body .box_choice li.one,
.page2 .box.body .box_choice li.two,
.page2 .box.body .box_choice li.three {background:#33246e;} 

.page2 .box.scent .box_choice li.zero,
.page2 .box.scent .box_choice li.one,
.page2 .box.scent .box_choice li.two,
.page2 .box.scent .box_choice li.three,
.page2 .box.scent .box_choice li.four {background:#33246e;} 

.page2 .box.acl .box_choice li.zero,
.page2 .box.acl .box_choice li.one,
.page2 .box.acl .box_choice li.two, 
.page2 .box.acl .box_choice li.three, 
.page2 .box.acl .box_choice li.four, 
.page2 .box.acl .box_choice li.five {background:#33246e;}*/

.page2 .toon {width:75%; margin:0 auto 10%;} 

.page2 .btn {max-width:360px; height:100px; background: -webkit-gradient(linear, left top, right top, color-stop(0, #0c152d), color-stop(1, #33246e)); border-radius:30px;margin : 0 auto;}
.page2 .btn a {display:block; width:100%; font-size:60px; color:#fff; text-align:center; line-height:115px;}


/*page3*/
.page3 .txt {text-align:center; font-size:80px; margin-top:30%; line-height:95px; letter-spacing:-2px;}
.page3 .txt span {display:block; color:#33246e;}
.page3  .toon {width:80%; margin:0 auto;}


/*page4*/
.page4 .box {width:100%; font-family:'GmarketSansMedium', sans-serif; margin-bottom:5%;}
.page4 .box .sool {border:3px solid #ddd; box-sizing:border-box; position:relative; display:inline-block;  vertical-align:middle; margin-right:3%;}
.page4 .box .sool .type {position:absolute; top:15px; left:15px; background:#33246e; border-radius:100px; width:120px; height:120px; color:#fff; text-align:center; line-height:120px; font-size:20px;}
.page4 .box .box_con {display:inline-block; width:100%; vertical-align:middle;margin-top:20px;}
.page4 .box .box_con .brand {font-size:20px; color:#555; padding-bottom:10px;}
.page4 .box .box_con .name {font-size:37px;  font-family:'GmarketSansbold', sans-serif;  padding-bottom:20px;}
.page4 .box .box_con .volume {font-size:20px; display:inline-block; margin-right:20px; margin-bottom:1px;}
.page4 .box .box_con .volume span {display:inline-block; font-size:18px; line-height:24px; height:18px; color:#fff; background:#33246e; border-radius:5px; padding:5px 8px; margin-right:8px; }
.page4 .box .box_con .price {font-size:20px; display:inline-block; margin-bottom:1px;}
.page4 .box .box_con .price span {display:inline-block; font-size:18px; line-height:24px; height:18px; color:#fff; background:#33246e; border-radius:5px; padding:5px 8px; margin-right:8px; }
.page4 .box .box_con .box_con_img {width:100%;  padding-top:30px;}
.page4 .box .box_con .box_con_img img {width:auto; height:250px;}
.page4 .box .box_con .box_con_img .level {margin-right:20px; display:inline-block;}
.page4 .box .box_con .box_con_img .graph {display:inline-block;}
.page4 .btn {width:100%; height:150px; background: -webkit-gradient(linear, left top, right top, color-stop(0, #0c152d), color-stop(1, #33246e)); border-radius:30px;}
.page4 .btn a {display:block; width:100%; font-size:60px; color:#fff; text-align:center; line-height:150px;}



.page1 .btn,
.page2 .btn,
.page3 .btn,
.page4 .btn{
	background:-o-linear-gradient(90deg, #0c152d, #33246e) !important;
	background:-moz-linear-gradient( center top, #0c152d 0%, #33246e 100% ) !important;
	background:-webkit-gradient( linear, left top, right top, color-stop(0, #0c152d), color-stop(1, #33246e) ) !important;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c152d', endColorstr='#33246e') !important;
	background:-webkit-linear-gradient(#0c152d, #33246e) !important;
	background:-ms-linear-gradient(#0c152d, #33246e) !important;
	background:linear-gradient(#0c152d, #33246e) !important;
}

.box_choice_graph_bg {
	background:#33246e;
}