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


/* CSS Document */


body{background-color:#FFF;font-family: 'GmarketSansMedium'; margin: 0; padding:0; }
p {margin: 0; padding:0;}
img {display: block;max-width: 100%; height: auto;}

#wrap{position: relative; width: 100%; overflow: hidden;}
#container{position: relative;background: #fff;}
#container:after{display:block; clear:both; content:''}
#header{margin-top:10px;}
#footer {position: relative; margin: 0 auto;bottom: 0; text-align: center;}


/* 상단영역 */
.top_area {position: relative; width: 100%; height: 540px; margin: 0 auto; background: #0433b8; left: 0; bottom: 0; z-index: 0;}
.top_area:before{content: ""; position: absolute; width: 100%; height: 100%; background: url(images/top_img.png) no-repeat top center;}
.box {display: block; position: relative;}
.box.left {float:left;text-align:left;}
.main_title {padding-top: 110px;max-width: 1080px;margin: 0 auto;height: 100%;}
.badge {font-size: 17px;display: inline-block;min-width: 170px;padding: 8px;color: #fff;text-align: center;border-radius: 20px;font-weight: normal;width: auto;background-color: #2459f0;margin-bottom: 30px;}
.badge.big {font-size: 20px;min-width: 156px;padding: 20px 15px;color: #1a1c2b;text-align: center;border-radius: 50px;font-weight: 700;background-color: #eaedf6;margin-right: 1%;}
.title {font-weight: 200;font-size: 60px; color: #ffffff;display: block;line-height: 1.2;letter-spacing: -0.7px;}
.title.green {color:#17ffbf;display: inline-block;font-weight: bold;}
    
.dsc{font-size: 17px;color:#fff;word-break: break-word;margin-top: 20px;}
.dsc2{font-size: 20px;font-weight: 500;color:#1a1c2b;word-break: keep-all;margin: 15px 0 30px 0;}
.dsc2.pink{color:#dc2a65;}

/* 콘텐츠영역 */
.inner {margin: 0 auto;}
.inner_con {display: flex;width: 100%;max-width: 1080px;position: relative;top: -60px;margin: 0 auto;}
.inner_con .box {margin-bottom: 40px;padding: 150px 50px 35px;background: #FFFFFF;box-shadow: 0px 6px 15px rgba(18, 18, 21, 0.1);border-radius: 20px;width: 100%;}
.badge_list {padding-left:0;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;}

.time_table {position: absolute;background: #1a1c2b;padding: 0;margin: 0;border-radius: 20px;width: 100%;height: 120px;z-index: 999;display: flex;/* flex-direction: column; */}
.date, .total {font-size: 30px;color: #ffffff;flex-basis: 50%;align-self: auto;display: inline-flex;align-items: center;}
.date:before {background-color: #445cdf;content: '';position: absolute;left: 6%;top: 50%;width: 8px;height: 8px;display: inline-block;border-radius: 50%;margin-right: 10px;}
.date span{padding-left: 90px;}

.time {flex-basis: 50%;align-self: auto;font-size: 30px;color: #ffffff;}
.total span{font-size: 45px;font-weight: 700;letter-spacing: 3px;padding: 0 2%;}
.total .line{font-size: 50px;color: #445cdf;}

/* 푸터영역 */
.footer-wrap {display: flex;max-width: 1080px;position: relative;margin: 0 auto;width: 100%;height: 114px;padding-top: 200px;}
.footer_bottom {position: absolute;width: 100%;text-align:center;margin: 0 auto;}
.f_logo {margin: 0 auto;text-align: center;}


/* 반응형 */
 @media only screen and (max-width: 1200px) {
	.top_area:before {background: url(images/top_img.png) no-repeat top center; background-size:cover;}
	.inner {padding:0 4%;}
	.main_title {padding:0 4%;}
	.box.left {top:20%;}
	.date, .total {font-size: 27px;}
	.date span{padding-left: 17%;}
	.time {font-size: 30px;}
	.total span{font-size: 35px;padding: 0 2%;}
	.total .line{font-size: 40px;}
	.dsc2{font-size: 18px;}
	.badge {margin-bottom: 20px;}
	.badge.big {font-size: 18px;min-width: 120px;}
	.footer-wrap {height: 115px;padding-top: 110px;}
}

@media only screen and  (max-width:768px) {
	br{ display: inline-block;content: " ";padding: 0 2px;}
	.main_title {padding:0 6%;}
	.top_area:before {background: url(images/top_img.png) no-repeat top center;}
	.title {font-weight: 200;font-size: 43px;color: #ffffff;display: block;line-height: 1.2;letter-spacing: -0.7px;}
	.dsc{font-size: 16px;line-height: 26px;}
	.dsc2{font-size: 20px;font-weight: 500;color:#1a1c2b;word-break: keep-all;margin: 15px 0 30px 0;}
	.box.left {top: 130px;}
	.date, .total {font-size: 23px;justify-content: center;}
	.date span{padding-left: 17%;}
	.time {font-size: 30px;}
	.total span{font-size: 30px;padding: 0 2%;}
	.total .line{font-size: 30px;}
	.dsc2{font-size: 15px;}
	.inner_con .box {padding: 140px 30px 35px;}
	.badge {margin-bottom: 15px;min-width: 150px;}
	.badge.big {font-size: 17px;}
	.top_area {height: 500px;}
	.time_table {flex-direction: column;}
	.date:before {content: none;}
	.date span{padding-left: 0;}
	.footer-wrap {height: 100px;padding-top: 30px;}
}

@media only screen and  (max-width:640px) {
br{ display: inline-block;content: " ";padding: 0 2px;}
	.main_title {padding:0 6%;}
	.title {font-size: 40px;}
	.dsc{font-size: 15px;line-height: 24px; letter-spacing:0.5px;}
	.dsc2{font-size: 15px;font-weight: 700;color:#1a1c2b;word-break: keep-all;margin: 15px 0 30px 0;}
	.box.left {top: 130px;}
	.date, .total {font-size: 20px;justify-content: center;}
	.date span{padding-left: 17%;}
	.time {font-size: 30px;}
	.total span{font-size: 26px;padding: 0 2%;}
	.total .line{font-size: 30px;}
	.dsc2{font-size: 15px;margin: 15px 0 20px 0;}
	.inner_con .box {padding: 130px 20px 35px;}
	.badge {margin-bottom: 15px;min-width: 150px;}
	.badge.big {font-size: 16px;padding: 14px;}
	.top_area {height: 500px;}
	.time_table {flex-direction: column;}
	.date:before {content: none;}
	.date span{padding-left: 0;}
	.flogo {width: 80%;margin: 0 auto;} 
}

@media only screen and (max-width:560px) {
	br{ display: inline-block;content: " ";padding: 0 2px;}
	.main_title {padding:0 6%;}
	.title {font-size: 38px;}
	.dsc{font-size: 15px;line-height: 24px; letter-spacing:0.5px;}
	.dsc2{font-size: 15px;font-weight: 500;color:#1a1c2b;word-break: keep-all;margin: 15px 0 30px 0;}
	.box.left {top: 130px;}
	.date, .total {font-size: 20px;justify-content: center;}
	.date span{padding-left: 17%;}
	.time {font-size: 30px;}
	.total span{font-size: 26px;padding: 0 2%;}
	.total .line{font-size: 30px;}
	.dsc2{font-size: 15px;margin: 15px 0 20px 0;}
	.inner_con .box {padding: 130px 20px 35px;}
	.badge {margin-bottom: 15px;min-width: 150px;}
	.badge.big {font-size: 16px;padding: 14px;width: 100%;margin-right: 0;}
	.top_area {height: 500px;}
	.time_table {flex-direction: column;}
	.date:before {content: none;}
	.date span{padding-left: 0;}
	.flogo {width: 80%;margin: 0 auto;}
}


@media only screen and  (max-width:359px) {
	br{ display: inline-block;content: " ";padding: 0 2px;}
	.main_title {padding:0 6%;}
	.title {font-size: 30px;}
	.dsc{font-size: 14px;line-height: 24px;letter-spacing: -0.5px;}
	.dsc2{font-size: 15px;font-weight: 500;color:#1a1c2b;word-break: keep-all;margin: 15px 0 30px 0;}
	.box.left {top: 120px;}
	.date, .total {font-size: 18px;justify-content: center;}
	.date span{padding-left: 17%;}
	.time {font-size: 30px;}
	.total span{font-size: 24px;padding: 0px 1%;}
	.total .line{font-size: 30px;}
	.dsc2{font-size: 14px;margin: 15px 0 20px 0;}
	.inner_con .box {padding: 130px 15px 35px;}
	.badge {margin-bottom: 15px;min-width: 150px;}
	.badge.big {font-size: 15px;padding: 14px;width: 100%;margin-right: 0;}
	.top_area {height: 500px;}
	.time_table {flex-direction: column;}
	.date:before {content: none;}
	.date span{padding-left: 0;}
	.flogo {width: 80%;margin: 0 auto;}
	.footer-wrap {height: 90px;padding-top: 0px;}
}