@import url("common.css");

/*** VISUAL ***/
#visual {position:relative; width:100%; height:280px; animation:animate_background 1s ease-in-out; box-sizing:content-box;}
#visual .slick-slider {position: relative; display: block; outline:none;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 280px; overflow:hidden; background:#000}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block; }

#visual .section {position:relative; width:100%; height:100%; opacity:.9;
	display: block; border:0;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: 1.5s;
	transition-duration: 1.5s;
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1); 
	background-size:auto 100%; background-position:center;
}

#visual .sub_imgbox li.action .section {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

#visual .text_area {position:absolute; left:3%; bottom:17px; z-index:999;}
#visual .text_area h4{display:block; font-size:15px; color:#fff; font-weight:normal; letter-spacing:-0.4pt;}
#visual .text_area ul{display:block; /* margin-left:20px; */ font-size:0;  margin-top:5px;}
#visual .text_area li{position: relative; display:inline-block; font-size:15px; color:rgba(255,255,255,1); margin-right:30px;}
#visual .text_area li:after{position:absolute; right:-13px; top:6px; display:inline-block; content:""; overflow:hidden; width:1px; height:12px; background:rgba(255,255,255,.25)}
#visual .text_area li:last-child:after{display:none}
#visual .text_area li span{color:rgba(255,255,255,.5); margin-right:5px}

/* Dots */
#visual .slick-dots{position:absolute; z-index:100; bottom:20px; right:3%;}
#visual .slick-dots li {position: relative; display: inline-block; cursor: pointer; width:12px; height:12px; margin:0 1px; background:rgba(255,255,255,.3); vertical-align:bottom; border-radius:3px;}
#visual .slick-dots li.slick-active {background:#ed1c24;}
#visual .slick-dots li button{opacity:0; margin:0; padding:0; height:0;  cursor: pointer;}

#visual .b_btn {position:absolute; z-index:80; bottom:29px; right:3%; top:15px; background-size:auto 100% !important;}
#visual  button {width:14px; height:14px; font-size:0; border:0;}
#visual .btn-play {border:none; display:none; background: none; cursor:pointer; background:url('/img/play_icon.png')no-repeat center;}
#visual .btn-stop {border:none; background: none; cursor:pointer; background:url('/img/stop_icon.png')no-repeat center;}

#visual li .cursor{display: inline-block; font-size:0; width: 60px; height: 60px; text-align:center; border-radius:50%; background:none; position: absolute; left:50%; top: 50%; margin:-30px 0 0 -30px;  z-index: 9999; user-select: none; pointer-events: none; transition: all 0.3s linear; overflow:hidden; opacity:0; transform: scale(0);}
#visual li a:hover .cursor{transform: scale(1); opacity: 1;}
#visual li .cursor:after{content:''; display: block; width: 100%; height: 100%; border-radius:50%; border:1px solid #fff; box-sizing:border-box; position: absolute; left: 0; top:0; opacity: 0; animation: cursor 2.5s linear infinite;}
#visual li .cursor:before{content:''; display: block; width: 6px; height: 6px; border-radius:50%; background-color: #fff; position: absolute; left: 50%; top:50%; margin: -3px 0 0 -3px;}


@keyframes cursor {
	0% {transform: scale(0); opacity: 0.5;}
	50% {transform: scale(0.5); opacity: 1;}
	100% { transform: scale(1); opacity: 0;}
}


/*** VISUAL ***/

#contents{position: relative; background:#f4f4f4; padding:40px 0;}
#contents .stitle{padding-bottom:16px;}
#contents .stitle i{display:inline-block; vertical-align:middle; margin:-4px 5px 0 0;}


/*** 건축작품 ***/
.work_con{position: relative; margin-bottom:40px;}

