@import url('https://fonts.cdnfonts.com/css/avantgarde-bk-bt-2');
@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/*    selector { cursor: none !important; }*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, button, time, mark, audio, video, a, textarea, input{font-family: 'Sweet';}
body{background: #FFFBF7 !important}

#smoother-content{background: #F8F2EF}

.wrapper {
    position: relative;
    height: 150vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation-fill-mode: forwards;
	margin-top: -230px
}
.aw_obj_wrap {
    width: 340px;
    height: 578px;
    z-index: 2;
    transform-style: preserve-3d;
    transform-origin: center center;
    transform: translateZ(-250px) ;
	perspective: 8000px
/*    transform: perspective(2000px) translateZ(-250px) ;*/
}

#main .card {
    position: absolute;
    width: 340px;
    height: 508px;
}


/* 왼쪽 그룹 (1~6번) */
#main .card.prev8 { transform: rotateY(-221.5403deg) translateZ(850px) translateY(-1200px);  opacity: 0;transition: 3s linear}
#main .card.prev7 { transform: rotateY(-193.8461deg) translateZ(850px) translateY(-1050px);  opacity: 0.2;transition: 3s linear}
#main .card.prev6 { transform: rotateY(-166.1538deg) translateZ(850px) translateY(-900px);  opacity: 0.3;transition: 3s linear}
#main .card.prev5 { transform: rotateY(-138.4615deg) translateZ(850px) translateY(-750px);  opacity: 0.7;transition: 3s linear}
#main .card.prev4 { transform: rotateY(-110.7692deg) translateZ(850px) translateY(-600px);  opacity: 1;transition: 3s linear}
#main .card.prev3 { transform: rotateY(-83.0769deg)  translateZ(850px) translateY(-450px);  opacity: 1;transition: 3s linear}
#main .card.prev2 { transform: rotateY(-55.3846deg)  translateZ(850px) translateY(-300px);  opacity: 1;transition: 3s linear}
#main .card.prev1 { transform: rotateY(-27.6923deg)  translateZ(850px) translateY(-150px);  opacity: 1;transition: 3s linear}
#main .card{opacity: 0}

/* 가운데 (7번) */
#main .card.on { transform: rotateY(0deg) translateZ(850px) translateY(0px); opacity: 1;transition: 3s linear}
/* 오른쪽 그룹 (8~13번) */
#main .card.next1  { transform: rotateY(27.6923deg)  translateZ(850px) translateY(150px);  opacity: 1;transition: 3s linear}
#main .card.next2  { transform: rotateY(55.3846deg)  translateZ(850px) translateY(300px);  opacity: 1;transition: 3s linear}
#main .card.next3 { transform: rotateY(83.0769deg)  translateZ(850px) translateY(450px);  opacity: 1;transition: 3s linear}
#main .card.next4 { transform: rotateY(110.7692deg) translateZ(850px) translateY(600px);  opacity: 1;transition: 3s linear}
#main .card.next5 { transform: rotateY(138.4615deg) translateZ(850px) translateY(750px);  opacity: 0.7;transition: 3s linear}
#main .card.next6 { transform: rotateY(166.1538deg) translateZ(850px) translateY(900px);  opacity: 0.3;transition: 3s linear}
#main .card.next7 { transform: rotateY(193.8461deg) translateZ(850px) translateY(1050px);  opacity: 0.2;transition: 3s linear}
#main .card.next8 { transform: rotateY(221.5403deg) translateZ(850px) translateY(1200px);  opacity: 0.0;transition: 3s linear}
#award .obg_w{opacity: 0;transition: 1.2s;transition-delay: 4s}
#award.on .obg_w{opacity: 1}
#award  .obj{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: absolute}
#award  .obj .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #FFFBF7;opacity: 0}
#award  .obj .video video{height: 626px;mix-blend-mode: multiply}
#award  .obj img{opacity: 1;transition: 2s;transform: translateY(0);filter: blur(0px);width: 368px}

