@charset "utf-8";

@font-face { font-family: 'DWImpactamin'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/DWImpactamin.woff') format('woff'); font-weight: normal; font-style: normal; }

*{box-sizing: border-box !important; margin-bottom: 0 !important;}
.wrap_con {overflow: visible;}

/* 랜딩페이지 */
.landing{padding-top: 14rem; height:100vh;}
.landing #visual{text-align: center;}
.landing #section1{width:100%;position: absolute;left: 0;bottom: 0;}

/*레이어팝업*/
html.layerpop-active { overflow: hidden;}
.layerpop-area { display: none; position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0,0,0, .7); transition: all 0.3s ease; height: 0; animation-duration: 1s; transition: all .5s ease; visibility: hidden; opacity: 0; z-index: -1; }
html.layerpop-active .layerpop-area {display: block; height: 100%; visibility: inherit; overflow: auto; opacity: 1; z-index: 100; }
.layerpop-area .layerpop_wrap{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 600px; max-height: 470px;}
.layerpop-area .layerpop {position:relative; background-color: #fff; overflow: hidden}
.layerpop-area .layerpop a{display: block; width:  100%; height: 100%; }
.layerpop-area .layerpop a img{transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.layerpop-area .cont { overflow: hidden; }
.layerpop-area .cont img { max-width: 100%; }
.layerpop img {max-width: 100%;}
.layerpop_wrap .controls{ overflow: hidden; padding:20px 0; font-size: 1.6rem; color:#fff;}
.layerpop_wrap .controls .play{display: none;}
.layerpop_wrap .controls a{color: #fff;}
.layerpop_wrap .controls i{font-size: 1.6rem; margin: 0 3px;}
.layerpop_wrap .controls .arrows{ float: left;}
.layerpop_wrap .controls .close { float: right;}
.layerpop_wrap .controls .close span + span{margin-left: 1rem}
.layerpop_wrap .controls .close::after {content:''; display:block; clear:both;}
.layerpop_wrap .controls .slick-counter{font-size:1.6rem; color:#000; text-align:center; font-weight:700; color:#fff; display: inline-block; font-family: 'Montserrat'}
.layerpop_wrap .controls .slick-counter span{font-size: 1.6rem; padding: 0 7.5px; position: relative;}
.layerpop_wrap .controls .slick-counter span + span{margin-left: 5px;}
.layerpop_wrap .controls .slick-counter span + span:before{content: ''; position: absolute; left: -7px; top:50%; transform: translateY(-50%) rotate(-55deg); width:  11px; height: 1px; background: #fff; display: block; }
.layerpop_wrap .controls .stop{font-size: 1.1rem;}

#body{margin-bottom: 0;}
#body::before{display: none;}

.row:after{content: ''; clear: both; display: block}

.form_control_ra{display: block; position: relative; }
.form_control_ra label{position: relative;padding-left: 20px; box-sizing: border-box;cursor: pointer}
.form_control_ra label:before{content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%;  border:1px solid #CFD1D3; background: #fff; box-sizing: border-box}
.form_control_ra label:after{content: ''; position: absolute; left: 0; top:6px; width: 14px; height: 14px; border:4px solid #0AD783; box-sizing: border-box; border-radius: 50%; display: none}
.form_control_ra input[type="radio"]:checked ~ label:after{display: block;}
.form_control_ra input{cursor:pointer; overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0); }
.form_control_ck input{cursor:pointer; overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0 none; clip: rect(0, 0, 0, 0);  }
.form_control_ck{display: inline-block; margin-right: 20px; position: relative}
.form_control_ck label{position: relative; padding-left: 20px; cursor: pointer}
.form_control_ck label:before{content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;  border:1px solid #CFD1D3; background: #fff; box-sizing: border-box}
.form_control_ck label:after{content: '\e929'; position: absolute; left: -1px; top: 4px; width: 15px; height: 14px; box-sizing: border-box; color:#fff; display: none; font-family: 'xeicon'; line-height: 14px;}
.form_control_ck input[type="checkbox"]:checked ~ label:before{background: #0AD783; border-color:#0AD783}
.form_control_ck input[type="checkbox"]:checked ~ label:after{display: block;}

.bul li{padding-left: 1rem; position: relative}
.bul li + li{margin-top: 1rem; }
.bul.square li:before{content: ''; position: absolute; left: 0 ;top: 10px; width: 3px; height: 3px; background: #333}

.main{background: #fff; background-image: url(../img/main/main_bg.png); background-position: center; background-size: cover; width: 100%; height: 100%;}

#search {display: flex; justify-content: center; align-items: center; height: 250px;}
#search .search-container {width: 400px; display: flex; align-items: center; background-color: #fff;  border-radius: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 3px solid #60C3FF; position: absolute; margin-top: -30px;}
#search .search-container form {width: 100%; padding: 0 0 0 15px;}
#search .search-input {flex: 1; height: 100%; width: calc(100% - 100px); border: none !important; padding: 0 15px; font-size: 16px; background: transparent; color: #333;}
#search .search-button {width: 100px; height: 100%; float: right; right: 0; background-color: #60C3FF; border: none; color: #fff; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease;}
#search .search-button:hover {background-color: #2684bd;}
#search .search-tags {margin-top: 15px; font-size: 16px; color: #666; margin-top: 80px;}
#search .search-tags span {display: inline-block; margin: 0 10px; cursor: pointer; color: #888; transition: color 0.3s ease;}
#search .search-tags span:hover {color: #444;}

.cont {width: calc(100% - 4rem);max-width: var(--container);padding: 5.8rem 0;margin: 0 auto;position: relative;}
.section3{padding-bottom:10rem !important}
.section3 .subject_sub{margin-top:5rem}
.section3 .subject_sub:first-child{margin-top:5rem} 
.recommend_list .title,.section3 .title {  font-size: 4rem;  color: #151515;  margin: 0 !important; letter-spacing: -1.8px;text-align:center;}
.recommend_list .title {display: flex;align-items: center;justify-content: center;position: relative;margin: 0 0 3rem 0 !important;}
.recommend_list .title::before {content: "";display: inline-block;width: 41px;height: 32px;background: url('../img/sub/ico_star.png') no-repeat center;background-size: contain;margin-right: 10px}  
.recommend_list .sub_title,.section3 .sub_title {position:relative;font-size: 2.4rem;  color: #003E92;  margin: 0 0 2rem 1rem!important; letter-spacing: -1.8px;}
.section3 .sub_title .btn_back{display:none;background:#333;color:#fff;border:none;padding:0 3rem;font-size:1.5rem;cursor:pointer;transition: background 0.3s ease-in-out;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);border-radius:20px}
.section3 .sub_title .btn_back:hover{background-color:#003E92}
.section3 .sub_title span{display:inline-block;position: relative;height:5rem;line-height:4.6rem;font-weight:700;font-size:2.2rem;min-width:19.5rem;cursor: pointer;/*background: #003E92;*/padding:0  5rem 0 3rem;border-radius: 25px;color: #555;text-align: left;border:2px solid #ccc}
.section3 .sub_title span:before {content: '\e942';position: absolute;right: 2rem;font-family: 'xeicon';color:#555;transition: transform 0.3s ease}
.section3 .sub_title span.active:before {content: '\e942';transform: rotate(180deg)}
.corner-star {position: absolute;top: 0;right: 0;width: 40px;height: 40px;background: white;border-top-left-radius: 0;clip-path: polygon(100% 0, 0 0, 100% 100%);display: flex;justify-content: flex-end;align-items: flex-start;padding: 2px 5px 5px;font-size: 16px;color: #FFD700;font-weight: bold;z-index:99}

/* 콘텐츠 목록 */
.movie_wrap {  position: relative;  margin:0 0 8rem !important}
.movie_wrap:last-child{margin-bottom:0 !important}
.movie_wrap .item_list {  margin: 0 0rem;}
.movie_wrap .item_list .item {  border-radius: 0 0 5rem 0;  padding: 0;  margin: 0 1rem }
.movie_wrap .item_list .item strong {  font-size: 2.0rem;  font-weight:400;  color: #151515;  letter-spacing: -1.2px;  display: block;  margin-bottom: 2rem;   white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    margin-top:1rem}
.movie_wrap .item_list .item .img {  display: block;  position: relative;      border-radius: 2rem;  border: 1px solid #ddd;  overflow:hidden;height:160px   }
.movie_wrap .item_list .item .img img{vertical-align: top;transition:.3s;width: 100%;height: 100%;object-fit: cover;}
.movie_wrap .item_list .item:hover .img img{transform:scale(1.1);}
.movie_wrap .item_list .item .refer {  font-size: 1.6rem;  color: #2A2A2A;  display: block;  margin-bottom: 4rem;  letter-spacing: -1px;}
.movie_wrap .item_list .item .video_meta{display: flex; justify-content: space-between; font-size: 14px; color: #777; margin-top: 5px}
.movie_wrap .arrows > button,.movie_wrap .arrows > a{ width: 5rem; height: 5rem;/* border:1px solid #ccc;*/ position: absolute; z-index:1; border-radius: 50%; color:#ccc; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.movie_wrap .arrows > button i,.movie_wrap .arrows > a i{position: absolute; left:  50%; top: 50%; transform: translate(-50%, -50%); font-size:3rem;color:#333}
.movie_wrap .arrows .prev{left:-5rem; top: 35%; transform: translateY(-50%)}
.movie_wrap .arrows .next{right:-5rem; top: 35%; transform: translateY(-50%)}
.movie_wrap .arrows > button:hover, .movie_wrap .arrows > button:focus, #visual .arrows > button:active,
.movie_wrap .arrows > a:hover, .section2 .arrows > a:focus, .section2 .arrows > a:active{border:1px solid #151515;background: #fff;color: #151515}
.slick-play,.slick-pause,.play,.pause {    display: none !important;}
.recommend_list .cont{padding-top:0 !important}
.recommend_list .recommend_slider{margin-bottom:0 !important}
/* 콘텐츠 세로목록 */
.movie_list{display:none;margin-left:0;margin-right:0}
.movie_list .item_list ul li{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;padding: 2rem 1rem}
.movie_list .item_list ul li:first-child{padding-top:0}
.movie_list .item_list ul li:last-child{border-bottom:0}
.movie_list .item_list ul li .item{padding:0}
.movie_list .thumb{position:relative;display: inline-block;overflow: hidden;border-radius: 2rem;border: 1px solid #ddd;margin-right:2rem;flex-shrink: 0;}
.movie_list .thumb img{width:258px;height:158px;vertical-align: top;transition:.3s;object-fit: cover;}
.movie_list a{display:inline-block}
.movie_list a:hover img{transform:scale(1.1);}
.movie_list a:hover .refer{text-decoration:underline;}
.movie_list .info{flex-grow: 1;display: flex;flex-direction: column;justify-content: center;}
.movie_list .txt strong{display:inline-block;height:4rem;line-height:4rem;font-size: 2.4rem;white-space: normal;overflow: hidden;text-overflow: ellipsis}
.movie_list .desc {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;height: auto;line-height: 1.5;font-size: 2rem;margin-top: 1rem}
.movie_list .tag{display: block;font-size:1.8rem;color:#374299}
.movie_list .date {font-size:1.6rem; color: #777; margin-top:5px;}

@media(max-width: 1023px){

}

@media(max-width: 767px){
#search .search-container {width: 350px;}
.movie_wrap .arrows .next {right: 1rem;}
.movie_wrap .arrows .prev {left: 1rem;}
}

@media (max-width: 480px) {

}