@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('./../fonts/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('./../fonts/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('./../fonts/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('./../fonts/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('./../fonts/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('./../fonts/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


#wrap {width:1200px; margin:0 auto;}
section {margin-bottom:120px !important;}
.justify {text-align: justify; word-break: keep-all;}
.bold {font-weight:700;}
.tit {display:flex; align-items: center; justify-content: center; height: 100px; background-color: #25a8c4; color:#fff; font-weight: 300;}
.tit .bold {color: #fff;}
.tit p {font-size: 40px; line-height: 40px; margin-top: 10px;}
.c_txt {margin-top:40px; font-size: 30px; line-height: 40px; font-weight: 300; text-align: center;}
.contents {padding: 50px; background-color:#f0f6f7;}
.contents .item {position:relative; display: flex; justify-content: space-between; margin-bottom: 20px; padding: 50px; background-color:#fff;}
.contents .item:last-child {margin-bottom:0;}
.contents .item .link {position: absolute; left: 0; top:0; width:100%; height: 100%;}
.contents .banner {display: flex; justify-content: space-between;}
.contents .banner .bl_item {display: flex; position: relative; flex-basis: 530px; text-align: center; margin-bottom: 20px; padding: 15px 0; background-color: #fff; align-items: center; justify-content: center;}
.contents .banner .bl_item a {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.contents .banner .b_left {border: 5px solid #f32158; }
.contents .banner .b_right {border: 5px solid #687ef0; }
.contents .banner .b_deco {display:inline-block; padding: 10px 10px 5px 10px; border-radius: 5px; background-color:#f32158; color:#fff; font-size: 18px;}
.contents .banner .b_right .b_deco {background-color:#ececec; color:#000;}
.contents .banner .b_tit {font-weight: 700; font-size: 24px; line-height: 30px;}
.contents .banner .b_txt {font-size: 18px; line-height: 28px; color:#666;}


.contents .c_left {width: 570px;}
.contents .c_left .cl_tit {margin-bottom: 20px; font-size: 30px; line-height: 40px; font-weight: 700;}
.contents .c_left .cl_date {display:block; margin-bottom: 20px; font-size: 20px; line-height: 30px; font-weight: 500; color: #356cf8;}
.contents .c_left .cl_txt {margin-bottom: 50px; font-size: 18px; line-height: 28px; font-weight: 500; color: #666;}
.contents .mb0 {margin-bottom: 0 !important}

.contents .c_left .cl_num {display: inline-block; padding: 0 10px; line-height: 36px; border-radius: 5px; background-color: #ececec;}
.contents .c_right {width:350px; height: 262px;}
.contents .c_right img {width:100%; height: 100%;}

.sponsor {font-size: 24px; line-height: 40px;}
.sponsor .deco {width: 160px; height: 50px; margin-bottom: 50px; background-color: #25a8c4; color: #fff; line-height: 50px; font-size: 26px; text-align: center; border-radius: 5px;}
.sponsor .bold {}
.sponsor .txt {color:#666; letter-spacing: 0; word-break: keep-all;}
.sponsor .txt span {display:inline-block;}
.cb {font-size: 20px; color:#2836ba; font-weight: 500;}

.list {display: flex; flex-wrap: wrap; gap:20px;}
.list .item {position:relative; background-color: #f0f6f7; padding: 20px; box-sizing: border-box; text-align: center; flex-basis: calc(33.33% - 13.33px);}
.list .item img {width: 100%; height: 260px;}
.list .item p {font-size: 20px; line-height: 30px; margin-top: 10px;}
.list .item p.sm {font-size: 18px;}
.list .item span {display: block; font-size: 18px; line-height: 28px; color:#666; word-break: keep-all;}
.list .item span.sm {font-size: 16px;}
.list .item div {display: flex; flex-direction: column; height: 150px;  justify-content: center;}
.list .item .link {position: absolute; left: 0; top:0; width:100%; height: 100%;}

.info {display: flex;}
.info .bold {font-size: 30px; line-height: 40px; margin-bottom: 10px; color:#222;}
.info .box {position:relative; width: 50%; text-align:center;}
.info .box:before {content:''; position: absolute; right:0; top:30px; height: 300px; width:1px; background-color: #c0c5c6;}
.info .box:last-child::before {display: none;}
.info .box img {width: 350px; height: 264px;}
.info .box span {display: block; margin: 20px auto 0; width: 260px; height: 36px; line-height: 36px; background-color: #40b3cb; color:#fff; border-radius:5px; font-size: 18px;}
.info .box .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.i_box {background-color:#3f81d2; color:#fff; text-align: center; padding: 20px 0;}
.i_box .ib_txt {font-weight:700; font-size: 20px;}
.i_box .ib_tit {font-weight: 500; font-size: 24px; line-height: 28px; margin-top:10px;}

.share {display: flex;}
.share li {width: 25%; text-align:center;}
.share li p {font-size: 20px; line-height: 20px; margin-bottom: 10px; color:#222;}
.share li img {border-radius: 5px; overflow: hidden; width: 100%;}

.footer {text-align:center; background-color:#f2f6f9; padding: 30px 0;}
.footer .f_info {display: flex; align-items:center; justify-content:center; gap: 20px; margin-top: 30px; color:#222;}

.contents .c_img {flex-basis: 462px; margin-right: 20px;}
.contents .c_img img {width: 100%;}
.contents .c_text {flex:1;}
.contents .c_text p {font-size: 18px; line-height: 28px; color: #666; word-break: keep-all;}

.cp {color: #356cf8 !important;}

@media all and (max-width:1200px) {
#wrap {width: 100%;}
section {margin-bottom: 60px !important}
.tit {height: 80px;}
.tit p {font-size: 30px}
.contents {padding: 30px;}
.contents .c_left {width: 100%;}
.contents .c_left .cl_tit {font-size: 26px; margin-bottom: 10px;}
.contents .c_left .cl_date, .contents .c_left .cl_txt, .contents .c_left .cl_num {margin-bottom: 10px; font-size: 16px; line-height: 26px; text-align: center;} 
.contents .c_left .cl_num {margin-bottom: 30px;}
.contents .c_right {margin: 0 auto}
.contents .item {display:block; padding: 40px; text-align: center;}

.contents .c_img {margin-bottom: 30px;}
.contents .c_img img {max-width:500px;}

.contents .banner {display: block;}

.list .item {flex-basis: calc( 50% - 10px );}
.list .item img {height: 30vw;}
.list .item p {font-size: 18px; line-height: 28px;}
.list .item span {font-size: 16px; line-height: 26px;}
.c_txt {font-size: 20px; line-height: 30px; margin-top: 20px;}

.contents .banner .b_deco {font-size: 18px;}

.contents .banner .b_tit {font-size: 22px; }
.contents .banner .b_txt {font-size: 18px;}

.sponsor {font-size: 18px; line-height: 28px;}
.sponsor .deco {font-size: 18px; line-height: 30px; width: 100px; height: 30px; margin-bottom: 30px;	}
.cb {font-size: 16px; word-break: keep-all;}

.info {display:block;}
.info .box {width: 100%; margin-bottom: 50px;}
.info .box:last-child {margin-bottom:0;}
.info .box:before {display: none;}
.info .bold {font-size: 22px;}

.share {flex-wrap: wrap; justify-content: space-between;}
.share li {width: 49%; margin: 10px 0;}

.footer .f_info {display:block;}
.footer .f_info li {margin-bottom:10px; font-size: 16px; line-height: 20px;}
}

@media all and (max-width:750px) {

#wrap * {word-break: keep-all;}
section {margin-bottom: 30px !important}
.tit {height: 60px;}
.tit p {font-size: 20px;}
.contents {padding: 20px;}
.contents .item {padding: 30px 20px;}
.contents .c_right {width:100%; height: 55vw;}
.contents .c_right img {width: 100%;}
.contents .c_left .cl_tit {font-size: 20px; line-height: 30px;}
.contents .banner .b_tit {font-size: 20px; line-height: 24px;}
.contents .banner .b_txt {font-size: 16px; line-height: 24px;}
.contents .banner .b_deco {font-size: 16px;}
.list .item {flex-basis: 100%;}
.list .item img {height: 62vw;}
.list br {display: none;}
.sponsor {font-size: 16px; line-height: 26px; text-align: center;}
.sponsor .deco {margin:0 auto 20px;}
.cb {display:block; font-size: 14px; line-height: 24px; margin-bottom:5px;}
.info .box img {width:100%; height: 60vw;}
.footer .f_info li {margin-bottom:5px; font-size: 14px; line-height: 20px;}
.i_box .ib_txt {font-size: 16px; line-height: 20px;}
.i_box .ib_tit {font-size: 18px; line-height: 28px;}
.list .item div {height: auto}
.contents .c_text p {font-size: 16px; line-height: 26px;}
}