@charset "utf-8";

.freebook-wrap { background-color: #fff; }
.freebook-wrap .container { position: relative; background-repeat: no-repeat; background-position: center top; background-size: auto 100%; }
.freebook-wrap .wrap { position: relative; max-width: 720px; margin: 0 auto; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; }
.freebook-wrap .verdana { font-family: verdana; }

/* freebook-count */
.freebook-count { position: relative; height: 50px; padding: 10px 0; font-size: .9375rem; letter-spacing: -1px; color: #ff8226; }
.freebook-count span { display: inline-block; width: 21.5px; height: 30.5px; margin-right: 2px; vertical-align: -4px; line-height: 30.5px; font-size: 20px; font-weight: bold; color: #fff; background: url('//img.eduwill.net/Img2/mobile2/brand_new/event/freebook/xat/190103/bg_num.png') no-repeat 50% top; background-size: 100% auto; }

@media only screen and (min-width: 640px) {
	.freebook-count { font-size: 1.875rem; }
	.freebook-count span { width: 43px; height: 61px; line-height: 61px; font-size: 2.5rem; }
}

/* freebook-title */
.freebook-title { background-color: #ffd53a; background-image: url('//img.eduwill.net/Img2/kyb/promotion/freebook/190417/mobile/bg_title.jpg'); }
.freebook-title .desc { position: absolute; top: 77.03101920236337%; right: 6.94%; left: 6.94%; text-align: left; }
.freebook-wrap .freebook-title .col { float: none; width: 100%; }
.freebook-title .desc dt { float: left; margin-right: 10px; }
.freebook-title .desc dt { font-size: .75rem; font-weight: 700; color: #000; }
.freebook-title .desc dd { font-size: .875rem; font-weight: 400; color: #000; letter-spacing: -.5px; white-space: nowrap; }

@media only screen and (min-width: 720px) {
	.freebook-title .desc dt { font-size: 1.5rem; }
	.freebook-title .desc dd { font-size: 1.5rem; }
}

/* freebook-action */
.freebook-wrap .freebook-action { height: 53px; background-color: #ffa93a; }
.freebook-action .wrap { position: absolute; bottom: 28.11320754716981%; left: 0; right: 0; }
.freebook-action a { display: inline-block; margin: 0 17.361%; } 

@media only screen and (min-width: 720px) {
	.freebook-wrap .freebook-action { height: 106px; }
}

/* freebook-why */
.freebook-why.why-2 { background-color: #f4e7d7; }

/* freebook-text-title */
.freebook-text-title { z-index: 1; line-height: 1; background-color: #ff5a00; }
.freebook-text-title .wrap { padding: 25px 0; }
.freebook-text-title span { display: block; margin-bottom: 5px; font-size: .75rem; font-weight: 300; color: #fff; letter-spacing: -1px; }
.freebook-text-title strong { display: block; font-size: 1.625rem; font-weight: 700; color: #fff; letter-spacing: -3px; }
.freebook-text-title em { color: #ffd53a; }
.freebook-text-title .wrap:before,
.freebook-text-title .wrap:after { content: ''; position: absolute; display: block; width: 27.5px; height: 23.5px; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; }
.freebook-text-title .wrap:before { top: -7.881773399014778%; left: 5%; background-image: url('//img.eduwill.net/Img2/kyb/promotion/freebook/190417/mobile/quotes_left.png'); }
.freebook-text-title .wrap:after { bottom: -7.881773399014778%; right: 5%; background-image: url('//img.eduwill.net/Img2/kyb/promotion/freebook/190417/mobile/quotes_right.png'); }

@media only screen and (min-width: 720px) {
	.freebook-text-title .wrap { padding: 50px 0; }
	.freebook-text-title span { font-size: 1.625rem; letter-spacing: -2px; }
	.freebook-text-title strong { font-size: 3.25rem; letter-spacing: -8px; }
	.freebook-text-title .wrap:before,
	.freebook-text-title .wrap:after { width: 55px; height: 47px; }
}


/* freebook-apply */
.freebook-apply { background-color: #242736; }
.freebook-apply .wrap { padding: 35px 0 45px; }
.freebook-apply .desc { font-size: 30px; color: #bcd5e1; letter-spacing: -5px; }
.freebook-apply .apply-top .highlight { color: #ffd53a; }
.freebook-apply .apply-count { display: inline-block; width: 320px; margin-top: 15px; padding: 4px; font-size: 0; background-color: #000; }
.freebook-apply .apply-count .count { width: 70%; }
.freebook-apply .apply-count .count span { display: inline-block; width: 49%; margin-left: .5%; }
.freebook-apply .apply-count .count span:first-child { margin-left: 0; }

.freebook-apply .apply-count .action { width: 30%; padding-left: 4px; }
.freebook-apply .apply-count .btn { display: table; width: 100%; height: 118px; border-radius: 5px; }
.freebook-apply .apply-count .btn span { display: table-cell; width: 100%; height: 100%; vertical-align: middle; line-height: 1.3; font-size: 12px; letter-spacing: -3px; }
.freebook-apply .apply-count .btn strong { font-size: 14px; color: #cdcccc; }
.freebook-apply .apply-count .btn em { font-size: 13px; }

.freebook-apply .apply-count .btn_apply { color: #797513; background-color: #ffd53a; }
.freebook-apply .apply-count .btn_apply strong { color: #242736; }
.freebook-apply .apply-count .btn_end { background-color: #0b0c11; cursor: default; pointer-events: none; }
.freebook-apply .apply-count .btn_today_end { background-color: #0b0c11; cursor: default; pointer-events: none; }
.freebook-apply .apply-count .btn_today_end em { color: #60606a; }

.apply-con { position: relative; margin-top: 20px; }
.apply-table table { width: 100%; border-bottom: 1px solid #000; }
.apply-table table td { position: relative; width: 100%; height: 74px; text-align: center; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; }
.apply-table table td.sun { border-right-width: 0; }
.apply-table table td.sun dl dt { color: #ea604e; }
.apply-table table td.today dl dt,
.apply-table table td.today dl dd span,
.apply-table table td.today dl dd strong { color: #ffd800; }
.apply-table table td dl { border-right: 1px solid #000; border-top: 1px solid #000; }
.apply-table table tr td:first-child dl:first-child { border-left: 1px solid #000; }
.apply-table table td.today dl,
.apply-table table td:first-child.today dl:first-child { border: 2px solid #ffd800; -webkit-box-sizing: border-box; box-sizing: border-box; }
.apply-table table td dl dt { height: 30px; text-align: center; line-height: 30px; font-size: 11px; color: #666c75; border-bottom:1px solid #000; border-top:1px solid #282e36; -webkit-box-sizing: border-box; box-sizing: border-box; }
.apply-table table td dl dd { height: 43px; padding-top: 10px; border-top: 1px solid #282e36; -webkit-box-sizing: border-box; box-sizing: border-box; }
.apply-table table td dl dd span { display: inline-block; line-height: 1; font-size: 11px; color: #fff; }
.apply-table table td dl dd strong { display: inline-block; font-size: 15px; line-height: 1; }
.apply-table table td dl dd.finish { padding:0; line-height: 40px; font-weight: bold; color: #666c75; }

@media only screen and (min-width: 640px) {
	.freebook-apply .wrap { padding: 70px 40px 90px; }
	.freebook-apply .title { padding: 8px 10px 9px; font-size: 24px; }
	.freebook-apply .desc { margin-top: 40px; font-size: 60px; }
	.freebook-apply .apply-count { width: 100%; margin-top: 30px; padding: 8px }

	.freebook-apply .apply-count .action { padding-left: 8px; }
	.freebook-apply .apply-count .btn { height: 221px; }
	.freebook-apply .apply-count .btn span { font-size: 18px; }
	.freebook-apply .apply-count .btn strong { font-size: 24px; }
	.freebook-apply .apply-count .btn em { font-size: 20px; }

	.apply-table table td dl dt { font-size: 14px; }
	.apply-table table td dl dd strong { font-size: 18px; }
}

/* freebook-member */
.freebook-member { padding-bottom: 25px; text-align: center; background-color: #242736; }
.freebook-member p { color: #999; }
.freebook-member .action { margin-top: 10px; }
.freebook-member .action a { display: inline-block; padding: 5px 10px; color: #fff; background-color: #000; }

/* freebook-notice */
.freebook-notice { padding: 25px 18px; background-color: #171924; }
.freebook-notice .wrap { text-align: left; color: #fff; }
.freebook-notice p { margin-bottom: 10px; font-weight: bold; font-size: .875rem; }
.freebook-notice dt { margin-bottom: 3px; font-size: .75rem; }
.freebook-notice dd { margin-bottom: 3px; font-size: .75rem; }

@media only screen and (min-width: 720px) {
	.freebook-notice { padding: 50px 36px; }
	.freebook-notice p { margin-bottom: 20px; font-size: 1rem; }
	.freebook-notice dt { margin-bottom: 6px; font-size: .875rem; }
	.freebook-notice dd { margin-bottom: 6px; font-size: .875rem; } }
}

/* layer */
.layer-complete { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); }
.layer-complete.in { display: block; }
.layer-complete .layer-wrap { position: absolute; top: 0; left: 0; right: 0; max-width: 580px; background-color: #fff; }
.layer-complete .layer-title { margin-top: 20px; font-size: .8125rem; color: #888; }
.layer-complete .layer-title strong { position: relative; z-index: 1; display: inline-block; font-size: 1.25rem; color: #111; }
.layer-complete .layer-title strong:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; z-index: -1; width: 100%; height: 16px; background-color: #fff1a6; }
.layer-complete .layer-body { text-align: left; }
.layer-complete .action { margin: 0 10.9375%; }
.layer-complete .info { margin: 15px 5%; }
.layer-complete .info li { position: relative; margin-top: 5px; padding-left: 10px; font-size: .75rem; color: #333; }
.layer-complete .info li:first-child { margin-top: 0; }
.layer-complete .info .highlight { margin-top: 10px; color: #f13408; }
.layer-complete .info li:before { content: '*'; position: absolute; top: 0; left: 0; }
.layer-complete .info li li { margin-top: 0; font-size: .75rem; color: #666; }
.layer-complete .info li li:before { content: '-'; }
.layer-complete .layer-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; }
.layer-complete .layer-close a { position: relative; display: block; width: 100%; height: 100%; }
.layer-complete .layer-close a:before,
.layer-complete .layer-close a:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; background-color: #000; }
.layer-complete .layer-close a:before { top: 50%; width: 20px; height: 1px; margin-left: -10px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.layer-complete .layer-close a:after { top: 50%; width: 1px; height: 20px; margin-top: -10px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }

@media only screen and (min-width: 640px) {
	.layer-complete .layer-wrap { left: 50%; right: auto; margin-left: -290px; }
}