@charset "utf-8";
/************************************************************************
 * filename : style.css
 * description :mainPage style
 * date : 2017.08.14
************************************************************************/



/*.visual_section{margin-top: 80px;}*/
.visual_item{position: relative;display: table;width:100%;height: 800px;}
.visual_item img{display: none !important;}
.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_overlay{position: absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;z-index: -1}
.visual_text{display: table-cell;vertical-align: middle;text-align: center;}
.visual_text a{color:#fff;max-width:90%}
.visual_text .bar{width: 190px;height: 1px;background: #fff;;margin:29px auto 22px auto}
.visual_text .visual_text_tit{font-size:55px;line-height:1.35em;font-weight: 700;letter-spacing: -1px}
.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}

.visual_slide .owl-dots{position: absolute;left:0;right:0;bottom:57px;text-align: center}
.visual_slide .owl-dot{float: none;display: inline-block;width: 70px;height: 6px;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;background: #fff;margin-left: 10px;}
.visual_slide .owl-dot:first-child{margin-left: 0;}
.visual_slide .owl-dot.active{background: #ee1c24;}

.mainbanner {padding:80px 0}
.mainbanner ul {display:flex;flex-direction:row;box-sizing:border-box;-webkit-box-pack:justify;justify-content:space-between}
.mainbanner li {display:flex;width:705px;height:210px;box-sizing:border-box;overflow:hidden}
.mainbanner li a {position:relative;display:block;width:100%;height:100%}
.mainbanner .tit {position:absolute;top:62px;left:55px;font-size:35px;font-weight:700;color:#fff;padding-right:47px;background:url(/static_resources/images/junohair/main/ico_mainbanner.png) no-repeat right 55%;}
.mainbanner .desc {position:absolute;top:107px;left:55px;font-size:18px;color:#fff;font-family:'Noto Sans KR LIGHT';}
.mainbanner .img img {width:100%;height:auto}

.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_arr2.png) no-repeat center center;
-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: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:22px;height:16px;background:url(/static_resources/images/junohair/main/ico_instargramvideo_m.png) no-repeat;-webkit-background-size:22px auto;background-size:22px 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:hover .thumimg img {-webkit-transform:scale(1.07);transform:scale(1.07)}
.insta_slide .insta_item:hover:after {opacity:1}
.insta_slide .insta_item: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;margin-left:-30px;margin-top:28px}
.mainyoubube ul:after {content:'';display:block;clear:both;}
.mainyoubube li {float:left;width:460px;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;}
.mainyoubube .img img {width:100%;height:auto}
.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/junohair/main/ico_junohair.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}

.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){
	
	.mainbanner .inner {width:100%}
	.mainbanner li {width:49%;height:auto}
	.mainbanner .tit {left:8%;top:27%;font-size:22px;}
	.mainbanner .desc {left:8%;top:52%;font-size:14px}
	.maininstargram .inner {width:100%;}
	.mainyoubube ul {margin-left:-2%}
	.mainyoubube li {float:left;width:31%;margin-left:2%}
}
.owl-height{height: auto}

@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_section{margin-top: 0;}
	.visual_text .visual_text_tit{font-size:50px}
	.visual_text .visual_text_summary{font-size:18px}
	
	.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;}
	
	
}
@media all and (max-width:768px){

	.visual_item{height: auto !important;}
	.visual_item img{max-width: 100%;display: block !important;}
	.visual_item .visual_bg{display: none;}
	
	.visual_text .visual_text_tit{font-size:35px;line-height: 1.2em;word-break: keep-all}
	.visual_text .visual_text_summary{font-size:16px}
	.visual_text .visual_text_summary br{display: none;}
	.visual_slide .owl-dots{bottom:20px}
	.visual_slide .owl-dot{width: 30px;height: 3px;}

	.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;}
	.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}

	
}