/* 초기화 */
html {overflow-y:scroll;}
body {margin:0;padding:0;font-size:0.75em; color:#333; font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul, li {margin:0;padding:0;list-style:none}
ol,li,dl,dt,dd{margin:0;padding:0} 
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
button {cursor:pointer}
textarea, select {font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}

html { width:100%; height: 100%; display: table;}
body { width:100%; display:table-cell;  }
a {color:#000;font-size:0.75em;text-decoration:none}

@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

.nanummyeongjo {
 font-family: 'Nanum Myeongjo', serif;
 color:#429c00;
 font-weight:bold;
 padding-right:5px;
}


/* Default */
.center {text-align: center !important;}
.right {text-align: right !important;}
.block {display:block !important}
.bold {font-weight:bold}
.flex {display:flex}
.flex_vertical{display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
.flex_center{display:flex; -webkit-justify-content: center; justify-content: center;}
.flex_center_column{display:flex; flex-direction:column; -webkit-justify-content: center; justify-content: center;}
.p-b-70{padding-bottom:70px;}
.p-l-100{padding-left:100px !important}

/* Index.html */
.container{width:100%; height:100%; display:flex}
.side_menu{width:90px; background:#f0f0f0; padding-top:80px; text-align: center;}
.side_menu .quick{border-bottom:1px solid #e2e2e2; padding-bottom:9px; font-weight: bold; color:grey;}
.side_menu .menu {height:110px; border-bottom:1px solid #e2e2e2;}
.container_inner{width:calc(100% - 90px)}
.content{width: 1180px; margin:0 auto;}
.login_menu{line-height:40px; border-bottom:1px solid #e2e2e2; text-align: right;}
.login_menu .content a{color:grey; padding-right:25px; cursor: pointer;}
.login_menu .content a:last-child{padding-right:0}
.top_menu{height:80px; border-bottom:1px solid #e2e2e2; }
.top_menu .content {display:flex; height:100%;}
.logo{flex:1}
.logo img{position: relative; top: 13px; height: 54px; cursor: pointer;}
/* .menu_list{flex:3; display:flex}
.menu_list .menu{position: relative;}
.menu_list .menu .title{color:grey; font-size:15px; padding:0 20px; border-right:1px solid #e2e2e2; font-weight:bold; height: 18px; line-height: 18px; position: relative; top: 30px; cursor: pointer;}
.menu_list .menu .sub{position: absolute; top:72px; text-align: center; width:100%;}
.menu_list .menu:first-child{padding-left:0}
.menu_list .menu:last-child{padding-right:0; border:none;} */
.menu_list > li {float:left; padding: 30px 0;}
.menu_list > li > a{color:grey; font-size:15px; padding:0 20px; border-right:1px solid #e2e2e2; font-weight:bold; height: 18px; line-height: 18px; position: relative;  cursor: pointer;}
.menu_list > li:last-child a{border-right:none;}
.menu_list > li:hover .sub_menu{display:block !important;}
.menu_list > li > .sub_menu:hover{display:block !important;}
.sub_menu{ position: absolute; display:none; top: 122px; border-top: 5px solid #429c00; background: white; padding:20px 0; border-left: 2px solid #c7c3c385; border-right: 2px solid #c7c3c385; border-bottom: 2px solid #c7c3c385; text-align: center; z-index: 5;}
.sub_menu:before { content: ''; display: block; border-color: transparent transparent #429c00 transparent; border-style: solid; border-width: 9px; position: absolute; top: -22px; left: 50%; margin-left: -10px; }
.sub_menu > li {padding:8px 28px; }
.sub_menu  > li > a{color:#444444; letter-spacing: -0.9px; font-weight: bold; font-size:13px; cursor: pointer;}
.sub_menu  > li > a:hover{color:#429c00; text-decoration: underline;}

/*.myclass_btn{flex:1; text-align: right; cursor: pointer;}
.myclass_btn img{position: relative; top:20px}*/
.class_btn_wrap{flex:1;}
.myclass_btn{position:relative; margin-left:auto; top:20px; width:110px; height:40px; flex:1; max-width:110px; background-color:rgba(247, 247, 247, 1); border:1.3px solid rgba(157,157,157,1); text-align: center;  cursor: pointer;}
.myclass_btn > a {width:100%; height:100%; color:rgba(90,90,90,1); font-size:15.5px; font-weight:900; line-height:2.4;}
.vmeet_create_btn{position:relative; margin-left:auto; top:20px; width:110px; height:40px; flex:1; background-color:rgba(247, 247, 247, 1); border:1.3px solid rgba(157,157,157,1); text-align: center;  cursor: pointer; }
.vmeet_create_btn > a {width:100%; height:100%; color:rgba(90,90,90,1); font-size:15.5px; font-weight:900; line-height:2.4; }
.banner_container{background:#d8f99f; height:620px;}
.banner{background-image: url('../images/main_img_01.jpg'); height:100%; width:1180px; margin:0 auto; position: relative;}
.banner .side_banner{position: absolute; right: -130px; top: 135px;}
.banner .side_banner div{padding-bottom:10px; cursor: pointer;}
.banner_text{position: relative; top: 349px; width: 475px; text-align: center; font-size: 17px; font-weight: bold;}
.banner_btn{padding:50px 0px; cursor: pointer;}
.banner .flex_center img{padding:0 5px; cursor: pointer;}
.feature_container{padding:50px 0;}
.feature_container .content{display:flex}
.feature_container div{flex:1}
.review_container{background:#e6e6e6; width:100%; height:200px; text-align: center; font-size:21px; color:#222222;}
.review_container .content{position: relative;}
.vertical_align{display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center;}
.review_container .arrow_left{position: absolute; left:35px; top:15px;}
.review_container .arrow_right{position: absolute; right:35px; top:15px;}
.bottom_menu{height:80px; line-height:80px; border-bottom:1px solid #e2e2e2;}
.bottom_menu .content{display:flex}
.bottom_menu .menu_container{flex:1}
.bottom_menu .menu_container a{padding-right:30px;}
.bottom_menu .menu_container a:last-child{padding-right:0}
.footer_info {text-align: left;}
.footer_info .content{display:flex; padding:40px 0}
.footer_info .logo{flex:0.8}
.footer_info .logo img{width: 95px; height: 35px; position: relative; top: 25px;}

.footer_info .text{flex:3; line-height:23px; color:#888888;}
.footer_info .text .row{display:flex}
.footer_info .text .pr{padding-right:40px}
.footer_info .cs{flex:3}
.footer_info .cs_container{width:200px; margin:0 auto; font-size:14px; color:#444444}
.footer_info .cs_container div{padding:3px 0;}
.footer_info .cs_container .call{font-weight:bold; font-size:25px;}


/* sub.html */
.sub_content_menu{height:100px; background:#1b324d}
.sub_content_menu .content{display:flex; position: relative; height:100%; top:32px}
.sub_content_menu .content .btn{background:#586a81; color:#dddddd; text-align: center; height:68px; bottom:0; flex:1; font-size:20px; box-sizing: border-box; margin: 0 3px; border-top-right-radius: 15px; border-top-left-radius: 15px; line-height:68px; cursor: pointer;}
.sub_content_menu .content .btn.active{background:#4694ff; color:#ffffff;}
.sub_content_menu .content .arrow{text-align: center; color:white; flex:1; cursor: pointer;}

.sub_content_menu .top-content{display:flex; position: relative; width:1180px; height:50%; margin:0 auto;}
.sub_content_menu .top-content .sbtn{background:#586a81; color:#dddddd; text-align: center; height:38px; bottom:0; flex:1; font-size:20px; box-sizing: border-box; margin: 0 3px;  cursor: pointer;}
.sub_content_menu .top-content .sbtn.active{background:#4694ff; color:#ffffff;}

.sub_content_menu .bottom-content{display:flex; position: relative; width:1180px; height:50%; top:10px; margin:0 auto;}
.sub_content_menu .bottom-content .sbtn{background:#586a81; color:#dddddd; text-align: center; height:38px; bottom:0; flex:1; font-size:20px; box-sizing: border-box; margin: 0 3px; border-top-right-radius: 7px; border-top-left-radius: 7px;  line-height: 2; cursor: pointer;}
.sub_content_menu .bottom-content .sbtn.active{background:#4694ff; color:#ffffff;}
.sub_content_menu .bottom-content .arrow{text-align: center; color:white; flex:0.3; cursor: pointer; display:flex; justify-content: flex-end;}


.sub_content{background:#e4e4e4; min-height:1100px}
.sub_content .header{padding-top:50px;font-weight:bold; font-size:26px; text-align: center;}
.sub_content .header:after { content: ""; display: block; width: 45px; border-bottom: 2px solid #817d7d; margin: 13px auto;}
.sub_content .status{display:flex; padding:30px 0;}
.sub_content .status .box{flex:1; box-sizing: border-box; margin:0 10px; height:120px; border-radius: 7px; color:#ffffff; box-shadow: 2px 2px #dbd3d3; margin-bottom:10px; padding:20px 35px;}
.sub_content .status .box:first-child{margin-left: 0}
.sub_content .status .box:last-child{margin-right: 0}
.sub_content .status .box.blue{background:#4694ff;}
.sub_content .status .box.orange{background:#ff9234}
.sub_content .status .box.yellow{background:#ffbb19}
.sub_content .status .box.purple{background:#8b7dfa}
.sub_content .status .box img{height:35px}
.sub_content .status .box .title{font-size:18px; font-weight: bold; position: relative; top: 3px; padding-left: 4px;}
.sub_content .status .box .info{padding:10px 30px 0; font-size: 18px;}
.sub_content .status .box .info.time{font-size:20px; padding:10px 45px 0; text-align: center;}
.sub_content .chapter{margin-bottom:60px; box-shadow: 2px 2px #dbd3d3;}
.sub_content .chapter .title{background:#1b324d; color:white; text-align: center; height:70px; line-height:70px; font-size:23px; font-weight:bold}
.sub_content .chapter .title img{padding:0 50px; cursor: pointer;}
.sub_content .chapter .chapter_container{display:flex; background:white;}
.sub_content .chapter .chapter_container .section_container{padding-top:40px; padding-bottom:25px; flex:1}
.sub_content .chapter .chapter_container .section_container_chapter{padding-top:40px; padding-bottom:25px;}
.sub_content .chapter .chapter_container .section{flex:1; background:white; min-height:200px; padding:0 55px}
.sub_content .chapter .chapter_container .section .sub_title{font-weight:bold; font-size:21px; text-align: left; padding-bottom:30px;}
.dotted-gradient { background-image: linear-gradient(to bottom, #d7d0d0 40%, rgba(255, 255, 255, 0) 20%) !important; background-position: right !important; background-size: 3px 13px !important; background-repeat: repeat-y !important; }
.sub_content .chapter .chapter_container .section .info{padding-bottom:13px; display:flex; font-size:15px;}
.sub_content .chapter .chapter_container .section .info div{flex:1; font-weight:bold}
.sub_content .chapter .chapter_container .section .info div:first-child{color:#666666;}
.sub_content .chapter .chapter_container .section .info div:last-child{color:#222222}
.sub_content .chapter .chapter_container .section .info .graph{font-size:80px;}
.sub_content .chapter .chapter_container .section .info:last-child{padding-top:5px;}
.sub_content .assignment{display:flex; box-shadow: 2px 2px #dbd3d3;}
.sub_content .assignment .section{flex:1}
.sub_content .assignment .section:first-child{flex:1.5}
.sub_content .assignment .section .title{text-align: center; font-weight:bold; line-height:50px; height:50px; font-size:16px}
.sub_content .assignment .section .title.first{background:#d1d6db; color:#222222}
.sub_content .assignment .section .title.second{background:#c1c8cf; color:#222222}
.sub_content .assignment .section .title.third{background:#afb8c1; color:#222222}
.sub_content .assignment .section .title.fourth{background:#768494; color:#ffffff}
.sub_content .assignment .section .text{height:60px; line-height:60px; display:flex; background:white; font-size: 15px; font-weight: bold; padding: 0 25px; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2;}
.sub_content .assignment .section .text div{flex:1; text-align: center;}
.sub_content .assignment .section .text img{height:30px; position: relative; padding:15px 0;}
.sub_content .assignment .section .text_teacher{height:60px; line-height:60px; display:flex; background:white; font-size: 15px; font-weight: bold; padding: 0 25px; border-bottom:1px solid #e2e2e2; border-right:1px solid #e2e2e2;}
.sub_content .assignment .section .text_teacher div{flex:1; text-align: center;}
.sub_content .assignment .section .text_teacher img{}
.sub_content .assignment .section .sign{height:17px !important; position: relative; top: 9px;}
.sub_content .assignment .section .sign_teacher{height:17px !important; position: relative;}

/* guide.html */
.guide_content{padding-top:70px; min-height:800px;}
.guide_content .content{position: relative}
.guide_content .side_banner{position: absolute; right: -130px; top: 135px;}
.guide_content .side_banner div{padding-bottom:10px !important; cursor: pointer;}
.guide_content .header{font-weight:bold; font-size:30px; padding-bottom:20px;}
.guide_content .guide_menu{display:flex; padding-bottom:200px;}
.guide_content .guide_menu a{margin-right:40px; margin-bottom:3px; font-size:16px; color:#888888; cursor: pointer;}
.guide_content .guide_menu a.active{font-weight:Bold; color:black; border-bottom: 2px solid #ffbb19ba; box-shadow: inset 0 -7px 0 #ffbb19ba}
.guide_content .title{font-size:27px;}
.guide_content .title:last-child{padding-bottom:80px;}
.guide_content .quotes{font-size:50px; color:#ff9234; position: relative; top:20px;}
.guide_content .center img:first-child{margin-bottom:100px;}

/* study.html */
.study_content{padding-top:20px;}
.study_content img{cursor: pointer;}
.study_content .question_1{margin-bottom:50px;}
.study_content .question_1 .title{font-weight:bold; font-size:20px; text-align: center; margin-bottom:50px;}
.study_content .question_1 .title_basic{font-weight:bold; font-size:26px; text-align: center; margin-bottom:50px;}
.study_content .question_1 .title_2{font-weight:bold; font-size:26px; text-align: center;}
.study_content .question_1 .title_basic_2{font-weight:bold; font-size:20px; text-align: center;}
.study_content .question_1 .sentence_container{font-size:35px; font-weight:bold; display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-bottom:35px;}
.study_content .stage_container{margin:0 auto; width:541px; margin-bottom:30px;}
.study_content .stage{display:flex}
.study_content .stage li{width:40px; border-bottom:5px solid #dddddd; margin-right:5px; cursor: pointer;}
.study_content .stage li.done{border-bottom:5px solid #54b50c;}
.study_content .stage li.active{width:90px; height:45px; background:#54b50c; color:#ffffff; border-bottom:unset; text-align: center; line-height:46px; font-size:25px; font-weight:bold}
.study_content .sentence_container{margin:0 auto;}
.study_content .sentence_container .title{font-size:28px; font-weight:bold; text-align: center;}
/*.study_content .sentence_container .video{margin:45px auto; width: 250px; height:130px; background:#a52a2a8c; text-align: center;}*/
.study_content .sentence_container .video{margin:45px auto; text-align: center;}
/*.study_content .sentence_container .video img{width:66px; position: relative; top:30px; cursor: pointer;}*/
/*.study_content .sentence_container .video img{width:100%; height:100%; position: relative; cursor: pointer;}*/
.study_content .answer_container{margin:0 auto;}
.study_content .answer_container .answer{display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.study_content .answer_container .answer .btn{min-width:100px; padding:0 30px 5px; color:#888888; background:#dddddd; border:none; font-size:16px; border-radius: 5px; margin:0 15px;}
.study_content .answer_container .answer .btn.active{background:#ff7f10; color:white;}
.study_content .answer_container .answer .active {position: relative; cursor: pointer;}
.study_content .answer_container .answer .active div{background:#ff7f10; color:white;}
.study_content .answer_container .answer .active img{right: 4px; position: absolute; top: -11px; width: 35px;}
.study_content .answer_container .answer .active .btn{background:#ff7f10; color:white;}
.study_content .header_container{margin:0 auto; width:500px; margin-bottom:250px;}
.study_content .header_container .header{font-size:40px; font-weight: bold; border-bottom:3px solid #ff7f10;}
.study_content .header_container .header div{padding-left:40px; margin-bottom:15px;}
.study_content .question_2{margin-bottom:50px;}
.study_content .question_2 .title{font-weight:bold; font-size:25px; text-align: center; margin-bottom:50px;}
.study_content .question_2 .title_2{font-weight:bold; font-size:26px; text-align: center; margin-bottom:20px;}
.study_content .question_2 .title_basic_2{font-weight:bold; font-size:20px; text-align: center; margin-bottom:20px;}
.study_content .question_2 .sentence{font-size:35px; font-weight:bold; display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-bottom:60px;}
.study_content .question_2 .sentence div{background:#fff2e7; color:#222222; padding:7px 15px 2.5px 25px }
.study_content .question_2 .sentence img{width:50px; position: relative; bottom: 2px;}
.study_content .question_2 .mic{text-align: center; cursor: pointer;}
.study_content .question_2 .mic img{width:90px;}
.study_content .question_3{margin-bottom:50px;}
.study_content .question_3 img{max-width:1180px; height:auto; object-fit:contain;}
.study_content .question_3 .title{font-weight:bold; font-size:20px; text-align: center; margin-bottom:50px;}
.study_content .question_3 .title_basic{font-weight:bold; font-size:26px; text-align: center; margin-bottom:50px;}
.study_content .question_3 .title_2{font-weight:bold; font-size:26px; text-align: center;}
.study_content .question_3 .title_basic_2{font-weight:bold; font-size:20px; text-align: center;}
.study_content .question_3 .sentence_container{font-size:15px; font-weight:bold; display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; margin-bottom:35px;}
.study_content .question_3 .sentence{background:#fff2e7; color:#222222; padding:15px 25px 15px 30px; }
.study_content .question_3 .sentence div{ padding-top:10px; }
.study_content .question_3 .sentence .box{border:4px solid #ff7f10; background:white; min-width:120px; min-height:40px; margin:0 15px; position: relative; top:3px;}
.study_content .question_3 .sentence .text{text-align: center; color:#ff7f10; font-size:17px; padding-top:15px;}
.study_content .question_3 .btn_container{text-align: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;}
.study_content .question_3 .btn_container .btn{padding:0 200px; font-size:22px; font-weight:bold; cursor: pointer;}
.study_content .question_3 .btn_container .btn img{width:40px; padding-right:15px;}
.study_content .question_4 {margin-bottom:100px;}
.study_content .question_4 .title{color:#ff7f10; text-align: center; font-size:18px; font-weight:bold; margin-bottom:40px}
.study_content .question_4 .btn_container div{padding:0 35px;}
.study_content .question_4 .btn_container img{width:130px;}
.study_content .question_4 .btn_container .select{border:1px solid #dcd9d9; border-bottom:unset; padding:7px 20px; text-align: center; font-size:13px;}
.study_content .question_4 .btn_container .select:last-child{border-bottom: 1px solid #dcd9d9}

.study_content .page_container{margin-bottom:20px; font-weight: bold;}
.study_content .page_container img{width: 25px;padding:0 5px;}
.study_content .page_container ul li{padding:0 3px; font-size:15px; color:#888888}
.study_content .page_container ul li.active{color:#ff7f10}

.study_content .prev{width: 250px; padding: 0 10px;}
.study_content .next{width: 250px; padding: 0 10px;}