/*******************************************************************************
                                메인 & 서브메인 공통
********************************************************************************/
.area-sm-content {font-size:.8rem;letter-spacing:-1px;}
.area-sm-content > [class^=sm-] {margin:5rem 0;}
.area-sm-content .sm-cont-title {position:relative;width:90%;max-width:54rem;margin:0 auto 2rem;text-align:center;}
.area-sm-content .flex-wrap .sm-cont-title {width:100%;}
.area-sm-content .sm-cont-title h2 {font-size:2rem;
    margin-bottom: 3rem;}
.area-sm-content .sm-cont-title .add-text {color:#666;}
.area-sm-content .sm-cont-title + [class^="md-tabs"] li a {font-size:1.1rem;}
.area-sm-content .more-txt {position:absolute;top:50%;right:-.2rem;transform:translateY(-50%);padding-right:1rem;line-height:100%;}
.area-sm-content .more-txt:after {content:'';position:absolute;top:50%;right:0;transform:translateY(-45%);display:inline-block;width:1rem;height:1rem;background:url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png) no-repeat;background-size:19.5rem;background-position:-4rem -1rem;}
.area-sm-content .make-inquiry {position:absolute;top:50%;right:0;transform:translateY(-50%);}
.area-sm-content .more-txt + .make-inquiry {right:4rem;}
.sm-cont-title .add-text + .more-txt {top:3.2rem;transform:none;}


@media screen and (max-width:768px) {
    .area-sm-content {font-size:1.08rem;}
    .area-sm-content .sm-cont-title h2 {font-size:1.8rem;  text-align: left}
    .area-sm-content .sm-cont-title .add-text {padding:0 2rem;box-sizing:border-box;font-size:1.1rem;}
    .area-sm-content .sm-cont-title .add-text .mo-br {display:none;}
    .area-sm-content .sm-cont-title + [class^="md-tabs"] li a {font-size:1.32rem;}
}
@media screen and (max-width:767px) {
    .area-sm-content .sm-cont-title .add-text {margin-top:.2rem;font-size:1.1rem;line-height:130%;}
    .area-sm-content .sm-cont-title .add-text + .more-txt {top:3.3rem;}
    .area-sm-content .fix-wrap .sm-cont-title {width:90%;}
    .area-sm-content .more-txt {font-size:0;}
    .area-sm-content .more-txt:after {width:2rem;height:2rem;background-size:39rem;background-position:-8rem -2rem;}
    .area-sm-content .more-txt + .make-inquiry {height:3rem;right:3rem;line-height:calc(3rem - 2px);}
}
@media screen and (max-width:480px) {
    .area-sm-content .sm-cont-title .add-text .mo-br {display:block;}
}

/*******************************************************************************
                                상단 슬라이더
********************************************************************************/
.area-sm-content .sm-fullbanner {position:relative;margin:0;/*visibility:hidden;opacity:0;*/}
.area-sm-content .sm-fullbanner .swiper-slide {overflow:hidden;max-height:23.5rem;z-index:1 !important;}

.area-sm-content .sm-fullbanner .bx-controls-auto .bx-controls-auto-item a {position:absolute;top:50%;left:2.1rem;transform:translateY(-50%);display:block;width:1rem;height:1rem;font-size:0;text-indent:-999px;overflow:hidden;z-index:2;}
.area-sm-content .sm-fullbanner .bx-controls-auto .bx-controls-auto-item a:before {content:'';position:absolute;width:1rem;height:1rem;top:50%;left:50%;transform:translate(-50%, -50%);background:url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png) no-repeat;background-size:19.5rem;}
.area-sm-content .sm-fullbanner .bx-controls-auto .bx-controls-auto-item .bx-start:before {background-position:-7rem -6rem;}
.area-sm-content .sm-fullbanner .bx-controls-auto .bx-controls-auto-item .bx-stop:before {background-position:-6rem -6rem;}
.area-sm-content .sm-fullbanner .bx-controls-auto .bx-start.active ,
.area-sm-content .sm-fullbanner .bx-controls-auto .bx-stop.active {display:none;}

