.academy_welcome{padding: 25px 25px 40px 25px; border-radius: 15px; color: var(--text_white); display: grid; grid-template-columns: 1fr 321px; grid-gap: 25px; background: var(--bg_academy);}
.academy_welcome > div{width: 100%;}
.academy_welcome .awDesc > div:first-child > div{width: 225px; height: 120px; display: inline-block;}
.academy_welcome .awDesc > div:nth-child(2){font-size: 20px; margin-top: 25px;}
.academy_welcome .awDesc > div:nth-child(3){font-size: 30px; font-family: 'bold';}
.academy_welcome .awIcon{position: relative;}
.academy_welcome .awIcon > div{position: absolute; width: 245px; height: 245px; right: -25px; bottom: -54px; background-size: cover; background-image: url('../../../../images/background/academy_header.png');}

.academy_coming{width: 550px;}
.academy_coming .acLogo > div{width: 380px; height: 210px; margin-top: 25px;}
.academy_coming .acDesc{margin-top: 35px; text-align: center; color: var(--text_white); font-weight: bold;}
.academy_coming .acRegist{margin-top: 50px; text-align: center; font-family: 'bold'; font-size: 20px;}
.academy_coming .acRegist > span{padding: 10px 25px; border-radius: 50px; background: var(--bg_white);}
.academy_coming .acPrice{margin-top: 40px; text-align: center;}
.academy_coming .acPrice > div{color: var(--text_white);}
.academy_coming .acPrice > div:first-child{font-size: 25px; font-family: 'bold';}
.academy_coming .acPrice > div:nth-child(2){margin-top: 15px;}
.academy_coming .acPrice > div:nth-child(2) > div:first-child{font-size: 35px; text-decoration: line-through;}
.academy_coming .acPrice > div:nth-child(2) > div:nth-child(2){font-size: 25px; font-weight: bold;}
.academy_coming .acPrice > div:nth-child(2) > div:nth-child(2) > span:first-child{color: var(--text_white); background: var(--bg_red); padding: 10px 5px; border-radius: 50%;}
.academy_coming .acPrice > div:nth-child(2) > div:nth-child(2) > span:nth-child(2){margin-left: 5px;}
.academy_coming .acMentor{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 15px; margin-top: 45px;}
.academy_coming .acMentor > div{width: 100%;}
.academy_coming .acMentor > div > div{padding-bottom: 100%; background-size: 100%;}
.academy_coming .acMentor > div:first-child > div{background-image: url('../../../../images/background/academy_1.png');}
.academy_coming .acMentor > div:nth-child(2) > div{background-image: url('../../../../images/background/academy_2.png');}
.academy_coming .acMentor > div:nth-child(3) > div{background-image: url('../../../../images/background/academy_3.png');}
.academy_coming .acMentor > div:nth-child(4) > div{background-image: url('../../../../images/background/academy_4.png');}
.academy_coming .acMentor > div:nth-child(5) > div{background-image: url('../../../../images/background/academy_5.png');}

.class_buy_opt{margin-top: 15px;}
.class_buy_opt > div{border-radius: 5px; cursor: pointer; border: 1px solid var(--bg_line); padding: 10px 15px;}
.class_buy_opt > div:not(.active){background: var(--bg_silvercalm); color: var(--text_silver);}
.class_buy_opt > div:not(:last-child){margin-bottom: 10px;}
.class_buy_opt > div.active:hover{border: 1px solid var(--bg_blue);}
.class_buy_opt > div > div:first-child{font-weight: bold;}
.class_buy_opt > div > div:nth-child(2){color: var(--text_silver);}

.class_schedule_buy{margin-top: 15px; max-height: calc(100vh - 330px); overflow: auto;}
.class_schedule_buy > div{padding: 10px 15px; cursor: pointer; border-radius: 5px; border: 1px solid var(--bg_line); position: relative;}
.class_schedule_buy > div:not(:last-child){margin-bottom: 10px;}
.class_schedule_buy > div > div:first-child{font-weight: bold; font-size: 11px; color: var(--text_silver);}
.class_schedule_buy > div > div:first-child > span{color: var(--text_red); float: right;}
.class_schedule_buy .csbInfo{white-space: nowrap; width: 100%; margin-top: 10px;}
.class_schedule_buy .csbInfo > div{display: inline-block;}
.class_schedule_buy .csbInfo > div:not(:first-child){margin-left: 15px;}
.class_schedule_buy .csbInfo .ciDate > div{font-size: 11px; display: grid; grid-template-columns: 15px 1fr; grid-gap: 5px; align-items: center;}
.class_schedule_buy .csbInfo .ciDate > div > div{width: 100%;}
.class_schedule_buy .csbInfo .ciDate > div > div:first-child > div{width: 15px; height: 15px;}
.class_schedule_buy .csbChecked{position: absolute; width: 25px; height: 25px; bottom: 15px; right: 15px; display: none;}
.class_schedule_buy > div.active{border: 1px solid var(--bg_blue); background: var(--bg_silvercalm);}
.class_schedule_buy > div.active .csbChecked{display: block;}

