@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: 17px;
    font-weight: 400;
    /* letter-spacing: -0.05em; */
    word-break: keep-all;
	word-wrap: break-word;
}

.wrapper { width:1440px; padding:0 20px; margin:0 auto; }

@media screen and (max-width:1480px){
	.wrapper { width:auto; padding:0; margin:0 20px; }
}
@media screen and (max-width:1024px){
	html, body, xmp, pre { font-size: 16px; }
}
header { position:relative; overflow:hidden; }
header .tit .tit_img{ position:relative; left:50%; transform: translateX(-50%); width:1920px; }
header .tit .tit_img img { width :100%; vertical-align:top;}
header .tit .tit_img video { position:absolute; left:0; top:0; z-index: -1; width: 100%; aspect-ratio: 16 / 9; border:0;  }
header .tit .mo_only { display:none }
@media screen and (max-width:1480px){
	header .tit .tit_img{ width: 130vw; }
}
@media screen and (max-width:768px){
	header .tit { height: auto; }
	header .tit .tit_img{ position:relative; left:auto; top:auto; transform: translateX(0); height: 100%; width: 100%; }
	header .tit .mo_only { display:block; }
	header .tit .pc_only { display:none }
}

.container { position:relative; z-index:10; margin-top:-4em; border-radius:3vw 3vw 0 0; background-color:#fff; border:1px solid #fff; }
.container h2 { margin:4em 0 1.2em 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:50px 50px 50px 0; content:""; }
.container h2 span strong { display:inline-block; position:relative; z-index:10; padding:7px 50px 3px 25px; border-radius:50px 50px 50px 0; color:#031d8c; font-size:45px; font-weight:700; line-height:1.2; border:3px solid #031d8c; background:#b8dffc; content:""; }
.container h3 { margin:40px 0 20px 0;  font-size:24px; font-weight:700; font-family: 'Gmarket Sans'; line-height:1.2; color:#031d8c;  }
.container h3 em { position:relative; display:inline-block; padding:0 5px; }
.container h3 em::after { content:""; position:absolute; left:0; bottom:-5px; width:100%; height:20px; background:#b8dffc; opacity:0.5; z-index:-1 }

.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:1024px){
	.container { margin-top:-20px; border-radius:20px 20px 0 0; }
	.container h2 { margin:40px 0 20px 0; }
	.container h2 span strong { padding:7px 50px 3px 25px; font-size:24px;  }
	.container h3 { margin:30px 0 20px 0;  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 { position:relative; z-index:20; font-family:'Gmarket Sans'; background:#031d8c; 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:#21399c; 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:1024px){
	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; }
}