@charset "utf-8";
/* CSS Document */

#key_access {position:fixed; top:0; width:100%; height:57px; text-align:center; overflow:hidden; z-index:-1;}
#key_access ul {position:relative;}
#key_access ul li {position:absolute; width:100%; height:57px; left:0; top:-9999px; background:#5aa642}
#key_access ul li.select {top:0;}
#key_access a {display:block; width:100%; height:57px; line-height:57px; color:#fff}
#loading_page {position:fixed; top:0px; bottom:0px; width:100%; height:100%; background:#fff; z-index:10000;}
#loading_page p {position:absolute; top:50%; left:50%; margin:-30px 0 0 -30px; font-size:48px; z-index:auto;}
#wrap { }

/***************** header *****************/
header {position:relative; width:100%; background:#fff; z-index:1001;}

/* top-box */
header .top-box {width:1200px; height:102px; margin: 0 auto; border-bottom:1px solid #e6e6e6;}
header .top-box:after {content:""; display:block; height:0; clear:both;}
header .top-box h1 {position:absolute; top:27px; z-index:2000; width:200px;}
header .top-box h1 a img {width:100%;}
header .top-box ul.util {float:right; margin-top:19px;}
header .top-box ul.util li {float:left; margin-left:14px; padding-top:0px;}
header .top-box ul.util li a:after {content:""; display:inline-block; vertical-align:middle; width:1px; height:13px; margin:-3px 0 0 15px; background:#afb1b7;}

/* topmenu */
header .inner-box {position:absolute; top:15px; width:100%; z-index: 100;}
header .inner-box:after {content:""; display:block; height:0; clear:both;}
header .inner-box #showleftUser,
header .inner-box #showRightPush,
header .inner-box #loginForm,
header .inner-box nav {display:none;}
header .inner-box #gnb {position:relative; width:100%; height:90px; border-bottom:1px solid #e6e6e6; margin:0 auto; overflow:hidden; background:#fff; box-sizing:border-box;}
header .inner-box #gnb .gnbList {position:relative; width:1200px; margin:0 auto; padding-left:340px; padding-right:260px; overflow:hidden; box-sizing:border-box;}
header .inner-box #gnb .gnbList:after {clear:both; display:block; content:''; *zoom:1;}
header .inner-box #gnb .gnbList > li {width:33%; float:left; text-align:center; }
header .inner-box #gnb .gnbList li:nth-child(3) ul {border-right:1px solid #ebebeb;}
header .inner-box #gnb .gnbList li > h3 {font-size:1.8rem;}
header .inner-box #gnb .gnbList li > h3 > a {display:block; padding:25px 0 36px 0; font-size:1.8rem; height:90px; font-weight:600; letter-spacing:-0.85px; color:#222; text-align:center; border-bottom: 1px solid #fff;}
header .inner-box #gnb .gnbList li > h3 > a:hover {color:#261b92;}
header .inner-box #gnb .gnbList > li.active > .twoDep {background:#f8f8f8; border-top:1px solid #261b92;}
header .inner-box #gnb .gnbList .twoDep {height:207px; display:block; border-top:1px solid #ebebeb;}
header .inner-box #gnb .gnbList .twoDep > ul {height:100%; padding:20px 0 0 18px; border-left:1px solid #ebebeb;}
header .inner-box #gnb .gnbList .twoDep > ul > li {margin-bottom:19px;}
header .inner-box #gnb .gnbList .twoDep > ul > li a {display: block; font-size:1.5rem; font-weight:500; color:#000; text-align:left; padding:0; white-space:nowrap;}
header .inner-box #gnb .gnbList .twoDep > ul > li a:hover {color:#261b92;}

header .user-support {width:1200px; margin:0 auto; position:absolute; top:0; left:50%; margin-left:-600px; z-index: 10;}
header .user-support ul {position:absolute; top:25px; right:0; z-index:1000;}
header .user-support ul li {float:left; margin-left:11px;}
header .user-support ul li .btn-classtory {color: #fff; font-size: 1.4rem; padding: 8px 22px; border-radius: 25px; background: #09005d;}
header .user-support ul li .btn-login {color: #fff; font-size: 1.4rem; padding: 8px 25px; border-radius: 25px; background: #00ccc9;}
header .user-support ul li a + a {margin-left: 5px;}

/***************** footer *****************/
footer {padding:40px 0 20px 0; border-top:0px solid #dfdfdf;}
footer .inner-wrap {position:relative; width:1200px; margin:0 auto; padding: 2rem 0;}
footer .inner-wrap:after {display:block; clear:both; content:''}
footer .inner-wrap + .inner-wrap {border-top:1px solid #e9ebf2; padding: 2.8rem 0;}
footer .inner-wrap .foot-logo {float: left; margin-right:150px;}
footer .inner-wrap ul.sub-util {/*width: calc(100% - 280px);*/ float:right;}
footer .inner-wrap ul.sub-util li {display:inline-block; padding:10px 20px; font-size:1.5rem;}
footer .inner-wrap ul.sub-util li a {color:#222;}
footer .inner-wrap ul.sub-util li a:hover {color:#000;}
footer .inner-wrap ul.sub-util li a.naver {padding-left:26px; background:url(../img/icon_naver.png) 0 0 no-repeat;}
footer .inner-wrap ul.sub-util li a.instagram {padding-left:26px; background:url(../img/icon_instagram.png) 0 0 no-repeat;}
/*footer .inner-wrap ul.sub-util li a:before {content:""; display:inline-block; vertical-align: middle; width:1px; height:11px; margin:0 20px 0 0; background:#bababa;}*/

footer .inner-wrap ul.copy {float:left; margin:0px 0 0 0px;}
footer .inner-wrap ul.copy li {padding:2px 0; font-size:1.5rem; color:#666;}
footer .inner-wrap ul.copy li.company {font-weight: 500; padding-bottom: 30px;}
footer .inner-wrap ul.copy li address {font-style:normal;}
footer .cs-center {position:absolute; right:20px; top:2.8rem; font-size:1.4rem; text-align: right;}
footer .cs-center span {display: block; line-height:2rem;}
footer .cs-center .tel {position:relative; font-weight: 500; color:#222; font-size: 2.2rem; letter-spacing: 0; padding: 4px 0 12px 0;}
footer .cs-center .desc em {font-style: normal; color: #999;}
footer .cs-center .email {letter-spacing: .5px; margin-top:2px;}

/***************** main *****************/
.inner-box {width:1200px; margin:0 auto;}
.inner-box:after {content:""; display:block; height:0; clear:both;}
.grid-main {width:1200px; margin:0 auto;}


/* mainvisual
.mainvisual {position: relative;  padding-top:0px; z-index:1; overflow:hidden; background: linear-gradient(180deg, #f3f5f9 70%, rgba(255,255,255,0) 20% );}
.mainvisual .cycle-slideshow {text-align:center; height: 1250px; background:url(../img/vm_bg.png) center 0px no-repeat;}
.mainvisual .cycle-slideshow .slide {width:100%; height:100%; }
.mainvisual .cycle-slideshow .slide.vm01 {background:url(../img/vm01.png) center 440px no-repeat;}
.mainvisual .cycle-slideshow .slide.vm02 {background:url(../img/vm01.png) center 440px no-repeat;}
.mainvisual .cycle-slideshow .slide.vm03 {background:url(../img/vm01.png) center 440px no-repeat;}
.mainvisual .slide .txt-box {display:block; position: relative; top:86px; text-align:center; width:1200px; margin:0 auto;}
.mainvisual .slide .txt-box .desc {font-size:1.8rem; font-weight:500; color:#222222; line-height:2.6rem; padding: 25px 0 45px 0;}
.mainvisual .slide .txt-box .desc span {display: block;}
.mainvisual .slide .txt-box .tit {font-size:5.6rem; font-weight:500; color:#222222;}
.mainvisual .slide .txt-box .tit span {color:#261b92;}
.mainvisual .slide .txt-box a.btn-classtory {color: #fff; font-size: 1.7rem; padding: 15px 36px; border-radius: 25px; background: #09005d;}
.mainvisual .cont-box {position:relative; width:1200px;  margin: 0 auto; z-index:202;}
.mainvisual .cont-box .contentBox {position:relative; top:60px; left:0; z-index:200;}
.mainvisual .cont-box .contentBox strong {font-family:'Yeon Sung', cursive; display: block; font-size:4em; font-weight:500; line-height:130%; color:#fff;}
.mainvisual .cont-box .contentBox p.info {max-width: 480px; margin-top: 10px; font-size: 1.5em; color:#fff;}
.mainvisual .cont-box .pagerWrap {position:absolute; left:0px; bottom:60px; z-index:201;}
.mainvisual .cont-box .pagerWrap #adv-custom-pager {display:inline-block;}
.mainvisual .cont-box .pagerWrap #adv-custom-pager a{display:inline-block; width:18px; height:18px; margin-left:4px; background:url(../img/bg_pagerOff.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .cont-box .pagerWrap #adv-custom-pager a.cycle-pager-active{width:52px; background:url(../img/bg_pagerOn.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .cont-box .pagerWrap button {display:inline-block;width:18px;height:18px;vertical-align:top;border:none; font-size:0;line-height:0;text-indent:-999px;}
.mainvisual .cont-box .pagerWrap .btnStop {background:url(../img/btn_stop.png) 0 0 no-repeat; background-size:cover;}
.mainvisual .cont-box .pagerWrap .btnPlay {background:url(../img/btn_play.png) 0 0 no-repeat; background-size:cover;}
*/

/* section0 mainvisual */
.section0 {padding:9.5rem 0 8rem 0; text-align:center; height: 1250px; position: relative; background: linear-gradient(180deg, #f3f5f9 62%, rgba(255,255,255,0) 20% );}
.section0 h2 {padding:2rem 0 9rem 0; text-align:center; font-size:4rem; font-weight: 500; color: #222; letter-spacing:-.85px;}
.section0 h2 span {display: block;}
.section0 .grid-main {background:url(../img/vm_bg.png) center 55px no-repeat;}
.section0 .txt-box {position: relative; text-align:center; width:1200px; margin:0 auto; padding-bottom: 55px;}
.section0 .txt-box .desc {font-size:1.8rem; font-weight:500; color:#222222; line-height:2.6rem; padding: 20px 0 40px 0;}
.section0 .txt-box .desc span {display: block;}
.section0 .txt-box .tit {font-size:5.6rem; font-weight:500; color:#222222; font-family: 'ONE-Mobile-Title';}
.section0 .txt-box .tit span {color:#261b92; font-family: 'ONE-Mobile-Title'; display: block;}
.section0 .txt-box a.btn-classtory { color: #fff; font-size: 1.7rem; padding: 15px 36px; border-radius: 25px; background: #09005d;}

.section0 .slick-prev {left: -68px;}
.section0 .slick-next {right: -68px;}
.section0 .slick-prev, .slick-next {width: 34px; height: 68px; top: calc(50% - 24px);}
.section0 .slick-prev:before {position: absolute; top: 50%; left: 0px;width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_left.png);background-size: cover;}
.section0 .slick-next:before {position: absolute; top: 50%; left: 0px; width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_right.png); background-size: cover;}
.section0 .slick-slide img {width:auto; display:inline-block;}

ul.slide-list {width: 1200px; margin: 0 auto;}
ul.slide-list li {margin: 5px !important;}
ul.slide-list li .ui.img { text-align: center;}


/* section1 step */
.section1 {padding:5rem 0 11rem 0; background:#fff;}
.section1 h2 {padding:2rem 0 6rem 0; text-align:center; font-size:4rem; font-weight: 500; color: #222; letter-spacing:-1px;}
.section1 h2 span {display: block;}
.section1 h3 {position: relative; font-size: 3rem; font-weight:600; padding:13px 5px 3px 5px; margin-bottom:20px; width: auto; display: inline-flex; background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #b2f0ef 60%);}
.section1 ul {display: flex; justify-content: center; justify-content: space-between; width: 1200px; margin: 0 auto;}
.section1 ul li {width: 33%; padding: 7rem 0 5rem 0; text-align: center; border-left:1px solid #eee;}
.section1 ul li:first-child {border-left: none;}
.section1 ul li .point {display: block; color: #261b92; padding-top: 15rem; font-size: 1.4rem; font-weight: 600; width: 130px; margin: 0 auto;}
.section1 ul li .point.icon01 {background:url(../img/point_icon01.png) center top no-repeat;}
.section1 ul li .point.icon02 {background:url(../img/point_icon02.png) center top no-repeat;}
.section1 ul li .point.icon03 {background:url(../img/point_icon03.png) center top no-repeat;}
.section1 ul li .desc {line-height: 2.4rem; font-size: 1.6rem; color: #757575;}
.section1 ul li .desc span {display: block;}


/* section2 think */
.section2 {padding:10rem 0 8rem 0; background:#f3f5f9;}
.section2 .grid-main {width:1200px; margin:0 auto;}
.section2 h2 {padding:2rem 0 9rem 0; text-align:center; font-size:4rem; font-weight: 500; color: #222; letter-spacing:-1px;}
.section2 h2 span {display: block;}
.section2 .slick-prev {left: -68px;}
.section2 .slick-next {right: -68px;}
.section2 .slick-prev, .slick-next {width: 34px; height: 68px; top: calc(50% + 20px);}
.section2 .slick-prev:before {position: absolute; top: 50%; left: 0px;width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_left.png);background-size: cover;}
.section2 .slick-next:before {position: absolute; top: 50%; left: 0px; width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_right.png); background-size: cover;}

ul.think-list {width: 1200px; margin: 0 auto;}
ul.think-list li {margin: 5px !important;}
ul.think-list li .ui.card {width: 95%; padding:5rem 3rem 1rem 3rem; margin: 0 auto; background: none; box-shadow: none !important;}
ul.think-list li .ui.card p {text-align: center; padding: 26px 10px; color: #666; border-radius:40px !important; font-size: 1.8rem; background-color: #fff !important; box-shadow: 0 0px 10px 0 rgb(12 37 75 / 15%);}
ul.think-list li .ui.card p + p {margin-top: 16px}
ul.think-list li .ui.card p.user01 {background:url(../img/user01.png) 8px center no-repeat;}
ul.think-list li .ui.card p.user02 {background:url(../img/user02.png) 8px center no-repeat;}
ul.think-list li .ui.card p.user03 {background:url(../img/user03.png) 8px center no-repeat;}
ul.think-list li .ui.card p.user04 {background:url(../img/user04.png) 8px center no-repeat;}
ul.think-list li .ui.card p.user05 {background:url(../img/user05.png) 8px center no-repeat;}

#think .slick-dots li {width: auto; height: auto;}
#think .slick-dots li button {font-size: 0rem; width: auto; height: 30px; color: #222;}
#think .slick-dots li:nth-child(1) {width:50px;}
#think .slick-dots li:nth-child(2) {width:50px;}
#think .slick-dots li:nth-child(3) {width:60px;}
#think .slick-dots li:nth-child(4) {width:175px;}
#think .slick-dots li:nth-child(5) {width:135px;}
#think .slick-dots li.slick-active:nth-child(1) button:before {width: auto; height: 30px; content: "출결 "; font-size: 2.4rem; border-bottom: 5px solid #00ccc9;}
#think .slick-dots li.slick-active:nth-child(2) button:before {width: auto; height: 30px; content: "수납 "; font-size: 2.4rem; border-bottom: 5px solid #00ccc9;}
#think .slick-dots li.slick-active:nth-child(3) button:before {width: auto; height: 30px; content: "SMS "; font-size: 2.4rem; border-bottom: 5px solid #00ccc9;}
#think .slick-dots li.slick-active:nth-child(4) button:before {width: auto; height: 30px; content: "판서 및 강의 녹화 "; font-size: 2.4rem; border-bottom: 5px solid #00ccc9;}
#think .slick-dots li.slick-active:nth-child(5) button:before {width: auto; height: 30px; content: "온라인 클래스 "; font-size: 2.4rem; border-bottom: 5px solid #00ccc9;}
#think .slick-dots li:nth-child(1) button:before {width: auto; height: 30px; content: "출결 "; font-size: 2.4rem;}
#think .slick-dots li:nth-child(2) button:before {width: auto; height: 30px; content: "수납 "; font-size: 2.4rem;}
#think .slick-dots li:nth-child(3) button:before {width: auto; height: 30px; content: "SMS "; font-size: 2.4rem;}
#think .slick-dots li:nth-child(4) button:before {width: auto; height: 30px; content: "판서 및 강의 녹화 "; font-size: 2.4rem;}
#think .slick-dots li:nth-child(5) button:before {width: auto; height: 30px; content: "온라인 클래스 "; font-size: 2.4rem;}
#think .slick-track {display: flex;}
#think .slick-initialized .slick-slide {display: inline-flex;}
#think .slick-slide {float: none;height: auto;}
#think .slick-dots {top: -20px;}
#think .slick-dots li {margin: 0 20px !important;}
#think .slick-dots li button:before {opacity: .75; color: #222; background: none !important; letter-spacing: -0.85px;}
#think .slick-dots li button:before {text-indent:0;}
#think .slick-dots li.slick-active button:before {opacity: 1; border-radius: 0; color: #222; font-weight: 600; text-indent:0; background-color: none;}

/* section3 review */
.section3 {padding:10rem 0 12rem 0; background:#182268 url(../img/section3_bg.png) center top no-repeat;}
.section3 .grid-main {width:1200px; margin:0 auto;}
.section3 h2 {padding:20px 0 50px 0; text-align:center; font-size:4rem; font-weight: 500; color: #fff; letter-spacing:-1px;}
.section3 h2 span {display: block;}
.section3 .slick-prev {left: -68px;}
.section3 .slick-next {right: -68px;}
.section3 .slick-prev, .slick-next {width: 34px; height: 68px; top: calc(50% + 14px);}
.section3 .slick-prev:before {position: absolute; top: 50%; left: 0px;width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_left2.png);background-size: cover;}
.section3 .slick-next:before {position: absolute; top: 50%; left: 0px; width: 34px; height: 68px; margin: -34px 0 0 0px; content: ''; background: url(../img/page_arrow_right2.png); background-size: cover;}

ul.review-list {width: 1200px; margin: 0 auto;}
ul.review-list li {margin: 5px !important;}
ul.review-list li .ui.card {width: 95%; padding:5rem 2rem; margin: 0 auto;}
ul.review-list li .ui.card .content {padding: 0px 10px 20px 10px; flex-grow: 1; text-align:center;}
ul.review-list li .ui.card .content p span { padding:10px 0; display: block; color:#4568a9;}
ul.review-list li .ui.card .content .desc {line-height:1.5; color:#666666; font-size: 1.8rem; font-weight:400; padding:15px;}
ul.review-list li .ui.card .content .icon_start {width:100%; height:30px; background:url(../img/review_icon01.png) left top no-repeat;}
ul.review-list li .ui.card .content .icon_end {width:100%; height:30px; background:url(../img/review_icon02.png) right top no-repeat;}
ul.review-list li .ui.card .user {text-align: center; font-size: 1.5rem; font-weight: 500; color: #bababa;}
#review .slick-track {display: flex;}
#review .slick-initialized .slick-slide {display: inline-flex;}
#review .slick-slide {float: none;height: auto;}
#review .slick-dots {bottom: -50px;}
#review .slick-dots li button:before {color: #babdd2; background: #babdd2;}
#review .slick-dots li.slick-active button:before {opacity: .75; color: #00ccc9; background: #00ccc9;}

/* section5 banner */
.section5 {padding:8rem 0 9rem 0; background:#fff;}
.section5 ul.banner-list {width:100%; display:flex; flex-wrap:wrap; gap:25px 10px;}
.section5 ul.banner-list li {width:calc((100% / 6) - 10px); text-align:center;}

/* section6 step */
.section6 {padding:10rem 0 11rem 0; background:#fff; border-top:1px solid #e9ebf2;}
.section6 h2 {padding:20px 0 50px 0; text-align:center; font-size:4rem; font-weight: 500; color: #222; letter-spacing:-1px;}
.section6 h3 {font-size: 2.4rem; padding:13px 0 23px 0;}
.section6 ol {display: flex; justify-content: center; justify-content: space-between; width: 1200px; margin: 0 auto;}
.section6 ol li {width: 20%; text-align: center;}
.section6 ol li .step {display: block; color: #261b92; padding-top: 150px; font-size: 1.4rem; font-weight: 600; width: 124px; margin: 0 auto;}
.section6 ol li .step.icon01 {background:url(../img/step_icon01.png) center top no-repeat;}
.section6 ol li .step.icon02 {background:url(../img/step_icon02.png) center top no-repeat;}
.section6 ol li .step.icon03 {background:url(../img/step_icon03.png) center top no-repeat;}
.section6 ol li .step.icon04 {background:url(../img/step_icon04.png) center top no-repeat;}
.section6 ol li .desc {line-height: 2.4rem; font-size:1.6rem;}
.section6 ol li .desc span {display: block;}

/* section7 customer */
.section7 {padding: 9.5rem 0 10rem 0; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #00ccc9; }
.section7 h2 {padding:0px 0 4.4rem 0; text-align:center; font-size:4rem; font-weight: 500; color: #fff; letter-spacing:-1px;}
.section7 .btn-area {text-align:center;}
.section7 .btn-area a {display: inline-block; font-size:1.7rem; width: 26rem; text-align: center; font-weight: 500; color: #fff; padding:1.2rem 0; border-radius:2.4rem; border:1px solid #fff;}
.section7 .btn-area a.btn-wt {background: #fff; color: #009d9b;}
.section7 .btn-area a + a {margin-left: 1rem;}

/***************** Modal content *****************/
.bottom-content {margin-top:20px; text-align:center; }
.bottom-content button,
.bottom-content a {min-width:90px; display:block;}
.modal-cart {text-align:center;}
.modal-cart p {padding-bottom:20px; font-size:1.25em; font-weight:500; color:#333;}
.modal-cart span strong {color: #1678c2;}
.modal-txt01 {font-size:1.2em; font-weight:500; text-align:center; padding-top:15px; border-top:1px solid #d4dadd;}


#pageSliderDescription {position:absolute; left:-999em; display:inline-block; width:0; height:0;}

/* 준비중인 페이지 CSS */
.page_none {width:100%; margin:0 auto; height:45%; padding:14% 10%; border-radius:15px; text-align:center; color:#888; font-size:1.333em; border:1px solid #e3e4e9; background:#fff url(../img/no_page.png) 20% 50% no-repeat; background-size:20%; overflow:hidden;}

@media all and (max-width:1360px){
	.section0 .slick-prev,
	.section2 .slick-prev {left: 0px;}
	.section0 .slick-next,
	.section2 .slick-next {right: 0px;}
	.section3 .slick-prev {left: -44px;}
	.section3 .slick-next {right: -44px;}
	ul.review-list {width: 1100px;}
	ul.review-list li .ui.card .content .desc {padding: 8px;}
}

@media all and (max-width:1217px){
	header .top-box,
    header .inner-box,
    header .inner-box #gnb,
    header .inner-box #gnb .gnbList {width:100%;}
	header .top-box h1 {margin-left:10px;}
	header .inner-box #gnb .gnbList {width:100%;}
	header .top-box ul.util {margin-right:10px;}
	header .user-support {width:270px; position:absolute; top:0; right:10px; left: auto; margin-left: 0;}
	.inner-box,
	.section0 .txt-box,
	ul.slide-list,
	.section1 ul,
	.section2 .grid-main,
	.section3 .grid-main,
	ul.review-list,
	.section6 ol
	  {width:100%;}
	.section0 .slick-prev,
	.section2 .slick-prev {left: 0px;}
	.section0 .slick-next,
	.section2 .slick-next {right: 0px;}
	.section3 .slick-prev {left: -44px;}
	.section3 .slick-next {right: -44px;}
	ul.think-list,
	ul.review-list {width: 90%;}
	ul.review-list li .ui.card {padding: 3rem 1.5rem;}
	.grid-main {width:calc(100% - 2rem); margin:0 auto;}
	.section0 .grid-main {width: 100%}
	.ui.img {width: 90%; margin:0 auto;}
	footer .inner-wrap {width:96%;}

}

@media screen and (max-width: 1024px){
	body {font-size: 9px;}
	header .top-box h1 {margin-left: 2rem;}
	header .user-support {width: 100%; left: auto; right: 1rem; margin-left: 0;}
	header .user-support ul li .btn-classtory,
	header .user-support ul li .btn-login {font-size: 1.3rem; padding: 8px 20px;}
	.section0 {padding: 9.5rem 0 2rem 0; height: 1200px;}
	.ui.img {width: 80%; margin:0 auto;}
	.section0 .slick-slide img {width: 100%;}
	.section1 h2,
	.section2 h2,
	.section3 h2,
	.section6 h2,
	.section7 h2 {font-size:3.4rem }
	.section1 {padding: 3rem 0 5rem 0;}
	.section2 {padding: 5rem 0 5rem 0;}
	.section3 {padding: 5rem 0 6rem 0;}
	.section5 {padding: 5rem 0 5rem 0;}
	.section6 {padding: 5rem 0 5rem 0;}
	.section7 {padding: 6rem 0 6rem 0;}
	.section0 .txt-box .tit img {width: auto; height:100px; }
	.section7 h2 {padding: 0px 0 2.4rem 0;}
	.section1 h3 {font-size:2.8rem}
	.section1 ul li .point.icon01,
	.section1 ul li .point.icon02,
	.section1 ul li .point.icon03 {background-size:auto 90px; padding-top: 12rem;}
	.section1 ul li {padding: 3rem 1.5rem 3rem 1.5rem;}
	.section1 ul li .desc span {display:inline;}
	ul.think-list li .ui.card p {padding: 16px 5px; background-size:auto 40px !important;}
	.section5 ul.banner-list {width: 95%; margin:0 auto;}
	.section5 ul.banner-list li {width: calc((100% / 5) - 10px);}
	.section6 ol {width: 90%; margin:0 auto;}
	.section6 ol li .step {padding-top: 10rem; background-size:auto 90px !important;}
	.section6 ol li .desc span {display:inline;}
}

@media screen and (max-width: 950px){
	header {padding: 0; position: fixed;}
	header .top-box {height:60px; padding: 10px;}
    header .top-box h1 {position: absolute; float:none; top:12px; width:100%; text-align:center; margin:0; z-index:10;}
	header .top-box h1 a img {width: auto; height: 33px;}
	header .top-box .util {display:none;}
    header .inner-box {position:relative; top:-60px;}
    header .inner-box #showRightPush {position:absolute; top:9px; right:15px; display:inline-block; /*width:40px; height:40px;*/ background:#fff; z-index:999;}
    header .inner-box #showRightPush span {display:inline-block; width:22px; height:16px; text-indent:-9999px; margin:12px 0 0 9px; background:url(../img/gnb_ico.png) no-repeat 0 -17px;}
    header .inner-box #showRightPush.active {background:#434343; width:40px; height:40px; border-radius:4px;}
    header .inner-box #showRightPush.active span {margin:12px 0 0 12px; background:url(../img/gnb_ico.png) -27px 0 no-repeat;}
	.cbp-spmenu-vertical {width:260px; height:100%; top:0; overflow-y:auto;}
    .cbp-spmenu-right {right:-260px;}
    .cbp-spmenu-right.cbp-spmenu-open {right:0px;}
    .cbp-spmenu-push {overflow-x:hidden; position:relative; left:0;}
    .cbp-spmenu-push-toleft {left:-260px;}
    /*.cbp-spmenu, .cbp-spmenu-push {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;}*/

	/* mobile menu */
	header .inner-box nav {display:block; position:fixed; background:#f4f4f4; z-index:999;}
	header .inner-box .top-m-util ul {background:#09005d;}
	header .inner-box .top-m-util ul:after {content:""; display:block; height:0; clear:both;}
	header .inner-box .top-m-util ul li {float:left; margin-left:14px; padding:7px 0 7px 0;}
	header .inner-box .top-m-util ul li a {display:block; font-size:1.3rem; line-height:30px; color:#fff;}
	header .inner-box .top-m-util ul li:first-child a:after {content:""; display:inline-block; vertical-align:middle; width:1px; height:11px; margin:0 0 0 15px; background:#fff;}
    header nav ul.navList > li {position:relative; text-align:left; border-bottom:1px solid #7a7a7a;}
    header nav ul.navList > li > a {display:block; font-size:16px; font-weight:500; text-indent:20px; line-height:48px; color:#222; background:url(../img/m_gnb_down.png) calc(100% - 20px) 50% no-repeat; background-size:16px;}
    header nav ul.navList > li a span {position:inherit; padding:0;}
    header nav ul.navList > li:first-child {border-top:1px solid #537998;}
    header nav ul.navList > li.on > a {color:#261b92; background:url(../img/m_gnb_up.png) calc(100% - 20px) 50% no-repeat; background-size:16px;}
    header nav ul.navList > li.on .twoDep {display:block;}
    header nav ul.navList > li.subNone > a {background:none;}
    header nav ul.navList .twoDep {display:none;}
    header nav ul.navList .twoDep ul {padding:5px 0; background:#fff;}
    header nav ul.navList .twoDep ul li a {display:block; font-size:14px; font-weight:500; line-height:32px; text-indent:20px; color:#333;}
    header nav ul.navList .twoDep ul li span:before {margin-right:5px;}
    header nav ul.navList .twoDep ul li a:hover {color:#000;}
    header .overlay {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom: 0; background-color:rgba(0, 0, 0, 0.4); z-index: 998;}
    header .inner-box h1 {margin:0;}
    header .inner-box h1 a img {width:40px;}
    header #gnb {display:none;}
   .section0 .grid-main {background: none;}
   .section0 {padding: 10.5rem 0 4rem 0; height: auto;}
   .section0 .txt-box .desc {padding: 1rem 0 3rem 0;}
   .section0 .txt-box a.btn-classtory {font-size: 1.6rem; padding: 8px 25px;}
   .section1 h2 {padding: 2rem 0 4rem 0;}
   .section1 h3 {font-size: 2.4rem;}
	.section2 h2 {padding: 2rem 0 6rem 0;}
	ul.review-list li .ui.card {padding: 3rem 2rem;}
	.section5 ul.banner-list {gap: 15px 8px;}
	.section5 ul.banner-list li img {width:140px;}
	footer .inner-wrap ul.sub-util {float:left; margin-top: 1.5rem;}
	footer .inner-wrap ul.sub-util li:first-child {padding-left: 0}
}

/* reply page */
#reply .logo {
  text-align: right;
}
#reply .logo img {
  width: 25%;
  max-width: 200px;
  height: auto;
}
#reply .regDate {
  text-align: right;
  color: #8a8a8a;
}
#reply .contents {
  margin-top: 15px;
  font-size: 1.45em;
}
.ui.container {
  width: 1127px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.main.container {
  margin-top: 2em;
}
.ui.text.container {
  max-width: 900px !important;
  line-height: 1.5;
}
.ui.text.container {
  font-size: 1.14285714rem;
}
.text-textarea {
  white-space: pre-line;
}
@media all and (max-width:768px){
	body {font-size: 8px;}
	.section1 h2,
	.section2 h2,
	.section3 h2,
	.section6 h2,
	.section7 h2 {font-size:2.6rem}
	footer {padding: 20px 0 20px 0;}
	footer .inner-wrap {text-align:center; padding: 1rem 0;}
	footer .inner-wrap + .inner-wrap {padding-top: 1.8rem; padding-bottom: 1.8rem;}
	footer .inner-wrap ul.sub-util li {padding: 10px 10px;}
	footer .inner-wrap ul.copy li.company {padding-bottom:10px;}
	footer .inner-wrap ul.copy li {font-size:1.4rem;}
	footer .cs-center {top:1.8rem; right:1rem; font-size:1.4rem;}
	footer .cs-center .tel {padding: 6px 0 8px 0;}
	footer .cs-center span {line-height: 1.8rem;}
	.section1 {padding-top:0;}
	.section1 h3 {font-size:2rem;}
	.section1 ul li .desc {font-size: 1.4rem;}
	.section2 h2 {padding: 2rem 0 4rem 0;}
	#think .slick-dots {top: 0;}
	#think .slick-dots li {margin: 0 10px !important;}
	#think .slick-dots li:nth-child(1) {width:40px;}
	#think .slick-dots li:nth-child(2) {width:40px;}
	#think .slick-dots li:nth-child(3) {width:50px;}
	#think .slick-dots li:nth-child(4) {width:135px;}
	#think .slick-dots li:nth-child(5) {width:110px;}
	#think .slick-dots li button:before {font-size:1.8rem !important;}
	ul.think-list li .ui.card p {font-size: 1.5rem;}
	.section3 h2 {padding: 2rem 0 3rem 0;}
	ul.review-list li .ui.card .content .desc {font-size: 1.5rem;}
	.section5 ul.banner-list {width: 100%; gap: 10px 5px; margin-left:10px;}
	.section5 ul.banner-list li img {width:100%;}
	.section5 ul.banner-list li {width:calc((100% / 4) - 10px); text-align:center;}
	.section6 ol {gap: 10px 5px; flex-wrap: wrap;}
	.section6 ol li {width:calc((90% / 2) - 10px); margin-bottom: 15px;}
	.section7 .btn-area a {width: 45%;}

  .ui.container {
    width: auto !important;
    margin-left: 1em !important;
    margin-right: 1em !important;
  }
}


@media all and (max-width:660px){
	footer .inner-wrap .foot-logo { float: none; margin-right: 0; margin-bottom: 5px;}
	.section0 .txt-box .tit {font-size:4rem; transition:all 0.3s ease;}
	.section0 .txt-box .desc {font-size:1.6rem; padding: 1rem 0 2.5rem 0; line-height: 2.2rem; transition:all 0.3s ease;}
	.section1 ul {flex-wrap: wrap;}
    .section1 ul li {width:100%; margin-bottom:10px; border-radius: 10px; border:1px solid #e6e6e6;}
    .section1 ul li:first-child {border-left:1px solid #e6e6e6;}
    .section1 h2 {padding: 2rem 1rem 2rem 1rem;}
    .section1 ul li .point {padding-top:10rem !important;}
    ul.think-list li .ui.card {width: 98%;}
    ul.think-list li .ui.card p {padding-left:50px;}
    ul.think-list li .ui.card {padding: 5rem 1rem 1rem 1rem;}
    #think .slick-dots {top: -10px;}
    #think .slick-dots li {margin: 0 5px !important;}
    #think .slick-dots li button:before {font-size: 1.6rem !important;}
    #think .slick-dots li:nth-child(1) {width:30px;}
	#think .slick-dots li:nth-child(2) {width:30px;}
	#think .slick-dots li:nth-child(3) {width:40px;}
	#think .slick-dots li:nth-child(4) {width:108px;}
	#think .slick-dots li:nth-child(5) {width:88px;}
}


@media all and (max-width:480px){
    header .inner-box #showleftSch {top:20px; left:5px;}
	header .inner-box #showleftSch span {width:22px; height:22px;}
    header .inner-box #showRightPush {top:9px; background:none;}
    header .inner-box #showRightPush span {background-position:0 -17px;}
    header .inner-box #showRightPush.active span {}
    header #schForm {display:none; position:absolute; top:34px;}
    header #schForm .m-sch-box {height:80px; padding:20px 20px 0px 20px;}
    .page_none {padding:24% 10% 14% 10%; background-position:center 30px;}
	.mainvisual .cycle-slideshow {height:220px;}
	.page_none {padding-left:20%;}
	footer {padding: 10px 0 20px 0;}
	footer .inner-wrap .foot-logo { display: none;}
	footer .inner-wrap ul.copy {float: none; }
	footer .cs-center {position: relative;}
	footer .inner-wrap ul.copy li {display: inline-block; padding-bottom:0px; font-size: 1.3rem;}
	footer .inner-wrap ul.copy li.company { padding-bottom:5px; padding-right: 10px;}
	footer .inner-wrap + .inner-wrap {padding: 2.8rem 0  1.5rem 0;}
	footer .inner-wrap ul.sub-util li {padding: 5px 10px; font-size: 1.4rem;}
	footer .cs-center {top:0rem; text-align:center;}
	footer .cs-center .tel {font-size: 1.5rem;}
	footer .cs-center span {display: inline-block; font-size: 1.3rem; line-height: 1.5rem;}
	footer .cs-center span + span {margin-left: 5px;}
	footer .cs-center span br {display: none;}
	footer .cs-center .tel {padding-bottom:5px;}
	.section1 h2,
	.section2 h2,
	.section3 h2,
	.section6 h2,
	.section7 h2 {font-size:2.4rem}
	.section1 {padding: 0rem 0 2rem 0;}
	.section2 {padding: 2rem 0 1rem 0;}
	.section3 {padding: 2rem 0 3rem 0;}
	.section5 {padding: 2rem 0 2rem 0;}
	.section6 {padding: 2rem 0 2rem 0;}
	.section7 {padding: 3rem 0 3rem 0;}
     ul.think-list, ul.review-list {width: 90%}
    #review .slick-dots  {bottom: -40px;}
    ul.review-list li .ui.card {padding: 2.2rem 2rem;}
    #think .slick-dots li button:before { font-size: 1.5rem !important;}
    #think .slick-dots {top: -10px;}
    #think .slick-dots li {margin: 0 5px !important;}
    #think .slick-dots li button:before {font-size: 1.6rem !important;}
	.section5 ul.banner-list li {width:calc((100% / 3) - 10px); text-align:center;}
	.section6 ol li {width: calc((98% / 2) - 10px);}
	.section6 ol li .desc {font-size: 1.4rem; line-height: 2rem}
	.section6 ol li .step {padding-top: 8.5rem; background-size:auto 65px !important;}
	.section6 h3 {padding: 4px 0 10px 0; font-size:2rem;}
	.section7 .btn-area a {font-size: 1.4rem;}

}