@charset "utf-8";

/* common */
body{margin:0;padding:0}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-print-color-adjust:exact}
/* loading */
body >#lottie{width:180px;height:180px; position:absolute;top:50%;left:50%;z-index:2000;transform:translate(-50%, -50%)}
body >#lottie +.dimm{width:100%;height:100%; background:#000;opacity:.5;filter:alpha(opacity=50); position:absolute;top:0;left:0}

#wrap{/*min-width:1280px;*/height:100%}
section.container{position:relative;min-height:100%; background-color:#faf8f3;}

/* selectmenu */
.ui-selectmenu-button.ui-button{margin-right:8px;height:50px; border:solid 2px #eee7d9;border-radius:24px;background-color:#fff;white-space:nowrap; display:inline-block}
.ui-selectmenu-button.ui-button .ui-selectmenu-text{padding-left:20px;font-size:18px;line-height:50px;font-weight:700; display:block;overflow:hidden;text-overflow:ellipsis}
.ui-selectmenu-button.ui-button .ui-selectmenu-icon{width:50px;height:50px; vertical-align:middle;display:inline-block;float:right}
.ui-selectmenu-button.ui-button.ui-selectmenu-button-closed .ui-selectmenu-icon{background:url('../../resources/images/common/btn_dropdown.png') no-repeat 0 0;background-size:48px}
.ui-selectmenu-button.ui-button.ui-selectmenu-button-open .ui-selectmenu-icon{background:url('../../resources/images/common/btn_dropup.png') no-repeat 0 0;background-size:48px}
.ui-selectmenu-button.ui-button:focus{border-color:#f15c43}
.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;z-index:1;display:none}
.ui-selectmenu-menu ul{border:solid 1px #eee7d9; background-color:#fff;overflow:hidden}
.ui-selectmenu-menu ul li div.ui-menu-item-wrapper{font-size:16px;line-height:50px;font-weight:700; text-align: center;}
.ui-selectmenu-menu ul li div.ui-menu-item-wrapper.ui-state-active{color:#fff;background-color:#f15c43}
.ui-selectmenu-open{display:block}

/* .inp-radio, .inp-check */
.inp-check{position:relative}
.inp-check input[type="checkbox"]{margin:0;padding:0;width:1px;height:1px; line-height:1;border:0; -webkit-appearance:none;-moz-appearance:none;appearance:none; opacity:0; position:absolute;top:0;left:0}
.inp-check input + label{padding-left:28px;font-size:16px;color:#9e9e9e;line-height:20px; background:url('../../resources/images/common/check.png') no-repeat 0 center;background-size:20px; cursor:pointer; display:inline-block}
.inp-check input:focus + label{background-image:url('../../resources/images/common/check_hover.png')}
.inp-check input:checked + label{background-image:url('../../resources/images/common/check_on.png')}

/* login */
.log{height:100%;min-height:645px}
.log:before,
.log:after{content:'';display:block; background:url('../../resources/images/common/bg_log.png') no-repeat 0 0;background-size:100%; position:absolute}
.log:before{width:488px;height:401px;top:318px;left:3.51%}
.log:after{width:320px;height:263px;top:-30px;right:7.57%}
.log .content{height:100%; display:flex;align-items:center;justify-content:center;flex-direction:column; position:relative;z-index:1}
.log .content:before,
.log .content:after{content:'';display:block; background-size:100% !important; position:absolute;bottom:0;}
.log .content:before{width:280px;height:480px; background:url('../../resources/images/app/bg_character2.png') no-repeat 0 0; left:0;transition:all 0.1s ease-in;}
.log .content:after{width:360px;height:480px; background:url('../../resources/images/app/bg_character3.png') no-repeat 0 0; right:0;transition:all 0.1s ease-in;}
.log .content.idpw:before{display:none}
.log .content.idpw:after{width:416px;height:580px; background:url('../../resources/images/app/bg_character.png') no-repeat 0 0; right:0}
.log .content >p{/*padding-top:110px;*/ font-size:20px;color:#9e9e9e;font-weight:700}
.log .content >h1{margin:16px auto 0; width:404px;height:46px; text-indent:-9999px; background:url('../../resources/images/common/tit_log.png') no-repeat 0 0;background-size:100%}
.log .content >.log-wrap{margin:40px auto 0;width:440px; border-radius:10px;background-color:#fff;box-shadow:3px 3px 5px #dbdbdb;}
.log .content >.log-wrap >h2{margin:30px 0 8px; font-size:20px;font-weight:700;color:#535353;}
.log .content >.log-wrap >h2:first-child{margin-top:0}

.log .content >.log-wrap .tab-wrap ul:after{content:'';display:block;clear:both}
.log .content >.log-wrap .tab-wrap li{float:left;width:50%; text-align:center;}
.log .content >.log-wrap .tab-wrap li a{padding:15px 0;font-size:16px;color:#fff;font-weight:700; border-radius:10px 10px 0 0;background-color:#9e9e9e; display:block}
.log .content >.log-wrap .tab-wrap li.ui-tabs-active a{color:#535353;background-color:#fff;}
.log .content >.log-wrap .tab-wrap >div{padding:35px 40px}
.log .content >.log-wrap .tab-wrap >div.idpw-wrap{padding:45px 40px 35px}
.log .content >.log-wrap .tab-wrap >div .inp-check{margin-top:20px}
.log .content >.log-wrap input{margin-top:10px;width:100%;height:50px; font-size:16px;color:#9e9e9e;line-height:50px;text-indent:10px; border-radius:5px;border:solid 1px #dbdbdb;background-color:#fff}
.log .content >.log-wrap input:first-child{margin-top:0}
.log .content >.log-wrap input::placeholder{color:#9e9e9e;}
.log .content >.log-wrap .search{position:relative;}
.log .content >.log-wrap .search >input{padding-right:50px;}
.log .content >.log-wrap .search >.btns{padding:10px;width:50px;height:50px; text-indent:-9999px; background:url('../../resources/images/common/icon_search.png') no-repeat center;background-size:22px; position:absolute;top:calc(50% - 25px);right:0; margin-top: 0px;}
.log .content >.log-wrap .select-wrap{margin-top:10px;}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button{margin:0 0 0 7px; text-align:left; border-radius:5px;border:solid 1px #dbdbdb}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button .ui-selectmenu-text{padding-left:10px; font-size:16px;color:#9e9e9e;font-weight:400;}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button .ui-selectmenu-icon{width:24px;}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button.ui-selectmenu-button-closed .ui-selectmenu-icon{background:url('../../resources/images/common/btn_dropdown2.png') no-repeat 0 center;background-size:24px 48px}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button.ui-selectmenu-button-open .ui-selectmenu-icon{background:url('../../resources/images/common/btn_dropup2.png') no-repeat 0 center;background-size:24px 48px}
.log .content >.log-wrap .select-wrap .ui-selectmenu-button.ui-button:focus{border-color:#f15c43;}
.log .content >.log-wrap .select-wrap >.selectmenu.year +span{width:89px; margin-left:0;}
.log .content >.log-wrap .select-wrap >.selectmenu.grade +span{width:70px;}
.log .content >.log-wrap .select-wrap >.selectmenu.group +span{width:60px;}
.log .content >.log-wrap .select-wrap >.selectmenu.my +span{width:110px;}
.log .content >.log-wrap .tab-wrap >div >input +button{margin-top:25px;}
.log .content >.log-wrap .tab-wrap >div .inp-check +button{margin-top:36px;}
.log .content >.log-wrap button{margin-top:8px;width:100%;height:50px; font-size:20px;color:#fff;line-height:50px;font-weight:800; border-radius:5px;}
.log .content >.log-wrap button.login{background-color:#ffbc23}
.log .content >.log-wrap button.join{background-color:#636363}
.log .content >.log-wrap button.whale{background-color:#59d2c3}
.log .content >.log-wrap button.whale img{width:26px;margin-right:8px; vertical-align:middle;}
.log .content >.btn-wrap{margin:16px auto 0; width:360px}
.log .content >.btn-wrap .btn-trial{width:100%;height:70px;padding-top:23px;font-size:22px;text-align:center;background-image:url('../../resources/images/common/icon_trial.png'), url('../../resources/images/common/icon_tiral_underbar.png');background-position:46px 4px, 109px 54px;background-size:59px 61px, 159px 15px;background-repeat:no-repeat, no-repeat;display:block}
.log .content >.btn-wrap .btn-search{margin-top:10px;width:100%;height:70px; text-indent:-9999px; background:url('../../resources/images/app/btn_smartall.png') no-repeat 0 0;background-size:100% 100%; display:block}

.log .content.whale:before{display:none}
.log .content.whale:after{width:416px;height:580px; background:url('../../resources/images/app/bg_character4.png') no-repeat 0 0; right:0}
.log .content.whale >.log-wrap{padding:40px;}
.log .content.whale >.log-wrap h2 +input{margin-top:0}
.log .content.whale >.log-wrap input +button{margin-top:40px;}

/* main */
.main header{padding:8px 20px 12px;height:70px; background-color:#fff;position:relative}
.main header:after{content:'';display:block;clear:both}
.main header h1{width:155px;height:50px; text-indent:-9999px; background:url('../../resources/images/common/logo.png') no-repeat 0 0;background-size:100%; float:left}
.main header .util{padding:5px 0;float:right}
.main header .util p{padding-left:12px; font-size:16px; vertical-align:middle;display:inline-block;position:relative}
.main header .util p:before{content:'';display:block; width:6px;height:6px; border-radius:100%;background-color:#535353; position:absolute;top:calc(50% - 5px);left:0}
.main header .util button{margin-left:12px;padding:0 12px 0 9px;min-width:120px;height:40px; font-size:18px;border:solid 1px #ddd;border-radius:20px; display:inline-block}
.main header .util .btn-guide{background-color:#dbdbdb}
.main header .util .btn-guide:before{content:'';display:inline-block; margin-right:5px;width:27px;height:26px; vertical-align:middle;background:url('../../resources/images/app/icon_question.png') no-repeat 0 0;background-size:100%}

.main .content .tab-head{border-bottom:solid 1px #eee7d9;background-color:#fff}
.main .content .tab-head ul{margin:0 auto;padding:0 90px}
.main .content .tab-head ul:after{content:'';display:block;clear:both}
.main .content .tab-head ul li{width:50%; text-align:center; float:left}
.main .content .tab-head ul li:first-child{border-right:solid 1px #eee7d9}
.main .content .tab-head ul li a{padding:8px 0 3px; font-size:22px;color:#9e9e9e;line-height:44px;font-weight:800; border-bottom:solid 5px transparent; display:block}
.main .content .tab-head ul li.ui-tabs-active a{color:#535353; border-color:#535353}
.main .content .tab-head ul li.ui-tabs-active a:before{content:'';display:inline-block; width:44px;height:44px; vertical-align:middle}
.main .content .tab-head ul li:nth-child(1).ui-tabs-active a:before{background:url('../../resources/images/app/icon_tab_study.png') no-repeat 0 0;background-size:44px}
.main .content .tab-head ul li:nth-child(2).ui-tabs-active a:before{background:url('../../resources/images/app/icon_tab_note.png') no-repeat 0 0;background-size:44px}
.main .content .tab-head ul li:focus{outline:2px solid #f15c43}
.main .content .gototop{width:90px;height:90px; text-indent:-9999px; background:url('../../resources/images/common/btn_top.png') no-repeat 0 0;background-size:100%; position:fixed;bottom:-100px;right:3px}
.main .content .gotosearch{padding-top:85px;width:90px; font-size:14px;color:#383735;font-weight:800;text-align:center;word-break:keep-all; background:url('../../resources/images/common/btn_smartall2.png') no-repeat 0 0;background-size:100%; position:fixed;bottom:10px;right:3px}
.main .content .study,
.main .content .note{margin:0 auto;padding:0 90px 23px;max-width:1280px}

.main .study .control-wrap{padding:20px 0 17px; background:url('../../resources/images/app/img_study_character.png') no-repeat right bottom;background-size:370px 120px}
.main .study .control-wrap h2{margin-top:60px; font-size:30px;color:#9e9e9e}
.main .study .control-wrap h2 em{margin-left:7px; color:#535353;font-weight:800}
.main .control-wrap .selectmenu.grade +span{width:130px}
.main .control-wrap .selectmenu.course +span{width:280px}
.main .control-wrap .selectmenu.detail +span{width:600px}
.main .study .list{border:solid 1px #eee7d9;border-radius:10px;background-color:#fff}
.main .study .list li{border-top:solid 1px #eee7d9}
.main .study .list li:first-child{border-top:0}
.main .study .list li a{padding:32px 20px; display:flex;align-items:center;justify-content:center}
.main .study .list li a{display:block \9} /* _hack ie9,10 */
.main .study .list li a strong{width:510px; font-size:20px;font-weight:800; flex-grow:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.main .study .list li a span{width:120px; font-size:14px;color:#9e9e9e;font-weight:800;text-align:right; display:inline-block}
.main .study .list li a >p{margin-left:24px;padding:15px 0 13px; font-size:18px;font-weight:800;text-align:center; border-radius:28px;display:inline-block}
.main .study .list li a >p em{font-size:24px;text-align:right;font-weight:800; vertical-align:middle; display:inline-block}
.main .study .list li .course{width:200px; color:#9e9e9e; background-color:#faf8f3}
.main .study .list li .course em{margin-left:10px;width:70px; color:#f15c43}
.main .study .list li .completeness{width:170px; color:#fff; background-color:#535353}
.main .study .list li .completeness em{width:80px; color:#fff}
.main .study .list li .complet{background-color:#f15c43}
.main .study .list li.present a{padding:27px 15px; border:solid 5px #59d2c3;position:relative}

.main .note .control-wrap{padding-top:20px}
.main .note .cont .comment-wrap{padding-top:24px; text-align:center}
.main .note .cont .comment-wrap .comment{padding:20px 30px 20px 238px; border-radius:10px;background-color:#ffc104;display:inline-block; position:relative}
.main .note .cont .comment-wrap .comment:before{content:'';display:block; width:0;height:0; border-right:9px solid transparent;border-top:13px solid #ffc104;border-left:9px solid transparent; position:absolute;top:100%;left:calc(50% - 9px)}
.main .note .cont .comment-wrap .comment h2{padding-left:60px; font-size:28px;color:#535353;line-height:50px;font-weight:800; background:url('../../resources/images/app/img_note_character.png') no-repeat 0 0;background-size:50px;position:absolute;top:calc(50% - 25px);left:15px}
.main .note .cont .comment-wrap .comment p{min-height:40px; font-size:15px;color:#fff;line-height:1.4;font-weight:800;text-align:justify;word-break:keep-all; display:flex;align-items:center}
.main .note .cont .mychart-wrap{margin-top:38px}
.main .note .cont .mychart-wrap:after{content:'';display:block;clear:both}
.main .note .cont .mychart-wrap >div{width:50%; text-align:center; float:left}
.main .note .cont .mychart-wrap >div h3{font-size:22px;font-weight:800}
.main .note .cont .mychart-wrap >div h3 p{margin-top:4px; font-size:14px;font-weight:700}
.main .note .cont .mychart-wrap .incorrect-wrap h3{margin-bottom:22px}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect{margin:0 auto;width:220px;height:220px; position:relative}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .total{font-size:20px;font-weight:800; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect >div{padding:15px 12px; font-size:16px;line-height:1.4;font-weight:800; border:solid 1px #efe9dc;border-radius:10px;background-color:#fff; position:absolute}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect >div:before{content:'';display:block; width:18px;height:24px; position:absolute;top:50%;transform:translate(0, -50%)}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag0{color:#59d2c3; left:-113px}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag0:before{background:url('../../resources/images/app/bg_arr_left.png') no-repeat 0 0;background-size:100%;right:-18px}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag1{color:#fc7e6d; right:-113px}
.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag1:before{background:url('../../resources/images/app/bg_arr_right.png') no-repeat 0 0;background-size:100%;left:-18px}
.main .note .cont .mychart-wrap .level-wrap h3{margin-bottom:4px}
.main .note .cont .mychart-wrap .level-wrap{border-left:solid 1px #c7bfac; position:relative}
.main .note .cont .mychart-wrap .level-wrap >div{display:inline-block}
.main .note .cont .mychart-wrap .level-wrap >div >div{width:230px;height:230px; position:relative}
.main .note .cont .mychart-wrap .level-wrap >div >div text {font-size:16px;font-weight:800;text-anchor:middle;dominant-baseline:middle;}
.main .note .cont .mychart-wrap .level-wrap >div >div .tit{font-size:20px;font-weight:800; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.main .note .cont .mychart-wrap .level-wrap >div .tag span{margin-left:10px;padding-left:17px; font-size:16px;line-height:1;font-weight:700; display:inline-block;position:relative}
.main .note .cont .mychart-wrap .level-wrap >div .tag span:before{content:'';display:block; width:12px;height:12px; border-radius:100%; position:absolute;top:calc(50% - 6px);left:0;box-sizing:border-box}
.main .note .cont .mychart-wrap .level-wrap >div .tag span:first-child{margin-left:0}
.main .note .cont .mychart-wrap .level-wrap .correct .tag span:nth-child(1):before{background-color:#00b49d}
.main .note .cont .mychart-wrap .level-wrap .correct .tag span:nth-child(2):before{background-color:#59d2c3}
.main .note .cont .mychart-wrap .level-wrap .correct .tag span:nth-child(3):before{background-color:#c7eee9;border:solid 1px #535353}
.main .note .cont .mychart-wrap .level-wrap .wrong .tag span:nth-child(1):before{background-color:#f15c43}
.main .note .cont .mychart-wrap .level-wrap .wrong .tag span:nth-child(2):before{background-color:#fc7e6d}
.main .note .cont .mychart-wrap .level-wrap .wrong .tag span:nth-child(3):before{background-color:#ffb4aa;border:solid 1px #535353}
.main .note .cont .mychart-wrap .level-wrap .loading{width:502px;height:235px; text-indent:-9999px; background:url('../../resources/images/app/img_level_loading.png') no-repeat 0 0;background-size:100%; position:absolute;top:64px;left:19px}
.main .note .cont.no-data{padding-top:184px; font-size:28px;color:#9e9e9e;text-align:center}
.main .note .cont .board-wrap{margin-top:45px;padding:20px 20px 50px; border:solid 1px #c7bfac;border-radius:10px;background-color:#f5f2eb}
.main .note .cont .board-wrap >div{display:flex;justify-content:space-between;align-items:center;}
.main .note .cont .board-wrap div >div{padding:24px;width:340px;height:134px; font-size:24px;line-height:1.3;color:#fff;font-weight:800; border-radius:5px; display:inline-block;position:relative}
.main .note .cont .board-wrap div >div button{padding-top:2px;width:120px;height:40px; font-size:18px;font-weight:800; border-radius:20px;background-color:#fff;box-shadow:0 5px 0 #dbdbdb; position:absolute;bottom:20px;right:20px}
.main .note .cont .board-wrap div .not-right{background-color:#5167af}
.main .note .cont .board-wrap div .not-right button{color:#5167af}
.main .note .cont .board-wrap div .not-know{background-color:#f15c43}
.main .note .cont .board-wrap div .not-know button{color:#f15c43}
.main .note .cont .board-wrap div .not-guess{background-color:#9e9e9e}
.main .note .cont .board-wrap div .not-guess button{color:#9e9e9e}
.main .note .cont .board-wrap >strong{margin-top:40px; font-size:18px;font-weight:800; display:inline-block}
.main .note .cont .board-wrap >div +strong{margin-top:56px}
.main .note .cont .board-wrap >ol{margin-top:20px}
.main .note .cont .board-wrap >ol:after{content:'';display:block;clear:both}
.main .note .cont .board-wrap >ol li{margin:0 15px;padding-top:3px;width:50px;height:50px; font-size:22px;line-height:50px;font-weight:800;text-align:center; border-radius:25px;border:solid 1px #e8e6e5;background-color:#fff; float:left;display:flex;align-items:center;justify-content:center; position:relative}
.main .note .cont .board-wrap >ol li:after{content:'';display:block; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.main .note .cont .board-wrap >ol li.img_mark_02:after{width:44px;height:44px; background:url('../../resources/images/common/img_mark_02.png') no-repeat 0 0;background-size:100%}
.main .note .cont .board-wrap >ol li.img_mark_03:after{width:50px;height:50px; background:url('../../resources/images/common/img_mark_03.png') no-repeat 0 0;background-size:100%}
.main .note .cont .board-wrap >ol li.img_mark_04:after{width:52px;height:52px; background:url('../../resources/images/common/img_mark_04.png') no-repeat 0 0;background-size:100%}
.main .note .cont .board-wrap >ol li.img_mark_05:after{width:44px;height:44px; background:url('../../resources/images/common/img_mark_05.png') no-repeat 0 0;background-size:100%}
.main .note .cont .board-wrap >ol li.img_mark_06:after{width:50px;height:50px; background:url('../../resources/images/common/img_mark_06.png') no-repeat 0 0;background-size:100%}
.main .note .cont .board-wrap >ol li.not-right{color:#fff;background-color:#5167af}
.main .note .cont .board-wrap >ol li.not-know{color:#fff;background-color:#fc7e6d}
.main .note .cont .board-wrap >ol li.not-guess{color:#fff;background-color:#9e9e9e}
.main .note .cont .noti{margin-top:25px;padding:9px 0; font-size:15px;font-weight:700;text-align:center; border-radius:10px;background-color:#f5f2eb}
.main .note .cont .noti span{margin-right:10px;width:34px;height:39px; background:url('../../resources/images/app/icon_watch.png') no-repeat 0 0;background-size:100%;vertical-align:middle;display:inline-block}
.main .note .ai-author.no-data{margin-top:24px;height:180px; font-size:28px;line-height:180px;color:#9e9e9e;text-align:center; border-radius:10px;background-color:#f5f2eb}
.main .no-datawrap{padding-top:253px; font-size:28px;color:#9e9e9e;text-align:center}

/* detail */
.detail{display:none}
.detail header{padding:20px 20px 20px 82px;height:72px; background-color:#f3efe7;position:relative}
.detail header h1{font-size:24px;line-height:32px;font-weight:800;color:#383735}
.detail header .btn-back{width:72px;height:72px; text-indent:-9999px; background:url('../../resources/images/app/btn_back.png') no-repeat center;background-size:26px 25px; position:absolute;top:0;left:0}
.detail .content{margin:0 auto;padding:80px 120px 40px;max-width:1280px}
.detail .content >div{border:solid 1px #eee7d9;border-radius:10px;background-color:#fff}
.detail .content .detail-info{padding:0 350px 0 50px;height:140px; background:url('../../resources/images/app/img_detail_character.png') no-repeat calc(100% - 160px) 0;background-size:200px 140px; position:relative;display:flex;align-items:center}
.detail .content .detail-info{padding-top:50px \9;display:block \9} /* _hack ie9,10 */
.detail .content .detail-info h2{font-size:28px;font-weight:800}
.detail .content .detail-info .chart{width:120px;height:120px; position:absolute;top:10px;right:18px}
.detail .content .detail-info .chart .info{width:100%; font-size:19px;color:#808080;font-weight:800;text-align:center; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.detail .content .detail-info .chart .info em{font-size:32px;line-height:1.1;color:#535353; display:block}
.detail .content .detail-list{width:100%; display:table}
.detail .content .detail-list em{padding-left:50px;width:300px; font-size:28px;color:#fff;font-weight:800;vertical-align:middle; border-top:solid 1px #eee7d9;display:table-cell}
.detail .content .detail-list.list01 em{background:#f15c43 url('../../resources/images/app/bg_detail1.png') no-repeat right bottom;background-size:auto 100%}
.detail .content .detail-list.list02 em{background:#f15c43 url('../../resources/images/app/bg_detail2.png') no-repeat right bottom;background-size:auto 100%}
.detail .content .detail-list ul{display:table-cell}
.detail .content .detail-list li{border-top:solid 1px #eee7d9}
.detail .content .detail-list li a{padding:13px 55px 13px 50px; font-size:24px;line-height:34px;color:#636363;font-weight:800; display:block}
.detail .content .detail-list li a:after{content:'';display:block;clear:both}
.detail .content .detail-list li.sub a{padding-left:80px;background:url('../../resources/images/app/icon_arrow.png') no-repeat 50px 18px;background-size:18px 17px}
.detail .content .detail-list li a span{width:100px;height:34px; font-size:16px;color:#9e9e9e;font-weight:800;text-align:center; border-radius:17px;background-color:#dbdbdb; display:block;float:right;position:relative}
.detail .content .detail-list li a span.finish{padding:0 17px 0 30px; font-size:15px;color:#fff; background-color:#59d2c3}
.detail .content .detail-list li a span.ing{padding:0 17px 0 30px; color:#535353; background-color:#ffce56}
.detail .content .detail-list li a span.finish:before,
.detail .content .detail-list li a span.ing:before{content:'';display:inline-block; width:20px;height:20px; position:absolute;top:7px;left:10px}
.detail .content .detail-list li a span.finish:before{background:url('../../resources/images/app/icon_finish.png') no-repeat 0 0;background-size:100%}
.detail .content .detail-list li a span.ing:before{background:url('../../resources/images/app/icon_ing.png') no-repeat 0 0;background-size:100%}
.detail .content >div:nth-child(2){margin-top:30px}
.detail .content >div:nth-child(2) em{font-size:28px;color:#535353; background-color:#f3efe7;border-top:0}
.detail .content >div:nth-child(2) li:first-child{border-top:0}
.detail .video-wrap{position:fixed;top:0;bottom:0;left:0;right:0;z-index:-1;display:none}
.detail .video-wrap .dimmed{width:100%;height:100%; background:#000;opacity:.5;filter:alpha(opacity=50); position:absolute;top:0;left:0}
.detail .video-wrap .video-cont{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.detail .video-wrap .video-cont .btn-close{width:60px;height:60px; text-indent:-9999px; background:url('../../resources/images/app/btn_close2.png') no-repeat 0 0;background-size:100%; position:absolute;top:20px;left:20px;z-index:1}

.videoapp .video-wrap{height:100%}
.videoapp .video-wrap .btn-close{width:60px;height:60px; text-indent:-9999px; background:url('../../resources/images/app/btn_close2.png') no-repeat 0 0;background-size:100%; position:absolute;top:20px;left:20px;z-index:1}

/* layer popup */
.wrap-layer-popup{display:none; position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000; overflow:auto}
.wrap-layer-popup .dimmed{width:100%;height:100%; background:#000;opacity:.75;filter:alpha(opacity=75); position:absolute;top:0;left:0}
.wrap-layer-popup .loop{height:0;width:0;position:absolute;overflow:hidden;clip:rect(1px 1px 1px 1px)}
.pop-layer{width:600px;height:auto; border-radius:20px;background-color:#f9f3e6; position:absolute;top:50%;left:50%;z-index:10;display:none}
.pop-layer .head{padding:0 50px; border-radius:20px 20px 0 0;border-bottom:solid 1px #ddd;background-color:#fff; position:relative}
.pop-layer .head h1{font-size:20px;line-height:72px;color:#757575;font-weight:800;text-align:center}
.pop-layer .head .btn-close{width:24px;height:24px; text-indent:-9999px; background:url('../../resources/images/common/btn_close.png') no-repeat 0 0;background-size:24px;display:inline-block; position:absolute;top:23px;left:24px}
.pop-layer .contents{padding:20px; text-align:center}
.pop-layer .contents .cont{padding:30px 20px;min-height:80px; font-size:20px;line-height:1.5;font-weight:800;word-break:keep-all;}
.pop-layer .contents .btn-wrap{margin-top:20px}
.pop-layer .contents .btn-wrap button{margin:0 3px;width:204px;height:48px; font-size:20px;color:#f15c43;line-height:48px;font-weight:800; border-radius:24px;border:solid 1px #f6f6f6;background-color:#fff}
.pop-layer .contents .btn-wrap .btn-orange{color:#fff;border:solid 1px #f15c43;background-color:#f15c43}
.pop-layer .contents.change-pw{padding:42px 52px 20px}
.pop-layer .contents.change-pw .tit{font-size:20px;font-weight:700;}
.pop-layer .contents.change-pw .tit >em{color:#f15c43;}
.pop-layer .contents.change-pw .tit p +span{margin-top:4px; font-size:14px;color:#f15c43;font-weight:800; display:inline-block}
.pop-layer .contents.change-pw .tit +.inp{margin-top:40px} 
.pop-layer .contents.change-pw .inp{margin-top:20px}
.pop-layer .contents.change-pw .inp label{margin-right:16px;width:200px; font-size:20px;font-weight:700; text-align:right;vertical-align:middle;display:inline-block}
.pop-layer .contents.change-pw .inp label span{margin-top:4px; font-size:14px;color:#f15c43;font-weight:800; display:block}
.pop-layer .contents.change-pw .inp input{width:280px;height:66px; font-size:20px;border-radius:10px}
.pop-layer .contents.change-pw .btn-wrap{margin-top:50px}
.pop-layer.roundup{width:465px}

.pop-guide{width:100%; border-radius:0;background-color:transparent}
.pop-guide .btn-close{width:60px;height:60px; text-indent:-9999px; background:url('../../resources/images/app/btn_close3.png') no-repeat 0 0;background-size:100%; position:absolute;top:20px;left:20px;z-index:10}
.pop-guide .swiper-container .swiper-slide{overflow-y:auto;text-align:center;}
.pop-guide .swiper-container .swiper-slide img{width:100%;max-width:1280px}
.pop-guide .swiper-container >.swiper-pagination{bottom:35px}
.pop-guide .swiper-container >.swiper-pagination .swiper-pagination-bullet{margin:0 10px;width:16px;height:16px; background-color:#dbdbdb;opacity:1}
.pop-guide .swiper-container >.swiper-pagination .swiper-pagination-bullet-active{background-color:#f15c43}
/* schoolSearch */
.pop-layer .schoolSearch .cont{text-align:center;}
.pop-layer .schoolSearch .inp input{width:440px;height:66px; font-size:20px;font-weight:700;border-radius:10px}
.pop-layer .schoolSearch .inp +p{margin-top:10px; font-size:18px;color:#9e9e9e;}
.pop-layer .schoolSearch .btn-wrap{margin-top:0;}
.pop-layer .schoolSearch .result-wrap{margin-top:40px; text-align:left;}
.pop-layer .schoolSearch .result-wrap .result{font-size:20px;font-weight:700;}
.pop-layer .schoolSearch .result-wrap .result >em{color:#f15c43;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap{max-height:240px;overflow-y:auto;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap ul{margin:15px 10px 0 0;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap li{padding:15px 150px 15px 0; border-top:solid 1px #e0dcd5;position:relative;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap li:after{content:'';display:block;clear:both;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap li strong{width:400px; font-size:18px;font-weight:800;}
.pop-layer .schoolSearch .result-wrap .scroll-wrap li p{margin-top:7px; width:400px; font-size:18px;color:#9e9e9e;font-weight:700; display:inline-block}
.pop-layer .schoolSearch .result-wrap .scroll-wrap li button{width:140px;height:48px; font-size:20px;color:#f15c43;font-weight:700; border-radius:24px;background-color:#fff; position:absolute;top:50%;right:0;margin-top:-24px;}
.pop-layer .schoolSearch .result-wrap.no-data{padding-top:40px;height:275px; font-size:20px;font-weight:700;text-align:center; border-top:solid 1px #e0dcd5; background:url('../../resources/images/app/icon_school.png') no-repeat center 100px;background-size:140px;}
/* popup Whale */
.pop-layer.whale{width:620px; border-radius:20px;background-color:#fff;}
.pop-layer.whale .contents{padding:35px 0 50px;}
.pop-layer.whale .img{display:inline-block;width:298px;}
.pop-layer.whale .img img{width:100%;}
.pop-layer.whale .tit{display:block;margin-top:35px; font-size:24px;font-weight:800;color:#535353;}
.pop-layer.whale .desc{margin-top:18px; font-size:20px;line-height:1.5;color:#9e9e9e;}
.pop-layer.whale .btn-ok{width:200px;margin-top:35px;padding:15px 0 12px; border-radius:25px;background-color:#58d0c1; font-size:20px;font-weight:800;color:#fff;}
.pop-layer.whale .recomm{margin-top:25px; font-size:18px;color:#9e9e9e;}
.pop-layer.whale .recomm a{margin-left:5px; border-bottom: solid 1px #58d0c1; font-weight:700;color:#58d0c1;}
/* 인포 추가 */
#wrap.information {height: auto; background-color: #faf8f3;}
.information::before,
.information::after {content: ''; display: block; background: url(../../resources/images/common/bg_log.png) no-repeat 0 0; background-size: 100%; position: absolute;}
.information::before {width: 488px; height: 401px; top: 318px; left: 3.51%;}
.information::after {width: 320px; height: 263px; top: -30px; right: 7.57%;}
.information section.container {max-width:950px; margin: 0 auto; background-color: transparent; z-index:1;}
.information section.container .content{padding:50px 0 80px}
.information .sec{position:relative; margin-top:40px;}
.information .sec >h3{padding-left:25px; font-size:20px; background:url('../../resources/images/join/bul_check.png') no-repeat 0 center;background-size:17px 11px;}
.information .sec >.version_select{position:absolute;top:-8px;right:0;}
.information .sec >.version_select select{width:230px;height:40px; border:solid 1px #d0d0d0; text-align:center}
.information .sec .policy-wrap{margin-top:20px;height:275px; overflow-y:scroll;background: #fff; border:solid 1px #d0d0d0;border-top:solid 2px #020202; padding: 20px; line-height: 1.5;}
/* 이용약관 추가 */
.policy-wrap{font-size:14px;color:#505050;word-break:keep-all;}
.policy-wrap h2{margin-top:30px; font-size:18px;font-weight:600;color:#333;}
.policy-wrap h3{margin-top:20px; font-size:16px;color:#000;font-weight:600;}
.policy-wrap h2:first-child,
.policy-wrap h3:first-child{margin-top:0;}
.policy-wrap h4{margin-top:40px; font-size:16px;color:#000;font-weight:600;}
.policy-wrap h3 +p{margin-top:10px;}
.policy-wrap div{margin-top:20px; font-size:15px;color:#000;}
.policy-wrap div:first-child{margin-top:0;}
.policy-wrap ol{margin-top:10px;}
.policy-wrap li ol{margin-top:5px;}
.policy-wrap li{margin-top:5px; padding-left:20px;text-indent:-20px;}
.policy-wrap li li{padding-left:17px;text-indent:-17px;}
.policy-wrap li li.sub-li { padding-left: 0px; text-indent: 0px; }
.policy-wrap strong {color: #000; font-weight: 600;}
.policy-wrap table{margin-top:5px;width:100%; border-bottom:solid 1px #ddd;border-right:solid 1px #ddd;}
.policy-wrap table th{padding:8px 10px 7px; border-top:solid 1px #ddd;border-left:solid 1px #ddd; background-color:#eee;}
.policy-wrap table td{padding:8px 10px 7px; border-top:solid 1px #ddd;border-left:solid 1px #ddd;}
.policy-wrap table +p{margin-top:5px; font-size:12px;text-indent:0;}
.policy-wrap ol +p{margin-top:5px; font-size:12px; padding-left:12px;}
.policy-wrap .align-c{text-align:center;}

/* 210217 뒤로가기 버튼을 위한 스타일 추가 */
.information.detail {display: block;}
.information.detail header {background: none;}
.information.detail .content >div {border: 0; background: none; border-radius: 0;}
.detail .content >div:nth-child(2) {margin-top: 40px;}
.detail .content >div:nth-child(3) {margin-top: 40px;}

/* 210126 풋터추가 */
#footer	{width:100%;height:140px;border-top:1px solid #d8d8d8; }
#footerArea	{ position:relative;max-width:1180px;margin:0 auto;padding:0 0 0 160px;box-sizing:border-box; }
#footerArea p.foot-logo	{ position:absolute;left:0;top:32px; }
#footerArea p.foot_customer	{ position:absolute;right:0;top:32px; }
#footerArea > ul	{ padding:35px 0 10px; }
#footerArea > ul > li	{ display:inline-block;margin-right:-4px;padding:0 15px;background:url(../../resources/images/common/bg_divi2.png) no-repeat 0 50%; }
#footerArea > ul > li>a	{ font-size:15px;color:#626262; }
#footerArea > ul > li:first-child	{ background:none;padding-left:0; font-weight:700;}
#footerArea address,
#footerArea p.copy	{ font-size:13px;line-height:19px;color:#a1a1a1;font-style:normal; }
#footerArea .familySite {position: absolute; bottom: 0; right: 0; background:  #f5f6f8 url(../../resources/images/common/blt_arwDown.gif) no-repeat 96% 52%;}
#footerArea .familySite a {display: block; border: 1px solid #ccc; padding: 10px 80px 10px 60px;}

/* 210224, 로그인 학생 이름 리스트 스타일 추가 */
#myNm {border:0;}
/* 210224, mCustomScrollbar 커스텀 */
.mCSB_scrollTools .mCSB_draggerContainer {bottom: 0; right: -2px;}
.mCustomScrollBox {border: 1px solid #eee7d9;}
.mCSB_inside > .mCSB_container {margin-right: 0;}
.mCSB_scrollTools {width: 12px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {-webkit-border-radius: 0; border-radius: 0;}
.mCSB_scrollTools .mCSB_draggerRail {-webkit-border-radius: 0; border-radius: 0;}

@media all and (max-width:1280px) {
	/* selectmenu */
	.ui-selectmenu-button.ui-button{margin-right:.625vw;height:3.75vw; border-width:.1562vw;border-radius:1.875vw;}
	.ui-selectmenu-button.ui-button .ui-selectmenu-text{padding-left:1.5625vw;font-size:1.4062vw;line-height:3.75vw;}
	.ui-selectmenu-button.ui-button .ui-selectmenu-icon{width:3.75vw;height:3.75vw}
	.ui-selectmenu-button.ui-button.ui-selectmenu-button-closed .ui-selectmenu-icon{background-size:3.75vw}
	.ui-selectmenu-button.ui-button.ui-selectmenu-button-open .ui-selectmenu-icon{background-size:3.75vw}
	.ui-selectmenu-menu ul{border-width:.078vw;}
	.ui-selectmenu-menu ul li div.ui-menu-item-wrapper{font-size:1.3062vw;line-height:3.9062vw; text-align: center;}
	/* .inp-radio, .inp-check */
	.inp-check input + label{padding-left:2.1875vw;font-size:1.25vw;line-height:1.5625vw; background-size:1.5625vw;}

	.log .content:before{width:21.875vw;height:37.5vw;}
	.log .content:after{width:28.125vw;height:37.5vw;}
	.log .content.idpw:after{width:32.5vw;height:45.3125vw;}
	/* main */
	.main header{padding:.625vw 1.5625vw .9375vw;height:5.46875vw;}
	.main header h1{width:12.1093vw;height:3.9063vw;}
	.main header .util{padding:.3906vw 0;}
	.main header .util p{padding-left:.9375vw; font-size:1.25vw;}
	.main header .util p:before{width:.4687vw;height:.4687vw; top:calc(50% - .3906vw)}
	.main header .util button{margin-left:.9375vw;padding:0 .9375vw 0 .7032vw;min-width:9.375vw; font-size:1.4062vw;line-height:3.125vw;border-width:.078vw;border-radius:1.5625vw;}
	.main header .util .btn-guide:before{margin-right:.3906vw;width:2.1093vw;height:2.0312vw;}
	.main .content .tab-head{border-width:.078vw;}
	.main .content .tab-head ul{padding:0 7.0312vw}
	.main .content .tab-head ul li:first-child{border-width:.078vw;}
	.main .content .tab-head ul li a{padding:.625vw 0 .2343vw; font-size:1.7187vw;line-height:3.4375vw; border-width:.3906vw;}
	.main .content .tab-head ul li.ui-tabs-active a:before{width:3.4375vw;height:3.4375vw}
	.main .content .tab-head ul li:nth-child(1).ui-tabs-active a:before,
	.main .content .tab-head ul li:nth-child(2).ui-tabs-active a:before{background-size:3.4375vw}
	.main .content .tab-head ul li:focus{outline:.1562vw solid #f15c43}
	.main .content .gototop{width:7.0312vw;height:7.0312vw; bottom:-7.8125vw;right:.2343vw}
	.main .content .gotosearch{padding-top:6.6406vw;width:7.0312vw; font-size:1.0937vw; bottom:.7812vw;right:.2343vw}
	.main .content .study, .main .content .note{padding:0 7.0312vw 1.7968vw;}

	.main .study .control-wrap{padding:1.5625vw 0 1.3281vw; background-size:28.9062vw 9.375vw}
	.main .study .control-wrap h2{margin-top:4.6875vw; font-size:2.3437vw;}
	.main .study .control-wrap h2 em{margin-left:.5468vw;}
	.main .control-wrap .selectmenu.grade +span{width:10.1562vw}
	.main .control-wrap .selectmenu.course +span{width:21.875vw}
	.main .control-wrap .selectmenu.detail +span{width:46.875vw}
	.main .study .list{border-width:.078vw;border-radius:.7812vw;}
	.main .study .list li{border-width:.078vw;}
	.main .study .list li a{padding:2.5vw 1.5625vw}
	.main .study .list li a strong{width:39.8437vw; font-size:1.5625vw;}
	.main .study .list li a span{width:9.375vw; font-size:1.0937vw}
	.main .study .list li a >p{margin-left:1.875vw;padding:1.1718vw 0 1.0156vw; font-size:1.4062vw;border-radius:2.1875vw;}
	.main .study .list li a >p em{font-size:1.875vw;}
	.main .study .list li .course{width:15.625vw;}
	.main .study .list li .course em{margin-left:.7812vw;width:5.4687vw;}
	.main .study .list li .completeness{width:13.2812vw;}
	.main .study .list li .completeness em{width:6.25vw;}
	.main .study .list li.present a{padding:2.1093vw 1.1718vw; border-width:.3906vw;}
	.main .note .control-wrap{padding-top:1.5625vw}
	.main .note .cont .comment-wrap{padding-top:1.875vw;}
	.main .note .cont .comment-wrap .comment{padding:1.5625vw 2.3437vw 1.5625vw 18.5937vw; border-radius:.7812vw}
	.main .note .cont .comment-wrap .comment:before{border-right:.70312vw solid transparent;border-top:1.0156vw solid #ffc104;border-left:.70312vw solid transparent; top:100%;left:calc(50% - .70312vw)}
	.main .note .cont .comment-wrap .comment h2{padding-left:4.6875vw; font-size:2.1875vw;line-height:3.9062vw; background-size:3.9062vw;top:calc(50% - 1.9531vw);left:1.1718vw}
	.main .note .cont .comment-wrap .comment p{min-height:3.125vw; font-size:1.1718vw;}
	.main .note .cont .mychart-wrap{margin-top:2.9687vw}
	.main .note .cont .mychart-wrap >div h3{font-size:1.7187vw;}
	.main .note .cont .mychart-wrap >div h3 p{margin-top:.3125vw; font-size:1.0937vw}
	.main .note .cont .mychart-wrap .incorrect-wrap h3{margin-bottom:1.7187vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect{width:17.1875vw;height:17.1875vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .total{font-size:1.5625vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect >div{padding:1.1718vw .9375vw; font-size:1.25vw; border-width:.078vw;border-radius:.7812vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect >div:before{width:1.4062vw;height:1.875vw;}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag0{left:-8.8282vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag0:before{right:-1.40625vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag1{right:-8.8282vw}
	.main .note .cont .mychart-wrap .incorrect-wrap .incorrect .tag1:before{left:-1.40625vw}
	.main .note .cont .mychart-wrap .level-wrap h3{margin-bottom:.3125vw}
	.main .note .cont .mychart-wrap .level-wrap{border-width:.078vw}
	.main .note .cont .mychart-wrap .level-wrap >div >div{width:17.9687vw;height:17.9687vw;}
	.main .note .cont .mychart-wrap .level-wrap >div >div text {font-size:1.25vw;}
	.main .note .cont .mychart-wrap .level-wrap >div >div .tit{font-size:1.5625vw;}
	.main .note .cont .mychart-wrap .level-wrap >div .tag span{margin-left:.7812vw;padding-left:1.328vw; font-size:1.25vw;}
	.main .note .cont .mychart-wrap .level-wrap >div .tag span:before{width:.9375vw;height:.9375vw; top:calc(50% - .4687vw)}
	.main .note .cont .mychart-wrap .level-wrap .correct .tag span:nth-child(3):before,
	.main .note .cont .mychart-wrap .level-wrap .wrong .tag span:nth-child(3):before{border-width:.0781vw}
	.main .note .cont .mychart-wrap .level-wrap .loading{width:39.2187vw;height:18.3593vw; top:5vw;left:1.4843vw}
	.main .note .cont.no-data{padding-top:14.375vw; font-size:2.1875vw}
	.main .note .cont .board-wrap{margin-top:3.5156vw;padding:1.5625vw 1.5625vw 3.9062vw; border-width:.0781vw;border-radius:.7812vw}
	.main .note .cont .board-wrap div >div{padding:1.875vw;width:26.5625vw;height:10.4687vw; font-size:1.875vw; border-radius:.3906vw}
	.main .note .cont .board-wrap div >div button{padding-top:.15625vw;width:9.375vw;height:3.125vw; font-size:1.40625vw;border-radius:1.5625vw;box-shadow:0 .3906vw 0 #dbdbdb;bottom:1.5625vw;right:1.5625vw}
	.main .note .cont .board-wrap >strong{margin-top:3.125vw; font-size:1.40625vw;}
	.main .note .cont .board-wrap >div +strong{margin-top:4.375vw}
	.main .note .cont .board-wrap >ol{margin-top:1.5625vw}
	.main .note .cont .board-wrap >ol li{margin:0 1.1718vw;padding-top:.2343vw;width:3.9062vw;height:3.9062vw; font-size:1.71875vw;line-height:3.9062vw; border-radius:1.9531vw;border-width:.078vw}
	.main .note .cont .board-wrap >ol li.img_mark_02:after{width:3.4375vw;height:3.4375vw;}
	.main .note .cont .board-wrap >ol li.img_mark_03:after{width:3.9062vw;height:3.9062vw;}
	.main .note .cont .board-wrap >ol li.img_mark_04:after{width:4.0625vw;height:4.0625vw;}
	.main .note .cont .board-wrap >ol li.img_mark_05:after{width:3.4375vw;height:3.4375vw;}
	.main .note .cont .board-wrap >ol li.img_mark_06:after{width:3.9062vw;height:3.9062vw;}
	.main .note .cont .noti{margin-top:1.9531vw;padding:.7031vw 0; font-size:1.1718vw; border-radius:.78125vw}
	.main .note .cont .noti span{margin-right:.78125vw;width:2.65625vw;height:3.0468vw}
	.main .note .ai-author.no-data{margin-top:1.875vw;height:14.0625vw; font-size:2.1875vw;line-height:14.0625vw; border-radius:.78125vw}
	.main .no-datawrap{padding-top:19.7656vw; font-size:2.1875vw}
	/* detail */
	.detail header{padding:1.5625vw 1.5625vw 1.5625vw 6.40625vw;height:5.625vw;}
	.detail header h1{font-size:1.875vw;line-height:2.5vw;}
	.detail header .btn-back{width:5.625vw;height:5.625vw; background-size:2.0312vw 1.9531vw;}
	.detail .content{padding:6.25vw 9.375vw 3.125vw}
	.detail .content >div{border-width:.0781vw;border-radius:.78125vw;}
	.detail .content .detail-info{padding:0 27.34375vw 0 3.9062vw;height:10.9375vw; background-size:15.625vw 10.9375vw;}
	.detail .content .detail-info h2{font-size:2.1875vw;}
	.detail .content .detail-info .chart{width:9.375vw;height:9.375vw;top:.7812vw;right:1.40625vw}
	.detail .content .detail-info .chart .info{font-size:1.4843vw;}
	.detail .content .detail-info .chart .info em{font-size:2.5vw;}
	.detail .content .detail-list em{padding-left:3.90625vw;width:23.4375vw; font-size:2.1875vw; border-width:.07812vw;}
	.detail .content .detail-list li{border-width:.07812vw;}
	.detail .content .detail-list li a{padding:1.0156vw 4.2968vw 1.0156vw 3.90625vw; font-size:1.875vw;line-height:2.6562vw;}
	.detail .content .detail-list li.sub a{padding-left:6.25vw;background-position:3.90625vw 1.4062vw;background-size:1.4062vw 1.32812vw}
	.detail .content .detail-list li a span{width:7.8125vw;height:2.65625vw; font-size:1.25vw; border-radius:1.32812vw}
	.detail .content .detail-list li a span.finish{padding:0 1.32812vw 0 2.34375vw; font-size:1.171875vw}
	.detail .content .detail-list li a span.ing{padding:0 1.32812vw 0 2.34375vw}
	.detail .content .detail-list li a span.finish:before,
	.detail .content .detail-list li a span.ing:before{width:1.5625vw;height:1.5625vw;top:.5468vw;left:.78125vw}
	.detail .content >div:nth-child(2){margin-top:2.34375vw}
	.detail .content >div:nth-child(2) em{font-size:2.1875vw}
	.detail .content >div:nth-child(2) li:first-child{border-top:0}
	.detail .video-wrap .video-cont .btn-close{width:4.6875vw;height:4.6875vw;top:1.5625vw;left:1.5625vw}

	.videoapp .video-wrap .btn-close{width:4.6875vw;height:4.6875vw;top:1.5625vw;left:1.5625vw}
	/* 210126 풋터추가 */
	#footer	{height:10.9375vw;border-width:.07812vw}
	#footerArea	{padding:0 0 0 12.5vw;}
	#footerArea p.foot-logo	{top:2.5vw}
	#footerArea p.foot-logo img{width:11.0937vw}
	#footerArea p.foot_customer	{top:2.5vw}
	#footerArea > ul{padding:2.7343vw 0 .7812vw;}
	#footerArea > ul > li{margin-right:-.3125vw;padding:0 1.1718vw;}
	#footerArea > ul > li>a{font-size:1.1718vw;}
	#footerArea address,
	#footerArea p.copy{font-size:1.0156vw;line-height:1.4843vw;}
	#footerArea .familySite a{border-width:.07812vw;padding:.78125vw 6.25vw .78125vw 4.6875vw;}
	/* layer popup */
	.pop-layer{width:46.875vw;border-radius:1.5625vw;}
	.pop-layer .head{padding:0 3.90625vw;border-radius:1.5625vw 1.5625vw 0 0;border-width:.07812vw}
	.pop-layer .head h1{font-size:1.5625vw;line-height:5.625vw}
	.pop-layer .head .btn-close{width:1.875vw;height:1.875vw;background-size:1.875vw;top:1.7968vw;left:1.875vw}
	.pop-layer .contents{padding:1.5625vw}
	.pop-layer .contents .cont{padding:2.34375vw 1.5625vw;min-height:6.25vw; font-size:1.5625vw;}
	.pop-layer .contents .btn-wrap{margin-top:1.5625vw}
	.pop-layer .contents .btn-wrap button{margin:0 .2343vw;width:15.9375vw;height:3.75vw; font-size:1.5625vw;line-height:3.75vw;border-radius:1.875vw;border-width:.07812vw}
	.pop-layer .contents .btn-wrap .btn-orange{border-width:.07812vw}

	.pop-layer .contents.change-pw{padding:3.2812vw 4.0625vw 1.5625vw}
	.pop-layer .contents.change-pw .tit{font-size:1.5625vw}
	.pop-layer .contents.change-pw .tit p +span{margin-top:.3125vw;font-size:1.09375vw}
	.pop-layer .contents.change-pw .tit +.inp{margin-top:3.125vw}
	.pop-layer .contents.change-pw .inp{margin-top:1.5625vw}
	.pop-layer .contents.change-pw .inp label{margin-right:1.25vw;width:15.625vw; font-size:1.5625vw}
	.pop-layer .contents.change-pw .inp label span{margin-top:.3125vw; font-size:1.09375vw}
	.pop-layer .contents.change-pw .inp input{width:21.875vw;height:5.15625vw; font-size:1.5625vw;border-radius:.78125vw}
	.pop-layer .contents.change-pw .btn-wrap{margin-top:3.90625vw}
	.pop-layer.roundup{width:36.328vw}

	.pop-guide{width:100%; border-radius:0}
	.pop-guide .btn-close{width:4.6875vw;height:4.6875vw; top:1.5625vw;left:1.5625vw}
	.pop-guide .swiper-container >.swiper-pagination{bottom:2.7343vw}
	.pop-guide .swiper-container >.swiper-pagination .swiper-pagination-bullet{margin:0 .78125vw;width:1.25vw;height:1.25vw;}

	/* schoolSearch */
	.pop-layer .schoolSearch .inp input{width:34.375vw;height:5.15625vw; font-size:1.5625vw;border-radius:.78125vw}
	.pop-layer .schoolSearch .inp +p{margin-top:.78125vw; font-size:1.40625vw;}
	.pop-layer .schoolSearch .result-wrap{margin-top:3.125vw;}
	.pop-layer .schoolSearch .result-wrap .result{font-size:1.5625vw;}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap{max-height:18.75vw;}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap ul{margin:1.1718vw .78125vw 0 0;}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap li{padding:1.1718vw 11.7187vw 1.1718vw 0; border-width:.07812vw}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap li strong{width:31.25vw; font-size:1.40625vw;}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap li p{margin-top:.5468vw; width:31.25vw; font-size:1.4062vw;}
	.pop-layer .schoolSearch .result-wrap .scroll-wrap li button{width:10.9375vw;height:3.75vw; font-size:1.5625vw; border-radius:1.875vw;margin-top:-1.875vw;}
	.pop-layer .schoolSearch .result-wrap.no-data{padding-top:3.125vw;height:21.4843vw; font-size:1.5625vw;border-width:.07812vw;background-position:center 7.8125vw;background-size:10.9375vw;}

}

/* 시작 : 20230214 */
/*   로그인 접속 방법 버튼  */
.log .content > .btn-wrap .btn-group-top {display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.log .content > .btn-wrap .btn-group-top .btn-trial-other {background-image:url('../../resources/images/common/icon_trial_other.png');}
.log .content > .btn-wrap .btn-group-top .btn-connect {background-image:url('../../resources/images/common/icon_enter.png'); margin-left: 44px;}
.log .content > .btn-wrap .btn-group-top .btn-trial-other,
.log .content > .btn-wrap .btn-group-top .btn-connect {width: 137px; height: 44px; background-repeat: no-repeat; background-position: left center; background-size: 57px 44px; font-size: 20px; line-height: 44px; color: #535353; font-weight: 700; text-align: right;}
/*   학생용 접속하기 접속 방법 */
.connect-guide-wrap {width: 100%; height: 62.5vw; margin: 0 auto; background: #d8eaff;}
.connect-guide-wrap .btn-guide-close {position: absolute; top: 1.25vw; left: 0.9375vw; display: block; width: 7.5vw; height: 7.5vw; background: url('../images/app/btn_x.png') no-repeat center / 7.5vw 7.5vw;}
.connect-guide-header {position: relative; z-index: 900;}
.swiper-student-connect-guide .swiper-slide {width: 100vw; height: 62.5vw; position: relative;}
.swiper-student-connect-guide .swiper-slide img {width: 100%; height: 100%;}
.swiper-student-connect-guide .swiper-button-prev,
.swiper-student-connect-guide .swiper-button-next {width: 3.75vw; height: 15.625vw; background-size: 3.75vw 15.625vw; background-repeat: no-repeat; top: 50%; margin-top: -7.8125vw;}
.swiper-student-connect-guide .swiper-button-next {background-image: url('../images/app/icon_arrow_r.png'); right: 1.25vw;}
.swiper-student-connect-guide .swiper-button-next:after {display: none;}
.swiper-student-connect-guide .swiper-button-prev {background-image: url('../images/app/icon_arrow_l.png'); left: 1.25vw;}
.swiper-student-connect-guide .swiper-button-prev:after {display: none;}
.text-hidden {display: block; overflow:  hidden;  border: 0;  margin: -0.078125vw;  width: 0.078125vw;  height: 0.078125vw;  clip: rect(0.078125vw, 0.078125vw, 0.078125vw, 0.078125vw);  clip-path: inset(50%);}
.swiper-student-connect-guide .guide-marker {position: absolute; border: 0.78125vw solid #94f5e1; border-radius: 1.25vw; animation: marker-animation 1.5s infinite linear;}
.swiper-student-connect-guide .guide-marker.marker01 {width: 15.15625vw; height: 3.75vw; top: 17.890625vw; left: 48.359375vw;}
.swiper-student-connect-guide .guide-marker.marker02 {width: 13.75vw; height: 3.828125vw; top: 34.53125vw; left: 52.578125vw;}
.swiper-student-connect-guide .guide-marker.marker03 {width: 13.828125vw; height:  4.0625vw;  top: 19.765625vw; left: 17.890625vw;}
.swiper-student-connect-guide .guide-marker.marker04 {width: 13.828125vw; height:  4.0625vw;  top: 19.765625vw; left: 31.40625vw;}
.swiper-student-connect-guide .guide-underline {height: 0.78125vw; background-color: #94f5e1; opacity: 0.5; border-radius: 0.78125vw;}
.swiper-student-connect-guide .guide-underline.underline01 {width: 17.0546875vw; position: absolute; top: 57.109375vw; left: 49.6875vw;}
.swiper-student-connect-guide .guide-underline.underline02 {width: 14.84375vw; position: absolute; top: 58.28125vw; left: 32.421875vw;}
.swiper-student-connect-guide .guide-underline.underline03 {width: 8.359375vw; position: absolute; top: 58.28125vw; left: 37.421875vw;}
@keyframes marker-animation{
	0%{opacity: 0}
	50%{opacity: 1}
	100%{opacity: 0}
}
/*   학생용 공부하기 중요표시 */
.comm-info-text {font-size: 18px; font-weight: 800; line-height: 20px; color: #535353; margin: 13px 0; text-align: center; padding-left: 80px; }
.comm-info-text .strong {height: 100%; display: inline-block; vertical-align: top; background: url('../images/app/img_star.png') no-repeat center left / 20px 20px; padding-left: 22px;}
.comm-info-text .strong {color: #59d2c3}
.comm-info-bg {position: relative; font-weight: 800;}
.comm-info-bg:after {content: ''; position: absolute; top: -20px; left: -20px; width: 150px; height: 65px; background: url('../images/app/img_important.png') no-repeat center / 150px 65px}
.detail .content .comm-info-text + .detail-list {margin-top: 0;}
.detail .content .comm-info-text + .detail-list em {background: #efe9dc; color: #535353; border-top: 0;}
@media all and (max-width:1280px) {
	.comm-info-text {font-size: 1.40625vw; font-weight: 800; line-height: 1.5625vw; color: #535353; margin: 1.015625vw 0; text-align: center; padding-left: 5.8vw;}
	.comm-info-text .strong {height: 100%; display: inline-block; vertical-align: top; background: url('../images/app/img_star.png') no-repeat center left / 1.5625vw 1.5625vw; padding-left: 1.71875vw;}
	.comm-info-text .strong {color: #59d2c3}
	.comm-info-bg {position: relative;}
	.comm-info-bg:after {content: ''; position: absolute; top: -1.5625vw; left: -1.5625vw; width: 11.71875vw; height: 5.078125vw; background: url('../images/app/img_important.png') no-repeat center / 11.71875vw 5.078125vw}
	.detail .content .comm-info-text + .detail-list {margin-top: 0;}
	.detail .content .comm-info-text + .detail-list em {background: #efe9dc; color: #535353; border-top: 0;}
}