@charset "UTF-8";

#header #tel-info {display:none}

#visual {margin-top:2rem; padding-top:11rem; position:relative}
#visual .contents {position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(100% - 3rem); max-width:140rem; z-index:1}
/*슬로건*/
#visual .slogan {color:#333; display:inline-block; font-size:4.9rem; font-weight:normal; margin-top:4.8rem; line-height:1.2}
#visual .slogan .mark01 {color:#448d70}
#visual .slogan .mark02 {color:#4f2c93}
#visual .slogan .br {color:#fff; display:block; margin-top:1rem}

/*퀵
#visual .quick {width:35.5rem; height:38.5rem; padding-top:9rem; position:absolute; right:34.5rem; top:0; z-index:1}
#visual .quick:before {content:''; width:0; height:0; position:absolute; left:0; top:0; border-top:9rem solid transparent; border-right:35.5rem solid #94ae53; border-bottom:29.5rem solid #94ae53; border-left:0 solid transparent; z-index:-1}
#visual .quick ul {display:flex; flex-wrap:wrap; width:100%; height:100%; position:relative}
#visual .quick ul:before {content:''; background-color:rgba(255,255,255,0.1); width:70%; height:1px; position:absolute; left:50%; top:14.7rem; transform:translateX(-50%)}
#visual .quick ul:after {content:''; background-color:rgba(255,255,255,0.1); width:1px; height:70%; position:absolute; left:50%; top:4rem; transform:translateX(-50%)}
#visual .quick li {width:50%; height:50%; text-align:center}
#visual .quick li a {color:#fff; display:flex; flex-direction:column; justify-content:center; font-size:1.6rem; font-weight:normal; width:100%; height:100%}
#visual .quick i {display:block; width:5rem; height:5rem; margin:0 auto 1rem; overflow:hidden}
#visual .quick img {display:block; width:100%; height:100%; position:relative; top:0; transition:all .3s}
#visual .quick a:hover i img {top:-5rem}*/

/*퀵*/
#visual .group {position:absolute; right:0; top:0; display:flex}
#visual .group .item {width:35.5rem; height:38.5rem; position:relative; padding-top:9rem}
#visual .group .item:before {content:''; width:0; height:0; position:absolute; left:0; top:0; z-index:-1}
#visual .quick {margin-right:-1rem; z-index:1}
#visual .quick:before {border-top:9rem solid transparent; border-right:35.5rem solid #689f3b; border-bottom:29.5rem solid #689f3b; border-left:0 solid transparent}
#visual .quick ul {display:flex; flex-wrap:wrap; width:100%; height:100%; position:relative}
#visual .quick ul:before {content:''; background-color:rgba(255,255,255,0.1); width:70%; height:1px; position:absolute; left:50%; top:14.7rem; transform:translateX(-50%)}
#visual .quick ul:after {content:''; background-color:rgba(255,255,255,0.1); width:1px; height:70%; position:absolute; left:50%; top:4rem; transform:translateX(-50%)}
#visual .quick li {width:50%; height:50%; text-align:center}
#visual .quick li a {color:#fff; display:flex; flex-direction:column; justify-content:center; font-size:1.6rem; font-weight:normal; width:100%; height:100%}
#visual .quick i {display:block; width:5rem; height:5rem; margin:0 auto 1rem; overflow:hidden}
#visual .quick img {display:block; width:100%; height:100%; position:relative; top:0; transition:all .3s}
@media (min-width:1024px) {
	/*효과*/
	#visual .quick a:hover i img {top:-5rem; transition:all .3s}
}

#visual .info {margin-top:-9.5rem; padding:9rem 3rem 3rem}
#visual .info:before {border-top:9rem solid transparent; border-right:0 solid transparent; border-bottom:29.5rem solid #317042; border-left:35.5rem solid #317042}
#visual .info .title {border-bottom:1px solid rgba(255,255,255,0.2); color:#fff; display:block; font-size:2.4rem; font-weight:normal; line-height:1.4; padding:1.3rem 1rem 1.8rem}
#visual .info .con {display:block; font-size:1.6rem; font-family:'Noto Sans KR'; font-weight:normal; opacity:0.8; word-break:keep-all}
#visual .info .tel {border-bottom:1px solid rgba(255,255,255,0.2); color:#fff; font-size:2.2rem; line-height:1.4; position:relative; padding:1.2rem 1rem 0.8rem 8.5rem}
#visual .info .tel i {position:absolute; left:0.5rem; top:1.3rem; border:1px solid rgba(255,255,255,0.5); border-radius:100%; color:#fff; font-size:2.4rem; width:5.5rem; height:5.5rem; line-height:5.5rem; text-align:center}
#visual .info .time {color:#fff; display:block; font-size:1.5rem; font-family:'Noto Sans KR'; line-height:1.4; opacity:0.8; padding:1.8rem 1rem 0}


