@import url("common.css");

/* Intro */
body {animation: bodyNoScroll 1s 4.8s ease forwards; overflow: hidden;}

@keyframes bodyNoScroll {
	0% {overflow: hidden;}
	100% {overflow: initial;}
}

#intro {background: var(--white); width: 100%; height: var(--vh); position: fixed; left: 0; top: 0; z-index: 99999999; display: flex; justify-content: center; align-items: center; pointer-events: none; animation: introTxtOut 1s 5.5s ease forwards;}
#intro .intro_txt {text-align: center; transform: translate(-50%, -100px); opacity: 0; animation: introTxtIn 1s ease forwards, introTxtOut 1s 2.7s ease forwards; position: absolute; top: 0; left: 50%; width: 90%; height: 100%; display: flex; justify-content: center; align-items: center;}
#intro .intro_txt p {opacity: 0.1;}
#intro .intro_txt::before {content: attr(data-txt); font-size:inherit; letter-spacing: inherit; font-weight: inherit; line-height: inherit; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--black); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); animation: introTxtClipIn 1.5s 1s linear forwards;}

#intro .intro_logo {position: absolute; top: 0; left: 50%; display: flex; justify-content: center; opacity: 0; animation: introTxtOut 1s 2.7s ease forwards reverse; width: 90%; height: 100%; transform: translateX(-50%);}

#intro .intro_logo img {max-width: 100%;}

#intro .intro_logo > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: calc((100% - 70px) / 2);}
#intro .intro_logo > div.intro_ci_img {padding-bottom: 10px; animation: moveImg_reverse 1s 4s ease forwards;}
#intro .intro_logo > div.intro_logo_img {opacity: 0; animation: introTxtOut 1s 4s ease forwards reverse, moveImg 1s 4s ease forwards;}

@keyframes introTxtIn {
	0% {opacity: 0; transform: translate(-50%,-100px);}
	100% {opacity: 1; transform: translate(-50%, 0);}
}

@keyframes introTxtClipIn {
	0% {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
	100% {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}

@keyframes introTxtOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes moveImg {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(calc(-100% - 35px), -50%);}
}

@keyframes moveImg_reverse {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(35px, -50%);}
}


/* Visual */
#visual{width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll{width: 100%; height: var(--vh);}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.1); transition: transform 3s ease;}

#visual .roll.action .v_bg .bg {transform: scale(1);}

#visual .v_tab{position: absolute; right: calc((100% - 1590px) / 2); top: 50%; transform: translateY(-50%); z-index: 9999; width: 275px;}
#visual .v_tab ul{width: 100%;}
#visual .v_tab ul li:first-child a {padding-top: 0;}
#visual .v_tab ul li a{display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-bottom: 1px solid var(--white); opacity: 0.5; gap: 10px;}
#visual .v_tab ul li.active a,
#visual .v_tab ul li a:hover {opacity: 1;}

#visual .v_tab ul li .v_icon {flex-shrink: 0;}
#visual .v_tab ul li .v_icon img{width: 100%; height: 100%; object-fit: contain;}
#visual .v_tab ul li .v_tab_txt{letter-spacing: var(--letter-spacing-relaxed); font-weight: 900; color: var(--white);}

#visual .scr_down{position: absolute; left: calc((100% - 1590px) / 2); bottom: 70px; z-index: 9999;}
#visual .scr_down a {display: flex; align-items: center; gap: 10px;}
#visual .scr_down .scr_down_ani{width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; position: relative; display: block; overflow: hidden; transition: inherit;}
#visual .scr_down .scr_down_ani::before {content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--white); position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 20px)); animation: scrDownDot 1.8s ease-in-out infinite;}
#visual .scr_down_txt {color: rgba(255, 255, 255, 0.6); letter-spacing: var(--letter-spacing-relaxed); transition: inherit;}

#visual .scr_down a:hover .scr_down_ani {border-color: var(--white);}
#visual .scr_down a:hover .scr_down_txt {color: var(--white);}


@keyframes scrDownDot {
	0% {transform: translate(-50%, calc(-50% - 20px)); opacity: 0;}
	15% {opacity: 1;}
	50% {transform: translate(-50%, -50%); opacity: 1;}
	85% {opacity: 1;}
	100% {transform: translate(-50%, calc(-50% + 20px)); opacity: 0;}
}

/* About */
#about {background: url('/img/about_bg.png') left top no-repeat; background-size: cover; padding-bottom: 100px;}
#about .about_in {display: flex; justify-content: space-between; align-items: flex-start; gap: 50px;}
#about .about_logo {margin-bottom: 80px;}
#about .about_right {padding-top: 100px;}
#about .about_right h2 {margin-bottom: 10px;}
#about .about_right .icon_wrap {margin-top: 60px; display: flex; justify-content: space-between; gap: 10px;}
#about .about_right .icon_wrap img {max-width: 100%;}
#about .btn_wrap_mo {display: none;}

