@charset "utf-8";

/* 인트로 */
.intro { position:relative; width:100%; height:auto; background:#FFF; padding-bottom: 60px;}
.intro .TextBox {display:flex; align-items:center; justify-content:center; flex-direction:column; width:100%; height:auto; font-family:'NanumSquare'; margin-top:100px; transition: 0.25s ease;}
.intro .TextBox h2 {
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(to right, #fed100, #02bfad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    height: 110px;
    transition: font-size 0.25s ease;
    word-break: keep-all;
    text-align: center;
}
.intro .TextBox .subText { font-size: 26px; font-weight: 700; color:#333; margin-bottom: 14px; transition: font-size 0.25s ease; word-break: keep-all; text-align: center;}
.intro .inner { display: flex; justify-content:center; width: 100%; height: auto; margin-top:20px;}

.intro .btn-wrap { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; max-width:1200px; height:120px; padding-top:64px; margin: 0 auto;}
.intro .btn-wrap button { padding: 15px 50px; font-size: 17px; font-weight: bold; border-radius: 30px; margin: 0 5px;}
.intro .btn-wrap button.btnA {padding: 15px 80px; color:#FFF; background-color:#fed400; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); transition: all 0.20s ease;}
.intro .btn-wrap button.btnA:hover { background-color:#fe9b00; transition: all 0.20s ease;}
.intro .btn-wrap button.btnB { color:#888; background-color:#e9e9e9; transition: all 0.25s ease; font-weight: 500;}
.intro .btn-wrap button.btnB:hover { color:#FFF; background-color:#192a3c;}


/* 인트로 아이콘 모션 */
.swiper-wrap {position:relative; max-width:1280px; height:100%;} 
.swiper-wrap .depositbox_inner {align-items: flex-end;}
.swiper-wrap .swiper-btn { display: flex; justify-content: flex-end;}
.swiper-wrap .swiper-btn a {padding:0 4px; margin-bottom: 20px;}


.swiper-wrap .slider {height:240px; z-index: 1; border-radius:10px; transition: all 0.15s;} 
.swiper-wrap .slider .item {
    margin: 0 auto;
    display: block;
    width: 220px;
    height: 240px;
    background: #FFF;
    border:1px solid #ebebeb;
    text-align: center;
    padding: 5px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all 0.15s ease;
}
.swiper-wrap .item .iconbox {width:100px; height:auto; margin: 0 auto; margin-top:10px; margin-bottom: 20px;} 
.swiper-wrap .item .iconbox img {width: auto; height: auto; transition: all 0.20s ease;}

.swiper-wrap .swiper-slide:hover,
.swiper-wrap .swiper-slide-active { height:240px; z-index: 100;} 

.swiper-wrap .swiper-slide:hover .item,
.swiper-wrap .swiper-slide-active .item {
    width: 240px;
    height: 240px;
    margin-top: 0;
    background-color: #FFF;
    transform: translateY(-20px);
    border: 0px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #fece02, #06bfa9);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.swiper-wrap .swiper-slide:hover .item .iconbox,
.swiper-wrap .swiper-slide-active .item .iconbox {display: flex; align-items: center; justify-content: center; opacity: 1;}

.swiper-wrap .swiper-slide:hover .item .iconbox img,
.swiper-wrap .swiper-slide-active .item .iconbox img {width:90%; transition: all 0.20s ease;}

.swiper-slide .item .Box_Cont { width:100%; margin-top: 10px;}
.swiper-slide .item .Box_Cont h3 { font-size:20px; font-family:'NanumSquare'; font-weight: 800; color: #666;}
.swiper-slide:hover .item .Box_Cont h3,
.swiper-slide-active .item .Box_Cont h3 {color: #000; } 

.swiper-slide .item .Box_Cont .btn {display:block; font-size: 14px; color: #999; line-height: 2; margin-top: 2px;}
.swiper-slide:hover .item .Box_Cont .btn,
.swiper-slide-active .item .Box_Cont .btn {background: url("../images/swiper/plus.png")no-repeat center top 2px;  text-indent:-10000px;}



/* 공통 메인 Section Wrap */
.Main-SectionWrapA { position:relative; width:100%; height:auto; padding: 140px 0 160px 0; background: #FFF;}
.Main-SectionWrapB { position:relative; width:100%; height:auto; padding: 130px 0 140px 0; background: #FFF;}
.Main-SectionWrapC { position:relative; width:100%; height:auto; padding: 120px 0; background: #FFF;}

/* 공통 타이틀 */
.mTitle .TextBoxA { max-width:1200px; height:auto; margin: 0 auto; font-family:'NanumSquare'; transition: 0.25s ease; text-align:center; line-height: 1.5; margin-bottom:70px;}
.mTitle .TextBoxA h2 { font-size:48px; font-weight:800; color:#000; word-break: keep-all; text-align:center; margin-bottom:10px;}
.mTitle .TextBoxA h2 .Plus { position: relative; display:inline-block; padding-right:10px;}
.mTitle .TextBoxA h2 .Plus::after {
    display: block;
    content: '';
    position: absolute;
    top: 15%;
    right: -5%;
    width: 18px;
    height: 18px;
    background: url("../images/icon/plus.png")no-repeat center center;
    background-size: 100%;
}
.mTitle .TextBoxA .subText { font-size:26px; font-weight:700; color:#333; margin-bottom:14px; word-break:keep-all; text-align:center;}

/* 공통 메인 Section color */
.mColorBG-01 {background:#caf4ef;}
.mColorBG-02 {background:#e6f2fe;}
.mColorBG-03 {background:#f9fafc;}


/* 수강생관리 */
.M-Student {display: flex; flex-wrap: wrap; max-width:1200px; height:auto; background:#fed400; margin: 0 auto; border-radius:20px; font-family:'NanumSquare'; padding:4.166%;}
.M-Student .MS-Left {width: 50%; word-break: keep-all; text-align: center;}
.M-Student .MS-Left button {font-size: 17px; font-weight: bold; border-radius: 30px; margin: 0 5px; transform: rotate(-0.03deg);}
.M-Student .MS-Left button.btn {padding: 15px 50px; color:#FFF; background-color:#192a3c; transition: all 0.20s ease; margin-top: 30px;}
.M-Student .MS-Left button.btn:hover {color:#FFF; background:#000;}
.M-Student .MS-Right {width: 50%; word-break: keep-all; padding-left:68px; transform: rotate(-0.03deg);}
.M-Student .MS-Right .title {font-size: 34px; color: #000; font-weight: 700; margin-top: 34px; margin-bottom: 34px;}
.M-Student .MS-Right ul > li {font-size: 24px; color: #000; padding-left: 40px; margin-bottom: 14px; font-weight: bold; background:url('../images/icon/MS_dot1.png')no-repeat left center;}


/* 출결시스템 */
.M-Attend { max-width:1200px; min-height:640px; margin: 0 auto; font-family:'NanumSquare'; word-break: keep-all;} 
.M-Attend .MA-img {display: inline-block; width: 100%; text-align: center; padding:0px 30px 80px 30px;}
.M-Attend .MA-Wrap { display:flex; flex-wrap: wrap; width: 100%; height:180px; border-radius: 10px; overflow: hidden;}
.M-Attend .MA-Wrap .MAlist { width:33.333%; min-height: 180px; padding:30px 40px; background: #FFF;}
.M-Attend .MA-Wrap .MAlist:nth-child(2) { background:#e5f7f5;}
.M-Attend .MA-Wrap .MAlist .title {display:flex; align-items:center; width: 100%; height:50px; color:#000; font-size: 24px; font-weight: 800;}
.M-Attend .MA-Wrap .MAlist .title.M-Attend01 { background: url('../images/icon/M-Attend01.png')no-repeat right center;}
.M-Attend .MA-Wrap .MAlist .title.M-Attend02 { background: url('../images/icon/M-Attend02.png')no-repeat right center;}
.M-Attend .MA-Wrap .MAlist .title.M-Attend03 { background: url('../images/icon/M-Attend03.png')no-repeat right center;}
.M-Attend .MA-Wrap .details { width:100%; font-size: 18px; font-weight:bold; line-height: 1.6; transform: rotate(-0.03deg);}


/* 수납방법 , 아카데미업 협력사 */
.M-Receipt { max-width:1200px; min-height:640px; background:#fed400; margin: 0 auto; border-radius:20px; padding:3%; font-family:'NanumSquare'; word-break: keep-all;}
.M-Receipt .MR-Wrap { display:flex; flex-wrap: wrap; width: 100%; height:400px; border-radius: 10px; overflow: hidden;}
.M-Receipt .MR-Wrap .MRlist { width:33.333%; min-height: 400px; padding:60px 40px; background: #FFF;}
.M-Receipt .MR-Wrap .MRlist:nth-child(2) { background:#fff6ca;}
.M-Receipt .MR-Wrap .MRlist .title {display: inline-block; width:100%; height: 150px; font-size: 34px; color:#000; font-weight: 800; padding:90px 0 0 0;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt01 { background: url('../images/icon/M-Receipt01.png')no-repeat left top;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt02 { background: url('../images/icon/M-Receipt03.png')no-repeat left top;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt03 { background: url('../images/icon/M-Receipt02.png')no-repeat left top;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt04 { background: url('../images/img/academyup-intro04.png')no-repeat left top;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt05 { background: url('../images/img/academyup-intro05.png')no-repeat left top;}
.M-Receipt .MR-Wrap .MRlist .title.M-Receipt06 { background: url('../images/img/academyup-intro06.png')no-repeat left top;}
.M-Receipt .MR-Wrap .details { width:100%; font-size: 18px; font-weight:bold; line-height: 1.5; transform: rotate(-0.03deg);}
.M-Receipt .MR-infor {display: inline-block; width:100%; text-align: center; font-size: 24px; color: #453900; font-weight: bold; padding-top:70px; line-height: 1.5;}


/* Plus아카데미업 */
.M-Plus {display:flex; flex-wrap: wrap;  max-width:1200px; height:auto; margin: 0 auto; padding-top:20px; font-family:'NanumSquare';} 
.M-Plus .ListWrap { width:50%; min-height: 200px; margin-bottom:60px; padding:10px 40px;}
.M-Plus .ListWrap:nth-child(3) { margin-bottom:0px;}
.M-Plus .ListWrap:nth-child(4) { margin-bottom:0px;}
.M-Plus .ListWrap .title {display: inline-block; font-size: 34px; font-weight: 800;  margin-bottom: 10px;}
.M-Plus .ListWrap .details { width:100%; font-size: 18px; font-weight:bold; line-height: 1.5; padding: 10px 0; transform: rotate(-0.03deg);}
.M-Plus .ListWrap .details.M-Plus01 { background: url('../images/icon/M-Plus01.png')no-repeat right center;}
.M-Plus .ListWrap .details.M-Plus02 { background: url('../images/icon/M-Plus02.png')no-repeat right center;}
.M-Plus .ListWrap .details.M-Plus03 { background: url('../images/icon/M-Plus03.png')no-repeat right center;}
.M-Plus .ListWrap .details.M-Plus04 { background: url('../images/icon/M-Plus04.png')no-repeat right center;}


/* App 미디어홍보 */
.M-App {display:flex; flex-wrap: wrap; max-width:1200px; height:auto; padding-top: 20px; margin: 0 auto; font-family: 'NanumSquare';}
.M-App .leftWrap {display: flex; align-items: center; width:50%; height: auto;}
.M-App .leftWrap .contentBox {width:100%;}
.M-App .leftWrap .contentBox .academy {font-size:44px; font-weight:600;}
.M-App .leftWrap .contentBox .academy .number {font-size: 50px; font-weight:800; color: #ff8a00; letter-spacing: -3px; line-height: 1.4;}
.M-App .leftWrap .contentBox .student {font-size:44px; font-weight:600;}
.M-App .leftWrap .contentBox .student .number {font-size: 50px; font-weight: 800; color: #07c0a9; letter-spacing: -3px; line-height: 1.4;}
.M-App .leftWrap .contentBox .hello {font-size: 24px; font-weight:600; margin-top: 2%; margin-bottom:8%; color: #666;}
.M-App .leftWrap .contentBox .App a {display:inline-block; padding-right: 10px;}
.M-App .rightWrap {width:50%; height: auto; text-align: center; padding:0 20px;}


/* 고객상담 */
.M-Customer {max-width:1200px; height:auto; margin: 0 auto; text-align: center; font-family: 'NanumSquare'; color: #192a3c;}
.M-Customer h2 {font-size:24px; line-height:1; font-weight: 600; letter-spacing: -1.5px;}
.M-Customer .tel {font-size:64px; font-weight: 800; letter-spacing: -3px; margin-top: 16px;}
.M-Customer .time {margin-top:4px; transform: rotate(-0.03deg);}
.M-Customer .time span:first-child {position: relative; padding-right:20px;}
.M-Customer .time span:first-child::after {display: block; content: ''; position:absolute; width:1px; height:12px; right:6px; top:3px; background-color: #b7b9bb;}
.M-Customer button {font-size: 17px; font-weight: bold; border-radius: 30px; margin: 0 5px; transform: rotate(-0.03deg);}
.M-Customer button.btnC {padding: 15px 50px; margin-top: 20px; color:#FFF; background-color:#c1c1c1; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); transition: all 0.25s ease;}
.M-Customer button.btnC:hover { color:#FFF; background-color:#192a3c;}
.M-Customer button.btnD {padding: 15px 50px; margin-top: 20px; color:#FFF; background-color:#192a3c; text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); transition: all 0.25s ease;}
.M-Customer button.btnD:hover { color:#FFF; background-color:#ff8a00;}
.M-kakaoch { display: flex; align-items: center; justify-content: center;}


/* ######################################### 플러스샵 제품출력 ###########################################  Start */

/* 플러스샵 제품출력 */
#MainPlus {position: relative; width: 100%; max-width: 1400px; height:auto; margin: 0 auto; margin-top: 80px; margin-bottom:0px;}
#MainPlus .EventTitle {position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; height: auto; margin-top: 30px;}
#MainPlus .EventTitle .title {font-size: 38px; width:auto; margin: 0 auto;}
#MainPlus .EventTitle .title.MainiconA {padding-left: 34px; background: url('../images/product/icon/title_iconA.png')no-repeat left center;}
#MainPlus .EventTitle .sub_title {font-size: 24px; width:100%; margin: 0 auto; text-align: center; letter-spacing: -1.5px; font-weight: 600; margin-top:4px;}
#MainPlus .EventTitle .sub_title .speA { color: #cda000 ;}
#MainPlus .EventTitle .sub_title .speB { color: #07c0a9 ;}
#MainPlus .EventTitle .MainBtnMore {position: absolute; right: 0; padding: 6px 20px; border: 1px solid #000; font-size: 14px; border-radius: 20px; bottom: 0; font-weight: 600;}
#MainPlus .EventTitle .MainBtnMore:hover {border: 1px solid #000;}

/* 플러스샵 전자칠판 WAF 프로모션 */
#MainPlus .WAF { position: relative; max-width: 1400px; margin: 0 auto; margin-top: 50px;}


/* 유튜브 비디오 출력 */
#MainPlus .ProductVideo {
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; 
    margin-top: 60px;
    margin-bottom:30px;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
}
#MainPlus .ProductVideo .TextBox {position: absolute; width: 50%; height: auto; left:6%; bottom:14%; z-index:101; color: #FFF;}
#MainPlus .ProductVideo .TextBox span {display: block;}
#MainPlus .ProductVideo .TextBox .Title { font-size: 16px; padding-left: 34px;  background: url('../images/product/icon/title_iconA.png')no-repeat left center;}
#MainPlus .ProductVideo .TextBox .ProductName {font-size: 64px; font-family: 'Samsung Sharp Sans'; font-weight: 900;}
#MainPlus .ProductVideo .TextBox .ProductName em {font-family: 'Samsung Sharp Sans'; font-size: 24px; font-weight: 400; font-style: normal;}
#MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 16px;}
#MainPlus .ProductVideo .TextBox .Btn {
    position: relative; 
    font-family: 'Nanum Gothic';
    font-size:14px;
	color:#FFF;
	border-radius:30px;
	margin-top:14px;
	padding:8px 24px;
    line-height: 1;
    border: 1px solid #FFF;
	transition: all .2s ease;
    pointer-events: all;
}
#MainPlus .ProductVideo .TextBox .Btn:hover {background: #0176e8; color: #FFF; border: 1px solid #0176e8; transition: all .2s ease;}
#MainPlus .ProductVideo .Overlay {position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: block;}
#MainPlus .ProductVideo iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none; object-fit: cover;}
/* 프로모션 이벤트 광고 배너 출력 */
#MainPlus .ProductBanner {width: 100%; min-height: 100px; margin-top: 40px; border-radius: 20px; background: #F9F9F9; overflow: hidden;}


/* 추천제품 출력 */
#MainPlusPrd {position: relative; width: 100%; max-width: 1240px; min-height:400px; margin: 0 auto; margin-bottom: 80px;}
#MainPlusPrd .TitleBox {position: relative; display: flex; align-items: center; width: 100%; height: auto; margin-bottom: 40px;}

/* ######################################### 플러스샵 제품출력 ###########################################  End */


















/* *********** 미디어쿼리 1024 *********** */
@media screen and (max-width:1024px) {

    /* ######################################### 플러스샵 제품출력 ###########################################  Start */
    /* 플러스샵 제품출력 */
    #MainPlus {padding: 0 10px;}
    #MainPlus .EventTitle {margin-top: 30px;}
    #MainPlus .EventTitle .title {font-size: 34px;}
    #MainPlus .EventTitle .sub_title {font-size: 20px; margin-top:2px;}

    /* 유튜브 비디오 출력 */
    #MainPlus .ProductVideo { margin-bottom:20px; border-radius: 10px;}
    #MainPlus .ProductVideo .TextBox .Title { font-size: 15px;}
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 58px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {font-size: 22px; }
    #MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 16px;}
    #MainPlus .ProductVideo .TextBox .Btn { font-size:13px; color:#FFF; padding:6px 20px;}
    /* ######################################### 플러스샵 제품출력 ###########################################  End */


    /* 인트로 */
    .intro .TextBox { margin-top: 80px;}
    .intro .TextBox h2 { font-size: 40px; height: 70px;}
    .intro .TextBox .subText { font-size: 20px;}
    .intro .btn-wrap button.btnA {padding: 15px 60px;}

    /* 인트로 아이콘 모션 */
    .swiper-wrap .swiper-btn {margin-right: 10px;}
    .swiper-wrap .slider {height:240px;} 
    .swiper-wrap .slider .item { width: auto; height: 240px; padding: 5px; border:none;}
    .swiper-wrap .swiper-slide:hover .item,
    .swiper-wrap .swiper-slide-active .item { width: 200px; height: 240px; margin-top: 0;}

    /* 공통 메인 Section Wrap */
    .Main-SectionWrapA {padding:80px 0 0 0; }
    .Main-SectionWrapB {padding: 100px 0 120px 0;}
    .Main-SectionWrapC {padding: 100px 0;}

    /* 공통 타이틀 */
    .mTitle .TextBoxA {margin-bottom:50px; padding: 0 30px;}
    .mTitle .TextBoxA h2 { font-size:40px;}
    .mTitle .TextBoxA .subText { font-size:20px; margin-bottom:14px;}

    /* 수강생관리 */
    .M-Student {border-radius:0; padding:100px 30px;} 
    .M-Student .MS-Right .title {font-size: 28px;}
    .M-Student .MS-Right ul > li {font-size: 20px;}

    /* 출결시스템 */
    .M-Attend {min-height:auto; padding: 0 30px;} 
    .M-Attend .MA-img {padding:0px 30px 80px 30px;}
    .M-Attend .MA-img img {width:70%;}
    .M-Attend .MA-Wrap {height:auto; border-radius: 10px; overflow: hidden;}
    .M-Attend .MA-Wrap .MAlist { width:33.333%; min-height: 180px; padding:30px 20px; background: #FFF;}
    .M-Attend .MA-Wrap .MAlist .title {font-size: 20px;}
    .M-Attend .MA-Wrap .details {font-size: 17px;}

    /* 수납방법 */
    .M-Receipt { min-height:640px; border-radius:0px; padding:3%;}
    .M-Receipt .MR-Wrap .MRlist { width:33.333%; min-height: 400px; padding:60px 30px; background: #FFF;}
    .M-Receipt .MR-Wrap .MRlist .title {height: 140px; font-size: 28px;}
    .M-Receipt .MR-Wrap .details {font-size: 17px;}
    .M-Receipt .MR-infor {font-size: 20px;}

    /* Plus아카데미업 */
    .M-Plus {display:block; padding-top:20px;} 
    .M-Plus .ListWrap {min-width:600px; margin-bottom:40px; padding:10px 40px; margin: 0 auto;}
    .M-Plus .ListWrap:nth-child(3) {margin-bottom:40px;}
    .M-Plus .ListWrap .title {font-size: 28px;}
    .M-Plus .ListWrap .details {font-size: 17px;}

    /* App 미디어홍보 */
    .M-App {display:flex; padding-top:0px;}
    .M-App .leftWrap {width:50%; padding: 0 30px;}
    .M-App .leftWrap .contentBox .academy {font-size:40px;}
    .M-App .leftWrap .contentBox .academy .number {font-size: 44px;}
    .M-App .leftWrap .contentBox .student {font-size:40px;}
    .M-App .leftWrap .contentBox .student .number {font-size:44px;}
    .M-App .leftWrap .contentBox .hello {font-size: 20px; margin-top: 2%; margin-bottom:8%;}
    .M-App .leftWrap .contentBox .App a {padding-right:4px; width:40%;}

    /* 고객상담 */
    .M-Customer h2 {font-size:20px; }
    .M-Customer .tel {font-size:54px; margin-top: 14px;}
}



/* *********** 미디어쿼리 768 *********** */
@media screen and (max-width:768px) {


    /* ######################################### 플러스샵 제품출력 ###########################################  Start */
    /* 플러스샵 제품출력 */
    #MainPlus {padding: 0 10px;}
    #MainPlus .EventTitle {margin-top: 30px;}
    #MainPlus .EventTitle .title {font-size: 34px; text-align: center; word-break: keep-all;}
    #MainPlus .EventTitle .title.MainiconA {padding-left:0px; background: none;}
    #MainPlus .EventTitle .sub_title {font-size: 20px; margin-top:2px; word-break: keep-all;}
    #MainPlus .EventTitle .MainBtnMore {position: relative; margin-top: 10px;}

    /* 유튜브 비디오 출력 */
    #MainPlus .ProductVideo { margin-bottom:20px; border-radius: 10px;}
    #MainPlus .ProductVideo .TextBox .Title { font-size: 15px;}
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 58px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {font-size: 22px; }
    #MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 16px;}
    #MainPlus .ProductVideo .TextBox .Btn { font-size:13px; color:#FFF; padding:6px 20px;}
    /* ######################################### 플러스샵 제품출력 ###########################################  End */

 
    /* 인트로 */
    .intro { padding-bottom:0px;}
    .intro .btn-wrap { height:150px; padding-top:60px;}
    .intro .btn-wrap button { padding: 10px 30px; font-size: 15px;}
    .intro .btn-wrap button.btnA {padding: 10px 30px;}

    /* 인트로 아이콘 모션 */

    .swiper-wrap .slider {height:240px;} 
    .swiper-wrap .slider .item {width:180px; height: 240px; padding:4px;}

    .swiper-wrap .item .iconbox {width:74px; height:auto; margin-top:10px; margin-bottom: 20px;} 
    .swiper-wrap .item .iconbox img {width: 60px; height: auto;}

    .swiper-wrap .swiper-slide:hover,
    .swiper-wrap .swiper-slide-active { height:240px; z-index: 100;} 

    .swiper-wrap .swiper-slide:hover .item,
    .swiper-wrap .swiper-slide-active .item { width: 180px;height: 240px;margin-top: 0;}

    .swiper-wrap .swiper-slide:hover .item .iconbox img,
    .swiper-wrap .swiper-slide-active .item .iconbox img {width:100px;}

    .swiper-slide .item .Box_Cont h3 { font-size:18px;}
    .swiper-slide:hover .item .Box_Cont .btn,
    .swiper-slide-active .item .Box_Cont .btn {background: url("../images/swiper/plus.png")no-repeat center top 4px;}


    /* 공통 메인 Section Wrap */
    .Main-SectionWrapA {padding:60px 0 0 0; }
    .Main-SectionWrapB {padding: 80px 0 100px 0;}
    .Main-SectionWrapC {padding: 80px 0;}

    /* 공통 타이틀 */
    .mTitle .TextBoxA {margin-bottom:40px; padding: 0 30px;}
    .mTitle .TextBoxA h2 {font-size:32px;}
    .mTitle .TextBoxA h2 .Plus::after {top:15%; right:-3%; width:14px; height:14px;}
    .mTitle .TextBoxA .subText {font-size:18px;}


    /* 수강생관리 */
    .M-Student {padding:80px 30px;} 
    .M-Student .MS-Right .title {font-size: 24px;}
    .M-Student .MS-Right ul > li {font-size: 18px; margin-bottom: 10px; line-height: 1.5;}

    /* 출결시스템 */
    .M-Attend {min-height:auto; padding: 0 30px;} 
    .M-Attend .MA-img {padding:10px 30px 80px 30px;}
    .M-Attend .MA-img img {width:80%;}
    .M-Attend .MA-Wrap .MAlist { width:100%; min-height: 180px; padding:30px 30px;}

    /* 수납방법 */
    .M-Receipt { min-height:auto;  border-radius:0px; padding:2%;}
    .M-Receipt .MR-Wrap { display:flex; width: 100%; height:auto; border-radius: 10px;}
    .M-Receipt .MR-Wrap .MRlist {width:100%; min-height: 300px; padding:60px 30px; background: #FFF;}
    .M-Receipt .MR-Wrap .MRlist .title {height: 140px; font-size: 24px; font-weight: 800; padding:80px 0 0 0;}
    .M-Receipt .MR-infor {font-size: 17px; padding: 60px 20px;}

    /* App 미디어홍보 */
    .M-App .leftWrap {width:100%; padding: 0 30px; text-align: center; order: 2;}
    .M-App .leftWrap .contentBox .academy {font-size:34px;}
    .M-App .leftWrap .contentBox .academy .number {font-size: 40px;}
    .M-App .leftWrap .contentBox .student {font-size:34px;}
    .M-App .leftWrap .contentBox .student .number {font-size:40px;}
    .M-App .leftWrap .contentBox .hello {font-size: 18px;}
    .M-App .leftWrap .contentBox .App {width:70%; margin: 0 auto;}
    .M-App .leftWrap .contentBox .App a {padding-right:4px; width:40%;}
    .M-App .rightWrap {width:100%; padding:10px 0px; order: 1;}
    .M-App .rightWrap img {width:60%; margin-bottom:40px;}

    /* 고객상담 */
    .M-Customer h2 {font-size:18px;}
    .M-Customer .tel {font-size:48px; margin-top: 14px;}
    .M-Customer .time {font-size: 14px;}
    .M-Customer .time span:first-child::after {top:2px;}
    .M-Customer button {font-size: 15px;}
    .M-Customer button.btnC {padding: 12px 30px;}
}



/* *********** 미디어쿼리 650 *********** */
@media screen and (max-width:650px) {

    /* ######################################### 플러스샵 제품출력 ###########################################  Start */
    /* 플러스샵 제품출력 */
    #MainPlus .EventTitle {margin-top: 20px;}
    #MainPlus .EventTitle .title {font-size: 28px;}
    #MainPlus .EventTitle .sub_title {font-size: 18px;}

    /* 유튜브 비디오 출력 */
    #MainPlus .ProductVideo { margin-bottom:20px; border-radius: 10px;}
    #MainPlus .ProductVideo .TextBox .Title { font-size: 14px;}
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 40px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {font-size:18px; }
    #MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 14px;}
    #MainPlus .ProductVideo .TextBox .Btn { font-size:13px; color:#FFF; padding:6px 20px;}
    /* ######################################### 플러스샵 제품출력 ###########################################  End */

    /* 인트로 */
    .intro .TextBox { margin-top: 80px; padding: 0 30px;}
    .intro .TextBox h2 { font-size: 32px; height:auto; line-height:1.3; margin-bottom:20px;}
    .intro .TextBox .subText { font-size: 18px; line-height: 1.5; margin-bottom:0px;}

    /* 인트로 아이콘 모션 */
    .swiper-wrap  {width:100%;}
    .swiper-wrap .swiper-btn {justify-content:center; margin-top: 6px; margin-bottom:0px; margin-right: 0;}
    .swiper-wrap .swiper-btn a {padding:0 4px; margin-bottom: 10px;}

    .swiper-wrap .slider {width:20% !important; min-width:120px !important; height:180px; margin:0px; display:flex; overflow: hidden;} 
    .swiper-wrap .slider .item {width:150px; height: 180px; padding:4px;}
    .swiper-wrap .slider .item .iconbox {width:64px; height:100px; margin-top:0px; margin-bottom: 0px; display: flex; align-items: center !important;} 
    .swiper-wrap .slider .item .iconbox img {width: 64px; height: auto;}
    .swiper-wrap .swiper-slide:hover,
    .swiper-wrap .swiper-slide-active {height:180px; z-index:auto;} 
    .swiper-wrap .swiper-slide:hover .item,
    .swiper-wrap .swiper-slide-active .item { 
        width: 150px;
        height: 180px;
        margin-top: 0;
        padding:0px;
        background-color: #FFF;
        transform: translateY(0px);
        border:none;
        background-image:none;
        background-origin: border-box;
        background-clip: none;
    }
    .swiper-wrap .swiper-slide:hover .item .iconbox,
    .swiper-wrap .swiper-slide-active .item .iconbox {width:64px; height:100px; margin-top:0px; margin-bottom: 0px;}
    .swiper-wrap .swiper-slide:hover .item .iconbox img,
    .swiper-wrap .swiper-slide-active .item .iconbox img {width:64px; height: auto;}
    .swiper-slide .item .Box_Cont { width:100%; margin-top: 10px;}
    .swiper-slide .item .Box_Cont h3 { font-size:18px; }
    .swiper-slide:hover .item .Box_Cont h3,
    .swiper-slide-active .item .Box_Cont h3 {font-size:18px; color: #666;} 
    .swiper-slide:hover .item .Box_Cont .btn,
    .swiper-slide-active .item .Box_Cont .btn {background:none;  text-indent:14px; margin-right:14px; margin-top:2px;}

    /* 수강생관리 */
    .M-Student .MS-Left {width: 100%; }
    .M-Student .MS-Right {width: 100%; margin-top:40px;}

    /* Plus아카데미업 */
    .M-Plus .ListWrap {min-width:100%;}
}


/* *********** 미디어쿼리 500 *********** */
@media screen and (max-width:500px) {

    /* ######################################### 플러스샵 제품출력 ###########################################  Start */
    /* 플러스샵 제품출력 */
    #MainPlus .EventTitle {margin-top: 20px;}
    #MainPlus .EventTitle .title {font-size: 24px;}
    #MainPlus .EventTitle .sub_title {font-size: 16px;}

    /* 유튜브 비디오 출력 */
    #MainPlus .ProductVideo { margin-bottom:20px; border-radius: 10px;}
    #MainPlus .ProductVideo .TextBox { width: 80%;}
    #MainPlus .ProductVideo .TextBox .Title { font-size: 13px;}
    #MainPlus .ProductVideo .TextBox .ProductName {font-size: 36px;}
    #MainPlus .ProductVideo .TextBox .ProductName em {font-size:18px; }
    #MainPlus .ProductVideo .TextBox .ProductCopy {font-size: 13px;}
    #MainPlus .ProductVideo .TextBox .Btn { font-size:13px; color:#FFF; padding:6px 20px;}
    /* ######################################### 플러스샵 제품출력 ###########################################  End */

  
    /* 인트로 */  
    .intro .TextBox { margin-top: 70px; padding: 0 20px; margin-bottom:15px;}
    .intro .TextBox h2 { font-size: 28px;}
    .intro .TextBox .subText { font-size: 17px;}
    .intro .btn-wrap { height:120px; padding-top:60px;}

    /* 공통 메인 Section Wrap */
    .Main-SectionWrapA {padding:50px 0 0 0; }
    .Main-SectionWrapB {padding: 60px 0 100px 0;}

    /* 공통 타이틀 */
    .mTitle .TextBoxA {margin-bottom:40px; padding: 0 20px;}
    .mTitle .TextBoxA h2 {font-size:28px;}
    .mTitle .TextBoxA h2 .Plus::after {top:14%; right:-3%; width:12px; height:12px;}
    .mTitle .TextBoxA .subText {font-size:17px;}

    /* 수강생관리 */
    .M-Student .MS-Left img {width:84%;}
    .M-Student .MS-Left button.btn { padding: 10px 30px;}
    .M-Student .MS-Right {padding-left:10%;}
    .M-Student .MS-Right ul > li {font-size: 17px; margin-bottom: 10px; line-height: 1.5;}

    /* 출결시스템 */
    .M-Attend .MA-img img {width:100%;}

    /* Plus아카데미업 */
    .M-Plus {display:block; padding-top:10px;} 
    .M-Plus .ListWrap {min-width:100%; min-height:150px; margin-bottom:30px !important; padding:10px 20px;}
    .M-Plus .ListWrap:nth-child(3) {margin-bottom:0px;}
    .M-Plus .ListWrap .title {font-size: 24px;}
    .M-Plus .ListWrap .details {font-size: 16px;}
    .M-Plus .ListWrap .details.M-Plus01 { background: url('../images/icon/M-Plus01.png')no-repeat right center; background-size: 70px;}
    .M-Plus .ListWrap .details.M-Plus02 { background: url('../images/icon/M-Plus02.png')no-repeat right center; background-size: 70px;}
    .M-Plus .ListWrap .details.M-Plus03 { background: url('../images/icon/M-Plus03.png')no-repeat right center; background-size: 70px;}
    .M-Plus .ListWrap .details.M-Plus04 { background: url('../images/icon/M-Plus04.png')no-repeat right center; background-size: 70px;}

    /* App 미디어홍보 */
    .M-App .leftWrap .contentBox .academy {font-size:28px;}
    .M-App .leftWrap .contentBox .academy .number {font-size: 34px;}
    .M-App .leftWrap .contentBox .student {font-size:28px;}
    .M-App .leftWrap .contentBox .student .number {font-size:34px;}
    .M-App .leftWrap .contentBox .App {width:70%; margin: 0 auto;}
    .M-App .leftWrap .contentBox .App a {padding-right:4px; width:80%;}
    .M-App .leftWrap .contentBox .App a img {width:80%; padding-bottom: 10px;}
    .M-App .leftWrap .contentBox .App a:last-child img {padding-bottom: 0px;}
    .M-App .rightWrap img {width:60%; margin-bottom:40px;}
}



/* *********** 미디어쿼리 360 *********** */
@media screen and (max-width:360px) {
   
    /* 인트로 */
    .intro .TextBox { margin-top: 60px;}
    .intro .btn-wrap { height:120px; padding-top:40px;}
    .intro .btn-wrap button { padding: 10px 20px; font-size: 15px; margin: 0 3px;}
    .intro .btn-wrap button.btnA {padding: 10px 20px;}

    /* 수강생관리 */
    .M-Student .MS-Left img {width:90%;}
    .M-Student .MS-Left button.btn { padding: 10px 30px;}
    .M-Student .MS-Right {padding-left:0px;}

    /* 출결시스템 */
    .M-Attend {min-height:auto; padding: 0 20px;} 

    /* Plus아카데미업 */
    .M-Plus {display:block; padding-top:10px;} 
    .M-Plus .ListWrap {min-width:100%; min-height:150px; margin-bottom:20px !important;}
    .M-Plus .ListWrap .details.M-Plus01 { background: none;}
    .M-Plus .ListWrap .details.M-Plus02 { background: none;}
    .M-Plus .ListWrap .details.M-Plus03 { background: none;}
    .M-Plus .ListWrap .details.M-Plus04 { background: none;}

    /* App 미디어홍보 */
    .M-App .leftWrap .contentBox .academy {font-size:24px;}
    .M-App .leftWrap .contentBox .academy .number {font-size: 28px;}
    .M-App .leftWrap .contentBox .student {font-size:24px;}
    .M-App .leftWrap .contentBox .student .number {font-size:28px;}
    .M-App .leftWrap .contentBox .App a img {width:100%;}
    .M-App .rightWrap img {width:60%; margin-bottom:40px;}

    /* 고객상담 */
    .M-Customer h2 {font-size:17px;}
    .M-Customer .tel {font-size:44px; margin-top: 12px;}
}