@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family:'ONE-Mobile-POP';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,body{height:100%;}
*{margin:0; padding:0; box-sizing:border-box; image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor; -webkit-tap-highlight-color:transparent;}
li{list-style:none;}
a{text-decoration:none;}
img{image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; -ms-interpolation-mode:nearest-neighbor;}
input, textarea, select{outline:none; border:0; font-family:'Noto Sans KR', sans-serif;}
body{font-size:14px; font-family:'Noto Sans KR', sans-serif; line-height:1; color:#333; background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}
.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

body::-webkit-scrollbar{width:4px;}
body::-webkit-scrollbar-track{background-color:transparent;}
body::-webkit-scrollbar-thumb{border-radius:3px; background-color:rgba(121,77,121,0.8);}
body::-webkit-scrollbar-button{width:0; height:0;}

/******* 버튼 모음 ********/
.text_left{text-align:left;}
.text_center{text-align:center;}
.text_right{text-align:right;}
.btn_wrap{padding-top:30px; text-align:center;}

.btn_green{display:inline-block; background:url(../images/btn_green.png) no-repeat; width:195px; height:61px; line-height:60px; font-size:26px; color:#fff; font-weight:500;}
.btn_red{display:inline-block; background:url(../images/btn_red.png) no-repeat; width:204px; height:60px; line-height:59px; font-size:24px; color:#fff; font-weight:500;}
.btn_blue{display:inline-block; background:url(../images/btn_blue.png) no-repeat; width:204px; height:60px; line-height:59px; font-size:24px; color:#fff; font-weight:500; text-align:center;}
.btn_brown{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#a86b3f; color:#fff; font-size:24px; font-weight:400; border-radius:8px;}

.btn_violet{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#794d79; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_violet:hover{background-color:#441985;}

.btn_purple{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#674b89; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_purple:hover{background-color:#441985;}

.btn_gray{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#aaa; color:#fff; font-size:20px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_gray:hover{background-color:#666;}

.btn_sky{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#779dff; color:#fff; font-size:21px; font-weight:400; border-radius:8px; transition:0.3s;}
.btn_sky:hover{background-color:#cda0f2;}

.btn_orange{display:inline-block; width:200px; height:52px; line-height:51px; text-align:center; background-color:#e05b00; color:#fff; font-size:24px; font-weight:400; border-radius:8px;}

/** 체크박스 **/
.check_input{display:none;}
.check_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.check_label .check_bullet{width:20px; height:20px; background-color:#fff; margin-right:6px;}
.check_input:checked + .check_bullet{background-image:url(../images/input_check_gray.png); background-size:100%;}

/** 라디오박스 **/
.radio_input{display:none;}
.radio_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.radio_label .radio_bullet{width:20px; height:20px; border-radius:50%; border:1px solid #b5b5b5; background-color:#fff; margin-right:6px; }
.radio_input:checked + .radio_bullet{background-image:url(../images/input_check_violet.png); background-repeat:no-repeat; background-position:center; background-size:100%;}

/** 헤더 영역 **/
header{position:absolute; left:0; width:100%; top:0; z-index:1000; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; padding:10px 2% 0 2%;}
.logo_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; position:relative;}
.logo{width:104px; margin-right:8px; display:none;}
.logo .img{width:100%;}
.bgm{position:absolute; background-image:url(../images/bgm_on.png); background-repeat:no-repeat; background-position:50%; background-size:cover; width:25px; height:25px; transition:0.2s; top:0; left:70px; transition:0.3s; z-index: 3000;}
.bgm:hover{transform:scale(1.1);}
.bgm.off{background-image:url(../images/bgm_off.png);}

header.fixed{position:fixed;}
header.absolute{position:absolute;}

.header_character{width:64px; height:64px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:81%; border:2px solid #fff; position:relative; transition: 0.2s;}
.header_character:hover{ transform: scale(1.1);}
.header_badge{position:absolute; width:55%; left:-23%; top:-5%; z-index:20;}

.header_child_add_wrap{position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.75); color:#fff; border-radius:50%;  z-index:10;}
.header_child_add{width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.4; font-weight:500; font-size:11px;}

.gnb{display:-webkit-box; display:-ms-flexbox; display:flex;}
.gnb .icon{width:42px; margin-left:4px; transition: 0.2s;}
.gnb .icon:hover{ transform: scale(1.1);}

@media all and (min-width:960px){
    header{padding:10px 2% 0 2%;}
    .logo{width:120px; margin-right:8px;}
    .bgm{left:90px;}
    .header_character{width:80px; height:80px;}
    .gnb .icon{width:50px;}
    
    .header_child_add{font-size:13px;}
}
@media all and (min-width:1080px){
    header{padding:12px 2% 0 2%;}
    .logo{width:136px; margin-right:10px;}
    .bgm{left:95px;}
    .header_character{width:86px; height:86px;}
    .gnb .icon{width:56px;margin:0 2px;}
    
    .header_child_add{font-size:14px;}
}
@media all and (min-width:1280px){
    header{padding:15px 2% 0 2%;}
    .logo{width:160px; margin-right:10px;}
    .bgm{width:30px; height:30px; left:110px;}
    .header_character{width:100px; height:100px;}
    .gnb .icon{width:66px; margin-left:5px;}
    
    .header_child_add{font-size:15px;}
}
@media all and (min-width:1440px){
    header{padding:20px 2% 0 2%;}
    .logo{width:180px; margin-right:10px;}
    .bgm{left:125px;}
    .header_character{width:110px; height:110px;}
    .gnb .icon{width:74px; margin-left:6px;}
    
    .header_child_add{font-size:16px;}
}
@media all and (min-width:1680px){
    header{padding:25px 2.5% 0 2.5%;}
    .logo{width:234px; margin-right:15px;}
    .bgm{width:35px; height:35px; left:145px;}
    .header_character{width:130px; height:130px; border-width:3px;}
    .gnb .icon{width:95px; margin-left:8px;}
    
    .header_child_add{font-size:18px;}
}
@media all and (min-width:1920px){
    header{max-width:1920px; left:calc(50% - 960px);}
}

/** 비디오 **/
.video_wrap{position:relative; padding-top:56.25%;}
.video_iframe{border:0; position:absolute; left:0; top:0; width:100%; height:100%;}

/** 푸터 영역 **/
footer{font-size:10px; text-align:center; line-height:1.4; padding-bottom:5px; position:fixed; left:0; right:0; bottom:0; color:#555; font-weight:100;}
.footer_space{display:inline-block; font-size:10px; padding:0 5px; vertical-align:3px; color:#666;}

footer.login{color:#fff;}
footer.login .footer_space{color:#fff; vertical-align:2px;}

footer.sub{position:static; width:100%; padding:1.6% 0; color:#445723;}

footer.footer_course{position:absolute; left:0; right:0; bottom:0; color:#555;}

@media all and (min-width:768px){
    footer{font-size:11px; line-height:1.5; padding-bottom:6px;}
    footer.login{padding-bottom:10px;}
}
@media all and (min-width:960px){
    footer{font-size:13px; padding-bottom:10px;}
    footer.login{padding-bottom:12px;}
}
@media all and (min-width:1024px){
    footer{padding-bottom:12px;}
    footer.login{padding-bottom:15px;}
}
@media all and (min-width:1280px){
    footer{font-size:14px; padding-bottom:20px;}
}
@media all and (min-width:1920px){
    footer{line-height:1.6;}
}

/** 탭 메뉴 좌측 정렬 **/
.tab_nav{display:-webkit-box; display:-ms-flexbox; display:flex; position:relative;}
.tab_nav a{display:inline-block; width:110px; height:38px; line-height:37px; text-align:center; font-size:16px; font-weight:400; background-color:#e5e5e5; border-radius:10px; color:#666; margin-right:5px; transition:0.2s;}

.tab_nav a:hover{background-color:#794d79; color:#fff; opacity:0.9;}
.tab_nav .active{background-color:#794d79; color:#fff;}

.account_set_wrap{position:absolute; top:12px; right:65px; display:-webkit-box; display:-ms-flexbox; display:flex; }
.account_set{width:45px; margin-left:3px;}
.account_set_btn{display:block; width:100%;}

@media all and (min-width:960px){    
    .tab_nav a{width:138px; height:48px; line-height:47px; font-size:18px; margin-right:10px;}
    
    .account_set_wrap{top:17px; right:78px;}
    .account_set{width:51px;}
}
@media all and (min-width:1080px){    
    .tab_nav a{width:160px; height:60px; line-height:59px; font-size:21px;}    

    .account_set_wrap{top:22px; right:88px;}
    .account_set{width:55px;}
}
@media all and (min-width:1280px){    
    .account_set_wrap{top:22px; right:94px;}
    .account_set{width:59px;}
    
    .tab_nav a{width:172px; margin-right:15px; font-size:22px;}
}

@media all and (min-width:1440px){  
    .tab_nav a{width:200px; font-size:24px;}
    
    .account_set_wrap{top:27px; right:102px;}
    .account_set{width:66px;}
}
@media all and (min-width:1442px){ 
    .account_set_wrap{top:15px; right:2.4%;}
    .account_set{width:87px;}
}

/** 탭 메뉴 가운데 정렬 **/
.tab_nav_center{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.tab_nav_center a{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:170px; height:50px; text-align:center; font-size:16px; background-color:#e5e5e5; border-radius:10px; color:#666; margin:0 10px; line-height:1.2; transition:0.2s;}
.tab_nav_center small{display:block;}

.tab_nav_center a:hover{background-color:#794d79; color:#fff; opacity:0.9;}
.tab_nav_center .active{background-color:#794d79; color:#fff;}

@media all and (min-width:960px){
    .tab_nav_center a{width:200px; height:56px; font-size:18px;}
}
@media all and (min-width:1280px){
    .tab_nav_center a{width:260px; height:66px; font-size:21px;}
}

/** 탭 메뉴 2 **/
.tab_nav_2{width:100%; border-collapse:collapse; border-radius:15px; background-color:#edebec; height:44px; text-align:center; margin:5px 0;}
.tab_nav_2 td{padding-bottom:2px;}
.tab_nav_2 a{color:#333; font-size:17px; display:inline-block; position:relative;}
.tab_nav_2 a:hover{font-weight:500; color:#7c537d;}
.tab_nav_2 .active{font-weight:500; color:#7c537d;}
.tab_nav_2 .active:before{content:''; position:absolute; left:0; right:0; bottom:-8px; height:1px; background-color:#7c537d; opacity:0.9;}

/** 탭 메뉴 3 **/
.tab_nav_3{border-collapse:collapse; text-align:center; margin:10px auto 0 auto; font-size:16px; border-left:1px solid #e5e5e5;}
.tab_nav_3 td{text-align:center; padding:0 30px; border-right:1px solid #ddd;}
.tab_nav_3 a{color:#333;}
.tab_nav_3 a:hover{color:#7c537d; text-decoration:underline;}
.tab_nav_3 .active{color:#7c537d; font-weight:500;}

/** 팝업 공통 **/
.pop_wrap{padding:20px 3%;}

.pop_area{position:fixed; left:2%; right:2%; bottom:3%; top:75px; padding:0 1%; overflow:auto;}
.pop_area::-webkit-scrollbar{width:4px;}
.pop_area::-webkit-scrollbar-track{background-color:transparent;}
.pop_area::-webkit-scrollbar-thumb{border-radius:4px; background-color:rgba(121,77,121,0.8);}
.pop_area::-webkit-scrollbar-button{width:0; height:0;}

.pop_area.info{top:130px;}
.pop_area.qna{top:160px;}

@media all and (min-width:960px){    
    .pop_area{top:90px;}
    .pop_area.info{top:142px;}
    .tab_nav_2{margin:10px 0 15px 0; height:48px;}
    .pop_area.qna{top:180px;}
}
@media all and (min-width:1080px){    
    .pop_area{top:100px;}
    .pop_area.info{top:152px;}
    .pop_area.qna{top:190px;}
}
@media all and (min-width:1280px){  
    .pop_wrap{padding:30px 3%;}
    .pop_area{top:115px;}
    .pop_area.info{top:162px;}
    .pop_area.qna{top:205px;}
}
@media all and (min-width:1440px){   
    .pop_area.info{top:180px;}
    .tab_nav_2{margin:15px 0 20px 0; height:52px;}
    .tab_nav_2 a{font-size:18px;}
    .tab_nav_3{font-size:17px;}
    .pop_area.qna{top:225px;}
}

/** 프로필 변경 **/
.popup_profile_change_wrap{padding:40px 35px 25px 35px; background-color:#fff; border-radius:20px;}
.popup_profile_change_title{color:#000; font-size:30px; text-align:center; font-weight:500; padding-bottom:30px;}
.profile_change_name{display:block; width:100%; height:54px; padding-left:30px; border-radius:10px; background-color:#f4f4f4; font-size:22px; font-weight:500;}
.profile_change_name::placeholder{color:#bbb;}
.profile_change_list{position:fixed; left:35px; right:35px; bottom:95px; top:155px; overflow:auto;}
.profile_change_row{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;  position:relative; padding:20px 25px; margin-bottom:25px;}
.profile_change_row:last-of-type{margin-bottom:0;}
.profile_change_opacity{position:absolute; left:0; right:0; top:0; bottom:0; background-color:#f4f4f4; opacity:0.7; border-radius:20px;}
.profile_change_level{position:absolute; left:50%; top:50%; width:180px; height:50px; line-height:45px; font-size:22px; text-align:center; color:#fff; font-weight:500; margin:-25px 0 0 -90px; border:3px solid #fff; border-radius:30px; background-color:#779dfe;}

.profile_change_list::-webkit-scrollbar {
  width:4px;
}
.profile_change_list::-webkit-scrollbar-track {
  background-color: transparent;
}
.profile_change_list::-webkit-scrollbar-thumb {
  border-radius:3px; background-color:rgba(0,0,0,0.3);
}
.profile_change_list::-webkit-scrollbar-button {
  width:0; height:0;
}
/**
.profile_change_level.one{
background: rgb(196,255,0);
background: -moz-linear-gradient(left,  rgba(196,255,0,1) 0%, rgba(42,130,0,1) 100%);
background: -webkit-linear-gradient(left,  rgba(196,255,0,1) 0%,rgba(42,130,0,1) 100%);
background: linear-gradient(to right,  rgba(196,255,0,1) 0%,rgba(42,130,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ff00', endColorstr='#2a8200',GradientType=1 );
}
.profile_change_level.six{
background: rgb(53,223,240);
background: -moz-linear-gradient(left,  rgba(53,223,240,1) 0%, rgba(38,87,174,1) 100%);
background: -webkit-linear-gradient(left,  rgba(53,223,240,1) 0%,rgba(38,87,174,1) 100%);
background: linear-gradient(to right,  rgba(53,223,240,1) 0%,rgba(38,87,174,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35dff0', endColorstr='#2657ae',GradientType=1 );
}
.profile_change_level.eleven{
background: rgb(246,119,247);
background: -moz-linear-gradient(left,  rgba(246,119,247,1) 0%, rgba(222,54,226,1) 100%);
background: -webkit-linear-gradient(left,  rgba(246,119,247,1) 0%,rgba(222,54,226,1) 100%);
background: linear-gradient(to right,  rgba(246,119,247,1) 0%,rgba(222,54,226,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f677f7', endColorstr='#de36e2',GradientType=1 );
}
.profile_change_level.sixteen{
background: rgb(255,223,133);
background: -moz-linear-gradient(left,  rgba(255,223,133,1) 0%, rgba(254,204,9,1) 100%);
background: -webkit-linear-gradient(left,  rgba(255,223,133,1) 0%,rgba(254,204,9,1) 100%);
background: linear-gradient(to right,  rgba(255,223,133,1) 0%,rgba(254,204,9,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf85', endColorstr='#fecc09',GradientType=1 );
}
.profile_change_level.twentyone{
background: rgb(139,134,249);
background: -moz-linear-gradient(left,  rgba(139,134,249,1) 0%, rgba(67,61,196,1) 100%);
background: -webkit-linear-gradient(left,  rgba(139,134,249,1) 0%,rgba(67,61,196,1) 100%);
background: linear-gradient(to right,  rgba(139,134,249,1) 0%,rgba(67,61,196,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b86f9', endColorstr='#433dc4',GradientType=1 );
}
.profile_change_level.twentysix{
background: rgb(248,188,61);
background: -moz-linear-gradient(left,  rgba(248,188,61,1) 0%, rgba(200,121,30,1) 100%);
background: -webkit-linear-gradient(left,  rgba(248,188,61,1) 0%,rgba(200,121,30,1) 100%);
background: linear-gradient(to right,  rgba(248,188,61,1) 0%,rgba(200,121,30,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8bc3d', endColorstr='#c8791e',GradientType=1 );
}
.profile_change_level.master{
background: rgb(247,82,116);
background: -moz-linear-gradient(left,  rgba(247,82,116,1) 0%, rgba(205,27,56,1) 100%);
background: -webkit-linear-gradient(left,  rgba(247,82,116,1) 0%,rgba(205,27,56,1) 100%);
background: linear-gradient(to right,  rgba(247,82,116,1) 0%,rgba(205,27,56,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f75274', endColorstr='#cd1b38',GradientType=1 );
}
**/
.profile_change_label{width:18%; cursor:pointer; margin:0 1%;}
div.profile_change_label{-webkit-filter:grayscale(100%); filter:grayscale(100%); opacity:0.6;}
.profile_change_radio{display:none;}
.profile_change_radio:checked + .profile_change_bullet{background:url(../images/input_check_violet.png) no-repeat center; background-size:cover;}
.profile_change_bullet{display:block; width:28px; height:28px; border:2px solid #ddd; margin:0 auto 10px auto; border-radius:50%;}
.profile_change_photo{padding-top:100%; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; border-radius:20px;}

.profile_change_btn_wrap{text-align:center; position:fixed; bottom:0; padding-bottom:20px; width:100%;}
.profile_change_photo_btn{position:absolute; width:39px; left:50%; top:50%; margin:-25px 0 0 -19.5px;}

.profile_change_lock{position:absolute; border-radius:10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; left:50%; top:50%; width:66px; height:52px; background-color:rgba(0,0,0,0.9); color:#fff; text-align:center; line-height:1.3; text-shadow:0 0 1px rgba(0,0,0,1); font-size:12px; margin:-26px 0 0 -33px;}

@media all and (min-width:960px){
    .profile_change_lock{width:74px; height:60px; font-size:13px; margin:-30px 0 0 -37px;}
}

/** 검색 영역 공통 **/
.search_wrap{text-align:right; padding-bottom:20px;}
.search_select{width:150px; height:40px; border:2px solid #e5e5e5; border-radius:3px; padding-left:15px; font-size:16px; color:#666; vertical-align:top; border-radius:12px; font-weight:300;}
.search_input{width:210px; height:40px; border:2px solid #e5e5e5; border-radius:3px; padding-left:15px; font-size:16px; color:#666; vertical-align:top; border-radius:12px; font-weight:300;}
.search_btn{display:inline-block; width:40px; height:40px; background:url(../images/search_white.png) no-repeat center; background-color:#7e517c;  border-radius:12px; vertical-align:top;}

/** 프로필 **/
.profile_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.profile_left_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:150px;}
.profile_left_area{width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.profile_photo{border-radius:50%; width:100%; height:150px; background-repeat:no-repeat; background-position:center; background-size:75%; transition:0.2s;}
.profile_name{width:100%; margin:10px 0; background-color:#f7f7f7; padding:10px 0; color:#666; text-align:center; border-radius:10px; font-size:16px;}
.btn_violet.profile{border-radius:30px; height:38px; line-height:36px; width:70%;}

.profile_online_guide{padding:10px 0; line-height:1.5; text-align:center;}
.profile_online_btn{font-size:12px; background-color:#000; color:#fff; text-align:center; display:block; padding:10px 0; border-radius:10px; width:100%; transition:0.2s;}
.profile_online_btn:hover{text-decoration:underline;}

.profile_right_wrap{width:calc(100% - 170px); overflow:hidden;}
.profile_right_area{border-radius:40px; display:-webkit-box; display:-ms-flexbox; display:flex;}
.profile_right_box{width:20%; padding:5px 10px 10px 10px; -webkit-flex-shrink:0; -ms-flex-negative:0; flex-shrink:0; position:relative; transition:0.2s; border-radius:30px;}
.profile_right_img{width:86%; padding-top:86%; position:relative; background-repeat:no-repeat; background-position:center; background-size:cover; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:0 auto;}
.profile_right_lock{position:absolute; border-radius:10px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:70%; height:60%; background-color:rgba(0,0,0,0.6); bottom:5%; color:#fff; text-align:center; line-height:1.3; text-shadow:0 0 1px rgba(0,0,0,1); font-size:12px;}
.profile_select_name{border-radius:30px; width:95%; height:26px; font-size:15px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#d9d7d7; color:#fff; padding-bottom:3%; margin:0 auto;}

.profile_right_area.bg_color{padding:5px; background-color:#f7f7f7; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.profile_right_area.bg_color .profile_right_box{padding:12px 10px;}
.profile_right_bgcolor{border-radius:50%; width:90%; padding-top:90%; margin:0 auto;}


div.profile_right_box{cursor:pointer; }
div.profile_right_box:before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border-radius:30px; border:2px solid transparent; transition:0.2s;}
div.profile_right_box:hover{background-color:#fff; opacity:0.9;}
div.profile_right_box:hover .profile_select_name{background-color:#794d79; opacity:0.9;}
div.profile_right_box:hover:before{border:2px solid #794d79; opacity:0.9;}

div.profile_right_box.active{background-color:#fff;}
div.profile_right_box.active .profile_select_name{background-color:#794d79;}
div.profile_right_box.active:before{border:2px solid #794d79;}

.profile_right_area::-webkit-scrollbar{height:3px;}
.profile_right_area::-webkit-scrollbar-track{background-color:transparent;}
.profile_right_area::-webkit-scrollbar-thumb{border-radius:4px; background-color:#b97799;}
.profile_right_area::-webkit-scrollbar-button{width:0; height:0;}

@media all and (min-width:960px){
    .profile_left_wrap{width:200px;}  
    .profile_photo{height:200px;}
    .profile_name{margin:15px 0;}
    .profile_right_wrap{width:calc(100% - 230px);}
    .profile_right_lock{font-size:13px;}
    
    .profile_right_area.bg_color .profile_right_box{padding:14px 10px;}
    
    .profile_online_guide{padding:15px 0;}
    .profile_online_guide span{display:block;}
    .profile_online_btn{font-size:15px; padding:12px 0;}
}
@media all and (min-width:1080px){
    .profile_left_wrap{width:240px;}  
    .profile_photo{height:240px;}
    .profile_name{margin:15px 0; padding:15px 0; font-size:18px;}
    .btn_violet.profile{height:42px; line-height:39px; width:60%; font-size:22px;}
    
    .profile_online_guide{font-size:16px;}
    .profile_online_btn{font-size:17px; padding:15px 0;}
    
    .profile_right_wrap{width:calc(100% - 270px);}
    .profile_right_lock{font-size:14px;}
    
    .profile_select_name{width:86%; height:28px; font-size:16px; padding-bottom:3%;}
    
    .profile_right_area.bg_color .profile_right_box{padding:16px 10px;}
}
@media all and (min-width:1280px){
    .profile_left_wrap{width:260px;}  
    .profile_photo{height:260px;}
    .profile_name{margin:15px 0; padding:15px 0; font-size:20px;}
    .btn_violet.profile{height:46px; line-height:43px; width:55%; font-size:24px;}
    
    .profile_online_guide{font-size:17px;}
    .profile_online_btn{font-size:18px; padding:15px 0;}
    
    .profile_right_wrap{width:calc(100% - 300px);}
    .profile_right_lock{font-size:17px;}
    .profile_select_name{width:86%; height:32px; font-size:18px; padding-bottom:2%;}
    
    div.profile_right_box:before{border:3px solid transparent;}
    div.profile_right_box:hover:before{border:3px solid #794d79;}

    div.profile_right_box.active .profile_select_name{background-color:#794d79;}
    div.profile_right_box.active:before{border:3px solid #794d79;}
    
    .profile_right_area.bg_color{padding:10px;}
    .profile_right_area.bg_color .profile_right_box{padding:17px 10px;}
}
@media all and (min-width:1440px){
    .profile_left_wrap{width:360px;}  
    .profile_photo{height:360px;}
    .profile_name{margin:20px 0; padding:16px 0; font-size:23px;}
    .btn_violet.profile{height:50px; line-height:47px; width:50%; font-size:28px;}
    
    .profile_online_btn{width:250px; margin:0 auto;}
    
    .profile_right_wrap{width:calc(100% - 410px);}
    .profile_right_area{margin-bottom:5px;}
    .profile_right_lock{font-size:18px;}
    .profile_select_name{width:86%; height:34px; font-size:19px; padding-bottom:2%;}
}

/** 나의 도서관 **/
.library_list{}
.library_book_bg{background:url(../images/book_bg.png) no-repeat center bottom; background-size:100%; position:relative; padding-top:28.73%; margin-bottom:7%;}
.library_book_bg:last-of-type{margin:0;}
.library_book_row{position:absolute; left:6.15%; right:6.15%; top:0; bottom:0; display:-webkit-box; display:-ms-flexbox; display:flex;}
.library_book_col{width:22%; position:relative; margin-right:4%;}
.library_book_col:last-child{margin:0;}
.library_book{display:block; border-radius:20px;  padding-top:106.98%; background-repeat:no-repeat; background-position:center; background-size:cover;}
.library_mike_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; position:absolute; left:-2%; right:-2%; top:55%;}
.library_mike_area{width:32%; max-width:76px;}
.library_mike{display:block; width:100%;}
.library_title{position:absolute; left:0; right:0; bottom:-30px; text-align:center; font-size:14px; color:#555; line-height:1.3;}
.library_caption{font-size:14px; white-space:normal; line-height:1.35; height:2.7em;  word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:400;}
.library_phase{padding-top:4px;}

.library_book_col.no .library_book{background-size:70%; background-color:#000; opacity:0.4;}
.library_book_col.no .library_mike_wrap, .library_book_col.no .library_title{display:none;}


@media all and (min-width:960px){
    .library_book_bg{margin-bottom:6%;}
    .library_title, .library_caption{font-size:15px;}
}
@media all and (min-width:1080px){
    .library_title, .library_caption{font-size:16px;}
}
@media all and (min-width:1280px){
    .library_book_bg{padding-top:27.4%; margin-bottom:4.5%;}
    .library_book_row{left:7%; right:7%;}
    .library_book_col{width:21%; margin-right:5.33%;}
    .library_mike_wrap{top:53.5%;}
    .library_title{font-size:17px; bottom:-20px;}
    .library_caption{font-size:17px;}
}
@media all and (min-width:1440px){
    .library_book_bg{padding-top:26.5%; margin-bottom:4%;}
    .library_book_col{width:20%; margin-right:6.66%;}
    .library_mike_wrap{top:54%;}
    .library_title{font-size:18px; bottom:-20px;}
    .library_caption{font-size:18px;}
}

/** 이북 팝업/비디오 **/
.pop_ebook_wrap{position:absolute; left:0; right:0; top:0; bottom:0; display:none; z-index:100000;}
.pop_ebook_iframe{border:0; width:100%; height:100%;}

.pop_video_wrap{position:absolute; left:0; right:0; top:0; bottom:0; z-index:100000; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; display:none;}
.pop_video_area{padding-top:56.25%;}
.pop_video_iframe{border:0; width:100%; height:100%; position:absolute; left:0; top:0;}
.pop_video_close{position:absolute; z-index:10; top:10px; right:15px;  width:48px; height:48px; cursor:pointer;}

@media all and (min-width:960px){
    .pop_video_close{top:15px; right:20px; width:54px; height:54px;}
}
@media all and (min-width:1080px){
    .pop_video_close{top:20px; right:25px; width:58px; height:58px;}
}
@media all and (min-width:1280px){
    .pop_video_close{width:62px; height:62px;}
}

/** 티켓 리스트 **/
.ticket_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; border-radius:20px; margin-bottom:15px;}
.ticket_wrap:last-of-type{margin-bottom:0;}
.ticket_caption{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#fff; border-right:3px dotted #fff; font-weight:500; width:120px; font-family:'ONE-Mobile-POP';}

.ticket_list{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; width:calc(100% - 120px); padding:10px;}
.ticket_list li{width:18%; margin:1%; position:relative;}
.ticket_img{display:block; width:100%; position:relative; cursor:pointer;}
.ticket_img.off{opacity:0.85; -webkit-filter:grayscale(100%); filter:grayscale(100%);}

/**
.ticket_ing:before{content:''; position:absolute; top:8%; bottom:8%; left:5%; right:5%; box-shadow:0 0 10px 10px rgba(255,255,255,0.8); background-color:rgba(255,255,255,0.7); border-radius:5px;}**/

li.ticket_ing:before{content:''; position:absolute; top:-6%; bottom:-6%; left:-4%; right:-4%; background:url(../images/ticket_ing.png); background-size:cover; opacity:1;}

@media all and (min-width:960px){
    .ticket_wrap{margin-bottom:20px;}
    .ticket_caption{font-size:22px; width:140px;}
    .ticket_list{ width:calc(100% - 140px); padding:15px;}
}
@media all and (min-width:1280px){
    .ticket_wrap{margin-bottom:30px; border-radius:25px;}
    .ticket_caption{font-size:28px; width:180px;}
    .ticket_list{width:calc(100% - 180px); padding:20px;}  
}
@media all and (min-width:1440px){
    .ticket_caption{width:200px;}
    .ticket_list{width:calc(100% - 200px);}   
}

/** 퀴즈 스코어 차트 **/
.quiz_score_chart_area{position:relative; border-radius:25px; padding:7% 0; margin-bottom:15px;}
.quiz_score_chart_area:last-of-type{margin-bottom:0;}
.quiz_score_title{position:absolute; left:3%; top:5%; font-family:'ONE-Mobile-POP'; color:#fff; border-radius:6px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:124px; height:40px; font-weight:400; letter-spacing:0.5px;}
.chart_sample{display:block; width:50%; margin:0 auto; max-width:687px;}

.quiz_score_chart_box{ margin: 0 auto; width: 40%; padding-top: 40.43%; max-width: 553px; position: relative;}
.quiz_score_chart{ width: 100%; position: absolute; left: 0; top: 0;}

.quiz_score_chart_mark{ position: absolute; font-size: 12px; text-align: center; line-height:1.4; font-weight:500; font-family:'ONE-Mobile-POP';}         
.quiz_score_chart_mark.one{ top: -10%; right: 29%;}         
.quiz_score_chart_mark.two{ top: 13%; right: -2%;}         
.quiz_score_chart_mark.three{ top: 45%; right: -12%;}         
.quiz_score_chart_mark.four{ bottom: 13%; right: -2%;}         
.quiz_score_chart_mark.five{ bottom: -10%; right: 29%;} 

.quiz_score_chart_mark.six{ bottom: -10%; left: 29%;}         
.quiz_score_chart_mark.seven{ bottom: 13%; left: -2%;}         
.quiz_score_chart_mark.eight{ top: 45%; left: -12%;}         
.quiz_score_chart_mark.nine{ top: 13%; left: -2%;}         
.quiz_score_chart_mark.ten{ top: -10%; left: 29%;}

body::-webkit-scrollbar {
  width:4px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
}
body::-webkit-scrollbar-thumb {
  border-radius:3px; background-color:rgba(121,77,121,0.8);
}
body::-webkit-scrollbar-button {
  width:0; height:0;
}

@media all and (min-width:960px){
    .quiz_score_title{width:144px; height:46px; font-size:24px;}
    .quiz_score_chart_area{margin-bottom:20px;}
    
    .quiz_score_chart_mark{font-size:13px;}
}
@media all and (min-width:1080px){
    .quiz_score_title{width:152px; height:48px; font-size:25px;}
    .quiz_score_chart_area{margin-bottom:25px;}
    
    .quiz_score_chart_mark{font-size:14px;}
}
@media all and (min-width:1280px){
    .quiz_score_title{width:164px; height:52px; font-size:28px;}
    .quiz_score_chart_area{margin-bottom:30px;}
    
    .quiz_score_chart_mark{font-size:16px;}
}
@media all and (min-width:1440px){
    .quiz_score_title{width:180px; height:56px; font-size:30px;}
    .quiz_score_chart_area{margin-bottom:35px;}
    
    .quiz_score_chart_box{padding-top:0; width:553px; height:559px;}
    .quiz_score_chart_mark{font-size:17px;}
}
@media all and (min-width:1680px){
    .quiz_score_title{width:230px; height:66px; font-size:36px;}
    .quiz_score_chart_area{margin-bottom:40px;}
    
    .quiz_score_chart_mark{font-size:18px;}
}

/** 진행중인 학습정보 **/
.studying_wrap{display:flex; justify-content:space-between; flex-wrap:wrap; margin:10px 0;}
.studying_wrap li{width:30%; margin:3% 0;}
.studying_top{position:relative; border-radius:30px; overflow:hidden;}
.studying_caption{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#333; font-size:24px; font-family:'ONE-Mobile-POP';}
.studying_caption span{padding:8px 20px; background-color:rgba(255,255,255,0.8); border-radius:40px;}
.studying_img{display:block; width:90%; margin:5%;}

.studying_wrap li:nth-child(1) .studying_top{background-color:#90bd7a;}
.studying_wrap li:nth-child(2) .studying_top{background-color:#74a0a9;}
.studying_wrap li:nth-child(3) .studying_top{background-color:#6d96ce;}
.studying_wrap li:nth-child(4) .studying_top{background-color:#7bbbb6;}
.studying_wrap li:nth-child(5) .studying_top{background-color:#8878b6;}
.studying_wrap li:nth-child(6) .studying_top{background-color:#b9789a;}

.studying_date{text-align:center; padding:10px 0; line-height:1.2;}
.studying_btn{display:flex; justify-content:center; background-color:#edebec; color:#000; border-radius:4px; padding:7px 0; width:130px; margin:0 auto; transition:0.2s;}
.studying_btn b{color:#794d79; transition:0.2s;}
.studying_btn:hover{background-color:#000; color:#fff;}
.studying_btn:hover b{color:#fff;}

.studying_wrap li.off .studying_top{background-color:#f2f2f2;}
.studying_wrap li.off .studying_img{filter:grayscale(100%);}
.studying_wrap li.off .studying_caption{opacity:0.7;}

@media all and (min-width:960px){
    .studying_wrap li{width:15.2%; margin:2% 0;}
    .studying_caption{font-size:18px;}
}
@media all and (min-width:1280px){
    .studying_caption{font-size:20px;}
}
@media all and (min-width:1440px){
    .studying_caption{font-size:23px;}
}

/** 컨펌 상자 **/
.confirm_wrap{position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000;}
.confirm_area{width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:15px;}
.confirm_box{padding:30px 10px; background-color:#fff; min-width:320px; text-align:center; border-radius:20px; box-shadow:0 0 6px 3px rgba(0,0,0,0.1); border:1px solid #333;}
.confirm_text{line-height:1.7;}
.confirm_btns{display:flex; justify-content:center; padding-top:25px;}
.confirm_btn_1, .confirm_btn_2{padding:8px 15px; color:#fff; border-radius:4px;}
.confirm_btn_1{background-color:#7a4e7a;}
.confirm_btn_2{background-color:#7f7f7f;}

@media all and (min-width:1024px){
    .confirm_area{font-size:18px;}
    .confirm_box{padding:50px 10px; min-width:400px; border-radius:30px;}
    .confirm_btns{padding-top:30px;}
    .confirm_btn_1, .confirm_btn_2{padding:9px 18px; font-size:16px; border-radius:6px;}
}

/** 학습 상세 정보 **/
.sub_title{font-size:22px; color:#111; padding:0 0 25px 5px; font-weight:500;}

.study_child_select{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; position:relative; padding:5px 0 35px 0;}
.study_child_label{width:130px; margin:0 1.7%; cursor:pointer; position:relative;}
.study_child_radio{display:none;}
.study_child_bullet{display:block; width:28px; height:28px; border-radius:50%; position:absolute; left:5%; top:5%; z-index:10; background-color:#fff;}
.study_child_radio:checked + .study_child_bullet{background:url(../images/input_check_violet.png) no-repeat center; background-size:100%; background-color:#fff;}
.study_child_photo{padding-top:107.86%; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; border-radius:20px; background-color:#ededed;}
.study_child_label.none .study_child_photo{background:url(../images/logo_common.png) no-repeat center; background-size:58px; background-color:#674b89; border-radius:20px;}
.study_child_name{text-align:center; color:#333; padding-top:10px; font-size:16px;}

.analysis_search{width:100%; border-collapse:collapse; margin-bottom:20px;}
.analysis_search th{text-align:right;}
.analysis_search td{text-align:left;}
.analysis_excel{display:inline-block; width:150px; height:40px; line-height:39px; background-color:#4fba8a; text-align:center; color:#fff; font-size:16px; font-weight:500; border-radius:12px;}
.analysis_excel_icon{vertical-align:-5px; margin-right:6px;}

.analysis_table_wrap{margin:0 -2px;}
.analysis_table{width:100%; border-spacing:2px; border-collapse:separate; text-align:center; font-size:13px;}
.analysis_table th{color:#fff; background-color:#83a6ff; height:40px; border-radius:10px; font-weight:400;}
.analysis_table td{height:40px; border-radius:10px; color:#222; font-weight:400; background-color:#f2f2f2;}
td.analysis_date{background-color:#bdd0ff;}

.bbs_page{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding-top:30px; font-size:16px;}
.bbs_page img{display:block;}
.bbs_page img.prev{margin-right:10px;}
.bbs_page img.next{margin-left:10px;}
.bbs_page a, .bbs_page span{margin:0 5px;}
.bbs_num{display:block; width:28px; height:28px; line-height:27px; text-align:center; background-color:#f1f1f1; color:#555; border-radius:50%;  font-weight:400; letter-spacing:-1px;}
.bbs_num:hover{background-color:#794d79; color:#fff; font-weight:500; opacity:0.85;}
.bbs_num.active{background-color:#794d79; color:#fff; font-weight:500;}

.bbs_page.library .bbs_num:hover{background-color:#6566ba;}
.bbs_page.library .bbs_num.active{background-color:#6566ba;}

@media all and (min-width:960px){

}
@media all and (min-width:1024px){
    .sub_title{font-size:24px;}
    
    .analysis_table_wrap{margin:0 -5px;}
    .analysis_table{border-spacing:5px; font-size:15px;}
    .analysis_table th{height:48px;}
    .analysis_table td{height:48px;}
    
    .bbs_page{padding-top:40px;}
}

/** 팝업 - 티켓 **/
.pop_ticket_bg{position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(255,255,255,0.8); z-index:2000; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.pop_ticket_wrap{position:relative; width:52%; max-width:1024px;}
.pop_ticket{width:100%; display:block;}
.pop_ticket_close{position:absolute; width:52px; right:-62px; top:0; cursor:pointer;}

@media all and (min-width:960px){
    .pop_ticket_close{width:58px; right:-68px;}
}
@media all and (min-width:1080px){
    .pop_ticket_close{width:62px; right:-72px;}
}
@media all and (min-width:1280px){
    .pop_ticket_close{width:68px; right:-78px;}
}
@media all and (min-width:1440px){
    .pop_ticket_close{width:74px; right:-84px;}
}
@media all and (min-width:1680px){
    .pop_ticket_close{width:82px; right:-92px;}
}
@media all and (min-width:1920px){
    .pop_ticket_close{width:90px; right:-100px;}
}

/** 팝업 - 계정 확인 **/
.account_confirm_wrap{border-radius:20px; padding:20px 0; max-width:640px; width:75%; margin:0 auto;}
.account_confirm_guide{color:#555; line-height:1.5; padding-left:20px; font-size:15px;}
.account_confirm_guide big{font-size:26px; font-weight:500; display:block; color:#333;}
.account_confirm_question{height:80px; line-height:79px; background-color:#edebec; margin:25px 0 20px 0; padding-left:30px; font-size:39px; font-weight:600; color:#007cd9; position:relative; border-radius:30px;}
.account_confirm_character{position:absolute; right:12px; bottom:-7px; width:120px;}
.account_confirm_text{padding-left:20px; color:#555; padding-bottom:15px; font-size:15px;}
.account_confirm_answer{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; padding:0 10px;}
.account_confirm_answer a{width:90px; height:88px; line-height:87px; text-align:center; border-radius:20px; color:#555; font-size:40px; font-weight:600; transition:0.3s; background-color:#edebec;}
.account_confirm_answer a:hover{background-color:#794d79; color:#fff; opacity:0.85;}
.account_confirm_answer a.active{background-color:#794d79; color:#fff;}
.account_confirm_btns{text-align:center; padding-top:30px;}
.account_confirm_btns a{margin:0 5px; width:180px; height:54px; line-height:53px;}


@media all and (min-width:1024px){
    .account_confirm_wrap{padding:80px 0;}
    .account_confirm_guide{font-size:18px;}
    .account_confirm_guide big{font-size:30px;}
    .account_confirm_character{width:139px; bottom:-8px;}
    .account_confirm_text{font-size:18px;}
    .account_confirm_btns{text-align:center; padding-top:40px;}
    .account_confirm_answer a{width:100px; height:98px; line-height:96px; font-size:42px; border-radius:30px;}
}

/** 비밀번호 변경 선택 **/
.pw_select_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.pw_select_table{width:480px; border-collapse:separate; border-spacing:5px; font-size:16px;}
.pw_select_table th, .pw_select_table td{text-align:center; border-radius:10px;}
.pw_select_table th{height:40px; background-color:#e6e6e6; font-weight:400; width:33.33%;}
.pw_select_table td{height:48px; background-color:#f5f5f5;}
.pw_select_btn{display:block; margin:0 auto; background-color:#6566ba; color:#fff; text-align:center; height:30px; line-height:29px; width:92px; border-radius:20px; font-size:14px;}

/** 비밀번호 변경 **/
.pw_ch_wrap{width:360px; text-align:center; margin:0 auto; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.pw_ch_text{font-size:16px; padding:5px 0 15px 0; font-weight:400;}
.pw_input{background-color:#f4f4f4; border-radius:6px; border:0; width:100%; height:48px; padding-left:20px; font-size:16px;}

/** 계정정보 / 회원가입 **/
.sub_area.profile{padding-left:14px; padding-right:14px;}
.account_wrap{padding:30px;}

.account_division{background-color:#794d79; color:#fff; border-radius:10px; text-align:center; font-weight:400; font-size:19px; padding:15px 0;}
.account_table{width:100%; border-collapse:collapse;}
.account_table th{width:120px; text-align:left; padding-left:5px; font-size:14px; font-weight:400; color:#000;}
.account_table th, .account_table td{height:56px; border-bottom:1px solid #ddd;}
.account_table td{padding:10px 0; color:#404040;}
.account_input{background-color:#f4f4f4; border-radius:6px; border:0; width:180px; height:36px; padding-left:10px; font-size:15px;}
.account_input.mail{width:160px;}
.account_select{background-color:#f4f4f4; border-radius:6px; border:0; width:120px; height:36px; padding-left:10px; font-size:15px; vertical-align:top; color:#555;}
.account_select.tel, .account_input.tel{width:120px;}
.account_input.tel:last-of-type{margin-right:4px;}
.account_break{}
.account_input.add_1{width:150px; margin-right:4px;}
.account_input.add_2{width:95%; margin:6px 0;}
.account_input.add_3{width:95%;}
.account_select.birth_2{width:110px; margin-left:4px;}
.account_btn{display:inline-block; width:90px; height:36px; line-height:35px; border-radius:6px; vertical-align:top; text-align:center; color:#fff; background-color:#333; font-size:15px; font-weight:400;}
.account_gender{display:flex; font-size:15px;}
.account_gender .radio_label{margin-right:25px;}

.account_input_text{padding-left:5px;}

.account_select.region_2{width:180px;}
.account_input.coupon{width:250px; margin-bottom:5px;}
.account_coupon_text{line-height:1.8; font-weight:400;}
td.account_cart{width:120px;}

.character_select_wrap{display:flex; padding:15px 0 10px 0;}
.account_img{width:150px; height:150px; border-radius:4px; background-repeat:no-repeat; background-size:cover;}
.character_select_area{padding:0 50px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; width:392px; border-right:1px dashed #ccc;}
.account_caption{padding-bottom:10px; text-align:center; font-weight:500; width:100%;}
.character_select_list{display:flex; width:100%;}
.character_select_list li{margin:0 1.5%; text-align:center;}
.character_select_list label{cursor:pointer;}
.character_select_img{width:50px; height:50px; border-radius:5px; background-repeat:no-repeat; background-size:cover; margin-bottom:7px;}
.character_select_btn_wrap{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:calc(100% - 542px);}
.character_select_text{width:160px; height:40px; background-color:#eee; border-radius:4px; border:0; margin-bottom:5px; padding:0 10px;}
.character_select_btn_area{width:160px; height:40px; position:relative;}
.character_select_btn_hidden{position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.character_select_btn{display:block; width:100%; height:40px; line-height:38px; background-color:#fff; border:1px solid #e3e3e3; border-radius:4px; font-size:17px; color:#3f3f3f; text-align:center;}

.account_add{display:block; background-color:#f4f4f4; padding:17px 0; border-radius:10px; margin:15px 0;}
.account_add img{display:block; margin:0 auto;}
.account_child_table{width:100%; border-collapse:collapse; border-top:1px solid #ddd;}
.account_child_table th, .account_child_table td{border-bottom:1px solid #ddd;}
.account_child_table th{width:122px; padding:12px 0;}
.account_child_character{border-radius:25px; width:122px;}
.account_child_profile{padding-left:45px; line-height:1.8; color:#333; font-size:16px;}

.account_child_set_btn_wrap{text-align:right; vertical-align:top; padding-top:12px;}

.account_child_refresh_btn{display:inline-block; width:44px; height:44px; border-radius:7px; background:url(../images/profile_refresh_icon.png) no-repeat 50%; background-size:26px; background-color: #7bbbb6; margin-right: 8px;}
.account_child_set_btn{display:inline-block; width:44px; height:44px; border-radius:7px; background:url(../images/profile_change_icon.png) no-repeat 50%; background-size:26px; background-color:#794d79;}

.account_input.coupon_input{width:100%; display:block;}
.coupon_btn_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:end; -moz-box-pack:end; -ms-flex-pack:end; -webkit-justify-content:flex-end;}
.coupon_btn_td{width:46px;}
.coupon_btn{width:36px; height:36px; border-radius:7px; background-repeat:no-repeat; background-size:cover; background-color:#794d79; margin-left:10px;}

.coupon_zone_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin:15px 0 15px 0;}
.coupon_zone_area{width:15.4%;}
.coupon_zone{width:100%; padding-top:100%; position:relative; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px;}
.coupon_zone_text{position:absolute; left:0; right:0; top:0; bottom:0; color:#fff; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-weight:400; font-size:18px; transition:0.3s; text-shadow:1px 1px 10px rgba(0,0,0,0.6); font-family:'yg-jalnan';}
.coupon_zone_date{color:#111c3a; text-align:center; font-size:15px; padding-top:10px; font-weight:400;}
.coupon_zone_area.none{opacity:0.35;}

.account_btn_wrap{text-align:center; padding-top:30px;}
.account_btn_wrap a{margin:0 4px;}
.btn_violet.account, .btn_gray.account{width:180px;}

.profile_change_row.account{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;  position:relative; padding:0;}
.profile_change_row.account .profile_change_label{width:22%;}

.profile_change_row.multi{-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;}
.profile_change_row.multi .profile_change_label{margin:1%;}

.account_area{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; flex-wrap:wrap;}

.account_left, .account_right{width:100%;}

@media all and (min-width:960px){ 
    .account_wrap{padding:50px;}
    .account_table th{width:160px; padding-left:25px; font-size:15px;}
    .account_table th, .account_table td{height:56px;}
    .account_table td{font-size:15px;}
    .account_input{width:250px; padding-left:15px; font-size:15px;}
    .account_input.mail{width:180px;}
    .account_select{width:140px; padding-left:15px; font-size:15px;}
    .account_select.tel, .account_input.tel{width:120px;}
    .account_input.add_1{width:150px;}
    .account_select.birth_2{width:110px; margin-left:4px;}
    .account_btn{width:110px;}

    .account_input_text{padding-left:10px;}

    .account_select.region_2{width:200px;}
    .account_input.coupon{width:300px;}
    td.account_cart{width:130px;}
    
    .coupon_zone_text{font-size:19px;}
    .coupon_zone_date{font-size:17px; padding-top:12px;}
}
@media all and (min-width:1024px){
    .sub_area.profile{padding-left:24px; padding-right:24px;}    

    .account_table th{width:195px; padding-left:35px; font-size:16px;}
    .account_table th, .account_table td{height:60px;}
    .account_table td{font-size:16px; padding:12px 0;}
    .account_input{width:280px; height:40px; padding-left:15px; font-size:16px;}
    .account_input.mail{width:200px;}
    .account_select{width:160px; height:40px; padding-left:15px; font-size:16px;}
    .account_select.tel, .account_input.tel{width:130px;}
    .account_input.add_1{width:160px;}
    .account_select.birth_2{width:120px; margin-left:4px;}
    .account_btn{width:125px; height:40px; line-height:37px; font-size:16px;}

    .account_input_text{padding-left:10px;}

    .account_select.region_2{width:220px;}
    .account_input.coupon{width:350px; margin-bottom:10px;}
    td.account_cart{width:140px;}
    
    .coupon_btn_td{width:50px;}
    .coupon_btn{width:40px; height:40px;}
}
@media all and (min-width:1440px){
    
    .account_left, .account_right{width:49%;}
    
    .account_input_text{display:block; padding:10px 0 0 1px;}
    .account_input.mail{width:140px;}
    .account_select.mail{width:140px;}
    
    .account_child_table th{padding:20px 0;}
    .account_child_set_btn_wrap{padding-top:20px;}
    
    .account_input.tel{width:106px;}
    .account_btn{width:110px;}
}

/** 쿠폰 등록 **/
.coupon_regist_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.coupon_regist_area{width:360px;}
.popup_title.coupon_regist{font-size:26px;}
.coupon_regist_text{font-size:18px; color:#555; padding-bottom:25px; text-align:center; font-weight:400;}
.coupon_regist_input{display:block; width:100%; height:50px; background-color:#f4f4f4; text-align:center; font-size:20px; color:#333; border-radius:8px;}

.coupon_regist_btn_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; padding-top:20px;}
.btn_violet.coupon_regist{width:172px; height:47px; line-height:46px;}
.btn_sky.coupon_regist{width:172px; height:47px; line-height:46px;}

.coupon_buy_regist_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.popup_title.coupon_buy_regist{font-size:22px; padding-bottom:30px;}
.coupon_buy_regist_area{width:600px;}

.coupon_buy_zone_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin:5px 0 20px 0;}
.coupon_buy_zone_area{width:16%; margin:0 0.5%;}
.coupon_buy_zone_area:first-of-type{margin-left:0;}
.coupon_buy_zone_area:last-of-type{margin-right:0;}
.coupon_buy_zone{width:100%; padding-top:100%; position:relative; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius:20px;}
.coupon_buy_zone_text{position:absolute; left:0; right:0; top:0; bottom:0; color:#fff; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-weight:400; font-size:14px; transition:0.3s; text-shadow:1px 1px 10px rgba(0,0,0,0.6); font-family:'yg-jalnan';}

.coupon_buy_zone_guide{text-align:center; font-weight:400; color:#555; padding-bottom:20px; font-size:16px;}
.coupon_buy_zone_guide big{display:block; font-size:18px; line-height:1.4; padding-bottom:10px;}
.coupon_buy_zone_guide .red{color:#f00; font-weight:300;}

/** 쿠폰 아이 선택 **/
.coupon_child_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.coupon_child_area{width:100%;}
.coupon_child_row.account{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; position:relative;}
.coupon_child_label{width:170px; margin:0 1.5%; cursor:pointer; position:relative;}
.coupon_child_radio{display:none;}
.coupon_child_bullet{display:block; width:28px; height:28px; border-radius:50%; position:absolute; left:5%; top:5%; z-index:10; background-color:#fff;}
.coupon_child_radio:checked + .coupon_child_bullet{background:url(../images/input_check_violet.png) no-repeat center; background-size:100%; background-color:#fff;}
.coupon_child_photo{padding-top:100%; background-repeat:no-repeat; background-position:center; background-size:80%; position:relative; border-radius:20px; background-color:#fdeada;}
.coupon_child_new{padding-top:100%; background:url(../images/plus_white.png) no-repeat center; background-size:38%; background-color:#784d7a; border-radius:30px;}
.coupon_child_name{text-align:center; color:#fff; padding-top:12px; font-size:18px; font-weight:500;}

.btn_gray.coupon_child{width:172px; height:47px; line-height:46px;}
.btn_sky.coupon_child{width:172px; height:47px; line-height:46px;}

@media all and (min-width:960px){
    .coupon_child_label{width:180px; margin:0 1.2%;}
    .coupon_child_name{padding-top:15px; font-size:19px;}
}
@media all and (min-width:1280px){
    .coupon_child_label{width:240px; margin:0 1.1%;}
    .coupon_child_photo{border-radius:40px;}
    .coupon_child_name{font-size:24px;}
}
@media all and (min-width:1440px){
    .coupon_child_label{width:250px; margin:0 1%;}
    .coupon_child_name{padding-top:20px; font-size:26px;}
}

/** 쿠폰 등록 오류 **/
.coupon_incorrect_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.coupon_incorrect_area{}
.popup_title.coupon_incorrect{font-size:22px; padding-bottom:30px; line-height:1.4;}

/** 휴대폰 인증 **/
.authentication_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.authentication_center{width:550px;}
.btn_violet.authentication{width:250px;}

.popup_title.welcome{font-size:27px; padding-bottom:25px;}

.authentication_text{line-height:1.4; padding:0 0 25px 0; font-size:18px; color:#555; text-align:center; font-weight:400; margin-top:-10px;}
.authentication_area{background-color:#f5f5f5; padding:30px; color:#333; font-size:16px; border-radius:18px;}
.authentication_all_wrap{border-bottom:1px solid #d9d9d9; padding-bottom:12px;}
.authentication_area .check_bullet{border:2px solid #ddd; width:24px; height:24px;}
.authentication_box{display:-webkit-box; display:-ms-flexbox; display:flex; margin-top:15px;}
.authentication_area .check_bullet{border-radius:50%;}
.authentication_area .check_input:checked + .check_bullet{background-image:url(../images/input_check_violet.png);}

.btn_detail{display:inline-block; width:58px; height:26px; line-height:24px; text-align:center; background-color:#fff; color:#444; font-size:13px; margin-left:12px; border-radius:20px; border:1px solid #ddd;}

.btn_violet.authentication{width:300px;}

/** 약관 **/
.provision_wrap{padding:20px 20px 0 20px;}
.provision_area{padding:15px; border:1px solid #ccc; overflow:auto; height:350px; color:#666; line-height:1.7; margin-bottom:20px; text-align:justify; word-break:break-all; background-color:#fafafa;}
.provision_area h4{font-size:16px; padding:15px 0 0 0; color:#333;}
.provision_area b{font-size:15px; padding:10px 0 5px 0; color:#444; display:block;}

@media all and (min-width:700px){
    .provision_area{height:450px;}
}

.popup_title{text-align:center; color:#794d79; font-size:24px; font-weight:500; padding-bottom:20px;}
.popup_title.member{color:#000;}

/** 공지사항 **/
.notice_total{color:#333; padding:0 0 15px 5px; font-size:16px;}
.notice_total b{color:#674b89;}

.notice_list{border-collapse:collapse; border-top:2px solid #674b89; color:#333; font-size:15px;}
.notice_list li{border-bottom:1px solid #ececec;}
.notice_col_1{width:10%; text-align:center;}
.notice_col_2{width:75%; padding:0 10px;}
.notice_col_3{width:15%; text-align:center;}
.notice_list_caption{display:-webkit-box; display:-ms-flexbox; display:flex; height:45px; line-height:44px; text-align:center;}
.notice_caption{display:-webkit-box; display:-ms-flexbox; display:flex; height:50px; line-height:49px; font-weight:400;}
.notice_link{color:#333;}
.notice_link:hover{color:#674b89; text-decoration:underline;}
.notice_content_wrap{display:none;}
.notice_content{display:-webkit-box; display:-ms-flexbox; display:flex; border-top:1px solid #ececec;}
.notice_answer{line-height:1.8; text-align:justify; padding:20px 10px;}

@media all and (min-width:1024px){
    .notice_list{font-size:16px;}
}

/** 자주하는 질문 **/
.faq_total{color:#333; padding:0 0 15px 5px; font-size:16px;}
.faq_total b{color:#674b89;}

.faq_list{border-collapse:collapse; border-top:2px solid #794d79; color:#333; font-size:15px;}
.faq_list li{border-bottom:1px solid #ececec;}
.faq_col_1{width:10%; text-align:center;}
.faq_col_2{width:15%; text-align:center;}
.faq_col_3{width:75%; padding:0 10px;}
.faq_list_caption{display:-webkit-box; display:-ms-flexbox; display:flex; height:45px; line-height:44px; text-align:center;}
.faq_caption{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:15px 0; font-weight:400; line-height:1.45;}
.faq_link{color:#333; text-align:justify;}
.faq_link:hover{color:#674b89; text-decoration:underline;}
.faq_content_wrap{display:none;}
.faq_content{display:-webkit-box; display:-ms-flexbox; display:flex; border-top:1px solid #ececec;}
.faq_answer{line-height:1.8; text-align:justify; padding:20px 10px;}

@media all and (min-width:1024px){
    .faq_list{font-size:16px;}
}

/** 문의하기 **/
.qna_list{width:100%; border-collapse:collapse; border-top:2px solid #794d79; color:#333; font-size:15px;}
.qna_list th{height:45px; border-bottom:1px solid #ececec; font-weight:300;}
.qna_list td{height:50px; padding:5px 0; text-align:center; border-bottom:1px solid #ececec;}
td.qna_link{padding:8px 10px; text-align:justify; line-height:1.45;}
td.qna_link a{color:#333; font-weight:400;}
td.qna_link a:hover{color:#674b89; text-decoration:underline;}

.qna_state{display:inline-block; width:80px; height:34px; line-height:33px; text-align:center; color:#fff; border-radius:10px; font-size:15px; font-weight:400; letter-spacing:-0.5px;}
.qna_state.before{background-color:#83a6ff;}
.qna_state.complete{background-color:#794d79;}
.qna_state.hold{background-color:#f7828c;}

.qna_text{width:100%; border-collapse:collapse; margin-bottom:3%;}
.qna_text img{margin-right:10px;}
.qna_text td{font-size:15px; line-height:1.5;}

.qna_form{width:100%; border-collapse:collapse; border-top:2px solid #794d79; color:#333; font-size:15px;}
.qna_form th{padding-left:30px; text-align:left; font-weight:500; border-bottom:1px solid #ececec;}
.qna_form td{padding:15px 15px 15px 0; border-bottom:1px solid #ececec; height:70px; text-align:justify; line-height:1.8;}
.qna_select{width:270px; height:50px; background-color:#f4f4f4; padding-left:20px; font-size:16px; border-radius:12px;}
.qna_textarea{display:block; width:100%; height:200px; background-color:#f4f4f4; padding:20px; font-size:16px; border-radius:12px;}

.qna_add_file{display:inline-block; margin:0 15px 0 0;}
.qna_add_file_btn{display:inline-block; width:120px; height:36px; line-height:35px; background-color:#794d79; border-radius:10px; text-align:center; color:#fff; font-size:14px;}
.qna_add_file_icon{display:inline-block; width:23px; height:36px; background:url(../images/file_add_white.png) no-repeat center; background-size:23px; vertical-align:top;}
.qna_add_file_del{cursor:pointer; font-size:18px; vertical-align:-2px;}

.qna_add_area{display:inline-block; width:260px; height:50px; position:relative; margin-right:15px; margin:0 15px 0 0;}
.qna_add_input{width:200px; height:50px; background-color:#f4f4f4; border-radius:12px; border:0; padding:0 15px;}
.qna_add_hidden{position:absolute; left:210px; top:0; width:52px; height:100%; opacity:0; cursor:pointer; z-index:20;}
.qna_add_btn{position:absolute; right:0; top:0; width:52px; height:50px; border-radius:12px; border:2px solid #ddd; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; z-index:10;}
.qna_add_btn_icon{width:32px;}

.qna_btn_wrap{padding-top:30px; text-align:center;}
.qna_btn_wrap a{margin:0 4px;}

@media all and (min-width:1024px){
    .qna_list, .qna_form, .qna_text td{font-size:16px;}
    
    .qna_form th{padding-left:40px;}
    
    .qna_btn_wrap{padding-top:40px;}
}

/** 멀티미디어관 **/
.multi_wrap{position:fixed; left:3%; right:3%; top:90px; bottom:3%; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; align-content:flex-start; padding:0 2%; overflow:auto;}
.multi_area{width:32%; margin:0 2% 4% 0; color:#555; text-align:center; transition:0.2s;}
.multi_area.lock{opacity:0.35;}
.multi_area:nth-child(3n){margin-right:0;}
.multi_area:hover{color:#794d79;}
.multi_thumbnail{padding-top:75%; background-repeat:no-repeat; background-position:center; background-size:cover; margin-bottom:6px;}
.multi_caption{font-weight:400; white-space:normal; line-height:1.35; height:2.7em;  word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:15px;}
.multi_step{margin-top:3px; font-size:15px;}

.multi_wrap::-webkit-scrollbar{width:4px;}
.multi_wrap::-webkit-scrollbar-track{background-color:transparent;}
.multi_wrap::-webkit-scrollbar-thumb{border-radius:4px; background-color:#794d79;}
.multi_wrap::-webkit-scrollbar-button{width:0; height:0;}

@media all and (min-width:960px){
    .multi_wrap{top:100px;}
    .multi_caption, .multi_step{font-size:16px;}
}
@media all and (min-width:1080px){
    .multi_area{width:23.5%; margin:0 2% 3% 0;}
    .multi_area:nth-child(3n){margin-right:2%;}
    .multi_area:nth-child(4n){margin-right:0;}
    .multi_thumbnail{margin-bottom:8px;}
    .multi_step{margin-top:4px;}
}
@media all and (min-width:1280px){
    .multi_wrap{top:125px;}
    .multi_caption, .multi_step{font-size:17px;}
}
@media all and (min-width:1440px){
    .multi_wrap{top:130px;}
    .multi_caption, .multi_step{font-size:18px;}
}

/** 아이템 리스트 **/
.object_summary_wrap{font-family:'ONE-Mobile-POP'; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.object_summary_area{width:204px; height:57.34px; line-height:59px; background:url(../images/object_total.png) no-repeat; background-size:cover; margin:0 12px; position:relative; text-align:center;}
.object_summary{position:absolute; height:100%; left:27.84%; right:4.05%;}

.object_list{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; position:fixed; left:2%; right:2%; bottom:0; top:95px; align-content:flex-start; padding:0 2.5%; overflow:auto;}
.object_list li{width:31%; margin:0 3.5% 3.5% 0;}
.object_list li:nth-child(3n){margin-right:0;}
.object_img{position:relative; padding-top:100%; background-repeat:no-repeat; background-position:center; background-size:cover; background-color:#f0f0f0;}
.object_count_wrap, .object_plus{position:absolute;}
.object_count_wrap{left:-5%; bottom:-4%; width:112px; height:59.94px; line-height:61px; background:url(../images/object_count.png) no-repeat; background-size:cover;}
.object_count{position:absolute; left:47.18%; right:7.04%; height:100%; font-family:'ONE-Mobile-POP'; text-align:center; font-size:20px;}
.object_plus{right:-3%; bottom:-4%; width:60px; cursor:pointer;}

.object_btn{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:100px; height:40px; margin:20px auto 0 auto; font-size:21px; color:#fff; border-radius:30px;}
.object_btn.on{background-color:#d7d7d7;}
.object_btn.off{background-color:#957bdb;}

.object_preview{display:block; width:100%;}

.object_list::-webkit-scrollbar {
  width:4px;
}
.object_list::-webkit-scrollbar-track {
  background-color: transparent;
}
.object_list::-webkit-scrollbar-thumb {
  border-radius:3px; background-color:rgba(121,77,121,0.8);
}
.object_list::-webkit-scrollbar-button {
  width:0; height:0;
}

@media all and (min-width:960px){
    .object_summary_area{width:240px; height:67.46px; line-height:69px; font-size:16px;}
    
    .object_list{top:105px;}
    .object_count_wrap{width:142px; height:76px; line-height:77px;}
    .object_count{font-size:30px;}
    .object_plus{width:76px;}

    .object_btn{width:132px; height:48px; margin:25px auto 0 auto; font-size:29px;}   
}
@media all and (min-width:1080px){
    .object_summary_area{width:270px; height:75.89px; line-height:77px; font-size:18px;}
    
    .object_list{top:115px;}
    .object_list li{width:23.5%; margin:0 2% 2% 0;}
    .object_list li:nth-child(3n){margin-right:2%;}
    .object_list li:nth-child(4n){margin-right:0;}
    
    .object_count_wrap{width:112px; height:59.94px; line-height:61px;}
    .object_count{font-size:20px;}
    .object_plus{width:60px;}

    .object_btn{width:100px; height:40px; margin:20px auto 0 auto; font-size:21px;}
}
@media all and (min-width:1280px){
    .object_summary_area{width:320px; height:89.95px; line-height:91px; font-size:21px; margin:0 25px;}
    
    .object_list{top:140px;}
    .object_count_wrap{width:142px; height:76px; line-height:77px;}
    .object_count{font-size:30px;}
    .object_plus{width:76px;}

    .object_btn{width:132px; height:48px; margin:25px auto 0 auto; font-size:28px;} 
}
@media all and (min-width:1440px){
    .object_summary_area{width:370px; height:104px; line-height:105px; font-size:24px;}
    
    .object_list{top:165px;}
}

/** 수업화면 **/
.class_wrap{height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin:0 auto; position:relative; z-index:1;}
.class_area{background-color:rgba(255,255,255,0.5); border-radius:20px; width:100%; padding:10px;}
.class_title{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; align-items:center; font-family:'ONE-Mobile-POP'; letter-spacing:1px; margin-bottom:5px; position:relative;}
.class_caption{display:flex; align-items:center;}
.class_back{width:30px; height:30px; background:url(../images/class_back.png) no-repeat; background-size:cover; cursor:pointer;}
.class_caption_phase{font-weight:400; text-shadow:1px 1px 1px rgba(0,0,0,0.55); font-size:18px;}
.class_caption_book{color:#fff; font-weight:400; padding-left:10px; text-shadow:1px 1px 1px rgba(0,0,0,0.55); font-size:18px;}
.class_caption_bottom{font-size:12px; color:#fafafa; text-shadow:1px 1px 1px rgba(0,0,0,0.55); padding-top:3px;}
.class_reset{position:absolute; top:-10px; z-index:1000; padding:6px 12px; background-color:rgba(255,255,255,0.85); border-radius:8px; color:#000;}
.class_title_right{display:flex; justify-content:flex-end; align-items:center; width:68%;}
.class_progress_wrap{width:80%; position:relative; z-index:10; margin-right:5px;}
.class_progress_bg{display:block; width:100%; position:relative;}
.class_progress_area{position:absolute; width:93.2%; left:3.5%; top:29%;}
.class_progress{display:block; width:100%;}
.class_progress_cover{position:absolute; right:0; top:0; width:100%; height:100%; background-color:#bfbebe; border-radius:3px;}
.class_progress_break{position:absolute; width:18px; top:-18px; margin-left:-9px;}

.break_guide_wrap{position:absolute; right:0; top:7px; width:100%; font-family:'Noto Sans KR', sans-serif; background-color:rgba(255,255,255,0.9); border-radius:10px; padding:10px 15px; line-height:1.7; width:100%; border:3px solid #fff; box-shadow:0 0 6px 3px rgba(0,0,0,0.1); color:#333; font-family:'ONE-Mobile-POP'; font-weight:100; display:none;}
.break_guide_wrap li{position:relative; padding-left:12px;}
.break_guide_wrap li:before{content:''; position:absolute; left:0; top:9px; width:4px; height:4px; border-radius:50%; background-color:#555;}

.break_icon{width:18px; vertical-align:-3px; margin-right:1px;}
.break_num{color:#d24015;}

.class_btn_wrap{display:flex;}
.break_guide_btn{width:40px; height:40px;}
.break_guide_icon{display:block; width:100%;}

.class_close_btn{width:40px; height:40px;}
.class_close{display:block; width:100%;}

.class_start_wrap{position:relative;}
.class_start{padding-top:56.25%; background-repeat:no-repeat; background-size:cover; position:relative;}
.class_start.quiz{background-image:url(../images/start_bg_quiz.jpg);}
.class_start.activity{background-image:url(../images/start_bg_activity.jpg);}
.class_start.ebook{background-image:url(../images/start_bg_ebook.jpg);}

.ready_easyutter{width:100%; height:100%; background:url(../images/ready_easyutter.png) no-repeat 50% 50%; background-size:cover; position:absolute; left:0; top:0;}
.ready_easyutter_link{position:absolute; left:41.8%; right:43.4%; top:43%; bottom:39.2%;}

.class_start_iframe{position:absolute; left:0; top:0; width:100%; height:100%; border:0;}

.class_area.one .class_caption_phase{color:#90bd7a;}
.class_area.two .class_caption_phase{color:#74a0a9;}
.class_area.three .class_caption_phase{color:#6d96ce;}
.class_area.four .class_caption_phase{color:#7bbbb6;}
.class_area.five .class_caption_phase{color:#8878b6;}
.class_area.six .class_caption_phase{color:#b9789a;}


@media all and (min-width:960px){ 
    .class_caption{padding-top:4px;}
    .class_caption_phase{font-size:23px;}
    .class_caption_book{padding-left:10px; font-size:23px;}
    .class_caption_bottom{font-size:14px; padding-top:5px;}

    .class_progress_cover{border-radius:4px;}
    .class_progress_break{width:22px; top:-22px; margin-left:-11px;}
    .break_guide_btn, .class_close_btn{width:44px; height:44px;}
    
    .class_reset{top:-8px;}
}
@media all and (min-width:1080px){
    .class_caption{padding-top:5px;}
    .class_caption_phase{font-size:25px;}
    .class_caption_book{padding-left:10px; font-size:25px;}
    .class_caption_bottom{font-size:15px; padding-top:5px;}

    .class_progress_cover{border-radius:4px;}
    .class_progress_break{width:24px; top:-24px; margin-left:-12px;}
    .break_guide_btn, .class_close_btn{width:52px; height:52px;}
    
    .break_guide_wrap{padding:15px 20px; top:10px; font-size:15px;}
    .break_guide_wrap li:before{top:10px;}
    

}
@media all and (min-width:1280px){
    .class_area{width:80%;}
    .class_caption{padding-top:6px;}
    .class_caption_phase{font-size:26px;}
    .class_caption_book{padding-left:10px; font-size:26px;}
    .class_caption_bottom{font-size:16px; padding-top:5px;}
    .class_progress_wrap{margin-right:10px;}
    .class_progress_area{top:29.2%;}
    .break_guide_btn, .class_close_btn{width:54px; height:54px;}
    
    .class_reset{top:-10px;}
}
@media all and (min-width:1440px){
    .class_area{padding:15px;}
    .class_caption{padding-top:8px;}
    .class_caption_phase{font-size:28px; text-shadow:2px 2px 1px rgba(0,0,0,0.55);}
    .class_caption_book{padding-left:10px; font-size:28px; text-shadow:2px 2px 1px rgba(0,0,0,0.55);}
    .class_caption_bottom{font-size:17px; padding-top:4px; text-shadow:2px 2px 1px rgba(0,0,0,0.5);}

    .class_progress_area{left:3.4%; top:29.8%;}
    .class_progress_break{width:26px; top:-26px; margin-left:-13px;}
    .break_guide_btn, .class_close_btn{width:58px; height:58px;}
    
    .break_guide_wrap{top:11px; font-size:16px;}
    .break_guide_wrap li:before{top:11px;}    
    
    .class_reset{top:-15px;}
}
@media all and (min-width:1680px){    
    .class_area{padding:20px;}
    .class_title{margin-bottom:10px;}
    .class_caption{padding-top:10px;}
    .class_caption_phase{font-size:32px; text-shadow:3px 3px 1px rgba(0,0,0,0.55);}
    .class_caption_book{padding-left:15px; font-size:32px; text-shadow:3px 3px 1px rgba(0,0,0,0.55);}
    .class_caption_bottom{font-size:18px; padding-top:5px; text-shadow:3px 3px 1px rgba(0,0,0,0.5);}

    .class_progress_area{left:3.4%;}
    .class_progress_break{width:28px; top:-28px; margin-left:-14px;}
    .break_guide_btn, .class_close_btn{width:80px; height:80px;}
    
    .break_guide_wrap{top:14px;}
    

}
@media all and (min-width:1920px){
    .class_area{width:1350px; padding:25px;}
    .class_caption_phase{font-size:35px;}
    .class_caption_book{padding-left:15px; font-size:35px;}
    .class_caption_bottom{font-size:19px; padding-top:6px;}

    .class_progress_break{width:30px; top:-30px; margin-left:-15px;}
    .break_guide_btn, .class_close_btn{width:86px; height:86px;}
    
    .break_guide_wrap{font-size:18px;} 
    .break_guide_wrap li:before{top:12px;} 
}

/** 시작 화면 **/
.class_start_btn{position:absolute; left:0; right:0; top:0; bottom:0;}

/** 팝업 - 이북 버튼 **/
.pop_study_bg{position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.7); z-index:1000;}
.pop_study_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}
.ebook_save_btn{width:10%; max-width:152px; cursor:pointer;}
.ebook_select_btn{width:10%; max-width:158px; cursor:pointer; margin:0 10px;}

@media all and (min-width:1080px){
    .ebook_select_btn{margin:0 15px;}
}
@media all and (min-width:1440px){
    .ebook_select_btn{margin:0 20px;}
}
@media all and (min-width:1680px){
    .ebook_select_btn{margin:0 25px;}
}

/** 팝업 - 퀴즈 종료 **/
.pop_quiz_result{background-color:#fff; border-radius:40px; padding:0 50px 25px 50px; text-align:center;}
.pop_quiz_character{display:block; margin:-70px auto 0 auto;}
.pop_quiz_score{font-family:'yg-jalnan'; padding:10px 0 15px 0; font-size:40px;}
.pop_quiz_score_color{color:#6787b7;}
.quiz_result_btn{margin:0 5px; width:50px; cursor:pointer;}

@media all and (min-width:962px){
    .pop_quiz_result{padding:0 50px 25px 50px;}
    .pop_quiz_score{font-size:52px;}
    .quiz_result_btn{margin:0 10px; width:60px;}    
}
@media all and (min-width:1280px){
    .pop_quiz_result{padding:0 70px 40px 70px;}
    .pop_quiz_score{font-size:72px; padding:15px 0 20px 0;}
    .quiz_result_btn{margin:0 15px; width:79px;}    
}
@media all and (min-width:1680px){
    .pop_quiz_result{padding:0 80px 50px 80px;}
    .pop_quiz_score{font-size:90px; padding:25px 0 30px 0;}
    .quiz_result_btn{margin:0 15px; width:79px;}    
}