@import url('default.css');
@font-face {
    font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 300;
    src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
    url('/images/course/fonts/GmarketSansLight.woff2') format('woff2'),
    url('/images/course/fonts/GmarketSansLight.woff') format('woff'); 
}
@font-face {
    font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 500;
    src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
    url('/images/course/fonts/GmarketSansMedium.woff2') format('woff2'),
    url('/images/course/fonts/GmarketSansMedium.woff') format('woff'); 
}
@font-face {
    font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 700;
    src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
    url('/images/course/fonts/GmarketSansBold.woff2') format('woff2'),
    url('/images/course/fonts/GmarketSansBold.woff') format('woff'); 
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard GOV ExtraBold"),
    url(/fonts/Pretendard-ExtraBold.woff2) format("woff2"),
    url(/fonts/Pretendard-ExtraBold.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard GOV Bold"),
    url(/fonts/Pretendard-Bold.woff2) format("woff2"),
    url(/fonts/Pretendard-Bold.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard GOV Regular"),
    url(/fonts/Pretendard-Regular.woff2) format("woff2"),
    url(/fonts/Pretendard-Regular.woff) format("woff");
}

html, body, xmp, pre {
    color: #191e26;
    line-height: 1.5;
    font-family: 'Pretendard', 'Noto Sans KR', 'NanumGothic', 'Malgun Gothic', 'Apple SD Gothic', 'Apple SD Gothic Neo', 'Dotum', sans-serif;
    font-size: 15px;
    font-weight: 400;
    /* letter-spacing: -0.05em; */
    word-break: keep-all;
	word-wrap: break-word;
}

#wrap { min-width:1240px; position:relative; overflow:hidden; }
.wrapper { width:1240px; padding:0 20px; margin:0 auto; }

@media screen and (max-width:640px){
	html, body, xmp, pre { font-size: 13px; }
	#wrap { min-width:100%; }
	.wrapper { width:auto; padding:0; margin:0 20px; }
}

header { position:relative; padding:210px 0 380px 0; background:#013ac9 url(../images/summerevent_2025/tit_bg.png) repeat center top; color:#fff; }
header .tit { text-align:center; font-family:'Gmarket Sans'; font-size:100px; font-weight:800; line-height:1.2; }
header .tit .shap { position:relative; }
header .tit .shap::before { content:""; position:absolute; left:-0.75em; top:-0.45em; width:0.9em; height:0.92em; background:url(../images/summerevent_2025/tit_shap.png) no-repeat center center / contain; }
header .tit .ez { display:inline-block; width:5.44em; color:transparent; background:url(../images/summerevent_2025/tit_ez.png) no-repeat left top / contain; }
header .event { position:relative; }
header .event::before { content:""; position:absolute; left:-1.67em; bottom:0; width:1.56em; height:1.48em; background:url(../images/summerevent_2025/tit_arrow.png) no-repeat right bottom / contain; }
header .event::after { content:""; position:absolute; right:-1.79em; top:-0.1em; width:1.99em; height:1.99em; background:url(../images/summerevent_2025/tit_emblem.png) no-repeat center center / contain; }
header .rolling { position:absolute; left:0; bottom:67px; width:100%;   }
header .rolling ul { position:absolute; left:0; bottom:0; display:flex; gap:10px; font-size:25px; }
header .rolling ul li { position:relative; padding:0.7em 2em 0.5em 2em; border-radius:3em; background-color:#fff; color:#013ac9; white-space:nowrap; }
header .rolling ul li.excel { background-color:#95ff84; padding-left:5.6em; }
header .rolling ul li.itq { background-color:#95ff84; padding-left:6.4em; }
header .rolling ul li.gtq { background-color:#ff8a8a; color:#fff; padding-left:6.4em; }
header .rolling ul li.cad { padding-left:4.48em; }
header .rolling ul li.pr { background-color:#a1a1ff; color:#fff; padding-left:6.4em; }
header .rolling ul li::before { content:""; position:absolute; left:2.1em; top:0; height:100%; background-position:left center; background-repeat:no-repeat; background-size:contain; }
header .rolling ul li.excel::before { width:3.24em; background-image:url(../images/summerevent_2025/subject_excel.png); }
header .rolling ul li.itq::before { width:3.92em; background-image:url(../images/summerevent_2025/subject_itq.png); }
header .rolling ul li.gtq::before { width:3.52em; background-image:url(../images/summerevent_2025/subject_photo.png); }
header .rolling ul li.cad::before { width:1.72em; background-image:url(../images/summerevent_2025/subject_cad.png); }
header .rolling ul li.pr::before { width:3.52em; background-image:url(../images/summerevent_2025/subject_pr.png); }
header .rolling ul.dleft { bottom:3.12em; animation-name:rolling_left; animation-duration:30s; animation-iteration-count:infinite; animation-timing-function:linear; }
header .rolling ul.dright { animation-name:rolling_right; animation-duration:30s; animation-iteration-count:infinite; animation-timing-function:linear; }
@keyframes rolling_left {
	0% { transform:translateX(0); }
	100% { transform:translateX(-50.08%); }
}
@keyframes rolling_right {
	0% { transform:translateX(-50.08%); }
	100% { transform:translateX(0); }
}
@media screen and (max-width:640px){
	header { padding:105px 0 200px 0; }
	header .tit { font-size:50px;}
	header .rolling { bottom:30px; }
	header .rolling ul { font-size:14px; }
}

.container {  }
.container h2 { margin:90px 0 50px 0;  }
.container h2 span { display:inline-block; position:relative;  }
.container h2 span::after { position:absolute; left:5px; top:5px; width:100%; height:100%; background:#031d8c;  border-radius:45px; content:""; }
.container h2 span strong { display:inline-block; position:relative; z-index:10; padding:10px 40px 3px 40px; color:#031d8c; font-family:'Gmarket Sans'; font-size:45px; font-weight:800; border:3px solid #031d8c; border-radius:45px; background:#fff; content:""; }
.container .class2 h2 span::after { background:#fff; background-color:#f4f4f4; border:3px solid #031d8c; }
.container .class2 h2 span strong { color:#fff; background:#031d8c; }
.container .table_wrap { margin:0 0 70px 0; }
.container .table_wrap table { width:100%; }
.container .table_wrap table th, .container .table_wrap table td { border-style:solid; border-width:1px; border-color:#a7afbe; padding:8px 5px 7px 5px; text-align:center; }
.container .table_wrap table th:first-child, .container .table_wrap table td:first-child { border-left-width:0; }
.container .table_wrap table th:last-child, .container .table_wrap table td:last-child { border-right-width:0; }
.container .table_wrap table thead th { font-size:20px; font-weight:800; }
.class2 .list_wrap { display:none; }
.container .table_wrap table thead th { background-color:#656f83; color:#fff; font-weight:800; }
.container .table_wrap table tbody th { font-weight:700; }
.container .table_wrap table tbody td strong { font-weight:800; }
.container .class1 .table_wrap table tbody tr.even { background-color:#ebeef4; }
.container .class2 .table_wrap table tbody tr.even { background-color:#fff; }
.class1 {   }
.class2 { background-color:#f7f8fb; padding:1px 0 100px 0; }
@media screen and (max-width:640px){
	.container h2 { margin:30px 0 30px 0; }
	.container h2 span::after { left:3px; top:3px; }
	.container h2 span strong { padding:5px 15px 0 10px; font-size:20px; }
	
	.container .table_wrap { overflow-x: auto; }
	.container .table_wrap table { min-width:600px; }
	.container .table_wrap table .m_skip { display:none; }
	.container .table_wrap table thead th { font-size:15px; }
	.container .table_wrap table th:first-child, .container .table_wrap table td:first-child { border-left-width:1px; }
	.container .table_wrap table th:last-child, .container .table_wrap table td:last-child { border-right-width:1px; }
	.class1 .table_wrap table td { font-weight:400; }
	.class2 .table_wrap { display:none; }
	.class2 .list_wrap { display:block; }
	.class2 .list_wrap ul li { display:flex; padding:7px 0; }
	.class2 .list_wrap ul li.even { background-color:#ebeef4; }
	.class2 .list_wrap ul li strong { width:100px; font-weight:800; padding-left:10px; }
	.class2 .list_wrap ul li span, .container .list_wrap ul li ul { width:calc(100% - 100px); }
	.class2 .list_wrap ul li ul li + li { border-top:1px solid #656f83; }
	.class2 h3 { margin:30px 0 0 0; padding:5px 0 5px 10px; font-size:17px; background-color:#656f83; color:#fff; font-weight:800; }
}

footer { font-family:'Gmarket Sans'; background:#013ac9; color:rgba(255,255,255,0.8); }
footer .wrapper { display:flex; }
footer .f_left { width:60%; border-width:0 1px 0 1px; border-style:solid; border-color:rgba(255,255,255,0.2); padding:70px 0 50px 40px; }
footer .f_left .btn_wrap { display:flex; }
footer .f_left .btn_wrap a { display:block; position:relative; padding:12px 55px 7px 28px; margin-right:10px; background:#fff; border-radius:30px; color:#013ac9; font-size:20px; font-weight:800; }
footer .f_left .btn_wrap a::after { position:absolute; right:25px; top:17px; width:9px; height:14px; background:url(../images/summerevent_2024/more.png) no-repeat center center; content:"" }
footer .f_left .btn_wrap a.yellow { background:#f5f45c; }
footer .f_left .txt { margin:40px 0 0 0; font-size:50px; font-weight:300; line-height:1.2; }
footer .f_left .txt strong { display:inline-block; position:relative; width:70px; color:transparent;}
footer .f_left .txt strong::before { position:absolute; left:0; top:-10px; width:70px; height:68px; background:url(../images/summerevent_2024/ddak.png) no-repeat center center; content:"" }
footer .f_right { position:relative; width:40%; border-width:0 1px 0 0; border-style:solid; border-color:rgba(255,255,255,0.2); text-align:right; padding:0 40px 50px 0; }
footer .f_right .mark { margin-top:-63px; }
footer .f_right .tel { margin:28px 0; }
footer .f_right .tel strong { display:block; color:#fff; font-size:40px; font-weight:800; line-height:1.2; }
footer .f_right .logo { margin:28px 0; }
@media screen and (max-width:640px){
	footer {  }
	footer .wrapper { display:block; }
	footer .f_left { width:auto; border-width:0; padding:30px 0 20px 0; }
	footer .f_left .btn_wrap { display:block; }
	footer .f_left .btn_wrap a { margin-bottom:5px; }
	footer .f_left .txt { font-size:30px; }
	footer .f_left .txt strong { width:40px; }
	footer .f_left .txt strong::before { top:-5px; width:40px; height:40px; background-size:40px auto; }
	footer .f_right { width:auto; border-width:1px 0 0 0; text-align:center; padding:20px 0 20px 0; }
	footer .f_right .mark { margin-top:0 }
	footer .f_right .logo img { width:120px; }
}