@charset 'utf-8';

/* reset */
body,hr,img,fieldset,form,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,q,blockquote,caption,legend,address,a,input,select,textarea,button,p{margin:0;padding:0;word-wrap:break-word;word-break:keep-all}
hr{display:none}
img,input,button,textarea,fieldset,form,legend,hr{border:0 none}
dl,ul,ol,li{list-style:none}
body,h1,h2,h3,h4,h5,h6,big,small,input,select,textarea,button{font-size:1em;line-height:1.4em}
q,blockquote{quotes:none}
q:before,q:after{content:''}
caption,legend{height:1px;overflow:hidden;margin:-1px 0 0 0;opacity:0;font:0/0 serif}
a,a:hover,a:visited,a:focus,a:active{text-decoration:none}
dfn,em,cite,address,sup,sub{font-style:normal;font-variant:normal;text-transform:none}
section,article,aside,footer,header,nav,hgroup{display:block}
button{outline:none;background-color:transparent;cursor:pointer}
table,tr,td{margin:0;padding:0;border-width:0;border-collapse:collapse}
img,input,select,textarea,button{vertical-align:middle}
a,input,button,select{outline:none}
button,input[type="radio"],input[type="checkbox"]{cursor:pointer}
input[type="password"],input[type="text"]{background-color:transparent}
html,body{
	-webkit-font-smoothing:antialiased;
	   -moz-font-smoothing:antialiased;
	    -ms-font-smoothing:antialiased;
	-webkit-text-size-adjust:none;
	   -moz-text-size-adjust:none;
	    -ms-text-size-adjust:none;
	word-wrap:break-word;
	word-break:keep-all;
}
html,body{width:100%}
body,input,textarea,a,select,button{
	font-family:'Noto Sans KR',sans-serif;
	font-style:normal;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	letter-spacing:-0.5px;
	color:#000;
}
*:focus{outline:none}
textarea{resize:none;
	-webkit-appearance:none;
	-webkit-border-radius:0;
	   -moz-box-shadow:none;
	-webkit-box-shadow:none;
			box-shadow:none;
 }