/*배경*/
#visual .bg {width:100%; height:55rem}
#visual .bg .slick-slider,
#visual .bg .slick-list,
#visual .bg .slick-track {height:100%}
#visual .bg img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-height:100%; max-width:inherit; width:inherit; object-fit:cover}
#visual .control_box {position:absolute; bottom:10.5rem; left:50%; transform:translateX(-50%); width:calc(100% - 3rem); max-width:140rem}
#visual .control_box .paging {margin:0 2rem; vertical-align:-3px}
#visual .control_box .paging span {color:#fff}
#visual .control_box .paging .this:after {color:#fff; font-size:1.8rem}
#visual .controller .slick-arrow {position:relative}
#visual .controller .slick-arrow:before {content:''; color:#fff; font-size:2.4rem; margin-right:1rem; transition:all .3s}
#visual .controller .slick-arrow:after {content:''; background-color:transparent; border-radius:100%; width:3rem; height:3rem; position:absolute; top:-0.5rem; right:0; z-index:-1; transition:all .3s}
#visual .controller .slick-arrow.next:before {transform:scaleX(-1); margin-left:1rem}
#visual .controller .slick-arrow.next:after {left:0.3rem; right:auto}
#visual .controller .stop:before {content:''; color:#fff; font-size:2.4rem; transition:all .3s}
#visual .controller .play:before {content:''; color:#fff; font-size:2.4rem; transition:all .3s}
@media (min-width:1024px) {
	/*효과*/
	/*#visual .controller .slick-arrow:hover:after {background-color:#3cbcb1}*/
	#visual .controller .slick-arrow:hover:before,
	#visual .controller .stop:hover:before, 
	#visual .controller .play:hover:before {color:#3cbcb1; transition:all .3s} 
}

