@charset "utf-8";

/**/
#wrap *::-webkit-scrollbar-track{background-color:#FAFAFA}
#wrap *::-webkit-scrollbar{width:5px;height:5px;background-color:#FAFAFA}
#wrap *::-webkit-scrollbar-thumb{background-color:#AAAAAA}

/**/
#wrap{}

/**/
#reading{}

/**/
#reading.admin{border: 10px solid #eee;padding: 50px;width:800px;max-width:100%;margin:0 auto;}
#reading.admin input[type="text"]{width: 100%;height: 40px;border: 1px solid #e0e0e0;padding: 6px 12px;font-size: 16px;}
#reading.admin input[type="radio"]{}
#reading.admin select{width: auto;min-width: 120px;max-width: 100%;height: 40px;border: 1px solid #e0e0e0;padding: 0 10px;font-size: 16px;}
#reading.admin textarea{display: block;padding: 12px;width: 100%;height: 140px;border: 1px solid #e0e0e0;}
#reading.admin .info{margin-bottom: 15px;}
#reading.admin .info dl{display: flex;line-height: 30px;align-items: center;font-size: 20px;margin-bottom: 15px;}
#reading.admin .info dt{width: 30%;font-weight: 500;}
#reading.admin .info dd{flex: 1;}
#reading.admin .info select{}
#reading.admin .info input[type="text"]{}
#reading.admin .short{margin-bottom: 15px;}
#reading.admin .short .tit{line-height: 30px;font-size: 20px;font-weight: 500;margin-bottom: 16px;}
#reading.admin .short .con{}
#reading.admin .short dl{display: flex;margin-bottom: 12px;}
#reading.admin .short dt{font-size: 18px;width: 20%;}
#reading.admin .short dd{flex: 1;}
#reading.admin .short select{}
#reading.admin .short input[type="text"]{}
#reading.admin .short textarea{}
#reading.admin .question{margin-bottom: 15px;}
#reading.admin .question .tit{line-height: 30px;font-size: 20px;font-weight: 500;margin-bottom: 16px;}
#reading.admin .question .con{}
#reading.admin .question .con > dl{display: flex;margin-bottom: 12px;}
#reading.admin .question .con > dl > dt{font-size: 18px;width: 20%;}
#reading.admin .question .con > dl > dd{flex: 1;}
#reading.admin .form{}
#reading.admin .form dl{display: flex;margin-bottom: 12px;align-items: center;}
#reading.admin .form dt{width: 30%;font-weight: 500;}
#reading.admin .form dd{display: flex;flex: 1;align-items: center;white-space: nowrap;}
#reading.admin .form dd input[type="text"]{width: 65%;}
#reading.admin .form dd input[type="radio"]{}
#reading.admin .form dd select{}
#reading.admin .form dd textarea{}
#reading.admin .form dd button{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;background: #6d4b56;font-size:18px;color:#ffffff;}
#reading.admin .form dd .sel{margin:0 16px;font-size:16px;color:#303030;}
#reading.admin .form dd .sel label{cursor:pointer;display:flex;align-items: center;}
#reading.admin .form dd .sel input[type="radio"]{margin-left:10px;}
#reading.admin .add{margin-bottom: 15px;display: flex;align-items: center;justify-content: flex-end;}
#reading.admin .add a{width: 80px;height: 40px;border-radius: 4px;background: #bf4141;display: flex;align-items: center;justify-content: center;font-size: 24px;color: #ffffff;}
#reading.admin .button{margin-top: 50px;display: flex;align-items: center;justify-content: flex-end;}
#reading.admin .button .btn{display: flex;align-items: center;justify-content: center;width: 100px;height: 50px;border-radius: 4px;border: 1px solid transparent;font-size: 18px;font-weight: 500;}
#reading.admin .button .btn + .btn{margin-left: 15px;}
#reading.admin .button .btn_01{background: #ef4d4d;}
#reading.admin .button .btn_02{background: #86c1e0;}
#reading.admin .list{}
#reading.admin .list .tit{display: flex;line-height: 30px;align-items: center;font-size: 20px;margin-bottom: 15px;font-weight: 500;}
#reading.admin .list .con{margin-bottom: 50px;}
#reading.admin .list dl{display: flex;align-items: center;margin-bottom: 15px;padding: 0 20px;line-height: 30px;}
#reading.admin .list dt{font-size: 16px;}
#reading.admin .list dd{margin-left: auto;}
#reading.admin .list .btn{display: flex;align-items: center;justify-content: center;width: 80px;height: 30px;border-radius: 4px;border: 1px solid transparent;font-size: 14px;font-weight: 500;}
#reading.admin .list .btn + .btn{margin-left: 15px;}
#reading.admin .list .btn_01{background: #ef4d4d;color: #fff;}
#reading.admin .list .btn_02{background: #86c1e0;color: #fff;}

