@charset "utf-8";
/* CSS Document */
body {font-family:'Noto Sans KR', 'sans-serif';}

@font-face {font-family: 'Noto Sans Korean', 'Noto Sans KR', 'sans-serif', "나눔고딕";
	src:url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
	src:local(※), url(http://www.darakwon.co.kr/css/fonts/NanumGothic.ttf) format('truetype'), url(http://www.darakwon.co.kr/css/fonts/NanumGothic.otf) format('opentype');
}

a{text-decoration: none}
img{ border:none; padding:0; margin:0;}
input.radio {width:13px;height:13px; vertical-align:top; padding:0px; margin:0px;}
ul,li{padding:0; margin:0; list-style:none;}
* {font-family:'Noto Sans Korean', 나눔고딕, ng, arial;}
body {color:#666;font-size:12px;line-height: 1.5;font-family:'Noto Sans Korean',NanumGothic, 나눔고딕, ng, arial;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0} 
img,fieldset,iframe{border:0 none}
dl,ul,ol,menu,li{list-style:none}
img, input, button, select, textarea {vertical-align:middle;}
button {overflow:visible;margin:0;padding:0;border:none;background:0;vertical-align:middle;cursor:pointer;}
button::-moz-focus-inner,  
input::-moz-focus-inner{border:0;padding:0;}
video {display:block; width:100%;}
video:focus {outline:none;}
.blind{display:block;overflow:hidden;*position:absolute;top:0;left:0;width:0;height:0;border:0;background:none;font-size:0;line-height:0;}

.Bar_container {z-index:999;    position: fixed;    left: 0;    bottom: 0;    width: 100%;   height:86px;    background: #FFF; border-top:1px solid #000}
.Bar_inner{display:flex; justify-content: center;max-width:580px;margin: 0 auto;padding: 0px 0 0 0;box-sizing: border-box;position:relative; max-width:830px; height:auto; margin:0 auto; }
.Bar_txt{  margin-left: 0px; width: 339px; padding-top: 1%}

.Bar_selectButton{position: relative;width: 100%;padding: 10px 10px;font-size: 20px;font-weight: 600;text-align: left;box-sizing: border-box;background: #fff;}

.Bar_selectButton:after {content: ""; position: absolute;top: -10px;right: 16px;bottom: 0;width: 0;height: 0;margin: auto;border: 10px solid transparent;border-bottom-color: #000;opacity: .7;}

.Bar_ListWrap {position: absolute;left: 0;bottom: 100%;width: 100%;height: 0;max-height: 600px;border: 1px solid #000;box-sizing: border-box;    background: #fff;}
.Bar_ListWrap.Bar_open {overflow-y: auto;    height: auto;}

.ButtonWrap {width: 226px;  padding-top: 1%; margin-left: 15px; }


/* 58일 구매이력 배너 추가*/ 
.Bar_txt_58{  margin-left: 0px; width: 189px; padding-top:1%}
.ButtonWrap_58 {width: 297px;  padding-top: 1%; margin-left: 15px; }
.quick_banner{position: relative;    width: 100%;}
.quick_banner .quick.fixed {position: fixed;}
.quick_banner .quick {right:20px; top: 50%; transform: translate(0%, -50%);    margin-left: 0;        z-index:99;width: 200px; }


.Item_wrapper {position: relative;    padding: 10px 12px 15px;    letter-spacing: -.5px;    background: #fff;    cursor: pointer;}
.Item_wrapper {margin: 0;   padding: 15px 10px 10px;   border-top: 1px solid #000;}
.top_btn a {width: 50px;height: 50px;color: #ffffff;position: fixed;z-index: 99999;bottom: 12px;right: 20px;}
div.Control {width: 79px;left: 10px;top: 0;position: absolute;}
.top_join1124 {display: inline;height: 25px;line-height: 25px;padding: 0 7px;font-size: 13px;color: #1e75d6;border-radius: 2px;border: 1px solid #1e75d6;float:right;}
.top_lgfind {display: inline;height: 25px;line-height: 25px;padding: 0 7px;font-size: 13px;color: #1e75d6;border-radius: 2px;border: 1px solid #1e75d6;float:right;margin-right:5px;}
.loginform button {background: #1e75d6;padding: 18px 20px;font-size: 16px;border: 0;letter-spacing: 1px;color: #ffffff;cursor: pointer;width: 100%;box-sizing: border-box;font-family: 'Nanum Gothic Bold';margin-top: 22px;text-align:center}
.loginform p {margin: 10px 0 15px 0;}
.loginform table{ width: 100%;}
.loginform table th{text-align:center; padding-bottom:10px;}
.loginform table td input {padding: 7px;background: #ffffff;border: 1px solid #e1e1e1;color: #999999;font-family: Arial, Helvetica, sans-serif;margin-top: 8px;width: 100%;height: 43px;box-sizing: border-box;}
.loginform p input {padding: 0 10px;background: #ffffff;border: 1px solid #e1e1e1;color: #999999;font-family: Arial, Helvetica, sans-serif;margin-top: 8px;width: 100%;height: 49px;box-sizing: border-box;}
.loginform .keep_area label {color: #999999;margin-left: 5px;font-size: 14px;}
.loginform .keep_area .ckbox {height: 22px;width: 23px;vertical-align: middle;}
.ban_btm {position: fixed;left: 0;bottom: 0;z-index: 1000;width: 100%;height: 140px;text-align: center;background:url(images/ban_bg.jpg) repeat-y;border-top: 2px solid #fff;}

/*  레이어 */
.wrap_layer_popup {display:  ; position: absolute;left: 50%;z-index: 999;padding: 0;background: #fff;padding:30px;}
.wrap_layer_popup .bt_close {position: absolute;top: -42px;right: 0;}
.layer_popup_bg {position: fixed;  top: 0; left: 0;  width: 100%;  height: 100%;opacity:0.8; -moz-opacity:0.8;   z-index: 997; background: url(../images/bg_black_opacity.png);}

/* top_header */
#top_header1 {width:100%; height:34px; background-color:#f3f2f7; overflow: hidden;}
#top_header2 {width: 100%;height:34px;background-color: #f3f2f7;overflow: hidden;}
#top_header2 .top_header_in {width: 675px; margin: 0 auto; padding: 0;}
#top_header2 #top_header_left { float: left; }
*{padding:0; margin:0;}
ul, li, dd, dt, dl{list-style:none;}

/* contents */
.contents{position: relative; background-color:#000;}
.sec001{background-color: #ff6b9b;}
.sec01 {background-color: #368adc;}
.sec02 {background-color: #308bde;}
.sec03 {background-color: #308bde;}
.sec04 {background-color: #cbe2f7;}
.sec05 {background-color:#ffebf2;}
.sec06 {background-color: #9477ee;}
.sec07 {background-color: #fff;}
.sec08 {background-color: #ff80b3; }
.sec09 {background-color: #fadb6f; }
.sec10 {background-color: #fff; }

.eventimg{position:relative; max-width:830px; height:auto; margin:0 auto;}
.eventimg img{ height:auto;width:100%; margin:0 auto; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

*, *:before, *:after {box-sizing: inherit;}
.align-left {float: right;margin-left: 20px;}
.align-right {float: right;margin-left: 20px;}
.slide-in {opacity: 0;transition: all .5s;}
.align-left.slide-in {transform: translateY(30%) scale(0.95);}
.align-right.slide-in {transform: translateX(30%) scale(0.95);}.slide-in.active {opacity: 1;transform: translateX(0%) scale(1);}


/* topbg */
.eventtopbg h1{width:137px;height:30px; top:32px; left:50%; position:absolute; margin:0 0 0 -445px; z-index: 300;}
.eventtopbg h1 a{height: 30px; display: block;}
.eventtopbg .util{position:absolute;left:50%;top:32px; z-index:300;width:360px;margin-left:116px;text-align:right; color:#d07988;}
.eventtopbg .util a{color:#a66a7e;text-decoration:none;margin:0 2px; }
.eventtopbg{ position:relative;width:100%; max-height:1186px; height:100vw;  background:url(../images/top_bg_01.jpg) top center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.eventtopbg2{ position:relative;width:100%; max-height:1186px; height:100vw;  background:url(../images/top_bg_02.jpg) top center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

.eventtopbg .topimg{position:relative; margin: auto; width: 100%; height: 100%; max-width:1118px; box-sizing: border-box; }
.eventtopbg .topimg > .title{position: absolute; left: 50%; transform: translate(-50%, 0); width:100%; z-index: 2}
.eventtopbg .topimg > .title img{width: 100%; max-width:1118px;}
.eventtopbg .topimg > .bubble01{position: absolute; top: 29%; left:10%;  width: 9.5%;}
.eventtopbg .topimg > .bubble01 img{width: 100%;  max-width:207px; animation: bubble 2s infinite 1s;}
.eventtopbg .topimg > .bubble02{position: absolute; top:7.1%; left: 66.8%;  width:11.5%; }
.eventtopbg .topimg > .bubble02 img{width: 100%;  max-width:184px;  animation: bubble 2s infinite 0s;}


.eventtopbg2 .topimg{position:relative; margin: auto; width: 100%; height: 100%; max-width:1118px; box-sizing: border-box; }
.eventtopbg2 .topimg > .title{position: absolute; left: 50%; transform: translate(-50%, 0); width:100%; z-index: 2}
.eventtopbg2 .topimg > .title img{display: block;margin: 0 auto;max-width: 100%;}
.eventtopbg2 .topimg > .bubble01{position: absolute; top: 49%; left:3%;  }
.eventtopbg2 .topimg > .bubble01 img{width: 100%;  max-width:290px; animation: bubble 2s infinite 1s;}
.eventtopbg2 .topimg > .bubble02{position: absolute; top:56.1%; left: 70%;   }
.eventtopbg2 .topimg > .bubble02 img{width: 100%;  max-width:290px;  animation: bubble 2s infinite 0s;}
.eventtopbg2 .topimg > .bubble03{position: absolute; top:75.1%; left: 8%;   }
.eventtopbg2 .topimg > .bubble03 img{width: 100%;  max-width:310px;  animation: bubble 2s infinite 0s;}


 @keyframes bubble{
  0% {transform: translatey(0px);}
  50% {transform: translatey(-15px);}
  100% {transform: translatey(0px);}  
}
}
 @keyframes bubble2{
  0% {transform: translatey(0px);}
  50% {transform: translatey(-10px);}
  100% {transform: translatey(0px);}  
}





/* sec01 */
.fade-in {opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease, transform 0.5s ease;}
.fade-in.visible {opacity: 1;transform: translateY(0);}
/* sec02 */
.sec02 > .eventimg{position: relative}
.sec02 .youtube{width: 76.1%; max-width: 632px; margin-left: 12%; position: absolute; padding: 53% 0 0 0;}
.sec02 > .eventimg > .btn_cart{position: absolute; width:66.6%; max-width: 553px; left: 50%; transform: translate(-50%, 0);}
.sec02 > .eventimg > .btn_course{position: absolute; width:16.4%; max-width:136px; left:62.9%; top:6.76%}
.sec02 .card{ position: absolute; right:3%;background: url("../images/arrow.png") no-repeat right center;}
.sec02 .card a{color: #666; text-decoration: none; font-size: 18px;  letter-spacing: -0.05em; padding-right: 18px;}
.youtube_top{ width: 76%; max-width: 632px; margin-left: 12%; position: absolute; padding:63.5% 0 0 0;  height:35.9%; }
.sec02 .bubble{position: absolute; top: 14.5%; left:0%;  width: 35.5%; z-index: 9}
.sec02 .bubble img{width: 100%;  max-width:288px; animation: bubble 2s infinite 1s;}

/* sec03 */
.sec03 > .eventimg{position: relative}
.sec03 > .eventimg > .bubble03{position: absolute; top:4%; left:5.5%;  width:35%; }
.sec03 > .eventimg > .bubble03 img{width: 100%;  max-width:285px;  animation: bubble 2s infinite 0s;}

/* sec04 */

/* sec05 */
.sec05 .giflec1, .sec05 .giflec2, .sec05 .giflec3, .sec05 .giflec4{position:absolute;left:13.9%; width:72.3%; z-index:10;  }
.sec05 .giflec1{top:7.1%;}
.sec05 .giflec2{top:30.15%;}
.sec05 .giflec3{top:53.75%;}
.sec05 .giflec4{top:77.3%;}

/* sec06 */
.sec06 img{width:100%;}
.sec06 .gifimg1, .sec06 .gifimg2, .sec06 .gifimg3, .sec06 .gifimg4{position:absolute;left:3%; width:94%;  z-index:10; border-top-left-radius: 15px;border-top-right-radius: 15px;  overflow: hidden}
.sec06 .gifimg1{top:7.75%; }
.sec06 .gifimg2{top:22.7%;}
.sec06 .gifimg3{top:38.6%;}
.sec06 .gifimg4{top:54.5%;}

/* sec07 */

.sec07 .bubble01{position: absolute; top: 17%; left:4%; }
.sec07 .bubble01 img{width: 100%;  max-width:290px; animation: bubble 2s infinite 1s;}
.sec07 .bubble02{position: absolute; top:20%; left: 62%; }
.sec07 .bubble02 img{width: 100%;  max-width:290px;  animation: bubble 2s infinite 0s;}
.sec07 .btn_sample{width: 50%;margin: 0px auto 0px auto;display: flex;justify-content: center;align-items: center;
box-sizing: border-box; padding-bottom: 10%}

/* sec08 */
.sec08 .youtube_min{ width: 86%; max-width:714px; margin-left:7%; position: absolute; padding:37.1% 0 0 0;  height:47.1%; }

/* sec09 */
.sec09 .btn_apply{width: 50%;margin: 0px auto 0px auto;display: flex;justify-content: center;align-items: center;
box-sizing: border-box; padding-bottom: 10%}

/* sec10 */
.sec10 .bubble01{position: absolute; top: 44%; left:1%; }
.sec10 .bubble01 img{width: 100%;  max-width:290px; animation: bubble 2s infinite 1s;}
.sec10 .bubble02{position: absolute; top:30%; left: 83%; }
.sec10 .bubble02 img{width: 100%;  max-width:290px;  animation: bubble 2s infinite 0s;}

.sec10 .btn_youtube{width: 50%;margin: 0px auto 0px auto;display: flex;justify-content: center;align-items: center;
box-sizing: border-box; padding-bottom: 10%}

/* 유의사항 */
.evt_foot{position:relative; width:100%; margin:0 auto; text-align:left; background-color:#fff; padding-top:60px}
.evt_foot .f_tab{width:90%; max-width: 940px;  margin:0 auto; display: flex; column-gap: .3rem; justify-content:flex-start; align-items: center;  position:relative;}
.evt_foot .f_tab .tab1, .evt_foot .f_tab .tab2{width:40%; max-width:10rem; min-width:8.5rem}
.evt_foot .f_tab .tab1 a, .evt_foot .f_tab .tab2 a{background-color: #a8a8a8; color: #fff; text-align: center; display: block; width: 100%; box-sizing: border-box; padding:.5rem; font-size: 1.25rem; cursor: pointer; border-radius: 25px;font-weight: 700; }
.evt_foot .f_tab a:hover, .evt_foot .f_tab a.selected{background-color: #e15840; color:#fff; }
.evt_foot .footertext {position:relative;box-sizing: border-box; font-size:0.9rem; letter-spacing: -0.03rem; margin:0 auto; max-width:940px; width:90%; padding: 1rem 0 5rem; color:#868686;}
.evt_foot .footertext a{ color:#666;}
.evt_foot .footertext a.link1{ color:#000;}
.evt_foot .footertext .tit{ font-size:1.0rem;font-weight: 700; display:block; color:#e15840; padding-bottom:5px; border-bottom:2px solid #f0e6e5}
.evt_foot .footertext .tit2{ font-size:1.2rem;font-weight: 700; display:block;color:#e15840; padding-bottom:5px; }
.evt_foot .footertext strong{ font-size:.95rem; color: #2f2f2f;}
.evt_foot .q_list{position:relative; margin:0 auto; width:960px;}
.evt_foot .q_list div.q_txt{ padding-bottom:5px; cursor:pointer;}
.evt_foot .q_list div.a_txt{ font-size:0.9rem; color:#FFF; box-sizing: border-box; padding:5px 30px 15px 30px;}
.evt_foot .q_list div.a_txt a{font-size:0.9rem; color:#57c1e9; text-decoration:underline; }
.evt_foot .f_tab .event_btn{position:relative; margin:10px 0; float:right;}




/* ----- 리뷰 슬라이드----- */
.record_item {display: inline-block; max-width:388px; width: 33%; max-height:465px;}
.record_item > img{width: 100%;}
.swiper-slide {flex-shrink: 0;  width: 100%;height: 100%;   transition-property: transform}
.rolling_card_swiper .swiper-wrapper:hover .swiper-slide {animation-play-state: paused;}
.rolling_card_swiper .swiper-slide {width: auto;}
.rolling_card_swiper .swiper-slide:first-child {
		-webkit-animation: rolling_card_ltr 25s linear 1s infinite;
		animation: rolling_card_ltr 25s linear 1s infinite;
	}
.rolling_card_swiper .swiper-slide:first-child {
		animation-duration: 30s;
	}
 .rolling_card_swiper .swiper-slide:first-child {
		will-change: transform;
	}

        /* ----- animation ----- */
        @-webkit-keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                margin-left: calc(var(--rolling-card-width) * -1);
            }
        }

        @-webkit-keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        @keyframes rolling_card_ltr {
            100% {
                transform: translateX(calc(var(--rolling-card-width) * -1));
            }
        }

        :root {
            --rolling-card-width: 1195px;
        }

        /* ----- swiper-wrapper ----- */
        .swiper-wrapper {width: 100%; height: auto;  display: flex; transition-property: transform;  box-sizing: content-box}
        .swiper-wrapper {
			transform: translate3d(0px, 0, 0)
        }
        .swiper-container {overflow: hidden;  list-style: none; padding: 0;}

span.Error{font-size: 12px; display: block;  padding-left:0px; letter-spacing: -0.3px;  color: red;  margin-top: 2px;  margin-left: 0px; text-align: left;}