@import url('sub.css');

/*** Contents ***/
/* AWARD — TOP */
.award_top { position:relative; overflow:hidden; padding:120px 0px; background:var(--grayBg) url("/edu/img/award_bg.jpg") center top / cover no-repeat; }
.award_top .basic_in { display:flex; flex-direction:column; gap:30px; position:relative; z-index:1; }
.award_slide { width:100%; min-width:0; overflow:hidden; }
.award_slide .swiper-wrapper { align-items:stretch; }
.award_slide .swiper-slide { display:flex; height:auto; }
.award_slide:not(.swiper-initialized) .swiper-slide { width:calc((100% - 120px) / 5); margin-right:30px; }

/* AWARD — CARD */
.award_card { display:flex; flex-direction:column; align-items:center; gap:15px; flex:1; width:100%; min-height:333px; padding:35px 30px 30px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.3); border-radius:var(--borderR30); background:rgba(255,255,255,0.75); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:relative; overflow:hidden; }
.award_card::before { content:''; position:absolute; left:50%; bottom:0; width:818px; height:818px; margin:0px 0px -409px -409px; border-radius:50%; background:var(--main); opacity:0; transform:translateY(20%) scale(0.12); transform-origin:center center; transition:transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s linear; z-index:0; pointer-events:none; }
.award_card .medal { display:block; width:32px; height:40px; flex-shrink:0; position:relative; z-index:1; }
.award_card strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; width:100%; text-align:center; font-weight:600; position:relative; z-index:1; transition:color 0.35s linear; }
.award_card ul { display:flex; flex-direction:column; gap:2px; width:100%; position:relative; z-index:1; }
.award_card li { display:block; padding:8px 10px; border:1px solid var(--border); border-radius:var(--borderR10); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(42,38,35,0.65); transition:color 0.35s linear, border-color 0.35s linear; }
.award_card:hover::before, .award_card:focus-visible::before { opacity:1; transform:translateY(0) scale(1); }
.award_card:hover strong, .award_card:focus-visible strong { color:var(--white); }
.award_card:hover li, .award_card:focus-visible li { color:var(--white); border-color:rgba(255,255,255,0.3); }

/* AWARD — CONTROL */
.award_ctrl { display:flex; align-items:center; gap:30px; width:100%; }
.award_ctrl.hide { display:none; }
.award_arrows { display:flex; align-items:center; gap:1px; flex-shrink:0; }
.award_arrows button { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--border); border-radius:var(--borderR40); background:transparent; color:var(--black); cursor:pointer; transition:border-color 0.3s linear, color 0.3s linear, background 0.3s linear; }
.award_arrows button::before { font-family:var(--icon); font-size:24px; line-height:100%; color:inherit; opacity:0.5; transition:opacity 0.3s linear; }
.award_arrows .award_prev::before { content:"\e5c4"; }
.award_arrows .award_next::before { content:"\e5c8"; }
.award_arrows button:hover { border-color:var(--main); background:var(--main); color:var(--white); }
.award_arrows button:hover::before { opacity:1; }
.award_arrows button.swiper-button-disabled { opacity:0.4; cursor:default; pointer-events:none; }
.award_progress { position:relative; flex:1 1 auto; min-width:80px; height:2px; background:rgba(42,38,35,0.1); }
.award_progress .swiper-pagination-progressbar-fill { position:absolute; left:0; top:-2px; width:12.5%; height:6px; transition:width 0.6s ease; }
.award_progress .swiper-pagination-progressbar-fill::before { content:''; position:absolute; left:0; right:3px; top:2px; height:2px; background:var(--main); }
.award_progress .swiper-pagination-progressbar-fill::after { content:''; position:absolute; right:0; top:0; width:6px; height:6px; border-radius:50%; background:var(--main); }

/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){
}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* AWARD — TOP */
.award_top { padding:100px 0px; }
.award_slide:not(.swiper-initialized) .swiper-slide { width:calc((100% - 72px) / 4); margin-right:24px; }

/* AWARD — CARD */
.award_card { padding:32px 24px 26px; }

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* AWARD — TOP */
.award_top { padding:80px 0px; }
.award_slide:not(.swiper-initialized) .swiper-slide { width:calc((100% - 40px) / 3); margin-right:20px; }

/* AWARD — CARD */
.award_card { min-height:300px; padding:28px 20px 24px; }

}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){
/* AWARD — TOP */
.award_top { padding:60px 0px; }
.award_top .basic_in { gap:24px; }
.award_slide:not(.swiper-initialized) .swiper-slide { width:calc((100% - 16px) / 2); margin-right:16px; }

/* AWARD — CARD */
.award_card { min-height:280px; }

/* AWARD — CONTROL */
.award_ctrl { gap:20px; }
.award_arrows button { width:48px; height:48px; }
.award_arrows button::before { font-size:20px; }

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* AWARD — TOP */
.award_top { padding:50px 0px; }
.award_top .basic_in { gap:20px; }
.award_slide:not(.swiper-initialized) .swiper-slide { width:83%; margin-right:12px; }

/* AWARD — CARD */
.award_card { min-height:250px; gap:12px; padding:24px 16px 20px; border-radius:var(--borderR20); }
.award_card li { padding:6px 8px; }

/* AWARD — CONTROL */
.award_ctrl { gap:15px; }
.award_arrows button { width:40px; height:40px; }
.award_arrows button::before { font-size:18px; }

}