@charset "UTF-8";
/*****************************************************************

Copyright C 그누위즈 테마 All rights reserved.
gnuwiz@naver.com & master@gnuwiz.com
본 페이지는 유료콘텐츠 그누위즈 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/

/*공통*/
#wrapper{padding-bottom: 0;background: #fff;}
#container_wr{padding: 0;background: #fff;transition: all .3s}
.scroll-content > section{width: 100vw;position: relative;overflow: hidden;}
.gw-sec{padding:150px 0;}
.gw-sec-con-1800{position:relative;margin:0 auto;width: 1800px;}
.hp-sec-container{position:relative;margin:0 auto;width: 1800px;}
.gw-dot{margin-right:10px;width: 10px;height: 10px;border-radius: 100%;background: var(--main-color);}


/*버튼*/
.gw-plus-btn{display: block;width: 50px;height: 50px;border-radius: 100%;border: 2px solid #ddd;}
.gw-plus-btn > i{transform-origin:center;transition: all 0.5s;}
.gw-plus-btn:hover > i{transform: translate(-50%,-50%) rotate(360deg);}
.gw-more-btn{font-family: "Lexend", sans-serif; font-weight: 400;font-size:17px;}
.gw-more-btn .gw-arrow{transition: all .3s;}
.gw-more-btn:hover .gw-arrow{transform: translateX(10px);}


/* hp-sec01 */
#hp-sec01{position:relative;margin:200px 0 225px;}
.trigger-this-00 {height: 100%;}
.fix-this-00 {width: 100vw;height: 100%;position: relative;}
#hp-sec01:before {content: ""; position: absolute; left: -10%; top: 0; width: 100%; height: 100%; background: url("../img/hp-sec01-bg.png") right  bottom no-repeat;}
#hp-sec01 .hp-container{color: var(--main-color);}
#hp-sec01 .hp-title01{font-size: 1.4vw;opacity: 0.6;}
#hp-sec01 .hp-title02{display: flex;flex-direction: column;font-size: 9vw;font-weight: 800;line-height:1;}
#hp-sec01 .hp-title02 > div {overflow: hidden;}
#hp-sec01 .hp-title02 > div > span {padding:20px 0;overflow: hidden;transform: translateY(100%);transition: all 1s;display: block;}
#hp-sec01 .hp-title02.on > div > span{transform: translateY(0);}
#hp-sec01 .hp-text-container{font-size: 1.4vw;opacity: 0.6;}
#hp-sec01 .hp-text-container > li:not(:last-child){margin-bottom: 20px;}


/* hp-sec02 */
#hp-sec02 {margin-bottom: 441px;}
#hp-sec02 .hp-title{color: var(--main-color);font-weight: 700;font-size: 41px;}
#hp-sec02 .hp-service-list{gap: 50px;}
#hp-sec02 .hp-service-list > li{width:20%;aspect-ratio:1 / 1;text-align:center;}
#hp-sec02 .hp-service-list > li > a{display: flex;align-items:center;place-content:center;width: 100%;height: 100%;border-radius: 20px;background: #F4F4F4;transition: all 0.3s;}
#hp-sec02 .hp-service-list > li > a:hover {transform: translateY(-10px); box-shadow: 10px 10px 20px rgba(0,0,0,0.05);}
#hp-sec02 .hp-service-list > li > a > img {width: 80%;}
#hp-sec02 .hp-service-text {font-size: 45px;color: var(--main-color);font-weight:600;}

/* hp-sec03 */
#hp-sec03{position:relative;color: var(--main-color);height: 230vh;overflow: hidden;}
.trigger-this-01 {height: 100%;}
.fix-this-01 {width: 100%;height: 100%;position: relative;}
#hp-sec03 .hp-img-container {position: absolute;top: 0;width: 100%;height: 1430px;}
#hp-sec03 .hp-img-container .hp-bg{z-index: 100;width:25vw;}
#hp-sec03 .hp-img-container .hp-bg > img {width: 100%;height: 100%;object-fit: cover;}
#hp-sec03 .hp-img-container .hp-work-list{position: absolute;top: 50px;width: 100%;height:100%;}
#hp-sec03 .hp-work-list > li {position:absolute;}
#hp-sec03 .hp-work-list > li >a {display: block;width: 100%;height: 100%;color: var(--main-color);transition: all 0.3s;}
#hp-sec03 .hp-img{width: 600px;height: 400px;background: black;transition: all 0.3s;}
#hp-sec03 .hp-category {position: absolute;right: 17px;top: 20px;transform: translate(100%, 100%) rotate(90deg);color: var(--main-color);font-size: 22px;}
#hp-sec03 .hp-title{font-size:28px;font-weight:600;}
#hp-sec03 .hp-img-container .hp-work-item01{top:24%;left:7%;}
#hp-sec03 .hp-img-container .hp-work-item02{right: 13%;}
#hp-sec03 .hp-img-container .hp-work-item03{bottom: 0;left: 12%;}
#hp-sec03 .hp-img-container .hp-work-item04{bottom: 20%;right:6%;}
#hp-sec03 .hp-work-list > li >a:hover .hp-img{transform: translateY(-10px); box-shadow: 10px 10px 20px rgba(0,0,0,0.1);}
#hp-sec03 .hp-title-container {position: absolute;bottom: -100%;width: 100%;}
#hp-sec03 .hp-title-container .hp-title01{font-size:50px;}
#hp-sec03 .hp-title-container .hp-title02{font-size: 9vw;font-weight: 800;line-height:1;}
#hp-sec03 .hp-title-container .hp-btn02 {padding-bottom:15px;font-size: 27px;color: var(--main-color);border-bottom: 2px solid var(--main-color);}
#hp-sec03 .hp-title-container .hp-arrow{display:inline-block;transition: transform 0.3s;}
#hp-sec03 .hp-title-container .hp-btn02:hover .hp-arrow{transform:translateX(10px);}


    /* hp-sec04 */
#hp-sec04{padding: 180px 0;background: #F1F0F5;color: var(--main-color);}
#hp-sec04 .hp-container {text-align: center;}
#hp-sec04 .hp-title{font-weight: 700;font-size: 50px;}
#hp-sec04 .hp-btn01{ display: inline-block; font-size:30px;background:var(--main-color);  border: 1px solid transparent; border-radius: 50px; padding: 15px 34px; color: #fff; font-weight: 600; cursor: pointer; transition: all 0.5s;}
#hp-sec04 .hp-btn01:hover{border-color: var(--main-color);background: transparent;color: var(--main-color);}