@charset 'utf-8';
/*
  CUBEA 큐브에이
  작성일 :2017-09-21 17:35:55
  작성자 :이준경 ( ljk3391@cubea.co.kr )
*/

/* ABOUT */
.about_wrap .main-title{padding:80px 0 160px}
.about_wrap .main-title h4{height:290px;font-size:86px;color:#000;line-height:72px;letter-spacing:-0.25px;margin-bottom:40px}
.about_wrap .main-title h4 span{color:#9b938b;background:url('../img/main_dot_icon.png') no-repeat right bottom;width:238px;display:inline-block}
.about_wrap .main-title strong{display:block;font-size:32px;padding-bottom:16px;color:#000;letter-spacing:-0.5px;font-weight:300;line-height:1em;}
.about_wrap .main-title p{font-size:22px;line-height:30px;color:#000;letter-spacing:-0.5px;font-weight:300;opacity:0.4}
.about_wrap .main-title p > em{display:block}
.about_wrap .about-c-box{padding-bottom:180px}
.about_wrap .about-c-box li{margin-bottom:50px;padding-left:190px}
.about_wrap .about-c-box li:after{content:'';clear:both;display:block}
.about_wrap .about-c-box li strong{font-size:108px;float:left;line-height:80px}
.about_wrap .about-c-box li strong span{display:inline-block;width:120px;text-align:right}
.about_wrap .about-c-box li em{font-size:50px;float:right;text-align:left;width:70%;line-height:1em;margin-top:-6px}
.about_wrap .about-c-box li em.txt{margin-top:4px;font-size:35px;color:#b8b8b8;line-height:1em}

/* WORKS */
.works-list{padding:30px 0 100px}
.works-list .works{height:548px;margin-bottom:100px}
.works-list .works:last-child{margin-bottom:0}
.works-list .works a{width:100%;height:100%;display:block}
.works-list .works a:hover .img:after{opacity:0}
.works-list .works a:hover h4{color:#9b938b}
.works-list .works .img{float:left;position:relative;width:620px;height:548px;}
.works-list .works .img img{display:block;width:100%;height:100%}
.works-list .works .img:before{position:absolute;top:0;left:0;width:620px;height:548px;background:no-repeat center;content:"";clear:both;display:block;z-index:2}
.works-list .works .img.bg01:before{background-image:url("../img/works/w_list_after01.png")}
.works-list .works .img.bg02:before{background-image:url("../img/works/w_list_after02.png")}
.works-list .works .img.bg03:before{background-image:url("../img/works/w_list_after03.png")}
.works-list .works .img:after{position:absolute;top:0;left:0;width:100%;height:100%;font-size:0;text-indent:-9999px;z-index:1;content:"";clear:both;display:block;}
.works-list .works .w-desc{width:390px;float:right;padding-top:150px;}
.works-list .works .w-desc .mon{display:none;color:#bfbfbf;font-size:15px;letter-spacing:-0.25px}
.works-list .works .w-desc h4{color:#000;font-size:42px;line-height:1.1em;margin:28px 0 18px;}
.works-list .works .w-desc strong{margin-bottom:18px;display:block;color:#000;font-size:22px;letter-spacing:-0.75px}
.works-list .works .w-desc span{color:#bfbfbf;font-size:18px}
.works-list .works .img:after,
.works-list .works .w-desc h4{
	-webkit-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

.works_visual{position:relative;top:-120px;height:1140px;background-repeat:no-repeat;background-position:center center;background-size:cover}
.works_visual:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}
.works_visual:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:4;background:url("../img/work_view_bg01.png") center center no-repeat;background-size:100% 100%;}
.works_visual .tit-box{position:relative;margin:0 auto;padding-left:240px;padding-top:340px;height:800px;width:1044px;z-index:3}
.works_visual .tit-box h3{margin-bottom:40px;font-size:80px;color:#fff;line-height:1.1em}
.works_visual .tit-box strong{display:block;font-size:32px;color:#fff;line-height:1em;letter-spacing:-0.5px;}
.works_visual .tit-box span{padding:16px 0 116px;display:block;font-size:22px;color:#fff}
.works_visual .tit-box .mon{display:none;color:#fff;font-size:22px}
.works_visual em.award{position:absolute;bottom:250px;right:200px;width:85px;height:113px;z-index:4}
.works_visual em.award img{display:block;width:100%}

.btn-bot{position:absolute;bottom:260px;left:50%;z-index:5}
.btn-bot a{display:block;width:40px;height:70px;font-size:0;text-indent:-9999px;font-weight:700}
.btn-bot a span{position:absolute;top:0;left:50%;width:24px;height:24px;margin-left:-12px;border-left:1px solid #fff;border-bottom:1px solid #fff;opacity:0;box-sizing:border-box;
	-webkit-transform:rotate(-45deg);
			transform:rotate(-45deg);
	-webkit-animation:arrow 2s infinite;
			animation:arrow 2s infinite;
}
.btn-bot a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
.btn-bot a span:nth-of-type(2){top:16px;-webkit-animation-delay:.15s;animation-delay:.15s}
.btn-bot a span:nth-of-type(3){top:32px;-webkit-animation-delay:.3s;animation-delay:.3s}
@-webkit-keyframes arrow {
  0% {opacity:0}
  50% {opacity:1}
  100% {opacity:0}
}
@keyframes arrow {
  0% {opacity:0}
  50% {opacity:1}
  100% {opacity:0}
}
.works_detail{margin-top:-100px}
.works_detail .desc{margin-bottom:102px}
.works_detail .desc.d02{margin:72px 0 0}
.works_detail .desc dt{font-size:32px;color:#9b938b;width:210px;float:left;line-height:1em}
.works_detail .desc dd{font-size:17px;width:834px;letter-spacing:-0.5px;line-height:26px;float:left;font-weight:300}
.works_detail .desc:after{content:"";clear:both;display:block}
.works_detail .i-box > img{margin-bottom:30px;width:100%}

/* WORKS - 리스트 + 서브페이지 상단 공통 */
.works-list .works .img:after,
.works_visual:before{opacity:0.7;}

.works-list .works.w01 .img:after,.sub_w01 .works_visual:before{background-color:#8c5f45;}
.works-list .works.w02 .img:after,.sub_w02 .works_visual:before{background-color:#ce952c;opacity:0.5;}
.works-list .works.w03 .img:after,.sub_w03 .works_visual:before{background-color:#2b5380;}
.works-list .works.w04 .img:after,.sub_w04 .works_visual:before{background-color:#1d96c5;}
.works-list .works.w05 .img:after,.sub_w05 .works_visual:before{background-color:#60c0a2;}
.works-list .works.w06 .img:after,.sub_w06 .works_visual:before{background-color:#201426;}
.works-list .works.w07 .img:after,.sub_w07 .works_visual:before{background-color:#548eaf;}
.works-list .works.w08 .img:after,.sub_w08 .works_visual:before{background-color:#3b3b39;}
.works-list .works.w09 .img:after,.sub_w09 .works_visual:before{background-color:#160825;}
.works-list .works.w10 .img:after,.sub_w10 .works_visual:before{background-color:#013668;}
.works-list .works.w11 .img:after,.sub_w11 .works_visual:before{background-color:#0d4f9d;}
.works-list .works.w12 .img:after,.sub_w12 .works_visual:before{background-color:#c32964;}
.works-list .works.w13 .img:after,.sub_w13 .works_visual:before{background-color:#3bab83;}
.works-list .works.w14 .img:after,.sub_w14 .works_visual:before{background-color:#c6343e;}
.works-list .works.w15 .img:after,.sub_w15 .works_visual:before{background-color:#e09c0c;}
.works-list .works.w16 .img:after,.sub_w16 .works_visual:before{background-color:#c74545;}
.works-list .works.w17 .img:after,.sub_w17 .works_visual:before{background-color:#0d4f9d;}
.works-list .works.w18 .img:after,.sub_w18 .works_visual:before{background-color:#4b74e6;}
.works-list .works.w19 .img:after,.sub_w19 .works_visual:before{background-color:#297ec3;opacity:0.8;}
.works-list .works.w20 .img:after,.sub_w20 .works_visual:before{background-color:#191919;opacity:0.85;}
.works-list .works.w21 .img:after,.sub_w21 .works_visual:before{background-color:#005a2b}
.works-list .works.w22 .img:after,.sub_w22 .works_visual:before{background-color:#1a2b49;}
.works-list .works.w23 .img:after,.sub_w23 .works_visual:before{background-color:#5677d4}
.works-list .works.w24 .img:after,.sub_w24 .works_visual:before{background-color:#5c4f3d}
.works-list .works.w25 .img:after,.sub_w25 .works_visual:before{background-color:#00142c}
.works-list .works.w26 .img:after,.sub_w26 .works_visual:before{background-color:#333333}
.works-list .works.w27 .img:after,.sub_w27 .works_visual:before{background-color:#1b597f}
.works-list .works.w28 .img:after,.sub_w28 .works_visual:before{background-color:#050507}
.works-list .works.w29 .img:after,.sub_w29 .works_visual:before{background-color:#2a3954}
.works-list .works.w30 .img:after,.sub_w30 .works_visual:before{background-color:#f37a1f}
.works-list .works.w31 .img:after,.sub_w31 .works_visual:before{background-color:#2b7f60}
.works-list .works.w32 .img:after,.sub_w32 .works_visual:before{background-color:#1b597f}
.works-list .works.w33 .img:after,.sub_w33 .works_visual:before{background-color:#f55574}
.works-list .works.w34 .img:after,.sub_w34 .works_visual:before{background-color:#41AEE5;opacity:0.85;}
.works-list .works.w35 .img:after,.sub_w35 .works_visual:before{background-color:#0D1753;}
.works-list .works.w36 .img:after,.sub_w36 .works_visual:before{background-color:#FD7593;opacity:0.85;}
.works-list .works.w37 .img:after,.sub_w37 .works_visual:before{background-color:#8859D2;opacity:0.85;}
.works-list .works.w38 .img:after,.sub_w38 .works_visual:before{background-color:#FD8843;opacity:0.85;}
.works-list .works.w39 .img:after,.sub_w39 .works_visual:before{background-color:#218BE0;}
.works-list .works.w40 .img:after,.sub_w40 .works_visual:before{background-color:#1C3855;}
.works-list .works.w41 .img:after,.sub_w41 .works_visual:before{background-color:#033E4C;}
.works-list .works.w42 .img:after,.sub_w42 .works_visual:before{background-color:#18467B;}
.works-list .works.w43 .img:after,.sub_w43 .works_visual:before{background-color:#7b46ec;}
.works-list .works.w44 .img:after,.sub_w44 .works_visual:before{background-color:#f1efea;}
.works-list .works.w45 .img:after,.sub_w45 .works_visual:before{background-color:#06326f;}

/* STORY */
.story-list{padding:30px 0 100px;clear:both}
.story-list .storys{margin-bottom:62px}
.story-list .storys:last-child{margin-bottom:0}
.story-list .storys > a{display:block;width:100%}
.story-list .storys > a:hover .img{opacity:1}
.story-list .storys > a:hover .info .txt h4{color:#9b938b}
.story-list .storys .img{position:relative;display:block;margin-bottom:40px;width:1044px;overflow:hidden;background-color:#fff;opacity:0.5;
	-webkit-transition:opacity 0.4s cubic-bezier(0.75,0.1,0.25,1);
			transition:opacity 0.4s cubic-bezier(0.75,0.1,0.25,1);
}
.story-list .storys .img img{display:block;width:100%;height:auto}
.story-list .storys .info{position:relative;}
.story-list .storys .info .date{position:absolute;top:0;left:0;display:block;width:210px;font-size:15px;letter-spacing:0.25px;color:#bfbfbf}
.story-list .storys .info .txt{padding-left:210px;}
.story-list .storys .info .txt h4{padding-bottom:20px;font-size:34px;color:#000;letter-spacing:0.75px;line-height:1.1em;font-weight:500;
	-webkit-transition:color 0.2s cubic-bezier(0.75,0.1,0.25,1);
			transition:color 0.2s cubic-bezier(0.75,0.1,0.25,1);
}
.story-list .storys .info .txt em{display:block;font-size:18px;color:#000;letter-spacing:0.5px;line-height:26px;font-weight:300}
.story_visual{position:relative;margin-top:-106px;width:100%;height:718px}
.story_visual .img{display:block;position:absolute;top:0;left:0;width:100%;min-width:1468px;height:718px;font-size:0;line-height:0;background:url("../img/story_sub.jpg") no-repeat center center;background-size:cover}
.story_visual .img:after{position:absolute;top:0;left:0;display:block;font-size:0;line-height:0;width:100%;height:100%;opacity:0.5;background-color:#9b938b;content:"";clear:both;display:block}
.story_visual .tit_box{position:absolute;top:200px;left:50%;margin-left:-400px;width:1044px;height:450px;overflow:hidden}
.story_visual .tit_box span.date {color:#fff;font-size:18px;text-shadow:2px 2px 6px rgba(0, 0, 0, 0.4)}
.story_visual .tit_box h3{padding:40px 0 60px;color:#fff;font-size:68px;letter-spacing:-0.75px;line-height:76px;font-weight:500}
.story_visual .tit_box h3.glow {text-shadow:2px 2px 6px rgba(0, 0, 0, 0.4)}
.sub_story .story_detail{position:relative;z-index:1;padding-top:100px}
.animated {
	-webkit-animation-duration:0.8s;
	   -moz-animation-duration:0.8s;
	     -o-animation-duration:0.8s;
	        animation-duration:0.8s;
	-webkit-animation-fill-mode:both;
	   -moz-animation-fill-mode:both;
	     -o-animation-fill-mode:both;
	        animation-fill-mode:both;
}
@-webkit-keyframes fadeInLeftBig {
	0%   {opacity:0;-webkit-transform:translateX(-200px)}
	100% {opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig {
	0%   {opacity:0;-moz-transform:translateX(-200px)}
	100% {opacity:1;-moz-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig {
	0%   {opacity:0;-o-transform:translateX(-200px)}
	100% {opacity:1;-o-transform:translateX(0)}
}
@keyframes fadeInLeftBig {
	0%   {opacity:0;transform:translateX(-200px)}
	100% {opacity:1;transform:translateX(0)}
}
.fadeInLeftBig {
	-webkit-animation-name:fadeInLeftBig;
	-moz-animation-name:fadeInLeftBig;
	-o-animation-name:fadeInLeftBig;
	animation-name:fadeInLeftBig;
}
.story_detail .detail p{margin:30px 0 60px;font-size:18px;line-height:28px;font-weight:300}
.story_detail .detail p:first-child{margin-top:0}
.story_detail .detail img{max-width:100%;width:100%}

/* CONTACT */
.map-box{position:relative;margin:30px 0 150px}
.map-box .map-div{margin-bottom:40px}
.map-box .map-div a{display:block}
.map-box .map-div img{display:none;width:100%;height:auto;border:1px solid #e8e8e8;box-sizing:border-box}
.map-box .map-div img:first-child{display:block}
.map_info .addr{display:inline-block;vertical-align:top;width:470px;font-weight:300;font-size:18px;letter-spacing:0.005em}
.map_info .addr a.mail{color:#000;letter-spacing:0;font-weight:300;font-size:18px;
	-webkit-transition:color 0.2s cubic-bezier(0.75,0.1,0.25,1);
			transition:color 0.2s cubic-bezier(0.75,0.1,0.25,1);
}
.map_info .addr a.mail:hover{color:#9b938b}
.map_info .addr span{padding-right:6px}
.map_info ul{display:inline-block;vertical-align:top}
.map_info ul li{margin-bottom:4px;}
.map_info ul li,
.map_info ul li a{font-weight:100;color:#929191;font-size:18px;letter-spacing:0.005em}


@media all and ( max-width:640px ){
	/* ABOUT */
	.about_wrap .main-title{padding:20px 0 60px}
	.about_wrap .main-title h4{height:auto;font-size:34px;line-height:31px;letter-spacing:-1px;margin-bottom:20px}
	.about_wrap .main-title h4 span{padding-right:20px;width:auto;display:block;background-position-x:90px}
	.about_wrap .main-title strong{padding-bottom:30px;font-size:24px;line-height:1.2em;}
	.about_wrap .main-title p{font-size:14px;line-height:1.4em;opacity:1}
	.about_wrap .main-title p > em{display:inline}
	.about_wrap .about-c-box{margin:0 auto;padding:0;width:280px}
	.about_wrap .about-c-box li{margin-bottom:20px;padding-left:0}
	.about_wrap .about-c-box li strong{font-size:50px;line-height:40px;color:#9b938b}
	.about_wrap .about-c-box li strong span{width:60px}
	.about_wrap .about-c-box li em{width:55%;font-size:19px;font-weight:600;margin-top:0;}
	.about_wrap .about-c-box li em.txt{font-size:16px;font-weight:100;}
	
	/* WORK */
	.works-list{padding:20px 0 0}
	.works-list .works{height:auto;margin-bottom:70px}
	.works-list .works .img{float:none;width:100%;height:50%;}
	.works-list .works .img:before{width:100%;height:100%;background-size:100% 100%;}
	.works-list .works .img:after{width:100%;height:100%;background-size:100% 100%;}
	.works-list .works .img img{width:100%;height:100%}
	.works-list .works .w-desc {width:auto;float:none;padding:0 20px}
	.works-list .works .w-desc .mon{padding-top:20px;color:#000;font-size:14px;line-height:12px}
	.works-list .works .w-desc h4{font-size:29px;line-height:1.1em;margin:10px 0 12px}
	.works-list .works .w-desc strong{margin-bottom:5px;font-size:18px;letter-spacing:-0.5px}
	.works-list .works .w-desc span{color:#000;font-size:14px;line-height:14px}
	.works_visual{top:-58px;width:100%;height:470px}
	.works_visual:after{bottom:0;top:auto;height:53px;background-image:url("../img/m/work_view_bg01.png")}
	.works_visual .tit-box{left:20px;top:200px;padding:0 0 50px;margin:0;height:auto;width:90%}
	.works_visual .tit-box h3{margin-bottom:10px;font-size:30px;color:#fff;line-height:35px}
	.works_visual .tit-box strong{font-size:18px;}
	.works_visual .tit-box span{padding:10px 0 25px;font-size:14px;line-height:14px}
	.works_visual .tit-box .mon{font-size:12px}
	.works_visual em.award{bottom:14%;right:20px;width:50px;height:70px}

	.btn-bot{top:360px;left:47%}
	.btn-bot a{width:30px;height:45px}
	.btn-bot a span{width:16px;height:16px}
	.btn-bot a span:nth-of-type(2){top:10px}
	.btn-bot a span:nth-of-type(3){top:20px}
	.works_detail{margin-top:-20px}
	.works_detail .desc{margin-bottom:30px}
	.works_detail .desc.d02{margin-top:30px}
	.works_detail .desc dt{float:none;padding-bottom:12px;width:100%;font-size:21px;color:#9b938b}
	.works_detail .desc dd{float:none;width:100%;font-size:16px;letter-spacing:-0.75px;line-height:1.4em;color:#000}
	.works_detail .i-box > img{margin-bottom:20px}
	
	/* STORY */
	.story-list{padding:20px 0 0}
	.story-list .storys{margin-bottom:60px}
	.story-list .storys .img{margin-bottom:14px;width:100%}
	.story-list .storys .info{margin-bottom:60px}
	.story-list .storys .info .date{position:static;width:100%;font-size:12px;letter-spacing:-webkit-font-smoothing;color:#000}
	.story-list .storys .info .txt{padding-left:0;width:100%}
	.story-list .storys .info .txt h4{padding-bottom:9px;font-size:22px;line-height:1.2em}
	.story-list .storys .info .txt em{font-size:14px;line-height:1.2em}
	.story_visual{margin-top:0;height:400px}
	.story_visual .img{min-width:100%;height:100%}
	.story_visual .tit_box{top:120px;left:5%;margin-left:0;width:90%;height:auto}
	.story_visual .tit_box span.date {opacity:1;font-size:15px}
	.story_visual .tit_box h3.glow{padding:12px 0 45px;font-size:32px;line-height:37px}
	.sub_story .story_detail{padding-top:40px}
	.story_detail .detail p{margin:20px 0 50px;font-size:15px;line-height:1.4em}

	/* CONTACT */
	.map-box{margin:20px 0 0}
	.map-box .map-div{margin-bottom:20px;width:100%}
	.map-box .map-div img{display:block}
	.map-box .map-div img:first-child{display:none}
	.map_info .addr{margin-bottom:6px;display:block;width:auto;font-size:15px;line-height:1.2em;}
	.map_info .addr a.mail{color:#9b938b;font-size:15px;line-height:1.5em;}
	.map_info ul{display:block;}
	.map_info ul li{margin-bottom:0;}
	.map_info ul li,
	.map_info ul li a{font-size:15px;font-weight:400;line-height:1.3em;}
}