@charset "utf-8";

*{margin:0;box-sizing:border-box;}
html,body{height:100%;}
.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell{display:block;}

#visual-story-full iframe,
#visual-story-full video{min-width:100%;min-height:100%;max-width:none;max-height:none;}
#visual-story-full .video-background{position:relative;overflow:hidden;height:100%;background:#000;z-index:-99;}
#visual-story-full .video-area{position:absolute;top:0;left:0;width:100%;height:100%;}
#visual-story-full .video-area video,
#visual-story-full .video-area iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
@media (min-aspect-ratio:16/9){#visual-story-full .video-area>*{height:130%;}}
@media (max-aspect-ratio:16/9) and (max-width:1100px) {#visual-story-full .video-area>*{width:270%;}}
@media (max-aspect-ratio:16/9) and (max-width:600px) {#visual-story-full .video-area>*{width:320%;}}
#visual-story-full .section{overflow:hidden;text-align:center;color:#fff;background-color:#333;}
#visual-story-full .section.active{z-index:1;}
#visual-story-full .section.active:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
#visual-story-full .section thumb,
#visual-story-full .section .txt{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%;}
#visual-story-full .section .thumb{position:relative;overflow:hidden;height:100%;}
#visual-story-full .section .thumb img{ position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);}
#visual-story-full .section .txt{display:table;background:rgba(0,0,0,0.6);}
#visual-story-full .section .txt>div{display:table-cell;padding:39px;color:#fff;vertical-align:middle;}
#visual-story-full .section .txt>div>*{line-height:1.4;max-width:1020px;margin-right:auto;margin-left:auto;}
#visual-story-full .section .txt h1{line-height:1.18;margin-bottom:22px;font-size:1.875rem;font-weight:600;letter-spacing:-0.06em;}
#visual-story-full .section .tit{display:none;position:absolute;bottom:0;right:0;left:0;line-height:1.4;padding:18px 20px 50px;background-color:#000;}
#visual-story-full .section .tit span{display:block;overflow:hidden;max-height:3em;text-align:left;color:#fff;box-sizing:border-box;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;word-wrap:break-word;-webkit-line-clamp:2;}
#visual-story-full .section:first-child .txt>div>*{position:relative;top:15px;opacity:0;animation:txt-area-h1 0.6s 0.5s forwards;-webkit-animation:txt-area-h1 0.6s 0.5s forwards;}
@media (max-aspect-ratio:16/9){
	#visual-story-full .video-area>*{width:130%;}
	#visual-story-full .section .thumb img{min-width:100%;max-height:100%;width:auto;height:auto;}
}
@media screen and (max-width:750px) and (max-aspect-ratio:16/9){#visual-story-full .video-area>*{width:100%;}}
@keyframes txt-area-h1 {to {top:0;opacity:1;}}
@-webkit-keyframes txt-area-h1 {to {top:0;opacity:1;}}

/* visual story close */
.wrap-visual-story .btn-close-pop{left:7px;top:4px;right:auto;z-index:999;}

/* Navigation */
#fp-nav{display:none;left:auto;top:50%;right:50px !important;width:30px;padding:12px 0;border-radius:15px;color:#fff;background-color:rgba(0,0,0,0.4);}
#fp-nav ul li, .fp-slidesNav ul li{margin:16px auto;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{width:5px;height:5px;background-color:#fff;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{width:10px;height:10px;margin:-5px 0 0 -5px;background-color:#89dcfc;}
.visual-nav{position:absolute;top:0;right:0;padding:2px 13px 2px 11px;background-color:#000;z-index:999;}
.visual-nav [id*="page-"]{display:none;}
.visual-nav #menu{display:inline-block;margin-right:4px;color:rgba(255,255,255,.5);vertical-align:middle;}
.visual-nav #menu a{display:block;width:15px;height:15px;font-size:0;background:url(./../images/common/ico_arrow_visual_first.png) no-repeat center 1px / 10px;}
.num{display:inline-block;position:static;font-size:0.875em;white-space:nowrap;color:rgba(255,255,255,.3);vertical-align:middle;z-index:100;}

/* Share */
.share-btn-area{/*display:none;*/}
.share-btn-area li{display:inline-block;margin-bottom:0;margin-left:4px;}
.share-btn-area li a{width:28px;height:28px;border-radius:0;background:#0c0c0c url(./../images/common/ico_visualstory.png) no-repeat;}
.share-btn-area li a:before,
.share-btn-area li a:after{display:none;}
.share-btn-area li.copy a{background-position:6px 6px;}
.share-btn-area li.download a{background-position:-22px 6px;}

/* Footer */
.wrap-visual-story .footer{position:absolute;bottom:-100%;left:0;width:100%;height:100%;transition:all ease .5s;letter-spacing:-10px;z-index:998;}
.wrap-visual-story .footer .inner{position:relative;height:100px;background-color:pink;z-index:1;}
.wrap-visual-story .footer .relationWrap{display:inline-block;width:100%;padding:39px;letter-spacing:0;vertical-align:middle;box-sizing:border-box;}
.wrap-visual-story .footer .relationWrap:before{content:"";display:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(15,15,15,0.6);z-index:-1;}
.wrap-visual-story .footer.on{bottom:0;}
.wrap-visual-story .footer.on:before{content:"";display:inline-block;width:1px;height:100%;vertical-align:middle;}
.wrap-visual-story .footer.on:after{content:"";display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,15,15,0.5);z-index:-1;}
.wrap-visual-story .footer.on .relationWrap:before{display:block;}
.wrap-visual-story .footer .relationWrap ul,.slide-visual-story-wrap .footer .relationWrap li{margin:0;list-style:none;}
.wrap-visual-story .footer .relationWrap h1{margin-bottom:19px;font-size:1.375em;font-weight:700;color:#fff;}
.wrap-visual-story .footer .relationWrap .relation{margin-bottom:17px;padding-bottom:25px;border-bottom:1px solid rgba(102,102,102,.5);}
.wrap-visual-story .footer .relationWrap .relation ul{padding:0;}
.wrap-visual-story .footer .relationWrap .relation li{position:relative;}
.wrap-visual-story .footer .relationWrap .relation li + li{margin-top:14px;}
.wrap-visual-story .footer .relationWrap .relation li a{text-decoration:none;}
.wrap-visual-story .footer .relationWrap .relation em{display:inline-block;position:absolute;top:0;left:0;padding-top:0;padding-bottom:0;text-transform:uppercase;font-size:0.781em;font-style:normal;color:#fff;opacity:.35;}
.wrap-visual-story .footer .relationWrap .relation .subject{overflow:hidden;line-height:1.4em;padding-top:22px;color:#fff;text-overflow:ellipsis;font-size:1.063em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;}
.wrap-visual-story .footer .relationWrap .sns h1{display:none;}
.wrap-visual-story .footer .relationWrap .sns ul{margin-right:-16px;margin-left:-16px;padding:0;}
.wrap-visual-story .footer .relationWrap .sns li{display:inline-block;float:left;width:16.6666%;margin-top:10px;}
.wrap-visual-story .footer .relationWrap .sns li a{display:block;position:relative;overflow:hidden;margin:0 auto;text-align:center;font-size:0;transition:all ease .7s;}
.wrap-visual-story .footer .relationWrap .sns li a:before{content:"";display:inline-block;width:28px;height:25px;background-size:auto 26px;background-repeat:no-repeat;vertical-align:middle;transition:all .4s ease-in-out;}
.wrap-visual-story .footer .relationWrap .sns li a:before{content:"";opacity:1;background-image:url(./../images/common/ico_sns_collection_on.png);}
.wrap-visual-story .footer .relationWrap .sns li a:focus,
.wrap-visual-story .footer .relationWrap .sns li a:hover{opacity:0.8;}
.wrap-visual-story .footer .relationWrap .sns li.facebook a:before{background-position:5px 0;}
.wrap-visual-story .footer .relationWrap .sns li.twitter a:before{background-position:-32px 0;}
.wrap-visual-story .footer .relationWrap .sns li.kakaotalk a:before{background-position:-64px 0;}
.wrap-visual-story .footer .relationWrap .sns li.kakaostory a:before{background-position:-91px 0;}
.wrap-visual-story .footer .relationWrap .sns li.email a:before{background-position:-129px 0;}
.wrap-visual-story .footer .relationWrap .sns li.url a{text-transform:uppercase;font-size:0.938em;font-weight:bold;color:#fff;}
.wrap-visual-story .footer .relationWrap .sns li.url a:before{display:none;}

@media screen and (min-width:751px){
	#visual-story-full .section .txt>div{padding:100px;}
	#visual-story-full .section .txt>div>*{line-height:1.5;padding:0 16px;}
	#visual-story-full .section .txt p{margin-top:0;font-size:1.75em;}
	#visual-story-full .section .tit{padding:18px 120px 13px 48px;}
	#visual-story-full .section .tit span{font-size:1.375em;white-space:nowrap;-webkit-line-clamp:1;}
	
	/* Navigation */	
	#fp-nav{/*display:block;*/}
	.visual-nav{top:auto;right:22px;bottom:45px;background-color:transparent;}
	.visual-nav [id*="page-"]{display:block;position:relative;width:25px;height:23px;line-height:23px;margin-right:auto;margin-left:auto;padding:0;text-align:center;font-size:0;background-color:#0c0c0c;}
	.visual-nav [id*="page-"]:before{content:"";display:inline-block;width:15px;height:12px;background:url(./../images/common/ico_visualstory.png) no-repeat;vertical-align:middle;}
	.visual-nav #page-prev{margin-bottom:33px;}
	.visual-nav #page-prev:before{background-position:0 -25px;}
	.visual-nav #page-next:before{background-position:-30px -25px;}
	.visual-nav #menu{margin-right:0;margin-bottom:8px;}
	.visual-nav #menu a{width:auto;height:auto;font-size:0.719em;color:rgba(255,255,255,.5);background:none;}
	.num{display:block;position:absolute;bottom:50%;right:50%;font-size:0.813em;color:#fff;transform:translate(50%, 125%);}
	
	/* Footer */
	.wrap-visual-story .footer{height:auto;}
	.wrap-visual-story .footer .relationWrap{display:block;position:absolute;bottom:0;left:0;padding:58px 40px 58px 103px;}
	.wrap-visual-story .footer .relationWrap>*{float:left;}
	.wrap-visual-story .footer .relationWrap h1{margin-bottom:19px;font-size:1.625em;font-weight:400;}
	.wrap-visual-story .footer .relationWrap .relation{width:55%;margin-right:130px;margin-bottom:0;padding-bottom:0;border-bottom:none;}
	.wrap-visual-story .footer .relationWrap .relation em{position:static;padding-top:15px;font-size:0.688em;}
	.wrap-visual-story .footer .relationWrap .relation ul{margin-left:-29px;}
	.wrap-visual-story .footer .relationWrap .relation li{float:left;width:calc((100% / 3) - 29px);margin-right:29px;padding-left:29px;}
	.wrap-visual-story .footer .relationWrap .relation li + li{margin-top:0;}
	.wrap-visual-story .footer .relationWrap .relation li:before{content:"";position:absolute;top:3px;left:0;bottom:2px;width:1px;background-color:rgba(255,255,255,.25);}
	.wrap-visual-story .footer .relationWrap .relation li:first-child:before{display:none;}
	.wrap-visual-story .footer .relationWrap .relation .subject{line-height:1.55;padding-top:0;}
	.wrap-visual-story .footer .relationWrap .sns{width:clac(45% - 130px);}
	.wrap-visual-story .footer .relationWrap .sns h1{display:block;}
	.wrap-visual-story .footer .relationWrap .sns ul{margin-right:0;margin-left:-5px;}
	.wrap-visual-story .footer .relationWrap .sns li{float:none;width:auto;margin-top:4px;margin-right:15px;}
	/*.wrap-visual-story .footer .relationWrap .sns li a{width:70px;height:70px;line-height:70px;}
	.wrap-visual-story .footer .relationWrap .sns li a:before,
	.wrap-visual-story .footer .relationWrap .sns li a:after{position:absolute;left:18px;top:18px;width:34px;height:34px;background-size:auto;}
	.wrap-visual-story .footer .relationWrap .sns li a:before{content:"";background-image:url(./../images/common/ico_sns_collection.png);opacity:1;-webkit-transform:translate3d(0, 0, 0) rotateY(0);-moz-transform:translate3d(0, 0, 0) rotateY(0);transform:translate3d(0, 0, 0) rotateY(0);}
	.wrap-visual-story .footer .relationWrap .sns li a:after{opacity:0;-webkit-transform:translate3d(-100%, 0, 0) rotateY(-90deg);-moz-transform:translate3d(-100%, 0, 0) rotateY(-90deg);transform:translate3d(-100%, 0, 0) rotateY(-90deg);}
	.wrap-visual-story .footer .relationWrap .sns li a:hover:before{opacity:0;-webkit-transform:translate3d(100%, 0, 0) rotateY(90deg);-moz-transform:translate3d(100%, 0, 0) rotateY(90deg);transform:translate3d(100%, 0, 0) rotateY(90deg);}
	.wrap-visual-story .footer .relationWrap .sns li a:hover:after{opacity:1;-webkit-transform:translate3d(0, 0, 0) rotateY(0);-moz-transform:translate3d(0, 0, 0) rotateY(0);transform:translate3d(0, 0, 0) rotateY(0);}
	.wrap-visual-story .footer .relationWrap .sns li.facebook a:before,
	.wrap-visual-story .footer .relationWrap .sns li.facebook a:after{background-position:8px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.twitter a:before,
	.wrap-visual-story .footer .relationWrap .sns li.twitter a:after{background-position:-45px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.instagram a:before,
	.wrap-visual-story .footer .relationWrap .sns li.instagram a:after{background-position:-100px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.kakaotalk a:before,
	.wrap-visual-story .footer .relationWrap .sns li.kakaotalk a:after{background-position:-150px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.kakaostory a:before,
	.wrap-visual-story .footer .relationWrap .sns li.kakaostory a:after{background-position:-191px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.youtube a:before,
	.wrap-visual-story .footer .relationWrap .sns li.youtube a:after{background-position:-248px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.email a:before,
	.wrap-visual-story .footer .relationWrap .sns li.email a:after{background-position:-299px 0;}
	.wrap-visual-story .footer .relationWrap .sns li.url a:before,
	.wrap-visual-story .footer .relationWrap .sns li.url a:after{background-position:-343px 0;}*/
}