/*
    hnd에 적용된 공통 내용
    :: pc first
*/

/* banner */
article + [class^=btec-banner]{margin-top: 100px;}
[class^=btec-banner] { color: #ffffff; text-align: center; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-position: center center; background-size: cover;}
[class^=btec-banner] h4 { font-size: 40px; line-height: 53px; letter-spacing: -0.08px; font-weight: bold; }
[class^=btec-banner] p { font-size: 20px; line-height: 30px; letter-spacing: -0.02px; color: #FFFFFF; margin: 20px 0 0; }
.btec-banner-1 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/bg_banner_01.png'); height: 410px; }
.btec-banner-2 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/bg_banner_02.png'); height: 456px; }

/* 버튼 */
.btn-more-text { display: flex; align-items: center; justify-content: center; margin: 32px auto 0; width: 400px; height: 68px; /* UI Properties */ text-align: center; font-size: 26px; font-weight: 600; line-height: 30px; letter-spacing: -0.05px; color: #FFFFFF !important; opacity: 1; background-color: #00B4A7; border-radius: 4px; transition: all 0.3s ease;}
.btn-more-text:visited{color: inherit;}
.btn-more-text .arrow { display: block; background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 24px; height: 24px; margin: 0; margin-left: 4px; }

/* page title */
.contents-header {padding-bottom: 60px;}
.contents-header .contents-title{text-align: center; font-weight: bold; color: #000;}
.contents-header .contents-title.size1 { font-size: 50px; line-height: 52px; }
.contents-header .contents-title.size2 { font-size: 50px; line-height: 68px; }
.contents-header .contents-title.size3 { font-size: 46px; line-height: 52px; letter-spacing: -0.09px; }
.contents-header .contents-title.size4 { font-size: 46px; line-height: 68px; letter-spacing: -0.09px; }
.contents-header .contents-title .point { color: #00B4A7; }

/* grid box 3 / 2 */
.wrap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;}
.wrap-grid.two { grid-template-columns: repeat(2,1fr);}
.wrap-grid.four { grid-template-columns: repeat(4,1fr);}
.wrap-grid.rtl{direction: rtl;}

/* 동영상 */
.video-wrapper { max-width: 850px; margin: 48px auto 0; }
.iframe-container { width: 100%; overflow: hidden; position: relative; border-radius: 12px; margin: 0 auto; max-width: 800px; aspect-ratio: 16/9;}
.iframe-container iframe {width: 100%; height: 100%; }

/* 서브페이지 > 타이틀 */
.guide-title { font-weight: 700; font-size: 22px; line-height: 30px; letter-spacing: -0.05px; color: #000; padding-bottom: 16px; border-bottom: 2px solid #666666; margin-top: 60px; }

/* 서브페이지 > 설명글 */
.guide-cont { font-size: 16px; line-height: 21px; letter-spacing: -0.02px; color: #333333; padding: 32px 0 0; }
.guide-cont h4 { font-size: 16px; line-height: 21px; letter-spacing: 0px; color: #333333; font-weight: bold;}
.guide-cont .bg-lightgreen2 { margin-top: 24px; }
.guide-cont .btec-banner-1 { height: auto; color: #ffffff; border-radius: 12px; margin-top: 24px; padding: 60px 0; }
.guide-cont .btec-banner-1 h4 { color: #ffffff; font-size: 32px; line-height: 42px; letter-spacing: -0.06px; }

/* 대학 로고 리스트 (메인 / edm 소개) */
#possible-university{text-align: center;}
#possible-university .border-text{ display: inline-block; text-align: center; font-weight: bold; font-size: 22px; line-height: 30px; letter-spacing: -0.02px; color: #00B4A7; padding: 16px 24px; background: #FFFFFF; border: 1px solid #00B4A7; border-radius: 12px; margin: 0 0 16px; }
#possible-university .universe-list h3 { display: flex; align-items: center; justify-content: center; height: 80px; /* UI Properties */ background: #00B4A7; border-radius: 4px 4px 0px 0px; text-align: center; font-size: 22px; line-height: 33px; letter-spacing: -0.04px; color: #FFFFFF; font-weight: bold;}
#possible-university .universe-list + .universe-list{margin-top: 60px;}
#possible-university .universe-list .universe-logo { background: #FFFFFF; border: 1px solid #CEE5E3; border-radius: 0px 0px 4px 4px; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 24px; row-gap: 12px; padding: 32px 95px;}
#possible-university .universe-list .universe-logo .pic { width: 192px; }
#possible-university .universe-list .universe-logo.logoBig{display: flex; justify-content: center; gap: 40px;}
#possible-university .universe-list .universe-logo.logoBig .pic{width: 250px;}

/* edm 해외대학 정규과정 이수부터 영국 학교 입학까지 단 8개월! */
#btec-process [class^=icon-step] { display: block; width: 90px; height: 90px; background-size: 90px 90px; background-position: center center; background-repeat: no-repeat; margin: 0 auto; }
#btec-process .icon-step-01 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/icon_01.svg'); }
#btec-process .icon-step-02 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/icon_02.svg'); }
#btec-process .icon-step-03 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/icon_03.svg'); }
#btec-process .icon-step-04 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/icon_04.svg'); }
#btec-process .icon-step-05 { background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/main/icon_05.svg'); }
#btec-process strong { display: block; margin: 16px 0 0; text-align: center; font-size: 22px; line-height: 33px; letter-spacing: -0.04px; color: #000000; }
#btec-process p { margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 21px; letter-spacing: -0.01px; color: #666666; }
#btec-process p.desc { margin-top: 16px; font-size: 14px; line-height: 19px; }
#btec-process .list{padding: 53px 0 40px; border-radius: 12px; text-align: center; position: relative;}
#btec-process .list .column{width: calc(100%/5);}
#btec-process .list .column::after { content: ''; display: block; width: 32px; height: 32px; background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/btecHnd/common/icon_blue_arrow.svg'); background-size: 32px 32px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 50%; transform: translate(-50%, -50%); }
#btec-process .list .column:first-child::after { display: none; }
#btec-process .list .column:nth-child(2)::after { left: 20%; }
#btec-process .list .column:nth-child(3)::after { left: 40%; }
#btec-process .list .column:nth-child(4)::after { left: 60%; }
#btec-process .list .column:nth-child(5)::after { left: 80%; }

/* edm 해외대학 정규과정 차별성 */
#btec-dfc .wrap-gc-box { background-color: #ffffff; border: 1px solid #c5c5c5; border-radius: 12px; overflow: hidden;}
#btec-dfc .gc-box { padding: 24px; }
#btec-dfc .gc-box strong { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; color: #333333; }
#btec-dfc .gc-box p { margin-top: 8px; font-size: 16px; line-height: 24px; letter-spacing: -0.16px; color: #333; }
#btec-dfc.guide-cont .gc-box span { display: block; font-size: 16px; line-height: 21px; letter-spacing: -0.02px; margin-top: 15px; }







@media screen and (max-width: 900px) {
    #btec-process .list{padding: 24px 16px;}
    #btec-process .list .column{width: 100%; position: relative;}
    #btec-process .list .column + .column{padding-top: 56px;}
    #btec-process .list .column:nth-child(2)::after,
    #btec-process .list .column:nth-child(3)::after,
    #btec-process .list .column:nth-child(4)::after,
    #btec-process .list .column:nth-child(5)::after { left: 50%; }
    #btec-process .list .column::after { content: ''; display: block; width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; top: 12px; transform: translateX(-50%) rotate(90deg); }
}


@media screen and (max-width:768px){
    /* 버튼 */
    .btn-more-text { margin-top: 24px; width: 204px; height: 45px; font-size: 20px; letter-spacing: -0.02px; }
    .btn-more-text .arrow { width: 20px; height: 22px; background-position: center; }

    /* banner */
    article + [class^=btec-banner]{margin-top: 50px;}
    [class^=btec-banner] { height: auto; padding: 50px 0; }
    [class^=btec-banner] h4 { font-size: 25px; line-height: 33px; letter-spacing: -1px; }
    [class^=btec-banner] p { font-size: 16px; line-height: 27px; letter-spacing: -0.02px; margin: 15px 0 0; padding: 0 16px; }

    /* grid box 3 / 2 */
    .wrap-grid { grid-template-columns: repeat(1,1fr); gap: 16px; }
    .wrap-grid.two { grid-template-columns: repeat(1,1fr);}
    .wrap-grid.rtl{direction: initial;}

    /* 서브페이지 > 타이틀 */
    .guide-title { font-size: 18px; line-height: 24px; letter-spacing: -0.02px; color: #333333; padding-bottom: 12px; margin-top: 32px; }
    /* 서브페이지 > 설명글 */
    .guide-cont { padding: 24px 0 0; font-size: 14px; line-height: 21px; letter-spacing: -0.01px; color: #333333; }
    .guide-cont h4 { font-weight: normal; font-size: 14px; line-height: 21px; letter-spacing: -0.01px; color: #333333; }
    .guide-cont .btec-banner-1{margin-top: 32px;}
    .guide-cont .btec-banner-1 h4 { font-weight: bold; font-size: 22px; line-height: 29px; letter-spacing: -0.22px; }

    /* page title */
    .contents-header{ padding-bottom: 30px; }
    .contents-header .contents-title.size1,
    .contents-header .contents-title.size2,
    .contents-header .contents-title.size3,
    .contents-header .contents-title.size4 { font-size: 28px; line-height: 36px; letter-spacing: -0.06px; }

    /* 대학 로고 리스트 (메인 / edm 소개) */
    #possible-university .border-text { padding: 11px 19px; border-radius: 12px; margin: 0 0 12px; font-size: 18px; line-height: 26px; letter-spacing: -0.54px; }
    #possible-university .universe-list + .universe-list{margin-top: 30px;}
    #possible-university .universe-list h3 { height: 56px; background: #00B4A7; font-size: 18px; line-height: 27px; letter-spacing: -0.18px; }
    #possible-university .universe-list .universe-logo { padding: 16px 21px; column-gap: 7px; row-gap: 12px; justify-content: flex-start;}
    #possible-university .universe-list .universe-logo .pic { width: 90px;}
    #possible-university .universe-list .universe-logo.logoBig{column-gap: 8px; row-gap: 12px; justify-content: center; padding-left: 0; padding-right: 0;}
    #possible-university .universe-list .universe-logo.logoBig .pic {width: 90px;}

    /* edm 해외대학 정규과정 이수부터 영국 학교 입학까지 단 8개월! */
    #btec-process [class^=icon-step] { width: 70px; height: 70px; background-size: contain; }
    #btec-process strong { margin: 12px 0 0; font-size: 18px; line-height: 26px; letter-spacing: -0.54px; }
    #btec-process p { margin: 8px 0 0; }
    #btec-process p.desc { margin-top: 12px; }

    /* edm 해외대학 정규과정 차별성 */
    #btec-dfc .gc-box { padding: 16px; }
    #btec-dfc .gc-box strong { font-size: 18px; line-height: 26px; letter-spacing: -0.54px; }
    #btec-dfc .gc-box p { font-size: 14px; line-height: 21px; letter-spacing: -0.01px; margin: 8px 0 0; }
}



/*************************************************************
    hover effect
*************************************************************/
@media (hover: hover) and (pointer: fine) {
    .btn-more-text:hover{background-color: #18A149;}
}