@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');

/* ========================== 서브페이지 로딩 =========================== */
.sub-loder{position: relative; width: 100%; height: 100vh; background-color: #fff; z-index: 1}
.sub-loder{animation: sub-loder 4.3s ease-in-out 0s 1 both}
.sub-loder .loder-line{position: absolute; background-color: #202020;}
.sub-loder .loder-line-top{
	bottom: 49.8%; left: 0;
	-webkit-animation: loder-line-top 2s ease-out 1.7s 1 both;
	-moz-animation: loder-line-top 2s ease-out 1.7s 1 both;
	-o-animation: loder-line-top 2s ease-out 1.7s 1 both;
	-ms-animation: loder-line-top 2s ease-out 1.7s 1 both;
	animation: loder-line-top 1.8s ease-out 1.7s 1 both
}
.sub-loder .loder-line-down{
	top: 49.8%; right: 0;
	-webkit-animation: loder-line-down 2s ease-out 1.7s 1 both;
	-moz-animation: loder-line-down 2s ease-out 1.7s 1 both;
	-o-animation: loder-line-down 2s ease-out 1.7s 1 both;
	-ms-animation: loder-line-down 2s ease-out 1.7s 1 both;
	animation: loder-line-down 1.8s ease-out 1.7s 1 both
}
.sub-loder .loder-font-box{display: table; width: 100%; height: 100%; text-align: center}
.sub-loder .loder-font-box .loder-center{display: table-cell; vertical-align: middle}
.sub-loder .loder-font-box .loder-center p{font-size: 5em; font-weight: 100; color: #202020; letter-spacing: -0.1em; line-height: 1.7}
.sub-loder .loder-font-box .loder-center .font-down{font-weight: 500 !important; color: #202020}
.sub-loder .loder-font-box .loder-center .font-top{
	-webkit-animation: font-top 3.2s ease-out .2s 1 both;
	-moz-animation: font-top 3.2s ease-out .2s 1 both;
	-o-animation: font-top 3.2s ease-out .2s 1 both;
	-ms-animation: font-top 3.2s ease-out .2s 1 both;
	animation: font-top 3.2s ease-out .2s 1 both
}
.sub-loder .loder-font-box .loder-center .font-down{
	-webkit-animation: font-down 3.2s ease-out .2s 1 both;
	-moz-animation: font-down 3.2s ease-out .2s 1 both;
	-o-animation: font-down 3.2s ease-out .2s 1 both;
	-ms-animation: font-down 3.2s ease-out .2s 1 both;
	animation: font-down 3.2s ease-out .2s 1 both
}

@-webkit-keyframes sub-loder{
	0%{opacity: 1; -ms-filter:none; filter:none}
	80%{opacity: 1; -ms-filter:none; filter:none}
	100%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-moz-keyframes sub-loder{
	0%{opacity: 1; -ms-filter:none; filter:none}
	80%{opacity: 1; -ms-filter:none; filter:none}
	100%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-o-keyframes sub-loder{
	0%{opacity: 1; -ms-filter:none; filter:none}
	80%{opacity: 1; -ms-filter:none; filter:none}
	100%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@keyframes sub-loder{
	0%{opacity: 1; -ms-filter:none; filter:none}
	80%{opacity: 1; -ms-filter:none; filter:none}
	100%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}

@-webkit-keyframes loder-line-top{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@-moz-keyframes loder-line-top{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@-o-keyframes loder-line-top{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@keyframes loder-line-top{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px;}
	50%{width: 100%; height: 2px;}
	100%{width: 100%; height: 50%;}
}

@-webkit-keyframes loder-line-down{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@-moz-keyframes loder-line-down{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@-o-keyframes loder-line-down{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px}
	100%{width: 100%; height: 50%}
}
@keyframes loder-line-down{
	0%{width: 0; height: 2px}
	40%{width: 100%; height: 2px}
	50%{width: 100%; height: 2px;}
	100%{width: 100%; height: 50%;}
}

@-webkit-keyframes font-top{
	0%{padding-bottom:10%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	75%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	100%{padding-bottom:20%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-moz-keyframes font-top{
	0%{padding-bottom:10%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	75%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	100%{padding-bottom:20%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-o-keyframes font-top{
	0%{padding-bottom:10%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	75%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	100%{padding-bottom:20%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@keyframes font-top{
	0%{padding-bottom:10%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	75%{padding-bottom:0;opacity: 1; -ms-filter:none; filter:none}
	100%{padding-bottom:20%;opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}

@-webkit-keyframes font-down{
	0%{padding-top: 10%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	75%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	100%{padding-top: 20%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-moz-keyframes font-down{
	0%{padding-top: 10%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	75%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	100%{padding-top: 20%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@-o-keyframes font-down{
	0%{padding-top: 10%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	75%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	100%{padding-top: 20%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}
@keyframes font-down{
	0%{padding-top: 10%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	20%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	75%{padding-top: 0; opacity: 1; -ms-filter:none; filter:none}
	100%{padding-top: 20%; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
}


/* ========================== 로딩 후 상단 컨텐츠 불러옴 ========================== */
.loder-after{position: absolute; left: 0; width: 100%; overflow: hidden; z-index: 1;
	-webkit-animation: loder-after .1s ease-out 1s 1 both;
	-moz-animation: loder-after .1s ease-out 1s 1 both;
	-o-animation: loder-after .1s ease-out 1s 1 both;
	-ms-animation: loder-after .1s ease-out 1s 1 both;
	animation: loder-after .1s ease-out 1s 1 both
}
@-webkit-keyframes loder-after{
	0%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	100%{opacity: 1; -ms-filter:none; filter:none}
}
@-moz-keyframes loder-after{
	0%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	100%{opacity: 1; -ms-filter:none; filter:none}
}
@-o-keyframes loder-after{
	0%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	100%{opacity: 1; -ms-filter:none; filter:none}
}
@keyframes loder-after{
	0%{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)}
	100%{opacity: 1; -ms-filter:none; filter:none}
}


/* sub content */
.about-intro{position: relative; width: 100%; height: 100vh;  background-color: #111;}
.page-inner{position: relative; margin-left: 100px; width:calc(100% - 100px)}
.content-area{padding: 50px 6%; margin: 0 auto; width: 100%; overflow: hidden}
.intro-img-bg{background-image: url(../images/contents/about-device.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.h3-style{margin-bottom: 20px; position:relative; font-size: 3em; font-weight: 600; color: #999; letter-spacing: 0; line-height: 2.5}
.h3-style span.bul{position: absolute; left: 0; bottom: 0; width: 40px; height: 1px; background-color: #999}
.h3-style b{color:#f9f9f9}
.h4-style{font-size: 2em; letter-spacing: 0; line-height: 3; color: #fd531a; font-family: 'Prata', serif}
.h4-display{display: inline-block;}

.about-visual{padding-top: 200px; position: relative; width: 100%;}
.about-visual .vistext-top{font-size: 4em; line-height: 1; font-weight: 100; color: #ddd; letter-spacing: -0.09em;}
.about-visual .vistext-center{font-size: 5em; line-height: 1.5; font-weight: 500; color: #fd531a; letter-spacing: -0.1em;}
.about-visual .vistext-bottom{padding-top: 10px; width: 55%; font-size: 1.4em; font-weight: 300;color: #ddd; letter-spacing: -0.05em}

.about-service{position: relative; width: 100%; background-color: #111; overflow: hidden}
.about-service .service-left{float: right; width: 30%}
.about-service .service-right{float:right; width: 70%}
.about-service .service-right .service-box{margin: 0 auto; position:relative; width: 767px; height: 650px}
.about-service .service-right .service-box .s-item{position:absolute; border-radius: 50%; text-align: center;}
.about-service .service-right .service-box .s-item dl{display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center 55px}
.about-service .service-right .service-box .s-item dl dt{padding-top: 135px; padding-bottom: 5px; font-size: 1.2em; font-weight: 600; color: #202020}
.about-service .service-right .service-box .s-item dl dd{color: #999; line-height: 1.4;}
.about-service .service-right .service-box .s-top dl{background-image: url(../images/contents/i-services01.svg)}
.about-service .service-right .service-box .s-right dl{background-image: url(../images/contents/i-services02.svg)}
.about-service .service-right .service-box .s-bottom dl{background-image: url(../images/contents/i-services03.svg)}
.about-service .service-right .service-box .s-left dl{background-image: url(../images/contents/i-services04.svg)}
.about-service .service-right .service-box .s-top,
.about-service .service-right .service-box .s-right,
.about-service .service-right .service-box .s-bottom{width: 260px; height: 260px; background-color: #eee; box-shadow: 0 20px 30px -10px rgb(0 0 0 / 30%)}
.about-service .service-right .service-box .s-top{top:0; left: 50%; margin-left: -100px}
.about-service .service-right .service-box .s-right{top: 50%; right: 0; margin-top: -130px}
.about-service .service-right .service-box .s-bottom{bottom: 0; left: 50%; margin-left: -100px}
.about-service .service-right .service-box .s-left{width: 400px; height: 400px; top: 50%; left: 0; margin-top: -200px; background-color: #fd531a; background-image: url(../images/contents/navi-pattern.png);}
.about-service .service-right .service-box .s-left .s-item-in{position: relative; width: 100%; height: 100%}
.about-service .service-right .service-box .s-left .s-item-in .s-in-block{margin: 70px auto; width:260px; height: 260px; border-radius: 50%; background-color: #fff; box-shadow: 0 20px 30px -10px rgb(255 50 0 / 90%);}

.about-technology{position: relative; width: 100%; background-color: #111; overflow: hidden;}
.about-technology ul{padding: 30px 0 50px; overflow: hidden}
.about-technology ul li{float: left; width: 25%}
.about-technology ul li .t-item{padding: 200px 40px 50px; margin: 0 auto; position: relative; width: 90%; text-align: center;
	background-color: #eee;background-repeat: no-repeat; background-position: center 60px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .2); border-radius: 10px;}
.about-technology ul li .t-item::after{content: ''; position: absolute; top: 155px; left: 50%; width: 1px; height: 30px; background-color: #999; transform:rotate(45deg);}
.about-technology ul li.t-pad70t{padding-top: 70px}
.about-technology ul li .t-item h5{font-size: 1.5em; font-weight: 600; color: #fd531a}
.about-technology ul li .t-item .t-small{color: #aaa; font-weight: 300; letter-spacing: 0.07em}
.about-technology ul li .t-item .t-big{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd}
.about-technology ul li .t-item .t-big p{color: #202020; font-size: 1em}
.about-technology ul li .t-bg01{background-image: url(../images/contents/i-tech01.png)}
.about-technology ul li .t-bg02{background-image: url(../images/contents/i-tech02.png)}
.about-technology ul li .t-bg03{background-image: url(../images/contents/i-tech03.png)}
.about-technology ul li .t-bg04{background-image: url(../images/contents/i-tech04.png)}

.about-design{padding-bottom: 50px; position: relative; width: 100%; background-color: #111; overflow: hidden; /* background-color: #f1f1f1; background-image: url(../images/contents/i-design-pattern.png) */}
.about-design ul{padding: 30px 0 50px; position: relative; width: 100%}
.about-design ul li{float: left; width: 33.3333%}
.about-design ul li .design-num{margin-left: 80px; font-size: 1.4em; font-weight: 600; letter-spacing: 0; color: #eee}
.about-design ul li .design-num span{font-style: italic}
.about-design ul li .design-arrow{width: 0;height: 0;margin-left: 80px;border-bottom:18px solid #eee;border-right: 16px solid transparent;border-left: 16px solid  transparent;}
.about-design ul li .yell{border-bottom:18px solid #fd531a !important}
.about-design ul li .design-box{padding: 0 40px 60px; margin: 0 auto; width: 80%; box-shadow: 0 30px 20px -10px rgba(0, 0, 0, .2);
	background-color: #eee; background-repeat: no-repeat; background-position: 40px 60px}
.about-design ul li .d-bg01{background-image: url(../images/contents/i-design01.png)}
.about-design ul li .d-bg02{background-image: url(../images/contents/i-design02.png);background-color: #fd531a !important}
.about-design ul li .d-bg03{background-image: url(../images/contents/i-design03.png)}
.about-design ul li .design-box dl{padding-top: 150px;}
.about-design ul li .design-box dl dt{font-size: 1.5em; font-weight: 600; color: #202020;}
.about-design ul li .d-bg02 dl dt{font-weight: 500 !important; color: #fff !important;}
.about-design ul li .d-bg02 dl dd{color: #f1f1f1 !important;}

/*contact*/
.base-area{position: relative; width: 100%; background-color: #111; overflow: hidden;}
.contact-p{padding-top: 30px; font-size: 1.4em; font-weight: 100;color: #ddd; letter-spacing: -0.05em}
.contact-info{padding: 50px 0; overflow: hidden}
.contact-info dl{display: inline-block; padding-left: 50px; padding-right: 50px; position:relative; letter-spacing: 0.05em;}
.contact-info dl:first-child{padding-left: 0;}
.contact-info dl::before{content: '/'; position:absolute; top: 0; left: 0;}
.contact-info dl:first-child::before{content: ''}
.contact-info dl dt{color: #fd531a;}
.contact-info dl dd a{font-size: 1.2em; color: #eee; font-weight: 100;}
.contact-info dl dd a:hover{color: #fd531a}
.map{padding-top: 30px; width: 100%; height: 700px;}

/* NOTICE */
.list-item{position: relative; width: 100%; min-height: 540px;}
.list-item ul li{border-bottom: 1px solid #222; clear: both;}
.list-item ul li a{display: block;position:relative;padding:40px 0;overflow:hidden;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease;}
.list-item ul li a span{display: block;}
.list-item ul li a .item-box{float: left; width: 80%;}
.list-item ul li a .item-box img{display:none;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease;}
.list-item ul li a .item-box .item-h3{display: inline-block; position:relative; width: 100%; font-size: 2em; font-weight: 100; line-height: 1.4; letter-spacing: -0.07em; color: #ddd; white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item ul li a .item-box .item-field{letter-spacing: 0.03em; color: #aaa}
.list-item ul li a .item-arrow{float: left; position: relative; width: 15%; height: 100%;}
.list-item ul li a .item-arrow .item-line{position:absolute; right: 0; top: 40px; width: 60px; height: 2px; background-color: #666; font-size: 0}
.list-item ul li a .item-arrow .item-spin-top,
.list-item ul li a .item-arrow .item-spin-bottom{position:absolute; right: 0; top: 40px; width: 0; height: 2px; font-size: 0;}
.list-item ul li a:hover .item-box .item-h3{color: #fd531a;}
.list-item ul li a:hover .item-arrow .item-line{right:1px;width:40px; background-color: #fd531a;}
.list-item ul li a:hover .item-arrow .item-spin-top{
	top: 38px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.list-item ul li a:hover .item-arrow .item-spin-bottom{
	top: 42px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.list-item ul li a:hover .item-arrow .item-spin-top,
.list-item ul li a:hover .item-arrow .item-spin-bottom{
	width: 30px;
	background-color: #fd531a;
	-webkit-transform-origin: 90% center;
	-moz-transform-origin: 90% center;
	-o-transform-origin: 90% center;
	-ms-transform-origin: 90% center;
	transform-origin: 90% center
}

/*notice*/
.notice-item{position: relative;width: 100%;min-height: 540px;}
.notice-item .notice-head{padding: 40px 0; clear: both}
.notice-item .notice-head h3{font-size: 2em; font-weight: bold; letter-spacing: -0.07em; color: #fd531a; line-height: 1.4;}
.notice-item .notice-head p.data{letter-spacing: 0.03em; color: #aaa}
.notice-item .notice-cont{padding: 50px 0;border-top: 1px solid #222; border-bottom: 1px solid #222;}
.notice-item .notice-cont p{font-size: 1.1em; color: #f1f1f1; font-weight: 100;}

/*back-btn*/
.btn-backlist{position:fixed; right: 0; top:125px; z-index: 1}
.btn-backlist a{position: relative; display: block; width: 90px; height: 300px}
.btn-backlist a .i-list{display: block; position: relative; width: 60px; height: 60px; background-color: #fd531a; border-radius: 50%;-webkit-transition:all 0.5s;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease;}
.btn-backlist a .i-list span{position:absolute; left: 20px; width: 20px; height: 1px; background-color: #202020; font-size: 0; transform-origin: 90% center;}
.btn-backlist a .i-list .arrow-top{top: 28px; transform: rotate(45deg)}
.btn-backlist a .i-list .arrow-center{top:29px}
.btn-backlist a .i-list .arrow-bottom{top: 30px; transform: rotate(-45deg)}
.btn-backlist a .text-list{display: block; position: absolute; left: 31px; top: 65px; width: 180px; transform: rotate(90deg); transform-origin: left center; letter-spacing: 0.5em; font-size:0.7em; color: #fd531a; font-weight: 600;}
.btn-backlist a:hover .i-list{background-color:#f1f1f1;}
.btn-backlist a:hover .i-list span{background-color: #202020;}

/* worsk*/
.project-area{position: relative; overflow: hidden}
.project-area .project-top{text-align: center; background-color: #202020; position: relative}
.project-area .project-top .project-name{display: table; position: relative; width:100%; height: 100vh; overflow: hidden}
.project-area .project-top .project-name div{display: table-cell;padding-left:100px;vertical-align:middle;}
.project-area .project-top .project-name div h3{font-size: 4em; font-weight: 500; letter-spacing: -0.1em; color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .3)}
.project-area .project-top .project-name div span.field{display: block; font-size: 1.1em; color: #eee; letter-spacing: 0.05em;}
.project-area .project-top .project-name div h3, .project-area .project-top .project-name div span.field{margin:0 auto;width:85%;}

.project-area .project-top .project-photo{position:absolute; top: 0; left: 0; right: 0; bottom:0; overflow: hidden}
.project-area .project-top .project-photo .img-size{margin: 0 auto; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; font-size: 0;}
.project-area .project-top .project-photo .overlay{position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; background-color:rgba(0, 0, 0, .8)}

.project-area .project-top .project-name div h3{
	-webkit-animation: txt-h2 1s ease-out 4s 1 both;
	-moz-animation: txt-h2 1s ease-out 4s 1 both;
	-o-animation: txt-h2 1s ease-out 4s 1 both;
	-ms-animation: txt-h2 1s ease-out 4s 1 both;
	animation: txt-h2 1s ease-out 4s 1 both;
	opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
}
.project-area .project-top .project-name div span.field{
	-webkit-animation: txt-field 1.2s ease-out 4s 1 both;
	-moz-animation: txt-field 1.2s ease-out 4s 1 both;
	-o-animation: txt-field 1.2s ease-out 4s 1 both;
	-ms-animation: txt-field 1.2s ease-out 4s 1 both;
	animation: txt-field 1.2s ease-out 4s 1 both;
	opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
}
.project-area .project-top .project-photo .img-size{
	-webkit-animation: img-size 2s ease-in 0.9s 1 both;
	-moz-animation: img-size 2s ease-in 0.9s 1 both;
	-o-animation: img-size 2s ease-in 0.9s 1 both;
	-ms-animation: img-size 2s ease-in 0.9s 1 both;
	animation: img-size 2s ease-in 0.9s 1 both
}
.project-area .project-top .project-photo .overlay{
	-webkit-animation: img-overlay 1.0s ease-in-out 2.9s 1 both;
	-moz-animation: img-overlay 1.0s ease-in-out 2.9s 1 both;
	-o-animation: img-overlay 1.0s ease-in-out 2.9s 1 both;
	-ms-animation: img-overlay 1.0s ease-in-out 2.9s 1 both;
	animation: img-overlay 1.0s ease-in-out 2.9s 1 both;
	opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)
}
@-webkit-keyframes txt-h2{
	0% {
		-webkit-transform: translate(0%, 50%);
		-moz-transform: translate(0%, 50%);
		-o-transform: translate(0%, 50%);
		-ms-transform: translate(0%, 50%);
		transform: translate(0%, 50%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none
	}
}
@-moz-keyframes txt-h2{
	0% {
		-webkit-transform: translate(0%, 50%);
		-moz-transform: translate(0%, 50%);
		-o-transform: translate(0%, 50%);
		-ms-transform: translate(0%, 50%);
		transform: translate(0%, 50%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none
	}
}
@-o-keyframes txt-h2{
	0% {
		-webkit-transform: translate(0%, 50%);
		-moz-transform: translate(0%, 50%);
		-o-transform: translate(0%, 50%);
		-ms-transform: translate(0%, 50%);
		transform: translate(0%, 50%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none
	}
}
@keyframes txt-h2{
	0% {
		-webkit-transform: translate(0%, 50%);
		-moz-transform: translate(0%, 50%);
		-o-transform: translate(0%, 50%);
		-ms-transform: translate(0%, 50%);
		transform: translate(0%, 50%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none
	}
}
@-webkit-keyframes txt-field{
	0% {
		-webkit-transform: translate(0%, -150%);
		-moz-transform: translate(0%, -150%);
		-o-transform: translate(0%, -150%);
		-ms-transform: translate(0%, -150%);
		transform: translate(0%, -150%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none;
		color: #eee
	}
}
@-moz-keyframes txt-field{
	0% {
		-webkit-transform: translate(0%, -150%);
		-moz-transform: translate(0%, -150%);
		-o-transform: translate(0%, -150%);
		-ms-transform: translate(0%, -150%);
		transform: translate(0%, -150%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none;
		color: #eee
	}
}
@-o-keyframes txt-field{
	0% {
		-webkit-transform: translate(0%, -150%);
		-moz-transform: translate(0%, -150%);
		-o-transform: translate(0%, -150%);
		-ms-transform: translate(0%, -150%);
		transform: translate(0%, -150%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none;
		color: #eee
	}
}
@keyframes txt-field{
	0% {
		-webkit-transform: translate(0%, -150%);
		-moz-transform: translate(0%, -150%);
		-o-transform: translate(0%, -150%);
		-ms-transform: translate(0%, -150%);
		transform: translate(0%, -150%);
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)
	}
	100% {
		-webkit-transform: translate(0%, 0%);
		-moz-transform: translate(0%, 0%);
		-o-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		opacity: 1; -ms-filter:none; filter:none;
		color: #eee;
	}
}
@-webkit-keyframes img-size{
	0% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
	50% {
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		-o-transform:scale(1.2);
		-ms-transform:scale(1.2);
		transform:scale(1.2)
	}
	100% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
}
@-moz-keyframes img-size{
	0% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
	50% {
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		-o-transform:scale(1.2);
		-ms-transform:scale(1.2);
		transform:scale(1.2)
	}
	100% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
}
@-o-keyframes img-size{
	0% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
	50% {
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		-o-transform:scale(1.2);
		-ms-transform:scale(1.2);
		transform:scale(1.2)
	}
	100% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
}
@keyframes img-size{
	0% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
	50% {
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		-o-transform:scale(1.2);
		-ms-transform:scale(1.2);
		transform:scale(1.2)
	}
	100% {
		-webkit-transform:scale(1.0);
		-moz-transform:scale(1.0);
		-o-transform:scale(1.0);
		-ms-transform:scale(1.0);
		transform:scale(1.0)
	}
}
@-webkit-keyframes img-overlay{
	0%{
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)
	}
	100%{
		opacity: 1; -ms-filter:none; filter:none
	}
}
@-moz-keyframes img-overlay{
	0%{
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)
	}
	100%{
		opacity: 1; -ms-filter:none; filter:none
	}
}
@-o-keyframes img-overlay{
	0%{
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)
	}
	100%{
		opacity: 1; -ms-filter:none; filter:none
	}
}
@keyframes img-overlay{
	0%{
		opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0)
	}
	100%{
		opacity: 1; -ms-filter:none; filter:none
	}
}

.project-info ul{padding-top: 30px; overflow: hidden;}
.project-info ul li{padding: 10px; margin-bottom: 10px; float: left; width:25%}
.project-info ul li h3{padding-bottom: 5px; color: #fd531a; font-weight: 600;}
.project-info ul li p{font-size: 1.1em; font-weight: 100; color: #eee;}
.project-info ul li p a{display: block; position: relative; height: 50px;}
.project-info ul li p a .a-line{position:absolute; right: 0; top: 20px; width: 60px; height: 2px; background-color: #666; font-size: 0;}
.project-info ul li p a .a-spin-top,
.project-info ul li p a .a-spin-down{position:absolute; right: 0; top: 20px; width: 0; height: 2px; font-size: 0;}
.project-info ul li p a:hover .a-text{color: #fd531a;}
.project-info ul li p a:hover .a-line{right: 2px; width: 40px; background-color: #fd531a;}
.project-info ul li p a:hover .a-spin-top{
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
.project-info ul li p a:hover .a-spin-down{
	top: 22px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.project-info ul li p a:hover .a-spin-top,
.project-info ul li p a:hover .a-spin-down{
	width: 30px;
	background-color: #fd531a;
	-webkit-transform-origin: 90% center;
	-moz-transform-origin: 90% center;
	-o-transform-origin: 90% center;
	-ms-transform-origin: 90% center;
	transform-origin: 90% center
}
.project-info li .eng{letter-spacing: 0.05em}
.overview{padding: 80px 0;}
.overview h3{padding-bottom: 5px; color: #fd531a; font-weight: 600; letter-spacing: 0;}
.overview p{color: #eee; font-size: 1.1em; font-weight: 100;}
.mobile-device{padding-top: 30px}
.mobile-device ul{overflow: hidden}
.mobile-device ul li{float: left; width: 33.33333%;  background-image: url(../images/contents/works/mobile.png); background-repeat: no-repeat; background-position: center}
.mobile-device ul li.top-two{margin-top: 100px;}
.mobile-device ul li .device{margin: 90px auto 0; width: 238px; height: 410px; background-color: #fff; overflow: hidden;}
.mobile-device ul li .device img{max-width: 100%;}
.mobile-device ul li p{padding-top: 50px; text-align: center; font-size: .9em; font-weight: 600; color: #eee; letter-spacing: 0.02em;}
.desktop-device{padding-top: 100px; overflow: hidden;}
.desktop-device ul{float: left; width: 50%;}
.desktop-device ul li{padding: 60px 10%; width: 100%;}
.desktop-device ul li img{max-width: 100%; box-shadow: 0 30px 40px -10px rgba(0, 0, 0, .99)}

.next-project{display: table; position: relative; width: 100%; height: 100vh; text-align: center; overflow: hidden;}
.next-project .next-photo{position:absolute; top: 0; left: 0; right: 0; bottom:0; overflow: hidden}
.next-project .next-photo .img-size{margin: 0 auto; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; font-size: 0;}
.next-project .next-photo .overlay{position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; background-color:rgba(0, 0, 0, .8)}
.next-project .next-inner{display: table-cell; vertical-align: middle;}
.next-project .next-inner a{display: block;color: #fff; font-weight: 500; }
.next-project .next-inner a span{display: block; font-size: 1em;letter-spacing: 0.05em}
.next-project .next-inner a h3{display: inline-block; padding: 0 30px; position: relative; font-size: 4em; letter-spacing: -0.1em; text-shadow: 2px 2px 0 rgba(0, 0, 0, .3)}
.next-project .next-inner a h3 .next-line,
.next-project .next-inner a h3 .next-spin{position: absolute; right: 30px; height: 2px; background-color: #fff; 
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center
}
.next-project .next-inner a h3 .next-line{bottom: 0; width:45px}
.next-project .next-inner a h3 .next-spin{bottom: 0; width:20px;}
.next-project .next-inner a:hover{color: #fff;}
.next-project .next-inner a:hover h3 .next-line{width: 60px;}
.next-project .next-inner a:hover h3 .next-line,
.next-project .next-inner a:hover h3 .next-spin{right: 0;}
.next-project .next-inner a:hover h3 .next-spin{transform: rotate(45deg)}

.transition{-webkit-transition:all 0.5s;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;-ms-transition:all 0.5s ease;transition:all 0.5s ease;}


/* 오시는길 */
.map-area{position:relative;width:100%;border-radius:5px;overflow:hidden;}
.map-area .map-kakao{position:relative;width:100%;height:500px;overflow:hidden;}
.map-area .map-kakao *{-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial;}
.map-area .map-info{padding:30px;position:relative;background:#f7f7f7;border:1px solid #e0e0e0;border-top-color:#f3f6f8;}
.map-area .map-info dl{display:inline-block;padding-right:50px}
.map-area .map-info dl dt{display:inline-block;color:#222}
.map-area .map-info dl dd{display:inline-block;color:#888;letter-spacing:0.02em !important}
.map-area .map-info dl dd a:hover{color:#005bcb;}


 /* 에러페이지 */
.error-wrap{position:absolute;top:50%;margin-top:-266.5px;width:100%;text-align:center;font-size:0.938em;color:#555;}
.error-wrap .tit{font-size:22px;margin:0 0 20px;letter-spacing:-2px}
.error-wrap .tit::before{content:'';display:block;width:170px;height:160px;margin:0 auto 60px;background:url(../images/contents/ic_error.png) no-repeat}