@charset "utf-8";
*, th, td {word-break:keep-all;}
em {font-style:normal;}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 
.embed-container iframe, .embed-container object, .embed-container embed , .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* popup */
.dim {position:fixed; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); z-index:1000; display:none;}
.vodPop {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:90%; max-width:900px; height:auto; background:#FFF; padding:70px 40px 40px 40px; z-index:2000; display:none; height:auto; max-height:90%; overflow-y:auto;}
.vodPop .vodClose {top: 15px;right: 15px;position: absolute;background: none; cursor:pointer; width:40px; height:40px; z-index:100;}
.vodPop .vodClose::before {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) rotate(45deg);width: 29px;height: 3px;background: #333}
.vodPop .vodClose::after {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) rotate(-45deg);width: 29px;height: 3px;background: #333}

.comnWrap {display:block; height:auto; overflow:hidden;}

.onlineHeader {display:block; height:auto; overflow:hidden;}
.onlineHeader .headIntroSec {display:block; height:auto; overflow:hidden; background:#a05abe;}
.onlineHeader .headIntroSec .headIntro {display:block; height:auto; overflow:hidden; max-width:1200px; padding:60px 0 80px 0; margin:0 auto; text-align:center; letter-spacing:-2px; position:relative;}
.onlineHeader .headIntroSec .headIntro .mtLogo {position:absolute; left:0; top:25px; width:111px; height:42px; background:url(../images/common/logo.png) no-repeat 50% 50%;}
.onlineHeader .headIntroSec .headIntro .mtLogo a {display:block; width:100%; height:100%;}
.onlineHeader .headIntroSec .headIntro .mrnLogo {position:absolute; right:0; top:25px; width:90px; height:24px; background:url(../images/common/miraen_logo.png) no-repeat 50% 50%; background-size:100%;}
.onlineHeader .headIntroSec .headIntro .mrnLogo a {display:block; width:100%; height:100%;}
.onlineHeader .headIntroSec .headIntro .introTxt {display:inline-block; color:#FFF; font-size:44px; vertical-align:middle; position:relative;}
.onlineHeader .headIntroSec .headIntro .introTxt:after {content:''; position:absolute; left:88px; top:-23px; width:8px; height:8px; background:#FFF; border-radius:50%;}
.onlineHeader .headIntroSec .headIntro .introTxt:before {content:''; position:absolute; left:9px; top:-23px; width:8px; height:8px; background:#FFF; border-radius:50%;}
.onlineHeader .headIntroSec .headIntro .introTxt em {font-weight:600;}

.onlineHeader .onlineNavSec {display:block; height:auto; margin:0 auto; max-width:1200px;}
.onlineHeader .onlineNavSec .onlineNav {display:block; height:auto; overflow:hidden; width:70%; margin:-35px auto 0; position:relative; z-index:10;}
.onlineHeader .onlineNavSec .onlineNav .menu a {float:left; width:50%; height:auto; padding:25px 0; text-align:center; color:#FFF; background:#bbb; font-size:22px; font-weight:300; position:relative;}
.onlineHeader .onlineNavSec .onlineNav .menu a:after {content:''; position:absolute; right:0; top:0; width:1px; height:100%; background:#999;}
.onlineHeader .onlineNavSec .onlineNav .menu:last-child a:after {background:none;}
.onlineHeader .onlineNavSec .onlineNav .menu.on a {background:#333; font-weight:500;}
.onlineHeader .onlineNavSec .onlineNav .menu.on a:hover {background:#333; font-weight:500;}
.onlineHeader .onlineNavSec .onlineNav .menu a:hover {background:#999;}
.onlineHeader .onlineNavSec .onlineNav .menu a:hover:after {background:none;}

.onlineHeader .onlineNavSec .navGuideSec {display:block; height:auto; overflow:hidden; width:70%; margin:30px auto 0; padding:0 128px 0 30px; position:relative; font-size:16px; color:#333; line-height:22px; text-align:center;}
.onlineHeader .onlineNavSec .navGuideSec.full {padding:0 30px;}
.onlineHeader .onlineNavSec .navGuideSec .btnUseGuide a {position:absolute; right:0px; top:50%; transform:translate(0, -50%); padding:0 20px; height:40px; line-height:40px; font-size:16px; color:#FFF; background:#87d796; border-radius:3px; font-weight:500; letter-spacing:-1px;}

.resContent {display:block; height:auto; overflow:hidden; margin:60px auto 80px; max-width:1200px; position:relative;}
.resContent .lnbSec {float:left; width:250px; position:relative; height:auto;}
.resContent .lnbSec:after {content:''; display:block; clear:both;}
.resContent .lnbSec .lnbBox {display:block; height:auto; border:1px solid #ddd; margin-bottom:10px; position:relative;}
.resContent .lnbSec .lnbBox.fixHeight {height:198px;}
.resContent .lnbSec .lnbBox .lnbTitle {padding:13px 0; text-align:center; font-size:18px; color:#555; background:#ebebeb;}
.resContent .lnbSec .lnbBox .lnbTitle.forMo {display:none;}
.resContent .lnbSec .lnbBox .lnbMenu {display:block; height:auto; overflow:hidden; padding:10px 15px;}
.resContent .lnbSec .lnbBox .lnbMenu li {float:left; width:50%; text-align:center; font-size:16px; margin:5px 0;}
.resContent .lnbSec .lnbBox .lnbMenu li a {display:block; color:#555; padding:12px 0;}
.resContent .lnbSec .lnbBox .lnbMenu li.on a {background:#a05abe; border-radius:3px; color:#FFF; font-weight:500;}
.resContent .lnbSec .lnbBox .lnbMenu li.on a:hover {background:#a05abe; border-radius:3px; color:#FFF; font-weight:500;}
.resContent .lnbSec .lnbBox .lnbMenu li a:hover {background:#efefef; border-radius:3px; color:#666; font-weight:500;}
.resContent .lnbSec .lnbBox .lnbMenu.three li {width:33.3333%;}
.resContent .lnbSec .lnbBox .lnbMenu.single li {width:100%; text-align:left;}
.resContent .lnbSec .lnbBox .lnbMenu.single li a {padding:12px 20px;}

.currentUnit {display:none;}

.resContent .classContents {float:right; width:calc(100% - 280px); height:auto; overflow:hidden;}
.resContent .classContents h2 {font-size:42px; color:#333; line-height:1.0; padding-top:10px; font-family:'SDBook', san-serif;}
.fullDown a {display:inline-block; padding:9px 20px; font-size:16px; color:#999; border:1px solid #999; border-radius:3px; position:relative; font-family:'Noto Sans KR'; margin-left:15px; vertical-align:bottom;}
.fullDown a:after {content:''; display:inline-block; width:14px; height:15px; background:url(../images/common/ico_download_g.png) no-repeat 50% 50%; margin-left:10px;}

.classHeadSec {display:block; height:auto; overflow:hidden; position:relative; margin-bottom:35px;}
.classHeadSec .deco {position:absolute; right:30px; bottom:0; width:199px; height:216px;}
.classHeadSec .deco.kor {background:url(../images/common/tico01.png) no-repeat 50% 50%; background-size:100%;}
.classHeadSec .deco.meth {background:url(../images/common/tico02.png) no-repeat 50% 50%; background-size:100%;}
.classHeadSec .classHeadBox {display:block; height:auto; overflow:hidden; margin-bottom:45px; background:#00c7b0 url(../images/common/t_deco.png) repeat left top; text-align:center; padding:45px 0;}
.classHeadSec .classHeadBox.short {margin-bottom:0;}
.classHeadSec .classHeadBox .chTitle {display:block;}
.classHeadSec .classHeadBox .chTitle span {display:inline-block; padding-bottom:12px; position:relative; color:#FFF; font-size:30px; font-family:'SDBook', san-serif;}
.classHeadSec .classHeadBox .chTitle span:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#FFF;}
.classHeadSec .classHeadBox .chDesc {color:#FFF; font-size:14px; font-weight:500; margin:10px 0 0 0;}
.classHeadSec .classHeadBox .btnArea {margin-top:15px;}

.conTy01 {display:block; height:auto; overflow:hidden;}
.conTy01 li {float:left; width:32%; height:auto; overflow:hidden; margin-right:2%; text-align:center; word-break:keep-all;}
.conTy01 li:last-child {margin-right:0;}
.conTy01 li .thumb {display:block; margin-bottom:70px;}
.conTy01 li .thumb img {width:100%;}
.conTy01 li .ico {margin-bottom:25px;}
.conTy01 li .ico img {width:80px;}
.conTy01 li .conSubject {color:#000; font-size:16px; font-weight:700; margin-bottom:15px;}
.conTy01 li .conDesc {color:#666; font-size:13px; line-height:18px; font-weight:400;}

.classDevice {display:block; height:auto; overflow:hidden; margin:0 0 50px 0; clear:both; padding-top:15px;}
.classDevice .cdMenu a {display:inline-block; height:55px; line-height:55px; padding:0 30px; color:#666; font-size:18px; font-weight:400; border-radius:55px; background:#ebebeb; margin-right:5px;}
.classDevice .cdMenu.on a {color:#FFF; background:#00cbb4;}

.classPdsBox {clear:both; display:block; height:auto; margin-top:50px; position:relative;}
.classTitle {font-size:18px; color:#666; margin-bottom:10px;}
.classPdsBox .number {margin-bottom:20px; line-height:30px; color:#00cbb4; font-size:20px; letter-spacing:-1px; font-weight:500;}
.classPdsBox .number em {display:inline-block; width:30px; height:30px; line-height:29px; text-align:center; color:#FFF; font-size:14px; font-weight:500; border-radius:50%; background:#00cbb4; margin-right:7px; vertical-align:2px;}
.classPdsBox .numberSub {font-size:16px; color:#333; margin:0 0 20px 5px;}
.classPdsBox table {padding:0; margin:0; width:100%; border-top:2px solid #00cbb4; margin-bottom:30px;}
.classPdsBox th {background:#f5f5f5; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; text-align:center; font-weight:300; color:#333; font-size:16px; padding:15px 10px; position:relative;}
.classPdsBox th a {display:block; color:#333; font-weight:300;}
.classPdsBox td {background:#FFF; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4 !important; text-align:center; font-weight:300; color:#666; font-size:16px; padding:15px 10px;}
.classPdsBox th:last-child, .classPdsBox td:last-child {border-right:0 !important;}
.classPdsBox td .btnUrl a {display:inline-block; padding:5px 15px 7px 15px; background:#999; color:#FFF; font-size:14px; border-radius:3px;}
.classPdsBox td img.icoDown {width:16px;}

.viewHint {position:absolute; left:50%; bottom:65px; transform:translate(-50%, 0); height:auto; border-radius:10px; background:#FFF; border:1px solid #00cbb4; text-align:center; font-size:13px; color:#666; line-height:1.3; padding:10px; z-index:10; display:none;}
.viewHint.s01 {width:185%;}
.viewHint.s02 {width:160%;}
.viewHint .hintClose {position:absolute; right:-8px; top:-8px; width:22px; height:22px; background:url(../images/common/ico_guide_close.png) no-repeat 50% 50%; z-index:10; cursor:pointer;}

.classPdsBox th.subject {width:20%;}
.classPdsBox th.paper {width:35%;}
.classPdsBox th.paper_a {width:30%;}
.classPdsBox th.paper_s {width:35%;}
.classPdsBox th.round {width:50%;}
.classPdsBox th.round_s {width:25%;}
.classPdsBox th.round_a {width:25%;}
.classPdsBox th.pLink {width:25%;}
.classPdsBox th.download {width:15%;}

.classPdsBox td.num {width:12%;}
.classPdsBox td.subject {width:20%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.round {width:35%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.round_a {width:25%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.round_b {width:50%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.paper {width:30%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.paper_a {width:30%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.paper_s {width:25%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.pLink {width:15%; text-align:left; padding-left:20px; box-sizing:border-box;}
.classPdsBox td.download {width:15%;}
.classPdsBox td.download.bdrLeft {border-left:1px solid #e4e4e4;}
.classPdsBox td.download img {margin:0 3px;}

.arLeft {text-align:left !important;}

.conGuide {display:table; height:auto; overflow:hidden; width:100%;}
.conGuide .bkThumb {display:table-cell; vertical-align:middle; width:160px; height:auto; overflow:hidden;}
.conGuide .bkThumb img {max-width:100%;}
.conGuide .guideCon {display:table-cell; vertical-align:middle; width:calc(100% - 160px);}
.conGuide .guideCon.full {width:100%;}
.conGuide .guideCon .txt {color:#333; font-size:16px; letter-spacing:-1px; line-height:24px; font-weight:500; word-break:keep-all;}
.conGuide .guideCon .txt em {color:#00cbb4;}
.conGuide .guideCon .txtSmall {color:#666 font-size:16px; letter-spacing:-1px; line-height:24px; margin-bottom:15px; word-break:keep-all;}

.classConBox {display:block; height:auto; overflow:hidden; margin-top:40px;}
.classConBox .classEbookSec {float:left; width:37%; height:auto; overflow:hidden;}
.classConBox .classEbookSec .title {display:inline-block; background:#00cbb4; padding:10px 20px; color:#FFF; font-size:16px; font-weight:500;}
.classConBox .classEbookSec .ebookBox {display:block; height:auto; overflow:hidden; border:1px solid #00cbb4; padding:24px; padding-bottom:20px; text-align:center;}
.classConBox .classEbookSec .ebookBox .thumb {display:block; margin-bottom:16px; text-align:center;}
.classConBox .classEbookSec .ebookBox .thumb img {width:120px; 
-webkit-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
-moz-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
}
.classConBox .classPptSec {float:right; width:60%; height:auto; overflow:hidden;}
.classConBox .classPptSec .title {display:inline-block; background:#00cbb4; padding:10px 20px; color:#FFF; font-size:16px; font-weight:500;}

.classPptSec table {padding:0; margin:0; width:100%; border-top:2px solid #00cbb4; margin-bottom:30px;}
.classPptSec th {background:#f5f5f5; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; text-align:center; font-weight:300; color:#333; font-size:16px; padding:15px 10px; position:relative;}
.classPptSec th a {display:block; color:#333; font-weight:300;}
.classPptSec td {background:#FFF; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; text-align:center; font-weight:300; color:#666; font-size:16px; padding:15px 10px;}
.classPptSec th:last-child, .classPptSec td:last-child {border-right:0;}
.classPptSec td .btnUrl a {display:inline-block; padding:5px 15px 7px 15px; background:#999; color:#FFF; font-size:14px; border-radius:3px;}
.classPptSec td img.icoDown {width:16px;}

.classPptSec th.subject {width:50%;}
.classPptSec th.subject.using {width:75%;}
.classPptSec th.ppt {width:25%;}
.classPptSec th.download {width:25%;}

.classPptSec td.subject {width:50%; text-align:left; padding-left:20px;}
.classPptSec td.subject.using {width:75%;}
.classPptSec td.ppt {width:25%;}
.classPptSec td.download {width:25%;}

.goLink a {display:inline-block; padding:10px 60px; font-size:14px; color:#00cbb4; background:#FFF; font-weight:500;}
.btnGreenLine a {display:inline-block; padding:12px 18px; font-size:14px; color:#00cbb4; background:#FFF; font-weight:500; border:2px solid #00cbb4; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.btnGray a {display:inline-block; padding:10px 18px; font-size:14px; color:#FFF; background:#999; font-weight:500; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border-radius:3px;}

.btnArea {clear:both; display:block; height:auto; overflow:hidden;}
.btnArea .half {display:block; height:auto; overflow:hidden;}
.btnArea .half li {float:left; width:48.5%; height:auto; overflow:hidden; margin-right:3%;}
.btnArea .half li span a {width:100%; padding-left:0; padding-right:0; box-sizing:border-box; text-align:center;}
.btnArea .half li:last-child {margin-right:0;}

.comnCauTxt {display:block; height:auto; overflow:hidden; padding-top:15px;}
.comnCauTxt .txt {display:block; color:#999; line-height:1.3; font-size:14px; position:relative; padding-left:120px; box-sizing:border-box;}
.comnCauTxt .txt .cauTitle {position:absolute; left:0; top:0; width:120px; color:#00cbb4;}

.icoInfo {display:inline-block; width:20px; height:20px; line-height:20px; border-radius:50%; background:#a05abe; color:#FFF; font-size:12px; font-weight:700; vertical-align:1px; font-family:'SDBook', san-serif;}


/* guidePop */
.guideDim {position:fixed; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:100; display:none;}
.guidePop {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:96%; height:90%; overflow-y:auto; max-width:800px; padding:25px; background:#FFF; border-top:4px solid #00cbb4; display:none;}
.guidePop .guidePopclose {position:absolute; right:15px; top:15px; width:40px; height:40px; background:url(../images/common/ico_close02.png) no-repeat 50% 50%; background-size:22px 20px; cursor:pointer;}
.guidePop .gpTitle {color:#333; font-size:28px; font-weight:bold; letter-spacing:-1px; margin:10px 0 30px 0;}

.guidePopInner {display:block; height:auto; position:relative;}
.guidePopInner:after {content:''; clear:both; display:block; height:auto; overflow:hidden;}
.tmIntro {display:block; height:auto; overflow:hidden; padding:20px; background:#f0f0f0; font-size:14px; color:#333; line-height:1.4; margin-bottom:0px;}
.tmIntro a {display:inline-block; color:#00cbb4;}
.tmIntro .tmTxt {display:block; margin-top:3px; line-height:1.4;}
.tmIntro em {display:block; margin-top:10px; color:#666; font-size:14px;}
.tmIntro .tmLogo {display:inline-block; vertical-align:middle;}
.tmIntro .tmLogo img {width:100%;}

.popTabSec {display:block; height:auto; overflow:hidden; position:relative; margin-bottom:20px;}
.popTabSec .pTab {display:block; height:auto; overflow:hidden;}
.popTabSec .pTab li {float:left; width:50%; font-size:20px; text-align:center; position:relative;}
.popTabSec .pTab li:after {content:''; position:absolute; right:0; top:50%; transform:translate(0, -50%); width:1px; height:30%; background:#aaa;}
.popTabSec .pTab li:last-child:after {background:none;}
.popTabSec .pTab li a {display:block; color:#333; font-weight:400; padding:20px 0; position:relative; border-bottom:1px solid #00cbb4;}
.popTabSec .pTab li a.on {color:#00cbb4; font-weight:700;}
.popTabSec .pTab li a.on:after {content:''; position:absolute; left:50%; bottom:-1px; transform:translate(-50%, 0); width:50%; height:4px; background:#00cbb4;}
.popTabSec .spTab {display:block; height:auto; overflow:hidden; margin-top:20px; text-align:center;}
.popTabSec .spTab dd {display:inline-block; font-size:16px;}
.popTabSec .spTab dd a {display:block; width:130px; padding:10px 0; border-radius:3px; border:1px solid #ddd; color:#333; margin:0 5px;}
.popTabSec .spTab dd a.on {background:#00cbb4; color:#FFF; border:1px solid #00cbb4; font-weight:500;}

.tabCon {display:none; height:auto; width:450px; margin:0 auto; position:relative;}
.tabCon .swiper-slide img {width:450px; max-width:450px;}

.tabCon .card-prev {position:absolute; left:-20px; top:50%; transform:translate(0, -50%); width:42px; height:42px; background:url(../images/common/dir_left.png) no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:10;}
.tabCon .card-next {position:absolute; right:-20px; top:50%; transform:translate(0, -50%); width:42px; height:42px; background:url(../images/common/dir_right.png) no-repeat 50% 50%; background-size:100%; cursor:pointer; z-index:10;}
.tabCon .swiper-button-disabled {opacity:0; display:none;}


.ctIntro {clear:both; display:block; height:auto; overflow:hidden; text-align:right; font-size:14px; padding:10px 20px 0 20px;}
.ctIntro .ctLogo {display:inline-block; width:68px; height:25px; background:url(../images/ct_logo.png) no-repeat 50% 50%;}

.stuLink {clear:both; display:none; height:auto; overflow:hidden; text-align:right; padding:20px 20px 0 20px; font-size:16px; color:#00cbb4;}
.stuLink a {display:inline-block; position:relative; padding-bottom:5px; color:#00cbb4;}
.stuLink a:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#00cbb4;}

.stepWrap {display:block; height:auto; overflow:hidden; margin-top:20px;}
.stepWrap .gStepBox {display:block; height:auto; overflow:hidden; position:relative; padding-left:75px; margin-bottom:15px;}
.stepWrap .gStepBox .stepNumber {position:absolute; left:0; top:0; padding:3px 10px; font-size:13px; color:#FFF; font-weight:500; background:#00cbb4; border-radius:20px; margin-bottom:10px;}
.stepWrap .gStepBox .gStepTxt {color:#666; font-size:14px; line-height:1.5;}
.stepWrap .gStepBox .imgSingle {display:block; margin:10px 0;}
.stepWrap .gStepBox .imgSingle img {max-width:100%;}

.vodTabSec {display:block; height:auto; overflow:hidden; padding-top:10px; position:relative;}
.vodTabSec:after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#ccc;}
.vodTab {display:block; height:auto; overflow:hidden; position:relative; margin:0 auto; max-width:1200px; width:100%;}
.vodTab li {float:left; width:170px; text-align:center; font-size:22px; position:relative; z-index:10;}
.vodTab li a {display:block; padding:23px 0; color:#999; border:1px solid #FFF; border-radius:10px 10px 0 0; border-bottom:1px solid #ccc;}
.vodTab li a:hover {color:#a05abe; font-weight:500; border:1px solid #a05abe; border-bottom:1px solid #FFF;}
.vodTab li.on a {color:#a05abe; font-weight:500; border:1px solid #a05abe; border-bottom:1px solid #FFF;}

.vodTabSec.fixed {position:fixed; left:0; top:0; width:100%; background:#FFF; z-index:10000;}

.vodList {display:block; height:auto; overflow:hidden; border-bottom:10px solid #f2f2f2; padding-bottom:60px; margin-bottom:30px;}
.vodList:last-child {border-bottom:0; padding-bottom:0; margin-bottom:0;}
.vodList h2 {display:block; height:auto; overflow:hidden; padding:40px 0; font-size:30px; color:#666; font-family:'SDBook', san-serif; font-weight:normal;}
.vodList h2 em {color:#333; font-weight:500;}
.vodList h2 .gradeChoice {display:inline-block; height:auto; overflow:hidden; vertical-align:middle; font-family:'Noto Sans KR'; margin-left:30px;}
.vodList h2 .gradeChoice .btnGrade a {display:inline-block; padding:10px 30px; border:1px solid #ccc; font-size:16px; color:#999; border-radius:3px;}
.vodList h2 .gradeChoice .btnGrade a:hover {border:1px solid #a05abe; background:#a05abe; color:#FFF;} 
.vodList h2 .gradeChoice .btnGrade.on a {border:1px solid #a05abe; background:#a05abe; color:#FFF;} 
.vodList li {display:block; height:auto; overflow:hidden; padding:0 20px 55px 20px; margin-bottom:55px; border-bottom:1px solid #999;}
.vodList li:last-child {border-bottom:0; padding-bottom:0; margin-bottom:0;}
.vodSet {display:block; height:auto; overflow:hidden; position:relative;}
.vodSet .vodThumb {float:left; width:28%; height:auto; overflow:hidden; position:relative;}
.vodSet .vodThumb:after {content:''; height:0; padding-bottom:56.25%;}
.vodSet .vodThumb img {width:100%;}
.vodSet .vodThumb .thumbDim {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:10;}
.vodSet .vodThumb .thumbDim:after {content:''; position:absolute; left:50%; top:50%; width:64px; height:64px; background:url(../images/common/ico_play.png) no-repeat 50% 50%; background-size:100%; transform:translate(-50%, -50%);}
.vodSet .vodDesc {float:right; width:70%; height:auto; overflow:hidden;}
.vodSet .vodDesc .vodSubject {font-size:18px; color:#333; margin:10px 0 25px 0; line-height:1.3; font-weight:500;}
.vodSet .vodDesc .vodPdsList {display:block; height:auto; overflow:hidden; padding-left:140px; position:relative; min-height:30px; margin-bottom:10px;}
.vodSet .vodDesc .vodPdsList em {position:absolute; left:0; top:0; width:110px; height:30px; line-height:28px; text-align:center; color:#FFF; font-size:16px; background:#666; border-radius:30px;}
.vodSet .vodDesc .vodPdsList .perPds {display:block; height:auto; line-height:30px; color:#666; font-size:16px;}

.mobileDataSet {display:none;}

@media only screen and (max-width:1150px) {
	.viewHint.s01 {width:150%;}
	.viewHint.s02 {width:130%;}
}

@media only screen and (max-width:996px) {
	.forDesk {display:none;}
	.resContent {padding:0 15px;}
	.resContent .lnbSec {float:none; width:100%; margin-bottom:20px; border:2px solid #00cbb4; box-sizing:border-box;}
	.resContent .classContents {float:none; display:block; width:100%;}

	.resContent .lnbSec .lnbBox {position:relative; padding-left:55px; margin-bottom:0; margin-top:-1px; border:0; border-bottom:1px solid #ddd;}
	.resContent .lnbSec .lnbBox:first-child {margin-top:0;}
	.resContent .lnbSec .lnbBox .lnbTitle {position:absolute; left:10px; top:-2px; width:45px; text-align:left; color:#00cbb4; padding:8px 0; font-size:14px; background:none; font-weight:500;}
	.resContent .lnbSec .lnbBox .lnbMenu {display:block; height:auto; overflow:hidden; padding:0; margin:10px 0;}
	.resContent .lnbSec .lnbBox .lnbMenu li {min-width:60px; max-width:22%; margin:0px 5px 0px 0;}
	.resContent .lnbSec .lnbBox .lnbMenu.three li {width:60px;}
	.resContent .lnbSec .lnbBox .lnbMenu li a {padding:6px 0; font-size:14px;}
	.resContent .lnbSec .lnbBox .lnbMenu.single li a {padding:6px 12px;}
	.resContent .lnbSec .lnbBox .lnbMenu.single li.on a {border-radius:0;}

	.resContent .lnbSec .lnbBox .lnbMenu.single {display:none; position:absolute; left:0px; top:43px; width:100%; margin:0; background:#f0f0f0; border-bottom:1px solid #ddd; z-index:10;}
	.resContent .lnbSec .lnbBox .currentUnit {display:block; height:auto; overflow:hidden; padding:6px 0; margin:10px 0; font-size:14px; color:#333; cursor:pointer; position:relative; padding-right:45px;}
	.resContent .lnbSec .lnbBox .currentUnit .ar {position:absolute; right:15px; top:13px; width:16px; height:10px; background:url(../images/mobile/mo-arr01.png) no-repeat 50% 50%; background-size:100%; transition:.4s all;}
	.resContent .lnbSec .lnbBox .currentUnit .ar.on {transform:rotate(-180deg);}
	.resContent .lnbSec .lnbBox .lnbMenu.single li {display:block; height:auto; overflow:hidden; float:none; width:100%; max-width:100%;}

	.resContent .lnbSec .lnbBox.fixHeight {height:auto;}

	.onlineHeader .headIntroSec .headIntro .mtLogo {left:15px;}
	.onlineHeader .headIntroSec .headIntro .mrnLogo {right:15px;}

	.mobileDataSet {display:block; height:auto; overflow:hidden;}
	.mobileDataSet .mdSubject {display:block; height:auto; overflow:hidden; border-top:2px solid #00cbb4; font-size:14px; color:#333; padding:10px;}
	.mobileDataSet .mdSubject em {display:inline-block; color:#00cbb4; margin-right:10px;}
	.mobileDataSet .mdTitleSet {padding:6px 0; height:auto; overflow:hidden; border-top:1px solid #00cbb4; border-bottom:1px solid #ddd; background:#f5f5f5;}
	.mobileDataSet .mdTitleSet.marSet {margin-bottom:7px;}
	.mobileDataSet .mdTitleSet dl {display:table; width:100%; table-layout:fixed;}
	.mobileDataSet .mdTitleSet dt {display:table-cell; vertical-align:middle; text-align:center; font-size:14px; color:#333; border-right:1px solid #ddd; box-sizing:border-box;}
	.mobileDataSet .mdTitleSet dt:last-child {border-right:0;}
	.mobileDataSet .mdTitleSet dt.mdPaper {width:70%;}
	.mobileDataSet .mdTitleSet dt.mdPaper.small {width:40%;}
	.mobileDataSet .mdTitleSet dt.mdLink {width:25%;}
	.mobileDataSet .mdTitleSet dt.mdLink.small {width:30%;}
	.mobileDataSet .mdTitleSet dt.mdDown {width:30%;}
	.mobileDataSet .mdTitleSet dt.mdDown.equal {width:33.3333%;}

	.mobileDataSet .mdRoundSet {padding:6px 0; height:auto; overflow:hidden; border-bottom:1px solid #ddd; background:#FFF;}
	.mobileDataSet .mdRoundSet .mdRound {display:block; height:auto; overflow:hidden; border-top:1px solid #00cbb4; font-size:14px; color:#333; padding:10px; margin-bottom:0px; margin-top:25px;}
	.mobileDataSet .mdRoundSet .mdRound em {display:inline-block; color:#00cbb4; margin-right:10px;}
	.mobileDataSet .mdRoundSet .mdRound.perSet {margin-top:0; border-top:1px solid #ddd;}
	.mobileDataSet .mdRoundSet .mdRound.short {margin-top:0;}
	.mobileDataSet .mdRoundSet .mdRound.top {margin-top:0; border-top:2px solid #00cbb4;}
	.mobileDataSet .mdRoundSet dl {display:table; width:100%; table-layout:fixed;}
	.mobileDataSet .mdRoundSet dd {display:table-cell; vertical-align:middle; text-align:center; font-size:14px; color:#333; box-sizing:border-box;}
	.mobileDataSet .mdRoundSet dd:last-child {border-right:0;}
	.mobileDataSet .mdRoundSet dd.mdPaper {width:70%; padding:0 10px;}
	.mobileDataSet .mdRoundSet dd.mdPaper.small {width:40%;}
	.mobileDataSet .mdRoundSet dd.mdLink {width:25%; text-align:left;}
	.mobileDataSet .mdRoundSet dd.mdLink.small {width:30%;}
	.mobileDataSet .mdRoundSet dd.mdDown {width:30%;}
	.mobileDataSet .mdRoundSet dd.mdDown.equal {width:33.3333%;}
	.mobileDataSet .mdRoundSet dd.mdDown img {width:20px; margin:5px 3px 0 3px;}

	.mobileDataSet .btnUrl a {display:inline-block; padding:3px 10px 5px 10px; background:#999; color:#FFF; font-size:12px; border-radius:3px;}

	.mobileDataSet.meth .mdSubject {margin-bottom:-25px;}
}

@media only screen and (max-width:720px) {
	.onlineHeader .headIntroSec {}
	.onlineHeader .headIntroSec .headIntro {padding:20px 20px 45px 20px;}
	.onlineHeader .headIntroSec .headIntro .mtLogo {width:51px; height:20px; background-size:100%; top:15px;}
	.onlineHeader .headIntroSec .headIntro .mrnLogo {width:56px; height:15px; background-size:100%; top:15px;}
	.onlineHeader .headIntroSec .headIntro .introTxt {font-size:20px; margin-top:25px;}

	.onlineHeader .onlineNavSec {height:auto;}
	.onlineHeader .onlineNavSec .onlineNav {width:100%; padding:0 15px; margin-top:-20px;}
	.onlineHeader .onlineNavSec .onlineNav .menu:first-child a {width:30%;}
	.onlineHeader .onlineNavSec .onlineNav .menu:nth-child(2) a {width:30%;}
	.onlineHeader .onlineNavSec .onlineNav .menu:nth-child(3) a {width:40%;}
	.onlineHeader .onlineNavSec .onlineNav .menu a {padding:10px 5px; font-size:16px;}
	.onlineHeader .onlineNavSec .onlineNav .menu a em {display:block;}

	.onlineHeader .onlineNavSec .navGuideSec {width:100%; margin:15px auto 0; padding:0 115px 0 15px; font-size:13px; line-height:1.3; letter-spacing:-1px;}
	.onlineHeader .onlineNavSec .navGuideSec .btnUseGuide a {right:15px; font-size:13px; height:auto; padding:10px; line-height:1.0;}
	.onlineHeader .onlineNavSec .navGuideSec.full {font-size:13px;}

	.classTitle {font-size:16px; display:none;}

	.fullDown a {padding:5px 10px; font-size:14px;}

	.onlineHeader .headIntroSec .headIntro .introTxt:before {width:5px; height:5px; left:3px; top:-10px;}
	.onlineHeader .headIntroSec .headIntro .introTxt:after {width:5px; height:5px; left:34px; top:-10px;}

	.resContent .classContents h2 {font-size:24px;}
	

	.resContent {margin:20px auto 40px;}

	.classHeadSec .classHeadBox {padding:25px 0; margin-bottom:20px;}
	.classHeadSec .classHeadBox .chTitle span {font-size:19px; padding-bottom:6px;}
	.classHeadSec .classHeadBox .chDesc {font-size:13px; margin:5px 0 0px 0; padding:0 20px;}
	.classHeadSec .classHeadBox .btnArea {margin-top:8px;}
	.classHeadSec .deco {width:100px; height:108px;}
	.classHeadSec {margin-bottom:20px;}
	.goLink a {padding:5px 30px; font-size:13px;}

	.conTy01 li {width:100%; margin-right:0; margin-bottom:40px;}
	.conTy01 li .thumb {margin-bottom:20px;}
	.conTy01 li .ico {margin-bottom:20px;}
	.conTy01 li .ico img {width:120px;}

	.classDevice {margin-bottom:30px;}
	.classDevice .cdMenu a {height:40px; line-height:40px; font-size:13px; padding:0 15px;}

	.classPdsBox {margin:20px 0;}
	.classPdsBox .number {font-size:15px; margin-bottom:10px;}
	.classPdsBox .number em {width:25px; height:25px; line-height:25px; font-size:12px;}
	.classPdsBox th {font-size:12px; padding:10px 0;}
	.classPdsBox th em {display:block; line-height:1.0;}
	.classPdsBox td {font-size:13px; padding:10px 5px;}
	.classPdsBox td .btnUrl a {font-size:12px;}
	.classPdsBox td img.icoDown {width:20px;}

	.classPdsBox th.num {width:12%;}
	.classPdsBox th.subject {width:44%;}
	.classPdsBox th.urlCopy {width:20%;}
	.classPdsBox th.download {width:16%;}

	.classPdsBox td.num {width:12%;}
	.classPdsBox td.subject {width:44%;}
	.classPdsBox td.urlCopy {width:20%;}
	.classPdsBox td.download {width:16%;}

	.conGuide .bkThumb {display:block; width:100%; text-align:center;}
	.conGuide .bkThumb img {max-width:100%;}
	.conGuide .guideCon {display:block; width:100%; text-align:center; margin-top:15px;}

	.classConBox .classEbookSec {float:none; display:block; width:100%; margin-bottom:25px;}
	.classConBox .classPptSec {float:none; display:block; width:100%;}

	.classPptSec th {font-size:12px; padding:10px 0;}
	.classPptSec th em {display:block; line-height:1.0;}
	.classPptSec td {font-size:13px; padding:10px 5px;}
	.classPptSec td .btnUrl a {font-size:12px;}
	.classPptSec td img.icoDown {width:20px;}

	.classPptSec th.subject {width:60%;}
	.classPptSec th.subject.using {width:80%;}
	.classPptSec th.ppt {width:20%;}
	.classPptSec th.download {width:20%;}

	.classPptSec td.subject {width:60%;}
	.classPptSec td.subject.using {width:80%;}
	.classPptSec td.ppt {width:20%;}
	.classPptSec td.download {width:20%;}

	.classPptSec td .innerTd {min-height:30px; padding-left:70px;}
	.classPptSec td .innerTd .classStep {font-size:11px; padding:5px 15px;}

	.icoInfo {width:15px; height:15px; font-size:10px; line-height:18px;}

	.viewHint.s01 {width:220%;}
	.viewHint.s02 {width:220%;}

	.classPdsBox .numberSub {font-size:14px; margin-left:3px;}

	.guidePop .gpTitle {font-size:20px; margin:0 0 20px 0; padding-right:30px; line-height:1.3;}
	.tmIntro {font-size:14px;}
	.popTabSec .pTab li {font-size:16px;}
	.popTabSec .pTab li a {padding:15px 0;}
	.popTabSec .spTab {margin-top:15px;}
	.popTabSec .spTab dd {font-size:14px; width:30%;}
	.popTabSec .spTab dd a {width:100%; padding:6px 0;}
	.tabCon {width:100%;}
	.tabCon .swiper-slide img {width:100%; max-width:100%;}

	.tabCon .card-prev, .tabCon .card-next {width:30px; height:30px;}
	.tabCon .card-prev {left:-15px;}
	.tabCon .card-next {right:-15px;}

	.ctIntro {font-size:13px;}
	.stuLink {font-size:13px;}

	.guidePop .guideBox {margin-bottom:15px;}
	.guidePop .guideBox .smTitle {font-size:16px;}
	.guidePop .guideBox ul {padding:0 5px;}
	.guidePop .guideBox ul li {padding:0; line-height:1.4; font-size:13px;}
	.guidePop .guideBox ul li .usrTarget {position:relative; width:100%; left:unset; top:unset; margin-bottom:3px; display:block;}
	.guidePop .guideBox ul li .conTxt {font-size:13px;}
	.guidePop .comnCopy {padding:2px 5px; font-size:12px;}

	.stepWrap .gStepBox {padding:0;}
	.stepWrap .gStepBox .stepNumber {position:relative; display:inline-block; left:unset; top:unset; margin-bottom:5px;}
	.stepWrap .gStepBox .gStepTxt {font-size:13px; line-height:1.4;}

	.vodTab li {width:25%;}
	.vodTab li a {padding:15px 0; font-size:16px;}

	.vodList {padding-bottom:30px;}
	.vodList h2 {padding:20px 0; font-size:20px; position:relative;}
	.vodList h2 .gradeChoice {position:absolute; right:0; top:50%; transform:translate(0, -50%); margin-left:0;}
	.vodList h2 .gradeChoice .btnGrade a {padding:6px 15px; font-size:14px;}
	.vodList li {padding:0 0px 20px 0px; margin-bottom:35px;}

	.vodSet .vodThumb {float:none; display:block; width:100%; text-align:center;}
	.vodSet .vodDesc {float:none; display:block; width:100%; text-align:center;}
	.vodSet .vodDesc .vodSubject {margin:15px 0; font-size:16px; text-align:left;}
	.vodSet .vodDesc .vodPdsList {padding-left:105px; min-height:28px; margin-bottom:10px;}
	.vodSet .vodDesc .vodPdsList em {width:95px; font-size:14px; height:28px; line-height:26px;}
	.vodSet .vodDesc .vodPdsList .perPds {line-height:28px; font-size:14px; text-align:left;}

	.vodPop {padding:50px 15px 30px 15px;}
	.vodPop .vodClose {width:30px; height:30px;}
	.vodPop .vodClose::before {width:20px;}
	.vodPop .vodClose::after {width:20px;}
	.vodPop .vodInfo {padding:15px 0;}

}

@media only screen and (max-width:640px) {

}

@media only screen and (max-width:480px) {

}