@charset "utf-8";

.main .section {position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;}
.main #sec01 {background-image: url('../img/main/section01-bg.jpg');}
.main #sec02 {background-image: url('../img/main/section02-bg.jpg');}
.main #sec03 {background-image: url('../img/main/section03-bg.jpg');}
.main #sec04 {background-image: url('../img/main/section04-bg.jpg');}
.main #sec05 {background-image: url('../img/main/section05-bg.jpg');}
.main #sec06 {background-image: url('../img/main/section06-bg.jpg');}

.main .section .btn-scroll-down {position: absolute; bottom: 80px; right: 80px; text-align: center; width: 40px; height: 60px; border-radius: 30px; background: url('../img/main/btn-scroll-down.png') center top; overflow: hidden;}
.main .section .btn-scroll-down:hover {background-position: center bottom -60px; transition: all 0.7s 0.4s;}
.main .section .btn-scroll-down:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 30px;}
.main .section .btn-scroll-down:after {position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); content: ''; width: 50px; height: 50px; background: rgba(255,255,255,0.3); border-radius: 50%; transition: all 0.5s;}
.main .section .btn-scroll-down:hover:after {width: 80px; height: 80px;}

.section {overflow: hidden;}
.section .container {display: flex; flex-direction: column; justify-content: center;}
#main .anchor-section .container {max-width: 1430px;}

