@charset "utf-8";
#mcontainer-wrap {position:relative;width:100%}
#mcontainer {position:relative;word-break:keep-all}
@media all and (max-width:1400px) {
	#mcontainer {padding-bottom:0}
}
.fixNavi {position:fixed;right:120px;top:50%;transform:translateY(-50%);z-index:9999999}
.fixNavi ul {display:block}
.fixNavi ul li {display:block;margin:0 0 10px}
.fixNavi ul li:last-child {margin:0}
.fixNavi ul li button {display:block;position:relative;width:70px;height:70px;border-radius:50%;border:0;font-size:15px;color:#fff;overflow:hidden;line-height:1.2;}
.fixNavi ul li button span {position:relative;z-index:2}
.fixNavi ul li button:after {content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0, 0, 0, .3);z-index:1;opacity:0;transition:all .3s ease}
.fixNavi ul li button:focus:after,
.fixNavi ul li button:hover:after {opacity:1}
.fixNavi ul li.n01 button {background:#0155aa}
.fixNavi ul li.n02 button {background:#0050a0}
.fixNavi ul li.n03 button {background:#023d7f}
.fixNavi ul li.n04 button {background:#002248}
.fixNavi ul li.n05 button {background:#272727;font-family:"poppins";font-size:18px;line-height:86px}
.fixNavi ul li.n05 button:before {content:"";display:block;position:absolute;width:9px;height:6px;top:0;right:0;bottom:0;left:0;margin:19px auto auto auto;background:url(/img/m_spr1.png) no-repeat -52px 0;z-index:2}
@media all and (max-width:1800px) {
	.fixNavi {right:50px}
}
@media all and (max-width:1200px) {
	.fixNavi {right:20px}
}
@media all and (max-width:1024px) {
	.fixNavi ul li button {width:60px;height:60px;font-size:15px}
	.fixNavi ul li.n05 button {line-height:70px}
	.fixNavi ul li.n05 button:before {margin:15px auto auto auto}
}
@media all and (max-width:768px) {
	.fixNavi {display:none}
}

/* 메인 비쥬얼 */
#mvisual {position:relative;margin:0 auto;height:950px;transition: all 0.3s ease;}
#mvisual:before,
#mvisual:after {content:"";display:block;position:absolute;width:0;height:100%;top:0;background:#fff;z-index:3}
#mvisual:before {left:0}
#mvisual:after {right:0}
#mvisual .slogan-wrap {display:block;position:relative;width:auto;max-width:1200px;height:0;margin:0 auto;z-index:3}
#mvisual .slogan-wrap img {display:block;position:absolute;right:-59px;top:151px}
#mvisual .ctrlnums-wrap {display:block;position:absolute;width:100%;left:0;bottom:50px;text-align:center;z-index:3}
#mvisual .ctrlnums-wrap .ctrl-inwr {display:inline-block;position:relative;width:auto;max-width:1200px;margin:0 auto;text-align:center;background:rgba(0, 0, 0, 0);border-radius:999px;padding:5px 20px}
#mvisual .ctrlnums-wrap .ctrl-inwr > button {display:inline-block;position:relative;width:28px;height:28px;vertical-align:middle;border:0;background:transparent;margin:0}
#mvisual .ctrlnums-wrap .ctrl-inwr > button:after {content:"";display:block;position:absolute;width:11px;height:20px;top:0;right:0;bottom:0;left:0;margin:auto;background:url(/img/m_spr1.png) no-repeat;background-size:165px auto}
#mvisual .ctrlnums-wrap .ctrl-inwr > button.owl-prev:after {background-position:0 0}
#mvisual .ctrlnums-wrap .ctrl-inwr > button.owl-next:after {background-position:-18px 0}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums {display:inline-block;vertical-align:middle;text-align:center}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot {display:inline-block;vertical-align:top;position:relative;box-sizing:border-box;padding:0 25px}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot:after {content:"";display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255, 255, 255, .5);right:-2px;top:14px}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot:last-child:after {display:none}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot button {display:block;width:32px;height:32px;border:2px solid transparent;background:transparent;border-radius:50%;color:#fff;font-family:"poppins";font-size:15px;transition:all .3s ease}
#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot.active button {border-color:#fff;background:rgba(0, 0, 0, .35)}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns {display:inline-block;position:relative;width:auto;text-align:center;vertical-align:middle;margin:0 5px 0 0;}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns button {position:relative;display:inline-block;width:30px;height:30px;background:transparent;border:0}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-play {display:none;}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-play:after {content:'';position:absolute;left:50%;top:50%;margin:-7px 0 0 -5px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:10px solid #fff;}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-stop:before, #mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-stop:after {content:'';position:absolute;top:9px;width:2px;height:14px;background:#fff;}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-stop:before {left:10px;}
#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns .btn-stop:after {left:18px;}
#mvisual .datalist {position:relative;z-index:2}
#mvisual .datalist,
#mvisual .datalist .owl-stage-outer,
#mvisual .datalist .owl-stage,
#mvisual .datalist .owl-item,
#mvisual .datalist .item {height:100%}
#mvisual .datalist .owl-item {overflow:hidden}
#mvisual .datalist .item {position:relative;max-width:1200px;margin:0 auto;}
#mvisual .datalist .item a {}
#mvisual .datalist .item .vis-img {display:block;width:100%;height:100%;position:relative}
/*
#mvisual .datalist .item .vis-img .txtBox {display:block;position:absolute;width:100%;left:0;top:40%;height:0;z-index:2}
#mvisual .datalist .item .vis-img .txtBox .location {display:block;position:absolute;width:100%;font-size:18px;letter-spacing:-.05em;color:#fff;text-align:center;}
#mvisual .datalist .item .vis-img .txtBox .location h1 {font-size:48px;font-weight:800;line-height:140%;transition: all 0.3s ease;}
#mvisual .datalist .item .vis-img .txtBox .location h2 {font-size:42px;font-weight:300;line-height:140%;transition: all 0.3s ease;}
#mvisual .datalist .item .vis-img .txtBox .location p {margin:20px 0 0 0;font-size:22px;font-weight:300;line-height:140%;transition: all 0.3s ease;}
*/
#mvisual .txtBox {display:block;position:absolute;width:100%;left:0;top:40%;height:0;z-index:99}
#mvisual .txtBox .location {display:block;position:absolute;width:100%;font-size:18px;letter-spacing:-.05em;color:#fff;text-align:center;}
#mvisual .txtBox .location h1 {font-size:48px;font-weight:800;line-height:140%;transition: all 0.3s ease;}
#mvisual .txtBox .location h2 {font-size:42px;font-weight:300;line-height:140%;transition: all 0.3s ease;}
#mvisual .txtBox .location p {margin:20px 0 0 0;font-size:22px;font-weight:300;line-height:140%;transition: all 0.3s ease;}

#mvisual .datalist .item .vis-img .base {display:block;position:absolute;width:2000px;height:100%;left:50%;top:0;margin:0 0 0 -1000px;z-index:1;transition:all 0.3s ease-out;animation-duration: 3s; animation-name:visualScale;}
@media all and (max-width:1600px) {
	#mvisual:before,
	#mvisual:after {width:40px}
}
@media all and (max-width:1400px) {
	#mvisual:before,
	#mvisual:after {width:20px}
}
@media all and (max-width:1200px) {
	#mvisual {height:704px}
	#mvisual:before,
	#mvisual:after {width:0}
	#mvisual .slogan-wrap img {right:-30px;top:120px}
	#mvisual .datalist .item {margin:0 20px}
	#mvisual .datalist .item .vis-img .base {width:1600px;margin:0 0 0 -800px}
}
@media all and (max-width:1024px) {
	#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot {padding:0 15px}
}
@media all and (max-width:900px) {
	#mvisual {height:616px}
	#mvisual .slogan-wrap img {width:550px;right:0}
	#mvisual .ctrlnums-wrap {bottom:20px}
	#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot {padding:0 10px}
	#mvisual .datalist .item .vis-img .base {width:1400px;margin:0 0 0 -700px}
}
@media all and (max-width:768px) {
	#mvisual {height:528px}
	#mvisual .slogan-wrap img {width:500px;right:-50px;top:100px}
	/*
	#mvisual .datalist .item .vis-img .txtBox .location h1 {font-size:36px;}
	#mvisual .datalist .item .vis-img .txtBox .location h2 {font-size:24px;}
	#mvisual .datalist .item .vis-img .txtBox .location p {font-size:16px;}
	*/
	#mvisual .txtBox .location h1 {font-size:36px;}
	#mvisual .txtBox .location h2 {font-size:24px;}
	#mvisual .txtBox .location p {font-size:16px;}
	#mvisual .datalist .item .vis-img .base {width:1200px;margin:0 0 0 -600px}
}
@media all and (max-width:600px) {
	#mvisual {height:440px}
	#mvisual .ctrlnums-wrap {bottom:10px}
	#mvisual .slogan-wrap img {width:380px}
	#mvisual .ctrlnums-wrap .ctrl-inwr {padding:5px 10px}
	#mvisual .ctrlnums-wrap .ctrl-inwr > button {margin:0}
	#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot {padding:0 3px}
	#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot:after {display:none}
	#mvisual .ctrlnums-wrap .ctrl-inwr .nums .owl-dot button {width:26px;height:26px;font-size:12px;line-height:24px}
	#mvisual .ctrlnums-wrap .ctrl-inwr .ctrl-btns {margin:0;}
	#mvisual .ctrlnums-wrap .ctrl-inwr > button:after {width:8px;height:14px;background-size:115px auto}
	#mvisual .ctrlnums-wrap .ctrl-inwr > button.owl-prev:after {background-position:0 0}
	#mvisual .ctrlnums-wrap .ctrl-inwr > button.owl-next:after {background-position:-13px 0}
	/*
	#mvisual .datalist .item .vis-img .txtBox .location {width:100%;height:50px;line-height:50px}
	#mvisual .datalist .item .vis-img .txtBox .location h1 {font-size:28px;}
	#mvisual .datalist .item .vis-img .txtBox .location h2 {font-size:18px;}
	#mvisual .datalist .item .vis-img .txtBox .location p {display:none;}
	*/
	#mvisual .txtBox .location {width:100%;height:50px;line-height:50px}
	#mvisual .txtBox .location h1 {font-size:28px;}
	#mvisual .txtBox .location h2 {font-size:18px;}
	#mvisual .txtBox .location p {display:none;}
	#mvisual .datalist .item .vis-img .base {width:1000px;margin:0 0 0 -500px}
}
@media all and (max-width:400px) {
	#mvisual {height:352px}
	#mvisual .slogan-wrap img {width:280px;right:-30px}
	#mvisual .datalist .item .vis-img .base {width:800px;margin:0 0 0 -400px}
}

@keyframes visualScale {
	0% { transform:scale(1.15); -ms-transform: scale(1.15); -webkit-transform: scale(1.15); }
	100% { transform:scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); }
}

/* 펀키즈소개
------------------------------------------------------ */
.info-wr {position:relative;float:left;width:100%;}
.info-wr ul {}
.info-wr ul li {position:relative;float:left;width:100%;height:800px;overflow:hidden;transition: all 0.3s ease;}
.info-wr ul li .img {position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;transform: scale(1.1);transition:all 0.5s ease-out;}
.info-wr ul li:hover .img {transform: scale(1);}
.info-wr ul li .img1 {background:url('/img/info_01.jpg') no-repeat center top/cover;}
.info-wr ul li .img2 {background:url('/img/info_02.jpg') no-repeat center top/cover;}
.info-wr ul li .img3 {background:url('/img/info_03_2.jpg') no-repeat center top/cover;}
.info-wr ul li .img4 {background:url('/img/info_04.jpg') no-repeat center top/cover;}
.info-wr ul li .text {position:absolute;top:25%;left:60%;}
.info-wr ul li:nth-child(3) .text {top:50%;left:45%;}
.info-wr ul li:nth-child(even) .text {left:auto;right:50%;}
.info-wr ul li h1 {font-size:60px;color:#fff;line-height:140%;background:rgba(0,0,0,.5);}
.info-wr ul li h1 span {font-weight:500;}
.info-wr ul li p {font-size:18px;color:#fff;line-height:140%;background:rgba(0,0,0,.5);}
.info-wr ul li:nth-child(1) h1 {color:#222;background:none;}
.info-wr ul li:nth-child(1) p {color:#333;background:none;}
@media all and (max-width:1200px) {
	.info-wr ul li .text {left:auto;padding:0 10px;width:100%;text-align:center;}
	.info-wr ul li:nth-child(1) h1 {color:#fff;background:rgba(0,0,0,.5);}
	.info-wr ul li:nth-child(1) p {color:#fff;background:rgba(0,0,0,.5);}
	.info-wr ul li:nth-child(3) .text {top:25%;left:auto;}
	.info-wr ul li:nth-child(even) .text {right:auto;}
}
@media all and (max-width:1100px) {
	.info-wr ul li {height:600px;}
	.info-wr ul li .img1 {background:url('/img/info_01m.jpg') no-repeat center top/cover;}
	.info-wr ul li .text {top:30%;}
	.info-wr ul li:nth-child(3) .text {top:30%;}
	.info-wr ul li h1 {font-size:48px;}
	.info-wr ul li p {font-size:18px;}
}
@media all and (max-width:900px) {
	.info-wr ul li {height:500px;}
	.info-wr ul li h1 {font-size:38px;}
	.info-wr ul li p {font-size:14px;}
}
@media all and (max-width:800px) {
	.info-wr ul li {height:400px;}
	.info-wr ul li h1 {font-size:24px;}
}
@media all and (max-width:600px) {
	.info-wr ul li {height:300px;}
	.info-wr ul li p br {display:none;}
}

/* #커리큘럼
------------------------------------------------------ */
.program-wr {position:relative;float:left;width:100%;padding:130px 0 200px 0;background:#1e2327;}
.program-wr .inwr {position:relative;margin:0 auto;max-width:1200px;box-sizing:border-box;}

.program-wr .role-head {width:100%;text-align:center;}
.program-wr .role-head .secTit {font-size:50px;color:#fff;line-height:1;box-sizing:border-box;position:relative;}
.program-wr .role-head .secTit span {font-weight:400;}
.program-wr .role-head .secTxt {font-size:18px;line-height:140%;letter-spacing:-.05em;color:#fff;font-weight:300;padding:20px 0 0}
.program-wr .role-head .secTxt span {display:block}

.program-wr .pg_list ul {margin:60px 95px 0 95px;}
.program-wr .pg_list ul li {position:relative;float:left;line-height:1;margin:0 0 60px 6.6%;padding:40px 0;width:20%;border:1px solid rgba(255,255,255,0.3);transition: all 0.3s ease;}
.program-wr .pg_list ul li:nth-child(4n+1) {margin-left:0;}
.program-wr .pg_list ul li:focus,
.program-wr .pg_list ul li:hover {border-color:#000;background:#000;}
.program-wr .pg_list ul li h1 {text-align:center;}
.program-wr .pg_list ul li p {margin:20px 0 0 0;font-size:1.4em;color:#fff;text-align:center;}

@media all and (max-width:1200px) {
	.program-wr {padding:100px 10px;}
	.program-wr .pg_list ul {margin:39px 0 0 0;}
	.program-wr .pg_list ul li {margin:0 0 15px 1.3%;padding:40px 0;width:24%;}
}
@media all and (max-width:900px) {
	.program-wr .role-head .secTit {font-size:40px}
	.program-wr .role-head .secTxt {font-size:16px;margin:0;}
}
@media all and (max-width:800px) {
	.program-wr .role-head .secTit {font-size:30px}
}
@media all and (max-width:767px) {
	.program-wr {padding:60px 10px;}
	.program-wr .pg_list ul li {margin:0 0 10px 1.3%;padding:30px 0;}
}
@media all and (max-width:600px) {
	.program-wr .role-head .secTxt {font-size:14px;}
	.program-wr .pg_list ul li {padding:25px 0;width:32%;}
	.program-wr .pg_list ul li:nth-child(4n+1) {margin-left:1.3%;}
	.program-wr .pg_list ul li:nth-child(3n+1) {margin-left:0;}
	.program-wr .pg_list ul li h1 img {width:60%;max-width:97px;}
}
@media all and (max-width:400px) {
	.program-wr .pg_list ul li {padding:25px 0;width:48%;}
	.program-wr .pg_list ul li:nth-child(4n+1) {margin-left:1.3%;}
	.program-wr .pg_list ul li:nth-child(3n+1) {margin-left:1.3%;}
	.program-wr .pg_list ul li:nth-child(2n+1) {margin-left:0;}
}

/* 활동사진
------------------------------------------------------ */
.gallery-wr {position:relative;float:left;width:100%;background:#1e2327;}
.gallery-wr .gallery_list {float:left;width:100%;}
.gallery-wr .gallery_list ul {float:left;width:100%;}
.gallery-wr .gallery_list ul li a {position:relative;float:left;width:25%;height:425px;overflow:hidden;transition: all 0.3s ease;}
.gallery-wr .gallery_list ul li a:after {content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0, 0, 0, .3);z-index:1;opacity:0;transition:all .3s ease;}
.gallery-wr .gallery_list ul li a:focus:after,
.gallery-wr .gallery_list ul li a:hover:after {border:3px solid rgb(59, 153, 252);opacity:1}
.gallery-wr .gallery_list ul li img {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}

@media all and (max-width:1200px) {
	.gallery-wr .gallery_list ul li a {height:300px;}
}
@media all and (max-width:1100px) {
	.gallery-wr .gallery_list ul li a {height:250px;}
}
@media all and (max-width:900px) {
	.gallery-wr .gallery_list ul li a {height:200px;}
}
@media all and (max-width:767px) {
	.gallery-wr .gallery_list ul li a {width:50%;height:350px;}
}
@media all and (max-width:600px) {
	.gallery-wr .gallery_list ul li a {height:300px;}
}
@media all and (max-width:500px) {
	.gallery-wr .gallery_list ul li a {height:250px;}
}
@media all and (max-width:400px) {
	.gallery-wr .gallery_list ul li a {height:200px;}
}


/* 고객센터
------------------------------------------------------ */
.cscenter-wr {position:relative;float:left;padding:100px 0;width:100%;background:#1e2327;}
.cscenter-wr .inwr {max-width:1200px;margin:0 auto;position:relative;box-sizing:border-box;}
.cscenter-wr .inwr .cs_tel {float:left;width:45%;}
.cscenter-wr .inwr .cs_tel h1 {font-size:1.2em;color:#fff;font-weight:300;}
.cscenter-wr .inwr .cs_tel h2 {padding:20px 0 10px 0;font-family:"poppins",sans-serif;font-size:32px;color:#00FFFF;font-weight:600;}
.cscenter-wr .inwr .cs_tel h2 a {color:#00FFFF;}
.cscenter-wr .inwr .cs_tel p {font-size:1.15em;color:#ccc}
.cscenter-wr .inwr .cs_tel p span {}
.cscenter-wr .inwr .cs_tel p br {display:none;}

.cscenter-wr .inwr .quick {float:right;width:45%;}
.cscenter-wr .inwr .quick h1 {font-size:1.2em;color:#fff;font-weight:300;}
.cscenter-wr .inwr .quick ul {float:left;margin:20px 0 0 0;width:100%;}
.cscenter-wr .inwr .quick ul li a {position:relative;float:left;margin:0 0 0 2%;width:32%;height:50px;border:1px solid #626568;background:#1e2327;transition:all .3s ease;}
.cscenter-wr .inwr .quick ul li:first-child a {margin-left:0;}
.cscenter-wr .inwr .quick ul li a:focus,
.cscenter-wr .inwr .quick ul li a:hover {border-color:#000;}
.cscenter-wr .inwr .quick ul li a:after {content:"";display:block;position:absolute;width:100%;height:100%;left:0;top:0;background:rgba(0, 0, 0, .3);opacity:0;transition:all .3s ease;}
.cscenter-wr .inwr .quick ul li a:focus:after,
.cscenter-wr .inwr .quick ul li a:hover:after {background:#000;opacity:1}
.cscenter-wr .inwr .quick h2 {position:absolute;top:0;left:10px;font-size:1.1em;color:#fff;font-weight:300;line-height:50px;z-index:1;}
.cscenter-wr .inwr .quick h2:focus,
.cscenter-wr .inwr .quick h2:hover {font-weight:300;}
.cscenter-wr .inwr .quick p {position:absolute;top:10px;right:10px;width:31px;height:28px;z-index:1;}
.cscenter-wr .inwr .quick p:after {content:"";display:block;position:absolute;width:31px;height:28px;background:url('/img/cs_icon.png') no-repeat;top:0;right:0;bottom:0;left:0;margin:auto}
.cscenter-wr .inwr .quick p.icon1:after {background-position:0px 0px}
.cscenter-wr .inwr .quick p.icon2:after {background-position:-41px 0px}
.cscenter-wr .inwr .quick p.icon3:after {background-position:-82px 0px}

@media all and (max-width:1200px) {
	.cscenter-wr {padding:50px 10px;}
}
@media all and (max-width:1050px) {
	.cscenter-wr .inwr .cs_tel {width:100%;text-align:center;}
	.cscenter-wr .inwr .cs_tel h1 {display:none;}
	.cscenter-wr .inwr .quick {margin:20px 0 0 0;width:100%;}
	.cscenter-wr .inwr .quick h1 {display:none;}
}
@media all and (max-width:560px) {
	.cscenter-wr .inwr .cs_tel p {line-height:160%;}
	.cscenter-wr .inwr .cs_tel p span {display:none;}
	.cscenter-wr .inwr .cs_tel p br {display:block;}
}

@media all and (max-width:440px) {
	.cscenter-wr .inwr .quick ul li a {margin:0 0 10px 0;width:100%;}
}