/**/
#reading.exam{}
#reading.exam .header{}
#reading.exam .header .upper{background:#ffffff;padding:20px;display: flex;align-items: center;}
#reading.exam .header .upper .title{line-height: 32px;font-size: 22px;font-weight: bold;color: #077f83;}
#reading.exam .header .upper .tool{margin-left: auto;display: flex;align-items: center;}
#reading.exam .header .upper .tool .btn{display: flex;align-items: center;justify-content: center;border: 1px solid #e0e0e0;border-radius: 4px;font-size: 16px;font-weight: bold;color: #ffffff;width: 100px;height: 40px;}
#reading.exam .header .upper .tool .btn + .btn{margin-left: 15px;}
#reading.exam .header .upper .tool .btn_01{}
#reading.exam .header .upper .tool .btn_02{background: #3e68a4;border-color: rgba(255,255,255,0.25);}
#reading.exam .header .info{background:#077f83;padding:10px 20px;display:flex;align-items:center;border-bottom: 1px solid rgba(0,0,0,0.25);}
#reading.exam .header .info .loca{line-height:24px;font-size:16px;font-weight:500;color: white;}
#reading.exam .header .info .time{margin-left:auto;font-size:16px;color:#ffffff;}
#reading.exam .content{width:1250px;margin:12px auto;justify-content: center;border:1px solid #303030;padding:6px;display: flex;height: calc(100vh - 125px - 24px);}
#reading.exam .content .question{order:2;padding:30px;border:1px solid #303030;flex: 1;overflow-y: auto;}
#reading.exam .content .question .tit{margin-bottom:24px;font-size:18px;font-weight:500;}
#reading.exam .content .question .txt{font-size: 15px;background-color: #dedede;color: #434343;padding: 10px 20px;line-height: 26px;display: block;text-align: center;}
#reading.exam .content .question .con{}
#reading.exam .content .question .con ul{}
#reading.exam .content .question .con li{}
#reading.exam .content .question .con li + li{margin-top:12px;}
#reading.exam .content .question .con .checkbox{display:flex;align-items:center;cursor:pointer}
#reading.exam .content .question .con .checkbox input{display:none;}
#reading.exam .content .question .con .checkbox input ~ i{position:relative;width:18px;height:18px;margin-right:6px;border-radius:18px;border:1px solid #e0e0e0;flex: 0 0 auto;}
#reading.exam .content .question .con .checkbox input ~ p{font-size:16px;color: #303030;}
#reading.exam .content .question .con .checkbox input:checked ~ i{border-color: #606060;}
#reading.exam .content .question .con .checkbox input:checked ~ i:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 10px;height: 10px;border-radius: 10px;background: #000000;}
#reading.exam .content .question .ans{margin: 40px auto;width: 550px;border: 1px solid #666;}
#reading.exam .content .question .ans .rel{position:relative;display: flex;}
#reading.exam .content .question .ans .rel + .rel{}
#reading.exam .content .question .ans .left-circle{position: absolute;top: 30px;left: 30px;width: 12px;height: 12px;background-color: #333;border-radius: 100%;}
#reading.exam .content .question .ans .anwer-k{width: 100%;resize: none;line-height: 24px;padding: 22px 10px 10px 65px;font-size: 16px;min-height: 110px;}
#reading.exam .content .question .choice{}
#reading.exam .content .question .choice .top{margin-bottom:40px;font-size:20px;text-align:Center;}
#reading.exam .content .question .choice .lst{display: flex;flex-wrap: wrap;}
#reading.exam .content .question .choice .lst .anwer-r{width:33.33%;margin: 0 0 20px 0;height: 100px;cursor: move;}
#reading.exam .content .question .choice .lst .anwer-r p{line-height: 24px;font-size: 16px;color: #333;padding: 0 20px;}
#reading.exam .content .article{margin-right:6px;order:1;padding:30px;border:1px solid #303030;flex: 1;overflow-y: auto;}
#reading.exam .content .article .title{text-align:Center;margin-bottom:24px;font-size:30px;font-weight:bold;}
#reading.exam .content .article .text{line-height:24px;font-size:16px;color:#303030}
#reading.exam .result{border:1px solid #303030;padding:6px;margin: 12px;display: flex;height: calc(100vh - 125px - 24px);align-items: center;justify-content: center;}
#reading.exam .result .box{}
#reading.exam .result dl{display: flex;align-items: flex-start;}
#reading.exam .result dl + dl{margin-top:16px;}
#reading.exam .result dt{margin-right: 12px;line-height: 30px;font-size: 18px;font-weight: bold;width: 200px;}
#reading.exam .result dt span{color:#606060;font-size:14px;font-weight:400;}
#reading.exam .result dd{margin-right: 12px;line-height: 30px;flex-shrink: 0;}
#reading.exam .result dd ul{display: grid;gap: 12px;grid-template-columns: repeat(7, 1fr);}
#reading.exam .result dd li{position:relative;margin: 0 6px;border-radius: 4px;border: 1px solid #e0e0e0;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 500;}
#reading.exam .result dd li.on{}
#reading.exam .result dd li.on:before{content:'';position:absolute;top:50%;left:50%;width:110%;height:110%;background:url("../image/ico-correct.png") no-repeat 50% 50% / contain;transform:translate(-50%,-50%)}
#reading.exam .result dd li.off{}
#reading.exam .result dd li.off:before{content:'';position:absolute;top:50%;left:50%;width:110%;height:110%;background:url("../image/ico-wrong.png") no-repeat 50% 50% / contain;transform:translate(-50%,-50%)}
#reading.exam .result dd .time{display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;min-width: 120px;margin: 0 30px;padding: 12px;}
#reading.exam .result dd .time strong{font-size: 23px;color: #488af8;line-height: 1;}
#reading.exam .result dd .time p{font-size: 14px;font-weight: 500;}