input[type="password"],
input[type="number"],
input[type="text"]{width:100%;height:40px;line-height:38px;font-size:15px;border:1px solid #ddd;text-indent:16px;box-sizing:border-box;background-color:#f8f8f8;color:#666;box-sizing:border-box;-webkit-appearance:none;-webkit-border-radius:0}
input[type="text"]::-ms-clear{display:none}
input[type="password"]{font-family:sans-serif !important}
table{width:100%;margin:0;padding:0;border-width:0;border-collapse:collapse}
table th,
table td{word-break:break-all}

::selection{background:#b8b3ae;color:inherit}
::-moz-selection{background:#b8b3ae;color:inherit}

.skipnav a{display:block;position:relative;height:0px;font-size:0;line-height:0;z-index:1000;overflow:hidden;opacity:0}
.skipnav a:focus,
.skipnav a:active{padding:4px 10px;height:auto;font-size:18px;line-height:1.4em;color:#000;background-color:#9b938b;opacity:1}

.hidden {display:block;width:0;height:0;overflow:hidden;background-repeat:no-repeat;text-indent:-99999em}
.raleway{font-family:'Raleway','Noto Sans KR',sans-serif}
.roboto {font-family:'Roboto',sans-serif}
.bold   {font-weight:700}
.light  {font-weight:100}
.medium {font-weight:500}

#ui_wrap{min-width:1260px}

/* head */
#ui_head{position:relative;z-index:5}
#ui_head .top{position:relative;padding:40px 0;max-width:1468px;margin:0 auto}
#ui_head .top:after{content:"";clear:both;display:block}
#ui_head h1{position:absolute;top:32px;left:30px;width:134px;height:38px}
#ui_head h1 a{display:block;width:100%;height:100%;text-indent:-9999px;background:url("../img/cubea_logo1.png") no-repeat center;
	-webkit-transition:background 0.6s cubic-bezier(0.165,0.84,0.44,1);
			transition:background 0.6s cubic-bezier(0.165,0.84,0.44,1);
}
#ui_head .menu{margin-left:320px}
#ui_head .menu:after{content:"";clear:both;display:block}
#ui_head .menu .gnb-box{float:left}
#ui_head .menu .gnb-box *{box-sizing:border-box;vertical-align:top}
#ui_head .menu .gnb-box li{position:relative;display:inline-block;list-style:outside none none;margin:0 20px;padding:0}
#ui_head .menu .gnb-box a{position:relative;padding:0.5em 0;color:#9b938b;position:relative;letter-spacing:1px;text-decoration:none;font-weight:500;text-shadow:1px 1px 1px rgba(0,0,0,0.1);
	transition: opacity 0.4s, color 0.4s;-webkit-transition: opacity 0.4s, color 0.4s}
#ui_head .menu .gnb-box a:hover{color:#333;opacity:1}
#ui_head .menu .gnb-box .on a{color:#333;opacity:1}
#ui_head .menu .gnb-box .on:after{content:"";display:block;position:absolute;top:100%;left:0;width:100%;height:3px;background-color:#9b938b}
#ui_head .menu .company_pdf{float:right;position:relative;padding-right:24px}
#ui_head .menu .company_pdf:after{content:"";display:block;position:absolute;right:0;top:0;width:16px;height:100%;background:url("../img/brochure_icon1.png") no-repeat 0 center}
#ui_head .menu .company_pdf a{display:block;font-size:15px;color:#000;position:relative;letter-spacing:0.01em;text-decoration:none;font-weight:500;text-shadow:1px 1px 1px rgba(0,0,0,0.1)}
#ui_head .menu .company_pdf a:before,
#ui_head .menu .company_pdf a:after{position:absolute;-webkit-transition:0.35s ease;transition:0.35s ease}
#ui_head .menu .company_pdf a:before{bottom:0;display:block;height:3px;width:0%;content:"";background-color:rgba(0,0,0, 0.8)}
#ui_head .menu .company_pdf a:after{left:0;top:0;content:attr(data-hover);color:rgba(184,184,184, 0.8);white-space:nowrap;max-width:0%;overflow:hidden}
#ui_head .menu .company_pdf a:hover:before{opacity:1;width:100%}
#ui_head .menu .company_pdf a:hover:after{max-width:100%}
#ui_head .m_menu{display:none}

.header_w #ui_head h1 a{background-image:url("../img/cubea_logo2.png")}
.header_w #ui_head .menu .gnb-box a{color:rgba(255, 255, 255, 0.6)}
.header_w #ui_head .menu .gnb-box a:after{color:#fff}
.header_w #ui_head .menu .company_pdf:after{background-image:url("../img/brochure_icon2.png");opacity:0.8}
.header_w #ui_head .menu .company_pdf a{color:rgba(255, 255, 255, 0.8)}
.header_w #ui_head .menu .company_pdf a:after{color:#fff}
.header_w #ui_head .menu .company_pdf a:before{background-color:#fff}

#ui_body .container{margin:0 auto;padding-left:230px;width:1044px}
#ui_foot{position:relative;border-top:1px solid #f2f2f2;padding:40px 0;width:100%}
#ui_foot .copyright{max-width:1468px;margin:0 auto}
#ui_foot .copyright p{margin:0;font-size:10px;color:#cacaca;letter-spacing:0;line-height:1em}
#scroll-btn{position:fixed;right:90px;bottom:48px;padding:10px;z-index:10;opacity:0;
	-webkit-transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1);
			transition:opacity 0.6s cubic-bezier(0.165,0.84,0.44,1);
}
#scroll-btn.on{opacity:1}
#scroll-btn button{display:block;position:relative;top:0px;width:70px;height:65px;font-size:18px;font-weight:bold;text-align:center;line-height:65px;color:#fff;background:url("../img/up_icon2.png") no-repeat center;
	-webkit-transition:top 0.4s cubic-bezier(0.165,0.84,0.44,1);
			transition:top 0.4s cubic-bezier(0.165,0.84,0.44,1);
}
#scroll-btn button:hover,
#scroll-btn button.move{top:-15px}

