sdfsf
*/
/* #channel_complete
----------------------------------------------------- */
.info_page {
padding: 100px 20px;
}
.info_page > i {
margin-bottom: 45px;
}
.info_page h4 {
font-weight: 700;
font-size: 24px;
line-height: 120%;
padding-bottom: 20px;
color: #3c3c3c;
text-align: center;
}
.info_page .info_message {
line-height: 20px;
color: #a0a0a0;
font-size: 14px;
font-weight: 400;
padding-bottom: 40px;
text-align: center;
}
.info_page .info_message span {
margin-bottom: 30px;
display: block;
}
.medium_btn_box {
text-align: center;
}
.medium_btn_box > * {
display: inline-block;
margin: 0 4px;
}
.wrapper:not(.login_flow) .move_scale_01 {
width: 140px;
height: 140px;
}
.ic_complete_01 {
background-image: url('../images/img_complete_01.png');
position: relative;
}
.ic_complete_01:before {
content: '';
position: absolute;
display: block;
left: 55px;
top: 54px;
width: 0;
height: 41px;
background: url('../images/img_complete_ic_01.png') left top no-repeat;
background-size: auto 100%;
}
.ic_complete_01:before {
opacity: 1;
}
@keyframes slide_right {
0% {
width: 0;
}
100% {
width: 51px;
}
}
.ic_complete_01.active:before {
animation-name: slide_right;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.57, 1.58);
}
.ic_complete_02 {
background-image: url('../images/img_class_01.png');
position: relative;
}
.ic_complete_02:before {
content: '';
position: absolute;
display: block;
left: 47px;
top: 53px;
width: 0;
height: 16.13px;
background: url('../images/img_class_02.png') left top no-repeat;
background-size: auto 100%;
}
.ic_complete_02:before {
opacity: 1;
}
.ic_complete_02.active:before {
animation-name: slide_right;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.57, 1.58);
}
.ic_complete_02:after {
content: '';
position: absolute;
display: block;
left: 74px;
top: 76px;
width: 15px;
height: 12.27px;
background: url('../images/img_class_03.png') left top no-repeat;
background-size: 100% auto;
}
.ic_complete_02:after,
.ic_error:after {
opacity: 0;
}
@keyframes move_light {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ic_complete_02.active:after,
.ic_error:after {
animation-name: move_light;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 1.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.57, 1.58);
}
/* #404_error
----------------------------------------------------- */
.ic_error {
background-image: url('../images/img_error_01.png');
}
.ic_error:before {
content: '';
position: absolute;
display: block;
left: 0;
top: 20px;
width: 100%;
height: 100%;
background: url('../images/img_error_02.png') center center no-repeat;
background-size: auto 100%;
}
.ic_error:after {
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../images/img_error_03.png') center center no-repeat;
background-size: auto 100%;
}
/* #class finish
----------------------------------------------------- */
.ic_finish {
background-image: url('../images/img_class_finish_01.png');
}
.ic_finish span {
content: '';
position: absolute;
display: block;
left: 20px;
top: 0;
width: 100%;
height: 100%;
background: url('../images/img_class_finish_02.png') center center no-repeat;
background-size: auto 100%;
}
.ic_finish span:after {
content: '';
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../images/img_class_finish_03.png') center center no-repeat;
background-size: auto 100%;
}
/* #channel_view
----------------------------------------------------- */
.class_items {
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.class_items > .class_item {
margin-right: 12px;
display: inline-block;
width: 210px;
margin-bottom: 30px;
}
.item_thumnail a > img {
display: block;
width: 100%;
height: auto;
}
.channel_view_page .sub_swiper {
display: none;
}
.channel_view_page .cm_comment_main > .cm_layout:first-child {
border-top: 1px solid #f0f0f0;
}
.channel_view_banner {
z-index: 0;
width: 100%;
height: 0;
position: relative;
padding-top: 18.767%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.channel_view_banner img {
width: 100%;
height: auto;
display: block;
}
.channel_view_banner_fix {
position: fixed;
width: 100%;
background-color: #ffffff;
display: block;
top: 70px;
}
.side_open .channel_view_banner_fix {
padding-left: 240px;
width: 100%;
right: 0;
}
.channel_view_wrap {
background-color: #ffffff;
z-index: 1;
width: 100%;
height: auto;
position: relative;
}
.btn_channel_title_setting {
width: 36px;
height: 36px;
display: block;
background-image: url('../images/btn_title_set_n.png');
z-index: 1;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
position: absolute;
top: 16px;
right: 16px;
}
.btn_channel_title_setting:hover,
.btn_channel_title_setting:active {
background-image: url('../images/btn_title_set_o.png');
}
.channel_view_title {
width: 100%;
height: auto;
position: relative;
}
.channel_view_title > * {
padding: 22px 25px 8px 8px;
overflow: hidden;
}
.channel_view_profile {
overflow: hidden;
line-height: 60px;
float: left;
}
.channel_view_profile > * {
vertical-align: middle;
display: inline-block !important;
}
.channel_view_profile .img_shadow {
width: 60px;
height: 60px;
display: block;
}
.channel_view_profile h5 {
font-size: 20px;
color: #3c3c3c;
font-weight: 700;
margin-left: 20px;
display: block;
line-height: 22px;
}
.channel_view_profile h5 span {
display: inline-block;
margin-top: 6px;
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
}
.channel_view_button {
float: right;
padding-top: 12px;
}
.channel_view_button > * {
float: left;
display: inline-block;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 25px;
margin-left: 6px;
border-radius: 4px;
font-size: 16px;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.channel_view_button > * i {
display: inline-block;
width: 14px;
height: 100%;
vertical-align: middle;
margin-top: -2px;
background-image: url('../images/btn_title_set_n.png');
z-index: 1;
margin-right: 6px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 14px;
}
.btn_class_add i {
background-image: url('../images/ic_add.png');
}
.btn_channel_share i {
background-image: url('../images/ic_share.png');
}
.btn_channel_edit i {
background-image: url('../images/ic_pencil_edit.png');
}
.channel_view_tab {
position: relative;
height: 57px;
}
.channel_view_tab.active .channel_view_tab_fix {
position: fixed;
top: 70px;
z-index: 100;
}
.side_open .channel_view_tab.active .channel_view_tab_fix {
right: 0;
padding-left: 240px;
}
.channel_view_tab_fix {
border-bottom: 1px solid #f5f5f5;
background-color: #ffffff;
width: 100%;
height: auto;
opacity: 1;
-webkit-transition: opacity 0.2s ease-out 0s;
visibility: visible;
transition: opacity 0.2s ease-out 0s;
}
.channel_view_tab_fix.hide {
opacity: 0;
visibility: hidden;
}
.channel_view_tab_button {
overflow: hidden;
padding-top: 23px;
}
.channel_view_tab_button button {
float: left;
display: inline-block;
margin: 0 25px;
width: auto;
}
.channel_view_tab_button button span {
display: inline-block;
color: #b4b4b4;
font-size: 14px;
font-weight: 500;
padding-bottom: 19px;
position: relative;
}
.channel_view_tab_button button.active span,
.channel_view_tab_button button:hover span {
color: #3c3c3c;
}
.channel_view_tab_button button span::after {
content: '';
position: absolute;
width: 0;
height: 100%;
left: 50%;
bottom: 0;
border-bottom: 3px solid #ff6000;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.channel_view_tab_button button:hover span::after,
.channel_view_tab_button button.active span::after {
width: 100%;
left: 0;
border-bottom-color: #ff6000;
}
[class*='swiper-container'] {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.channel_view_tab_content {
}
.channel_view_tab_content > div {
visibility: hidden;
z-index: 0;
opacity: 0;
height: 0;
}
.channel_view_tab_content > div.active {
visibility: visible;
z-index: 1;
opacity: 1;
height: auto;
}
.channel_view_content {
width: 100%;
position: relative;
}
/* channel_view_class */
.channel_view_class_content {
padding-bottom: 60px !important;
position: relative;
}
.waiting_approval_list,
.private_list {
position: relative;
}
.channel_view_class_wrap [class*='swiper-button-next'],
.sub_swiper [class*='swiper-button-next'] {
background-image: url(../images/btn_card_next_n.png);
right: -18px;
left: auto;
}
.channel_view_class_wrap [class*='swiper-button-prev'],
.sub_swiper [class*='swiper-button-prev'] {
background-image: url(../images/btn_card_prev_n.png);
left: -18px;
right: auto;
}
.channel_view_class_wrap [class*='swiper-button-'] {
position: absolute;
top: 34px;
width: 40px;
height: 50px;
margin-top: 0;
z-index: 10;
cursor: pointer;
background-size: 40px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.sub_swiper .channel_card {
margin-bottom: 0;
width: 210px !important;
}
.sub_swiper [class*='swiper-button-'] {
position: absolute;
top: 87px;
width: 40px;
height: 50px;
margin-top: 0;
z-index: 10;
cursor: pointer;
background-size: 40px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.sub_swiper .swiper-button-next-05,
.sub_swiper .swiper-button-prev-05 {
top: 50%;
margin-top: -25px;
}
.class_item {
width: 210px !important;
}
.class_item .item_thumnail {
width: 210px;
height: 118px;
background: url('../images/dim_item_thumnail.png') center center no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
}
.item_thumnail {
}
.item_thumnail a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.item_thumnail a > div {
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 0;
position: relative;
padding-top: 56.2%;
}
.item_thumnail a > i {
display: none;
}
.item_thumnail a > span {
display: block;
position: absolute;
left: 0;
top: 0;
background: url('../images/ic_new.png') left top no-repeat;
width: 56px;
height: 56px;
background-size: 100% auto;
}
.card_control {
right: 0;
top: 0;
}
.card_control .card_control_option {
position: absolute;
right: 0;
top: 0;
opacity: 0;
visibility: hidden;
width: 0;
height: 0;
background-color: rgba(70, 70, 70, 0.96);
-webkit-transition: all 0.2s;
transition: all 0.2s;
z-index: 2;
}
.card_control_option.active {
width: 100%;
height: 100%;
opacity: 1;
visibility: visible;
}
.card_control .btn_card_control_open {
position: absolute;
right: 0;
top: 0;
width: 46px;
height: 46px;
background-color: rgba(70, 70, 70, 0.7);
background-image: url(../images/btn_card_option_more_n.png);
background-size: 4px auto;
background-repeat: no-repeat;
background-position: center center;
}
.card_control .btn_card_control_open:hover,
.card_control .btn_card_control_open:active {
background-image: url(../images/btn_card_option_more_o.png);
}
.card_control_option .btn_card_control_close {
width: 46px;
height: 46px;
position: absolute;
right: 0;
top: 0;
background-image: url(../images/btn_card_option_cancel_n.png);
background-size: 14px auto;
background-repeat: no-repeat;
background-position: center center;
}
.card_control_option .btn_card_control_close:hover,
.card_control_option .btn_card_control_close:active {
background-image: url(../images/btn_card_option_cancel_o.png);
}
.card_control ul {
padding: 20px;
}
.card_control ul li {
display: block;
}
.card_control ul li button,
.card_control ul li > * {
padding-top: 15px;
display: block;
width: 100%;
line-height: 120%;
font-weight: 700;
font-size: 14px;
color: #ffffff;
text-align: left;
}
.card_control ul li:first-child > * {
padding-top: 0 !important;
}
.card_control ul li:hover > * {
opacity: 0.6;
}
.class_item .item_info {
width: 210px;
height: 28px;
/* background: url('../images/dim_item_info.png') center center no-repeat;background-size:100% 100%;}*/
overflow: hidden;
position: relative;
background-color: #f8f8f8;
}
.item_info {
}
.item_info .item_type {
float: left;
height: 100%;
}
.item_info .item_type > i {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 100%;
background-image: url(../images/ic_info_class_default.png);
background-size: 14px auto;
background-repeat: no-repeat;
background-position: center center;
}
.item_info .item_type > i.ic_type_01 {
background-image: url(../images/ic_info_class_01.png);
}
.item_info .item_type > i.ic_type_02 {
background-image: url(../images/ic_info_class_02.png);
}
.item_info .item_type > i.ic_type_03 {
background-image: url(../images/ic_info_class_03.png);
}
.item_info .item_type > span {
font-size: 11px;
font-weight: 500;
color: #a0a0a0;
display: inline-block;
/* vertical-align: middle; */
line-height: 120%;
}
.item_info .item_rating {
float: right;
height: 100%;
text-align: right;
display: none;
}
.item_info .item_rating > span {
font-size: 11px;
margin-right: 2px;
font-weight: 500;
color: #a0a0a0;
display: inline-block;
/* vertical-align: middle; */
line-height: 120%;
}
.item_info .item_rating > i {
display: inline-block;
vertical-align: middle;
width: 21px;
height: 100%;
background-image: url(../images/ic_info_star_n.png);
background-size: 14px auto;
background-repeat: no-repeat;
background-position: left center;
}
.class_item .item_detail {
width: 210px;
height: 125px;
/* background: url('../images/dim_item_detail.png') center center no-repeat;background-size:100% 100%;*/
overflow: hidden;
position: relative;
}
.item_detail {
}
.item_detail a {
display: block;
margin: 0 8px;
padding-top: 12px;
background-color: #ffffff;
height: 100%;
position: relative;
}
.item_detail .item_name {
max-height: 36px;
line-height: 18px;
font-size: 14px;
font-weight: 500;
color: #3c3c3c;
overflow: hidden;
}
.item_detail .item_channel {
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
padding-top: 8px;
line-height: 13px;
}
.item_detail .item_live {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
}
.item_detail .item_price {
position: absolute;
left: 0;
height: 38px;
bottom: 12px;
width: 100%;
}
.item_detail .item_paid {
display: table;
height: 100%;
width: 100%;
position: relative;
}
.item_detail .item_paid > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: bottom;
}
.item_detail .item_discount_price {
text-align: left;
font-size: 16px;
font-weight: 500;
color: #3c3c3c;
line-height: 120%;
}
.item_detail .item_discount_price span {
display: block;
text-decoration: line-through;
color: #c8c8c8;
margin-bottom: 4px;
font-size: 14px;
font-weight: 400;
}
.item_detail .item_discount_rate {
font-size: 16px;
color: #fe4d3d;
font-weight: 700;
line-height: 120%;
text-align: right;
width: 70px;
}
.item_detail .item_discount_rate i {
display: inline-block;
width: 12px;
height: 14px;
background: url('../images/ic_discount.png') center center no-repeat;
background-size: 100% auto;
overflow: hidden;
position: relative;
vertical-align: middle;
margin-left: 8px;
}
.item_detail .item_free {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 55px;
height: 26px;
background: url('../images/ic_free.png') center center no-repeat;
background-size: 100% auto;
overflow: hidden;
}
/*
.private_list, .waiting_approval_list{-webkit-transform: translateX(6px);
-ms-transform: translateX(6px);
transform: translateX(6px);}
*/
.mypage_view_page .sub_swiper {
display: none;
}
.channel_view_class_content h5,
.mypage_class_wrap h5,
.mypage_channel_wrap h5,
.mypage_certificate_wrap h5 {
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
line-height: 120%;
padding-top: 60px;
padding-bottom: 30px;
}
.channel_view_class_content h5 p {
padding-top: 14px;
font-size: 13px;
font-weight: 400;
color: #a0a0a0;
line-height: 120%;
}
.btn_mypage_list_more {
position: relative;
width: 100%;
text-align: left;
}
.btn_mypage_list_more h5 {
padding-top: 20px;
padding-bottom: 20px;
}
.btn_mypage_list_more + div.class_items {
overflow-y: visible;
max-height: 100%;
height: auto;
}
.btn_mypage_list_more i {
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background-image: url(../images/btn_arrow_dropdown_n.png);
display: block;
background-size: 10px auto;
background-repeat: no-repeat;
background-position: center center;
}
.btn_mypage_list_more.active i {
background-image: url(../images/btn_arrow_dropup_s.png);
}
/* channel_view_community */
.channel_view_community_content {
padding: 40px 25px 0 25px;
position: relative;
}
.channel_view_community_content > hr {
margin-top: 40px;
}
.cm_post_write + hr {
background-color: #f5f5f5;
}
.cm_post_write,
.cm_post_main {
display: block;
position: relative;
width: 100%;
}
.cm_post_main > .cm_layout {
border-bottom: 1px solid #f0f0f0;
}
.cm_layout {
display: table;
position: relative;
width: 100%;
}
.cm_layout > * {
display: table-cell;
width: auto;
position: relative;
}
.cm_comment_main .cm_layout > .cm_main_sect,
.cm_post_wrap {
padding-right: 40px;
}
.cm_layout > .cm_profile_sect {
width: 64px;
text-align: left;
vertical-align: top;
position: relative;
}
.cm_profile_sect .img_shadow {
width: 42px;
height: 42px;
display: inline-block;
}
.form_post_write {
padding: 12px;
border: 1px solid #e6e6e6;
margin-bottom: 14px;
}
.cm_main_sect .form_post_write {
border-color: #f4ae8f;
}
.form_post_write .form_textarea {
border: 0;
padding: 0;
min-height: 76px;
}
.form_post_write .form_textarea + .img_upload_preview {
margin-top: 12px;
}
.img_upload_preview {
overflow: hidden;
}
.img_upload_preview > .img_preview_item:first-child {
margin-left: 0;
}
.img_preview_item {
width: 80px;
height: 80%;
margin-left: 12px;
float: left;
position: relative;
}
.img_preview_item .img_shadow {
border-radius: 0;
width: 100%;
height: 100%;
}
.img_preview_item > button {
position: absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
background-image: url(../images/btn_upload_cancel_n.png);
display: block;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.img_preview_item > button:hover {
background-image: url(../images/btn_upload_cancel_o.png);
}
.form_post_add {
overflow: hidden;
position: relative;
}
.form_post_add > * {
float: left;
display: inline-block;
}
.form_post_add button {
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 12px;
margin-right: 6px;
border-radius: 4px;
font-size: 14px;
color: #ffffff;
font-weight: 500;
cursor: pointer;
}
.form_post_add > button:nth-child(3) {
float: right;
}
.post_img_upload {
position: relative;
}
.post_img_upload input[type='file'] {
-webkit-appearance: none;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.post_img_upload input[type='file']:hover + button {
background-color: #bbbbbb;
}
.btn_post_img_upload i {
display: inline-block;
width: 16px;
height: 100%;
vertical-align: middle;
margin-top: -2px;
background-image: url('../images/ic_photo_camera.png');
z-index: 1;
margin-right: 8px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 14px;
}
.form_post_img_view {
position: absolute;
opacity: 0;
visibility: hidden;
right: 0;
display: block;
top: 0;
height: 28px;
border-radius: 2px;
background-color: transparent;
overflow: hidden;
}
.form_post_img_view.active {
opacity: 1;
visibility: visible;
}
.form_post_img_view img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
border-radius: 0;
}
.cm_main_header {
font-size: 14px;
font-weight: 700;
color: #3c3c3c;
padding-bottom: 6px;
}
.cm_main_header > span {
color: #a0a0a0;
font-size: 12px;
font-weight: 400;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
margin-top: -4px;
}
.cm_post_content {
width: 100%;
margin-top: 10px;
position: relative;
overflow: hidden;
}
.btn_more_large_up {
width: 100%;
height: 40px;
background-image: url(../images/ic_arrow_more_off_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 12px auto;
margin-top: 30px;
background-color: #ebebeb;
margin-bottom: 30px;
}
.btn_more_large {
width: 100%;
height: 40px;
background-image: url(../images/ic_arrow_more_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 12px auto;
margin-top: 30px;
background-color: #ebebeb;
margin-bottom: 30px;
}
.btn_more_large:hover {
background-image: url('../images/ic_arrow_more_o.png');
background-color: #e6e6e6;
}
.emotion_rating + .cm_comment_control {
padding-left: 30px;
margin-bottom: 14px;
}
.cm_post_content.active {
max-height: 100%;
}
.cm_post_view {
width: 100%;
white-space: pre-wrap;
height: auto;
word-break: break-all;
position: relative;
font-size: 14px;
font-weight: 400;
color: #3c3c3c;
line-height: 20px;
}
.cm_post_img {
margin-top: 10px;
}
.cm_post_main .cm_layout {
padding: 30px 0 0 0;
}
.cm_post_main .cm_layout > *:nth-child(2) > * {
margin-top: 14px;
line-height: 120%;
}
.cm_post_img img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
border-radius: 0;
}
.cm_post_wrap button[class*='btn_post_view_'] {
line-height: 120%;
padding-top: 12px;
text-align: center;
font-size: 14px;
color: #a0a0a0;
font-weight: 400;
display: none;
cursor: pointer;
}
.cm_post_wrap button[class*='btn_post_view_'].active {
display: inline-block;
}
.cm_post_wrap [class*='btn_post_view_o'] i {
display: inline-block;
margin-top: -2px;
width: 11px;
height: 6px;
vertical-align: middle;
background-image: url('../images/btn_arrow_dropup_n.png');
z-index: 1;
margin-left: 8px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 6px;
}
.cm_post_wrap .btn_post_view_off i {
background-image: url('../images/btn_arrow_dropup_n.png');
}
.cm_post_wrap .btn_post_view_on i {
background-image: url('../images/btn_arrow_dropdown_n.png');
}
/*
.btn_post_view_off:hover i,
.btn_post_view_off:active i{background-image: url('../images/btn_arrow_dropup_s.png');}
.btn_post_view_on:hover i,
.btn_post_view_on:active i{background-image: url('../images/btn_arrow_dropdown_s.png');}
.cm_post_wrap [class*='btn_post_view_o']:hover,
.cm_post_wrap [class*='btn_post_view_o']:active{color:#FF6000}
*/
.cm_comment_control {
text-align: left;
display: block;
position: relative;
width: 100%;
margin-bottom: 30px;
}
.cm_comment_control > * {
display: inline-block;
}
.cm_comment_control > span {
margin-right: 18px;
font-size: 14px;
color: #a0a0a0;
font-weight: 400;
}
.btn_like_it,
.btn_hate_it {
display: inline-block;
width: 28px;
height: 22px;
background-image: url('../images/btn_comment_like_n.png');
z-index: 1;
background-position: left center;
background-repeat: no-repeat;
background-size: auto 16px;
}
.btn_like_it {
background-image: url('../images/btn_comment_like_n.png');
}
.btn_hate_it {
background-image: url('../images/btn_comment_hate_n.png');
}
.btn_like_it:hover,
.btn_like_it:active {
background-image: url('../images/btn_comment_like_o.png');
}
.btn_hate_it:hover,
.btn_hate_it:active {
background-image: url('../images/btn_comment_hate_o.png');
}
.btn_like_it.active {
background-image: url('../images/btn_comment_like_s.png');
}
.btn_hate_it.active {
background-image: url('../images/btn_comment_hate_s.png');
}
.btn_comment_write {
font-size: 14px;
color: #a0a0a0;
font-weight: 400;
}
.cm_comment_write {
display: none;
border-top: 1px solid #f0f0f0;
width: 100%;
position: relative;
}
.cm_comment_write .cm_layout {
padding: 20px 0 10px 0;
}
.cm_comment_write.active {
display: block;
}
.cm_comment_main {
/* border-top: 1px solid #F0F0F0; */
margin-bottom: 30px;
position: relative;
display: none;
}
.cm_comment_main.active {
display: block;
}
/* .cm_comment_main > .cm_layout:first-child ~ *{display: none;} */
.cm_comment_main.active > .cm_layout:first-child ~ * {
display: table;
}
.cm_comment_write .cm_layout > *:nth-child(2) > * {
margin-top: 0;
}
.form_comment_write {
padding-right: 120px;
}
.form_comment_write textarea {
width: 100%;
resize: none;
overflow-y: hidden;
padding-top: 14px;
padding-bottom: 2px;
color: #a0a0a0;
font-weight: 400;
font-size: 14px;
}
.form_comment_add {
position: absolute;
right: 0;
top: 7px;
}
.form_comment_add > button {
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 12px;
margin-right: 4px;
border-radius: 4px;
font-size: 14px;
color: #ffffff;
font-weight: 500;
cursor: pointer;
}
.cm_comment_main .cm_layout {
padding: 20px 0 0 0;
}
.cm_comment_wrap button[class*='btn_comment_view_o'] {
line-height: 120%;
padding-top: 14px;
text-align: center;
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
display: none;
cursor: pointer;
}
.cm_comment_wrap button[class*='btn_comment_view_o'].active {
display: block;
}
.cm_edit_control {
display: block;
position: absolute;
right: 0;
top: 0;
width: 36px !important;
}
.cm_edit_control > button {
width: 36px;
height: 36px;
background-image: url('../images/btn_comment_option_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: auto 18px;
}
.cm_edit_control > button:hover,
.cm_edit_control > button.active {
background-image: url('../images/btn_comment_option_o.png');
}
.cm_edit_control > button.active + div {
max-height: 200px;
}
.cm_edit_control > div {
display: block;
margin-left: -27px;
height: auto;
z-index: 1;
position: absolute;
font-weight: 200;
text-align: center;
left: 50%;
}
.cm_edit_control > div > span {
display: block;
width: 100%;
height: 8px;
background: url('../images/ic_edit.png') center center no-repeat;
background-size: 12px auto;
}
.cm_edit_control > div button {
background-color: #464646;
width: 54px;
display: block;
text-align: center;
padding: 14px 14px 0 14px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.cm_edit_control > div button:hover {
color: #ff6000;
}
.cm_edit_control > div > button:last-child {
padding-bottom: 14px;
}
.cm_edit_control_en {
display: block;
position: absolute;
right: 0;
top: 0;
width: 36px !important;
}
.cm_edit_control_en > button {
width: 36px;
height: 36px;
background-image: url('../images/btn_comment_option_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: auto 18px;
}
.cm_edit_control_en > button:hover,
.cm_edit_control_en > button.active {
background-image: url('../images/btn_comment_option_o.png');
}
.cm_edit_control_en > button.active + div {
max-height: 200px;
}
.cm_edit_control_en > div {
display: block;
margin-left: -34px;
height: auto;
z-index: 1;
position: absolute;
font-weight: 200;
text-align: center;
left: 50%;
}
.cm_edit_control_en > div > span {
display: block;
width: 100%;
height: 8px;
background: url('../images/ic_edit.png') center center no-repeat;
background-size: 12px auto;
}
.cm_edit_control_en > div button {
background-color: #464646;
width: 68px;
display: block;
text-align: center;
padding: 14px 14px 0 14px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.cm_edit_control_en > div button:hover {
color: #ff6000;
}
.cm_edit_control_en > div > button:last-child {
padding-bottom: 14px;
}
/* channel_view_info */
.channel_view_info_content,
.channel_view_user_content {
display: block;
width: 100%;
}
.channel_view_info_content > .view_section,
.channel_view_user_content > .view_section {
position: relative;
width: auto;
margin-right: 360px;
}
.channel_view_info_content > .view_section:first-child,
.channel_view_user_content > .view_section:first-child {
width: 360px;
position: absolute;
right: 0;
top: 0;
margin-right: 0;
}
.channel_view_info_content > .view_section:first-child .view_box,
.channel_view_user_content > .view_section:first-child .view_box {
padding-left: 0;
}
.channel_view_info_content > .view_section:first-child .view_box > div > p {
color: #a0a0a0;
}
.channel_view_content .view_box {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 80px;
position: relative;
}
.channel_view_content .view_section > .view_box:first-child h5 {
padding-top: 80px;
}
.channel_view_content .view_box hr {
background-color: #f0f0f0;
margin-top: 20px;
margin-bottom: 20px;
}
.channel_view_content .view_box h5 {
color: #3c3c3c;
font-size: 16px;
font-weight: 700;
line-height: 120%;
position: relative;
}
.channel_view_content .view_box > div {
line-height: 22px;
color: #3c3c3c;
font-size: 14px;
font-weight: 400;
}
.channel_view_content .view_box > div > p {
line-height: 22px;
color: #3c3c3c;
font-size: 14px;
font-weight: 400;
}
.channel_view_info_content > .view_section:nth-child(2) > .view_box:nth-child(1) > div {
white-space: pre-line;
}
/* channel_view_user */
.channel_view_user_content .view_box h5 span {
display: inline-block;
margin-left: 10px;
font-weight: 500;
}
.view_box h5 button {
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 13px;
color: #b4b4b4;
position: absolute;
right: 0;
bottom: 0;
font-weight: 500;
cursor: pointer;
}
.view_box h5 button i {
display: inline-block;
margin-top: -2px;
width: 20px;
height: 100%;
vertical-align: middle;
background-image: url('../images/btn_menu_add_s_n.png');
z-index: 1;
margin-right: 8px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 20px;
}
.view_box h5 button:hover i,
.view_box h5 button:active i {
background-image: url('../images/btn_menu_add_s_o.png');
}
.view_box h5 button:hover,
.view_box h5 button:active {
color: #ff6000;
}
.channel_view_user_content .view_box hr {
background-color: #f0f0f0;
margin-top: 15px;
margin-bottom: 0;
}
.channel_view_user_content .img_p_l:hover,
.channel_view_user_content.img_p_l:active {
color: #3c3c3c;
}
.channel_view_user_content .user_list li:hover .btn_user_delete {
visibility: visible;
opacity: 1;
}
.channel_view_user_content .user_list li:hover > p {
color: #ff6000;
}
.channel_view_user_content .user_list .btn_user_delete {
float: right;
visibility: hidden;
opacity: 0;
width: 30px;
height: 100%;
margin-right: -10px;
background-image: url('../images/btn_admin_cancel_o.png');
background-position: center center;
background-repeat: no-repeat;
background-size: auto 10px;
}
.channel_view_user_content .user_list .btn_user_delete:hover,
.channel_view_user_content .user_list .btn_user_delete:active {
background-image: url('../images/btn_admin_cancel_o.png');
}
.channel_view_user_content .user_list li {
float: left;
width: 31.6%;
margin-left: 2.6%;
margin-top: 15px;
}
.channel_view_user_content .user_list > li:nth-child(3n + 1) {
margin-left: 0;
}
.channel_view_user_content .user_list li > p {
display: inline-block;
vertical-align: middle;
line-height: 120%;
width: calc(100% - 78px);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel_view_user_content .user_list li > p span {
display: block;
color: #b4b4b4;
font-size: 12px;
font-weight: 400;
margin-top: 4px;
}
.channel_view_user_content .view_box > div {
margin-top: 15px;
}
[class*='btn_subscriber_more'] {
display: inline-block;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
color: #b4b4b4;
font-weight: 500;
cursor: pointer;
}
[class*='btn_subscriber_more'] i {
display: inline-block;
width: 12px;
height: 100%;
vertical-align: middle;
background-image: url('../images/ic_arrow_more_n.png');
z-index: 1;
margin-right: 10px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 8px;
}
.btn_subscriber_more_off i {
background-image: url('../images/ic_arrow_more_off_n.png');
}
[class*='btn_subscriber_more']:hover,
[class*='btn_subscriber_more']:active {
color: #ff6000;
}
.btn_subscriber_more_on:hover i,
.btn_subscriber_more_on:active i {
background-image: url('../images/ic_arrow_more_o.png');
}
.btn_subscriber_more_off:hover i,
.btn_subscriber_more_off:active i {
background-image: url('../images/ic_arrow_more_off_o.png');
}
/* #class_add_page
----------------------------------------------------- */
.class_add_page {
width: 100%;
height: 100%;
}
.class_add_progress_nav {
width: 100%;
height: 178px;
position: relative;
z-index: 1;
}
.class_add_progress_nav_fix {
width: 100%;
position: fixed;
top: 120px;
z-index: 100;
background-color: #ffffff;
height: 178px;
box-shadow: 0 3px 6px 0px RGBA(0, 0, 0, 0.03);
}
.side_open .class_add_progress_nav_fix {
padding-left: 240px;
right: 0;
}
.class_add_progress_nav.active .class_add_progress_nav_fix {
height: 82px;
}
.class_add_progress_nav.active .class_add_nav_content h4 {
display: none;
}
.class_add_progress_nav_fix > .responsive_fix {
text-align: center;
height: 178px;
line-height: 178px;
}
.class_add_progress_nav.active .class_add_progress_nav_fix > .responsive_fix {
height: 82px;
line-height: 82px;
}
.class_add_progress_nav_fix {
-webkit-transition: height 0.2s;
transition: height 0.2s;
}
.class_add_nav_content {
display: inline-block;
vertical-align: middle;
}
.class_add_nav_content h4 {
font-size: 22px;
font-weight: 700;
color: #3c3c3c;
margin-bottom: 25px;
line-height: 120%;
margin-top: 12px;
}
.class_add_nav_content .class_add_progress {
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
.class_add_progress > span {
float: left;
margin-left: 45px;
height: 40px;
line-height: 40px;
position: relative;
font-size: 14px;
color: #b4b4b4;
font-weight: 400;
padding-left: 27px;
}
.class_add_progress > span::before {
content: '';
position: absolute;
left: 0;
width: 18px;
height: 100%;
background-image: url('../images/ic_make_set_n.png');
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
}
.class_add_progress > span:first-child {
margin-left: 0;
}
.class_add_progress > span:first-child::after {
display: none;
}
.class_add_progress > span.active {
color: #3c3c3c;
font-weight: 500;
}
.class_add_progress > span:nth-child(1)::before {
background-image: url('../images/ic_make_set_n.png');
}
.class_add_progress > span.active:nth-child(1)::before {
background-image: url('../images/ic_make_set_s.png');
}
.class_add_progress > span:nth-child(2)::before {
background-image: url('../images/ic_make_calendar_n.png');
}
.class_add_progress > span.active:nth-child(2)::before {
background-image: url('../images/ic_make_calendar_s.png');
}
.class_add_progress > span:nth-child(3)::before {
background-image: url('../images/ic_make_curriculum_n.png');
}
.class_add_progress > span.active:nth-child(3)::before {
background-image: url('../images/ic_make_curriculum_s.png');
}
.class_add_progress > span:nth-child(4)::before {
background-image: url('../images/ic_make_preview_n.png');
}
.class_add_progress > span.active:nth-child(4)::before {
background-image: url('../images/ic_make_preview_s.png');
}
.class_add_progress > span::after {
content: '';
position: absolute;
left: -26px;
width: 6px;
height: 100%;
background-image: url('../images/ic_make_arrow.png');
background-size: 6px auto;
background-repeat: no-repeat;
background-position: center center;
}
.class_add_nav_button_01,
.class_add_nav_button_02 {
position: absolute;
top: 50%;
margin-top: -20px;
}
.class_add_nav_button_01 {
left: 50px;
}
.class_add_nav_button_01 > * {
float: left;
display: inline-block;
vertical-align: middle;
width: auto;
min-width: 87px;
}
.class_add_nav_button_01 > .btn_history_list {
border-radius: 4px 0 0 4px;
border-right: 2px solid #e6e6e6;
min-width: auto;
width: 48px;
background-image: url('../images/ic_history.png');
background-size: 20px auto;
background-repeat: no-repeat;
background-position: center center;
}
.class_add_nav_button_01 > .btn_make_saveas {
border-radius: 0 4px 4px 0;
}
.class_add_nav_button_02 {
right: 50px;
}
.class_add_nav_button_02 > * {
width: auto;
float: left;
vertical-align: middle;
margin-left: 7px;
min-width: 87px;
}
.class_add_nav_button_02 > * i {
width: 10px;
height: 100%;
display: inline-block;
vertical-align: top;
background-image: url(../images/btn_make_next_n.png);
background-size: 10px auto;
background-repeat: no-repeat;
background-position: center center;
}
.class_add_nav_button_02 > .btn_make_prev i {
background-image: url('../images/btn_make_back_n.png');
margin-right: 5px;
}
.class_add_nav_button_02 > .btn_make_next i {
background-image: url('../images/btn_make_next_n.png');
margin-left: 5px;
}
.class_add_content {
margin-left: 50px;
margin-top: 44px;
margin-bottom: 50px;
margin-right: 50px;
padding-bottom: 50px;
}
.class_add_content .btn_center_box button {
min-width: 180px;
}
[class*='class_add_sect_0'] {
width: 100%;
height: auto;
position: relative;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 Rgba(0, 0, 0, 0.03);
}
.class_add_content h5 {
color: #3c3c3c;
font-size: 16px;
font-weight: 700;
padding-left: 30px;
padding-top: 30px;
padding-bottom: 30px;
line-height: 120%;
border-bottom: 1px solid #ebebeb;
}
.class_add_sect_02 {
margin-top: 20px;
}
.class_add_view {
}
.class_add_view .form_group {
padding-top: 20px;
padding-bottom: 20px;
min-height: 40px;
display: table;
width: 100%;
border-top: 1px solid #fafafa;
margin-bottom: 0;
}
.class_add_view form > .form_group:first-child {
border-top: 0;
}
.class_add_view .form_group > * {
display: table-cell;
width: auto;
vertical-align: top;
}
.class_add_view .form_group > .label_td {
width: 24%;
padding-left: 40px;
}
.class_add_view .form_group > .content_td {
padding-right: 9%;
z-index: 0;
position: relative;
min-width: 2px;
}
.form_price {
}
.form_price > *:not(.text_right) {
float: right;
}
.form_price > * {
float: left;
}
.form_price .text_right {
min-width: 400px;
}
@media only screen and (max-width: 1140px) {
/* #class_add_page
----------------------------------------------------- */
.class_add_progress_nav.active .class_add_progress > *:not(.active) {
display: none;
}
.form_price > * {
float: none;
display: inline-block;
}
.form_price .text_right {
min-width: 0;
width: 100%;
}
.form_price > *:not(.text_right) {
float: none;
margin-bottom: 20px;
}
}
.text_right > * {
float: left;
}
.text_right > span:not(.error) {
font-weight: 500;
font-size: 14px;
color: #3c3c3c;
margin-left: 10px;
display: inline-block;
line-height: 40px;
}
.text_right > input {
max-width: 330px;
text-align: right;
}
.class_add_view .form_label {
color: #3c3c3c;
margin-top: 12px;
margin-bottom: 0;
}
.class_add_view .form_control {
}
.mini_info_message {
text-align: left;
padding-left: 14px;
display: block;
position: relative;
padding-top: 10px;
line-height: 18px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
clear: both;
}
.mini_info_message:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 17px;
width: 4px;
height: 4px;
background: url('../images/ic_bullet_gray_01.png') center center no-repeat;
background-size: 100% auto;
}
.class_add_view .custom_item[type='checkbox']:not(:checked) + label span,
.class_add_view .custom_item[type='checkbox']:checked + label span {
height: 40px;
line-height: 40px;
padding: 0 12px;
font-size: 14px;
}
.recommender_add_box {
}
.recommender_input {
position: relative;
padding-right: 60px;
margin-top: 10px;
}
.recommender_input.first {
margin-top: 0;
}
.recommender_input > input {
}
.recommender_input > button {
width: 40px;
height: 40px;
background-image: url('../images/btn_popup_cancel_n.png');
background-size: 14px auto;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.recommender_input > button:hover {
background-image: url('../images/btn_popup_cancel_o.png');
}
.recommender_input.first > button {
background-image: url('../images/ic_add_n_02.png');
border: 1px solid #e6e6e6;
}
.recommender_input.first > button:hover {
background-image: url('../images/ic_add_s_02.png');
}
.radio_item {
}
.live_class_turn {
font-weight: 400;
font-size: 14px;
color: #3c3c3c;
}
.live_class_turn > input {
width: 50px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.live_class_turn > b {
font-weight: 500;
}
.text_editor {
width: 100%;
height: auto;
min-height: 380px;
position: relative;
border: 1px solid #e6e6e6;
}
.radio_item + .mini_info_message {
float: left;
clear: initial;
margin-left: 20px;
}
/*datepicker_custom, timepicker_custom, rating_custom*/
.rating_custom {
display: inline-block;
vertical-align: middle;
}
.rating_custom .el-rate {
height: auto;
display: inline-block;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100% !important;
}
.content_td .datepicker_custom,
.content_td .timepicker_custom {
max-width: 330px;
}
.content_td .input_disabled:disabled {
background-color: #efefef;
}
.datepicker_custom,
.timepicker_custom {
width: 100%;
height: auto;
position: relative;
}
.el-icon-date:before,
.el-icon-time:before {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.el-icon-date:before {
content: ' ' !important;
width: 18px;
height: 100%;
right: 10px;
top: 0;
background-image: url('../images/btn_calender_n.png');
display: inline-block;
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
}
.el-icon-time:before {
content: ' ' !important;
width: 18px;
height: 100%;
right: 10px;
top: 0;
background-image: url('../images/btn_time_n.png');
display: inline-block;
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
}
.datepicker_custom:hover .el-icon-date:before {
background-image: url('../images/btn_calender_o.png');
}
.timepicker_custom:hover .el-icon-time:before {
background-image: url('../images/btn_time_o.png');
}
.ic_picker {
position: absolute;
width: 18px;
height: 40px;
right: 10px;
top: 0;
background-image: url('../images/btn_calender_n.png');
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
display: block;
}
.datepicker_custom:hover .ic_picker {
background-image: url('../images/btn_calender_o.png');
}
.timepicker_custom .ic_picker {
background-image: url('../images/btn_time_n.png');
}
.timepicker_custom:hover .ic_picker {
background-image: url('../images/btn_time_o.png');
}
.el-input__prefix {
left: 6px !important;
}
.vue_el .el-input__inner,
.vue_el .el-input__inner {
border-radius: 0;
border: 1px solid #e6e6e6;
line-height: 0;
}
.vue_el .el-input__inner::placeholder {
color: #c8c8c8;
}
.vue_el .el-input__inner:hover,
.vue_el .el-input__inner:focus,
.vue_el .el-pagination__sizes .el-input .el-input__inner:hover,
.vue_el .el-textarea__inner:focus,
.vue_el .el-radio__input.is-focus .el-radio__inner,
.vue_el .el-select .el-input__inner:focus,
.vue_el .el-input.is-active .el-input__inner,
.vue_el .el-select .el-input.is-focus .el-input__inner,
.vue_el .el-range-editor.is-active,
.vue_el .el-range-editor.is-active:hover,
.vue_el .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
.vue_el .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
border-color: #e6e6e6 !important;
}
.vue_el .el-input-number__decrease:hover,
.vue_el .el-input-number__increase:hover {
color: #ff6000;
}
.vue_el .el-input--prefix .el-input__inner {
padding-left: 35px;
}
.vue_el .el-input--suffix .el-input__inner {
padding-right: 35px;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span,
.el-date-table td.current:not(.disabled) span,
.el-table-filter__list-item.is-active {
background-color: #ff6000 !important;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover {
background-color: #ff600012 !important;
}
.el-date-table td.today span,
.el-table-filter__list-item:hover,
.el-table-filter__bottom button:hover,
.el-table th > .cell.highligh,
.el-month-table td .cell:hover,
.el-month-table td.current:not(.disabled) .cell,
.el-date-table td.available:hover,
.el-switch__label.is-active,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-select-dropdown__item.selected,
.el-table th > .cell.highlight,
.el-table-filter__bottom button:hover,
.el-table-filter__list-item:hover,
.el-date-picker__header-label:hover,
.time-select-item.selected:not(.disabled),
.el-picker-panel__shortcut:hover,
.el-picker-panel__shortcut.active,
.el-picker-panel__icon-btn:hover,
.el-message-box__headerbtn:focus .el-message-box__close,
.el-message-box__headerbtn:hover .el-message-box__close,
.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover,
.el-tabs__new-tab:hover,
.el-tabs__item.is-active,
.el-tabs__item:hover,
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover,
.el-tag .el-icon-close,
.el-time-panel__btn.confirm,
.el-time-spinner__arrow:hover {
/* color: #ff6000 !Important; */
}
/*
.el-popper .popper__arrow, .el-popper .popper__arrow:after {
display: none !important;}
*/
/**------**/
.direct_input_box .form_group .form_control {
padding-right: 30px;
}
.direct_input_box .form_group > .content_td {
padding-right: 0;
}
.direct_input_box .form_group > .label_td {
padding-left: 12px;
}
.direct_input_box .form_group {
border: 0 none;
}
.direct_input_box > .form_group:first-child {
padding-bottom: 0;
}
.btn_schedule {
width: 100%;
text-align: left;
position: relative;
}
.btn_schedule i {
width: 18px;
height: 100%;
background-image: url(../images/ic_arrow_dropdown_n.png);
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
display: block;
position: absolute;
right: 20px;
top: 0;
}
.btn_schedule.btn_drop:not(.active):hover i {
background-image: url(../images/ic_arrow_dropdown_o.png);
}
.btn_schedule.active i {
background-image: url(../images/ic_arrow_dropup_o.png);
}
.btn_schedule.active + div {
max-height: 3000px;
}
.schedule_title {
display: table;
width: 100%;
height: 77px;
padding-left: 30px;
position: relative;
border-bottom: 1px solid #f5f5f5;
}
.schedule_title > * {
display: table-cell;
width: auto;
height: 100%;
vertical-align: middle;
}
.schedule_title > *:nth-child(1) {
width: 95px;
}
.btn_class_edit,
.btn_class_delete {
position: absolute;
top: 0;
width: 48px;
height: 100%;
display: block;
background-image: url(../images/btn_popup_cancel_n.png);
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
}
.btn_class_edit {
right: 63px;
background-image: url(../images/btn_pencil_edit_n.png);
}
.btn_class_edit:hover {
background-image: url(../images/btn_pencil_edit_o.png);
}
.btn_class_delete {
right: 5px;
}
.btn_class_delete:hover {
background-image: url(../images/btn_popup_cancel_o.png);
}
.schedule_view {
display: table;
width: 100%;
height: 77px;
border-bottom: 1px solid #f5f5f5;
padding-left: 11.4%;
background-color: #fcfcfc;
}
.schedule_view > * {
display: table-cell;
width: auto;
height: 100%;
vertical-align: middle;
text-align: left;
}
.schedule_view > *:nth-child(1) {
width: 10.3%;
}
.schedule_view > *:nth-child(2) {
width: 18%;
}
.schedule_view > *:nth-child(3) {
width: 9.3%;
}
.schedule_view > *:nth-child(4) {
width: 25.7%;
}
.schedule_view .img_p_l:hover {
color: #3c3c3c;
}
.schedule_content {
font-size: 14px;
font-weight: 400;
color: #3c3c3c;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.schedule_content b {
font-size: 16px;
font-weight: 500;
}
.schedule_content h6 {
font-size: 16px;
font-weight: 500;
color: #ff6000;
}
.curriculum_title,
.curriculum_item {
display: table;
width: 100%;
position: relative;
border-bottom: 1px solid #f5f5f5;
height: 77px;
padding-top: 20px;
padding-bottom: 20px;
}
.curriculum_title > *,
.curriculum_item > * {
display: table-cell;
width: auto;
vertical-align: middle;
}
.curriculum_title > *:nth-child(1),
.curriculum_item > *:nth-child(1) {
width: 206px;
}
.right_button {
position: relative;
padding-right: 78px;
}
.btn_class_delete {
right: 15px;
}
.curriculum_item {
background-color: #fcfcfc;
}
.form_live_item .curriculum_form {
padding-right: 30px;
}
.curriculum_label {
font-weight: 500;
font-size: 16px;
color: #3c3c3c;
padding-top: 11px;
vertical-align: top;
}
.form_live_item .curriculum_form > * {
float: left;
}
.form_live_item .curriculum_form > *:nth-child(1) {
margin-right: 20px;
width: calc(100% - 170px);
}
.form_live_item .curriculum_form > *:nth-child(2) {
width: 150px;
}
.form_live_item .curriculum_form > *:nth-child(3) {
width: 100%;
margin-top: 10px;
}
.form_live_item .curriculum_label > * {
}
.form_live_item .curriculum_label > * {
display: inline-block;
vertical-align: middle;
line-height: 120%;
}
.curriculum_label .btn_live_item_move {
background-image: url(../images/btn_header_menu_n.png);
background-size: 9px auto;
background-repeat: no-repeat;
background-position: center center;
width: 70px;
height: 15px;
}
.form_live_item .curriculum_label > span {
margin-left: 28px;
margin-top: -2px;
}
.curriculum_form_title {
color: #3c3c3c;
font-weight: 500;
font-size: 14px;
}
.bg_preview {
background: url(../images/bg_preview.png) repeat;
background-size: 174px auto;
}
/* #class_view_page
----------------------------------------------------- */
.class_view_title {
background-color: #fcfcfc;
}
.class_view_title > * {
padding: 34px 0;
overflow: hidden;
}
.class_view_title_table {
display: flex;
width: 100%;
}
.class_view_title_table > * {
display: block;
flex: 1;
position: relative;
vertical-align: middle;
align-self: center;
}
.class_view_cover {
max-width: 340px;
}
.class_view_img {
min-width: 300px;
max-width: 340px;
width: 100%;
max-height: 192px;
position: relative;
display: block;
vertical-align: middle;
}
.class_view_img .img_shadow {
width: 100%;
height: 100%;
border-radius: 0;
}
.class_view_img input[type='file'] {
-webkit-appearance: none;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.class_view_img .btn_class_img_upload {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
opacity: 1;
}
.class_view_img .btn_class_img_upload > span {
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 12px;
min-width: 0;
font-size: 14px;
}
/*
.class_view_img input[type="file"]:hover ~ .btn_class_img_upload{
opacity: 1;
}
*/
.class_view_img img {
width: 100%;
height: auto;
display: block;
}
.class_view_img input[type='file']:active ~ .btn_class_img_upload > span,
.class_view_img input[type='file']:hover ~ .btn_class_img_upload > span {
/*point*/
background-color: #f74700;
}
.class_view_title_text {
vertical-align: middle;
padding-left: 6%;
}
.class_view_title_text h5 {
font-size: 26px;
font-weight: 700;
color: #3c3c3c;
max-height: 62px;
line-height: 31px;
overflow: hidden;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.class_view_title_text p {
font-size: 16px;
font-weight: 300;
color: #787878;
margin-top: 5px;
max-height: 38px;
line-height: 19px;
overflow: hidden;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.class_view_nav {
position: relative;
height: 57px;
}
.class_view_nav.active .class_view_nav_fix {
position: fixed;
top: 120px;
z-index: 5;
}
.side_open .class_view_nav.active .class_view_nav_fix {
right: 0;
padding-left: 240px;
}
.class_view_nav_fix {
border-bottom: 1px solid #ebebeb;
background-color: #ffffff;
width: 100%;
height: auto;
opacity: 1;
-webkit-transition: top 0.2s ease-out 0s;
visibility: visible;
transition: top 0.2s ease-out 0s;
}
.class_view_nav_fix.hide {
opacity: 0;
visibility: hidden;
}
.class_view_nav_button {
overflow: hidden;
padding-top: 23px !important;
}
.class_view_nav_button > button {
float: left;
display: inline-block;
margin: 0 25px;
width: auto;
}
.class_view_nav_button > button span {
display: inline-block;
color: #b4b4b4;
font-size: 14px;
font-weight: 500;
padding-bottom: 19px;
position: relative;
}
.class_view_nav_button > button.active span,
.class_view_nav_button > button:hover span {
color: #3c3c3c;
}
.class_view_nav_button > button span::after {
content: '';
position: absolute;
width: 0;
height: 100%;
left: 50%;
bottom: 0;
border-bottom: 3px solid #ff6000;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.class_view_nav_button > button:hover span::after,
.class_view_nav_button > button.active span::after {
width: 100%;
left: 0;
border-bottom-color: #ff6000;
}
.class_view_content {
padding-top: 20px;
position: relative;
background-color: #f5f5f5;
padding-bottom: 1px;
}
.class_view_box_content .post_cont p {
/* line-height: 27px;
font-size: 14px !Important;
margin-bottom: 15px !important; */
}
.post_cont iframe {
width: 100% !important;
}
[class*='class_view_box_0'] {
position: relative;
box-shadow: 0 2px 4px 0 Rgba(0, 0, 0, 0.03);
background-color: #ffffff;
margin-bottom: 20px;
}
.class_view_box_content .post_cont {
padding-bottom: 60px;
padding-left: 30px;
padding-right: 30px;
}
.recommender_view_content {
padding: 30px;
border-top: 1px solid #f0f0f0;
width: 100%;
height: auto;
position: relative;
}
.recommender_view_content b {
display: block;
margin-bottom: 20px;
font-size: 14px;
font-weight: 500;
color: #fe4d3d;
}
.recommender_view_content ol {
counter-reset: section;
}
.recommender_view_content ol li {
list-style: none;
font-size: 14px;
font-weight: 300;
color: #3c3c3c;
line-height: 22px;
}
.recommender_view_content ol li:before {
counter-increment: section;
content: counter(section) '. ';
}
.class_view_section {
padding-right: 287px;
}
/*.class_view_section > [class*='class_view_box_0']{min-height: 300px}*/
.class_view_side_nav {
position: absolute;
height: 100%;
width: 267px;
right: 25px;
top: 0;
}
.class_view_btn_control {
opacity: 0;
visibility: hidden;
}
.class_view_content .cm_comment_main .cm_layout > .cm_main_sect {
padding-right: 0;
}
/*
{ position: absolute;
height: 100%;
width: 287px;
right: 5px;
top: 0;
}
*/
/*
.class_view_side_nav{
position: absolute;
top: 20px;
right: 50%;
margin-right: -407px;
margin-left: 225px;
}
*/
/*
.vip-detailoption_wrap {
position: absolute;
top: 354px;
left: 50%;
z-index: 5030;
width: 308px;
margin-left: 291px;
}
*/
[class*='class_view_side_nav_fix_0'] {
width: 267px;
}
.class_view_side_nav_fix_02 {
position: relative;
}
.class_view_side_nav.active .class_view_side_nav_fix {
position: fixed;
top: 138px;
}
.class_view_box_title {
width: 100%;
height: 80px;
line-height: 80px;
position: relative;
text-align: left;
}
.class_view_box_02 .class_view_box_title,
.class_view_box_08 .class_view_box_title {
border-bottom: 1px solid #f0f0f0;
}
.class_view_box_title h6 {
display: inline-block;
padding-left: 34px;
padding-right: 10px;
font-size: 16px;
font-weight: 700;
color: #ffffff;
line-height: 27px;
height: 28px;
vertical-align: middle;
background-color: #ff6000;
margin-left: -4px;
}
/*.class_view_box_title.active + div{max-height: 3000px}*/
.class_view_box_title.btn_drop i,
.class_view_box_drop_item > button i,
.side_curriculum_item > button i {
position: absolute;
right: 30px;
top: 0;
width: 10px;
height: 100%;
background-image: url(../images/btn_arrow_dropdown_n.png);
display: block;
background-size: 10px auto;
background-repeat: no-repeat;
background-position: center center;
}
.class_view_box_title.btn_drop:not(.active):hover i,
.class_view_box_drop_item > button.btn_drop:not(.active):hover i {
background-image: url(../images/btn_arrow_dropdown_s.png);
}
.class_view_box_title.active.btn_drop i,
.class_view_box_drop_item > button.active i,
.side_curriculum_item > button.active i {
background-image: url(../images/btn_arrow_dropup_s.png);
}
.class_view_box_content {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.class_view_box_drop_item > button {
display: block;
width: 100%;
line-height: 66px;
height: 66px;
padding-left: 30px;
position: relative;
border-top: 1px solid #f0f0f0;
text-align: left;
}
.class_view_box_drop_item > button > * {
display: inline-block;
vertical-align: middle;
}
.class_view_box_drop_item > button > h6 {
margin-right: 19px;
font-size: 19px;
font-weight: 400;
min-width: 30px;
}
.class_view_box_drop_item > button b {
font-size: 15px;
font-weight: 500;
color: #3c3c3c;
}
.class_view_box_drop_view {
position: relative;
}
.class_view_box_drop_item > button.active + div {
max-height: 1000px;
}
.class_view_box_drop_table {
display: table;
width: 100%;
height: 56px;
border-top: 1px solid #f5f5f5;
background-color: #fcfcfc;
}
.class_view_box_drop_table > * {
display: table-cell;
width: auto;
height: 100%;
vertical-align: middle;
text-align: left;
font-size: 14px;
color: #3c3c3c;
line-height: 120%;
font-weight: 400;
}
.class_view_box_drop_table > *:nth-child(1) {
width: 23.8%;
padding-left: 11.9%;
}
.class_view_box_02 .class_view_box_drop_table > *:nth-child(2) {
width: 24%;
}
.class_view_box_02 .class_view_box_drop_table > *:nth-child(3) {
width: 9%;
}
.class_view_box_02 .class_view_box_drop_table > *:nth-child(4) {
width: 23%;
}
.class_view_box_drop_table > *:last-child {
text-align: right;
padding-right: 4.3%;
}
.class_view_box_03 .class_view_box_drop_table > *:last-child {
text-align: right;
width: 13%;
padding-right: 4.3%;
}
.class_view_teacher {
display: table;
width: 100%;
padding: 35px;
border-top: 1px solid #f0f0f0;
}
.class_view_teacher > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: middle;
height: 100%;
}
.class_view_teacher_profile {
width: 90px;
}
.class_view_teacher_img {
width: 90px;
height: 90px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.class_view_teacher_img .img_shadow {
width: 100%;
height: 100%;
}
.class_view_teacher_img img {
width: 100%;
height: auto;
display: block;
}
.class_view_teacher_info {
padding-left: 5.6%;
vertical-align: middle;
}
.class_view_teacher_info h5 {
font-size: 19px;
font-weight: 700;
color: #3c3c3c;
line-height: 120%;
}
.class_view_teacher_info p {
font-size: 14px;
font-weight: 400;
color: #787878;
white-space: pre-line;
line-height: 120%;
margin-top: 9px;
line-height: 18px;
}
.default_cover {
padding-top: 70px;
padding-bottom: 100px;
}
.default_cover > i {
width: 140px;
height: 140px;
margin: 0 auto;
background-image: url(../images/img_missing_01.png);
display: block;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.default_cover > p {
color: #b4b4b4;
font-size: 14px;
font-weight: 400;
margin-top: 30px;
text-align: center;
}
.rating_img {
display: inline-block;
vertical-align: middle;
}
.rating_img > * {
display: inline-block;
width: 18px;
height: auto;
margin: 0 2.5px;
}
.class_view_side_img {
width: 100%;
max-height: 150px;
position: relative;
display: block;
vertical-align: middle;
}
.class_view_section .class_view_side_info {
visibility: hidden;
opacity: 0;
height: 0;
}
.class_view_box_06 > .btn_enrolment_close {
display: none;
}
.class_view_side_img .img_shadow {
width: 100%;
height: 100%;
border-radius: 0;
}
.class_view_side_rating {
overflow: hidden;
padding-top: 14px;
padding-left: 20px;
padding-bottom: 14px;
padding-right: 20px;
}
.class_view_side_rating .el-rate__icon {
font-size: 13px;
margin-right: 3px;
}
.class_view_side_rating .rating_custom {
margin-right: -3px;
}
.class_view_side_rating .rating_img > * {
display: inline-block;
width: 12px;
height: auto;
margin: 0 0.5px;
}
.class_view_side_rating_point {
float: right;
font-size: 13px;
color: #3c3c3c;
font-weight: 400;
}
.class_view_side_table {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.class_view_side_table > *:first-child {
margin-top: 0;
}
.class_view_side_table_item {
display: table;
margin-top: 9.5px;
width: 100%;
position: relative;
}
.class_view_side_table_item > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: middle;
text-align: left;
font-size: 12px;
font-weight: 500;
color: #3c3c3c;
line-height: 120%;
}
.class_view_side_table_item > *:nth-child(1) {
width: 80px;
font-weight: 400;
color: #a0a0a0;
vertical-align: top;
}
.class_view_side_share {
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
}
.class_view_side_share > * > .tooltip i {
width: 30px;
height: 30px;
background-image: url(../images/btn_bookmark_n.png);
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
margin-right: 9px;
background-repeat: no-repeat;
background-position: center center;
}
.class_view_side_share > .btn_share_bookmark > .tooltip i {
background-image: url(../images/btn_bookmark_n.png);
}
.class_view_side_share > .btn_share_bookmark:hover > .tooltip i,
.class_view_side_share > .btn_share_bookmark.active > .tooltip i {
background-image: url(../images/btn_bookmark_o.png);
}
.class_view_side_share > .btn_share_all > .tooltip i {
background-image: url(../images/btn_share_n.png);
}
.class_view_side_share > .btn_share_all:hover > .tooltip i {
background-image: url(../images/btn_share_o.png);
}
.class_view_side_share > .btn_share_url > .tooltip i {
background-image: url(../images/btn_helf_n.png);
}
.class_view_side_share > .btn_share_url:hover > .tooltip i {
background-image: url(../images/btn_helf_o.png);
}
.class_view_side_share .tooltip_bottom::after {
left: initial;
right: 8px;
margin-left: 0;
}
.class_view_side_share .tooltip_bottom {
top: calc(100% + 6px + 10px);
right: 10px;
margin-left: 0;
left: initial;
white-space: nowrap;
}
.class_view_side_share .tooltip {
cursor: pointer;
z-index: 3;
}
.class_view_box_06 {
margin-bottom: 0;
width: 100%;
}
.class_view_box_06 .select2_custom .select2-results__option {
padding-left: 20px !important;
padding-right: 20px !important;
padding-bottom: 18px !important;
padding-top: 18px !important;
border-bottom: 1px solid #f5f5f5;
}
.class_view_box_06 .select2_custom .select2-results > .select2-results__options {
padding-top: 0 !important;
}
.class_view_box_06 .select2_custom .select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 20px !important;
}
.class_view_box_06 .select2_custom .select2-container--default .select2-selection--single .select2-selection__arrow {
right: 20px !important;
width: 12px !important;
}
.class_view_box_06 .select2_schedule {
font-weight: 500;
font-size: 14px;
color: #3c3c3c;
overflow: hidden;
}
.class_view_box_06 .select2_schedule span {
font-size: 12px;
color: #a0a0a0;
display: block;
float: right;
}
.class_view_box_06 .select2_schedule span b {
color: #ff6000;
}
.select2_custom .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #3c3c3c !important;
}
.class_view_box_06 .select2_custom .select2-selection {
padding-right: 20px !important;
padding-bottom: 18px !important;
padding-top: 18px !important;
border-bottom: 1px solid #f5f5f5;
}
.class_view_box_fix {
position: absolute;
top: 0;
width: 267px;
}
.class_view_box_fix.active {
position: fixed;
top: 190px;
}
.class_view_box_fix.stop {
position: absolute;
top: initial;
bottom: 0;
height: auto;
}
.class_view_side_info .item_price {
position: relative;
width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.class_view_side_info .item_paid {
display: table;
height: 100%;
width: 100%;
position: relative;
padding-top: 5px;
}
.class_view_side_info .item_paid > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: bottom;
}
.class_view_side_info .item_discount_price {
text-align: left;
font-size: 22px;
font-weight: 500;
color: #3c3c3c;
line-height: 120%;
}
.class_view_side_info .item_discount_price_sub {
text-align: left;
font-size: 20px;
font-weight: 500;
color: #3c3c3c;
margin-top: 0px;
}
.item_discount_price_text {
font-size: 14px;
}
.class_view_side_info .item_discount_price_subtext {
font-size: 11px;
}
.class_view_side_info .item_discount_price span {
display: block;
text-decoration: line-through;
color: #c8c8c8;
margin-bottom: 0px;
font-size: 16px;
font-weight: 400;
}
.class_view_side_info .item_discount_rate {
font-size: 16px;
color: #fe4d3d;
font-weight: 700;
line-height: 120%;
text-align: right;
width: 85px;
}
.class_view_side_info .item_discount_rate i {
display: inline-block;
width: 12px;
height: 14px;
background: url('../images/ic_discount.png') center center no-repeat;
background-size: 100% auto;
overflow: hidden;
position: relative;
vertical-align: middle;
margin-left: 8px;
}
.class_view_side_info .item_free {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 77px;
height: 36px;
background: url('../images/ic_free.png') center center no-repeat;
background-size: 100% auto;
overflow: hidden;
}
.enrolment_content {
display: block;
position: relative;
}
.enrolment_content > * {
border-radius: 0;
font-size: 16px;
line-height: 50px;
height: 50px;
}
.class_view_box_06 .select2-container--default .select2-selection--single {
border-color: #e6e6e6;
border-left: 0 !important;
border-right: 0 !important;
height: 50px !important;
}
.class_view_box_06 .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 50px !important;
}
/* #class_detail_before
----------------------------------------------------- */
.class_view_review_rating {
float: right;
line-height: 80px;
margin-right: 27.5px;
}
.class_view_review_rating .el-rate__icon {
margin-right: 6px;
font-size: 19px;
}
.class_view_review_rating .rating_custom {
margin-right: -6px;
}
.class_view_review_rating_point {
color: #ff6000;
font-size: 20px;
font-weight: 400;
margin-right: 15px;
display: inline-block;
vertical-align: middle;
}
.class_view_review_rating_point b {
font-weight: 700;
}
.class_home_wrap .cm_post_content {
max-height: 100%;
}
.review_user_rating {
position: absolute;
right: 0;
top: 0;
}
.review_user_rating .el-rate__icon {
margin-right: 3px;
font-size: 13px;
}
.review_user_rating .rating_custom {
margin-right: -3px;
}
.class_detail_page .cm_comment_main {
margin-bottom: 0;
border: 0;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
.class_detail_page .cm_main_header {
margin-top: 14px;
line-height: 120%;
position: relative;
}
.review_user_rating .rating_img img {
display: inline-block;
width: 12px;
height: auto;
margin: 0 0.5px;
}
.btn_review_more {
width: 100%;
height: 48px;
background-image: url('../images/ic_arrow_more_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 12px auto;
border-top: 1px solid #f0f0f0;
}
.btn_review_more:hover {
background-image: url('../images/ic_arrow_more_o.png');
}
/* #class_detail_after
----------------------------------------------------- */
.progress_n_live_on {
margin-top: 0%;
}
.progress_n_live_on > * {
float: left;
}
.progress_n_live_on > .realive_progress {
width: 297px;
margin-right: 20px;
padding: 0;
border: 0;
margin-top: 10px;
}
.progress_n_live_on > *:not(.realive_progress),
.btn_class_start {
width: calc(100% - 297px - 20px);
max-width: 267px;
margin-top: 10px;
line-height: 36px;
height: 36px;
}
.class_home_wrap .class_view_side_nav,
.class_mission_wrap .class_view_side_nav,
.mypage_mission_wrap .class_view_side_nav,
.class_qna_wrap .class_view_side_nav,
.class_user_wrap .class_view_side_nav {
top: 0;
}
.class_user_wrap .class_view_side_nav button {
/* margin-bottom: 20px */
}
.class_view_tab_content {
min-height: 400px;
}
.class_view_tab_content > div {
display: none;
}
.class_view_tab_content > div.active {
display: block;
}
.class_view_tab_content > div:not(.class_view_side_nav) {
visibility: hidden;
z-index: 0;
opacity: 0;
height: 0;
}
.class_view_tab_content > div.active {
visibility: visible;
z-index: 1;
opacity: 1;
height: auto;
}
.class_view_tab_content > .class_view_side_nav {
display: block;
}
.class_view_evaluation > button {
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 12px;
margin-right: 4px;
border-radius: 4px;
font-size: 14px;
color: #ffffff;
margin-right: 25px;
font-weight: 700;
cursor: pointer;
}
.class_view_evaluation {
position: absolute;
right: 0px;
bottom: 0;
float: none;
display: block;
margin: 0;
height: 100%;
line-height: 56px;
}
.class_view_title .class_view_evaluation {
visibility: hidden;
opacity: 0;
}
.class_view_evaluation .el-rate__icon {
margin-right: 6px;
font-size: 19px;
}
.class_view_evaluation .rating_custom {
margin-right: -6px;
}
.class_view_evaluation .btn_review i {
display: inline-block;
width: 16px;
height: 16px;
background: url('../images/ic_star.png') center/contain no-repeat;
margin-right: 2px;
position: relative;
top: 2px;
}
.class_view_notice_contnet {
position: relative;
padding-top: 23px;
/* min-height: 343px;*/
}
.class_view_notice_title {
position: relative;
padding-left: 20px;
height: 58px;
line-height: 58px;
border-bottom: 1px solid #f0f0f0;
}
.class_view_notice_title h6 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_view_notice_title .btn_notice_write {
position: absolute;
right: 0;
top: 0;
width: 58px;
height: 58px;
background-image: url('../images/ic_add_n_02.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
.class_view_notice_title .btn_notice_write:hover {
background-image: url('../images/ic_add_s_02.png');
}
.class_view_notice_contnet .class_view_notice_item {
position: relative;
padding-left: 20px;
padding-right: 45px;
cursor: pointer;
padding-bottom: 23px;
}
.class_view_notice_item p {
display: block;
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
max-height: 40px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.class_view_notice_item span {
display: inline-block;
margin-top: 5px;
margin-right: 6px;
font-size: 11px;
font-weight: 400;
color: #b4b4b4;
line-height: 120%;
}
.class_view_notice_item b {
display: inline-block;
color: #ff6000;
font-size: 11px;
font-weight: 400;
}
.class_view_notice_item .cm_edit_control {
right: 0;
top: 0;
margin-top: 0;
width: 54px !important;
}
.class_view_notice_item .cm_edit_control > button {
width: 100%;
}
.btn_notice_more,
.btn_mission_more {
width: 100%;
height: 40px;
background-image: url('../images/ic_arrow_more_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 12px auto;
border-top: 1px solid #f0f0f0;
}
.btn_notice_more:hover,
.btn_mission_more:hover {
background-image: url('../images/ic_arrow_more_o.png');
}
/*미션*/
.class_mission_title {
margin-top: 6px;
line-height: 120%;
}
.class_mission_title > * {
display: inline-block;
font-size: 14px;
}
.class_mission_title span {
margin-right: 6px;
font-weight: 700;
color: #ff6000;
}
.class_mission_title p {
font-weight: 500;
color: #3c3c3c;
}
.class_mission_wrap .btn_more_large,
.mypage_mission_wrap .btn_more_large {
margin-top: 10px;
}
.class_mission_wrap .class_view_box_title,
.mypage_mission_wrap .class_view_box_title {
padding-top: 25px;
border-bottom: 1px solid #ebebeb;
padding-left: 30px;
padding-right: 20px;
height: 92px;
line-height: 92px;
}
.class_mission_wrap .class_view_box_title .cm_main_header,
.mypage_mission_wrap .class_view_box_title .cm_main_header {
margin-top: 4px;
}
.class_detail_page .cm_layout > .cm_profile_sect {
width: 62px;
}
.class_mission_wrap .class_view_box_content > .cm_main_sect > .cm_post_wrap,
.mypage_mission_wrap .class_view_box_content > .cm_main_sect > .cm_post_wrap {
padding: 20px 30px;
}
.class_mission_wrap .cm_comment_write,
.mypage_mission_wrap .cm_comment_write {
display: block;
padding-left: 30px;
padding-right: 30px;
}
.emotion_rating {
overflow: hidden;
width: 100%;
position: relative;
}
.emotion_rating > button {
width: 25%;
float: left;
text-align: center;
height: 62px;
line-height: 62px;
vertical-align: middle;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
background-color: #ffffff;
}
.emotion_rating > button:last-child {
border-right: 0 none;
}
.emotion_rating > button > * {
display: inline-block;
vertical-align: middle;
}
.emotion_rating > button i {
width: 30px;
height: 100%;
background-image: url('../images/ic_emotion_01_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.emotion_rating > button span,
.emotion_rating > button b {
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
margin-left: 10px;
}
.emotion_rating > button b {
margin-left: 3px;
}
.emotion_rating > button:hover span,
.emotion_rating > button:hover b,
.emotion_rating > button.active span,
.emotion_rating > button.active b {
color: #ff6000;
}
.emotion_rating .btn_emotion_01 i {
background-image: url('../images/ic_emotion_01_n.png');
}
.emotion_rating .btn_emotion_01:hover i,
.emotion_rating .btn_emotion_01.active i {
background-image: url('../images/ic_emotion_01_s.png');
}
.emotion_rating .btn_emotion_02 i {
background-image: url('../images/ic_emotion_02_n.png');
}
.emotion_rating .btn_emotion_02:hover i,
.emotion_rating .btn_emotion_02.active i {
background-image: url('../images/ic_emotion_02_s.png');
}
.emotion_rating .btn_emotion_03 i {
background-image: url('../images/ic_emotion_03_n.png');
}
.emotion_rating .btn_emotion_03:hover i,
.emotion_rating .btn_emotion_03.active i {
background-image: url('../images/ic_emotion_03_s.png');
}
.emotion_rating .btn_emotion_04 i {
background-image: url('../images/ic_emotion_04_n.png');
}
.emotion_rating .btn_emotion_04:hover i,
.emotion_rating .btn_emotion_04.active i {
background-image: url('../images/ic_emotion_04_s.png');
}
.class_mission_wrap .cm_comment_main,
.mypage_mission_wrap .cm_comment_main {
padding-top: 0;
padding-bottom: 20px;
}
.class_view_mission_contnet {
position: relative;
/*min-height: 343px;*/
}
.class_view_mission_title {
position: relative;
padding-left: 20px;
height: 58px;
line-height: 58px;
border-bottom: 1px solid #f0f0f0;
}
.class_view_mission_title h6 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_view_mission_contnet > button {
width: 100%;
text-align: left;
line-height: 20px;
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
white-space: normal;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 20px;
padding-right: 20px;
background-color: #ffffff;
border-bottom: 1px solid #fafafa;
}
.class_view_mission_contnet > button.active {
color: #ffffff;
font-weight: 700;
background-color: #ff6000;
}
/*질문답변*/
.class_view_qna_item {
display: table;
width: 100%;
position: relative;
padding-top: 30px;
padding-bottom: 30px;
padding-right: 1.43%;
border-bottom: 1px solid #f5f5f5;
cursor: pointer;
}
.class_view_qna_item > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: middle;
}
.class_view_qna_item > *:nth-child(1) {
padding-left: 30px;
}
.class_view_qna_item > *:nth-child(2) {
width: 11%;
text-align: center;
}
.class_view_qna_item > *:nth-child(3) {
width: 11%;
text-align: center;
}
.class_view_qna_item p {
display: block;
font-size: 16px;
font-weight: 500;
color: #3c3c3c;
max-height: 48px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.class_view_qna_item > *:nth-child(1) span {
display: inline-block;
font-size: 14px;
font-weight: 700;
color: #3c3c3c;
margin-right: 6px;
margin-top: 12px;
}
.class_view_qna_item > *:nth-child(1) b {
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
}
.class_view_qna_item > *:nth-child(2) span,
.class_view_qna_item > *:nth-child(3) span {
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
line-height: 120%;
}
.class_view_qna_item > *:nth-child(2) b,
.class_view_qna_item > *:nth-child(3) b {
font-size: 22px;
font-weight: 300;
color: #3c3c3c;
display: block;
line-height: 120%;
margin-bottom: 3px;
}
.class_qna_wrap .class_view_side_nav .class_view_box_0 {
margin-top: 20px;
}
.class_view_qna_content {
position: relative;
padding-top: 22px;
}
.class_view_qna_title {
position: relative;
padding-left: 20px;
height: 58px;
line-height: 58px;
border-bottom: 1px solid #f0f0f0;
}
.class_view_qna_title h6 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_view_qna_title .btn_notice_write {
position: absolute;
right: 0;
top: 0;
width: 58px;
height: 58px;
background-image: url('../images/ic_add_n_02.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
.class_view_qna_title .btn_notice_write:hover {
background-image: url('../images/ic_add_s_02.png');
}
.class_view_qna_content .class_view_qna_item_self {
position: relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 22px;
cursor: pointer;
}
.class_view_qna_item_self p {
display: block;
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
max-height: 40px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.class_view_qna_item_self span {
display: inline-block;
margin-top: 5px;
font-size: 11px;
font-weight: 400;
color: #b4b4b4;
line-height: 120%;
}
.class_view_qna_item_self i {
width: 14px;
height: 10px;
margin-left: 8px;
background-image: url('../images/ic_eye.png');
display: inline-block;
vertical-align: middle;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.class_view_qna_item_self i.ic_qna_view_status {
background-image: url('../images/ic_eye.png');
}
.class_view_qna_item_self i.ic_qna_comment_status {
background-image: url('../images/ic_comment.png');
}
.class_view_qna_item_self b {
display: inline-block;
margin-left: 4px;
font-size: 11px;
font-weight: 400;
color: #b4b4b4;
line-height: 120%;
}
.class_qna_wrap .class_view_box_title {
position: relative;
padding-left: 30px;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ebebeb;
}
.class_qna_wrap .class_view_box_title h5 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_qna_select {
float: right;
margin-right: 20px;
line-height: 80px;
}
.class_qna_select > * {
width: 200px;
display: inline-block;
margin-left: 6px;
}
/*수강자*/
.class_user_wrap .cm_layout {
padding-left: 30px;
padding-top: 14px;
padding-bottom: 14px;
border-top: 1px solid #f5f5f5;
padding-right: 30px;
}
.class_user_wrap .class_view_box_drop_item > button + div {
overflow-y: scroll;
visibility: hidden;
opacity: 0;
}
.class_user_wrap .class_view_box_drop_item > button.active + div {
visibility: visible;
opacity: 1;
}
.class_user_wrap .cm_edit_control > div button {
width: 108px;
text-align: right;
}
.class_user_wrap .cm_edit_control > button + div {
left: initial;
right: -9px;
}
.class_user_wrap .cm_edit_control > div > span {
background-position: center right 21px;
}
.class_user_wrap .cm_main_header > b {
font-size: 13px;
color: #ff6000;
font-weight: 400;
float: right;
}
.class_user_wrap .cm_profile_sect .img_shadow {
width: 36px;
height: 36px;
}
.class_user_wrap .cm_layout > .cm_profile_sect {
width: 56px;
}
.class_user_wrap .cm_main_header > b.active {
color: #3c3c3c;
}
.class_user_wrap .cm_main_header {
padding-right: 50px;
margin-top: 11px;
}
.class_user_wrap .cm_main_header > span {
color: #3c3c3c;
font-size: 14px;
font-weight: 400;
vertical-align: middle;
display: inline-block;
margin-left: 3px;
margin-top: -2px;
}
.class_user_wrap .class_view_box_title {
position: relative;
padding: 0 30px;
height: auto;
line-height: initial;
}
.class_user_wrap .class_view_box_title h5 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_user_wrap .class_view_box_title b {
font-weight: 500;
font-size: 16px;
color: #ff6000;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
}
/* .class_user_wrap .class_view_box_title span {
font-weight: 500;
font-size: 16px;
color: #B4B4B4;
display: inline-block;
vertical-align: middle;
margin-left: 8px;
} */
.class_view_user_contnet {
position: relative;
/*min-height: 343px;*/
}
.class_view_user_title {
position: relative;
padding: 20px;
/* height: 58px; */
/* line-height: 58px; */
border-bottom: 1px solid #f0f0f0;
}
.class_view_user_title h6 {
font-weight: 700;
font-size: 16px;
color: #3c3c3c;
display: inline-block;
vertical-align: middle;
}
.class_view_user_title h6 b {
color: #ff6000;
font-weight: 700;
}
.class_view_user_contnet > button {
width: 100%;
text-align: left;
line-height: 20px;
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
white-space: normal;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 20px;
padding-right: 20px;
background-color: #ffffff;
border-bottom: 1px solid #fafafa;
}
.class_view_user_contnet > button.active {
color: #ffffff;
font-weight: 700;
background-color: #ff6000;
}
.class_view_user_title .case_wrap {
display: flex;
margin-top: 9px;
}
.class_view_user_title .case_wrap li {
margin-right: 8px;
}
.class_view_user_title .case_wrap li span {
display: flex;
align-items: center;
font-size: 12px;
color: #787878;
}
.class_view_user_title .case_wrap li span:before {
content: '';
display: block;
width: 12px;
height: 12px;
margin-right: 4px;
}
.class_view_user_title .case_wrap li .case01:before {
background: url(../images/badge_access@3x.png) center/contain no-repeat;
}
.class_view_user_title .case_wrap li .case02:before {
background: url(../images/badge_drop@3x.png) center/contain no-repeat;
}
.class_view_user_title .case_wrap li .case03:before {
background: #d2d2d2;
border-radius: 100%;
}
.class_user_wrap .search_option_box {
display: flex;
align-items: center;
padding: 30px 0;
}
.checkbox2_custom input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: polygon(0 0, 0 0, 0 0);
}
.checkbox2_custom input + label {
position: relative;
margin-right: 12px;
font-size: 14px;
font-weight: 700;
padding-left: 28px;
}
.checkbox2_custom input + label:before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #e6e6e6;
box-sizing: border-box;
}
.checkbox2_custom input:checked + label:before {
background: url(../images/ic_ck_notice_b.png) center/90% no-repeat;
}
.class_user_wrap .checkbox2_custom input + label {
padding-left: 20px;
}
.search_option_box .select2_custom {
max-width: 87px;
width: 100%;
margin-right: 8px;
}
.search_option_box
.select2_custom[select-id='gray']
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
line-height: 28px !important;
font-size: 12px !important;
}
.search_option_box .select2_custom[select-id='gray'] .select2-dropdown .select2-results__option {
font-size: 12px !important;
}
.search_option_box .select2-results__option {
padding-bottom: 15px !important;
}
.btn_x_small {
line-height: 28px;
border-radius: 4px;
height: 28px;
font-size: 12px;
color: #ffffff;
text-align: center;
padding: 0 16px;
font-weight: 700;
min-width: 74px;
cursor: pointer;
}
.search_option_box .btn_x_small {
margin-right: 36px;
}
.search_option_box .search_content {
max-width: none;
flex-grow: 1;
margin-left: 8px;
}
.search_option_box .search_content input::placeholder {
color: #d2d2d2;
font-size: 12px;
}
.search_option_box .auto_frame.active {
display: block;
z-index: 1;
}
.class_user_wrap .cm_edit_control {
display: none;
}
.class_user_wrap .cm_main_sect {
display: flex;
align-items: center;
justify-content: space-between;
}
.class_user_wrap .cm_main_sect .name {
font-size: 14px;
font-weight: 700;
flex-grow: 1;
margin-left: 12px;
}
.class_user_wrap .cm_main_sect .tel {
font-size: 14px;
margin-right: 36px;
}
.class_user_wrap .cm_main_sect .date_wrap {
font-size: 14px;
margin-right: 36px;
}
.class_user_wrap .cm_main_sect .time {
margin-left: 8px;
}
.class_user_wrap .cm_main_sect .state span:before {
content: '';
display: block;
width: 14px;
height: 14px;
}
.class_user_wrap .cm_main_sect .state .case01:before {
background: url(../images/badge_access@3x.png) center/contain no-repeat;
}
.class_user_wrap .cm_main_sect .state .case02:before {
background: url(../images/badge_drop@3x.png) center/contain no-repeat;
}
.class_user_wrap .cm_main_sect .state .case03:before {
background: #d2d2d2;
border-radius: 100%;
}
.class_user_wrap .info_wrap {
flex-grow: 1;
display: flex;
}
.class_user_wrap .paging_warp {
text-align: center;
padding: 20px 0;
}
.class_user_wrap .cm_layout:last-child {
border-bottom: 1px solid #f5f5f5;
}
@media only screen and (max-width: 897px) {
.class_user_wrap .search_option_box {
flex-wrap: wrap;
}
.search_option_box .search_content {
margin-left: 0;
margin-top: 10px;
}
.class_user_wrap .cm_main_sect .date_wrap {
display: none;
}
.search_option_box .select2_custom {
margin-right: 3px;
max-width: 84px;
}
.search_option_box .btn_x_small {
margin-right: 3px;
}
}
@media only screen and (max-width: 767px) {
.class_user_wrap .class_view_box_title {
display: none;
}
.class_user_wrap .cm_main_sect {
position: relative;
}
.class_user_wrap .info_wrap {
position: relative;
padding-bottom: 16px;
}
.class_user_wrap .info_wrap .name {
flex-grow: unset;
font-size: 14px;
}
.class_user_wrap .info_wrap .tel {
position: absolute;
bottom: 0;
left: 12px;
font-size: 12px;
}
.class_user_wrap .info_wrap .state {
margin-left: 4px;
}
.class_user_wrap .cm_edit_control {
display: block;
position: absolute;
right: 0;
}
.class_user_wrap .cm_main_sect .cm_edit_control > div button {
font-size: 14px;
text-align: center;
font-weight: 400;
}
.class_user_wrap .cm_main_sect .cm_edit_control > div button {
min-width: 79px;
width: auto;
}
.class_user_wrap .cm_main_sect .cm_edit_control > div > button:last-child {
padding-bottom: 14px;
}
.class_user_wrap .cm_main_sect .cm_edit_control > div button {
padding-top: 14px;
}
.class_user_wrap .paging_warp {
display: none;
}
}
/* 라이브클래스 수업 페이지
----------------------------------------------------- */
.realive_wrapper {
position: relative;
height: 100vh;
}
.realive_header {
height: 60px;
position: relative;
z-index: 100;
width: 100vw;
background-color: #323232;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.btn_curriculum_off {
content: '';
position: fixed;
width: 1px;
left: 350px;
top: 0;
height: 100%;
background-color: rgba(50, 50, 50, 0.7);
cursor: default;
opacity: 0;
visibility: hidden;
}
.btn_curriculum_on {
display: inline-block;
vertical-align: top;
width: 24px;
height: 100%;
background-image: url(../images/btn_curriculum_o.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px auto;
}
.btn_curriculum_on.active {
/* background-image: url(../images/btn_curriculum_o.png); */
}
.realive_bi {
margin-left: 14px;
line-height: 60px;
}
.realive_bi > i {
vertical-align: top;
margin-left: 13px;
width: 130px;
height: 100%;
display: inline-block;
}
.realive_bi > i a {
width: 100%;
height: 100%;
background-image: url('../images/logo_liveklass_white.png');
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.realive_bi > span {
display: inline-block;
display: none;
font-size: 16px;
vertical-align: middle;
color: #ffffff;
font-weight: 300;
margin-left: 8px;
}
.realive_window_control {
align-self: center;
justify-self: center;
}
.realive_window_control > * {
width: 105px;
display: inline-block;
margin-left: 1px;
margin-right: 1px;
}
.realive_room_control {
align-self: center;
justify-self: flex-end;
margin-right: 14px;
}
.realive_room_control button {
width: 36px;
height: 36px;
margin-left: 8px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.realive_room_control .btn_room_mobile_more {
display: none;
background-image: url('../images/btn_video_more_n.png');
}
.realive_room_control .btn_window_expend {
background-image: url('../images/btn_video_expand_n.png');
}
.realive_room_control .btn_window_expend_cancel {
background-image: url('../images/btn_video_cancel_n.png');
}
.realive_room_control .btn_window_expend_cancel {
background-image: url('../images/btn_video_cancel_n.png');
}
.btn_room_mobile_more.btn_drop + * {
position: relative;
max-height: 100%;
height: auto;
-webkit-transition: none;
transition: none;
}
.btn_video_change {
background-image: url('../images/btn_video_change_n.png');
}
.btn_video_change:hover,
.btn_video_change.active {
background-image: url('../images/btn_video_change_o.png');
}
.btn_video_off {
background-image: url('../images/btn_video_off_n.png');
}
.btn_video_off:hover,
.btn_video_off.active {
background-image: url('../images/btn_video_off_s.png');
}
.btn_video_mute_off {
background-image: url('../images/btn_video_mute_off_n.png');
}
.btn_video_mute_off:hover,
.btn_video_mute_off.active {
background-image: url('../images/btn_video_mute_off_s.png');
}
.btn_video_question {
background-image: url('../images/btn_video_question_n.png');
}
.btn_video_question:hover,
.btn_video_question.active {
background-image: url('../images/btn_video_question_o.png');
}
.btn_video_alert {
background-image: url('../images/btn_video_alert_n.png');
}
.btn_video_alert:hover,
.btn_video_alert.active {
background-image: url('../images/btn_video_alert_o.png');
}
.btn_video_exit {
background-image: url('../images/btn_video_exit_n.png');
}
.btn_video_exit:hover,
.btn_video_exit.active {
background-image: url('../images/btn_video_exit_o.png');
}
.realive_side {
display: none;
padding: 0;
margin: 0;
font-size: 12px;
width: 400px;
position: absolute;
top: 60px;
bottom: 0;
left: 0;
background-color: #f5f5f5;
border-right: 1px solid #e4e7e9;
flex-direction: column;
z-index: 20;
color: rgba(57, 70, 78, 0.8);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
overflow-y: scroll;
overflow-x: hidden;
}
.realive_side.active {
display: flex;
}
.realive_side.active + .realive_content {
margin-left: 400px;
}
.realive_side_title {
padding: 30px 20px;
padding-right: 10px;
}
.realive_side_title h5 {
font-size: 16px;
color: #3c3c3c;
font-weight: 700;
line-height: 24px;
}
.realive_side_title h5 i {
display: inline-block;
vertical-align: top;
margin-right: 12px;
width: 18px;
height: 24px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
background-image: url('../images/ic_make_curriculum_s.png');
}
.realive_side_control {
float: right;
position: absolute;
right: 0;
top: 30px;
}
.realive_side_control button {
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: 7px auto;
background-position: center center;
}
.btn_rl_prev {
background-image: url('../images/btn_curriculum_Previous_n.png');
}
.btn_rl_prev:hover {
background-image: url('../images/btn_curriculum_Previous_o.png');
}
.btn_rl_next {
background-image: url('../images/btn_curriculum_next_n.png');
}
.btn_rl_next:hover {
background-image: url('../images/btn_curriculum_next_o.png');
}
.realive_progress {
border-bottom: 1px solid #f0f0f0;
padding: 0 10px 25px 20px;
}
.realive_progress_text {
font-size: 12px;
color: #3c3c3c;
font-weight: 400;
overflow: hidden;
margin-bottom: 5px;
}
.realive_progress_text div {
float: left;
}
.realive_progress_text span {
color: #ff6000;
}
.realive_progress_text b {
font-weight: 700;
float: right;
}
.realive_progress_bar {
display: block;
vertical-align: middle;
width: 100%;
/* margin-right: -55px;*/
box-sizing: border-box;
}
.realive_progress_outer {
height: 6px;
border-radius: 100px;
background-color: #d2d2d2;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.realive_progress_inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #ff6000;
text-align: right;
border-radius: 100px;
line-height: 1;
white-space: nowrap;
transition: width 0.6s ease;
}
.side_curriculum_wrap {
padding: 25px 20px;
padding-right: 10px;
position: relative;
}
.side_curriculum_item > button {
width: 100%;
min-height: 56px;
position: relative;
background-color: #ffffff;
text-align: left;
display: flex;
flex-direction: row;
border-bottom: 1px solid #ebebeb;
justify-content: space-between;
}
.side_curriculum_item > button > * {
display: block;
vertical-align: middle;
}
.side_curriculum_item > button > div {
padding-right: calc(6.5% + 10px);
align-self: center;
width: calc(100% - 19%);
font-size: 14px;
font-weight: 500;
color: #3c3c3c;
line-height: 120%;
white-space: initial;
padding-top: 10px;
padding-bottom: 10px;
}
.side_curriculum_item > button > h6 {
font-size: 14px;
font-weight: 500;
align-self: center;
min-width: 30px;
color: #3c3c3c;
padding-left: 6.5%;
width: 19%;
}
.side_curriculum_item > button i {
right: 6.5%;
}
.side_curriculum_drop_view {
position: relative;
}
.side_curriculum_item > button.active + div {
max-height: 1000px;
}
.side_curriculum_table {
display: table;
width: 100%;
height: 56px;
border-bottom: 1px solid #f5f5f5;
background-color: #fcfcfc;
}
.side_curriculum_table > * {
display: table-cell;
width: auto;
height: 100%;
vertical-align: middle;
text-align: left;
font-size: 14px;
color: #3c3c3c;
line-height: 120%;
font-weight: 500;
}
.side_curriculum_table.active > * {
color: #ff6000;
}
.side_curriculum_table > *:nth-child(1) {
padding-left: 6.5%;
width: 19%;
}
.side_curriculum_table > *:nth-child(1) i {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
}
.side_curriculum_table.vod > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_video_n.png');
}
.side_curriculum_table.live > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_live_n.png');
}
.side_curriculum_table.text > *:nth-child(1) i {
background-image: url('../images/text_icon_off.png');
}
.side_curriculum_table.mission > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_mission_n.png');
}
.side_curriculum_table.pin > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_pin_n.png');
}
.side_curriculum_table.vod.active > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_video_s.png');
}
.side_curriculum_table.live.active > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_live_s.png');
}
.side_curriculum_table.mission.active > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_mission_s.png');
}
.side_curriculum_table.text.active > *:nth-child(1) i {
background-image: url('../images/text_icon_on.png');
}
.side_curriculum_table.pin.active > *:nth-child(1) i {
background-image: url('../images/ic_classtyp_pin_s.png');
}
.side_curriculum_table > *:nth-child(2) {
width: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.side_curriculum_table > *:nth-child(3) i.active {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
background-image: url('../images/btn_curriculum_ck.png');
}
.side_curriculum_table > *:last-child {
width: 37px;
}
.side_curriculum_table button {
white-space: normal;
text-align: left;
}
.realive_content {
position: relative;
height: calc(100vh - 60px);
}
.realive_class_page {
height: 100%;
overflow: hidden;
}
.realive_scroll {
overflow-y: auto;
position: relative;
height: 100%;
}
.vod_ver {
background-color: #ffffff;
}
.mission_ver {
}
.vod_iframe_wrap {
position: relative;
width: 100%;
height: 700px;
}
.vod_iframe_wrap iframe {
position: absolute;
width: 100%;
height: 100%;
}
.vod_iframe_wrap .vod_ready {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.vod_iframe_wrap .vod_ready .icon {
width: 200px;
height: 150px;
background: url(../images/convert_ico.gif) center/contain no-repeat;
}
.vod_iframe_wrap .vod_ready .message {
display: flex;
flex-direction: column;
width: 287px;
word-break: keep-all;
text-align: center;
}
.vod_iframe_wrap .vod_ready .message .title {
font-size: 24px;
font-weight: 700;
}
.vod_iframe_wrap .vod_ready span {
font-size: 14px;
color: #ffffff;
line-height: 1.5;
}
.vod_post_wrap {
max-width: 680px;
background-color: #ffffff;
padding-left: 20px;
padding-right: 20px;
width: 100%;
height: auto;
position: relative;
padding-top: 50px;
padding-bottom: 110px;
margin: 0 auto;
}
.vod_post_title {
padding-bottom: 30px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
}
.vod_post_title span {
color: #b4b4b4;
font-weight: 400;
font-size: 12px;
line-height: 13px;
display: block;
margin-bottom: 10px;
}
.vod_post_title h3 {
font-size: 20px;
color: #3c3c3c;
font-weight: 700;
line-height: 22px;
}
.vod_post_viewed {
font-size: 15px;
color: #a0a0a0;
margin-bottom: 20px;
}
.realive_class_page .post_cont p {
/* font-size: 14px;
color: #3c3c3c;
font-weight: 400;
line-height: 20px;
margin-bottom: 15px !important; */
}
.realive_progress_nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.realive_side.active + .realive_content .realive_progress_nav {
width: calc(100% - 360px);
left: 360px;
}
.realive_progress_nav > * {
width: 50%;
border-radius: 0;
height: 60px;
line-height: 60px;
}
.realive_progress_nav i {
display: inline-block;
width: 28px;
height: 100%;
vertical-align: top;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.realive_progress_nav > *:nth-child(1) i:not(.homework) {
background-image: url(../images/ic_curriculum_question.png);
margin-right: 10px;
}
.realive_progress_nav .homework {
background-image: url(../images/homework.png);
margin-right: 10px;
}
.realive_progress_nav > *:nth-child(2) i {
background-image: url(../images/ic_curriculum_next.png);
margin-left: 10px;
}
.mission_wrap {
display: flex;
}
.mission_post_wrap {
flex: 1;
position: relative;
}
.mission_post_content {
max-width: 680px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
height: auto;
position: relative;
padding-bottom: 100px;
margin: 0 auto;
}
.offline_post_wrap {
max-width: 680px;
padding-left: 20px;
padding-right: 20px;
width: 100%;
height: auto;
position: relative;
padding-top: 40px;
padding-bottom: 100px;
margin: 0 auto;
}
.offline_post_wrap {
padding-top: 50px;
}
.offline_post_title {
padding-bottom: 30px;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
}
.offline_post_title span {
color: #b4b4b4;
font-weight: 400;
font-size: 12px;
line-height: 13px;
display: block;
margin-top: 10px;
}
.mission_post_title {
height: 100px;
line-height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mission_post_title span {
color: #b4b4b4;
font-weight: 400;
font-size: 12px;
line-height: 13px;
display: block;
}
.mission_post_title h3 {
font-size: 20px;
color: #3c3c3c;
font-weight: 700;
line-height: 22px;
}
.offline_post_title h3 {
font-size: 20px;
color: #3c3c3c;
font-weight: 700;
line-height: 22px;
}
.mission_write_wrap {
display: none;
height: 100%;
background-color: #fafafa;
position: absolute;
right: 0;
top: 0;
width: 358px;
box-shadow: -3px 0 6px 0px RGBA(0, 0, 0, 0.05);
}
.mission_post_wrap.active {
margin-right: 358px;
}
.mission_post_wrap.active ~ .mission_write_wrap {
display: block;
}
/*.realive_side.active + .realive_content .realive_progress_nav*/
.mission_post_wrap.active ~ .realive_progress_nav {
width: calc(100% - 358px);
}
.realive_side.active + .realive_content .mission_post_wrap.active ~ .realive_progress_nav {
width: calc(100% - 360px - 358px);
}
.mission_write_content {
width: 100%;
height: 100%;
position: relative;
}
.mission_header_bar {
display: none;
}
.mission_write_top {
border-bottom: 1px solid #ebebeb;
position: relative;
height: 100px;
overflow: hidden;
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
}
.mission_write_top h6 {
font-size: 16px;
font-weight: 700;
color: #3c3c3c;
line-height: 20px;
display: inline-block;
padding-right: 30px;
width: 100%;
max-height: 60px;
vertical-align: middle;
overflow: hidden;
}
.mission_write_top > button {
width: 64px;
height: 100%;
background-image: url(../images/btn_popup_cancel_n.png);
background-size: 18px auto;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: absolute;
right: -20px;
top: 0;
}
.mission_write_top > button:active {
background-image: url('../images/btn_popup_cancel_o.png');
}
.mission_write_bottom {
padding: 20px;
height: calc(100% - 100px);
}
.form_mission_write {
border: 1px solid #e6e6e6;
min-height: 600px;
margin-bottom: 40px;
background-color: #ffffff;
}
.form_mission_write > *,
.fr-box {
z-index: 0;
}
.form_mission_write .form_textarea {
border: 0;
padding: 0;
min-height: 76px;
}
.form_mission_write .form_textarea + .img_upload_preview {
margin-top: 12px;
}
.form_mission_button {
display: flex;
}
.form_mission_button > * {
flex: 1;
}
.form_mission_button > *:nth-child(1) {
margin-right: 5px;
}
.form_mission_button > *:nth-child(2) {
margin-left: 5px;
}
.mission_write_wrap .img_p_l {
font-size: 14px;
font-weight: 700;
line-height: 42px;
margin-bottom: 20px;
}
.mission_write_wrap .img_p_l > .img_shadow,
.mission_write_wrap .img_p_l > i {
width: 42px;
height: 42px;
margin-right: 10px;
}
.mission_write_wrap .img_p_l:hover,
.mission_write_wrap .img_p_l:active {
color: #3c3c3c;
}
.mission_write_wrap .form_textarea {
min-height: 200px;
}
.mission_write_wrap .form_post_add {
border-top: 1px solid #f5f5f5;
padding-top: 10px;
margin-top: 12px;
}
.mission_write_wrap .select2_custom {
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.bg_like {
width: 150px;
height: 314px;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -200px;
z-index: 2;
}
@keyframes move_01 {
0% {
bottom: 0;
opacity: 1;
}
100% {
bottom: 100%;
opacity: 0;
}
}
.like {
position: absolute;
width: 40px;
bottom: 0;
height: 40px;
display: block;
background: url('../images/ic_ef_like.png') center center no-repeat;
background-size: 100% auto;
opacity: 0;
}
.like.active {
animation-name: move_01;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.realive_room_wrap {
height: calc(100% - 78px);
position: relative;
background-color: rgb(30, 30, 30);
}
.realive_wrapper.full .realive_room_wrap {
height: 100%;
}
.realive_wrapper.full .realive_room_nav {
display: none;
}
/*.realive_room_control .btn_window_expend_cancel{display: none;}*/
.realive_wrapper.full .realive_room_control .btn_window_expend_cancel {
display: block;
}
/*.realive_wrapper.full .btn_room_mobile_more.btn_drop + *{display: none}*/
.realive_wrapper.full .realive_window_control {
display: none;
}
.realive_wrapper.full .window_member_wrap {
display: none;
}
.realive_room_nav {
width: 100%;
height: 78px;
display: flex;
background-color: #fafafa;
flex-direction: row;
justify-content: center;
border-top: 1px solid #f5f5f5;
}
.realive_room_nav button {
width: 50px;
height: 50px;
margin: 0 6px;
align-self: center;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.btn_view_like {
background-image: url('../images/btn_view_like_n.png');
}
.btn_view_like:active,
.btn_view_like:hover,
.btn_view_like.active {
background-image: url('../images/btn_view_like_o.png');
}
.btn_view_question {
background-image: url('../images/btn_view_question_n.png');
}
.btn_view_question:active,
.btn_view_question:hover,
.btn_view_question.active {
background-image: url('../images/btn_view_question_o.png');
}
.btn_view_cursor {
background-image: url('../images/btn_view_cursor_n.png');
}
.btn_view_cursor:active,
.btn_view_cursor:hover,
.btn_view_cursor.active {
background-image: url('../images/btn_view_cursor_o.png');
}
.btn_view_howling {
background-image: url('../images/btn_view_howling_n.png');
}
.btn_view_howling:active,
.btn_view_howling:hover,
.btn_view_howling.active {
background-image: url('../images/btn_view_howling_o.png');
}
.btn_view_change {
background-image: url('../images/btn_view_change_large_n.png');
}
.btn_view_change:active,
.btn_view_change:hover,
.btn_view_change.active {
background-image: url('../images/btn_view_change_large_o.png');
}
.window_teacher_wrap {
width: 100%;
height: 100%;
position: relative;
}
[class*='live_teacher_'] {
position: absolute;
right: 20px;
bottom: 20px;
box-shadow: 0 2px 4px 0 RGBA(0, 0, 0, 0.2);
width: 288px;
height: 162px;
z-index: 1;
}
[class*='live_teacher_'].active {
box-shadow: none;
right: 0;
bottom: 0;
z-index: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100%;
height: 100%;
}
.realive_room_wrap .window_teacher_wrap video {
object-fit: contain;
}
.realive_room_wrap video {
display: block;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
background: url('../images/ic_profile.png') center center no-repeat;
background-size: auto 30%;
}
.realive_room_wrap noface {
display: block;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
background-color: #464646;
background: #464646 url('../images/ic_no_face.png') center center no-repeat;
background-size: auto 30%;
}
.realive_room_wrap myscreen {
display: block;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
background-color: #464646;
background: #464646 url('../images/btn_screenshare_placeholder_n.png') center center no-repeat;
background-size: auto 30%;
}
.realive_room_wrap otherscreen {
display: block;
width: 100%;
top: 0;
left: 0;
height: 100%;
position: absolute;
background-color: #464646;
background: #464646 url('../images/ic_no_screenshare.png') center center no-repeat;
background-size: auto 30%;
}
.realive_room_wrap .sample {
width: 100%;
height: 100%;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.live_teacher_camera .member_name {
text-align: center;
display: none;
}
.live_teacher_camera:before {
display: none;
content: '';
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
}
.live_teacher_camera.active:before {
display: block;
}
.live_teacher_camera.active .member_name {
display: block;
}
.window_member_wrap {
position: absolute;
left: 10px;
top: 10px;
bottom: 10px;
z-index: 10;
}
.member_view_list {
width: 170px;
height: calc(100% - 40px);
overflow-y: auto;
}
.member_view_item {
width: 150px;
height: 90px;
position: relative;
}
.member_view_item .sample {
background-size: auto 100%;
}
.btn_member_open {
width: 40px;
height: 40px;
z-index: 1;
background-color: #323232;
background-image: url('../images/btn_member_close.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 10px auto;
position: absolute;
right: -40px;
top: 0;
}
.btn_member_open.active {
background-image: url('../images/btn_member_open.png');
}
.btn_member_open + .member_view_content {
overflow-x: hidden;
overflow-y: hidden;
width: 0;
opacity: 0;
height: 100%;
-webkit-transition: width 0.3s, opacity 0.3s;
transition: width 0.3s, opacity 0.3s;
}
.btn_member_open.active + .member_view_content {
width: 150px;
opacity: 1;
}
.member_view_title {
width: 150px;
height: 40px;
background-color: #323232;
display: flex;
flex-direction: row;
justify-content: space-between;
border-right: 1px solid #3c3c3c;
padding: 0 10px;
}
.member_view_title > * {
display: block;
align-self: center;
}
.member_view_title i {
padding-left: 18px;
background-image: url('../images/ic_profile_s.png');
display: inline-block;
background-position: left center;
background-repeat: no-repeat;
background-size: 10px auto;
font-size: 14px;
color: #ffffff;
font-weight: 500;
}
.member_view_title .btn_discussion {
font-size: 13px;
color: #ffffff;
font-weight: 500;
padding-right: 8px;
line-height: 22px;
height: 22px;
min-width: 40px;
padding-left: 8px;
padding-top: 0 !important;
}
.member_check {
position: absolute;
right: 5px;
z-index: 2;
top: 5px;
}
.btn_video_mute {
position: absolute;
right: 5px;
bottom: 5px;
width: 24px;
height: 24px;
background-image: url('../images/btn_video_mute_n.png');
display: inline-block;
z-index: 3;
background-position: left center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.btn_video_mute:hover {
background-image: url('../images/btn_video_mute_o.png');
}
.btn_video_mute:active,
.btn_video_mute.active {
background-image: url('../images/btn_video_mute_s.png');
}
.member_check .custom_circle[type='checkbox']:not(:checked) + label span,
.btn_video_mute:not(.active) {
opacity: 0;
visibility: hidden;
}
.member_check .custom_circle[type='checkbox'] + label span {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.member_view_item:hover .member_check .custom_circle[type='checkbox']:not(:checked) + label span,
.member_view_item:hover .btn_video_mute {
opacity: 1;
visibility: visible;
}
.member_view_item:before {
content: '';
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
}
.member_question {
display: none;
position: absolute;
border-radius: 8px 8px 0 0;
left: 9px;
bottom: 0;
z-index: 2;
background-repeat: no-repeat;
background-color: rgba(255, 96, 0, 0.9);
background-image: url('../images/ic_question.png');
background-position: bottom 35px center;
background-size: 22px auto;
padding-top: 56px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
font-size: 13px;
font-weight: 500;
color: #ffffff;
width: 46px;
height: 80px;
}
.member_question.active {
display: block;
}
.member_name {
position: absolute;
z-index: 3;
left: 15px;
right: 15px;
bottom: 10px;
font-size: 13px;
font-weight: 500;
line-height: 120%;
color: #ffffff;
}
[class*='window_type_'] {
display: none;
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #464646;
}
[class*='window_type_'].active {
z-index: 2;
display: block;
}
.window_item .sample {
background-size: auto 100%;
}
.window_item .member_name {
text-align: center;
}
.window_item .member_question {
width: 66px;
height: 85px;
background-position: bottom 38px center;
left: 50%;
margin-left: -33px;
}
.window_item:before {
content: '';
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 40px;
}
[class*='window_type_'] > * {
position: absolute;
}
.window_item {
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.window_item.full {
width: 100% !important;
z-index: 4;
left: 0 !important;
height: 100% !important;
top: 0 !important;
}
.window_type_01 > * {
width: 50%;
height: 100%;
top: 0;
}
.window_type_01 > *:last-child {
left: 50%;
}
.window_type_02 > * {
width: 33.333%;
height: 100%;
top: 0;
}
.window_type_02 > *:nth-child(3n + 2) {
left: 33.333%;
}
.window_type_02 > *:nth-child(3n + 3) {
left: 66.666%;
}
.window_type_03 > * {
width: 50%;
height: 50%;
top: 0;
}
.window_type_03 > *:nth-child(2) ~ * {
top: 50%;
}
.window_type_03 > *:nth-child(2n + 2) {
left: 50%;
}
.window_type_04 > * {
width: 50%;
height: 100%;
top: 0;
}
.window_type_04 > *:last-child {
left: 50%;
}
.window_type_04 > * {
width: 33.333%;
height: 50%;
top: 0;
}
.window_type_04 > *:nth-child(3) ~ * {
top: 50%;
}
.window_type_04 > *:nth-child(3n + 2) {
left: 33.333%;
}
.window_type_04 > *:nth-child(3n + 3) {
left: 66.666%;
}
.window_type_05 > * {
width: 33.333%;
height: 33.333%;
top: 0;
}
.window_type_05 > *:nth-child(3) ~ * {
top: 33.333%;
}
.window_type_05 > *:nth-child(6) ~ * {
top: 66.666%;
}
.window_type_05 > *:nth-child(3n + 2) {
left: 33.333%;
}
.window_type_05 > *:nth-child(3n + 3) {
left: 66.666%;
}
.video_button_control > button {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-bottom: 8px;
}
.video_button_control .btn_video_cancel {
background-image: url('../images/btn_view_cancel_02_n.png');
}
.video_button_control .btn_video_cancel:hover,
.video_button_control .btn_video_cancel.active {
background-image: url('../images/btn_video_cancel_o.png');
}
.video_button_control .btn_video_change {
background-image: url('../images/btn_view_change_02_n.png');
}
.video_button_control .btn_video_change:hover,
.video_button_control .btn_video_change.active {
background-image: url('../images/btn_video_change_o.png');
}
.video_button_control .btn_video_expend {
background-image: url('../images/btn_view_expand_02_n.png');
}
.video_button_control .btn_video_expend:hover,
.video_button_control .btn_video_expend.active {
background-image: url('../images/btn_video_expand_o.png');
}
.video_button_control {
position: absolute;
right: 17px;
top: 12px;
}
.realive_room_wrap .loading_spinner.active i.ic_spinner {
background-image: url('../images/ic_loading_02.png');
}
.realive_room_wrap .loading_spinner {
background-color: #464646;
}
/* 수업 종료
----------------------------------------------------- */
.finish_wrap {
position: relative;
min-height: calc(100vh - 60px);
background-color: #fafafa;
padding: 30px;
}
.finish_content {
position: relative;
max-width: 1380px;
box-shadow: 0 2px 6px 0 Rgba(0, 0, 0, 0.08);
background-color: #ffffff;
margin: 0 auto;
margin-bottom: 30px;
display: flex;
}
[class*='finish_sect_0'] {
flex: 1;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 60px;
padding-top: 60px;
}
.finish_sect_01 {
border-right: 1px solid #f5f5f5;
padding-right: 20px;
}
.finish_wrap .btn_center_box {
padding-top: 0;
}
.finish_message {
text-align: center;
min-height: 480px;
}
.finish_message h3 {
padding-top: 40px;
padding-bottom: 10px;
color: #000000;
font-size: 24px;
font-weight: 700;
}
.finish_message p {
padding-top: 10px;
font-weight: 500;
font-size: 14px;
color: #3c3c3c;
line-height: 20px;
}
.finish_message p b {
color: #ff6000;
font-weight: 700;
}
.finish_evaluation {
max-width: 600px;
margin: 0 auto;
}
/*텍스트선택 체크박스*/
.finish_items {
width: 100%;
position: relative;
display: flex;
}
.finish_item {
display: block;
flex: 1;
}
.finish_items > .finish_item:first-child .custom_item[type='radio']:not(:checked) + label span {
border-left: 1px solid #e6e6e6;
}
.finish_item .custom_item[type='radio']:not(:checked) + label span,
.finish_item .custom_item[type='radio']:checked + label span {
position: relative;
display: inline-block;
cursor: pointer;
text-align: center;
vertical-align: middle;
border-radius: 0;
height: auto;
font-weight: 500;
width: 100%;
padding-top: 18px;
padding-bottom: 18px;
line-height: 120%;
min-width: 32px;
max-width: 60px;
max-height: 60px;
min-height: 32px;
color: #3c3c3c;
font-size: 16px;
border: 1px solid #e6e6e6;
border-left: 0;
background-color: #ffffff;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.finish_item .custom_item[type='radio']:not(:checked) + label span {
background-color: #ffffff;
color: #3c3c3c;
}
.finish_item .custom_item[type='radio']:checked + label span {
background-color: #ff6000;
color: #ffffff;
border-color: #ff6000;
}
.finish_evaluation h4 {
font-size: 16px;
font-weight: 700;
color: #3c3c3c;
margin-bottom: 30px;
}
.finish_evaluation .finish_info {
overflow: hidden;
}
.finish_evaluation .finish_info span {
float: left;
width: 50%;
text-align: left;
color: #a0a0a0;
font-size: 14px;
font-weight: 400;
margin-top: 28px;
}
.finish_evaluation .finish_info > span:last-child {
float: right;
text-align: right;
}
.finish_wrap .el-rate__icon {
margin-right: 6px;
font-size: 20px;
}
.rating_chart_content {
margin: 0 auto;
padding-top: 30px;
position: relative;
min-height: 480px;
display: flex;
max-width: 600px;
flex-direction: row-reverse;
justify-content: space-between;
}
.finish_rating {
width: 130px;
}
.finish_chart {
width: 100%;
max-width: 430px;
flex: 1;
}
.finish_rating_item {
padding-bottom: 30px;
}
.finish_rating_item h5 {
font-size: 14px;
color: #3c3c3c;
font-weight: 700;
padding-bottom: 10px;
}
.finish_textarea {
max-width: 600px;
margin: 0 auto;
}
.finish_textarea h4 {
font-size: 16px;
font-weight: 700;
color: #3c3c3c;
margin-bottom: 30px;
}
.finish_textarea textarea {
min-height: 100px;
}
/* 수업 평가 팝업
----------------------------------------------------- */
.popup_class_evaluation {
}
.popup_normal .popup_content {
max-width: 785px;
}
.popup_class_evaluation.popup_normal .popup_t {
font-weight: 700;
color: #000000;
font-size: 18px;
text-align: center;
}
.popup_class_evaluation .popup_t > i {
display: inline-block;
margin-right: 10px;
width: 130px;
height: 100%;
background: url(../images/logo_liveklass.png) center center no-repeat;
background-size: 100% auto;
vertical-align: top;
}
.popup_class_evaluation.popup_normal .popup_b > button {
min-width: 120px;
}
.popup_class_evaluation [class*='class_evaluation_section_0'] {
padding: 30px;
}
.class_evaluation_content {
display: table;
width: 100%;
position: relative;
}
.class_evaluation_content > * {
display: table-cell;
position: relative;
width: 50%;
text-align: left;
}
.class_evaluation_section_01 {
border-right: 1px solid #f5f5f5;
}
.pie_graph {
width: 100%;
max-width: 285px;
position: relative;
}
.live_evaluation_rating {
margin-left: 0;
display: inline-block;
margin-bottom: 40px;
vertical-align: middle;
}
.live_evaluation_rating .el-rate__text {
color: #ff6000;
font-size: 13px;
font-weight: 500;
margin-left: 5px;
}
.class_evaluation_content h5 {
font-size: 16px;
font-weight: 700;
color: #3c3c3c;
line-height: 120%;
margin-bottom: 20px;
}
.class_evaluation_content h6 {
font-size: 14px;
font-weight: 500;
color: #3c3c3c;
line-height: 20px;
margin-bottom: 20px;
}
.class_evaluation_content h6 span {
display: block;
line-height: 20px;
color: #b4b4b4;
font-size: 14px;
font-weight: 400;
margin-top: 4px;
}
/* 마이 페이지
----------------------------------------------------- */
.mypage_view_tab_content {
}
.mypage_view_tab_content > div {
visibility: hidden;
z-index: 0;
opacity: 0;
height: 0;
}
.mypage_view_tab_content > div.active {
visibility: visible;
z-index: 1;
opacity: 1;
height: auto;
}
.mission_nav_wrap {
display: none;
}
.mypage_view_title {
background-color: #fcfcfc;
}
.mypage_view_title > .responsive_fix {
padding-top: 40px;
padding-bottom: 40px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mypage_profile {
position: relative;
flex: 1;
padding-right: 20px;
}
.mypage_profile .view_img {
width: 120px;
height: 120px;
min-width: 0;
}
.mypage_profile .view_img .img_shadow {
border-radius: 50%;
}
.mypage_profile .view_cover {
width: 120px;
vertical-align: top;
align-self: flex-start;
max-width: 120px;
}
.mypage_profile .view_title_text {
padding-left: 30px;
}
.mypage_profile .view_title_text h6 {
margin-top: 4px;
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
line-height: 120%;
}
.mypage_profile .view_title_text span {
color: #b4b4b4;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
display: block;
line-height: 120%;
}
.mypage_profile .view_title_text p {
color: #3c3c3c;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.mypage_total {
position: relative;
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mypage_total > .total_item:first-child {
margin-left: 0;
}
.total_item {
align-self: flex-start;
padding: 0 10px;
max-width: 100px;
min-width: 100px;
height: 100px;
background-color: #ffffff;
border-radius: 10px;
display: inline-block;
box-shadow: 0 2px 6px 0 RGBA(0, 0, 0, 0.05);
margin-left: 10px;
}
/*
.mypage_view_title{ background-color: #FCFCFC;}
.mypage_view_title > * {
padding: 40px 0;
overflow: hidden
}
.mypage_profile{position: relative; float: left;}
.mypage_profile .view_img {
width: 120px;height: 120px;
}
.mypage_profile .view_img .img_shadow{border-radius: 50%}
.mypage_profile .view_cover{width: 120px;vertical-align: top}
.mypage_profile .view_title_text {
padding-left: 30px;}
.mypage_profile .view_title_text h6{font-size:18px;color:#3c3c3c;font-weight: 700;}
.mypage_profile .view_title_text span{color:#b4b4b4;font-size:14px;font-weight: 400;margin-top:10px;display: block;}
.mypage_profile .view_title_text p{color:#3c3c3c;font-size: 14px; font-weight: 400;line-height: 20px;
}
.mypage_total{position: relative;margin-top:10px;float: right;display: flex;
flex-direction: row;
justify-content: space-between;}
.mypage_total > .total_item:first-child{margin-left: 0}
.total_item {
align-self: center;padding:0 10px;
max-width: 100px;min-width: 100px;
height: 100px;
background-color: #ffffff;
border-radius: 10px;
display:inline-block;
box-shadow: 0 2px 6px 0 RGBA(0, 0, 0, .05);
margin-left: 10px;}
*/
.total_item > * {
display: block;
text-align: center;
}
.total_item b {
font-size: 22px;
font-weight: 500;
color: #ff6000;
padding-top: 25px;
}
.total_item span {
margin-top: 10px;
font-weight: 400;
font-size: 12px;
color: #a0a0a0;
line-height: 130%;
word-break: break-all;
}
/*----*/
.view_title_table {
display: flex;
width: 100%;
}
.view_title_table > * {
display: block;
flex: 1;
position: relative;
vertical-align: middle;
align-self: center;
}
.view_cover {
max-width: 432px;
}
.view_img {
max-width: 432px;
min-width: 300px;
width: 100%;
max-height: 243px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.view_img .img_shadow {
width: 100%;
height: 100%;
border-radius: 0;
}
.view_img img {
width: 100%;
height: auto;
display: block;
}
.class_timer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
height: 60px;
line-height: 60px;
background-color: rgba(60, 60, 60, 0.8);
}
.class_timer > * {
display: inline-block;
vertical-align: middle;
}
.class_timer i {
width: 30px;
height: 30px;
background-image: url('../images/ic_time.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-right: 10px;
}
.class_timer span {
font-weight: 500;
font-size: 20px;
color: #ffffff;
}
.view_title_text {
vertical-align: middle;
padding-left: 5.4%;
}
.view_title_text .item_channel_title {
height: auto;
padding-left: 0;
padding-right: 0;
padding-bottom: 15px;
}
.home_slide .view_title_text .item_channel_title {
padding-left: 0;
padding-bottom: 15px;
padding-right: 0;
margin-top: 0;
}
.view_title_text h6 {
font-size: 26px;
font-weight: 700;
color: #3c3c3c;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-height: 62px;
line-height: 31px;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.view_title_text p {
font-size: 16px;
font-weight: 300;
color: #787878;
margin-top: 10px;
line-height: 19px;
display: -webkit-box;
white-space: pre-line;
word-wrap: break-word;
}
.view_title_text > button,
.view_title_text > a {
padding: 0 14px;
margin-top: 20px;
}
.view_title_text > button i,
.view_title_text > a i {
width: 10px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 10px;
background-image: url('../images/btn_make_next_n.png');
background-size: 10px auto;
background-repeat: no-repeat;
background-position: center center;
}
/*----*/
.mypage_class_content {
position: relative;
padding-bottom: 60px;
padding-top: 40px;
}
.mypage_class_content > * {
padding-bottom: 40px;
}
.mypage_mission_wrap {
background-color: #f5f5f5;
position: relative;
padding-bottom: 1px;
}
.mypage_mission_wrap > .white_space {
padding-top: 20px;
}
.mypage_mission_wrap .cm_comment_main {
margin-bottom: 0;
border: 0;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
}
.mypage_mission_content {
position: relative;
}
.mypage_mission_content .class_view_section {
padding-right: 400px;
}
.mypage_mission_content .class_view_side_nav {
width: 380px;
right: 0;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.mypage_view_mission_content > button {
margin-top: 20px;
height: 56px;
line-height: 20px;
font-size: 14px;
font-weight: 500;
}
.mypage_view_mission_content .img_shadow {
width: 100px;
height: 56px;
margin-right: 14px;
border-radius: 0;
}
.mypage_view_mission_content > button p {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
width: calc(100% - 114px);
line-height: 16px;
max-height: 48px;
}
.mypage_view_mission_content {
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
.btn_class_all {
font-size: 13px;
color: #3c3c3c;
font-weight: 400;
float: right;
padding: 0 20px;
}
.btn_class_all:hover,
.btn_class_all.active {
color: #ff6000;
}
.mypage_view_page .channel_view_tab_button {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mypage_view_nav {
position: relative;
}
.item_channel_title {
position: relative;
width: 100%;
white-space: nowrap;
display: flex;
flex-direction: row;
justify-content: left;
padding-left: 0px;
padding-right: 8px;
height: 54px;
cursor: pointer;
}
.item_channel_title > .img_shadow,
.item_channel_title > i {
width: 30px;
height: 30px;
display: block;
align-self: center;
}
.item_channel_title > span {
flex: 1;
/* overflow: hidden; */
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin-left: 10px;
color: #8c8c8c;
font-size: 13px;
font-weight: 500;
align-self: center;
}
.item_progress {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
}
.item_progress_text {
font-size: 16px;
color: #ff6000;
overflow: hidden;
/* margin-bottom: 10px */
}
.item_progress_text b {
font-weight: 700;
float: right;
}
.item_progress_bar {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-right: -55px;
box-sizing: border-box;
}
.item_progress_outer {
height: 6px;
border-radius: 100px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.item_progress_inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #ff6000;
text-align: right;
border-radius: 100px;
line-height: 1;
white-space: nowrap;
transition: width 0.6s ease;
}
.item_progress_valid {
padding-top: 10px;
font-size: 12px;
color: #666666;
}
.item_live_time {
font-size: 12px;
margin-left: 8px;
}
.item_live button {
margin-top: 10px;
}
.item_live button:disabled {
opacity: 0.5;
}
.bookmark_mark {
position: absolute;
right: 0;
top: 0;
width: 46px;
height: 46px;
background: url(../images/btn_card_bookmark_n.png) center center no-repeat;
background-size: 100% auto;
}
.finished_mark {
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 46px;
background: url(../images/ic_finished.png) center center no-repeat;
background-size: 100% auto;
}
.dim_end {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(70, 70, 70, 0.8);
display: flex;
justify-content: center;
}
.dim_end span {
display: block;
align-self: center;
justify-self: center;
width: 60px;
height: 60px;
border: 2px solid #ffffff;
font-weight: 700;
color: #ffffff;
font-size: 16px;
line-height: 58px;
text-align: center;
vertical-align: middle;
}
.btn_restart_class {
display: block;
margin-right: 8px;
margin-top: 10px;
margin-left: 8px;
font-size: 14px;
}
.btn_restart_class i {
width: 10px;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left: 5px;
background-image: url(../images/btn_make_next_n.png);
background-size: 10px auto;
background-repeat: no-repeat;
background-position: center center;
}
/*채널*/
.mypage_channel_content {
position: relative;
padding-bottom: 60px;
}
.mypage_channel_content > h5 {
padding-top: 30px;
}
.mypage_channel_content > h5:first-child {
padding-top: 60px;
}
.channel_card {
text-align: center;
background-color: #ffffff;
width: 210px;
height: 231px;
border: 1px solid #f5f5f5;
padding-left: 10px;
padding-right: 10px;
box-shadow: 0 2px 4px 0 RGBA(0, 0, 0, 0.05);
}
.channel_list {
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.channel_card {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 12px;
margin-bottom: 30px;
}
.channel_cover {
position: relative;
width: 90px;
height: 90px;
display: inline-block;
align-self: center;
}
.channel_cover .img_shadow {
width: 100%;
height: 100%;
}
.channel_cover > span {
display: block;
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: auto;
}
.channel_cover > span > b {
text-align: center;
display: inline-block;
border-radius: 17px;
background-color: #f1002d;
font-size: 14px;
font-weight: 500;
color: #ffffff;
height: 25px;
line-height: 26px;
vertical-align: middle;
padding: 0 13px;
}
.channel_card h6 {
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
margin-top: 20px;
line-height: 120%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.channel_card > span {
display: block;
margin-top: 10px;
line-height: 120%;
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.channel_card > span.active {
color: #ff6000;
}
/*장학생*/
.mypage_certificate_wrap {
background-color: #f5f5f5;
position: relative;
}
.certificate_items {
padding-bottom: 50px;
}
.certificate_item {
position: relative;
box-shadow: 0 2px 4px 0 Rgba(0, 0, 0, 0.05);
background-color: #ffffff;
padding: 20px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: left;
}
.certificate_thum {
width: 281px;
height: 158px;
position: relative;
display: inline-block;
vertical-align: middle;
}
.certificate_thum .img_shadow {
border-radius: 0;
width: 100%;
height: 100%;
}
.certificate_thum img {
width: 100%;
height: auto;
display: block;
}
.certificate_content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 40px;
}
.certificate_title {
color: #3c3c3c;
font-size: 20px;
font-weight: 700;
margin-bottom: 30px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 24px;
max-height: 48px;
}
.badge_item {
display: inline-block;
margin-right: 28px;
}
.badge_item > span {
color: #b4b4b4;
display: block;
text-align: center;
margin-bottom: 10px;
font-size: 12px;
font-weight: 400;
}
.badge_item.active > span {
color: #ff6000;
}
.badge_item .tooltip i {
width: 54px;
height: 54px;
display: block;
background-image: url(../images/ic_badge_all_n.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.certificate_badge > .badge_item:nth-child(1) .tooltip i {
background-image: url(../images/ic_badge_all_n.png);
}
.certificate_badge > .badge_item:nth-child(1).active .tooltip i {
background-image: url(../images/ic_badge_all_s.png);
}
.certificate_badge > .badge_item:nth-child(2) .tooltip i {
background-image: url(../images/ic_badge_live_n.png);
}
.certificate_badge > .badge_item:nth-child(2).active .tooltip i {
background-image: url(../images/ic_badge_live_s.png);
}
.certificate_badge > .badge_item:nth-child(3) .tooltip i {
background-image: url(../images/ic_badge_video_n.png);
}
.certificate_badge > .badge_item:nth-child(3).active .tooltip i {
background-image: url(../images/ic_badge_video_s.png);
}
.certificate_badge > .badge_item:nth-child(4) .tooltip i {
background-image: url(../images/ic_badge_mission_n.png);
}
.certificate_badge > .badge_item:nth-child(4).active .tooltip i {
background-image: url(../images/ic_badge_mission_s.png);
}
.badge_item .tooltip_bottom::after {
left: initial;
right: 8px;
margin-left: 0;
}
.badge_item .tooltip_bottom {
top: calc(100% + 6px + 10px);
right: 13px;
margin-left: 0;
left: initial;
white-space: nowrap;
}
.certificate_badge > .badge_item:nth-child(1) .tooltip_bottom,
.certificate_badge > .badge_item:nth-child(2) .tooltip_bottom {
left: 13px;
right: initial;
}
.certificate_badge > .badge_item:nth-child(1) .tooltip_bottom::after,
.certificate_badge > .badge_item:nth-child(2) .tooltip_bottom::after {
left: 8px;
right: initial;
}
@keyframes move_text_top {
0% {
transform: translate(0, 70px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes move_text_left {
0% {
transform: translate(0, 0);
opacity: 0;
}
100% {
transform: translate(-70px, 0);
opacity: 1;
}
}
@keyframes move_text_right {
0% {
transform: translate(0, 0);
opacity: 0;
}
100% {
transform: translate(70px, 0);
opacity: 1;
}
}
.teacher_apply_sect_01 .teacher_apply_text > *,
.teacher_apply_sect_02 .teacher_apply_text > *,
.teacher_apply_sect_03 i {
opacity: 0;
}
.teacher_apply_sect_01.active .teacher_apply_text > *,
.teacher_apply_sect_02.active .teacher_apply_text > *,
.teacher_apply_sect_03.active i {
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
.teacher_apply_sect_01.active .teacher_apply_text > * {
animation-name: move_text_left;
}
.teacher_apply_sect_02.active .teacher_apply_text > * {
animation-name: move_text_right;
}
.teacher_apply_sect_03.active i {
animation-name: move_text_top;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.57, 1.58);
}
.teacher_apply_sect_01 .teacher_apply_text {
transform: translate(70px, 0);
}
.teacher_apply_sect_02 .teacher_apply_text {
transform: translate(-70px, 0);
}
.teacher_apply_sect_03 i {
transform: translate(0, 70px);
align-self: center;
justify-self: flex-end;
}
.teacher_apply_sect_01.active .teacher_apply_text p,
.teacher_apply_sect_02.active .teacher_apply_text p {
animation-delay: 0.2s;
}
.form_style .form_group {
padding-top: 20px;
min-height: 40px;
display: table;
width: 100%;
margin-bottom: 0;
}
.form_style .form_group > * {
display: table-cell;
width: auto;
vertical-align: top;
position: relative;
}
.form_style .form_group > .label_td {
width: 27.7%;
}
.form_style .form_group > .content_td {
}
.form_style .form_label {
color: #3c3c3c;
margin-top: 12px;
margin-bottom: 0;
}
.form_style h5 {
width: 100%;
position: relative;
border-bottom: 1px solid #787878;
text-align: left;
margin-bottom: 20px;
}
.form_style h5 span {
display: inline-block;
padding-bottom: 30px;
border-bottom: 1px solid #006bff;
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
margin-bottom: -1px;
}
.form_style {
padding-top: 50px;
padding-bottom: 50px;
}
/* 내 정보 수정
----------------------------------------------------- */
.form_ex {
border: 1px solid #e6e6e6;
}
.form_ex textarea {
border: 0;
min-height: 90px;
}
.form_ex > div {
padding: 12px;
width: 100%;
font-size: 14px;
color: #b4b4b4;
font-weight: 400;
}
.settings_side {
padding: 0;
margin: 0;
font-size: 12px;
width: 240px;
position: fixed;
top: 78px;
bottom: 0;
left: 0;
background-color: #fcfcfc;
border-right: 1px solid #ebebeb;
display: flex;
flex-direction: column;
z-index: 98;
color: rgba(57, 70, 78, 0.8);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
overflow-y: auto;
overflow-x: hidden;
}
.settings_side ~ .page_container {
margin-left: 240px;
width: auto;
}
[class*='myinfo_edit_sect_0'] .responsive_fix.xsmall {
padding-left: 50px;
padding-right: 50px;
}
[class*='myinfo_edit_sect_0'] .form_style .form_group > .label_td {
min-width: 130px;
}
.settings_side .settings_side_content > a {
width: 100%;
padding: 20px;
color: #3c3c3c;
font-weight: 400;
font-size: 14px;
font-weight: 400;
}
.settings_side > button,
.settings_side > h3 {
display: none;
}
.settings_side h3 {
font-weight: 700;
width: 100%;
padding: 20px;
color: #3c3c3c;
text-align: left;
font-size: 14px;
}
.settings_side .settings_side_content > a.active,
.settings_side > a:active {
background-color: #006bff;
color: #ffffff;
font-weight: 500;
}
.settings_side + .myinfo_edit_content {
margin-left: 240px;
}
[class*='myinfo_edit_sect_0'] {
background-color: #ffffff;
margin-bottom: 20px;
position: relative;
}
.myinfo_edit_sect_02 .form_style .form_group {
padding-top: 0;
}
.myinfo_edit_content {
height: 100%;
background-color: #f5f5f5;
position: relative;
text-align: center;
}
.myinfo_edit_content .button_container {
max-width: 320px;
max-width: 948px;
}
.myinfo_edit_content .button_container > button {
margin-bottom: 50px;
margin-top: 30px;
padding: 0 20px;
}
p.info {
text-align: left;
padding-left: 30px;
position: relative;
line-height: 18px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
}
p.info:after {
content: '※';
display: block;
text-align: center;
position: absolute;
left: 0;
top: 0;
line-height: 18px;
width: 22px;
height: 22px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
}
.myinfo_edit_check .form_check {
margin-top: 12px;
}
.myinfo_edit_check .custom[type='checkbox'] + label {
padding-top: 2px;
color: #a0a0a0;
font-size: 13px;
position: relative;
font-weight: 400;
padding-left: 30px;
line-height: 18px;
display: block;
}
.myinfo_edit_check p.info {
margin-top: 8px;
}
.myinfo_edit_check .custom[type='checkbox'] + label span {
position: absolute;
left: 0;
top: 0;
}
.myinfo_edit_sect_04 h5 a,
.myinfo_edit_sect_04 h5 button {
font-size: 13px;
color: #b4b4b4;
font-weight: 500;
vertical-align: middle;
line-height: 20px;
position: absolute;
right: 0;
top: 3px;
}
.myinfo_edit_sect_04 h5 a i,
.myinfo_edit_sect_04 h5 button i {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
background-image: url('../images/btn_menu_add_s_n.png');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
}
.myinfo_edit_sect_04 h5 a:hover {
color: #ff6000;
}
.myinfo_edit_sect_04 h5 a:hover i,
.myinfo_edit_sect_04 h5 button:hover i {
background-image: url('../images/btn_menu_add_s_o.png');
}
.myinfo_edit_sect_04 .channel_list > .channel_card:nth-child(5n + 5) {
margin-right: 12px;
}
.affiliate_channel {
position: relative;
padding-top: 20px;
}
.channel_total {
position: absolute;
left: 0;
top: 20px;
width: 194px;
height: 100%;
}
.channel_total > div {
font-weight: 400;
color: #3c3c3c;
font-size: 14px;
margin-bottom: 30px;
text-align: left;
}
.channel_total > div b {
font-weight: 500;
}
.channel_total + .channel_list {
padding-left: 194px;
margin-right: -12px;
}
.myinfo_edit_sect_04 .responsive_fix.xsmall {
padding-bottom: 20px;
}
.priview_thumb {
width: 90px;
height: 90px;
}
.priview_thumb .img_shadow {
width: 100%;
height: 100%;
}
p.info_s {
text-align: left;
padding-left: 14px;
position: relative;
margin-bottom: 6px;
line-height: 18px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
}
p.info_s:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 6px;
width: 4px;
height: 4px;
background: url('../images/ic_bullet_gray_01.png') center center no-repeat;
background-size: 100% auto;
}
.form_img_upload {
display: flex;
flex-direction: row;
justify-content: left;
}
.form_img_upload .upload_ex {
flex: 1;
position: relative;
padding-left: 20px;
padding-top: 4px;
}
.upload_ex .btn_popup_small {
height: 28px;
line-height: 28px;
font-weight: 500;
font-size: 14px;
min-width: 0;
padding: 0 12px;
}
.upload_ex > .info_s:nth-child(2) {
margin-bottom: 12px;
}
.upload_ex .profile_img_upload {
height: auto;
width: auto;
margin-right: 4px;
}
.upload_ex .profile_img_upload input[type='file']:hover ~ button {
background-color: #bbbbbb;
}
/* 홈
-----------------------------------------------------*/
[class*='swiper-button-next'].swiper-button-disabled,
[class*='swiper-button-prev'].swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.home_banner {
width: 100%;
height: auto;
position: relative;
padding: 30px 0px !important;
}
.home_banner > a {
width: 100%;
height: 0;
box-shadow: 0 2px 6px 0 RGBA(0, 0, 0, 0.05);
padding-top: 18.183%;
background-size: auto 100%;
background-repeat: no-repeat;
-webkit-transition: all 0.2s;
transition: all 0.2s;
background-position: center center;
}
.home_banner > a:hover {
opacity: 0.9;
}
.home_item_list.responsive_fix.card {
padding-bottom: 60px;
position: relative;
}
.class_items.one + .sub_swiper {
display: none;
}
/*
.btn_home_list_more + .class_items {
max-height: 370px; overflow: hidden;
}
.btn_home_list_more + .channel_list {max-height: 260px; overflow: hidden;}
*/
.btn_home_list_more {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
.btn_home_list_more h5 {
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
line-height: 120%;
}
.swiper-container {
width: 100%;
}
.home_slide .swiper-slide {
/* width: 100% !Important*/
}
.home_slide {
background-color: #f8f8f8;
position: relative;
padding-top: 32px;
padding-bottom: 43px;
margin-bottom: 80px;
}
.btn_home_list_more > a {
display: block;
color: #b4b4b4;
font-size: 13px;
font-weight: 400;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
line-height: 21px;
}
.btn_home_list_more a i {
display: inline-block;
width: 7px;
height: 14px;
vertical-align: middle;
margin-left: 10px;
background-image: url(../images/btn_card_more_n.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.btn_home_list_more:active a i,
.btn_home_list_more:hover a i {
background-image: url(../images/btn_card_more_o.png);
}
.btn_home_list_more:active a,
.btn_home_list_more:hover a {
color: #ff6000;
}
.home_slide .swiper-button-next {
background-image: url(../images/btn_card_next_n.png);
right: -2px;
left: auto;
}
.home_slide .swiper-button-prev {
background-image: url(../images/btn_card_prev_n.png);
left: -2px;
right: auto;
}
.home_slide .swiper-button-next,
.home_slide .swiper-button-prev {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
margin-top: -25px;
z-index: 10;
cursor: pointer;
background-size: 40px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.home_slide .swiper-pagination-bullets {
bottom: 23px;
line-height: 0;
height: 2px;
width: 100%;
}
.home_slide .swiper-pagination-bullet {
width: 16px;
margin: 0 3.5px;
height: 4px;
display: inline-block;
border-radius: 0;
background: #d2d2d2;
opacity: 1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.home_slide .swiper-pagination-bullet-active {
opacity: 1;
background: #ff6000;
width: 50px;
}
.sub_swiper {
position: relative;
}
/* 탐색
-----------------------------------------------------*/
.top_nav_wrap {
position: relative;
border-bottom: 1px solid #ebebeb;
width: 100%;
box-shadow: 0 2px 4px 0 RGBA(0, 0, 0, 0.05);
background-color: #ffffff;
}
.category_list_page .top_nav_wrap .responsive_fix {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top_nav_wrap .top_nav_title h3 {
font-weight: 500;
position: relative;
font-size: 14px;
color: #3c3c3c;
line-height: 56px;
display: inline-block;
vertical-align: middle;
}
.top_nav_title {
display: inline-block;
}
.nav_filter_items {
display: none;
}
.top_nav_title .btn_open_filter {
display: none;
}
.top_nav_wrap .top_nav_title h3 span {
display: inline-block;
margin-right: 4px;
}
.top_nav_wrap .top_nav_title h3 > *:nth-child(1):before {
display: none;
}
.top_nav_wrap .top_nav_title h3 span:before {
content: '/';
display: inline-block;
margin-right: 7px;
}
.top_nav_wrap .top_nav_title h3 b {
color: #ff6000;
display: inline-block;
}
.top_nav_select {
line-height: 56px;
}
.top_nav_select > * {
/* width: 143px;*/
width: 115px;
display: inline-block;
margin-left: 6px;
}
.category_list_content {
padding-top: 46px;
padding-bottom: 20px;
}
.top_nav_view .popup_bg {
background-color: transparent !important;
visibility: hidden !important;
z-index: -1;
}
/* 채널 탐색
-----------------------------------------------------*/
.channel_list_page .top_nav_wrap h3,
.teacher_list_page .top_nav_wrap h3 {
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
padding-bottom: 22px;
line-height: 120%;
}
.channel_list_page .top_nav_wrap,
.teacher_list_page .top_nav_wrap {
padding-top: 40px;
padding-bottom: 30px;
}
.check_nav_box {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5px;
}
.check_nav_box .custom_item[type='checkbox'] + label span {
transition: none;
}
.check_nav_box h5 {
font-size: 14px;
color: #3c3c3c;
font-weight: 400;
min-width: 85px;
align-self: center;
}
.check_nav_box .form_group {
flex: 1;
margin-bottom: 0;
}
.channel_list_content,
.teacher_list_content {
padding-top: 40px;
padding-bottom: 1px;
}
.channel_list_content .btn_more_large,
.teacher_list_content .btn_more_large {
margin-top: 0;
}
.channel_list_content .channel_cover > span > b,
.teacher_list_content .channel_cover > span > b {
background-color: #ff6000;
}
.channel_list_content .channel_list > .channel_card,
.teacher_list_content .channel_list > .channel_card {
margin-bottom: 40px;
}
/* 결제하기
-----------------------------------------------------*/
.payment_page {
background-color: #f5f5f5;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
.form_check.medium .custom[type='checkbox'] + label {
padding-top: 2px;
color: #a0a0a0;
font-size: 13px;
position: relative;
font-weight: 400;
padding-left: 30px;
line-height: 18px;
display: block;
}
.form_check.medium .custom[type='checkbox'] + label span {
position: absolute;
left: 0;
top: 0;
}
.bullet_message {
text-align: left;
padding-left: 14px;
display: block;
position: relative;
padding-top: 9px;
line-height: 18px;
color: #787878;
font-size: 13px;
font-weight: 400;
clear: both;
}
.bullet_message:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 16px;
width: 4px;
height: 4px;
background: url('../images/ic_bullet_gray_01.png') center center no-repeat;
background-size: 100% auto;
}
.bullet_message a {
color: #ff6000;
}
.payment_page .layout_box h5 {
font-size: 16px;
font-weight: 700;
color: #3c3c3c;
line-height: 120%;
padding-top: 23px;
padding-bottom: 24px;
padding-left: 30px;
border-bottom: 1px solid #ebebeb;
}
.layout_box {
background-color: #ffffff;
box-shadow: 0 2px 4px 0px RGBA(0, 0, 0, 0.05);
position: relative;
min-height: 65px;
}
.payment_info .payment_content {
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
}
.payment_info .form_check {
margin-top: 30px;
margin-bottom: 30px;
padding-left: 20px;
}
.payment_info .layout_box > span {
padding-top: 23px;
padding-bottom: 23px;
line-height: 18px;
display: inline-block;
padding-left: 30px;
padding-right: 30px;
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
}
.payment_info .layout_box > span b {
color: #ff6000;
font-weight: 400;
}
.payment_method,
.payment_write,
.payment_amount,
.payment_marketing {
margin-bottom: 20px;
position: relative;
}
.payment_class {
margin-bottom: 30px;
position: relative;
}
.payment_method .payment_content .radio_item {
padding-right: 50px;
margin-bottom: 10px;
}
.payment_method .payment_content {
padding-top: 40px;
padding-bottom: 30px;
padding-left: 30px;
}
.payment_method .payment_content .form_group {
margin-bottom: 0;
}
.amount_box {
position: relative;
display: flex;
width: 100%;
justify-content: space-between;
}
.amount_box > * {
position: relative;
flex: 1;
text-align: center;
}
.amount_item {
margin-bottom: 40px;
}
.amount_item .amount_title {
height: 40px;
line-height: 40px;
vertical-align: middle;
border-bottom: 1px solid #ebebeb;
background-color: #fcfcfc;
font-size: 14px;
font-weight: 400;
color: #a0a0a0;
}
.amount_item.amount_discount_mobile {
display: none;
margin-top: 0;
font-size: 12px;
color: #666;
border-bottom: 1px solid #ebecf0;
padding-bottom: 10px;
}
.amount_item .amount_content {
font-size: 22px;
font-weight: 700;
color: #3c3c3c;
position: relative;
justify-content: center;
height: 134px;
padding: 40px 0;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #ebebeb;
display: flex;
flex-direction: column;
}
.package_payment_page .amount_item .amount_content {
font-size: 22px;
font-weight: 700;
color: #3c3c3c;
position: relative;
justify-content: center;
/* height: 134px; */
padding: 0;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #ebebeb;
display: flex;
flex-direction: column;
}
.amount_box > *:nth-child(3) .amount_content {
border-right: 0;
}
.amount_item .amount_content:after {
content: '';
position: absolute;
top: 50%;
left: -21px;
margin-top: -21px;
width: 42px;
height: 42px;
background-image: url(../images/ic_minus_n.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.package_payment_page .amount_item .amount_content:after {
content: '';
position: absolute;
left: -21px;
/*margin-top: -21px;*/
width: 42px;
height: 42px;
background-image: url(../images/ic_minus_n.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
@media screen and (max-width: 768px) {
.package_payment_page .amount_item .amount_content:after {
top: 30px;
}
}
.amount_box > *:nth-child(2) .amount_content:after {
background-image: url(../images/ic_plus_n.png);
}
.amount_box > *:nth-child(2) .amount_content.plus:after {
background-image: url(../images/ic_plus_n.png);
}
.amount_box > *:nth-child(3) .amount_content:after {
background-image: url(../images/ic_minus_p.png);
}
.amount_box > *:nth-child(4) .amount_content:after {
background-image: url(../images/ic_minus_p.png);
}
.amount_box > *:nth-child(1) .amount_content:after {
display: none;
}
.amount_item .amount_content span {
display: block;
margin-top: 10px;
/*color: #A0A0A0;*/
font-size: 13px;
font-weight: 400;
}
.amount_item .amount_content b {
color: #ff6000;
font-weight: 700;
}
.amount_item .amount_content .amount_inner_top_content {
height: 107px;
padding-top: 30px;
color: #000;
}
.amount_item .amount_content .line_through {
text-decoration: line-through;
color: #666;
font-weight: 500;
}
.amount_item .amount_content .amount_inner_content {
color: #666666;
font-size: 12px;
font-weight: 500;
margin: 0 auto;
width: 248px;
padding: 10px;
border-top: 1px solid #ebecf0;
text-align: left;
}
.amount_item .amount_content .amount_inner_content li {
margin-bottom: 8px;
line-height: 17px;
}
.amount_item .amount_content .amount_inner_content li .title {
color: #202020;
}
.amount_item .amount_content .amount_inner_content li .price {
color: #202020;
font-weight: bold;
}
.payment_class_img {
padding: 30px;
display: flex;
align-items: center;
background-image: url(../images/bg_paymen_class.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left center;
position: relative;
vertical-align: middle;
border-right: 1px dashed #e6e6e6;
}
.payment_class_img .img_shadow {
width: 100%;
height: auto;
max-width: 300px;
max-height: 170px;
min-width: 300px;
border-radius: 0;
flex: 1;
}
.payment_class .layout_box {
display: flex;
}
.payment_class_text {
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.payment_class_text > h3 {
font-weight: 700;
font-size: 22px;
margin-top: 10px;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-height: 60px;
line-height: 30px;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.payment_class_text > p {
font-size: 16px;
line-height: 18px;
color: #3c3c3c;
font-weight: 500;
margin-top: 12px;
flex: 1;
}
.payment_class_text > p b {
color: #ff6000;
font-weight: 700;
display: inline-block;
margin-right: 2px;
}
.payment_class_text > p span {
display: inline-block;
font-weight: 300;
margin-left: 2px;
font-size: 15px;
}
.payment_class_text > div {
margin-top: 10px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
}
.payment_class_text > div > i,
.payment_class_text .tooltip i {
width: 14px;
vertical-align: middle;
height: 14px;
display: inline-block;
background-image: url(../images/ic_payment_01.png);
background-size: 14px auto;
background-repeat: no-repeat;
margin-right: 12px;
background-position: center center;
}
.payment_class_text > div:nth-child(3) > i {
background-image: url(../images/ic_payment_01.png);
}
.payment_class_text > div:nth-child(4) > i {
background-image: url(../images/ic_payment_02.png);
}
.payment_class_text > div:nth-child(5) > i {
background-image: url(../images/ic_payment_03.png);
}
.payment_class_text .tooltip {
display: inline-block !important;
}
.payment_class_text .tooltip i {
background-image: url(../images/ic_payment_04.png);
width: 30px;
margin-right: 0;
}
.payment_class_text .tooltip:hover i {
background-image: url(../images/ic_payment_04_s.png);
}
.payment_class_text .tooltip .tooltip_bottom {
top: calc(100% + 8px + 6px);
left: -58px;
margin-left: 0;
right: initial;
white-space: nowrap;
}
.payment_class_text .tooltip_bottom::after {
left: 67px;
right: initial;
margin-left: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid rgba(70, 70, 70, 0.96);
}
.payment_class_text .tooltip .tooltip_text {
width: auto;
background-color: rgba(70, 70, 70, 0.96);
padding: 15px;
padding-top: 0;
font-size: 13px;
font-weight: 400;
color: #ffffff;
display: inline-block;
border-radius: 2px;
font-size: 13px;
font-weight: 500;
}
.payment_class_text .tooltip .tooltip_text > * {
padding-top: 15px;
}
.payment_class_text .tooltip h6 {
}
.payment_class_text .calendar_item {
display: flex;
}
.payment_class_text .calendar_item span {
display: block;
margin-right: 10px;
flex: 1;
}
.payment_class_text .calendar_item > span:last-child {
margin-right: 0;
}
.payment_write .payment_content {
padding-top: 20px;
}
.payment_write .payment_content.marketing {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
border-top: 1px solid #ebebeb;
color: #444444;
}
.payment_write .payment_content.marketing label {
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
.payment_write .payment_content.marketing .marketing_message {
font-size: 13px;
margin-top: 5px;
}
.payment_write .form_group {
padding-bottom: 20px;
min-height: 40px;
display: table;
width: 100%;
margin-bottom: 0;
}
.payment_write .form_label {
color: #3c3c3c;
margin-top: 12px;
margin-bottom: 0;
}
.payment_write .form_group > * {
display: table-cell;
width: auto;
vertical-align: top;
}
.payment_write .form_group {
padding-left: 30px;
padding-right: 30px;
}
.payment_write .form_group > .label_td {
width: 15.3%;
}
.payment_write .form_group > .content_td {
z-index: 0;
position: relative;
}
.payment_write .form_col_two {
clear: both;
overflow: hidden;
}
.payment_write .form_col_two > * {
max-width: 100%;
}
.payment_write .form_flex_two,
.form_flex_three {
display: flex;
}
.payment_write .form_flex_two > *:first-child,
.form_flex_three > *:first-child {
/* margin-right: 10px */
}
.payment_write .bullet_message {
min-width: 150px;
margin-left: 20px;
color: #a0a0a0;
}
.form_flex_three {
padding-right: 170px;
}
.payment_write .bullet_message {
min-width: 150px;
position: absolute;
top: 0;
right: 0;
}
.payment_write .content_td > .form_col_two:nth-child(2) {
margin-top: 20px;
}
.payment_write .form_col_two > *:last-child {
float: left;
}
.payment_write .form_col_two > *:nth-child(1) {
margin-right: 3%;
}
.payment_write .form_col_two .div_en {
width: 445px;
}
.payment_write .form_col_two .btn_en {
width: 300px;
}
.payment_marketing .payment_content {
padding-top: 18px;
padding-bottom: 25px;
padding-left: 32px;
padding-right: 32px;
color: #444444;
}
.payment_marketing .payment_content label {
font-size: 14px;
line-height: 24px;
font-weight: 600;
}
.payment_marketing .payment_content .marketing_message {
font-size: 13px;
font-weight: 400;
margin-top: 5px;
}
/* 결제완료 팝업
----------------------------------------------------- */
.popup_wrap.popup_payment_complete .popup_content {
max-width: 660px;
}
.popup_wrap.popup_payment_complete .popup_t {
height: 66px;
line-height: 66px;
}
.popup_wrap.popup_payment_complete .popup_t > span {
font-size: 16px;
font-weight: 500;
}
.popup_wrap.popup_payment_complete .popup_m {
padding: 30px 30px;
max-height: unset;
}
.popup_wrap.popup_payment_complete .popup_m > b {
font-size: 22px;
color: #000000;
font-weight: 700;
padding-top: 20px;
display: block;
}
.popup_wrap.popup_payment_complete .popup_m > p {
font-size: 16px;
padding: 20px 10px;
line-height: 1.5;
}
.popup_wrap.popup_payment_complete .popup_m {
padding: 30px 30px;
}
.popup_wrap.popup_payment_complete .popup_m .amount_box {
margin-top: 30px;
border: 1px solid #ebebeb;
}
.popup_wrap.popup_payment_complete .popup_b {
padding-bottom: 25px;
padding-top: 25px;
}
.popup_wrap.popup_payment_complete .popup_b button {
min-width: 111px;
}
/* 패키지 결제완료, vbank 핍업
----------------------------------------------------- */
.popup_wrap.popup_payment_complete.package_payment_page .popup_content {
max-width: 830px;
}
.popup_wrap.popup_payment_complete.package_payment_page .amount_item .amount_content .amount_inner_content {
width: 192px;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m > b {
color: #202020;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m.account_info {
width: 454px;
margin: 0 auto;
padding: 10px 0;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m.account_info > p {
font-weight: 700;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m.account_info .account_info_detail {
background-color: #fbfbfb;
color: #aaaaaa;
padding: 20px 0px 20px 50px;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m.account_info .account_info_detail .label {
width: 88px;
display: inline-block;
vertical-align: top;
}
.popup_wrap.popup_payment_complete.package_payment_page .popup_m.account_info .account_info_detail b {
color: #202020;
}
/* 서비스 구독
----------------------------------------------------- */
.service_page h5 {
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
line-height: 120%;
padding-left: 30px;
padding-right: 30px;
padding-top: 34px;
padding-bottom: 34px;
border-bottom: 1px solid #ebebeb;
margin-bottom: 20px;
}
.service_page .select_container {
margin: 15px 25px;
}
.service_page .select2_custom {
width: 300px;
display: inline-block;
}
.service_page .select_label {
font-size: 14px;
margin-right: 30px;
font-weight: bold;
margin: 0 25px;
}
.service_page .select2-container .select2-selection--single {
height: 32px !important;
}
.service_page .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 33px !important;
font-weight: 400;
}
.service_page .tab_container {
margin: 25px;
width: 600px;
display: flex;
border: 1px solid #d2d2d2;
}
.service_page .tab_container > a {
padding: 0 40px;
font-size: 14px;
/* width: 132px; */
flex: 1;
height: 31px;
line-height: 31px;
border-radius: 4px;
text-align: center;
}
.service_page .tab_container > a.active {
background-color: #3c3c3c;
color: #ffffff;
}
.service_history_page {
padding: 20px;
max-width: 1080px;
flex: 1;
}
.service_history_page .table_thead_items > *:nth-child(3),
.service_history_page .table_item_w > *:nth-child(3) {
max-width: 300px;
}
.service_history_page .table_thead_items > *:nth-child(4),
.service_history_page .table_item_w > *:nth-child(4) {
max-width: 300px;
}
.service_history_page .table_thead_items > *:nth-child(5),
.service_history_page .table_item_w > *:nth-child(5) {
max-width: 300px;
}
.service_history_page .paging_warp,
.service_coupon_page .paging_warp {
text-align: center;
}
.service_payment_info_page,
.service_coupon_page {
padding: 20px;
max-width: 1080px;
flex: 1;
width: 100%;
}
.service_payment_info_page .table_header,
.service_coupon_page .table_header {
padding: 20px 30px;
/* height: 100px; */
position: relative;
}
.service_payment_info_page .button_container,
.service_coupon_page .button_container {
position: absolute;
right: 0;
bottom: 20px;
}
.service_payment_info_page .email_container {
width: 500px;
padding-left: 30px;
}
.service_payment_info_page .email_container button {
position: absolute;
right: 5px;
top: 5px;
}
.service_payment_info_page .email_container .content_td p {
color: #999;
font-size: 12px;
}
.service_payment_info_page .table_item_m button {
position: absolute;
right: 0;
top: -10px;
}
.service_payment_info_page .table_item_w button {
position: absolute;
right: 0;
top: -10px;
}
/* 결제내역
----------------------------------------------------- */
.table_thead {
position: relative;
height: 55px;
}
.table_thead.active .table_thead_fix {
position: fixed;
top: 70px;
right: 0;
z-index: 97;
padding-left: 240px;
}
.table_thead_fix {
border-bottom: 1px solid #ebebeb;
background-color: #fcfcfc;
width: 100%;
-webkit-transition: top 0.2s ease-out 0s;
visibility: visible;
transition: top 0.2s ease-out 0s;
}
.table_thead_sort {
display: none;
}
.table_thead_items > div {
}
.table_thead_items button {
font-size: 12px;
font-weight: 400;
color: #a0a0a0;
vertical-align: middle;
height: 30px;
display: inline-block;
background-image: url(../images/btn_change_n.png);
background-size: 30px auto;
background-repeat: no-repeat;
background-position: center right;
padding-right: 30px;
}
.table_thead_items button:active,
.table_thead_items button:active {
background-image: url(../images/btn_change_o.png);
}
.table_thead_items {
height: 55px;
}
.table_item .fail {
color: #ff3f4b;
}
.table_thead_items,
.table_item_w {
padding-left: 40px;
padding-right: 40px;
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
position: relative;
/* justify-content:space-between;*/
}
.class_large,
.class_small,
.profile {
display: table;
}
.table_item_w > *,
.table_thead_items > * {
padding-left: 3px;
padding-right: 3px;
flex: 1;
}
.table_tbody {
position: relative;
padding-top: 10px;
padding-bottom: 30px;
}
.table_item_w {
font-size: 13px;
font-weight: 500;
line-height: 120%;
margin-top: 20px;
overflow: visible;
}
.table_item_m {
height: 0;
visibility: hidden;
opacity: 0;
overflow: hidden;
}
.table_item_w .class_large {
cursor: pointer;
}
.table_item_w .date {
font-weight: 400;
}
.table_item .black {
color: #000000;
}
.table_item .gray {
color: #b4b4b4;
}
.table_item .point {
color: #ff6000;
}
.table_item_w .img_shadow {
display: inline-block;
vertical-align: middle;
margin-top: 5px;
margin-bottom: 5px;
}
.table_item_w .profile > .img_shadow {
width: 100%;
height: 100%;
max-width: 36px;
max-height: 36px;
display: table-cell;
width: 36px;
}
.table_item_w .class_small > .img_shadow {
width: 100%;
height: 100%;
max-width: 74px;
max-height: 42px;
border-radius: 0;
display: table-cell;
width: 74px;
}
.table_item_w .class_large > .img_shadow {
width: 100%;
height: 100%;
max-width: 124px;
max-height: 70px;
border-radius: 0;
display: table-cell;
width: 124px;
}
.table_item_w .channel > .img_shadow {
}
.table_item_w span {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
line-height: 120%;
}
.table_item_w .profile > span {
padding-left: 8px;
}
.table_item_w .class_small > span {
padding-left: 8px;
}
.table_item_w .class_large > span {
padding-left: 18px;
}
.table_item_w img {
vertical-align: text-bottom;
}
.table_item_m img {
vertical-align: text-bottom;
}
.payment_list_page h5 {
font-size: 18px;
color: #3c3c3c;
font-weight: 700;
line-height: 120%;
padding-left: 30px;
padding-right: 30px;
padding-top: 34px;
padding-bottom: 34px;
border-bottom: 1px solid #ebebeb;
}
.payment_list_page .table_thead_items > *:nth-child(2),
.payment_list_page .table_item_w > *:nth-child(2) {
max-width: 150px;
}
.payment_list_page .table_thead_items > *:nth-child(3),
.payment_list_page .table_item_w > *:nth-child(3) {
max-width: 150px;
text-align: center;
}
.payment_list_page .table_thead_items > *:nth-child(4),
.payment_list_page .table_item_w > *:nth-child(4) {
max-width: 100px;
text-align: center;
}
.payment_list_page .table_thead_items > *:nth-child(5),
.payment_list_page .table_item_w > *:nth-child(5) {
max-width: 150px;
text-align: center;
}
.payment_list_page .table_thead_items > *:nth-child(6),
.payment_list_page .table_item_w > *:nth-child(6) {
max-width: 150px;
text-align: center;
}
.table_paging {
display: flex;
align-items: center;
max-width: 484px;
margin: 0 auto;
justify-content: space-between;
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
}
.paging_control {
display: flex;
}
[class*='btn_paging_'] {
display: block;
min-width: 26px;
width: 26px;
height: 26px;
background-image: url('../images/btn_first_n.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
body .btn_paging_first {
background-image: url('../images/btn_first_n.png');
margin-right: 5px;
}
body .btn_paging_first:active,
body .btn_paging_first:hover {
background-image: url('../images/btn_first_o.png');
}
body .btn_paging_prev {
background-image: url('../images/btn_prev_n.png');
margin-right: 20px;
}
body .btn_paging_prev:active,
body .btn_paging_prev:hover {
background-image: url('../images/btn_prev_o.png');
}
body .btn_paging_next {
background-image: url('../images/btn_next_n.png');
margin-left: 20px;
}
body .btn_paging_next:active,
body .btn_paging_next:hover {
background-image: url('../images/btn_next_o.png');
}
body .btn_paging_last {
background-image: url('../images/btn_last_n.png');
margin-left: 5px;
}
body .btn_paging_last:active,
body .btn_paging_last:hover {
background-image: url('../images/btn_last_o.png');
}
body .paging_number {
display: flex;
align-items: center;
flex: 1;
justify-content: space-between;
}
.table_paging .paging_number > * {
color: #b4b4b4;
font-size: 14px;
font-weight: 500;
display: block;
padding-left: 10px;
padding-right: 10px;
}
.table_paging .paging_number > *:active,
.table_paging .paging_number > *.on,
.table_paging .paging_number > *:hover {
color: #ff6000;
}
/* 채널정산
----------------------------------------------------- */
.channel_settlement_page .table_thead_items > *:nth-child(1),
.channel_settlement_page .table_item_w > *:nth-child(1) {
max-width: 82px;
}
.channel_settlement_page .table_thead_items > *:nth-child(3),
.channel_settlement_page .table_item_w > *:nth-child(3) {
max-width: 170px;
}
.channel_settlement_page .table_thead_items > *:nth-child(4),
.channel_settlement_page .table_item_w > *:nth-child(4) {
max-width: 190px;
}
.channel_settlement_page .table_thead_items > *:nth-child(5),
.channel_settlement_page .table_item_w > *:nth-child(5) {
max-width: 100px;
}
.channel_settlement_page .table_thead_items > *:nth-child(6),
.channel_settlement_page .table_item_w > *:nth-child(6) {
max-width: 100px;
text-align: right;
}
.settlement_title {
position: relative;
border-bottom: 1px solid #ebebeb;
padding-left: 30px;
padding-right: 30px;
}
.settlement_title h5 {
font-size: 18px;
line-height: 90px;
color: #3c3c3c;
display: inline-block;
font-weight: 700;
line-height: 120%;
}
.settlement_title > span {
color: #a0a0a0;
font-size: 14px;
font-weight: 400;
display: inline-block;
margin-left: 18px;
line-height: 90px;
}
.settlement_title > span b {
color: #ff6000;
display: inline-block;
font-weight: 400;
}
.settlement_title .top_nav_select {
float: right;
line-height: 90px;
}
.realive_dashboard {
background-color: #f5f5f5;
padding: 30px;
}
.dashboard_content {
overflow: hidden;
}
.dashboard_content > .dashboard_sect:nth-child(1) {
height: 280px;
}
.dashboard_content > .dashboard_sect:nth-child(2) {
height: 230px;
}
.dashboard_sect {
display: table;
width: 100%;
}
.dashboard_sect > * {
text-align: center;
vertical-align: middle;
padding: 25px;
display: table-cell;
}
.dashboard_box,
.dashboard_total {
width: 33.333%;
}
.dashboard_box {
border-top: 1px solid #ebebeb;
}
.dashboard_total {
border-right: 1px solid #ebebeb;
}
.dashboard_chart {
width: 66.666%;
}
.dashboard_chart > .chart {
text-align: center;
max-width: 670px;
width: 100%;
margin: 0 auto;
}
.dashboard_total h6 {
color: #ff6000;
font-size: 13px;
font-weight: 500;
margin-bottom: 20px;
line-height: 120%;
}
.dashboard_total b {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
color: #3c3c3c;
display: block;
line-height: 120%;
}
.dashboard_total span {
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
display: block;
line-height: 120%;
}
.apexcharts-xaxistooltip {
color: #ff6000 !important;
background: #ffffff !important;
border: 1px solid #ebebeb !important;
font-weight: 700 !important;
}
.apexcharts-xaxistooltip-bottom:before {
border-bottom-color: #ebebeb !important;
}
.apexcharts-xaxistooltip-bottom:after {
border-bottom-color: #ffffff !important;
}
.apexcharts-tooltip-text-value,
.apexcharts-tooltip-text-z-value {
margin-left: 0 !important;
}
.apexcharts-tooltip {
color: #ffffff !important;
background: rgba(70, 70, 70, 0.96) !important;
font-size: 13px !important;
}
.apexcharts-tooltip-series-group {
padding: 0 !important;
}
.apexcharts-tooltip-y-group {
padding: 8px !important;
}
.apexcharts-xaxis-texts-g {
transform: translate(0, -8px) !important;
}
.apexcharts-canvas {
margin: 0 auto !important;
}
.circle_chart_small {
position: relative;
margin-top: 18px;
}
.circle_chart_small > * {
display: inline-block;
vertical-align: middle;
}
.circle_chart_small > span {
margin-left: 10px;
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
}
.circle_chart_small .c100 {
font-size: 24px;
}
.circle_chart_small .c100:after {
height: 18px;
width: 18px;
margin-top: -9px;
margin-left: -9px;
}
.circle_chart_small .c100 .bar,
.circle_chart_small [class*='p5'].c100 .fill,
.circle_chart_small [class*='p6'].c100 .fill,
.circle_chart_small [class*='p7'].c100 .fill,
.circle_chart_small [class*='p8'].c100 .fill,
.circle_chart_small [class*='p9'].c100 .fill,
.c100.p100 .fill {
border: 3px solid #ff6000;
width: 18px;
height: 18px;
}
.dashboard_box h6 {
color: #3c3c3c;
font-size: 13px;
font-weight: 400;
margin-bottom: 14px;
line-height: 120%;
}
.dashboard_box > b {
font-size: 26px;
font-weight: 700;
color: #3c3c3c;
display: block;
line-height: 120%;
}
.dashboard_box > span {
font-size: 13px;
font-weight: 400;
color: #3c3c3c;
display: block;
margin-top: 14px;
line-height: 120%;
}
/* 라이브 수업 리포트
----------------------------------------------------- */
.live_class_report_page .table_thead_items > *:nth-child(1),
.live_class_report_page .table_item_w > *:nth-child(1) {
max-width: 260px;
}
.live_class_report_page .table_thead_items > *:nth-child(3),
.live_class_report_page .table_item_w > *:nth-child(3) {
max-width: 160px;
}
.live_class_report_page .table_thead_items > *:nth-child(4),
.live_class_report_page .table_item_w > *:nth-child(4) {
max-width: 120px;
}
.live_class_report_page .table_thead_items > *:nth-child(5),
.live_class_report_page .table_item_w > *:nth-child(5) {
max-width: 120px;
}
.live_class_report_page .table_thead_items > *:nth-child(6),
.live_class_report_page .table_item_w > *:nth-child(6) {
max-width: 90px;
}
.table_item .rating > * {
display: inline-block;
vertical-align: middle;
margin-bottom: 5px;
}
.table_item .rating > span {
padding-right: 10px;
}
.table_item .rating > i {
width: 18px;
height: 18px;
background-image: url(../images/ic_star_p_03.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left center;
margin-right: 6px;
}
.table_item .rating > button {
width: 22px;
height: 18px;
background-image: url(../images/btn_list_detail_n.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: left center;
}
.table_item .rating > button:hover {
background-image: url(../images/btn_list_detail_o.png);
}
/* 수업 피드백 자세히 보기 팝업
----------------------------------------------------- */
.popup_wrap.popup_feedback_detail .popup_content {
max-width: 660px;
}
.popup_wrap.popup_feedback_detail .popup_t {
height: 66px;
line-height: 66px;
}
.popup_wrap.popup_feedback_detail .popup_t > span {
font-size: 16px;
font-weight: 500;
}
.popup_wrap.popup_feedback_detail .popup_m > p {
font-size: 22px;
color: #000000;
font-weight: 700;
padding-top: 20px;
padding-bottom: 70px;
}
.popup_wrap.popup_feedback_detail .popup_m {
}
.popup_wrap.popup_feedback_detail .popup_m .amount_box {
border: 1px solid #ebebeb;
}
.popup_wrap.popup_feedback_detail .popup_b {
padding-bottom: 25px;
padding-top: 25px;
}
.popup_wrap.popup_feedback_detail .popup_b button {
min-width: 111px;
}
.popup_feedback_detail .cm_comment_main {
text-align: left;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
}
.feedback_class_title {
display: table;
width: 100%;
padding: 30px;
border-bottom: 1px solid #ebebeb;
background-color: #fafafa;
}
.feedback_class_title > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: middle;
height: 100%;
}
.feedback_class_title .img_shadow {
width: 124px;
height: 70px;
border-radius: 0;
}
.feedback_class_title > p span {
padding-left: 20px;
font-size: 14px;
overflow: hidden;
font-weight: 500;
color: #3c3c3c;
text-align: left;
max-height: 32px;
line-height: 16px;
display: -webkit-box;
white-space: initial;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
.cm_comment_main.active > .cm_layout:first-child ~ * {
display: table;
}
/* 질문과 답변
----------------------------------------------------- */
.qna_page {
}
.qna_page:before,
.privacy_page:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f5f5f5;
z-index: -1;
}
.qna_items {
}
.qna_item {
width: 100%;
height: auto;
position: relative;
text-align: left;
}
.btn_qna_title {
padding-bottom: 30px;
padding-top: 30px;
padding-left: 30px;
background-color: #ffffff;
position: relative;
border-bottom: 1px solid #ebebeb;
width: 100%;
height: auto;
position: relative;
text-align: left;
padding-right: 60px;
}
.btn_qna_title h6 {
display: inline-block;
padding-right: 10px;
font-size: 16px;
line-height: 120%;
white-space: initial;
font-weight: 700;
color: #3c3c3c;
vertical-align: middle;
}
.btn_qna_title.btn_drop i {
position: absolute;
right: 30px;
top: 0;
width: 12px;
height: 100%;
background-image: url(../images/btn_arrow_dropdown_n.png);
display: block;
background-size: 12px auto;
background-repeat: no-repeat;
background-position: center center;
}
.btn_qna_title.btn_drop:not(.active):hover i {
background-image: url(../images/btn_arrow_dropdown_s.png);
}
.btn_qna_title.active.btn_drop i {
background-image: url(../images/btn_arrow_dropup_s.png);
}
.qna_item .qna_text {
position: relative;
background-color: #fafafa;
}
.qna_item > button.active + div {
max-height: 1000px;
}
.qna_page .post_cont {
padding: 30px;
border-bottom: 1px solid #ebebeb;
}
.privacy_page .layout_box {
padding: 30px;
}
.qna_page .post_cont p,
.privacy_page .post_cont p {
/* line-height: 20px;
font-size: 14px !Important;
margin-bottom: 15px !important; */
}
.privacy_page .layout_box > h6 {
font-size: 16px;
color: #3c3c3c;
font-weight: 700;
line-height: 30px;
padding-bottom: 40px;
}
.qna_tab_content > * {
display: none;
}
.qna_tab_content > *.active {
display: block;
}
.qna_tab_top {
border-bottom: 1px solid #ebebeb;
background-color: #ffffff;
position: relative;
padding-left: 30px;
padding-right: 30px;
padding-top: 19px;
padding-bottom: 19px;
display: flex;
align-items: center;
}
.qna_tab_top h5 {
font-weight: 700;
font-size: 18px;
color: #3c3c3c;
margin-right: 30px;
line-height: 120%;
}
.qna_tab_nav_button {
}
.qna_tab_nav_button > button {
border-radius: 6px;
display: inline-block;
font-size: 14px;
color: #a0a0a0;
font-weight: 500;
background-color: #f5f5f5;
padding: 12px;
line-height: 120%;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.qna_tab_nav_button > button:active,
.qna_tab_nav_button > button.active {
background-color: #ff6000;
color: #ffffff;
}
.qna_page .responsive_fix.medium,
.privacy_page .responsive_fix.medium {
padding-top: 40px;
padding-bottom: 40px;
}
.privacy_title {
border-bottom: 1px solid #ebebeb;
background-color: #ffffff;
position: relative;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
display: flex;
align-items: center;
}
.privacy_title h5 {
font-weight: 700;
font-size: 18px;
color: #3c3c3c;
}
.privacy_title .top_nav_select {
float: none;
line-height: 100%;
flex: 1;
text-align: right;
}
/*
[class*='myinfo_edit_sect_0'] {
background-color: #ffffff;
margin-bottom: 20px;
position: relative;
}
.myinfo_edit_content > button {
margin-bottom: 50px;
margin-top: 30px;
padding: 0 20px;
}
*/
/*
*/
/*
*/
/*
.channel_view_tab_content{}
.channel_view_tab_content > div{display: none}
.channel_view_tab_content > div.active{display: block}
.channel_view_content{width: 100%;position: relative}
*/
/*
1반
월, 수, 금 오후 7~9반 (총 3회)
1회
2018년 10월 24일
월요일
오후 03:00 ~ 오후 04:00
*/
/*
div class="channel_view_page">
*/
/* #footer
----------------------------------------------------- */
.footer_wrap {
width: 100%;
height: auto;
position: relative;
}
/*login footer*/
.login_flow .footer_content {
position: relative;
text-align: center;
/* height: 71px; */
line-height: 70px;
border-top: 1px solid #f0f0f0;
}
.login_footer_menu {
position: absolute;
padding: 0 30px;
left: 0;
top: 50%;
width: 100%;
margin-top: -7px;
}
.login_footer_menu > * {
float: left;
color: #c8c8c8;
font-size: 12px;
line-height: 120%;
font-weight: 500;
}
.login_footer_menu > a:nth-child(1) {
margin-right: 20px;
}
.login_footer_menu > a:nth-child(2) {
}
.login_footer_menu > button {
float: right;
line-height: 14px;
}
.login_footer_menu > button i {
display: inline-block;
margin-left: 9px;
width: 12px;
height: 9px;
background-image: url('../images/btn_dropdown_mobile_n.png');
vertical-align: middle;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.login_footer_menu > button:hover i,
.login_footer_menu > button:active i {
background-image: url('../images/btn_dropdown_mobile_o.png');
}
.login_footer_bi {
display: inline-block;
vertical-align: middle;
}
.login_footer_bi i {
display: block;
width: 122px;
height: 16px;
margin: 0 auto;
background: url('../images/logo_liveklass_gray.png') center center no-repeat;
background-size: 100% auto;
}
.login_footer_bi span {
font-size: 10px;
color: #c8c8c8;
font-weight: 400;
margin-top: 7px;
display: inline-block;
}
/*main footer*/
.wrapper:not(.login_flow) .footer_wrap {
background-color: #3c3c3c;
}
.wrapper:not(.login_flow) .footer_content {
padding: 40px 25px;
max-width: 1150px;
margin: 0 auto;
}
.footer_content .footer_bi {
display: block;
width: 100%;
height: 17px;
background-image: url('../images/logo_liveklass_gray.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 130px auto;
}
.footer_content address {
display: block;
text-align: left;
/* margin-top: 20px; */
line-height: 18px;
font-size: 14px;
font-weight: 400;
color: #888;
}
.footer_content .footer_bi + .footer_content address {
margin-top: 20px;
}
.footer_content address span {
display: inline-block;
}
.footer_content address span:after {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background: #888;
position: relative;
top: 1px;
margin: 0 5px 0 8px;
}
.footer_content address .footer_line span:last-child:after {
display: none;
}
.footer_content address span.last:after {
display: none;
}
.footer_content .more_btn {
display: none;
}
.footer_content .more_footer {
display: inline;
}
.footer_content .more_footer a {
text-decoration: underline;
margin-left: 5px;
}
.footer_content span {
line-height: 1.85;
}
.footer_content .footer_menu {
margin-top: 28px;
display: flex;
align-items: center;
}
.footer_content .footer_menu2 {
margin-top: 28px;
display: flex;
align-items: center;
}
.footer_content .footer_menu a {
line-height: 1.85;
display: inline-block;
}
.footer_content .footer_menu2 a {
line-height: 1.85;
display: inline-block;
}
.footer_content .footer_menu a:after {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background: #888;
position: relative;
top: 1px;
margin: 0 5px 0 8px;
}
.footer_content .footer_menu2 a:after {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background: #888;
position: relative;
top: 1px;
margin: 0 5px 0 8px;
}
.footer_content .footer_menu a:last-child:after {
display: none;
}
.footer_content .footer_menu2 a:last-child:after {
display: none;
}
.footer_content .footer_menu .strong {
color: #f8f8f8;
}
.footer_content .footer_menu2 .strong {
color: #f8f8f8;
}
.footer_content .footer_menu select {
height: 25px;
}
.footer_content .footer_menu2 select {
height: 25px;
}
/* 이미지 크롭 팝업
----------------------------------------------------- */
.popup_channel_image {
max-width: 798px;
}
.popup_channel_image .crop_box {
width: 782px;
height: 432px;
text-align: center;
line-height: 432px;
}
.popup_channel_image .crop_box > div {
width: 782px;
height: 432px;
}
.popup_channel_image .crop_box > img {
max-width: 100%;
max-height: 100%;
}
.popup_channel_image .popup_t {
height: 60px;
line-height: 60px;
position: relative;
padding: 0 20px;
border-bottom: 1px solid #f0f0f0;
text-align: left;
}
.popup_channel_image .popup_t > span {
color: #000000;
display: inline-block;
vertical-align: baseline;
font-size: 18px;
font-weight: 700;
}
.popup_channel_image .popup_t > button {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 60px;
background-image: url('../images/m_btn_cancel_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
.popup_channel_image .popup_t > button:active {
background-image: url('../images/m_btn_cancel_p.png');
}
.popup_channel_image .popup_m {
padding: 20px 8px;
position: relative;
}
.jcrop-holder {
display: inline-block;
vertical-align: middle;
}
.jcrop-keymgr {
display: none;
}
.popup_channel_image .popup_b {
height: 60px;
line-height: 60px;
position: relative;
padding: 0 20px;
border-top: 1px solid #ebebeb;
text-align: right;
}
.popup_channel_image .popup_b .crop_info {
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
position: absolute;
left: 20px;
top: 0;
height: 100%;
line-height: 60px;
}
.popup_channel_image .popup_b > button {
display: inline-block;
line-height: 30px;
border-radius: 4px;
height: 30px;
font-size: 14px;
margin: 0 2px;
color: #ffffff;
text-align: center;
padding: 0 20px;
font-weight: 700;
cursor: pointer;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading_spinner {
display: none;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
left: 0;
z-index: 600;
background-color: #ffffff;
top: 0;
}
.loading_spinner.active {
display: block;
}
.ic_spinner_center {
display: inline-block;
vertical-align: middle;
position: absolute;
width: 200px;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
.loading_spinner.active i.ic_spinner {
animation: rotate 1s linear infinite;
height: 50px;
width: 50px;
display: inline-block;
background: url('../images/ic_loading.png') center center no-repeat;
background-size: 100% 100%;
}
.ic_spinner_center span {
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
display: block;
text-align: center;
padding-top: 30px;
}
/* 선생님 관리자 초대 팝업
----------------------------------------------------- */
.popup_invite .popup_content {
max-width: 640px;
width: 100%;
padding: 40px;
}
.popup_invite .popup_t {
position: relative;
text-align: left;
height: auto;
line-height: 120%;
padding: 0;
padding-bottom: 40px;
}
.popup_invite .popup_t > span {
color: #000000;
display: inline-block;
vertical-align: middle;
font-size: 18px;
font-weight: 700;
}
.popup_invite .popup_t > button {
position: absolute;
right: -10px;
top: -10px;
width: 34px;
height: 34px;
background-image: url(../images/m_btn_cancel_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
.popup_invite .popup_t > button:active {
background-image: url('../images/m_btn_cancel_p.png');
}
.popup_invite .popup_m {
position: relative;
}
.search_invite {
padding-right: 121px;
margin-bottom: 30px;
position: relative;
}
.invite_search_list.multi {
margin-bottom: 12px;
}
.invite_search_list {
padding-bottom: 8px;
display: inline-block;
vertical-align: middle;
}
.invite_search_list > * {
position: relative;
display: inline-block;
background-color: #ffffff;
line-height: 38px;
padding-right: 40px;
width: auto;
border-radius: 4px;
box-shadow: 0 1px 4px 0 RGBA(0, 0, 0, 0.1);
}
.popup_invite .popup_b {
/* display: none; */
}
.popup_invite .popup_b > button {
margin: 0 3px;
}
.popup_invite .popup_b > button {
min-width: 110px;
}
.popup_invite .img_container {
width: 30px;
height: 30px;
}
.popup_invite .img_shadow {
width: 30px;
height: 30px;
margin-right: 10px;
}
.invite_search_list .img_p_l {
margin-left: 8px;
margin-top: 8px;
padding-left: 4px;
}
.invite_search_list .img_shadow {
top: 4px;
left: 4px;
}
.invite_search_list > * > p {
font-size: 14px;
display: inline-block;
vertical-align: middle;
line-height: 38px;
}
.invite_search_list button {
position: absolute;
right: 0;
top: 0;
width: 38px;
height: 38px;
background-image: url(../images/m_btn_cancel_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 10px auto;
}
.invite_search_list button:hover {
background-image: url(../images/m_btn_cancel_p.png);
}
.invite_input {
display: flex;
align-items: center;
text-align: left;
position: relative;
min-height: 56px;
/* line-height: 56px; */
border: 1px solid #e6e6e6;
padding-right: 54px;
}
.invite_admin {
border: 0;
width: 100%;
height: 38px;
line-height: 38px;
}
.invite_input > i {
width: 54px;
height: 54px;
display: block;
position: absolute;
right: 0;
bottom: 0;
background: url(../images/m_btn_search_n.png) center center no-repeat;
background-size: 14px auto;
}
.search_invite > button {
width: 101px;
position: absolute;
right: 0;
top: 0;
line-height: 54px;
height: 54px;
}
.popup_invite .popup_m > p {
text-align: left;
padding-left: 14px;
position: relative;
margin-bottom: 10px;
line-height: 18px;
padding-right: 121px;
color: #a0a0a0;
font-size: 13px;
font-weight: 400;
}
.popup_invite .popup_m > p:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 6px;
width: 4px;
height: 4px;
background: url('../images/ic_bullet_gray_01.png') center center no-repeat;
background-size: 100% auto;
}
.popup_invite .btn_popup_small {
line-height: 28px;
border-radius: 4px;
height: 28px;
font-size: 13px;
color: #ffffff;
padding: 0 16px;
min-width: auto;
margin-left: 6px;
margin-bottom: 6px;
}
.popup_invite .file_list {
height: 90px;
overflow-y: scroll;
padding: 12px;
}
.popup_invite .file_list .file_name {
display: inline-block;
width: 250px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.popup_invite .file_list li {
margin-bottom: 2px;
line-height: 130%;
}
.popup_invite .file_list li i {
display: inline-block;
width: 16px;
height: 16px;
background: url('../images/ic_trash_n.png') center/contain no-repeat;
margin-right: 6px;
position: relative;
top: 2px;
right: 0;
cursor: pointer;
}
.search_invite .auto_frame {
padding-right: 121px;
z-index: 1;
top: 100%;
}
.search_invite .auto_frame ul {
padding-top: 14px;
padding-left: 12px;
padding-right: 12px;
background-color: #fcfcfc;
border: 1px solid #ebebeb;
max-height: 264px;
height: auto;
overflow-y: auto;
}
.search_invite .auto_frame li button {
margin-bottom: 14px;
font-size: 14px;
font-weight: 500;
color: #3c3c3c;
display: block;
height: 45px;
}
.search_invite .auto_frame li:hover button {
font-weight: 500;
color: #ff6000;
}
.search_invite .auto_frame li button .icon-container {
margin-top: 7px;
}
.search_invite .auto_frame li button .icon {
background-color: #efefef;
color: #666666;
padding: 2px 10px 2px 22px;
border-radius: 10px;
margin-right: 5px;
background-size: auto 70%;
background-repeat: no-repeat;
background-position: 5px center;
}
.search_invite .auto_frame li button .icon.phone {
background-image: url('../images/ic_phone.png');
}
.search_invite .auto_frame li button .icon.email {
background-image: url('../images/ic_email.png');
}
.search_invite .auto_frame li button p {
line-height: 100%;
}
/* 이미지 확대 팝업
----------------------------------------------------- */
.popup_post_image_view .popup_content {
background-color: transparent;
}
.popup_post_image_view .popup_m img {
max-width: 100%;
height: auto;
width: 70%;
}
/* 글 편집 팝업
----------------------------------------------------- */
/*
.popup_post_edit .popup_content{max-width: 1000px;width:100%;}
.popup_post_edit .popup_t{height:60px;line-height: 60px;position: relative;padding: 0 20px;border-bottom:1px solid #F0F0F0;text-align: left}
.popup_post_edit .popup_t > span{color:#000000;display: inline-block;vertical-align: middle;font-size:18px;font-weight: 700;}
.popup_post_edit .popup_t > button{position: absolute;right: 0;top: 0;width:60px;height:60px; background-image: url('../images/m_btn_cancel_n.png');background-position: center center;background-repeat: no-repeat;background-size:14px auto;}
.popup_post_edit .popup_t > button:active{background-image: url('../images/m_btn_cancel_p.png');}
.popup_post_edit .popup_m{ padding: 20px 20px; position: relative;}
.popup_post_edit .popup_b{height:60px;line-height: 60px;position: relative;padding: 0 20px;border-top:1px solid #F0F0F0;text-align: right}
.popup_post_edit .form_post_write{margin-bottom: 0}
.popup_post_edit .popup_b > *{display: inline-block}
.popup_post_edit .popup_b > button:first-child{float: left; margin-top: 15px}
.popup_post_edit .popup_b button{display: inline-block;
line-height: 30px;
border-radius: 4px;
height: 30px;
font-size: 14px;margin:0 2px;
color: #ffffff;
text-align: center;
padding: 0 20px;
font-weight: 700;cursor: pointer;}
*/
/* 설명회 시간표 팝업
----------------------------------------------------- */
.popup_normal {
}
.popup_normal .popup_content {
max-width: 856px;
}
.popup_normal.medium .popup_content {
max-width: 690px;
}
.popup_normal.small .popup_content {
max-width: 480px;
}
.popup_normal.small2 .popup_content {
max-width: 560px;
}
.popup_normal .popup_t {
position: relative;
text-align: left;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ebebeb;
padding: 0 30px;
}
.popup_normal .popup_t .btn_popup_close {
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 80px;
background-image: url('../images/m_btn_cancel_n.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
.popup_normal .popup_t .btn_popup_close:active {
background-image: url('../images/m_btn_cancel_p.png');
}
.popup_normal .popup_m.form > .form_group {
border-bottom: 1px solid #fafafa;
padding: 20px 30px;
margin-bottom: 0;
}
.popup_normal .popup_m {
max-height: calc(100vh - 300px);
overflow-y: auto;
}
.popup_normal .popup_m.form > .form_group:last-child {
border-bottom: 0;
}
.popup_normal .popup_m.form .form_label {
font-weight: 700;
color: #3c3c3c;
margin-bottom: 20px;
}
.popup_normal .popup_t > span {
color: #000000;
display: inline-block;
vertical-align: middle;
font-size: 18px;
font-weight: 700;
}
.popup_normal .popup_b {
padding-bottom: 20px;
padding-top: 20px;
border-top: 1px solid #ebebeb;
}
.popup_normal .popup_b > button {
margin: 0 3px;
}
.popup_normal:not(.small, .medium) .popup_b > button {
min-width: 110px;
}
[class*='popup_schedule_add_0'].popup_normal .popup_t > button {
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 80px;
background-image: url(../images/ic_add_n_02.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 14px auto;
}
[class*='popup_schedule_add_0'].popup_normal .popup_t > button:hover {
background-image: url(../images/ic_add_s_02.png);
}
.form_schedule_add {
display: table;
width: 100%;
position: relative;
/* border-bottom: 1px solid #EBEBEB; */
padding: 0 15px;
}
.form_schedule_add > * {
display: table-cell;
width: auto;
padding: 0 15px;
}
.form_schedule_add > *:nth-child(1) {
width: 50%;
}
.form_schedule_add > *:nth-child(2) {
width: auto;
}
.form_schedule_add > *:nth-child(3) {
width: 21%;
}
.form_schedule_add .form_col_two > * {
width: 47%;
}
.form_schedule_add .form_col_two > i {
width: 6%;
}
.form_schedule_item > span {
color: #3c3c3c;
font-size: 14px;
font-weight: 700;
padding-top: 20px;
padding-left: 30px;
padding-bottom: 14px;
display: block;
text-align: left;
}
.week_setting {
background-color: #fcfcfc;
}
[class*='popup_schedule_add_0'] .popup_m > .form_schedule_item:last-child .select2-container:not(.select2) {
top: initial !important;
bottom: 100%;
}
/* 동영상 수업 추가 팝업
----------------------------------------------------- */
.right_input {
padding-right: 196px;
}
.number_input {
position: absolute;
right: 0;
top: 0;
font-weight: 400;
font-size: 14px;
text-align: right;
color: #3c3c3c;
width: 166px;
}
.number_input > input {
width: 50px;
margin-left: 10px;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.number_input > b {
font-weight: 500;
}
.number_input > .error {
text-align: right;
}
.popup_live_add .form_label,
.popup_vod_add .form_label,
.popup_mission_add .form_label,
.popup_offline_add .form_label {
font-weight: 700;
color: #3c3c3c;
margin-bottom: 20px;
}
.popup_vod_add .form_group,
.popup_mission_add .form_group,
.popup_offline_add .form_group {
border-bottom: 1px solid #f5f5f5;
padding: 20px 30px;
margin-bottom: 0;
}
.popup_vod_add .vod_ready {
display: flex;
flex-direction: column;
width: 100%;
height: 405px;
min-height: 405px;
align-items: center;
justify-content: center;
}
.popup_vod_add .vod_ready .icon {
width: 200px;
height: 150px;
background: url(../images/convert_ico.gif) center/contain no-repeat;
}
.popup_vod_add .vod_ready .message {
display: flex;
flex-direction: column;
width: 287px;
word-break: keep-all;
text-align: center;
}
.popup_vod_add .vod_ready .message .title {
font-size: 24px;
font-weight: 700;
}
.popup_vod_add .vod_ready span {
font-size: 14px;
color: #ffffff;
line-height: 1.5;
}
.vod_url {
width: 100%;
position: relative;
margin-bottom: 10px;
}
.vod_url > span:not(.error) {
display: block;
position: absolute;
width: 50px;
height: 40px;
border: 1px solid #e6e6e6;
background-color: #f9f9f9;
color: #a0a0a0;
font-size: 14px;
font-weight: 500;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
.vod_url input {
padding-left: 62px;
}
.vod_upload {
width: 100%;
position: relative;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.vod_upload > span:not(.error) {
display: block;
position: absolute;
width: 50px;
height: 40px;
border: 1px solid #e6e6e6;
background-color: #f9f9f9;
color: #a0a0a0;
font-size: 14px;
font-weight: 500;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
.vod_upload input {
padding-left: 62px;
}
.vod_upload input[type='text']:disabled {
background-color: #ffffff !important;
}
.vod_upload button {
margin-left: 10px;
}
/* VOD 업로드 팝업
----------------------------------------------------- */
.vod_upload_popup .popup_content {
width: 512px;
height: 263px;
}
.vod_upload_popup .popup {
display: flex;
flex-direction: column;
align-items: center;
}
.vod_upload_popup .popup .realive_progress_outer {
height: 12px;
background-color: #d2d2d2;
overflow: hidden;
position: relative;
vertical-align: middle;
border-radius: 0px;
}
.vod_upload_popup .popup .realive_progress_inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #ff6000;
text-align: right;
line-height: 1;
white-space: nowrap;
transition: width 0.6s ease;
border-radius: 0px;
}
.vod_upload_popup .popup .title {
font-size: 21px;
font-weight: 500;
margin-top: 33px;
width: 429px;
text-align: left;
}
.vod_upload_popup .popup .desc {
font-size: 13px;
font-weight: 400;
margin-top: 22px;
line-height: 21px;
width: 429px;
height: 63;
color: #6e6b7b;
text-align: left;
}
.vod_upload_popup .popup .btn {
margin-top: 34px;
}
.mission_select {
}
.mission_select > * {
float: left;
}
.mission_select > *:nth-child(1) {
max-width: 100%;
width: 30%;
margin-right: 2.5%;
text-align: left;
}
.mission_select > *:nth-child(2) {
width: 20%;
margin-right: 2.5%;
}
.mission_select > *:nth-child(3) {
width: 45%;
text-align: left;
}
/* 오프라인 이벤트 추가 팝업
----------------------------------------------------- */
/* 오프라인 주소추가 부분 수정 20190708
----------------------------------------------------- */
.popup_container .form_flex_two,
.form_flex_three {
display: flex;
}
.popup_container .form_flex_two > *:first-child,
.form_flex_three > *:first-child {
margin-right: 10px;
}
.popup_container .form_content > .form_col_two:nth-child(2) {
margin-top: 20px;
}
.map_preview {
width: 100%;
height: 220px;
width: 100%;
position: relative;
border: 1px solid #e6e6e6;
/* margin-top: 20px */
}
.btn_search_places {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 0;
background-image: url(../images/btn_input_search_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 30px auto;
}
.btn_search_places:hover {
background-image: url(../images/btn_input_search_o.png);
}
/*.datepicker_custom + .timepicker_custom .el-input__inner{border-left: 0}*/
/* 문의하기 팝업
----------------------------------------------------- */
.form_write {
padding: 30px;
text-align: left;
}
.form_view {
line-height: 20px;
padding: 30px;
text-align: left;
color: #3c3c3c;
min-height: 140px;
color: #b4b4b4;
font-size: 14px;
}
.form_write .form_textarea {
min-height: 140px;
border: 0 none;
padding: 0;
}
.popup_textarea.popup_normal .popup_b {
text-align: right;
padding-right: 30px;
}
/* 수업평가 팝업
----------------------------------------------------- */
.popup_rating .btn_del {
float: left;
padding-left: 30px;
font-size: 14px;
}
.class_evaluation_rating {
margin-left: 27px;
display: inline-block;
vertical-align: middle;
}
.class_evaluation_rating .el-rate__text {
font-size: 20px;
font-weight: 400;
color: #ff6000;
margin-left: 3px;
}
.class_evaluation_rating > * {
display: inline-block;
vertical-align: middle;
}
.class_evaluation_rating > span {
font-size: 20px;
font-weight: 400;
color: #ff6000;
margin-left: 3px;
}
.btn_del i {
display: inline-block;
width: 16px;
height: 16px;
background: url('../images/ic_trash_n.png') center/contain no-repeat;
margin-right: 6px;
position: relative;
top: 2px;
}
/* 공지사항 작성 팝업
----------------------------------------------------- */
.form_notice_write {
display: table;
width: 100%;
position: relative;
}
.form_notice_write > * {
display: table-cell;
width: auto;
}
.form_notice_write > *:nth-child(1) {
width: 39.2%;
padding-right: 3.2%;
}
.form_notice_write > *:nth-child(2) {
width: 39.2%;
padding-right: 3.2%;
}
.popup_notice_write .custom[type='checkbox'] + label {
color: #a0a0a0;
}
/* 공지사항 보기 팝업
----------------------------------------------------- */
.popup_notice_view {
}
.popup_notice_view .popup_t {
height: auto;
padding: 30px;
padding-right: 60px;
}
.popup_notice_view .popup_t .popup_notice_title {
}
.popup_notice_view .popup_t .popup_notice_title p {
display: block;
font-size: 16px;
font-weight: 500;
color: #000000;
margin-bottom: 10px;
line-height: 120%;
}
.popup_notice_view .popup_t .popup_notice_title span {
display: inline-block;
margin-right: 6px;
font-size: 12px;
font-weight: 400;
color: #b4b4b4;
}
.popup_notice_view .popup_t .popup_notice_title b {
display: inline-block;
color: #ff6000;
font-size: 12px;
font-weight: 400;
}
.popup_notice_view .class_notice_view {
min-height: 300px;
width: 100%;
padding: 30px;
word-break: break-all;
white-space: pre-wrap;
height: auto;
position: relative;
font-size: 14px;
font-weight: 500;
color: #3c3c3c;
line-height: 20px;
text-align: left;
}
.popup_notice_view .popup_b {
padding-bottom: 12px;
padding-top: 12px;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
.popup_notice_view .button_l_wrap {
float: left;
padding-left: 15px;
}
.popup_notice_view .button_l_wrap > button {
float: left;
width: 56px;
height: 56px;
background-image: url(../images/btn_lock_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 26px auto;
}
.popup_notice_view .button_l_wrap > .btn_class_notice_lock {
background-image: url(../images/btn_lock_n.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_lock:hover {
background-image: url(../images/btn_lock_o.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_edit {
background-image: url(../images/btn_edit_n.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_edit:not(:disabled):hover {
background-image: url(../images/btn_edit_o.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_edit:disabled {
background-image: url(../images/btn_edit_d.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_delete {
background-image: url(../images/btn_del_n.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_delete:not(:disabled):hover {
background-image: url(../images/btn_del_o.png);
}
.popup_notice_view .button_l_wrap > .btn_class_notice_delete:disabled {
background-image: url(../images/btn_del_d.png);
}
.popup_notice_view .button_r_wrap {
float: right;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.popup_notice_view .button_r_wrap > button {
line-height: 36px;
height: 36px;
border: 1px solid #e6e6e6;
font-size: 14px;
color: #3c3c3c;
text-align: center;
padding: 0 20px;
font-weight: 500;
min-width: 80px;
cursor: pointer;
}
.popup_notice_view .button_r_wrap > button i {
width: 7px;
height: 100%;
display: inline-block;
vertical-align: bottom;
background-image: url(../images/ic_arrow_prev.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
}
.popup_notice_view .button_r_wrap > .btn_class_notice_prev i {
background-image: url('../images/ic_arrow_prev.png');
margin-right: 5px;
}
.popup_notice_view .button_r_wrap > .btn_class_notice_next i {
background-image: url('../images/ic_arrow_next.png');
margin-left: 5px;
}
/* 질문답변 보기 팝업
----------------------------------------------------- */
.popup_qna_view.popup_normal .popup_t {
height: 66px;
line-height: 66px;
}
.popup_qna_view.popup_normal .popup_t > span {
font-size: 16px;
}
.popup_qna_view.popup_normal .popup_t .btn_popup_close {
width: 66px;
height: 66px;
}
.class_qnd_edit {
width: 100%;
padding-right: 36px;
height: auto;
margin-top: 4px;
position: relative;
}
.class_qnd_edit textarea {
border: 1px solid #f4ae8f;
width: 100%;
height: 238px;
}
.class_qnd_edit button {
margin-top: 14px;
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 12px;
margin-right: 4px;
border-radius: 4px;
font-size: 14px;
color: #ffffff;
font-weight: 500;
cursor: pointer;
}
.qna_view_user {
display: table;
width: 100%;
padding: 20px;
padding-left: 30px;
border-bottom: 1px solid #f5f5f5;
}
.qna_view_user > * {
display: table-cell;
width: auto;
position: relative;
vertical-align: middle;
height: 100%;
}
.qna_view_user_img {
width: 42px;
height: 42px;
position: relative;
vertical-align: top;
}
.qna_view_user_img .img_shadow {
width: 42px;
height: 42px;
}
.qna_view_user_img img {
width: 100%;
height: auto;
display: block;
}
.qna_view_user_info {
padding-left: 20px;
text-align: left;
vertical-align: middle;
font-size: 14px;
color: #3c3c3c;
font-weight: 700;
}
.qna_view_user_info > span {
font-size: 12px;
color: #a0a0a0;
font-weight: 400;
margin-left: 8px;
}
.qna_view_user_info p {
font-weight: 500;
margin-top: 6px;
white-space: normal;
display: block;
padding-left: 30px;
position: relative;
line-height: 120%;
}
.qna_view_user_info b {
color: #ff6000;
font-weight: 700;
margin-right: 8px;
display: inline-block;
position: absolute;
left: 0;
line-height: 120%;
}
.popup_qna_view .class_qna_view {
width: 100%;
padding: 30px;
white-space: pre-wrap;
height: auto;
position: relative;
font-size: 14px;
font-weight: 400;
color: #3c3c3c;
line-height: 20px;
text-align: left;
}
.popup_qna_view .popup_b {
padding-bottom: 0;
padding-top: 0;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
.popup_qna_view .cm_comment_write {
border-top: 0;
padding-left: 30px;
padding-right: 30px;
}
/*
.popup_qna_view .button_l_wrap{float: left;padding-left: 15px;}
.popup_qna_view .button_l_wrap > button{float: left;
width: 56px;
height: 56px;
background-image: url(../images/btn_lock_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 26px auto;}
.popup_qna_view .button_l_wrap > .btn_class_notice_lock{background-image: url(../images/btn_lock_n.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_lock:hover{background-image: url(../images/btn_lock_o.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_edit{background-image: url(../images/btn_edit_n.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_edit:not(:disabled):hover{background-image: url(../images/btn_edit_o.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_edit:disabled{background-image: url(../images/btn_edit_d.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_delete{background-image: url(../images/btn_del_n.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_delete:not(:disabled):hover{background-image: url(../images/btn_del_o.png);}
.popup_qna_view .button_l_wrap > .btn_class_notice_delete:disabled{background-image: url(../images/btn_del_d.png);}
.popup_qna_view .button_r_wrap{float: right;padding-right: 30px;padding-top:10px;padding-bottom: 10px}
.popup_qna_view .button_r_wrap > button{
min-width: 103px
}
*/
.class_qna_comment {
border-top: 1px solid #f5f5f5;
padding: 30px;
}
.class_qna_comment .cm_post_content {
max-height: 100%;
}
.class_qna_comment .cm_main_header {
margin-top: 14px;
line-height: 120%;
}
.class_qna_comment .cm_main_sect {
text-align: left;
}
/* 반이동 팝업
----------------------------------------------------- */
.popup_class_change .img_p_l {
font-weight: 700;
font-size: 14px;
}
.popup_class_change .img_p_l span {
font-weight: 400;
margin-top: -3px;
}
.popup_class_change.popup_normal .popup_m {
overflow-y: visible;
min-height: 240px;
}
/* 공유하기 팝업
----------------------------------------------------- */
.popup_share.popup_normal .popup_content {
max-width: 447px;
}
.popup_share .popup_m {
padding: 50px 30px;
}
.popup_share_button {
text-align: center;
}
.popup_share_button > * {
display: inline-block;
margin: 0 16px;
}
.popup_share_button > * i {
display: block;
width: 60px;
height: 60px;
background-image: url(../images/btn_share_email_n.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.btn_popup_share_email i {
background-image: url(../images/btn_share_email_n.png);
}
.btn_popup_share_email:hover i {
background-image: url(../images/btn_share_email_o.png);
}
.btn_popup_share_message i {
background-image: url(../images/btn_share_message_n.png);
}
.btn_popup_share_message:hover i {
background-image: url(../images/btn_share_message_o.png);
}
.btn_popup_share_facebook i {
background-image: url(../images/btn_share_facebook_n.png);
}
.btn_popup_share_facebook:hover i {
background-image: url(../images/btn_share_facebook_o.png);
}
.btn_popup_share_kakao i {
background-image: url(../images/btn_share_kakao_n.png);
}
.btn_popup_share_kakao:hover i {
background-image: url(../images/btn_share_kakao_o.png);
}
.popup_share_button > * span {
display: inline-block;
margin-top: 14px;
font-size: 12px;
color: #b4b4b4;
font-weight: 400;
}
.popup_share_url {
position: relative;
margin-top: 30px;
}
.popup_share_url input {
padding-right: 85px;
}
.popup_share_url button {
position: absolute;
right: 0;
top: 0;
color: #3c3c3c;
font-size: 14px;
font-weight: 500;
background-color: #fafafa;
border: 1px solid #e6e6e6;
width: 75px;
text-align: center;
height: 40px;
line-height: 40px;
}
.popup_share_url button:hover {
color: #ff6000;
}
/* 알림 팝업
----------------------------------------------------- */
.popup_alert .popup_content {
max-width: 310px;
}
.popup_alert .popup_t {
height: 50px;
line-height: 49px;
padding: 0 20px;
}
.popup_alert .btn_popup_small {
line-height: 30px;
height: 30px;
font-size: 14px;
}
.popup_alert .popup_b {
padding-bottom: 15px;
padding-top: 15px;
max-height: 100px;
}
.popup_alert .popup_t .btn_popup_close {
width: 50px;
height: 50px;
}
.popup_alert .popup_b {
text-align: center;
}
.popup_alert .popup_m {
padding: 30px;
}
.popup_alert .popup_m p {
font-size: 14px;
color: #3c3c3c;
font-weight: 500;
text-align: center;
}
/*
