@charset "utf-8";

/**************************************************
	Main CSS Document
	IEETU Web Standardization Team
	2020-08-24
**************************************************/

/**************************************************
	Common
**************************************************/


/**************************************************
	Header
**************************************************/
#header > .inr{max-width:1688px;}
#header.open{background-color:#fff;}
@media screen and (min-width:1024px){
	#header{position:absolute; top:0; left:0; width:100%;}
}
@media screen and (min-width:768px){
	#header:not(.open) #gnb > li > a{color:#fff;}
}
#footer > .inr{max-width:1688px;}


/**************************************************
	Main
**************************************************/
#container{display:flex; flex-direction:column;}
.cont_main{flex:1; position:relative;}
.hero-banner{position:absolute; inset:0; overflow:hidden;}
.herozone,
.herozone div{height:100% !important;}
@media screen and (min-width:1024px){
	.herozone__img-mobile{display:none;}
}
@media screen and (max-width:1023px){
	.herozone__img-pc{display:none;}
}
.herozone .herozone__img img{object-fit:cover; height:100% !important;}
.herozone .nav{position:absolute; left:0; right:0; bottom:20px; z-index:10; height:auto !important;}
.herozone .nav > .slick-button{display:none;}
.herozone .area_ctrl{display:flex; justify-content:center; align-items:center; gap:12px;}
.herozone .area_ctrl .count{display:none;}
.herozone .area_ctrl .slick-button{display:flex; justify-content:center; align-items:center; width:20px; height:20px;}
.herozone .area_ctrl .slick-button:after{content:''; width:100%; height:100%; mask-position:0 0; mask-repeat:no-repeat; mask-size:contain; background-color:#fff;}
.herozone .area_ctrl .play:after{mask-image:url(../images/common/icon/ico_swiper_play.svg);}
.herozone .area_ctrl .pause:after{mask-image:url(../images/common/icon/ico_swiper_stop.svg);}
.herozone .area_ctrl .slick-dots{display:flex; align-items:center; gap:12px;}
.herozone .area_ctrl .slick-dots button{display:block; position:relative; width:1rem; height:1rem; overflow:hidden; border-radius:50%; border:1px solid #fff; background-color:transparent; color:transparent;}
.herozone .area_ctrl .slick-dots .slick-active button{background-color:#fff;}

.hero-banner__content{position:relative; z-index:0; padding-top:200px; color:#fff; text-align:center;}
.hero-banner__heading{font-size:56px; line-height:1.2;}
.hero-banner__desc{margin-top:20px; padding:0 16px; font-size:19px;}

.main-section{position:relative; margin-top:150px; padding-bottom:60px;}
.main-section > .inner{display:grid; grid-template-columns:repeat(3,1fr); gap:33px; max-width:1688px; margin:0 auto; padding:0 24px;}
.main-section .widget{position:relative; min-width:0; height:100%; padding:32px; background-color:#ddecf9;}
.main-section .widget__header{display:flex; justify-content:space-between; margin-bottom:16px;}
.main-section .widget__title{font-size:28px; line-height:1.1;}
.widget__more-btn{position:relative; width:35px; height:35px; padding:6px; border-radius:50%; background-color:#33363d;}
.widget__more-btn:after{content:''; display:block; width:100%; height:100%; mask:url(../images/common/icon/ico_plus_strong.svg) no-repeat 0 0/contain; background-color:#fff;}
.equipmentzone{position:static; margin:0 -6px;}
.equipmentzone .nav{position:absolute; top:32px; right:72px;}
.equipmentzone .area_ctrl{display:flex; align-items:center; gap:4px;}
.equipmentzone .nav .count{font-size:17px; color:#8a949e;}
.equipmentzone .nav .count em{font-weight:700; color:#333;}
.equipmentzone .nav .slick-button{width:35px; height:35px; padding:8px; border-radius:50%;}
.equipmentzone .nav .play,
.equipmentzone .nav .pause{background-color:#fff;}
.equipmentzone .nav .slick-button:after{position:static; mask-position:0 0; mask-repeat:no-repeat; mask-size:contain; background-color:#333;}
.equipmentzone .nav .play:after{mask-image:url(../images/common/icon/ico_swiper_play.svg);}
.equipmentzone .nav .pause:after{mask-image:url(../images/common/icon/ico_swiper_stop.svg);}
.equipmentzone .nav .next:after{mask-image:url(../images/common/icon/ico_angle.svg); transform:rotate(-90deg);}
.equipmentzone .nav .prev:after{mask-image:url(../images/common/icon/ico_angle.svg); transform:rotate(90deg);}
.equipment-card{padding:0 6px;}
.equipment-card__thumbnail{overflow:hidden; aspect-ratio:224/132; border-radius:8px; background-color:#F5F5F5;}
.equipmentzone .equipment-card .equipment-card__thumbnail img{width:100%; height:100%; object-fit:contain;}
.equipment-card__info{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.equipment-card__status{font-weight:700; font-size:15px; line-height:1.2; color:#f3691f;}
.equipment-card__name{display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:48px; font-weight:700; font-size:17px; line-height:24px;}
.equipment-card__location{display:block; gap:var(--g-gap-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.2;}
.equipment-card__location--label{flex-shrink:0; min-width:0; font-weight:700; color:#f3691f;}
.equipment-card__location--value{flex:1; min-width:0;}
.equipment-card__action{margin-top:20px;}
.equipment-card__action .btn-primary{display:flex !important; justify-content:center; align-items:center; height:40px; border-radius:8px; background-color:#0b3581; font-size:17px; color:#fff;}
.education-widget__list{display:flex; flex-direction:column; gap:11px; position:relative; overflow:hidden; overflow-y:auto; height:270px;}
.education-widget__list::-webkit-scrollbar {width: 0.4rem;}
.education-widget__list::-webkit-scrollbar-thumb {background-color: #aecfef; border-radius: 0.8rem;}
.education-widget__list::-webkit-scrollbar-track {background-color: #cce1f5;}
.education-widget__item{min-width:0; border-radius:8px; background-color:#fff;}
.education-card{padding:18px 20px;}
.education-card__title{font-size:17px; line-height:1.2;}
.education-card__meta{display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:8px;}
.education-card__meta-row{display:flex; align-items:center; gap:4px; position:relative; min-width:0; font-size:15px; line-height:1.2;}
.education-card__meta-row:not(:first-child):before{content:''; width:6px; height:6px; border-radius:50%; background-color:#b1b8be;}
.education-card__label{min-width:0; font-weight:700; color:#f3691f;}

.education-card__value--level{font-weight:700; color:#0b3581;}
.education-card__value--applicants + .education-card__label:before{content:'/'; margin-right:4px; color:#333;}

.board-widget__list{display:flex; flex-direction:column; gap:12px;}
.board-widget__item{min-width:0; border-radius:8px; background-color:#fff;}
.board-card{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:19px 20px 19px; line-height:1.2;}
.board-card__title{min-width:0;}
.board-card__title a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px;}
.board-card__date{flex-shrink:0; font-size:15px;}

/* ~ 1280px */
@media screen and (max-width:1280px){
	.main-section > .inner{gap:20px;}
	.main-section .widget{padding:20px 16px;}
	.equipmentzone .nav{right:56px; top:20px;}
}

/* ~ 1023px */
@media screen and (max-width:1023px){
	.main-section > .inner{gap:16px; padding:0 16px;}
	.hero-banner__heading{font-size:28px;}
	.hero-banner__desc{font-size:17px;}
	.main-section .widget__header{align-items:center;}
	.main-section .widget__title{font-size:21px;}
	.widget__more-btn{width:30px; height:30px;}
	.equipmentzone .nav{position:static;}
	.equipmentzone .nav .slick-button{width:30px; height:30px;}
	.equipmentzone .nav .prev,
	.equipmentzone .nav .next{position:absolute; top:calc(58.93% - 100px); padding:6px; background-color:#eeeeef;}
	.equipmentzone .nav .prev{left:0;}
	.equipmentzone .nav .next{right:0;}
	.equipmentzone .nav .count{position:absolute; top:20px; right:86px; height:30px; font-size:14px; line-height:30px;}
	.equipmentzone .nav .play,
	.equipmentzone .nav .pause{position:absolute; top:20px; right:50px;}
	.equipment-card__info{gap:6px;}
	.equipment-card__name{font-size:16px;}
	.equipment-card__location{font-size:14px;}
	.equipment-card__action{margin-top:12px;}
	.education-widget__list{gap:8px;}
	.education-card{padding:12px;}
	.education-card__title a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px;}
	.education-card__meta-row{flex-wrap:wrap; font-size:14px;}
	.board-card{flex-wrap:wrap; gap:4px; padding:12px;}
	.board-widget__list{gap:8px;}
	.board-card__title a{font-size:16px;}
	.board-card__date{font-size:14px;}
}
/* ~ 767px */
@media screen and (max-width:767px){
	.hero-banner{position:relative;}
	.herozone .nav{bottom:calc(100vw * 0.5 + 20px);}
	.hero-banner__content{position:absolute; top:30vw; left:0; right:0; padding:0;}
	.main-section > .inner{grid-template-columns:1fr;}
	.main-section{margin-top:-50%;}
	.education-widget__list{height:230px;}
}
/* ~ 424px */
@media screen and (max-width:424px){
	.equipment-card__name{height:auto;}
	.education-widget__list{height:290px;}
	.board-card{flex-direction:column; align-items:flex-start;}
}