@import url("common.css");


/***********************************************
모달팝업구간
***********************************************/
/* .adspopup_wrapper {position: fixed; z-index: 9999999999999999; top:0; right: 0; visibility: hidden;  overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box;  width: 100%;  height: 100%; transition: opacity ease-in-out 1s;}
.adspopup_wrapper::after {content:''; width:0; height:100%; position:absolute; top:0; right:0; background:#000; transition-delay:0.8s; transition:all 0.8s ease-in-out; opacity:0; visibility:hidden;}
.adspopup-opened .adspopup_wrapper {visibility: visible; transition: opacity ease-in-out 0.8s; transition-delay:0.5s;}
.adspopup-opened .adspopup_wrapper:after {width:100%; transition:all 0.8s ease-in-out; transition-delay:0s; opacity:1; visibility:visible;}
.adspopup-overflow .adspopup_wrapper {transition: opacity ease-in-out 0.8s;} */


.adspopup {position:fixed; right:0; top:0; height:100%;  width:0; overflow:hidden; -webkit-box-sizing: border-box; box-sizing: border-box;  opacity:1;   box-sizing:border-box;  transition:all 0.8s ease-in-out; box-sizing:border-box;  visibility: hidden; z-index: 9999999;  min-width:320px;}
.adspopup.view {visibility:visible; width:100%; opacity: 1; transition:all 1s; overflow-y:scroll; }



