@import url("font.css");
@import url("default.css");

body {padding:0; background-color:var(--white); overflow:hidden;}
h2 img {width:auto;}

#mainTitle {background:url('/main/view/images/event_250609/top_bn.jpg') no-repeat #050311 50%; height:1019px; text-align:center;}


/* #MidSection01 p {font-size:2.3rem; margin-top:5px;} */
/* MidSection01 */
#MidSection01 {
	text-align:center;
	padding:160px 0 100px;
	background-color: #f8f9fe;
}
#MidSection01 ul {width:1000px; display:flex; justify-content:center; margin:47px auto 0;}
#MidSection01 > ul > li {
	padding: 14px 0;
	width:inherit;
	font-size: 3rem;
	font-weight: bolder;
	background-color: #eaeff5;
	color: #c1cadb;
	border-radius: 8px;
	margin: 0 5px;
	cursor:pointer;
}
#MidSection01 ul li.clkAct {
	background-color:#1457f4;
	color:#fff;
}
#probability {display:flex; justify-content:center; margin:50px 0;}
#contentsList {}
#contentsList ul {display:block;}
#contentsList ul li {width:calc(100% - 100px); background-color:#fff; padding:50px; min-height:200px; white-space:pre-line; text-align:initial;}
#contentsList > ul > li {border:1px solid #c1cadb; margin:10px 0; border-radius:20px;}
#contentsList > ul > li:nth-of-type(2n) {background-color:#fff9f9;}
/*#contentsList > ul > li:last-child {border-bottom:none}*/
#contentsList ul li h4 {
	font-size: 1.5rem;
	text-align: left;
	color: #000;
	font-weight: 600;
	display:block;
	overflow:hidden;
}
#contentsList ul li h4 div.number {background-color:#000; color:#fff; float:left; width:30px; text-align:center; margin-right:7px;}
#contentsList ul li h4 span {color:#c1cadb; font-weight:normal;}
#contentsList ul li h4 span.hitDate {color: #f00; margin-left:10px;}

#contentsList ul li .hitContent {position:relative;}
#contentsList ul li .hitContent ul {}
#contentsList ul li .hitContent ul li {padding:0;}
#contentsList ul li .useHitImg {position:absolute; top:0; right:0;}


.hitContent img {max-width:90%;}
.nonView {position:relative;}
.nonView img {width:100%;}
.joinNow {position:absolute; top:calc(50% - 200px); left:calc(50% - 344px); z-index:1; font-size:2.3rem; font-weight:900; text-align:center;}
.joinNow > p {}
.joinNow > span {display:block; margin:55px 0 95px; font-size:3rem;}
.joinNow > a {color:#fff; background-color:#1656f4; font-size:3rem; padding:16px 220px; border-radius:9px;}

/* MidSection02 */
#MidSection02 {position:relative; background-color:#e0f0ff; z-index:1;}
#MidSection02::after {
	content:"";
	position:absolute;
	width:100px;
	height:100px;
	bottom:-40px;
	transform: rotate(45deg);
	left: calc(50% - 50px);
	border-radius:15px;
	background-color:#e0f0ff;
}

#threeBnCnt {padding:110px 0; text-align: center;}

#threeBnCnt h2 > span {
	font-size:2.5rem;
	background: linear-gradient(to bottom right, #f83701 0%, #fb6500 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#threeBnCnt dl {text-align:center; margin:54px auto;}
#threeBnCnt dl dt {
	font-size:2.3rem;
	color:#3b447f;
}
#threeBnCnt dl dd {
	font-size:3.3rem;
	font-weight:bold;
	color:var(--white);
	margin-top:10px;
	text-shadow: 0px 0px 10px red;
}

#threeBnCnt ul {display:inline-flex; }
#threeBnCnt ul li {
	border-radius: 14px;
	margin: 20px;
	box-shadow: 10px 10px 45px -25px #000;
}


/* MidSection03 */
#MidSection03 {position:relative; margin-bottom:100px; padding-top:150px;}
#Occupation {}
#Occupation ul {width:1000px; display:flex; justify-content:center; margin:0 auto;}
#Occupation ul li {
	text-align:center;
	padding: 20px 0;
	width: inherit;
	font-size: 2rem;
	font-weight: bolder;
	background-color: #e9edf6;
	color: #bec7d8;
	border-radius: 8px;
	margin: 0 5px;
	cursor: pointer;
}
#Occupation ul li.ocuAct {
	background-color: #3471c2;
	color: #fff;
}

