@charset "UTF-8";
@import url(./layout.css);
@import url(./table.css);
@import url(./form.css);


.main{padding:100px 0 0 0;}
.main-tab__scroll{position:fixed;left:0;top:50px;width:100%;height:50px;overflow-x:auto;white-space:nowrap;text-align:center;background:#fff;z-index:11;} /** 20211208 ¼öÁ¤ **/
.main-tab__scroll:before{content:"";width:100%;height:1px;position:absolute;left:0;bottom:0;background:#e5e5e5;}
.main-tab__scroll::-webkit-scrollbar{display:none;}
.main-tab__scroll{-ms-overflow-style:none;scrollbar-width:none;}
.main-tab__scroll a{display:inline-flex;align-items:center;position:relative;padding:0 11px;height:50px;font-size:16px;color:#606060;margin:0 -1px;}
.main-tab__scroll a:after{content:"";width:100%;height:1px;position:absolute;left:0;bottom:0;background:#e5e5e5;}
.main-tab__scroll a.on {color:#327ff3;font-weight:700;}
.main-tab__scroll a.on:after{content:"";width:100%;height:2px;position:absolute;left:0;bottom:0;background:#327ff3;}


.main-contents__block{max-width:720px;margin:0 auto;}
.main-contents h2{position:relative;margin:40px auto 0 auto;font-size:24px;text-align:center;line-height:1.48;}
.main-contents h2:before{content:"";display:block;width:50px;height:40px;margin:0 auto;background:url('../image/main/icon_h201.png') center center no-repeat;background-size:cover;}
.main-contents h2.book:before{background-image:url('../image/main/icon_h202.png');}
.main-contents h2.ani:before{background-image:url('../image/main/icon_h203.png');}
.main-contents h2.online:before{background-image:url('../image/main/icon_h204.png');}
.main-contents h2 strong,
.main-contents h2 span{position:relative;}
.main-contents h2 + p{margin-top:12px;padding:0 16px;text-align:center;font-size:16px;}
.main-contents h2 strong:before{content:"";position:absolute;left:0;bottom:4px;width:100%;height:6px;background:#c2e3ff;}
.main-contents__block{margin-top:50px;}
.grammer .visual{background:#95deff;text-align:center;}
.grammer .main-contents__block h3{margin-bottom:20px;text-align:center;}
.grammer .main-contents__block h3 > strong{display:inline-flex;align-items:center;justify-content:center;position:relative;padding:0 25px;height:48px;min-width:220px;color:#327ff3;font-size:17px;border:solid 1px #327ff3;border-radius:25px;}
.grammer .main-contents__block h3 > strong em{position:absolute;left:50%;top:0;padding:0 10px;font-size:16px;color:#67a9ff;background:#fff;transform:translate(-50%,-50%);}

.main-text {font-size:16px;}

.grammar-box{margin:15px 16px 0 16px;}
.grammar-box .title{display:flex;justify-content:center;align-items:center;height:33px;color:#fff;font-size:15px;border-radius:10px 10px 0 0;background:#fbad01;}
.grammar-box.intermediate .title{background:#92bf3d;}
.grammar-box.advanced .title{background:#0fb8c9;}
.grammar-box .cont{position:relative;padding:20px 13px 17px 80px;border-radius:0 0 10px 10px;border:solid 1px #cecece;border-top:0;}
.grammar-box .cont dl{padding-right:90px;}
.grammar-box .cont dt{font-size:16px;font-weight:700;line-height:1.5em;}
.grammar-box .cont dd{font-size:14px;margin-top:2px;}
.grammar-box .cont:before{content:"";position:absolute;left:20px;bottom:15px;width:42px;height:50px;background:url('../image/main/icon_grammar02.png') center center no-repeat;background-size:cover;}
.grammar-box.intermediate .cont:before{background-image:url('../image/main/icon_grammar03.png');}
.grammar-box.advanced .cont:before{background-image:url('../image/main/icon_grammar03.png');}
.grammar-box .cont a{display:inline-flex;align-items:center;position:absolute;right:13px;top:50%;padding:0 10px;height:30px;font-size:11px;  border: solid 1px #cecece;border-radius:15px;transform:translateY(-50%);}
.grammar-box .cont a:after{content:"";display:inline-block;margin-left:5px;width:3px;height:3px;border:solid 1px #303030;border-top:0;border-left:0;transform:rotate(-45deg);}
.grammar-box .title_sub{display:table;width:100%;height:35px;background:#e68a00;}
.grammar-box .title_sub span{display:table-cell;width:50%;color:#fff;font-weight:bold;font-size:15px;vertical-align: middle;text-align:center;}
.grammar-box .title_sub span:first-child{border-right:1px solid rgba(255,255,255,0.2);}
.grammar-box.intermediate .title_sub{background:#6d9d13;} 
.grammar-service{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 16px;}
.grammar-service__block{width:calc(50% - 6px);text-align:center;}
.grammar-service__block .thumb{display:flex;align-items:center;justify-content:center;height:130px;border-radius:10px;background:#e8f4ff;}
.grammar-service__block .thumb img{height:120px;}
.grammar-service > div:nth-child(n+3){margin-top:15px;}
.grammar-service__block dt{margin-top:6px;font-weight:700;font-size:16px;line-height:23px;}
.grammar-service__block dd{font-size:13px;}

.grammar-charge{padding:0 16px 65px 16px;}
.grammar-charge__block{margin:7px 0 10px 0;}
.tbl-charge th, 
.tbl-charge td{text-align:center;}
.tbl-charge th{padding:5px;color:#fff;background:#767b88;}
.tbl-charge th > strong{display:block;font-size:16px;}
.tbl-charge th > strong span{color:#ffff4a;}
.tbl-charge th > span{display:block;font-size:11px;line-height:1.5em;opacity:0.8;font-weight:400;}
.tbl-charge th + th {border-left:solid 1px #cecece;}
.tbl-charge td{padding:13px 5px;font-weight:700;font-size:16px;border:solid 1px #cecece;border-top:0;}

.main-app--download{background-image:linear-gradient(91deg, #d2dcff 30%, #c2dfff 70%);}
.main-app--download > div{padding:30px 16px 26px 16px;max-width:720px;height:100%;background:url('../image/bg/bg_app.png') center bottom no-repeat;background-size:auto 100%;margin:0 auto;}
.main-app--download h3{font-size:22px;line-height:1em;text-align:center;} 
.main-app--download h3 > span{font-size:18px;}
.main-app--download h3 + p{margin-top:10px;font-size:14px;text-align:center;} 
.app-btns{display:flex;justify-content:space-between;margin-top:16px;}
.app-btns > a{display:inline-flex;justify-content:center;align-items:center;width:calc(50% - 5px);height:54px;font-size:13px;border-radius:30px;background:#fff;box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);}
.app-btns > a:before{content:"";display:inline-block;margin-right:5px;width:33px;height:33px;background:url('../image/main/android_logo.png') center center no-repeat;background-size:cover;}
.app-btns > a.ios:before{background-image:url('../image/main/ios_logo.png');}

.init-notice{position:fixed;bottom:0;left:0;width:100%;padding:30px 20px;text-align:center;border-radius:20px 20px 0 0;background:#fff;z-index:91;transition:.5s ease-out;opacity:1;transform:translateY(100%);}
.init-notice.opened{opacity:1;transform:translateY(0);}
.init-notice .init-text01{font-size:23px;color:#303030;font-weight:700;line-height:27px;letter-spacing:-0.05em;}
.init-notice .init-text01:before{content:"";display:block;margin:0 auto 10px auto;width:267px;height:131px;background:url('../image/bg/bg_init.png') center center no-repeat;background-size:cover;}
.init-notice .init-text02{margin-top:10px;font-size:14px;color:#929292;line-height:1.462em;}
.init-notice .line{display:inline-block;margin-top:15px;color:#303030;font-weight:500;font-size:16px;border-bottom:solid 1px #303030;}
.init-notice .close-x{position:absolute;top:15px;right:15px;width:20px;height:20px;background:url('../image/icon/icon_x.png') center center no-repeat;background-size:cover;text-indent:-999em;overflow:hidden;}

.main-contents--inner{padding:0 16px;}

.book-service{padding:0 16px 50px 16px;font-size:14px;border-bottom:dashed 1px #a0aebf;}
.book-service__list > li{position:relative;}
.book-service__list > li:after{content:"";position:absolute;left:50%;bottom:-18px;margin-left:-15px;width:30px;height:12px;background:url('../image/main/icon_arr_book0101.png') center center no-repeat;background-size:cover;}
.book-service__list > li + li{margin-top:25px;}
.book-service__list > li > div{display:flex;align-items:center;padding:5px;border-radius:100px;background:#e8f5f9;}
.book-service__list > li .thumb{flex: 0 0 63px;}
.book-service__list > li dl{margin-left:12px;padding-right:16px;}
.book-service__list > li dt{font-weight:700;font-size:16px;line-height:23px;color:#5bcbf6;}
.book-service__list > li dd{font-size:14px;line-height:1.25em;}
.book-service__list > li.li01 > div{background:#e8f5f9;}
.book-service__list > li.li01 dt{color:#5bcbf6;}
.book-service__list > li.li01:after{background-image:url('../image/main/icon_arr_book0101.png')}
.book-service__list > li.li02 > div{background:#eef6ff;}
.book-service__list > li.li02 dt{color:#74b6fa;}
.book-service__list > li.li02:after{background-image:url('../image/main/icon_arr_book0102.png')}
.book-service__list > li.li03 > div{background:#eef2fe;}
.book-service__list > li.li03 dt {color:#7791e3;}
.book-service__list > li.li03:after{background-image:url('../image/main/icon_arr_book0103.png')}
.book-service__list > li.li04 > div{background:#f1f1fb;}
.book-service__list > li.li04 dt{color:#8883db;}
.book-service__list > li:last-child::after{display:none;}

.main-contents.video, 
.main-contents.test, 
.main-contents.bookinfo{padding-bottom:50px;}
.bookinfo .main-contents__block h3{margin-bottom:20px;text-align:center;}
.bookinfo .main-contents__block h3 > strong{display:inline-flex;align-items:center;position:relative;padding:0 15px 0 0;height:38px;color:#303030;font-size:17px;border-radius:20px;background:#e8f5f9;}
.bookinfo .main-contents__block h3 em{display:inline-flex;align-items:center;margin-right:10px;padding:0 11px;height:38px;font-size:16px;color:#fff;font-weight:500;border-radius:20px;background:#6cccf1;white-space:nowrap;}
.bookinfo .main-contents__block h3 > strong > span{position:relative;white-space:nowrap;}
.bookinfo .main-contents__block h3 > strong > span + span{padding-left:13px;}
.bookinfo .main-contents__block h3 > strong > span + span:before{content:"";position:absolute;left:4px;top:50%;margin-top:-4px;width:6px;height:9px;background:url('../image/main/icon_arrow_gray.png') center center no-repeat;background-size:cover;}
.bookinfo .main-contents__block h3.type2 > strong{background:#eef6ff;}
.bookinfo .main-contents__block h3.type2  em{background:#74b6fa;}
.bookinfo .main-contents__block h3.type3 > strong{background:#eef2fe;}
.bookinfo .main-contents__block h3.type3  em{background:#7791e3;}
.bookinfo .main-contents__block h3.type4 > strong{background:#f1f1fb;}
.bookinfo .main-contents__block h3.type4  em{background:#8883db;}

.book-sample--text{margin-top:10px;font-size:14px;}
.book-sample--text > li{position:relative;padding-left:16px;}
.book-sample--text > li:before{content:"";position:absolute;left:0;top:5px;width:12px;height:9px;background:url('../image/main/icon_check_blue.png') center center no-repeat;background-size:cover;}
.book-sample--text.type2 > li:before{background-image:url('../image/main/icon_check_blue2.png');}
.book-sample--text.type3 > li:before{background-image:url('../image/main/icon_check_purple.png');}
.book-sample--text.type4 > li:before{background-image:url('../image/main/icon_check_purple2.png');}
.book-sample--text > li + li{margin-top:10px;}

.grammar-charactor__block{position:relative;padding:10px 17px 20px 17px;border-radius:15px;}
.grammar-charactor__block:before{content:"";position:absolute;right:0;bottom:0;width:136px;height:171px;background:url('../image/main/charactor01.png') center center no-repeat;background-size:cover;}
.grammar-charactor__block + .grammar-charactor__block {margin-top:20px;}
.grammar-charactor__block.charactor01{background:#ffdfec;}
.grammar-charactor__block.charactor02{background:#d8d8f5;}
.grammar-charactor__block.charactor03{background:#d0e1fb;}
.grammar-charactor__block.charactor02:before{background-image:url('../image/main/charactor02.png');}
.grammar-charactor__block.charactor03:before{background-image:url('../image/main/charactor03.png');}
.grammar-charactor__block h4{margin-bottom:7px;text-align:center;color:#d9699b;font-size:21px;line-height:31px;}
.grammar-charactor__block h4 span{font-size:19px;}
.grammar-charactor__block.charactor02 h4{color:#6161a5;}
.grammar-charactor__block.charactor03 h4{color:#3773c9;}
.grammar-charactor__block dl{margin-right:100px;font-size:14px;line-height:19px;}
.grammar-charactor__block dt{float:left;font-weight:500;}
.grammar-charactor__block dd{padding-left:45px;padding-bottom:3px;}
.grammar-charactor__block dl + dl{margin-top:5px;padding-top:9px;border-top:dashed 1px #e191b5;}
.grammar-charactor__block.charactor02 dl + dl{border-top-color:#9797bf;}
.grammar-charactor__block.charactor03 dl + dl{border-top-color:#5688cf;}

.grammar-charactor__block .grammar-charactor-list{margin-right:100px;}
.grammar-charactor__block .grammar-charactor-list.t2{margin-top:9px;padding-top:9px;border-top:dashed 1px #e191b5;}
.grammar-charactor__block.charactor02 .grammar-charactor-list.t2{border-top-color:#9797bf;}
.grammar-charactor__block.charactor03 .grammar-charactor-list.t2{border-top-color:#5688cf;}
.grammar-charactor__block .grammar-charactor-list ul li{display:table;padding-bottom:3px;font-size:14px;}
.grammar-charactor__block .grammar-charactor-list ul li:last-child{padding-bottom:0;}
.grammar-charactor__block .grammar-charactor-list ul li strong{display:table-cell;width:45px;font-weight:500;}

.vod-special__block + .vod-special__block{margin-top:25px;}
.vod-special__block h4{color:#ff4a4a;font-weight:700;font-size:16px;line-height:23px;}
.vod-special__block h4 + p{margin-top:2px;font-size:14px;}
.vod-special__box{position:relative;margin-top:8px;border-radius:10px;overflow:hidden;}
.vod-special__box:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.35);}
.vod-special__box > a{position:absolute;left:50%;top:50%;margin:-30px 0 0 -30px;width:60px;height:60px;background:url('../image/main/icon_vod_play.png') center center no-repeat;background-size:cover;text-indent:-999em;overflow:hidden;z-index:1;}
.text-special__box{margin-top:8px;}

.table-main th{padding:7px;background:#dde3eb;border:solid 1px #cecece;}
.table-main th.blank{background:#e8edf2;}
.table-main tbody th{color:#fff;}
.table-main th.org{background:#fbad01;}
.table-main th.green{background:#92bf3d;}
.table-main th.blue{background:#0fb8c9;}
.table-main th.blue2{background:#327ff3;}
.table-main th.blue3{background:#67a9ff;}
.table-main th.blue3.light{font-size:16px;font-weight:400;color:#206fd8;background:#82b9ff;}
.table-main th.blue4{background:#327ff3;}
.table-main th.blue4.light{font-size:16px;font-weight:400;color:#0a4aaa;background:#5898f9;}
.table-main th.gray {background:#7f9ea7;}
.table-main th.gray.light{font-size:16px;font-weight:400;color:#3e6672;background:#9ab7bf;}
.table-main th.brown {background:#c8ab5f;}
.table-main th.brown.light{font-size:16px;font-weight:400;color:#886f2e;background:#d4bd7e;}
.table-main td{padding:7px;text-align:center;font-size:14px;border:solid 1px #cecece;}
.table-main + .list-dot{margin-top:10px;}

.online-test{margin-bottom:25px;}
.online-test li{position:relative;}
.online-test li:before{content:"";position:absolute;width:3px;height:20px;left:50%;bottom:-20px;background:url('../image/main/icon_dot.png') center center no-repeat;background-size:3px auto;}
.online-test li + li{margin-top:20px;}
.online-test li > div{position:relative;padding:7px 15px 7px 82px;border-radius:10px;background:#eef2f6;}
.online-test li > div:before{content:"";position:absolute;left:23px;top:50%;margin-top:-18px;width:37px;height:35px;background:url('../image/main/icon_test0101.png') center center no-repeat;background-size:cover;}
.online-test li > div.test0101:before{background-image:url('../image/main/icon_test0101.png')}
.online-test li > div.test0102:before{background-image:url('../image/main/icon_test0102.png')}
.online-test li > div.test0103:before{background-image:url('../image/main/icon_test0103.png')}
.online-test li > div.test0104:before{background-image:url('../image/main/icon_test0104.png')}
.online-test li > div.test0105:before{background-image:url('../image/main/icon_test0105.png')}
.online-test li > div.test0106:before{background-image:url('../image/main/icon_test0105.png')}
.online-test li > div dd{font-size:14px;}
.online-test li > div dt{font-size:16px;font-weight:700;line-height:23px;}

.book-unit--sample{padding:27px;text-align:center;}
.book-unit--sample.basic{background:#fff1d2;}
.book-unit--sample.intermediate{background:#dcf1d0;}
.book-unit--sample.advanced{background:#cfeef5;}
.book-unit--sample h4{font-size:17px;line-height:25px;}
.book-unit--sample h4 + p{margin-top:7px;font-size:16px;}
.book-unit--sample .book-thumb{display:inline-flex;margin-top:17px;}
.book-unit--sample .book-thumb > div + div{margin-left:18px;}
.book-unit--sample .book-thumb .thumb{width:107px;box-shadow:3px 3px 6px rgba(0,0,0,0.15);}
.book-unit--sample .book-thumb span{display:inline-flex;align-items:center;padding:0 11px;margin-top:9px;height:24px;font-size:13px;color:#f7ab02;border-radius:15px;border:solid 1px #f7ab02;}
.book-unit--sample.intermediate .book-thumb span{color:#83b329;border-color:#83b329;}
.book-unit--sample.advanced .book-thumb span{color:#00afc1;border-color:#00afc1;}

.book-unit--text{padding:25px 16px;max-width:720px;margin:0 auto;}
.book-unit--text dt strong{position:relative;font-size:16px;}
.book-unit--text dt strong:before{content:"";position:absolute;left:0;bottom:2px;width:100%;height:5px;background:#c2e3ff;}
.book-unit--text dt strong > em{position:relative;}
.book-unit--text dd{margin-top:5px;font-size:14px;}
.book-unit--text dd + dt{margin-top:19px;}