/* Popup remover
***********************************************/
.popupStyle > .adspopup_remover {width:76px; height:16px; position:absolute; top:50px; right:50%; background:url('/img/m_close.png')no-repeat center right; margin-right:-670px; z-index:999;}
.popupStyle > .adspopup_remover::before {content:'CLOSE'; font-family:'urbane', sans-serif; font-size:12px; color:#fff; font-weight:500; vertical-align:middle; letter-spacing:1pt; position:relative; left:0; top:-6px;}
	.adspopup_in { visibility:hidden; opacity:0; transition: opacity ease-in-out 0.8s; }
	 .adspopup.view .adspopup_in {visibility:visible; opacity:1; transition: opacity ease-in-out 0.8s; transition-delay:0.5s;}


	.adspopup_in {padding-bottom:150px; position:relative; z-index:99;}
	.pop_head h2 {display:inline-block; padding:40px 0 70px;}
	.pop_head .btnMenu_popClose {}
	.pop_head .btnMenu_popClose img {margin-left:20px; vertical-align:middle;}



.pro_view {display:flex; flex-wrap:wrap; align-items: center;}
.pro_view .ads_imgBox {position:relative; width:50%; overflow:hidden; }
.pro_view .ads_imgBox li {}
.pro_view .ads_imgBox li img {width:100%; height:auto; background-repeat:no-repeat; background-size:cover; background-position:center;}

.slick-dots {font-size:0; position:absolute; top:20px; right:20px;}
.slick-dots li {display:inline-block; width:10px; height:10px; border:1px solid rgba(255,255,255,0.4); box-sizing:border-box; margin-right:7px; cursor:pointer;}
.slick-dots li:last-child {margin-right:0;}
.slick-dots li.slick-active {border:1px solid #fff; background:#fff;}
.slick-dots li button {border:0; background:transparent; width:0; height:0; font-size:0; display:none;}

.ads_info {width:50%; padding-left:90px; box-sizing:border-box;}
.ads_info h3.p_title {font-family:'urbane', 'Noto Sans KR', sans-serif;  font-size:2.824rem; color:#fff; font-weight:500; line-height:1.2;}
.ads_info p.p_stit {letter-spacing:-0.5pt; line-height:1.8; color:rgba(255,255,255,0.5); margin:10px 0 65px;}
		.ads_info .sns_list {font-size:0;}
		.ads_info .sns_list li {display:inline-block; vertical-align:middle; width:100px; height:100px; border-radius:15px; margin-right:10px; overflow:hidden;}
		.ads_info .sns_list li:last-child {margin-right:0;}
		.ads_info .sns_list li a {position:relative; display:block; width:100%; height:100%;}

		.ads_info .sns_list li.tiktok a {background:#020101 url('/storage/img/sns_icon01.png')no-repeat center;}
		.ads_info .sns_list li.instagram a {
				background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
				background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
				background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
				background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
				background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
		}
		.ads_info .sns_list li.instagram a::before {content:''; display:block; width:100%; height:100%; background:url('/storage/img/sns_icon02.png')no-repeat center; position:absolute; top:0; left:0;}
		.ads_info .sns_list li.youtube a {background:#ff0000 url('/storage/img/sns_icon03.png')no-repeat center;}

.ads_title {font-family:'urbane', 'Noto Sans KR', sans-serif;  text-align:center; color:#fff; font-size:1.765rem; line-height:1; margin:100px 0 25px; letter-spacing:0.3pt;}
.information_cont {letter-spacing:-0.5pt; line-height:1.8; color:rgba(255,255,255,0.5); margin:10px 0 65px;}


.video {}
.video .moreBtn {margin:30px auto 0;}
.video_list {display:flex; flex-wrap:wrap;}
.video_list dl {margin-right:20px; margin-bottom:20px;}

.video_list.tiktok dl {width:calc((100% - 60px) / 4); }
.video_list.tiktok dl:nth-child(4n) {margin-right:0;}

.video_list.youtube dl {width:calc((100% - 40px) / 3); }
.video_list.youtube dl:nth-child(3n) {margin-right:0;}


.video_list dl dt {position:relative; background:#000;}
.video_list dl dt::after {content:''; width:33px; height:42px; background:url('/storage/img/playBtn.png')no-repeat center; position:absolute; top:50%; left:50%; transform:translate(-15px,-21px);}
.video_list dl dt img {width:100%; background-repeat:no-repeat; background-size:cover; background-position:center; opacity:0.6;}
.video_list dl dd {border:1px solid rgba(255,255,255,0.2); border-top:0; color:#fff; font-weight:400; font-size:1.176rem; letter-spacing:-0.5pt; line-height:1.5; padding:25px 40px; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


.tiktok_pop {position:fixed; top:30%; right:50%; z-index:99999999999999999; transition:all 1s; transform:translate(50%,-50%); display:flex; flex-wrap:wrap; align-items: center; opacity:0; visibility:hidden;}
.tiktok_pop.visible {top:50%; opacity:1; visibility:visible; transition-delay:0.5s;}
.tiktok_pop .video_pop_in {}



.youtube_pop {position:fixed; top:30%; right:50%; z-index:99999999999999999; transition:all 1s; transform:translate(50%,-50%); display:flex; flex-wrap:wrap; align-items: center; opacity:0; visibility:hidden;}
.youtube_pop.visible {top:50%; opacity:1; visibility:visible; transition-delay:0.5s;}
.youtube_pop .video_pop_in {}


.ads_moreBtn {display:block; margin:30px auto 0; position:relative; overflow:hidden; width:185px; border:2px solid #fff; z-index:31; border-radius:5px; transition: all 0.3s; text-align:left !important;}
.ads_moreBtn span{font-family:'urbane', sans-serif; display:block; position:relative; z-index:10; letter-spacing:0.8pt; line-height:46px; color:#fff; transition: all 0.3s; padding:0 23px; box-sizing:border-box;  background:url('/img/downArrow_w.png')no-repeat top 50% right 25px; font-size:12px; font-weight:500;}
.ads_moreBtn:hover {border:2px solid #ea0000; transition: all 0.3s;}
.ads_moreBtn:hover span{color:#fff; transition: all 0.3s; }
.ads_moreBtn::before {content: '';width: 0%;height: 100%;display: block;background: #ea0000;position: absolute;-ms-transform: skewX(-20deg);-webkit-transform: skewX(-20deg); transform: skewX(-20deg);   left: -10%;opacity: 1;top: 0; z-index:2;
-moz-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
box-shadow:2px 0px 14px rgba(0,0,0,.6);
}


.ads_moreBtn::after {content: '';width: 0%;height: 100%;display: block; background: #fff; position: absolute;-ms-transform: skewX(-20deg);-webkit-transform: skewX(-20deg); transform: skewX(-20deg);   left: -10%;opacity: 0;top: 0; z-index:1;
-webkit-transition: all .3s cubic-bezier(.2,.95,.57,.99);
-moz-transition: all .3s cubic-bezier(.2,.95,.57,.99);
-o-transition: all .3s cubic-bezier(.2,.95,.57,.99);
transition: all .3s cubic-bezier(.2,.95,.57,.99);
box-shadow: 2px 0px 14px rgba(0,0,0,.6);
}
.ads_moreBtn:hover::before{opacity:1; width: 116%;}
.ads_moreBtn:hover::after{ opacity:1; width: 120%;}


/*******************************************************************************
	@media ~1400px
*******************************************************************************/
@media all and (max-width:1400px) {

.popupStyle > .adspopup_remover {right:5%; margin-right:0;}

.ads_info {padding-left:50px;}


}
/*******************************************************************************
	@media ~1200px
*******************************************************************************/
@media all and (max-width:1200px) {


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {


.adspopup.opened .adspopup_in {padding-bottom:120px;}


.ads_title {margin:80px 0 30px;}

.ads_info {padding-left:30px;}
.ads_info h3.p_title {font-size:2.2rem;}
.ads_info p.p_stit {margin:10px 0 45px;}
.ads_info .sns_list li {width:70px; height:70px;}

.ads_info .sns_list li.tiktok a {background-size:25px !important;}
.ads_info .sns_list li.youtube a {background-size:17px !important;}
.ads_info .sns_list li.instagram a::before {background-size:27px !important;}


.video_list dl {margin-right:15px}
.video_list.tiktok dl {width:calc((100% - 30px) / 3); }
.video_list.tiktok dl:nth-child(4n) {margin-right:15px;}
.video_list.tiktok dl:nth-child(3n) {margin-right:0;}

.video_list.youtube dl {width:calc((100% - 30px) / 3); }
.video_list.youtube dl:nth-child(3n) {margin-right:0;}

.video_list  dl dd {padding:15px 20px;}
.video_list  dl dd img {max-width:25px; max-height:25px; margin-right:10px;}

}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) {



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) {


.pop_head h2 {padding:20px 0 40px;}
.pop_head h2 img {width:85px;}

.popupStyle > .adspopup_remover {top:25px; width:65px;}
.popupStyle > .adspopup_remover::before {font-size:10px; top:1px;}
.adspopup.opened .adspopup_in {padding-bottom:80px;}


.ads_title {font-size:1.3rem; margin:60px 0 20px;}

.pro_view {display:block;}
.pro_view .ads_imgBox {width:100%;}
.pro_view .ads_info {width:100%; padding-left:0; text-align:center; margin:40px 0 0;}
.ads_info p.p_stit {margin:10px 0 25px;}

.ads_info .sns_list li {margin-right:5px; width:55px; height:55px; border-radius:10px;}
.ads_info .sns_list li.tiktok a {background-size:20px !important;}
.ads_info .sns_list li.youtube a {background-size:15px !important;}
.ads_info .sns_list li.instagram a::before {background-size:24px !important;}


.video_list dl {margin-right:10px}
.video_list.tiktok dl {width:calc((100% - 10px) / 2); }
.video_list.tiktok dl:nth-child(4n) {margin-right:10px;}
.video_list.tiktok dl:nth-child(3n) {margin-right:10px;}
.video_list.tiktok dl:nth-child(2n) {margin-right:0;}

.video_list.youtube dl {width:calc((100% - 10px) / 2); }
.video_list.youtube dl:nth-child(3n) {margin-right:10px;}
.video_list.youtube dl:nth-child(2n) {margin-right:0;}

.video_list dl dt::after {width:25px; background-size:100% !important;}
.video_list dl dd {padding:10px; font-size:1rem;}
.video_list dl dd img {max-width:15px; max-height:15px; margin-right:5px;}



.slick-dots {top:10px; right:10px;}
.slick-dots li {width:8px; height:8px; margin-right:5px;}


.ads_moreBtn {width:120px;}
.ads_moreBtn span{line-height:36px; transition: all 0.3s; padding:0 13px; box-sizing:border-box;  background:url('/img/downArrow_w.png')no-repeat top 50% right 13px; font-size:11px; background-size:8px !important;}


}
/*******************************************************************************
	@media 361~480px
*******************************************************************************/
@media all and (max-width:480px) {



}
/*******************************************************************************
	@media ~400px
*******************************************************************************/
@media all and (max-width:400px) {

#video_pop {width:320px;}
.tiktok-embed {width: 320px !important;}
.css-vptvdy {min-width:auto; width:100%;}

}