.class_schedule_buy_detail{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-top: 15px;}
.class_schedule_buy_detail > div{width: 100%; text-align: center; padding: 10px 0px; border-radius: 10px; border: 1px solid var(--bg_line);}
.class_schedule_buy_detail > div > div:first-child{color: var(--text_silver);}
.class_schedule_buy_detail > div > div:nth-child(2){font-weight: bold; margin-top: 3px;}

.class_template{}
.class_template .ctHead{display: grid; grid-template-columns: 200px 1fr 300px; grid-gap: 25px; margin-bottom: 25px;}
.class_template .ctHead > div{width: 100%;}
.class_template .ctHead .chCover > div{padding-bottom: 100%; border-radius: 10px; background-color: var(--bg_silvercalm);}
.class_template .ctHead .chContent .ccTitle{font-size: 20px; font-weight: bold;}
.class_template .ctHead .chContent .ccMentor{margin-top: 5px;}
.class_template .ctHead .chContent .ccInfo{margin-top: 15px;}
.class_template .ctHead .chContent .ccInfo > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px;}
.class_template .ctHead .chContent .ccInfo > div:not(:last-child){margin-bottom: 7px;}
.class_template .ctHead .chContent .ccInfo > div > div{width: 100%;}
.class_template .ctHead .chContent .ccInfo > div > div:first-child > div{width: 15px; height: 15px; margin-top: 2px;}
.class_template .ctHead .chBox{padding: 20px; border: 1px solid var(--bg_line); border-radius: 10px;}
.class_template .ctHead .chBox .cbPrice{margin-bottom: 10px;}
.class_template .ctHead .chBox .cbPrice .cpFinal{font-size: 17px; font-family: 'bold'; color: var(--text_blue);}
.class_template .ctHead .chBox .cbPrice .cpDiscount{font-size: 11px; color: var(--text_red);}
.class_template .ctHead .chBox .cbPriceHalf{margin-bottom: 10px;}
.class_template .ctHead .chBox .cbBtn .cbTxt{padding: 7px 0px; border: 1.5px solid var(--bg_green); font-weight: bold; color: var(--text_green); border-radius: 5px; text-align: center;}
.class_template .ctHead .chBox .cbBtn button{width: 100%;}
.class_template .ctHead .chBox .cbBtn > div:not(:last-child){margin-bottom: 10px;}

.class_info_simple{display: grid; grid-template-columns: 80px 1fr; grid-gap: 20px; padding: 20px 0px; align-items: center; border-bottom: 1px solid var(--bg_line);}
.class_info_simple > div{width: 100%}
.class_info_simple .cisLogo > div{width: 80px; height: 80px; background-color: var(--bg_silvercalm); border-radius: 5px;}
.class_info_simple .cisInfo > div:first-child{font-size: 17px; font-weight: bold;}
.class_info_simple .cisInfo > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}

.class_info_unjoin_space{height: 83px;}
.class_info_unjoin{position: fixed; bottom: -85px; left: 0px; width: 100%; height: 83px; transition: var(--transition); background: var(--bg_academy); z-index: 55;}
.class_info_unjoin .ciuBox{display: grid; grid-template-columns: 50px 1fr 150px; color: var(--text_white); grid-gap: 15px; padding: 15px 0px; align-items: center;}
.class_info_unjoin .ciuBox > div{width: 100%;}
.class_info_unjoin .ciuBox > div:first-child > div{padding-bottom: 100%; border-radius: 5px; background-color: var(--bg_silvercalm); border: 1.5px solid var(--bg_blue);}
.class_info_unjoin .ciuBox > div:nth-child(2) > div:first-child{font-weight: bold; font-size: 15px;}
.class_info_unjoin .ciuBox > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.class_info_unjoin .ciuBox > div:nth-child(3){text-align: right;}