/* 년도 선택 */
.all-btn {float:right;padding-bottom:62px;height:18px}
.all-btn span.all{float:left;margin-right:10px;line-height:27px;font-size:18px;color:#bfbfbf}
.all-btn ul {float:left;width:0;overflow:hidden;transition:0.5s ease-in}
.all-btn ul li{display:inline-block;margin-right:10px}
.all-btn ul li a{color:#bfbfbf;letter-spacing:-0.25px;line-height:18px;font-size:18px}
.all-btn ul li a.select{color:#9b938b}
.all-btn .p-m-btn{position:relative;right:0;float:left;width:16px;height:18px}
.all-btn .p-m-btn a{position:absolute;display:block;width:16px;transition:0.5s ease-in} 
.all-btn .p-m-btn a.m{margin-right:0;display:none}
.all-btn .p-m-btn a:hover{transform:rotate(90deg)}
.all-btn .p-m-btn a img{margin-bottom:6px}
.all-btn > ul li,.all-btn > span{vertical-align:top}

/* 더보기 */
.more-btn{width:100%;padding:102px 0 40px}
.more-btn > p {height:16px}
.more-btn > p a{position:relative;display:block;margin:auto;width:220px;line-height:18px;letter-spacing:0.25px;font-size:18px;text-align:center;color:#9b938b}
.more-btn > p a:after{content:"";clear:both;display:block;position:absolute;right:42px;top:0;width:16px;height:18px;background:url("../img/viewmore.png") no-repeat 0 center}

/* 목록선택 */
.s-select-btns{position:relative;margin-top:100px;padding-bottom:100px}
.s-select-btns:after{content:"";display:block;clear:both}
.s-select-btns span{display:block;text-align:left}
.s-select-btns span a{position:relative;padding:0 30px;display:block;color:#9b938b;font-size:18px;letter-spacing:0px}
.s-select-btns span a:before{position:absolute;top:5px;content:"";clear:both;display:inline-block;width:16px;height:14px;background:no-repeat center center}
.s-select-btns span.p{position:absolute;top:0;left:0}
.s-select-btns span.n{position:absolute;top:0;right:0}
.s-select-btns span.l{margin:0 auto;width:150px;text-align:center}
.s-select-btns span.p a:before{left:0;background-image:url("../img/list_p_icon.png")}
.s-select-btns span.n a:before{right:0;background-image:url("../img/list_n_icon.png")}
.s-select-btns span.l a:before{left:6px;background-image:url("../img/list_l_icon.png")}

/* h3배경 */
.cnt-wrap{padding-top:63px}
.cnt-wrap h3{margin-left:-490px;font-size:300px;color:#f7f7f7;line-height:220px;text-shadow:1px 1px 3px #e2e2e2}

@media all and (max-width:640px){
	#ui_wrap{padding-top:58px;min-width:320px}
	#ui_head{position:fixed;top:0;left:0;width:100%;height:58px;background-color:#fff;z-index:11;box-shadow:rgba(0, 0, 0, 0) 0 0 0}
	#ui_head .top{margin:0;padding:20px 20px;width:auto}
	#ui_head h1{position:static;float:left;width:78px;height:22px}
	#ui_head h1 a{display:block;width:100%;height:100%;text-indent:-9999px;background:url("../img/cubea_logo1.png") no-repeat center;background-size:100% auto}

	#ui_head .menu{padding-top:30%;text-align:center;position:fixed;top:0;right:-100%;width:100%;height:100%;overflow-y:auto;background-color:#fff;z-index:100;margin-left:0}
	#ui_head .menu .gnb-box{float:none;width:100%}
	#ui_head .menu .gnb-box li{display:block;margin:0 0 10px 0}
	#ui_head .menu .gnb-box li a{position:relative;padding-bottom:10px;font-size:26px;color:#767676;letter-spacing:0.01em;display:inline-block;vertical-align:top}
	#ui_head .menu .gnb-box li a:after{top:0}
	#ui_head .menu .gnb-box li a.on{color:#9b938b}
	#ui_head .menu .gnb-box .on:after{left:50%;width:100px;margin-left:-50px}
	#ui_head .menu .company_pdf{float:none;margin-top:50px;display:inline-block;vertical-align:top}
	#ui_head .menu .company_pdf:after{top:-3px}
	#ui_head .menu .company_pdf a{margin:0 auto;display:block;position:relative;width:100px;color:#000;font-size:20px;line-height:24px;padding-bottom:8px}
	#ui_head .menu .company_pdf a:after{left:6px}
	#ui_head .m_menu{display:block;position:absolute;right:0;top:0;width:70px;height:55px}
	#ui_head .m_menu button{display:block;width:100%;height:100%;background:url("../img/gnb.png") center center no-repeat;background-size:18px auto;font-size:0;line-height:0}
	#ui_head .m_menu.open{z-index:200}
	#ui_head .m_menu.open button{background-image:url("../img/m_btn_x.png");background-size:16px auto}

	.header_w #ui_head .m_menu button{background-image:url("../img/gnb_wh.png")}
	.header_w #ui_head .m_menu.open button{background-image:url("../img/m_btn_x.png")}
	.header_w #ui_head .menu .gnb-box a{color:#767676}
	.header_w #ui_head .menu .gnb-box a:after{color:rgba(0,0,0,0.8)}
	.header_w #ui_head .menu .company_pdf a{color:#000}
	.header_w #ui_head .menu .company_pdf:after{background-image:url('../img/brochure_icon1.png');opacity:1}
	.header_w.bgFix #ui_head h1 a{background-image:url("../img/cubea_logo1.png")}
	.header_w.bgFix #ui_head .m_menu button{background-image:url("../img/gnb.png")}

	#ui_wrap.bgFix #ui_head{background-color:#fff !important;box-shadow:rgba(0, 0, 0, 0.5) 0 0 15px;
		-webkit-transition:background-color 0.6s, box-shadow 0.6s;
				transition:background-color 0.6s, box-shadow 0.6s;
	}
	#ui_wrap.bgFix #ui_head .top-content h1 a{background-image:url("../img/cubea_logo1.png")}
	#ui_wrap.bgFix #ui_head .top-content span button{background-image:url("../img/gnb.png")}
	#ui_body .container{padding:0 20px;width:auto}
	#ui_foot{padding:20px 0}
	#ui_foot .copyright{text-align:center}
	#scroll-btn{right:10px;bottom:18px}
	#scroll-btn button{width:45px;height:45px;font-size:12px;line-height:45px;background:url("../img/up_icon2.png") no-repeat center;background-size:100% auto}
	#scroll-btn button.move{top:-15px}
	#ui_wrap.sub_works{padding-top:0}
	#ui_wrap.sub_works #ui_head{background:none}
	#ui_wrap.sub_story{padding-top:0}
	#ui_wrap.sub_story #ui_head{background:none}

	/* h3배경 */
	.cnt-wrap{padding:0 0 60px}
	.cnt-wrap h3{margin-left:0;font-size:50px;line-height:55px;text-align:center;text-shadow:1px 1px 1px #e2e2e2;font-weight:700}

	/* 목록선택 */
	.s-select-btns{margin-top:40px;padding-bottom:60px}
	.s-select-btns span{padding:0;width:40px;height:24px}
	.s-select-btns span a{font-size:0;text-indent:-9999px;padding:0 20px}
	.s-select-btns span a:before{top:5px}
	.s-select-btns span.l{width:40px}
	.s-select-btns span.l a:before{left:10px}
}