@charset "utf-8";
@import "font/webfonts.css";

header {position:relative;z-index: 1;}
body {cursor: default; font-family: 'gmsl';}

.title_wrap {position: relative;}
.title {font-size:35px; color:#616161;margin:100px 0 30px 255px;background: url(../img/fill.svg) repeat-x; -webkit-background-clip: text;-webkit-text-fill-color: transparent; animation: title 10s linear infinite;font-family: 'gmsb';}
@keyframes title {
	0% {background-position: 0 -5px;}
	50% {background-position: 0 -35px;}
	100% {background-position: 0 -5px;}
}

.title_wrap .bullet {width: 12px; height: 12px; display: block; position: absolute;background-color: #2572ff;top: -5px; left: 635px;}

#portfolio {width: 1920px; height: auto;}
#portfolio_wrap {width: 1700px; height: auto;margin: 0 auto;}
.tab-word {width: 1200px; height: auto;margin: 0 auto;padding: 10px 30px;position: relative;}
.tab-btn {padding: 10px 30px 8px 30px;border: 2px solid #333;border-radius: 30px;margin-right: 15px; margin-bottom: 15px;background-color: #fff;color: #333;font-size: 18px;}

#reference-wrap {width: 1700px; height:100%; display: flex;flex-direction: row; align-items: center;flex-wrap: wrap;margin: 0 auto; box-sizing: border-box;padding: 10px 0 0 10px;position: relative;}
.thumbnail{width:calc((100% / 4));height:auto;position: relative;overflow: hidden;}
.thumbnail-wrap{width:100%;height:auto;display: flex;}
.thumbnail-img{width:100%;padding-bottom:56.25%;}
.thumbnail-info-box {display: none;}
.thumbnail-info{width: 100%; height: 100%;position: absolute; bottom: 0; left: 0; background-color: rgba(3,3,3,0.8); color: #fff; text-align: center;display: flex;align-content: center; align-items: center;justify-content: center;flex-direction: column;padding: 20px;word-break: keep-all}
.thumbnail-title{font-family:"gmsm";font-size:22px;line-height:32px;letter-spacing:-1px;width: 100%;}
.thumbnail-subject{font-family:"gmsl";font-size:18px;line-height:28px;letter-spacing:-1px;width: 100%;}
.thumbnail-keyword{color:#fff;font-size:16px;font-family: 'gmsl';margin-top: 15px;}

.thumbnail-wrap:hover .thumbnail-info-box{display: block;}
.thumbnail-wrap:hover .thumbnail-img{transform: scale(1.3);transition: all 1s linear}

.paydo_360 {width: 200px; height: 200px; background: url(../img/lotate.svg);background-size: cover;animation: paydo_360 25s linear infinite;position:absolute; top: 200px; right: -100px;opacity: 0.3;z-index: -1;}
@keyframes paydo_360 {
    to {transform: rotate(0deg);}
    from {transform: rotate(360deg);}
}

#video-popup {width: 100%; height: 100%; position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index: 10;}
.video{position:relative;width:auto;height:auto;}
.video-close {width: 60px; height: 60px; position:absolute; top:80px; right:150px;z-index: 999;text-align: center;}
.close-btn {width: 100%;}
.close-text {font-size: 15px; line-height: 60px;color: #fff;transition: all .3s ease-in;opacity: 0;}
.close-btn:before, .close-btn:after {content: '';width: 100%;height: 2px;position: absolute;background: #fff;left: 0;transition: all .3s ease-in;}
.close-btn:before {top: 50%; transform: rotate(45deg);}
.close-btn:after {bottom: 50%;transform: rotate(-45deg);}
.video-close:hover .close-text {opacity: 1;}
.video-close:hover .close-btn:before, .video-close:hover .close-btn:after {transform: rotate(0);}
.video-close:hover .close-btn:before {top: 0;}
.video-close:hover .close-btn:after {bottom: 0;}