/*******************************************
    찰스엔터 어학연수 패키지
*******************************************/
/* 공통요소 */
.charlesenter .paperWrap {box-shadow: var(--s-shadow-neutral02); border-radius: 4px; overflow: hidden;}
.charlesenter .paperWrap .titleWrap { text-align: center; padding: 2rem 0; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/selectEdmuhak-titleWrap.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.charlesenter .paperWrap .info{padding: 3rem 5.3rem;}
.charlesenter .paperWrap .info .designBox{background-color: #fff; box-shadow: 2px 2px 0 0 #000; border-radius: 4px; overflow: hidden; border: 1px solid var(--c-border-black);}
.charlesenter .paperWrap .info .top-imgWrap{ width: 100%; }
.charlesenter .paperWrap .info .bottom-textWrap{border: 1px solid var(--c-border-black); background-color: #fff; padding: 3rem 1.6rem 2rem; position: relative; margin-top: 4.8rem; font-size: var(--f-body1);}
.charlesenter .paperWrap .info .bottom-textWrap .title{position: absolute; top: -1.8rem; left: 50%; transform: translateX(-50%);}
.charlesenter .paperWrap .info .bottom-textWrap .title img{object-fit: contain; margin: 0 auto; }
.charlesenter .paperWrap .info .bottom-textWrap .txt1{font-size: var(--f-fontSize02); font-weight: 700; margin-bottom: 1.2rem; letter-spacing: 0.64px; line-height: 130%;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; touch-action: none; pointer-events: none;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box span{width: 0.6rem; height: 0.6rem; border: 1px solid var(--c-border-black); border-radius: 50%; position: absolute; background-color: #fff; box-sizing: border-box; overflow: hidden;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(1){left: -0.3rem; top: -0.3rem;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(2){right: -0.3rem; top: -0.3rem;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(3){left: -0.3rem; bottom: -0.3rem;}
.charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(4){right: -0.3rem; bottom: -0.3rem;}
.charlesenter .paperWrap .info .bottom-textWrap.type2{box-shadow: 2px 2px 0 0 #000; border-radius: 4px;}
.charlesenter .paperWrap .info .designBox.textType {padding: 1.6rem; font-size: var(--f-body1); letter-spacing: -0.18px;}
.charlesenter .paperWrap .info .designBox.textType + .designBox.textType{margin-top: 1.6rem;}
.charlesenter .paperWrap .info .designBox.textType{padding: 0; min-height: 11.2rem;}
.charlesenter .paperWrap .info .designBox.textType .imgWrap{width: 19.95rem; position: relative;}
.charlesenter .paperWrap .info .designBox.textType .imgWrap .cityName{position: absolute; align-items: center; bottom: 0; left: 0; font-size: var(--f-fontSize02); z-index: 1; color: #fff; padding: 0 1.2rem 0.65rem;}
.charlesenter .paperWrap .info .designBox.textType .imgWrap .cityName .kor{font-weight: 700;}
.charlesenter .paperWrap .info .designBox.textType .imgWrap .cityName .eng{font-size: var(--f-fontSize04); font-weight: 300; margin-left: 8px;}
.charlesenter .paperWrap .info .designBox.textType .textWrap{padding: 1.2rem; width: calc(100% - 19.95rem);}
.charlesenter .paperWrap .info .designBox.textType .textWrap p{font-size: var(--f-body2); letter-spacing: -0.16px;}
.charlesenter .paperWrap .info .designBox.textType .textWrap b{margin-bottom: 0.6rem; display: block;}
.charlesenter .paperWrap .info .designBox.textType .textWrap .bottom{margin-top: 0.8rem; color: var(--c-text02);}

.charlesenter .banner{text-align: center;}
.charlesenter .banner .sub{margin-top: 0.8px; font-size: var(--f-fontSize03); letter-spacing: -0.26px; font-weight: 500;}

.charlesenter table{border-collapse: collapse; text-align: center; width: 100%; border-bottom: 1px solid var(--c-border-black); color: var(--c-text01);}
.charlesenter table tr{border-top: 1px solid var(--c-border-black);}
.charlesenter table th{font-weight: 700; bottom: 1px solid var(--c-border-black);}
.charlesenter table *{padding: 0.6rem 0;}
.charlesenter table th,
.charlesenter table tbody td{border-right: 1px solid var(--c-border-black);}
.charlesenter table thead th:last-child,
.charlesenter table tbody td:last-child{border-right: none;}
.charlesenter table caption{text-align: left; font-weight: 700; letter-spacing: -0.18px; padding: 0; margin-bottom: 0.8rem; color: var(--c-text01);}
.charlesenter table caption p{font-weight: 400; font-size: var(--f-body2); letter-spacing: -0.16px; padding: 0;}
.charlesenter .table-bottom{margin-top: 0.8rem; font-size: var(--f-body2); letter-spacing: -0.16px;}
.charlesenter .table-bottom em{color: #FF0909 !important;}


/* 비주얼 */
.charlesenter .area-pg-visual { position: relative; width: 100%; height: 21.4rem; padding: 5rem 0; }
.charlesenter .area-pg-visual .maxWidth {position: relative; width: 100%; height: 100%; }
.charlesenter .area-pg-visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/mainBanner.png'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.charlesenter .area-pg-visual .titleWrap { position: absolute; z-index: 1; }
.charlesenter .area-pg-visual .titleWrap span { display: inline-block; font-size: var(--f-body1); color: #fff; background-color: #FF40D2; border-radius: 8px; padding: 2px 9px; font-weight: 600; }
.charlesenter .area-pg-visual .titleWrap span + span { margin-left: 0.4rem; }
.charlesenter .area-pg-visual .titleWrap .title { color: var(--c-text01); margin-top: 0.8rem; }
.charlesenter .area-pg-visual .titleWrap .sub { font-size: var(--f-fontSize05); margin-top: 0.4rem; }
.charlesenter .area-pg-visual .contactWrap { position: absolute; z-index: 1; right: 0; background-color: #fff; border-radius: 24px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.12); width: 400px; padding: 24px 16px; top: 50%; transform: translateY(-50%); }
.charlesenter .area-pg-visual .contactWrap .box { position: relative; padding-left: 3.3rem; font-size: var(--f-body2); line-height: 150%;}
.charlesenter .area-pg-visual .contactWrap .box + .box { margin-top: 0.6rem; }
.charlesenter .area-pg-visual .contactWrap strong { width: 3.3rem; padding-left: 0.8rem; position: absolute; left: 0; display: block; }
.charlesenter .area-pg-visual .contactWrap .contact-btn { margin-top: 0.8rem; display: block; border-radius: 999999px; background-color: var(--c-text01); color: #fff; font-size: var(--f-body1); height: 40px; line-height: 150%; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.charlesenter .area-pg-visual .contactWrap .contact-btn:hover { background-color: #18A149; }
.charlesenter .area-pg-visual .contactWrap .contact-btn .arrow { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/common/buttonArrow.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 0.8rem; height: 0.8rem; margin-left: 0.2rem; }

/* 유튜버 찰스엔터가 선택한 edm유학센터! */
.charlesenter .selectEdmuhak{background-color: #D4AEFF;}
.charlesenter .selectEdmuhak .paperWrap{background-color: #FFF1FC;}
.charlesenter .selectEdmuhak em{color: #FF14C7;}
.charlesenter .selectEdmuhak .paperWrap .info .top-imgWrap{aspect-ratio: 1034/612;}
.charlesenter .selectEdmuhak .paperWrap .info .bottom-textWrap{text-align: center; letter-spacing: -0.2px; font-size: var(--f-fontSize05);}

/* 배너 : 어쩌면 일생에 한 번뿐일지 모를 어학연수! */
.charlesenter .banner.recommend{color: #fff; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/banner-recommend_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.charlesenter .banner.recommend em{color: #C9FF00;}
.charlesenter .banner.recommend .sub{font-weight: 400;}

/* ep. 어학연수 */
.charlesenter .languageTraining .paperWrap .info .top-imgWrap{position: relative; aspect-ratio: 1024/576;}
.charlesenter .languageTraining .paperWrap .info .top-imgWrap .videoWrap.youtube{width: 100%; height: 100%;}
.charlesenter .languageTraining .paperWrap .info .top-imgWrap .videoWrap.youtube iframe{width: 101%; height: 101%; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.charlesenter .languageTraining .paperWrap .info .thumbList{justify-content: space-between; margin-top: 1.6rem;}
.charlesenter .languageTraining .paperWrap .info .thumbList .imgWrap{width: calc(100%/4 - 0.9rem); aspect-ratio: 240/135; border-radius: 4px; border: 1px solid #000; overflow: hidden;}
.charlesenter .languageTraining .paperWrap .info .bottom-textWrap .top-info{border-bottom: 1px solid var(--c-border-blue); padding: 0 1.4rem 2rem; margin-bottom: 2rem;}
.charlesenter .languageTraining .paperWrap .info .bottom-textWrap .textWrap{letter-spacing: -0.18px; width: 63.4%;}
.charlesenter .languageTraining .paperWrap .info .bottom-textWrap .textWrap .txt2{font-size: var(--f-fontSize02); font-weight: 500; letter-spacing: -0.64px; margin-bottom: 0.6rem;}
.charlesenter .languageTraining .paperWrap .info .bottom-textWrap .logo{max-width: 16.7rem; aspect-ratio: 334/187; width: 36.6%;}
.charlesenter .languageTraining .paperWrap .info .bottom-textWrap .logo figure{background-size: contain;}
.charlesenter .languageTraining.canada{background-color: #FFE16A;}
.charlesenter .languageTraining.canada em{color: #FF5C2B;}
.charlesenter .languageTraining.canada .paperWrap{background-color: #FFF9E3;}
.charlesenter .languageTraining.canada table thead{background-color: #FFE88F;}
.charlesenter .languageTraining.canada table tbody th{background-color: #FFFEEC;}
.charlesenter .languageTraining.usa{background-color: #8CE2FF;}
.charlesenter .languageTraining.usa em{color: #0080E9;}
.charlesenter .languageTraining.usa .paperWrap{background-color: #F1FFFE;}
.charlesenter .languageTraining.usa .paperWrap .info .top-imgWrap{background-color: #DAFAF7;}
.charlesenter .languageTraining.usa .paperWrap .info .top-imgWrap .txt{text-align: center; font-weight: 700; font-size: var(--f-fontSize02); position: absolute; top: 50%; width: 100%; transform: translateY(-50%); line-height: 130%;}
.charlesenter .languageTraining.usa .paperWrap .info .top-imgWrap .txt span{display: block; font-size: var(--f-fontSize04); margin-top: 0.8rem; letter-spacing: -0.22px; line-height: 150%; color: var(--c-text01);}
.charlesenter .languageTraining.usa table thead{background-color: #E2FF79;}
.charlesenter .languageTraining.usa table tbody th{background-color: #FBFFE5;}

/* 어학연수 추천 도시 */
.charlesenter .recommendedCity.canada{background-color: #D6B2FF;}
.charlesenter .recommendedCity.canada em{color: #5516FF;}
.charlesenter .recommendedCity.canada .paperWrap{background-color: #F3E8FF;}
.charlesenter .recommendedCity.usa{background-color: #FFE16A;}
.charlesenter .recommendedCity.usa em{color: #FF5C2B;}
.charlesenter .recommendedCity.usa .paperWrap{background-color: #FFF9E3;}

/* 더 많은 어학원을 확인해보세요! */
.charlesenter .moreAnd{background-color: #A8F464;}
.charlesenter .moreAnd em{color: #00C607;}
.charlesenter .moreAnd .paperWrap{background-color: #EDFACE;}
.charlesenter .moreAnd .paperWrap .info{padding-top: 0;}
.charlesenter .moreAnd .paperWrap .info .bottom-textWrap{padding: 3rem 3.4rem 1.2rem;}
.charlesenter .moreAnd .paperWrap .info .bottom-textWrap .logo{width: 100%; aspect-ratio: 904/452;}

/* edm유학센터 고객 후기 */
.charlesenter .customerReview{background-color: #FFE16A;}
.charlesenter .customerReview em{color: #FF5C2B;}
.charlesenter .customerReview .paperWrap{background-color: #FFF7D9;}
.charlesenter .customerReview .paperWrap .info .designBox{width: calc(50% - 0.6rem); margin-right: 1.2rem; margin-bottom: 1.2rem; padding: 1.7rem 1.6rem 3rem; min-height: 10.7rem; font-size: var(--f-body1); position: relative;}
.charlesenter .customerReview .paperWrap .info .designBox .name{color: var(--c-text03); position: absolute; bottom: 1.5rem; left: 1.6rem;}
.charlesenter .customerReview .paperWrap .info .designBox:nth-child(2n){margin-right: 0;}
.charlesenter .customerReview .paperWrap .info .designBox:nth-last-of-type(1),
.charlesenter .customerReview .paperWrap .info .designBox:nth-last-of-type(2){margin-bottom: 0;}







@media screen and (max-width: 1280px){
    .charlesenter .maxWidth { padding: 0 16px; }

    .charlesenter .area-pg-visual .contactWrap{right: 16px;}
}

@media screen and (max-width: 1080px){
    .charlesenter .paperWrap .info .designBox.textType .imgWrap{width: 14rem;}
    .charlesenter .paperWrap .info .designBox.textType .textWrap{width: calc(100% - 14rem);}
}

@media screen and (max-width: 949px){
    .charlesenter .why .cardWrap .card figure { height: 9rem; }
}

/*
1rem = 13px
*/
@media screen and (max-width: 768px){
    .charlesenter > article,
    .charlesenter section > article { padding: 50px 0; }
    .charlesenter .articleTitle .title { line-height: 32.5px; }
    .charlesenter .articleTitle .sub { margin-bottom: 3px; }

    .charlesenter h2{line-height: 130%;}

    .charlesenter .paperWrap .info{padding: 30px 22px 36px;}
    .charlesenter .paperWrap .info .bottom-textWrap{margin-top: 69px; padding: 51px 16px 32px;}
    .charlesenter .paperWrap .info .bottom-textWrap .title{width: 150px; top: -29px;}
    .charlesenter .paperWrap .info .bottom-textWrap .design-box span{width: 12px; height: 12px;}
    .charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(1){left: -6px; top: -6px;}
    .charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(2){right: -6px; top: -6px;}
    .charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(3){left: -6px; bottom: -6px;}
    .charlesenter .paperWrap .info .bottom-textWrap .design-box span:nth-child(4){right: -6px; bottom: -6px;}
    .charlesenter .paperWrap .info .bottom-textWrap .txt1{margin-bottom: 16px;}

    .charlesenter .paperWrap .info .designBox.textType{height: auto;}
    .charlesenter .paperWrap .info .designBox.textType .imgWrap{width: 100%; aspect-ratio: 292/163;}
    .charlesenter .paperWrap .info .designBox.textType .imgWrap .cityName{padding: 0 15px 8px;}
    .charlesenter .paperWrap .info .designBox.textType .textWrap{width: 100%; padding: 16px; word-break: break-all;}
    .charlesenter .paperWrap .info .designBox.textType .textWrap b{margin-bottom: 12px;}
    .charlesenter .paperWrap .info .designBox.textType .textWrap .bottom{margin-top: 12px;}
    .charlesenter .paperWrap .info .designBox.textType + .designBox.textType{margin-top: 25px;}

    .charlesenter table *{padding: 4px 0;}
    .charlesenter table caption{text-align: center; margin-bottom: 12px;}
    .charlesenter table caption p{margin-top: 12px;}

    .charlesenter .banner .sub{margin-top: 12px;}

    .charlesenter .area-pg-visual { height: auto; padding: 2.3rem 0 2.769rem; }
    .charlesenter .area-pg-visual .bgImage { background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/mainBanner_mo.png'); background-position: bottom center; }
    .charlesenter .area-pg-visual .mo-bgImage{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/mainBanner_mo_2.png'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 27.692rem; height: 23.923rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.5rem;}

    .charlesenter .area-pg-visual .titleWrap { position: static; }
    .charlesenter .area-pg-visual .titleWrap span { line-height: 22.5px; padding: 2px 4px; font-weight: 500; }
    .charlesenter .area-pg-visual .titleWrap span + span { margin-left: 8px; }
    .charlesenter .area-pg-visual .titleWrap .title { line-height: 36.4px; margin-top: 12px; }
    .charlesenter .area-pg-visual .titleWrap .sub { line-height: 24px; margin-top: 8px; }
    .charlesenter .area-pg-visual .contactWrap { position: static; transform: none; width: 100%; padding: 16px 24px; margin-top: 13.1rem; }
    .charlesenter .area-pg-visual .contactWrap strong { width: 4.46rem; padding-left: 0; }
    .charlesenter .area-pg-visual .contactWrap .box { padding-left: 4.46rem; }
    .charlesenter .area-pg-visual .contactWrap .box + .box { margin-top: 12px; }
    .charlesenter .area-pg-visual .contactWrap .contact-btn { display: none; }

    /* 유튜버 찰스엔터가 선택한 edm유학센터! */
    .charlesenter .selectEdmuhak .paperWrap .info .top-imgWrap{aspect-ratio: 294/700;}
    .charlesenter .selectEdmuhak .paperWrap .info .top-imgWrap figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/selectEdmuhak_01_mo.png') !important;}

    /* 배너 : 어쩌면 일생에 한 번뿐일지 모를 어학연수! */
    .charlesenter .banner.recommend{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/banner-recommend_bg_mo.png');}

    .charlesenter .languageTraining .paperWrap .info .top-imgWrap{width: calc(100% - 44px); margin: 0 auto;}
    .charlesenter .languageTraining .paperWrap .info .thumbList{margin-top: 17px;}
    .charlesenter .languageTraining .paperWrap .info .thumbList .imgWrap{width: calc(50% - 8px); margin-right: 16px; margin-bottom: 16px;}
    .charlesenter .languageTraining .paperWrap .info .thumbList .imgWrap:nth-child(2n){margin-right: 0;}
    .charlesenter .languageTraining .paperWrap .info .thumbList .imgWrap:nth-last-of-type(1),
    .charlesenter .languageTraining .paperWrap .info .thumbList .imgWrap:nth-last-of-type(2){margin-bottom: 0;}
    .charlesenter .languageTraining .paperWrap .info .bottom-textWrap .top-info{padding: 0 0 20px; margin-bottom: 20px;}
    .charlesenter .languageTraining .paperWrap .info .bottom-textWrap .logo{order: 1; width: 100%; max-width: 216px; margin: 0 auto;}
    .charlesenter .languageTraining .paperWrap .info .bottom-textWrap .textWrap{order: 2; width: 100%; text-align: center;}
    .charlesenter .languageTraining .paperWrap .info .bottom-textWrap .textWrap .txt2{margin-bottom: 8px;}
    .charlesenter .languageTraining.usa .paperWrap .info .top-imgWrap .txt span{letter-spacing: -0.18px; margin-top: 12px;}

    .charlesenter .moreAnd .paperWrap .info .bottom-textWrap{margin-top: 59px;}
    .charlesenter .moreAnd .paperWrap .info .bottom-textWrap{padding: 45px 12px 24px;}
    .charlesenter .moreAnd .paperWrap .info .bottom-textWrap .logo{aspect-ratio: 260/158;}
    .charlesenter .moreAnd .paperWrap .info .bottom-textWrap .logo figure{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/charlesenter/moreAnd_logo_mo.png') !important;}

    .charlesenter .customerReview .paperWrap .info .designBox{width: 100%; margin-right: 0; margin-bottom: 24px; height: auto; padding: 24px 16px;}
    .charlesenter .customerReview .paperWrap .info .designBox:nth-last-of-type(2){margin-bottom: 24px;}
    .charlesenter .customerReview .paperWrap .info .designBox .name{position: static; margin-top: 8px;}
    .charlesenter .customerReview .paperWrap .info .designBox br{display: none;}
}

@media screen and (max-width: 500px) {
    .charlesenter .area-pg-visual .mo-bgImage{bottom: 0;}
}