.class_popup_join{padding: 15px;}
.class_popup_join .cpjPrice{border: 1px solid var(--bg_line); border-radius: 10px; padding: 10px;}
.class_popup_join .cpjPrice .cpFinal{font-size: 17px; font-family: 'bold'; color: var(--text_blue);}
.class_popup_join .cpjPrice .cpDiscount{font-size: 11px; color: var(--text_red);}

.class_right_opt{display: inline-block; width: 100%; margin-top: 15px;}
.class_right_opt > div{float: right;}

.class_list_schedule{margin-top: 15px;}
.class_list_schedule > div:not(:last-child){margin-bottom: 20px;}
.class_list_schedule > div > div:first-child{font-size: 15px; font-family: 'bold';}
.class_list_schedule .clsContent{margin-top: 10px;}
.class_list_schedule .clsContent > div{padding: 10px 15px; border-radius: 10px; border: 1.5px solid var(--bg_line); display: grid; grid-template-columns: 70px 1fr; align-items: center; grid-gap: 15px;}
.class_list_schedule .clsContent > div:not(:last-child){margin-bottom: 15px;}
.class_list_schedule .clsContent > div.ended{background: var(--bg_silvercalm); opacity: 0.7;}
.class_list_schedule .clsContent > div.running{border: 1.5px solid var(--bg_blue);}
.class_list_schedule .clsContent > div.lock{background: var(--bg_bluecalm);}
.class_list_schedule .clsContent > div > div{width: 100%;}
.class_list_schedule .clsBody{cursor: pointer; transition: var(--transition);}
.class_list_schedule .clsBody:hover{box-shadow: 0px 0px 5px var(--shadow);}
.class_list_schedule .clsBody .cbCount{text-align: center; color: var(--text_blue);}
.class_list_schedule .clsBody .cbCount > div:first-child{margin-bottom: 3px; font-size: 11px; font-family: 'bold';}
.class_list_schedule .clsBody .cbCount > div:nth-child(2){font-size: 17px; font-weight: bold;}
.class_list_schedule .clsBody .cbContent .ccTitle{font-weight: bold;}
.class_list_schedule .clsBody .cbContent .ccUser{display: grid; margin-top: 3px; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.class_list_schedule .clsBody .cbContent .ccUser > div{width: 100%;}
.class_list_schedule .clsBody .cbContent .ccUser > div:first-child > div{padding-bottom: 100%; border-radius: 50%; background-color: var(--bg_silvercalm);}
.class_list_schedule .clsBody .cbContent .ccPrice{margin-top: 5px; margin-bottom: 5px;}
.class_list_schedule .clsBody .cbContent .ccPrice > span{border-radius: 5px; font-size: 11px; padding: 3px 10px; color: var(--text_white); background: var(--bg_blue);}
.class_list_schedule .clsBody .cbContent .ccInfo{white-space: nowrap; width: 100%; margin-top: 10px;}
.class_list_schedule .clsBody .cbContent .ccInfo > div{display: inline-block;}
.class_list_schedule .clsBody .cbContent .ccInfo > div:not(:first-child){margin-left: 15px;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciDate > div{font-size: 11px; display: grid; grid-template-columns: 15px 1fr; grid-gap: 5px; align-items: center;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciDate > div > div{width: 100%;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciDate > div > div:first-child > div{width: 15px; height: 15px;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciLive > span{padding: 3px 10px 4px 20px; border-radius: 13px; position: relative; top: -5px; background: var(--bg_blue); color: var(--text_white); font-size: 11px;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciLive > span > div{width: 10px; height: 10px; border-radius: 50%; background: var(--bg_red); position: absolute; top: 6px; left: 6px;}
.class_list_schedule .clsBody .cbContent .ccInfo .ciLock > span{padding: 3px 10px 4px 10px; border-radius: 13px; position: relative; top: -5px; background: var(--bg_silver); color: var(--text_white); font-size: 11px;}

.class_list_file{margin-top: 15px;}
.class_list_file > div{border-radius: 10px; border: 1.5px solid var(--bg_line);}
.class_list_file > div:not(:last-child){margin-bottom: 15px;}
.class_list_file .clfList > div:first-child{display: grid; cursor: pointer; grid-template-columns: 10px 1fr 100px; grid-gap: 15px; align-items: center; padding: 10px 15px; box-sizing: border-box;}
.class_list_file .clfList > div:first-child > div{width: 100%;}
.class_list_file .clfList > div:first-child > div:first-child > div{width: 10px; height: 10px;}
.class_list_file .clfList > div:first-child > div:nth-child(2){font-weight: bold;}
.class_list_file .clfList > div:first-child > div:nth-child(3){text-align: right;}
.class_list_file .clfList > div:nth-child(2){border-top: 1.5px solid var(--bg_line); display: none;}
.class_list_file .clfList .clContent > div{display: grid; grid-gap: 15px; grid-template-columns: 15px 1fr; align-items: center; cursor: pointer; padding: 7px 10px; box-sizing: border-box;}
.class_list_file .clfList .clContent > div:hover{color: var(--text_blue);}
.class_list_file .clfList .clContent > div > div{width: 100%;}
.class_list_file .clfList .clContent > div > div:first-child > div{width: 15px; height: 15px;}

.class_list_record{margin-top: 15px; border-radius: 10px; border: 1.5px solid var(--bg_line);}
.class_list_record > a > div{padding: 10px 15px;}

.class_question.cqDetail{padding: 20px 0px; margin-top: 5px;}
.class_question > div{display: grid; grid-template-columns: 40px 1fr; grid-gap: 15px;}
.class_question > div:not(:last-child){margin-bottom: 15px;}
.class_question > div > div{width: 100%;}
.class_question .cqPhoto div{width: 40px; height: 40px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.class_question .cqBody .cbHead{white-space: nowrap; width: 100%;}
.class_question .cqBody .cbHead > div{display: inline-block;}
.class_question .cqBody .cbHead > div:first-child{font-weight: bold; margin-right: 15px;}
.class_question .cqBody .cbHead > div:nth-child(2) > a{font-size: 11px; color: var(--text_silver);}
.class_question .cqBody .cbContent{margin-bottom: 5px;}
.class_question.cqDetail .cqBody .cbContent{padding: 7px 0px 5px 0px; font-size: 17px;}
.class_question .cqBody .cbOpt{white-space: nowrap; width: 100%;}
.class_question .cqBody .cbOpt > div{display: inline-block; font-size: 12px;}
.class_question .cqAnswerInput{padding: 10px 0px;}
.class_question .cqReply{margin-top: 15px;}
.class_question .cqReply > div{display: grid; grid-template-columns: 40px 1fr; grid-gap: 15px;}
.class_question .cqReply > div:not(:last-child){margin-bottom: 15px;}
.class_question .cqReply > div > div{width: 100%;}
.class_question .cqReply .crPhoto div{width: 40px; height: 40px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.class_question .cqReply .crBody .crbHead{white-space: nowrap; width: 100%;}
.class_question .cqReply .crBody .crbHead > div{display: inline-block;}
.class_question .cqReply .crBody .crbHead > div:first-child{font-weight: bold; margin-right: 15px;}
.class_question .cqReply .crBody .crbHead > div:first-child span{padding: 2px 5px; border-radius: 5px; background: var(--bg_bluecalm); font-size: 9px; margin-left: 5px; font-weight: normal;}
.class_question .cqReply .crBody .crbHead > div:nth-child(2){font-size: 11px; color: var(--text_silver);}
.class_question .cqReply .crBody .crOpt{white-space: nowrap; width: 100%;}
.class_question .cqReply .crBody .crOpt > div{display: inline-block; font-size: 12px;}
.class_question .cqMoreAnswer{margin-top: 3px; font-size: 11px;}

.class_detail{margin-top: 15px;}
.class_detail > div:not(:last-child){margin-bottom: 20px;}
.class_detail .cdTitle{font-size: 17px; font-weight: bold;}
.class_detail .cdBanner img{max-width: 550px; width: 100%;}
.class_detail .cdList{margin-top: 10px;}
.class_detail .cdList > div{display: grid; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center;}
.class_detail .cdList > div:not(:last-child){margin-bottom: 5px;}
.class_detail .cdList > div > div{width: 100%;}
.class_detail .cdList > div > div:first-child > div{width: 15px; height: 15px;}
.class_detail .cdFaq{padding: 10px 0px 0px 5px;}
.class_detail .cdFaq > div:not(:last-child){margin-bottom: 10px;}
.class_detail .cdFaq > div > div:first-child{font-weight: bold;}
.class_detail .cdFaq > div > div:nth-child(2){padding-left: 15px; color: var(--text_silver); margin-top: 3px; position: relative;}
.class_detail .cdFaq > div > div:nth-child(2):before{content: ''; position: absolute; left: 0px; top: 0px; width: 2px; height: 100%; background: var(--bg_blue);}

#liveroom_layout{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: grid; grid-template-rows: 50px 1fr 70px;}
#liveroom_layout > div{height: 100%; width: 100%; position: relative;}
#liveroom_layout .llHead{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: var(--bg_blue);}
#liveroom_layout .llHead .lhIcon{width: 110px; height: 26px; float: left; margin-top: 10px; margin-left: 25px;}
#liveroom_layout .llHead .lhInfo{float: right; margin-top: 7px; margin-right: 20px;}
#liveroom_layout .llHead .lhInfo > div{display: grid; width: 350px; grid-template-columns: 1fr 30px; grid-gap: 10px; align-items: center;}
#liveroom_layout .llHead .lhInfo > div > div{width: 100%;}
#liveroom_layout .llHead .lhInfo > div > div:first-child{text-align: right; color: var(--text_white);}
#liveroom_layout .llHead .lhInfo > div > div:first-child > div:first-child{font-weight: bold;}
#liveroom_layout .llHead .lhInfo > div > div:first-child > div:nth-child(2){font-size: 11px; margin-top: -4px;}
#liveroom_layout .llHead .lhInfo > div > div:nth-child(2) > div{width: 30px; height: 30px; background: pink; border-radius: 5px;}
#liveroom_layout .llContent{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: grid; grid-template-columns: 1fr 350px;}
#liveroom_layout .llContent.noside{grid-template-columns: 1fr 0px;}
#liveroom_layout .llContent > div{width: 100%; height: 100%; position: relative;}
#liveroom_layout .llContent > div:first-child{background: var(--bg_black);}
#liveroom_layout .llContent > div:nth-child(2){background: var(--bg_white);}
#liveroom_layout .llContent.noside > div:nth-child(2){display: none;}
#liveroom_layout .llOpt{width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: var(--bg_blackcalm); display: grid; grid-template-columns: 1fr 350px;}
#liveroom_layout .llOpt > div{width: 100%; height: 100%;}
#liveroom_layout .llOpt > div:first-child > div{text-align: center;}
#liveroom_layout .loMain{display: inline-flex; align-items: flex-start; gap: 12px;}
#liveroom_layout .loMain > div{width: 50px; margin-top: 7px;}
#liveroom_layout .loMain > div > div:first-child{width: 35px; height: 35px; background: var(--bg_white); border-radius: 3px;}
#liveroom_layout .loMain > div > div:first-child > div{width: 20px; height: 20px; background: black; position: relative; top: 7px;}
#liveroom_layout .loMain > div > div:nth-child(2){margin-top: 3px; font-size: 11px; color: var(--text_white);}
#liveroom_layout .loOthers{white-space: nowrap; position: relative; top: 18px;}
#liveroom_layout .loOthers > div{display: inline-block;}
#liveroom_layout .loOthers > div:not(:last-child){margin-right: 10px;}
#liveroom_layout .loOthers .looOpt{width: 35px; height: 35px;}
#liveroom_layout .loOthers .looOpt > div{width: 25px; height: 25px; position: relative; top: 5px; position: relative;}
#liveroom_layout .loOthers .looOpt > div > div{background: var(--bg_blue); color: var(--text_white); font-size: 9px; padding: 3px 5px; position: absolute; border-radius: 10px; top: -15px; right: -10px;}
#liveroom_layout .loOthers .looBtn{vertical-align: top;}
#liveroom_layout .loOthers .looBtn > button{width: 150px;}

#liveroom_layout .llChat{display: grid; grid-template-rows: 1fr 60px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;}
#liveroom_layout .llChat > div{width: 100%; height: 100%;}
#liveroom_layout .llChat > div:first-child{overflow: auto;}
#liveroom_layout .llChat > div:nth-child(2){padding: 0px 15px; box-sizing: border-box; box-shadow: 0px 0px 10px var(--shadow);}
#liveroom_layout .llChat > div:nth-child(2) > input{width: 100%; margin-top: 10px;}
#liveroom_layout .llChat .lcBubble{padding: 10px 0px;}
#liveroom_layout .llChat .lcBubble > div{width: 100%; white-space: nowrap; padding: 5px 15px; box-sizing: border-box;}
#liveroom_layout .llChat .lcBubble > div > div{padding: 7px 10px; width: 70%; display: inline-block;}
#liveroom_layout .llChat .lcBubble > div.me{text-align: right;}
#liveroom_layout .llChat .lcBubble > div.me > div{border-radius: 10px 0px 10px 10px; box-shadow: 0px 0px 5px var(--shadow);}
#liveroom_layout .llChat .lcBubble > div.you > div{border-radius: 0px 10px 10px 10px; background: var(--bg_silvercalm);}
#liveroom_layout .llChat .lcBubble > div > div > div:first-child{font-weight: bold;}