@media screen and (min-width:768px) {
    .sm-fullbanner .swiper-slide {overflow:hidden;max-height:23.5rem;}
    .sm-fullbanner .swiper-slide a {display:block;width:100%;max-width:54rem;padding-bottom:41%;margin:0 auto;box-sizing:border-box;}
    .sm-fullbanner .swiper-slide a img {position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;max-width:none;height:100%;max-height:23.5rem;}

    .area-sm-content .sm-fullbanner .swiper-controls-wrap {position:relative;width:90%;max-width:54rem;margin:0 auto;}
    .area-sm-content .sm-fullbanner .swiper-controls {position:absolute;bottom:2rem;width:100%;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction {width:3.5rem;height:1.6rem;max-width:none;transform:translateY(-50%);}
    .area-sm-content .sm-fullbanner .swiper-controls-direction [class^=swiper-button] {position:relative;top:auto;right:auto;bottom:auto;left:auto;transform:none;display:block;width:1rem;float:left;margin:0;padding:0;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction [class^=swiper-button]:before {content:'';position:absolute;width:1rem;height:1rem;top:50%;left:50%;transform:translate(-50%, -50%);background:url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png) no-repeat;background-size:19.5rem;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-button-prev:before {background-position:-6rem -5rem;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-button-next:before {background-position:-7rem -5rem;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-auto {position:relative;float:left;top:auto;transform:none;width:1.5rem;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-auto [class^=swiper-button] {display:none;position:absolute;top:0;left:50%;transform:translateX(-50%);cursor:pointer;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-auto [class^=swiper-button].visible {display:block;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-button-start:before {background-position:-7rem -6rem;}
    .area-sm-content .sm-fullbanner .swiper-controls-direction .swiper-button-stop:before {background-position:-6rem -6rem;}

    .area-sm-content .sm-fullbanner .swiper-pagination {position:absolute;bottom:50%;left:0;transform:translateY(50%);width:100%;padding-left:4rem;box-sizing:border-box;margin:0;}
    .area-sm-content .sm-fullbanner .swiper-pagination span {position:relative;display:block;width:1.4rem;height:1.6rem;float:left;border:none;outline:none;background:transparent;border-radius:0;text-indent:-999px;overflow:hidden;vertical-align:middle;opacity:1;}
    .area-sm-content .sm-fullbanner .swiper-pagination span:before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:.55rem;height:.55rem;background:#fff;border-radius:50%;box-shadow:.075rem .075rem .1rem rgba(0,0,0,0.3);text-indent:-999px;overflow:hidden;vertical-align:middle;}
    .area-sm-content .sm-fullbanner .swiper-pagination .swiper-pagination-bullet:before {background:#fff;}
    .area-sm-content .sm-fullbanner .swiper-pagination .swiper-pagination-bullet-active:before {background:#1ec95b;}
}
@media screen and (max-width:767px) {
    .area-sm-content .sm-fullbanner .swiper-slide {max-height:none;}
    .area-sm-content .sm-fullbanner .bx-pager {position:absolute;bottom:3.5rem;/* .sm-sp-wrap의 마진과 동일 */right:5%;left:auto;width:3rem;margin:0;padding:.5rem 0;background:rgba(0,0,0,0.4);font-size:1rem;color:#fff;z-index:1;}
    .area-sm-content .sm-fullbanner .bx-controls-auto .bx-controls-auto-item {display:none;}
    .area-sm-content .sm-fullbanner .swiper-pagination {position:absolute;bottom:5rem;right:5%;left:auto;width:3rem;margin:0;padding:.5rem 0;background:rgba(0,0,0,0.4);font-size:1rem;color:#fff;z-index:1;}
}


/*******************************************************************************
                            edm 해외영어캠프가 최고인 이유
********************************************************************************/
.good-edm {
    background: #F4F5F9 url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/camp/main/good-edm-bg.jpg") no-repeat left center;
    background-size: contain;
    padding: 5rem 0 0;
}
.good-edm-con {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.good-edm-tileBox {
    font-size: 2rem;
    color: #191919;
    width: 40%;
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/camp/main/good-edm-img01-220902.png") no-repeat right bottom;
}
.good-edm-link {
    font-size: .8rem;
    display: inline-block;
    padding: .35rem 2.5rem;
    border: 1px solid #191919;
    -webkit-border-radius: .15rem;
    -moz-border-radius: .15rem;
    border-radius: .15rem;
}
.good-edm-textBox {
    width: 50%;
    padding-bottom: 5rem;
}
.good-edm-textBox > li {
    display: flex;
    padding-top: 1rem;
}
.good-edm-textBox > li:first-child {
    padding-top: 0;
}
.good-edm-textBox > li > span {
    display: inline-block;
    width: 3rem;
    margin-right: 1rem;
}
.good-edm-textBox > li > span > svg {
    width: 100%;
}
.good-edm-textBox > li > dl {
    width: calc(100% - 4rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid #C5C5C5;
}
.good-edm-textBox > li > dl > dt {
    margin-bottom: .5rem;
}
.good-edm-textBox > li > dl > dt > strong {
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}
.good-edm-textBox > li > dl > dt > strong::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 50%;
    background: #FFFFC5;
    z-index: -1;
}
.good-edm-textBox > li > dl > dd {
    font-size: .8rem;
    color: #767676;
}
.good-edm-textBox > li > dl > dd > span {
    font-size: .7rem;
}
.good-edm-textBox > li > dl > dd > span::before {
    content: '*';
}
@media screen and (max-width:767px) {
    .good-edm {
        background: #F4F5F9 url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/camp/main/good-edm-bg-mo.jpg") no-repeat center top;
        background-size: contain;
        padding-bottom: 7rem;
    }
    .good-edm-con {
        display: block;
    }
    .good-edm-tileBox {
        background: none;
        width: 100%;
        text-align: left;
        margin-bottom: 2rem;
    }
    .good-edm-link{
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        font-size: 1.1rem;
    }
    .good-edm-textBox{
        width: 100%;
    }
    .good-edm-textBox > li {
        display: block;
    }
    .good-edm-textBox > li > span {
        width: 3rem;
    }
    .good-edm-textBox > li > dl {
        width: 100%;
    }
    .good-edm-textBox > li > dl > dt > strong {
        font-size: 1.4rem;
    }
    .good-edm-textBox > li > dl > dd {
        font-size: 1.1rem;
    }
    .good-edm-textBox > li > dl > dd > span {
        font-size: 1rem;
    }
}
/*******************************************************************************
                            모두가 만족하는 edm 해외영어캠프
********************************************************************************/
.camp-video {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/camp/main/camp-video-bg.png") no-repeat center center;
    background-size: 80%;
}
.camp-video-con {
    display: flex;
    justify-content: space-between;
}
.camp-video-col {
    width: 48%;
}
.camp-video-col:nth-child(2){
    margin-top: 4rem;
}
.area-sm-content .camp-video-col-title .more-txt {
    right: 0 !important;
    font-weight: 400;
    font-size: .8rem;}
.camp-video-col-title {
    font-size: 1.1rem;
    color: #191919;
    text-align: left !important;
    width: 100% !important;
}
.camp-video-col-title > strong {
    color: #1EC95B;
}
.camp-video-col-video {
    width: 100%;
    height: 14.5rem;
    margin-bottom: .5rem;
}
.camp-video-col-video > iframe {
    width: 100%;
    height: 100%;
}
.camp-video-col-text > li > a {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
}
@media screen and (max-width:767px) {
    .camp-video-con {
        display: block;
    }
    .camp-video-col{
        width: 100%;
    }
    .camp-video-col-video {
        height: 50.4vw;
    }
    .camp-video-col:nth-child(2) {
        margin-top: 2rem;
    }

    .area-sm-content .camp-video-col-title .more-txt {
        font-size: 0;
    }
    .camp-video-col-title {
        font-size: 1.2rem;
    }
}
/*******************************************************************************
                                    캠프 다이어리
********************************************************************************/
.camp-main-diary-con {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 1.5rem;
}
.camp-main-diary-col {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat ;
    display: flex;
    justify-content: space-between;
}
.camp-main-diary-col:nth-child(n + 3) {
    display: none;
}
.camp-main-diary-col > span {
    width: 13.5rem;
    height: 100%;
    display: inline-block;
    -webkit-border-radius: .6rem;
    -moz-border-radius: .6rem;
    border-radius: .6rem;
}
.camp-main-diary-col > a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.camp-main-diary-col-textBox {
    width:calc(95% - 13.5rem);
    box-sizing: border-box;
}
.camp-main-diary-col-title {
    color: #191919;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    display: inline-block;
    overflow: hidden;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.camp-main-diary-col-text {
    color: #767676;
    font-size: .8rem;
    display: inline-block;
    overflow: hidden;
    line-height: 1.6;
    height: 14.4em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
}
@media screen and (max-width:767px) {
    .camp-main-diary-con {
        grid-template-columns: repeat(1,1fr);
    }
    .camp-main-diary-col-title {
        font-size: 1.5rem;
    }
    .camp-main-diary-col-text {
        font-size: 1.2rem;
    }
    .camp-main-diary-col > span {
        width: 10.8rem;
    }
    .camp-main-diary-col-textBox {
        width:calc(95% - 10.8rem);
    }
}
/*******************************************************************************
                                    캠프톡 리뷰
********************************************************************************/
.camp-talk {
    position: relative;
    padding: 5rem 0 ;
    margin: 0;
}
.camp-talk::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: 50%;
    width: 100%;
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/camp/main/camp-talk-bg.jpg") no-repeat center center;
    background-size: cover;
}
.camp-talk-con {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 1.5rem;
    padding-top: 3rem;
}
.camp-talk-con-col > a {
    display: inline-block;
    width: 100%;
    height: 400px;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    line-height: 1;
    position: relative;
}
.camp-talk-con-col:nth-child(2n + 1) {
    margin-top: -3rem;
}
.camp-talk-con-col:nth-child(n+5) {
    display: none;
}
.camp-talk-con-col > span {
    display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;
    position: absolute;
}
@media screen and (max-width:1200px) {
    .camp-talk {
        padding-bottom: 0;
    }
    .camp-talk .sm-cont-title {
        width: 90% !important;
        margin: 0 auto;
    }
    .camp-talk .flex-wrap {
        width: 100%;
    }
    .camp-talk-con {
        display: flex;
        overflow-y: scroll;
        padding: 2rem 0 2rem 5%;
    }
    .camp-talk-con-col > a {
        width: 247px;
    }
    .camp-talk-con-col:nth-child(2n + 1) {
        margin-top: 0;
    }
}
/*******************************************************************************
                                    캠프 문의
********************************************************************************/
.camp-main-inquiry-con {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1.5rem;
    margin-bottom: 3rem;
}
.camp-main-inquiry-col {
    box-shadow: 0 .15rem .3rem #00000029;
    border: 1px solid #C5C5C5;
    padding: 1.5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
}
.camp-main-inquiry-col-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.camp-main-inquiry-col-list li {
    margin-bottom: .5rem;
}
.camp-main-inquiry-col-list dl {
    display: flex;
}
.camp-main-inquiry-col-list dl:last-child {
    margin-bottom: 0;
}
.camp-main-inquiry-col-list dl dt {
    width: 10%;
    line-height: 1.2;
}
.camp-main-inquiry-col-list dl dt > svg {
    width: 1rem;
}
.camp-main-inquiry-col-list dl dt > span {
    display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;
}
.camp-main-inquiry-col-list dl dd {
    font-size: .8rem;
    width: 80%;
    line-height: 1.2;
}
.camp-main-inquiry-col-list dl dd > a {
    font-size: .8rem;
}
.camp-main-inquiry-link {
    text-align: center;
}
.camp-main-inquiry-link a {
    background: #1EC95B;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem;
    display: inline-block;
    padding: .75em 3.5rem;
    font-size: .8rem;
    color: #ffffff;

}
@media screen and (max-width:767px) {
    .camp-main-inquiry-con {
        grid-template-columns: repeat(1,1fr);
    }
    .camp-main-inquiry-col-title {
        font-size: 1.4rem;
    }
    .camp-main-inquiry-col-list dl dt > svg {
        width: 1.5rem;
    }
    .camp-main-inquiry-col-list dl dt {
        width: 3rem;
    }
    .camp-main-inquiry-col-list dl dd {
        width: calc(100% - 3rem);
        font-size: 1.1rem;
    }
    .camp-main-inquiry-col-list dl dd > a {
        font-size: 1.1rem;
    }
    .camp-main-inquiry-link a {
        width: 100%;
        padding: 1rem 0;
        font-size: 1.1rem;
    }
}