/*사업분야*/
.work {background-color:#f3f3f3; overflow:hidden; position:relative; padding-bottom:6rem}
.work:before {content:'태산조경'; color:#808080; font-size:17rem; font-weight:600; line-height:1; letter-spacing:-0.5rem; opacity:0.05; position:absolute; top:2.5rem; left:16.5%; white-space:nowrap}
.work:after {content:'LANDSCAPE ARCHITECTURE'; color:#808080; font-size:14rem; font-weight:600; line-height:1; letter-spacing:-0.5rem; opacity:0.05; position:absolute; bottom:-2.5rem; left:50%; transform:translateX(-50%); white-space:nowrap}
.work .list {width:calc(100% + 2rem); max-width:calc(140rem + 2rem); margin:0 auto; position:relative; padding:16.5rem 1.5rem 0}
.work ul {display:flex; justify-content:space-between}
.work .item {background-color:#fff; border-radius:1rem; box-shadow:-0.5rem -0.5rem 3.5rem rgba(8,1,3,0.16); height:37.5rem; width:calc(20% - 2rem); position:relative}
.work .item a {display:block; height:100%; width:100%; padding:3rem; text-align:center}
.work .item .title {color:#0b6740; display:block; font-size:2rem; font-weight:normal}
.work .item .img {border-radius:100%; display:block; width:18rem; height:18rem; overflow:hidden; position:absolute; left:50%; top:8.5rem; transform:translateX(-50%); transition:all .3s}
.work .item .img img {display:block; width:100%; height:100%}
.work .item .desc {color:#333; display:block; font-size:1.6rem; font-family:'Noto Sans KR'; font-weight:500; line-height:1.4; padding-top:23rem}
.work .item:nth-child(2) {margin-top:3rem}
.work .item:nth-child(3) {margin-top:-4rem}
.work .item:nth-child(4) {margin-top:-1rem}
.work .item:nth-child(5) {margin-top:1rem}
.work .more {display:block; max-width:140rem; margin:4rem auto 0; text-align:center}
.work .more a {color:#0b6740; display:inline-block; height:5rem; padding:1rem 2.5rem 1rem 0; position:relative; z-index:1}
.work .more a:before {content:''; background:url('/kor/img/main/arrow02.png') no-repeat right; width:7rem; height:1.3rem; position:absolute; right:2px; bottom:1.5rem}
.work .more a:after {content:''; background-color:#0b6740; border-radius:100%; width:4.7rem; height:4.7rem; position:absolute; right:0; top:0; z-index:-1; transition:all .3s}
.work .more a span {color:#fff}
@media (min-width:1024px) {
	/*효과*/
	.work .item:hover .img {border-radius:1rem; width:100%; height:100%; top:0; transition:all .3s}
	.work .more a:hover:after {animation:move 0.7s ease-in-out infinite alternate; transition:all .3s}
}

/*시스템*/
.system  {background-color:#f6f6f6; overflow:hidden; position:relative}
.system .chead {background-color:rgba(0,0,0,1); color:#fff; font-size:2rem; position:relative; padding:5rem 0; z-index:1}
.system .chead:after {content:''; background:url('/kor/img/main/system-bg.jpg') center bottom; background-attachment:fixed; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; opacity:0.5}
.system .chead strong {display:block; font-size:4rem}
.system .chead p {font-size:1.8rem; margin-top:3rem}
.system .group {max-width:144rem; margin:0 auto; position:relative; padding:8rem 2rem}
.system .list {display:flex; flex-wrap:wrap; margin-right:-6rem}
.system .list .item {color:#333; font-size:1.5rem; width:calc(33.3% - 6rem); margin:2rem 6rem 2rem 0; line-height:1.5; word-break:keep-all}
.system .list .item strong {font-size:2rem; display:block; margin:1rem 0}
.system .list .item ul {margin-top:.5rem}
.system .list .item ul li {color:#888; font-family:'Noto Sans KR'; font-size:1.5rem; position:relative; padding-left:1.3rem}
.system .list .item ul li:before {content:''; background-color:#999; width:0.7rem; height:1px; position:absolute; left:0; top:1rem}
@media (max-width:768px) {

	.system .list .item {width:calc(50% - 6rem)}
}

@media (max-width:640px) {

	.system .list .item {width:calc(100% - 6rem)}
}

/*소식*/
.news {overflow:hidden; position:relative; padding:8rem 0}
.news .group {width:calc(100% - 3rem); max-width:140rem; margin:0 auto; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between}
.news .group .label {color:#333; display:block; font-size:2.6rem; font-weight:normal; margin-bottom:2.5rem}
.news .group .more {position:absolute; right:-1rem; top:0.8rem; width:3rem; height:3rem; line-height:3rem; text-align:center; overflow:hidden}
.news .group .more:before {content:''; font-size:2.6rem; font-family:'xeicon'; display:block; width:100%; height:100%; line-height:inherit; transition:all .3s}

.news .board {width:calc(50% - 6rem); position:relative}
.news .board .list {font-family:'Noto Sans KR'}
.news .board .list li {border-bottom:1px solid #ddd}
.news .board .list li a {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%; height:100%; padding:2rem 0 2rem 3rem; position:relative}
.news .board .list .title {color:#666; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:80%; transition:all .3s}
.news .board .list .title:before {content:''; background-color:#999; border-radius:100%; width:0.5rem; height:0.5rem; position:absolute; left:1rem; top:3.3rem}
.news .board .list .desc {display:none}
.news .board .list .date {color:#666; display:inline-block; font-size:1.5rem; font-weight:300}
.news .board .list li:first-child a {padding:0 0 3.5rem}
.news .board .list li:first-child .title {color:#000; display:block; font-size:2.2rem; width:99.9%}
.news .board .list li:first-child .title:before {display:none}
.news .board .list li:first-child .desc {color:#666; display:block; line-height:1.4; margin-bottom:1rem; text-overflow:ellipsis; overflow:hidden; word-break:keep-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; min-height:6rem}

.news .gallery {width:calc(50% - 6rem); position:relative}
.news .gallery .list {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%}
.news .gallery .list li {width:calc(50% - 1rem); text-align:center}
.news .gallery .list li a {display:block; width:100%; height:100%}
.news .gallery .list li .img {border-radius:1rem; height:22.5rem; overflow:hidden; position:relative}
.news .gallery .list li .img:before {position: absolute; left: 0; top: 50%; width: 100%; margin-top: -1rem; font-family: 'xeicon'; font-size: 3.2rem; content: ''; color:#fff; text-align: center; line-height: 0; opacity: 0; transform: rotate(180deg); z-index:1; transition: all 0.2s}
.news .gallery .list li .img:after {position: absolute; left: 0; top: 50%; width: 100%; margin-top: 1rem; font-weight:500; content: '자세히 보기'; color:#fff; text-align: center; opacity: 0; transition: all 0.2s; }
.news .gallery .list li .img img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:inherit; width:100%; min-height:100%; object-fit:cover}
.news .gallery .list .desc {font-family:'Noto Sans KR'; margin-top:2.5rem}
.news .gallery .list .title {display:block; font-size:2.2rem; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:99.9%}
.news .gallery .list .txt {display:none}
.news .gallery .list .date {color:#666; display:block; font-size:1.5rem}
@media (min-width:1024px) {
	/*효과*/
	.news .group .more:hover:before {color:#448d70; transform:rotate(180deg); transition:all .3s}
	.news .board .list a:focus .title,
	.news .board .list a:hover .title {color:#448d70; transition:all .3s}
	.news .gallery .list li a:focus .img,
	.news .gallery .list li a:hover .img {background-color:#000; transition:all .3s}
	.news .gallery .list li a:focus .img:before,
	.news .gallery .list li a:hover .img:before,
	.news .gallery .list li a:focus .img:after,
	.news .gallery .list li a:hover .img:after {opacity:1; transform:rotate(0); transition:all 0.4s 0.1s}
	.news .gallery .list li a:focus .img img,
	.news .gallery .list li a:hover .img img {opacity:0.6; transition:all .3s}
}