.award .img_w{padding: 20px;background: linear-gradient(-45deg,rgba(255,231,220,0),rgba(255,231,220,0.7));  backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 20px;position: relative}
.award .img_w .prize_list{position: absolute;top: 30px;left: 30px;}
.award .img_w .prize_list ul{display: flex;flex-direction: column;gap: 8px;}
.award .img_w .prize_list ul li{display: flex;gap: 4px;font-size: 16px;color: #FFFFFF;font-weight: 500;border: 1px solid #ffffff25;align-items: center;padding-left: 14px;padding-right: 28px;border-radius: 23px;background: rgba(0,0,0,0.20);backdrop-filter: blur(20px)}
.award .img_w .prize_list ul li i img{display: block}
.award .img_w .img{border-radius: 10px;overflow: hidden}
.award .img_w .img img{display: block;transition: 0.5s;width: 100%}
.award .img_w:hover .img img{transform: scale(1.05)}
.award .txt_wrap{padding-left: 20px;padding-top: 18px;}
.award .txt_wrap strong{display: block;font-family: "the-seasons", sans-serif;font-size: 28px;color: #51341B;line-height: 28px;margin-bottom: 10px;}
.object {
    font-size: 24px;
    color: white;
    font-weight: bold;
    text-align: center;
    position: absolute; /* 원 안에서 고정 */
}  
    
@keyframes ani444 {
    0%{ transform: rotateY(0deg);}
    100%{ transform: rotateY(360deg);}
}
    

#smoother-content{background: none}
#main{overflow: hidden;width: 100%;}
#cursor{position: fixed;z-index: 899;pointer-events: none;  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: none !important; /* 반드시 제거 */
  animation: none !important;z-index: 999999}
#cursor i{display: block;position: absolute;transform: translate(-50%,-50%) scale(0.5);opacity: 0;transition: 0.3s}
#cursor i img{display: block}
#cursor i {transform: scale(0.5);opacity: 0;transition: 0.3s}
#cursor.act i {transform: translate(-65%,-65%) scale(1);opacity: 1}
#cursor span{display: block;top: 0;left: 0;transform: translate(-50%,-50%) scale(0.5);opacity: 0;transition: 0.3s;position: absolute}
#cursor.act2 span{transform: translate(-65%,-65%) scale(1);opacity: 1;}
#cursor div{transition: 0.0s}
#cursor img{display: block;top: 15px;left: 15px;position: relative}
#cursor > img{display: block;position: relative;z-index: 5}
.main_vis {position: relative;background: #FFFBF7;height: 100vh}
.main_vis .pin-spacer{pointer-events: none}
.main_vis .element div{border-radius: 0px;overflow: hidden}
.main_vis .element div img{display: block}
.main_vis .video_w{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: multiply;;opacity: 0}
.main_vis .video_w video{width: 1000px}
.element_video{mix-blend-mode: multiply;}
.copy_title{position: absolute;width: 100%;height: 100%;top: 0;left: 0; z-index: 20;pointer-events: none}
.copy_title > div{width: 100%;height: 100%}
.copy_title strong{display: block;text-align: center;font-size: 200px;line-height: 1.2;color: #FF5700; font-family: "amandine", sans-serif;font-weight: 300;position: relative}
.copy_title strong i{position: absolute;top: 0;left: 0px;opacity: 0}
.copy_title .copy{display: flex;width: 1119.2px}
.copy_title .copy02{width: 953.2px}
.copy_title .copy03{width: 898.21px}
.copy_title .copy > div{overflow: hidden;width: 20%}
.copy_title .copy > div strong{transition: 1s;filter: blur(5px)}
.copy_title .copy01 > div strong{width: 1119.2px;}
.copy_title .copy02 > div strong{width: 953.2px;}
.copy_title .copy03 > div strong{width: 898.21px;}
.copy_title .copy03 > div strong img{display: block;clip-path: inset(0.3px)}
.copy_title .copy > div.typo01 strong{transform: translateX(-20%)}
.copy_title .copy > div.typo02 strong{transform: translateX(-30%)}
.copy_title .copy > div.typo03 strong{transform: translateX(-60%)}
.copy_title .copy > div.typo04 strong{transform: translateX(-40%)}
.copy_title .copy > div.typo05 strong{transform: translateX(-60%)}
.copy_title .copy > div .ho{position: absolute;top: 0;left: 0;transition: 0.7s;opacity: 0;transition-delay: 5s}
.on .copy_title .copy > div .ho{opacity: 1}
.copy_title .copy01 {opacity: 0;transition: 0.3s}
.copy_title .copy01.on {opacity:1}
.copy_title .copy > div{transition: 1s}
.copy_title .copy.on > div.typo01 strong{transform: translateX(-0%)}
.copy_title .copy.on > div.typo02 strong{transform: translateX(-20%)}
.copy_title .copy.on > div.typo03 strong{transform: translateX(-40%)}
.copy_title .copy.on > div.typo04 strong{transform: translateX(-60%)}
.copy_title .copy.on > div.typo05 strong{transform: translateX(-80%)}
.copy_title .copy.on > div strong{filter: blur(0px)}
.copy_title .copy01{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0}
.copy_title .copy02{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0}
.copy_title .copy03{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0}
.copy_title .copy{transition: 0.8s}
.copy_title .copy.on{opacity: 1}
.copy_title .copy.on2{opacity: 0}
#contact .bg01, #contact .bg02{display: none}
.main_vis .element div{opacity: 0}
.main_vis.act .element div{opacity: 1;transition: 0.3s;transition-delay: 0.3s}
.main_vis .copy_title .copy01 > div:nth-child(3) {margin-left: -0.7px}
.main_vis .copy_title .copy02 > div:nth-child(4) {margin-left: -1px}

html{background:#F8F2EF }
#award .obj{top: 0}
.pin-spacer:nth-child(1){mix-blend-mode: darken;z-index: 10;top: 0;pointer-events: none}
#award .obj1{z-index: 0}
#main{background:#F8F2EF }
.obj2{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: absolute;z-index: 5}
.obj2 .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #F8F2EF;opacity: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
.obj2 .video video{height: 626px;mix-blend-mode: multiply}

#award .award_wrap .award_list .obj{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: relative}
#award .award_wrap .award_list .obj{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: relative}
#award .award_wrap .award_list .obj .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #F8F2EF;opacity: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#award .award_wrap .award_list .obj .video video{height: 626px;mix-blend-mode: multiply}


/* new - 250924 */

.aw_content  .aw_tr{position: relative;z-index: 20;display: flex;justify-content: center;mix-blend-mode: multiply}

.aw_content .award_title{z-index: 12;display: flex;justify-content: center;flex-direction: column;align-items: center;position: relative}
.aw_content .award_title .aw_list ul{display: flex;align-items: center;justify-content: flex-end;gap: 6px;}
/*.aw_content .award_title .aw_list ul li{opacity: 0;filter: blur(20px);transform: translateY(30px)}*/
.aw_content .award_title .aw_list ul li i{display: block;break-after: 6px;border: 1px solid #ffffff30;border-radius: 6px;background: rgba(255,255,255,0.7);backdrop-filter: blur(20px)}
.aw_content .award_title .aw_list ul li i img{display: block;width: 45px;}
/*background: linear-gradient(-45deg,rgba(255,231,220,0.5),rgba(255,231,220,0.9)); */
.aw_content .cir i svg{display: block;width: 230px;height: auto;}
.aw_content .cir div{width: 230px;height: 60px;background: linear-gradient(-45deg,rgba(255,231,220,0.5),rgba(255,231,220,0.9));border: 1px solid #fff;border-radius: 60px;display: flex;align-items: center;justify-content: center;gap: 10px;}
.aw_content .title {;position: relative;z-index: 5}
/*mix-blend-mode: difference*/
.aw_content .title strong *{font-family: inherit}
.aw_content .title strong{font-size: 80px;color: #51341B;font-family: "amandine", sans-serif;font-weight: 400;display: block;text-align: center;}
.aw_content .cir{display: flex;justify-content: center;position: relative;z-index: 5}
.aw_content .cir div strong{color: #51341B;font-size: 18px;font-family: "amandine", sans-serif;font-weight: 400;}
.aw_content .cir div span{display: block;line-height: 35px;width: 60px;text-align: center;background: #F37C07;border-radius: 17px;font-size: 20px;color: #FFFFFF;    font-family: "amandine", sans-serif;}
.aw_content .txt{position: absolute;right: 130px;top: -80px;z-index: 15;flex-direction: column;display: flex;gap: 8px}
.aw_content .info_s_text01{position: absolute;left: 70%;bottom: -80px;z-index: 15;}
.aw_content .txt div{position: relative}
.aw_content .txt p{font-size: 14px;color: #51341B}
.aw_content .txt p.on{position: absolute;    background: linear-gradient(to right, #753C00, #753C00);
    color: #fff;
    clip-path: polygon(0% 0%, 0% 0%, 0 100%, 0% 100%);
    white-space: nowrap;top: 0;left: 0}



.aw_content{position: relative;position: relative}
.aw_content .bg01{position: absolute;width: 100%;height: 10%;background: linear-gradient(to top, #FFFBF700, #FFFBF7);position: absolute;top: 0;left: 0;z-index: 10}
.aw_content .bg02{position: absolute;width: 100%;height: 10%;background: linear-gradient(to bottom, #FFFBF700, #FFFBF7);position: absolute;bottom: 0;bottom: 0;z-index: 10}
.aw_content .video{mix-blend-mode: multiply;position: relative;z-index: 15}
.aw_content .video video{width: 700px;display: block;margin: 0 auto}
#logo img{width: 160px}
#aw #aw_w{height: 200vh;background-color: #000;}
.vis_w_bg{display: flex;align-items: center;justify-content: center;position: fixed;}
.copy_title{z-index: 9999;}
.main_vis{z-index: 10}
.main_vis #container{position: relative;z-index: 10;}
.main_vis.main_vis01{position: absolute;width: 100%;height: 100vh;z-index:999;background: none}

#main #header #logo{opacity: 0}
.main_vis .bg{opacity: 0;transition: 1.3s;transition-delay: 2.3s;overflow: hidden}
.main_vis.on .bg{opacity: 1}
.main_vis #container .element div img{width: 600px}
.main_vis .bg{position: absolute;width: 100%;height:100%;background: url(/img/main/vis_background.png);background-position: -45% 280%; top: 0;left: 0}

.main_vis .copy_title .copy > div{padding-bottom: 30px;;}
.main_vis .copy_title .copy01 > div{margin-left: -0.7px}
.main_vis .copy_text{display: flex;justify-content: center;font-size: 18px;color: #482513;position: absolute;top: 50%;transform: translateY(100px);width: 100%}
.main_vis .copy_text div{position: relative;}
.main_vis .copy_text div p{filter: blur(20px);opacity: 0;;letter-spacing: 0px;}
.main_vis .copy_text.on div p:nth-child(1){filter: blur(0);opacity: 1;letter-spacing: 0;transition: 1s}
.main_vis .copy_text div p:nth-child(2){position: absolute;top: 0;left: 0;background: linear-gradient(to right, #753C00, #753C00);color: #fff;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);white-space: nowrap;filter: blur(0);opacity: 1;letter-spacing: 0;}
.main_vis .element:nth-child(2){z-index: 15;}
    .copy_title strong i{    opacity: 0;
    transition: 0.3s;
    transition-delay: 2.3s;
}
.copy_title strong i svg{display: block}
.on .copy_title strong i{opacity: 1}

#project_list {padding-top: 100px;padding-bottom: 60px;background: #FFFBF7;position: relative;z-index: 15;margin-top: -1px}
#project_list .pro{padding: 0 60px;perspective: 4000px}
#project_list .pro > div{display: flex;justify-content: space-between;padding: 30px 0;border-bottom: 1px solid #C3B9B1;transform: rotateX(30deg) translateY(50%);opacity: 0}
#project_list .pro:last-child > div{border-bottom: none}
#project_list .pro > div .right > div{width: 1000px;display: block}
#project_list .pro > div .right video{width: calc(100% + 1px) !important;display: block}
#project_list .pro > div .right img{width: calc(100% ) !important;display: block}
#project_list .pro > div .left{display: flex;flex-direction: column;justify-content: space-between;height: 485px}
#project_list .pro > div .left > div{display: flex;justify-content: space-between;flex-direction: column;height: 100%;padding: 20px 0}
#project_list .pro > div .info p{display: flex;align-items: center;font-size: 18px;color: #482513;gap: 12px}
#project_list .pro > div .info p i{display: block;background: #A38F84;width: 1px;height: 14px;}
#project_list .pro > div .info strong{font-size: 70px;color: #482513;font-weight: 400;    font-family: "amandine", sans-serif;}
#project_list .pro > div .right {height: 505px;overflow: hidden;}
#project_list .pro > div .right .vi_img_w{position: relative;transition: 8s;}
#project_list .info_s_text{padding-left: 160px;margin-bottom: 60px;}
.info_s_text{z-index: 15;flex-direction: column;display: flex;gap: 6px;}
.info_s_text div{position: relative}
.info_s_text p{font-size: 14px;color: #51341B}
.info_s_text p.on{position: absolute;    background: linear-gradient(to right, #753C00, #753C00);
    color: #fff;
    clip-path: polygon(0% 0%, 0% 0%, 0 100%, 0% 100%);
    white-space: nowrap;top: 0;left: 0}

#beyond_content{background: #FFFBF7}
#beyond_content .b_img_content{transform: scale(0.4)}
#beyond_content .b_img_content .img02{clip-path: polygon(0%  100%, 100% 100%, 100% 100%, 0% 100%);}
#beyond_content .b_img_content .img03{clip-path: polygon(0%  100%, 100% 100%, 100% 100%, 0% 100%);}
#beyond_content .b_img_content .img04{clip-path: polygon(0%  100%, 100% 100%, 100% 100%, 0% 100%);}
#beyond_content .b_img_content .img05{clip-path: polygon(0%  100%, 100% 100%, 100% 100%, 0% 100%);}
#beyond_content{position: relative;width: 100%;height: 100vh}
#beyond_content .b_title{position: absolute;top: 200px;left: 60px;z-index: 11}
#beyond_content .b_title strong{font-size: 80px;color: #51341B;font-family: "amandine", sans-serif;font-weight: 400;display: block;margin-bottom: 50px}

#beyond_content .b_img_content{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
#beyond_content .b_img_content .img{position: absolute;top: 0;left: 0}
#beyond_content .b_img_content .img01{position: relative}
#we_service2{background: #FF5700;height: 2216px;position: relative}
#we_service2 .info_s_text{position: absolute;top: 50%;left: 50%}
#we_service2 .info_s_text01{margin-left: -366px;margin-top: -813px}
#we_service2 .info_s_text02{margin-left: 550px;margin-top: -93px}
#we_service2 .info_s_text03{margin-left: 358px;margin-top: 873px}
#we_service2 .info_s_text04{margin-left: -772px;margin-top: 743px}
#we_service2 .info_s_text p{color: #fff}
#we_service2 .icon{position: absolute;top: 50%;left: 50%}
#we_service2 .icon01{margin-top: -931px;margin-left: -41px}
#we_service2 .icon02{margin-top: -672px;margin-left: -487px}
#we_service2 .icon03{margin-top: -168px;margin-left: 708px}
#we_service2 .icon04{margin-top: 60px;margin-left: 125px}
#we_service2 .icon05{margin-top: 420px;margin-left: -675px}
#we_service2 .icon06{margin-top: 720px;margin-left: 114px}
#we_service2 .ser {position: absolute;top: 50%;left: 50%}
#we_service2 .ser .wr:after{content: '';display: block;width: 100%;height: 100%;background: url(/img/main/border.png);display: block;top: 0;left: 0;z-index: 15;position: absolute;background-size: 100% 100%;}
#we_service2 .ser .wr:hover:before{transform: translateX(100%)}
#we_service2 .ser .wr.wr_img .txt2 strong:hover em{transform: translateX(100%)}
#we_service2 .ser .wr{background: linear-gradient(-205deg, rgba(255,204,0,0.2), rgba(255,204,0,0));box-shadow: 0 20px 40px #ffffff50 inset;position: relative;padding-top: 100%;width: 300px;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-radius: 10px;position: relative;overflow: hidden}
#we_service2 .ser .wr:before{content: '';display: block;position: absolute;top: 0;left: 0; width: 100%;height: 100%;background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));transform: translateX(-100%);transition: 1s;mix-blend-mode: color-burn}
#we_service2 .ser .wr.wr_img .txt2 strong {overflow: hidden}
#we_service2 .ser .wr.wr_img .txt2 strong em{content: '';display: block;position: absolute;top: 0;left: 0; width: 100%;height: 100%;background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));transform: translateX(-100%);transition: 1s;mix-blend-mode: color-burn}
#we_service2 .ser .wr.wr_img .num{display: none;}
#we_service2 .ser .wr .num{position: absolute;top: 10px;left: 10px}
#we_service2 .ser .wr .num i{font-size: 12px;color: #FFFFFF}
#we_service2 .ser .wr .txt{position: absolute;top: 50%;left:0;width: 100%;transform: translateY(-50%);text-align: center;}
#we_service2 .ser .wr .txt2 strong{color: #FFFFFF;font-size: 20px;}
#we_service2 .ser .wr .txt strong{color: #FFFFFF;font-size: 18px}
#we_service2 .ser .wr.wr_img{padding-top: 0;border-radius: 10px;overflow: hidden}
#we_service2 .ser.ser04 .wr.wr_img .img{padding-top: 100%;width: 100%;position: relative}
#we_service2 .ser.ser04 .wr.wr_img .img .video{position: absolute;bottom: 0;left: -36%;height: 100%}
#we_service2 .ser.ser04 .wr.wr_img .img .video video{height: 100%}
#we_service2 .ser .wr.wr_img .img{padding-top: 100%;width: 100%;position: relative}
#we_service2 .ser .wr.wr_img .img .video{position: absolute;bottom: 0;left: -15%;height: 100%}
#we_service2 .ser .wr.wr_img .img .video video{height: 100%}
#we_service2 .ser .wr.wr_img:after{display: none}
#we_service2 .ser .wr.wr_img img{display: block}
#we_service2 .ser .wr.wr_img .img .video.video1{width: 100%;position: absolute;top: 0;left: 0}
#we_service2 .ser .wr.wr_img .video1 img{width: 100%}
#we_service2 .ser .wr .txt2{position: absolute;bottom: 0;left: 0;padding: 15px;background: #FF5700;;border-radius: 0 10px 0 0;padding-left: 0;padding-right: 0}
#we_service2 .ser .wr .txt2:before{content: '';display: block;width: 11px;height: 11px;background: url(/img/main/ser_dot.png);position: absolute;bottom: 0;right: -11px}
#we_service2 .ser .wr.wr_img .txt2{padding: 7px;padding-bottom: 0;padding-left: 0}
#we_service2 .ser .wr.wr_img .txt2 strong{display: block;padding: 0 30px;background: linear-gradient(-205deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0));box-shadow: 0 10px 20px #ffffff50 inset;position: relative;backdrop-filter: blur(10px);border-radius: 10px;position: relative;line-height: 60px}
#we_service2 .ser .wr.wr_img .txt2 strong i{position: absolute;width: calc(100% - 20px);height: 1px;background: #fff;position: absolute;top: 0;left: 10px}
#we_service2 .ser .wr.wr_img .txt2 strong:before{content: '';display: block;width: 10px;height: 100%;background: url(/img/main/t_line1.png) no-repeat;top: 0;left: 0;position: absolute}
#we_service2 .ser .wr.wr_img .txt2 strong:after{content: '';display: block;width: 10px;height: 100%;background: url(/img/main/t_line2.png) no-repeat;top: 0;right: 0;position: absolute;}
#we_service2 .ser01{margin-left: -650px;margin-top: -892px;}
#we_service2 .ser02{margin-left: -440px;margin-top: -676px}
#we_service2 .ser03{margin-left: -900px;margin-top: -426px}
#we_service2 .ser04{margin-left: 350px;margin-top: -750px}
#we_service2 .ser05{margin-left: -300px;margin-top: 47px}
#we_service2 .ser06{margin-left: 410px;margin-top: 494px}
#we_service2 .ser07{margin-left: -777px;margin-top: 274px}
#we_service2 .ser08{margin-left: -470px;margin-top: 44px}
#we_service2 .ser09{margin-left: -20px;margin-top: -176px}
#we_service2 .ser10{margin-left: 310px;margin-top: 44px}
#we_service2 .ser11{margin-left: 180px;margin-top: -360px}
#we_service2 .ser12{margin-left: 700px;margin-top: 284px}
#we_service2 .ser01 .wr{width: 200px}
#we_service2 .ser02 .wr{width: 240px}
#we_service2 .ser03 .wr{width: 450px}
#we_service2 .ser04 .wr{width: 550px}
#we_service2 .ser05 .wr{width: 600px}
#we_service2 .ser06 .wr{width: 200px}
#we_service2 .ser07 .wr{width: 200px}
#we_service2 .ser08 .wr{width: 160px}
#we_service2 .ser09 .wr{width: 200px}
#we_service2 .ser10 .wr{width: 240px}
#we_service2 .ser11 .wr{width: 160px}
#we_service2 .ser12 .wr{width: 200px}
#we_service2 .ser{opacity: 1;perspective: 500px}
#we_service2 .ser02 .wr{transform: rotate3d(4, -4, -3, 45deg);}
#we_service2 .ser01 .wr{transform: rotate3d(24, 26, -23, 65deg);}
#we_service2 .ser03 .wr{transform: rotate3d(14, 126, -53, 35deg)}
#we_service2 .ser04 .wr{transform: rotate3d(10, -80, 53, 5deg)}
#we_service2 .ser05 .wr{transform: rotate3d(10, 10, -10, 25deg);}
#we_service2 .ser06 .wr{transform: rotate3d(50, -50, 30, 35deg);}
#we_service2 .ser07 .wr{transform:rotate3d(-50, -50, 30, 35deg);}
#we_service2 .ser08 .wr{transform: rotate3d(50, -50, -30, 35deg);}
#we_service2 .ser09 .wr{transform: rotate3d(50, -50, 30, 23deg);}
#we_service2 .ser10 .wr{transform: rotate3d(10, 10, -10, 25deg);}
#we_service2 .ser12 .wr{transform: rotate3d(10, 10, -10, 25deg);}
#we_service2 .ser11 .wr{transform: rotate3d(24, 26, -23, 65deg)}
#we_service2 .ser .wr{transition: 1s;opacity: 0}
#we_service2 .ser02 .wr{transition-delay: 0.2s}
#we_service2 .ser03 .wr{transition-delay: 0.4s}
#we_service2 .ser04 .wr{transition-delay: 0.6s}
#we_service2 .ser05 .wr{transition-delay: 0.8s}
#we_service2 .ser06 .wr{transition-delay: 1.0s}
#we_service2 .ser07 .wr{transition-delay: 1.2s}
#we_service2 .ser08 .wr{transition-delay: 1.4s}
#we_service2 .ser09 .wr{transition-delay: 1.8s}
#we_service2 .ser10 .wr{transition-delay: 2s}
#we_service2 .ser12 .wr{transition-delay: 2.2s}
#we_service2.on .ser .wr{opacity: 1;transform: rotate3d(0, 0, 0, 0deg)}
#we_service2 .info_s_text p.on{background: #fff;color: #FF5700}

.l_logo{position: fixed;z-index: 99;top: 50%;transform: translateY(-50%);left: 30px;}
.quick{position: fixed;z-index: 99;bottom: 30px;right: 30px;display: flex;flex-direction: column;align-items: flex-end;gap: 33.33px}
.quick ul{display: flex;gap: 10px;}
.quick ul li a{display: flex;width: 200px;height: 60px;box-sizing: border-box;border-radius: 30px;}
.quick ul li a.phone{display: flex;align-items: center;border: 1px solid #FEB56D70;border-radius: 30px;padding-left: 10px;gap: 14px;    font-family: 'AvantGarde Bk BT', sans-serif;background: rgba(248,242,239,1);backdrop-filter: blur(20px)}
.quick ul li a.phone span{font-size: 17px;color: #4A3E25;}
.quick ul li a.contact{border-radius: 30px;overflow: hidden;position: relative}
.quick ul li a.contact:before{content: '';display: block;width: 200%;height: 100%;background: linear-gradient(to left, #FF9900, #E7420E, #FF9900);position: absolute;right: 0;top: 0;transition: 0.4s}
.quick ul li:hover a.contact:before{transform: translateX(50%)}
.quick ul li a.contact div{height: 100%;display: flex;width: 100%;align-items: center;padding: 0 30px;gap: 14px;justify-content: space-between;position: relative;z-index: 2}
.quick ul li a.contact div strong{font-size: 20px;color: #FFFFFF;    font-family: 'AvantGarde Bk BT', sans-serif;font-weight: 400}
.quick ul li a.contact div{height: 100%;display: flex;align-items: center;width: 100%;align-items: center;border-radius: 30px;padding: 0 30px}
.btn_top{ position: fixed; right: 35px; bottom: 210px; z-index: 99; display: none; }
.btn_top button{width: 40px;height: 40px;position: relative}
.btn_top button .bg{display: block;width: 50px;height: 50px;border-radius: 50%;border: 1px solid #C6BAB0;padding: 5px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 0.7s}
.btn_top button:hover .bg{width: 58px;height: 58px;}
.btn_top button .bg i{display: block;width: 100%;height: 100%;background: #FFFFFF;border-radius: 50%;box-shadow: 0 0 20px rgba(81,52,27,0.25)}
.btn_top button > div{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 5}
.btn_top button > div > div{display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;transition: 0.7s}
.btn_top button:hover > div > div{transform: translateY(-100%)}
#scroll{position: fixed;height: 4px;width: 100%; bottom: 0;left: 0;z-index: 99;background: #E4E4E4}
#scroll .sandglass{position: absolute;bottom: 55px;left: 45px;}
#scroll .sandglass img{display: block}
#scroll .sandglass .sand{position: absolute;top: 0;left: 0}
#scroll .sandglass .sand_top{left: 14%;top: 10%;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#scroll .sandglass .sand_bottom{left: 14%;top: 54%;clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
#scroll i{position: absolute;top: 0;left: 0;position: absolute;top: 0;left: 0;width: 0%;height: 100%;background: linear-gradient(to right, #FFB300, #E7420E)}
#scroll span{position: absolute;bottom: 52px;left: 72.4px;font-size: 40px;color: #51341B;    font-family: "the-seasons", sans-serif;}

#main #unique{padding-top: 154px;position: relative;background: #FFFBF7}
#main #unique .gl_wrap01{left: 50%;margin-left: -677px;top: 0}
#main #unique .gl_wrap02{left: 50%;margin-left: 218px;top: 562px}
#main #unique .gl_wrap .gl_in .gl{position: relative}
#main #unique .gl_wrap01 .gl_in .gl01{top: 176px;}
#main #unique .gl_wrap01 .gl_in .gl02{top: 105px;}
#main #unique .gl_wrap01 .gl_in .gl04{top: 50px;}
#main #unique .gl_wrap01 .gl_in .gl05{top: 91px;}
#main #unique .gl_wrap01 .gl_in .gl01 i{height: 128px;}
#main #unique .gl_wrap01 .gl_in .gl02 i{height: 172px;}
#main #unique .gl_wrap01 .gl_in .gl03 i{height: 351px;}
#main #unique .gl_wrap01 .gl_in .gl04 i{height: 244px;}
#main #unique .gl_wrap01 .gl_in .gl05 i{height: 132px;}
#main #unique .gl_wrap02 .gl_in .gl01 i{height: 172px;}
#main #unique .gl_wrap02 .gl_in .gl02 i{height: 351px;}
#main #unique .gl_wrap02 .gl_in .gl03 i{height: 244px;}
#main #unique .gl_wrap02 .gl_in .gl01{top: 105px;}
#main #unique .gl_wrap02 .gl_in .gl03{top: 50px;}

#main #unique .gl_wrap03{bottom: -290px;left: -139px;z-index: 3}
#main #unique .gl_wrap03 .gl_in .gl01 i{height: 408px;}
#main #unique .gl_wrap03 .gl_in .gl02 i{height: 254px;}
#main #unique .gl_wrap03 .gl_in .gl03 i{height: 314px;}
#main #unique .gl_wrap03 .gl_in .gl04 i{height: 381px;}
#main #unique .gl_wrap03 .gl_in .gl05 i{height: 252px;}
#main #unique .gl_wrap03 .gl_in .gl06 i{height: 128px;}
#main #unique .gl_wrap03 .gl_in .gl02{top: 88px;}
#main #unique .gl_wrap03 .gl_in .gl03{top: 73px;}
#main #unique .gl_wrap03 .gl_in .gl04{top: 43px;}
#main #unique .gl_wrap03 .gl_in .gl05{top: 123px;}
#main #unique .gl_wrap03 .gl_in .gl06{top: 259px;}

#main #unique .gl_wrap04{top: -101px;right: 396px;z-index: 3}
#main #unique .gl_wrap04 .gl_in .gl01 i{height: 128px;}
#main #unique .gl_wrap04 .gl_in .gl02 i{height: 172px;}
#main #unique .gl_wrap04 .gl_in .gl03 i{height: 307px;}
#main #unique .gl_wrap04 .gl_in .gl04 i{height: 244px;}
#main #unique .gl_wrap04 .gl_in .gl05 i{height: 132px;}

#main #unique .gl_wrap04 .gl_in .gl01{top: 153px}
#main #unique .gl_wrap04 .gl_in .gl02{top: 82px}
#main #unique .gl_wrap04 .gl_in .gl04{top: 27px}
#main #unique .gl_wrap04 .gl_in .gl05{top: 68px}

#main #unique .gl_wrap05{bottom: -102px;margin-left: -344px;left: 50%; z-index: 3}
#main #unique .gl_wrap05 .gl_in .gl01 i{height: 292px;}
#main #unique .gl_wrap05 .gl_in .gl02 i{height: 183px;}
#main #unique .gl_wrap05 .gl_in .gl03 i{height: 244px;}
#main #unique .gl_wrap05 .gl_in .gl04 i{height: 132px;}
#main #unique .gl_wrap05 .gl_in .gl01 {top: 30px;}
#main #unique .gl_wrap05 .gl_in .gl02 {top: 106px;}
#main #unique .gl_wrap05 .gl_in .gl04 {top: 56px;}

#main #unique .gl_wrap06{bottom: -61px;margin-left: -203px;left: 50%; z-index: 3}
#main #unique .gl_wrap06 .gl_in .gl01 i{height: 123px;}
#main #unique .gl_wrap06 .gl_in .gl02 i{height: 244px;}
#main #unique .gl_wrap06 .gl_in .gl03 i{height: 132px;}
#main #unique .gl_wrap06 .gl_in .gl01{top: 46px}
#main #unique .gl_wrap06 .gl_in .gl03{top: 44px}


#main #unique .shape_bg {position: absolute}
#main #unique .shape_bg01{top: 418px;left: -157px;mix-blend-mode: darken}
#main #unique .shape_bg02{top: 624px;right: -40px}
#main #unique .uni_title{width: 1200px;margin: 0 auto;margin-bottom: 59px;position: relative;z-index: 2}
#main #unique .uni_title .tit01 strong{font-size: 150px;color: #51341B;    font-family: "amandine", sans-serif;font-weight: 400}
#main #unique .uni_title .tit02 {display: flex;justify-content: space-between;align-items: center;margin-top: -32px;margin-bottom: 160px;}
#main #unique .uni_title .tit02 strong{font-size: 90px;color: #51341B;font-family: "the-seasons", sans-serif;font-weight: 400}
#main #unique .uni_title .tit02 .line{position: relative;width: 246px;height: 1px;background: #E3D0C7}
#main #unique .uni_title .tit02 .line:before{content: '';display: block;width: 16px;height: 16px;background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));  backdrop-filter: blur(20px);border-radius: 2px;left: -8px;top: 50%;margin-top: -8px;position: absolute}
#main #unique .uni_title .tit02 .line:after{content: '';display: block;width: 16px;height: 16px;background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));  backdrop-filter: blur(20px);border-radius: 2px;right: -8px;top: 50%;margin-top: -8px;position: absolute}
#main #unique .uni_title .tit02 .line i{width: 4px;height: 4px;background: #E3D0C7;border-radius: 50%;display: block;position: absolute;z-index: 2}
#main #unique .uni_title .tit02 .line i:nth-child(1){top: 50%;margin-top: -2px; left: -1.5px;}
#main #unique .uni_title .tit02 .line i:nth-child(2){top: 50%;margin-top: -2px;right: -1.5px;}
#main #unique .uni_title .tit02 .line2{width: 122px;}
#main #unique .uni_title .tit02 .txt_b{display: flex;flex-direction: column-reverse;position: relative;top: 74px;}
#main #unique .uni_title .tit02 .txt_b p{display: block;font-size: 20px;line-height: 1.5;color: #51341B;font-weight: 500}
#main #unique .uni_title .tit02 .txt_b p b{color: #FF5700}
#main #unique .uni_title .tit02 .txt_b p span{font-weight: 600;position: relative}
#main #unique .uni_title .tit02 .txt_b p span i{position: absolute;height: 1.5px;background: #51341B;width: 0%;bottom: -1px;left: 0}
#main #unique .unique_list {padding-bottom: 622px;position: relative;display: flex;align-items: center;justify-content: center;z-index: 5}
#main #unique .unique_list .project_info{position: absolute;left: 50%;margin-left: 492px;background: linear-gradient(45deg, rgba(255,243,230,0.7), rgba(255,249,243,0.7));border-radius: 10px;backdrop-filter: blur(20px);width: 300px;padding: 40px; top: 400px;z-index: 15;border: 1px solid #FFCE8F}
#main #unique .unique_list .project_info ul li{padding: 28px 0;border-bottom: 1px dashed #51341B20}
#main #unique .unique_list .project_info ul li:last-child{border-bottom: none;padding-bottom: 0}
#main #unique .unique_list .project_info ul li:nth-child(1){padding-top: 0}
#main #unique .unique_list .project_info ul li span{display: block;color: #51341B;    font-family: 'AvantGarde Bk BT', sans-serif;display: block;margin-bottom: 6px;}
#main #unique .unique_list .project_info ul li p{font-size: 18px;color: #51341B; font-family: 'AvantGarde Bk BT', sans-serif;display: flex;align-items: center;gap: 8px;margin-bottom: 12px}
#main #unique .unique_list .project_info ul li p:last-child{margin-bottom: 0}
#main #unique .unique_list .project_info ul li p svg{display: block}
#main #unique .unique_list .monitor_w{position: absolute;width: 100%;height: 100vh;position: absolute;top: 0;left: 0;align-items: center;justify-content: center;display: flex;perspective: 400px}
#main #unique .unique_list .monitor_w .monitor_in{width: 1400px;height: 812px;padding: 10px;background: linear-gradient(to left, rgba(233,224,215,0.5), rgba(219,202,183,0.5), rgba(233,224,215,0.5));backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 10px;will-change: width,height, transform;transform-origin: center center}
#main #unique .unique_list .monitor_w .monitor{width: 100%;height: 100%;background: #000;position: relative;overflow: hidden;border-radius: 6px}
#main #unique .unique_list .monitor_w .monitor .moni_img:after{content: '';position: static}
#main #unique .unique_list .monitor_w .monitor .moni_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);; opacity: 0}
#main #unique .unique_list .monitor_w .monitor .moni_img:before{content: '';display: block;width: 200%;height: 200%;background: #000;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#main #unique .unique_list .monitor_w .monitor .moni_img img{display: block;position: relative;z-index: 15}
#main #unique .unique_list .monitor_w .monitor .moni_img video{width: 100%}
#main #unique .unique_list .monitor_w .monitor .moni_img01{opacity: 1}
#main #unique .unique_list .ring_content{position: relative}
#main #unique .unique_list .ring_content2{position: absolute}
#main #unique .unique_list .ring_content2 .ring_b{opacity: 0}

#main #unique .unique_list .ring_content .mem{position: absolute;z-index: 15;transform: translateY(30px);opacity: 0;transition: 0.7s;text-align: center}
#main #unique .unique_list .ring_content .mem.on{transform: translateY(0px);opacity: 1}
#main #unique .unique_list .ring_content .mem i{position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;border-radius: 50%;border: 1.5px solid #EB490C;animation: 1s cir_wave infinite linear}
#main #unique .unique_list .ring_content .mem i:nth-child(2){animation-delay: 0.333s}
#main #unique .unique_list .ring_content .mem i:nth-child(3){animation-delay: 0.666s}
@keyframes cir_wave{
    0%{opacity: 1;transform: scale(1)}
    100%{opacity: 0;transform: scale(1.2)}
}
#main #unique .unique_list .ring_content .mem .mem_img{position: relative;display: inline-block}
#main #unique .unique_list .ring_content .mem .mem_img .img{width: 130px;background: #fff;border-radius: 50%;overflow: hidden;margin: 0 auto;border: 1.5px solid #EB490C;box-shadow: 0 0 40px #FF8800;position: relative}
#main #unique .unique_list .ring_content .mem .mem_img span{position: absolute;right: -8px;top: -8px;    font-family: "amandine", sans-serif;font-size: 20px;color: #EB490C;font-weight: 500}
#main #unique .unique_list .ring_content .mem .mem_img .img img{display: block;max-width: 100%}
#main #unique .unique_list .ring_content .mem .mem_info{padding-top: 25px}
#main #unique .unique_list .ring_content .mem .mem_info strong{display: block;font-size: 18px;color: #51341B;text-align: center;margin-bottom: 5px}
#main #unique .unique_list .ring_content .mem .mem_info p{display: block;font-size: 15px;color: #51341B;text-align: center}

#main #unique .unique_list .ring_content .mem01{left: 10%;top: 25%}
#main #unique .unique_list .ring_content .mem02{right: 10%;top: 35%}
#main #unique .unique_list .ring_content .mem03{left: 10%;top: 43%}
#main #unique .unique_list .ring_content .mem04{right: -5%;top: 60%}
#main #unique .unique_list .ring_content .mem05{left: -4%;top: 68%}
#main #unique .unique_list .ring_content .mem06{right: 20%;top: 83%}
#main #unique .unique_list .ring_content .mem07{left: 20%;top: 90%}
#main #unique .unique_list .ring_content .mem08{right: 25%;top: 100%;}
#main #unique .unique_list .ring_list{display: flex;flex-direction: column;gap: 600px;padding-top: 635px;}
#main #unique .unique_list .ring_list .ring_box{position: relative}
#main #unique .unique_list .ring_list .ring {width: 100%;display: flex;justify-content: center;position: relative}
#main #unique .unique_list .ring_list .ring_box .ring_f{position: absolute;bottom: -6px;left: 0}
#main #unique .unique_list .ring_list .desk_wrap{position: absolute;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center}
#main #unique .unique_list .ring_list .desk_wrap{position: absolute;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center}
#main #unique .info_s_text{position: absolute;right: 235px;bottom: 150px}

#main .gl_wrap{position: absolute}
#main .gl_wrap .gl_in{display: flex}

@keyframes bar{
    0%{transform: scaleY(1)}
    50%{transform: scaleY(0.8)}
    100%{transform: scaleY(1)}
}
#main .gl_wrap .gl_in .gl i{display: block;backdrop-filter:blur(20px);width:  50px;height: 200px;border-radius: 6px;background: linear-gradient(to left,rgba(255,255,255,0),#ffffff);border: 1px solid #fff}
#contact{position: relative;padding-top: 100px;padding-bottom: 215px;background: #FFFBF7;overflow: hidden}
#contact .thd_logo{display: flex;align-items: center;justify-content: center;position: relative;z-index: 2;transition: 1s}
#contact .copy {position: absolute;top: 200px}
#contact .txt_w strong{font-size: 300px;color: #FCE6D0; font-family: "amandine", sans-serif;font-weight: 700;white-space: nowrap}
#contact .txt_w .txt strong{font-family: inherit}
#contact .txt_w .copy strong{
  animation: marquee-top 150s linear infinite;
    display: block;
    font-weight: 400;
}
@keyframes marquee-top {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

#contact .thd_logo .thd_w{position: relative;transform: translateY(100%)}
#contact .thd_logo .thd_w .img{position: absolute;top: 0;left: 0;mix-blend-mode: overlay}
#contact .logo_wave_content svg{opacity: 0}
#contact .logo_wave_content{position: relative;height: 422px;margin-top: -260px;z-index: 5}
#contact .logo_wave_content .logo_w{position: absolute;right: 0;bottom: 0;perspective: 200px}
#contact .logo_wave_content .logo_way{position: absolute;left: 50%;transform: translateX(-26%)}
#contact .logo_wave_content .logo_w div{;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0));  transform: rotateY(-10deg);backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 10px}
#contact .logo_wave_content .logo_w div img{display: block;mix-blend-mode: multiply}
#contact .port{position: absolute;perspective: 400px}
#contact .port .port_w{padding: 10px;background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));  backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 20px}
#contact .port .port_w .port_in{border-radius: 20px;overflow: hidden}
#contact .port .port_w .port_in img{display: block}
#contact .port.port01{top: 135px;left: 50%;margin-left: -696px;}
#contact .port.port02{top: 420px;left: 50%;margin-left: 337px;}
#contact .port.port03{bottom: 152px;left: 50%;margin-left: -394px;}

#contact .copy .copy01 strong{font-family: "the-seasons", sans-serif;font-weight: 300;font-size: 300px;color: #51341B;white-space: nowrap;line-height: 150px; animation: scroll 100s linear infinite;display: block}
#contact .txt_w .txt{display: flex;justify-content: center;align-items: center;gap: 6px;flex-direction: column;margin-top: 150px;position: relative;z-index: 5}
#contact .txt_w .txt .on{position: absolute;top: 0;left: 0;color: #51341B;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#contact .txt_w .txt div{position: relative}
#contact .txt_w .txt strong{color: #C4B6AB;font-size: 50px;font-weight: 700}
#contact .txt_w .btn_w{margin-top: 48px;position: relative}
#contact .txt_w .btn_w .water_drop{position: absolute;top: 70%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: overlay;mix-blend-mode: color-burn}
/*#contact .txt_w .btn_w .water_drop:after{content: '';display: block;width: 100%;height: 200px;background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));position: absolute;top: 0;left: }*/
#contact .txt_w .btn_w a{display: flex;align-items: center;justify-content: center;width: 180px;height: 180px;border: 1px solid #FFFFFF;border-radius: 50%;position: relative;margin: 0 auto;overflow: hidden}
#contact .txt_w .btn_w a span{font-size: 20px;color: #FFFFFF;position: relative;z-index: 5;font-family: "amandine", sans-serif;}
#contact .txt_w .btn_w a i{position: absolute;height: 200%;width: 100%;background: linear-gradient(to top, #FFB300, #E7420E,  #FFB300);top: 0;transition: 0.5s;pointer-events: none}
#contact .txt_w .btn_w a:hover i{transform: translateY(-50%)}
#contact .bg01{height: 200px;width: 100%;top: 0;left: 0;position: absolute;z-index: 3;pointer-events: none;background: linear-gradient(to bottom, rgba(248,242,239,1), rgba(248,242,239,0))}
#contact .bg02{height: 300px;width: 100%;bottom: 0;left: 0;position: absolute;z-index: 3;pointer-events: none;background: linear-gradient(to top, rgba(248,242,239,1), rgba(248,242,239,0))}

 @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

#main #award{position: relative;background: #FFFBF7;padding-top: 190px;overflow: hidden}
#main #award:after{content: '';position: absolute;overflow: hidden;background: linear-gradient(to bottom, #FFFBF700, #FFFBF7);width: 100%;height: 300px;position: absolute;bottom: 0;left: 0;z-index: 15}
#award .bgimg{position: absolute;left: 50%;transform: translateX(-50%);top: 0}
#main #award .aw_t{width: 800px;height: 450px;background: url(/img/light/aw_img2-min2.png);background-size: auto 100%;position: relative;z-index: 8;margin: 0 auto}
#award .award_wrap{position: relative;perspective: 300px;padding-top: 0}

#award .award_wrap .bgimg{position: absolute;right: 50px;top: 0}
#award .award_wrap .bg{position: absolute;border-radius: 20px;width: 154px;height: 230px;left: 50%;perspective: 300px;transition: 1s;opacity: 0}
#award .award_wrap.on2 .bg{opacity: 1}
#award .award_wrap .bg i{display: block;width: 100%;height: 100%;padding: 10px;background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));  backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 10px;}
#award .award_wrap .bg01{top: 50px;margin-left: -309px}
#award .award_wrap .bg02{top: 110px;margin-left: -523px}
#award .award_wrap .bg03{top: 170px;margin-left: -694px;}
#award .award_wrap .bg04{top: 170px;margin-left: -839px}
#award .award_wrap .bg05{top: 276px;margin-left: -930px;width: 214px;height: 320px}
#award .award_wrap .bg01 i{;transform: rotateY(10deg)}
#award .award_wrap .bg02 i{;transform: rotateY(15deg)}
#award .award_wrap .bg03 i{;transform: rotateY(20deg)}
#award .award_wrap .bg04 i{;transform: rotateY(60deg)}
#award .award_wrap .bg05 i{;transform: rotateY(86deg)}
#award .award_wrap .award_list{position: relative;height: 100vh;}
/*#award .award_wrap .award_list .obj{left: 50%;transform: translateX(-50%);position: absolute;top: 184px}*/
#award .award_wrap .award_list .obj{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: relative}
#award .award_wrap .award_list .obj{display: flex;width: 100%;height: 100vh;align-items: center;justify-content: center;position: relative}
#award .award_wrap .award_list .obj .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #F8F2EF;opacity: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#award .award_wrap .award_list .obj .video video{height: 626px;mix-blend-mode: multiply}
#award .award_wrap .award_list .aw_txt{opacity: 0}
/*#award .award_wrap .award_list .ob02{position: absolute;top: 0;left: 0}*/
#award .award_wrap .aw_wrap{position: absolute;left: 50%;}
#award .award_wrap .award .img_w{padding: 20px;background: linear-gradient(-45deg,rgba(255,231,220,0),rgba(255,231,220,0.7)) !important;  backdrop-filter: blur(20px);border: 1px solid #fff;border-radius: 20px;position: relative}
#award .award_wrap .award .img_w .prize_list{position: absolute;top: 30px;left: 30px;}
#award .award_wrap .award .img_w .prize_list ul{display: flex;flex-direction: column;gap: 8px;}
#award .award_wrap .award .img_w .prize_list ul li{display: flex;gap: 4px;font-size: 16px;color: #FFFFFF;font-weight: 500;border: 1px solid #ffffff25;align-items: center;padding-left: 14px;padding-right: 28px;border-radius: 23px;background: rgba(0,0,0,0.20);backdrop-filter: blur(20px)}
#award .award_wrap .award .img_w .prize_list ul li i img{display: block}
#award .award_wrap .award .img_w .img{border-radius: 10px;overflow: hidden}
#award .award_wrap .award .img_w .img img{display: block;transition: 1s;width: 100%}
#award .award_wrap .award .txt_wrap{padding-left: 20px;padding-top: 18px;}
#award .award_wrap .award .txt_wrap strong{display: block;font-family: "the-seasons", sans-serif;font-size: 28px;color: #51341B;line-height: 28px;margin-bottom: 10px;}
#award .award .txt_wrap p{font-size: 18px;color: #4A3E25;font-weight: 300}



#award .award_wrap .aw_wrap{transition:1s;will-change: transform}
/*#award .award_wrap .award_list .obj img{opacity: 0;transition: 1s;transform: translateY(30px);filter: blur(20px);display: block}*/
#award .award_wrap.on .award_list .obj img{opacity: 1;transition: 2s;transform: translateY(0);filter: blur(0px);width: 368px}

#main #unique .uni_title strong *{font-family: inherit}
#main #unique .uni_title .tit02 .line{}

.vm_btn a{display: block;width: 220px;height: 60px;display: flex;align-items: center;justify-content: space-between;padding: 0 30px;border: 1px solid #51341B;border-radius: 30px;overflow: hidden}
.vm_btn a strong{font-size: 20px;color: #51341B;font-family: 'AvantGarde Bk BT', sans-serif;}
.vm_btn a .over{position: absolute;left: 0;transform: translateX(-100%);top: 50%;margin-top: -8px;}
#main #top_1 .work_list ul li{transform: translateX(30px);opacity: 0;transition: transform 1.2s, opacity 1.2s}


#main #unique .unique_list .ring_list, #main #unique .unique_list .ring_content2{pointer-events: none}


.main_vis .bg video, #beyond_content .b_img_content .img img{width: 100vw}
#beyond_content .b_img_content{overflow: hidden}
#port_view .con08 .img_wrap > ul > li .bg img{max-width: 100%;width: 100%}
@media (max-width: 1920px) {
    #port_view .con08 .img_wrap > ul > li .bg img{max-width: 960px}
    .main_vis .bg video, #beyond_content .b_img_content .img img{width: 1920px}
}
@media (max-width: 1750px) {
        #we_service2 .we_wrap{transform: scale(0.9);height: 100%}
    #project_list .pro > div .right video{width: 100%}
    #beyond_content .b_img_content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0.5)}
    #project_list .pro > div .left > div{padding: 0}
    #project_list .pro > div .info strong{font-size: 50px;}
    #project_list .pro > div .left{height: 400px}
    .main_visual .vis_title strong, #award .title strong, #main #unique .uni_title .tit01 strong, #member .mem_content .mem_title .tit_wrap strong{font-size: 125px}
    #main #unique .uni_title .tit02 strong{font-size: 70px;}
	#award .title strong{font-size: 80px}
    #main #unique .uni_title .tit02 .txt_b p{font-size: 17px;}
   
    #contact .copy .copy01 strong{font-size: 250px;line-height: 250px;}
	#header #menu_open > ul{gap: 30px;}
	#header #menu_open > ul > li > a{font-size: 70px}
    #footer .ft02 > div.f02{padding-left: 40px;}
    
    #main .gl_wrap .gl_in .gl i{width: 40px;}
    #footer .ft02 > div.f02 ul:before{left: -40px;}
    #main #unique .unique_list .project_info{margin-left: 0;left: auto;right: 20px;}
    #project_list .pro > div .right > div{width: 800px}
    #project_list .pro > div .right video{width: 800px}
    #contact .txt_w strong{font-size: 220px}
    #contact .thd_logo .thd_w img {width: 600px}
    #contact .txt_w .txt strong{font-size: 36px}
    .wrapper{height: 100vh}

}
@media (max-width: 1650px) {
	.aw_content .title strong{font-size: 70px}
    #project_list .pro{padding: 0 20px;}
}
@media (max-width: 1550px) {
    #main .card.prev8 { transform: rotateY(-221.5403deg) translateZ(600px) translateY(-1200px); transition: 3s linear}
    #main .card.prev7 { transform: rotateY(-193.8461deg) translateZ(600px) translateY(-1050px); transition: 3s linear}
    #main .card.prev6 { transform: rotateY(-166.1538deg) translateZ(600px) translateY(-900px); transition: 3s linear}
    #main .card.prev5 { transform: rotateY(-138.4615deg) translateZ(600px) translateY(-750px); transition: 3s linear}
    #main .card.prev4 { transform: rotateY(-110.7692deg) translateZ(600px) translateY(-600px); transition: 3s linear}
    #main .card.prev3 { transform: rotateY(-83.0769deg)  translateZ(600px) translateY(-450px); transition: 3s linear}
    #main .card.prev2 { transform: rotateY(-55.3846deg)  translateZ(600px) translateY(-300px); transition: 3s linear}
    #main .card.prev1 { transform: rotateY(-27.6923deg)  translateZ(600px) translateY(-150px); transition: 3s linear}
    #main .card{opacity: 0}

    /* 가운데 (7번) */
    #main .card.on { transform: rotateY(0deg) translateZ(600px) translateY(0px); opacity: 1;transition: 3s linear}
    /* 오른쪽 그룹 (8~13번) */
    #main .card.next1  { transform: rotateY(27.6923deg)  translateZ(600px) translateY(150px); transition: 3s linear}
    #main .card.next2  { transform: rotateY(55.3846deg)  translateZ(600px) translateY(300px); transition: 3s linear}
    #main .card.next3 { transform: rotateY(83.0769deg)  translateZ(600px) translateY(450px); transition: 3s linear}
    #main .card.next4 { transform: rotateY(110.7692deg) translateZ(600px) translateY(600px); transition: 3s linear}
    #main .card.next5 { transform: rotateY(138.4615deg) translateZ(600px) translateY(750px); transition: 3s linear;mix-blend-mode: difference}
    #main .card.next6 { transform: rotateY(166.1538deg) translateZ(600px) translateY(900px);transition: 3s linear}
    #main .card.next7 { transform: rotateY(193.8461deg) translateZ(600px) translateY(1050px);transition: 3s linear}
    #main .card.next8 { transform: rotateY(221.5403deg) translateZ(600px) translateY(1200px);transition: 3s linear}

    #we_service2 .we_wrap{transform: scale(0.7);height: 100%}
    #contact .logo_wave_content svg{width: 4500px;height: auto}
  #contact .logo_wave_content .logo_way{transform: translateX(-18%);}
    #contact .logo_wave_content .logo_w div img{width: 200px;display: block}
    #contact{padding-top: 0}
	#header .hd_inner{padding: 0 20px;}
	#header .hd_inner #gnb > ul{gap: 0 25px}
    .main_visual .vis_title strong, #award .title strong, #main #unique .uni_title .tit01 strong, #member .mem_content .mem_title .tit_wrap strong{font-size: 100px}
	#award .title strong{font-size: 80px}
    #main #unique .uni_title .tit02 .line{width: 160px;}
	.aw_content .title strong{font-size: 70px}
    #contact .copy .copy01 strong{font-size: 200px;}
    #footer .ft02 > div.f02 ul li p{font-size: 14px;}
    #footer .ft02 > div.f02 ul li span{font-size: 23px;}
    #footer .ft02 > div.f02 ul:after{margin-left: -40px;}
    #footer .ft02 > div.f02{padding-bottom: 40px;}
    .award .img_w{padding: 10px}
    #main .card{width: 280px}
    .award .img_w .img img{width: 100%}
    #main .card{transform: rotateY(calc((360deg / 13) * var(--index)))translateZ(640px) translateY(calc(100px * var(--index)))}
    .item-5{width: 900px;height: 398px}
    #project_list .pro > div .right > div{width: 650px}
    #project_list .pro > div .right video{width: 650px}
    #project_list .pro > div .info strong{font-size: 45px}
    #project_list .pro > div .info p{font-size: 16px;}
    #project_list .pro01 .left img{width: 160px}
    #project_list .pro02 .left img{width: 160px}
    #project_list .pro03 .left img{width: 180px}
    #project_list .pro > div .left{height: 328px}
    
}
@media (max-width: 1260px) {
    .main_vis .bg video{height: 100vh}
    #contact .txt_w .txt strong{font-size: 24px}
    #beyond_content .b_title strong{margin-bottom: 30px;font-size: 70px}
    #beyond_content .b_title{left: 20px;top: 200px}
    #beyond_content .b_img_content img{width: 1260px}
    #we_service .info_s_text{padding-left: 20px;padding-bottom: 100px}
    #project_list .pro > div .info p{flex-wrap: wrap;gap: 5px 20px}
    #project_list .pro > div .info p i{height: 0;width: 100%}
    #main #unique .unique_list .monitor_w .monitor_in{width: 1000px;height: 650px}
    
        #main #unique .uni_title{width: 100%}
    #footer .ft02 > div{width: 100%}
    #footer .ft02 > div{padding-bottom: 40px;margin-bottom: 40px;}
    #footer .ft02 > div.f01:after{width: 100%}
    #footer .ft02 > div.f02 .tag{display: none}
    #footer .ft02 > div.f02:after{width: 100%}
    #footer .ft03 .f02, #footer .ft03 .f01{padding-top: 0}
    .copy_title strong{font-size: 100px}
    .copy_title .copy01{width: 560px}
    .copy_title .copy01 > div strong{width: 560px}
    .copy_title strong{width: 476px}
   .copy_title .copy02{width: 476px}
   .copy_title .copy02 > div strong{width: 476px}
    .copy_title .copy03 img{width: 560px}
    .copy_title .copy03, .copy_title .copy03 > div strong{width: 560px}
    .copy_title strong i{left: 0}
    .aw_content .video video{width: 570px}
    .aw_content .title strong{font-size: 70px}
    .aw_content .award_title .aw_list ul li i img{width: 40px}
    .aw_content .cir div span{width: 50px;line-height: 25px;font-size: 16px}
    .aw_content .cir div strong{font-size: 16px}
    .main_vis .copy_text div p{font-size: 15px}
    #project_list .info_s_text{padding-left: 20px}
    #project_list .pro > div .right > div{width: 560px}
    #project_list .pro > div .right video{width: 560px}
    #project_list .pro > div .left{height: 296px}
    .info_s_text p, .aw_content .txt p{font-size: 11px}
    #main #unique .uni_title .tit01 strong{font-size: 80px}
    #main #unique .uni_title .tit02 strong{font-size: 55px}
    #main #unique .info_s_text{right: 20px;bottom: 30px}
    #we_service2 .ser03{margin-left: -650px}
    #we_service2 .ser04 {margin-left: 154px;}
    #we_service2 .ser12 {margin-left: 310px;margin-top: 294px;}
    #we_service2 .ser06 {margin-left: 310px;margin-top: 504px;}
    #we_service2{height: 1716px;}
    

}
@media (max-width: 1160px) {
    #we_service2{height: auto}
    #we_service2 .info_s_text03{margin-top: 0;top: auto;margin-left: 0;left: auto;right: 20px;bottom: -80px;}
    #we_service2 .info_s_text04{margin-top: 0;top: auto;margin-left: 0;left: auto;left: 20px;bottom: -80px;}
  #we_service2 .ser .wr.wr_img .num{display: block;}

    #we_service2 .ser .wr.wr_img .img{display: none}
    #we_service2 .ser .wr .txt2:before, #we_service2 .ser .wr.wr_img .txt2 strong:after, #we_service2 .ser .wr.wr_img .txt2 strong i, #we_service2 .ser .wr.wr_img .txt2 strong:before{display: none;}
    #main #top_1 .work_list2 ul li{width: calc(50% - 10px)}
	#header .hd_inner #gnb{display: none}
    #footer .ft02{flex-direction: column}
    
	#header .hd_inner{height: 80px;align-items: center}
    #we_service2 .ser11 {margin-left: -20px;}
        #we_service2 .info_s_text p{white-space: nowrap}
    #we_service2{padding: 150px 0}
    #we_service2 .ser{position: static;margin-left: 0 !important;margin-top: 0 !important}
    #we_service2 .we_wrap{transform: scale(1);display: flex;flex-wrap: wrap;gap: 15px;padding: 0 20px;}
    #we_service2 .ser .wr.wr_img img{display: none}
    #we_service2 .ser02 .wr{width: 100% !important}
    #we_service2 .ser .wr{width: 100% !important}
    #we_service2 .ser{width: calc(33.33% - 10px);}
    #we_service2 .ser .wr:after{opacity: 0}
    #we_service2 .ser .wr.wr_img{padding-top: 100%}
    #we_service2 .ser .wr.wr_img .txt2{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: none;width: 100%;bottom: auto}
    #we_service2 .ser .wr.wr_img .txt2 strong{background: none;backdrop-filter: none;box-shadow: none;background: none;padding: 0;font-size: 18px;text-align: center}
    #we_service2 .we_wrap{height: auto}

}
@media (max-width: 980px) {
	#footer .ft > div.right .w div:nth-child(2){padding-left: 20px}
	#scroll .sandglass{left: 10px;transform: scale(0.7);bottom: 41px}
	#scroll span{left: 30px}
	.wrapper{margin-top: -30px;}
	.aw_obj_wrap {
	width: 200px;
	height: 378px;}
	#main #award .aw_t{width: 400px;height: 225px;}
	#contact{padding: 120px 0;}
	#contact .logo_wave_content .logo_w div{border-radius: 5px;}
	#contact .logo_wave_content .logo_w div img{width: 120px;}
	#project_list .pro > div .right > div{width: 100%}
	#main .card.prev8 { transform: rotateY(-221.5403deg) translateZ(420px) translateY(-560px);  transition: 3s linear}
	#main .card.prev7 { transform: rotateY(-193.8461deg) translateZ(420px) translateY(-480px); ;transition: 3s linear}
	#main .card.prev6 { transform: rotateY(-166.1538deg) translateZ(420px) translateY(-420px); transition: 3s linear}
	#main .card.prev5 { transform: rotateY(-138.4615deg) translateZ(420px) translateY(-350px);  transition: 3s linear}
	#main .card.prev4 { transform: rotateY(-110.7692deg) translateZ(420px) translateY(-280px);  ;transition: 3s linear}
	#main .card.prev3 { transform: rotateY(-83.0769deg)  translateZ(420px) translateY(-210px);  ;transition: 3s linear}
	#main .card.prev2 { transform: rotateY(-55.3846deg)  translateZ(420px) translateY(-140px);  ;transition: 3s linear}
	#main .card.prev1 { transform: rotateY(-27.6923deg)  translateZ(420px) translateY(-70px);  ;transition: 3s linear}
	#main .card{opacity: 0}

	/* 가운데 (7번) */
	#main .card.on { transform: rotateY(0deg) translateZ(420px) translateY(0px); opacity: 1;transition: 3s linear}
	/* 오른쪽 그룹 (8~13번) */
	#main .card.next1  { transform: rotateY(27.6923deg)  translateZ(420px) translateY(70px)  ;transition: 3s linear}
	#main .card.next2  { transform: rotateY(55.3846deg)  translateZ(420px) translateY(140px);transition: 3s linear}
	#main .card.next3 { transform: rotateY(83.0769deg)  translateZ(420px) translateY(210px);transition: 3s linear}
	#main .card.next4 { transform: rotateY(110.7692deg) translateZ(420px) translateY(280px);transition: 3s linear}
	#main .card.next5 { transform: rotateY(138.4615deg) translateZ(420px) translateY(350px);transition: 3s linear;mix-blend-mode: difference}
	#main .card.next6 { transform: rotateY(166.1538deg) translateZ(420px) translateY(420px);transition: 3s linear}
	#main .card.next7 { transform: rotateY(193.8461deg) translateZ(420px) translateY(490px);transition: 3s linear}
	#main .card.next8 { transform: rotateY(221.5403deg) translateZ(420px) translateY(560px);transition: 3s linear}
	#we_service2 .info_s_text01{margin-left: 0;left: 20px;top: 40px;margin-top: 0}
	#we_service2 .ser .wr.wr_img .txt2 strong, #we_service2 .ser .wr .txt strong{font-size: 14px;word-break: keep-all;padding: 0 10px;line-height: 1.5;}
	#main #unique .unique_list .ring_content .mem{display: none}
	.item-5{width: 550px;height: 243px;}
	.obj2 .video video{height: 346px}
	#award .obj img{width: 200px}
	#main #unique .unique_list .project_info ul li span, #main #unique .unique_list .project_info ul li p{font-size: 14px;}
	#main #unique .unique_list .project_info{padding: 15px;border-radius: 7px;}
	#main #unique .unique_list .project_info ul li{padding: 10px 0}
	#footer .ft02 > div.f02{padding-left: 0}
	#footer .ft02 > div.f02 ul:before{display: none}
	#footer{padding: 20px;}
	#header .hd_inner .open_btn i{width: 40px;}
	#header .hd_inner, #header{height: 65px;}
	#header #menu_open .close{right: 20px;top: 20px;width: 45px;height: 45px;}
	#header #menu_open .close span{width: 16px;height: 16px;}
	#header #menu_open > ul > li > a{font-size: 45px}
	#header #menu_open > ul > li ul li a{font-size: 15px;}
	.aw_content .cir div span{width: 40px}
	.main_visual .vis_title strong, #award .title strong, #main #unique .uni_title .tit01 strong, #member .mem_content .mem_title .tit_wrap strong{font-size: 65px}
	.main_visual .vis_title .tit_w02 {transform: translateX(90px);}
	.main_visual .vis_title .tit_w01 {margin-left: -50px;}
	#award .award_title .aw_list ul li i img{width: 30px;}
	#award .cir div {width: 170px;height: 40px;   }
	#award .cir div strong{font-size: 14px}
	#award .cir div span{line-height: 27px;font-size: 15px}
	#award .cir i svg{width: 200px;height: auto}
	.aw_content .txt{right: 20px;bottom: auto;top: -80px}
	#award .award_wrap .award_list .obj img{width: 320px;}
	#award .award_wrap .bg{display: none}
	#award .award_wrap .award_list{height: 1000px}
	#award .award_wrap .award .img_w .img{width: 320px;}
	#award .award_wrap .award .img_w .img img{max-width: 100%}
	#award .award_wrap .aw_wrap4{margin-left: 205px;bottom: 185px;filter: blur(3px) grayscale(0.5)}
	#award .award_wrap .aw_wrap2{margin-left: -543px;bottom: 298px;filter: blur(3px) grayscale(0.5)}
	#award .award_wrap .award .img_w{padding: 6px;}
	#award .award_wrap .award .txt_wrap strong{font-size: 22px;}
	#award .award_wrap .award .txt_wrap p{font-size: 14px;}
	#award .award_wrap .aw_wrap3{margin-left: -167px}
	#main #unique .uni_title{width: 100%;padding: 0 20px;}
	#main #unique .uni_title .tit02 .line{width: 70px;}
	#main #unique .uni_title .tit02 .txt_b p{flex-shrink: 15px;}
	#main #unique .uni_title .tit02 .txt_b{top: 64px;}
	#main #unique .unique_list .monitor_w .monitor_in {width: 865px;height: 500px;padding: 15px;border-radius: 15px;}
	#main #unique .unique_list .monitor_w .monitor{border-radius: 12px}
	#main #unique .unique_list .ring_list .ring01 .ring_box img{width: 800px}
	#main #unique .unique_list .ring_list .ring02 .ring_box img{width: 600px}
	#main #unique .unique_list .ring_list .ring03 .ring_box img{width: 550px}
	#main #unique .unique_list .ring_list .ring04 .ring_box img{width: 420px}
	#main #unique .unique_list .ring_list .ring05 .ring_box img{width: 420px}
	#main #unique .unique_list .ring_list .ring06 .ring_box img{width: 320px}
	#main #unique .unique_list .ring_list{gap: 500px}
	#main #unique .shape_bg01 img{width: 500px}
	#main #award{padding-top: 140px}
	#award .award_title{margin-top: 0px}
	#contact{padding: 130px 0}
	#contact .thd_logo .thd_w{transform: translateY(30%);}
	#contact .port.port01{margin-left: 0;left: 20px;top: 30px;}
	#contact .port.port01 img{width:  200px}
	#contact .port.port02 img{width:  160px}
	#contact .port.port03{display: none}
	#contact .port.port02{top: 520px;right: 20px;left: auto;margin-left: 0}
	#contact .port .port_w{border-radius: 10px;padding: 8px}
	#contact .port .port_w .port_in{border-radius: 8px;}
	#main .gl_wrap{transform: scale(0.7)}
	#contact .copy .copy01 strong{font-size: 130px;line-height: 130px}
	#contact .gl_wrap03{display: none}
	#contact .txt_w .txt strong{font-size: 22px;}
	#contact .txt_w .txt{margin-top: 20px;}
	#contact .txt_w .btn_w a{width: 140px;height: 140px;}
	#contact .txt_w .btn_w a span{font-size: 15px;}
	#main #unique .uni_title .tit02 strong{font-size: 50px;}
	#main #unique .uni_title .tit02{justify-content: flex-start;gap: 20px;}
	#main #unique .uni_title .tit02 .txt_b p{font-size: 15px;}
	#main #unique .uni_title .tit02 .txt_b{top: 43px;}
	.l_logo{left: 20px}
	.l_logo svg{width: 14px;height: auto}
	#scroll span{font-size: 18px}
	.quick ul li a.phone span{font-size: 13px;}
	.quick ul li a.contact div strong{font-size: 13px;}
	.quick ul li a.phone svg{width: 25px}
	.quick ul li a.phone{gap: 7px;}
	.quick ul li a{width: 144px;height: 40px;padding-left: 8px;}
	.quick ul li a.phone svg{display: block}
	.quick ul li a.contact a{width: auto}
	.quick ul li a.contact div svg{width: 10px;display: block}
	.quick ul li a.contact div{padding: 0 20px;}
	.quick ul li a.contact{padding-left: 0}
	.quick .chat img{width: 50px;}
	.btn_top button .bg{width: 40px;height: 40px;}
	.btn_top button svg{width: 10px;height: auto}
	.quick{right: 15px;gap: 8px;bottom: 15px}
	#main #unique .unique_list .monitor_w .monitor .moni_img{width: 100%}
	#main #unique .unique_list .monitor_w .monitor .moni_img img{width: 100%}
	#contact .txt_w .btn_w .water_drop video{width: 800px;height: auto}
	.main_visual .glass_wrap{transform: scale(0.7)}
	.main_visual .glass_wrap .glass_in .glass{width: 25px;}
	#award .award_wrap .award .img_w .prize_list ul li i img{width: 30px;}
	#award .award_wrap .award .img_w .prize_list ul li{font-size: 11px;padding-left: 8px;padding-right: 15px;}
	#award .award_wrap .award .img_w .prize_list {top: 15px;left: 12px;}
	#award .award_wrap .award .img_w{border-radius: 8px;}
	#award .award_wrap .award .img_w .img {border-radius: 5px;}
	#award .award_wrap .award .txt_wrap strong{line-height: 1.2}
	#award .award_wrap .award .txt_wrap{padding: 5px;}
	#footer .ft03 .f02 address{font-size: 10px}
	#footer .ft03 .f01 .map_in{height: 200px;border-radius: 8px;}
	#main .card {transform: rotateY(calc((360deg / 13) * var(--index))) translateZ(480px) translateY(calc(60px * var(--index)));width: 200px;}
	.award .txt_wrap strong{font-size: 18px;line-height: 1.2;margin-bottom: 7px}
	#award .award .txt_wrap p{font-size: 13px;}
	.award .img_w{border-radius: 10px}
	.award .img_w .prize_list{left: 20px;top: 20px;}
	.award .img_w .prize_list ul li{font-size: 11px}
	.award .img_w .prize_list ul li i img{width: 28px;}
	.award .img_w .prize_list ul li{padding-right: 10px;padding-left: 7px}
	.award .txt_wrap{padding: 10px;padding-right: 0}
	.award .img_w{padding: 6px;}
	#project_list .pro > div{padding: 15px 0}
	#project_list .pro > div .right{margin-top: 7px}
	.copy_title .copy03 img, .copy_title .copy03, .copy_title .copy03 > div strong{width: 350px}
	.main_vis .copy_text{transform: translateY(40px)}
	#beyond_content .b_img_content .img{width: 70vw;overflow: hidden}
	#beyond_content .b_title strong{font-size: 35px}
	#beyond_content .b_img_content .img02,
	#beyond_content .b_img_content .img03,
	#beyond_content .b_img_content .img04{height: 100%;width: 100%}
	#beyond_content .b_img_content .img02 div,
	#beyond_content .b_img_content .img03 div,
	#beyond_content .b_img_content .img04 div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
	#project_list .pro > div .info p span{display: none}
	#project_list .pro > div .left{height: auto;}
	#project_list .pro > div{flex-wrap: wrap}
	#main #unique .uni_title .tit02 .line{display: none}
	.main_vis .bg{width: auto;top: 50%;left: 50%;transform: translate(-50%,-50%);}
	.copy_title strong i{top: 0px;}
	#cursor > img{display: none}
	#main .card.prev8{opacity: 0;filter: blur(10px)}
	#main .card.prev7{opacity: 0.1;filter: blur(5px)}
	#main .card.prev6{opacity: 0.2;filter: blur(3px)}
	#main .card.prev5{opacity: 0.3;filter: blur(1px)}
	#main .card.prev4{opacity: 0.4}
	#main .card.prev3{opacity: 0.5}
	#main .card.prev2{opacity: 0.6}
	#main .card.next8{opacity: 0}
	#main .card.next7{opacity: 0.1;;filter: blur(10px)}
	#main .card.next6{opacity: 0.2;filter: blur(5px)}
	#main .card.next5{opacity: 0.3;filter: blur(3px)}
	#main .card.next4{opacity: 0.4;filter: blur(1px)}
	#main .card.next3{opacity: 0.5}
	#main .card.next2{opacity: 0.6}
	.aw_content .info_s_text01{left: 20px}

	.btn_top{ right: 20px; bottom: 120px; }

}
@media (max-width: 800px) {
	#we_service2 .info_s_text04{bottom: -50px}
	#we_service2 .info_s_text03 {bottom: -120px;right: 60px;}
	.wrapper{transform: scale(0.7)}
	#main #unique .unique_list .ring_list{gap: 420px}
	#main #unique .unique_list{padding-bottom: 150px}
	#project_list .pro > div .right{height: auto;padding-top: 50%;overflow: hidden;position: relative;}
	#project_list .pro > div .right > div, #project_list .pro > div .right .vi_img_w{position: absolute;top: 0;width: 100%;overflow: hidden;}
	#award .award_title .aw_list ul li{opacity: 1;transform: translateY(0);filter: blur(0);}
	#award .cir{margin-top: 10px;}
	#award .cir div{width: auto;height: 40px;padding: 0 5px;padding-left: 10px;}
	#award .cir{filter: blur(0px);opacity: 1;transform: translateY(0);}
	#award:after{content: '';display: block;height: 20%;bottom: 0%;left: 0;width: 100%;  background: linear-gradient(to top, #FFFBF7 20% ,  #FFFBF770 60% ,#FFFBF700);position: absolute;top: auto;z-index: 50;}
	#project_list{margin-top: -5px;position: relative;z-index: 50;;}
	#project_list{padding-top: 0;}
	#project_list .info_s_text{z-index: 5;position: relative;}
	#award{display: block;}
	#main .card{width: 180px; transform: rotateY(calc((360deg / 13) * var(--index))) translateZ(400px) translateY(calc(80px * var(--index)));}
	.award .txt_wrap strong{font-size: 16px;}
	#award .award .txt_wrap p{font-size: 11px;}
	#contact .copy{top: 100px}
	#contact .logo_wave_content .logo_way{transform: translateX(-30%)}
	#contact .logo_wave_content svg{width: 1700px;height: auto}
	#contact .logo_wave_content .logo_w div img{width: 120px;display: block}
	#contact .logo_wave_content .logo_w div{border-radius: 5px}
	#contact .logo_wave_content {height: 192px;margin-top: -170px;}
	#contact{padding: 100px 0}
	#beyond_content .b_img_content .img{width: 120vw}
	#we_service{padding: 60px 20px;padding-top: 0}
	#we_service .info_s_text{padding-bottom: 40px}
	#project_list .pro > div .info p{gap: 5px 10px }
	#project_list .pro01 .left img, #project_list .pro02 .left img{width: 120px}
	#project_list .pro03 .left img{width: 160px;}
	#project_list .pro > div .info p span{display: none}
	#project_list .pro > div .left{height: auto;}
	#project_list .pro > div{flex-wrap: wrap}
	#main #unique .uni_title .tit02 .line{display: none}
	.award .img_w .img{border-radius: 8px;}
	#project_list .pro > div .right > div{width: 100%}
	#project_list .pro > div .right video{width: 100%}
	#project_list .pro > div .right{width: 100%;margin-top: 20px}
	#project_list .pro > div .info strong{font-size: 37px}
	#project_list .pro > div .info p{font-size: 14px}
	#we_service .we_wrap > div{opacity: 1}
	#contact .thd_logo .thd_w img{width: 400px}
	#contact .txt_w strong{font-size: 140px}
	#we_service2 .icon04{margin-left: 0px}
	#we_service2 .icon04 img{width: 200px}
	#we_service2 .icon01 {margin-top: -531px;margin-left: -41px;}
	#we_service2 .icon01 img{width: 60px}
	#we_service2 .icon06{margin-top: 490px}
	.wrapper{margin-top: -190px;}
	.aw_content  .aw_tr video{width: 490px}
}
@media (max-width: 660px) {
    .copy_title strong{font-size: 130px;}
    .copy_title strong{font-size: 60px;}
    #main #top_1 .work_list2 ul li .info_w {padding: 10px;}
    #main #top_1 .work_list2 ul{gap: 10px}
    #main #top_1 .work_list2 ul li{width: calc(50% - 5px)}
    .item-5{width: 250px;height: 110px;}
    #footer .ft03{flex-direction: row;gap: 20px;flex-wrap: wrap;padding-bottom: 60px;}
    #footer .ft03 > div{width: 100%}
    .main_visual .vis_title strong, #award .title strong, #main #unique .uni_title .tit01 strong, #member .mem_content .mem_title .tit_wrap strong{font-size: 50px;}
    #award .cir div strong{font-size: 13px;}
    #award .cir div span{line-height: 22px;font-size: 13px;padding: 0 6px}
    #award .cir i svg{width: 130px}
    #award .award_wrap .award .img_w .img{width: 250px}
    #award .award_wrap .aw_wrap3{margin-left: -125px}
    #award .award_wrap .aw_wrap4 .img_w .img{width: 200px}
    #award .award_wrap .aw_wrap2 .img_w .img{width: 200px}
    #award .award_wrap .aw_wrap4 {bottom: 90px;margin-left: 174px;}
    #award .award_wrap .aw_wrap3 {bottom: 53px;}
    #award .award_wrap .aw_wrap2 {margin-left: -373px;bottom: 90px;}
    #award .award_wrap .award_list{height: 660px}
    #award .award_wrap .award_list .obj{top: 0}
    #award .award_wrap .award_list .obj img{width: 210px;}
    #main #unique .unique_list .monitor_w .monitor_in {
        width: 550px;
        height: 350px;
        padding: 10px;
    }
    #main #unique .unique_list .ring_list{padding-top: 435px}
    #main #unique .unique_list .ring_list .ring01 .ring_box img{width: 600px}
    #main #unique .unique_list .ring_list .ring02 .ring_box img{width: 500px}
    #main #unique .unique_list .ring_list .ring03 .ring_box img {width: 420px;}
    #main #unique .unique_list .ring_list .ring04 .ring_box img {width: 320px;}
    #main #unique .unique_list .ring_list .ring05 .ring_box img {
        width: 280px;
    }
  
    #footer .ft02 > div.f01 strong{font-size: 17px;line-height: 1}
    #footer .ft01 strong{font-size: 50px;}
    #footer .ft01 p{font-size: 12px;line-height: 1.5}
        #member .mem_content .mem_title{display: block}
    #member .mem_content .mem_title{position: relative;z-index: 5}
    .vm_btn a{width: 140px;height: 36px;}
    .vm_btn a strong{font-size: 13px}
    .vm_btn{margin-top: 10px;}
    .vm_btn a{padding: 0 15px}
    .vm_btn a svg{width: 10px;height: auto;display: block}
    #member .mem_content .sl_w{margin-top: 20px;}
        #member .mem_content .sl_w {
        height: 240px;
    }
        #member .mem_content .sl_w .bg {
        margin-left: -125px;bottom: 60px
    }
    #cursor > img{display: none;}
    #cursor img{width: 100px;}

}
@media (max-width: 560px) {
  .aw_content .txt{gap: 5px}
  .copy_title strong i{top: 0;}
        #main #top_1 .work_list2 ul li .info_w{height: 100%;padding-top: 45px}
    #main #top_1 .work_list2 ul li .info p{word-break: keep-all}

        #member .mem_content{padding-top: 40px;border-radius: 10px;}

    #footer .ft02 > div.f02 ul li span{font-size: 12px;}
    #footer .ft02 > div.f02 ul li p{font-size: 11px;line-height: 1.5}
    #award .award_wrap .award .txt_wrap p{font-size: 10px}

	#header #logo svg{width: 105px;;height: auto}
	#header .hd_inner .open_btn button{gap: 5px;}
    .main_visual .vis_title strong, #award .title strong, #main #unique .uni_title .tit01 strong, #member .mem_content .mem_title .tit_wrap strong{font-size: 40px;}
        .main_visual .vis_title .tit_w02 {
        transform: translateX(50px);
    }
    .main_visual .vis_title{gap: 10px}
    #award .award_wrap .award .img_w .img{width: 200px;}
    #award .award_wrap .aw_wrap3{margin-left: -100px;}
    #award .award_wrap .award .txt_wrap strong{font-size: 16px;margin-bottom: 5px}
    #award .award_wrap .award .txt_wrap p{font-size: 12px;}
    #award .award_wrap .aw_wrap4 {bottom: 20px;margin-left: 124px;}
    #award .award_wrap .aw_wrap2 {margin-left: -322px;bottom: 90px;}
    #award .award_wrap .award_list{height: 550px}
    #main #unique{padding-top: 60px;}
    #main #unique .uni_title .tit02{flex-wrap: wrap}
    #main #unique .uni_title .tit02 .txt_b{width: 100%}
    #main #unique .uni_title .tit02 strong{font-size: 30px;}
    #main #unique .uni_title .tit02 .txt_b{top: 0}
    #main #unique .uni_title .tit02{margin-top: 0}
    #main #unique .uni_title .tit02 .line{display: block}
    #main #unique .uni_title .tit02 .line:after{width: 8px;height: 8px;right: -4px;margin-top:  -4px;}
    #main #unique .uni_title .tit02 .line:before{width: 8px;height: 8px;left: -4px;margin-top: -4px;}
    #main #unique .uni_title .tit02 .txt_b{flex-direction: column}
    #main #unique .uni_title .tit02 .txt_b strong{margin-bottom: 10px;}
    #main #unique .uni_title .tit02{margin-bottom: 0}
    #main #unique .shape_bg01 {top: 258px;left: -257px;}
    #main #unique .shape_bg02 {
    top: 324px;
    right: -140px;
}
    #main #unique .shape_bg02 img{width: 400px;}
    #main #unique .unique_list{margin-top: -290px;}
    #footer .ft02 > div.f02 ul{gap: 25px 0;}
     #footer .ft02 > div.f02 ul:after{margin-left: -15px}
    #footer .ft02 > div.f02, #footer .ft02 > div{margin-bottom: 20px;padding-bottom: 20px;}
    #footer .ft01{gap: 10px;margin-bottom: 15px;}
    #main #unique .unique_list .project_info{width: auto}
    #main #unique .unique_list .project_info ul li p svg{width: 16px;height: auto}
    .aw_obj_wrap{width: 200px}
    #main .card {transform: rotateY(calc((360deg / 13) * var(--index))) translateZ(370px) translateY(calc(70px * var(--index)));width: 170px}
    .award .txt_wrap strong{font-size: 15px;line-height: 1.2}
    .aw_obj_wrap{left: 50%;top: 50%;margin-top: -435px;margin-left: -105px}
    #award{padding-top: 0}
    #project_list .pro > div .info strong{font-size: 30px}
    .award .txt_wrap{padding: 5px;}
    #we_service2 .we_wrap{transform: scale(1);gap: 10px;}
    #we_service2 .ser{width: calc(50% - 5px);}
    #we_service2 .info_s_text03{margin-top: 0;top: auto;bottom: -80px;left: auto;margin-right: 0;margin-left: 0;right: 20px}
    #main #award .aw_t{width: 300px;height: 168.75px}
    #award .award_title .aw_list ul li{opacity: 1}
    #main #award{padding-top: 0}
      #main .card.prev8 { transform: rotateY(-221.5403deg) translateZ(350px) translateY(-560px);  transition: 3s linear}
    #main .card.prev7 { transform: rotateY(-193.8461deg) translateZ(350px) translateY(-480px); ;transition: 3s linear}
    #main .card.prev6 { transform: rotateY(-166.1538deg) translateZ(350px) translateY(-420px); transition: 3s linear}
    #main .card.prev5 { transform: rotateY(-138.4615deg) translateZ(350px) translateY(-350px);  transition: 3s linear}
    #main .card.prev4 { transform: rotateY(-110.7692deg) translateZ(350px) translateY(-280px);  ;transition: 3s linear}
    #main .card.prev3 { transform: rotateY(-83.0769deg)  translateZ(350px) translateY(-210px);  ;transition: 3s linear}
    #main .card.prev2 { transform: rotateY(-55.3846deg)  translateZ(350px) translateY(-140px);  ;transition: 3s linear}
    #main .card.prev1 { transform: rotateY(-27.6923deg)  translateZ(350px) translateY(-70px);  ;transition: 3s linear}
    #main .card{opacity: 0}

    /* 가운데 (7번) */
    #main #award{padding-top: 140px;}
    .wrapper{margin-top: 10px;}
    .aw_obj_wrap{margin-left: -10px;}
    .aw_content .txt p{font-size: 11px;}
    #main .card.on { transform: rotateY(0deg) translateZ(350px) translateY(0px); opacity: 1;transition: 3s linear}
    /* 오른쪽 그룹 (8~13번) */
    #main .card.next1  { transform: rotateY(27.6923deg)  translateZ(350px) translateY(70px)  ;transition: 3s linear}
    #main .card.next2  { transform: rotateY(55.3846deg)  translateZ(350px) translateY(140px);transition: 3s linear}
    #main .card.next3 { transform: rotateY(83.0769deg)  translateZ(350px) translateY(210px);transition: 3s linear}
    #main .card.next4 { transform: rotateY(110.7692deg) translateZ(350px) translateY(280px);transition: 3s linear}
    #main .card.next5 { transform: rotateY(138.4615deg) translateZ(350px) translateY(350px);transition: 3s linear;mix-blend-mode: difference}
    #main .card.next6 { transform: rotateY(166.1538deg) translateZ(350px) translateY(420px);transition: 3s linear}
    #main .card.next7 { transform: rotateY(193.8461deg) translateZ(350px) translateY(490px);transition: 3s linear}
    #main .card.next8 { transform: rotateY(221.5403deg) translateZ(350px) translateY(560px);transition: 3s linear}
	.aw_content  .aw_tr video{width: 390px}
}

@media (max-width: 500px) {
    #main #unique .unique_list .ring_list{gap: 500px}
  #main #unique .unique_list{margin-top: -200px;}
  #main #unique .unique_list .monitor_w .monitor_in{width: 330px;height: 220px;padding: 5px;}
    .copy_title .copy03 img, .copy_title .copy03, .copy_title .copy03 > div strong{width: 280px}
   
    #award .award_wrap .award .img_w .img{width: 170px}
    #award .award_wrap .aw_wrap3{margin-left: -85px}
    #award .award_wrap .aw_wrap2{margin-left: -295px}
    #main #unique .uni_title .tit02{gap: 10px}
    #main #unique .uni_title .tit02{margin-top: 10px;}
    #main #unique .shape_bg01 img {width: 320px;}
    #main #unique .shape_bg01{left: -125px}
    #main #unique .shape_bg02 img{width: 250px}
    #main #unique .shape_bg02{right: -90px}
    #contact .port.port01 img{width: 150px}
        #contact .port .port_w {
        border-radius: 6px;
        padding: 5px;
    }
    #contact {
        padding: 160px 0;
        padding-top: 30px;
    }
    #contact .copy .copy01 strong{font-size: 100px;line-height: 100px;}
    #contact .port.port02{top: 400px;}
    #contact .txt_w .btn_w a {width: 100px;height: 100px;}
    #contact .txt_w .btn_w{margin-top: 20px;}
    #footer .ft01 strong{font-size: 35px;}
    #footer .ft01 p{font-size: 11px;}
    #main #unique .unique_list .project_info ul li span, #main #unique .unique_list .project_info ul li p{font-size: 11px}
}