@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; font-family: "NanumSquareNeo", 맑은 고딕, 微软雅黑, sans-serif; text-decoration: none;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #fcfcfc;}
body{ overflow: hidden; padding: 140px 0 0 0; background: #FFF; -webkit-text-size-adjust: none; word-break: keep-all; font-weight: 300; letter-spacing: 0; color: #000;}
body.view_play{ padding: 80px 0 0 0;}
body.view_play .guide{ display: none !important;}
@media(max-width: 767px){
    body{ padding: 160px 0 0 0;}
    body.view_play{ padding: 100px 0 0 0;}
}


.header{ position: fixed; z-index: 100; top: 0; right: 0; left: 0; padding: 0 50px; background: rgba(255 255 255/90%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 0 rgba(0 0 0/5%);}
.header .row{ display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0 auto; max-width: 1800px; height: 80px}
.header .logo{ display: block; position: relative; z-index: 10; height: 30px;}
.header .logo img{ display: block; width: auto; height: 100%;}
.header .search{ display: flex; align-items: center; position: relative; z-index: 10; width: 300px; height: 40px;}
.header .search input{ display: flex; align-items: center; position: relative; margin: 0; padding: 0 50px 0 15px; width: 100%; height: 100%;  border-radius: 0; border: 2px solid #2318df; background: none; font-size: 14px; font-weight: 200; color: #000; outline: none; -webkit-appearance: none;}
.header .search img{ display: block; position: absolute; z-index: 10; top: 10px; right: 15px; height: 16px; cursor: pointer;}
.header .menu{ position: absolute; top: 0; right: 0; bottom: 0; left: 210px;}
.header .menu ul{ display: flex; align-items: center;}
.header .menu ul li{ margin: 0 50px 0 0;}
.header .menu ul li a{ display: flex; align-items: center; position: relative; height: 80px;}
.header .menu ul li a p{ font-size: 16px; font-weight: 300; color: rgba(0 0 0/80%);}
.header .menu ul li a img{ display: block; height: 18px;}
.header .menu ul li:last-child{ display: none;}
.header .menu ul li.on a:after{ content: ""; display: block; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: #2318df;}
.header .menu ul li.on a p{ font-weight: 400; color: #2318df;}
@media(max-width: 1150px){
    .header .search{ display: none;}
    .header .menu{ left: 0;}
    .header .menu ul{ justify-content: flex-end;}
    .header .menu ul li{ margin: 0 0 0 40px;}
    .header .menu ul li:last-child{ display: block;}
}
@media(max-width: 767px){
    .header{ padding: 0 15px;}
    .header .row{ flex-direction: column; justify-content: flex-start; position: relative; height: 100px}
    .header .logo{ margin: 20px 0 0 0; height: 30px;}
    .header .logo img{ display: block; width: auto; height: 100%;}
    .header .menu{ top: 50px; right: 0; bottom: 0; left: 0;}
    .header .menu ul{ justify-content: space-between;}
    .header .menu ul li{ margin: 0;}
    .header .menu ul li a{ height: 50px;}
    .header .menu ul li a p{ font-size: 14px;}
    .header .menu ul li a img{ height: 16px;}
    .header .menu ul li.on a:after{ height: 3px;}
}


.guide{ position: fixed; z-index: 90; top: 80px; right: 0; left: 0; padding: 0 50px; background: rgba(245 245 245/90%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 0 rgba(0 0 0/10%);}
.guide .row{ margin: 0 auto; max-width: 1800px;}
.guide .row .head{ display: flex; justify-content: space-between; align-items: center;}
.guide .row .head .fl{ display: flex; align-items: center;}
.guide .row .head .fl p{ font-size: 14px; color: #666;}
.guide .row .head .fl p font{ font-weight: 400; color: #2318df;}
.guide .row .head .fl span{ display: block; margin: 0 20px; width: 1px; height: 14px; background: #DDD;}
.guide .row .head .btn{ display: flex; align-items: center; height: 60px; cursor: pointer;}
.guide .row .head .btn img{ display: block; height: 16px; transition: all .3s;}
.guide .row .body{ display: none; border-top: 1px solid rgba(0 0 0/10%);}
.guide .row .body ul{ padding: 10px 0;}
.guide .row .body ul li{ padding: 10px 0 10px 50px;}
.guide .row .body ul li .tit{ float: left; margin: 0 0 0 -50px; line-height: 30px; font-size: 14px; font-weight: 200; color: #666;}
.guide .row .body ul li .txt{ display: flex; flex-wrap: wrap;}
.guide .row .body ul li .txt p{ margin: 0 30px 0 0; line-height: 30px; font-size: 14px; color: #000; cursor: pointer;}
.guide .row .body ul li .txt p.on{ font-weight: 400; color: #2318df;}
.guide.on .row .head .btn img{ transform: rotate(180deg);}
@media(max-width: 767px){
    .guide{ top: 100px; padding: 0 15px;}
    .guide .row .head .fl p{ font-size: 12px;}
    .guide .row .head .fl span{ margin: 0 15px;}
    .guide .row .head .btn{ height: 50px;}
    .guide .row .head .btn img{ height: 14px;}
    .guide .row .body ul li{ padding: 10px 0 10px 40px;}
    .guide .row .body ul li .tit{ margin: 0 0 0 -40px; font-size: 12px;}
    .guide .row .body ul li .txt p{ font-size: 12px;}
}


.footer{ margin: 100px 0 0 0; padding: 0 50px; border-top: 1px solid rgba(0 0 0/5%); background: #fcfcfc;}
.footer .row{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0;}
.footer .sns{ cursor: pointer;}
.footer .sns img{ display: block; margin: 0 auto; height: 30px; transition: all .3s;}
.footer .sns p{ margin: 10px 0 0 0; font-size: 12px; color: #000; transition: all .4s;}
.footer .sns:hover img{ transform: scale(1.2);}
.footer .sns:hover p{ transform: scale(1.2);}
.footer .copy{ margin: 30px 0 0 0; font-size: 12px; font-weight: 200; color: #999; letter-spacing: 1px; transform: scale(0.8);}
@media(max-width: 767px){
    .footer{ margin: 50px 0 0 0; padding: 0;}
    .footer .row{ padding: 30px 0;}
    .footer .sns img{ height: 20px;}
    .footer .copy{ margin: 20px 0 0 0;}
}


.scroll_up{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 100; right: 0; bottom: 0; width: 40px; height: 40px; background: #2318df; cursor: pointer; opacity: 0; transform: translate(0,30px); transition: all .3s;}
.scroll_up img{ display: block; height: 20px;}
.scroll_up.on{ opacity: 1; transform: translate(0,0);}
@media(max-width: 767px){
    .scroll_up{ width: 40px; height: 40px;}
    .scroll_up img{ display: block; height: 20px;}
}


.ad_popup{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; z-index: 300; top: 0; right: 0; left: 0; bottom: 0; padding: 0 40px; background: rgba(255 255 255/80%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.ad_popup .logo{ display: block; margin: 0 0 50px 0; height: 40px;}
.ad_popup .row{}
.ad_popup .row a{ display: block; margin: 2px 0;}
.ad_popup .row a img{ display: block;}
.ad_popup .close{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px; width: 380px; height: 40px; background: #2318df; cursor: pointer;}
.ad_popup .close p{ font-size: 12px; color: #FFF;}
.ad_popup .close img{ display: block; height: 12px;}
@media(max-width: 767px){
    .ad_popup .logo{ margin: 0 0 30px 0; height: 30px;}
    .ad_popup .row a img{ width: 100%;}
    .ad_popup .close{ width: 100%;}
}


.ad_popup_left{ position: fixed; z-index: 200; left: 0; bottom: 0;}
.ad_popup_left .row{ display: block;}
.ad_popup_left .row img{ display: block;}
.ad_popup_left .close{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 40px; background: #2318df; cursor: pointer;}
.ad_popup_left .close p{ font-size: 12px; color: #FFF;}
.ad_popup_left .close img{ display: block; height: 12px;}


.ad_popup_right{ position: fixed; z-index: 200; right: 0; bottom: 0;}
.ad_popup_right .row{ display: block;}
.ad_popup_right .row img{ display: block;}
.ad_popup_right .close{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 40px; background: #2318df; cursor: pointer;}
.ad_popup_right .close p{ font-size: 12px; color: #FFF;}
.ad_popup_right .close img{ display: block; height: 12px;}


.ad_max{ margin: 50px 0 0 0; padding: 0 50px;}
.ad_max .row{ margin: 0 auto; max-width: 1800px;}
.ad_max ul{ display: flex; flex-wrap: wrap; margin: -2px -1px 0 -1px;}
.ad_max ul li{ margin: 2px 0 0 0; width: 20%;}
.ad_max ul li a{ display: block; margin: 0 1px;}
.ad_max ul li a img{ display: block; width: 100%;}
@media(max-width: 1500px){
    .ad_max ul li{ width: 25%;}
}
@media(max-width: 1025px){
    .ad_max ul li{ width: 33.333%;}
}
@media(max-width: 767px){
    .ad_max{ margin: 30px 0 0 0; padding: 0;}
    .ad_max ul li{ width: 50%;}
}


.list{ margin: 50px 0 0 0; padding: 0 50px;}
.list .row{ margin: 0 auto; max-width: 1800px;}
.list ul{ display: flex; flex-wrap: wrap; margin: -30px -1px 0 -1px;}
.list ul li{ margin: 30px 0 0 0; width: 10%;}
.list ul li a{ display: block; position: relative; margin: 0 1px;}
.list ul li a .new{ position: absolute; z-index: 10; top: 0; left: 0; padding: 5px 10px; background: #2318df;}
.list ul li a .new p{ transform: scale(0.8); font-size: 12px; color: #FFF; letter-spacing: 1px;}
.list ul li a .img{ position: relative;}
.list ul li a .img .bg{ display: flex; justify-content: center; align-items: flex-end; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/0), rgba(0 0 0/70%));}
.list ul li a .img .bg p{ padding: 0 10px 10px 10px; width: 100%; text-align: center; font-size: 12px; font-weight: 200; color: rgba(255 255 255/80%); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.list ul li a .img img{ display: block; width: 100%;}
.list ul li a .tit{ margin: 10px 0 0 0; padding: 0 10px 10px 10px; text-align: center; font-size: 14px; color: #000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
@media(max-width: 1700px){
    .list ul li{ width: 12.5%;}
}
@media(max-width: 1400px){
    .list ul li{ width: 16.666%;}
}
@media(max-width: 1300px){
    .list ul li{ width: 20%;}
}
@media(max-width: 767px){
    .list{ margin: 30px 0 0 0; padding: 0;}
    .list ul{ margin: -20px -1px 0 -1px;}
    .list ul li{ margin: 20px 0 0 0; width: 33.333%;}
    .list ul li a .img .bg p{ font-size: 10px;}
    .list ul li a .tit{ font-size: 12px;}
}


.page{ margin: 50px 0 0 0; padding: 0 50px;}
.page .row{ display: flex; justify-content: center; align-items: center; margin: 0 auto; max-width: 1800px;}
.page .left{ display: flex; justify-content: center; align-items:center; margin: 0 5px; width: 35px; height: 35px; cursor: pointer;}
.page .left img{ display: block; height: 15px; transform: rotate(90deg);}
.page .right{ display: flex; justify-content: center; align-items:center; margin: 0 5px; width: 35px; height: 35px; cursor: pointer;}
.page .right img{ display: block; height: 15px; transform: rotate(-90deg);}
.page .center{ display: flex; align-items: center;}
.page .center p{ display: flex; justify-content: center; align-items: center; margin: 0 1px; width: 35px; height: 35px; border: 1px solid rgba(0 0 0/10%); background: #FFF; font-size: 12px; font-weight: 200; color: #000; cursor: pointer;}
.page .center p.on{ position: relative; z-index: 1; border-color: #2318df; background: #2318df; color: #FFF;}
@media(max-width:767px){
    .page{ margin: 20px 0 0 0; padding: 0;}
    .page .left{ width: 30px; height: 30px;}
    .page .left img{ height: 10px;}
    .page .right{ width: 30px; height: 30px;}
    .page .right img{ height: 10px;}
    .page .center p{ width: 30px; height: 30px; font-size: 10px;}
}


.search_view{ display: none; margin: 50px 0 0 0; padding: 0 50px;}
.search_view .row{ position: relative; z-index: 10; margin: 0 auto; max-width: 600px; height: 60px;}
.search_view .row input{ display: flex; align-items: center; position: relative; margin: 0; padding: 0 50px 0 20px; width: 100%; height: 100%;  border-radius: 0; border: 3px solid #2318df; background: none; font-size: 16px; font-weight: 300; color: #000; outline: none; -webkit-appearance: none;}
.search_view .row img{ display: block; position: absolute; z-index: 10; top: 15px; right: 20px; height: 24px; cursor: pointer;}
@media(max-width:767px){
    .search_view{ display: block; margin: 30px 0 0 0; padding: 0 15px;}
    .search_view .row{ height: 50px;}
    .search_view .row input{ padding: 0 45px 0 15px; border: 2px solid #2318df; font-size: 14px;}
    .search_view .row img{ top: 14px; right: 15px; height: 18px;}
}


.view{ margin: 50px 0 0 0; padding: 0 50px;}
.view .row{ position: relative; margin: 0 auto; padding: 0 600px 0 0; max-width: 1800px; width: 100%;}
.view .row .fl{}
.view .row .fl .play{ position: relative;}
.view .row .fl .play .ad{ position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0;}
.view .row .fl .play .ad span{ display: flex; align-items: center; position: absolute; right: 0; bottom: 0; padding: 0 20px; height: 40px; background: #2318df; font-size: 14px; font-weight: 400; color: #FFF;}
.view .row .fl .play .ad img{ display: block; width: 100%;}
.view .row .fl .play .box{ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0;}
.view .row .fl .play > img{ display: block; width: 100%; height: auto;}
.view .row .fl .info{ padding: 50px 50px 0 50px; border: 1px solid #DDD; border-top: 0;}
.view .row .fl .info .ft{ display: flex; align-items: center;}
.view .row .fl .info .img{ margin: 0 20px 0 0;}
.view .row .fl .info .img img{ display: block; width: auto; height: 180px;}
.view .row .fl .info .text{}
.view .row .fl .info .text .t1{ font-size: 22px; font-weight: 400; color: #000;}
.view .row .fl .info .text .t2{ margin: 20px 0 0 0;}
.view .row .fl .info .text .t2 p{ display: flex; align-items: center; padding: 10px 0; font-size: 14px; font-weight: 200; color: #666;}
.view .row .fl .info .text .t2 p img{ display: block; margin: 0 10px 0 0; height: 16px;}
.view .row .fl .info .text .t2 p span{ margin: 0 0 0 10px; font-weight: 300; color: #000;}
.view .row .fl .info .t3{ margin: 50px -50px 0 -50px; padding: 50px; border-top: 1px solid #DDD; background: #fafafa; line-height: 1.5; font-size: 14px; font-weight: 200; color: #333;}
.view .row .fr{ overflow: auto; position: absolute; top: 0; right: 0; bottom: 0; padding: 50px; width: 600px; border: 1px solid #DDD; border-left: 0; background: #f4f4fb;}
.view .row .fr .play_list{}
.view .row .fr .play_list ul{}
.view .row .fr .play_list ul li{ margin: 10px 0 0 0;}
.view .row .fr .play_list ul li:first-child{ margin: 0;}
.view .row .fr .play_list ul li a{ display: flex; align-items: center; position: relative; padding: 0 60px 0 20px; height: 50px; border: 1px solid rgba(0 0 0/10%); background: #FFF; cursor: pointer;}
.view .row .fr .play_list ul li a p{ font-size: 12px; font-weight: 200; color: #666;}
.view .row .fr .play_list ul li.on{}
.view .row .fr .play_list ul li.on a{ border-color: #2318df; background: #2318df;}
.view .row .fr .play_list ul li.on a:before{ content: ""; display: block; position: absolute; top: 0; right: 20px; bottom: 0; width: 15px; background: url(/images/icon_play_bai.png) no-repeat center right/10px auto;}
.view .row .fr .play_list ul li.on a p{ font-weight: 300; color: #FFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.view .row .fr::-moz-scrollbar{ width: 5px; background: rgba(0 0 0/5%);}
.view .row .fr::-moz-scrollbar-thumb{ background: #2318df; border-radius: 0;}
.view .row .fr::-ms-scrollbar{ width: 5px; background: rgba(0 0 0/5%);}
.view .row .fr::-ms-scrollbar-thumb{ background: #2318df; border-radius: 0;}
.view .row .fr::-webkit-scrollbar{ width: 5px; background: rgba(0 0 0/5%);}
.view .row .fr::-webkit-scrollbar-thumb{ background: #2318df; border-radius: 0;}
@media(max-width: 1800px){
    .view .row{ padding: 0 400px 0 0;}
    .view .row .fr{ width: 400px;}
}
@media(max-width: 1300px){
    .view .row{ padding: 0 350px 0 0;}
    .view .row .fr{ width: 350px;}
}
@media(max-width: 1025px){
    .view .row{ padding: 0;}
    .view .row .fr{ position: initial; width: auto; height: 320px; border: 1px solid #DDD; border-top: 0;}
}
@media(max-width: 767px){
    .view{ margin: 30px 0 0 0; padding: 0;}
    .view .row .fl .info{ padding: 30px 30px 0 30px; border: 0;}
    .view .row .fl .info .img{ margin: 0 20px 0 0;}
    .view .row .fl .info .img img{ height: 120px;}
    .view .row .fl .info .text .t1{ font-size: 16px;}
    .view .row .fl .info .text .t2{ margin: 15px 0 0 0;}
    .view .row .fl .info .text .t2 p{ padding: 5px 0; font-size: 12px;}
    .view .row .fl .info .text .t2 p img{ height: 12px;}
    .view .row .fl .info .text .t2 p span{}
    .view .row .fl .info .t3{ margin: 30px -30px 0 -30px; padding: 30px; font-size: 12px;}
    .view .row .fr{ padding: 30px; height: 280px; border: 0; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD;}
    .view .row .fr .play_list ul li{ margin: 5px 0 0 0;}
    .view .row .fr .play_list ul li a{ padding: 0 50px 0 15px; height: 40px;}
    .view .row .fr .play_list ul li a p{ font-size: 10px;}
    .view .row .fr .play_list ul li.on a:before{ right: 15px; background: url(/images/icon_play_bai.png) no-repeat center right/8px auto;}
    .view .row .fr .play_list ul li.on a p{ font-weight: 300; color: #FFF; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
}