/* 바로가기 섹션 공통 */
.main .anchor-section .backdrop-text {position: absolute; font-family: "Poppins", sans-serif; font-size: 180px; font-weight: 700; line-height: normal; letter-spacing: -5.4px; color: rgba(255,255,255,0.14);}
.main .anchor-section-display .backdrop-text {top: 180px; right: -240px; transform: rotate(-90deg);}
.main .anchor-section-automotive .backdrop-text {bottom: 10px; left: 80px;}
.main .anchor-section-esg .backdrop-text {top: 55px; left: 80px;}
.main .anchor-section-inquiry .backdrop-text {bottom: 180px; right: -210px; transform: rotate(-90deg);}
.main .anchor-section .text-box {position: relative; text-align: right; z-index: 10;}
.main .anchor-section .main-section-cate {font-size: 26px; font-weight: 500; line-height: normal; letter-spacing: -1.56px; color: rgba(255,255,255,0.7); margin-bottom: 30px; opacity: 0;}
.main .main-section-title {font-size: 68px; font-weight: 700; line-height: 1.26em; letter-spacing: -4.08px; color: #fff; opacity: 0;}
.main .anchor-section .main-section-title {margin-bottom: 70px;}
.main .anchor-section .main-section-btn {display: inline-block; opacity: 0;}
.main .anchor-section .main-section-btn a {display: flex; justify-content: flex-end; align-items: center; gap: 12px; transition: all 0.5s;}
.main .anchor-section .main-section-btn .text {position: relative; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -1.08px; color: #fff; z-index: 5;}
.main .anchor-section .main-section-btn .arrow {position: relative; padding-right: 12px;}
.main .anchor-section .main-section-btn .arrow:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 28px; height: 28px; background: #0F367A; border-radius: 28px; transition: all 0.5s;}
.main .anchor-section .main-section-btn a:hover .arrow:after {width: 152px; height: 56px;}
.main .anchor-section .main-section-btn .arrow img {position: relative; display: block; z-index: 5;}

/* 텍스트 애니메이션 */
.main .anchor-section.on .main-section-cate {animation: fadeDown 1.2s 0.3s forwards;}
.main .section.on .main-section-title {animation: fadeDown 1.2s 0.5s forwards;}
.main #sec01.on .main-section-title {animation: fadeDown 1.2s 0.4s forwards;}
.main .anchor-section.on .main-section-btn {animation: fadeDown 1.2s 0.7s forwards;}

@keyframes fadeDown {
    0% {
        opacity: 0;
		transform: translateY(-40px);
    }

    100% {
        opacity: 1;
		transform: translateY(0);
    }
}

/* 제품소개 */
.main .product-section-header {opacity: 0; display: flex; justify-content: space-between; gap: 100px; margin-bottom: 40px;}
.main .product-section-title {font-size: 68px; font-weight: 700; line-height: 1.26em; letter-spacing: -4.08px; color: #111; margin-bottom: 30px;}
.main .product-section-desc {font-size: 22px; line-height: 1.54em; letter-spacing: -1.32px; color: #666; margin-bottom: 30px;} 
.main .product-section-buttons {display: flex; align-items: flex-end; gap: 10px;}
.main .product-section-buttons a {position: relative; display: inline-block; padding: 18px 148px 18px 29px; border-radius: 50px; border: 1px solid #d1d1d1; font-size: 18px; font-weight: 500; line-height: 1.33em; letter-spacing: -1.08px; color: #666; transition: all 0.5s;}
.main .product-section-buttons a:hover {border: 1px solid #0F367A; background: #0F367A; color: #fff;}
.main .product-section-buttons a:after {position: absolute; top: 50%; right: 26px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background-repeat: no-repeat; background-position: 50% 50%; transition: all 0.5s;}
.main .product-section-buttons .btn-search:after {background-image: url('../img/main/icon-search-default.png');}
.main .product-section-buttons .btn-inquiry:after {background-image: url('../img/main/icon-inquiry-default.png');}
.main .product-section-buttons .btn-search:hover:after {background-image: url('../img/main/icon-search-hover.png');}
.main .product-section-buttons .btn-inquiry:hover:after {background-image: url('../img/main/icon-inquiry-hover.png');}

.main .product-section-list {opacity: 0; display: flex; margin: -5px;}
.main .product-section-item {flex: 1; min-width: 0; padding: 5px; transition: all 0.7s;}
.main .product-section-item:hover {flex: 4.7;}
.main .product-section-item a {position: relative; display: block; height: 450px; overflow: hidden;}
.main .product-section-item a:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 3; transition: all 0.5s;}
.main .product-section-item a:hover:before {background: rgba(0, 0, 0, 0.1);}
.main .product-section-item .backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; /* background-size: cover; */ border-radius: 4px; overflow: hidden; transition: all 0.8s;}
.main .product-section-item:hover .backdrop {transform: scale(1.15);}
.main .product-section-item:nth-child(1) .backdrop {background-image: url('../img/main/section06-item01.png');}
.main .product-section-item:nth-child(2) .backdrop {background-image: url('../img/main/section06-item02.png');}
.main .product-section-item:nth-child(3) .backdrop {background-image: url('../img/main/section06-item03.png');}
.main .product-section-item:nth-child(4) .backdrop {background-image: url('../img/main/section06-item04.png');}
.main .product-section-item .content {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 246px 0; height: 100%; padding: 80px 60px 50px 70px; z-index: 5;}
.main .product-section-item .content .title {opacity: 0; white-space: nowrap; overflow: hidden;  width: 0; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 600; line-height: 1.08em; letter-spacing: -1.44px; color: #fff;}
.main .product-section-item:hover .content .title {opacity: 1; width: 100%; transition: all 2s 0.3s;}
.main .product-section-item .content .btn {opacity: 0; transform: translateX(-10px); display: flex; justify-content: flex-end; align-items: center; gap: 12px; transition: all 0.5s;}
.main .product-section-item:hover .content .btn {opacity: 1; transform: translateX(0); transition: all 0.7s 1s;}
.main .product-section-item .content .btn .text {position: relative; font-size: 18px; font-weight: 500; line-height: 1.33; letter-spacing: -1.08px; color: #fff; z-index: 5;}
.main .product-section-item .content .btn .arrow {position: relative; padding-right: 12px;}
.main .product-section-item .content .btn .arrow:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 28px; height: 28px; background: #0F367A; border-radius: 28px; transition: all 0.5s;}
.main .product-section-item .content .btn:hover .arrow:after {width: 136px; height: 56px;}
.main .product-section-item .content .btn .arrow img {position: relative; display: block; z-index: 5;}
.main .product-section-item .intro-title {z-index: 10; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto;}
.main .product-section-item .intro-title span {display: inline-block; white-space: nowrap; transform: rotate(-90deg); font-family: "Poppins", sans-serif; font-size: 36px; font-weight: 600; line-height: 1.44em; letter-spacing: -1.08px; color: #fff; text-align: center; transition: all 0.5s;}
.main .product-section-item:hover .intro-title span {opacity: 0;}

.main .section.on .product-section-header {animation: fadeDown 1.2s 0.3s forwards;}
.main .section.on .product-section-list {animation: fadeDown 1.2s 0.5s forwards;}