#Applicant {
	width: 993px;
	padding: 80px;
	margin: 10px auto;
	box-sizing: border-box;
	background-color: #d0d8e2;
	border-radius: 15px;
}
#Applicant ul {}
#Applicant ul li {margin:10px 0;}
#Applicant ul li > input[type="text"] {padding:20px; border-radius:5px;}
#Applicant ul li > input[type="text"]::placeholder {color:#111; font-weight:bold;}
#Applicant button {
	background-color: #034cd5;
	color: #fff;
	border-radius: 10px;
	width: 100%;
	padding: 20px;
	font-size: 2.3rem;
	font-weight: bolder;
}
#checkboxA {margin:20px 0 60px;}

#mainfooter a {display:inline-block;}

/* @media (max-width: 1200px) {
	#threeBnCnt ul li {width:33.33%;}
	#threeBnCnt ul img {width:100%;}
} */


/* Å×À̺í01 */
.tblNo1 {border-top:1px solid var(--lgray); width:100%; border-collapse:collapse; font-size:14px;}
.tblNo1 caption {text-align:left; margin-bottom:10px; font-weight:500; font-size:18px;}
.tblNo1 thead {}
.tblNo1 tbody {}
.tblNo1 tr {
	border-bottom:1px solid var(--lgray);
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}
.tblNo1 tr:hover {background-color:var(--tbbgc) !important;}
/* .tblNo1 tr:nth-of-type(2n) {background-color:var(--tbnth);} */
.tblNo1 th {text-align:center; font-weight:500; padding:16.5px 0; color:var(--dgray); background-color:var(--bgc); font-weight:bold;}
.tblNo1 td {text-align:center; padding:20px; }
.tblNo1 td.phone_img > img {width:60px;}
.tblNo1 td h4 {color:#4C4B4B;font-weight:400;font-size:14px !important;/* margin-bottom:7px; */}
.tblNo1 td h4 > span {margin-left:12px;}
#pop_alert-search #wrapAlert-search #msgAra {display:flex; justify-content: center;}

#right-overWrap-big-menu {display:none !important;}

@media (max-width: 1180px) {

	#mainTitle img {width:100%;}
	#mainfooter > .footerInner {width:100%;}
	.emphasize img.graph {width:93%;}
	#threeBnCnt ul {display:block;}
	#threeBnCnt ul li {
		border-radius: 0;
		margin:10px 0 0 0;
		box-shadow: 0 0 0 0;
	}
	#threeBnCnt ul img {width:93%;}

	#specialContent {background-size:90%;}
	#movContent ul li {margin-left:0;}
	#movContent ul li > a {width:100%;}
	#movContent ul li img {width:80%;}
	#threeBnCnt ol {margin-left:-47px;}
	#threeBnCnt ol li {width:100%;}
	#threeBnCnt ol li > img {width:95%;}
	#specialContent ul {margin-top: 460px;}
	#mainCourse ul li a {margin:70px auto 10px;}

	#threeBnCnt dl dt, #movBnCnt dl dt, #specialBnCnt dl dt {font-size:5em;}
	#threeBnCnt dl dd, #movBnCnt dl dd, #specialBnCnt dl dd {font-size:7em;}
	#checkboxA > label {display: grid;}
	#checkboxA a {font-size:2.5rem; margin-top: 20px;}
	input[type="checkbox"] + label > span {
		width: 5rem;
		height: 5rem;
		margin-right: 40px;
	}

	input[type="checkbox"] + label > span::before {
		top: calc(50% - 1rem);
		left: calc(50% - 1rem);
		font-size: 2rem;
	}
	input[type="checkbox"]:checked + label > span::before {
		top: calc(50% - 1rem);
		left: calc(50% - 1rem);
		font-size: 2rem;
	
	}
}

@media (max-width: 1000px) {
	#MidSection01 ul {width:100%;}
	.hitContent img {width:90% !important;}
	#threeBnCnt dl dt, #movBnCnt dl dt, #specialBnCnt dl dt {font-size:2rem;}
	#Occupation ul {width:100%;}
	#Applicant {width:100%; padding:50px;}
}

@media (max-width: 880px) {
	#MidSection01 ul {width:80%;}
	#MidSection01 > ul > li {font-size:2rem;}
	.SurveyDate {float:left !important; margin-top:10px;}
	#probability img {width:80%;}



	.hitContent table {width:100% !important;}
	.joinNow {width:100%; font-size:1.8rem; left:0; top:0;}
	.joinNow > p {}
	.joinNow > span {margin:5%; font-size:2rem;}
	.joinNow > a {font-size:2rem; padding:16px 0;}

}

@media (max-width: 690px) {
	#contentsList ul li h4 span.hitDate {float:left; margin-left:0;}
	#contentsList ul li {        padding: 20px;
        width: calc(100% - 40px);}
}