@charset "utf-8";

/* Common */
:root {--tm-col:#1504E7;}
.title {text-align: center; color: #fff; margin: 0 0 7%;}
.title p {font-size: 18px; font-weight: 100; margin: 0 0 2%;}
.title h4 {font-size: 27px; font-weight: 400;}
.half .subTitle p{font-size: 40px; font-weight: 100; margin: 0 0 4%;}
.half .subTitle h5{font-size: 40px; font-weight: 400; margin: 0 0 4%;}
.half .text p{font-weight: 100; font-size: 16px; line-height: 30px; margin: 0 0 4%;}
.half .text a{color: #fff; font-size: 20px;}
a {color: #fff; cursor: pointer;}
.service .deTitle {margin: 0 0 13%; position: relative;}
.service .deTitle::after {content: ""; background-color: #fff; width: 880px; height: 2px; position: absolute; left: 19%; top: 10px;}
.service .deTitle .left {position: absolute; left: 0; text-align: left;}
.service .deTitle .left p {font-size: 30px; margin: 0 0 17px;}
.service .deTitle .left h4 {font-size: 35px;}
.service .deTitle .right {position: absolute; right: 0; text-align: left;}
.service .deTitle .right p {}
.service .half {text-align: left;}
.service .half:nth-child(3) {margin: 0 0 0 52%;}
.service .half img {margin: 0 0 4%;}
.service .half b {font-size: 30px; margin: 0 0 2%;}
.service .half p {line-height: 24px;}
.logoTitle {text-align: center; display: none;}
.half_box {overflow:hidden;}
.upBtn {padding: 6px 13px; background: rgba(255,255,255,.5); border-radius: 56px; position: fixed; right: 50px; bottom: 50px; transition: all .3s ease; opacity: 0; text-align: center;}
.upBtn.on {opacity: 1;}
.upBtn:hover {background: rgba(255,255,255); transition: all .3s ease;}
.upBtn i {color: black; font-size: 30px; margin: 0 0 2px;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background: #979797 !important; border: 1px solid #6c6c6c !important; color: #fff !important;}



/* Mobile Notice list */
.m_noti_list {}
.m_noti_list li {text-align: left;}
.m_noti_list li a {display: block; padding: 10px 5px 15px 5px; border-bottom: 1px solid rgba(255,255,255,.2);}
.m_noti_list li a em {font-size: 13px; opacity: .6; font-weight: 100}
.m_noti_list li a h5 {font-size: 16px;}

/**/
.mobile {display: none; margin: 0 0 15%;}
.pc {display: block}
.pagenate {margin: 0 0 15%;}


    /* Header */
header {position: fixed; text-align: center; padding: 30px; width: 100vw; box-sizing: border-box; z-index: 10; background: rgba(0,0,0,0.7);}
header.mobileMenu {background: black;}
header > ul li.mobileMenu {display: block;}
header {}
header h1 {position: absolute; width: 100px;}
header h1 a {}
header h1 a img {}
header > ul {}
header > ul > li {display: inline-block;}
header > ul > li a {color: #fff; padding: 20px;}
header > ul > li a.on {color: rgba(255,255,255,.6);}
header > ul > li a:hover {color: rgba(255,255,255,.6);}
header i {color: #fff; font-size: 35px; position: absolute; right: 20px; top: 20px;}


/* Main */
.main {background-image: url("../img/visualImg1.png"); background-size:cover; color: #fff;text-align: center; padding: 180px 9%; height: 100vh;}
.main img {margin: 14% 0 1%; width: 530px;}
.main h5 {font-size: 24px; opacity: .6;}
.main .swipeBtn {margin: 0 0 50px;}
.main .swipeBtn ul {}
.main .swipeBtn ul li {display: inline-block; margin: 0 12px 0 0; background-color: #848484; padding: 7px;}
.main .swipeBtn ul li.clicked {background-color: #1504E7;}
.main .swipeBtn ul li:last-child {margin-right: 0;}
.main h3 {font-size: 43px;}
.main .logoTitle {text-align: center;}
.main a {width: 24%; margin: 0 0 9%; display: none;}
.main a img {width: 145px; margin: 0 0 4%;}

/* Store */
.store {overflow: hidden;}
.store .half {float: left; position: relative;}
.store .half img {}
.store .store_wrap:before {content:''; width:100%; height:100%; background-color:rgba(0,0,0,.7); position:absolute; left:0; top:0; transition: all .5s ease;}
.store .half .store_wrap > div {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; text-align: center;}
.store .half .store_wrap > div h5 {font-size: 33px; margin: 0 0 11%;}
.store .half .store_wrap > div a {color: black;padding: 4% 11%;background-color: #fff;border-radius: 15px;font-size: 18px;text-transform:uppercase; border-radius:inherit; font-size: 14px; transition: all .3s ease;}
.store .half .store_wrap > div a:hover { background-color: rgba(255,255,255,.6); transition: all .3s ease;}
.store .half:hover .store_wrap:before {width:0; transition: all .5s ease;}

/* Mainclass */
.mainClass {overflow: hidden;}
.mainClass .half {float: left; position: relative;}
.mainClass .half img {}
.mainClass .half .textBox {position: absolute;left: 50;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%); color: #fff;}
.mainClass .half .textBox h5 {font-size: 30px; margin:  0 0 11%;}
.mainClass .half .textBox p {font-size: 19px; line-height: 40px; margin: 0 0 2%;}
.mainClass .half .textBox a {color: #fff; width: 123px; width: auto !important; position: relative; font-weight: 100; text-transform: uppercase; font-size: 14px; opacity: .7;}
.mainClass .half .textBox a:after {content:''; background:url(../img/viewBtn.png) left center no-repeat; display:inline-block; width:24px; height:24px; position:absolute; right:-30px; top:0; transition: all .3s ease;}
.mainClass .half .textBox a:hover:after {right:-40px; transition: all .3s ease;}
.mainClass .half .textBox a:hover {opacity:1;}
.mainClass .half .textBox a img {}
.mainClass .half .top {position: relative; text-align: center;}
.mainClass .half .top img {}
.mainClass .half .top img > div {}
.mainClass .half .top img > div h5 {}
.mainClass .half .top img > div h5 a {}
.mainClass .half .top img > div h5 a img {}
.mainClass .half .bottom {position: relative; text-align: center;}
.mainClass .half .bottom img {}
.mainClass .half .bottom img > div {}
.mainClass .half .bottom img > div h5 {}
.mainClass .half .bottom img > div h5 a {}
.mainClass .half .bottom img > div h5 a img {}
.mainClass .mainClass_wrap:before {content:'';position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(56,56,56,.7); opacity:1; transition: all .3s ease;}
.mainClass .mainClass_wrap:hover:before {opacity:0; transition: all .3s ease;}

/* Partnership */
.partnership {background-image: url("../img/partbg.png"); background-size: cover; padding: 7% 0;}
.partnership .title {text-align: center; color: #fff; margin: 0 0 7%;}
.partnership .title p {font-size: 18px; font-weight: 100; margin: 0 0 2%;}
.partnership .title h4 {font-size: 27px; font-weight: 400;}
.partnership .logoBlank {background-color: #fff; text-align: center; padding: 6% 0;}
.partnership .logoBlank ul {margin: 0 auto; width: 1000px; overflow:hidden; }
.partnership .logoBlank ul li {float:left; width:25%; padding: 20px 0;}
.partnership .logoBlank ul li img {vertical-align: middle;}
/* body > div.partnership > div.logoBlank > ul > li:nth-child(n+5) {margin: 0 30px 0 0;}
body > div.partnership > div.logoBlank > ul > li:nth-child(4), body > div.partnership > div.logoBlank > ul > li:nth-child(8) {margin: 0;} */




/* About */
.about {background-color: black; padding: 13% 0 65px;}
.about .title {}
.about .title p {}
.about .title h4 {}

/* Make */
.about .make {overflow: hidden;}
.about .make .half {float: left; background-color: #171717; color: #fff;height: 635px; position: relative;}
.about .make .half:first-child { padding: 8% 10% 0 2%;}
.about .make .half .text {float: right;}
.about .make .half .text h3 {font-size: 65px; line-height: 70px; margin: 0 0 11%; position: relative;}
.about .make .half .text h3::after {    content: ""; width: 100px; height: 2px; background-color: #fff; position: absolute; left: 0; bottom: -15%;}
.about .make .half .text > p {font-size: 15px; line-height: 32px; text-align: left;}
.about .make .half > p.deco {position: absolute; font-size: 11px; line-height: 20px;}

/* More */
.more {color: #fff; overflow: hidden;}
.more .half {float: left; height: 621px;}
.more .half:last-child {padding: 6% 12% 0 0;}
.more .half img {}
.more .half .text {float: right; text-align: right;}
.more .half .text h3 {font-size: 65px; line-height: 80px; position: relative; margin: 0 0 9%;}
.more .half .text h3 em {position: absolute; left: 22%;}
.more .half .text p {font-size: 17px; line-height: 30px;}
.more .half .text p:last-child {margin: 5% 0 0;}

/* From */
.from {background-image: url("../img/from.png"); background-size: cover; height: 900px; position: relative;}
.from .text {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;}
.from .text h3 {font-size: 45px; margin: 0 0 12%;}
.from .text p {font-size: 15px; line-height: 39px;}
.from .text p:last-child {margin: 3% 0 0;}
.from .text p:last-child em {font-size: 25px;}

/* Gravity */
.gravity {padding: 7% 0; color: #fff;}
.gravity h3 {font-size: 55px; text-align: right; line-height: 80px; margin: 0 8% 4%;}
.gravity ul {text-align: center;}
.gravity ul li {display: inline-block; position: relative; width: 21%;}
.gravity ul li img {height: 100%; width: 100%;}
.gravity ul li .layer {width: 100%; height: 100%; color: black; position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, 0.7); opacity: 0; transition: all .3s ease;}
.gravity ul li .layer:hover {opacity: 1; transition: all .3s ease;}
.gravity ul li .layer .text {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
.gravity ul li .layer .text b {font-size: 35px; margin: 0 0 6%; font-weight:800;}
.gravity ul li .layer .text p {font-size: 16px; line-height: 30px;}

/* Coach */
.coach {text-align: center; padding: 0 0 7%;}
.coach > div {margin: 0 0 4%;}
.coach .title {}
.coach .title h4 {}
.coach ul {text-align: center; overflow: hidden;}
.coach ul li {display: inline-block; margin: 0 2% 0 0; color: #fff; width: 23%;}
.coach ul li:last-child {margin: 0;}
.coach ul li img{margin: 0 0 12%;}
.coach ul li .text {height: 260px;}
.coach ul li .text b {font-size: 35px; margin: 0 0 10%;}
.coach ul li .text p {font-size: 17px; line-height: 28px; font-weight: 100;}
.coach ul li > a {background-color:#FF0000; color:#fff; transition: all .3s ease; font-size: 17px; padding: 10px 17px;}
.coach a {}
.coach a p {color: #fff; font-size: 23px; margin: 0 0 15%;}
.coach a img {width: 40%;}
.coach ul li:last-child > a {background-color: #952782; color:#fff; transition: all .3s ease;}
.coach ul li:last-child > a:hover {background-color: #6b1d5e; transition: all .3s ease;}s
.coach ul li > a {}
.coach ul li > a:hover {background-color:#b10909; transition: all .3s ease;}
.coach ul li > a i {vertical-align: baseline;}

/* classtype */
.classtype {color: #fff; text-align: center;}
.classtype .title {}
.classtype .title h4 {}
.classtype .half {float: left;}
.classtype .half .subTitle{}
.classtype .half .subTitle > div{}
.classtype .half .subTitle h4 {position: relative;}
.classtype .half .subTitle h4::before {content: ""; width: 500px; height: 3px; background-color: #fff; position: absolute; left: 50%; top: 16px; transform: translate(-50%, -50%);}
.classtype .half .subTitle b {font-size: 28px; position: relative; background-color: black; padding: 5px 9px;}
.classtype .half img {margin: 3% 0;}
.classtype .half p {font-size: 16px; line-height: 40px;}



/* Business */
.business {background: black; padding: 13% 0 65px;}
.business .title {}
.business .title h4 {}

/* Class101 */
.business .class101 {background-image: url("../img/class101bg.png"); background-size: cover; height: 500px;}
.business .class101 .half{background: rgba(0, 0, 0, 0.7); color: #fff; padding: 0 8%; height: 100%; position: relative}
.business .class101 .half .subTitle{}
.business .class101 .half .text {position: absolute; top: 50%; transform: translate(0, -50%);}
.business .class101 .half .subTitle p{font-size: 40px; font-weight: 100; margin: 0 0 4%;}
.business .class101 .half .subTitle h5{font-size: 40px; font-weight: 400; margin: 0 0 4%;}
.business .class101 .half .text p{font-weight: 100; font-size: 16px; line-height: 30px;}
.business .class101 .half .text p:first-child {opacity: .7;}
.business .class101 .half .text a {position: relative; font-weight: 100; text-transform: uppercase; font-size: 14px; opacity: .7; color: #fff}
.business .class101 .half .text a:after {content:''; background:url(../img/viewBtn.png) left center no-repeat; display:inline-block; width:24px; height:24px; position:absolute; right:-30px; top:0; transition: all .3s ease;}
.business .class101 .half .text a:hover:after {right:-40px; transition: all .3s ease;}

/* Youtube */
.business .youtube {background-image: url("../img/youtubebg.png"); background-size: cover; height: 500px;}
.business .youtube .half{background: rgba(0, 0, 0, 0.7); color: #fff; padding: 0 8%; height: 100%; position: relative; float: right;}
.business .youtube .half .subTitle{}
.business .youtube .half .text {position: absolute; top: 50%; transform: translate(0, -50%);}
.business .youtube .half .subTitle p{font-size: 40px; font-weight: 100; margin: 0 0 4%;}
.business .youtube .half .subTitle h5{font-size: 40px; font-weight: 400; margin: 0 0 4%;}
.business .youtube .half .text p{font-weight: 100; font-size: 16px; line-height: 30px; margin: 0 0 4%; opacity: .7;}
.business .youtube .half .text a{color: black; font-size: 17px; background: #fff; padding: 10px 17px;}
.business .youtube .half .text a:hover {background: #979797;color: #fff;}

/* goods */
.business .goods {color: #fff; overflow: hidden;}
.business .goods .half {float: left; padding: 8%; height: 70vh; position: relative;}
.business .goods .half:first-child {color: black; background: white;}
.business .goods .half > .text {position: absolute; top: 50%; transform: translate(0, -50%);}
.business .goods .half > .text .subTitle {}
.business .goods .half > .text .subTitle p {font-weight: 400; font-size: 20px; opacity: .7;}
.business .goods .half > .text .subTitle h5 {}
.business .goods .half > .text > p {font-weight: 300;}
.business .goods .half ul {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.business .goods .half ul li {position: relative;}
.business .goods .half ul li:hover .layer {opacity: 1;}
.business .goods .half ul li img {width: 100%; height: 100%;}
.business .goods .half ul li .layer {height: 100%; position: absolute; left: 0; top: 0; width: 100%; padding: 10% 8% 0;background: rgba(0, 0, 0, 0.7); opacity: 0;}
.business .goods .half ul li .layer {text-align: right;}
.business .goods .half ul li .layer h5 {font-size: 30px; margin: 0 0 4%}
.business .goods .half ul li .layer p {}

/* Comu */
.business .comu {color: #fff; padding: 16% 0; position: relative; overflow: hidden; background-image: url("../img/comubg.png"); background-size: cover;}
.business .comu .layoutfix {}
.business .comu .layoutfix img:first-child {top: 62%; left: 5%;}
.business .comu .layoutfix img {position: absolute; right: 5%; top: -26%;}
.business .comu .layoutfix .text {text-align: center;}
.business .comu .layoutfix .text p:first-child {font-size: 31px; font-weight: 100; margin: 0 0 2%;}
.business .comu .layoutfix .text h5 {font-size: 35px; margin: 0 0 2%;}
.business .comu .layoutfix .text p {font-size: 18px; line-height: 30px; font-weight: 100; margin: 0 0 2%;}
.business .comu .layoutfix .text b:first-child {}
.business .comu .layoutfix .text b {display: block; font-size: 15px; margin: 5px;}



/* Service */
.service {background-color: black; color: #fff; text-align: center;}
.service .creating {background-image: url("../img/contentsbg.png"); background-size: cover; height: 937px;}
.service .creating .text {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.service .creating .text .title {}
.service .creating .text .title h4 {margin: 0 0 17%;}
.service .creating .text h5 {font-size: 35px; margin: 0 0 13%; position: relative;}
.service .creating .text h5:after {content: ""; width: 90px; height: 2px; background: #fff; position: absolute; left: 50%; transform: translate(-50%,0); bottom: -27px;}
.service .creating .text h6 {font-size: 30px; font-weight: 100; margin: 0 0 9%;}
.service .creating .text p {line-height: 24px;}

.service .housting {}
.service .housting .layoutFix {width: 1500px; margin: 0% auto; position: relative; padding: 5% 0;}
.service .housting .deTitle {margin: 0 0 13%; position: relative;}
.service .housting .deTitle::after {content: ""; background-color: #fff; width: 880px; height: 2px; position: absolute; left: 19%; top: 10px;}
.service .housting .deTitle .left {position: absolute; left: 0; text-align: left;}
.service .housting .deTitle .left p {font-size: 30px; margin: 0 0 17px;}
.service .housting .deTitle .left h4 {font-size: 35px;}
.service .housting .deTitle .right {position: absolute; right: 0; text-align: left;}
.service .housting .deTitle .right p {}
.service .housting .half {text-align: left;}
.service .housting .half:nth-child(3) {margin: 0 0 0 52%;}
.service .housting .half img {margin: 0 0 4%;}
.service .housting .half b {font-size: 30px; margin: 0 0 2%;}
.service .housting .half p {line-height: 24px;}

.service .streetBrand {}
.service .streetBrand .layoutFix {width: 1500px; margin: 0% auto; position: relative; padding: 5% 0;}
.service .streetBrand .layoutFix .diTitle {}
.service .streetBrand .layoutFix .deTitle::after {width: 830px;}
.service .streetBrand .layoutFix .diTitle .left {}
.service .streetBrand .layoutFix .diTitle .left p {}
.service .streetBrand .layoutFix .diTitle .left h4 {}
.service .streetBrand .layoutFix .diTitle .right {}
.service .streetBrand .layoutFix .diTitle .right p {}
.service .streetBrand .layoutFix .content {margin: 0 0 3%;}
.service .streetBrand .layoutFix .content img {}
.service .streetBrand .layoutFix a {background-color: #4B39EA; color: #fff; transition: all .3s ease; padding: 9px 35px;}
.service .streetBrand .layoutFix a:hover {background-color: #271f6f; transition: all .3s ease;}

.service .offline {height: 120vh;}
.service .offline .layoutFix {width: 1500px; margin: 0% auto; position: relative; padding: 5% 0;}
.service .offline .layoutFix .deTitle {}
.service .offline .layoutFix .deTitle .left {}
.service .offline .layoutFix .deTitle .left p {}
.service .offline .layoutFix .deTitle .left h4 {}
.service .offline .layoutFix .deTitle .right {}
.service .offline .layoutFix .deTitle .right p {}
.service .offline .layoutFix .half {float: left; margin: 0; text-align: center;}
.service .offline .layoutFix .half img {}
.service .offline .layoutFix .half h5 {font-size: 23px;}



.service .offline .layoutFix .content .half {float: left;}
.service .offline .layoutFix .content .half img {}
.service .offline .layoutFix .content .half h5 {font-size: 23px;}
.service .offline .layoutFix .content .half p {text-align: center; margin: 25% 0 0; font-size: 17px; line-height: 35px;}
.service .offline .layoutFix .content .half h5 {}

.service .offline .text {}
.service .offline .text p {}
.service .offline .half {}
.service .offline .half img {}

/* Support */

/* Contact */
.contact {background: black; color: #fff; padding: 13% 0 65px; text-align: center; background-image: url("../img/contactbg.png"); background-size: cover;}
.contact .title {}
.contact .title h4 {}
.contact .layoutfix {width: 1500px; margin: 0 auto;}
.contact .layoutfix .subMenu {height: 110px;}
.contact .layoutfix .subMenu .half {float: left;}
.contact .layoutfix .subMenu .half a {font-size: 30px; position: relative; cursor: pointer; color: rgba(255,255,255,.5);}
.contact .layoutfix .subMenu .half a.clicked {color: #fff;}
.contact .layoutfix .subMenu .half a:after {content: ""; width: 70px; height: 3px; background: rgba(255,255,255,.5); position: absolute; left: 50%; top: 40px; transform: translate(-50%, -50%);}
.contact .layoutfix .subMenu .half:first-child a:after {background: #fff;}
.contact .layoutfix .infoBlank {background: rgba(0,0,0,0.5); padding: 11%;}
.contact .layoutfix .infoBlank .text .top {margin: 0 0 5%;}
.contact .layoutfix .infoBlank .text .top:after {}
.contact .layoutfix .infoBlank .text .top h5 {font-size: 20px; margin: 0 0 2%;}
.contact .layoutfix .infoBlank .text .top p {font-size: 18px; line-height: 30px;}
.contact .layoutfix .infoBlank .text .top em {color: rgba(255,255,255,.5); vertical-align: initial;}
.contact .layoutfix .infoBlank .text .bottom {}
.contact .layoutfix .infoBlank .text .bottom h5 {font-size: 20px; margin: 0 0 2%;}
.contact .layoutfix .infoBlank .text .bottom p {font-size: 18px; line-height: 30px;}
.contact .layoutfix .infoBlank .text .bottom em {color: rgba(255,255,255,.5); vertical-align: initial;}
.noticeList .layoutfix .subMenu .half a,
.contact .layoutfix .subMenu .half a,.noticeView .layoutfix .subMenu .half a {font-weight:800 !important;}

/* NoticeList */
.noticeList {background: black; color: #fff; padding: 13% 0 65px; text-align: center;}
.noticeList .title {}
.noticeList .title h4 {}
.noticeList .layoutfix {}
.noticeList .layoutfix {width: 1500px; margin: 0 auto;}
.noticeList .layoutfix .subMenu {height: 110px;}
.noticeList .layoutfix .subMenu .half {float: left;}
.noticeList .layoutfix .subMenu .half a {font-size: 30px; position: relative; cursor: pointer; color: rgba(255,255,255,.5)}
.noticeList .layoutfix .subMenu .half a.clicked {color: #fff;}
.noticeList .layoutfix .subMenu .half a:after {content: ""; width: 70px; height: 3px; background: rgba(255,255,255,.5); position: absolute; left: 50%; top: 40px; transform: translate(-50%, -50%);}
.noticeList .layoutfix .subMenu .half:last-child a:after {content: ""; width: 70px; height: 3px; background: #fff; position: absolute; left: 50%; top: 40px; transform: translate(-50%, -50%);}
.noticeList td,.noticeList th {border-bottom: 1px solid #a7a7a7; padding: 1%;}
.noticeList tr.pin {background:rgba(102,102,255,.3);}
.noticeList tr:hover {background-color: gray;}
.noticeList tbody td:nth-child(2) {text-align: left; }
.noticeList th {border-top: 2px solid #a7a7a7;border-bottom: 2px solid #a7a7a7; padding: 1%}
.noticeList table {margin: 0 0 5%; background: rgba(255,255,255,.1);}
.noticeList table a {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;}
.noticeList table a.postBtn {padding: 11% 24%; }
.noticeList .searchWrap {}
.noticeList .searchBox {margin: 4% 0 17px; text-align: right;}
.noticeList .searchBox input {padding: 5px;border: 1px solid #eee; height: 35px;}
.noticeList .searchBox a {padding: 10px 25px;}
.pagenate a {color: #979797; margin: 0 20px 0 0; font-size: 17px;}
.pagenate a i {color: #979797;}
.pagenate a i:hover {color: #fff;}
.pagenate a:last-child {margin: 0;}
.pagenate a:hover {color: #fff;}
.pagenate a.on {color: #fff;}

.noticeList .searchBox table {}
.noticeList .searchBox table tr {}
.noticeList .searchBox table tr td {border-bottom: 0;}
.noticeList .searchBox table tr td input {padding: 5px;border: 1px solid #eee; height: 35px;}
.noticeList .searchBox table tr td select {padding: 5px; border: 1px solid #eee; height: 35px;}
.noticeList .searchBox table tr td select option {}
.noticeList .searchBox table tr td a {}
.noticeList .searchBox table tr i {color: #fff}

/* NoticeView */
.noticeView {background: black; color: #fff; padding: 13% 0 65px; text-align: center;}
.noticeView .title {}
.noticeView .title h4 {}
.noticeView .layoutfix {margin: 11% 0;}
.noticeView .layoutfix {width: 1500px; margin: 0 auto;}
.noticeView .layoutfix .subMenu {height: 110px;}
.noticeView .layoutfix .subMenu .half {float: left;}
.noticeView .layoutfix .subMenu .half a {font-size: 30px; position: relative; cursor: pointer; color: rgba(255,255,255,.5);}
.noticeView .layoutfix .subMenu .half a.clicked {color: #fff;}
.noticeView .layoutfix .subMenu .half a:after {content: ""; width: 70px; height: 3px; background: rgba(255,255,255,.5); position: absolute; left: 50%; top: 30px; transform: translate(-50%, -50%);}
.noticeView .layoutfix .subMenu .half:last-child a:after {content: ""; width: 70px; height: 3px; background: #fff; position: absolute; left: 50%; top: 30px; transform: translate(-50%, -50%);}

.noticeView .postContent {color: #fff}
.noticeView .postContent .top {padding: 15px 0; border-bottom: 2px solid rgba(255,255,255,.5)}
.noticeView .postContent .top h3 {font-size: 25px; margin-bottom: 10px;    word-break: break-all;
    line-height: 30px;}
.noticeView .postContent .top em {font-size: 16px; opacity: .7}
.noticeView .postContent .top + div {min-height: 350px; text-align: left; padding: 15px;word-break: break-all;
    line-height: 30px;}
.noticeView .postContent .content {border-bottom: 1px solid; margin: 0 0 10px;}
.noticeView .postContent .file {text-align: left; background: rgba(255,255,255,.2); padding: 15px; margin: 0 0 10px; }
.noticeView .postContent .file a {display: block; margin: 0 0 30px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;}
.noticeView .postContent .file a:last-child {margin: 0;}
.noticeView .file {height: auto; padding: 1%;}
.noticeView .btnBlank {text-align: left; position: relative;}
.noticeView .btnBlank a {background-color: white; color: black; padding: 8px 25px;}
.noticeView .btnBlank a.list {position: absolute; right: 0;}
.noticeView .btnBlank a:hover {background-color: gray; color: #fff;}


/* Main LayerPop */
/* LayerPop */
.layer_Pop {position:absolute; left:0; top:0; z-index:11; border:1px solid #ddd}
.layer_Pop .thumb {border:1px solid #ddd; box-sizing:border-box;}
.layer_Pop .thumb img {}
.layer_Pop .pop_conts {background-color:#fff; padding:10px; border-bottom:1px solid #ddd}
.layer_Pop .pop_close {overflow:hidden; background-color:#fff; border-top:0}
.layer_Pop .pop_close a {float:left; width:50%; box-sizing:border-box; text-align:center; padding:10px 0; font-size:13px; color:#333}
.layer_Pop .pop_close a:hover {text-decoration:underline;}
.layer_Pop .pop_close a:first-child {position:absolute; left:0; top:0;}
.layer_Pop .pop_close a:last-child {border-left:1px solid #ddd;}
.layer_Pop .pop_close .single_day {}
.layer_Pop .pop_close .btn_close {}

/* NoticeList Empty */
table tr th,table tr td {vertical-align:middle; }
.noticeList table tr.empty td {height:400px; opacity:.4}

/* Footer */
footer {}
footer .footertop {background-color: black; text-align: center; color: #fff; padding: 40px 0;}
footer .footertop h2 {margin: 0 0 1%;}
footer .footertop h2 img {width: 90px;}
footer .footertop p {line-height: 24px; margin: 0 0 10px; font-weight:100 !important;}
footer .footertop ul {}
footer .footertop ul li {display: inline-block;}
footer .footertop ul li img {margin: 0 20px 0 0;}
footer .footertop ul li:last-child img {margin: 0;}
footer .footerbottom {background-color: rgba(0,0,0,.7); text-align: center; color: #fff; padding: 22px;}
footer .footerbottom p {pacity: .7; font-weight: 100;}


/* mediaquary */

@media all and (max-width:300px) {
    .main img {padding: 0 11%;}
    .main h5 {padding: 0 21%;}
    .classtype .half .subTitle h4::before {width: 240px !important;}
    .half .subTitle h5 {font-size: 30px;}
    .business .goods .half ul li .layer h5 {margin: 0 0 10%;}
    .business .goods .half ul li {height: 30vh;}
    .service .creating .text h5 {line-height: 40px;}
    .service .housting .deTitle .left p {margin: 0 !important; line-height: 40px;}
    .service .housting .deTitle .left h4 {line-height: 50px;}
    .service .housting .half b {margin: 0 0 7% !important;}
    .service .streetBrand .layoutFix {padding: 90px 30px !important;}
    .service .deTitle .left p {margin: 0; line-height: 40px;}
    .service .deTitle .left h4 {line-height: 40px;}
    .service .streetBrand .layoutFix .content {margin: 0 0 8%;}
    .service .offline .layoutFix {padding: 90px 30px !important;}
    .service .offline .layoutFix .half img {margin: 0 0 15% !important;}
    .service .offline .layoutFix .half {margin: 0 0 15% !important;}
    .service .offline .layoutFix .half:last-child {margin: 0!important;}
    .service .creating .text h6 {line-height: 40px;}
    .service .creating .text h5:after {height: 0;}
    .contact .layoutfix .subMenu {height: auto;}
    .contact .layoutfix .subMenu .half {margin: 0 0 15%;}
    .contact .layoutfix .subMenu .half a {font-size: 20px;}
    .contact .layoutfix .subMenu .half a:after {top: 30px;}
    .contact .layoutfix .infoBlank {padding: 31% 11%;}
    .noticeList .layoutfix .subMenu .half a {font-size: 20px;}
    .noticeView .layoutfix .subMenu .half a {font-size: 20px;}
    .noticeView .postContent .top em {font-size: 17px; line-height: 30px;}
    .noticeList .layoutfix .subMenu {height: auto;}
    .noticeList .searchBox {padding: 26% 0 0;}
    .noticeList .layoutfix {padding: 0 10px 15% !important;}
    .noticeView .layoutfix .subMenu {height: auto;}
    .noticeView .postContent {padding: 26% 0 0;}
    .logoTitle {margin: 0 0 10% !important;}
    .contact .layoutfix .infoBlank .text .top h5 {line-height: 35px;}
    .about .title p {margin: 0 0 5% !important;}
    .noticeList {padding: 90px 0 0 !important;}
    .noticeView .btnBlank a.list {position: initial;}
    .noticeView .btnBlank a {display: block; text-align: center; margin: 0 0 5%;}
    .noticeView .btnBlank a:last-child {margin: 0; background: #979797; color: #fff;}
	.mainClass .half .textBox p {display:none; }
    .mobile-menu {top: -5px !important; right: -5px!important;}
    .coach ul li .text b {font-size: 30px;}
    .coach ul li .text p {font-size: 13px;}
}
@media all and (max-width:500px) {
    .main h3{ font-size: 24px !important;}
    .mainClass .half .textBox h5{font-size: 20px !important;}
    .more .half .text p {font-size: 14px;}
    .business .youtube .half .text p {margin: 0 0 7%;}
    .business .youtube .half .text a {padding: 10px 9px;}
    .business .comu .layoutfix .text p:first-child {font-size: 19px;}
    .business .comu .layoutfix .text h5 {font-size: 22px;}
    .business .comu .layoutfix .text b {font-size: 14px;}
    .business .comu .layoutfix img:first-child {width: 30%; position: initial; margin: 0 0 15%;}
    .business .comu .layoutfix img {width: 30% !important; position: initial; margin: 15% 0 0 ;}
    .business .comu .layoutfix {text-align: center;}
    .business .goods .half ul li .layer {padding: 15% 8% 0 !important;}
    .service .creating .text h5:after {bottom: -19px !important;}
    .more .half .text h3 {font-size: 45px; line-height: 70px;}
    .business .youtube .half .text a {font-size: 13px;}
}
@media all and (max-width:500px) {
    .main img {width: 270px !important;}
    .main h5 {font-size: 15px !important;}
    .classtype .half {margin: 0 0 10% 21% !important; width: 60% !important;}
    .classtype .half .subTitle h4::before {width: 291px; height: 3px; background-color: #fff; position: absolute; left: 50%; top: 16px}
    .classtype .half .subTitle b {font-size: 18px;}
    .classtype .half:last-child {margin: 0 0 0 21% !important;}
    .gravity ul li {width: 0 0 10%; width: 60% !important;}
    .about .make .half > p.deco {margin: 0 0 9% !important;}
    .about .make .half .text h3 {font-size: 35px; line-height: 40px; margin: 0 0 11%;}
    .about .make .half .text h3::after {bottom: -32% !important;}
    .partnership {padding: 90px 0;}
    .about .title p {margin: 0 0 4%;}
    .gravity h3 {font-size: 27px !important;  line-height: 56px !important;}
    .gravity ul li .layer {opacity: 1;}
    .gravity ul li .layer .text b {font-size: 30px !important;}
    .gravity ul li .layer .text b {margin: 0 0 11%;}
    .gravity ul li .layer .text p {font-size: 13px !important;}
    .from .text p {font-size: 14px !important;}
    .business .goods .half {padding: 0 !important;}
    .business .goods .half:first-child {text-align: center; padding: 45% 5% !important; height: auto !important;}
    .business .goods .half > .text {position: initial; transform: initial;}
    .business .comu .layoutfix .text h5 {line-height: 47px;}
    .business .class101 .half {padding: 30% 8%;}
    .business .class101 .half .text {position: initial; transform: initial;}
    .business .youtube .half {padding: 30% 8%;}
    .business .youtube .half .text {position: initial; transform: initial;}
    .business .comu {padding: 26% 5% !important;}
}
@media all and (max-width:600px) {
    .mainClass .half .textBox p {font-size: 14px;line-height: 29px;margin: 0 0 2%;}
    .mainClass .half .textBox h5 {font-size: 25px;}
    .gravity ul li .layer .text p {font-size: 14px; line-height: 30px;}
    .gravity h3 {line-height: 53px; font-size: 35px; margin: 0 0 8%;}
    .gravity {padding: 90px 0;}
    .more {padding: 90px 10px !important;}
    .from {height: auto; padding: 90px 10px;}
    .about .make .half:first-child {padding: 90px 0 30px !important}
    .about .make .half:last-child {padding: 0 8% 90px !important;}
    .from .text {position: initial; transform: initial;}
    .noticeList > div.layoutfix > table > thead > tr > th:nth-child(3) {display: none}
    .noticeList > div.layoutfix > table > tbody > tr > td:nth-child(3) {display: none}
    footer .footerbottom p {font-size: 13px;}
    footer .footertop p {font-size: 13px;}
    .noticeList td,.noticeList th {padding: 3%;}
    .noticeView th, .noticeView hd {padding: 3%;}
    .business .goods .half ul li .layer {padding: 9% 8% 0 !important;}
    .service .creating .text h5 {line-height: 45px;}
    .service .offline .layoutFix {padding: 90px 30px !important;}
    .service .offline .layoutFix .half img {margin: 0 0 15% !important;}
    .service .offline .layoutFix .half {margin: 0 0 15% !important;}
    .service .offline .layoutFix .half:last-child {margin: 0 !important;}
}
@media all and (max-width:650px) {
    .coach {padding: 0 0 90px !important;}
    .about .title {margin: 0 0 90px !important;}
    .coach ul li {margin: 0 0 15%; width: 100% !important;}
    .coach ul li .text b {margin: 0 0 7%;}
    .coach ul li .text {height: auto; margin: 0 0 7%}
}
@media all and (max-width:700px) {
    .gravity ul li {width: 70% !important; margin: 0 0 5% !important;}
    .gravity h3 {text-align: center;}
    .upBtn {left: 50%; bottom: 30px; transform: translate(-50%);}
    .contact .layoutfix .infoBlank .text .top h5 {font-size: 16px;}
    .contact .layoutfix .infoBlank .text .top p {font-size: 14px;}
    .contact .layoutfix .infoBlank .text .bottom h5 {font-size: 16px;}
    .contact .layoutfix .infoBlank .text .bottom p {font-size: 14px;}
    .noticeView .postContent .top h3 {font-size: 20px;}
    .noticeView .postContent .top em {font-size: 13px;}
    .menuWrap {width: 100% !important;}
}

@media all and (max-width:850px) {
    .from .text h3 {line-height: 60px; margin: 0 0 2%;}
    .service .creating .text {position: initial; transform: initial;}
    .service .creating .text h5:after {bottom: -47px;}
    .service .creating {height: auto; padding: 90px 30px !important;}
}
@media all and (max-width:900px) {
    .gravity h3 {margin: 0 8% 7%; line-height: 60px; font-size: 40px;}
    .gravity ul li {margin: 0 0 5%;}
    .service .housting .layoutFix {padding: 90px 30px 0 !important;}
    .service .housting .deTitle {margin: 0 0 15% !important;}
    .service .housting .half {margin: 0 0 15% !important;}
    .service .housting .half img {margin: 0 0 15% !important;}
    .service .streetBrand .layoutFix {padding: 90px 30px 0 !important;}
    .service .deTitle {margin: 0 0 15%;}
    .service .offline .layoutFix {padding: 90px 0 0 ;}
    .service .offline .layoutFix .deTitle {margin: 0 0 15%;}
    .service .housting .half:last-child {margin: 0 !important;}
}
@media all and (max-width:991px) {
    .main img {width: 410px;}
    .main h5 {font-size: 20px;}
    .store .half .store_wrap > div h5 {font-size: 20px;}
    .mainClass .half {width: 100%; float: none;}
    .logoBlank ul li {display: block}
    .business .comu {padding: 26% 0;}
    .business .comu .layoutfix img:first-child {top: 72%;}
    .business .comu .layoutfix img {top: -10%;}
    .business .comu .layoutfix .text p:first-child {margin: 0 0 2%; font-size: 26px;}
    .business .comu .layoutfix .text h5 {margin: 0 0 2%; font-size: 30px;}
    .business .comu .layoutfix .text p {font-size: 14px; margin: 0 0 2%;}
    .partnership .logoBlank ul:last-child {margin: 0;}
    .partnership .logoBlank ul {margin: 0;}
    .partnership .logoBlank ul li {width: 50%;}
    .partnership .logoBlank ul {width: auto;}
    .business .goods .half ul li .layer {opacity: 1;}
    .mainClass .half .textBox {text-align: center;}
    .mainClass_wrap {background-color: rgba(56,56,56,.7); width: 100%; height: 100%; left: 0; top: 0;}
    .mainClass .half .textBox p {font-size: 16px;}
}

@media all and (max-width:1000px) {
    .partnership .logoBlank {padding: 50px;}
}

@media all and (max-width:767px) {
    .main h3 {font-size: 33px;}
    .store .half {width: 100%; float: none;}
    .store .half .store_wrap > div h5 {font-size: 22px !important;}
    .gravity ul li .layer .text b {font-size: 45px;}
    .gravity ul li .layer .text p {font-size: 17px;}
    .noticeList .searchBox input {width: 100%; margin-bottom: 3px;}
    .noticeList .searchBox a {display: block; text-align: center; background-color: #222;}
    .business .goods .half ul li .layer h5 {font-size: 30px !important;}
    footer .footertop p {padding: 0 10px;}
    .mobile {display: block;}
    .pc {display: none;}
	.partnership .logoBlank ul li {float:none; width:100%;}

}
@media all and (max-width:1100px) {
    .store .half .store_wrap > div h5 {font-size: 20px;}
    .classtype .half {width: 100%; float: none; margin: 0 0 5%;}
    .classtype {padding: 0;}
    .coach > a {display: none;}
    .coach {padding: 0 0 90px;}
    .gravity ul li {width: 40%;}
    .gravity ul li:nth-child(2n) {margin: 0 0 3% 0;}
    .gravity ul li {margin: 0 3% 3% 0;}
    .business .class101 .half {width: 100%;}
    .business .youtube .half {width: 100%;}
    .business .goods .half ul li .layer {padding: 11% 8% 0;}
    .business .goods .half > .text .subTitle p {margin: 0 0 5%;}
    .business .goods .half {float: none; height: auto; padding: 8%; width: 100%;}
    .business .goods .half:first-child {height: 70vh;}
    .business .goods .half ul {position: initial; transform: initial;}
    .business .goods .half ul {width: 100% !important;}
    .business .goods .half ul li .layer h5 {font-size: 40px;}
    .about .make .half img {height: auto !important;}
}
@media all and (max-width:1140px) {
    .about .make .half {padding: 8%; width: 100%; float: none; text-align: center; height: auto;}
    .about .make .half > p.deco {position: initial; margin: 0 0 3%; }
    .about .make .half .text {float: none;}
    .about .make .half .text h3::after {width: 100px; left: 50%; transform: translate(-50%); bottom: -45%;}
    .about .make .half .text > p {font-size: 14px; line-height: 30px; text-align: center}
    .half .text p {margin: 0;}
    .about .make .half:first-child {padding: 8% 0;}
}
@media all and (max-width:1300px) {
    .business .comu .layoutfix img {width: 15%;}
    .service .housting {padding: 0;}
    .service .housting .layoutFix {width: auto !important; margin: 0%; padding: 90px;}
    .service .housting .deTitle {margin: 0 0 7%;}
    .service .housting .deTitle .left {position: initial; text-align: center; margin: 0 0 5%;}
    .service .housting .deTitle .left p {font-size: 30px; margin: 0 0 17px;}
    .service .housting .deTitle .left h4 {font-size: 35px;}
    .service .housting .deTitle .right {position: initial; text-align: center;}
    .service .housting .half img {margin: 0 0 4%;}
    .service .housting .half {text-align: center; margin: 0 0 5%; width: 100%;}
    .service .housting .half b {display: block; font-size: 30px; margin: 0 0 2%;}
    .service .housting .deTitle::after {height: 0;}
    .service .housting .half:nth-child(3) {margin: 0 0 5%;}
    .service .streetBrand .layoutFix {width: auto !important; margin: 0%; padding: 90px;}
    .service .streetBrand .layoutFix .deTitle::after {height: 0;}
    .service .offline .layoutFix {width: auto !important; margin: 0%; padding: 90px;}
    .service .offline .deTitle::after {height: 0;}
    .service .offline .layoutFix .deTitle {margin: 0 0 25%;}
    .service .offline .layoutFix .half img {width: 90% !important; margin: 0 0 5%;}
    .service .offline {height: auto !important;}
    .service .offline .layoutFix .half {float: none; width: 100%; margin: 0 0 5% ;}
    .service .deTitle .left {position: initial; text-align: center; margin: 0 0 5%;}
    .service .deTitle .right {position: initial; text-align: center;}

}
@media all and (max-width:1400px) {
    .coach ul li {width: 40%;}
}
@media all and (max-width:1500px) {
    .main {height: auto; padding: 27% 0;}
    .main img {margin: 0 0 1%;}
    header {background: transparent;}
    .store .half .store_wrap > div h5 {font-size: 20px;}
    header h1 {display: none;}
    header ul li {padding: 0 !important;}
    .menuWrap h1 {display: block; margin: 0 0 5%;}
    .pcMenu {display: none;}
    .mobile-menu {display: block !important;}
    .menuWrap {display: block !important; padding: 150px 0 !important;}
    .main a {display: initial;}
    .more {padding: 8% 0;}
    .more .half {float: none; height: auto; width: 100%;}
    .more .half:last-child {padding: 0;}
    .more .half .text {float: none; text-align: center;}
    .more .half .text h3 {margin: 0 0 5%;}
    .more .half .text h3 em {position: initial;}
    .more .half .text p:last-child {margin: 2% 0 0;}
    .about {text-align: center; padding: 90px 0;}
    .logoTitle {margin: 0 0 3%; display: block;}
    .about .title {margin: 0 0 5%;}
    .about .title p {margin: 0 0 1%;}
    .business {padding: 90px 0 0 ;}
    .service .creating {padding: 90px 0 0;}
    .contact {padding: 90px 0 0;}
    .contact .layoutfix {margin: 0; width: auto;}
    .noticeList .layoutfix {width: auto; margin: 0; padding: 10px;}
    .noticeList {padding: 90px 10px 0;}
    .noticeList .searchBox {width: auto;}
    .noticeView {padding: 90px 20px !important;}
    .noticeView .title {margin: 0 0 9% !important;}
    .coach > div {margin: 0;}
    .coach {padding: 0 0 14%}
}
@media all and (max-width:1600px) {
    .service .housting .layoutFix {width: 1190px;}
    .service .housting .deTitle::after {width: 510px; left: 27%;}
    .service .streetBrand .layoutFix {width: 1190px;}
    .service .streetBrand .deTitle::after {width: 510px; left: 27%;}
    .service .offline .layoutFix {width: 1190px;}
    .service .offline .deTitle::after {width: 510px; left: 27%;}
    .service .offline .layoutFix .half img {width: 70%;}
    .service .offline {height: 80vh;}
    .business .goods .half ul {width: 60%;}
    .noticeView {padding: 15% 5% 5%;}
    .noticeView .layoutfix {width: auto;}
}