body {  overflow-x: hidden;  background: #000 !important;}
#bg_effect {  position: fixed;  width: 100vmax;  height: 100vmax;  left: 50%;  top: 50%;  background: linear-gradient(to bottom, #000, #111);  transform: translate3d(-50%, -40%, 0);  z-index: -1;}
canvas {  display: block;}
html,body{margin:0;padding:0;width:100%; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.loader{background:#000;height:100vh;overflow:hidden;position:fixed;width:100%;z-index:100;}
.loader marquee{color:#646464; ;font-size:13vw;font-family: 'Pretendard Variable';line-height:200px;margin:0;opacity:0.2;padding:0;text-transform:uppercase; font-weight: 800;}
.loader .intro{left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%, -50%);}
.loader .intro h1{color:#fff; ;font-size:5vw;font-weight:800;text-transform:uppercase;}
.intro-title .letter{display:inline-block;line-height:1em; font-weight:800;}
.container{position: relative;width:100%; padding-bottom:50vh; overflow: hidden;}
.logo{position: relative;width:100%;left:5%;top:25vh;font-family: 'Pretendard Variable';text-transform:uppercase; z-index: 10;color:#fff; box-sizing:border-box;
font-weight:800; font-size:clamp(40px,10vw,80px); letter-spacing:-0.01em; line-height:1.3; filter: blur(0);transition: filter 0.5s ease;}
.container-left{height:100vh;position:absolute;width:50%;}

#brand_list{position: relative; z-index:10;top:35vh;}
.list_wrap{display:flex; flex-wrap:wrap;padding:0 5%; text-align: center; color: #fff;}
.list_wrap article{display:flex;height:380px;
flex-direction: column;align-items: center; justify-content: center;width:50%;
border-right:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2);
box-sizing:border-box; background:rgba(20,20,20,0.6);backdrop-filter: blur(10px); transition:0.5s}
.list_wrap article:hover{background:rgba(50,50,50,0.5);}
.list_wrap article h2{margin-bottom:36px;}
.list_wrap article h2 img{width:50%;}
.list_wrap article:nth-child(1),.list_wrap article:nth-child(2){border-top:1px solid rgba(255,255,255,0.2);}
.list_wrap article:nth-child(1),.list_wrap article:nth-child(3),.list_wrap article:nth-child(5){border-left:1px solid rgba(255,255,255,0.2);}
.list_wrap article p{margin-bottom:16px;padding-top:3%; letter-spacing:-1px;}
.list_wrap article a{display:flex; justify-content:center; align-content:center; align-items:center;}
.list_wrap article a span{letter-spacing:3px; font-weight: 600; margin-right:0.3em; font-size:17px; transition:0.5s;color: #aaa;}
.list_wrap article a .arrow{position: relative;display:flex;width:32px; height:32px; border:1px solid rgba(255,255,255,0.2); border-radius:100%; justify-content:center;  align-items:center; background:transparent; transition:0.5s}
.list_wrap article a .arrow:after{display: none;position: absolute; content:' '; width:30px;height: 30px; border:1px solid rgba(255,255,255,0.3); border-radius:100%; animation:arrow_ani 1.3s 0s infinite}
.list_wrap article a .arrow img{width:50%; transition:0.5s}
.list_wrap article:hover a .arrow{background:#0047c9; border:1px solid #0047c9}
.list_wrap article:hover a span{letter-spacing:6px;color: #fff;}
.list_wrap article:hover a .arrow:after{display: block;}
@keyframes arrow_ani{
	0%{transform:scale(1); opacity:1;}
	100%{transform:scale(2); opacity:0;}
}
.list_wrap article:hover a .arrow img{transform:rotate(-90deg)}


#footer{width: 100%;color: #fff;bottom: 0; transition:0.5s}
#footer>article{padding:10vh 5%; box-sizing:border-box; position: relative; overflow: hidden; text-align:right}
#footer .asia_info .footer_logo img{width: 230px;}
#footer .asia_info ul{display: flex; flex-wrap: wrap; margin:24px 0; position: relative; z-index: 1; flex-direction: row-reverse;}
#footer .asia_info ul li{margin-left:24px; margin-top:12px;}
#footer .asia_info ul li:last-child{width: 100%; }
#footer .asia_info ul li strong{display: block; opacity: 0.5; margin-bottom:0; font-size: 0.8em; line-height:1.1;}
#footer .asia_info ul li span{display: block; font-size: 1em;}
#footer .asia_info cite{font-size: 0.8em; opacity: 0.5; position: relative; z-index: 1;}
#footer .asia_info .ft_icon{position: absolute; top: -20%; right: 15%; animation:ft_ani 6s 0s infinite alternate ease-in;}



@media all and (max-width:800px) {
	.loader .intro h1{font-size:10vw}

	#brand_list{top:18vh;}
	.logo{top:12vh;}
	.container{padding-bottom:35vh;}
	.list_wrap article{width:100%; height:auto;  padding:8.5% 0;border:1px solid rgba(255,255,255,0.2); border-bottom: none;}
	.list_wrap article:last-child{ border-bottom:1px solid rgba(255,255,255,0.2); }

	.list_wrap article h2{margin-bottom:16px;}
	.list_wrap article a span{font-size:14px;}
	.list_wrap article a .arrow{width:24px; height:24px;}
}


@media all and (max-width:540px) {
	.container{padding-bottom:25vh;}
	}