/* Business */
#business {background: var(--white);}
#business ul {display: flex; gap: 10px;}
#business ul li {width: calc((100% - 820px) / 3); height: 510px; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.8; mix-blend-mode: luminosity; transition: all 0.6s ease; position: relative;}
#business ul li.active {width: 790px; flex-shrink: 0; opacity: 1; mix-blend-mode: normal;}
#business ul li.active .business_card {opacity: 1; transform: translateY(0);}
#business ul li .business_card {width: 100%; height: 100%; padding: 70px 50px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; position: absolute; left: 0; top: 0; width: 790px; height: 510px; transform: translateY(-50px); transition: all 0.6s ease; pointer-events: none;}
#business ul li h3 {font-size: 1.77rem; line-height: 131.25%; letter-spacing: var(--letter-spacing-relaxed); margin-bottom: 10px;}
#business ul li i {color: var(--white); display: flex;}
#business ul li i::before {font-size: 35px; content: '\f3dd';}
#business ul li.active .business_card {pointer-events: auto;}

/* Projects */
#projects .section_tit {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 70px;}
#projects .section_tit h2 {font-weight: 900; letter-spacing: 0.01em; margin-bottom: 10px;}

#projects .projects_list a {display: block; width: 100%; height: 350px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 35px 40px; position: relative;}

#projects .projects_list a::before {content: ''; opacity: 0.6; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(248deg, rgba(0, 0, 0, 0.00) 31.88%, #000 100%);}

#projects .projects_list a .not_hover {position: relative; z-index: 1; transition: all 0.6s ease;}
#projects .projects_list .projects_card_head {display: flex; align-items: center;}
#projects .projects_list .projects_card_head::before {content: ''; width: 1px; height: 15px; background: rgba(255, 255, 255, 0.5); order: 1; margin: 0 12px;}
#projects .projects_list .projects_card_head .catname {font-weight: 700; letter-spacing: var(--letter-spacing-relaxed); order: 0;}
#projects .projects_list .projects_card_head .year {opacity: 0.8; letter-spacing: 0; order: 2;}

#projects .projects_list .hover {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: all 0.6s ease; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#projects .projects_list .hover .hover_head {display: flex; align-items: center;}
#projects .projects_list .hover .hover_head::before {content: ''; width: 1px; height: 15px; background: rgba(255, 255, 255, 0.5); order: 1; margin: 0 12px;}
#projects .projects_list .hover .hover_head .catname {font-weight: 700; letter-spacing: var(--letter-spacing-relaxed); order: 0;}
#projects .projects_list .hover .hover_head .year {opacity: 0.8; letter-spacing: 0; order: 2;}
#projects .projects_list .hover .hover_tit {font-size: 1.4rem; line-height: 131.25%; letter-spacing: var(--letter-spacing-relaxed); margin-top: 10px; text-align:center;}

#projects .projects_list a:hover .not_hover {opacity: 0; pointer-events: none;}
#projects .projects_list a:hover .hover {opacity: 1;}

#projects .btn_wrap_mo {display: none;}

/* Contact */
#contact {background: url('/img/contact_bg.png') no-repeat center center / cover; transition: background 0.6s ease; transform: none !important; opacity: 1 !important;}

#contact .contact_txt {margin-bottom: 60px;}
#contact .contact_txt h2 {font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 20px; transition: color 0.6s ease;}
#contact .contact_txt p {transition: color 0.6s ease;}
#contact .contact_btn {display: flex; gap: 5px; justify-content: center;}
#contact .contact_btn div {max-width: 50%;}
#contact .contact_btn div a {max-width: 100%;}
#contact .contact_btn div:first-child a {background: transparent;}
#contact .contact_btn div:first-child a::before {background: var(--main);}
#contact .contact_btn div:first-child a .btn_txt {color: var(--main);}
#contact .contact_btn div:first-child a .btn_icon {color: var(--main);}
#contact .contact_btn div:first-child a:hover .btn_txt {color: var(--white);}
#contact .contact_btn div:first-child a:hover .btn_icon {color: var(--white);}