#exam{}
#exam .header{display: flex;align-items: center;justify-content: space-between;height: 60px;background: #077f83;padding: 10px 20px;}
#exam .header .logo{line-height: 30px;font-size: 24px;font-weight: bold;color: #fff;font-style: italic;}
#exam .header .tool{display: flex;align-items: center;gap: 10px;}
#exam .header .tool .btn{display: flex;align-items: center;justify-content: center;border-radius: 4px;text-align: center;border: 1px solid rgba(255,255,255,0.75);background: transparent;padding: 4px 12px;font-size: 14px;font-weight: 500;}
#exam .header .tool .btn_review{background: rgba(255,255,255,0.25);color: #ffffff;border: 1px solid #ffffff;}
#exam .header .tool .btn_back{background: #044e51;color: rgba(255,255,255,0.75);border: 1px solid #044e51;}
#exam .header .tool .btn_next{background: #ffffff;color: #077f83;border: 1px solid #ffffff;}
#exam .reading{padding:10px 20px;display:flex;align-items:center;justify-content:space-between;background: #ededed;}
#exam .reading > div{display:flex;align-items: center;}
#exam .reading .title{position: relative;margin: 0 12px 0 0;padding: 0 12px 0 0;font-size: 13px;font-weight:bold;}
#exam .reading .title:after{content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);width:1px;height:12px;background:#000;}
#exam .reading .of{font-size: 13px;color:#666;white-space: nowrap;}
#exam .reading .timer{font-size: 13px;font-weight:bold;margin: 0 12px 0 0;}
#exam .reading .toggle{}
#exam .reading .toggle button{display: flex;align-items: center;justify-content: center;font-size: 13px;gap: 4px;color: #666;white-space: nowrap;}
#exam .reading .toggle button:before{content:'-';width:14px;height:14px;border-radius:20px;border:1px solid #333;display:flex;align-items:center;justify-content:center;font-size: 15px;flex-shrink: 0;}
#exam .reading .toggle button:hover{color:#000;}
#exam .contain{height: calc(100vh - 100px);display: flex;}
#exam .contain .question{width: 50%;height: 100%;overflow-y: auto;padding: 30px;}
#exam .contain .question .title{line-height: 24px;font-size: 20px;font-weight: bold;color: #000;text-align: center;margin: 0 0 30px 0;}
#exam .contain .question .text{line-height: 1.4;font-size: 15px;color: #666666;}
#exam .contain .question .text:before{content:'▶';color:#000;}
#exam .contain .answer{width: 50%;height: 100%;overflow-y: auto;padding: 30px;}
#exam .contain .answer .tit{line-height: 24px;font-size: 16px;color: #000;margin: 0 0 30px 0;}
#exam .contain .answer .con{}
#exam .contain .answer .con ul{}
#exam .contain .answer .con li{}
#exam .contain .answer .con li label{display: flex;align-items: flex-start;gap: 6px;padding: 10px 0;line-height: 24px;cursor: pointer;}
#exam .contain .answer .con li label input{display:none;}
#exam .contain .answer .con li label input ~ i{position:relative;width:16px;height:16px;border-radius:16px;border:1px solid #e0e0e0;flex-shrink: 0;margin: 4px 0;}
#exam .contain .answer .con li label input ~ p{line-height: 24px;font-size: 15px;font-weight: 300;color: #666;letter-spacing: 0;}
#exam .contain .answer .con li label input:checked ~ i{background:#077f83;border-color:#077f83;}
#exam .contain .answer .con li label input:checked ~ i:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);margin-top: -1px;width: 6px;height: 3px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;}
#exam .contain .answer .con li label input:checked ~ p{}