@charset "utf-8";
/************************************************************************
 * filename : style.css
 * description :mainPage style
 * date : 2017.09.21
************************************************************************/
.visual_slide{height: 915px;overflow: hidden}
.visual_item{position: relative;display: table;width:100%;height:915px;}
.visual_overlay{position: absolute;left:0;right:0;bottom:0;top:0;background:rgba(35, 31, 32, .36);z-index: -1}
.visual_bg{position: absolute;left:0;right:0;bottom:0;top:0;background-repeat: no-repeat;background-position: center top;background-size:cover;z-index: -2}
.visual_text{display: table-cell;vertical-align: middle;}
.visual_text a{color:#fff;display: block;margin:0 auto}

.visual_text .visual_text_tit{font-size: 55px;line-height: 63px;font-weight: 700;letter-spacing: -1px;margin-bottom: 25px;display: block;}
.visual_text .visual_text_summary{font-size:20px;line-height: 1.4em;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;white-space: normal;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;height: 2.8em;width: 50%;}
.visual_btn_bottom {position:absolute;bottom:100px;left:50%;margin-left:-75px;width:152px;height:44px;line-height:44px;text-align:center;border-radius:20px;font-size:21px;color:#fff;background:#998778}
.visual_btn_bottom span {padding-right:21px;background:url(/static_resources/images/junoacademy/main/visual_btn_bottom_arr.png) no-repeat right center;}

.visual_slide .owl-nav{position: absolute;left:50%;margin-left:-720px;top: 615px;}
.visual_slide .owl-nav img{width: 31px;vertical-align: middle;}
.visual_slide .owl-nav span{color:#fff;font-weight: 600;font-size:18px;vertical-align: middle}
.visual_slide .owl-prev{position: relative;margin-right: 50px;}
.visual_slide .owl-nav:after{content: '';position: absolute;left:115px;width: 2px;height:19px;;background: #fff;opacity: .6;filter: alpha(opacity=60);}
.visual_slide .owl-prev span{margin-left: 14px;}
.visual_slide .owl-next span{margin-right: 14px;}
.visual_slide .owl-prev,
.visual_slide .owl-next {opacity: .7;filter: alpha(opacity=70);display: inline-block;vertical-align:middle;transition:.2s}
.visual_slide .owl-prev:hover,
.visual_slide .owl-next:hover{opacity: 1;filter: alpha(opacity=100);}

.maininstargram {padding:80px 0 100px;background:#f5f5f5;}
.maininstargram .title {text-align:center;font-size:35px;font-weight:700;}
.maininstargram .tit {text-align:center;margin-top:32px}
.maininstargram .tit span {display:inline-block;padding-left:27px;min-height:20px;font-size:17px;color:#777;font-weight:600;background:url(/static_resources/images/junohair/main/ico_instargram_m.png) no-repeat 0 center;-webkit-background-size:18px auto;background-size:18px auto;}

.maininstargram .owl-carousel .owl-wrapper {display:flex !important}
.maininstargram .owl-carousel .owl-stage {display:flex;flex-direction:row}
.insta_slide {position:relative;margin-top:24px}
.insta_slide .owl-prev {position:absolute;top:50%;left:-38px;width:24px;height:47px;margin-top:-20px;font-size:0;line-height:0;background: url(/static_resources/images/junohair/main/owlslide_arr.png) no-repeat center center;
-webkit-transform:rotate(180deg);
-webkit-transition:all .4s;
opacity:.3}
.insta_slide .owl-next {position:absolute;top:50%;right:-38px;width:24px;height:47px;margin-top:-20px;font-size:0;line-height:0;background: url(/static_resources/images/junohair/main/owlslide_arr.png) no-repeat center center;
-webkit-transition:all .4s}
.insta_slide .insta_item {position:relative}
.insta_slide .insta_item > a {position:relative;display:block;width:100%;height:100%}
.insta_slide .insta_item > a:last-child {margin-top:24px}
.insta_slide .insta_item > a:after {content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:10;opacity:0;-webkit-transition:all .4s;}
.insta_slide .insta_item .thumimg {overflow:hidden}
.insta_slide .insta_item .thumimg img {display:block;width:100%;height:auto;-webkit-transition:all .6s;transition:all .6s}
.insta_slide .insta_item .video {position:absolute;top:10px;right:10px;width:34px;height:25px;background:url(/static_resources/images/junohair/main/ico_instargramvideo_m.png);-webkit-background-size:34px auto;background-size:34px auto;z-index:10}
.insta_slide .insta_item .likecount {position:absolute;top:45%;left:0;width:100%;text-align:center;z-index:100;opacity:0;-webkit-transition:all .4s;}
.insta_slide .insta_item .likecount span {padding-left:25px;font-size:20px;font-weight:700;color:#fff;min-height:18px;background:url(/static_resources/images/junohair/main/ico_instargramlike.png) no-repeat 0 center;}
.insta_slide .insta_item a:hover .thumimg img {-webkit-transform:scale(1.07);transform:scale(1.07)}
.insta_slide .insta_item a:hover:after {opacity:1}
.insta_slide .insta_item a:hover .likecount {opacity:1}

.mainyoubube {padding:80px 0 100px}
.mainyoubube .title {text-align:center;line-height:1;font-size:35px;font-weight:700;}
.mainyoubube ul {overflow:hidden;display:flex;flex-wrap:wrap;margin-left:-30px;margin-top:28px}
.mainyoubube ul:after {content:'';display:block;clear:both;}
.mainyoubube li {float:left;width:calc(33.333% - 30px);margin-left:30px;margin-top:20px;opacity:0;filter: alpha(opacity=0);transition:.7s;transform: scale(0)}
.mainyoubube li.zoomIn {opacity:1;filter: alpha(opacity=100); transform: scale(1)}
.mainyoubube li > a {position:relative;width:100%;}
.mainyoubube .img {position:relative;overflow:hidden;display:block;padding-bottom:56.25%;height:0;}
.mainyoubube .img img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.mainyoubube .img:after {content:'';display:block;position:absolute;top:50%;left:50%;width:60px;height:45px;margin:-26px 0 0 -30px;background: url(/static_resources/images/junohair/main/ico_youtubeplay.png) no-repeat center center;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .6s;transition:all .6s}
.mainyoubube .img img {-webkit-transform:scale(1);transform:scale(1);-webkit-transition:all .6s;transition:all .6s}
.mainyoubube a:hover .img img {-webkit-transform:scale(1.07);transform:scale(1.07)}
.mainyoubube .tbox {position:relative;padding-left:60px;min-height:48px;margin-top:25px;box-sizing:border-box}
.mainyoubube .tbox:after {content:'';display:block;position:absolute;left:0;top:-11px;width:48px;height:48px;background:url(/static_resources/images/junoacademy/main/ico_junoacademy.png) no-repeat center center;}
.mainyoubube .tbox p {position:relative;line-height:1.2;font-size:22px;color:#231f20;letter-spacing:-0.04em;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.popupMovie {display:none;position:fixed;left:50%;top:50%;width:1100px;margin-left:-550px;margin-top:-310px;z-index:1100}
.popupMovie .bgcover {position:relative}
.popupMovie .movie {position:absolute;top:0;left:0;right:0;bottom:0}
.popupMovie .movie iframe {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}
.popupMovie .btnClose {position:absolute;top:0;right:-80px;width:50px;height:50px;background: url(/static_resources/images/junohair/main/btn_popclose.png) no-repeat 0 0}
.bg_dimm {position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.6;filter:alpha(opacity=60);z-index:1000}


.popupInstagram {display:none;position:fixed;left:50%;top:50%;width:900px;height:600px;margin-left:-450px;margin-top:-300px;z-index:1100}
.popupInstagram .btnClose {position:absolute;top:0;right:-80px;width:50px;height:50px;background: url(/static_resources/images/junohair/main/btn_popclose.png) no-repeat 0 0}
.instagram_post {display:flex;flex-direction:row;padding:50px;box-sizing:border-box;background:#fff;}
.instagram_post .media {display:flex;width:500px;height:500px}
.instagram_post .media img {max-width:100%;width:100%;}
.instagram_post .cont {display:flex;flex-direction:column;width:270px;height:500px;margin-left:20px;overflow:hidden;overflow-y:auto}
.instagram_post .cont::-webkit-scrollbar {background:transparent;}
.instagram_post .top span {display:inline-block;vertical-align:middle;}
.instagram_post .top .ttl {padding-left:10px;font-size:16px;font-weight:700;}
.instagram_post .tbox {margin-top:24px;line-height:1.6}

.main_content{overflow:hidden;position:relative;opacity: 0;filter: alpha(opacity=0);transition:.7s;transform: translateY(40px)}
.main_content.fadeInUp{opacity:1;filter: alpha(opacity=100); transform: translate(0)}


/* media_query */
@media all and (max-width:1440px){
	.visual_slide .owl-nav{width: 1024px;margin-left: -512px;}
	.maininstargram .inner {width:100%;}
	.mainyoubube ul {margin-left:-2%}
	.mainyoubube li {float:left;width:31%;margin-left:2%}
}

@media all and (max-width:1200px){
	.popupMovie {width:900px;margin-left:-450px;margin-top:-310px;z-index:1100}
	.popupMovie .bgcover img {width:100%;}
}

@media all and (max-width:1024px){
	.visual_slide,
	.visual_item{height: 750px}
	.visual_text .visual_text_tit{font-size:50px}
	.visual_text .visual_text_summary{font-size:18px}
	.visual_slide .owl-nav{width: 768px;margin-left: -384px;top:480px}

	.mainyoubube .inner {width:100%;}
    .popupMovie {display:none;position:fixed;left:0%;top:50%;width:100%;padding:0 15px;margin-left:0;margin-top:0;z-index:1100;box-sizing:border-box;
		webkit-transform:translateY(-50%);transform:translateY(-50%)}
	.popupMovie .bgcover img {width:100%}
	.popupMovie .btnClose {right:10px;top:-40px;width:22px;height:22px;-webkit-background-size:22px auto;background-size:22px auto}
	
	.popupInstagram {left:0%;position:fixed;top:4%;width:100%;height:inherit;padding:0 15px;margin-left:0;margin-top:0;box-sizing:border-box;}
	.instagram_post {flex-direction:column;padding:40px 26px 20px;}
	.instagram_post .media {width:100%;height:100%}
	.instagram_post .media img {width:100%;height:100%}
	.instagram_post .cont {width:100%;height:200px;margin-left:0;margin-top:12px;}
	.instagram_post .tbox {margin-top:12px}
	.popupInstagram .btnClose {position:absolute;top:12px;right:30px;width:19px;height:19px;background: url(/static_resources/images/junohair/main/btn_popclose_gray.png) no-repeat 0 0;-webkit-background-size:19px auto;
	background-size:19px auto;}
	
	.bg_dimm {opacity:0.9;filter:alpha(opacity=90);}
}
@media all and (max-width:768px){
	.visual_slide,
	.visual_item{height: 450px}
	.visual_text .inner{width: 100%;}
	.visual_text a{text-align: center;}
	.visual_text .visual_text_tit{font-size:35px;line-height: 1.2em;word-break: keep-all}
	.visual_text .visual_text_summary{width: 100%;font-size:16px}
	.visual_slide .owl-nav{top: initial;width:95%;margin-left: -47.5%;text-align: center;bottom: 20px;}
	.visual_slide .owl-nav span{font-size:13px}
	.visual_slide .owl-nav:after{left:50%;margin-left:-0.5px}
	.visual_btn_bottom {bottom:75px;width:100px;height:28px;line-height:28px;font-size:14px;margin-left:-50px}
	.visual_btn_bottom span {padding-right:14px;background: url(/static_resources/images/junoacademy/main/visual_btn_bottom_arr_m.png) no-repeat right center;-webkit-background-size:6px auto;background-size:6px auto}

	.mainbanner {padding:2px 0;}
	.mainbanner ul {flex-direction:column}
	.mainbanner li {flex-direction:column;width:100%;height:auto;}
	.mainbanner li:last-child {margin-top:1px;}
	.mainbanner .tit {left:8%;top:27%;font-size:18px;padding-right:24px;-webkit-background-size:17px auto;
	background-size:17px auto;}
	.mainbanner .desc {left:8%;top:48%;font-size:11px;}
	.maininstargram {padding:35px 0 45px}
	.maininstargram .title {font-size:22px}
	.maininstargram .tit {margin-top:24px;}
	.maininstargram .owl-stage .owl-item:first-child {margin-left:15px;}
	.insta_slide {margin-top:20px}
	.insta_slide .insta_item {margin-right:8px}
	.insta_slide .insta_item .video {width:20px;height:15px;-webkit-background-size:20px auto;background-size:20px auto;}
	.insta_slide .insta_item > a:last-child {margin-top:8px}
	.mainyoubube {padding:35px 0 50px}
	.mainyoubube .inner {width:100%;padding:0 15px;box-sizing:border-box;}
	.mainyoubube .title {font-size:22px;}
	.mainyoubube ul {margin-left:0;margin-top:20px}
	.mainyoubube li {float:none;width:100%;margin-left:0;margin-top:20px}
	.mainyoubube li:first-child {margin-top:0}
	.mainyoubube .tbox {padding-left:45px;margin-top:20px;min-height:38px}
	.mainyoubube .tbox:after {width:38px;height:38px;-webkit-background-size:38px auto;background-size:38px auto;}
	.mainyoubube .tbox p {font-size:15px}
	.mainyoubube .btn_data_more {margin-top:35px}
}