video { width: 100%; height: 100%; }

/*-----------intro*/
.intro_wrap .bi { margin: 0 auto; margin-bottom: 56px;  }
.intro_wrap { position: relative; z-index: 1; background: #000; width: 100%; height: 100%; display: flex; flex-direction: column; color: #fff; }
.intro_bg {   z-index: -1; position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; }
.intro_bg video { position: relative; z-index: -1; }
.intro_bg::after { right:0; top:0; left:0; bottom:0; content: '' ; display: inline-block; position: absolute; background: rgba(0,0,0,0.8); width: 100%; height: 100%; }
.intro_layout { transition: .2s ease-in-out; border: 0px solid #fff; flex: 1; display: flex; align-items: center; justify-content: center; }
/*.intro_title  { font-family: hyundai; font-size: 64px; margin-bottom: 56px; letter-spacing: 1px; text-align: center; }*/
.intro_wrap input { color: #fff; border: none; background: none; }


/*---intro_con*/
.login .intro_con { display: none; }
.signup .intro_con { display: none; }
.lang_btn { display : flex; flex-direction : column; gap : 16px; margin : 0 auto; width : 200px; }
.lang_btn a { align-items : center; background : rgba(255,255,255,0.08); border-radius : 16px; display : flex; gap : 20px; padding : 20px; }
i.flag-ko { background-image : url(/assets/images/ico/flag-ko-2b6bad446b99d85b093d1cfc72726f01.png); }
i.flag-en { background-image : url(/assets/images/ico/flag-globe-44579e7a16d928b57222fec2cf84bb0d.svg); }
.intro_btn { display: flex; align-items: center; margin-top: 48px; }
.intro_btn a { font-size: 20px; font-weight: bold; position: relative; width: 200px; height: 200px; margin: 0 12px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }
.intro_btn a.intro_btn_login { background: rgba(31,117,217,0.8); }
.intro_btn a  i{ width: 40px; height: 40px; margin-bottom: 12px; }
.intro_btn_box { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.intro_btn_txt { position: absolute; width: 100%; text-align: center; font-size: 14px; color: rgba(255,255,255,0.5); bottom: 32px; }
.intro_btn_q { border: 1px solid #fff; border-radius: 50px;  width: 100%; margin-top: 40px; color: #fff; background: none; height: 40px; display: flex; align-items: center;justify-content: center; }
/*---login_con*/
.login_con { display: none; }
.login .login_con { display: block; }
.login .hd { right: 72px; left: 72px; top: 72px; bottom: 72px; width: auto; }
/*.login .intro_layout { border-width: 72px; }*/

/*.login_con .intro_title { font-size: 32px; }*/
.intro_wrap .login_con input { width: 300px; display: block; margin-bottom: 12px; height: 56px; background: rgba(255,255,255,0.2); padding-left: 16px; }
.intro_wrap .login_con input:last-child { margin-bottom: 0; }
.login_con ul { margin-left: 16px; }
.login_con li { margin-bottom: 12px; display: flex; font-size: 14px; }
.login_con li>* { flex: 1; }
.login_con li a { color: #1F75D9; text-decoration: underline; }
.login_con li:last-child { margin-bottom: 0; }
.login_con button { margin-left: 12px; width: 124px; font-size: 18px; font-weight: bold; }
.login_con form { display: flex; margin-bottom: 24px; }

.login_err {background: rgb(255 0 0 / 40%);padding: 4px 8px;width: 100%;border-radius: 4px;margin-bottom: 24px;  }

.signup_con { display: none; }
.signup .signup_con { display: block; }

@media screen and  ( max-width:641px ){
	.intro_wrap .bi { width: 125px; height: 61px; margin-bottom: 24px; }
	.intro_wrap { overflow: hidden; }
	.intro_wrap video { width: auto; }
	.intro_layout { margin-top: 4em; }
	.intro_title { font-size: 32px; }
	.login .hd { right: 0; left: 0; top: 0; bottom: auto; }
	.login .intro_layout { border-width: 0; margin-top: 32px; }
	.intro_btn { flex-direction: column; margin-top: 0; }
	.intro_btn a { width: 160px; height: 160px; }
	.intro_btn a:nth-child(1) { margin-bottom: 16px; }
	.login_con form { justify-content: center; display: flex; padding: 0 32px; flex-direction: column; }
	.login_con ul { margin-left: 32px; }
	.login_con button { width: 100%; margin-left: 0; height: 48px; margin-top: 12px; font-size: 16px; }
	.intro_wrap .login_con input { height: 40px; }
	.login_con form>span { flex: 1;  }
	.intro_btn_txt { bottom: 16px;}

	.login_err { margin: 0 32px 24px; width: auto; }
}

/*----------메인*/
.main { background: #fff; }
@media screen and  ( max-width:641px ) {
	.main { background: #edf0f6; }
	.main section {background: #fff;padding-bottom: 32px;margin-bottom: 8px;padding-top: 32px;}
}
/*---title*/
.title { text-align: center; margin-bottom: 48px; margin-top: 72px; }
.title p { font-size: 16px; color: #9CABBC; line-height: 24px;  margin: 0 auto; }
.title strong { font-family: 'hyundai'; font-size: 64px; color: #1F75D9; margin-bottom: 24px; display: block; }
@media screen and  ( max-width:641px ) {
	.title p  { font-size: 14px; line-height: 18px; }
}

/*---visual*/
.visual { background: #000; position: relative; margin-bottom: 0; overflow: hidden; }
.visaul_scroll { z-index: 1;  display: flex;flex-direction: column;align-items: center;color: #fff;font-size: 12px;position: absolute; left: 50%;margin-left: -12px;bottom: 84px; scroll-behavior: smooth;}
.visaul_scroll .scroll_mous { width: 24px; height: 32px; border-radius: 50px; border: 1px solid #fff; position: relative; margin-bottom: 4px; }
.visaul_scroll .scroll_mous span { animation: 1s mous infinite; width: 4px; height: 4px; border-radius: 50px; background: #fff; position: absolute; top: 8px; left: 50%; margin-left: -2px; }
@keyframes mous { from {  transform: translateY( 0); transition: .4s ease-in-out; } to { transform: translateY(4px); }}

.visual_txt { position: relative; z-index: 1; padding-top: 218px; font-family: 'hyundai'; color: #fff; font-weight: bold; font-size: 72px; line-height: 94px; letter-spacing: 0; text-align: center; }

.visual .intro_bg { z-index: 1; }
@media screen and  ( max-width:641px ) {
	.visual { margin-bottom: 0 !important;}
}
/*---greetings*/
.greetings {background: #07060E url(/assets/images/img_hyundai-824a88748cfe4179cf0ade4d1bc3d37e.png) no-repeat center center !important;background-attachment: fixed;color: #fff;display: flex;align-items: center;justify-content: center;text-align: center;}
.greetings>div {  display: flex; align-items: center; flex-direction: column; z-index: 1; max-width: 600px; }
.greetings>div>p:nth-child(3) { margin-bottom: 40px; }
.greetings .user { margin-left: 0; margin-bottom: 20px; }
.greetings .user span:nth-child(3) { max-width: inherit; }
/*---videoContents*/
.videoContents { padding: 0; }
.videoContents .swiper-slide { flex: 1; margin-right: 12px; transition: .2s ease-in-out; z-index: -1; position: relative; background-position: center center; background-size: cover; height: 400px; flex-direction: column; color: #fff; }
.videoContents .swiper-slide:last-child { margin-right: 0;}
.videoContents .swiper-slide::after { z-index: -1;  position: absolute; content: '' ; width: 100%; height: 100%; display: block; }
.videoContents .swiper-slide:hover::after { background: rgba(26, 117, 226, 0.5); }
.videoContents .swiper-slide:hover { opacity: 1; }
.videoContents .swiper-container-horizontal>.swiper-pagination-progressbar { background: #EDF0F6; position: static; margin: 0 auto; margin-top: 40px; width: 400px;  }
/*.videoContents .swiper-slide:nth-child(1) { background-image: url(../images/thum/main/thum_main_1.png);  }
.videoContents .swiper-slide:nth-child(2) { background-image: url(../images/thum/main/thum_main_2.png);  }
.videoContents .swiper-slide:nth-child(3) { background-image: url(../images/thum/main/thum_main_3.png);  }
.videoContents .swiper-slide:nth-child(4) { background-image: url(../images/thum/main/thum_main_4.png);  }
.videoContents .swiper-slide:nth-child(5) { background-image: url(../images/thum/main/thum_main_5.png);  }
.videoContents .swiper-slide:nth-child(6) { background-image: url(../images/thum/main/thum_main_6.png);  }*/
@media screen and  ( max-width:1200px ) {
	.videoContents .swiper-slide { flex: none; }
}
/*---education, 시청중인콘텐츠*/
.education { max-width: 1280px;margin: 0 auto 128px; background: #EDF0F6; padding: 48px 0 84px; }
.education .title strong { font-family: inherit; letter-spacing: -4px; font-size: 48px; display: flex; align-items: center; justify-content: center; }
.education .edu_wrap { width: 1088px; margin: 0 auto; }
.education .edu_wrap .education_list { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-around; }
.education .edu_wrap .education_list li{  display: flex; align-items: center;justify-content: space-between; margin-bottom: 44px; width: calc( 50% - 56px ); margin-right: 56px; }
.education .edu_wrap .education_list li:nth-child(even) { margin-right: 0; }
.education .edu_wrap .education_list li .edu_chart {overflow: hidden;width: 120px;height: 8px;background: #EDF0F6;position: relative;flex: 1;}
.education .edu_wrap .education_list li .edu_chart span { position: absolute; left: 0; top:0; bottom:0; width: 2%; background: #1F75D9;}
.education .edu_wrap .education_list li .edu_view_bar {display: flex;align-items: center;flex: 1;}
.education .edu_wrap .education_list li a { border-radius: 50px; margin-left: 20px;  width: 96px; font-size: 18px; height: 40px; background: #1F75D9; display: flex; align-items: center; justify-content: center; color: #fff; }
.education .edu_wrap .education_list li .edu_view_per { width: 50px; text-align: right; font-size: 20px; color: #1F75D9; font-weight: bold; margin-left: 16px; }
.education .edu_wrap .education_list li .edu_tt { font-size: 18px; display: flex;align-items: center;flex: 1;margin-right: 24px; word-break: keep-all;}
.education .edu_wrap .education_list li.finish .edu_chart span, .education .edu_wrap .education_list li.finish a { background: #9CABBC; }
.education .edu_wrap .education_list li.finish .edu_view_per { color: #9CABBC; }
.education_button { border-radius: 50px; margin-left: 20px;  width: 96px; font-size: 18px; height: 40px; background: #1F75D9; display: flex; align-items: center; justify-content: center; color: #fff; }
.survey_button { border-radius: 5px; margin: 0 auto;  width: 200px; font-size: 18px; height: 40px; background: #1F75D9; display: flex; align-items: center; justify-content: center; color: #fff; }

.education .edu_wrap .edu_box { background: #fff; box-shadow: 0 3px 6px #C0CDE5; padding: 40px 48px; }
.education .edu_wrap .edu_box .tt { font-size: 20px; font-weight: bold; }
.education .edu_wrap .edu_box .sub { color: #9CABBC; font-size: 14px; margin-top: 4px; }
.education .edu_wrap .edu_info {width: 416px; display: flex;align-items: center;flex-direction: column;}
.education .edu_wrap .edu_info .edu_all_chart { position: relative; border-radius: 50%; width: 267px; height: 267px; }
.education .edu_wrap .edu_info .edu_all_per { font-family: 'hyundaiharmonyB';font-weight: bold;margin-bottom: 20px;text-align: center;font-size: 20px;position: absolute;left: 50%;width: 118px; margin-left: -59px;top: 50%;margin-top: -24px; }
.education .edu_wrap .edu_info .edu_all_per span {font-size: 56px;margin-right: 8px;}
.edu_car_area {  flex: 1; height: 347px; }
.edu_graph { display: flex; align-items: center; margin-bottom: 24px; }
.edu_graph ul { display: flex; align-items: center; justify-content: space-between;  }
.edu_graph ul li { text-align: center; list-style: none }
.edu_graph ul li::before { content: ''; display: block; width: 2px; height: 16px; background: #9CABBC; margin: 0 auto 8px; }
.edu_car_pro { height: 20px; width: 100%; border-radius: 50px; background: #EDF0F6; position: relative; margin-bottom: 12px; }
.edu_car_pro span { position: absolute; left: 0; top: 0; bottom: 0; width: 20%;background: linear-gradient(90deg, rgba(131,185,248,1) 0%, rgba(27,192,204,1) 100%); border-radius: 50px; }
.img_car { margin-top: 48px; min-width: 10%;; height: 46px; background: url(/assets/images/ico/img_car-5ea02d7d4b81e1c8436c64e91dfefffa.svg) no-repeat;  background-position: right center }

.edu_percent { display: flex; align-items: center; justify-content: space-between; font-family: noto sans; }
.edu_percent_txt { font-size: 20px; font-weight: bold; }
.edu_percent_txt span { margin-right: 8px; font-size: 40px; }

.chart_area { width: 100%; height: 100%; border-radius: 50%; position: relative; background: #fff; box-shadow: 0 0 30px rgba(0,0,0,0.1); }
.chart_area::after {content: ''; display: inline-block;position: absolute;width: 80%;height: 80%;border-radius: 50%;border: 2px dashed #fff;left: 50%;margin-left: -40%;top: 50%;margin-top: -40%;}


@media screen and  ( max-width:1200px ){
	.visual video { width: auto; }

	.education { margin-bottom: 48px;}
	.education .edu_wrap { width: auto; }
	.edu_graph { flex-direction: column; }
	.education .edu_wrap .edu_info { width: 100%; }
	.education .edu_wrap .edu_box { box-shadow: none; padding-right: 20px; padding-left: 20px; border-top: none; }
	.edu_car_area { margin-left:0; margin-top: 0; width: 100%; border-top: 1px solid #c0cde5;}
	.education .edu_wrap .education_list li { width: 100%; flex-direction: column; align-items: baseline; }
	.education .edu_wrap .education_list { flex-direction: column; align-content: space-between; }
	.edu_graph { margin-bottom: 8px;  }
	.education .edu_wrap .education_list li .edu_chart { flex: 1; }
	.education .edu_wrap .education_list li .edu_view_bar { width: 100%; margin-top: 4px; }
	.education .title { margin-top: 0;}
	.education .edu_wrap .education_list li:last-child { margin-bottom: 0; }


	.videoContents .title p:nth-child(2) { margin-bottom: 8px; }

	.edu_info .edu_box { border-bottom: none; position: absolute; right: 0; background: none; justify-content: flex-end; }
	.education .edu_wrap .edu_info .edu_all_chart { width: 100%; height: auto; }
	.chart_area { background: none; box-shadow: none; }
	.chart_area::after { display: none; }
	.chart_area canvas { display: none; }

	.education .edu_wrap .edu_info { padding: 0; }
	.education .edu_wrap .edu_info .edu_all_per span { font-size: 40px;}
	.education .edu_wrap .edu_info .edu_all_per { text-align: right; right: 20px; width: 100%; position: absolute; top: 69px; left: auto; margin-left: auto; }
}

@media screen and  ( max-width:641px ) {
	.videoContents .title { text-align: left; }
	.education .edu_wrap .education_list li button { height: 32px; font-size: 16px; }
	.education .edu_wrap .education_list li { margin-bottom: 12px; }
	.education .edu_wrap .edu_box { padding-top: 0; }
	.education .edu_wrap .edu_info .edu_all_per { top: 32px; }
	.education { padding-top: 32px;}
	.education_button { font-size: 14px; width: 72px; height: 32px;  }
	.education .title strong { font-size: 24px; }
	.education .title strong span:nth-child(2) { max-width: 70px; }
	.education .edu_wrap .education_list li a { font-size: 14px; height: 32px; width: 88px; }
}

/*---CHECKLIST, 체크리스트*/
/*.chk_step { display: flex;  }
.chk_step li { text-align: center; position: relative; flex: 1; }
.chk_step li::before {width: 100%;height: 2px;position: absolute; background: #EDF0F6;content: '';display: block;left: 50%;top: 12px;z-index: -1;}
.step_circle { position: relative; width: 24px; border-radius: 50px; height: 24px; background: #9CABBC; border: 4px solid #fff; }
.step_txt { display: block; color: #9CABBC; }
.step_dday { border-color: #9CABBC; position: relative; }
.step_dday .step_circle::after {content: '';display: block;width: 24px;height: 24px;border-radius: 50px;border: 1px solid #9CABBC;position: absolute;top: -5px;left: -5px;}
.chk_step li.step_dday::before  { width: 0; }
.on .step_circle { background: #1F75D9;  }
.on .step_txt { color: #1F75D9; }*/

/*---달력*/
.calendar { max-width: 1200px; margin: 32px auto 0; }
.calendar ul { width: 100%; display: flex; }
.calendar ul li { height: 180px; border: 1px solid #E2E7F1; border-right: none; flex: 1; padding: 8px; border-bottom: none; }
.calendar ul:last-child li { border-bottom: 1px solid #e2e7f1; }
.calendar ul li:last-child { border-right: 1px solid #E2E7F1; }
.calendar_num { font-family: 'noto sans'; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.calendar_dday { border: 1px solid #1e75d9; border-radius: 50px; padding: 2px 12px;  color: #1e75d9; font-weight: 800; }
.calendar_list { display: flex; flex-direction: column; margin-top: 8px; text-align: center; }
.calendar_box { font-size: 14px; height: 32px; padding: 4px 8px; border-radius: 2px; margin-bottom: 8px; }
/*colors*/
.green { background: #D5FFEB; }
.blue { background: #D3F8F7; }
.pink { background: #F8D3F3; }
.yellow { background: #F8F7D3; }
.red { background: #F8D3E3; }

.calendar_box span { flex: 1; }


.last { background: #1F75D9; color: #fff; font-weight: 800;}
.last .calendar_box { background: rgba(255,255,255,0.2); text-align: center; }
.last .calendar_box span { text-align: center; }
.last .calendar_num { justify-content: center; }

.finish .calendar_box { background: #edf0f6 !important; }
.finish .calendar_box span { text-decoration: line-through; color: #9cabbc; }

@media screen and  ( max-width:1200px ){
	.chkList { padding: 0; }
}
@media screen and  ( max-width:641px ){
	.calendar ul li:nth-child(1) { border-left: none; }
	.calendar ul li:nth-child(7) { border-right: none; }
	.calendar ul li { height: 140px; padding: 4px 0; }
	.calendar_box { margin-bottom:2px; padding: 0; height: auto; border-radius: 0; }
	.calendar_box span { font-size: 12px; text-align: center; }

	.calendar_num { flex-direction: column; }
	.calendar_box span { padding: 0 4px; }
	.calendar_dday { padding: 2px 8px; margin-top: 8px; font-size: 12px; }
	.calendar_date { font-size: 10px;  }
	.last .calendar_box { background: none; }
	.last .calendar_box span { font-size: 16px; }

}


/*---notice*/
.notice { background: #EDF0F6; padding-top: 48px; padding-bottom: 48px; margin-bottom: 0; }
.notice strong { margin-bottom: 20px; font-size: 24px; display: block; }
.notice_info { display: flex; align-items: center; }
.notice_info a { color: #1F75D9; margin-left: 16px; text-decoration: underline;}
.notice_info p  {  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; flex: 1;}


/*---qa*/
.qa {background: #333333 !important;color: #fff;padding-top: 48px;padding-bottom: 48px;text-align: center;/* border-top: 0 !important; */}
.qa strong { margin-bottom: 16px; font-size: 24px; display: block; }
.pop_qa textarea { height: 140px; }
@media screen and  ( max-width:641px ){
	.notice strong, .qa strong { font-size: 20px; }
	.pop_qa { display: flex; flex-direction: column; }
	.pop_qa form { height: 100%; display: flex; flex-direction: column; }
	.pop_qa form>div { display: flex; flex-direction: column; flex:1; }
	.pop_qa .box, .pop_qa .box .box_ipt:last-child { flex: 1; display: flex; flex-direction: column; }
	.pop_qa .box .box_ipt:last-child .ipt{ flex: 1; }
	.pop_qa .box .box_ipt:last-child .ipt textarea {height: 100%; }

}

/*---hmg_link*/
.hmg_link p { font-weight: 800; color: #1F75D9; margin-bottom: 24px; }
.hmg_link a { display: flex; align-items: center; margin-right: 23px; }
.hmg_link li { list-style: none; display: inline-block; }
.hmg_link li:last-child a { margin-right: 0; }
.hmg_link i { margin-right: 12px; }

/*---footer*/
.footer { display: flex; }
.footer>div:nth-child(1) { margin-right: 112px; }
.footer strong { margin-bottom: 24px; display: block; }
.footer ul li { display: block; margin-bottom: 20px; }
.footer ul li a { text-decoration: underline; }
@media screen and  ( max-width:641px ){
	.footer { font-size: 14px; }
	.footer>div:nth-child(1) { margin-right: 0;}
}

/*---입사준비리스트 팝업*/
.readyList_box { padding-bottom: 56px; border-left : 2px solid #EDF0F6; padding-left: 36px;  margin-left: 32px; position: relative; }
.pop .pop_body.pop_readyList { padding-top: 20px !important; }
.pop_readyList li { display: block; padding-bottom: 20px; }
.pop_readyList li:last-child { padding-bottom: 0; }
.ready_title {display: flex;align-items: center;margin-bottom: 0;}
.ready_title::before {content: '';border: 8px solid #fff;display: inline-block;width: 16px;height: 16px;background: #1F75D9;border-radius: 50px;position: absolute;left: -16px;}
.ready_title strong {font-size: 24px;font-weight: 800;}
.ready_title .ready_strong { color: red; background: #FBF2F2; border: 1px solid red; border-radius: 50px; padding: 8px 16px; margin-left: 20px; }
.ready_info .chk input[type="checkbox"]+label .chk_txt { color: inherit; }
.ready_txt {font-size: 14px; margin-top: 4px; color: #9CABBC; }
.ready_chk_txt { margin-top: 12px; margin-left: 38px; font-size: 14px; line-height: 24px; }
.ready_info a { width: 300px; font-size: 18px; height: 40px; background: #1F75D9; display: flex; align-items: center; justify-content: center; color: #fff; }
.ready_info { margin-top: 20px; }
.ready_sub_title { margin: 8px 0 12px 0; }
.ready_info button {margin-top: 12px;height: 40px;width: 200px;}
.ready_txt2 {background: #EDF0F6;padding: 12px; }

@media screen and  ( max-width:641px ){
	.ready_title strong { font-size: 18px; }
	.ready_title::before {width: 12px;height: 12px;left: -10px;border-width: 4px; top: 4px; }
	.readyList_box { padding-left: 20px; margin-left: 0; }
	.ready_title { flex-direction: column; align-items: baseline; }
	.ready_title .ready_strong { margin-top: 8px; margin-left: 0; padding: 4px 12px; font-size: 12px; }
}

@media screen and ( max-width:641px ){

	.visual_txt {font-size: 28px; line-height: 34px; }
	.visual_bar { width: 160px;  }
	.greetings { padding: 0 20px; }
	.title {padding: 0 24px;margin-bottom: 24px;margin-top: 8px;}
	.title strong { font-size: 24px; margin-bottom: 8px; }
	.videoContents .swiper-slide { height: 200px; }
	.videoContents .swiper-container-horizontal>.swiper-pagination-progressbar { width: 160px; }

	.qa, .notice { padding: 20px; text-align: left; }
	.notice_info { align-items: inherit; flex-direction: column;}
	.notice_info a { margin-left: 0; margin-top: 4px; }
	.notice_info p { white-space: break-spaces; -webkit-line-clamp:3; display: -webkit-box; -webkit-box-orient: vertical; font-size: 14px; }
	.hmg_link {margin-left: 20px;background: none !important;}
	.hmg_link li { display: block; padding-bottom: 12px; }
	.footer { flex-direction: column; background: #EDF0F6; padding: 48px 0 48px 20px; margin-bottom: 0; }


}

/*----------회원가입*/
.page_signup .box_ipt { max-width: 400px; }
.group_name { color: #1F75D9; margin-top: 12px; font-weight: 800; }

@media screen and ( max-width:641px ){
	.page_signup .agree { margin-right: 20px; margin-left: 20px; }
	.page_signup .agree .chk label { margin-right: 16px; }
	.page_signup .agree li, .page_signup .agree .chk label { align-items: flex-start; }
	.survey_top { padding-top: 9px}
	.page_survey .essay_answer {height: 120px}
	.survey_dec {margin-bottom: 16px; font-size: 13px}
	.survey_q {font-size: 14px}
	.survey_answer {font-size: 13px}
}

/*----------응모*/

.survey_num { margin-right: 40px; font-weight: 800;}
/*.page_survey .box { display: flex;  }*/
.page_survey .survey_top {}
.essay_answer {height: 200px !important;}
.survey_dec {margin-bottom: 15px}
.survey_q { margin-bottom: 24px; font-weight: 800; }
/*객관식*/
.survey_obj li { display: block; margin-bottom: 24px; }
.survey_obj li a { display: flex;  }
.survey_obj li span { width: 24px; height: 24px; background: #EDF0F6; border-radius: 50px; font-size: 14px; text-align: center; line-height: 24px; margin-right: 12px; }
.survey_obj li p { flex: 1; }
.survey_obj li.on span { background: #1f75d9; color: #fff; }
/*객관식, radio ( 예, 아니오 )*/
.survey_obj_radio li { margin-right: 40px; list-style: none }

@media screen and ( max-width:641px ){
	.survey_num  { display: none; }
	.survey_q { border-bottom: 1px solid #edf0f6; padding-bottom: 16px; }

}

/*----------비디오*/
.video_con { transition: .2s ease-in-out; max-width: 1200px;  margin: 0 auto 15px; position: relative; /*overflow: hidden; z-index: 55; */}
/*.video_con::after { content: ''; position: absolute; right:0; top:0; left: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,1));}*/
.video_con>div { width: 100%; height: 100%;  right:0; top:0; bottom: 0; left: 0; display: none; position: relative; }
.video_con>div.on { display: block; }
/*---상단 영역*/
/*썸네일일때*/
.video_con_thum::after { content:''; display:inline-block; position: absolute; right:0; top:0; bottom:0; left:0; }
.video_con_thum img { width: 100%; }
.video_con_thum button { position: absolute; left: 24px; z-index: 1; height: 48px; width: 100px; font-weight: 800; bottom: 20px; border-radius: 2px; }
/*동영상일때*/
.video_con_play iframe { width: 100%; height: 100%;  }
/*평가일때*/
.video_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.video_con_evaluation { background: rgba(0,0,0,0.8);  align-items: center; justify-content: center; position: absolute; display: none}
/*.video_con_evaluation>div { width: 100%; padding: 0 80px; }*/
.video_con_evaluation .eval_title { font-size: 18px; font-weight: 800;}
.video_con_evaluation .eval_title::after { content: ''; width: 32px; height: 2px; background: #fff; display: block; margin-top: 16px; }
.video_con_evaluation ul { margin-bottom: 12px; }
.video_con_evaluation ul li { display: block; margin-bottom: 12px; }
.video_con_evaluation .chk input[type="radio"]+label .chk_shape { background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.video_con_evaluation .chk input[type="radio"]+label .chk_shape::before { position: static; width: 12px; height: 12px; border-radius: 50px; background: #fff; border: none; }
.video_con_evaluation .chk input[type="radio"]:checked+label .chk_shape { border: none; }
.video_con_evaluation .chk input[type="radio"]:checked+label .chk_shape::before { background: #1F75D9; }
.video_con_evaluation .chk input[type="radio"]:checked+label .chk_txt { color: #fff; }
.video_con_evaluation textarea { height: 80px; }
.video_con_evaluation button { height: 48px; width: 100px; margin-top: 20px; border-radius: 2px; font-weight: bold; }
.video_con_evaluation.on { display: block; }
.con_evaluation {margin: 0 auto; top: 20%; max-height: 80%; padding: 20px; width: 800px}

/*웹툰*/
.video_con.toon { height: auto; padding: 0 20px; }
.video_con.toon .video_con_play { position: static; }
.video_con.toon .video_con_play>div {position: static !important;display: flex;flex-direction: column;}


.blog_con {
	background: white;
}
/*컷툰*/
.toons { background:#404040;  }
.video_con>div.cuttoon { height: 644px; }




.video_title { margin-bottom: 32px; }
.video_title p { font-size: 24px; font-family: hyundaiharmonyB; margin-bottom: 16px;  }
.video_title, .episode {  margin-left: 24px; margin-right: 24px; }
.episode>p { font-size: 20px; font-weight: 800; }
.episode_line { width: 100%; height: 1px; background: #fff; position: relative; }
.episode_line::after { content: '';  position: absolute; width: 0;height: 0; border-top:12px solid #1F75D9; border-bottom:12px solid transparent;border-right: 8px solid transparent; border-left: 8px solid  transparent; margin-left: 24px; margin-top: 1px; }
.episode ul { margin-top: 32px; }
.episode ul li { width: 100%; margin-bottom: 20px; }
.episode ul li a { display: flex; align-items: center; justify-content: space-between;}
.episode ul li .episode_img { width: 160px; height: 85px; background-size: cover; background-position: center center; background-image:url(../images/thum/detail/thum_detail_1.png); margin-right: 20px;  }

/*재생중인 에피소드*/
.episode ul li.on { color: #1F75D9; text-decoration: underline;}
.episode_txt { display: flex; flex: 1; width: 100%; align-items: center; justify-content: space-between; }
.video_con_tt { font-size: 24px; margin-bottom: 20px; color: #fff; display: flex; align-items: center; justify-content: space-between; background-size: cover; min-height: 100px; padding: 15px; position: relative}
.video_con_tt .btn_video_list { width: 24px; height: 24px; background: url(/assets/images/ico/ico_list-b3b76a6b93cd6dcb92462f7e6fbf2657.svg); position: relative}

.video_list { display: flex; flex-direction: column; max-width: 700px; margin: 0 auto; }
.video_list a .list_img { width: 100%; background: #000; border-radius: 4px 4px 0 0; overflow: hidden; }
.video_list a .list_img img { width: 100%; }
.video_list a { position: relative; }
.video_list a button { padding: 4px 8px; margin-left: 20px; border-radius: 2px; position: absolute; right: 20px; bottom: 24px; }
.video_list a .video_list_bar { display: flex; justify-content: space-between; border-radius: 0; bottom: 5px; left: 0; right: 0; position: absolute; }
.video_list a .bar_pro { background: rgba(255,255,255,0.2); width: 100%; border-radius: 0; height: 4px; }
.video_list a .bar_pro span { border-radius: 0; height: 4px; background: #DA0C18; }
.video_list a .bar_txt { display: none; }
.video_list li { flex: 1; list-style: none}
.video_list a .bar { width: 100%; }
.video_list a>span:nth-child(1) { border-radius: 2px 0 0; position: relative; }
.video_list a>span:nth-child(2) { padding: 12px; color: #fff; width: 100%; }
.video_list a>span:nth-child(2) strong { font-size: 18px; margin-bottom: 4px; display: block; }
.video_list a>span:nth-child(2) strong+span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.btn_video_net { position: absolute; z-index: 55; right: 10px; bottom: 50px; background: rgba(0,0,0,0.8); padding: 12px 20px; }
.btn_video_net .next_bar { position: absolute; width: 60%; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.2); }

.video_tt_left { display: flex; align-items: center; position: relative }
.video_tt_left>a { width: 24px; height: 24px; position: relative; display: flex; align-items: center; margin-right: 16px; }
.btn_back { border: 1px solid #efefef; width: 12px; height: 12px; border-width: 2px 2px 0 0; transform: rotate(-135deg) translateX(-4px) translateY(3px); }

#videop {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	/*overflow: hidden;*/
}
#videop iframe,
#videop object,
#videop embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*

.video_list div .list_img { width: 100%; background: #000; border-radius: 4px 4px 0 0; overflow: hidden; }
.video_list div .list_img img { width: 100%; }
.video_list div { padding-bottom:32px; border-radius: 2px 0 0; position: relative; background: #000; }
.video_list div a { padding: 4px 8px; margin-left: 20px; border-radius: 2px; position: absolute; right: 20px; bottom: 24px; }
.video_list div .video_list_bar { display: flex; justify-content: space-between; border-radius: 0; bottom: 5px; left: 0; right: 0; position: absolute; }
.video_list div .bar_pro { background: rgba(255,255,255,0.2); width: 100%; border-radius: 0; height: 4px; }
.video_list div .bar_pro span { border-radius: 0; height: 4px; background: #DA0C18; }
.video_list div .bar_txt { display: none; }
.video_list li { flex: 1; }
.video_list div .bar { width: 100%; }
.video_list div>span:nth-child(1) { border-radius: 2px 0 0; position: relative; }
.video_list div>span:nth-child(2) { padding: 12px; color: #fff; width: 100%; }
.video_list div>span:nth-child(2) strong { font-size: 18px; margin-bottom: 4px; display: block; }
.video_list div>span:nth-child(2) strong+span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
*/

/*.video_list li:nth-child(1) .list_img { background-image: url(/cdn/st2/main.png); }*/

@media screen and ( max-width: 1200px ){
	.video_con_tt { padding-right: 20px; padding-left: 20px; min-height: 80px; }
}
@media screen and ( max-width:641px ){
	.page_video { padding-top: 0; }
	.page_video .con { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
	.episode ul { margin-top: 12px; }
	.episode ul li { margin-bottom: 8px; }
	.video_con { width: 100%; }
	.page_video .episode_area { flex: 1; overflow: hidden; overflow-y: auto; }

	.video_con_thum img { object-fit: contain; width: 100%; }
	.video_con button{  left: 20px; right: 20px; height: 32px; bottom: 0; }
	.video_title, .episode { margin-left: 20px; margin-right: 20px; font-size: 14px; }
	.video_title span { font-size: 14px; line-height: 24px; }

	.episode ul li a {  }
	.episode ul li .episode_img { height: 70px; width: 128px; mrgin-right: 8px; }

	.episode_txt { flex-direction: column; align-items: flex-start; }
	.episode_line { background: none; }
	.episode_line::after { margin-top: -12px; }
	.episode_bar { width: 100%; margin-top: 4px; }
	.episode_bar .bar_pro { height: 4px; width: calc( 100% - 54px );  }

	/*.video_con_evaluation>div { padding: 0 20px; }*/
	.video_con_evaluation ul li { margin-bottom: 4px; }
	.video_con_evaluation ul li .chk_txt { font-size: 14px; }
	.video_con_evaluation ul li .chk_shape { transform: scale(0.8); }
	.video_con>div.video_con_evaluation { position: fixed; background: rgba(0,0,0,0.9); z-index: 1; }
	.video_con_tt {font-size: 13px;margin-bottom: 12px;padding-left: 12px;padding-top: 12px; padding-right: 12px; position: relative }
	.video_title p { font-size: 18px; }
	.video_tt_left>a { margin-right: 4px; }

	.video_list li { width: 100%;  list-style: none}
	.video_list a { width: 100%; margin-right: 0; }
	.video_list_bar .bar { flex: 1; margin-top: 0; }

	.video_list a>span:nth-child(2) strong { font-size: 16px;  }
	.video_list a>span:nth-child(2) strong+span { font-size: 14px; }

	.btn_video_net { right: 10px; padding: 8px 12px; font-size: 12px;  }

	.video_con>div.cuttoon { height: 300px; }

}
.video_con_bg {
 opacity: 0.5; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-position: center;


}
/*----------공지사항*/
.notice_title { display: flex; align-items: center; justify-content: space-between; }
.notice_title span { width: 16px; height: 16px; background-image: url(/assets/images/ico/arw_bottom_gray-dfc892a3372a6b4730ad95ce4f62e7b5.svg); margin-left: 12px; transition: .2s ease-in-out; background-size: cover; }
.notice_title strong { font-weight: 800; flex: 1; }
.notice_txt { border-top: 1px solid #edf0f6; padding: 16px 0 0; font-size: 14px; line-height: 24px; margin-top: 16px; }
.page_notice .box { cursor: pointer; }
.page_notice .box .notice_txt { display: none; }
.page_notice .box .notice_title.on+.notice_txt { display: block; }
.page_notice .box .notice_title.on span { transform: rotate(180deg) translateY(-1px); }

/*----------ì •ì±…*/
.page_policy strong { display: block; border-bottom: 1px solid #edf0f6; padding: 0 0 16px 0; margin-bottom: 16px; }
.page_policy .box p { margin-bottom: 20px; color: #1F75D9; }
.page_policy .box li { display: block; margin-bottom: 12px; }




/*----------------2024.05.09 추가*/

.epList { display : flex; flex-direction : column; overflow : hidden; overflow-y : auto; width: 323px; }
.epList+.con { max-width : inherit; flex:1; padding-bottom: 0; display: flex; flex-direction: column; overflow: hidden}
.contentsWrap { background : #000; color : #fff; display : flex; height : 100%; padding-bottom : 32px; }
.contentsWrap>div { gap: 32px; display : flex; flex : 1; margin : 0 auto; max-width : 1200px; overflow: hidden}
.epList li { min-height: 80px }
.epList a { border-bottom : 1px solid rgba(255,255,255,0.2); color : #fff; padding : 16px 12px; width: 100%; font-size: 14px; font-weight: 600; word-break: keep-all; line-height: 2.3em; letter-spacing: normal; word-spacing: 2px}
.epList a.on { background : rgba(255,255,255,0.1); color : #1f75d9; }
::-webkit-scrollbar { background : rgba(255,255,255,0.2); cursor : pointer; height : 6px; width : 6px; }
::-webkit-scrollbar-track { border-radius : 0; }
::-webkit-scrollbar-thumb { background : rgba(255,255,255,0.2); border : 1px solid rgba(255,255,255,0.2); width : 6px; }
::-webkit-scrollbar-thumb:hover { background : rgba(255,255,255,0.3); }

.contentsList>div { display : none; flex-direction : column; overflow: hidden; overflow-y: auto; position:relative; }
.contentsList>div.on { display : flex; }
.storyThum img { width : 100%; }
.storyThum button { height : 48px; width : 100px; }
/*.storyBlog { background: #fff; padding:40px; width: 100%; flex: 1; color: #000}*/
.storyBlog { padding:40px; width: 100%; flex: 1}
.storyBlog.on { display: block !important;}
.storyToon { gap:20px; align-items: center;}
.storyToon img { width:100%; max-width:802px;}

.contentsList {  display: flex; position: relative; flex-direction: column; }

@media screen and ( max-width:1200px  ) {
	.contentsWrap { padding-right:40px; padding-left:40px; }
	.contentsWrap>div { gap: 32px; display : flex; flex : 1; margin : 0 auto; }
	/*.contentsWrap>div { gap: 32px; display : flex; flex : 1; margin : 0 auto; max-width : 350px; }*/
}

@media screen and ( max-width:850px  ) {
	.contentsWrap { padding-right:20px; padding-left:20px;  }
	.video_con_tt {   padding: 15px}
	.contentsWrap .epList { display: none; }
	.storyBlog { padding: 20px; }

	#p_ep .epList {width: 100%; }
	#p_ep .pop_body { background:#000; }
	#p_ep .pop_hd { background: #000; border: none; }
	#p_ep .pop_btn_close::before, #p_ep .pop_btn_close::after { background: #fff; }



	.video_con_evaluation { padding: 0 !important; }
	.episodeList { display: block !important}
	.storyList { display: none !important}

}

@media screen and ( max-width:800px  ) {
	.con_evaluation { padding: 15px; width: 100%}
}

.episodeList { display: none}
.storyList { display: block}

.contents_title { margin-top: 40px }
.contents_title p { font-size: 24px; font-family: hyundaiharmonyB; margin-bottom: 16px;;   }

.video_con_evaluation {  position: absolute !important; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.9); padding: 40px; }


.paging_btn { padding:0 12px; margin-top:20px;  align-items: center;justify-content: space-between; color: #1F75D9;width: 100%;}
.paging_btn a {display: flex; align-items: center;gap: 12px;}
.paging_btn a i { background-image:url(/assets/images/ico/contentArw-5bd4fc89304aa1bc1b073801202e2d17.svg) }
.paging_btn a:nth-child(1) i { transform:rotate(180deg); }
.scroll {	flex: 1;	overflow: hidden;	overflow-y: auto; display: flex; flex-direction: column;}

.popFull .pop_con {
	width: 100%;
	height: 100%;
}
.blog_full { padding: 0;max-width: 1200px;margin: 0 auto;}

.video_next {display: none; position: absolute; top: 0; left: 0; right: 0;}
.video_next.on { display: flex;}

.justifyEnd {display: flex; justify-content: end;}

.mainSwipe.swiper-wrapper { justify-content: center ; }

@media (max-width: 1236px ) {
	.mainSwipe.swiper-wrapper { justify-content: initial; }
}


.company_logo { margin: 0 auto 60px; text-align: center}
.company_logo img { height:90px; }
.company_logo2 { margin: 0 auto ; text-align: center}
.company_logo2 img { height:300px; }

@media screen and ( max-width:641px  ) {
	.company_logo img { height:32px; }
	.company_logo2 img { height:120px; }
}