body {transition: background 0.6s ease;}
body:has(#contact.aos-animate) {background: var(--black);}

#contact.aos-animate {background-image: url('/img/contact_bg_blk.png')}
#contact.aos-animate .contact_txt h2 {color: var(--white);}
#contact.aos-animate .contact_txt p {color: var(--white);}

/*******************************************************************************
    @media ~1770px
*******************************************************************************/
@media all and (max-width:1770px){
/* Visual */
#visual .v_tab {right: 5%;}
#visual .scr_down {left: 5%;}
}

/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* Business */
#business ul li {width: calc((100% - 730px) / 3);}
#business ul li.active {width: 700px;}
#business ul li .business_card {width: 700px;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* Intro */
#intro .intro_logo img {width: 320px;}

/* About */
#about .about_logo {margin-bottom: 60px;}
#about .about_logo img {width: 300px; height: auto;}
#about .about_right {padding-top: 70px;}

/* Business */
#business ul li {width: calc((100% - 580px) / 3);}
#business ul li.active {width: 550px;}
#business ul li .business_card {width: 550px; padding: 50px 35px;}

/* Projects */
#projects .projects_list {gap: 15px;}
#projects .projects_list a {padding: 25px 30px;}
}

/*******************************************************************************
    @media ~980px
*******************************************************************************/
@media all and (max-width:980px){
/* Intro */
#intro .intro_logo img {width: 280px;}
#intro .intro_logo > div {max-width: calc((100% - 30px) / 2);}

@keyframes moveImg {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(calc(-100% - 15px), -50%);}
}

@keyframes moveImg_reverse {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(15px, -50%);}
}
    
/* Visual */
#visual .scr_down {bottom: 40px;}
#visual .v_tab {left: 50%; transform: translateX(-50%); right: auto; bottom:105px; top: auto; width: 90%;}
#visual .v_tab ul {display: grid; grid-template-columns: repeat(2, 1fr);}
#visual .v_tab ul li a {padding-top: 0; padding: 15px 15px 15px 0 !important; height: 100%;}
#visual .v_tab ul li .v_icon {width: 40px;}

/* About */
#about br {display: none;}
#about .about_logo {margin-bottom: 40px;}
#about .about_logo img {width: 250px}
#about .about_right {padding-top: 50px;}
#about .about_right .icon_wrap {margin-top: 40px;}

/* Business */
#business br {display: none;}
#business ul {display: grid; grid-template-columns: repeat(2, 1fr);}
#business ul li {width: auto !important; height: 300px; opacity: 1; mix-blend-mode: normal;}
#business ul li .business_card {width: 100%; height: 100%; position: static; transform: none; padding: 30px 40px; opacity: 1; gap: 10px;}
#business ul li h2 {font-size: 1.4rem; margin-bottom: 5px;}

/* Projects */
#projects .section_tit {margin-bottom: 45px;}
#projects .projects_list {gap: 10px; grid-template-columns: repeat(2, 1fr);}
#projects .projects_list a {padding: 20px;}

/* Contact */
#contact .contact_txt {margin-bottom: 45px;}
#contact .contact_txt h2 {margin-bottom: 12px;}

}

/*******************************************************************************
    @media ~768px
*******************************************************************************/
@media all and (max-width:768px){
    
}

/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Intro */
#intro .intro_logo > div {max-width: calc((100% - 18px) / 2);}

@keyframes moveImg {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(calc(-100% - 9px), -50%);}
}

@keyframes moveImg_reverse {
    0% {transform: translate(-50%, -50%);}
	100% {transform: translate(9px, -50%);}
}    

/* Visual */
#visual .v_tab {bottom: 70px;}
#visual .scr_down {bottom: 20px;}
#visual .scr_down .scr_down_ani {width: 30px; height: 30px;}
#visual .v_tab ul li .v_icon {width: 30px;}

/* About */
#about .about_in {flex-direction: column; gap: 40px;}
#about .about_logo {margin-bottom: 0;}
#about .about_right {padding-top: 0;}
#about .about_right .icon_wrap {margin-top: 30px;}
#about .about_right .icon_wrap .icon_item img {height: 60px;}
#about .btn_wrap {display: none;}
#about .btn_wrap_mo {display: block; margin-top: 40px;}

/* Business */
#business ul {grid-template-columns: 1fr;}
#business ul li {height: 200px;}
#business ul li .business_card {flex-direction: row; align-items: center;}

/* Projects */
#projects .section_tit {justify-content: center; text-align: center; margin-bottom: 30px;}
#projects .section_tit h2 {margin-bottom: 5px;}
#projects .section_tit .btn_wrap {display: none;}
#projects .projects_list {grid-template-columns: 1fr;}
#projects .projects_list a {aspect-ratio: 380 / 260; height: auto;}
#projects .projects_list li:nth-child(n + 5) {display: none;}

#projects .btn_wrap_mo {display: flex; justify-content: center; margin-top: 30px;}

/* Contact */
#contact .contact_txt {margin-bottom: 30px;}
#contact .contact_txt h2 {margin-bottom: 5px;}
}

/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* About */
#about .about_right .icon_wrap .icon_item img {height: 40px;} 
}

/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){
    
}