html{scroll-behavior: smooth}

.sc_send{position: fixed;bottom: 110px;left: 50px;z-index: 99;text-align: center}
.sc_send .sc_txt{text-align: center;margin-bottom: 7px;position: relative;display: inline-block}
.sc_send .sc_txt:after{content: '';display: block;position: absolute;width: 100%;height: 100%;background: url(/img/sub/sc_txt_dark.png);top: 0;left: 0;opacity: 0;transition: 0.6s}
.dark .sc_send .sc_txt:after{opacity: 1}
.sc_send .sc_txt img{display: block;margin: 0 auto;opacity: 1;transition: 0.6s}
.dark .sc_send .sc_txt img{opacity: 0}
.sc_send .send{position: relative;transition: 0.6s}
.sc_send.on .send{transform: rotate(180deg)}
.sc_send .send img{display: block}
.sc_send .send .base{position: relative}
.sc_send .send .base:after{content: '';display: block;background: url(/img/sub/send_box2_dark.png);position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;transition: 0.6s;background-size: 100% 100%}
.dark .sc_send .send .base:after{opacity: 1}


.sc_send .send .sn_w{width: 17px;height: 18px;position: absolute;left: 50%;margin-left: -8.5px;}
.sc_send .send .sn_w.top{top: 8.5px}
.sc_send .send .sn_w.bottom{bottom: 2px;}
.sc_send .send .sn_w div{width: 100%;height: 100%;position: relative}
.sc_send .send .sn_w div i{position: absolute;background: url(/img/sub/sd01.png) bottom ;display: block;width: 100%;height: 100%;bottom: 0;max-height: 100%}
.sc_send .send .sn_w.bottom div i{background: url(/img/sub/sd02.png) bottom;top: auto;bottom: 0;height: 0}
.sc_send.on .send .sn_w{margin-left: -9px;}
.sc_send.on .send .sn_w.bottom{bottom: 4px}
.sc_send.on .send .sn_w.bottom div i{background: url(/img/sub/sd01.png) bottom;top: auto;bottom: 0;height: 0;transform: rotate(180deg)}
.sc_send.on .send .sn_w.top div i{background: url(/img/sub/sd02.png) top;top: auto;top:0;height: 0;transform: rotate(180deg)}
.sc_send.on .send .sn_w.top div i{top: 0;bottom: 0;background-position: bottom}
.sc_send.on .send .sn_w.bottom div i{top: -5px;bottom: auto}