.work_con .work_inner{}
	.work_con dl.banner {width:100%; margin-bottom:10px;}
	.work_con .awards_list {}
	.work_con .awards_list .slick-list { margin-left:-10px; overflow:hidden;}
	.work_con .awards_list dl {margin-left:10px;}
	/* .work_con dl:last-child{margin-right:0} */
	.work_con .banner dd{overflow:hidden; width:auto;}
	.work_con .banner dd img{width:100%; height:auto; background-position:underline; background-size:cover}
	.work_con .banner .slick-list{overflow:hidden;}
		.work_con .slick-prev, .work_con .slick-next {position:absolute;  z-index:99 !important; font-size:0; outline:none; border:0; cursor:pointer; z-index:100; width:35px; height:35px;}
		.work_con .slick-prev {background:#fff url('/img/arrow_prev.svg') no-repeat center; background-size:8px}
		.work_con .slick-next {background:#fff url('/img/arrow_next.svg') no-repeat center; background-size:8px;}


		.banner .slick-prev, .banner .slick-next {top:10px;}
		.banner .slick-prev {right:48px;}
		.banner .slick-next {right:10px;}

		.awards_list .slick-prev, .awards_list .slick-next {top:-50px;}
		.awards_list .slick-prev {right:38px;}
		.awards_list .slick-next {right:0;}


	
	.work_con dl.list{}
	.work_con dl.list a{display:block; background:#fff;}
	.work_con dl.list a dd{width:100%; overflow:hidden;}
	.work_con dl.list a dd img{width:100%; background-position:center; background-size:cover; transition: all 0.5s ease-in-out;}
	.work_con dl.list a:hover dd img{ -webkit-transform: scale(1.16);-moz-transform: scale(1.16); -o-transform: scale(1.16);-ms-transform: scale(1.16);transform: scale(1.16);}
	.work_con dl.list a dt{padding:12px 10px 12px 12px; min-height:89px;}
	.work_con dl.list a dt p.stxt{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
	.work_con dl.list a dt p.name{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; letter-spacing:-0.4pt; padding-top:2px;}
	.work_con dl.list a dt p.name span{display:block; color:#333;}

/*** 건축작품 ***/

/*** 알림마당 ***/
.notice_con{position: relative; margin-bottom:10px;}
.notice_con .notice_inner{}
	.notice_inner .board{position: relative; width:100%; height:270px; background:#fff; margin-bottom:10px;}
		.notice_inner .board .tab_cont{border-bottom:1px solid #ddd; padding:0 10px;}
		.notice_inner .board .tab_cont li{position: relative; display:inline-block; line-height:49px; font-size:13px; color:#999; letter-spacing:-0.5pt; padding:0 2px; margin:0 3px; cursor:pointer; transition: all 0.3s;}
		.notice_inner .board .tab_cont li:after{position:absolute; display:block; content:""; overflow:hidden; width:100%; height:0; background:#aaa; bottom:-1px; left:1px; opacity:0; transition: all 0.3s;}
		.notice_inner .board .tab_cont li:hover{color:#333; transition: all 0.3s;}
		.notice_inner .board .tab_cont li:hover:after{opacity:1; height:2px; transition: all 0.3s;}
		.notice_inner .board .tab_cont li.tab_up{color:#ed1c24; font-weight:bold;}
		.notice_inner .board .tab_cont li.tab_up:after{opacity:1; height:2px; background:#ed1c24}

	.notice_inner .no_cont{position: relative; padding:0 16px;}
	.notice_inner .no_cont .more{position:absolute; z-index:100; top:-32px; right:20px; display:block; width:14px; transition: all 0.3s;}
	.notice_inner .no_cont .more:hover{transform:rotate(180deg); transition: all 0.3s;}
	.notice_inner .no_cont dl{padding-top:8px}
	.notice_inner .no_cont dd{}
	.notice_inner .no_cont dd:last-child{border-bottom:0}
	.notice_inner .no_cont dd a{position: relative;  display:block; line-height:40px; letter-spacing:-0.5pt; padding-right:78px; transition: all 0.3s; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
	.notice_inner .no_cont dd a span{display:inline-block;}
	.notice_inner .no_cont dd a span.cate{margin-right:6px; width:70px; height:25px; background:#fff; border:1px solid #ed1c24; color:#ed1c24; line-height:23px; text-align:center; font-size:12px;}
	.notice_inner .no_cont dd a span.date{position:absolute; font-family:'Roboto', sans-serif; color:#999; letter-spacing:0; right:0; transition: all 0.3s;}

	.notice_inner .no_cont dd a:hover{background:#fafafa; transition: all 0.3s;}
	.notice_inner .no_cont dd a:hover .date{transition: all 0.3s;}

.notice_inner .newsletter{position: relative; width:100%; height:350px; text-align:center}
.notice_inner .newsletter h5{line-height:67px; padding:0 40px;}
.notice_inner .newsletter h5 a.more{position:absolute; z-index:100; top:24px; right:40px; display:block; transition: all 0.3s;}
.notice_inner .newsletter h5 a.more:hover{transform:rotate(180deg); transition: all 0.3s;}
.notice_inner .newsletter .newsletter_inner{padding:45px 40px 0 40px;}
.notice_inner .newsletter .newsletter_inner dl a{display:flex; flex-wrap:wrap;}
.notice_inner .newsletter .newsletter_inner dl dd{width:159px; height:212px; box-shadow:rgba(0,0,0,.1) 10px 10px 20px}
.notice_inner .newsletter .newsletter_inner dl dt{width:calc(100% - 159px); padding-left:35px; align-items:center; display: flex; justify-content:center;}
.notice_inner .newsletter .newsletter_inner dl dt p{width:100%; color:#fff; font-size:17px;}
.notice_inner .newsletter .newsletter_inner dl dt span{display:block; font-size:1rem; font-family:'Roboto', sans-serif; color:rgba(255,255,255,.5); letter-spacing:0;}




/*** 알림마당 ***/


/*** 바로가기 ***/
.quick_con{position: relative;}
.quick_con dl{font-size:0; background:#fff;}
.quick_con dd{display:inline-block; width:50%; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.quick_con dd:nth-of-type(2n){border-right:0}
.quick_con dd:nth-of-type(5), .quick_con dd:nth-of-type(6){border-bottom:0}
.quick_con dd a{position: relative; display:block; font-size:1rem; color:#333; letter-spacing:-0.5pt; line-height:50px; padding:0 0 0 50px; transition: all 0.3s;}
.quick_con dd a i{position:absolute; left:10px; top:50%; transform:translateY(-50%); display:block; width:32px; height:32px; background-size:100%; background-position:0 0; background-repeat:no-repeat; transition: all 0.3s;}
	.quick_con dd.one a i{background-image:url('/img/quick_icon01.png')}
	.quick_con dd.two a i{background-image:url('/img/quick_icon02.png')}
	.quick_con dd.three a i{background-image:url('/img/quick_icon03.png')}
	.quick_con dd.four a i{background-image:url('/img/quick_icon04.png')}
	.quick_con dd.five a i{background-image:url('/img/quick_icon05.png')}
	.quick_con dd.six a i{background-image:url('/img/quick_icon07.png')}

.quick_con dd a:hover{color:#ed1c24}
.quick_con dd a:hover i{}
	.quick_con dd.one a:hover i{background-image:url('/img/quick_icon01_up.png')}
	.quick_con dd.two a:hover i{background-image:url('/img/quick_icon02_up.png')}
	.quick_con dd.three a:hover i{background-image:url('/img/quick_icon03_up.png')}
	.quick_con dd.four a:hover i{background-image:url('/img/quick_icon04_up.png')}
	.quick_con dd.five a:hover i{background-image:url('/img/quick_icon05_up.png')}
	.quick_con dd.six a:hover i{background-image:url('/img/quick_icon07_up.png')}
/*** 바로가기 ***/



@media all and (max-width:340px){

.quick_con dd a{padding:0 0 0 44px;}
.quick_con dd a i{left:8px; width:28px; height:28px;}

}