@charset "utf-8";

#link_wrap{overflow-x:hidden;max-width:800px;margin:0 auto;padding:35px 20px 30px}
.loading {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: #0000;
	opacity: .9;
	text-align: center;
	font-family: 'Apple SD Gothic Neo','Apple SD 산돌고딕 Neo','Microsoft NeoGothic','Droid sans','Nanum Gothic','맑은 고딕','malgun gothic',sans-serif;
}
.lodingbox{margin:15% auto 0; max-width:300px; position:relative;z-index:99;}
.lodingbox span{display:inline-block; width:8px;height:8px; border-radius:10px; margin:0 2px;}
.lodingbox span.one{background-color:#f3f3f3;	-webkit-animation: loader1 3s ease-in-out infinite; animation: loader1 3s ease-in-out infinite;}
.lodingbox span.two{background-color:#d7d7d7; -webkit-animation: loader2 3s ease-in-out infinite; animation: loader2 3s ease-in-out infinite;}
.lodingbox span.three{background-color:#b9b9b9; -webkit-animation: loader3 3s ease-in-out infinite; animation: loader3 3s ease-in-out infinite;}
.lodingbox span.four{background-color:#9d9d9d;-webkit-animation: loader4 3s ease-in-out infinite; animation: loader4 3s ease-in-out infinite;}
.lodingbox span.five{background-color:#818181;-webkit-animation: loader5 3s ease-in-out infinite; animation: loader5 3s ease-in-out infinite;}
.loading_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff;}
.lodingbox img { position: absolute;top: 50%;left: 50%;z-index: 120; width: 50px; height: 50px; margin: -25px 0 0 -25px;}
.loading_img{ position: relative; z-index: 9;text-align: center; margin:0 0 15px;width:100%;}
.loding_txt {position: relative; margin:38px 0; z-index: 9; color: #b9b9b9;font-size:20px;}
.loading_ft_logo{display: block;position: absolute; bottom:15px; z-index: 99;margin: 0 auto;text-align: center; left: 50%;transform: translateX(-50%);}
.loading_pop{display:none;width: 100%; height: 100%;background-color:rgba(0,0,0,.6); position:fixed;top:50%; left:50%; transform:translate(-50%,-50%);z-index: 999;}
.loading .usr_box{position:relative; z-index:9;}
/*.loading .prod_name {	color: #333;	font-size: 15px;	font-weight: 600;}*/
.loading .prod_name {
    position: relative;
    margin-top: 20px;
    font-size: 30px;
    font-weight: 600;
    word-break: break-all;
    background: -webkit-linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);
    background: -moz-linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);
    background: -o-inear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);
    background: linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: gradient 3s ease infinite;
    animation: gradient 3s ease infinite;
    line-height: 42px;
}

@media all and (-ms-high-contrast:none) {
	.loading .prod_name {
		background: transparent;
		-webkit-text-fill-color: #A81AFB;
		color: #A81AFB
	}
	/* IE10 */
	*::-ms-backdrop, .loading .prod_name {
		background: transparent;
		-webkit-text-fill-color: #A81AFB;
		color: #A81AFB
	}
	/* IE11 */
}
.loading .shop_name {color:#111;font-weight:600;font-size:20px;}
.loading .shop_name:before { content: '';display: block;width: 60px;height: 3px;background-color: #1d1e22; margin: 80px auto 20px;}
.loading .lk_id{display: block;margin-top: 4px; line-height: 1.2; color: #b8b8b8; font-size:15px; font-weight:400;}
@-webkit-keyframes loader1 {
	0%{background-color:#f3f3f3;}
	25%{background-color:#d7d7d7;}
	50%{background-color:#b9b9b9;}
	75%{background-color:#9d9d9d;}
	100%{background-color:#818181;}
}
@keyframes loader1{
	0%{background-color:#f3f3f3;}
	25%{background-color:#d7d7d7;}
	50%{background-color:#b9b9b9;}
	75%{background-color:#9d9d9d;}
	100%{background-color:#818181;}
}
@-webkit-keyframes loader2{
	0%{background-color:#818181;}
	25%{background-color:#f3f3f3;}
	50%{background-color:#d7d7d7;}
	75%{background-color:#b9b9b9;}
	100%{background-color:#9d9d9d;}	
}
@keyframes loader2{
	0%{background-color:#818181;}
	25%{background-color:#f3f3f3;}
	50%{background-color:#d7d7d7;}
	75%{background-color:#b9b9b9;}
	100%{background-color:#9d9d9d;}
}
@-webkit-keyframes loader3{
	0%{background-color:#9d9d9d;}
	25%{background-color:#818181;}
	50%{background-color:#f3f3f3;}
	75%{background-color:#d7d7d7;}
	100%{background-color:#b9b9b9;}		
}
@keyframes loader3{
	0%{background-color:#9d9d9d;}
	25%{background-color:#818181;}
	50%{background-color:#f3f3f3;}
	75%{background-color:#d7d7d7;}
	100%{background-color:#b9b9b9;}	
}
@-webkit-keyframes loader4{
	0%{background-color:#b9b9b9;}		
	25%{background-color:#9d9d9d;}
	50%{background-color:#818181;}
	75%{background-color:#f3f3f3;}
	100%{background-color:#d7d7d7;}
	
}
@keyframes loader4{
	0%{background-color:#b9b9b9;}		
	25%{background-color:#9d9d9d;}
	50%{background-color:#818181;}
	75%{background-color:#f3f3f3;}
	100%{background-color:#d7d7d7;}
}
@-webkit-keyframes loader5{
	0%{background-color:#d7d7d7;}
	25%{background-color:#b9b9b9;}		
	50%{background-color:#9d9d9d;}
	75%{background-color:#818181;}
	100%{background-color:#f3f3f3;}		
}
@keyframes loader5{
	0%{background-color:#d7d7d7;}
	25%{background-color:#b9b9b9;}		
	50%{background-color:#9d9d9d;}
	75%{background-color:#818181;}
	100%{background-color:#f3f3f3;}	
}

/*** 상단 정보 ***/
.link_top:after{content:'';display:block;clear:both}
.link_top .top_info{float:left;width:100%;margin-right:-110px;padding-right:110px;-webkit-box-sizing:border-box;box-sizing:border-box}
.link_top .top_info h1{display:-ms-flexbox;display:-moz-box;display:-webkit-box;display:box;overflow:hidden;width:100%;max-height:2.4em;line-height:1.2;color:#1d1e22;font-size:24px;text-overflow:ellipsis;white-space:normal;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link_top .top_info .id{display:block;line-height:1.2;color:#b8b8b8;font-size:14px;font-weight:600}
.link_top .top_info .id:after{content:'';display:block;width:60px;height:2px;margin-top:15px;background-color:#1d1e22}
.link_top .top_info .desc{margin-top:18px;line-height:1.3;color:#56585e;font-size:13px}
.link_top .top_img{overflow:hidden;float:right;width:90px;height:90px;border-radius:45px;-moz-border-radius:45px;-webkit-border-radius:45px}
.link_top .top_img img{width:100%}
/*** 스케줄 ***/
.link_schedule{margin-top:30px}
.link_schedule h2{padding-left:30px;height:20px;line-height:1.9;background:url(/contentsfr/images/linkon/icon/schedule.png) no-repeat 0 50%;background-size:20px auto;color:#1d1e22;font-family:'Lato',sans-serif;font-size:12px;font-weight:400;letter-spacing:1px}
.link_schedule .schedul_list{margin-top:12px}
.link_schedule .schedul_list li:after{content:'';display:block;clear:both}
.link_schedule .schedul_list li span{display:block;float:left;height:26px;line-height:26px}
.link_schedule .schedul_list li span em{margin-right:5px;font-weight:600}
.link_schedule .schedul_list li .state{position:relative;width:70px;padding-right:4px;font-family:'Lato',sans-serif;font-size:11px;font-weight:700;text-align:center}
.link_schedule .schedul_list li .state:after{content:'';display:block;position:absolute;top:0;right:0;width:4px;height:26px;background-color:#e8e8e8}
.link_schedule .schedul_list li .info{overflow:hidden;width:100%;margin-left:-74px;padding:0 10px 0 89px;line-height:28px;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;-webkit-box-sizing:border-box;box-sizing:border-box}
.link_schedule .schedul_list li.soldout span{color:#c8c8c8}
.link_schedule .schedul_list li.open{background-color:#e8e8e8}
.link_schedule .schedul_list li.open .state:after{background-color:#1d1e22}
/*** 링크 ***/
.link_item{margin-top:30px}
.link_item h2{padding-left:30px;height:20px;line-height:1.9;background:url(/contentsfr/images/linkon/icon/link.png) no-repeat 0 50%;background-size:20px auto;color:#1d1e22;font-family:'Lato',sans-serif;font-size:12px;font-weight:400;letter-spacing:1px}
.link_item .link_list{margin-top:15px}
.link_item .link_list li a,.link_item .link_list li .video_show{display:block;width:100%;margin-bottom:15px;padding:15px 20px;border:solid 1px #1d1e22;font-size:15px;font-weight:600;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px}
.link_item .link_list li .active{background-color:#1d1e22;color:#fff}
.link_item .link_list li .ic{padding-right:45px;padding-left:45px;background-image:url(/contentsfr/images/linkon/icon/icon.png);background-size:23px auto;background-repeat:no-repeat;background-position:15px 50%}
.link_item .link_list li.video_item{position:relative;margin-bottom:15px}
/*** 비디오 ***/
.video_item .video_wrap{display:none;position:relative;padding:4px 4px 54px;background-color:#1d1e22}
.video_item .video_wrap .video_container{position:relative;z-index:10;padding-bottom:56.25%;padding-top:30px;height:0}
.video_item .video_wrap .video_container iframe,.video_container object,.video_container embed{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.video_item .video_wrap .video_container .video_close{position:absolute;bottom:-45px;left:-10px;z-index:20;width:70px;height:30px;line-height:30px;background-color:#ff0000;color:#fff;font-size:15px;font-weight:600;text-align:center;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}
.video_item .video_wrap .video_container .video_link{display:block;position:absolute;bottom:-68px;z-index:10;color:#fff}
.video_item .btn_area{position:relative}
.video_item .btn_area .video_ic{display:inline-block;position:absolute;top:50%;left:-7px;z-index:20;width:70px;height:30px;line-height:28px;background-color:#ff0000;color:#fff;font-size:15px;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}
.video_item .btn_area .video_ic:before{content:'';display:inline-block;width:6px;height:30px;margin-right:5px;background:url(/contentsfr/images/icon/ic_video_play.png) no-repeat 0 50%;background-size:100% auto;vertical-align:top}
.video_item .btn_area .video_ic.play{width:40px}
.video_item .btn_area .video_ic.play:before{width:8px;height:30px;margin-right:0}
/*** 소셜 링크 ***/
.social_link{position:relative;margin-top:40px;text-align:center}
.social_link:after{content:'';display:block;clear:both}
.social_link li{display:inline-block;margin:0 10px 15px}
.social_link li a{display:block;overflow:hidden;width:35px;height:30px;text-indent:-9999px}
.social_link li .insta{background:url(/contentsfr/images/linkon/btn/insta.png) no-repeat;background-size:100% auto}
.social_link li .facebook{background:url(/contentsfr/images/linkon/btn/facebook.png) no-repeat;background-size:100% auto}
.social_link li .kakao{background:url(/contentsfr/images/linkon/btn/kakaotalk.png) no-repeat;background-size:100% auto}
.social_link li .msg{background:url(/contentsfr/images/linkon/btn/msg.png) no-repeat;background-size:100% auto}
.social_link li .youtube{background:url(/contentsfr/images/linkon/btn/youtube.png) no-repeat;background-size:100% auto}
/*** 로고 ***/
.logo_srook{display:block;padding-top:30px}
.logo_srook a{display:block;overflow:hidden;width:96px;height:20px;margin:0 auto;background:url(/contentsfr/images/linkon/img/srookpay.png) no-repeat;background-size:100% auto;text-indent:-9999px}
/*** 애니메이션 ***/
#link_wrap .effect1{-webkit-animation:effect1 1s ease;animation:effect1 1s ease;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
#link_wrap .effect2{-webkit-animation:effect2 1s ease;animation:effect2 1s ease;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
#link_wrap .effect3{-webkit-animation:effect3 1s ease;animation:effect3 1s ease;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
#link_wrap .effect4{-webkit-animation:effect4 1s ease;animation:effect4 1s ease;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
#link_wrap .effect5{-webkit-animation:effect5 1s ease;animation:effect5 1s ease;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes effect1{2%{-webkit-transform:translateX(5px);transform:translateX(5px)}4%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}6%{-webkit-transform:translateX(3px);transform:translateX(3px)}8%{-webkit-transform:translateX(-3px);transform:translateX(-3px)}10%{-webkit-transform:translateX(2px);transform:translateX(2px)}12%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes effect1{2%{-webkit-transform:translateX(5px);transform:translateX(5px)}4%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}6%{-webkit-transform:translateX(3px);transform:translateX(3px)}8%{-webkit-transform:translateX(-3px);transform:translateX(-3px)}10%{-webkit-transform:translateX(2px);transform:translateX(2px)}12%{-webkit-transform:translateX(0);transform:translateX(0)}}
@-webkit-keyframes effect2{3%{-webkit-transform:scale(1);transform:scale(1)}6%{-webkit-transform:scale(1.1);transform:scale(1.1)}9%{-webkit-transform:scale(1);transform:scale(1)}12%{-webkit-transform:scale(1.1);transform:scale(1.1)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes effect2{3%{-webkit-transform:scale(1);transform:scale(1)}6%{-webkit-transform:scale(1.1);transform:scale(1.1)}9%{-webkit-transform:scale(1);transform:scale(1)}12%{-webkit-transform:scale(1.1);transform:scale(1.1)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes effect3{2%{-webkit-transform:translateY(5px);transform:translateY(5px)}4%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}6%{-webkit-transform:translateY(3px);transform:translateY(3px)}8%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}10%{-webkit-transform:translateY(2px);transform:translateY(2px)}12%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes effect3{2%{-webkit-transform:translateY(5px);transform:translateY(5px)}4%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}6%{-webkit-transform:translateY(3px);transform:translateY(3px)}8%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}10%{-webkit-transform:translateY(2px);transform:translateY(2px)}12%{-webkit-transform:translateY(0);transform:translateY(0)}}
@-webkit-keyframes effect4{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}2%{-webkit-transform:scale3d(1,.75,1);transform:scale3d(1,.75,1)}4%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}6%{-webkit-transform:scale3d(1.1,.85,1);transform:scale3d(1.1,.85,1)}8%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}10%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}12%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes effect4{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}2%{-webkit-transform:scale3d(1,.75,1);transform:scale3d(1,.75,1)}4%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}6%{-webkit-transform:scale3d(1.1,.85,1);transform:scale3d(1.1,.85,1)}8%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}10%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}12%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@-webkit-keyframes effect5{2%{-webkit-transform:rotate3d(0,0,1,7deg);transform:rotate3d(0,0,1,7deg)}4%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}6%{-webkit-transform:rotate3d(0,0,1,3deg);transform:rotate3d(0,0,1,3deg)}8%{-webkit-transform:rotate3d(0,0,1,-1deg);transform:rotate3d(0,0,1,-1deg)}10%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}
@keyframes effect5{2%{-webkit-transform:rotate3d(0,0,1,7deg);transform:rotate3d(0,0,1,7deg)}4%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}6%{-webkit-transform:rotate3d(0,0,1,3deg);transform:rotate3d(0,0,1,3deg)}8%{-webkit-transform:rotate3d(0,0,1,-1deg);transform:rotate3d(0,0,1,-1deg)}10%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}

/*** 랜딩 페이지 ***/
#landing{max-width:800px;margin:0 auto;padding:0 20px 50px}
#landing .desc{display:block;margin-top:35px;color:#b8b8b8;font-size:15px;font-weight:600;text-align:center}
#landing .prod_name{position:relative;margin-top:20px;line-height:1;font-size:15vmin;font-weight:600;word-break:break-all;background:-webkit-linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);background:-moz-linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);background:-o-inear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);background:linear-gradient(-45deg, #ff9900, #ff00a8 38%, #8000bb 71%);background-size:200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:gradient 5s ease infinite;animation:gradient 5s ease infinite}

#landing .shop_name:before{content:'';display:block;width:60px;height:3px;margin-top:30px;background-color:#1d1e22}
#landing .shop_name p{display:-webkit-box;overflow:hidden;width:100%;max-height:2.4em;margin-top:20px;line-height:1.2;color:#1d1e22;font-size:24px;font-weight:600;text-overflow:ellipsis;white-space:normal;word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#landing .id{display:block;margin-top:4px;line-height:1.2;color:#b8b8b8;font-size:14px;font-weight:600}
#landing .logo{display:block;margin-top:50px}
#landing .logo a{display:block;overflow:hidden;width:96px;height:20px;margin:0 auto;background:url(/contentsfr/images/linkon/img/srookpay.png) no-repeat;background-size:100% auto;text-indent:-9999px}
/*** 임시 메인 ***/
.main_img{position:relative;top:50%;padding:20px;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.main_img img{max-width:100%}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #landing .prod_name{
        color:#8000bb;
        background: transparent;
    }		
}
@keyframes gradient {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
/* 에러페이지  */
.err_page {background-color: #f1f3f7; }
#error_page {border: 1px solid #d6d7db;position: absolute;top: 50%;width: 100%;margin-top: -105px;text-align: center;background: #fff url(/Contents/img/err_icon.gif) no-repeat 54px center;max-width: 780px;height: 345px;margin: 0 auto;box-sizing: border-box;padding:40px 0 0 56px;left: 50%;transform: translate(-50%,-50%);}
#error_page .error_page_inner {max-width: 450px;margin: 0 0 0 230px; text-align: left;}
#error_page .error_page_inner .error_desc {margin: 0 15px;color: #929292;font-size: 13px;}
#error_page .error_page_inner .error_desc span {display: block;color:#666;font-size: 16px;line-height: 23px;margin: 20px 0 0; letter-spacing: -1px;}
#error_page .error_page_inner .error_desc span.error_desc_tit, #error_page .error_page_inner .error_desc span.error_desc_tit strong{color: #222;font-weight: 600;font-size: 28px;letter-spacing: -3px;}
#error_page .error_page_inner .error_bottom {margin: 25px 15px 0;padding-top: 15px;border-top: solid 1px #d9d9d9;color: #222;}
#error_page .error_page_inner .error_bottom span {display: block;margin: 0 auto 10px;color: #222;font-size:16px;font-weight:400;vertical-align: middle;}
#error_page .error_page_inner .error_bottom .linkon_wbtn { background-color: #7c20b0;width: 142px; height: 40px; padding: 5px;display: block; font-size: 16px; color: #fff;text-align:center;line-height: 40px; margin: 20px 0  0;text-decoration:none; }
#error_page .error_page_inner .error_bottom .linkon_wbtn:hover{text-decoration:underline;}

@media(max-width:1080px) {
	#error_page {width: calc(90% - 40px);height:auto;margin: 0 auto;padding: 140px 0 30px 15px;background-position: center 40px;background-size: 125px auto;}
	#error_page .error_page_inner{margin-left: 0;margin: 0 auto;max-width: 80%; text-align:center;}
	#error_page .error_page_inner .error_desc span.error_desc_tit, #error_page .error_page_inner .error_desc span.error_desc_tit strong{font-size: 1.2rem;}
	#error_page .error_page_inner .error_desc span{font-size: 13px;line-height:20px;text-align: center;}
	#error_page .error_page_inner .error_bottom .linkon_wbtn{width: 80%;height:30px;line-height: 28px;margin: 10px auto 0;}
	#error_page .error_page_inner .error_bottom span{text-align: center;text-indent: -9px;}

}
@media(max-width:480px) {
	#error_page {width: calc(90% - 20px);}
	#error_page .error_page_inner {max-width: 100%;}
}