.sc_send .send:before{content: '';display: block;width: 1px;height: 5px;background: url(/img/sub/send_deco.png);position: absolute;left: 50%;top: 65%;animation: down 2s infinite linear;margin-left: -0.5px}
.sc_send .send:after{content: '';display: block;width: 1px;height: 5px;background: url(/img/sub/send_deco.png);position: absolute;left: 50%;bottom: 65%;animation: down2 2s infinite linear;display: none;margin-left: -0.5px}
.sc_send.on .send:after{display: block}
.sc_send.on .send:before{display: none}
.sc_send.on .send .sn_w.top{top: 1.5px}
@keyframes down{
    0%{transform: translateY(0)}
    50%{transform: translateY(2px)}
    100%{transform: translateY(0)}
}
@keyframes down2{
    0%{transform: translateY(0)}
    50%{transform: translateY(-2px)}
    100%{transform: translateY(0)}
}
.sc_send{bottom: 110px}
#smoother-content{-webkit-overflow-scrolling: touch}
body.dark{background: #1C1311}
#cursor2.on3{width: 100px;height: 100px;background: url(/img/main/view_over.png) center center;mix-blend-mode: normal}
.fix_video video{width: 900px;}
.fix_video.light{display: block}
.fix_video.dark{display: none}
.dark .fix_video.light{display: none}
.dark .fix_video.dark{display: block}
.m_wrap .con01 {position: relative;background: #fff;height: 100vh;overflow: hidden}
.m_wrap .con01 .img{position: absolute;top: 50%;left: 50%;transform: scale(0.4) ;margin-left: -450px;margin-top: -450px;}
.w_logo{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0;opacity: 0;transition: 1s}
.w_logo.on{opacity: 1}
.w_logo .wrap{animation: logo 3s infinite linear}
@keyframes logo{
    0%{transform: translateY(-20px)}
    50%{transform: translateY(40px)}
    100%{transform: translateY(-20px)}
}
.mode {position: fixed;left: 50px;bottom: 60px;z-index: 99}
.mode button{background:none}
.mode.light{display: none}
.mode.dark{display: block}

.dark .mode.white{display: block}
.dark .mode.dark{display: none}
.dark .mode button p{color: #fff}
.mode button > *{display: inline-block;vertical-align: middle}
.mode button span{position: relative}
.mode button span i.d_icon01{position: relative}
.mode button span i{position: absolute;left: 0;top: 0}
.mode button p{font-size: 14px;color: #6A534D;font-family: 'Ubuntu', sans-serif;font-weight: 800;margin-left: 8px;font-family: "scotch-display", sans-serif;}
.dark #header .mode button p{color: #fff}
.mode button:hover span i{animation: mode 0.6s }
.mode button:hover span i.d_icon02{animation-delay: 0.1s}
.mode button:hover span i.d_icon03{animation-delay: 0.2s}
.mode button:hover span i.d_icon04{animation-delay: 0.3s}
.mode button:hover span i.d_icon05{animation-delay: 0.4s}
.mode button:hover span i.d_icon06{animation-delay: 0.5s}
.mode button:hover span i.d_icon07{animation-delay: 0.6s}
.mode button:hover span i.d_icon08{animation-delay: 0.7s}
.mode button:hover span i.d_icon09{animation-delay: 0.8s}

.m_wrap .con01 .img{perspective: 1000px;backface-visibility:hidden;}
.m_wrap .con01 .img .img_2{border-radius: 50%;position: relative;opacity: 0;transition-delay: 0.2s}
.m_wrap .con01 .img .video{border-radius: 50%;overflow: hidden}
.m_wrap .con01 .img .video video{width: 100%}
.dark .m_wrap .con01 .img .img_2{border: 4px solid #1C1311}
.m_wrap .con01 .img .img_2 img{display: block;border-radius: 50%;border: 4.5px solid #ecd8d3}

.dark .m_wrap .con01 .img:hover .img_2{border: 4px solid #FF5700}
.m_wrap .con01.act .img .img_2{opacity: 1}
.m_wrap .con01 .img .img_2 .award{position: absolute;z-index: 2;opacity: 1;transform: scale(1);transition: 0.8s}
.m_wrap .con01 .img .img_2{box-shadow: 0px 0px 0px rgba(255,179,0,0.7);transition: 1s;border: 4px solid #fff}
.m_wrap .con01 .img:hover .img_2{box-shadow: 0px 0px 50px  rgba(255,179,0,0.7);transition: 1s;border: 4px solid #FF5700}
.m_wrap .con01 .img.on .img_2{box-shadow: 0px 0px 50px  rgba(255,179,0,0.7);transition: 1s;border: 4px solid #FF5700}
.m_wrap .con01 .img .img_2 .award img{width: 150px}
.m_wrap .con01 .img.img03 .img_2 .award img{width: 180px}
.m_wrap .con01 .img:hover .img_2 .award{transform: scale(1);opacity: 1}
.m_wrap .con01 .img .img_2 .award{right: 80px;top: 30px}
.m_wrap .con01 .img.img03 .img_2 .award{left: 80px;top: 30px}
.m_wrap .con01 .img.img02:hover .img_2 .award,
.m_wrap .con01 .img.img05:hover .img_2 .award,
.m_wrap .con01 .img.img04:hover .img_2 .award{opacity: 1}
.m_wrap .con01 .img > div{perspective: 1000px}

/*.m_wrap .con01 .img02 .skew, .m_wrap .con01 .img04 .skew{transform: rotateY(-60deg)}*/

.m_wrap .con01 .img .skew .vid{width: 900px;height: 900px;overflow: hidden;position: relative;border-radius: 50%}
.m_wrap .con01 .img .skew .vid video{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);height: 100%}

/* 모션 뺀거 여기있다
.m_wrap .con01.act .img .skew{animation : vis_motion 1.4s;animation-fill-mode: forwards;opacity: 0}
.m_wrap .con01 .img02 .skew, .m_wrap .con01 .img04 .skew{animation : vis_motion2 1.4s;animation-fill-mode: forwards;}
*/
@keyframes vis_motion{
    0%{transform: rotateY(60deg);opacity: 0;filter: blur(20px)}
    100%{transform: rotateY(0);opacity: 1;filter: blur(0)}
}
@keyframes vis_motion2{
    0%{transform: rotateY(-60deg);opacity: 0;filter: blur(20px)}
    100%{transform: rotateY(0);opacity: 1;filter: blur(0)}
}

/*
.m_wrap .con01 .vis_txt .skew{transform: rotateX(50deg);filter: blur(50px);transition: 1.2s;opacity: 0}
.m_wrap .con01.act .vis_txt .skew{animation : vis_motion3 1.4s;animation-fill-mode: forwards;animation-delay: 0.2s}
*/
@keyframes vis_motion3{
    0%{transform: rotateX(50deg);filter: blur(50px);transition: 1.2s;opacity: 0}
    100%{transform: rotateX(0);filter: blur(0);opacity: 1}
}
.no-js { opacity: 1} 
.m_wrap .con01.act .img01 .skew{animation-delay: 1.2s}
.m_wrap .con01.act .img02 .skew{animation-delay: 1.2s}
.m_wrap .con01.act .img03 .skew{animation-delay: 1.4s}
.m_wrap .con01.act .img04 .skew{animation-delay: 1.6s}
.m_wrap .con01.act .img05 .skew{animation-delay: 1.8s}
.no-js { opacity: 1} 
.m_wrap .con01.act .img01 .skew{animation-delay: 1.2s}
.m_wrap .con01.act .img02 .skew{animation-delay: 1.2s}
.m_wrap .con01.act .img03 .skew{animation-delay: 1.4s}
.m_wrap .con01.act .img05 .skew{animation-delay: 1.8s}

.white_layer{display: inline-block !Important}
.dark_layer{display: none !Important}
.dark #main .main_con04 .txt_w ul li strong{color: #fff}
.dark .m_wrap .con03 .limit_txt ul li{color: #fff}
.dark .white_layer{display: none !Important}
.dark .dark_layer{display: inline-block !Important}
.dark .dark_layer{display: inline-block !Important}
.dark #main .main_con04 .we_make2:after{background: #1C1311}
.dark #main .main_con04 .we_make2:before{background: #1C1311}
.dark #main .main_con04{background: #1C1311}
.dark #main .main_con04 .port_btn a{background: #1C1311;border-color: #4B312C}
 .main_con04 .video .light{display: block}
 .main_con04 .video .dark{display: none}
.dark .main_con04 .video .light{display: none}
.dark .main_con04 .video .dark{display: block;max-width: 1920px}
.m_wrap .con01 .img .img_w .line i{position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 1.5px solid #ff5700; display: block;top: 0;left: 0;animation: 3s ripples infinite linear;image-rendering: -moz-crisp-edges; /* firefox */
  image-rendering: -o-crisp-edges; /* opera */
  image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
  image-rendering: crisp-edges;}
.m_wrap .con01 .img02 .img_w .line i{position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 3px solid #ff5700; }

.m_wrap .con01 .img .img_w .line i.line2{animation-delay: 1s}
.m_wrap .con01 .img .img_w .line i.line3{animation-delay: 2s}
.m_wrap .con01 .img .img_w > .line{opacity: 0;transition: 1s}
.m_wrap .con01 .img .img_w > .line:hover{opacity: 1}
.m_wrap .con01 .img.on .img_w > .line{opacity: 1}
@keyframes ripples{
    0%{transform: scale(1);opacity: 1}
    100%{transform: scale(1.07);opacity: 0}
}
.m_wrap .con01 .img .txt{position: absolute;left: 860px;top: 440px;opacity: 0;transition: 1s}

.m_wrap .con01 .img:hover .txt{opacity: 1}
.m_wrap .con01 .img .txt strong{font-family: "scotch-display", sans-serif;text-shadow: 0 0 10px rgba(255,87,0,1);color: #fff;font-size: 48px;line-height: 58px;}
.m_wrap .con01 .img .txt p{font-size: 24px;color: #fff;text-shadow: 0 0 10px rgba(255,87,0,1);margin-top: 8px;}
.m_wrap .con01 .img.img05{z-index: 4}
.m_wrap .con01 .img.img03{z-index: 4}
.m_wrap .con01 .img.img02{z-index: 4}
.m_wrap .con01 .img .video{width: 900px;height: 900px;border-radius: 50%;overflow: hidden;position: relative}
.m_wrap .con01 .img .video iframe{width: 206%;height: 100%;position: absolute;left: 50%;transform: translateX(-50%)}
.m_wrap .con01 .vis_txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1}
.m_wrap .con01 .vis_txt .skew{position: relative;overflow: hidden}
.m_wrap .con01 .vis_txt .skew .line_txt{position: absolute;top: 0;left: 0;opacity: 0}
.m_wrap .con01 .vis_txt{perspective: 500px}

.con01 .bg{opacity: 1}
.con01 .base_image{position: absolute;top: 0;left: 0;z-index: 11;transition: 2s;animation: 2s base_position;animation-fill-mode: forwards;width: 2020px;;left: 50%;margin-left: -1010px;height: 100%;animation-delay: 2.4s; }
.con01 .base_image .vid{position: relative;width: 100%;height: 100vh}
.con01 .base_image .vid .vid_title{position: absolute;top: 50%;transform: translateY(-50%);padding-left: 100px}
.con01 .base_image .vid .vid_title strong{font-size: 200px;color: #fff;font-family: "scotch-display", sans-serif;font-weight: 600;display: flex}
.con01 .base_image .vid .vid_title strong i{color: inherit;font-weight: inherit;font-family: inherit;opacity: 0;filter: blur(20px);animation: 1.5s base_txt_blur;animation-fill-mode: forwards}
.con01 .base_image .vid .vid_title strong i:nth-child(1){animation-delay: 0s}
.con01 .base_image .vid .vid_title strong i:nth-child(2){animation-delay: 0.1s}
.con01 .base_image .vid .vid_title strong i:nth-child(3){animation-delay: 0.2s}
.con01 .base_image .vid .vid_title strong i:nth-child(4){animation-delay: 0.3s}
.con01 .base_image .vid .vid_title strong i:nth-child(5){animation-delay: 0.4s}
.con01 .base_image .vid .vid_title strong i:nth-child(6){animation-delay: 0.5s}
.con01 .base_image .vid .vid_title strong i:nth-child(7){animation-delay: 0.6s}
.con01 .base_image .vid .vid_title strong i:nth-child(8){animation-delay: 0.7s}
.con01 .base_image .vid .vid_title strong i:nth-child(9){animation-delay: 0.8s}
.con01 .base_image .vid .vid_title strong i:nth-child(10){animation-delay: 0.9s}
.con01 .base_image .vid .vid_title .info_w{display: flex;align-items: center;gap: 17px;animation: 1.5s base_txt_blur;animation-fill-mode: forwards;animation-delay: 1s;opacity: 0;filter: blur(20px);}
.con01 .base_image .vid .vid_title .info_w p{font-size: 20px;color: #FFFFFF;gap: 12px;display: flex;align-items: center}
.con01 .base_image .vid .vid_title .info_w p i{display: block;width: 1px;height: 14px;background: rgba(255,255,255,0.5)}
.con01 .base_image .vid .vid_title .info_w span{color: #FFFFFF;font-size: 16px;}
.con01 .base_image .vid .vid_title .info_w svg{display: block;}
.con01 .base_image .vid .vid_title .innov{width: 204px;height: 40px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.1);backdrop-filter: blur(20px);border-radius: 50px}
.con01 .base_image .vid video{height: 100vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.con01 .base_image .ov_list{width: 604px;height: 604px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: 1s;z-index: 15;opacity: 0;filter: blur(20px);animation: 1.5s base_txt_blur;animation-fill-mode: forwards;animation-delay: 4.2s}
.con01 .base_image .ov_list .txt {position: absolute;left: -80px;top: 60%;opacity: 0;transition: 1.2s}
.con01 .base_image .ov_list:hover .txt{opacity: 1}
.con01 .base_image .ov_list .txt strong{font-family: "scotch-display", sans-serif;text-shadow: 0 0 10px rgba(255,87,0,1);color: #fff;font-size: 48px;line-height: 58px;}
.con01 .base_image .ov_list .txt p{font-size: 24px;color: #fff;text-shadow: 0 0 10px rgba(255,87,0,1);margin-top: 8px;}
.con01 .base_image .vid .vid_title > strong{animation: 2s hide_mo;animation-delay: 2.4s;animation-fill-mode: forwards}
.con01 .base_image .vid .vid_title .info_w > *{animation: 2s hide_mo;animation-delay: 2.4s;animation-fill-mode: forwards}
.con01 .base_image .ov_list .line i{position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 1.5px solid #ff5700; display: block;top: 0;left: 0;animation: 3s ripples infinite linear;image-rendering: -moz-crisp-edges; /* firefox */
  image-rendering: -o-crisp-edges; /* opera */
  image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
  image-rendering: crisp-edges;}
.con01 .base_image .ov_list .line i{position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 1px solid #ff5700; }

.con01 .base_image .ov_list .line i.line2{animation-delay: 1s}
.con01 .base_image .ov_list .line i.line3{animation-delay: 2s}
.con01 .base_image .ov_list > .line{transition: 1s;width: 100%;height: 100%;border-radius: 50%;box-shadow: 0px 0px 50px rgba(255, 179, 0, 0.7);border: 2px solid #ff5700;}
.con01 .base_image .ov_list > .line:hover{opacity: 1}
.m_wrap .con01 .img.on .img_w > .line{opacity: 1}

.con01 .award_box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 55;mix-blend-mode: darken;pointer-events: none}
.con01 .award_box .award_w{position: relative}
.con01 .award_box .award_w .aw_txt{position: absolute;left: 50%;transform: translateX(-50%);bottom: -40px;display: flex;flex-direction: column;align-items: center;justify-content: center}
.con01 .award_box .award_w .aw_txt > i{display: block}
.con01 .award_box .award_w .aw_txt2{display: flex;align-items: center;justify-content: center;text-align: center;margin-top: 15px}
.con01 .award_box .award_w .aw_txt2 span{display: block;font-size: 18px;color: #57413B;margin-bottom: 8px;}
.con01 .award_box .award_w .aw_txt2 b{color: #E7420E;font-weight: inherit}
.con01 .award_box .award_w .aw_txt2 strong{font-size: 30px;color: #57413B;}
.con01 .award_box .award_w video{width: 1172px;height: auto;image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;}
.con01 .award_box .award_w .video{animation: 1.2s base_scale;animation-fill-mode: forwards;will-change: transform;animation-delay: 4.4s;opacity: 0;backface-visibility: hidden;
  transform-style: preserve-3d;transform: scale(0.7) translateZ(0);transform-origin: center center;}
.con01 .award_box .award_w .aw_txt > i{animation: 1.2s base_txt;animation-fill-mode: forwards;will-change: transform;animation-delay: 4.6s;opacity: 0;transform: translateY(70px)}
.con01 .award_box .award_w .aw_txt2{animation: 1.2s base_txt;animation-fill-mode: forwards;will-change: transform;animation-delay: 4.9s;opacity: 0;transform: translateY(70px)}


/*new motion -- 250605*/
.con01 .base_image .vid{animation: 2s base_circle;animation-fill-mode: forwards;will-change: clip-path;animation-delay: 2.4s;backface-visibility: hidden;
  transform-style: preserve-3d; transform: translate3d(0, 0, 0) translateZ(0); will-change: clip-path; animation-timing-function: ease-in-out;}
@keyframes base_circle{
    0%{clip-path: circle(1050px at 50% 50%);}
    100%{clip-path: circle(300px at 50% 50%);}
}
@keyframes base_position{
    0%{transform: translateX(0%) translateY(0%)}
    100%{transform: translateX(47%) translateY(-4%);}
}
@keyframes hide_mo{
    0%{transform: translateX(0%) }
    100%{transform: translateX(-100%);}
}

@keyframes base_scale {
  0% { transform: scale(0.7) translateZ(0); opacity: 0; }
  100% { transform: scale(1) translateZ(0); opacity: 1; }
}
@keyframes base_txt{
    0%{transform: translateY(70px);opacity: 0}
    100%{transform: translateY(0);opacity: 1}
}
@keyframes base_txt_blur{
    0%{filter: blur(20px);opacity: 0}
    100%{filter: blur(0);opacity: 1}
}
/*.con01.act .base_image .vid {clip-path: circle(300px at 50% 50%);}*/
.con01 .bg video{width: 100%}
.con02 .bg_circle{position: absolute;height: 100vh;width: 100%;overflow: hidden}
.con02 .bg_circle .cir{position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%}
.con02 .bg_circle .cir i{display: block;width: 2500px;height: 2500px;border: 1px solid #FF5700;border-radius: 50%;transform: scale(0);opacity: 0}
.con02 {overflow: hidden;height: 100vh ;width: 100%;position: relative}
.con02 .bg_w{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.fix_video {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.con02 .txt_list {height: 100vh;position: absolute;width: 100%;overflow: hidden; z-index: 2}
.con02 .txt_list .txt{position: absolute;top: 50%;left: 50%;font-size: 15px;width: 150px;line-height: 150px;margin-top: -75px;margin-left: -75px;transform: scale(0);z-index: }
.con02 .txt_list .txt strong{font-family: "scotch-display", sans-serif;font-size: 150px;color: #FF5700;animation: spell 5s infinite linear;display: block}
@keyframes spell{
    0%{transform: rotate(0)}
    100%{transform: rotate(360deg)}
}

.con02 .txt_list .txt{transition: 2s;transition-delay: 0.4s;transform: translate(0,0) scale(0)}
.con02.on .txt_list .txt.txt01{transform: translate(-1200px,-1200px) scale(0.8)}
.con02.on .txt_list .txt.txt02{transform: translate(-0,-1200px) scale(0.8)}
.con02.on .txt_list .txt.txt03{transform: translate(1200px,-1200px) scale(0.8)}
.con02.on .txt_list .txt.txt04{transform: translate(1200px,0) scale(0.8)}
.con02.on .txt_list .txt.txt05{transform: translate(1200px,1200px) scale(0.8)}
.con02.on .txt_list .txt.txt06{transform: translate(0,1200px) scale(0.8)}
.con02.on .txt_list .txt.txt07{transform: translate(-1200px,1200px) scale(0.8)}
.con02.on .txt_list .txt.txt08{transform: translate(-1200px,0) scale(0.8)}
.con02.on .txt_list .txt.txt09{transform: translate(-1400px,200px) scale(0.8)}
.m_wrap .con01 .img{transform: scale(0) ;margin-left: -450px;margin-top: -450px;z-index: 2}
.m_wrap .con01.act .img{opacity: 0}
.m_wrap .con01.act .img{opacity: 1;}
.m_wrap .con01 .img.img01{opacity: 1;}
.m_wrap .con01 .img.img01{transform: scale(1) translate(-100%,15%);z-index: 2}
.m_wrap .con01 .img.img02{transform: scale(0.32) translate(-101%,-142%);z-index: 3}
.m_wrap .con01 .img.img03{transform: scale(0.61) translate(150%,-10%);z-index: 3}
.m_wrap .con01 .img.img05{transform: scale(0.42) translate(98%,109%);z-index: 3}

.m_wrap .con01 .img06, .m_wrap .con01 .img07, .m_wrap .con01 .img08, .m_wrap .con01 .img04{opacity: 0;transform: scale(1)}
.m_wrap .con01.on .img06, .m_wrap .con01.on .img07, .m_wrap .con01.on .img08, .m_wrap .con01.on .img04{opacity: 0;transform: scale(1)}

.m_wrap .con01 .img06 > div, .m_wrap .con01 .img07 > div, .m_wrap .con01 .img08 > div, .m_wrap .con01 .img04 > div{transform: scale(0);transition-delay: 0s}
.m_wrap .con03 .limit_txt{position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%);text-align: center}
.m_wrap .con03 .limit_txt ul li{display: inline-block;color: #57413B;font-size: 72px;}
.m_wrap .con03 .limit_txt ul li span{color: #FF5700;}

#main .main_con01{padding-bottom: 300px}
#main .main_con01 strong{opacity: 0;transition: 1s}
#main .main_con01.on  strong{opacity: 1}
#main .main_con01 .txt{transition: 1s}
#main .main_con01 .txt{position: fixed;z-index: 3;top: 50%;width: 100%;margin-top: 250px;}
#main .main_con01.scale .txt{transform: scale(2);opacity: 0;top: 46%;filter: blur(15px);margin-top: 0}
#main .fix_video div{transform: rotate(0);transition: 1s}
#main .fix_video.vert div{transform: rotate(90deg);}

#main .fix_video.vert {transform: translate(-50%, -50%);opacity: 1}
#main .fix_video.vert video{width: 800px;}
#main .main_con02{position: relative;z-index: 10;overflow: hidden;padding-top: 600px}
#main .main_con02 .bg{position: absolute;left: 50%;top: 20%;transform: translateX(-50%)}
#main .main_con02 ul li{margin-top: -50px;}
#main .main_con02 ul li:nth-child(1){margin-top: 0}
#main .main_con02 ul li img{display: block;}
#main .main_con02 ul li.award strong{display: block;line-height: 66px;font-size: 50px;font-weight: 700;color: #fff;text-shadow: 0 0 10px rgba(255,87,0,100%);font-family: "scotch-display", sans-serif;}
#main .main_con02 ul li .wrap{position: relative;display: inline-block;perspective: 1000px}
#main .main_con02 ul li .wrap .txt{position: absolute;top: 330px;left: -28px;left: -40px;z-index: 3}
#main .main_con02 ul li .wrap .img_w{position: relative;z-index: 2;border-radius: 50%;width: 500px}
#main .main_con02 ul li .wrap .img_w .thumbnail{border-radius: 50%;overflow: hidden}
#main .main_con02 ul li .wrap .img_w .thumbnail > img{width: 100%;position: relative;z-index: 1;transition: 1.2s;}
#main .main_con02 ul li .wrap .img_w .thumbnail > img{ border:1px solid #ecd8d3; border-radius: 50%; }
#main .main_con02 ul li .wrap .img_w:hover .thumbnail > img{transform: scale(1.1)}
#main .main_con02 ul li .wrap .img_w strong{color: #fff;mix-blend-mode: difference;color: #fff}
#main .main_con02 ul li .wrap .txt p{color: #fff;font-weight: 900;font-size: 26px;font-weight: 600;margin-bottom: 15px;text-shadow: 0 0 10px rgba(255,87,0,100%)}
#main .main_con02 ul li .wrap .img_w p{color: #fff;}
#main .main_con02 ul li .wrap .img_w .col{position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 1px solid #FF5700; display: block;top: 0;left: 0;animation: 3s ripples2 infinite linear ;opacity: 0;transition: 1.5s}
#main .main_con02 ul li .wrap:hover .img_w .col{opacity: 1}
#main .main_con02 ul li .wrap .img_w .col_wrap{opacity: 0;transition: 1s}
#main .main_con02 ul li:hover .wrap .img_w .col_wrap{opacity: 1}
#main .main_con02 ul li .wrap .img_w .col{animation-delay: 0.7s}
#main .main_con02 ul li .wrap .img_w .col2{animation-delay: 1.4s}
#main .main_con02 ul li .wrap .img_w .col3{animation-delay: 2.1s}
#main .main_con02 ul li .wrap .img_w .col4{animation-delay: 2.8s}

#main .main_con02 ul li .wrap .img_w{box-shadow: 0 0 0 rgba(255,179,0,0.5);transition:  box-shadow 1s}
#main .main_con02 ul li .wrap:hover .img_w{box-shadow: 0 0 40px rgba(255,179,0,0.5)}



@keyframes ripples2{
    0%{transform: scale(0.98);opacity: 1}
    100%{transform: scale(1.1);opacity: 0}
}
#main .main_con02 ul li:after{content: '';display: block;clear: both;}
#main .main_con02 ul li .wrap{float: left;}
#main .main_con02 ul li:nth-child(2n) .wrap{float: right;}
.dark #main .main_con03{background: #1C1311}

#main .main_con02 > i{position: absolute;left: 50%;margin-left: -400px;top: 80%;transition: 0.1s}
#main .main_con02 > i img{display: block;opacity: 0;transition: 2s;margin-bottom: 400px;}
#main .main_con02.on > i img{display: block;opacity: 1}

#main .main_con02 ul li .wrap{position: relative;}
#main .main_con02 ul li .wrap > i{position: absolute;z-index: 10;left: 27px;top: -10px;perspective: 500px;display: block}

#main .main_con02 ul li .wrap > .flip-container{position: absolute;z-index: 10;left: 27px;top: -10px;perspective: 500px;display: block;perspective: 1000px;width: 120px;height: 120px;}

    .flip-card {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
      animation: flipAnimation 6s infinite;
    }

    .flip-card img {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; /* 뒷면이 보이지 않도록 설정 */
      object-fit: cover;
    }

	.flip-card img:nth-child(2){transform: rotateY(180deg)}

    /* 애니메이션 설정 */
    @keyframes flipAnimation {
	  0%{transform: rotateY(0deg)}
	  15%{transform: rotateY(0deg)}
	  35%{transform: rotateY(180deg)}
	  50%{transform: rotateY(180deg)}
	  65%{transform: rotateY(180deg)}
	  85%{transform: rotateY(360deg)}
	  100%{transform: rotateY(360deg)}
      
    }

#main .main_con02 ul li .wrap > i img{transition: 1s}
#main .main_con02 ul li .wrap:hover > i img{transform: rotateY(20deg)}
#main .main_con02 ul li .wrap > i img{display: block;border-radius: 50%;box-shadow: 0 0 40px rgba(0,0,0,0.16);width: 120px;}
#main .main_con02 ul li.on .wrap:hover > i{animation: 1s infinite linear ho_scale}
@keyframes ho_scale {
  0%{transform: translateY(0px);}
  50%{transform: translateY(-10px);}
  100%{transform: translateY(0px);}
}


.main_con02 .title {margin-bottom: 320px;}
.main_con02 .title strong{color: #57413B;font-size: 60px;letter-spacing: -1.8px;font-weight: 700}
.main_con02 .title strong span{font-weight: 700;color: #E7420E}
.main_con02 .title strong:before{content: '';display: inline-block;;width: 15px;height: 15px;background: #E7420E;margin-right: 25px;vertical-align: middle;border-radius: 50%}
.main_con02 .inner{width: 100%;padding-left: 168px;padding-right: 138px; padding-top: 50px; }
.color_bg #패스_248{transition: 1s}
.color_bg #패스_248:hover{d: path("M-960,603.435,960,1810.305,2880,603.434,960-603.436Z");transition: 1s}
.st1:hover{animation: 1s bgbg}
@keyframes bg {
    0%{d:path("M1,33l1.04,970.08c10.62-0.4,21.27-0.76,31.96-1.08c85.26-2.55,168.63-2.43,250,0c56.33,0,112.67,0,169,0c146.33,0,292.67,0,439,0c11.67,0,23.33,0,35,0c8.67,0,17.33,0,26,0c8,0,16,0,24,0c12,0,24,0,36,0c70.32,0.05,140.66,0.05,211,0 c149.35-0.11,298.68-0.44,448-1c83.08,0.69,166.16,1.39,249.24,2.08c0-323.36,0-646.72,0-970.08H1z")}
    100%{d:path("M1,33l1.04,970.08c0,0-27,71,258,137c0,0,316,65,629,63c7.74,0.23,18.52,1.48,30.45,6.02 c21.54,8.19,34.58,22.43,40.52,29.9c4.39-7.38,15.42-23.48,36-32c7.01-2.9,13.58-4.29,19.04-4.92c0,0,415-5,645-61 c0,0,251.4-52,261.2-138c9.8-86,0-970.08,0-970.08H1z")}
}

#main .main_con03{background: #ffffff;position: relative;z-index: 2;overflow: hidden;width: 100%;height: 915px;z-index: 35;margin-top: 200px;}
#main .main_con03 ul:after{content: '';display: block;clear: both}
#main .main_con03 ul{display: flex;height: 100%;top: 0;padding: 15px 0}
#main .main_con03 .base{height: 100vh}
#main .main_con03 .list{height: 20%;margin-bottom: 0;;box-sizing: border-box}
#main .main_con03 .list{;position: relative}
#main .main_con03 .list.right ul{position: absolute;right: 0}
#main .main_con03 ul {transition: 2.5s}
#main .main_con03 ul li{margin-right: 30px;height: 100%}
#main .main_con03 ul li:last-child{margin-right: 0}
#main .main_con03 ul li img{display: block;border-radius: 20px;overflow: hidden;overflow: hidden;box-shadow: 0 0 15px rgba(0,0,0,0.1); }
#main .main_con03 .left ul{transform: translateX(-3.5%)}

#main .main_con03 ul{perspective: 5000px;flex-wrap: nowrap }
#main .main_con03 ul li{overflow: hidden;border-radius: 15px; transform: rotateY(90deg);transition: 1s;opacity: 0}
#main .main_con03.on ul li{ transform: rotateY(0);opacity: 1}
#main .main_con03 ul li.timing2{transition-delay: 0.2s}
#main .main_con03 ul li.timing3{transition-delay: 0.4s}
#main .main_con03 ul li.timing4{transition-delay: 0.6s}
#main .main_con03 ul li.timing5{transition-delay: 0.8s}
#main .main_con03 ul li.timing6{transition-delay: 1s}
#main .main_con03 ul li.timing7{transition-delay: 1.2s}
#main .main_con03 ul li.timing8{transition-delay: 1.4s}
#main .main_con03 ul li.timing9{transition-delay: 1.6s}
#main .main_con03 ul li.timing10{transition-delay: 1.8s}
#main .main_con03 ul li.timing11{transition-delay: 2s}
#main .main_con03 .con{position: absolute;top: 0;height: 100vh;}
#main .main_con03 .dim_color{position: absolute;width: 100vw;height: 100%;top: 0;left: 0;background: url(/img/main/project_bg_left.png) no-repeat left center;transform: translateX(-100%);background-size: 100% 100%}
#main .main_con03 .dim_color.dim_right{position: absolute;width: 100vw;height: 100%;top: 0;left: 0;background: url(/img/main/project_bg_right.png) no-repeat right center;transform: translateX(100%);background-size: 100% 100%}
#main .main_con03 .dim{position: absolute;width: 100vw;height: 100vh;background: url(/img/main/project_bg01.png) center bottom; z-index: 2;top: 0;left: 0;opacity: 0;z-index: -1}
#main .main_con04{position: relative;padding-top: 450px;}
#main .main_con04 .deco{position: absolute;left: 50%;top: -3px;transform: translate(-50%);z-index: 5}
#main .main_con04 .deco img{display: block;transform: scaleY(0);transform-origin: top center}
#main .main_con04 .txt_w{text-align: center;margin-bottom: 240px;position: relative;z-index: 7}
#main .main_con04 .txt_w ul{display: inline-block}
#main .main_con04 .txt_w ul li{margin-bottom: 50px;}
#main .main_con04 .txt_w ul li{transform: translateX(60%);opacity: 0}
#main .main_con04 .txt_w ul li.line02{transform: translateX(-60%);opacity: 0}
#main .main_con04 .txt_w ul li strong{font-size: 60px;color: #57413B;position: relative}
#main .main_con04 .txt_w ul li strong i{display: block}
#main .main_con04 .txt_w ul li.line01 strong i{transform-origin: left center}
#main .main_con04 .txt_w ul li.line02 strong i{transform-origin: right center}
#main .main_con04 .txt_w ul li strong div{position: absolute;top: 50%;transform: translateY(-50%)}
#main .main_con04 .txt_w ul li:nth-child(1) strong div{right: -105px}
#main .main_con04 .txt_w ul li:nth-child(2) strong div{left: -123px}
#main .main_con04 .txt_w ul li:nth-child(3) strong div{right: -90px}
#main .main_con04 .txt_w ul li strong span{color: #FF5700}
#main .main_con04{background: #fff}
#main .main_con04 .we_make{display: block;margin: 0 auto;width: 1433px;overflow: hidden;position: relative;margin-bottom: 300px;position: relative;-webkit-overflow-scrolling: touch}
#main .main_con04 .we_make2{position: relative;z-index: 2}
#main .main_con04 .we_make2:after{content: '';display: block;width: 100%;height: 10px;position: absolute;bottom: -5px;background: #fff;z-index: 4}
#main .main_con04 .we_make2:before{content: '';display: block;width: 100%;height: 10px;position: absolute;top: -5px;background: #fff;z-index: 4}
#main .main_con04 .we_make .cir{position: absolute;width: 1600px;height: 1600px;background: linear-gradient(to right, #FFB300, #E7420E);margin-left: -800px;margin-top: -800px;top: 50%;left: 50%}
#main .main_con04 .port_btn {position: relative;z-index: 7}
#main .main_con04 .port_btn a{display: block;width: 300px;height: 150px;border-radius: 150px 150px 0 0;border: 1px solid #D6BFB9;margin: 0 auto;text-align: center;position: relative;position: relative;z-index: 2;background: #fff}
#main .main_con04 .port_btn a:after{content: '';display: block;width: 100%;height: 100%;border-radius: 150px 150px 0 0;    background: linear-gradient(to right, #FFB300, #E7420E);position: absolute;top: 0;left: 0;transform-origin: center bottom;transform: scale(0);transition: 1s}
#main .main_con04 .port_btn a:hover:after{transform: scale(1)}
#main .main_con04 .port_btn a div{position: relative;z-index: 2}
#main .main_con04 .port_btn a strong{display: block;line-height: 150px;font-size: 24px;color: #D6BFB9;font-family: "scotch-display", sans-serif;transition: 1s}
#main .main_con04 .port_btn a:hover strong{color: #fff}
#main .main_con04 .we_make img{display: block;position: relative;z-index: 2}
#main .main_con04 .we_make img.pc{display: block}
#main .main_con04 .we_make img.pc.white{display: block}
#main .main_con04 .we_make img.pc.dark{display: none}

.dark #main .main_con04 .we_make img.pc.white{display: none}
.dark #main .main_con04 .we_make img.pc.dark{display: block}

#main .main_con04 .we_make img.mo{display: none}
#main .main_con03 .right ul{opacity: 1;transform: translateX(-11%);transition: 2.5s}
#main .main_con03 .dim{background-size: 100% 100%}
#main .main_con03{height: 100vh;}
#main .main_con03 .txt strong{transform: translateY(80px);transition: 1.2s;opacity: 0;transition-delay: 1.8s}
#main .main_con03.on .txt strong{transform: translateY(0);opacity: 1;}

#main .main_con03 .go_link{transform: translateY(80px);transition: 1.2s;opacity: 0;transition-delay: 2.2s}
#main .main_con03.on .go_link{transform: translateY(0);opacity: 1;}
#main .main_con04 .water_drop{position: absolute;left: 50%;margin-left: -33px;bottom: 12%;z-index: 4}
#main .main_con04 .water_drop img{display: block;transform: translateY(-1300%)}

#main .main_con04 .we_make .cir{transform: scale(0);opacity: 0}
#main .main_con04 .water_drop div{transition: 1s}
#main .main_con04 .water_drop.on div{transform: translateY(300%)}

.main_con04 .video{position: absolute;bottom: 0;transform: translate(-50%, 50%);opacity: 0.4;left: 50%}
.main_con04 .video div{position: relative}
.main_con04 .video div:after{content: '';display: block;width: 100%;height: 100%;background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));;position: absolute;top: 0;left: 0}
.dark .main_con04 .video div:after{background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));}
.dark .main_con04 .video  {mix-blend-mode: multiply}
.fix_txt2{position: absolute;top: 50%;margin-top: -122.5px;transform: translateX(-100%)}
.dark .main_con04 .video{opacity: 1}

.m_wrap .con01.con01_1129 .img .txt span{display: inline-block;line-height: 36px;background: #C20007;border-radius: 18px;color: #fff;font-size: 18px;font-weight: 500;padding: 0 20px;margin-bottom: 4px;white-space: nowrap}
.m_wrap .con01.con01_1129 .img.img01 .txt{top: 435px;}
.m_wrap .con01.con01_1129 .img.img02 .txt{left: 675px;top: 425px;}
.m_wrap .con01.con01_1129 .img.img02 .txt span{line-height: 100px;padding: 0 46px;font-size: 38px;border-radius: 50px;margin-bottom: 10px;}
.m_wrap .con01.con01_1129 .img.img02 .txt strong{font-size: 108px;line-height: 1}
.m_wrap .con01.con01_1129 .img.img02 .txt p{font-size: 50px;line-height: 1}
.m_wrap .con01.con01_1129 .img.img03{transform: scale(0.75) translate(130%,-10%)}
.m_wrap .con01.con01_1129 .img05 .txt strong{font-size: 90px;line-height: 1}
.m_wrap .con01.con01_1129 .img05 .txt p{font-size: 40px;line-height: 1}
.m_wrap .con01.con01_1129 .img03 .txt p{font-size: 38px;line-height: 1.5}
.m_wrap .con01.con01_1129 .img03 .txt{right: auto;left: 0;top: auto;bottom: 100px}
.m_wrap .con01.con01_1129 .img05 .txt{right: auto;left: -100px;top: auto;bottom: 300px}
.m_wrap .con01 .vis_txt_area{position: absolute;top: 50%;transform: translate(-50%,-50%) ;margin-top: -10px;text-align: center;z-index: 10;left: 50%;width: auto;margin-left: 40px;}
.m_wrap .con01 .vis_txt_area ul{margin-bottom: 27px;perspective: 300px}
.m_wrap .con01 .vis_txt_area ul li{display: inline-block;margin-right: 28px;animation: vis_motion 1.1s;animation-delay: 0.2s;opacity: 0;animation-fill-mode: forwards}
.dark .m_wrap .con01 .vis_txt_area ul li #그룹_11 > path{fill: #fff}
.m_wrap .con01 .vis_txt_area ul li:nth-child(1){animation-delay: 0.2s;}
.m_wrap .con01 .vis_txt_area ul li:nth-child(2){animation-delay: 0.4s;}
.m_wrap .con01 .vis_txt_area ul li:nth-child(3){animation-delay: 0.6s;}
.m_wrap .con01 .vis_txt_area ul li:nth-child(4){animation-delay: 0.8s;}
.m_wrap .con01 .vis_txt_area ul li:nth-child(5){animation-delay: 1s;}
.m_wrap .con01 .vis_txt_area ul li:nth-child(6){animation-delay: 1.2s;}
.m_wrap .con01 .vis_txt_area ul li:last-child{margin-right: 0}

.m_wrap .con01 .vis_txt_area .title{opacity: 0;;filter: blur(20px); width: auto; }
.m_wrap .con01.act .vis_txt_area .title{animation: 1.5s title1;animation-fill-mode: forwards;animation-delay: 1.4s}

@keyframes title1{
      0%{opacity: 0;;filter: blur(20px);}
      100%{opacity:1;filter: blur(0);}
  }


#sc_down{position: fixed;left: 50%;bottom: 20px;transform: translateX(-50%);opacity: 0;transition: 0.7s;z-index: -1}
#sc_down.on{opacity: 1;z-index: 9999999;}
#sc_down strong{display: block;font-family: "scotch-display", sans-serif;font-size: 18px;color: #FF5700;margin-bottom: 12px;}
#sc_down .cir{position: relative;width: 14px;height: 14px;margin: 0 auto}
#sc_down .cir > div{position: absolute;left: 50%;top: 50%;border-radius: 50%;border: 1px solid #FF5700;}
#sc_down .cir > div.cir01{width: 6px;height: 6px;margin-top: -3px;margin-left: -3px;opacity: 0.3;animation: sc01 1.5s infinite}
#sc_down .cir > div.cir02{width: 10px;height: 10px;margin-top: -5px;margin-left: -5px;animation: sc02 1.5s infinite}
#sc_down .cir > div.cir03{width: 14px;height: 14px;margin-top: -7px;margin-left: -7px;}
@keyframes sc01{
    0%{transform: translateY(-19px);opacity: 0.3}
    100%{transform: translateY(0);opacity: 0.6}
}
@keyframes sc02{
    0%{transform: translateY(-12px);opacity: 0.3}
    100%{transform: translateY(0);opacity: 1}
}

.con02 .bg_w{position: relative}
.con02 .bg_w:after{content: '';display: block;width: 2500px;height: 2500px;border: 2500px solid #fff; position: absolute;top: 50%;left: 50%;border-radius: 50%;transform: translate(-50%,-50%);box-sizing: border-box;}
.dark .con02 .bg_w:after{border: 2500px solid #1C1311;}
.dark .con02.on .bg_w:after{border: 1px solid #1C1311;}
.con02.on .bg_w:after{border: 1px solid #fff;transition: 4s;}
.con02 .bg_circle .cir i{transform: scale(0);opacity: 1}
.con02.on .bg_circle .cir i{transform: scale(1);transition: 3s}
.con02.on .bg_circle .cir01 i{transition-delay: 0.2s}
.con02.on .bg_circle .cir02 i{transition-delay: 0.4s}
.m_wrap .con03 .limit_txt{overflow: hidden}
.m_wrap .con03 .limit_txt ul li{opacity: 0;transition: 1.2s; font-weight: 600}
.m_wrap .on .con03 .limit_txt ul li{opacity: 1; transition: 0.5s; }
.m_wrap .on .con03 .limit_txt ul li:nth-child(1){transition-delay: 3s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(2){transition-delay: 3.15s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(3){transition-delay: 3.3s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(4){transition-delay: 3.45s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(5){transition-delay: 3.6s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(6){transition-delay: 3.75s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(7){transition-delay: 3.9s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(8){transition-delay: 4.05s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(9){transition-delay: 4.2s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(10){transition-delay: 4.35s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(11){transition-delay: 4.5s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(12){transition-delay: 4.65s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(13){transition-delay: 4.8s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(14){transition-delay: 4.95s}
.m_wrap .on .con03 .limit_txt ul li:nth-child(15){transition-delay: 5.1s}
.m_wrap .con03 .limit_txt ul li.br{margin-right: 20px}

.fix_txt2{transform: translateX(0%);}
.on .fix_txt2{transform: translateX(-150%);transition: 3s;transition-delay: 2s}
.fix_video {transform: translate(-50%,-50%);}
.on .fix_video {transform: translate(-50%,-50%) rotate(180deg);transition: 2s;transition-delay: 2s;opacity: 0}

.con01 .base_image .vid video{width: 100vw;height: auto}
@media (max-width: 1920px){
    .con01 .base_image .vid video{width: auto;height: 100vh}

}
@media (max-width: 1800px){
    .con01 .base_image .vid .vid_title{transform: translate(-50%,-50%);margin-left: -300px;top: 50%;left: 50%;}
}
@media (max-width: 1680px){
    
    .fix_video video{width: 700px;}
    .m_wrap .con03 .limit_txt ul li{font-size: 64px}
    .m_wrap .con03 .fix_txt img{height: 230px;}
    .main_con02 .inner{padding-left: 88px;padding-right: 58px}
    #main .main_con02 ul li .wrap .img_w{width: 450px}
    
/*    #main .main_con02 ul li .wrap .mo_thumbnail{width: 450px;height: 450px;overflow: hidden  !important;border-radius: 50%;position: relative;isolation: isolate;}*/
/*    #main .main_con02 ul li .wrap .mo_thumbnail div{position: absolute;height: 100%;;position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);border-radius: 50%;z-index: -1;width: 100%}*/
	#main .main_con02 ul li .wrap .mo_thumbnail {position: relative}
	#main .main_con02 ul li .wrap .mo_thumbnail .dim{position: absolute;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 3}
	#main .main_con02 ul li .wrap .mo_thumbnail .dim svg{width: 100%;height: 100%}
	.dark #main .main_con02 ul li .wrap .mo_thumbnail .dim svg path{fill: #1C1311}
    #main .main_con02 ul li .wrap .mo_thumbnail div video{height: 100%;width: auto;width: 450px;height:450px;object-fit: cover;border-radius: 50%;-webkit-border-radius: 50%;overflow: hidden;border-collapse: separate; perspective: 1px;display: block}
	#main .main_con02 ul li .wrap .mo_thumbnail div, #main .main_con02 ul li .wrap .mo_thumbnail div video{width: 450px;height:450px;}
/*    #main .main_con02 ul li .wrap .mo_thumbnail.mo_thumbnail_line{border-radius: 50%;border: 1px solid #ECD8D3}*/
    #main .main_con02 ul li.award strong{font-size: 45px;line-height: 1.5}
    #main .main_con02 ul li .wrap .txt p{font-size: 23px;}
    #main .main_con02 ul li .wrap .txt{top: 300px;left: -20px;}
    #main .main_con02 ul li .wrap > i img{width: 110px;}
    #main .main_con02 ul li .wrap > .flip-container{width: 110px;height: 110px;}
    #main .main_con03 .con .base{height: 100vh}
    #main .main_con03 .con .base .list{height: 20%;}
    #main .main_con03 ul li img{height: 100%}
    #main .main_con03 ul{padding: 10px 0}
    #main .main_con04 .we_make{max-width: 100%}
	.m_wrap .con01 .img .skew img{width: 700px;}
    .m_wrap .con01 .img .skew .vid{width: 700px;height: 700px}
    .m_wrap .con01 .img .txt {
    position: absolute;
    left: 640px;
    top: 529px;}
	.m_wrap .con01 .img .img_2 .award img, .m_wrap .con01 .img.img03 .img_2 .award img, .m_wrap .con01 .img .video{width: 120px;height: 120px;}
    @keyframes base_circle{
        0%{clip-path: circle(900px at 50% 50%);}
        100%{clip-path: circle(250px at 50% 50%);}
    }
    @keyframes base_position{
        0%{transform: translateX(0%) translateY(0%)}
        100%{transform: translateX(30%) translateY(-4%);}
    }
    .con01 .award_box .award_w video{width: 870px}
    .con01 .base_image .ov_list{width: 504px;height: 504px;}
    .m_wrap .con01 .img.img05{transform: scale(0.4) translate(130%, 160%);}
    .m_wrap .con01 .img.img01 {transform: scale(1) translate(-72%, 20%);}
    .con01 .base_image{width: 1800px;margin-left: -900px}
    .con01 .base_image .vid .vid_title{margin-left: -250px}
    .con01 .base_image .vid .vid_title strong{font-size: 170px;}
    .con01 .award_box .award_w .aw_txt > i *{width: 260px;height: auto}
    .con01 .award_box .award_w .aw_txt2 strong{white-space: nowrap}

}
@media (max-width: 1300px){
	.m_wrap .con01 .vis_txt .skew img{width: 550px;}
/*
	.m_wrap .con01 .img.img01 {transform: scale(1) translate(-67%,20%);}
	.m_wrap .con01 .img.img05 {transform: scale(0.45) translate(70%,120%)}
*/
	.m_wrap .con01 .img.img04 {transform: scale(0.15) translate(320%,-10%);}
.m_wrap .con01 .img.img03 .img_2 .award {
    left: 11px;
    top: 409px;
}
    .m_wrap .con01 .vis_txt_area{margin-left: 0}
    .m_wrap .con01 .vis_txt_area .title svg{width: 650px ;height: auto}
    

}
@media (max-width: 1200px){
    .con01 .base_image .vid .vid_title{margin-left: 20px;padding-left: 0}
        .con01 .base_image .vid .vid_title {
            transform: translate(0%, -50%);left: 0}
    .fix_video video{width: 600px;}
    .con02 .txt_list .txt strong{font-size: 120px;}
    .fix_txt2{margin-top: -90px;}
    .fix_txt2 img{height: 180px;}
    .m_wrap .con03 .limit_txt ul li{font-size: 46px;}
    #main .main_con02 .bg img{width: 240px;}
    .w_logo .wrap img{width: 270px;}
    #main .main_con02 ul li .wrap .img_w{width: 360px;}
    #main .main_con02 ul li .wrap .mo_thumbnail{width: 360px;height: 360px;overflow: hidden}
	#main .main_con02 ul li .wrap .mo_thumbnail div, #main .main_con02 ul li .wrap .mo_thumbnail div video{width: 360px;height: 360px}
    #main .main_con02 ul li .wrap > i img{width: 95px;}
    #main .main_con02 ul li .wrap > .flip-container{width: 95px;height: 95px;}
    #main .main_con02 ul li .wrap .txt p{font-size: 18px;margin-bottom: 7px;}
    #main .main_con02 ul li.award strong{font-size: 35px;line-height: 1.5}
    #main .main_con02 ul li .wrap .txt{top: 250px;}
    #main .main_con04 .txt_w ul li strong{font-size: 40px;}
    #main .main_con04{padding-top: 360px;}
    #main .main_con04 .water_drop img{width: 50px;}
    #main .main_con04 .we_make img{width: 100%}
    #main .main_con04 .txt_w{margin-bottom: 80px;}
    #main .main_con04 .we_make{margin-bottom: 230px;}
    .main_con04 .video div video{width: 1600px;}
	.m_wrap .con01 .img .txt{display: none}
    #main .main_con04{min-height: 100vh}
    .con01 .base_image {
        width: 100%;
        margin-left: 0;
        left: 0;
        height: 100vh
    }
    .con01 .base_image .vid {
    position: relative;
    width: 100%;
    height: 100vh;
}
    .con01 .base_image .vid video{height: 100vh}
    .con01 .base_image .vid img{height: 100vh;animation: sc_video 2s;animation-fill-mode: forwards;animation-delay: 3.5s;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
     .con01 .base_image .vid video{animation: sc_video 2s;animation-fill-mode: forwards;animation-delay: 3.5s}
     @keyframes sc_video{
        0%{transform: translate(-50%,-50%) scale(1)}
        100%{transform: translate(-50%,-50%) scale(0.4)}
    }
    @keyframes base_position{
    0%{transform: translateX(0%) translateY(0%)}
    100%{transform: translateX(53%) translateY(-4%);}
}
}
@media (max-width: 850px){
    .fix_video{width: 100%}
    .fix_video video{display: block;margin: 0 auto;;max-width: 90%}
    .m_wrap .con03 .limit_txt ul li{font-size: 36px}
    .fix_txt2 img{height: 145px}
    .fix_txt2{margin-top: -72.5px;}
    #main .main_con02 .bg img{width: 160px;}
    .w_logo .wrap img{width: 190px;}
    #main .main_con02 ul li .wrap .img_w{width: 265px;}
    #main .main_con02 ul li .wrap .mo_thumbnail{width: 265px;height: 265px;}
	#main .main_con02 ul li .wrap .mo_thumbnail div, #main .main_con02 ul li .wrap .mo_thumbnail div video{width: 265px;height: 265px}
    #main .main_con02 ul li .wrap > i{top: 0;left: 10px;}
    #main .main_con02 ul li .wrap > .flip-container{top: 0;left: 10px;}
    #main .main_con02 ul li .wrap > i img {width: 60px;}
    #main .main_con02 ul li .wrap > .flip-container{width: 60px;height: 60px;}
    #main .main_con02 ul li.award span{font-size: 16px;}
    #main .main_con02 ul li.award strong{font-size: 24px;}
    #main .main_con02 ul li .wrap .txt{top: 175px}
    .main_con02 .inner{padding-left: 48px;padding-right: 25px}
    #main .main_con04 .txt_w ul li strong{font-size: 30px;}
    #main .main_con04 .txt_w ul li{margin-bottom: 20px;}
    #main .main_con04 .water_drop img{width: 40px;}
    #main .main_con04 .deco img{width: 1500px;}
    #main .main_con04{padding-top: 310px;}
    #main .main_con04 .we_make{margin-top: 90px;margin-bottom: 190px;}
    #main .main_con04 .port_btn a{width: 220px;height: 110px;}
    #main .main_con04 .port_btn a strong{line-height: 110px;font-size: 16px;}
    #main .main_con04 .water_drop img{transform: translateY(-1190%)}
	.m_wrap .con01 .vis_txt .skew img{width: 420px;}
	.m_wrap .con01 .img .skew img{width: 550px}
    .m_wrap .con01 .img .skew .vid{width: 550px;height: 550px;}
	.m_wrap .con01 .img.img01 {transform: scale(0.9) translate(-55%,39%);}
	.m_wrap .con01 .img.img02 {transform: scale(0.32) translate(-21%,-90%);}.m_wrap .con01 .img.img05 {transform: scale(0.45) translate(110%,170%);}
    .sc_send{bottom: 10px;}
	.m_wrap .con01 .img .img_2 .award img, .m_wrap .con01 .img.img03 .img_2 .award img, .m_wrap .con01 .img .video{width: 90px;height: 90px;}
	.m_wrap .con01 .img.img03 .img_2 .award {
    left: 11px;
    top: 409px;
}
    #skip button{display: none}
    #main .main_con04{min-height: 0}
    .con01 .award_box .award_w video{width: 750px}
    .con01 .award_box{height: 100vh;align-items: center;justify-content: center;display: flex;}
    .con01 .award_box .award_w .aw_txt{bottom: 95px;}
    .con01 .award_box .award_w .aw_txt2 span{font-size: 16px;}
    .con01 .award_box .award_w .aw_txt2 strong{font-size: 22px;}
    .con01 .award_box .award_w .aw_txt > i *{width: 206px;height: auto}

}
@media (max-width: 850px){
    #sc_down .cir > div.cir01{width: 2px;height: 2px;margin-top: -1px;margin-left: -1px;opacity: 0.3;}
    #sc_down .cir > div.cir02{width: 5px;height: 5px;margin-top: -2.5px;margin-left: -2.5px;}
    #sc_down .cir > div.cir03{width: 10px;height: 10px;margin-top: -5px;margin-left: -5px;}
    #sc_down strong{font-size: 11px;margin-bottom: 12px}
    .sc_send{transform: scale(0.7);left: 10px;bottom: 15px}
    .con01 .base_image {animation-delay: 3s}
    .con01 .base_image .vid img{height: 100%;position: absolute;top: 50%;left: 50%;display: block;transform: translate(-50%,-50%)}
    .con01 .base_image {width: 100%;margin-left: 0;left: 0}
    .con01 .base_image{z-index: 100}
    .con01 .base_image .vid{clip-path: circle(110% at 50% 50%);}
    .con01 .base_image .vid .vid_title{width: 100%;left: 0;margin-left: 0;transform: none;padding-left: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;top: auto;bottom: 80px;}
    .con01 .base_image .vid .vid_title strong{font-size: 80px;}
    .con01 .base_image .vid .vid_title .info_w p{font-size: 16px;}
    @keyframes base_circle{
        0%{clip-path: circle(100% at 50% 50%);}
        100%{clip-path: circle(160px at 50% 50%);}
    }
    @keyframes base_position{
        0%{transform: translateX(0%) translateY(0%)}
        100%{transform: translateX(46%) translateY(-20%);}
    }
    @keyframes hide_mo{
        0%{opacity: 1}
        100%{opacity: 0}
    }

    @keyframes base_scale {
      0% { transform: scale(0.7) translateZ(0); opacity: 0; }
      100% { transform: scale(1) translateZ(0); opacity: 1; }
    }
    .con01 .base_image .ov_list{width: 324px;height: 324px;}
    .con01 .base_image .vid video{animation: sc_video 2s;animation-fill-mode: forwards;animation-delay: 3.5s}
     @keyframes sc_video{
        0%{transform: translate(-50%,-50%) scale(1)}
        100%{transform: translate(-50%,-50%) scale(0.4)}
    }
    .con01 .base_image .vid img{animation: sc_video 2s;animation-fill-mode: forwards;animation-delay: 3.5s}
    @keyframes sc_video{
        0%{transform: translate(-50%,-50%) scale(1)}
        100%{transform: translate(-50%,-50%) scale(0.7)}
    }
    .con01 .base_image .ov_list .txt{display: none}
        .m_wrap .con01 .img.img05 {transform: scale(0.45) translate(170%, 210%);}
}
@media (max-width: 640px){
    .m_wrap .con03 .limit_txt ul li{font-size: 29px}
    .fix_txt2 img{height: 110px}
    .fix_txt2{margin-top: -55px;}
    #main .main_con02 ul li .wrap .txt p{font-size: 15px;}
    #main .main_con02 ul li .wrap .img_w{width: 220px;}
    #main .main_con02 ul li .wrap .mo_thumbnail{width: 220px; height: 220px}
	#main .main_con02 ul li .wrap .mo_thumbnail div, #main .main_con02 ul li .wrap .mo_thumbnail div video{width: 220px;height: 220px}
    #main .main_con02 ul li.award strong{font-size: 21px;line-height: 1.4}
    #main .main_con02 ul li .wrap .txt{top: 150px;left: -10px}
    .main_con02 .inner{padding-left: 28px;padding-right: 15px;}
    #main .main_con02 .bg img{width: 120px;}
    .w_logo .wrap img{width: 140px;}
    #main .main_con04 .txt_w ul li strong{font-size: 25px;}
    #main .main_con04 .water_drop{margin-left: -15px}
    #main .main_con04 .water_drop img{width: 30px;}
	.m_wrap .con03 .limit_txt ul li.br{margin-right: 3px}
	.m_wrap .on .con03 .limit_txt ul li.br{margin-right: 7px}
	.m_wrap .con03 .limit_txt ul li{margin-left: -3px}
	.m_wrap .con03 .limit_txt ul li:nth-child(1){margin-left: 0}
    #main .main_con04 .port_btn a{width: 150px;height: 150px;border-radius: 50%}
    #skip{display: none}
    .m_wrap .con01 .vis_txt_area ul li{margin-right: 12px;}
    .m_wrap .con01 .vis_txt_area ul li svg{width: 35px;height: auto}
    .m_wrap .con01 .vis_txt_area .title svg{width: 400px;height: auto;max-width: 95%}
    .m_wrap .con01 .vis_txt_area ul{margin-bottom: 15px;}
    .m_wrap .con01 .vis_txt_area{width: 100%; margin-top: -50px;margin-left: 0}
	#main .main_con02 ul li .wrap .img_w .col_wrap{display: none}
	#main .main_con02 ul li .wrap:hover .img_w{box-shadow: 0 0 0 rgba(255,179,0,0.0)}

}
@media (max-width: 560px){
    @keyframes base_circle{
        0%{clip-path: circle(120% at 50% 50%);}
        100%{clip-path: circle(125px at 50% 50%);}
    }
    @keyframes base_position{
        0%{transform: translateX(0%) translateY(0%)}
        100%{transform: translateX(55%) translateY(-26%);}
    }
    @keyframes hide_mo{
        0%{opacity: 1}
        100%{;opacity: 0}
    }

    @keyframes base_scale {
      0% { transform: scale(0.7) translateZ(0); opacity: 0; }
      100% { transform: scale(1) translateZ(0); opacity: 1; }
    }
    @keyframes sc_video{
        0%{transform: translate(-50%,-50%) scale(1)}
        100%{transform: translate(-50%,-50%) scale(0.4)}
    }
    .con01 .base_image .ov_list{width: 250px;height: 250px;}
    
    .con01 .award_box .award_w video{width: 650px;}
	.m_wrap .con01 .vis_txt .skew img{width: 320px;}
	.m_wrap .con01 .img .skew img{width: 440px;}
    .m_wrap .con01 .img .skew .vid{width: 440px;height: 440px;}
	.m_wrap .con01 .img.img01 {transform: scale(0.6) translate(-14%,146%)}
    .m_wrap .con01 .img.img05 {transform: scale(0.43) translate(215%, 180%);}	.m_wrap .con01 .img.img04 {transform: scale(0.15) translate(460%,240%);}
	.m_wrap .con01 .img.img03 {transform: scale(0.61) translate(170%,20%);}
	.m_wrap .con01 .img.img02 {transform: scale(0.32) translate(39%,-30%)}
    #main{padding-bottom: 100px}
    .m_wrap .con01 .img.img03 .img_2 .award {
        left: 40px;
        top: 350px;
    }

    .m_wrap .con01 .img .img_2 .award {
        right: -10px;
        top: 50px;
    }
    .sc_send .send .base:after{ display: none; }
    .fix_video video{width: 600px}
    .fix_video{width: auto}

}
@media (max-width: 500px){
    .fix_txt2 img{height: 95px}
    .fix_txt2{margin-top: -47.5px;}
    .m_wrap .con03 .limit_txt ul li{font-size: 24px;}
    #main .main_con02{padding-top: 200px;}
    #main .main_con02 ul li .wrap .img_w{width: 190px;}
    #main .main_con02 ul li .wrap .mo_thumbnail{width: 190px;height: 190px;}
	#main .main_con02 ul li .wrap .mo_thumbnail div, #main .main_con02 ul li .wrap .mo_thumbnail div video{width: 190px;height: 190px}
    #main .main_con02 ul li .wrap .txt p{font-size: 11px;}
    #main .main_con02 ul li.award strong{font-size: 19px;}
    #main .main_con02 ul li .wrap > i img{width: 50px}
    #main .main_con02 ul li .wrap > .flip-container{width: 50px;height: 50px;}
    #main .main_con02 ul li .wrap .txt{top: 125px;}
    #main .main_con04 .txt_w ul li strong{font-size: 20px}
    #main .main_con02 ul li{margin-bottom: 40px;margin-top: 0}
    #main .main_con04 .we_make img.pc{display: none !important}
    #main .main_con04 .we_make img.mo{display: block}

    #main .main_con04 .we_make img.mo.white{display: block}
    #main .main_con04 .we_make img.mo.dark{display: none}
    .dark #main .main_con04 .we_make img.mo.white{display: none}
    .dark #main .main_con04 .we_make img.mo.dark{display: block}
    #main .main_con04 .we_make2:after{bottom: -8px}
    #main .main_con04 .txt_w ul li strong i{display: none}
    .m_wrap .con01 .vis_txt_area .title svg{width: 280px;height: auto;max-width: 95%}
    .m_wrap .con01 .vis_txt_area ul li svg{width: 28px;}
	.m_wrap .con01 .vis_txt_area{width: 100%}
    .con01 .base_image .vid .vid_title strong{font-size: 60px;}
    .con01 .base_image .vid .vid_title .info_w{flex-direction: column}
    .con01 .award_box .award_w video{width: 530px}
    .con01 .award_box .award_w .aw_txt2 span{font-size: 14px}
    .con01 .award_box .award_w .aw_txt2 strong{font-size: 20px;}
    .con01 .award_box .award_w .aw_txt > i *{width: 180px}

}
@media (max-width: 500px){

	.m_wrap .con01 .vis_txt .skew img{width: 260px}
}
.dark .m_wrap .con01{background: #1C1311}