@charset "utf-8"

/* Grid System */
.grid { position: relative; *zoom: 1; -webkit-box-sizing: border-box; box-sizing: border-box; }
.grid:before,
.grid:after { content: ''; display: table; }
.grid:after { clear: both; }
.grid .col { position: relative; float: left; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* bxSlider */
.bx-wrapper {margin: 0 auto !important;}
.bx-wrapper .bx-viewport {background: none;box-shadow: none;border: 0;left: 0;}
.bx-wrapper img {display: inline;}

.story_wrap * { font-family: 'Noto Sans KR';}
.story_wrap { text-align: center; background-color:#fff;}
.story_wrap .wrap {width: 100%;max-width: 720px;margin: 0 auto;}

.story_wrap .story_visual{background:#12131a url('https://img.eduwill.net/Img2/Quark/promotion/190621/mobile/bg_title.jpg') 50% 0 no-repeat; background-size: cover;}
.list_box{position:relative;width:100%;background-color:#fff100;padding: 35px 0 130px; background-image: url('https://img.eduwill.net/Img2/Quark/promotion/190621/mobile/bg_obj.jpg'); background-position: center bottom; background-repeat: no-repeat; background-size: 100%;}
.list_box ul{ width:97.22222222222%; margin:0 auto;}
.list_box li{margin-bottom:5%;}
.list_box li a { display:block;}
.list_box li a img{border-radius: 10px; box-sizing:border-box;  -webkit-box-sizing:border-box; -webkit-box-shadow: 0px 8px 16px 0px rgba(51,51,51,0.2);-moz-box-shadow: 0px 8px 16px 0px rgba(51,51,51,0.2);box-shadow: 0px 8px 16px 0px rgba(51,51,51,0.2); overflow:hidden;}

.winner_box{background-color:#3415ac;padding-bottom:80px;}
.winner_box .winner_slide { width:97.22222222222%; margin:0 auto;}
.winner_box .bx-wrapper .bx-pager { padding:0; bottom: -40px;}
.winner_box .bx-wrapper .bx-pager.bx-default-pager a { display:inline-block; margin:0 4px; text-indent:-99999em; width:11px; height:11px; border-radius:50%; background:#fff;}
.winner_box .bx-wrapper .bx-pager.bx-default-pager a.active { width:33px; background:#fff; border-radius:50px;}

.text { background:#250e97 url('https://img.eduwill.net/Img2/Quark/promotion/190621/mobile/bg_text.jpg') 50% 0 no-repeat; background-size: cover;}
.banner_box ul { width:97.22222222222%; margin:0 auto; padding: 30px 0;}
.banner_box ul li { margin-bottom: 15px;}
.banner_box ul li:last-child { margin-bottom: 0;}

@media (min-width:720px){
	.story_wrap .story_visual{ background-size: auto;}
	.list_box { padding: 70px 0 260px; background-size: auto;}
	.winner_box { padding-bottom: 150px;}
	.winner_box .bx-wrapper .bx-pager { bottom: -60px;}
	.winner_box .bx-wrapper .bx-pager.bx-default-pager a { margin:0 8px; width:22px; height:22px;}
	.winner_box .bx-wrapper .bx-pager.bx-default-pager a.active { width:66px;}

	.banner_box ul { padding: 60px 0;}
	.banner_box ul li { margin-bottom: 30px;}
}


.story_top .item { position: relative; background: url('https://img.eduwill.net/Img2/Quark/promotion/190621/mobile/bg_pt.jpg') 50% 0 no-repeat; background-size: 100% ;}
.story_top .item .item_title { position: absolute; top:18.98734177215%; left: 1.8%; text-align: left;}
.story_top .item .item_title strong { font-weight: 400; font-size: 23px; line-height: 1.3; color: #252525; letter-spacing: -2px;}
.story_top .item .item_title strong span { color: #f10eff; font-weight: 900;}
.story_top .item .item_title p { margin-top: 10px; font-size: 15px; color: #575757; font-weight: 400; letter-spacing: -1px;}

.story_video { width: 100%; max-width: 720px;margin: 0 auto 25px; height: 100%;min-height: 198px;max-height: 413px;}
.story_video .btn_play { display:block;width:100%; margin:0 auto;}
.story_video .btn_play img { width:100%; height:100%;}
.story_video .video { display:none; width:100%; margin:0 auto;}

.story_interview { padding-bottom: 50px;}
.story_interview dl { padding: 25px 4.16666666667% 35px; text-align: left; background: #f8f8f8;}
.story_interview dl dt { margin-bottom: 10px; font-weight: 700; font-size: 18px; color: #3616af; letter-spacing: -1px;}
.story_interview dl dt span { margin-right:  5px;}
.story_interview dl dt span img { width: 11px; position: relative; top: -2px; vertical-align: middle;}
.story_interview dl dd { font-size: 16px; font-weight: 400; line-height: 1.5; color: #2a2a2a; letter-spacing: -1px;}
.story_interview dl + dl { margin-top: 17px;}

@media (min-width:720px){
	.story_top .item .item_title strong { font-size: 45px;}
	.story_top .item .item_title p { margin-top: 20px; font-size: 27px;}

	.story_video { margin-bottom: 50px;}
	.story_interview dl { padding: 50px 4.16666666667% 70px;}
	.story_interview dl dt { margin-bottom: 20px; font-size: 35px; letter-spacing: -2px;}
	.story_interview dl dt span { margin-right: 10px;}
	.story_interview dl dt span img { width: 22px; }
	.story_interview dl dd { font-size: 32px;}
	.story_interview dl + dl { margin-top: 34px;}
}