@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); 

#container > h1{border-bottom: none}
.m_evt {width: 100%;}
.m_wp img{width: 100%;}

.visual{position: relative;}
.view_basis{position: absolute; top: 36vw; right:20px; width: 11.5vw;}
.view_tesat{position: absolute; right: 11.5vw; bottom: 40vw; width: 11.5vw;}

.m_evt *{font-family: 'Pretendard', 'Malgun Gothic', sans-serif;}
* [class^="bg_"]{padding: 7vw 0; position: relative;}
.tit{text-align: center; font-size: 6vw; font-weight: 900; color: #000; padding-bottom: 3vw;}
.bg_01 .tit{color: #fff;}
.tit span{color: #461bc7;}

.scroll-down{animation: scroll-down .5s both;}
.typo{animation: scale-up .4s 1.5s cubic-bezier(.39,.575,.565,1.000) both;} 

.pack{width: 92%; margin: 0 auto; background: #fff; border-radius: 1.5vw 1.5vw 2vw 2vw;}
.pack ul{overflow: hidden;}

.pack .data{background: #fff; padding: 9vw 0 3vw; display: flex; align-items: center; width: fit-content; margin: 0 auto;}
.pack .data li{position: relative;font-size: 4vw;font-weight: 900;display: inline-flex;text-align: center;padding: 0.5vw 0.8vw;}
.pack .data .plus{padding: 0vw 1vw 2vw;  color: #fff;  background: #461bc7;  border-radius: 50%;  font-size: 3vw;  width: 2vw;  height: 2vw;  text-align: center;}
.pack .data div{position: absolute;top: -5.5vw;left: 1vw;font-size: 14px;width: 25vw;font-size: 2vw;}
.pack .data .add{background: #ececec; border-radius: 30px; padding: 0.2vw; width: 12vw; left: 1vw; top: -5vw}

.arrow_box{position: relative;  border: 1px solid #000;  padding: 0.6vw 1vw;  border-radius: 0.5vw;  font-weight: 600;  display: block;  line-height: 2.2vw;}
.arrow_box:after{position: absolute;bottom: -0.8vw;left: 13vw;content: '';width: 1vw;height: 1vw;border-left: 1px solid #000;border-bottom: 1px solid #000;background: #fff;transform: rotate(-45deg);} /*{top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; border-top-color: #ececec; border-width: 10px; margin-left: -10px;}*/

.pack .buy{border-radius: 0 0 1.5vw 1.5vw;}
.pack .buy li{float: left; position: relative; background: #222; width: 50%; text-align: center; font-size: 6vw; color: #fff; font-weight: 900; display: grid; align-items: center; height: 12vw;}
.pack .buy li.btn{background: #000;}
.pack .buy li.btn a{border-bottom: 1px solid #fff; color: #00ffc6; font-size: 5vw; width: 26vw; margin: 0 auto;}
.pack .buy li.btn a::after{position: absolute;  bottom: 2.3vw;  right: 10.8vw;  content: '';  /* width: 12px; */height: 3vw;  /* border-top: 3px solid #fff; */border-right: 1px solid #fff;  transform: rotate(-45deg);}

.btn{overflow: hidden; text-align: center;}
.btn li{display: inline-block;}
.btn li:last-child{margin-left: 10px;}

.vod_box{overflow: hidden;  background: #191818;  border-radius: 1.5vw;  width: 92%;  margin: 0 auto;  padding: 10px;}
.vod_box li{color: #fff;  letter-spacing: 0.5px;  line-height: 22px;}
.vod_box li img{border-radius: 1.5vw 1.5vw 0 0;}
.vod_box li:last-child{padding: 1vw; display: flex;}
.vod_box li div{font-size: 3vw; padding: 0 5vw;  margin: 3vw 0; line-height: 4.5vw;  color: #fff;  display: inline-grid; align-items: center;}
.vod_box li div:first-child{border-right: 1px solid rgba(255,255,255,0.3);    font-size: 4vw;  font-weight: 900;}

.coin{position: absolute; top: 60px; right: 180px; animation: scale-up-left .4s cubic-bezier(.39,.575,.565,1.000) both;}

.notice{width: 92%;  margin: 0 auto;  color: #fff; font-size: 5vw;  padding: 0 2vw}
.notice p{position: relative;  color: #fff; font-size: 3vw; letter-spacing: 0.5px; line-height: 4.5vw;  font-weight: 400;  padding-left: 2vw;}
.notice p::before{position: absolute;  left: -0.5vw;  content: ' \002E';}
.notice > strong{display: block; border-bottom: 1px solid #fff;  padding-bottom: 2vw;  margin-bottom: 3vw; font-size: 4vw;}
.btn_view{color: #ccc; border-bottom: 1px solid #fff;}

/* 기대평, 수강후기 글쓰기 */
.reply_wp{width: 92%; margin: 0 auto;}

.evt{overflow: hidden;  padding: 6vw 0;}
.evt li{float: left; width: 100%; font-size: 2.7vw;  line-height: 3.5vw;}
.evt li strong{font-weight: 800;  font-size: 2.7vw;}
.evt li div{background: #e9f1f2; padding: 3.5vw;  line-height: 3.5vw; margin-top: 2vw;}
.evt li div p{position: relative;  padding-left: 2vw;  font-size: 2vw;}
.evt li div p::before{position: absolute;  left: -0.5vw;  content: ' -';}
.reply{overflow: hidden;}
.reply input,
.reply select{color: #000 !important; border: 1px solid #000;}
.reply input::placeholder{color: #000;}

.reply > input[type='text'] {width: 49%; padding: 25px 10px; text-align: center;}
.reply > p > input[type='text'] {width: 99%; padding: 25px 10px; margin: 1vw 0;}
.reply select{width: 49%; height: 52px;  margin-left: 0.5%;}

.evt_wp input:focus,
.evt_wp select:focus{outline: none;}	

.btn_reply{background: #000; width: 100%; text-align: center; color: #fff; padding: 16px 0; font-weight: 800; line-height: 20px; margin-left: -3px !important; letter-spacing: 0.5px;}

.btn_refund{background: #461bc7; width: 92%; margin: 2vw auto 0; text-align: center; color: #fff; padding: 2vw 0; font-weight: 600; line-height: 20px; letter-spacing: 0.5px;}


/* 기대평, 수강후기 목록 */
table.reply_list{margin-top: 2vw;}	
table.reply_list td{color: #000; font-size: 2.5vw; padding: 15px 10px; font-weight: 300;  border-bottom: 1px solid #777; line-height: 22px; letter-spacing: 0;}
table.reply_list td p {font-size: 2.5vw; padding-top: 1vw;}
span.name{color: #bbb}
	
.m_evt .paging_wp{text-align: center; overflow: hidden; margin-top: 20px;}
.m_evt .paging{align-items: center; display: inline-flex;}
.m_evt .paging a{color: #222; border-radius: 50%; background: transparent; margin: 0 2px; width: 24px; height: 24px; display: grid; align-items: center; text-align: center;}
.m_evt .paging .arrow{position: relative; width: 28px; height: 28px; border: 1px solid #222; border-radius: 50%; padding: 0; margin: 5px 5px 0; background: transparent; display: inline-block;}
.m_evt .paging .arrow.prev::after{position: absolute; top: 10px; right: 9px; content: ''; width: 5px; height: 5px; border-bottom: 2px solid #222; border-left: 2px solid #222; transform: rotate(45deg);}
.m_evt .paging .arrow.next::after{position: absolute; top: 10px; left: 9px; content: ''; width: 5px; height: 5px; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(45deg);}	
.m_evt .paging .arrow:hover{background: #222; border-color: #222;}	
.m_evt .paging a:hover,
.m_evt .paging .active{font-weight: 900; background: #222; color: #fff;}
.m_evt .paging .arrow.prev:hover::after{border-color: #222; border-bottom: 2px solid #fff; border-left: 2px solid #fff;}	
.m_evt .paging .arrow.next:hover::after{border-color: #222; border-top: 2px solid #fff; border-right: 2px solid #fff;}	
.reply select::selection{color: #000;}

.bg_01{background: #461bc7;}
.bg_02{background: #fff;}
.bg_03{background: #dce7e8;}
.bg_04{background: #282f3b;}

.dungdung {animation: updown 1s both infinite alternate;}

.secret_box{position: relative;}
.secret_box .bx-wrapper{width: 96%; margin: 0 auto;  position: relative;}
.secret_box  .bx-wrapper .bx-controls-direction a{position: absolute;  top: 50%;  display: block;  margin-top: -2.5vw;  width: 5vw;  height: 5vw;  background-size: 100%;  text-indent: -9999px;  overflow: hidden;  opacity: .7;}

.secret_box .bx-wrapper .bx-prev{left: -2vw;  background: url('imgs/arrow_prev.png') no-repeat;}
.secret_box .bx-wrapper .bx-next {right: -2vw;  background: url('imgs/arrow_next.png') no-repeat;}

/* popup */
.popup{  position: absolute;  top: 0;  left: 3%;  width: 90%; border-radius: 5px; border: 8px solid #461bc7; box-shadow: 2px 10px 50px 10px rgba(0,0,0,0.8); z-index: 9;} 

.pop_wp{position: relative;}
.pop_wp a.closeX{position: absolute; top: 3vw; right: 3vw; font-size: 10vw; font-weight: 100; text-align: center; cursor: pointer; color: #fff; text-decoration: none;}

.pop_wp .pop_tit{background: #461bc7; text-align: center; color: #fff; padding: 25px 0 20px; font-size: 5.5vw;}
.pop_wp strong{font-weight: 900;}

.pop_wp .basis{overflow: hidden; background: #f2f7f7; padding: 3vw 0;}
.pop_wp .basis:nth-child(odd){background: #fff;}
.pop_wp .basis li{padding: 0 6vw; font-size: 3.5vw; line-height: 5vw; font-weight: 800; text-align: left;}
.pop_wp .basis li:first-child{background: url('imgs/object.png') no-repeat center;
padding: 10vw 0; font-size: 5vw; line-height: 5vw; text-align: center; font-weight: 300;}

.pop_wp .pop_conts{padding: 0 5vw 5vw; font-size: 3vw; background: #fff;}
.pop_conts p{padding-bottom: 20px; letter-spacing: 0;}
.pop_conts strong{font-size: 4vw; display: block; padding: 4vw 0 1vw; border-top: 1px dashed #ccc;}
.pop_conts strong:first-child{border-top: 0;}

.pop_conts .pass{background: #f2f2f2; border-radius: 5px;}
.pass li{border-top: 1px dashed #ddd; font-size: 14px;}
.pass li:first-child{border-top: 0;}
.pass li div{padding: 4vw;}
.pass li div:first-child{background: #461bc7; color: #fff; text-align: center; font-size: 4vw; padding: 2vw 0;}
.pass li em{display: block; color: #461bc7; padding-bottom: 1vw; font-weight: 900;}

.up-on-scroll{transition: transform 0.7s, opacity 1.7s;}
.blink{animation: blink 1s infinite;}

.coin.big{animation: scale-center .2s .5s cubic-bezier(.39,.575,.565,1.000) both}

@keyframes scale-center{0% {transform: scale(0); opacity: 0; filter: blur(20px);} 100% {transform: scale(1)}}
@keyframes zoom-in-blurred{ 0% {opacity:0; transform: scale(6); filter: blur(20px);} 100% {opacity:1; transform: scale(1);}}
@keyframes updown { 0% {transform: translateY(-3px);} 100% {transform: translateY(3px);}}
@keyframes scroll-down { 0%{transform: translateY(-30px); opacity:0;} 100%{transform: translateY(0); opacity:1;}}
@keyframes turn-up{0% {opacity: 0;} 100%{opacity: 1;}}
@keyframes scale-up{0%{transform:scale(.5); opacity:0;} 100%{transform:scale(1); opacity:1;}}