@charset "UTF-8";

@keyframes scroll-ball {
	to { top: calc(100% - 15px); opacity: 0; }
}

@keyframes scroll-arrow {
	0% { top: 0; }
	50%{ top: 10px; }
	100% { top: 0; }
}

.bg-back{position: relative; width: 100%; min-height: 100vh;}

.bg{position: relative; width: 100%; height: calc(var(--vh, 1vh) * 100); padding: 50px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bg .highlight{color: var(--color1); font-family: inherit;}
.bg .highlight.c2{color: var(--color2);}

.bg .title{position: relative; font-family: 'GongGothicMedium'; margin: 0; font-weight: 700;}
.bg .title.c7{color: var(--color7);}
.bg .content{position: relative;}
.bg .content.c7{color: var(--color7);}

.bg .image-list-wrap{width: 100%; overflow: hidden;}
.bg .image-list-wrap > ul{width: max-content; display: flex; flex-direction: row; align-items: center; gap: 20px;}
.bg .image-list-wrap > ul > li{position: relative; width: 400px; height: calc(400px / 10 * 6); border-radius: 10px; background-color: black; overflow: hidden;}
.bg .image-list-wrap > ul > li > img{position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.bg-back > .bg{position: sticky; top: 0;}

.bg.bg1{background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/resources/images/bg1.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg.bg1 .title{opacity: 0; top: 50px; margin-bottom: 40px;}
.bg.bg1 .content{opacity: 0; font-family: 'NanumSquareAcl';}
.bg.bg1 .scroll-down{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: white; display: flex; flex-direction: column; align-items: center;}
.bg.bg1 .scroll-down > .scroll-animation{border: 2px solid white; width: 30px; height: 70px; border-radius: 50px; display: flex; flex-direction: column; align-items: center; }
.bg.bg1 .scroll-down > .scroll-animation > .ball{position: relative; top: 5px; width: 10px; height: 10px; border-radius: 50%; background-color: white; animation: scroll-ball 1s ease infinite;}
.bg.bg1 .scroll-down > .text{margin: 10px 0;}
.bg.bg1 .scroll-down > .mask{position: relative; top: 0; display: block; width: 20px; height: 20px; mask-image: url('/resources/images/icons/arrow1.png'); -webkit-mask-image: url('/resources/images/icons/arrow1.png'); background-color: white; transform: rotate(90deg); animation: scroll-arrow 2s ease infinite;}
.bg.bg1.active .title{transition: all ease .5s; opacity: 1; top: 0;}
.bg.bg1.active .content{transition: all ease .5s; transition-delay: .5s; opacity: 1; line-height: 1.4;}

.bg.bg2{padding: 115px 0 50px 0; min-height: 700px; background-image: url('/resources/images/bg2.png'); background-position: 5% 5%; background-size: 30%; background-repeat: no-repeat;}
.bg.bg2 .title{opacity: 0; left: -50px; margin-bottom: 40px;}
.bg.bg2 .title .highlight:nth-of-type(1){opacity: 0; font-family: 'GongGothicMedium';}
.bg.bg2 .title .highlight:nth-of-type(2){opacity: 0; font-family: 'GongGothicMedium';}
.bg.bg2 .content{opacity: 0; left: -50px; font-weight: 100; line-height: 1.4;}
.bg.bg2 .image-list-wrap{margin-top: 100px; display: flex; flex-direction: row; align-items: center;}

.bg.bg2.active .title{transition: all ease .5s; opacity: 1; left: 0;}
.bg.bg2.active .title .highlight:nth-of-type(1){transition: all ease .5s; transition-delay: .5s; opacity: 1;}
.bg.bg2.active .title .highlight:nth-of-type(2){transition: all ease .5s; transition-delay: 1s; opacity: 1;}
.bg.bg2.active .content{transition: all ease .5s; transition-delay: 1.5s; opacity: 1; left: 0;}

.bg.bg3{display: block;  padding: 0; min-height: 320px; padding-top: 75px; overflow: hidden;}
.bg.bg3 > .bg-div-wrap{display: flex; flex-direction: row; width: 100%; height: 100%; justify-content: flex-start;}
.bg.bg3 .bg-div{flex: 1; height: 100%;}
.bg.bg3 .bg-div.contents{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/contents.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg.bg3 .bg-div.platform{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/platform.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg.bg3 .bg-div.group{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/group.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.bg.bg3 .bg-div > .info-wrap{width: 100%; height: 100%; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;}
.bg.bg3 .bg-div > .info-wrap > .info{position: relative; top: 50px; opacity: 0; display: grid; grid-template-columns: 1fr; align-items: center;}
.bg.bg3 .bg-div > .info-wrap > .info > .mask{grid-column: 1 / 1; display: block; margin: 0 auto; width: 100px; height: 100px; background-color: var(--color7); margin-bottom: 20px; opacity: 0;}
.bg.bg3 .bg-div > .info-wrap > .info > .title{grid-column: 1 / 1; font-weight: 100; margin-bottom: 25px; opacity: 0;}
.bg.bg3 .bg-div > .info-wrap > .info > .content{grid-column: 1 / 1; opacity: 0;}
.bg.bg3 .bg-div > .info-wrap > .info > .line-wrap{grid-column: 1 / 1; height: calc(var(--vh, 1vh) * 18); display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 30px 0;}
.bg.bg3 .bg-div > .info-wrap > .info > .line-wrap > .line{width: 2px; height: 100%; background-color: var(--color7); opacity: 0;}
.bg.bg3 .bg-div.contents > .info-wrap > .info > .mask{mask-image: url('/resources/images/icons/contents.png'); -webkit-mask-image: url('/resources/images/icons/contents.png');}
.bg.bg3 .bg-div.platform > .info-wrap > .info > .mask{mask-image: url('/resources/images/icons/platform.png'); -webkit-mask-image: url('/resources/images/icons/platform.png');}
.bg.bg3 .bg-div.group > .info-wrap > .info > .mask{mask-image: url('/resources/images/icons/group.png'); -webkit-mask-image: url('/resources/images/icons/group.png');}

.bg.bg3 .bg-div:nth-of-type(1).active > .info-wrap > .info{transition: all .5s ease; transition-delay: 0s; top: 0; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(1).active > .info-wrap > .info > .mask{transition: all ease .5s; transition-delay: 0s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(1).active > .info-wrap > .info > .title{transition: all ease .5s; transition-delay: .5s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(1).active > .info-wrap > .info > .content{transition: all ease .5s; transition-delay: 1s;  opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(1).active > .info-wrap > .info > .line-wrap > .line{transition: all ease .5s; transition-delay: 1s; opacity: 0.3;}
.bg.bg3 .bg-div:nth-of-type(2).active > .info-wrap > .info{transition: all .5s ease; transition-delay: .25s; top: 0; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(2).active > .info-wrap > .info > .mask{transition: all ease .5s; transition-delay: .25s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(2).active > .info-wrap > .info > .title{transition: all ease .5s; transition-delay: .75s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(2).active > .info-wrap > .info > .content{transition: all ease .5s; transition-delay: 1.25s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(2).active > .info-wrap > .info > .line-wrap > .line{transition: all ease .5s; transition-delay: 1.25s; opacity: 0.3;}
.bg.bg3 .bg-div:nth-of-type(3).active > .info-wrap > .info{transition: all .5s ease; transition-delay: .5s; top: 0; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(3).active > .info-wrap > .info > .mask{transition: all ease .5s; transition-delay: .5s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(3).active > .info-wrap > .info > .title{transition: all ease .5s; transition-delay: 1s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(3).active > .info-wrap > .info > .content{transition: all ease .5s; transition-delay: 1.5s; opacity: 1;}
.bg.bg3 .bg-div:nth-of-type(3).active > .info-wrap > .info > .line-wrap > .line{transition: all ease .5s; transition-delay: 1.5s; opacity: 0.3;}

.bg.bg3 .bg-div.active:hover > .info-wrap{transition: all .5s ease; backdrop-filter: brightness(50%); -webkit-backdrop-filter: brightness(50%);}
.bg.bg3 .bg-div.active:hover > .info-wrap > .info > .mask{transition: all ease .5s; transition-delay: 0s !important; transform: scale(1.1);}
.bg.bg3 .bg-div.active:not(:hover) > .info-wrap > .info > .mask{transition-delay: 0s !important;}
.bg.bg3 .bg-div.active:hover > .info-wrap > .info > .title{transition: all ease .5s; transition-delay: 0s !important; transform: scale(1.1);}
.bg.bg3 .bg-div.active:not(:hover) > .info-wrap > .info > .title{transition-delay: 0s !important;}

.bg.bg4{padding: 70px 0 50px 0; height: auto;}
.bg.bg4 .title{margin-bottom: 40px;}
.bg.bg4 .map{height: 300px; border-radius: 20px; margin-bottom: 20px; overflow: hidden;}
.bg.bg4 .map > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.bg.bg4 .link-list{display: flex; flex-direction: row; margin-bottom: 20px; gap: 20px;}
.bg.bg4 .link-list > li{flex: 1;}
.bg.bg4 .link-list > li button{width: 100%;}

.bg.bg4 .info-list > li{display: flex; flex-direction: row; align-items: center; margin-bottom: 20px;}
.bg.bg4 .info-list > li > .mask{display: block; width: 30px; height: 30px; margin-right: 20px;}
.bg.bg4 .info-list > li > .mask.location{mask-image: url('/resources/images/icons/location.png'); -webkit-mask-image: url('/resources/images/icons/location.png'); background-color: var(--color2);}
.bg.bg4 .info-list > li > .mask.phone{mask-image: url('/resources/images/icons/phone.png'); -webkit-mask-image: url('/resources/images/icons/phone.png'); background-color: var(--color2);}
.bg.bg4 .info-list > li > .mask.email{mask-image: url('/resources/images/icons/email.png'); -webkit-mask-image: url('/resources/images/icons/email.png'); background-color: var(--color2);}
.bg.bg4 .button-wrap button{width: 100%; max-width: 300px;}

@media(max-width: 1200px){
	.bg.bg1 .title{font-size: 50px;}
	.bg.bg1 .content{font-size: 20px;}
	
	.bg.bg2 .title{font-size: 30px;}
	.bg.bg2 .sub-title{font-size: 50px;}
	.bg.bg2 .content{font-size: 25px;}
	.bg.bg2 .image-list-wrap{margin-top: 50px;}
	
	.bg-back.back2{height: 300vmax;}
	
	.bg.bg3{padding-top: 0;}
	.bg.bg3 > .bg-div-wrap{width: 300%;}
	
	.bg.bg4{padding: 60px 0 50px 0;}
}

@media(max-width: 700px){
	.bg.bg1 .scroll-down > .scroll-animation{height: 50px;}
	.bg .image-list-wrap > ul > li{width: 300px; height: calc(300px / 10 * 6);}
	
	.bg.bg1 .title{font-size: 40px; text-align: left;}
	
	.bg.bg2 .title{font-size: 25px;}
	.bg.bg2 .sub-title{font-size: 35px;}
	.bg.bg2 .content{font-size: 20px;}
	.bg.bg2 .image-list-wrap{margin-top: 50px;}
	
	.bg.bg3 .bg-div > .info-wrap > .info > .title{font-size: 40px;}
	.bg.bg3 .bg-div > .info-wrap > .info > .content{font-size: 16px;}
	
	.bg.bg4 .link-list{flex-direction: column;}
}

@media (max-height: 750px){
	.bg.bg1 .title{font-size: 40px;}
	
	.bg.bg2{padding: 70px 0 50px 0}
/*	.bg.bg2 > .container{height: calc(var(--vh, 1vh) * 100);}*/
/*	.bg.bg2 > .image-list-wrap{height: calc(var(--vh, 1vh) * 100);}*/
	.bg.bg2 .title{font-size: 25px;}
	.bg.bg2 .sub-title{font-size: 35px;}
	.bg.bg2 .content{font-size: 20px;}
	.bg.bg2 .image-list-wrap{margin-top: 50px;}
}

@media (max-height: 750px) and (orientation: landscape){
	.bg.bg1 .scroll-down{left: 20px; transform: translateX(0);}
	
	.bg.bg3 .bg-div > .info-wrap{padding: 20px;}
	.bg.bg3 .bg-div > .info-wrap > .info{width: 100%; grid-template-columns: repeat(5, 1fr); gap: 20px;}
	.bg.bg3 .bg-div > .info-wrap > .info > .mask{grid-column: 1 / 2; margin-bottom: 0;}
	.bg.bg3 .bg-div > .info-wrap > .info > .title{grid-column: 2 / 6; margin-bottom: 0; font-size: 40px; text-align: left;}
	.bg.bg3 .bg-div > .info-wrap > .info > .content{grid-column: 1 / 6; font-size: 16px; text-align: right;}
	.bg.bg3 .bg-div > .info-wrap > .info > .line-wrap{display: none;}
}