/*font*/



@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
    src: local('Noto Sans KR Light'), local('NotoSansKR-Light'),
    url(./font/NotoSansKR-Light.eot),
    url(./font/NotoSansKR-Light.eot?#iefix) format('embedded-opentype'),
    url(./font/NotoSansKR-Light.woff) format('woff'),
    url(./font/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
    src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
    url(./font/NotoSansKR-Regular.eot),
    url(./font/NotoSansKR-Regular.eot?#iefix) format('embedded-opentype'),
    url(./font/NotoSansKR-Regular.woff) format('woff'),
    url(./font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
    src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
    url(./font/NotoSansKR-Bold.eot),
    url(./font/NotoSansKR-Bold.eot?#iefix) format('embedded-opentype'),
    url(./font/NotoSansKR-Bold.woff) format('woff'),
    url(./font/NotoSansKR-Bold.otf) format('opentype');
}

.nsL{
	font-family: 'Noto Sans KR';
	font-weight: 300;
}

.nsR{
	font-family: 'Noto Sans KR';
	font-weight: 400;
}


.nsB{
	font-family: 'Noto Sans KR';
	font-weight: 700;
}



/*public*/



.size-0{
	font-size:9pt;
}

.size-2{
	font-size:12pt;
}

.size-3{
	font-size:15pt;
}

.size-4{
	font-size:20pt;
}

.size-5{
	font-size:25pt;
}

.size-big{
	font-size:60pt;
}

.black{
	color:#1A1A1A;
}

.red{
	color:#FF0000;
}

.clear{
	clear:both;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
}

.line160{
	line-height:160%;
}

.back-gray{
	background-color:#F9F9F9;
}

.gray{
	color:#888888;
}



/*link*/



a:link{
	color:#1A1A1A;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	text-decoration:none;
}
a:visited, a:active{
	color:#1A1A1A;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	text-decoration:none;
}
a:hover{
	color:#999999;
}

a.menu:link{
	color:#1A1A1A;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	text-decoration:none;
}
a.menu:visited, a.menu:active{
	color:#1A1A1A;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	text-decoration:none;
}
a.menu:hover{
	color:#999999;
}



/*other*/



*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	transition-property:box-shadow,color,opacity;  
 	transition-duration:0.3s; 
}

body{
	font-size:10pt;
	line-height:200%;
	color:#666666; 
	font-family:'Noto Sans KR';
	font-weight:100;
}

nav{
	width:100%;
	height:70px;
	background:#FFFFFF;
	border-bottom:1px solid #F2F2F2;
	position:fixed;
	z-index:10;
	top:0px;
	left:0px;
}

.nav-box{
	width:1000px;
	height:100%;
	margin:auto;
}

.nav-box-logo{
	width:80px;
	height:40px;
	margin:15px 0px;
	background-image:url(./img/img_nav-logo.png);
	background-size:contain;
	background-repeat:no-repeat;
	float:left;
	box-shadow:100px 0 0 0 rgba(255,255,255,0) inset;
}

.nav-box-logo:hover{
	box-shadow:100px 0 0 0 rgba(255,255,255,0.6) inset;
}


.nav-box-menu{
	width:auto;
	height:50px;
	margin:15px 0px;
	float:right;
}

.nav-box-menu ul{
	width:auto;
	height:40px;
	line-height:40px;
	float:left;
}

.nav-box-menu li{
	width:auto;
	height:50px;
	list-style:none;
	float:left;
	margin-right:20px;
}

.nav-box-menu-works{
	width:120px;
	height:40px;
	background-image:url(./img/img_nav-works.png);
	background-size:contain;
	background-repeat:no-repeat;
	float:right;
	box-shadow:150px 0 0 0 rgba(255,255,255,0) inset;
}

.nav-box-menu-works:hover{
	box-shadow:150px 0 0 0 rgba(255,255,255,0.6) inset;
}


section{
	width:100%;
	position:relative;
}

.section-color{
	width:100%;
	height:100%;
	position:fixed;
	z-index:1;
	background-color:#FFFFFF;
	transition:background 1s;
	animation:section-first 8s;
}

.section-color.A{
	transition:background 3s;
	background-color:#FF0000;
}

.section-color.B{
	transition:background 1s;
	background-color:#8C0000;
}

.section-color.C{
	transition:background 1s;
	background-color:#0000FF;
}

.section-color.D{
	transition:background 1s;
	background-color:#0000A3;
}

.section-color.E{
	transition:background 1s;
	background-color:#F4F4F4;
}

.section-back{
	width:100%;
	height:100%;
	position:fixed;
	background:url(./img/img_main-back.png) no-repeat 50% 100%;
	background-size:cover;
	z-index:3;
}

.section-back-rotate{
	width:1000px;
	height:100%;
	position:relative;
	z-index:4;
	margin:auto;
	animation:main-wiggle 6s infinite;
}

.section-back-rotate-img{
	position:absolute;
	bottom:0px;
	margin-left:800px;
	width:300px;
	height:300px;
	background-image:url(./img/img_main-rotate.png);
	background-repeat:no-repeat;
	background-size:contain;
	animation:main-rotate linear 10s infinite;
}

@keyframes main-rotate{
    0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@keyframes main-wiggle{
    0% {transform:translate(0px, 0px);}
	50% {transform:translate(0px, -60px);}
	100% {transform:translate(0px, 0px);}
}

.main{
	width:100%;
	height:1080px;
	height:100vh;
	position:relative;
	overflow:hidden;
}

.main-title-back{
	width:100%;
	height:100%;
	padding-top:140px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
}

.main-title{
	width:570px;
	height:320px;
	position:relative;
	margin:auto;
	background-image:url(./img/img_main-title.png);
	background-size:contain;
	background-repeat:no-repeat;
	animation:title-up 2s;
	z-index:5;
}

@keyframes title-up{
    0% {transform:translate(0px, -40px);opacity:0;}
	100% {transform:translate(0px, 0px);opacity:1;}
}

.main-content{
	width:100%;
	height:100%;
	position:relative;
	z-index:5;
	overflow:hidden;
	opacity:0;
	transform:translate(0px,50px);
	transition-property:opacity,transform;
	transition-duration:0.2s;
}

.main-content.top{
	transition-property:opacity,transform;
	transition-duration:1s;
	transition-delay:0.6s;
	transform:translate(0px,0px);
	opacity:1;
}

.main-content-back{
	width:50%;
	height:100%;
	background-color:#FFFFFF;
	position:absolute;
	z-index:5;
}

.main-content-front{
	width:1000px;
	height:100%;
	padding-right:100px;
	position:relative;
	margin:auto;
	z-index:5;
}

.main-content-front-back{
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	position:relative;
	z-index:6;
}

.main-content-front-text{
	width:800px;
	height:600px;
	position:absolute;
	top:50%;
	margin-top:-300px;
}

.content-side{
	width:80px;
	height:80px;
	background:#1A1A1A;
	line-height:80px;
	text-align:center;
	color:#FFFFFF;
	float:left;
}

.content-text-box{
	position:relative;
	width:640px;
	height:600px;
	float:right;
}

.content-text-box-left{
	width:310px;
	height:auto;
	float:left;
}

.content-text-box-right{
	width:310px;
	height:auto;
	float:right;
	margin-left:20px;
}

.content-text-box-subject{
	width:200px;
	height:auto;
	float:left;
}

.content-text-box-credit{
	width:280px;
	height:auto;
	float:left;
}

.content-text-box-credit-in{
	width:50%;
	height:auto;
	float:left;
}

.content-text-box-link{
	width:150px;
	height:auto;
	float:right;
	text-align:right;
}

.content-text-box-time{
	width:auto;
	height:auto;
	float:left;
	line-height:120%;
	margin:20px 50px 0px 0px;
}

.content-text-box-button{
	width:150px;
	height:50px;
	position:absolute;
	right:-125px;
	bottom:50px;
	background-image:url(./img/img_nav-works.png);
	background-size:contain;
	background-repeat:no-repeat;
	animation:box-button 4s infinite;
	box-shadow:150px 0 0 0 rgba(255,255,255,0) inset;
}

.content-text-box-button:hover{
	box-shadow:150px 0 0 0 rgba(255,255,255,0.6) inset;
}

@keyframes box-button{
    0% {transform:translate(0px, 0px);}
    50% {transform:translate(10px, 0px);}
	100% {transform:translate(0px, 0px);}
}



.moviebox_out{
	width:100%;
	max-width:640px;
	margin-bottom:40px;
}

.moviebox_out_detail{
	width:100%;
}

.moviebox{
	position:relative;
	width:100%;
	height:0px;
	padding-bottom:56.26%;
}
.moviebox_in{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.link-box{
	width:50px;
	height:50px;
	background-size:contain;
	background-repeat:no-repeat;
	float:right;
	margin-left:4px;
	box-shadow:50px 0 0 0 rgba(255,255,255,0) inset;
}

.link-box:hover{
	box-shadow:50px 0 0 0 rgba(255,255,255,0.6) inset;
}

.img-map{
	width:400px;
	height:400px;
}

.text-intro{
	animation:text-intro-red 6s infinite;
}

@keyframes text-intro-red{
    0% {color:#666666;}
    50% {color:#FF0000;}
	100% {color:#666666;}
}



/*Works*/


.nav-box-works{
	width:1000px;
	height:100%;
	margin:auto;
	text-align:center;
	line-height:70px;
}

.works-main{
	width:100%;
	max-width:1680px;
	margin:auto;
	padding:150px 40px;
	position:relative;
}

.works-main-sum{
	width:25%;
	max-width:400px;
	margin-bottom:16px;
	position:relative;
	float:left;
}

.works-main-filter{
	width:25%;
	max-width:400px;
	margin-bottom:16px;
	position:relative;
	float:left;
}

.up{
	animation:coming-up 1s;
}

@keyframes coming-up{
    0% {opacity:0;transform:translate(0px,40px);}
	100% {opacity:1;transform:translate(0px,0px);}
}

.sum-img{
	width:100%;
	height:0px;
	padding-bottom:100%;
	position:relative;
}

.sum-filter{
	width:100%;
	height:0px;
	padding-bottom:100%;
	position:relative;
}

.sum-img-in{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-size:cover;
}

.sum-hover{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:rgba(255,255,255,0.9);
	color:#1A1A1A;
	opacity:0;
	padding:80px 20px;
}

.sum-hover:hover{
	z-index:5;
	box-shadow:0 0 60px rgba(255, 0, 0, 0.05);
	opacity:1; 
}

.sum-text{
	width:100%;
	height:80px;
	border-bottom:2px solid #F2F2F2;
	background-color:#FFFFFF;
	line-height:180%;
	padding:15px 20px;
}

.filter-up{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
}

.filter-bottom{
	width:100%;
	height:80px;
}

.filter{
	text-align:center;
	line-height:50px;
	float:left;
	background:#FFFFFF;
	transition:background 0.3s;
}

.filter:hover{
	background:#FF6666;
	color:#FFFFFF;
}

.filter-size-1{
	width:50px;
	height:50px;
}

.filter-size-2{
	width:100px;
	height:50px;
}

.filter-size-3{
	width:150px;
	height:50px;
}

.filter-size-4{
	width:200px;
	height:50px;
}

.filter-on{
	background:#FF0000;
	color:#FFFFFF;
	font-family: 'Noto Sans KR';
	font-weight: 700;
	transition:background 0.3s;
}

.filter-on:hover{
	background:#FF6666;
}

.filter-num{
	width:100%;
	height:auto;
	padding-top:60px;
	animation:coming-left 1.3s;
}

@keyframes coming-left{
    0% {opacity:0;transform:translate(40px,0px);}
    20% {opacity:0;transform:translate(40px,0px);}
	100% {opacity:1;transform:translate(0px,0px);}
}

.works-detail{
	width:100%;
	padding-left:400px;
	height:auto;
	position:relative;
	z-index:1;
}

.works-detail-left{
	width:400px;
	height:auto;
	background-color:#FFFFFF;
	padding:40px;
	animation:coming-opa 2s;
}

.works-detail-left-name{
	width:100%;
	height:50px;
	line-height:180%;
	margin-bottom:30px;
}

.works-detail-left-be{
	width:50px;
	height:50px;
	background-image:url(./img/img_icon-be.png);
	background-size:contain;
	float:right;
	box-shadow:50px 0 0 0 rgba(255,255,255,0) inset;
}

.works-detail-left-be:hover{
	box-shadow:50px 0 0 0 rgba(255,255,255,0.6) inset;
}

.works-detail-left-subject{
	width:100%;
	height:auto;
	line-height:160%;
	margin-bottom:30px;
}

.works-detail-right{
	width:100%;
	height:auto;
	line-height:0px;
	box-shadow:0 0 60px rgba(0, 0, 0, 0.15);
	animation:coming-up 2s;
}

.detail-img{
	width:100%;
	height:auto;
}

.works-fix{
	position:fixed;
	z-index:2;
}

.works-detail-top-back{
	width:50px;
	height:50px;
	position:absolute;
	top:-50px;
	left:0px;
	background-image:url(./img/img_icon-back.png);
	background-size:contain;
	box-shadow:50px 0 0 0 rgba(255,255,255,0) inset;
}

.works-detail-top-back:hover{
	box-shadow:50px 0 0 0 rgba(255,255,255,0.6) inset;
}

@keyframes coming-opa{
    0% {opacity:0;}
	100% {opacity:1;}
}

.works-top{
	width:50px;
	height:50px;
	background-image:url(./img/img_icon-top.png);
	background-size:contain;
	position:fixed;
	bottom:90px;
	right:90px;
	z-index:9;
	box-shadow:50px 0 0 0 rgba(255,255,255,0) inset;
	box-shadow:0 0 20px rgba(255, 0, 0, 0.4);
}

.works-top:hover{
	box-shadow:50px 0 0 0 rgba(255,255,255,0.6) inset;
}

.works-detail-box{
	width:100%;
	height:auto;
	text-align:center;
}

.works-detail-gif{
	width:100%;
	height:auto;
}