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

@media screen and (max-width:1180px) {
    /* layout */
    nav {width:100vw;height: 100px;}
    nav .logo {margin-left: 3vw;width:200px;height: 90px;}
    #footer {width: 100vw;height: 150px;margin-top: 100px;}

    .gnb {display: none;}
	.paydo_360 {display: none;}

	#portfolio {width: 100vw;}
	#portfolio_wrap {width: 100vw;}
	.tab-word {width: 100vw;}
	.tab-btn {padding: 7px 15px 5px 15px;margin:0 10px 10px 0; background-color: #fff;color: #333;font-size: 18px;}
	.title {margin: 20px 30px;}
	.title_wrap .bullet {left:420px}
	#reference-wrap {width: 100vw;height: auto;padding: 0;}
	.thumbnail{width:calc((100vw / 2));}

	.video-wrap {width: 90vw !important; height:auto !important}
	.video-close {top: 5vw;right: 5vw;width: 10vw;height: 10vw;}
}

@media screen and (max-width:600px) {
	.title {margin: 10px 20px;font-size: 24px;}
	.tab-btn {padding: 4px 10px 1px 10px;margin:0 2vw 1vh 0;font-size: 15px;}
	.tab-word {padding: 5px 15px;}
	.title_wrap .bullet {display: none;}

	.thumbnail-info-box {display: none;}
	.thumbnail-title{font-size:18px;line-height: 28px;}
	.thumbnail-subject{font-size:16px;line-height: 24px;}
	.thumbnail-keyword{font-size:14px;line-height: 20px;margin-top: 8px;}

    nav {width:95%;height: 40px;margin-top: 10px;margin-left: 10px;}
	nav .logo {width: 40px; height: 40px; background: url(../img/logo-m.svg) no-repeat center; background-size: contain;}
    #footer {height:auto;margin-top:30px;padding: 5vw 3vw;}
    #footer .logo {width:45%;height: 30px;}
    #footer .info {width:55%;font-size: 10px;}
	
}

@media screen and (max-width:280px) {
	.title {margin: 10px 20px;font-size: 20px;}
	.tab-btn {padding: 4px 7px 1px 7px;margin:0 2vw 1vh 0;font-size: 15px;}
	.tab-word {padding: 5px 10px;}
	.thumbnail{width:100vw;}
}

@media all and (max-height:450px) {
    nav {height: 50px;}
    nav .logo {width: 40px;height: 40px;background: url(../img/logo-m.svg) no-repeat center;background-size: contain;}
}

@media all and (max-width:1180px) and (orientation:landscape) {
	.video-wrap {width: 100vh !important; height:auto !important}
	.video-close {top: 3vh;right: 3vw;width: 5vw;height: 5vw;}
}