@charset"utf-8";
* {box-sizing: border-box;}
body, html {margin: 0;padding: 0;height: 100%;background-color: #e0e0e0; font-family:'Pretendard'; height: 100vh;}

/* 공용 */
.container {display: flex;flex-direction: column;align-items: center;height: 100vh;}
.ct_wrap {width: 100%;max-width: 820px; text-align: center; padding: 50px 0; height:100%;}
.kv {background:url('../img/kv_bg.jpg'); width:100%; display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover; text-align: center;}
.kv h1 {margin: 100px 0;}
.kv h1 img {max-height: 200px; margin-bottom: 50px;}
.kv h1 p{color: #fff; font-weight:200; transform: scaleY(0.9); line-height: 50px; color:#e0e0e0;}
.button {border:2px solid #ef4023; width: 100%; margin-bottom: 25px; background-color: #ef4023;color: white;border-radius: 100px;font-size: 26pt;cursor: pointer;transition: background-color 0.3s ease; height:100px; border:0; display: flex; align-items: center; justify-content: center;}
.button:hover {background-color: #fff; border:2px solid #ef4023; color:#ef4023;}
.button img {filter: invert(1) brightness(100) grayscale(100%); max-width: 25px; margin-left: 15px;}
.button:hover img {filter:inherit;}
.button:last-child {margin-bottom:0;}
.copy {position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; padding: 10px 0; font-size: 16px; color: #6c6258;}
.sns_wrap {display: flex;align-items: center;justify-content: space-between;width: 65%;margin: 0 auto;margin: 100px auto;}
.sns_wrap a {max-width:50px; display: inline-block;} 
.sns_wrap a:hover {transition: 0.3s; opacity: 0.8;}

/* 서브 */
.container.sub .kv h1 img {max-height: 150px;}
.container.sub .kv {text-align:left;}
.container.sub .kv h1 {max-width: 820px; width: 100%; margin: 200px 0 50px;}
.container.sub .kv h1 p span {font-weight:bold; color: #ef4023;}
.container.sub .btn_wrap {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.container.sub .btn_wrap a {display: contents;}
.container.sub .btn_wrap .button {width:calc(100% / 2); margin-bottom:0; border-radius:25px; display: block; font-size:26pt; line-height: 50px; aspect-ratio: 1 / 1; height: 100%; min-width: 0;}
.container.sub .btn_wrap .button img {margin-left:0; margin-top:20px; max-width: 40px;}
.container.sub .btn_wrap a:first-child .button {margin-right:5%;}
.container.sub .btn_wrap a:last-child .button img {max-width: 50px;}
.container.sub .btn_wrap {padding:85px 0 0;}
.kv .back_wrap {position: absolute; top: 40px; max-width: 820px; width: 100%;}
.kv .back {color: #fff; font-size: 20pt; font-weight: 400; display: inline-flex; align-items: center;}
.kv .back img {max-width: 30px; margin-bottom: 0; margin-right: 15px;}
.kv .back:hover img {margin-right:20px; transition: 0.3s;}
.container.sub .ct_wrap {padding:0;}

.container.sub .btn_wrap.only {display:block; padding-top: 5%;}
.container.sub .btn_wrap.only a .button {width: 100%; margin-right: 0; aspect-ratio: 5 / 1; display: flex; align-items: center; justify-content: center;}
.container.sub .btn_wrap.only a:last-child .button img {margin-left: 0; margin-top: 0; max-width: 40px; margin-left: 20px;}

/* 서브-시공 */
.container.sub.project .kv {background:url('../img/kv_bg_sub1.jpg'); width:100%; display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover;}
/* 서브-엑스포 */
.container.sub.expo .kv {background:url('../img/kv_bg_sub2.jpg'); width:100%; display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover;}

@media (max-width: 840px) {
.kv h1 {margin:100px 0;}
.kv h1 img {max-height:150px;}
.button {width:90%; margin:0 auto; margin-bottom:30px;}
.sns_wrap {width:60%;}
.copy {position:absolute;}
.sns_wrap a {max-width:40px;}
.sns_wrap {width:55%; margin: 70px auto 100px;}

/* 서브 */
.container.sub .kv h1 {padding:0 5%;}
.container.sub .kv h1 img {max-height: 120px; width: auto;}
.kv .back_wrap {top:20px; left:20px; width: auto;}
.container.sub .btn_wrap a:first-child .button {margin-right:5%;}
.container.sub .btn_wrap {padding:70px 5% 0}
.container.sub .btn_wrap.only {padding-top:4%;}
}

@media (max-width: 640px) {
.kv h1 img {margin-bottom: 30px; width: 80%; max-height: 170px;}
.kv h1 {margin:100px 0;}
.kv h1 p {line-height: 37px; font-size: 18pt;}
.button {font-size:18pt; height: 80px;}
.sns_wrap {margin: 50px auto 100px auto; width: 70%;}

/* 서브 */
.container.sub .btn_wrap {padding:5% 5% 0}
.container.sub .btn_wrap .button {font-size:20pt; line-height:40px; border-radius: 15px;}
.container.sub .kv h1 img {max-height: 100px;}
.container.sub .kv h1 {margin:60px 0 20px;}
}

@media (max-width: 450px) {
body, html {overflow: hidden;}
.kv h1 {margin:50px 0;}
.kv h1 img {max-width: 250px; margin-bottom:20px;}
.kv h1 p {font-size:14pt; letter-spacing: -0.6px; line-height: 30px;}
.button {width:85%; margin-bottom: 15px; font-size: 14pt; height: 60px; font-weight: 600;}
.button img {max-width: 20px; margin-left: 10px;}
.sns_wrap a {max-width:30px;}
.sns_wrap {margin:30px auto 0; width: 70%;}
.kv h1 {margin:70px 0;}
.ct_wrap {padding:30px 0 0;}
.copy {font-size:12px; position: fixed;}

/* 서브 */
.container.sub .kv h1 img {max-height: 80px;}
.container.sub .kv h1 {padding:0 10%; margin: 10% 0 2%;}
.container.sub .btn_wrap {padding:20px 9% 0;}
.container.sub .btn_wrap .button {font-size: 14pt; line-height: 30px; border-radius: 10px;}
.container.sub .btn_wrap .button img {max-width:25px; margin-top: 15px;}
.container.sub .btn_wrap a:last-child .button img {max-width:30px;}
.container.sub .btn_wrap.only a:last-child .button img {max-width: 25px; margin-left: 15px;}
.kv .back {font-size:14pt;}
.kv .back_wrap {top:20px; left: 20px;}
.kv .back img {max-width: 20px; margin-right: 10px;}
}