@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/fontawesome/css/all.min.css);
@import url(../libs/aos/aos.css);
@import url(../libs/OwlCarousel/animate.min.css);
@import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css);
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
 index
==============================*/

/* mv ----------*/
#mv {
	position: relative; background: #19D2E2; transition: all 1s ease-out 0s; overflow: hidden; 
	&.bg_4 { background: #19D2E2; }
	&.bg_0 { background: #E86262; }
	&.bg_1 { background: #BBA7FF; }
	&.bg_2 { background: #0F1993; }
	&.bg_3 { background: #FFCC49; }
	& .inner { position: relative; padding: 0; }
	& canvas { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; }
	& .imgs {
		position: relative; z-index: 2; width: 100%; margin: auto;
		& li { width: 100%; height: 80rem; padding-top: 5rem; background-repeat: no-repeat; background-position: right bottom; background-size: contain; text-align: right; }
	}
	& .owl-carousel .owl-stage-outer { overflow: inherit; }
	& .owl-dots { display: none; }
	& .title {
		position: absolute; z-index: 3; bottom: 3rem; left: 0;
		& img { position: relative; z-index: 2; }
		& .wbg { position: absolute; z-index: 1; background-color: rgba(255, 255, 255, 0.45); transform: skew(0, -10.6deg); backdrop-filter: blur(8px); }
		& .wbg1 { top: 11%; left: 0; width: 78%; padding-top: 13%; }
		& .wbg2 { top: 39%; left: 4%; width: 92%; padding-top: 13%; }
		& .wbg3 { top: 73%; left: 3%; width: 97%; padding-top: 6%; }
	}
	@media screen and (max-width:1280px) {
		& .imgs {
			& li { height: 62.5vw; position: relative; right: -8vw;  background-size: auto calc(100% - 4rem); }
		}
		& .title {
			bottom: 2.3vw; width: 62.5%;
		}
	}
	@media screen and (max-width:480px) { /* s */
		& .imgs {
			& li { height: 82.5vw; }
		}
		& .title { width: 77.5%; }
	}
}

/* about ----------*/
#about { position: relative; z-index: 5; background-color: #0F1993; padding: 8rem 0; overflow: hidden; }
#about .bg { position: absolute; z-index: 1; top: 0; display: block; width: 80rem; height: 100%; }
#about .bg1 { left: 0; }
#about .bg2 { right: 0; }
#about .bg canvas { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; }
#about .inner { position: relative; z-index: 2; }
#about ul { display: grid; grid-template-columns: 1fr; gap: 3rem; }
#about ul li { text-align: center; }
#about p { font-size: 1.8rem; font-weight: var(--bold); color: #FFF; text-align: center; margin-top: 7rem; }
#about p strong { font-size: 2rem; color: #FCFF6C; }
@media screen and (max-width:480px) { /* s */
	#about ul { max-width: 70%; margin: auto; }
	#about .bg1 { left: -10vw; }
	#about .bg2 { right: -10vw; }
}

/* conts ----------*/
#conts { padding: 13rem 0; overflow: hidden; }
#conts .cont { position: relative; margin-top: 18rem; padding: 0 8rem; }
#conts .cont:first-child { margin-top: 0; }
#conts .cont::after { content: ""; position: absolute; z-index: 2; top: 50%; width: 100%; height: 72rem; transform-origin: center center; transition: clip-path 0.6s cubic-bezier(0.5, 1, 0.89, 1) 0.3s; }
#conts .cont.aos-animate::after { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); }
#conts .cont .bg { position: absolute; z-index: 1; display: block; width: 80rem; height: 70rem; }
#conts .cont .w { position: relative; z-index: 3; max-width: 65rem; margin: auto; padding: 0 14rem 7rem; border-radius: 0.5rem; box-shadow: 8px 10px 20px 0px rgba(0, 0, 0, 0.25); }
#conts .cont .w .cont_bg { position: absolute; z-index: -1; inset: 0 0 0 -4%; margin: auto; width: 108%; max-width: none; }
#conts .cont .w2 { position: relative; z-index: 3; }
#conts .cont h2 { text-align: center; }
#conts .cont .w h2 { position: relative; top: -3.2rem; }
#conts .cont h3 { margin: 1.8rem 0 4rem; text-align: center; }
#conts .cont p { font-size: 1.8rem; font-weight: var(--bold); text-align: center; }
#conts .cont .conts_links { margin-top: 6rem; }
#conts .cont .conts_links li { margin-top: 1.5rem; }
#conts a.more { position: relative; border-bottom: 2px solid #000; padding: 1.2rem; text-decoration: none; border-radius: 0.5rem; display: block; text-align: center; line-height: 1; color: #FFF; font-size: 1.8rem; font-weight: var(--medium); }
#conts a.more svg.i { position: absolute; top: 0; bottom: 0; right: 2rem; margin: auto; width: 1.7rem; height: auto; aspect-ratio: 1; fill: #FFF; transition: all 0.3s ease-out; }
#conts a.more:hover svg.i { fill: #FFF !important;  right: -0.5rem; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); }
#conts a.more:hover { opacity: 1; background-color: #E86262 !important; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
@media screen and (max-width:800px) {
	#conts .cont .w { padding: 0 7rem 3.5rem; }
}
@media screen and (max-width:620px) {
	#conts .cont .w { padding: 0 3.5rem 3rem; }
}
@media screen and (max-width:480px) { /* s */
	#conts .cont { padding: 0 4rem; }
	#conts .cont .w { padding: 0 3rem 3rem; }
	#conts .cont .conts_links { margin-top: 3rem; }
	#conts a.more svg.i { right: 0.5rem; }


}

/* thanks ----------*/
#thanks { z-index: 4; }
#thanks.cont::after { background-color: #FCFF6C; transform: skew(0, -12deg) translateY(-50%); right: 0; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
#thanks .w { background-color: #FFFFE9; }
#thanks.cont .conts_links li a { background-color: #F9CB4D; }
#thanks.cont .conts_links li a svg.i { fill: #E86262; }
#thanks .bg1 { top: -13rem; right: 0; }
#thanks .bg2 { top: -13rem; left: 0; }

/* confidence ----------*/
#confidence { z-index: 3; }
#confidence.cont::after { background-color: #BBA7FF; transform: skew(0, 12deg) translateY(-50%); left: 0; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
#confidence .w { background-color: #FAF7FF; }
#confidence.cont .conts_links li a { background-color: #7456D9; }
#confidence.cont .conts_links li a svg.i { fill: #FCFF6C; }
#confidence .bg3 { top: -50rem; right: 0; height: 100rem !important; }

/* desired ----------*/
#desired { z-index: 2; }
#desired.cont::after { background-color: #E86262; transform: skew(0, -12deg) translateY(-50%); right: 0; clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
#desired .w { background-color: #FFF4F4; }
#desired.cont .conts_links li a { background-color: #F7B5B5; }
#desired.cont .conts_links li a svg.i { fill: #E86262; }
#desired .bg4 { top: -50rem; left: 0; height: 100rem !important; }
#desired .bg5 { bottom: -50rem; right: 0; height: 100rem !important; }

/* insta ----------*/
#insta { z-index: 3; }
#insta.cont::after { background-color: #19D2E2; transform: skew(0, 12deg) translateY(-50%); left: 0; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
#insta .bg6 { bottom: -50rem; left: 0; height: 100rem !important; }
#insta .instagrams_wrap { position: relative; margin: auto; max-width: 114rem; margin-top: 4rem; }
#insta .instagrams li iframe { width: 100%; min-width: auto !important; }
#insta .instagrams .owl-nav { pointer-events: none; position: absolute; width: calc(100% + 3.7rem); top: calc(50% - 1.85rem); left: -1.85rem; display: flex; }
#insta .instagrams .owl-nav button { pointer-events: all; }
#insta .instagrams .owl-nav .owl-next { margin-left: auto; }
#insta .instagrams .owl-nav .disabled { display: none; }
#insta .instagrams .owl-nav img { width: 3.7rem; height: 3.7rem; }
#insta .instagrams .owl-dots { display: none; }
#insta .btw { text-align: center; margin-top: 5rem; }
#insta .btw a { width: 100%; max-width: 26rem; display: inline-flex; gap: 1rem; align-items: center; justify-content: center; background-color: #FCFF6C; color: #000; font-weight: var(--bold); }
#insta .btw a:hover { background-color: #F31356 !important; color: #FFF; }
#insta .btw a svg.o { stroke: #000; width: 1.2rem; height: auto; aspect-ratio: 1; fill: transparent; }
#insta .btw a:hover svg.o { stroke: #FFF; }
#insta .btw a svg.i { fill: #000; }
@media screen and (max-width:480px) { /* s */
	#insta.cont::after { top: 40%; }
}