
.max-width { padding: 3.07rem 16px 2.7rem !important; text-align: initial;}

/* 글씨 처리 */
.ellipsis_2{overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; display: -moz-box; display: -webkit-box;}
.ellipsis_3{overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; display: -moz-box; display: -webkit-box;}

main.bbs { width: 100%; padding: 0;}

/*bbs-header */
.bbs-banner { color: #fff; text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; font-size: 1.3rem; margin: 0; min-height: 10rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;     flex-direction: column;}
.bbs-banner .title { color: #fff; font-size: 1.92rem; width: 100%; font-weight: bold;}
.bbs-banner .sub { font-size: 1.38rem; margin-top: 0.7rem; width: 100%; line-height: 1.3;}

/*
    Base styles
*/
.input-group { position: relative; display: flex; flex-wrap: wrap; // For form validation feedback align-items: stretch; width: 100%;}
.input-group  > .form-control,
.input-group > .form-select,
.input-group > .form-floating{position: relative; flex: 1 1 auto; width: 1%; min-width: 0;}

.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within { z-index: 5;}

.input-group .btn{position: relative; z-index: 2;}
.input-group .btn:focus{z-index: 5;}



/*********************************
    리스트 페이지
*********************************/

/* search area */
.search-form { width: 100%; margin: 0 auto; }
.search-form .countBox{margin-top: 1.7rem; font-size: 1.07rem; margin-bottom: 1rem;}
.search-form .countBox span{color: #1EC95B; font-weight: bold;}
.search-form .input-group { border: 1px solid #C5C5C5; border-radius: 4px; position: relative; height: 3.38rem; overflow: hidden;}
.search-form .input-group button { border: none; background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/bbs_searchIcon.svg'); background-repeat: no-repeat; background-size: 1.53rem; background-position: center; padding: 0; width: 2.9rem; height: 100%; position: absolute; right: 0; top: 0; }
.search-form .input-group .form-control { border: none; font-size: 1.07rem; font-weight: 400; padding: 0 16px; height: 100%; width: calc(100% - 3rem); flex: initial; outline: 0; }
.search-form .input-group .form-control::placeholder { font-size: inherit; color: #999999; }


/* category-tabs */
.category-tabs {display: flex; font-size: 1.23rem; overflow-x: auto; white-space: nowrap; color: #000; margin-bottom: 3.2rem; margin-top: 1rem;}
.category-tabs .tab a{display: block; line-height: 2.76rem; color: inherit; background-color: #F3F3F3; border-radius: 46px; padding: 0 1.8rem; height: 2.76rem; }
.category-tabs .tab + .tab{margin-left: 0.61rem;}
.category-tabs .tab a.active,
.category-tabs .tab a:hover {color: #fff; background-color: #1EC95B; }



/* value-tabs */
.value-tabs{display: flex; font-size: 1.53rem; overflow-x: auto; white-space: nowrap; margin-bottom: 2.2rem;}
.value-tabs li + li{margin-left: 1.53rem;}
.value-tabs li{position: relative; padding-bottom: 0.5rem;}
.value-tabs li::after{content: ''; position: absolute; width: 100%; height: 3px; background-color: #1EC95B; left: 0; bottom: 0; opacity: 0;}
.value-tabs li a{color: inherit; display: block;}
.value-tabs li.active{color: #1EC95B; font-weight: bold;}
.value-tabs li.active::after{opacity: 1;}


/* 게시글 :: 일반 */
.listWrap > li{position: relative;}

/* 게시글 :: 썸네일 */
.listWrap.thumbnail > li a{display: block; width: 100%; height: 100%;}
.listWrap.thumbnail > li .imgWrap{width: 100%; border-radius: 12px; height: 55vw; max-height: 500px; overflow: hidden;}
.listWrap.thumbnail > li .imgWrap img{width: 100%; height: 100%; object-fit: cover;}
.listWrap.thumbnail > li .textWrap{font-size: 1.07rem;}
.listWrap.thumbnail > li .textWrap .country{color: #1EC95B; display: inline-block; border: 1px solid #1EC95B; border-radius: 4px; font-size: 1.07rem; padding: 0.2rem 0.7rem; margin: 0.92rem 0 0.2rem; font-weight: 500;}
.listWrap.thumbnail > li .textWrap .subject{font-size: 1.38rem; font-weight: bold; }
.listWrap.thumbnail > li .textWrap .infoWrap{font-size: 1.15rem; margin-top: 0.7rem; color: #666;}
.listWrap.thumbnail > li .textWrap .infoWrap > * + *{margin-left: 0.61rem;}
.listWrap.thumbnail > li .textWrap .name{margin-bottom: 0.9rem;}
.listWrap.thumbnail > li + li{margin-top: 2.53rem;}

/* 게시글 :: 기본형태 */
.listWrap.default{border-top: 2px solid #333; margin-top: 2.3rem;}
.listWrap.default > li{width: 100%; border-bottom: 1px solid #C5C5C5; padding: 1.23rem 0;}
.listWrap.default > li .subject{font-size: 1.15rem; color: #333;}
.listWrap.default > li .subject a{overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; display: -moz-box; display: -webkit-box;}
.listWrap.default > li .infoWrap{font-size: 1.07rem; margin-top: 0.92rem; color: #666;}
.listWrap.default > li .infoWrap >  * + *{margin-left: 0.61rem;}


/*pagination */
.page-links { margin-top: 4.6rem; margin-bottom: 0; display: flex; justify-content: center; }
ul.pagination { margin-left: 1rem; }







/*********************************
    뷰 페이지
*********************************/
.bbs.read { border-top: 2px solid #333; }

/* heading-image */
.bbs.read .heading-image, .bbs.read .audio, .bbs.read .video { margin-bottom: 2rem; }
.bbs.read .heading-image img { max-width: 100%; }

/* header */
.bbs.read header { font-family: var(--font-gothic); margin-bottom: 0.8rem; font-weight: bold; font-size: 1.38rem; line-height: 1.6;  padding: 1.84rem 0 1.7rem; border-bottom: 1px solid #c5c5c5;}
.bbs.read .titleWrap {display: flex; flex-wrap: wrap;}
.bbs.read .titleWrap .country{color: #1EC95B; border: 1px solid #1EC95B; font-size: 1.07rem; font-weight: 500; border-radius: 4px; padding: 0.2rem 0.8rem; margin-bottom: 0.7rem; display: inline-block;}
.bbs.read .titleWrap .subject{font-weight: bold; width: 100%; line-height: 1.5; text-align: left;}
.bbs.read .info{display: flex; align-items: center; font-size: 1.15rem; color: #666; width: 100%; font-weight: 400; margin-top: 0.8rem;}
.bbs.read .info *{font-size: inherit; font-weight: inherit;}
.bbs.read .info * + *{margin-left: 0.8rem;}


.bbs.read article, .bbs.read .ck-content { font-family: var(--font-gothic); padding: 2.3rem 0; font-size: 1.15rem; line-height: 1.5; word-break: keep-all; border-bottom: 1px solid #c5c5c5; margin-bottom: 2.3rem;}

/*main.read article:not(.no-indent) p, .ck-content p { text-indent: 1rem } */
.bbs.read article h2{font-size: 1.385rem;}
.ck-content h3 { margin: 2rem 0; font-weight: 900; }
.ck-content h4 { margin: 2rem 0; font-weight: 700; color: var(--orange); }
.bbs.read article img, .bbs.read article video { max-width: 100%; height: auto !important; text-align: center; }
.bbs.read article figure.image, .bbs.read figure.video, .bbs.read figure.audio, .bbs.read figure figcaption { font-family: var(--font-gothic); font-size: 0.8rem; font-weight: 300; }
.bbs.read article blockquote, .bbs.read .ck-content blockquote { color: var(--cyan); font-family: var(--font-handwriting); font-size: 1.5rem; line-height: 1.5; padding: 1rem; background-color: rgba(23, 162, 184, 0.1); border-radius: 0.5rem; }
.bbs.read article blockquote p:last-child, .bbs.read .ck-content blockquote p:last-child { margin-bottom: 0; }
.bbs.read article blockquote, .bbs.read article blockquote p, .bbs.read .ck-content blockquote, .bbs.read .ck-content blockquote p { text-indent: 0 !important; }
.bbs.read .ck-content blockquote { border-left: none !important; }
.bbs.read article hr, .bbs.read .ck-content hr { width: 30px; margin: 2rem auto; background-color: var(--red-dark); opacity: 1; }
.bbs.read article a { word-break: break-all; }
.bbs.read article figure.table { width: auto }
.bbs.read article figure.table table { word-break: break-all; }
.bbs.read article figure.table table th, .bbs.read article figure.table table td { vertical-align: middle; }
.bbs.read article figure.table table p { margin-bottom: 0 }

/* 게시글 뷰페이지 추가 스타일 */
.bbs.read .bbs_contents { padding: 0px 10px; border-left: 5px solid #1ec95b; margin-bottom: 30px; line-height: 1.8em; text-underline-offset: none; }
.bbs.read .bbs_more { padding: 0px 10px; border-left: 5px solid #afdc67; margin-bottom: 30px; line-height: 1.8em; text-underline-offset: none; }
.bbs.read li { width: 98%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bbs.read article a { text-decoration: underline; }
.bbs.read .bbs-table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 1rem; }
.bbs.read .bbs-table th,
.bbs.read .bbs-table td { padding: .7rem 1rem; }
.bbs.read .bbs-table th { background: #F8F8F8; font-size: .9rem; color: #1EC95B; border-top: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5;}
.bbs.read .bbs-table  th > span { color: #333; }
.bbs.read .bbs-table td { border-bottom: 1px solid #C5C5C5; border-right: 1px solid #C5C5C5; background: #EFF1F6; color: #333; font-size: .8rem; }
.bbs.read .bbs-table td:nth-last-child(-n + 2) { background: #fff; color: #666666; text-align: left; }
.bbs.read .bbs-table td:last-child { border-right: none; }

/* 매거진 슬라이드 */
.bbs.read article .webzin{width: 100% !important; height: 100% !important;}


/* files */
.bbs.read section.files { margin: 2rem; }
.bbs.read section.files .files-list { padding-top: 0; }

/* 이전글, 다음글 */
.bbs.read nav.prev-next{font-size: 1.15rem;}
.bbs.read nav.prev-next ul li{position: relative; padding: 1.3rem 0 1rem 6rem; border-bottom: 1px solid #c5c5c5;}
.bbs.read nav.prev-next ul li label{position: absolute; left: 0; background-repeat: no-repeat; background-size: 1.6rem; background-position: right center; padding-right: 2rem;}
.bbs.read nav.prev-next ul li.prev label{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/bbs_prevIcon.svg');}
.bbs.read nav.prev-next ul li.next label{background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/bbs_nextIcon.svg');}
.bbs.read nav.prev-next ul li a{white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; display: block;}

/* 목록 버튼 */
.bbs.read .listBtn{text-align: center; margin-top: 3.07rem; }
.bbs.read .listBtn a{border: 1px solid #333333; border-radius: 4px; font-size: 1.23rem; padding: 0.4rem 1.25rem; display: inline-block; background-color: #fff; height: auto; line-height: normal;}

.bbs.read .bbs-title { margin-bottom: 0.4rem; font-size: 1.5rem; font-weight: 400; }


.schools { display: flex; }
.schools li { display: flex; margin: 1rem }
.schools .logo { width: 100px; height: 100px; object-fit: cover; }
.bbs-header { margin-bottom: 3rem; }


/* 해당 학교 */
.bbs.read .school-con { position: relative; margin-bottom: 2rem; border-radius: 12px; background-color: #EFF1F6;}
.bbs.read .school-con-top { display: flex; align-items: start; margin-bottom: 1.23rem; }
.bbs.read .school-con .imgBox { display: inline-block; overflow: hidden; width: 6.76rem; height: 6.76rem; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: relative; font-size: 0; line-height: 0; background-color: #fff; background-repeat: no-repeat; background-size: 90%; background-position: center;}
.bbs.read .school-con .textBox { display: block; width: calc(100% - 6.76rem); align-items: center; padding-left: 0.61rem;}
.bbs.read .school-con .textBox > h3 {height: 100%; }
.bbs.read .school-con .textBox > h3 > span { font-size: 1rem; color: #666; font-weight: 400; }
.bbs.read .school-con .textBox > h3 > strong { font-size: 1.15rem; line-height: 1.3; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; -moz-box-orient: vertical;}
.bbs.read .school-con .school-con-bottom { display: inline-block; width: 100%; padding: 0.45rem 0; background: #EDEFF5; text-align: center; font-size: 1.07rem; background-color: #999999; color: #fff; border-radius: 4px;}
.bbs.read .school-con a { display: block; width: 100%; height: 100%; padding: 1.23rem;}

/* 이 학교의 다른 후기 */
.bbs.read h4{font-size: 1.38rem;}
.relatedWrap{margin-top: 1.84rem; width: calc(100% + 16px); overflow: hidden;}
.relatedWrap .swiper-slide .thumb{width: 100%; height: 36.1vw; border-radius: 12px;}
.relatedWrap .swiper-slide .textBox{padding-top: 1.23rem;}
.relatedWrap .swiper-slide .textBox h3{font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; display: -moz-box; display: -webkit-box; line-height: 1.45;}
.relatedWrap .swiper-slide .textBox .preview{overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; line-clamp: 2; -webkit-line-clamp: 2; display: -moz-box; display: -webkit-box;}




@media (min-width: 576px) {

    /*********************************
        리스트 페이지
    *********************************/

    /* 게시글 :: 썸네일 */
    .listWrap.thumbnail{display: flex; flex-wrap: wrap;}
    .listWrap.thumbnail > li{width: calc(50% - 0.5rem); margin-bottom: 3rem;}
    .listWrap.thumbnail > li:nth-child(2n-1){margin-right: 1rem;}
    .listWrap.thumbnail > li .imgWrap{height: 30vw;}
    .listWrap.thumbnail > li + li{margin-top: 0;}
    .listWrap.thumbnail > li:nth-last-of-type(1),.listWrap.thumbnail > li:nth-last-of-type(2){margin-bottom: 0;}
}


@media screen and (min-width: 768px) {
    .max-width { padding: 4rem 16px 6rem !important; }

    /*bbs-banner */
    .bbs-banner { min-height: 12.4rem;}
    .bbs-banner .title { font-size: 2.7rem; }
    .bbs-banner .sub { font-size: 1.3rem; margin-top: 1rem; }


    /*********************************
        리스트 페이지
    *********************************/

    /* search area */
    .search-form form{width: 50%; margin: 0 auto;}
    .search-form .input-group{height: 2.8rem;}
    .search-form .input-group button{background-size: 1.2rem;}
    .search-form .input-group .form-control{font-size: 0.8rem;}
    .search-form .countBox{font-size: 0.9rem; margin-top: 2.8rem; margin-bottom: 0.5rem;}

    /* category-tabs */
    .category-tabs{font-size: 1rem; border-radius: 46px; overflow: hidden; background-color: #F3F3F3; position: relative; margin-top: 0;}
    .category-tabs .tab{height: 3rem; line-height: 3rem; width: calc(100%/4); padding: 0; text-align: center; border-radius: 0; background-color: transparent; z-index: 1; }
    .category-tabs .tab a{background-color: transparent; transition: all 0.3s ease; height: 100%; padding: 0;}
    .category-tabs .tab + .tab{margin-left: 0;}

    .category-tabs.col6 .tab{width: calc(100%/6);}


    /* value-tabs */
    .value-tabs{justify-content: center; font-size: 1.3rem; margin-bottom: 2.8rem;}
    .value-tabs li + li{margin-left: 2.2rem;}
    .value-tabs li::after{height: 4px;}
    .value-tabs li{padding-bottom: 0.4rem;}


    .listWrap.default > li{display: flex; justify-content: space-between; align-items: center;}
    .listWrap.default > li .subject{width: calc(100% - 12rem); font-size: 0.9rem;}
    .listWrap.default > li .subject a{white-space: nowrap; display: block;}
    .listWrap.default > li .infoWrap{width: 12rem; margin-top: 0; font-size: 0.8rem; text-align: right;}
    .listWrap.default > li .infoWrap .read-count{min-width: 4rem; display: inline-block;}






    /*********************************
        뷰 페이지
    *********************************/
    .bbs.read header{padding: 1.7rem 1.2rem;}
    .bbs.read .titleWrap .subject{font-size: 1.1rem; }
    .bbs.read .titleWrap .info{font-size: 0.9rem;}

    .bbs.read article, .bbs.read .ck-content{padding: 3rem 1.2rem; font-size: 0.9rem;}
    .bbs.read article h2{font-size: 1.1rem;}
    .bbs.read article .img-col-2 { display: flex; align-items: stretch; }
    .bbs.read article .img-col-2 img { object-fit: cover; width: 100%; max-height: 480px; }

    /* 매거진 슬라이드 */
    .bbs.read article .webzin{width: 80vw !important; left: 50% !important; transform: translateX(-50%) !important; height: 90vh;}


    .bbs.read .titleWrap .country{font-size: 0.7rem; margin-right: 0.4rem; height: 1.6rem; line-height: 1.6rem; padding: 0 0.5rem;}


    /* 이전글, 다음글 */
    .bbs.read nav.prev-next{font-size: 0.9rem;}
    .bbs.read nav.prev-next ul li{padding-left: 7.4rem;}
    .bbs.read nav.prev-next ul li label{background-size: 1.4rem; padding-left: 1.2rem;}

    .bbs.read .listBtn{margin-top: 4rem;}
    .bbs.read .listBtn a{font-size: 0.9rem;}

    .bbs.read h4{font-size: 1.1rem;}

    .bbs.read .school-con{margin-bottom: 2.9rem;}
    .bbs.read .school-con a{padding: 1.2rem;}
    .bbs.read .school-con-top{margin-bottom: 0;}
    .bbs.read .school-con .imgBox{width: 5rem; height: 5rem;}
    .bbs.read .school-con .textBox{width: calc(100% - 5rem); padding-left: 1rem;}
    .bbs.read .school-con .textBox > h3 > span{font-size: 0.7rem;}
    .bbs.read .school-con .textBox > h3 > strong{font-size: 1.1rem;}
    .bbs.read .school-con .school-con-bottom{font-size: 0.8rem; padding: 0.3rem 0.8rem; position: absolute; right: 1.2rem; bottom: 1.2rem; width: auto; height: auto;}

    .relatedWrap{margin-top: 1.6rem; width: 100%;}
    .relatedWrap .swiper-slide .textBox{font-size: 0.8rem; padding-top: 1.2rem;}
    .relatedWrap .swiper-slide .thumb{height: 12rem;}
    .relatedWrap .swiper-slide .textBox h3{font-size: 0.9rem; }
    .relatedWrap .swiper-slide .textBox .preview{margin-top: 0.65rem;}

    .bbs.read .bbs-title { font-size: 1.5rem; }
}

@media (min-width: 992px) {
    .listWrap.thumbnail > li .textWrap .subject{font-size: 0.9rem;}
    .listWrap.thumbnail > li .textWrap .preview{font-size: 0.8rem;}
    .listWrap.thumbnail > li .textWrap .infoWrap{font-size: 0.8rem;}
}

@media screen and (min-width: 1312px) {
    .max-width { padding-left: 0 !important; padding-right: 0 !important;}
}
