@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;
}

@font-face {
    font-family: 'Sweet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
.blackbg{background: #00000050;position: fixed;width: 100%;height: 100%;;top: 0;left: 0;z-index: 9999;display: none}
.polict_box{position:fixed;left:50%;top:50%;width:1400px;height:700px;padding: 60px 40px; box-shadow: 5px 5px 5px rgba(0 0 0 0.4); border-radius: 40px;transform: translate(-50%,-50%);;background: #fff;max-width: 90vw;max-height: 90vh}

.polict_box > div{overflow-y: scroll;height: 100%}
.polict_box .tit{margin-bottom: 30px;}
.polict_box .tit strong{display: block;color: #FF5700;font-size: 26px;font-weight: 600;margin-bottom: 30px;}
.polict_box .tit p, .polict_box ul li p{font-size: 14px;color: #857A77;line-height: 1.5;}
.polict_box ul li{margin-bottom: 20px;}
.polict_box ul li strong{display: block;font-size: 16px;color: #57413B;margin-bottom: 10px;}
.contact form a.pb{ padding: 5px 10px; border: 1px solid #847d7d; }
.polict_box button{position: absolute;right: -80px;top: 0;background: none}

.polict_box .close{position: absolute;top: 20px;right: 20px;width: 50px;height: 50px;z-index: 15;display: flex;align-items: center;justify-content: center;transition: 0.7s;transform: translateX(200%)}
.polict_box .close{transform: translateX(0)}
.polict_box .close:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border: 1px solid #9B7758;border-radius: 50%;transition: 0.5s}
.polict_box .close:hover:before{opacity: 0.5}
.polict_box .close:after{content: '';display: block;width: calc(100% - 10px);height: calc(100% - 10px);position: absolute;top: 5px;left: 5px;border: 1px solid #9B7758;border-radius: 50%;background: #9B7758;transition: 0.5s;transform: scale(0)}
.polict_box .close:hover:after{transform: scale(1)}
.polict_box .close span{width: 20px;height: 20px;position: relative;display: block;transform: rotate(45deg);z-index: 2}
.polict_box .close span i{position: absolute;width: 2px;height: 100%;position: absolute;left: 50%;margin-left: -1px;top: 0;background: #9B7758;display: block;transition: 0.5s}
.polict_box .close:hover span i{background: #fff}
.polict_box .close span i:nth-child(2){transform: rotate(90deg)}

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}

#chatbot-container 3chatbot-box{width: 50px}
/*
#sub.brand .sub_visual .sv_title_w .sv_title{perspective: 1000px}
#sub.brand .sub_visual .sv_title_w .sv_title strong{display: block;object-fit: cover;opacity: 0;transform: rotateY(90deg) scale(.4);;transition: 2.5s;opacity: 0;transition-delay: 0.3s}
#sub.brand .sub_visual.on .sv_title_w .sv_title strong{display: block;transform: rotateY(0deg) scale(1);;opacity: 11}
#sub.brand .sub_visual .sv_title_w .sv_title ul{object-fit: cover;opacity: 0;transform: rotateY(90deg) scale(.4);;transition: 2.5s;opacity: 0}
#sub.brand .sub_visual.on .sv_title_w .sv_title ul{;transform: rotateY(0deg) scale(1);;opacity: 11}
*/
/*
#sub.brand .logo_cont.on{animation: 2s brand infinite linear}
@keyframes brand{
    0%{transform: translateY(0)}
    50%{transform: translateY(-30px)}
    100%{transform: translateY(0)}
}
*/

#sub.carrer .con03 .txt_wrap .bg02 img{display: block;animation: gu01 2s infinite linear;transform-origin:  bottom left; }
#sub.carrer .con03 .txt_wrap .bg01 img{display: block;animation: gu02 2s infinite linear;transform-origin:  bottom right; }
@keyframes gu01{
	0%{transform: rotate(0deg)}
	50%{transform: rotate(5deg)}
	100%{transform: rotate(0deg)}
}
@keyframes gu02{
	0%{transform: rotate(0deg)}
	50%{transform: rotate(-5deg)}
	100%{transform: rotate(0deg)}
}
/*#sub.brand .logo_cont .light{animation: 3s brand infinite linear}*/
#sub.brand .logo_cont.on{animation: 2s brand infinite linear;will-change: transform}
@keyframes brand{
    0%{transform: translateY(0px)}
    50%{transform: translateY(-15px)}
    100%{transform: translateY(0px)}
}
#sub .gl_wrap{position: absolute}
#sub .gl_wrap .gl_in{display: flex}
#sub.portfolio .port_visual{margin-bottom: 60px}
#sub.portfolio .port_btn{display: flex;align-items: center;height: 100vh} 
#sub.portfolio .port_btn > div {flex: 1;;display: flex;align-items: center;justify-content: center;position: relative;width: 302px}
#sub.portfolio .port_wrap > .port_btn > div:nth-child(1){padding-right: 260px;}
#sub.portfolio .port_wrap .por_title p{transform: translateY(30px);opacity: 0}
#sub.portfolio.on .port_wrap .por_title p{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.6s}
#sub.portfolio .port_wrap .por_title .or{transform: translateY(30px);opacity: 0}
#sub.portfolio.on .port_wrap .por_title .or{transform: translateY(0px);opacity: 1;transition: 1s;transition-delay: 0.9s}

#sub.portfolio .port_btn > div{transform: scale(0.9);opacity: 0;transition: 1s}
#sub.portfolio.on .port_btn > div{transform: scale(1);opacity: 1;transition: 1s}
#sub.portfolio .tot{transform: scale(0.9);opacity: 0;transition: 1s}
#sub.portfolio.on .tot{transform: scale(1);opacity: 1;transition: 1s;transition-delay: 1.6s}

#sub.portfolio .port_btn > div.port_btn .line svg{opacity: 0}
#sub.portfolio.on .port_btn > div.port_btn .line svg{opacity: 1;transition: 0.5s;transition-delay: 2s}
#sub.portfolio.on .port_btn > div:nth-child(1){transition-delay: 1.3s}
#sub.portfolio.on .port_btn > div:nth-child(2){transition-delay: 1.6s}
#sub.portfolio .breadcrumbs ul{opacity: 0;filter: blur(20px);transition: 1s}
#sub.portfolio.on .breadcrumbs ul{opacity: 1;filter: blur(0)}
#sub.portfolio  .copy{display: flex;width: 657.61px;align-items:  center;z-index: 55;opacity: 0;transition: 1s; transition-delay: 0.5s}
#sub.portfolio  .copy strong{width: 657.61px}
#sub.portfolio.on .copy{opacity: 1}
#sub.portfolio  .copy{z-index: 20;;pointer-events: none}
#sub.portfolio  .copy > div{overflow: hidden;width: 20%}
#sub.portfolio  .copy > div strong{transition: 1.3s;filter: blur(10px);text-align: center;line-height: 1;margin-top: 0;text-align: center;transition-delay: 0.5s}


#sub.portfolio  .copy > div.typo01 strong{transform: translateX(-20%)}
#sub.portfolio  .copy > div.typo02 strong{transform: translateX(-30%)}
#sub.portfolio  .copy > div.typo03 strong{transform: translateX(-60%)}
#sub.portfolio  .copy > div.typo04 strong{transform: translateX(-40%)}
#sub.portfolio  .copy > div.typo05 strong{transform: translateX(-60%)}

#sub.portfolio  .copy > div{transition: 1.3s}

#sub.portfolio.on .copy > div.typo01 strong{transform: translateX(0%)}
#sub.portfolio.on .copy > div.typo02 strong{transform: translateX(-20%)}
#sub.portfolio.on .copy > div.typo03 strong{transform: translateX(-40%)}
#sub.portfolio.on .copy > div.typo04 strong{transform: translateX(-60%)}
#sub.portfolio.on .copy > div.typo05 strong{transform: translateX(-80%)}
#sub.portfolio.on .copy > div strong{filter: blur(0px)}



#sub.portfolio .port_wrap > .port_btn > div:nth-child(2){padding-left: 260px;}
#sub.portfolio .tot{bottom: 30px;width: 100%;display: flex;flex-direction: column;align-items: center;position: absolute}
#sub.portfolio .tot strong{color: #51341B;font-size: 20px;    font-family: "amandine", sans-serif;font-weight: 500;display: block;margin-bottom: 10px;}
#sub.portfolio .tot span{display: flex;width: 68px;height: 35px;background: #F37C07;border-radius: 99px;align-items: center;justify-content: center;font-family: "amandine", sans-serif; color: #fff;font-size: 19px}
#sub.portfolio .port_btn > div .btn_in a{position: relative;width: 280px;height: 280px;display: flex;align-items: center;justify-content: center;border: 1px solid #51341B;border-radius: 50%;backdrop-filter:blur(20px); z-index: 5;background: #FFFBF7 !important}
#sub.portfolio .port_btn > div .btn_in .dash{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.portfolio .port_btn > div .btn_in .dash svg{display: block;transition: 0.6s}
#sub.portfolio .port_btn > div .btn_in:hover .dash svg{transform: scale(1.05)}
#sub.portfolio .port_btn > div .btn_in .dash svg g{transition: 0.5s}
#sub.portfolio .port_btn > div .btn_in:hover .dash svg g{stroke: #51341B}
#sub.portfolio .port_btn > div .btn_in .dash i{display: block;animation: scri_dash 30s infinite linear}
@keyframes scri_dash{
	0%{transform: rotate(0deg)}
	100%{transform: rotate(360deg)}
}
#sub.portfolio .port_btn > div .btn_in a:before{content: ''; position: absolute;top: -1px;left: -1px;background: linear-gradient(to bottom, #FFAA00,#FF5700 );width: calc(100% + 2px);height: calc(100% + 2px);border-radius: 50%;display: block;transform: scale(0.9);opacity: 0;transition: 0.6s}
#sub.portfolio .port_btn > div .btn_in a:hover:before{opacity: 1;transform: scale(1)}
#sub.portfolio .port_btn > div .btn_in a strong{font-size: 40px;color: #51341B;    font-family: "amandine", sans-serif;font-weight: 400;position: relative;z-index: 5;transition: 0.7s}
#sub.portfolio .port_btn > div .btn_in a:hover strong{color: #fff}
#sub.portfolio .port_btn > div .btn_in a .btn_w i{position: absolute;;right: 20px;;top: 50%;margin-top: -12px;transition: 0.7s}
#sub.portfolio .port_btn > div .btn_in a:hover .btn_w i{transform: rotate(-45deg)}
#sub.portfolio .port_btn > div .btn_in a .btn_w i path{transition: 0.7s}
#sub.portfolio .port_btn > div .btn_in a:hover .btn_w i path{stroke: #fff}
#sub.portfolio .port_btn > div .btn_in .port {position: absolute;top: 50%;left: 50%;z-index: 1;transition: 0.7s}
#sub.portfolio .port_btn > div .btn_in .port .port_s{position: absolute;filter: blur(20px);opacity: 0.2}
#sub.portfolio .port_btn > div.port_btn01 .port01 .port_s{position: absolute;bottom: -58px;right: -91px;}
#sub.portfolio .port_btn > div.port_btn01 .port01 .port_s img{width: 130px}
#sub.portfolio .port_btn > div.port_btn01 .port02 .port_s{position: absolute;top: -48px;left: -10px}
#sub.portfolio .port_btn > div.port_btn01 .port02 .port_s img{width: 130px}
#sub.portfolio .port_btn > div.port_btn01 .port03 .port_s{position: absolute;bottom: 46px;right: -75px}
#sub.portfolio .port_btn > div.port_btn01 .port03 .port_s img{width: 116px}
#sub.portfolio .port_btn > div.port_btn01 .port04 .port_s{position: absolute;bottom: 63px;right: -72px}
#sub.portfolio .port_btn > div.port_btn01 .port04 .port_s img{width: 130px}
#sub.portfolio .port_btn > div.port_btn01 .line{transition: 0.7s;transform-origin: 70% 40%}
#sub.portfolio .port_btn > div.port_btn02 .line{transition: 0.7s;transform-origin: 70% 40%}
#sub.portfolio .port_btn > div.port_btn01 .btn_in:hover .line{transform: scale(0.3);transition: 0.5s}
#sub.portfolio .port_btn > div.port_btn02 .btn_in:hover .line{transform: scale(0.1);}
#sub.portfolio .port_btn > div.port_btn02 .port01 .port_s{position: absolute;top: 57px;right: -145px}
#sub.portfolio .port_btn > div.port_btn02 .port01 .port_s img{width: 130px}
#sub.portfolio .port_btn > div.port_btn02 .port02 .port_s{position: absolute;bottom: -270px;left: -61px}
#sub.portfolio .port_btn > div.port_btn02 .port02 .port_s img{width: 130px}
#sub.portfolio .port_btn > div.port_btn02 .port03 .port_s{position: absolute;bottom: -104px;left: -114px}
#sub.portfolio .port_btn > div.port_btn02 .port03 .port_s img{width: 116px}
#sub.portfolio .port_btn > div.port_btn02 .port04 .port_s{position: absolute;top: -166px;left: -69px}
#sub.portfolio .port_btn > div.port_btn02 .port04 .port_s img{width: 96px}

#sub.portfolio .port_btn > div.port_btn01 .btn_in:hover .port01{transform: translate(-20%, 300%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn01 .btn_in:hover .port02{transform: translate(150%, 200%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn01 .btn_in:hover .port03{transform: translate(120%, -150%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn01 .btn_in:hover .port04{transform: translate(-20%, -250%) scale(0.2);}


#sub.portfolio .port_btn > div.port_btn02 .btn_in:hover .port01{transform: translate(70%, 130%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn02 .btn_in:hover .port02{transform: translate(-150%, 200%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn02 .btn_in:hover .port03{transform: translate(-120%, -100%) scale(0.2);}
#sub.portfolio .port_btn > div.port_btn02 .btn_in:hover .port04{transform: translate(80%, -250%) scale(0.2);}


#sub.portfolio .port_btn > div .btn_in .port .port_img{border-radius: 8px;overflow: hidden;z-index: 5;position: relative}
#sub.portfolio .port_btn > div .btn_in .port .port_img img{display: block}
#sub.portfolio .port_btn > div.port_btn01 .line{position: absolute;  left: 50%;top: 50%;margin-top: -294px;margin-left: -280px;}
#sub.portfolio .port_btn > div.port_btn02 .line{position: absolute;  left: 50%;top: 50%;margin-top: -294px;margin-left: -280px;}
#sub.portfolio .port_btn > div.port_btn01 .port01{margin-top: -384px;margin-left: -47px;}
#sub.portfolio .port_btn > div.port_btn01 .port02{margin-top: -196px;margin-left: -355px;}
#sub.portfolio .port_btn > div.port_btn01 .port03{margin-top: 145px;margin-left: -411px;}
#sub.portfolio .port_btn > div.port_btn01 .port04{margin-top: 256px;margin-left: 0px;}
#sub.portfolio .port_btn > div.port_btn02 .port01{margin-top: -296px;margin-left: -386px;}
#sub.portfolio .port_btn > div.port_btn02 .port02{margin-top: -322px;margin-left: 206px;}
#sub.portfolio .port_btn > div.port_btn02 .port03{margin-top: 41px;margin-left: 168px;}
#sub.portfolio .port_btn > div.port_btn02 .port04{margin-top: 207px;margin-left: -220px;}
#sub.portfolio .port_wrap{width: 100%;height: 100vh;position: relative;;}
#sub.portfolio .port_wrap .por_title{display: flex;flex-direction: column;align-items: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#sub.portfolio .port_wrap .por_title strong{font-size: 120px;color: #FF5700;font-weight: 400;    font-family: "amandine", sans-serif;display: block}
#sub.portfolio .port_wrap .por_title p{font-size: 20px;color: #51341B;font-weight: 600;margin-bottom: 10px;margin-top: 20px;}
#sub.portfolio .port_wrap .por_title .or span{font-size: 18px;color: #51341B;transition: 0.5s}

#sub.portfolio .port_wrap .por_title .or span.on{color: #FF5700;transform: scale(1.08)}
#sub.portfolio .port_wrap .por_title .or{gap: 0 30px;padding: 30px;border: 1px solid #fff; backdrop-filter:blur(20px);display: flex;height: 60px;padding: 0 50px;border-radius: 50px;align-items: center;    background: linear-gradient(-45deg, rgba(249, 221, 207, 0.4), rgba(249, 221, 207, 0.0));}
#sub .gl_wrap .gl_in .gl i{display: block;backdrop-filter:blur(20px);width:  34px;height: 200px;border-radius: 6px;border: 1px solid #fff}
/* 뷰페이지 */
/*#port_view *{ font-family: 'Pretendard', sans-serif; }*/
#port_view .inner{ width: 1400px; margin: 0 auto; }
#port_view .visual{ height: 100vh; width: 100%; position: relative; background-color: #fff; overflow: hidden; }
#port_view .video_w{position: relative;height: 100%;overflow: hidden;border-radius: 20px; }
#port_view .line_w{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
#port_view .line_w > div{position: relative;width: 100%;height: 100%;}
#port_view .line_w > div > div{position: absolute;width: 100.4%;height: 100.96%;border: 1px solid #FFBC9A;right: -0.2%;top: -0.48%;border-radius: 23px;}
#port_view .line_w > div > div.line02{width: 100.98%;height: 101.92%;border: 1px solid #FFDECC;right: -0.49%;top: -0.96%;border-radius: 25px;}
#port_view .line_w > div > div.line03{width: 101.7%;height: 102.88%;border: 1px solid #F9F1EC;right: -0.85%;top: -1.44%;border-radius: 27px;}
/*#port_view .visual:after{ content:""; display: block; width: 500px; height: 500px; position: absolute; background-color: rgba(255,255,255,0.1); border-radius: 50%; left: 22%; top: 50%; transform: translate(0,-50%);*/
/*
  animation: vi 3s ease-out infinite;
}
*/
/*#port_view .visual:before{ content:""; display: block; width: 500px; height: 500px; position: absolute; background-color: rgba(255,255,255,0.1); border-radius: 50%; left: 22%; top: 50%; transform: translate(0,-50%);*/
/*
  animation: vi2 3s ease-out infinite; animation-delay: .2s;perspective: 500px
}
*/

#port_view .device{ position: absolute;left: -19px; top: 50%;
  transform: translate(0,-50%);perspective: 1000px;
}
#port_view .device .line_w > div > div{transition: 1s}
#port_view .device:hover .line_w > div > div.line02{transform: translateX(63px)}
#port_view .device:hover .line_w > div > div.line03{transform: translateX(126px)}
#port_view .device .video_w{ width: 1220px; border: 10px solid #fff; box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.35);  z-index: 1;box-shadow: 0 0 60px rgba(125,91,11,0.15);border-radius: 20px;max-width: 100%}

#port_view .device .video_w{ transition: 1s}
#port_view .line_w{ transition: 1s}


#port_view .device:hover .video_w{ transform: rotateY(5deg);}
#port_view .device:hover .line_w{ transform: rotateY(-5deg);}
#port_view .device{height: 635px;margin: 0 auto}
#port_view .device img{ display: block; width: 100%; }
#port_view .device #videobcg{ display: block; width: 100%; }
#port_view .device .vi_img_w{position: relative; transition: 7s;top: 0;box-sizing: 0 0 60px rgba(125,91,11,0.15)}
#port_view .visual{background: #FFFBF7}
#port_view .visual .ing_symbol{width: 176px;display: flex;align-items: center;justify-content: center;border: 2px solid #E9DFD5;border-radius: 99px;height: 60px;}
#port_view .visual .txt_wrap .ing_symbol strong{font-size: 18px;color: #51341B;margin-bottom: 0;opacity: 1;transform: translateY(0);margin-left: 22.5px;padding-right: 10px}
#port_view .visual .ing_symbol .sym{width: 50px;height: 50px;position: relative}
#port_view .visual .ing_symbol .sym:before{animation: 2s ing1 infinite linear}
#port_view .visual .ing_symbol .sym:after{animation: 2s ing2 infinite linear}
@keyframes ing1{
	0%{transform: translateX(25%)}
	50%{transform: translateX(-25%)}
	100%{transform: translateX(25%)}
}
@keyframes ing2{
	0%{transform: translateX(-25%)}
	50%{transform: translateX(25%)}
	100%{transform: translateX(-25%)}
}
#port_view .visual .ing_symbol .sym:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50%;background: linear-gradient(to bottom, #FFAA00,#FF5700 )}
#port_view .visual .ing_symbol .sym:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 50%;background: rgba(255,255,255,0.2);backdrop-filter: blur(20px)}
#port_view .visual .txt_wrap{ position: absolute; left: 50%; top: 50%;  margin-left: 330px; z-index: 2;transform: translateY(-50%)}
#port_view .visual .txt_wrap{ text-align: left; }
#port_view .visual .txt_wrap .pic{width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;border-radius: 10px;margin-top: 30px;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0))}
#port_view .visual .txt_wrap strong{ display: block; font-size: 50px; font-weight: 600; color:#46342F;   margin-bottom: 15px;}
#port_view .visual .txt_wrap p{ font-size: 20px; font-weight: 400; color:#FF8800; ; margin-bottom: 25px;letter-spacing: -0.5px}
#port_view .visual .txt_wrap span{display: block;font-size: 18px; font-weight: 500; color:#7D706E;  }
#port_view .visual .txt_wrap em{display: block;font-size: 16px; font-weight: 500; color:#ffffff; margin-top: 30px; opacity: 0.7}
#port_view .visual .txt_wrap i{display: block;width: 96px;line-height: 47px;border-radius: 25px ;background: #FFFFFF;text-align: center;color: #AE7558;font-size: 18px;text-align: center;font-weight: 500;transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s;border: 1px solid #AE7558;margin-bottom: 20px;position: relative}
#port_view .visual .txt_wrap i:before{content: '';background: #AE7558;width: 6px;height: 3px;border-radius: 6px 6px 0 0;display: block;position: absolute;left: 50%;transform: translateX(-50%);margin-top: -3px}
#port_view .visual .txt_wrap .photo_icon{margin-top: 20.5px}
#port_view .visual.on .txt_wrap i{ transform: translateY(0); opacity: 1; }

#port_view .visual .txt_wrap span{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: 0.9s}
#port_view .visual.on .txt_wrap span{ transform: translateY(0); opacity: 1; }
#port_view .visual .txt_wrap .pic{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: 1.2s}
#port_view .visual.on .txt_wrap .pic{ transform: translateY(0); opacity: 1; }

#port_view .visual .txt_wrap strong{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: 0.6s}
#port_view .visual.on .txt_wrap strong{ transform: translateY(0); opacity: 1; }
#port_view .visual .ing_symbol{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; margin-bottom: 60px}
#port_view .visual.on .ing_symbol{ transform: translateY(0); opacity: 1; transition-delay: .3s; }

#port_view .visual .txt_wrap p{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .visual.on .txt_wrap p{ transform: translateY(0); opacity: 1; transition-delay: .3s; }

#port_view .visual .txt_wrap em{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .visual.on .txt_wrap em{ transform: translateY(0); opacity: 1; transition-delay: .9s; }

#port_view .visual .txt_wrap .photo_icon{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .visual.on .txt_wrap .photo_icon{ transform: translateY(0); opacity: 1; transition-delay: 1.2s; }

#port_view .contents{ padding-bottom: 0px; background: #fff ;padding-bottom: 0}
#port_view .pj_info{ padding-bottom: 95px; background: #fff;padding-top: 112px; background: #FFFBF7}
#port_view .pj_info .cate{ font-size: 20px; font-weight: 500; color:#FF8800; letter-spacing: -0.03em; display: block; }
#port_view .pj_info.pc{display: block}
#port_view .pj_info.mo{display: none}
#port_view .pj_info .inner{ border-bottom: 1px solid #dbdbdb; padding-bottom: 65px; }
#port_view .pj_info .info{ margin-top: 25px; }
/*#port_view .pj_info .info .left{ float: left; }*/
#port_view .pj_info .info .left strong{ margin-bottom: 20px; font-size: 40px; font-weight: 600; color:#46342F; letter-spacing: -0.03em; display: block; }
#port_view .pj_info .info .left strong i{display: inline-block;vertical-align: middle}
#port_view .pj_info .info .right{display: flex;justify-content: flex-end;align-items: center}
#port_view .pj_info .info .left .tag > li{ float: left; font-size: 20px; font-weight: 500; color: #7D706E; margin-right: 5px; }
#port_view .pj_info .info .left .tag > li:last-child{ margin-right: 0; }


#port_view .pj_info .cate{ transform: translateX(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .pj_info.on .cate{ transform: translateX(0); opacity: 1;  }

#port_view .pj_info .info .left strong{ transform: translateX(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .pj_info.on .info .left strong{ transform: translateX(0); opacity: 1; transition-delay: .2s; }

#port_view .pj_info .info .left ul{ transform: translateX(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .pj_info.on .info .left ul{ transform: translateX(0); opacity: 1; transition-delay: .4s; }

#port_view .pj_info .info .right dl{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .pj_info.on .info .right dl{ transform: translateY(0); opacity: 1; transition-delay: .4s; }
#port_view .pj_info .info .right dl:nth-child(1){ transition-delay: .8s; }
#port_view .pj_info .info .right dl:nth-child(2){ transition-delay: 1s; }
#port_view .pj_info .info .right dl:nth-child(3){ transition-delay: 1.2s; }
#port_view .pj_info .info .right dl:nth-child(4){ transition-delay: 1.4s; }

#port_view .con_w .pj_tit{position: relative}
#port_view .con_w .pj_tit .link{position: absolute;right: 0;top: 0}
#port_view .con_w .pj_tit strong{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; font-family: "amandine", 'Sweet', sans-serif;}
#port_view .con_w.con06 .pj_tit strong{float: none;float: left}
#port_view .con_w.on .pj_tit strong{ transform: translateY(0); opacity: 1; }

#port_view .con_w .p01{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .con_w.on .p01{ transform: translateY(0); opacity: 1; transition-delay: .3s; }
#port_view .con_w.top_photo{margin-top: 83px;}
#port_view .con13 .img_wrap{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; margin-top: 33px;padding-left: 20px;}
#port_view .con13.on .img_wrap{ transform: translateY(0); opacity: 1; transition-delay: .6s; }

#port_view .con01 .img_wrap img{ transform: scale(1.05); opacity: 0; transition: transform 1.2s, opacity 1.2s; max-width: 100%}
#port_view .con01.on .img_wrap img{ transform: scale(1); opacity: 1; }
#port_view .con01 .img_wrap img:nth-child(1){ transition-delay: .8s; }
#port_view .con01 .img_wrap img:nth-child(2){ transition-delay: 1.1s; }
#port_view .con01 .img_wrap ul{display: flex}
#port_view .con01 .img_wrap ul li{width: 17.14285714285714%;margin-right: 3.571428571428575%}
#port_view .con01 .img_wrap ul li:last-child{margin-right: 0}

#port_view .con06 img{display: block;margin: 0 auto}
#port_view .pj_info .info .right dl{  margin-right: 60px; }
#port_view .pj_info .info .right dl:last-child{ margin-right: 0; }
#port_view .pj_info .info .right dl dt{ font-size: 16px; font-weight: 800; color:#51341B; letter-spacing: -0.03em;  }
#port_view .pj_info .info .right dl dt span{ color:#d7390e; }
#port_view .pj_info .info .right dl dd{ font-size: 18px; color:#51341B; letter-spacing: -0.03em; margin-top: 5px; }
#port_view .pj_info .info .right dl.url{background: #FFFFFF;padding: 20px 26px;border-radius: 10px}
#port_view .pj_info .info .right dl.url > div{display: flex;align-items: center;gap: 20px}
#port_view .pj_info .info .right dl.url > div svg{display: block}
#port_view .con_w{ margin-top: 160px; }
#port_view .con09{margin-top: 105px}
#port_view .con_w .pj_tit{ margin-bottom: 30px; }
#port_view .con_w .pj_tit strong{  display: flex; font-size: 36px; font-weight: 600; letter-spacing: 0.2px;color: #51341B;position: relative}
#port_view .con_w .pj_tit strong i{position: absolute;left: -18px;top: -20px}
#port_view .con_w .pj_tit:after{content: '';display: block;clear: both; }
#port_view .con_w .pj_tit strong span{ color:#FF8000; display: inline-block; margin-left: 3px; }
#port_view .con_w .pj_tit .link{float: right}
#port_view .con_w .pj_tit .link{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; font-family: "scotch-display", sans-serif;}
#port_view .con_w.on .pj_tit .link{ transform: translateY(0); opacity: 1; margin-top: -10px}
#port_view .con_w .pj_tit .link a{font-size: 20px;color: #46342F;font-weight: 600;vertical-align: middle;transition: 0.7s;display: block;font-family: "scotch-display", sans-serif;;}
#port_view .con_w .pj_tit .link a span{font-family: "amandine", sans-serif;display: inline-block;vertical-align: middle;margin-right: 12px;position: relative;z-index: 2;transition: 0.7s}
#port_view .con_w .pj_tit .link a:hover span{color: #FF5700;}
#port_view .con_w .pj_tit .link a .dot2{width: 61px;height: 61px;background: #FF5700;border-radius: 50%;display: inline-block;vertical-align: middle;position: relative;transition: 0.8s}
#port_view .con_w .pj_tit .link a .dot2:after{content: '';display: block;width: 81px;height: 81px;border-radius: 50%;background: rgba(255,255,255,0.2);backdrop-filter:  blur(5px);-webkit-backdrop-filter: blur(20px);left: -34px;top: 50%;margin-top: -40.5px;position: absolute;transition: 0.6s}
#port_view .con_w .pj_tit .link a .dot{position: absolute;top: 50%;height: 4px;display: flex;margin-top: -2px;right: -42px;}

#port_view .con_w .pj_tit .link a:hover .dot2{transform: translateX(10px);background: #F57606}
#port_view .con_w .pj_tit .link a:hover .dot2:after{transform: translateX(-10px)}
#port_view .con_w .pj_tit .link a .dot div{display: inline-block;width: 4px;height: 4px;border-radius: 50%;background: #fff;animation: 1s dot_color infinite linear;margin-right: 4px}
#port_view .con_w .pj_tit .link a .dot div:last-child{margin-right: 0}
#port_view .con_w .pj_tit .link a .dot div.dot02{animation-delay: 0.2s}
#port_view .con_w .pj_tit .link a .dot div.dot03{animation-delay: 0.4s}
@keyframes dot_color{
    0%{opacity: 0.3}
    50%{opacity: 1}
    100%{opacity: 0.3}
}
/*#port_view .con_w .pj_tit .link a div div*/
#port_view .con_w .p01{ font-size: 18px; line-height: 36px; color:#51341B; word-break: keep-all; letter-spacing: -0.03em; }
#port_view .con01 .img_wrap{ margin-top: 60px; }
#port_view .con01 .img_wrap img{display: block; box-shadow: 0px 0px 50px 0px rgba(178, 180, 187, 0.2); }

#port_view .con02{ position: relative; padding-top: 180px; }
#port_view .con02:before{ content:""; display: block; width: 0%; top: 0; height: 660px; background: url('/img/new_port/con02_bg.jpg') left top no-repeat; position: absolute; left: 0; top: 0; transition: 2s}
#port_view .con02 .img_wrap{ float: left; width: 50%; position: relative; z-index: 1; padding-left: 110px; }
#port_view .con02 .img_wrap img{ display: block; box-shadow: -21px 21px 50px 0px rgba(0, 0, 0, 0.25); border-radius: 20px; }
#port_view .con02 .txt_wrap{ float: left; width: 50%; }

#port_view .con02 .bg{position: absolute;top: 0;left: 0}
#port_view .con02 .bg div{position: relative;}
#port_view .con02 .bg div:after{content: '';display: block;width: 100%;height: 100%;background: #fff;top: 0;right: 0;position: absolute;transition: 2s;}
#port_view .con02.on .bg div:after{width: 0}
#port_view .con02 .inner{position: relative;z-index: 5}

#port_view .con02:before{ transition: width 2s; }
#port_view .con02.on:before{ width: 50%; }

#port_view .con02 .img_wrap img{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .con02.on .img_wrap img{ transform: translateY(0); opacity: 1; transition-delay: .6s; }


#port_view .con03 .c_list li{ float: left; margin-right: 30px; }
#port_view .con03 .c_list li:last-child{  margin-right: 0; }
#port_view .con03 .c_list li img{ display: block; max-width: 100%; }

#port_view .con03 .c_list li{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .con03.on .c_list li{ transform: translateY(0); opacity: 1;  }
#port_view .con03.on .c_list li:nth-child(1){ transition-delay: .3s; }
#port_view .con03.on .c_list li:nth-child(2){ transition-delay: .5s; }
#port_view .con03.on .c_list li:nth-child(3){ transition-delay: .7s; }
#port_view .con03.on .c_list li:nth-child(4){ transition-delay: .9s; }
#port_view .con03 .list_w ul:after{content: '';display: block;clear: both}
#port_view .con03 .list_w ul li{float: left}
#port_view .con03 > div:after{content: '';display: block;clear: both}
#port_view .con03 > div > div{float: left;width: 50%}
#port_view .con03 > div > div.font{padding-left: 90px;}
#port_view .con03 > div > div.color ul li{margin-right: 30px;}
#port_view .con03 > div > div.color ul li img{border-radius: 25px}
#port_view .con03 > div > div.color ul li:last-child{margin-right: 0}
/*#port_view .con03 > div > div.font ul li{width: 50%}*/
#port_view .con03 > div > div.font ul li{margin-right: 50px;mix-blend-mode: multiply}
#port_view .con03 > div > div.font ul li:last-child{margin-right: 0}

#port_view .con04 .ty_list li{ float: left; width: 33.3333333333%; }
#port_view .con04 .ty_list li img{ display: block; max-width: 100%; }

#port_view .con04 .ty_list li{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }
#port_view .con04.on .ty_list li{ transform: translateY(0); opacity: 1;  }
#port_view .con04.on .ty_list li:nth-child(1){ transition-delay: .3s; }
#port_view .con04.on .ty_list li:nth-child(2){ transition-delay: .5s; }
#port_view .con04.on .ty_list li:nth-child(3){ transition-delay: .7s; }
#port_view .con04.on .ty_list li:nth-child(4){ transition-delay: .9s; }
#port_view .con11 ul li .title:after{content: '';display: block;clear: both}
#port_view .con11 ul li .title .link{float: right}

#port_view .con11 .bg{position: absolute;top: 0;left: 0;width: 36%;background: #191919;height: 100%;border-radius: 0 60px 60px 0;transform: translateX(-100%);transition: 2s}
#port_view .con11.on .bg{transform: translateX(0)}
/*#port_view .con11 ul li .title .link{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; font-family: "scotch-display", sans-serif;}*/
/*#port_view .con11 ul li .title .link{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; font-family: "scotch-display", sans-serif;}*/
/*#port_view .con_w.on .pj_tit .link{ transform: translateY(0); opacity: 1; margin-top: -10px}*/
#port_view .con11 ul li .title .link a{font-size: 18px;color: #46342F;font-weight: 600;vertical-align: middle;transition: 0.7s;display: block;}
#port_view .con11 ul li .title .link a span{font-family: inherit;display: inline-block;vertical-align: middle;margin-right: 24px;position: relative;z-index: 2;transition: 0.7s}
#port_view .con11 ul li .title .link a:hover span{color: #91592A;}
#port_view .con11 ul li .title .link a .dot2{width: 37px;height: 37px;background: #8A5334;border-radius: 50%;display: inline-block;vertical-align: middle;position: relative;transition: 0.8s}
#port_view .con11 ul li .title .link a .dot2:after{content: '';display: block;width: 37px;height: 37px;border-radius: 50%;background: rgba(255,255,255,0.2);backdrop-filter:  blur(5px);-webkit-backdrop-filter: blur(20px);left: -14px;top: 50%;margin-top: -18.5px;position: absolute;transition: 0.6s}
#port_view .con11 ul li .title .link a .dot{position: absolute;top: 50%;height: 4px;display: flex;margin-top: -2px;right: -42px;}

#port_view .con11 ul li .title .link a:hover .dot2{transform: translateX(10px);background: #A5572A}
#port_view .con11 ul li .title .link a:hover .dot2:after{transform: translateX(-10px)}
#port_view .con11 ul li .title .link a .dot div{display: inline-block;width: 4px;height: 4px;border-radius: 50%;background: #fff;animation: 1s dot_color infinite linear;margin-right: 4px}
#port_view .con11 ul li .title .link a .dot div:last-child{margin-right: 0}
#port_view .con11 ul li .title .link a .dot div.dot02{animation-delay: 0.2s}
#port_view .con11 ul li .title .link a .dot div.dot03{animation-delay: 0.4s}
@keyframes dot_color{
    0%{opacity: 0.3}
    50%{opacity: 1}
    100%{opacity: 0.3}
}

/*
#port_view .con05 .img_wrap img{ clip-path: inset(0 100% 0 0); transition: clip-path 2s; transition-delay: .3s; }
#port_view .con05.on .img_wrap img{ clip-path: inset(0 0 0 0); }
*/
/*#port_view .con06{background: url(/img/new_port/confirm_bg.png) no-repeat top center}*/
#port_view .con06{position: relative}
#port_view .con06:before{content: '';display: block;width: 100%;height: 50%;background: url(/img/sub/bg_top.jpg) no-repeat top center;position: absolute;top: 0;left: 0;z-index: -1}
#port_view .con06:after{content: '';display: block;width: 100%;height: 50%;background: url(/img/sub/bg_bottom.jpg) no-repeat bottom center;position: absolute;bottom: 0;left: 0;z-index: -1}
#port_view.port_view19 .con06:before, #port_view.port_view19 .con06:after{display: none}
#port_view .con06 .img_wrap {margin-top: 75px;}
#port_view .con06 .img_wrap img{ display: block; max-width: 100%; margin: 0 auto; }
#port_view .con06 .img_wrap div{width: 1175px;margin: 0 auto}
#port_view .con06 .img_wrap .img_de{ box-shadow: 0px 0px 50px #51341B30;border-radius: 30px;overflow: hidden;position: relative;z-index: 2}
#port_view .con06 .img_wrap .img_de:after{content: '';display: block;width: 100%;height: 100%;border: 6px solid #fff;position: absolute;top: 0;left: 0;border-radius: inherit;box-sizing: border-box}
#port_view .con06 .img_wrap .img_la{margin-top: -30px;overflow: hidden;border-radius: 0 0 30px 30px}
/*
#port_view .con06 .img_wrap{ transform: translateY(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: 0.3s; }
#port_view .con06.on .img_wrap{ transform: translateY(0); opacity: 1; }
*/

#port_view .con11 .txt_w{position: absolute;right: 50%;margin-right: -700px;top: 0;padding-top: 200px;width:625px}
#port_view .con11 .img{position: relative}

#port_view .con11{padding-top: 100px;padding-bottom: 60px; position: relative}
#port_view .con11 ul{width: 1660px;margin-top: 60px;}
#port_view .con11 ul:after{content: '';display: block;clear: both}
#port_view .con11 ul li{float: left;margin-right: 50px;}
#port_view .con11 ul li:last-child{margin-right: 0}
#port_view .con11 ul li strong{font-size: 16px;color: #B7B7B7;display: block;font-weight: 500}
#port_view .con11 ul li .title strong{line-height: 40px;font-size: 20px;color: #755E4C;    font-family: "amandine", sans-serif;}
#port_view .con11 ul li img{filter: drop-shadow(30px 30px 40px rgba(113,113,113,0.16)); border-radius: 30px;overflow: hidden}
#port_view .con07{ position: relative; }
/*#port_view .con07 .inner{ position: absolute; right: 0; left: 0; text-align: right; padding-right: 50px; padding-top: 50px; }*/
#port_view .con07 .img_wrap:after{content: '';display: block;clear: both}
#port_view .con07 .img_wrap img{ display: block; max-width: 100%; float: right}

#port_view .con07 .img_wrap img{ transform: translateX(40px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: 0.3s; }
#port_view .con07.on .img_wrap img{ transform: translateX(0); opacity: 1; }
#port_view #header .m_wrap #gnb ul li a{color: #fff;transition: 0.6s}
#port_view #header.s_act .m_wrap #gnb ul li a{color: #292321;}
#port_view #header #logo a{display: block;position: relative}
#port_view #header #logo a img{display: block;opacity: 0;transition: 0.6s}
#port_view #header #logo a:after{content: '';display: block;width: 100%;height: 100%;background: url(/img/common/logo_on.png);position: absolute;top: 0;left: 0;transition: 0.6s;opacity: 1}
#port_view #header.s_act #logo a img{opacity: 1}
#port_view #header.s_act #logo a:after{opacity: 0}

#port_view .con08 .p01{ margin-top: 40px; }
#port_view .con08 .img_wrap > ul > li{ float: left; width: 50%; position: relative}
#port_view .con08 .img_wrap > ul > li img{ display: block; max-width: 960px; }
#port_view .con08 .img_wrap > ul > li .bg{position: relative}
#port_view .con08 .img_wrap > ul > li .device_w{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);padding: 0 105px}
#port_view .con08 .img_wrap > ul > li .device_w ul li{width: 100%;margin-bottom: 45px;}
#port_view .con08 .img_wrap > ul > li .device_w ul li:last-child{margin-bottom: 0}
#port_view .con08 .img_wrap > ul > li .device_w ul li .video{border-radius: 30px;overflow: hidden;border: 4px solid #fff;}
#port_view .con08 .img_wrap > ul > li .device_w ul li .video video{display: block;width: 100%}
#port_view .list_wrap{padding: 0 60px;padding-top: 180px;margin-top: 0;padding-bottom: 140px}
#port_view .portfolio .title {margin-bottom: 40px}
#port_view .portfolio .title strong{font-family: "amandine", sans-serif;font-size: 80px;font-weight: 400;color: #51341B}

/*
 #port_view .con08 .img_wrap ul li:nth-child(1){ clip-path: inset(100% 0 0 0); transition: clip-path ease 2s; transition-delay: .3s; position: relative;z-index: 2}
#port_view .con08 .img_wrap ul li:nth-child(2){ clip-path: inset(0 0 100% 0); transition: clip-path ease 2s; transition-delay: .3s; }
#port_view .con08.on .img_wrap ul li:nth-child(1){ clip-path: inset(0 0 0 0); }
#port_view .con08.on .img_wrap ul li:nth-child(2){ clip-path: inset(0 0 0 0); }
*/
/*#sub.about .sub_visual{overflow: hidden}*/
#sub .sub_visual{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;}
#sub.portfolio .sub_con{padding: 0 60px;padding-top: 160px;padding-bottom: 160px}
#sub.portfolio .breadcrumbs ul{display: flex;gap: 16px} 
#sub.portfolio .breadcrumbs ul li{display: flex;gap: 16px;align-items: center;font-size: 18px;color: #FF5700;}
#sub.portfolio .breadcrumbs ul li:after{content: '';background-color: #FF5700;width: 3px;height: 3px;break-after: 50%;gap: 16px;}
#sub.portfolio .breadcrumbs ul li:last-child:after{display: none;;}
#sub.portfolio .breadcrumbs + strong{font-size: 120px;color: #FF5700;font-family: "amandine", sans-serif;font-weight: normal;display: block}
#sub.portfolio .breadcrumbs + strong{transform: translateX(30px);opacity: 0;transition: 1s;transition-delay: 0.3s}
#sub.portfolio.on .breadcrumbs + strong{transform: translateX(0);opacity:1}
#sub.portfolio .loc{transform: translateY(30px);opacity: 0;transition: 1s;transition-delay: 0.6s}
#sub.portfolio.on .loc{transform: translateY(0);opacity:1}
#sub.portfolio .filter_w{transform: translateY(30px);opacity: 0;transition: 1s;transition-delay: 0.9s}
#sub.portfolio.on .filter_w{transform: translateY(0);opacity:1}
#sub.portfolio .loc{display: flex;justify-content: space-between;align-items: center;margin-bottom: 60px}
#sub.portfolio .loc .btn_w{display: flex;gap: 10px}
#sub.portfolio .loc .btn_w > *{display: flex;height: 60px;align-items: center;padding: 0 30px;gap: 27px;border: 1px solid #51341B;border-radius: 60px;color: #4A3E25;font-size: 18px;transition: 0.5s;}
#sub.portfolio .loc .btn_w > *:hover{color: #FF5700;border-color: #FF5700}
#sub.portfolio .loc .btn_w > * path{transition: 0.5s}
#sub.portfolio .loc .btn_w > *:hover path{stroke: #FF5700}
#sub.portfolio .loc .btn_w > button{background-color: #FF5700;color: #fff;border-color: #FF5700}
#sub.portfolio .loc .btn_w > button svg{display: block;transition: 0.5s;}
#sub.portfolio .loc .btn_w > button.on svg{transform: rotate(180deg);}
#sub.portfolio .loc .search{display: flex;align-items: center;gap: 10px}
#sub.portfolio .loc .search .sch_w{position: relative;}
#sub.portfolio .loc .search .sch_w button{position: absolute;right: 0;height: 100%;top: 0;padding-right: 30px;}
#sub.portfolio .loc .search .sch_w input{width: 320px;height: 60px;border: 1px solid #51341B;display: block;padding-left: 30px;border-radius: 60px;background: none;font-size: 18px;color: #51341B;}
#sub.portfolio .loc .search ul{display: flex;padding: 8px;border: 1px solid #51341B;border-radius: 60px;}
#sub.portfolio .loc .search ul li a{display: flex;width: 84px;height: 44px;align-items: center;justify-content: center;color: #51341B;font-size: 18px;}
#sub.portfolio .loc .search ul li.on a{background-color: #51341B;color: #fff;border-radius: 30px;}
#sub.portfolio .filter_w{background:linear-gradient(-45deg, rgba(249,221,207,0.2), rgba(249,221,207,0.0));padding: 20px 40px ;border-radius: 20px;margin-top: 10px;}
#sub.portfolio .filter_w .w{display: flex;padding: 20px 0;align-items: center;border-bottom: 1px solid #EBDDD7;align-items: center}
#sub.portfolio .filter_w .w:last-child{border-bottom: none;}
#sub.portfolio .filter_w .w strong{display: block;font-size: 18px;color: #51341B;width: 75px;;}
#sub.portfolio .filter_w .w ul{display: flex;align-items: center;font-weight: wrap;gap: 8px;flex-wrap: wrap}

#sub.portfolio .filter_w .w ul li label{position: relative}
#sub.portfolio .filter_w .w ul li label input{opacity: 0;position: absolute;width: 100%;height: 100%;}
#sub.portfolio .filter_w .w ul li label input + span{display: flex;padding: 0 20px;height: 37px;border: 1px solid #51341B;border-radius: 30px;font-size: 16px;color: #51341B;transition: 0.6s;align-items: center;justify-content: center}
#sub.portfolio .filter_w .w ul li label input:checked + span{background-color: #FF8200;color: #fff;border-color: #FF8200;}

#sub.portfolio .filter_w .w .col_list ul li label input + span{width: 30px;height: 30px;border: none;padding: 0}
#sub.portfolio .filter_w .w .col_list ul li label input + span:after{content: '';border-radius:50%;display:  block;width: 100%;height: 100%;border: 2px solid rgba(255,255,255,0.5);box-sizing: border-box;position: absolute;top: 0;left: 0;}

#sub.portfolio .filter_w .w ul.button_list li button{padding: 0 20px;height: 37px;border: 1px solid #51341B;border-radius: 30px;font-size: 16px;color: #51341B;transition: 0.6s}
#sub.portfolio .filter_w .w ul.button_list li:hover button{color: #FF8200;border-color: #FF8200}
#sub.portfolio .filter_w .w ul.button_list li.on button{background-color: #FF8200;color: #fff;border-color: #FF8200;}
#sub.portfolio .filter_w .w .col_list ul li button{width: 30px;height: 30px;border-radius: 50%;position: relative;}
#sub.portfolio .filter_w .w .col_list ul li button:after{content: '';border-radius:50%;display:  block;width: 100%;height: 100%;border: 2px solid rgba(255,255,255,0.5);box-sizing: border-box;position: absolute;top: 0;left: 0;}

#sub.portfolio .filter_w .w .col_list ul li button.white:after{border-color: #DDDDDD}
#sub.portfolio .filter_w .w .col_list ul li.on button.white:after{background: url(/img/sub/color_check_white.png);border-color: #DDDDDD; background-size: 100% 100%}

#sub.portfolio .filter_w .w .col_list ul li.on button:after{border: none;background: url(/img/sub/color_check.png); background-size: 100% 100%}
#sub.portfolio .list_wrap ul li a{padding: 10px;display: block}
#sub.portfolio .list_wrap ul li a > div{display: flex;justify-content: space-between;align-items: center;height: 120px;padding: 0 30px;overflow: hidden;;position: relative;transition: 0.5s}
#sub.portfolio .list_wrap ul li a:hover > div{padding: 0 50px}
#sub.portfolio .list_wrap ul li a > div *{position: relative;z-index: 5}
#sub.portfolio .list_wrap ul li a > div *.port_img{position: absolute;right: 22.696%;transform: translateY(50%);top: 50%;transition: 0.5s}
#sub.portfolio .list_wrap ul li a:hover > div *.port_img{transform: translateY(-50%)}
#sub.portfolio .list_wrap ul li a > div *.port_img img{width: 340px}
#sub.portfolio .list_wrap ul li a > div:before{content: '';display: block;;width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 12px;background: linear-gradient(to right, #FFAA00, #FF5700);transform: scaleX(0.97) scaleY(0.9);opacity: 0;transition: 0.5s}
#sub.portfolio .list_wrap ul li a:hover > div:before{transform: scaleX(1) scaleY(1);opacity: 1;transition: 0.7s}
#sub.portfolio .list_wrap ul li a strong{display: block;font-weight: 400;font-family: "amandine", sans-serif;font-size: 26px;color: #51341B;transition: 0.5s}
#sub.portfolio .list_wrap ul li a:hover strong{color: #fff}
#sub.portfolio .list_wrap ul li a:hover p{color: #fff}
#sub.portfolio .list_wrap ul li a p{font-size: 18px;color: #51341B;margin-top: 6px;transition: 0.5s}
#sub.portfolio .list_wrap ul li a span{font-size: 18px;color: #8B7B6C;transition: 0.5s}
#sub.portfolio .list_wrap ul li:hover a span{color: #fff}
#sub.portfolio .list_wrap ul li{border-bottom: 1px solid #E6D9D3;}
#sub.portfolio .list_wrap{margin-top: 60px;background: #FFFBF7}
#sub.portfolio .list_wrap ul{border-top: 1px solid #E6D9D3;}

#sub.portfolio .gallery_wrap {padding: 0 80px;margin-top: 125px;}
#sub.portfolio .gallery_wrap > ul{display: flex;flex-wrap: wrap;gap: 50px 150px}
#sub.portfolio .gallery_wrap > ul > li{ width:calc( 50% - 75px);  margin-bottom: 70px; position: relative; }
#sub.portfolio .gallery_wrap > ul > li .txt1{display: none}
#sub.portfolio .gallery_wrap > ul > li .txt2{display: block;padding-left: 40px;}

/*#sub.portfolio .gallery_wrap > ul > li:nth-child(2n) .txt1{display: block}*/
/*#sub.portfolio .gallery_wrap > ul > li:nth-child(2n) .txt2{display: none;}*/
#sub.portfolio .gallery_wrap > ul > li:nth-child(2n){ margin-top: 95px; }
#sub.portfolio .gallery_wrap > ul > li > a{ display: block; }

#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box{padding: 10px;ackground: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));backdrop-filter: blur(20px);;}
/*231107 NEW*/
#sub.portfolio .gallery_wrap > ul > li a{perspective: 500px;position: relative}
#sub.portfolio .gallery_wrap > ul > li a .award{position: absolute;top: 0;left: 50px;z-index: 2}
#sub.portfolio .gallery_wrap > ul > li a .award img{width: auto}
#sub.portfolio .gallery_wrap > ul > li .port_txt{transition: 1s}
/*#sub.portfolio .gallery_wrap > ul > li:hover .port_txt{transform: rotateY(10deg)}*/
#sub.portfolio .gallery_wrap > ul > li .port_w{position: relative;perspective: 500px}
#sub.portfolio .gallery_wrap > ul > li .port_w .port_area{position: relative;perspective: 500px;}
#sub.portfolio .gallery_wrap > ul > li .port_w .port_area .en_title{position: absolute;transform: translate(-80%);padding: 30px 0}
#sub.portfolio .gallery_wrap > ul > li .port_w .port_area .en_title strong{writing-mode: vertical-lr;font-size: 36px;color: #ECE0D5;transform: rotate(180deg);    font-family: "scotch-display", sans-serif;}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w{position: absolute;width: 100%;height: 100%}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w > div{position: relative;width: 100%;height: 100%}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w .line{position: absolute;width: calc(100% - 2px);height: calc(100% - 2px);border: 1px solid #F9F1EC;border-radius: 30px;transition: 1s}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w .line02{border-color: #FFDECC}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w .line03{border-color: #FFBC9A}
#sub.portfolio .gallery_wrap > ul > li:hover .port_area > .box_line_w .line01{transform: translateX(-40px)}
#sub.portfolio .gallery_wrap > ul > li:hover .port_area > .box_line_w .line02{transform: translateX(-20px)}
#sub.portfolio .gallery_wrap > ul > li .port_area > .box_line_w{transition: 1s}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box{transition: 1s}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box video{width: 100%;border-radius: 22px}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box > img{width: 100%;border-radius: 22px}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box > img.pc{display: block}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box > img.mo{display: none}
#sub.portfolio .p_list.p_list2 > ul > li .port_w .vid_box > img{border-radius: 20px}
#sub.portfolio .gallery_wrap > ul > li:hover .port_area > .box_line_w{transform: rotateY(-10deg)}
#sub.portfolio .gallery_wrap > ul > li:hover .port_w .vid_box{transform: rotateY(10deg);box-shadow: -50px 0 50px #FFAA0050;}

#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box{overflow: hidden;border-radius: 30px;position: relative;z-index: 2;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0))}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box:after{content: '';display: block;width: 100%;height: 100%;border-radius: inherit; position: absolute;top: 0;left: 0;box-sizing: border-box;border-radius: 30px}
#sub.portfolio_wide .p_list > ul > li .port_w .vid_box:after{content: '';display: block;width: 100%;height: 100%;border-radius: inherit; position: absolute;top: 0;left: 0;box-sizing: border-box;border-radius: 30px;border: 10px solid #fff}
#sub.portfolio .gallery_wrap > ul > li .port_w .vid_box video{display: block}
#sub.portfolio .gallery_wrap > ul > li .port_txt{padding: 20px 40px ;padding-bottom: 0}
#sub.portfolio .gallery_wrap > ul > li .port_txt strong{display: block;font-size: 30px;font-weight: 600;color: #51341B;font-weight: 700;margin-bottom: 8px;}
#sub.portfolio .gallery_wrap > ul > li .port_txt strong i{display: inline-block;margin-left: 13px}
#sub.portfolio .gallery_wrap > ul > li .port_txt ul li{display: inline-block;font-size: 18px;color: #51341B;font-weight: 300;margin-right: 15px;}
#sub.portfolio_wide .p_list > ul > li .port_txt{padding: 30px 50px;padding-bottom: 0}

#sub.portfolio_wide .p_list > ul > li .port_txt strong{font-size: 37px;margin-bottom: 10px;}
#sub.portfolio_wide .p_list > ul > li .port_txt strong > i{display: inline-block;vertical-align: middle;margin-left: 5px;top: -4px;position: relative}
#sub.portfolio_wide .p_list > ul > li .port_txt ul li{font-size: 18px;}
#sub.portfolio_wide .p_list > ul > li .port_w .vid_box:after, #sub.portfolio_wide .p_list > ul > li .port_w .vid_box video, #sub.portfolio_wide .p_list > ul > li .port_w .vid_box{border-radius: 43px}
#sub.portfolio_wide .p_list > ul > li .port_area > .box_line_w .line{border-radius: 45px}
/*#sub.portfolio .gallery_wrap > ul > li .port_txt strong, #sub.portfolio .gallery_wrap > ul > li .port_txt ul li{transition: 1s}*/
/*#sub.portfolio .gallery_wrap > ul > li:hover .port_txt strong, #sub.portfolio .gallery_wrap > ul > li:hover .port_txt ul li{color: #FF5700}*/
/*231107 NEW*/

#sub.about .con08{position: relative;z-index: 22;height: 1650px;margin-top: 250px;background: #FFFBF7}
#sub.about .con08 .service_list > ul > li{position: absolute;left: 50%;top: 50%}
#sub.about .con08 .service_list > ul > li .l_wrap{position: relative}
#sub.about .con08 .service_list > ul > li .bubble{position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;background: #FFFBF7;border-radius: 50%}
#sub.about .con08 .service_list > ul > li .bubble img{display: block}
/*#sub.about .con08 .service_list > ul > li .bubble img{mix-blend-mode:multiply;display: block}*/
#sub.about .con08 .service_list > ul > li.s_list01 .bubble img{width: 520px}
#sub.about .con08 .service_list > ul > li.s_list02 .bubble img{width: 300px}
#sub.about .con08 .service_list > ul > li.s_list03 .bubble img{width: 402px}
#sub.about .con08 .service_list > ul > li.s_list04 .bubble img{width: 265px}
#sub.about .con08 .service_list > ul > li.s_list05 .bubble img{width: 200px}
#sub.about .con08 .service_list > ul > li.s_list06 .bubble img{width: 240px}
#sub.about .con08 .service_list > ul > li.s_list07 .bubble img{width: 335px}
#sub.about .con08 .service_list > ul > li.s_list08 .bubble img{width: 607px}
#sub.about .con08 .service_list > ul > li.s_list09 .bubble img{width: 420px}
#sub.about .con08 .service_list > ul > li.s_list10 .bubble img{width: 333px}
#sub.about .con08 .service_list > ul > li.s_list11 .bubble img{width: 338px}

#sub.about .con08 .service_list > ul > li.s_list01{margin-left: -773px;margin-top: -225px}
#sub.about .con08 .service_list > ul > li.s_list02{margin-left: -335px;margin-top: -475px}
#sub.about .con08 .service_list > ul > li.s_list03{margin-left: -650px;margin-top: 365px;z-index: 1}
#sub.about .con08 .service_list > ul > li.s_list04{margin-left: -265px;margin-top: 52px}
#sub.about .con08 .service_list > ul > li.s_list05{margin-left: -29px;margin-top: 120px}
#sub.about .con08 .service_list > ul > li.s_list06{margin-left: 148px;margin-top: -162px}
#sub.about .con08 .service_list > ul > li.s_list07{margin-left: 330px;margin-top: 195px}
#sub.about .con08 .service_list > ul > li.s_list08{margin-left: 519px;margin-top: -133px;z-index: 1}
#sub.about .con08 .service_list > ul > li.s_list09{margin-left: 60px;margin-top: -670px}
#sub.about .con08 .service_list > ul > li.s_list10{margin-left: -405px;margin-top: 560px}
#sub.about .con08 .service_list > ul > li.s_list11{margin-left: 95px;margin-top: 445px}
#sub.about .con08 .service_list > ul > li .txt{position: relative;z-index: 2;text-align: center}
#sub.about .con08 .service_list > ul > li .txt strong{display: block;font-size: 40px;color: #FF5700;    font-family: "amandine", sans-serif;font-weight: 500}
/*#sub.about .con08 .service_list > ul > li .txt strong{display: block;font-size: 40px;font-family: "scotch-display", sans-serif;color: #fff;text-shadow: -1px -1px 0 #FF5700, 1px -1px 0 #FF5700, -1px 1px 0 #FF5700, 1px 1px 0 #FF5700;    font-family: "amandine", sans-serif;}*/
#sub.about .con08 .service_list > ul > li.s_list01 .txt strong, #sub.about .con08 .service_list > ul > li.s_list08 .txt strong{font-size: 60px;}
#sub.about .con08 .service_list > ul > li .txt p{font-size: 20px;color: #51341B;margin-top: 10px;}
#sub.about .con08 .about_title{position: relative;z-index: 5;padding-top: 440px;text-align: center}
#sub.about .con08 .service_list > ul > li .l_wrap{display: block;animation: bubble 4s infinite }
#sub.about .con08 .service_list > ul > li.s_list05 .l_wrap{display: block;animation: bubble 3.5s infinite linear}
#sub.about .con08 .service_list > ul > li.s_list04 .l_wrap{display: block;animation: bubble 3.8s infinite linear}
#sub.about .con08 .service_list > ul > li.s_list08 .l_wrap{display: block;animation: bubble 4.3s infinite linear}
#sub.about .con08 .service_list > ul > li:nth-child(1) .l_wrap{animation-delay: 0.2s}
#sub.about .con08 .service_list > ul > li:nth-child(3) .l_wrap{animation-delay: 0.3s}
#sub.about .con08 .service_list > ul > li:nth-child(4) .l_wrap{animation-delay: 0.9s}
#sub.about .con08 .service_list > ul > li:nth-child(5) .l_wrap{animation-delay: 0.6s}
#sub.about .con08 .service_list > ul > li:nth-child(6) .l_wrap{animation-delay: 1.2s}
#sub.about .con08 .service_list > ul > li:nth-child(7) .l_wrap{animation-delay: 0.3s}

#sub.about .con08 .service_list > ul > li{transform: scale(0.8) translateY(80px);opacity: 0;transition: 1.2s}
#sub.about .con08.on .service_list > ul > li{transform: scale(1) translateY(0);opacity: 1}

#sub.about .con08.on .service_list > ul > li.s_list01{transition-delay: 0.2s}
#sub.about .con08.on .service_list > ul > li.s_list02{transition-delay: 0.4s}
#sub.about .con08.on .service_list > ul > li.s_list03{transition-delay: 0.6s}
#sub.about .con08.on .service_list > ul > li.s_list04{transition-delay: 0.8s}
#sub.about .con08.on .service_list > ul > li.s_list05{transition-delay: 1s}
#sub.about .con08.on .service_list > ul > li.s_list06{transition-delay: 1.2s}
#sub.about .con08.on .service_list > ul > li.s_list07{transition-delay: 1.4s}
#sub.about .con08.on .service_list > ul > li.s_list08{transition-delay: 1.6s}
#sub.about .con08.on .service_list > ul > li.s_list09{transition-delay: 1.8s}
#sub.about .con08.on .service_list > ul > li.s_list10{transition-delay: 2s}
#sub.about .con08.on .service_list > ul > li.s_list11{transition-delay: 2.2s}
#sub.about .con07{padding: 200px 0; background: #FFFBF7;overflow: hidden;position: relative}
#sub.about .con07:after{content:'';display:block;position: absolute;width: 100%;height: 10%;background: linear-gradient(to bottom, #FFFBF700, #FFFBF7);position: absolute;bottom: 0;z-index: 10}
#sub.about .con07:before{content:'';display:block;position: absolute;width: 100%;height: 10%;background: linear-gradient(to top, #FFFBF700, #FFFBF7);position: absolute;top: 0;z-index: 10}

#btn_link{margin-top: 48px;position: relative;}
#btn_link .water_drop{position: absolute;top: 70%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: color-burn;pointer-events: none}
/*#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: }*/
#btn_link 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}
#btn_link a span{font-size: 20px;color: #FFFFFF;position: relative;z-index: 5;font-family: "amandine", sans-serif;}
#btn_link a i{position: absolute;height: 200%;width: 100%;background: linear-gradient(to top, #FFB300, #E7420E,  #FFB300);top: 0;transition: 0.5s}
#btn_link a:hover i{transform: translateY(-50%)}


@keyframes bubble{
    0%{transform: translateY(0) scale(1)}
    50%{transform: translateY(20px) scale(0.96);}
    100%{transform: translateY(0) scale(1)}
}

#sub.portfolio .gallery_wrap.simple{padding: 0;}
#sub.portfolio .gallery_wrap.simple > ul{gap: 40px;}
#sub.portfolio .gallery_wrap.simple > ul > li:nth-child(2n){margin-top: 0;}
#sub.portfolio .gallery_wrap.simple > ul > li{width: calc(33.33% - 26.66px);}
#sub.portfolio .gallery_wrap.simple > ul > li .port_txt{padding: 14px 20px;}
#sub .sub_visual{position: relative}
#sub .sub_visual .esg_object01{margin-left: -484px;margin-top: -393px;}
#sub .sub_visual .esg_object02{margin-left: 210px;margin-top: -172px;}
#sub .sub_visual .esg_object01 .fl{animation: fl01 3s linear infinite;animation-delay: 1s}
#sub .sub_visual .esg_object02 .fl{animation: fl02 3s linear infinite;animation-delay: 1.4s}
@keyframes fl01{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(5deg)}
    100%{transform: rotate(0deg)}
}

@keyframes fl02{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(-5deg)}
    100%{transform: rotate(0deg)}
}
#sub .sub_visual .esg_object{position: absolute;top: 50%;left: 50%}
#sub .sub_visual .sv_title_w{position: relative;z-index: 300}

#sub .sub_visual .sv_title_w .pin-spacer{pointer-events: none}
#sub .sub_visual .sv_title ul{display: flex;gap: 0 16px;transform: translateY(-18vh)}
#sub .sub_visual .sv_title ul li{color: #FF5700;font-family: 'AvantGarde Bk BT', sans-serif;display: flex;align-items: center;}
#sub .sub_visual .sv_title ul li:after{content: '';display: block;width: 3px;height: 3px;background: #FF5700;border-radius: 50%;margin-left: 16px;}
#sub .sub_visual .sv_title ul li a{color: inherit;font-weight: inherit;font-family: inherit}
#sub .sub_visual .sv_title strong{font-size: 150px;color: #FF5700;font-weight: 400;font-family: "amandine", sans-serif;display: block;perspective: 600px;line-height: 1}
#sub .sub_visual .sv_title strong *{font-family: inherit;letter-spacing: 1}
#sub .sub_visual .sv_title ul li *{font-family: inherit}
#sub .sub_visual .sv_title ul li:last-child:after{display: none}

#sub.esg .sub_visual .sv_title strong{letter-spacing: 0;text-align: center;font-size: 200px;text-align: center}
#sub .sub_visual .why_symbol{position: absolute;mix-blend-mode: overlay}
#sub.carrer .con01{padding: 0 60px;position: relative;display: flex;justify-content: flex-end}
#sub.carrer .con01 .carr_title{position: absolute;display: flex;height: 100vh;top: 0;left: 60px;padding-top: 270px}
#sub.carrer .con01 .carr_title .title_w{display: flex;flex-direction: column;align-items: flex-start}
#sub.carrer .con01 .carr_title strong{font-size: 50px;color: #51341B;line-height: 1.33;font-weight: 600}
#sub.carrer .con01 .carr_title strong b{background: linear-gradient(to bottom, #FFB300, #E7420E);background-clip: text;-webkit-background-clip: text;color: transparent;}
#sub.carrer .con01 .carr_title span{display: flex;width: 110px;height: 40px;border: 1px solid #FF5700;border-radius: 25px;align-items: center;justify-content: center;font-size: 18px;color: #FF5700;font-family: 'AvantGarde Bk BT', sans-serif;margin-bottom: 15px}
#sub.carrer .con01 .txt_list{width: 1070px;padding-top: 270px;display: flex;flex-direction: column;gap: 180px;}
#sub.carrer .con01 .txt_list .cont .tit{display: flex;align-items: center;gap: 40px;}
#sub.carrer .con01 .txt_list .cont .tit span{display: block;font-family: "amandine", sans-serif;font-size: 60px;color: #51341B;}
#sub.carrer .con01 .txt_list .cont .tit strong{font-size: 30px;line-height: 1.5;color: #51341B;font-weight: 900}
#sub.carrer .con01 .txt_list .cont .txt_w{border: 1px solid #FFFFFF;border-radius: 20px;padding: 60px;background: linear-gradient(-45deg,rgba(255,255,255,0.5),rgba(255,255,255,0.7));position: relative;padding-left: 125px;margin-top: 30px;}
/*#sub.carrer .con01 .txt_list .cont .txt_w{border: 1px solid #FFFFFF;border-radius: 20px;padding: 60px;background: linear-gradient(-45deg,rgba(255,231,220,0),rgba(255,231,220,0.7));position: relative;padding-left: 125px;margin-top: 30px;}*/
#sub.carrer .con01 .txt_list .cont .txt_w > i{position: absolute;left: 60px;top: 60px;color: #FF5700;font-size: 60px;font-family: "amandine", sans-serif;line-height: 120px;}
#sub.carrer .con01 .txt_list .cont .txt_w .name{display: flex;align-items: center;gap: 30px;}
#sub.carrer .con01 .txt_list .cont .txt_w .name div strong{font-size: 26px;color: #51341B;font-weight: 600;margin-bottom: 5px;display: block;}

#sub.carrer .con01 .txt_list .cont .txt_w .name i{display: block;border-radius: 50%;background: #fff}
#sub.carrer .con01 .txt_list .cont .txt_w .name i img{display:block}
#sub.carrer .con01 .txt_list .cont .txt_w .name div span{font-size: 16px;color: #51341B;}
#sub.carrer .con01 .txt_list .cont .txt_w .txt{margin-top: 30px;display: flex;flex-direction: column;gap: 20px;}
#sub.carrer .con01 .txt_list .cont .txt_w .txt div{position: relative}
#sub.carrer .con01 .txt_list .cont .txt_w .txt div .on{position: absolute;background: #51341B;color: #fff;padding: 2px 0}
#sub.carrer .con01 .txt_list .cont .txt_w .txt p{font-size: 22px;color: #51341B;line-height: 1;font-weight: 300;top: 0;font-weight: 300}
#sub.carrer .con01 .txt_list .cont .txt_w .txt p span{position: relative;line-height: 1}
#sub.carrer .con01 .txt_list .cont .txt_w .txt p span b{position: absolute;top: 2.5px;left: 0;font-weight: 400;white-space: nowrap;line-height: 1;background: #51341B;color: #fff;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);padding-right: 1px}
#sub.carrer .con02{padding-top: 280px;transform: translateY(100px);opacity: 0;transition: 1.2s}
#sub.carrer .con02.on{transform: translateY(0);opacity: 1;}
#sub.carrer .con02 .swiper-slide{width: auto}
#sub.carrer .con02 .wrap{padding: 20px;border: 1px solid #fff;border-radius: 10px;background:linear-gradient(-45deg,rgba(255,231,220,0),rgba(255,231,220,0.7));backdrop-filter: blur(20px);}
#sub.carrer .con02 .wrap .img{border-radius: 10px;overflow: hidden}
#sub.carrer .con02 .wrap .img img{display: block}
#sub.carrer .con02 .txt {padding: 0 20px;margin-top:  20px}
#sub.carrer .con02 .txt strong{color: #51341B;font-size: 18px;}
#sub.carrer .con03{margin-top: 100px;display: flex;justify-content: center;padding-bottom: 127px}
#sub.carrer .con03 .aw_list ul{display: flex;align-items: center;gap: 6px;justify-content: center}
#sub.carrer .con03 .aw_list ul li i{display: block;break-after: 6px;background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); border: 1px solid #fff;border-radius: 6px;}
#sub.carrer .con03 .txt_wrap{position: relative}
#sub.carrer .con03 .txt_wrap .bg{position: absolute;top: 0;}
#sub.carrer .con03 .txt_wrap .bg01{left: -150px}
#sub.carrer .con03 .txt_wrap .bg02{right: -150px}
#sub.carrer .con03 .aw_txt{margin-bottom: 30px;margin-top: 24px;}
#sub.carrer .con03 .aw_txt strong{display: block;color: #51341B;font-size: 40px;line-height: 1.5;text-align: center}
#sub.carrer .con03 .aw_keyword{display: flex;align-items: center;justify-content: center;gap: 10px;}
#sub.carrer .con03 .aw_keyword span{display: block;padding: 0 20px;line-height: 44px;border: 1px solid #51341B;border-radius: 23px;font-size: 20px;color: #51341B;font-weight: 500} 
#sub.carrer .con04{padding-top: 210px;padding-bottom: 160px;}
#sub.carrer .con04 .title {display: flex;flex-direction: column;align-items: center;margin-bottom: 120px;}
#sub.carrer .con04 .title span{display: flex;width: 110px;height: 35px;border: 1px solid #fff;border-radius: 25px;align-items: center;justify-content: center;font-size: 16px;color: #fff;font-family: 'AvantGarde Bk BT', sans-serif;margin-bottom: 20px;}
#sub.carrer .con04 .title strong{font-size: 50px;color: #FFFFFF;display: block;}
#sub.carrer .con04 ul{display: flex;flex-wrap: wrap;gap: 180px 0}
#sub.carrer .con04 ul li{width: 33.33%}
#sub.carrer .con04 ul li i img{display: block;margin: 0 auto}
#sub.carrer .con04 ul li .txt{text-align: center;margin-top: 40px;}
#sub.carrer .con04 ul li .txt strong{display: block;font-size: 30px;color: #FFFFFF;font-weight: 600;margin-bottom: 20px;}
#sub.carrer .con04 ul li .txt p{font-size: 20px;color: #FFFFFF;line-height: 1.5;font-weight: 300}

#sub.carrer .con04 ul li .icon{position: relative;width: 140px;margin: 0 auto}
#sub.carrer .con04 ul li .icon .icon_w{position: absolute;top: 0;left: 0}
#sub.carrer .con04 ul li .icon03 > img{animation: icon03 1.5s infinite linear;transform: translateY(15%);opacity: 0}
#sub.carrer .con04 ul li .icon03 .icon_w img{position: relative;z-index: 5}
#sub.carrer .con04 ul li .icon.icon06 .icon_w:before{content: '';display: block;    width: 81%;height: 23%;top: 27%;left: 10%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute}
#sub.carrer .con04 ul li .icon.icon07 .icon_w:before{content: '';display: block;width: 80%;height: 39%;top: 26%;left: 5%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute;border-radius: 15% 13% 13% 14%;}
#sub.carrer .con04 ul li .icon.icon03 .icon_w:before{content: '';display: block;width: 56%;height: 73%;top: 12%;left: 22%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute;border-radius: 15% 13% 20% 0px;}
#sub.carrer .con04 ul li .icon.icon06 .icon_w img{position: relative;z-index: 5}
#sub.carrer .con04 ul li .icon.icon07 .icon_w img{position: relative;z-index: 5}
#sub.carrer .con04 ul li .icon.icon07 > img{display: block;opacity: 0;animation: icon07 1.5s infinite linear;transform: translate(10px,10px)}

#sub.carrer .con04 ul li .icon.icon13 .icon_w:before{content: '';display: block;width: 88%;height: 69%;top: 31%;left: 5%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute;border-radius: 15% 13% 13% 14%;}
#sub.carrer .con04 ul li .icon.icon13 .icon_w img{position: relative;z-index: 5}

#sub.carrer .con04 ul li .icon.icon14 .icon_w:before{content: '';display: block;width: 88%;height: 69%;top: 31%;left: 5%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute;border-radius: 15% 13% 13% 14%;}
#sub.carrer .con04 ul li .icon.icon14 .icon_w:before{content: '';display: block;width: 83%;height: 43%;top: 17%;left: 8%;background: rgba(255,255,255,0);backdrop-filter: blur(5px);position: absolute;border-radius: 15% 13% 13% 14%;}
#sub.carrer .con04 ul li .icon.icon14 .icon_w img{position: relative;z-index: 5}
#sub.carrer .con04 ul li .icon.icon14 > img{display: block;transform-origin: top left; transform: rotate(-10deg);animation: icon14 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon13 > img{display: block; transform: rotate(0deg);animation: icon13 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon11 > img{display: block; position: relative;z-index: 5}
#sub.carrer .con04 ul li .icon.icon11 .icon_w{transform: translateY(-21%) translateX(30%) rotate(30deg);opacity: 0;animation: icon11 2s infinite}

#sub.carrer .con04 ul li .icon.icon01 .icon_w{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);animation: icon01 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon02 img{display: block;transform-origin: bottom left; transform: rotate(-15deg);animation: icon02 1.9s infinite}

#sub.carrer .con04 ul li .icon.icon04 .icon_w01{transform: translate(10%,10%);opacity: 0;animation: icon04_01 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon10 {animation: icon10 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon04 .icon_w02{transform: translate(0%,10%);opacity: 0;animation: icon04_02 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon04 .icon_w03{transform: translate(-10%,10%);opacity: 0;animation: icon04_03 1.5s infinite linear}
#sub.carrer .con04 ul li .icon.icon05 img{display: block;animation: icon05 1.5s infinite linear;transform-origin: left bottom}
#sub.carrer .con04 ul li .icon.icon09 img{display: block;animation: icon09 1.5s infinite linear;transform-origin: right bottom}
#sub.carrer .con04 ul li .icon.icon15 img{animation: icon15 2s infinite linear;display: block}
#sub.carrer .con04 ul li .icon.icon12{animation: icon12 1.5s infinite linear;display: block}
#sub.carrer .con04 ul li .icon.icon06 .icon_w{opacity: 0;transform: translateY(-30px);display: block;animation: icon06 1.5s infinite linear;}
@keyframes icon01{
    0%{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
    100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)}
}
@keyframes icon03{
    0%{transform: translateY(15%);opacity: 0}
    50%{transform: translateY(0%);opacity: 1}
    100%{transform: translateY(0%);opacity: 1}
}
@keyframes icon10{
    0%{transform: rotate(0deg);}
    20%{transform:rotate(10deg);}
    80%{transform: rotate(10deg);}
    100%{transform: rotate(0deg);}
}
@keyframes icon04_01{
    0%{transform: translate(10%,10%);opacity: 0}
    25%{transform: translate(0%,0%);opacity: 1}
    100%{transform: translate(0%,0%);opacity: 1}
}
@keyframes icon04_02{
    0%{transform: translate(0%,10%);opacity: 0}
    25%{transform: translate(0%,10%);opacity: 0}
    50%{transform: translate(0%,0%);opacity: 1}
    100%{transform: translate(0%,0%);opacity: 1}
}
@keyframes icon04_03{
    0%{transform: translate(-10%,10%);opacity: 0}
    50%{transform: translate(-10%,10%);opacity: 0}
    75%{transform: translate(0%,0%);opacity: 1}
    100%{transform: translate(0%,0%);opacity: 1}
}
@keyframes icon14{
    0%{transform: rotate(-10deg)}
    50%{transform: rotate(0deg)}
    100%{transform: rotate(-10deg)}
}
@keyframes icon13{
    0%{transform: translateY(0)}
    50%{transform: translateY(7px)}
    100%{transform: translateY(0)}
}
@keyframes icon07{
    0%{transform: translate(10px,10px);opacity: 0}
    50%{transform: translate(0px,0px);opacity: 1}
    100%{transform: translate(0px,0px);opacity: 1}
}
@keyframes icon12{
    0%{transform: translateY(0)}
    50%{transform: translateY(-20px)}
    100%{transform: translateY(0)}
}
@keyframes icon11{
    0%{transform: translateY(-21%) translateX(30%) rotate(30deg);opacity: 0}
    60%{transform: translateY(0%) translateX(0%) rotate(0deg);opacity: 1}
    100%{transform: translateY(0%) translateX(0%) rotate(0deg);opacity: 1}
}
@keyframes icon15{
    0%{transform: rotate(0deg)}
    25%{transform: rotate(90deg)}
    50%{transform: rotate(90deg)}
    75%{transform: rotate(00deg)}
    100%{transform: rotate(0deg)}
}
@keyframes icon05{
    0%{transform: rotate(0deg)}
    10%{transform: rotate(0deg)}
    50%{transform: rotate(-10deg)}
    90%{transform: rotate(0deg)}
    100%{transform: rotate(0deg)}
}
@keyframes icon02{
    0%{transform: rotate(-20deg);opacity: 0}
    20%{opacity: 1}
    80%{opacity: 1}
    100%{transform: rotate(0deg);opacity: 0}
}
@keyframes icon06{
    0%{transform: translateY(-30px);opacity: 0}
    20%{opacity: 1}
    60%{opacity: 1;transform: translateY(0px)}
    100%{opacity: 1;transform: translateY(0px)}
}
@keyframes icon09{
    0%{transform: rotate(0deg)}
    10%{transform: rotate(0deg)}
    50%{transform: rotate(5deg)}
    90%{transform: rotate(0deg)}
    100%{transform: rotate(0deg)}
}
#sub.carrer .con04 .linked{padding-top: 337px}
#sub.carrer .con04 .linked .txt_w{position: relative}
#sub.carrer .con04 .linked .txt_w i{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.carrer .con04 .linked .txt_w strong{text-align: center;display: block;color: #FFFFFF;font-size: 50px;font-weight: 600;margin-bottom: 40px;position: relative;z-index: 2}
#sub.carrer .con04 .linked .txt_w p{font-size: 20px;color: #FFFFFF;font-weight: 300;line-height: 30px;padding: 0 7px}
#sub.carrer .con04 .linked .txt_w p.on{color: #FF6600;background: #fff;    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);transition: 1.2s}
#sub.carrer .con04 .linked .txt_w .txt{display: flex;justify-content: center;gap: 10px;flex-direction: column;position: relative;z-index: 2;align-items: center}
/*
#sub.carrer .con04 .linked a{width: 300px;height: 300px;display: flex;align-items: center;justify-content: center;position: relative;margin: 0 auto;margin-top: 150px}
#sub.carrer .con04 .linked a i.line01{position: absolute;width: 100%;height: 100%;border: 1px solid #fff;border-radius: 50%;transition: 0.5s}
#sub.carrer .con04 .linked a i.line02{position: absolute;width: 270px;height: 270px;border: 6px solid rgba(255,255,255,0.1);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 50%;transition: 0.5s}
#sub.carrer .con04 .linked a:hover i.line02{width: 326px;height: 326px;}
#sub.carrer .con04 .linked a:hover i.line01{transform: scale(1.1);opacity: 0}
#sub.carrer .con04 .linked a i.bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.carrer .con04 .linked a i.bg img{display: block;transform: scale(0.5) rotate(18deg);transition: 0.5s;opacity: 0}
#sub.carrer .con04 .linked a:hover i.bg img{display: block;transform: scale(1) rotate(0deg);transition: 0.5s;opacity: 1}
#sub.carrer .con04 .linked a strong{font-size: 30px;color: #FFFFFF;font-family: "amandine", sans-serif;font-weight: 400;transition: 0.5s;position: relative;z-index: 2}
#sub.carrer .con04 .linked a:hover strong{color: #FF5800;transform: scale(1.3)}
*/
#sub.carrer .con04 .linked .txt_w .txt div{position: relative}
#sub.carrer .con04 .linked .txt_w .txt div .on{position: absolute;top: 0;left: 0}
#sub.carrer .back_bg{background: #FFFBF7;}
#sub.carrer .carrer_bg{position: fixed;height: 100vh;background: #FF7D00;display: flex;align-items: flex-end}
#sub.carrer .carrer_bg:after{content: '';display: block;width: 100%;height: 100%;background: linear-gradient(to top, rgba(255,87,0,0), rgba(255,87,0,1), rgba(255,87,0,0));position: absolute;top: 0;left: 0}
#sub.carrer .carrer_bg .vid_w{height: 50%;overflow: hidden;background: #FF5700}
#sub.carrer .carrer_bg .vid_w video{mix-blend-mode: color-dodge;}
/*#footer{background: #F8F2EF}*/
#footer{position: relative;z-index: 15}
#sub .sub_visual .bg{position: absolute}
#sub .sub_visual2{padding-bottom: 180px;padding-top: 158px;padding-left: 60px;position: relative;z-index: 20}
#sub .sub_visual2 .bg{position: absolute;top: 0;left: 50%;transform: translateX(-50%)}
#sub .sub_visual2 span{display: flex;width: 110px;height: 40px;align-items: center;justify-content: center;border: 1px solid #FF5700;border-radius: 25px;font-family: 'AvantGarde Bk BT', sans-serif;margin-bottom: 19px;color: #FF5700}
#sub .sub_visual2 p{font-size: 20px;color: #51341B;line-height: 1;margin-top: 20px;}
#sub .sub_visual2 .sv_title2 strong{font-size: 60px;color: #FF5700;line-height: 80px;display: block;text-align: center}
#sub .sub_visual2 .sv_title strong{font-size: 60px;color: #51341B;line-height: 1.3;}
#sub.unique .sub_visual2 .sv_title strong{font-size: 50px}
#sub .sub_con{padding: 0 60px;position: relative;z-index: 5}
#sub.board .bo_info{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
#sub.board .bo_info strong{font-size: 20px;color: #51341B;font-weight: 300}
#sub.board .bo_info strong b{font-size: 20px;color: #F37C07;font-weight: 900}
#sub.board .bo_info .sch{position: relative;}
#sub.board .bo_info .sch input{height: 70px;border: none;border-bottom: 1px solid #D8C5B4;width: 400px;font-size: 20px;color: #51341B;font-weight: 300;background: none}
#sub.board .bo_info .sch button{height: 70px;width: 70px;right: 0;top: 0;position: absolute}
#sub.board .bo_list{border-top: 1px solid #E6D9D3}
#sub.board .bo_list ul li a{display: flex;flex-direction: column;justify-content: center;height: 284px;border-bottom: 1px solid #E6D9D3;gap: 20px;}
#sub.board .bo_list ul li a strong{flex-shrink: 32px;color: #51341B;font-weight: 900;font-size: 32px;}
#sub.board .bo_list ul li .cate{display: flex;gap: 10px;}
#sub.board .bo_list ul li .cate span{display: flex;height: 44px;align-items: center;border: 1px solid #51341B;border-radius: 44px;padding: 0 20px;color: #51341B;font-weight: 600}
#sub.board .bo_list ul li .cate span.ing{background: #FF5700;border-color: #FF5700;color: #fff}
#sub.board .bo_list ul li .cate span.end{background: #51341B;border-color: #51341B;color: #fff}
#sub .paging{margin-top: 100px;}
#sub .paging ul{display: flex;align-items: center;justify-content: center;gap: 8px;}
#sub .paging ul li a{width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #51341B;font-weight: 500;    font-family: "amandine", sans-serif;}
#sub .paging ul li a svg{display: block;}
#sub .paging ul li.on a{background: #FF5700;border-radius: 10px;color: #fff}
#sub.board_view .b_title{padding: 40px 20px;border-bottom: 1px solid #E6D9D3;}
#sub.board_view .b_title .cate{display: flex;gap: 10px;margin-bottom: 20px;}
#sub.board_view .b_title .cate span{display: flex;height: 44px;border: 1px solid #51341B;align-items: center;padding: 0 20px;border-radius: 44px;}
#sub.board_view .b_title .cate span.ing{background: #FF5700;border-color: #FF5700;color: #fff}
#sub.board_view .b_title strong{display: block;font-size: 32px;font-weight: 600;color: #51341B;}
#sub.board_view .cont{padding: 80px 0;min-height: 500px;position: relative;z-index: 5}

#sub.board_view .sub_con{padding-bottom: 200px;background: #FFFBF7 }
#sub.board .sub_con{padding-bottom: 200px;background: #FFFBF7 }

#sub.carrer .sub_visual{overflow: visible !important}
#sub.carrer .sub_visual:after{display: none !important}
#sub.carrer .sub_visual .bg_video{width: 100%;height: 100%}
#sub.carrer .sub_visual .bg_video video{width: 2700px;display: block;transform: translate(-50%,-50%);position: absolute;top: 50%;left: 50%}
#sub .list_btn a{width: 300px;height: 300px;display: flex;align-items: center;justify-content: center;position: relative;margin: 0 auto;margin-top: 150px}
#sub .list_btn a i.line01{position: absolute;width: 100%;height: 100%;border: 1px solid #51341B;border-radius: 50%;transition: 0.5s}
#sub .list_btn a i.line02{position: absolute;width: 270px;height: 270px;border: 6px solid rgba(229,130,20,0.1);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 50%;transition: 0.5s}
#sub .list_btn a:hover i.line02{width: 326px;height: 326px;}
#sub .list_btn a:hover i.line01{transform: scale(1.1);opacity: 0}
#sub .list_btn a i.bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub .list_btn a i.bg img{display: block;transform: scale(0.5) rotate(18deg);transition: 0.5s;opacity: 0}
#sub .list_btn a:hover i.bg img{display: block;transform: scale(1) rotate(0deg);transition: 0.5s;opacity: 1}
#sub .list_btn a strong{font-size: 30px;color: #51341B;font-family: "amandine", sans-serif;font-weight: 400;transition: 0.5s;position: relative;z-index: 2}
#sub .list_btn a:hover strong{color: #FF5800;transform: scale(1.3)}
#sub .list_btn a p{font-size: 30px;color: #51341B;line-height: 38px;text-align: center;display: block;font-weight: 600;position: relative;z-index: 5;transition: 0.5s}
#sub .list_btn a:hover p{transform: scale(1.3)}
#sub.form .frm_wrap{width: 1080px;margin: 0 auto;position: relative;z-index: 50}
#sub.form .sub_con{position: relative;z-index: 50;padding-bottom: 200px;}
#sub.form .frm_wrap ul{display: flex;flex-wrap: wrap;gap: 100px 80px}
#sub.form .frm_wrap ul li{width: calc(50% - 40px);}
#sub.form .frm_wrap ul li .inp > *{width: 100%;height: 75px;background: none;border: none;border-bottom: 1px solid #D8C5B4;font-size: 20px;color: #9B7758;font-weight: 300}
#sub.form .frm_wrap ul li .inp > *::placeholder{;color: #9B7758;}
#sub.form .frm_wrap ul li strong{font-size: 30px;color: #51341B;font-weight: 600}
#sub.form .frm_wrap ul li strong i{font-weight: 600;color: #EC6D00;}
#sub.form .frm_wrap ul li.line1{width: 100%}
#sub.form .frm_wrap ul li .file_w{padding: 20px;background: #fff;border-radius: 10px;display: flex;align-items: center;gap: 20px;position: relative}
#sub.form .frm_wrap ul li .file_w input{position: absolute;top: 0;left: 0;opacity: 0;width: 100%;height: 100%}
#sub.form .frm_wrap ul li .file_w > span{display: flex;width: 155px;height: 50px;background: #F8F2EF;border-radius: 50px;align-items: center;justify-content: center;gap: 12px;border: 1px solid #51341B}
#sub.form .frm_wrap ul li .file_w > span > span{color: #51341B;font-size: 18px;font-weight: 600}
#sub.form .frm_wrap ul li .file_w p{font-size: 20px;color: #9B7758;font-weight: 300}
#sub .per{display: flex;align-items: center;justify-content: center;margin-top: 100px;gap: 10px;}
#sub .per input{width: 22px;height: 22px;position: relative;border: none !important}
#sub .per input:after{content: '';display: block;width: calc(100% + 2px);height: calc(100% + 2px);background: url(/img/sub/chk.png);background-size: 100% 100%;margin-top: -1px;margin-left: -1px}
#sub .per input:checked:after{background: url(/img/sub/chk_on.png);background-size: 100% 100%;}
#sub .per p{font-size: 20px;color: #51341B;font-weight: 300}
#sub .per p a{font-weight: 600;color: #51341B}

#sub.form .sub_con{background: #FFFBF7 }
#sub.gallery .sub_visual{height: 500px}
#sub.gallery .sub_con{width: 1600px;padding: 0;margin: 0 auto}
#sub.gallery.board_view .sub_con{width: 100%}
#sub.gallery.board_view .sub_con > *{width: 1600px;margin: 0 auto;max-width: 100%}
#sub.gallery.board_view .sub_con > * img{max-width: 100%}
#sub.gallery .sub_con{background: #FFFBF7}
#sub.gallery .gal_list{padding-top: 30px;}
#sub.gallery .gal_list ul{display: flex;flex-wrap: wrap;gap: 50px;}
#sub.gallery .gal_list ul li {width: calc(33.33% - 33.33px)}
#sub.gallery .gal_list ul li a{display: block;padding: 0px;position: relative}
/*#sub.gallery .gal_list ul li a:before{content: '';display: block;position: absolute;background: linear-gradient(45deg, rgba(255,255,255,0.75), rgba(255,255,255,0));  backdrop-filter: blur(20px);top: 0;left: 0;width: 100%;height: 100%;border-radius: 10px;border: 1px solid #fff;transition: 0.6s}*/
#sub.gallery .gal_list ul li:hover a:before{height: calc(100% - 235px);top: 30px;width: calc(100% - 60px);left: 30px}
#sub.gallery .gal_list ul li a .txt{padding-top: 30px;transition: 0.5s}
#sub.gallery .gal_list ul li:hover a .txt{transform: translateY(20px)}
#sub.gallery .gal_list ul li a .txt strong{display: block;font-size: 20px;line-height: 1.5;color: #51341B;transition: 0.6s}
#sub.gallery .gal_list ul li a .txt strong br{display: none}
/*
#sub.gallery .gal_list ul li:hover a .txt {text-align: center}
#sub.gallery .gal_list ul li:hover a .txt strong{}
*/
#sub.gallery .gal_list ul li a .txt p{font-size: 17px;color: #9A816B;padding-top: 28px;}
#sub.gallery .gal_list ul li .img{position: relative;z-index: 2;background: linear-gradient(190deg, rgba(255,170,0,1), rgba(255,87,0,1));border-radius: 10px;overflow: hidden}
#sub.gallery .gal_list ul li .img:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(/img/sub/news_line.png);background-size: 100% 100%;transform: scale(1.1);transition: 0.6s}
#sub.gallery .gal_list ul li:hover .img:after{transform: scale(1.0);transition: 0.6s}
#sub.gallery .gal_list ul li .img img{display: block;width: 100%}
#sub.gallery .gal_list ul li .img i{position: absolute;top: 50%;left: 50%;display: flex;width: 100px;height: 100px;align-items: center;justify-content: center;margin-top: -50px;margin-left: -50px;background: linear-gradient(190deg, rgba(255,170,0,0.5), rgba(255,87,0,0.5));backdrop-filter: blur(20px);border-radius: 50%;transform: scale(0.7);opacity: 0;transition: 0.5s}
#sub.gallery .gal_list ul li:hover .img i{opacity: 1;transform: scale(1)}
#sub.gallery .gal_list ul li .txt{position: relative;z-index: 2}
/*#sub.gallery .gal_list ul li:nth-child(2n){transform: translateY(200px)}*/
#sub.gallery .sub_con{padding-bottom: 150px}
#sub.gallery .paging{margin-top: 100px}
#sub .sub_visual3{padding-top: 200px;padding-bottom: 60px;}
#sub .sub_visual3 .sv_title strong{font-size: 200px;color: #51341B;display: block;text-align: center;font-family: "amandine", sans-serif;font-weight: 400}
#sub.contact .sub_con{position: relative;background: #FFFBF7}
#sub.contact .contact_bg{position: absolute;right: 0;top: 0;width: 50%;height: 100vh;display: flex;align-items: center;justify-content: center;z-index: 10;pointer-events: none}
#sub.contact .contact_bg img{display: block;animation: 4s logo_contact infinite linear}
@keyframes logo_contact{
    0%{transform: rotate(0deg)}
    25%{transform: rotate(3deg)}
    50%{transform: rotate(0deg)}
    75%{transform: rotate(-3deg)}
    100%{transform: rotate(0deg)}
}
#sub.contact .sub_visual2 .sv_title > div > *{display: inline-block;position: relative}
#sub.contact .sub_visual2 .sv_title > div{}
#sub.contact .sub_visual2 .sv_title > div:nth-child(6){margin-top: 40px}
#sub.contact .sub_visual2 .sv_title > div:nth-child(3){margin-top: 20px}
#sub.contact .sub_visual2 .sv_title > div:nth-child(4){margin-top: 20px}
#sub.contact .sub_visual2 .sv_title > div:nth-child(5){margin-top: 10px}

#sub.contact .sub_visual2 .sv_title > div{transform: translateX(50px);opacity: 0;transition: 1.2s}
#sub.contact .sub_visual2.on .sv_title > div{transform: translateX(0px);opacity: 1}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(2){transition-delay: 0.2s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(3){transition-delay: 0.4s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(4){transition-delay: 0.6s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(5){transition-delay: 0.8s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(6){transition-delay: 1.0s}
/*
#sub.contact .sub_visual2 .sv_title > div > *{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);transition: 0.7s}

#sub.contact .sub_visual2 .sv_title > div:nth-child(2) > *{transition-delay: 0.1s}
#sub.contact .sub_visual2 .sv_title > div:nth-child(3) > *{transition-delay: 0.2s}
#sub.contact .sub_visual2 .sv_title > div:nth-child(4) > *{transition-delay: 0.3s}
#sub.contact .sub_visual2 .sv_title > div:nth-child(5) > *{transition-delay: 0.4s}

#sub.contact .sub_visual2 .sv_title > div:nth-child(6) > *{transition-delay: 0.5s}

#sub.contact .sub_visual2.on .sv_title > div > *{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
#sub.contact .sub_visual2 .sv_title > div > * i{position: absolute;top: -1px;left:-1px;width: calc(100% + 2px);height: calc(100% + 2px);background: #51341B;transition: 0.7s;clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transition-delay: 0.5s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(2) > * i{transition-delay: 0.6s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(3) > * i{transition-delay: 0.7s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(4) > * i{transition-delay: 0.8s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(5) > * i{transition-delay: 0.9s}
#sub.contact .sub_visual2.on .sv_title > div:nth-child(6) > * i{transition-delay: 1.0s}
#sub.contact .sub_visual2.on .sv_title > div > * i{clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
*/
#sub.contact .sub_visual2 .sv_title > div > span{line-height: 38px;text-align: center}
#sub.contact .sub_visual2 .sv_title > div p{margin-top: 0}
#sub.contact .form_w{width: 840px}
#sub.contact .form_w ul.list{display: flex;flex-wrap: wrap;gap: 40px;flex-direction: column}
#sub.contact .form_w ul.list > li div{margin-bottom: 40px; display: flex;align-items: flex-end;gap: 6px;position: relative}
#sub.contact .form_w ul.list > li div .now{position: absolute;right: 0;display: flex;align-items: center;gap: 8px;margin-top: 0;margin-bottom: 0;bottom: 20px}

#sub.contact .form_w ul.list > li div#attachFileDiv{width: 100%;display: flex;flex-direction: column;gap: 15px}
#sub.contact .form_w ul.list > li div#attachFileDiv > div{width: 100%;margin-bottom: 0}
#sub.contact .form_w ul.list > li div .now p{font-size: 17px;margin-top: 0}
#sub.contact .form_w ul.list > li div .per input{width: 16px;height: 16px;}
#sub.contact .form_w ul.list > li div span{font-size: 18px;color: #AEA195;}
#sub.contact .form_w ul.list > li div span{margin-top: 5px;display: block}
#sub.contact .form_w ul.list > li div p{margin-bottom: 0;position: relative;top: 1px;}
#sub.contact .form_w ul.list > li strong{font-size: 18px;color: #51341B;font-family: 'AvantGarde Bk BT', sans-serif;}
#sub.contact .form_w ul.list > li strong i{color: #EC6D00;font-weight: 500}
#sub.contact .form_w ul.list > li p{font-size: 30px;color: #51341B;font-weight: 600;margin-top: 10px;display: block;margin-bottom: 30px;}
#sub.contact .form_w ul.list > li p i{color: #EC6D00}
#sub.contact .form_w ul.list > li .inp > input{padding-bottom: 20px;border-bottom: 1px solid #D8C5B4;display: block;width: 100%;border: none;background: none;font-size: 20px;border-bottom: 1px solid #D8C5B4}
#sub.contact .form_w ul.list > li .inp > textarea{padding-bottom: 20px;border-bottom: 1px solid #D8C5B4;display: block;width: 100%;border: none;background: none;font-size: 20px;border-bottom: 1px solid #D8C5B4;height: 245px;}
#sub.contact .form_w ul.list > li .inp > input::placeholder{color: #9B7758}
#sub.contact .form_w ul.list > li .inp > textarea::placeholder{color: #9B7758}
#sub.contact .form_w ul.list > li ul{display: flex;flex-wrap: wrap;gap: 10px;}
#sub.contact .form_w ul.list > li ul li{position: relative}
#sub.contact .form_w ul.list > li ul li label{display: flex;line-height: 50px;border: 1px solid #9B7758;border-radius: 50px;padding: 0 28px;font-size: 20px;color: #9B7758;}
#sub.contact .form_w ul.list > li ul li input:checked + label{background: #FF6B17;border-color: #FF6B17;color: #fff}
#sub.contact .form_w ul.list > li ul li input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0}
#sub.contact .form_w ul.list > li .file_name{display: flex;justify-content: space-between}
#sub.contact .form_w ul.list > li .file_name div{display: block;margin-bottom: 0}
#sub.contact .form_w ul.list > li .file_name button{width: 147px;height: 49px;background: #FF6B17;border-radius: 25px;font-size: 18px;color: #FFFFFF;font-weight: 600;gap: 10px;display: flex;align-items: center;justify-content: center}
#sub.contact .form_w ul.list > li .file_w{padding: 20px;background: rgba(255,255,255,0.5);border-radius: 10px;display: flex;align-items: center;gap: 20px;position: relative;position: relative}
#sub.contact .form_w ul.list > li .file_w input[type="file"]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0}
#sub.contact .form_w ul.list > li .file_w > span{display: flex;width: 155px;height: 50px;border-radius: 50px;align-items: center;justify-content: center;gap: 12px;border: 1px solid #FF6B17}
#sub.contact .form_w ul.list > li .file_w button{width: 40px;height: 40px;background: #9B7758;border-radius: 50%;;right: 30px;top: 25px;text-indent: -9999px;overflow: hidden;position: absolute;z-index: 15}
#sub.contact .form_w ul.list > li .file_w button i{position: absolute;width: 12px;height: 12px;top: 50%;left: 50%;margin-top: -6px;margin-left: -6px;transform: rotate(45deg)}
#sub.contact .form_w ul.list > li .file_w button i:before{content: '';display: block;width: 2px;height: 100%;position: absolute;left: 50%;transform: translateX(-1px);background: #FFFFFF}
#sub.contact .form_w ul.list > li .file_w button i:after{content: '';display: block;width: 100%;height: 2px;position: absolute;top: 50%;transform: translateY(-1px);background: #FFFFFF;left: 0}
#sub.contact .form_w ul.list > li .file_w > span > span{color: #FF6B17;font-size: 18px;font-weight: 600}
#sub.contact .form_w ul.list > li .file_w p{font-size: 20px;color: #9B7758;font-weight: 300;margin-top: 0}

#sub.contact .sub_visual2 ul:after{content: '';display: block;clear: both;}
#sub.contact .sub_visual2 ul{margin-top: 0}
#sub.contact .sub_visual2 ul li{display: inline-block;}
#sub.contact .sub_visual2 ul li:after{content: '';display: inline-block;width: 1px;height: 30px;background: #EFCCC0;margin: 0 30px;}
#sub.contact .sub_visual2 ul li:last-child:after{display: none}
#sub.contact .sub_visual2 ul li:last-child{margin-right: 0}
#sub.contact .sub_visual2 ul li a{color: #FF4600;font-size: 48px;line-height: 1; font-weight: 600;}



#sub.contact .form_w .list_btn{margin-top: 60px;}
#sub.contact .member{margin-top: 178px;padding-bottom: 150px;width: calc(100% + 120px);position: relative;left: -60px}
#sub.contact .member .member_list .swiper-slide{width: 300px;width: 230px}
#sub.contact .member .member_list .mem{width:  170px;height: 170px;margin: 0 auto;border: 2px solid #F99C55;border-radius: 50%;overflow: hidden;background: #fff}
#sub.contact .member .member_list .mem img{max-width: 100%}
#sub.contact .member .member_list .txt{text-align: center;padding-top: 25px;}
#sub.contact .member .member_list .txt strong{display: block;font-size: 18px;color: #51341B;margin-bottom: 4px;}
#sub.contact .member .member_list .txt > span{display: inline-block;background: #FF6B17;padding: 7px 15px;border-radius: 30px;font-size: 17px;color: #fff;margin-bottom: 10px}
#sub.contact .member .member_list .txt p{font-size: 16px;color: #51341B;font-weight: 300}
#sub.contact .member .member_list .txt p span{font-weight: 600;color: #EC6D00;}
#sub.contact .member .title {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 60px;}
#sub.contact .member .title span{display: flex;width: 82px;height: 35px;align-items: center;justify-content: center;border: 1px solid #FF6B17;border-radius: 20px;font-size: 16px;color: #FF6B17;    font-family: 'AvantGarde Bk BT', sans-serif;margin-bottom: 20px;}
#sub.contact .member .title strong{font-size: 50px;color: #51341B;font-weight: 600}


#sub.carrer .con03 .txt_wrap{transform: translateY(100px);opacity: 0;transition: 1.2s}
#sub.carrer .con03.on .txt_wrap{transform: translateY(0);opacity: 1}
#sub.carrer .con03 .txt_wrap .bg01{transform: rotate(-5deg) translate(60px,60px);opacity: 0;transition: 1s;transition-delay: 1s}
#sub.carrer .con03.on .txt_wrap .bg01{transform: rotate(0deg) translate(0px,0px);opacity: 1}
#sub.carrer .con03 .txt_wrap .bg02{transform: rotate(5deg) translate(-60px,60px);opacity: 0;transition: 1s;transition-delay: 1s}
#sub.carrer .con03.on .txt_wrap .bg02{transform: rotate(0deg) translate(0px,0px);opacity: 1}

#sub.carrer .con04 .title span{transform: translateY(100px);transition: 1s;opacity: 0}
#sub.carrer .con04.on .title span{transform: translateY(0px);transition: 1s;opacity: 1}
#sub.carrer .con04 .title strong{transform: translateY(100px);transition: 1s;opacity: 0}
#sub.carrer .con04.on .title strong{transform: translateY(0px);transition: 1s;opacity: 1;transition-delay: 0.3s}

#sub.carrer .con04 ul li{transform: translateY(100px);transition: 1s;opacity: 0}
#sub.carrer .con04.on ul li{transform: translateY(0px);transition: 1s;opacity: 1}
#sub.carrer .con04.on ul li:nth-child(1){transition-delay: 0.6s}
#sub.carrer .con04.on ul li:nth-child(2){transition-delay: 0.9s}
#sub.carrer .con04.on ul li:nth-child(3){transition-delay: 1.2s}
#sub.carrer .con04.on ul li:nth-child(4){transition-delay: 1.5s}
#sub.carrer .con04.on ul li:nth-child(5){transition-delay: 1.8s}
#sub.carrer .con04.on ul li:nth-child(6){transition-delay: 2.1s}
#sub.carrer .con04.on ul li:nth-child(7){transition-delay: 2.4s}
#sub.carrer .con04.on ul li:nth-child(8){transition-delay: 2.7s}
#sub.carrer .con04.on ul li:nth-child(9){transition-delay: 3.0s}
#sub.carrer .con04.on ul li:nth-child(10){transition-delay: 3.3s}
#sub.carrer .con04.on ul li:nth-child(11){transition-delay: 3.6s}
#sub.carrer .con04.on ul li:nth-child(12){transition-delay: 3.9s}
#sub.carrer .con04.on ul li:nth-child(13){transition-delay: 4.2s}
#sub.carrer .con04.on ul li:nth-child(14){transition-delay: 4.5s}
#sub.carrer .con04.on ul li:nth-child(15){transition-delay: 4.8s}


#sub.carrer .con04 .linked .txt_w strong{letter-spacing: 5px;opacity: 0;filter: blur(30px);opacity: 0}
#sub.carrer .con04 .linked.on .txt_w strong{letter-spacing: 0;opacity: 1;filter: blur(0px);transition: 1.2s}
#sub.carrer .con04 .linked.on .txt_w strong{letter-spacing: 0;opacity: 1;filter: blur(0px);transition: 1.2s}
#sub.carrer .con04 .linked.on .txt_w p{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}
#sub.carrer .con04 .linked .txt_w i img{display: block;transform: translate(100px,100px);transition: 1.2s;transition-delay: 0.6s;opacity: 0}
#sub.carrer .con04 .linked.on .txt_w i img{display: block;transform: translate(0px,0px);opacity: 1}
#sub.brand .sub_visual{height: 100vh;align-items: center;justify-content: center;display: flex;}
#sub.brand .list_btn a p{    font-family: "amandine", sans-serif;}
#sub.brand .sub_visual{background: linear-gradient(to bottom, #E53700, #FFAA00)}
#sub.brand .sub_visual .sv_title ul li{color: #FFFFFF}
#sub.brand .sub_visual .sv_title ul li:after{background: #fff}
#sub.brand .sub_visual .sv_title strong{color: #FFFFFF}
#sub.brand .sun_bg{position: relative}
#sub.brand .sun_bg .sun_bg_img{position: absolute;top: 0;left: 50%;transform: translateX(-50%)}
#sub.brand .sun_bg .sun_bg_img img{display: block;}
#sub.brand .con01{padding-top: 408px;position: relative;z-index: 5}
#sub.brand .brand_title{position: relative;padding-bottom: 200px}
#sub.brand .brand_title .tag{display: flex;justify-content: center;position: relative}
#sub.brand .brand_title .tag i{position: absolute;left: 50%;top: 50%;color: #FFFFFF;opacity: 0.3;mix-blend-mode: overlay;font-size: 200px;transform: translate(-50%,-50%);font-family: "amandine", sans-serif;}
#sub.brand .brand_title .tag p{height: 35px;display: flex;align-items: center;padding: 0 24px;color: #FFFFFF;font-size: 16px;font-family: 'AvantGarde Bk BT', sans-serif;background: rgba(255,255,255,0.1);backdrop-filter: blur(20px);border-radius: 25px;border: 1px solid #fff;position: relative;z-index: 5;}

#sub.brand .con09 .brand_title .tag i{color: #FF570020}

#sub.brand .brand_title strong{font-size: 50px;color: #FFFFFF;line-height: 1.33;text-align: center;display: block;margin-top: 10px}
#sub.brand .con02{position: relative;z-index: 5;display: flex;justify-content: space-between;align-items: flex-end;padding: 0 60px;}
#sub.brand .con02 .unlimit{display: flex;flex-direction: column;gap: 60px;}
#sub.brand .con02 .line_w{width: calc(100% - 1252px);padding-bottom: 105px;}
#sub.brand .con02 .line_w i{display: block;width: 100%;height: 1px;background: #fff;margin-top: 10px;}
#sub.brand .con02 .line_w strong{display: block;text-align: right;font-size: 18px;color: #FFFFFF;font-family: 'AvantGarde Bk BT', sans-serif;font-weight: 400}
#sub.brand .txt_cont{display: flex;flex-direction: column;gap: 10px;padding: 0 60px;}
#sub.brand .txt_cont > div{position: relative}
#sub.brand .txt_cont > div .on{position: absolute;top: 0;left: 0;opacity: 1;    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
#sub.brand .sub_visual{position: relative;}
#sub.brand .sub_visual .brand_parts{position: absolute;top: 50%;left: 50%;z-index: 2;}
#sub.brand .sub_visual .brand_parts01{margin-top: -324px;margin-left: -214px;;}
#sub.brand .sub_visual .brand_parts02{margin-top: 221px;margin-left: 37px;;}
#sub.brand .sub_visual .brand_parts03{margin-top: -235px;margin-left: 309px;;}
#sub.brand .sub_visual .brand_parts04{margin-top: 117px;margin-left: -749px;;}
#sub.brand .sub_visual .brand_parts05{margin-top: -133px;margin-left: -574px;;}
#sub.brand .sub_visual .brand_parts06{margin-top: 263px;margin-left: 198px;;}
#sub.brand .txt_cont p{font-size: 30px;color: #FFFFFF;font-weight: 600;opacity: 0.5}
#sub.brand .txt_cont p.on{opacity: 1}
#sub.brand .grad_bg{background: linear-gradient(to bottom, #FF9100, #FF6900)}
#sub.brand .con03{padding-top: 240px;align-items: flex-end}
#sub.brand .con04{padding-top: 240px;}
#sub.brand .con05{padding-top: 354px;align-items: center}
#sub.brand .logo_cont{padding-top: 34px;display: flex;align-items: center;justify-content: center;padding-bottom: 80px;mix-blend-mode: overlay}
#sub.brand .logo_cont .light{position: absolute;transform: translate(-50%,-50%);opacity: 1}
#sub.brand .logo_cont .logo_parts{position: relative;}
#sub.brand .logo_cont .logo_parts .logo_part {position: absolute;top: 0;left: 0;;}
#sub.brand .logo_cont .logo_parts .logo_part01 {position: relative;}
#sub.brand .logo_cont .logo_parts .light{position: absolute;height: 30%;width: 100%;top: 0;left: 0}
#sub.brand .logo_cont .logo_parts .logo_part01{transform: scale(0.5) rotate(-29deg) translate(240%,-200%)}
#sub.brand .logo_cont .logo_parts .logo_part02{transform:scale(0.5) rotate(21deg) translate(-240%,-200%)}
#sub.brand .logo_cont .logo_parts .logo_part03{transform:scale(0.5) rotate(21deg) translate(110%,-220%)}
#sub.brand .logo_cont .logo_parts .logo_part04{transform:scale(0.5) rotate(41deg) translate(-30%, -70%)}
#sub.brand .logo_cont .logo_parts .logo_part05{transform:scale(0.5) rotate(-9deg) translate(-119%, -90%)}
#sub.brand .logo_cont .logo_parts .logo_part06{transform:scale(0.4) rotate(-48deg) translate(191%, -180%)}
#sub.brand .logo_cont .logo_parts .logo_part07{transform:scale(0.4) rotate(-10deg) translate(241%, -80%)}
#sub.brand .logo_cont .logo_parts .logo_part08{transform:scale(0.6) rotate(-10deg) translate(-139%, -200%)}
#sub.brand .logo_cont .logo_parts .logo_part09{transform:scale(0.5) rotate(60deg) translate(101%, -168%)}
#sub.brand .logo_cont .logo_parts .logo_part10{transform:scale(0.5) rotate(-34deg) translate(-69%, -48%)}
#sub.brand .logo_cont .logo_parts .logo_w{opacity:0;position: absolute; absolute;top: 0;left: 0;}
#sub.brand .con06{background: linear-gradient(to bottom, #FF6900, #FF5700);height: 100vh;margin-top: -1px;position: relative}
#sub.brand .con06 .bg_wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;clip-path: circle(425px at 50% 50%);}
#sub.brand .con06 .bg_wrap .wrap{position: relative;width: 100%;height: 100%}
#sub.brand .con06 .bg_wrap .bg_aft{clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);}
#sub.brand .con06 .bg_wrap .wrap > div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.brand .con06 .brand_title{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);padding-bottom: 0}
#sub.brand .con06 .back_text{position: absolute;bottom: -40px;display: flex;justify-content: center;width: 100%}
#sub.brand .con06 .back_text p{font-size: 300px;color: #FF6C00;font-family: "amandine", sans-serif;font-weight: 400;line-height: 1;display: flex;align-items: center;gap: 100px;}
#sub.brand .con06 .back_text p i{width: 30px;height: 30px;display: block;border-radius: 50%;background: #FF6C00}
#sub.brand .con06 .s_txt {position: absolute;bottom: 120px;display: flex;flex-direction: column;gap: 10px;opacity: 0}
#sub.brand .con06 .s_txt p{font-size: 30px;color: #fff;opacity: 0.5;font-weight: 600}
#sub.brand .con06 .s_txt p.on{opacity: 1;position: absolute;top: 0;left: 0;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.brand .con06 .s_txt div{position: relative}
#sub.brand .con06 .s_txt01{left: 140px}
#sub.brand .con06 .s_txt02{right: 140px;align-items: flex-end}
#sub.brand .con06 .clock{width: 690px;height: 690px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(1.2);opacity: 0;filter: blur(20px);}
#sub.brand .con06 .clock .cir{position: absolute;z-index: 10;width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius: 50%;background: linear-gradient(to right, rgba(255,255,255, 0.5), rgba(255,255,255, 0));backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.5)}
#sub.brand .con06 .clock .hh{height: 400px;width: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(203deg);z-index: 3}
#sub.brand .con06 .clock .mm{height: 640px;width: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(10deg);z-index: 2}
#sub.brand .con06 .clock .ss{height: 680px;width: 2px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-20deg)}
#sub.brand .con06 .clock .ss div{width: 100%;height: 50%;background: #fff}
#sub.brand .con06 .clock .mm div{width: 100%;height: 50%;background: linear-gradient(to right, rgba(255,255,255, 0.5), rgba(255,255,255, 0));backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.5)}
#sub.brand .con06 .clock .hh div{width: 100%;height: 50%;background: linear-gradient(to right, rgba(255,255,255, 0.5), rgba(255,255,255, 0));backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.5)}
#sub.brand .brand_text{display: flex;flex-direction: column;gap: 10px;}
#sub.brand .brand_text div{position: relative}
#sub.brand .brand_text div p{font-size: 30px;color: #E6D4CB;font-weight: 600}
#sub.brand .brand_text div p.on{position: absolute;top: 0;left: 0;color: #51341B;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}

#sub.brand .con07{padding: 300px 60px;padding-bottom: 250px;display: flex;justify-content: space-between}
#sub.brand .con07 .color_wrap {display: flex;flex-direction: column;align-items: flex-end;gap: 20px;}
#sub.brand .con07 .color_wrap > div{position: relative}
#sub.brand .con07 .color_wrap .col_in{display: flex;gap: 10px;padding: 20px;background: rgba(248,242,236,0.8);backdrop-filter: blur(30px);border-radius: 20px;border: 1px solid #fff;position: relative}
#sub.brand .con07 .color_wrap .col_in .color{display: flex;flex-direction: column;justify-content: space-between;width: 180px;height: 150px;border-radius: 10px;padding: 20px;}
#sub.brand .con07 .color_wrap .col_in .color strong{font-size: 18px;color: #FFFFFF;font-weight: 400;font-family: 'AvantGarde Bk BT', sans-serif;}
#sub.brand .con07 .color_wrap .col_in .color ul{display: flex;flex-direction: column;gap: 4px;}
#sub.brand .con07 .color_wrap .col_in .color ul li{font-size: 16px;color: #FFFFFF;font-weight: 400;font-family: 'AvantGarde Bk BT', sans-serif;}
#sub.brand .con07 .color_wrap .col_in .color ul li span{display: inline-block;margin-right: 5px;}
#sub.brand .con07 .color_wrap .col_in .color.gradient{background: linear-gradient(-45deg, #E7420E, #FF9900) }
#sub.brand .con07 .color_wrap .year{position: absolute;top: 50%;left: 0;z-index: 2;display: flex;align-items: center;transform: translate(-100%,-50%)}
#sub.brand .con07 .color_wrap .year:after{content: '';display: block;width: 10px;height: 1px;background: #51341B;}
#sub.brand .con07 .color_wrap .year:before{content: '';display: block;width: 1px;height: 10px;background: #51341B;position: absolute;right: 0;top: 50%;margin-top: -5px;}
#sub.brand .con07 .color_wrap .year span{width: 81px;height: 33px;display: flex;align-items: center;justify-content: center;background: #FDBC84;border-radius: 33px;font-size: 18px;color: #51341B;font-family: 'AvantGarde Bk BT', sans-serif;}
#sub.brand .con07 .color_wrap .year.on span{background: #FF6B17;color: #fff}
#sub.brand .con07 .color_wrap .year2026 .col_in{position: relative;background: #F8F2EF}
#sub.brand .con07 .color_wrap .year2026 .col_in:after{content: '';display: block;width: 100%;height: 100%;border-radius: inherit;top: 0;left: 0;background: rgba(248, 242, 236, 0.0);backdrop-filter: blur(30px);position: absolute}

#sub.brand .con07 .color_wrap .year2025 .col_in color{width: 207px;height: 180px;}
#sub.brand .con08{padding: 0 60px;display: flex;justify-content: space-between;position: relative;z-index: 2;background: #FFFBF7}
#sub.brand .con08 .logo_list{display: flex;flex-direction: column;gap: 10px;}
#sub.brand .con08 .logo_list .logo_w{border: 1px solid #DCCEC2;border-radius: 20px;overflow: hidden;position: relative}
#sub.brand .con08 .logo_list .logo_w img{display: block;}
#sub.brand .con08 .logo_list .name.on span{background: #FF6B17;color: #fff}
#sub.brand .con08 .logo_list > div{display: flex;position: relative;}
#sub.brand .con08 .logo_list > div.logo_now .logo_w{background: #fff}
#sub.brand .con08 .logo_list .logo_dra{gap: 10px}
#sub.brand .con08 .logo_list .name{position: absolute;padding-left: 10px;position: absolute;top: 10px;left: 0}
#sub.brand .con08 .logo_list .name:before{content: '';display: block;width: 10px;height: 1px;background: #51341B;position: absolute;left: 0;top: 50%}
#sub.brand .con08 .logo_list .name:after{content: '';display: block;width: 1px;height: 10px;background: #51341B;position: absolute;left: 0;top: 50%;margin-top: -5px;}
#sub.brand .con08 .logo_list .name span{display: flex;padding: 0 30px;height: 33px;background: #FDBC84;border-radius: 33px;align-items: center;font-size: 18px;color: #51341B;}
#sub.brand .con09{position: relative;padding: 0 60px; padding: 200px 0;margin-top: -1px;padding-top: 300px}
#sub.brand .con09 .bg_video{position: absolute;top: 0;left: 0;background: #FFFBF7}
#sub.brand .con09 .bg_video video{mix-blend-mode: overlay;display: block;}
#sub.brand .con09 .bg_video:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: linear-gradient(to top, #FFFBF7,#FFFBF700, #FFFBF7);z-index: 5}
#sub.brand .con09 .title_w{position: relative;z-index: 5;display: flex;justify-content: center}
#sub.brand .con09 .title_w strong{color: #51341B}
#sub.brand .con09 .list{display: flex;justify-content: flex-end;position: relative;z-index: 5}
#sub.brand .con09 .list ul{width: 50%;display: flex;flex-direction: column;gap: 100px}
#sub.brand .con09 .list ul li{padding: 100px 0;padding-left: 80px; background: rgba(255,231,220,0.25);backdrop-filter: blur(7px);border-radius: 10px  0 0 10px }
#sub.brand .con09 .list ul li strong{font-size: 30px;color: #51341B;font-weight: 900;display: block;margin-bottom: 20px;}
#sub.brand .con09 .list ul li strong b{color: #FF5700}
#sub.brand .con09 .list ul li p{font-size: 20px;color: #51341B;line-height: 30px;}
#sub.brand .con09 .brand_title .tag p{border-color: #51341B;color: #51341B}


#sub.brand .making{position: relative;padding-top: 276px;padding-bottom: 0;z-index: 2;margin-top: -1px;background: #FFFBF7 ;padding-bottom: 170px;}
#sub.brand .making .img_list{position: relative;z-index: 2;padding: 0 50px;display: flex;flex-direction: column;gap: 150px;}
#sub.brand .making .img_list > div{display: flex}
#sub.brand .making .img_list > div.img_w02{justify-content: flex-end}
#sub.brand .making .img_list > div.img_w04{justify-content: flex-end}
#sub.brand .making .img_list > div.img_w06{justify-content: flex-end}
#sub.brand .making .img_list > div.img_w08{justify-content: flex-end}
#sub.brand .making .img_list > div .txt{padding-top: 10px;}
#sub.brand .making .img_list > div .txt span{color: #57413B}
#sub.brand .making .img_list > div.img_w01{margin-bottom: 80px;}
#sub.brand .making .img_list > div.img_w03{margin-top: -170px;margin-bottom: 90px;}
#sub.brand .making .img_list > div.img_w05{margin-top: -170px;margin-bottom: 90px;padding-left: 230px;}
#sub.brand .making .img_list > div.img_w07{margin-top: 130px;}
#sub.brand .making .img_list > div.img_w07 video{width: 670px}
#sub.brand .making .img_list > div.img_w08 video{width: 396px}
#sub.brand .making .img_list > div.img_w08{margin-top: -384px;}
#sub.brand .making .img_list > div.img_w04{padding-right: 110px;}

#sub.brand .making > .video{position: absolute;bottom: 0;transform: translate(-50%, 50%);opacity: 0.4;left: 50%}
#sub.brand .making > .video div{position: relative}
#sub.brand .making > .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}
#sub.brand .making > .video{position: absolute;bottom: 0;transform: translate(-50%, 50%);opacity: 0.4;left: 50%}
#sub.brand .making > .video div{position: relative}
#sub.brand .making > .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}

#sub.brand .making .port_btn {position: relative;z-index: 200;margin-top: 490px;}
#sub.brand .making .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}
#sub.brand .making .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}
#sub.brand .making .port_btn a:hover:after{transform: scale(1)}
#sub.brand .making .port_btn a div{position: relative;z-index: 2}
#sub.brand .making .port_btn a strong{display: block;line-height: 150px;font-size: 24px;color: #D6BFB9;font-family: "scotch-display", sans-serif;transition: 1s;padding-top: 8px}
#sub.brand .making .port_btn a:hover strong{color: #fff}
#sub.brand .making .img_list > div.img_w07 .img{overflow: hidden;display: block; filter: drop-shadow(0 40px 40px rgba(74,25,0,0.1));border-radius: 10px}
#sub.brand .making .img_list > div.img_w07  .img video{display: block;transform: scale(1.01)}
#sub.brand .making .img_list > div.img_w08 .img{overflow: hidden;display: block; filter: drop-shadow(0 40px 40px rgba(74,25,0,0.1));border-radius: 10px}
#sub.brand .making .img_list > div.img_w08  .img video{display: block;transform: scale(1.01)}
#sub.brand .making .ending{position: absolute;top: 0;left: 00;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;flex-direction: column;gap: 30px;}
#sub.brand .making .ending .txt_in{position: relative;text-align: center;width: 100%}
#sub.brand .making .ending .txt_in{position: relative;text-align: center;width: 100%}
#sub.brand .making .ending .txt_in .txt{position: absolute;width: 100%;left: 0;top: 50%;transform: translateY(-50%)}
#sub.brand .making .ending .txt_in .txt01{position: relative;top: 0;transform: translateY(0)}
#sub.brand .making .ending .txt_in .txt01{opacity: 1}
#sub.brand .making .ending .txt_in .txt01 p{opacity: 1}
#sub.brand .making .ending .txt_in .txt.txt01 p{opacity: 1}
#sub.brand .making .ending .txt_in .txt p{color: #51341B;font-size: 36px;line-height: 1.6;font-weight: 600;transform: translateY(70px);opacity: 0}
#sub.brand .making .ending .tag{width: 98px;height: 40px;display: flex;align-items: center;justify-content: center;border: 1px solid #51341B;border-radius: 40px;gap: 8px;background: rgba(255,255,255,0);backdrop-filter: blur(20px)}
#sub.brand .making .ending .tag i{display: block;width: 10px;height: 10px;background: #EC6D00;border-radius: 50%;}
#sub.brand .making .ending .tag span{font-size: 18px;color: #51341B;}
#sub.brand .making .ending em{position: absolute;top: 50%;;display: block;width: 100%;text-align: center;color: #F8F2EF;font-size: 200px;    font-family: "amandine", sans-serif;transform: translateY(-70%);z-index: -1}
#sub.brand .making .txt02, #sub.brand .making .txt03{opacity: 0}
#sub.about .mySwiper3 {
  overflow: hidden;
  touch-action: pan-y;
  position: relative;
}

#sub.about .mySwiper3 .swiper-wrapper {
  touch-action: pan-y;
}
#sub.about .sub_visual .sv_title ul{justify-content: center}
#sub.about .sub_visual .sv_title strong{text-align: center;line-height: 1;margin-top: 20px;}
#sub.about .con01{margin-top: 220px}
#sub.about .con01 .member_list{position: relative}
#sub.about .con01 .member_list .line{position: absolute;top: 0;transform: translateY(-100%) translateX(-40%);left: 50%;margin-top: 25px}
#sub.about .con01 .member_list .swiper-slide{width: 400px;padding-top: 23px;height: 100%}
#sub.about .con01 .member_list .wrap{background: linear-gradient(-45deg, rgba(255,215,159,0.5) -80%, rgba(253,235,222,0.1));border-radius: 20px;padding: 20px;padding-top: 40px;height: 100%;position: relative;backdrop-filter: blur(10px);border: 1px solid #FF682630}
#sub.about .con01 .member_list .wrap .ings{display: flex;padding: 0 15px;height: 35px;align-items: center;justify-content: center;background: #FF5700;border-radius: 30px;color: #fff;color: #FFFFFF;font-size: 18px;font-weight: 500}
#sub.about .con01 .member_list .wrap .all{display: flex;height: 35px;align-items: center;justify-content: center;background: #51341B;border-radius: 30px;color: #fff;color: #FFFFFF;font-size: 18px;font-weight: 500;position: absolute;top: 6px;left: 6px;width: calc(100% - 12px); height: calc(100% - 12px);opacity: 0;transition: 0.5s}
#sub.about .con01 .member_list .wrap:hover .all{opacity: 1}
#sub.about .con01 .member_list .wrap .tag{background: rgba(252,247,245,0.75);backdrop-filter: blur(10px);border: 1px solid #FF682650;border-radius: 30px;padding: 6px;position: absolute;top: 0;left: 50%;transform: translate(-50%,-50%);}
#sub.about .con01 .member_list .mem{border: 2px solid #F99C55;background: #fff; width: 220px;border-radius: 50%;margin: 0 auto;margin-bottom: 25px;}
#sub.about .con01 .member_list .mem img{display: block;max-width: 100%}
#sub.about .con01 .member_list .mem img{display: block;max-width: 100%}
#sub.about .con01 .member_list .swiper-wrapper{height: auto}
#sub.about .con01 .member_list .name{margin-bottom: 25px;}
#sub.about .con01 .member_list .name *{display: block;text-align: center;}
#sub.about .con01 .member_list .name strong{font-size: 26px;color: #51341B;font-weight: 900;margin-bottom: 6px;}
#sub.about .con01 .member_list .name span{font-weight: 300;color: #51341B;font-size: 18px}
#sub.about .con01 .member_list .txt{background: #ffffff80; border-radius: 10px;padding: 30px 20px;padding-bottom: 0; padding-top: 40px;height: 160px;position: relative;backdrop-filter: blur(10px);border: 1px solid #fff;position: relative}
#sub.about .con01 .member_list .txt:before{content: '';display: block;width: 6px;height: 6px;background: #F37C07;border-radius: 50%;top: 0;left: 50%;transform: translate(-50%,-50%);position: absolute}
#sub.about .con01 .member_list .txt:after{content: '';display: block;width: 14px;height: 14px;border: 1px solid #F37C07;box-sizing: border-box;border-radius: 50%;top: 0;left: 50%;transform: translate(-50%,-50%);position: absolute}
#sub.about .con01 .member_list .txt p{font-size: 18px;color: #51341B;font-weight: 300;text-align: center}
#sub.about .con01 .member_list .txt p span{font-weight: 600;color: #F37C07}
#sub.about .con01 .member_list .txt ul{display: flex;gap: 10px 20px; flex-wrap: wrap;justify-content: center;border-top: 1px solid #E5DAD4;padding-top: 15px;margin-top: 15px;}
#sub.about .con01 .member_list .txt ul li{font-size: 14px;color: #51341B}
#sub.about .con01 .member_list .txt ul li span{font-weight: 600;color: #F37C07;}

#sub.about #top_1{padding-left: 60px;position: relative;margin-top: 242px;}
#sub.about #top_1 .bg_txt{position: absolute;top: 126px;display: flex;justify-content: center;z-index: -1}
#sub.about #top_1 .bg_txt strong{font-size: 200px;color: #F2E8E3;font-weight: 400;white-space: nowrap;font-family: "amandine", sans-serif;}
#sub.about #top_1 .shape{position: absolute}
#sub.about #top_1 .shape01{top: 418px;left: 101px}
#sub.about #top_1 .shape02{top: 620px;left: 50%;margin-left: 20px}
#sub.about #top_1 .shape03{top: 182px;left: 50%;margin-left: 597px}

#sub.about #top_1 .shape{opacity: 0;transform: scale(0.5)}
#sub.about #top_1.on .shape{opacity: 1;transform: scale(0.8);transition: 1s}
#sub.about #top_1.on .shape01{transition-delay: 1s}
#sub.about #top_1.on .shape02{transition-delay: 1.3s}
#sub.about #top_1.on .shape03{transition-delay: 1.6s}
#sub.about #top_1 .title strong{display: block;font-size: 50px;color: #51341B;line-height: 1.33;font-weight: 500}
#sub.about #top_1 .title span{width: 130px;height: 35px;border: 1px solid #51341B;display:flex;align-items: center;justify-content: center;font-size: 16px;color: #51341B;border-radius: 20px;margin-bottom: 15px;}
#sub.about #top_1 .title strong *{font-family: inherit}
#sub.about #top_1 .title strong i{font-size: 70px;font-family: inherit;color: inherit;}
#sub.about #top_1 .title .txt{margin-top: 10px;}
#sub.about #top_1 .title .txt div{position: relative}
#sub.about #top_1 .title .txt div .on{position: absolute;top: 0;left: 0;color: #51341B;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.about #top_1 .title .txt p{font-size: 20px;color: #C4B6AB;line-height: 1.5;font-weight: 500}

#sub.about #top_1{background: #FFFBF7}
#sub.about #top_1 .work_list2 ul{display: flex;flex-wrap: wrap;gap: 20px;perspective: 1200px;perspective-origin: bottom center;margin-top: 80px}
#sub.about #top_1 .work_list2 ul li{width: calc(33.33% - 13.33px);transform: rotateX(90deg) translateY(100%);opacity: 0;transition: 0.7s}
#sub.about #top_1.on .work_list2 ul li{transform: rotateX(0deg);opacity: 1;}
#sub.about #top_1.on .work_list2 ul li:nth-child(6), #sub.about #top_1.on .work_list2 ul li:nth-child(4), #sub.about #top_1.on .work_list2 ul li:nth-child(5){transition-delay: 0.3s}
#sub.about #top_1.on .work_list2 ul li:nth-child(7), #sub.about #top_1.on .work_list2 ul li:nth-child(8), #sub.about #top_1.on .work_list2 ul li:nth-child(9){transition-delay: 0.6s}
#sub.about #top_1.on .work_list2 ul li:nth-child(10), #sub.about #top_1.on .work_list2 ul li:nth-child(11), #sub.about #top_1.on .work_list2 ul li:nth-child(12){transition-delay: 0.9s}

#sub.about #top_1 .work_list2 ul li .info{position: relative;z-index: 5;transition: 0.5s}
#sub.about #top_1 .work_list2 ul li:hover .info{transform: translateY(-40px)}
#sub.about #top_1 .work_list2 ul li .info_w{height: 180px;width: 100%;display: flex;align-items: flex-end;height: 180px;border-radius: 10px;border: 1px solid #fff;background: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,1));backdrop-filter: blur(20px);padding: 40px;position: relative;overflow: hidden}
#sub.about #top_1 .work_list2 ul li .info_w:after{content: '';display: block;width: 100%;height: 311px;position: absolute;bottom: 0;background: url(/img/main/top1_bg.png) bottom center;left: 0;transform: translateY(100%);transition: 0.4s}
#sub.about #top_1 .work_list2 ul li:hover .info_w:after{transform: translateY(0)}
#sub.about #top_1 .work_list2 ul li .info_w .info strong{display: block;    font-family: "amandine", sans-serif;font-size: 24px;color: #51341B;margin-bottom: 4px;position: relative;transition: 0.5s;font-weight: 400}
#sub.about #top_1 .work_list2 ul li:hover .info_w .info strong, #sub.about #top_1 .work_list2 ul li:hover .info_w .info p{color: #fff}
/*#sub.about #top_1 .work_list2 ul li .info_w i{display: block;width: 6px;height: 6px;position: absolute;border-radius: 50%;z-index: 2;transition: 0.5s}*/
/*#sub.about #top_1 .work_list2 ul li .info_w i:after{content: '';display: block;width: 20px;height: 20px;border-radius: 50%;position: absolute;top: 50%;left: 50%;margin-top: -10px;margin-left: -10px; background: inherit;opacity: 1;animation: dot_cir 1s infinite linear;transform: scale(0)}*/
@keyframes dot_cir{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#sub.about #top_1 .work_list2 ul li .info p{transition: 0.5s;color: #7B6450;font-size: 18px;font-weight: 300}
/*#sub.about #top_1 .work_list2 ul li:hover .info_w i.b_dot{opacity: 0}*/
#sub.about #top_1 .work_list2 ul li .info_w i.b_dot{left: 17px;top: 17px;background: #EC6D00}
#sub.about #top_1 .work_list2 ul li .info_w i.a_dot{right: 17px;bottom: 17px;background: #fff;opacity: 0}
/*#sub.about #top_1 .work_list2 ul li:hover .info_w i.a_dot{opacity: 1}*/


#sub.about .con03{position: relative;padding-top: 42px;padding-bottom: 40vh;margin-top: 235px;padding: 0 100px}
#sub.about .con03 .service_list{display: flex;flex-wrap: wrap;gap: 150px 0;width: 1600px;margin: 0 auto}
#sub.about .con03 .service_list > div{width: 50%;position: relative}
#sub.about .con03 .service_list > div:nth-child(2n){transform: translateY(100px)}
#sub.about .con03 .service_list .txt_w{position: relative}
#sub.about .con03 .service_list .num{position: absolute;top: -50px;left: -30px}
#sub.about .con03 .service_list .num strong{color:#FF570010;font-family: "amandine", sans-serif;font-size: 80px}
#sub.about .con03 .service_list .num strong *{font-family: inherit}
#sub.about .con03 .service_list .txt_w strong{display: block;font-size: 34px;color: #FF5700;position: relative;z-index: 2;margin-bottom: 15px;}
#sub.about .con03 .service_list .txt_w p{font-size: 20px;line-height: 40px;color: #51341B;}
/*
background: linear-gradient(45deg, #EEDBD1, #EEDBD1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
*/
#sub .about_title{display: flex;flex-direction: column;align-items: center;gap: 18px;position: relative;z-index: 8;margin-bottom: 70px}
#sub .about_title span{display: flex;padding: 0 24px;height: 35px;align-items: center;border: 1px solid #FF5700;border-radius: 24px;font-size: 16px;color: #FF5700;}
#sub .about_title strong{font-size: 50px;color: #51341B;font-weight: 500}


#sub.about .con04{overflow: hidden;position: relative;padding-top: 100px}
#sub.about .con04:after{content: '';display: block;width: 100%;height: 100px;position: absolute;bottom: 0;left: 0;background: linear-gradient(to top, #FFFBF7, #FFFBF710)}
#sub.about .flower_con #그룹_854{transform:translate(-367.153px,0);opacity: 0}
#sub.about .flower_con #패스_1367{transform:translate(5905px, -17689.996px);opacity: 0}
#sub.about .flower_con #그룹_859{transform:translate(5385px, -17689.996px);opacity: 0}
#sub.about .flower_con #그룹_858{transform:translate(520px,0);opacity: 0}
#sub.about .flower_con #그룹_858{transform:translate(520px,0);opacity: 0}
#sub.about .flower_con #패스_1369{transform:translate(5905px, -17689.996px);opacity: 0}
#sub.about .flower_con #그룹_855{transform:translate(-367.153px,0);opacity: 0}
#sub.about .flower_con #패스_1373{transform:translate(5017.847px, -17689.996px);opacity: 0}
#sub.about .flower_con #그룹_856{transform:translate(-367.153px,0);opacity: 0}
#sub.about .flower_con #패스_1348{transform:translate(5017.847px, -17689.996px);opacity: 0}
#sub.about .flower_con #그룹_857{transform:translate(520px,0);opacity: 0}
#sub.about .flower_con #TOP_S_3{transform:translate(2.589px, -7.857px);opacity: 0}
#sub.about .flower_con #TOP_S_2{transform:translate(-3.003px, 5.865px);opacity: 0}
#sub.about .flower_con #패스_1353{transform:translate(5385px, -18188.947px);opacity: 0}
#sub.about .flower_con #패스_1360{transform:translate(5385px, -18188.947px);opacity: 0}
#sub.about .flower_con #BOT_BIG{opacity: 0;transition: 2s;transition-delay:  3.7s}
#sub.about .flower_con.on #BOT_BIG{opacity: 1}


#sub.about .flower_con .parts{position: absolute;left: 50%;top: 00%;transform: translate(-50%,00%);z-index: -1;transition: 3s}
#sub.about .flower_con .parts.pc{display: block}
#sub.about .flower_con .parts.mo{display: none}
#sub.about .flower_con .parts #PARTICLE > g{animation: twi 1.2s infinite linear;opacity: 0}
@keyframes twi{
    0%{opacity: 0}
    50%{opacity: 1}
    100%{opacity: 0}
}

#sub.about .flower_con .parts #PARTICLE > g:nth-child(1){animation-delay: 0.2s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(2){animation-delay: 0.4s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(3){animation-delay: 0.6s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(4){animation-delay: 0.8s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(5){animation-delay: 1s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(6){animation-delay: 1.2s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(7){animation-delay: 1.4s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(8){animation-delay: 1.6s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(9){animation-delay: 1.6s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(10){animation-delay: 1.8s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(11){animation-delay: 0.3s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(12){animation-delay: 0.5s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(13){animation-delay: 0.7s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(14){animation-delay: 0.9s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(15){animation-delay: 1.1s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(16){animation-delay: 1.3s}
#sub.about .flower_con .parts #PARTICLE > g:nth-child(17){animation-delay: 1.5s}
#sub.about .flower_con.on .parts{transform: translate(-50%,0%) scale(1);}
#sub.about .flower_con #그룹_854{transform:translate(-267.153px,-100px) ;opacity: 0;transition: 1.6s;transition-delay: 3.6s}
#sub.about .flower_con #패스_1367{transform:translate(5725px, -17739.996px);opacity: 0;transition: 1.6s;transition-delay: 3.3s}
#sub.about .flower_con #그룹_859{transform:translate(5385px, -17689.996px);opacity: 0;transition: 1.6s;transition-delay: 3.0s}
#sub.about .flower_con #그룹_858{transform:translate(420px,-70px);opacity: 0;transition: 1.6s;transition-delay: 0s}
#sub.about .flower_con #패스_1348{transform:translate(5197.847px, -17689.996px);opacity: 0;transition: 1.6s;transition-delay: 2.7s}
#sub.about .flower_con #패스_1369{transform:translate(5805px, -17729.996px);opacity: 0;transition: 1.6s;transition-delay: 2.4s}
#sub.about .flower_con #그룹_855{transform:translate(-277.153px,-50px);opacity: 0;transition: 1.6s;transition-delay: 2.1s}
#sub.about .flower_con #패스_1373{transform:translate(5147.847px, -17779.996px);opacity: 0;transition: 1.6s;transition-delay: 1.8s}
#sub.about .flower_con #그룹_856{transform:translate(-267.153px,-100px);opacity: 0;transition: 1.6s;transition-delay: 1.5s}
#sub.about .flower_con #그룹_857{transform:translate(450px,-160px);opacity: 0;transition: 1.6s;transition-delay: 1.2s}
#sub.about .flower_con #TOP_S_3{transform:translate(-97.411px, -57.857px);opacity: 0;transition: 1.6s;transition-delay: 0.9s}
#sub.about .flower_con #TOP_S_2{transform:translate(56.997px, -94.135px);opacity: 0;transition: 1.6s;transition-delay: 0.6s}
#sub.about .flower_con #패스_1353{transform:translate(5425px, -18258.947px);opacity: 0;transition: 1.6s;transition-delay: 0.3s}
#sub.about .flower_con #패스_1360{transform:translate(5365px, -18228.947px);opacity: 0;transition: 1.6s;transition-delay: 0s}
#sub.about .flower_con #BOT_BIG{opacity: 0}
#sub.about .flower_con #사각형_194{opacity: 0}


#sub.about .flower_con.on #그룹_854{transform:translate(-367.153px,0);opacity: 1}
#sub.about .flower_con.on #패스_1367{transform:translate(5905px, -17689.996px);opacity: 1}
#sub.about .flower_con.on #그룹_859{transform:translate(5385px, -17689.996px);opacity: 1}
#sub.about .flower_con.on #그룹_858{transform:translate(520px,0);opacity: 1}
#sub.about .flower_con.on #그룹_858{transform:translate(520px,0);opacity: 1}
#sub.about .flower_con.on #패스_1369{transform:translate(5905px, -17689.996px);opacity: 1}
#sub.about .flower_con.on #그룹_855{transform:translate(-367.153px,0);opacity: 1}
#sub.about .flower_con.on #패스_1373{transform:translate(5017.847px, -17689.996px);opacity: 1}
#sub.about .flower_con.on #그룹_856{transform:translate(-367.153px,0);opacity: 1}
#sub.about .flower_con.on #패스_1348{transform:translate(5017.847px, -17689.996px);opacity: 1}
#sub.about .flower_con.on #그룹_857{transform:translate(520px,0);opacity: 1}
#sub.about .flower_con.on #TOP_S_3{transform:translate(2.589px, -7.857px);opacity: 1}
#sub.about .flower_con.on #TOP_S_2{transform:translate(-3.003px, 5.865px);opacity: 1}
#sub.about .flower_con.on #패스_1353{transform:translate(5385px, -18188.947px);opacity: 1}
#sub.about .flower_con.on #패스_1360{transform:translate(5385px, -18188.947px);opacity: 1}


#sub.about .con05{background: #F8F2EF}
#sub.about .con05 .wrap{overflow: hidden;height: 100vh;position: relative}
#sub.about .con05 .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: multiply}
#sub.about .con05 .video video{width: 1920px;}
#sub.about .con05 .txt ul li{width: 1100px;position: absolute;left: 50%;transform: translate(-50%,-50%);top: 50%;perspective: 300px}
#sub.about .con05 .txt ul li strong{display: block;text-align: center;color: #51341B;font-size: 200px; font-family: "amandine", sans-serif;font-weight: 400;}
#sub.about .con01 .wrap .line_w{opacity: 0;transition: 1s}
#sub.about .con012.on .wrap .line_w{opacity: 1}

#sub.about .con05 .txt ul li{perspective: 1200px}
#sub.about .con05 .txt ul li:nth-child(1) strong{animation: text 10s infinite linear;animation-delay: 20s;opacity: 0}
#sub.about .con05 .txt ul li:nth-child(2) strong{animation: text2 10s infinite linear;animation-delay: 20s;opacity: 0}
#sub.about .con05 .txt ul li:nth-child(3) strong{animation: text3 10s infinite linear;animation-delay: 20s;opacity: 0}
#sub.about .con05 .txt ul li:nth-child(4) strong{animation: text4 10s infinite linear;animation-delay: 20s;opacity: 0}
@keyframes text{
    0%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    12.5%{transform:translateX(0%) rotateY(0deg);opacity: 1}
    25%{transform:translateX(50%) rotateY(90deg);opacity: 0}
    100%{transform:translateX(50%) rotateY(90deg);opacity: 0}

}

@keyframes text2{
    0%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    25%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    37.5%{transform:translateX(0%) rotateY(0deg);opacity: 1}
    50%{transform:translateX(50%) rotateY(90deg);opacity: 0}
    100%{transform:translateX(50%) rotateY(90deg);opacity: 0}
}

@keyframes text3{
     0%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    50%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    62.5%{transform:translateX(0%) rotateY(0deg);opacity: 1}
    75%{transform:translateX(50%) rotateY(90deg);opacity: 0}
    100%{transform:translateX(50%) rotateY(90deg);opacity: 0}
}
@keyframes text4{
     0%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    75%{transform:translateX(-50%)rotateY(-90deg);opacity: 0}
    87.5%{transform:translateX(0%) rotateY(0deg);opacity: 1}
    100%{transform:translateX(50%) rotateY(90deg);opacity: 0}
}
#sub.about .con10 .title_w{text-align: right;position: relative}
#sub.about .con10 .title_w .img_box{position: relative;overflow: hidden;width: 80%;height: 450px;display: inline-block;border-radius: 300px 0 0 300px;transform: translate3d(0, 0, 0);background: #FF5700}
#sub.about .con10 .title_w .img_box videp{border-radius: 300px 0 0 300px}
#sub.about .con10 .title_w .img_box:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #FF5700;}
#sub.about .con10 .title_w .img_box .video{background: #FF5700}
#sub.about .con10 .title_w .img_box video{position: relative;z-index: 2;mix-blend-mode: overlay;-webkit-mix-blend-mode: overlay;opacity: 0.7}
#sub.about .con10 .title_w .img_box div{border-radius: inherit; overflow: hidden;height: 100%;transform: translate3d(0, 0, 0);}
#sub.about .con10 .title_w .txt_box{position: absolute;left: 50%;margin-left: -770px;top: 90px;text-align: left}
#sub.about .con10 .title_w .txt_box ul li{font-size: 110px;line-height: 130px;color: #57413B;    font-family: "amandine", sans-serif;font-weight: 400}
#sub.about .con10 .title_w .txt_box ul li:nth-child(2){color: #FF5700}
#sub.about .con10 .title_w .img_box .txt_box{z-index: 1;;left: 37.5%}
#sub.about .con10 .title_w .img_box .txt_box ul li{color: #fff}



#sub.about .list_btn a .line02{border-color: #F7E7D9}
#sub.about .flower_wrap{position: relative;height: 100vh;overflow: hidden;background: #FFFBF7}
#sub.about .flower_con .flower{position: absolute;left: 50%;transform: translateX(-50%);}
#sub.about .flower_con .flower video{width: 1880px}
#sub.about .flower_con .e_title{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 15}
#sub.about .flower_con .e_title p{font-size: 40px;color: #51341B;line-height: 1.8;text-align: center;font-weight: 600}
#sub.about .con06{display: flex;padding: 0 60px;}
#sub.about .con06 > div{width: 50%}
#sub.about .con06 div.year_wrap .year_box div.on{position: relative}
#sub.about .con06 div.year_wrap .year_box div.on i{position: absolute;width: 84px;height: 30px;display: flex;align-items: center;justify-content: center;border: 1px solid #51341B;border-radius: 30px;font-size: 16px;color: #51341B;top: -00px;left: 0}
#sub.about .con06 div.year_wrap .year_box{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative; background: linear-gradient(to left, #FFEEDC50, #FFEEDC00);}
/*#sub.about .con06 div.year_wrap .year_box{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;background: linear-gradient(to left, #F0D9CD50, #FFFDFC00);position: relative}*/
#sub.about .con06 div.year_wrap .year_box:before{content: '';display: block;width: 100%;height: 300px;position: absolute;background: linear-gradient(to bottom, #FFFBF7, #FFFBF700);position: absolute;top: 0;z-index: 15}
#sub.about .con06 div.year_wrap .year_box:after{content: '';display: block;width: 100%;height: 300px;position: absolute;background: linear-gradient(to top, #FFFBF7, #FFFBF700);position: absolute;bottom: 0;z-index: 15}
#sub.about .con06 div.year_wrap .year_box strong{color: #EED9C6;font-size: 150px;font-family: "amandine", sans-serif;line-height: 200px;transition: 0.7s;font-weight: 300; color: #FF570030;              /* 내부 색 투명 */
  -webkit-text-stroke: 1px #FF570000;   /* 파란 외곽선만 보임 */}
#sub.about .con06 div.year_wrap .year_box .on strong{  -webkit-text-stroke: 1px #FF5700;color: #FF5700;}
#sub.about .con06 div.year_wrap .year_box .y{height: 200px;}
#sub.about .con06 div.year_wrap .year_box .y ul{transition: 0.5s}
#sub.about .con06 > div.list_w{padding-left: 60px;padding-top: 50vh}
#sub.about .con06 > div .history_list > li .txt > ul > li{margin-bottom: 120px}
#sub.about .con06 > div .history_list > li .txt ul{margin-top: 40px}
#sub.about .con06 > div .history_list > li .txt ul > li div.month{display: flex;padding: 20px 0;align-items: center;border-top: 1px solid #E1D6CD;border-bottom: 1px solid #E1D6CD;gap: 20px;flex-direction: row}
#sub.about .con06 > div .history_list > li .month strong{width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;background: #753C00;border-radius: 10px;font-size: 30px;color: #FFFFFF;    font-family: "amandine", sans-serif;}
#sub.about .con06 > div .history_list > li .month span{ font-family: "amandine", sans-serif;font-size: 20px;color: #51341B}
#sub.about .con06 > div .history_list > li .txt ul{display: flex;flex-direction: column;gap: 20px}
#sub.about .con06 > div .history_list > li .txt ul > li{font-size: 24px;color: #51341B;line-height: 1.5;font-weight: 600;position: relative}
#sub.about .con06 > div .history_list > li .txt ul ul > li{padding-left: 12px;position: relative;word-break: keep-all}
#sub.about .con06 > div .history_list > li .txt ul ul > li > i{position: absolute;z-index: -1;left: 20%;border-radius: 10px;overflow: hidden;transform: translateX(15px);opacity: 0;transition: 0.8s}
#sub.about .con06 > div .history_list > li .txt ul ul > li:hover > i{transform: translateX(0px);opacity: 1}
#sub.about .con06 > div .history_list > li .txt ul ul > li > i img{display: block}
#sub.about .con06 > div .history_list > li .txt ul ul > li:before{content: '';display: block;width: 4px;height: 4px;background: #51341B;border-radius: 50%;position: absolute;top: 17px;left: 0}
#sub.about .con06 > div .history_list > li .txt ul > li div{display: flex;flex-direction: column;gap: 15px}
#sub.about .con06 > div .history_list > li .txt ul > li div p{font-size: 20px;color: #51341B;font-weight: 300}
#sub.about .con06 > div .history_list > li .txt ul > li div i{display: none}
#sub.about .con06 > div .history_list > li .txt ul ul div{margin-top: 20px}
#sub.esg .esg_title{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 20px}
#sub.esg .esg_title .title{display: flex;align-items: center;justify-content: center;gap: 25px}
#sub.esg .esg_title .title i{background: #FF5700;width: 5px;height: 5px;border-radius: 50%;display: block;opacity: 0;animation: dots 1s infinite linear;opacity: 0.2}
#sub.esg .esg_title .title i.dot02{animation-delay: 0.3s}
#sub.esg .esg_title .title i.dot03{animation-delay: 0.6s}
@keyframes dots{
    0%{opacity: 0.5}
    50%{opacity: 1}
    100%{opacity: 0.5}
}
#sub.esg .esg_title .title i.dot01{}
#sub.esg .esg_title .title .dot{display: flex;gap: 5px}
#sub.esg .esg_title span{display: flex;height: 35px;align-items: center;padding: 0 26px;border: 1px solid #FF5700;border-radius: 30px;align-items: center;font-size: 16px;color: #FF5700;}
#sub.esg .esg_title strong{display: block;text-align: center;color: #51341B;font-size: 60px;line-height: 1.33;font-weight: 600}
#sub.esg .con01{padding-top: 96px;padding-bottom: 250px;}
#sub.esg .con01 .infog_box{position: relative;}
#sub.esg .con01 .infog_box .esg_infograpic{position: absolute;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;height: 100%;}
#sub.esg .con01 .infog_box .esg_infograpic strong{font-size: 75px;color: #51341B;line-height: 1;display: block;}
#sub.esg .con01 .infog_box .esg_infograpic strong span{color: #FF5700;}
#sub.esg .con01 .infog_box .esg_infograpic i{display: block;width: 560px;height: 2px;background-color: #51341B;}
#sub.esg .con01 .infog_box .esg_infograpic div{overflow: hidden;}
/* #sub.esg .con01 .infog_box .esg_infograpic strong.t01{transform: translateY(7px);}
#sub.esg .con01 .infog_box .esg_infograpic strong.t02{transform: translateY(-4px);} */
/* #sub.esg .con01 .infog_box .esg_infograpic strong.t02{transform: rotateX(180deg);}  */
#sub.esg .con01 .icon_list{margin-top: 130px;display: flex;justify-content: center;align-items: center;gap: 200px;margin-bottom: 145px;opacity: 0;}
#sub.esg .con01 .icon_list .icon_w{width: 600px;height: 300px;}
#sub.esg .con01 .icon_list .icon02{display: flex;align-items: center;justify-content: center}
#sub.esg .con01 .icon_list .icon01{display: flex;align-items: center;justify-content: center}
#sub.esg .con01 .icon_list .icon02 .icon{position: relative}
#sub.esg .con01 .icon_list .icon02 .icon .on{position: absolute;top: 0;left: 0;z-index: 3}
#sub.esg .con01 .icon_list .icon02 .icon .on{position: absolute;top: 0;left: 0;z-index: 3}

#sub.esg .con01 .icon_list .icon02 .icon .ring{animation: 2s ring linear infinite}
#sub.esg .con01 .icon_list .icon02 .icon .circle{z-index: 2;animation: 2s circle1 linear infinite}
#sub.esg .con01 .icon_list .icon01 .icon .ring{z-index: 2;animation: 2s ring linear infinite}
#sub.esg .con01 .icon_list .icon01 .icon .ring.on{z-index: 3}
#sub.esg .con01 .icon_list .icon01 .icon .circle{z-index: 2}
@keyframes ring{
	0%{transform: rotate(0deg)}
	50%{transform: rotate(-20deg)}
	100%{transform: rotate(00deg)}
}

@keyframes circle1{
	0%{transform: scale(1)}
	50%{transform: scale(0.9)}
	100%{transform: scale(1)}
}
#sub.esg .con01 .icon_list .icon02 .icon .circle{position: absolute;top: 50%;left: 50%;margin-top: -48px;margin-left: -48px}
#sub.esg .con01 .icon_list .icon01 .icon{position: relative}
#sub.esg .con01 .icon_list .icon01 .icon .on{position: absolute;top: 0;left: 0}
#sub.esg .con01 .icon_list .icon01 .icon .circle{position: absolute;top: 50%;left: 50%}
#sub.esg .con01 .icon_list .icon01 .icon .circle01 img{width: 50px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle02 img{width: 22px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle03 img{width: 34px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle04 img{width: 64px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle05 img{width: 50px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle01{margin-top: -25px;margin-left: -166px;animation: 2s c01 infinite linear}
@keyframes c01{
	0%{transform: translateY(0px)}
	50%{transform: translateY(20px)}
	100%{transform: translateY(0px)}
}
@keyframes c02{
	0%{transform: translateY(0px)}
	50%{transform: translateY(-20px)}
	100%{transform: translateY(0px)}
}
#sub.esg .con01 .icon_list .icon01 .icon .circle02{margin-top: -22px;margin-left: -41px;animation: 2s c02 infinite linear}
#sub.esg .con01 .icon_list .icon01 .icon .circle03{margin-top: -13px;margin-left: -19px;}
#sub.esg .con01 .icon_list .icon01 .icon .circle04{margin-top: -20px;margin-left: 12px;animation: 2s c01 infinite linear}
#sub.esg .con01 .icon_list .icon01 .icon .circle05{margin-top: -25px;margin-left: 115px;animation: 2s c02 infinite linear}
#sub.esg .con01 .icon_list span{display: flex;width: 180px;height: 50px;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0));backdrop-filter: blur(10px);border-radius: 40px;border: 1px solid #fff;margin: 0 auto;align-items: center;justify-content: center;font-size: 20px;color: #51341B;font-weight: 600}
#sub.esg .con01 .dot{position: relative;width: 8px;height: 8px;margin: 0 auto;margin-bottom: 40px;}
#sub.esg .con01 .dot i.dot0{display: block;border-radius: 50%;width: 40px;height: 40px;box-sizing: border-box;border: 1px solid #EC6D00;position: absolute;top: 50%;left: 50%;margin-left: -20px;margin-top: -20px;animation: 1.5s dot_circle infinite linear;transform: scale(0)}
@keyframes dot_circle{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#sub.esg .con01 .dot .dot1{width: 100%;height: 100%;background: #EC6D00;border-radius: 50%;display: block}
#sub.esg .con01 .dot i.dot0.dot2{animation-delay: 0.5s}
#sub.esg .con01 .dot i.dot0.dot3{animation-delay: 1.0s}
#sub.esg .con01 .dot i.dot0.dot4{animation-delay: 1.5s}
#sub.esg .con01 .title .dot{width: auto;height: auto;margin-bottom: 0}

#sub.esg .con01 .txt_w strong{display: block;font-size: 40px;line-height: 1.33;color: #51341B;text-align: center}
#sub.esg .con01 .txt_w strong em{display: block;height: 20px}
#sub.esg .con01 .txt_w strong b{color: #FF5700}
#sub.esg .con02{background: linear-gradient(to bottom, #FFA200, #FF5700);padding: 0 60px;padding-top: 240px;padding-bottom: 345px;position: relative}
#sub.esg .con02 .esg_title{align-items: flex-start}
#sub.esg .con02 .esg_title strong{color: #fff;text-align: left}
#sub.esg .con02 .esg_title span{background: rgba(255,255,255,0.25);backdrop-filter: blur(10px);color: #fff;border-color: #fff}
#sub.esg .con02 .line_text{display: flex;align-items: center;justify-content: center;margin-top: -22px}
#sub.esg .con02 .line_text .wrap{position: relative}
#sub.esg .con02 .line_text .wrap .txt {position: absolute}
#sub.esg .con02 .line_text .wrap .txt strong{font-size: 30px;color: #FFFFFF;line-height: 1.5;text-align: center;display: block}
#sub.esg .con02 .line_text .wrap .txt01{left: 0;transform: translateX(-50%);top: 320px;}
#sub.esg .con02 .line_text .wrap .txt02{right: 0;transform: translateX(50%);top: 670px}
#sub.esg .con02 .vid video{width: 1500px}
#sub.esg .con02 .vid video{mix-blend-mode: screen}
#sub.esg .con02 .dot{position: relative;width: 8px;height: 8px;margin: 0 auto;margin-bottom: 22px;}
#sub.esg .con02 .dot i.dot0{display: block;border-radius: 50%;width: 40px;height: 40px;box-sizing: border-box;border: 1px solid #FFFFFF;position: absolute;top: 50%;left: 50%;margin-left: -20px;margin-top: -20px;animation: 1.5s dot_circle infinite linear;transform: scale(0)}
@keyframes dot_circle{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#sub.esg .con02 .dot .dot1{width: 100%;height: 100%;background: #FFFFFF;border-radius: 50%;display: block}
#sub.esg .con02 .dot i.dot0.dot2{animation-delay: 0.5s}
#sub.esg .con02 .dot i.dot0.dot3{animation-delay: 1.0s}
#sub.esg .con02 .dot i.dot0.dot4{animation-delay: 1.5s}
#sub.esg .con02 .pin_w{display: flex;justify-content: center;} 
#sub.esg .con02 .pin_w .pin_ring{position: relative}
#sub.esg .con02 .pin_w .pin{position: absolute;top: 50%;left: 50%;margin-left: -173.5px;margin-top: -329px}
#sub.esg .con02 .pin_w .pin_ring02{position: absolute;top: 0;left: 0}

#sub.esg .con02 .pin_w .pin{animation: 2s pin linear infinite}
@keyframes pin{
	0%{transform: rotate(0deg)}
	50%{transform: rotate(-10deg)}
	100%{transform: rotate(0deg)}
}
#sub.esg .con02 .pin_text{margin-top: -223px;}
/*#sub.esg .con02 .pin_text .txt{margin-top: -200px;}*/
#sub.esg .con02 .pin_text .txt{margin-top: 100px;}
#sub.esg .con02 .pin_text .txt p{font-size: 50px;font-weight: 600;color: #FFFFFF;text-align: center;margin-top: 25px;}
#sub.esg .con02 .line_text, #sub.esg .con02 .pin_text{position: relative;z-index: 2;}
#sub.esg .con02 .bg_txt{position: absolute;bottom: 509px;display: flex;justify-content: center;gap: 60px;mix-blend-mode: overlay;opacity: 0.25}
#sub.esg .con02 .bg_txt strong{color: #FFFFFF;font-size: 200px;font-family: "amandine", sans-serif;font-weight: 400;white-space: nowrap}
#sub.esg .con03{position: relative}
#sub.esg .con03 .txt_content{position: absolute;top: 0;left: 0;width: 100%;height: 100vh;}
#sub.esg .con03 .txt_content .title_box{position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
#sub.esg .con03 .txt_content .title_box .esg_title strong{font-size: 50px;}
#sub.esg .con03 .txt_content .txt{position: absolute;width: 1000px;height: 300px;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0));backdrop-filter: blur(20px);border: 1px solid #FFFFFF;border-radius: 10px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;display: flex;align-items: center;justify-content: center;text-align: center;}
#sub.esg .con03 .txt_content .txt strong{font-size: 30px;color: #51341B;line-height: 1.33}
#sub.esg .con03 .txt_content .txt strong b{color: #FF5700}
#sub.esg .con03 .txt_content .txt p{font-size: 18px;color: #51341B;line-height: 1.5;font-weight: 300}
#sub.esg .con03 .txt_content .txt .txt_in{display: flex;flex-direction: column;align-items: center;gap: 20px;}
#sub.esg .con03 .txt_content .txt span{position: absolute;top: 20px;left: 20px;color: #51341B;font-size: 20px;font-family: "amandine", sans-serif;}
#sub.esg .con07{position: relative;z-index: 15}
#sub.esg .con04 #btn_link{position: relative;z-index: 5;margin-top: 80px}
#sub.about .con01{background: #FFFBF7;margin-top: -2px;padding-top: 220px;position: relative;z-index: 5}

#sub .sub_visual .copy{display: flex;width: 736.41px;height: 100vh;align-items:  center;z-index: 55}
#sub .sub_visual.on .copy{opacity: 1}
#sub .sub_visual .copy{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 20;;pointer-events: none}
#sub .sub_visual .copy > div{overflow: hidden;width: 20%;margin-left: -1px}
#sub .sub_visual .copy > div strong{transition: 1.3s;filter: blur(10px);text-align: center;line-height: 1;margin-top: 0;text-align: center}

#sub .sub_visual .copy > div strong{width: 736.41px}
/*#sub .sub_visual .copy{transform-origin: bottom cemter}*/
#sub.brand .sub_visual .copy{width: 614.7px}
#sub.brand .sub_visual .copy > div strong{width: 614.7px}
#sub .sub_visual .copy > div.typo01 strong{transform: translateX(-20%)}
#sub .sub_visual .copy > div.typo02 strong{transform: translateX(-30%)}
#sub .sub_visual .copy > div.typo03 strong{transform: translateX(-60%)}
#sub .sub_visual .copy > div.typo04 strong{transform: translateX(-40%)}
#sub .sub_visual .copy > div.typo05 strong{transform: translateX(-60%)}

#sub .sub_visual .copy > div{transition: 1.3s}

#sub .sub_visual.on .copy > div.typo01 strong{transform: translateX(0%)}
#sub .sub_visual.on .copy > div.typo02 strong{transform: translateX(-20%)}
#sub .sub_visual.on .copy > div.typo03 strong{transform: translateX(-40%)}
#sub .sub_visual.on .copy > div.typo04 strong{transform: translateX(-60%)}
#sub .sub_visual.on .copy > div.typo05 strong{transform: translateX(-80%)}
#sub .sub_visual.on .copy > div strong{filter: blur(0px)}

#sub.about .sub_visual .copy > div{margin-left: 0px}
#sub.about .sub_visual .copy > div:nth-child(4){margin-left: -1px}
#sub.brand .sub_visual .copy > div{margin-left: -0.85px}
#sub.brand .sub_visual .copy > div:nth-child(4){margin-left: -0.85px}
#sub .sub_visual .copy > div{transform: translateX(0)}
#sub.esg .con03{position: relative;z-index: 10;background: #FFFBF7}
#sub.esg .con03 .txt_content{perspective: 600px}
#sub.esg .con03 .txt_content .txt{transform: translate(-50%, 200%) rotateX(-70deg)}
#sub.esg .con03 .txt_content .txt01{transform: translate(-50%, 100%) rotateX(-35deg)}
#sub.esg .con03 .image_content {padding: 0 60px; padding-top: 100vh;}
#sub.esg .con03 .image_content .image .img{display: inline-block;background:rgba(255,231,220,0.25);backdrop-filter: blur(20px);border: 1px solid #fff;padding: 10px;border-radius: 10px;}
#sub.esg .con03 .image_content .image .img img{display: block;border-radius: 6px}
#sub.esg .con03 .image_content .image .tag{padding: 0 10px; padding-top: 8px}
#sub.esg .con03 .image_content .image .tag.r{text-align: right}
#sub.esg .con03 .image_content .image .tag strong{font-size: 16px;color: #51341B;font-weight: 400}
/*#sub.esg .con03 .txt_content .txt04{transform: translate(-50%, -200%) rotateX(35deg)}*/
#sub.esg .con03 .image_content .image{display: flex;}
#sub.esg .con03 .image_content .image01{justify-content: flex-end;padding-right: 315px}
#sub.esg .con03 .image_content .image02{justify-content: flex-end;}
#sub.esg .con03 .image_content .image03{padding-left:  215px;}
#sub.esg .con03 .image_content .image04{padding-left:  64px;margin-top: 109px}
#sub.esg .con03 .image_content .image05{justify-content: flex-end;padding-right: 133px;margin-top: -100px}
#sub.esg .con03 .image_content .image06{padding-left:  300px;margin-top: -60px}
#sub.esg .con03 .image_content .image07{padding-left:180px;margin-top: 100px}
#sub.esg .con03 .image_content .image08{margin-top: 100px}
#sub.esg .con03 .image_content .image09{justify-content: flex-end;padding-right: 100px;margin-top: -300px}
#sub.esg .con03 .image_content .image10{padding-left:110px;margin-top: 200px}
#sub.esg .con03 .image_content .image11{justify-content: flex-end;padding-right: 230px;margin-top: -300px}
#sub.esg .con03 .image_content .image12{padding-left:90px;margin-top: 200px}
#sub.esg .con03 .image_content .image13{justify-content: flex-end;margin-top: 80px}
#sub.esg .con03 .image_content .image14{padding-left:190px;margin-top: -210px}

#sub.esg .con03 .image_content .image15{justify-content: flex-end;margin-top: 220px;padding-right: 110px}
#sub.esg .con03 .image_content .image16{padding-left:165px;margin-top: -40px}
#sub.esg .con03 .image_content .image17{justify-content: flex-end;padding-right:195px;margin-top: 160px}
#sub.esg .con03 .image_content .image19{padding-left:40%;margin-top: -160px}
#sub.esg .con03 .image_content .image20{display: flex;justify-content: flex-end;padding-right:200px;margin-top: -160px}
#sub.esg .con03 .image_content .image21{padding-left:200px;margin-top: -160px}
#sub.esg .con03 .image_content .image22{display: flex;justify-content: flex-end;padding-right:0;margin-top: -160px}
#sub.esg .con03 .image_content .image23{padding-left:10%;margin-top: 0}
#sub.esg .con03 .image_content .image24{padding-left:40%;margin-top: 140px}
#sub.esg .con04{padding-top: 410px;padding-bottom: 280px;background: #FFFBF7;position: relative}
#sub.esg .con04 .sha{position: absolute;z-index: 5}
#sub.esg .con04 .sha01{left: 50%;top: 0;margin-left: -345px}
#sub.esg .con04 .sha02{left: 50%;top: 401px;margin-left: -587px}
#sub.esg .con04 .sha03{left: 50%;top: 443px;margin-left: 420px}
#sub.esg .con04 .sha04{left: 50%;top: 770px;margin-left: 190px}
#sub.esg .con04 .esg_title{position: relative;z-index: 6}
#sub.esg .con04 .esg_title strong{color: #51341B;font-size: 40px;line-height: 1.5}
#sub.esg .con04 .bg_video{height: 482px;overflow: hidden;position: relative;position: absolute;bottom: 0;left: 0;width: 100%}
#sub.esg .con04 .bg_video video{position: absolute;width: 1920px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-25%);mix-blend-mode: overlay}
#sub.esg .con04 .bg_video:after{content: '';display: block;width: 100%;height: 100%;background: linear-gradient(to top, #FFFBF700, #FFFBF7);position: absolute;top: 0;left: 0}
#sub.why .con01{position: relative;;width: 100%;height: 100vh;background: #FFFBF7}
#sub.why .con01 .device_w .device{width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;top: 0;left: 0;position: absolute;z-index: 2}
#sub.why .con01 .device_w .device{transform: translateX(100%)}
#sub.why .con01 .device_w .device01{transform: translateX(00%)}
#sub.why .con01 .device_w .device02{transform: translateX(50%)}
#sub.why .con01 .device_w .device img{display: block;transform: scale(1.2)}
#sub.why .con01 .glass{position: absolute;bottom: 0;transform: translateY(50%);opacity: 0}
#sub.why .con01 .resolution_w .resolution{position: absolute;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;}
#sub.why .con01 .resolution_w .resolution{transform: translateY(100%)}
#sub.why .con01 .resolution_w .resolution01{transform: translateY(0%)}
#sub.why .con01 .resolution_w .resolution strong{font-size: 350px;color: #FF5700;font-weight: 400;    font-family: "amandine", sans-serif;}
#sub.why .con01 .gl_wrap01 {top: 0;left: 50%;margin-left: -285px;z-index: 10}
#sub.why .con01 .gl_wrap01 .gl01 i{height: 268px}
#sub.why .con01 .gl_wrap01 .gl02 i{height: 452px}
#sub.why .con01 .gl_wrap01 .gl03 i{height: 228px}
#sub.why .con01 .gl_wrap01 .gl04 i{height: 146px}
#sub.why .con01 .gl_wrap01 .gl01{padding-top: 40px}
#sub.why .con01 .gl_wrap01 .gl03{padding-top: 194px}
#sub.why .con01 .gl_wrap01 .gl04{padding-top: 243px}

#sub.why .esg_title{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 20px}
#sub.why .esg_title span{display: flex;height: 35px;align-items: center;padding: 0 26px;border: 1px solid #FF5700;border-radius: 30px;align-items: center;font-size: 16px;color: #FF5700;}
#sub.why .esg_title strong{display: block;text-align: center;color: #51341B;font-size: 60px;line-height: 1.33;font-weight: 600}
#sub.why .con02{padding-top: 0;margin-bottom: 300px;}
#sub.why .line_content{display: flex;justify-content: center;background: #FFFBF7}
#sub.why .line_content .wrap .over{position: absolute;top: 0;left: 0}
#sub.why .line_content .wrap .over path{stroke-dasharray: 2000; /* 경로 길이보다 크게 설정 */
      stroke-dashoffset: 2000;}
#sub.why .line_content .wrap{position: relative}
#sub.why .line_content .wrap .txt{position: absolute}
#sub.why .line_content .wrap .txt .dot{position: relative;width: 8px;height: 8px;margin: 0 auto;margin-bottom: 22px;}
#sub.why .line_content .wrap .txt .dot i.dot0{display: block;border-radius: 50%;width: 40px;height: 40px;box-sizing: border-box;border: 1px solid #EC6D00;position: absolute;top: 50%;left: 50%;margin-left: -20px;margin-top: -20px;animation: 1.5s dot_circle infinite linear;transform: scale(0)}
@keyframes dot_circle{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#sub.why .line_content .wrap .txt .dot .dot1{width: 100%;height: 100%;background: #EC6D00;border-radius: 50%;display: block}
#sub.why .line_content .wrap .txt .dot i.dot0.dot2{animation-delay: 0.5s}
#sub.why .line_content .wrap .txt .dot i.dot0.dot3{animation-delay: 1.0s}
#sub.why .line_content .wrap .txt .dot i.dot0.dot4{animation-delay: 1.5s}
#sub.why .line_content .wrap .txt{display: flex;align-items: center;justify-content: center;flex-direction: column;position: absolute;}
#sub.why .con02 .line_content .wrap .txt01{right: 0;transform: translateX(50%);top: 150px;}
#sub.why .con02 .line_content .wrap .txt02{left: 0;transform: translateX(-50%);top: 610px;}
#sub.why .con02 .line_content .wrap .txt03{left: 50%;transform: translateX(-50%);top: 894px;}
#sub.why .line_content .wrap .txt03 strong{white-space: nowrap}
#sub.why .line_content .wrap .txt .txt_w{position: relative}
#sub.why .line_content .wrap .txt .txt_w strong{font-size: 32px;color: #51341B;line-height: 1.25;font-weight: 600}
#sub.why .line_content .wrap .txt .txt_w .on{position: absolute;top: 0;left: 0;background: #51341B;color: #fff;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.why .con03 .line_content .wrap .txt01{left: 0;transform: translateX(-50%);top: 249px;}
#sub.why .con03 .line_content .wrap .txt02{right: 0;transform: translateX(50%);top: 467px;}
#sub.why .con03 .line_content .wrap .txt03{left: 50%;transform: translateX(-50%);top: 974px;}
#sub.why .con03 .icon_content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#sub.why .con03 .cont_square{background: linear-gradient(-45deg, rgba(255,255,255,0.5), rgba(196,153,106,0));width: 576px;height: 324px;border-radius: 6px;border: 1px solid #fff;backdrop-filter: blur(20px);position: relative;animation: 12s sqaureimg infinite linear}

#sub.why .con02 .icon_content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
#sub.why .con02 .icon_content .ring_front{position: absolute;top: 0;left: 0}
#sub.why .con02 .icon_content .ring{animation: ringss 2s infinite linear}
@keyframes ringss{
    0%{transform: rotate(0deg)}
    50%{transform: rotate(10deg)}
    100%{transform: rotate(0deg)}
}
#sub.why .con02 .icon_content .cir_box{position: absolute;}
#sub.why .con02 .icon_content .cir_box01{right: 53px;top: 8.8px;animation: 2s cir_box01 infinite}
#sub.why .con02 .icon_content .cir_box02{left: 145px;bottom: 103px;animation: 2s cir_box02 infinite}
@keyframes cir_box02{
    0%{transform: translateY(0)}
    50%{transform: translateY(10px)}
    100%{transform: translateY(0)}
}
@keyframes cir_box01{
    0%{transform: translateY(0)}
    50%{transform: translateY(10px)}
    100%{transform: translateY(0)}
}
#sub.why .con02 .icon_content .cont_square{perspective: 1000px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.why .con02 .icon_content .cont_square i{display: block;padding: 5px}
#sub.why .con02 .icon_content .cont_square img{max-width: 100%;border-radius: 5px;display: block}
#sub.why .con02 .icon_content .cont_square i{width: 340px;border: 2px solid #fff;border-radius: 6px;background: linear-gradient(-45deg, rgba(249,221,207,0.4), rgba(249,221,207,0.0));display: block;backdrop-filter: blur(20px);transform: rotateX(5deg) rotateY(-42deg)}
#sub.why #btn_link a{    background: rgba(222, 196, 183, 0.25);backdrop-filter: blur(20px);background: linear-gradient(-205deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0));box-shadow: 0 20px 40px #ffffff50 inset;border-color: rgba(255, 255, 255, 0.5);transition: 0.5s;}
#sub.carrer #btn_link a{    background: rgba(222, 196, 183, 0.25);backdrop-filter: blur(20px);background: linear-gradient(-205deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0));box-shadow: 0 20px 40px #ffffff50 inset;border-color: rgba(255, 255, 255, 0.5)}
#sub.carrer #btn_link a i{background: url(/img/sub/wave_btn.png);transform: translateY(100%);transition: 1s;top: auto;bottom: 0;background-size: 100% auto}
#sub.carrer #btn_link a:hover i{transform: translateY(0%);transition: 1s}
#sub.why #btn_link a i{background: url(/img/sub/wave_btn.png);transform: translateY(100%);transition: 1s;top: auto;bottom: 0;background-size: 100% auto}
#sub.why #btn_link a:hover i{transform: translateY(0%);transition: 1s}
/* #sub.why #btn_link a:hover i{opacity: 1} */
/* #sub.carrer #btn_link a:hover i{opacity: 1} */
/*#sub.why #btn_link a:hover{background-color: #FFFBF7 ;color: #FF5700;}*/
#sub.why #btn_link a span{transition: 1s;}
#sub.why #btn_link a:hover span{color: #FF5700;}
/*#sub.carrer #btn_link a:hover{background-color: #FFFBF7 ;color: #FF5700;}*/
#sub.carrer #btn_link a:hover span{color: #FF5700;}


#sub.why #service {position: relative;padding-bottom: 300px;margin-top: 70px}
#sub.why #service .ser_in, #sub.why #service .project_w{position: relative;z-index: 2}
#sub.why #service .bg01{position: fixed;left: 100vw;bottom: 0;transform: translateX(-100%)}
#sub.why #service .bg02{position: fixed;left: 0;bottom: 0}
#sub.why #service .service_tit{display: flex;width: 100vw;height: 100vh;align-items: center;justify-content: center}
#sub.why #service .service_tit .title {text-align: center;display: flex;flex-direction: column;align-items: center}
#sub.why #service .service_tit .title div{position: relative;width: auto;}
#sub.why #service .service_tit .title div *{opacity: 0.2}
#sub.why #service .service_tit .title div.txt *{opacity: 1}
#sub.why #service .service_tit .title div .on{position: absolute;top: 0;left: 0;opacity: 1;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
#sub.why #service .service_tit .title strong{font-family: "amandine", sans-serif;font-weight: 400;font-size: 100px;line-height: 120px;color: #FF5700;}
#sub.why #service .service_tit .title strong *{font-family: inherit}
#sub.why #service .service_tit .title .txt{display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 6px;margin-top: 40px;opacity: 1}
#sub.why #service .service_tit .title .txt p{opacity: 0.2}
#sub.why #service .service_tit .title .txt p.on{opacity: 1}
#sub.why #service .service_tit .title .txt div{position: relative}
#sub.why #service .service_tit .title .txt .on{position: absolute;top: 0;left: 0;color: #51341B;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.why #service .service_tit .title p{font-size: 20px;color: #51341B;font-weight: 500}
#sub.why #service .service_w {position: relative}
#sub.why #service .service_w .b_bg{position: absolute}

#sub.why #service .ser01 .service_w .b_bg01{right: -86px;top: 0}
#sub.why #service .ser01 .service_w .b_bg01 div{display: block;animation: branding 2s infinite}
@keyframes branding{
    0%{transform: translateY(0px)}
    25%{transform: translateY(-10px)}
    50%{transform: translateY(0px)}
    100{transform: translateY(0px)}
}
#sub.why #service .ser02 .service_w .b_bg01{left: 209px;bottom: -72px;}
#sub.why #service .ser03 .service_w .b_bg01{left: 354px;top: 50%;margin-top: -240px;}
#sub.why #service .ser03 .service_w .b_bg01 div{animation: tjs 2s infinite;transform-origin: center}
#sub.why #service .ser02 .service_w .b_bg01 div{animation: gl 2s infinite;transform-origin: center}
#sub.why #service .ser05 .service_w .b_bg01 div{animation: tjs 2s infinite;transform-origin: center}
@keyframes tjs{
    0%{transform: rotate(0deg) translateY(0)}
    25%{transform: rotate(-5deg) translateY(-10px)}
    50%{transform: rotate(0px) translateY(0)}
    100%{transform: rotate(0px) translateY(0)}
}
#sub.why #service .ser04 .service_w .b_bg01{left: 516px;bottom: 164px;animation: point 2.6s infinite;transform-origin: center}
@keyframes point{
    0%{transform: translate(-30px,-30px);opacity: 0}
    50%{transform: translate(-0px,-0px);opacity: 1}
    100%{transform: translate(-30px,-30px);opacity: 0}
}
#sub.why #service .ser05 .service_w .b_bg01{left: 267px;top: 148px;z-index: 2}
#sub.why #service .ser06 .service_w .b_bg01{;animation: camera 2.6s infinite linear;transform-origin: left top}
@keyframes camera{
    0%{transform: rotate(0deg) translateY(0)}
    25%{transform: rotate(5deg) translateY(0px)}
    50%{transform: rotate(0px) translateY(0)}
    100%{transform: rotate(0px) translateY(0)}
}
@keyframes gl{
    0%{transform: rotate(0deg) translateY(0)}
    50%{transform: rotate(5deg) translateY(0px)}
    100%{transform: rotate(0px) translateY(0)}
}
#sub.why #service  .service_w .project_w {opacity: 0;transform: translateY(100px);transition: 1.2s;transition-delay: 0.3s}
#sub.why #service  .service_w.on .project_w {opacity: 1;transform: translateY(0)}
#sub.why #service {background: #FFFBF7 }
#sub.why #service .service_w .title strong{font-size: 80px;color: #FF5700;font-family: "amandine", sans-serif;font-weight: 400}
#sub.why #service .service_w .title strong * {font-family: inherit}
#sub.why #service .service_w .title i{color: inherit;font-family: inherit;font-size: 0.7em}
#sub.why #service .service_w .txt{display: flex;flex-direction: column;gap: 6px;;margin-top: 10px;}
#sub.why #service .service_w .txt div{position: relative}
#sub.why #service .service_w .txt div .on2{position: absolute;top: 0;left: 0;background: #51341B;color: #fff;white-space: nowrap;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}
#sub.why #service .service_w .txt p{font-size: 20px;color: #4A3E25;font-weight: 300;line-height: 24px;white-space: nowrap;;}
#sub.why #service .service_w .project_w .project_image{width: 500px;height: 500px;border-radius: 10px;background: rgba(222,196,183,0.25);border-radius: 10px;border: 1px solid #fff;overflow: hidden;backdrop-filter: blur(10px);display: flex;align-items: center;position: relative}
#sub.why #service .ser01 .service_w .project_w .project_image div{opacity: 0}
#sub.why #service .panel .service_w .project_w .project_image div.p_img{position: absolute;top: 0;left: 0;width: 100%;transform: translateX(0);transition: 0.5s;opacity: 1;padding: 10px}
#sub.why #service .panel .service_w .project_w .project_image div.p_img *{border-radius: 5px;}
#sub.why #service .panel .service_w .project_w .project_image div.p_img div{border-radius: 5px;overflow: hidden;opacity: 1 !important}
#sub.why #service .panel .service_w .project_w .project_image div.p_img video{width: calc(100% + 2px);margin-left: -1px}
#sub.why #service .panel .service_w .project_w .project_image:hover div.p_img{transform: none}
#sub.why #service .service_w .project_w .project_image .p_img img{width: 100%;display: block;max-width: 100%}
#sub.why #service .ser04{padding-right: 70px}
#sub.why #service .ser04 .service_w .txt{margin-top: 0px}
#sub.why #service .ser01{display: flex;align-items: center;padding-right: 0;padding-left: 60px}
#sub.why #service .ser01 .project_w01{padding-left: 360px;margin-top: -65px}
#sub.why #service .ser01 .service_w .project_w .project_image div {transform: translateX(-167px);transition: 0.5s}
#sub.why #service .ser01 .service_w .project_w .project_image:hover div{transform: translateX(-137px)}
/*
#sub.why #service .ser06 .service_w .project_w .project_image div {transform: translateX(-25%)}
#sub.why #service .ser02 .service_w .project_w .project_image div {transform: translateX(-100px)}
*/
#sub.why #service .service_w .project_w .txt {display: flex;align-items: center;justify-content: space-between;margin-top: 10px;flex-direction: row;opacity: 0;transition: 0.5s;display: none}
#sub.why #service .service_w .project_w a:hover .txt{opacity: 1} 
#sub.why #service .service_w .project_w .txt strong{font-family: "amandine", sans-serif;font-size: 20px;color: #4A3E25;font-weight: 500}
#sub.why #service .service_w .project_w .txt p{font-family: "amandine", sans-serif;font-size: 18px;color: #4A3E25;}
#sub.why #service .service_w .project_w .txt div{display: flex;align-items: center;gap: 10px;}
#sub.why #service .service_w .project_w .txt i{display: block;width: 1px;height: 12px;background: #BDBAB4}
#sub.why #service .service_w .project_w .txt span{color: #4A3E25;font-weight: 300}
#sub.why #service .bg_img{position: absolute;top: 0;left: 0}
#sub.why #service .ser02{width: 100%;display: flex;justify-content: flex-end;padding-right: 60px;margin-top: -154px}
#sub.why #service .ser02 .service_w{display: flex;align-items: flex-end;gap: 65px;}
#sub.why #service .ser02 .service_w .project_w .project_image{width: 396px;height: 396px;}
px#sub.why #service .ser02 .service_w .project_w .project_image div {transform: translateX(-85px)}
#sub.why #service .ser03{margin-top: 54px}
#sub.why #service .ser03 .service_w{display: flex;align-items: center;gap: 174px;padding-top: 30px;padding-left: 70px;}
#sub.why #service .ser03 .service_w .title .txt{margin-top: 60px;position: absolute}
#sub.why #service .ser03 .service_w .project_w .project_image{width: 600px;height: 600px;}
#sub.why #service .ser03 .service_w .project_w .project_image div {transform: translateX(-100px)}
#sub.why #service .ser04{display: flex;justify-content: flex-end;padding: 185px 0;padding-right: 75px;}
#sub.why #service .ser04 .service_w{display: flex;align-items: flex-end;gap: 88px;}
#sub.why #service .ser04 .service_w .w01{padding-bottom: 0}
#sub.why #service .ser04 .service_w .w01 .project_w{display: inline-block;margin-bottom: 25px;}
#sub.why #service .ser04 .service_w .w01 .project_w .project_image{width: 440px;height: 440px;}
#sub.why #service .ser04 .service_w .w02 .project_w .project_image{width: 340px;height: 340px;}
/*
#sub.why #service .ser04 .service_w .w01 .project_w .project_image div {transform: translateX(-96px)}
#sub.why #service .ser04 .service_w .w02 .project_w .project_image div {transform: translateX(-91px)}
*/
#sub.why #service .ser05 strong{display: block}
#sub.why #service .ser05 {display: flex;align-items: center;padding-left: 75px;padding-bottom: 188px}
#sub.why #service .ser05 .service_w{display: flex;}
#sub.why #service .ser05 .service_w .project_w{margin-left: -135px;padding-top: 144px;}
#sub.why #service .ser05 .service_w .project_w .project_image{width: 600px;height: 600px;}
/*#sub.why #service .ser05 .service_w .project_w .project_image div {transform: translateX(-125px)}*/
#sub.why #service .ser06 strong:nth-child(2){display: block;margin-top: -30px;padding-left: 150px}

#sub.why #service .ser06{display: flex;justify-content: flex-end;padding-right: 60px}
#sub.why #service .ser06 .service_w{display: flex;}
#sub.why #service .ser06 .service_w .pro_list{display: flex;gap: 80px;padding-bottom: 0;margin-left: -394px;padding-top: 58px}
#sub.why #service .ser06 .service_w .project_w{display: inline-block}
#sub.why #service .ser06 .service_w .project_w01 .project_image{width: 390px;height: 390px;}
#sub.why #service .ser06 .service_w .project_w01{padding-top: 232px;;}
#sub.why #service .ser06 .service_w .project_w02 .project_image{width: 342px;height: 342px;}
#sub.why #service .service_w .project_w .project_image div:nth-child(1){opacity: 0 !Important}

#award{padding-top: 197px;}
/*
#award .award_title .aw_list ul{display: flex;align-items: center;justify-content: center;gap: 6px;}
#award .award_title .aw_list ul li{opacity: 0;filter: blur(20px);transform: translateY(30px)}
#award .award_title .aw_list ul li i{display: block;break-after: 6px;background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); border: 1px solid #fff;border-radius: 6px;}
#award .award_title .aw_list ul li i img{display: block}
#award .award_title .cir{position: relative;width: 300px;height: 300px;display: flex;align-items: center;justify-content: center;margin: 0 auto;opacity: 0;filter: blur(20px);transform: translateY(30px);}
#award .award_title .cir i{position: absolute;top: 0;left: 0;animation: 10s cir infinite linear}
*/


@keyframes circleimg{
    0%{transform: rotate(0deg);}
    20%{transform: rotate(0deg);}
    25%{transform: rotate(-60deg)}
    45%{transform: rotate(-60deg)}
    50%{transform: rotate(-90deg)}
    70%{transform: rotate(-90deg)}
    75%{transform: rotate(-150deg)}
    95%{transform: rotate(-150deg)}
    100%{transform: rotate(0deg);}
}

@keyframes sqaureimg{
    0%{width: 576px;height: 324px;}
    20%{width: 576px;height: 324px;}
    25%{width: 464px;height: 260px;border-radius: 6px}
    45%{width: 464px;height: 260px;border-radius: 6px}
    50%{width: 198px;height: 260px;border-radius: 6px;}
    70%{width: 198px;height: 260px;border-radius: 6px;}
    75%{width: 90px;height: 166px;border-radius: 6px}
    95%{width: 90px;height: 166px;border-radius: 6px}
    100%{width: 576px;height: 324px;border-radius: 6px;}
}

#sub.why .con03 .cont_box span{opacity: 0}
#sub.why .con03 .cont_box span.device_size01{animation: 7s device_text01 linear infinite}
#sub.why .con03 .cont_box span.device_size02{animation: 7s device_text02 linear infinite}
#sub.why .con03 .cont_box span.device_size03{animation: 7s device_text03 linear infinite}
#sub.why .con03 .cont_box span.device_size04{animation: 7s device_text04 linear infinite;;}
@keyframes device_text01{
    0%{opacity: 0}
    3%{opacity: 1}
    20%{opacity: 1}
    22%{opacity: 0}
    100%{opacity: 0}
}
@keyframes device_text02{
    0%{opacity: 0}
    23%{opacity: 0}
    25%{opacity: 1}
    48%{opacity: 1}
    50%{opacity: 0}
    100%{opacity: 0}
}
@keyframes device_text03{
    0%{opacity: 0}
    48%{opacity: 0}
    50%{opacity: 1}
    73%{opacity: 1}
    75%{opacity: 0}
    100%{opacity: 0}
}
@keyframes device_text04{
    0%{opacity: 0}
    73%{opacity: 0}
    75%{opacity: 1}
    98%{opacity: 1}
    100%{opacity: 0}
}

#sub.why .con03 .cont_square:after{content: '';display: block;position: absolute;backdrop-filter: blur(20px);width: 100%;left: 0%;top: 0%;height: 100%}
#sub.why .con03 .cont_box .ring{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.why .con03 .cont_box .ring div{animation: 7s circleimg infinite linear}
#sub.why .con03 .cont_box .cir_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.why .con03 .cont_box .cir_box div{transform: rotate(90deg);animation: 12s dotImg linear infinite;}


@keyframes dotImg{
    0%{transform: rotate(90deg);}
    20%{transform: rotate(90deg);}
    25%{transform: rotate(70deg)}
    45%{transform: rotate(70deg)}
    50%{transform: rotate(50deg)}
    70%{transform: rotate(50deg)}
    75%{transform: rotate(0deg)}
    95%{transform: rotate(0deg)}
    100%{transform: rotate(90deg);}
}

#sub.why .con03 .cont_box .info_v{position: absolute;width: 100%;height: 1px;top: -20px;}
#sub.why .con03 .cont_box .info_v:before{content: '';display: block;width: 1px;height: 10px;background: #51341B;position: absolute;left: 0;top: 0;transform: translateY(-50%)}
#sub.why .con03 .cont_box .info_v:after{content: '';display: block;width: 1px;height: 10px;background: #51341B;position: absolute;right: 0;top: 0;transform: translateY(-50%)}
#sub.why .con03 .cont_box .info_v span{position: absolute;width: 100%;text-align: center;top: 0;transform: translateY(-50%);font-size: 16px;color: #51341B;}
#sub.why .con03 .cont_box .info_v i{display: block;width: calc(50% - 28px);position: absolute;top: 0;left: 0;background: #51341B;height: 100%}
#sub.why .con03 .cont_box .info_v i:nth-child(2){left: auto;right: 0}
#sub.why .con03 .cont_box .info_h{position: absolute;width: 1px;height: 100%;right: -20px;top: 0}
#sub.why .con03 .cont_box .info_h span{position: absolute;height: 100%;text-align: center;top: 0;right: 0; transform: translateX(50%);font-size: 16px;color: #51341B;writing-mode: vertical-rl;}
#sub.why .con03 .cont_box .info_h i{display: block;height: calc(50% - 28px);position: absolute;top: 0;left: 0;background: #51341B;width: 100%}
#sub.why .con03 .cont_box .info_h i:nth-child(2){top: auto;bottom: 0}
#sub.why .con03 .cont_box .info_h:before{content: '';display: block;height: 1px;width: 10px;background: #51341B;position: absolute;left: 0;top: 0;transform: translateX(-50%)}
#sub.why .con03 .cont_box .info_h:after{content: '';display: block;height: 1px;width: 10px;background: #51341B;position: absolute;left: 0;bottom: 0;transform: translateX(-50%)}
#sub.why .con04{margin-top: 365px}
#sub.why .con04{position: relative;height: 100vh}
#sub.why .con04 .esg_title{align-items: flex-start;justify-content: flex-start;text-align: left;top: 150px;left: 120px;position: absolute}
#sub.why .con04 .esg_title strong{text-align: left}
#sub.why .con04 .why_image{padding-top: 90px;left: 0;left: 790px;position: absolute}
#sub.why .con04 .why_image .img_cont{display: flex;width: 100vw;gap: 370px;}
#sub.why .con04 .why_image .img_cont .img{padding: 20px;padding-bottom: 40px;border-radius: 20px;background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); border: 1px solid #fff;position: relative;backdrop-filter: blur(20px)}
#sub.why .con04 .why_image .img_cont .img .deco_image{padding: 20px;border-radius: 20px;background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)); border: 1px solid #fff ;position: absolute;bottom: -64px;right: -78px}
#sub.why .con04 .why_image .img_cont .img .deco_image div{border-radius: 10px;overflow: hidden}
#sub.why .con04 .why_image .img_cont .img .deco_image div img{display: block}
#sub.why .con04 .why_image .img_cont .img .b{border-radius: 10px;overflow: hidden}
#sub.why .con04 .why_image .img_cont .img .b img{display: block}
#sub.why .con04 .why_image .img_cont .txt {display: flex;flex-direction: column;gap: 6px;padding-top: 20px;}
#sub.why .con04 .why_image .img_cont .txt > div{position: relative}
#sub.why .con04 .why_image .img_cont .txt > div p{font-size: 20px;color: #4A3E25;line-height: 24px;}
#sub.why .con04 .why_image .img_cont .txt > div p.on{background: #51341B;color: #fff;position: absolute;top: 0;left: 0; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.why .con04{position: relative;}
#sub.why .con04  .bg{position: absolute;width: 100%;height: 100%;background: linear-gradient(to top, #FF9400, #FFA200);opacity: 0;}
#sub.why .con04 .why_image .img_cont .img.img02{transform: translateY(290px)}
#sub.why .con04 .why_image .img_cont .img.img02 .deco_image{top: 87px;  bottom: auto;right: -144px}
#sub.why .con04 .why_slogon{width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;left: 0;transform: translateX(calc(100% + 790px));}
#sub.why .con04 .why_slogon .slo_wrap{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 10px;}
#sub.why .con04 .why_slogon .slo_wrap .slo{position: relative;}
#sub.why .con04 .why_slogon .slo_wrap .slo strong{font-size: 40px;color: #51341B;font-weight: 600}
#sub.why .con04 .why_slogon .slo_wrap .slo strong.on{position: absolute;left: 0;background: #51341B;color: #fff;position: absolute;top: 0;left: 0; clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.why .bg_content{background: linear-gradient(to bottom, #FF9400, #FF5700);position: relative}
#sub.why .con05{padding: 370px 0}
#sub.why .con05 .txt {display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 10px;}
#sub.why .con05 .txt strong{font-size: 40px;color: #FFFFFF;line-height: 50px;}
#sub.why .con06 {padding-bottom: 243px}
#sub.why .con06 .swiper {display: none;}
#sub.why .con06 .esg_title{margin-bottom: 130px;}
#sub.why .con06 .esg_title strong{color: #FFFFFF;}
#sub.why .con06 .esg_title span{border-color: #fff;color: #fff}
#sub.why .con06 .how_box{display: flex}
#sub.why .con06 .how_box img{display: block}
#sub.why .con06 .how_box .img_base{padding: 24px;border-radius: 50%;background: linear-gradient(to right, rgba(255,255,255,0.25), rgba(255,255,255,0)); border: 1px solid #ffffff25;transform: rotateY(45deg);opacity: 0}
#sub.why .con06 .how_box .img_base div{overflow: hidden;border-radius: 50%}
#sub.why .con06 .how_box .img_deco{padding: 20px;border-radius: 50%;background: linear-gradient(to right, rgba(255,255,255,0.25), rgba(255,255,255,0)); border: 1px solid #ffffff25;position: absolute;backdrop-filter: blur(20px);transform: rotateY(-45deg);opacity: 0}
#sub.why .con06 .how_box .img_deco div{overflow: hidden;border-radius: 50%}
#sub.why .con06 .how_box .txt{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;margin-top: 40px;}
#sub.why .con06 .how_box .txt div{position: relative}
#sub.why .con06 .how_box .txt div p.on{color: #FF6600;background: #fff;position: absolute;top: 0;left: 0;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);}
#sub.why .con06 .how_box .txt p{font-size: 20px;color: #FFFFFF;}
#sub.why .con06 .how_box01{padding-left: 85px}
#sub.why .con06 .how_box02{padding-right: 160px;justify-content: flex-end}
#sub.why .con06 .how_box03{padding-left: 290px}
#sub.why .con06 .how_box04{padding-right: 70px;justify-content: flex-end}
#sub.why .con06 .how_box05{padding-left: 189px}
#sub.why .con06 .how_box .img_box{position: relative;perspective: 600px}
#sub.why .con06 .how_box01 .img_deco{position: absolute;bottom: 68px;right: -170px}
#sub.why .con06 .how_box02 .img_deco{position: absolute;top: 24px;left: -150px}
#sub.why .con06 .how_box03 .img_deco{position: absolute;bottom: 24px;right: -225px}
#sub.why .con06 .how_box04 .img_deco{position: absolute;bottom: -44px;left: -150px}
#sub.why .con06 .how_box05 .img_deco{position: absolute;top: -44px;right: -158px}

#sub.why .con07{padding-bottom: 175px;}
#sub.why .con07 .txt_line{overflow: hidden;margin-top: 0;}
#sub.why .con07 .txt_line div{position: relative;height: 45px;margin-top: 80px;}
#sub.why .con07 .txt_line ul{display: flex;width: auto;position: absolute;width: 21722px;animation: left 70s infinite linear;left: 0}
#sub.why .con07 .txt_line ul li{font-size: 40px;color: #FFFFFF;padding: 0 60px;position: relative;font-weight: 600}
#sub.why .con08{height: 485px;background: #FF5700;width: 100%;position: relative;overflow: hidden;margin-top: -1px;}
#sub.why .con08 .bg{mix-blend-mode:color-dodge}
#sub.why .con08:after{content: '';display: block;width: 100%;height: 50%;background: linear-gradient(to bottom, #FF5700, #FF570000);position: absolute;top: 0;left: 0}
#sub.why .con08 #btn_link{position: absolute;z-index: 10;top: 0%;left: 50%;transform: translate(-50%,0%);padding-top: 25px;}
#sub.why .con08 .list_btn a{margin-top: 0}
#sub.why .con08 .list_btn a{margin-top: 0}
#sub.why .con08 .list_btn a strong{text-align: center;color: #fff}
#sub.why .con08 .list_btn a:hover strong{color: #FF5800}
#sub.why .con08 .list_btn a i.line01{border-color: #fff}
#sub .list_btn a i.line02{border-color: rgba(255,255,255,0.1)}
@keyframes left{
    0%{left: 0}
    100%{left: -100%}
}


#sub.brand .con02 .unlimit div{transform: translateX(100px);opacity: 0;transition: 1.2s}
#sub.brand .con02.on .unlimit div{transform: translateX(0);opacity: 1}
#sub.brand .con02 .line_w strong{transform: translateX(-30px);opacity: 0;transition: 1.2s}
#sub.brand .con02.on .line_w strong{transform: translateX(0);opacity: 1;transition-delay: 1s}
#sub.brand .con02.on .unlimit div:nth-child(2){transition-delay: 0.3s}
#sub.brand .con02 .line_w i{width: 0;transition: 1s}
#sub.brand .con02.on .line_w i{width: 100%}


#sub.brand .con07 .color_wrap > div, #sub.brand .con08 .logo_list > div{transform: translateX(-100px);transition: 1.2s;opacity: 0}
#sub.brand .con07.on .color_wrap > div, #sub.brand .con08.on .logo_list > div{transform: translateX(0);transition: 1.2s;opacity: 1}
#sub.brand .con08 .logo_list > div:nth-child(2){transition-delay: 0.3s}
#sub.brand .con08 .logo_list > div:nth-child(3){transition-delay: 0.6s}
#sub.brand .con07.on .color_wrap > div:nth-child(2){transition-delay: 0.3s}
#sub.brand .con07.on .color_wrap > div:nth-child(3){transition-delay: 0.6s}
#sub.brand .con07.on .color_wrap > div:nth-child(4){transition-delay: 0.9s}
#sub.brand .con07.on .color_wrap > div:nth-child(5){transition-delay: 1.2s}
#sub.esg .con03 .swiper{display: none;}
#sub.brand .con09 .bg_video {height: 100vh;width: 100%;overflow: hidden}
#sub.brand .con09 .bg_video video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}

#sub.carrer .con01 .txt_list{display: flex;}
#sub.carrer .con01 .swiper{display: none;}

/*
#sub.brand .sub_visual .brand_parts{opacity: 0;transition: transform 1.5s, opacity 1.8s ;transition-delay: 0.5s}
#sub.brand .sub_visual .brand_parts01{transform: translate(200px, 200px) rotate(-10deg)}
#sub.brand .sub_visual .brand_parts03{transform: translate(-200px, 000px) rotate(10deg)}
#sub.brand .sub_visual .brand_parts06{transform: translate(-200px, -200px) rotate(-10deg)}
#sub.brand .sub_visual .brand_parts02{transform: translate(-200px, -200px) rotate(-10deg)}
#sub.brand .sub_visual .brand_parts04{transform: translate(200px, -200px) rotate(-10deg)}
#sub.brand .sub_visual .brand_parts05{transform: translate(200px, -50px) rotate(-10deg)}
*/

#sub.brand .sub_visual:after{content: '';display: block;width: 100%;height: 50%;background: linear-gradient(to bottom, #E53700, #FFAA00);position: absolute;bottom: 0;left: 0;z-index: 15}

#sub.brand .sub_visual.on .brand_parts{transform: translate(0, 0) rotate(0deg);opacity: 1}
#sub .sub_visual .about_{position: absolute;top: 50%;left: 50%}
#sub .sub_visual .about_u{margin-top: -398px;margin-left: -660px;}
#sub .sub_visual .about_l{margin-top: 130px;margin-left: 100px;}
#sub .sub_visual .about_d{margin-top: 400px;margin-left: -316px;}

#sub .sub_visual .why_symbol{transform: scale(0.7) rotate(-25deg);opacity: 0;transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual.on .why_symbol{transform: scale(1) rotate(0deg);opacity: 1;}
#sub .sub_visual .esg_object{opacity: 0;transition: 2s;transition-delay: 0.5s}
#sub .sub_visual .esg_object02{transform: scale(0.7) rotate(-30deg)}
#sub .sub_visual .esg_object01{transform: scale(0.7) rotate(30deg)}
#sub .sub_visual .esg_object .fl{position: relative}
#sub .sub_visual .esg_object .fl > div{position: absolute;top: 0;left: 0;;transition:2s}
#sub .sub_visual .esg_object .fl > div.fl01{position: relative}
#sub .sub_visual .esg_object .fl > div.fl01{opacity: 0;transform: translate(-30%,-30%)}
#sub .sub_visual .esg_object .fl > div.fl02{opacity: 0;transform: translate(10%,-30%);transition-delay: 0.0s}
#sub .sub_visual .esg_object .fl > div.fl03{opacity: 0;transform: translate(30%,-10%);transition-delay: 0.0s}
#sub .sub_visual .esg_object .fl > div.fl04{opacity: 0;transform: translate(30%,30%);transition-delay: 0.0s}
#sub .sub_visual .esg_object .fl > div.fl05{opacity: 0;transform: translate(-10%,30%);transition-delay: 0.0s}
#sub .sub_visual .esg_object .fl > div.fl06{opacity: 0;transform: translate(-30%,10%);transition-delay: 0.0s}
/*
#sub .sub_visual .esg_object .fl > div.fl02{opacity: 0;transform: translate(10%,-30%);transition-delay: 0.2s}
#sub .sub_visual .esg_object .fl > div.fl03{opacity: 0;transform: translate(30%,-10%);transition-delay: 0.4s}
#sub .sub_visual .esg_object .fl > div.fl04{opacity: 0;transform: translate(30%,30%);transition-delay: 0.6s}
#sub .sub_visual .esg_object .fl > div.fl05{opacity: 0;transform: translate(-10%,30%);transition-delay: 0.8s}
#sub .sub_visual .esg_object .fl > div.fl06{opacity: 0;transform: translate(-30%,10%);transition-delay: 1.0s}
*/
#sub .sub_visual.on .esg_object .fl > div{opacity: 1;transform: translate(0px,0px);}
#sub .sub_visual.on .esg_object{transform: scale(1) rotate(0deg) translate(0px,0px);opacity: 1}

#sub .sub_visual{background: #FFFBF7;}
#sub .sub_visual .about_{opacity: 0;transition: 1.5s;transition-delay: 0.5s}
#sub .sub_visual .about_u{transform: scale(0.7) translate(250px,250px)}
#sub .sub_visual .about_l{transform: scale(0.7) translate(-250px,-250px)}
#sub .sub_visual .about_d{transform: scale(0.7) translate(250px,-250px)}
#sub .sub_visual.on .about_{opacity: 1;transform: scale(1) translate(0px,0px)}
#sub .sub_visual .bg_video{position: absolute;top: 50%;left: 50%;mix-blend-mode: multiply;opacity:0.7;transform: translate(-50%,-50%) scale(1.2);}
#sub .sub_visual .bg_video video{width: 1920px}
/*transform: translate(-50%,-50%) scale(2);*/
#sub.carrer .sub_visual{overflow: hidden}
#sub.carrer .sub_visual .bg_video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(1.2);opacity: 1;mix-blend-mode: darken}


#sub .sub_visual .bg_video2{transform: translate(-50%,-50%) scale(1.8);opacity: 0.6;mix-blend-mode: normal}
#sub .sub_visual .bg_video2 video{width: 1920px;height: auto}
#sub .sub_visual:after{content:'';display:block;position: absolute;width: 100%;height: 10%;background: linear-gradient(to bottom, #FFFBF700, #FFFBF7);position: absolute;bottom: 0;z-index: 10}
#sub .sub_visual:before{content:'';display:block;position: absolute;width: 100%;height: 10%;background: linear-gradient(to top, #FFFBF700, #FFFBF7);position: absolute;top: 0;z-index: 10}
#sub.brand .con01{margin-top: -1px;z-index: 5}
#sub.brand .sub_visual:after{display: none}
#sub.brand .sub_visual:before{display: none}
#sub.brand .sub_visual:after{content: '';display: block;width: 100%;height: 15%;background: linear-gradient(to bottom, #FFAA0000, #FFAA00);position: absolute;bottom: -1px;left: 0;z-index: 15}

#port_view .con08 .img_wrap > ul > li .bg img{max-width: 100%;width: 100%}
#sub.about .con10 .title_w .img_box video{width: 100%}
#sub .sub_visual .bg_video video{width: 100vw}
#sub.why #service .bg_img img{width: 100vw}
#sub.brand .sun_bg .sun_bg_img img,#sub.brand .con06 .bg_wrap .wrap > div img{width: 100vw;display: block}
#sub.brand .con06{overflow: hidden}
@media (max-width: 1920px) {
    #sub.brand .sun_bg .sun_bg_img img{width: auto}
    #sub.why #service .bg_img img{width: auto}
    #sub.brand .con06 .bg_wrap .wrap > div img{width: auto}
    #sub .sub_visual .bg_video video{width: 1920px}
    #sub.about .con10 .title_w .img_box video{width: auto}
    #port_view .con08 .img_wrap > ul > li .bg img{max-width: 960px}
}

@media (max-width: 1700px) {
}
@media (max-width: 1680px) {
	#sub.about .con08 .service_list > ul > li.s_list08{margin-left: 359px;margin-top: -203px;}
    #sub.about .con08 .service_list > ul > li.s_list06{margin-left: 35px}
    #sub.about .con08 .service_list > ul > li.s_list01{margin-left: -660px}
	#sub .sub_visual .sv_title strong{font-size: 160px;margin-top: -20px}
	#sub.brand .con02 .unlimit div svg{height: 160px; width: auto}
	#sub.brand .con02 .line_w {width: calc(100% - 932px);}
	#sub.brand .txt_cont p, #sub.brand .brand_text div p{font-size: 36px;}
	#sub.brand .con08 .logo_list > div.logo_now img{width: 700px;} 
	#sub.brand .con09 .list ul li strong{font-size: 26px;}
	#sub.brand .con09 .list ul li p{font-size: 18px;}
	#sub.brand .con09 .list ul li{padding: 60px 20px;}
	#sub.brand .con09 .list{padding-bottom: 100px;}
	#sub.brand .making .ending .txt_in .txt p{font-size: 36px;}
	#sub.esg .esg_title strong{font-size: 55px;}
	#sub.esg .con01 .icon_list{gap: 100px}
	#sub.esg .con01 .icon_list .icon_w{width: 400px;}
	#sub.esg .con01 .txt_w strong{font-size: 36px;}
	#sub.esg .esg_title strong{font-size: 50px;;}
	#sub.esg .con02 .pin_text .txt p{font-size: 55px;;}
	#sub.esg .con03 .txt_content .title_box .esg_title strong{font-size: 45px;line-height: 1.5;;}
	#sub.why .line_content .wrap  svg{width: 650px;height: auto;}
	#sub.why .line_content .wrap .txt .txt_w strong{font-size: 32px;}
	#sub.why .con02 .line_content .wrap .txt01{top: 110px;}
	#sub.why .con02 .line_content .wrap .txt02{top: 400px;}
	#sub.why .con02 .line_content .wrap .txt03{top: 628px;}
	#sub.why .esg_title strong{font-size: 55px;}
	#sub.why .con03 .icon_content{transform: translate(-50%,-50%) scale(0.7);}
	#sub.why .con03 .line_content .wrap .txt01{top: 189px;}
	#sub.why .con03 .line_content .wrap .txt02{top: 405px;}
	#sub.why .con03 .line_content .wrap .txt03{top: 706px;}
	#sub.why .con06 .how_box02{padding-right: 60px;}
	#sub.why .con06 .how_box03{padding-left: 70px;}
	#sub.why .con06 .how_box05{padding-left: 40px;}
	#sub.why .con06 .how_box .img_base img{width: 460px;}
	#sub.why .con06 .how_box .img_deco img{width: 220px;}
	#sub.why .con06 .how_box03 .img_deco{right: -125px;}
	#sub.why .con06 .how_box01 .img_deco{right: -130px;}
	#sub.why .con06 .how_box04 .img_deco{left: -70px;}
	#sub.why .con06 .how_box05 .img_deco{right: -88px;top: -10px;}
	#sub.why .con01 .resolution_w .resolution strong{font-size: 400px;}
	#sub.about .con03 .service_list{width: 100%}
	#sub.about .con03 .service_list .txt_w p{font-size: 18px}
	#sub.about .con03 .service_list .txt_w p br{display: none}
	#sub.gallery .sub_con{max-width: 100%;padding: 0 20px}
	#sub.contact .sub_visual2 ul li a{font-size: 40px}
    #sub.contact .contact_bg img{max-width: 100%}
    #sub.contact .contact_bg{max-width: 50%}
}
@media (max-width: 1600px) {
    #sub.carrer .sub_visual .bg_video video{width: 1800px}
    #sub.portfolio .loc .search .sch_w input{width: 260px}
    #sub.contact .form_w ul.list{max-width: 70%}
    #sub .sub_con{padding: 0 20px;}
    #sub.contact .sub_con{position: relative;z-index: 555;background: none}
	#sub .sub_visual2 .sv_title strong{font-size: 50px}
    #sub.unique .sub_visual2 .sv_title strong{font-size: 40px}
	#sub.about .con10 .title_w .txt_box{margin-left: -310px}
	#sub.about .con10 .title_w .img_box .txt_box {z-index: 1;left: 16.5%;}
	#sub.about .con10 .title_w .img_box{width: 60%}
	#sub.about .con06 div.year_wrap .year_box strong{font-size: 120px}
	#sub.about .con06{padding: 0 20px}
	#sub.about .con03{padding: 0 20px}
	#sub.about .con06 > div:nth-child(1){width: 40%}
	#sub.about .con06 > div:nth-child(2){width: 60%}
	#sub.why .con04 .why_image{left: 590px;}
	#sub.why .con04 .esg_title{left: 20px;}
	#sub.carrer .con01 .txt_list .cont .tit strong{font-size: 26px;}
	#sub.carrer .con01 .txt_list{width: 700px}
	#sub.carrer .con01 .carr_title strong, #sub.carrer .con04 .title strong{font-size: 45px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt p{font-size: 19px;line-height: 1.7;word-break: keep-all}
	#sub.carrer .con01 .txt_list .cont .txt_w{padding: 40px;padding-left: 95px;}
	#sub.carrer .con01 .txt_list .cont .txt_w > i{left: 30px;top: 40px;}
	#sub.carrer .con01 .txt_list, #sub.carrer .con01 .carr_title{padding-top: 150px}
	#sub.carrer .con04 ul li .txt strong{font-size: 26px;}
	#sub.carrer .con04 ul li .txt p{font-size: 17px}
	#sub .sub_visual .sv_title strong{font-size: 170px;margin-top: -30px}
	#sub.brand .con07, #sub.brand .con08{flex-direction: column;}
	#sub.brand .con07 .brand_text, #sub.brand .con08 .brand_text{margin-bottom: 40px;}
	#sub.brand .con08 .logo_list{align-items: flex-end;}
	#sub.brand .brand_title strong{font-size: 50px;}
	#sub.brand .making .img_list > div.img_w03 img{width: 300px;}
	#sub.brand .making .img_list > div.img_w05{padding-left: 20px;}
	#sub.brand .making .img_list > div.img_w04{padding-right: 0;}
	#sub.brand .making .img_list > div.img_w06 img{width: 350px;}
	#sub.brand .making .img_list > div.img_w07 video{width: 400px;}
	#sub.brand .making .img_list{margin-bottom: 5px;}
	#sub.esg .con02 .line_text .wrap svg{width: 650px;height: auto;}
	#sub.esg .con02 .line_text .wrap .txt01{top: 230px;}
	#sub.esg .con02 .line_text .wrap .txt02{top: 430px;}
	#sub.esg .con02 .pin_w .pin_ring02 img, #sub.esg .con02 .pin_w .pin_ring01 img{width: 600px;}
	#sub.esg .con02 .pin_w .pin img{width: 330px;}
	#sub.esg .con02 .pin_w .pin{margin-left: -143.5px;margin-top: -249px;}
	#sub.esg .con02 .line_text .wrap .txt strong{font-size: 23px;}
	#sub.esg .con02 .bg_txt strong{font-size: 150px;}
	#sub.esg .con02 .pin_text{margin-top: -200px;}
	#sub.esg .con02 .bg_txt{bottom: 369px;}
	#sub.esg .con02{padding-top: 200px;padding-bottom: 200px;}
	#sub.about .con08 .service_list > ul > li.s_list08 {margin-left: 159px;margin-top: -293px;}
	#sub.about .con08 .service_list > ul > li.s_list08 .bubble img {width: 377px;}
	#sub.about .con08 .service_list > ul > li.s_list03 {margin-left: -500px;margin-top: 275px;}
    #sub.portfolio .port_btn > div{transform: scale(0.75);opacity: 0;transition: 1s}
    #sub.portfolio.on .port_btn > div{transform: scale(0.85);opacity: 1;transition: 1s}
    #sub.portfolio .port_wrap .por_title strong{font-size: 100px}
    #sub.portfolio .sub_con{padding: 0 20px}
    #sub.portfolio .port_visual{padding-top: 100px}
}
@media (max-width: 1300px) {
    #sub.portfolio .port_wrap .por_title p{font-size: 17px}
	#sub.about .con08 .service_list > ul > li.s_list01{margin-left: -430px;}
	#why .con09 ul li .txt p{font-size: 16px;line-height: 1.5}
	#why .con09 ul li .tit strong{font-size: 24px}
	#why .con09 ul li .tit span{font-size: 75px}
	#sub.why .line_content .wrap .txt .txt_w strong{font-size: 26px;}
	#sub.brand .con01{padding-top: 200px;}
	#sub.brand .con02{display: none;}
	#sub .sub_visual .sv_title ul{justify-content: center;}
	#sub.brand .sub_visual .sv_title strong{text-align: center;line-height: 1;margin-top: 0;}
	#sub.carrer .con01{padding: 0 20px;}
	#sub.carrer .con01 .carr_title{left: 20px;}
	#sub.carrer .con02 .wrap{padding: 10px}
	#sub.brand .txt_cont p, #sub.brand .brand_text div p{font-size: 25px;}
	#sub.brand .con03{padding: 0 20px;padding-top: 150px;}
	#sub.brand .brand_title{padding-bottom: 100px;}
	#sub.brand .sun_bg .sun_bg_img img{width: 1300px;}
	#sub.brand .con05{padding: 0 20px;padding-top: 200px;}
	#sub.brand .logo_cont img{width: 450px;}
	#sub.brand .con06 .bg_wrap {clip-path: circle(295px at 50% 50%);}
	#sub.brand .con06 .s_txt p{font-size: 26px;}
	#sub.brand .con06 .clock > div{position: relative;transform: scale(0.9);width: 100%;height: 100%;;}
	#sub.brand .con06 .bg_wrap .wrap > div img{height: 100vh;}
	#sub.brand .con07{padding: 0 20px;padding-top: 130px;}
	#sub.brand .con08{padding: 0 20px;padding-top: 130px;}
	#sub.brand .con09 .list ul{width: 70%;}
	#sub.brand .making .ending .txt_in .txt p{font-size: 26px;}
	#sub.carrer .con01 .carr_title strong, #sub.carrer .con04 .title strong{font-size: 40px;line-height: 1.5;}
	#sub.carrer .con01 .txt_list .cont .txt_w{padding-left: 75px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt p{font-size: 16px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .name img{width: 100px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .name div strong{font-size: 22px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .name div span{font-size: 14px;}
	#sub.carrer .con01 .txt_list .cont .txt_w > i{font-size: 40px;}
	#sub.carrer .con01 .txt_list .cont .tit span{font-size: 40px;}
	#sub.carrer .con01 .txt_list{gap: 80px}
	#sub.carrer .con02{padding-top: 150px;}
	#sub.carrer .con03 .aw_txt strong{font-size: 30px;line-height: 1.5;;}
	#sub.carrer .con03 .aw_keyword span{font-size: 17px;line-height: 35px;}
	#sub.carrer .con03 .txt_wrap .bg img{width: 180px;}
	#sub.carrer .con03 .txt_wrap .bg01 img{width: 160px;}
	#sub.carrer .con03 .aw_list ul li i img{width: 45px;display: block;}
	#sub.carrer .con04 .title{margin-bottom: 70px;}
	#sub.carrer .con04 ul li img, #sub.carrer .con04 ul li .icon{width: 100px;}
	#sub.carrer .con01 .txt_list{width: 590px;}
	#sub.carrer .con04 .linked .txt_w strong{font-size: 50px;}
	#sub.carrer .con04 .linked .txt_w p{font-size: 17px;}
	#sub.carrer .con04 ul{gap: 100px 0}
	#sub.about .flower_con .e_title p{font-size: 36px;line-height: 2}
    #sub.portfolio .port_wrap .por_title{z-index: 15}
    #sub.portfolio .gallery_wrap > ul > li .port_txt ul li{font-size: 16px}
    #sub.portfolio .filter_w .w ul{width: calc(100% - 55px)}
    #sub.portfolio .filter_w .w .col_list{width: calc(100% - 55px)}
    #sub.portfolio .filter_w .w .col_list ul{width: calc(100%)}
    #sub.portfolio .gallery_wrap{padding: 0}
}
@media (max-width: 1100px) {
    #sub.why .con01 .device_w .device img{transform: scale(0.8)}
    #sub.portfolio .loc .btn_w > *{gap: 16px}
	#sub.gallery .gal_list ul li a .txt strong{font-size: 18px}
	#sub.gallery .gal_list ul li a .txt p{font-size: 15px;padding-top: 20px}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt{gap: 6px}
	#sub.carrer .con01 .carr_title strong, #sub.carrer .con04 .title strong{font-size: 40px;line-height: 1.7}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt p{font-size: 17px;}
	#sub.carrer .con01 .txt_list .cont .tit strong{font-size: 24px;}
	#sub.carrer .con01 .txt_list .cont .tit span, #sub.carrer .con01 .txt_list .cont .txt_w > i{font-size: 40px}
	#sub.carrer .con01 .txt_list .cont .txt_w .name img{height: 80px}
	#sub.carrer .con01 .txt_list .cont .txt_w .name div strong{font-size: 22px;}
	#sub.carrer .con01 .txt_list .cont .txt_w{padding: 25px;}
	#sub.carrer .con01 .txt_list{width: 567px}
	#sub.carrer .con01 .txt_list{gap: 100px;}
	#sub.carrer .con02{padding-top: 100px;}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt{margin-top: 0}
	#sub.carrer .con01 .txt_list .cont .txt_w > i{position: static;line-height: 1}
    #sub.esg .con03 .txt_content .title_box .esg_title strong{font-size: 40px;}
    #sub.esg .con03 .txt_content .txt{width: 800px;}
    #sub.esg .con03 .txt_content .txt p{font-size: 17px;}
    #sub.esg .con03 .txt_content .txt strong{font-size: 26px;}
    #sub.esg .con04 .esg_title strong{font-size: 32px;}
	#why .con09 ul li .txt p br{display: none}
}
@media (max-width: 960px) {
    .polict_box{padding: 40px 20px;border-radius: 15px}
    .polict_box ul li strong{font-size: 13px}
    .polict_box .close{transform: scale(0.7)}
    .polict_box .tit strong{font-size: 16px;margin-bottom: 15px}
    .polict_box .tit p, .polict_box ul li p{font-size: 11px}
    #sub.unique .sub_visual2 .sv_title strong{font-size: 32px}
    #sub.board .sub_con{padding-bottom: 60px}
    #sub .paging{margin-top: 50px}
    #sub.board_view .sub_visual2 span{width: 120px;padding: 0}
    #sub.board_view .b_title .cate span{height: 30px;font-size: 13px}
    #sub.board_view .b_title{padding: 10px 0}
    #sub.board_view .b_title strong{font-size: 18px}
    #sub.board .bo_list ul li .cate span{height: 30px;padding: 0 7px;font-size: 13px}
    #sub.board .bo_list ul li a strong{font-size: 16px;}
    #sub.board .bo_list ul li a{height: 120px;gap: 10px}
    #sub.portfolio .port_wrap .por_title{pointer-events: none}
    #sub.board .sub_visual2 span{width: 100px !Important}
	#sub.about .flower_con .flower{height: 100%}
    #sub .sub_visual2 .sv_title strong{font-size: 24px}
	#sub.about .flower_con .flower video{height: 100%;width: auto}
    #sub.portfolio .list_wrap ul li a > div *.port_img img{width: 200px}
    #sub.portfolio .list_wrap ul li a{padding: 5px}
    #sub.portfolio .list_wrap ul li a > div{padding: 0}
    #sub.portfolio .list_wrap ul li a span{font-size: 13px}
    #sub.portfolio .list_wrap ul li a strong{font-size: 17px}
    #sub.portfolio .list_wrap ul li a p{font-size: 13px}
    #sub.portfolio .list_wrap ul li a > div{height: 80px;}
    #sub.portfolio .gallery_wrap > ul > li .port_txt{padding: 10px 0}
    #sub.portfolio .gallery_wrap > ul > li{margin-bottom: 0}
    #sub.portfolio .gallery_wrap > ul > li:nth-child(2n){margin-top: 0}
    #sub.portfolio .gallery_wrap > ul > li{width: 100%}
    #sub.portfolio .gallery_wrap{margin-top: 55px;}
    #sub.portfolio .gallery_wrap > ul > li{margin-bottom: 40px}
    #sub.portfolio .gallery_wrap > ul > li .port_txt strong svg{width: 15px;height: auto}
    #sub.portfolio .gallery_wrap > ul > li .port_txt strong{font-size: 20px;}
    #sub.portfolio .gallery_wrap > ul > li .port_txt ul li{font-size: 14px}
    #sub.portfolio .gallery_wrap.simple > ul > li .port_txt{padding: 10px 0}
    #sub.portfolio .gallery_wrap > ul > li .port_w .vid_box{border-radius: 10px;padding: 3px}
    #sub.portfolio .gallery_wrap > ul > li .port_w .vid_box > img{border-radius: 7px}
    #sub.portfolio .gallery_wrap.simple > ul > li{width: calc(33.33% - 10px)}
    #sub.portfolio .gallery_wrap.simple > ul{gap: 15px;}
    #sub.portfolio .loc .search ul li a{height: 28px;font-size: 13px;width: 50px}
    #sub.portfolio .loc .search ul{padding: 5px}
    #sub.portfolio .loc .search .sch_w button{padding-right: 20px}
    #sub.portfolio .gallery_wrap > ul > li{margin-bottom: 0}
    #sub.portfolio .loc .search .sch_w button svg{width: 14px;height: auto}
    #sub.portfolio .loc .search .sch_w input{height: 40px;padding: 0 20px;font-size: 14px}
    #sub.portfolio .loc .btn_w > * svg{width: 5px;height: auto}
    #sub.portfolio .loc .btn_w > button svg{width: 8px;height: auto}
    #sub.portfolio .breadcrumbs + strong{font-size: 90px}
    #sub.portfolio .loc .btn_w > *{height: 40px;padding: 0 15px;font-size: 14px}
    #sub.portfolio .filter_w{padding: 10px;border-radius: 10px}
    #sub.portfolio .filter_w .w .col_list ul li label input + span{width: 25px;height: 25px}
    #sub.portfolio .filter_w .w{padding: 10px}
    #sub.portfolio .filter_w .w strong{font-size: 14px}
    #sub.portfolio .filter_w .w ul li label input + span{font-size: 13px;height: 25px;padding: 0 7px}
    #sub .per{margin-top: 50px;margin-bottom: 20px}
    #sub .per p{font-size: 14px}
    #sub .per input{width: 20px;height: 20px;}
    #sub .per input:after{background-size: 100% 100% !important}
    #sub.contact .form_w ul.list > li .file_w button{right: 10px;top: 50%;transform: translateY(-50%)}
    #sub.contact .form_w ul.list > li .file_w button{width: 30px;height: 30px}
    #sub.contact .form_w ul.list > li strong{display: none}
    #sub.contact .form_w ul.list > li .file_name button svg{width: 12px}
    #sub.contact .form_w ul.list > li .file_name button{width: 105px;height: 35px;font-size: 13px}
    #sub.contact .form_w ul.list > li .file_w{gap: 10px;}
    #sub.contact .form_w ul.list > li .file_w p{font-size: 14px}
    #sub.contact .form_w ul.list > li .file_w svg{width: 15px;height: auto}
    #sub.contact .form_w ul.list > li .file_w{padding: 10px;margin-bottom: 10px}
    #sub.contact .form_w ul.list > li .file_w > span > span{font-size: 14px}
    #sub.contact .form_w ul.list > li .file_w > span {display: flex;width: 100px;height: 35px;gap: 6px}
    #sub.contact .form_w ul.list > li strong{margin-bottom: 5px;}
    #btn_link .water_drop{display: none}
    #sub .sub_visual2 .sv_title strong{font-size: 33px;}
    #sub.contact .form_w ul.list > li div{margin-bottom: 15px}
    #sub .sub_visual2 p{font-size: 16px}
    #sub.contact .form_w ul.list{gap: 60px}
    #sub.contact .form_w ul.list > li ul li label{line-height: 30px;padding: 0 15px;font-size: 13px}
    #sub .sub_visual2{padding: 100px 20px}
    #sub.contact .form_w ul.list > li p{margin-top: 0;margin-bottom: 15px}
    #sub.contact .form_w ul.list > li p{font-size: 20px}
	#sub.carrer .con04 .linked{padding-top: 80px}
    #sub.contact .form_w ul.list > li .inp > input{padding: 10px 0;font-size: 14px}
	#sub.carrer .con04 .linked .txt_w p{font-size: 15px;line-height: 20px}
	#sub.carrer .con04 .linked .txt_w i img{width: 200px}
	#sub.carrer .con04 .linked .txt_w strong{font-size: 32px}
	#sub.carrer .con01 .carr_title strong, #sub.carrer .con04 .title strong{font-size: 24px;line-height: 1.5}
	#sub.why .con08{height: 220px;padding-bottom: 150px}
	#sub.why .con08 #btn_link{margin-top: 0;padding-top: 0}
	#sub.why .con07{padding-bottom: 30px}
	#sub.why .con07{padding-top: 60px}
	#sub.about .con10 .title_w .img_box{height: 350px}
	#sub.about .con10 .title_w .txt_box ul li{font-size: 70px;line-height: 80px}
	#sub.about .con06 > div .history_list > li .txt ul{margin-top: 20px}
	#sub.about .con06 > div .history_list > li .txt > ul > li{margin-bottom: 50px}
	#sub.about .con06 > div .history_list > li .txt ul ul > li > i{width: 70%;display: block}
	#sub.about .con06 > div .history_list > li .txt ul ul > li > i img{max-width: 100%}
	#sub.about .con06 > div .history_list > li .txt ul > li div.month{gap: 10px;padding: 10px 0 }
	#sub.about .con06 > div .history_list > li .month strong{width: 40px;height: 40px;font-size: 16px;border-radius: 5px}
	#sub.about .con06 > div .history_list > li .month span{font-size: 14px}
	#sub.about .con06 div.year_wrap .year_box .y{height: 135px}
	#sub.about .con06 div.year_wrap .year_box div.on i {width: 64px;height: 27px;font-size: 13px}
	#sub.about .con06 div.year_wrap .year_box strong{line-height: 1.5}
	#sub.about .con06 div.year_wrap .year_box strong{font-size: 90px}
	#sub.about .con06 > div .history_list > li .txt ul > li div{gap: 7px}
	#sub.about .con06 > div .history_list > li .txt ul > li{font-size: 19px}
	#sub.about .con06 > div .history_list > li .txt ul > li div p{font-size: 15px}
	#sub.about .flower_wrap{height: 510px}
	#sub.about .flower_con .flower svg{width: 744px;height: auto}
	#sub.about .flower_con .e_title p{font-size: 24px;line-height: 2}
	#sub.about .con03 .service_list{gap: 50px 0}
	#sub.about .con03 .service_list .num {position: absolute;top: -28px;left: -10px;}
	#sub.about .con03 .service_list .num strong{font-size: 40px}
	#sub.about .con03 .service_list .txt_w p{font-size: 14px;line-height: 1.6;padding-right: 20px}
	#sub.about .con03 .service_list .txt_w strong{font-size: 20px}
	#why .con09 ul li .tit strong{font-size: 20px}
	#why .con09 ul li .txt p{font-size: 14px;}
	#why .con09 ul li .tit span, #why .motion_year ul li span{font-size: 55px}
	#why .con09 ul li:nth-child(2n){top: 145px}
	#why .con09 ul li{margin-bottom: 105px}
	#why .con09 ul li{padding-left: 20px;}
	#sub.about .con08 .about_title{padding-top: 80px}
	#sub.about .con08 .service_list > ul > li{position: static;margin: 0 !important}
    #sub.about .con08 .service_list > ul > li .bubble{transform: none;position: static;transform: none;width: 250px;margin: 0 auto}
    #sub.about .con08 .service_list > ul > li .bubble img{width: 100% !important}
    #sub.about .con08{height: auto}
    #sub.about .con08 .service_list > ul{display: flex;flex-wrap: wrap}
    #sub.about .con08 .service_list > ul > li{width: 50%}
    #sub.about .con08 .service_list > ul > li .txt strong, #sub.about .con08 .service_list > ul > li.s_list01 .txt strong, #sub.about .con08 .service_list > ul > li.s_list08 .txt strong{font-size: 26px;}
    #sub.about .con08 .service_list > ul > li .txt{position: absolute;width: 100%;text-align: center;top: 50%;transform: translateY(-50%)}
    #sub.about .con08 .service_list > ul > li{position: relative;top: 0;left: 0}
	#sub .about_title span{font-size: 14px;height: 30px;padding: 0 15px;}
	#sub .about_title strong{font-size: 32px}
	#sub.carrer .con01 .carr_title .title_w{width: 100%;}
	#sub.carrer .con01 {display: block;}
	#sub.carrer .con01 .carr_title{position: static;height: auto;}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt{gap: 3px}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt div .on{display: none;}
	#sub.carrer .con01 .txt_list{width: 100%;padding-top: 60px;}
	#sub.why .con01 .glass svg{width: 1400px;height: auto;;}
	#sub .gl_wrap .gl_in .gl i{width: 30px;}
	#sub.why .con01 .resolution_w .resolution strong{font-size: 290px;}
	#sub.why .con04 .why_image .img_cont .img .deco_image{padding: 10px;}
	#sub.why .con04 .why_image .img_cont .img .deco_image div img{width: 140px;}
	#sub.why .con04 .why_image .img_cont .img.img01{max-height: 322px;}
	#sub.why .con02 .line_content .wrap .txt03{top: 433px;}
	#sub.why .con02 .line_content .wrap .txt01{top: 80px;;}
	#sub.why .con02 .line_content .wrap .txt02{top: 280px;}
	#sub.why .con03 .line_content .wrap .txt01{top: 129px;}
	#sub.why .con03 .line_content .wrap .txt02{top: 255px;}
	#sub.why .con03 .line_content .wrap .txt03{top: 485px;}
	#sub.why .con07 .txt_line ul{width: 10732px;}
	#sub.why .con03 .icon_content {transform: translate(-50%, -50%) scale(0.5);}
	#sub.why .con02{padding-top: 100px;margin-bottom: 100px;}
	#sub.why .con04 .why_image{height: 100vh;display: flex;align-items: center;;}
	#sub.why .con04 .why_image .img_cont .img.img02 {transform: translateY(0);margin-top: 160px;}
	#sub.why .con04{margin-top: 100px;}
	#sub.why .con06{padding-bottom: 100px;}
	#sub.why .con07 .txt_line div{margin-top: 0;}
	#sub.why .con07 .txt_line ul li{padding: 0 20px;font-size: 24px;}
	#sub.why .con06 .how_box .img_base img{width: 360px;;}
	#sub.why .con06 .how_box .img_deco img{width: 140px;}
	#sub.why .con06 .how_box01 .img_deco {bottom :40px; right: -80px;}
	#sub.why .con06 .how_box02 .img_deco {top: 244px;left: -50px;}
	#sub.why .con06 .how_box03 .img_deco {bottom: 44px;right: -50px;}
	#sub.why .con06 .how_box04 .img_deco {left: -10px;}
	#sub.why .con06 .how_box .img_deco img{width: 120px;;}
	#sub.why .con06 .how_box05 .img_deco{right: -8px;}
	sub.why .con06 .how_box02 .img_deco {top: -6px;left: -60px;}
	#sub.why .line_content .wrap .txt .txt_w strong{font-size: 20px;}
	#sub.why .line_content .wrap svg{width: 450px;}
	#sub.why .esg_title strong{font-size: 36px;}
	#sub.why .con04 .why_image .img_cont .img.img01 .b img{width: 400px;}
	#sub.why .con06 .how_box .img_deco{padding: 10px;}
	#sub.why .con04 .why_image .img_cont .img.img02 .b img{width: 400px;}
	#sub.why .con04 .why_image .img_cont .img{padding: 10px;}
	#sub.why .con04 .why_slogon .slo_wrap .slo strong{font-size: 26px;}
	#sub.why .con06 .how_box .txt p{font-size: 14px;}
	#sub.why .con06 .how_box .img_base{padding: 10px;}
	#sub.why .con04 .why_image .img_cont .txt > div p{font-size: 14px;line-height: 20px;}
	#sub.why .con04 .why_image .img_cont{gap: 120px}
	#sub.esg .con04 .esg_title strong{font-size: 24px;}
	#sub.esg .con03 .txt_content .txt{height: 250px;}
	#sub.esg .con03 .txt_content .txt .txt_in{gap: 15px}
	#sub.esg .con03 .txt_content .txt strong{font-size: 16px;}
	#sub.esg .con03 .txt_content .txt p{font-size: 14px;}
	#sub.esg .con03 .txt_content .txt{width: 580px;}
	#sub.esg .con03 .txt_content .title_box .esg_title strong{font-size: 26px;}
	#sub.esg .con02 .bg_txt {bottom: 279px;}
	#sub.esg .con02 .bg_txt strong{font-size: 80px;}
	#sub.esg .con02 .pin_text .txt p{font-size: 36px;}
	#sub.esg .con02 .pin_text{margin-top: -158px;}
	#sub.esg .con02 .pin_w .pin {margin-left: -93.5px;margin-top: -179px;}
	#sub.esg .con02 .pin_w .pin_ring02 img, #sub.esg .con02 .pin_w .pin_ring01 img{width: 310px;;}
	#sub.esg .con02 .pin_w .pin img{width: 230px;}
	#sub.esg .con02 .line_text .wrap .txt02{top: 320px;}
	#sub.esg .con02 .line_text .wrap .txt01{top: 170px;}
	#sub.esg .con02 .line_text .wrap .txt strong{font-size: 17px;}
	#sub.esg .con02 .line_text .wrap svg {width: 490px;}
	#sub.esg .con02{padding: 0 20px;padding-top: 100px;padding-bottom: 100px;;}
	#sub.esg .con01{padding-bottom: 100px;}
	#sub.esg .con01 .txt_w strong{font-size: 22px;line-height: 1.5;}
	#sub.esg .con01 .icon_list{margin: 70px 0;}
	#sub.esg .con01 .icon_list{gap: 0;}
	#sub.esg .con01 .icon_list span{width: 150px;height: 30px;font-size: 14px;}
	#sub.esg .con01 .icon_list .icon_w{height: 200px;}
	#sub.esg .con01 .icon_list .icon_w .icon{transform: scale(0.7);}
    #sub.contact .sub_visual2 .sv_title > div:nth-child(4){margin-top: 15px}
    #sub.contact .sub_visual2 .sv_title > div:nth-child(3){margin-top: 10px}
    #sub.contact .sub_visual2 .sv_title > div:nth-child(5){margin-top: 5px}
    #sub.contact .sub_visual2 ul li:after{height: 10px;margin: 0 15px}
    #sub.contact .sub_visual2 ul{display: flex}
    #sub.contact .sub_visual2 ul li{display: flex;align-items: center}
    #sub.contact .sub_visual2 ul li a{font-size: 26px}
	#sub.esg .esg_title span, #sub.why .esg_title span, #sub.carrer .con01 .carr_title span, #sub .sub_visual2 span, #sub.contact .member .title span{font-size: 14px;height: 30px;padding: 0 15px;width: auto;line-height: 30px}
    #sub.contact .sub_visual2 .sv_title > div > span{line-height: 30px}
	#sub.brand .con06 .bg_wrap .wrap > div img{display: block;}
	#sub.brand .brand_title .tag p{font-size: 15px;height: 30px;padding: 0 15px;}
	#sub.brand .brand_title .tag i{font-size: 140px;}
	#sub.brand .sub_visual .sv_title ul li{font-size: 14px;}
	#sub .sub_visual .sv_title strong{font-size: 70px;}
	#sub.brand .brand_title strong, #sub.esg .esg_title strong{font-size: 32px;}
    #sub.contact .member .title strong{font-size: 32px;}
	#sub.brand .con04{padding: 0 20px;padding-top: 100px;}
	#sub.brand .txt_cont p, #sub.brand .brand_text div p{font-size: 18px;}
	#sub.brand .txt_cont{gap: 5px}
	#sub.brand .brand_title strong{font-size: 24px;}
	#sub.brand .con06{overflow: hidden;}
	#sub.brand .con06 .brand_title{width: 100%;}
	#sub.brand .con06 .back_text p{font-size: 200px;}
	#sub.brand .con06 .s_txt01{left: 20px;}
	#sub.brand .con06 .s_txt02{right: 90px;}
	#sub.brand .con07 .color_wrap .col_in .color{height: 130px;width: 120px;}
	#sub.brand .con07 .color_wrap .col_in{padding: 10px;border-radius: 10px;}
	#sub.brand .con07 .color_wrap .col_in .color strong, #sub.brand .con07 .color_wrap .col_in .color ul li{font-size: 13px;}
	#sub.brand .con07 .color_wrap .col_in .color{padding: 15px;border-radius: 7px;}
	#sub.brand .con07 .color_wrap{gap: 10px}
	#sub.brand .con07 .color_wrap .year span{width: 50px;height: 23px;font-size: 14px;}
	#sub.brand .con08 .logo_list .logo_w img{width: 350px;}
	#sub.brand .con08 .logo_list > div.logo_now img{width: 550px;}
	#sub.brand .con08 .logo_list .logo_w{border-radius: 10px;}
	#sub.brand .con08 .logo_list .name span{height: 26px;padding: 0 20px;font-size: 14px;}
	#sub.brand .con09 .list ul li p{font-size: 14px;line-height: 1.5;}
	#sub.brand .con09 .list ul li strong{font-size: 18px;margin-bottom: 10px;}
	#sub.brand .con09 .list ul li{padding: 40px 20px;}
	#sub.brand .making .ending em{font-size: 90px;}
	#sub.brand .making .ending .tag {width: 68px;height: 30px;}
	#sub.brand .making .ending .tag span{font-size: 14px;}
	#sub.brand .making .ending .tag i{width: 4px;height: 4px;;}
	#sub.brand .making .ending .txt_in .txt p{font-size: 16px;line-height: 1.6;}
	#sub.why .con04 .why_slogon .slo_wrap{padding-bottom: 120px;padding-top: 80px;;}
	#sub.brand .con09 .list ul{gap:60px}
	#sub.brand .making .img_list > div.img_w01 img{width: 150px}
	#sub.brand .making .img_list > div.img_w02 img{width: 170px}
	#sub.brand .making .img_list > div.img_w03 img{width: 140px}
	#sub.brand .making .img_list > div.img_w04 img{width: 160px}
	#sub.brand .making .img_list > div.img_w05 img{width: 160px}
	#sub.brand .making .img_list > div.img_w06 img{width: 160px}
	#sub.brand .making .img_list > div.img_w07 video{width: 160px}
	#sub.brand .making .img_list > div.img_w08 video{width: 140px}
	#sub.brand .making .img_list{padding: 0 20px}
	#sub.brand .making .ending{z-index: 15}
	#sub.brand .making .img_list > div .txt span{font-size: 12px}
	#sub.brand .con06 .s_txt p{font-size: 16px}
	#sub.brand .con06 .clock > div{transform: scale(0.5)}
	#sub.brand .con06 .s_txt{gap: 5px}
	#sub.about .con08 .service_list > ul > li .txt p{font-size: 17px;}
	#sub.about .con06 > div .history_list > li .txt ul ul > li:before{top: 12px}
	#sub.about .con07{padding: 80px 0}
	#sub .sub_visual .esg_object02{left: auto;right: 20px;margin-left: 0;bottom: 20px;top: auto}
	#sub .sub_visual .esg_object01{left: 20px;top: 0;margin-left: 0;margin-top: 10px;}
	#sub .sub_visual .esg_object01 img{width: 150px}
	#sub .sub_visual .esg_object02 img{width: 250px}
	#sub.esg .sub_visual .sv_title strong{font-size: 70px}
	#sub .sub_visual .sv_title ul li{font-size: 13px}
	#sub .sub_visual .sv_title ul{transform: translateY(-11vh)}
	#btn_link a{width: 140px;height: 140px}
	#btn_link a span{font-size: 14.5px}
	#sub.esg .con04 #btn_link{margin-top: 40px;}
	#sub.about .con01 .member_list .txt ul li{font-size: 12px}
	#sub.about .con01 .member_list .txt p{font-size: 15px}
	#sub.about .con01 .member_list .txt ul{padding-top: 8px;margin-top: 8px}
	#sub.about .con01 .member_list .txt{height: auto;padding: 15px 10px;border-radius: 6px}
	#sub.about .con01 .member_list .name strong{font-size: 19px}
	#sub.about .con01 .member_list .name span{font-size: 14px;}
	#sub.about .con01 .member_list .wrap{padding: 10px;padding-top: 25px;border-radius: 8px}
	#sub.about .con01 .member_list .mem{width: 130px}
	#sub.about .con01 .member_list .wrap .ings{font-size: 14px;height: 26px}
	#sub.about .con01 .member_list .wrap .tag{padding: 3px}
	#sub.about .con01 .member_list .wrap .all{width: calc(100% - 6px);height: calc(100% - 6px);top: 3px;left: 3px;font-size: 13px}
	#sub.about .con01 .member_list .txt ul{gap: 5px}
	#sub .about_title{margin-bottom: 25px}
	#sub.carrer .con03{margin-top: 30px}
	#sub.carrer .con03 .aw_txt strong{font-size: 24px;}
	#sub.carrer .con03 .aw_keyword span{font-size: 13px;line-height: 30px;padding: 0 10px}
	#sub.carrer .con03 .aw_list ul li i img{width: 35px}
	#sub.carrer .con03 .aw_txt{margin-top: 15px;margin-bottom: 15px}
	#sub.carrer .con03 .txt_wrap .bg img{width: 140px}
	#sub.carrer .con03 .txt_wrap .bg01 img{width: 121px}
	#sub.carrer .con03 .txt_wrap .bg01{left: -90px}
	#sub.carrer .con03 .txt_wrap .bg02 {right: -110px;}
	#sub.carrer .con04 ul li .txt strong{font-size: 20px;}
	#sub.carrer .con04 ul li .txt p{font-size: 15px;line-height: 1.5}
	#sub.carrer .con04{padding: 80px 0}
	#sub.carrer .con04 .title{margin-bottom: 40px;}
	#sub.carrer .con03{padding-bottom:65px}
	#sub.gallery .gal_list ul li a .txt{padding-top: 15px}
	#sub.gallery .gal_list ul li a .txt strong{font-size: 15px}
	#sub.gallery .gal_list ul li a .txt p{font-size: 12px;padding-top: 10px}
	#sub.board .bo_info .sch input{height: 40px;width: 250px;font-size: 13px}
	#sub.board .bo_info .sch button{height: 40px;width: 40px}
	#sub.board .bo_info .sch button svg{width: 100%;height: auto}
	#sub.board .bo_info strong, #sub.board .bo_info strong b{font-size: 13px}
    #sub.contact .member .member_list .mem{width: 100px;height: 100px}
    #sub.contact .member .member_list .txt{padding-top: 15px}
    #sub.contact .member .member_list .txt strong{font-size: 14px;}
    #sub.contact .member .member_list .txt p{font-size: 12px}
    #sub.contact .member .member_list .txt > span{padding: 3px 7px;font-size: 13px}
    #sub.contact .member .member_list .swiper-slide{width: 160px}
    #sub.contact .form_w{max-width: 100%}
    #sub.contact .form_w ul.list > li div span{font-size: 13px}
    #sub.contact .form_w ul.list > li .inp > textarea{padding: 10px 0;font-size: 14px;}
    #sub.portfolio .port_wrap .por_title strong{font-size: 80px}
    #sub.portfolio .port_wrap .por_title p{font-size: 14px}
    #sub.portfolio .port_wrap .por_title .or span{font-size: 14px}
    #sub.portfolio .port_wrap .por_title .or{padding: 0 20px;height: 40px;gap: 10px}
    #sub.portfolio .breadcrumbs ul li{font-size: 13px;}
    #sub.portfolio .tot strong{font-size: 14px}
    #sub.portfolio .tot span{font-size: 14px;width: 38px;height: 25px;}
    #sub.portfolio .port_btn > div{transform: scale(0.9);opacity: 0;transition: 1s}
    #sub.portfolio.on .port_btn > div{transform: scale(1);opacity: 1;transition: 1s}
    #footer .ft > div.right .w div:nth-child(2){padding-left: 0px}
    #sub.brand .making .img_list{gap: 50px}

    #footer .ft > div.right .w div .text_copy p, #footer .ft > div.right .w div .text_copy ul li{font-size: 10px;line-height: 1.5;}
    #sub.why #service .service_tit .title strong{font-size: 65px;line-height: 1}
    #sub.why .con02 .icon_content{transform: scale(0.6) translate(-84%,-50%)}
    #sub.why #service .service_tit .title p{font-size: 15px}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(1){padding-right: 80px}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(2){padding-left: 80px}
}
    
@media (max-width: 720px) {
    #sub.why .con01 .resolution_w .resolution strong{font-size: 150px}
    #sub.portfolio .port_btn > div .btn_in .dash svg{width: 200px;height: auto}
	#sub.about .con08 .service_list > ul > li .bubble{width: 200px}
    #sub.about .con08 .service_list > ul > li .txt strong, #sub.about .con08 .service_list > ul > li.s_list01 .txt strong, #sub.about .con08 .service_list > ul > li.s_list08 .txt strong{font-size: 26px;}
    #sub.about .con08 .service_list > ul > li .txt p{font-size: 13px}
    #sub.about .con08 .service_list > ul > li{margin-bottom: 30px !Important}
    #sub.about .con08 .h_title{padding-top: 0;margin-bottom: 30px}
    #sub.about .con08{margin-top: 80px}
	#sub.brand .con09{padding-top: 100px;padding-bottom: 0}
	#sub.carrer .con03 .aw_txt strong{font-size: 20px}
	#sub.gallery .gal_list ul{gap: 20px}
	#sub.gallery .gal_list ul li{width: calc(50% - 10px)}
    #sub.portfolio .port_btn > div{transform: scale(0.9);opacity: 0;transition: 1s}
    #sub.portfolio.on .port_btn > div{transform: scale(1.0);opacity: 1;transition: 1s}
    #sub.portfolio .port_btn > div .btn_in a{width: 180px;height: 180px}
    #sub.portfolio .port_btn > div .btn_in a strong{font-size: 21px;}
    #sub.portfolio .loc{flex-direction: column;justify-content: flex-start;gap: 10px}
    #sub.portfolio .loc > *{width: 100%}
    #sub.portfolio .filter_w .w ul.button_list li button {font-size: 12px;height: 21px;padding: 0 7px;}
    #sub.portfolio .filter_w .w ul{gap: 5px}
    #sub.portfolio .filter_w .w{padding:5px 0 }
    #sub.portfolio .loc .search{justify-content: space-between}
    #sub.portfolio .loc .btn_w > *{gap: 5px}
    #sub.why #service .service_w .txt p{line-height: 18px;}
    #sub.portfolio .filter_w .w .col_list ul li button{width: 22px;height: 22px}
    #sub.portfolio .filter_w .w .col_list ul li button img{width: 100%}
}
@media (max-width: 660px) {
    #sub.unique .sub_visual2 .sv_title strong{font-size: 22px}
    #sub.why .con01 .device_w .device img{transform: scale(0.7)}
    #footer .ft > div.left{padding-right: 0}
    #sub.portfolio .port_btn{gap: 30px}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(1){transform: translateX(-80px)}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(2){transform: translateX(80px)}
    #sub.portfolio .port_btn > div .btn_in a .btn_w i svg{width: 16px;height: auto}
    #sub.portfolio .port_btn > div{width: 100%;display: flex}
    #sub.portfolio .port_wrap .port_btn.port_btn02{justify-content: flex-end !important;flex-direction: row}
    #sub.portfolio .port_btn{height: auto}
    #sub.portfolio .port_btn > div{width: 100%}
    #sub.portfolio .port_wrap{padding-top: 265px}
    #sub.portfolio .port_wrap .por_title p{margin-top: 20px;margin-bottom: 10px}
    #sub.portfolio .port_wrap .por_title strong{font-size: 60px}
    #sub.portfolio .breadcrumbs ul li{gap; 10px}
    #sub.portfolio .breadcrumbs ul li{font-size: 11px;}
    #sub.portfolio .port_wrap .por_title{width: 100%;transform: translateY(0);top: 0;left: 0;top: 70px}
    #sub.portfolio .port_btn > div.port_btn02 .port, #sub.portfolio .port_btn > div.port_btn01 .line{display: none}
    #sub.portfolio .port_btn > div.port_btn01 .port, #sub.portfolio .port_btn > div.port_btn02 .line{display: none}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(1){padding-right: 0;padding-bottom: 0}
    #sub.portfolio .port_wrap > .port_btn > div:nth-child(2){padding-left: 0;padding-bottom: 0}
    #sub.portfolio .port_btn{flex-direction: column}
	#sub.gallery .sub_visual{height: 300px}
	#sub.carrer .con03 .txt_wrap .bg02 {right: -80px;}
	#sub.carrer .con03 .txt_wrap .bg01 {left: -60px;}
	#sub.carrer .con03 .aw_keyword span{background: rgba(255,255,255,0.2);backdrop-filter: blur(15px)}
	#sub.carrer .con03 .aw_keyword{position: relative;z-index: 15}
	#sub.carrer .con03 .txt_wrap{z-index: 7}
	#sub.carrer .con03 .txt_wrap .bg img{width: 120px}
	#sub.carrer .con03 .txt_wrap .bg01 img{width: 100px;}
	#sub.carrer .con03 .aw_keyword span{font-size: 11px;line-height: 25px}
	#sub.carrer .con03 .aw_list ul li i img{width: 30px}
	#sub.carrer .con03 .aw_txt br{display: none}
	#sub.carrer .con03 .aw_txt i{display: block}
	#sub.carrer .con04 ul li .txt p i{display: block}
	#sub.carrer .con02{padding-top: 40px}
	#sub.about .con10 .title_w .txt_box{top: 60px}
	#sub.about .con10 .title_w .img_box{height: 240px}
	#sub.about .con10 .title_w .txt_box{margin-left: -140px}
	#sub.about .con10 .title_w .txt_box ul li{font-size: 45px;line-height: 55px}
	#sub.about .con06 > div .history_list > li .txt ul ul > li{word-break: keep-all}
	#sub.about .con06 > div .history_list > li .txt ul ul div{margin-top: 10px;}
	#sub.about .con06 > div .history_list > li .txt ul > li div{gap: 5px}
	#sub.about .con06 > div .history_list > li .txt ul ul > li:before{width: 3px;height: 3px;top: 10px}
	#sub.about .con06 > div .history_list > li .txt ul > li{font-size: 16px}
	#sub.about .con06 .pin-spacer{display: none}
	#sub.about .con06 div.year_wrap{display: none}
	#sub.about .con06 div.year_wrap .year_box{display: none}
	#sub.about .con06 > div:nth-child(2){width: 100%;padding: 0}
	#sub.about .con06 > div .history_list > li .txt ul > li div p{font-size: 14px}
	#sub.about .con06 > div .history_list > li .month strong{background: #FF5700}
	#sub.brand .con06 .bg_wrap {clip-path: circle(155px at 50% 50%);}
	#sub.brand .making .img_list > div.img_w01 img{width: 150px}
	#sub.brand .con09 .list ul{gap: 20px}
	#sub.carrer .con01 .txt_list{display: none;}
	#sub.carrer .con01 .swiper{display: block;}
	#sub.carrer .con01 .swiper .tit{text-align: center;margin-bottom: 20px;}
	#sub.carrer .con01 .swiper .tit span{display: block;color: #51341B;font-size: 30px;font-family: "amandine", sans-serif;margin-bottom: 6px;}
	#sub.carrer .con01 .swiper .tit strong{color: #51341B;font-size: 18px;}
	#sub.carrer .con01 .swiper .txt_w{    background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));padding: 30px;border-radius: 10px;border: 1px solid #fff;}
	#sub.carrer .con01 .swiper .txt_w .name i{display: block; width:  78px;height: 78px;border: 2px solid #FBECDE;border-radius: 50%;margin: 0 auto;background-color: #fff;}
	#sub.carrer .con01 .swiper .txt_w .name img{width: 100%;}
	#sub.carrer .con01 .swiper .txt_w .name div{display: flex;flex-direction: column;align-items: center;}
	#sub.carrer .con01 .swiper .txt_w .name strong{font-size: 15px;color: #51341B;display: block;margin-bottom: 4px;margin-top: 10px;}
	#sub.carrer .con01 .swiper .txt_w .name span{font-size: 15px;color: #51341B;}
	#sub.carrer .con01 .swiper .txt_w .txt{padding-top: 16px;margin-top: 16px;border-top: 1px solid #ECE5E0;;}
	#sub.carrer .con01 .swiper .txt_w .txt p{text-align: center;font-size: 15px;line-height: 22px;color: #51341B;}
	#sub.why .con06 .how_box .txt div p.on{display: none;}
	#sub.why .con06 .how_box .txt div p i{display: block;text-align: center;font-size: 16px;line-height: 24px;display: block;}
	#sub.why .con06 .how_box .txt div p{display: block;text-align: center;font-size: 16px;line-height: 24px;display: block;}
	#sub.why .con06 .how_box .img_base{padding: 10px;}
	#sub.why .con06 .how_box .img_base img{width: 288px;}
	#sub.why .con06 .how_box{padding: 0 !important;}
	#sub.why .con06 .swiper {display: block;}
	#sub.why .con06 > .how_box {display: none;}
	#sub.why .con06 .swiper-slide{width: auto;}
	#sub.why .con06 .how_box .img_deco{display: none;}
	#sub.why .con06{padding-top: 120px;;}
	#sub.why .con06 .esg_title{margin-bottom: 50px;;}
	#sub.why .con04 .why_image .img_cont .img.img02 .b img{width: 239px;}
	#sub.why .con04 .why_image .img_cont .img .deco_image{right: -120px;top: 110px;bottom: auto;}
	#sub.why .con04 .why_image .img_cont .img .deco_image{padding: 6px;border-radius: 10px;}
	#sub.why .con04 .why_image .img_cont .img .deco_image div{border-radius: 6px;}
	#sub.why .con04 .why_image .img_cont .img .deco_image div img{width: 100px;}
	#sub.why .con04 .why_image .img_cont .img .base {padding: 6px;border-radius: 10px;background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));border: 1px solid #fff ;}
	#sub.why .con04 .why_image .img_cont .img .b{border-radius: 6px;}
	#sub.why .con04 .why_image .img_cont .img.img01 .b img{width: 288px;}
	#sub.why .con04 .why_image .img_cont{gap: 140px;}
	#sub.why .con04 .why_image .img_cont .txt > div p{text-align: center;font-size: 16px;color: #51341B;font-weight: 600;;}
	#sub.why .con04 .why_image .img_cont .img{border: none;background: none;padding: 0;}
	#sub.why .con04 .why_slogon .slo_wrap{gap: 0}
	#sub.why .con04 .why_slogon .slo_wrap .slo strong{text-align: center;display: block;font-size: 20px;color: #51341B;line-height: 30px;}
	#sub.why .con04 .why_slogon .slo_wrap .slo strong i{display: block;}
	#sub.why .con04 .why_slogon{transform: none;}
	#sub.why .con04{height: auto;}
	#sub.why .con04 .why_slogon{width: 100%;height: auto;position: static;}
	#sub.why .con04 .why_image{left: 20px;position: static;}
	#sub.why .con04 .esg_title{position: static;width: 100%;text-align: center;align-items: center;}
	#sub.why .con04 .esg_title strong{text-align: center;}
	#sub.why .con04 .why_image{height: auto;}
	#sub.why .con04 .bg{display: none;}
	#sub.why .con03 .line_content .wrap .txt02{top: 175px;}
	#sub.why .con03 .line_content .wrap .txt01{top: 80px;;}
	#sub.why .con03 .line_content .wrap .txt03{top: 331px;;}
	#sub.why .line_content .wrap .over path{stroke-width: 2;}
	#sub.why .esg_title{gap: 10px}
	#sub.why .esg_title strong{font-size: 22px;}
	#sub .about_title strong{font-size: 22px}

	#sub.why .con03 .icon_content {transform: translate(-50%, -50%) scale(0.3);}
	#sub.why .con02 .line_content .wrap .txt03{top: 292px;}
	#sub.why .con02 .line_content .wrap .txt01{top: 50px;;}
	#sub.why .con02 .line_content .wrap .txt02{top: 190px;}
	#sub.why .line_content .wrap .txt .dot{width: 4px;height: 4px;}
	#sub.why .line_content .wrap svg{width: 305px;}
	#sub.why .line_content .wrap .txt .txt_w strong {display: block;text-align: center;font-size: 16px;line-height: 24px;}
	#sub.why .line_content .wrap .txt .txt_w strong i{display: block;}
	#sub.why .con01{padding-bottom: 185px;}
	#sub.why .con01 .glass{left: 50%;transform: translate(-80%,50%);}
	#sub.why .con01 .device_w .device{position: static;}
	#sub.why .con01 .device_w .device01 img{width: 120px;}
	#sub.why .con01 .device_w .device01 div{transform: translate(-30%,-50%);}
	#sub.why .con01 .device_w .device02 div{transform: translate(40%,-50%);}
	#sub.why .con01 .device_w .device03 div{transform: translate(-200%,-30%);}
	#sub.why .con01 .device_w .device04 div{transform: translate(130%,-80%);}
	#sub.why .con01 .device_w .device02 img{width: 132px;}
	#sub.why .con01 .device_w .device03 img{width: 60px;}
	#sub.why .con01 .device_w .device04 img{width: 40px;}
	#sub.why .con01{position: relative;}
	#sub.why .con01 .device_w{position: absolute;top: 0;left: 0;gap: 130px;display: flex;flex-direction: column;}
	#sub.why .con01 .device_w .device{height: 157px;}
	#sub.why .con01 .resolution_w .resolution strong{font-size: 120px;}
	#sub.why .con01 .resolution_w{display: flex;flex-direction: column;gap: 130px}
	#sub.why .con01 .resolution_w .resolution{transform: none;}
	#sub.why .con01 .device_w .device01{transform: none;}
	#sub.why .con01 .device_w .device{transform: none;}
	#sub.why .con01 .resolution_w .resolution{position: static;height: auto;}
	#sub.why .con01{height: auto;}
	#sub.esg .con03 .txt_content .title_box{padding-top: 140px;}
	#sub.esg .con03 .txt_content .title_box .esg_title strong{font-size: 22px;}
	#sub.esg .con03 .txt_content .title_box .esg_title strong br{display: none;}
	#sub.esg .con03 .txt_content .title_box .esg_title strong i{display: block;}
	#sub.esg .con04 .sha{top: 50%;}
	#sub.esg .con04 .sha01{margin-top: -230px;margin-left: -90px;;}
	#sub.esg .con04 .sha03{margin-top: -93px;margin-left: 140px;;}
	#sub.esg .con04 .sha04{margin-top: 102px;margin-left: 55px;;}
	#sub.esg .con04 .sha01 img{width: 60px;}
	#sub.esg .con04 .sha03 img{width: 60px;}
	#sub.esg .con04 .sha04 img{width: 60px;}
	#sub.esg .con04 .sha02 img{width: 60px;}
	#sub.esg .con04 .sha02{margin-top: -182px;margin-left: -192px;;}
	#sub.esg .con04 .esg_title strong{font-size: 18px;}
	#sub.esg .con04{padding: 80px 0;display: flex;align-items: center;justify-content: center;flex-direction: column}
	#sub.esg .con03 .swiper{display: block;margin-top: -110px;}
	#sub.esg .con03 .swiper .i_wr img{border-radius: 6px;overflow: hidden;}
	#sub.esg .con03 .swiper .i_wr{border: 1px solid #fff;border-radius: 10px;
	background: linear-gradient(-45deg,rgba(255,255,255,0),rgba(255,255,255,1));backdrop-filter: blur(20px);padding: 6px;}
	#sub.esg .con03 .swiper .swiper-slide{width: auto;width: 200px}
	#sub.esg .con03 .swiper .swiper-slide img{width: 100%}
	#sub.esg .con03 .txt_content .txt{padding: 0 20px;}
	#sub.esg .con03 .txt_content .txt p br{display: none;}
	#sub.esg .con03 .txt_content .txt p{word-break: keep-all;}
	#sub.esg .con03 .txt_content{position: static;height: auto;display: flex;flex-direction: column;gap: 120px;}
	#sub.esg .con03 .image_content{display: none;}
	#sub.esg .con03 .txt_content .txt01{transform: none;}
	#sub.esg .con03 .txt_content .txt{transform: none;}
	#sub.esg .con03 .txt_content .txt{position: static;width: calc(100% - 40px);margin: 0 auto;}
	#sub.esg .con01 .icon_list{margin-top: 50px;}
	#sub.esg .esg_title{gap: 10px}
	#sub.esg .con03 .txt_content .title_box{position: static;}
	#sub.esg .esg_title span, #sub .about_title span, #sub.carrer .con04 .title span{font-size: 12px;height: 30px;}
	#sub.carrer .con04 .title span{width: auto;padding: 0 15px} 
	#sub.esg .con01 .icon_list span{width: 120px;height: 40px;margin-top: -12px}
	#sub.esg .con01 .txt_w strong i{display: block;}
	#sub.esg .con01 .txt_w strong span{display: block;}
	#sub.esg .con01 .txt_w strong{font-size: 16px;}
	#sub.esg .con01 .icon_list{flex-direction: column;gap:0px}
	#sub.esg .con02 .bg_txt{bottom: 209px;}
	#sub.esg .con02 .pin_text .txt p{font-size: 25px;}
	#sub.esg .con02 .pin_text .txt{margin-top: 66px;}
	#sub.esg .con02 .pin_w {margin-top: 190px;}
	#sub.esg .con02 .pin_w .pin {margin-left: -63.5px;margin-top: -109px;}
	#sub.esg .con02 .pin_w .pin img{width: 150px;}
	#sub.esg .con02 .esg_title{align-items: center;text-align: center;;}
	#sub.esg .esg_title strong{font-size: 22px;}
	#sub.esg .con02 .esg_title strong{text-align: center;}
	#sub.esg .con02 .pin_text{margin-top: 0;}
	#sub.esg .con02 .line_text .wrap .txt{position: static;transform: none;margin-top: 80px;}
	#sub.esg .con02 .line_text .wrap .line_box{display: none;}
	#sub .sub_visual .sv_title ul{display: none;}
	#sub.brand .con01{padding-top: 75px;}
	#sub.brand .brand_title .tag i{font-size: 100px;}
	#sub.brand .brand_title strong{font-size: 22px;}
	#sub.brand .brand_title{padding-bottom: 20px;}
	#sub.brand .con03{padding-top: 100px;}
	#sub.brand .txt_cont p, #sub.brand .brand_text div p{font-size: 16px;}
	#sub.brand .txt_cont{justify-content: center;align-items: center;}
	#sub.brand .txt_cont i{display: block;}
	#sub.brand .txt_cont p{text-align: center;}
	#sub.brand .logo_cont{position: absolute;}
	#sub.brand .grad_bg{position: relative;}
	#sub.brand .con05{padding-top: 294px;padding-bottom: 120px;}
	#sub.brand .logo_cont{bottom: 180px;left: 50%;transform: translateX(-50%);}
	#sub.brand .logo_cont img{width: 185px;}
	#sub.brand .sun_bg .sun_bg_img{height: 100%}
	#sub.brand .sun_bg .sun_bg_img img{width: auto;height: 100%}
	#sub.brand .con04{padding-top: 0;}
	#sub.brand .con03{padding-bottom: 100px;}
	#sub.brand .con07 .color_wrap .col_in .color{width: 86px;height: 100px;;}
	#sub.brand .con07 .color_wrap .col_in{gap: 4px}
	#sub.brand .con07 .color_wrap{justify-content: center;align-items: center;gap: 20px}
	#sub.brand .con07 .color_wrap .year{position: static;margin-bottom: 5px;}
	#sub.brand .con07 .color_wrap .year{transform: none;justify-content: center;}
	#sub.brand .con07 .color_wrap .year:after{display: none;}
	#sub.brand .brand_text{gap: 4px;justify-content: center;align-items: center;}
	#sub.brand .con07{padding-top: 120px;;}
	#sub.brand .con08 .logo_list .logo_w img{width: 100%;}
	#sub.brand .con08 .logo_list > div.logo_now img{width: 100%;}
	#sub.brand .con08 .logo_list{gap: 40px}
	#sub.brand .con08 .logo_list .logo_w{border: none;border-radius: 0;}
	#sub.brand .con08 .logo_list .logo_w .img{
	border-radius: 10px;border: 1px solid #DCCEC2;overflow: hidden;}
	#sub.brand .con08 .logo_list .name{position: static;display: flex;justify-content: center;margin-bottom: 5px;}
	#sub.brand .con08 .logo_list .name:before, #sub.brand .con08 .logo_list .name:after{display: none;}
	#sub.brand .con09 .list ul{width: 100%;margin-top: 20px;}
	#sub.brand .con09 .list ul li strong{text-align: center;}
	#sub.brand .con09 .list ul li p{text-align: center;}
	#sub.brand .con09 .list ul li{border: none;position: relative;}
	#sub.brand .con09 .list ul li p{word-break: keep-all;}
	#sub.brand .con09 .list ul li:after{content: '';display: block;width: 20px;height: 1px;position: absolute;bottom: 0;left: 50%;margin-left: -10px;background-color: #CEB9A7;}
	#sub.brand .con09 .list ul li:nth-child(1) p br{display: none;}
	#sub.brand .con09 .list ul li:last-child::after{display: none;}
	#sub.carrer .con01 .txt_list .cont .txt_w .txt p{text-align: center;}
	#sub.esg .sub_visual .sv_title strong{letter-spacing: 20px}
	#sub.brand .con09 .list{padding: 0 20px;padding-bottom: 80px}
	#sub.carrer .con02 .wrap .img img{width: 50vw}
	#sub .sub_visual .sv_title strong{font-size: 55px}
	#sub.about .con08.on .service_list > ul > li:nth-child(1){transition-delay: 0.2s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(2){transition-delay: 0.4s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(3){transition-delay: 0.6s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(4){transition-delay: 0.8s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(5){transition-delay: 1.0s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(6){transition-delay: 1.2s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(7){transition-delay: 1.4s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(8){transition-delay: 1.6s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(9){transition-delay: 1.8s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(10){transition-delay: 2s !Important}
    #sub.about .con08.on .service_list > ul > li:nth-child(11){transition-delay: 2.0s !Important}
	#sub.about .con03 .service_list > div{width: 100%}
	#sub.about .con03 .service_list{gap: 30px 0}
	#sub.about .con03 .service_list > div:nth-child(2n){transform: translateY(0)}
	#sub.esg .con03 .txt_content{gap: 40px}
	#sub.esg .con03 .swiper{margin-top: -30px}
	#sub.esg .con03 .txt_content .txt{height: auto;padding: 45px 20px}
	#sub.esg .con03 .txt_content .txt span{font-size: 11px}
	#sub.esg .sub_visual .sv_title strong{font-size: 60px;letter-spacing: 0}
	#sub .sub_visual .esg_object02 img{width: 340px}
	#sub .sub_visual .esg_object02 {left: auto;right: -50px;margin-left: 0;bottom: -24px;top: auto;}
	#sub .sub_visual .esg_object01 {left: -50px;top: -30px;}
	#sub .sub_visual .esg_object01 img{width: 220px}
	#sub .sub_visual .sv_title ul{display: flex;gap: 8px;}
	#sub .sub_visual .sv_title ul li:after{width: 2px;height: 2px;margin-left: 8px}
	#btn_link a {width: 120px;height: 120px;}
	#sub.about .con01 .member_list .txt{min-height: 130px}
	#sub.about .con01 .member_list .line svg{width: 350px;height: auto}
	#sub.about .con08 .about_title{padding-top: 0}
	#sub.brand .making .img_list > div.img_w01 img{width: 175px}
    #sub.brand .making .img_list > div.img_w02 img{width: 225px}
    #sub.brand .making .img_list > div.img_w03 img{width: 381px}
    #sub.brand .making .img_list > div.img_w04 img{width: 242px}
    #sub.brand .making .img_list > div.img_w05 img{width: 242px}
    #sub.brand .making .img_list > div.img_w06 img{width: 369px}
    #sub.brand .making .img_list > div.img_w07 video{width: 401px}
    #sub.brand .making .img_list > div.img_w08 img{width: 242px}
    #sub.brand .making .img_list > div.img_w08 video{width: 242px}
	#sub.brand .making .img_list > div.img_w04{padding-right: 30px;}
    #sub.brand .making .img_list > div.img_w05{padding-left: 30px;}
    #sub.brand .making .img_list > div.img_w07{margin-top: 100px;}
    #sub.brand .making .img_list > div.img_w03{margin-top: 90px;}
	#sub.carrer .con04 ul li .txt{margin-top: 20px}
	#sub.carrer .con04 ul li{width: 50%}
    #sub.brand .making .img_list > div.img_w08{margin-top: -84px}
	#sub.carrer .con04 ul li img, #sub.carrer .con04 ul li .icon {width: 60px;}
	#sub.carrer .con04 ul li .txt p{font-size: 13px}
	#sub.carrer .con04 ul li .txt strong{font-size: 16px;margin-bottom: 10px}
	#sub.carrer .con04 ul{gap: 35px 0}
	#sub.gallery .gal_list ul li a .txt strong{font-size: 14px;}
	#sub.carrer .con04 .linked .txt_w strong{font-size: 26px}
	#sub.gallery .gal_list{padding-top: 10px}
	#sub .paging ul li a{width: 35px;height: 35px;border-radius: 5px;font-size: 13px}
	#sub .paging ul li a svg{height: 8px;width: auto}
	#sub .paging ul{gap: 0}
	#sub .paging ul li.on a{border-radius: 4px}
	#sub.gallery .paging{margin-top: 50px;padding-bottom: 60px}
    #sub .sub_visual2 .sv_title strong{font-size: 26px}
    #sub .sub_visual2 p{font-size: 14px}
    #sub.contact .sub_visual2 ul li a{font-size: 22px}
    #sub.contact .contact_bg{display: none}
    #sub.contact .form_w ul.list{width: 100%;max-width: 100%}
    #sub.contact .form_w ul.list > li .file_name button i{display: none}
    #sub.contact .form_w ul.list > li .file_name button{width: 65px}
    #sub.contact .member{margin-top: 60px;padding-bottom: 100px}
    #sub.contact .member .title strong{font-size: 22px}
    #sub.portfolio .gallery_wrap.simple > ul > li{width: 100%}
    #sub.portfolio .breadcrumbs + strong{font-size: 65px}
    #sub.portfolio .port_visual{margin-bottom: 40px}
    #sub.portfolio .loc .search .sch_w input{width: 200px}
    #sub.portfolio .loc{margin-bottom: 20px}
    #footer .ft > div.right .w div{width: 100%}
    #footer .ft > div.right .w{flex-wrap: wrap}
    #footer .ft > div.right .w div ul{gap: 20px}
    #footer .ft > div.right .w div:nth-child(2){padding-top: 20px}
    #sub.portfolio .list_wrap ul li a > div *.port_img {display: none}
    #footer .ft > div.right .w div:nth-child(2) .line{left: -20px;}
    #sub.portfolio .list_wrap ul li a p{margin-top: 3px}
    #sub.portfolio .list_wrap ul li a > div{height: 60px}
    #sub.carrer .con01 .swiper .txt_w{height: 100%;background: linear-gradient(-45deg,rgba(255,231,220,0),rgba(255,231,220,0.7))}
	#sub.carrer .con02 .txt{margin-bottom: 0;margin-top: 10px}
	#sub.carrer .con02 .txt strong{font-size: 12px}

}
@media (max-width: 500px) {
    #sub.why .con02 .icon_content{transform: scale(0.45) translate(-120%,-90%)}

    #sub.portfolio .port_btn > div .btn_in a .btn_w i{right: 10px;margin-top: -3px}
    #sub.portfolio .port_btn > div .btn_in a .btn_w i svg{width: 9px;display: block}
    #sub.portfolio .port_btn > div .btn_in .dash svg{width: 150px;height: 150px}
    #sub.portfolio .port_btn > div .btn_in a{width: 140px;height: 140px}
    #sub.contact .form_w ul.list{gap: 30px}
    #sub .per{margin-top: 30px;margin-bottom: 15px}
    #sub.contact .form_w ul.list > li ul li label{font-size: 12px;line-height: 25px}
    #sub.contact .form_w ul.list > li ul{gap: 5px}
    #sub.contact .form_w ul.list > li p{font-size: 16px}
	#sub.about .con03 .service_list .txt_w p{padding-right: 0}
	#sub.about .flower_con .e_title p{font-size: 19px}
	#sub.carrer .con01 .swiper .txt_w .txt p{word-break: keep-all;}
	#sub.carrer .con01 .swiper .txt_w .txt p br{display: none;}
	#sub.brand .txt_cont p, #sub.brand .brand_text div p{font-size: 13px}
	#sub.brand .brand_text div p{font-size: 16px}
	#sub.brand .con06 .s_txt p{font-size: 15px}
	#sub.brand .con09 .list ul li strong{font-size: 16px}
	#sub.brand .con09 .list ul li{padding: 30px 0}
	#sub.about .con08 .service_list > ul > li .bubble{width: 150px}
    #sub.about .con08 .service_list > ul > li .txt strong, #sub.about .con08 .service_list > ul > li.s_list01 .txt strong, #sub.about .con08 .service_list > ul > li.s_list08 .txt strong{font-size: 20px;}
    #sub.about .con08 .service_list > ul > li .txt p{font-size: 12px;margin-top: 6px;}
	#why .con09 ul li .txt p{font-size: 12px;}
    #why .con05 .wrap > div.img_w .img01 div{width: 100%;height: 260px;}
    #why .con09 ul li .txt p br{display: none}
	#sub.esg .con03 .txt_content .txt strong{font-size: 15px}
	#sub.esg .con03 .txt_content .txt p{font-size: 13px}
	#sub.esg .con04 .esg_title strong{font-size: 17px}
    #sub .sub_visual2 p{font-size: 13px;line-height: 1.5;word-break: keep-all}
    #sub.contact .sub_visual2 .sv_title > div:nth-child(5){margin-top: 0}
    #sub.contact .sub_visual2 ul li a{font-size: 19px}
    #sub.contact .sub_visual2 .sv_title > div:nth-child(6){margin-top: 15px}
    #sub .sub_visual2 .sv_title strong{font-size: 22px}
        #sub.contact .form_w ul.list > li div span{font-size: 11px}
    #sub.contact .form_w ul.list > li .inp > textarea{height: 150px}
    #sub.portfolio .port_btn{gap: 5px}

}






@media (max-width: 1760px){
    #port_view .con11 .de01{position: relative;left: -0}
    #port_view .con03 > div > div.color ul li{width: 33.33%;margin-right: 0;padding-right: 15px;}
    #port_view .con03 > div > div.color ul li img{max-width: 100%}
    #port_view .con03 > div > div.color{padding-left: 20px;}
    #port_view .con03 > div > div.font{padding-left: 20px;}
    #port_view .con03 > div > div.font ul li img{max-width: 90%}
    #port_view .device{ width: 60%; }
    #port_view .video_w{ height: auto; max-height: 600px; }
    #port_view .device{ height: auto; }
    #port_view .visual .txt_wrap{ margin-left: 12%; }
    #port_view .visual .txt_wrap strong{ font-size: 40px; }
    #port_view .visual .txt_wrap p{ font-size: 18px; }
}
@media (max-width: 1416px){
    #port_view .inner{ width: 100%; padding: 0 20px; }
    #port_view .device{ width: 60%; }
    #port_view .video_w{ height: auto; max-height: 400px; }
    #port_view .device{ height: auto; }
    #port_view .visual .txt_wrap{ padding-right: 40px; right: 0;margin-right: -700px;left: auto;margin-left: auto}
    #port_view .visual .txt_wrap strong{ font-size: 40px; }
    #port_view .con02 .txt_wrap{ padding-left: 40px; }
    #port_view .con03.on .c_list li{ width: 19.3333%; margin-left: 3%; margin-right: 0; }
    #port_view .con03.on .c_list li:first-child{ width: 33%; margin-left: 0; }
    #port_view .con05.on .img_wrap img{ width: 100%; }
    #port_view .con08 .img_wrap ul li img{ width: 100%; }
    #port_view .con09 .img_w img{max-width: 100%}
    #port_view .con11 .txt_w{width: 50%}
    #port_view .con11 .img img{width: 1500px;}
    #port_view .con11 .txt_w{padding-top: 175px;}
    #port_view .con11 ul{width: 100%}
    #port_view .con11 ul li{width: 33.33%;margin-right: 0;padding: 0 10px;}
    #port_view .con11 ul li img{max-width: 100%}
    #port_view .con11 .txt_w{padding-top: 0}
    #port_view .visual .txt_wrap{}
    #port_view .visual .txt_wrap{margin-right: 0;right: 0}
    #port_view .con13 .img_wrap{padding-left: 0;max-width: 100%}
    #port_view .con13 .img_wrap img{;max-width: 100%}
}

@media (max-width: 1300px){
    #port_view .con11 .de01{position: static}
    #port_view .con11 .txt_w{position: static}
    #port_view .con11 .img img{width: 100%}
    #port_view .con11 .bg{width: 100%;height: 40%;top: auto;bottom: 0;border-radius: 40px 40px 0 0}
    #port_view .con11 .txt_w{padding-left: 20px;width: 100%}
    #port_view .con06 .img_wrap div{width: 900px;}

}
@media (max-width: 980px){
    #sub.esg .con03 .image_content .image10{padding-left: 0;margin-left: -10}
    #sub.esg .con03 .image_content .image11{padding-right: 0;margin-right: -20%}
    #sub.esg .con03 .image_content .image15{padding-right: 0;margin-top: 150px;margin-right: -15%}
    #sub.esg .con03 .image_content .image{padding-right: 0}
    #sub.esg .con03 .image_content .image{padding-left: 0;margin-left: -5%}
    #sub.esg .con03 .image_content .image23{padding-left: 0;margin-left: -20%}
    #sub.esg .con03 .image_content .image02{padding-right: 0}
    #sub.esg .con03 .image_content .image03{padding-right: 0}
    #sub.esg .con03 .image_content .image04{margin-left: -200px}
    #sub.esg .con03 .image_content .image05{padding-right: 0}
    #sub.esg .con03 .image_content .image24{place-content: 60%}
    #sub.esg .con03 .image_content .image19{padding-left: 0;margin-left: -10%}
    #sub.esg .con03 .image_content{padding: 30px}
    #sub.esg .con03 .image_content{padding-top: 100vh}
    #sub.esg .con01 .infog_box .esg_infograpic i{width: 370px;}
    #sub.esg .con01 .infog_box .esg_infograpic strong{font-size: 50px;}
  #sub .sub_visual .bg_video video{width: auto;height: 100vh;}
    #sub.why #service .ser03 .service_w{flex-direction: column;justify-content: flex-start;align-items: flex-start;gap:70px}
    #sub.why #service .ser03 .service_w .title .txt{position: static;}
    #port_view .contents{ padding-top: 90px; }
  #port_view .pj_info .cate{ font-size: 14px; }
  #port_view .pj_info .info{ margin-top: 15px; }
  #port_view .pj_info .info .left{ width: 100%; }
  #port_view .pj_info .info .left strong{font-size: 24px; }
  #port_view .pj_info .info .left .tag > li{ font-size: 14px; }
  #port_view .pj_info .info .right dl dt{ font-size: 14px; }
  #port_view .pj_info .info .right dl dd{ margin-top: 15px; }
  #port_view .pj_info .info .right{ margin-top: 20px; }
  #port_view .pj_info .inner{ padding-bottom: 30px; }
  #port_view .con_w .pj_tit strong{ font-size: 24px; }
  #port_view .con_w .pj_tit{ margin-bottom: 20px; }
  #port_view .con_w .p01{ font-size: 16px; line-height: 28px; }
  #port_view .con01 .img_wrap{ margin-top: 40px;  }
  #port_view .con02 .img_wrap{ width: 100%; float: none; padding-left: 0; }
  #port_view .con02 .img_wrap img{ margin: 0 auto; max-width: 220px; border-radius: 12px; }
  #port_view .con02.on:before{ width: 100%; }
  #port_view .con02:before{ height: 360px; }
  #port_view .con02{ margin-top: 80px; padding-top: 100px; }
  #port_view .con02 .txt_wrap{ padding-left: 0; width: 100%; margin-top: 30px; }
  #port_view .con_w, #port_view .con_w.top_photo{margin-top: 80px; }
    #port_view .con03 > div > div{width: 100%}
    #port_view .con03 > div > div.font{padding-top: 40px;place-content: 0}
    #port_view .con06 .img_wrap div{width: 600px;}
    #port_view .con11{padding-top: 20px;}
    #port_view .con08 .img_wrap > ul > li .device_w{padding: 0 60px;}
    #port_view .con13 .img_wrap{margin-top: 15px;}
}

@media (max-width: 850px){
    #sub.brand .sun_bg .sun_bg_img{height: 100%}
    #sub.brand .sun_bg .sun_bg_img img{height: 100%}
    #port_view .con02 .bg div img{height: 360px;}
    #port_view .con11 ul li strong{font-size: 12px;margin-bottom: 5px;}
    #port_view .con11 ul li{padding: 0 5px}
    #port_view .con06 .img_wrap .img_de{border-radius: 30px;}
    #port_view .con06 .img_wrap .img_de:after{border: 3px solid #fff}
    #port_view .con08 .img_wrap > ul > li .device_w{padding: 0 50px;}
    #port_view .con08 .img_wrap > ul > li .device_w ul li{margin-bottom: 15px;}
    #port_view .con08 .img_wrap > ul > li .device_w{padding: 0 60px}
    #port_view .con11 .img i{width: 90px;height: 90px;}
    #port_view .con01 .img_wrap ul{flex-wrap: wrap}
    #port_view .con01 .img_wrap ul li{width: 32%;margin-right: 2%;padding: 7px 0}
    #port_view .con01 .img_wrap ul li:nth-child(3n){margin-right: 0}

    #port_view .device .video_w{border: 6px solid #fff}
    #port_view .con03 > div > div.color ul li img, #port_view .con11 ul li img{border-radius: 10px;}
    #port_view .con03 > div > div.font{padding-left: 0}
    #port_view .con06 .img_wrap{margin-top: 30px;}
    #port_view .con11 ul{margin-top: 20px;}
    #port_view .con11 .img_w{overflow-x: scroll}
    #port_view .con11 ul{width: 600px;}
    #port_view .con11 .img_w{padding-bottom: 20px;}
    #port_view .con11 ul li{transform: translateY(20px)}
    #port_view .video_w{border-radius: 11px;}
    #port_view .con06 .img_wrap .img_de{border-radius: 15px;}
    #port_view .con11 .img_w::-webkit-scrollbar {
        width: 3px; height: 3px;
    }
    #port_view .con11 .img_w::-webkit-scrollbar-thumb {
        background-color: #ddd;
    }
    #port_view .con11 .img_w::-webkit-scrollbar-track {
        background-color: #f2f2f2;
    }
    #port_view .con11 ul li{padding: 0;padding-right: 15px;}
    #port_view .con11 ul li img {filter: drop-shadow(10px 10px 20px rgba(113,113,113,0.16));}
    
}


@media (max-width: 840px){
    #port_view .pj_info .info .left strong i{margin-left: 3px;}
    #port_view .pj_info .info .left strong i img{width: 24px;}
    #port_view .pj_info .info .right dl{ margin-right: 50px; }
    #port_view .pj_info .info .right dl dd{ margin-top: 5px; font-size: 12px; }
    #port_view .pj_info .info .left strong{ font-size: 22px; margin-bottom: 10px; }
    #port_view .con_w .p01{ font-size: 13px; line-height: 20px ;}
    #port_view .con_w .pj_tit strong{ font-size: 18px; }
    #port_view .con_w, #port_view .con_w.top_photo{ margin-top: 50px; }

      #port_view .device{ left: 50%; top: 55%; transform: translate(-50%,0); }
      #port_view .device{ width: 90%; }
      #port_view .visual .txt_wrap p{ margin-top: 15px; }
      #port_view .visual:after{ width: 400px; height: 400px;left: 50%;top: 60%; transform: translate(-50%,-50%);     animation: vi3 3s ease-out infinite; }
      #port_view .visual:before{ width: 300px; height: 300px;left: 50%; top: 60%; transform: translate(-50%,-50%);  animation: vi4 3s ease-out infinite; animation-delay: .2s;  }
      #port_view .visual .txt_wrap{ top: 30%; }
    #port_view .con11 .bg{height: 25%}
    #port_view .con06 .img_wrap div{max-width: 90%}
    #port_view .con06 .img_wrap{margin-top: 20px;}
    #port_view .con06{background-size: auto 90%}
    #port_view .visual .txt_wrap{width: 100%;padding-left: 20px;padding-right: 0}
    #port_view .visual .txt_wrap p{font-size: 16px;margin-top: 0;margin-bottom: 10px;}
    #port_view .visual .txt_wrap strong{font-size: 30px;margin-bottom: 20px;}
    #port_view .visual .txt_wrap span{font-size: 12px}
    #port_view .visual{height: 600px;}
    #port_view .pj_info.pc{display: none}
    #port_view .pj_info.mo{display: block}
    #port_view .pj_info.mo{padding-top: 120px;}
    #port_view .pj_info .info .right{text-align: left;float: none}
    #port_view .pj_info .info .right dl{text-align: left}
    #port_view .pj_info .info .left ul{margin-bottom: 40px;}
    #port_view .visual .txt_wrap{display: none}
    #port_view .device{position: static;transform: none}
    #port_view .video_w{height: 100%;overflow: hidden}
    #port_view .video_w{border-radius: 7px}
    #port_view .visual{overflow: visible;height: auto}
    #port_view .pj_info{margin-bottom: 40px}
    #port_view .con_w.con09{margin-top: 0}
    #port_view .contents{padding-top: 60px;}
    #port_view .con_w .pj_tit{margin-bottom: 10px;}
    #port_view .con_w, #port_view .con_w.top_photo{margin-top: 60px;}
    #port_view .con11{padding-top: 0}
    #port_view .con01 .img_wrap{margin-top: 20px;}
    #port_view .con11 .bg{height: 227px;border-radius: 12px 12px 0 0;max-height: 60%;display: none}
    #port_view .con11 .bg2{height: 71%;position: absolute;width: 100%; border-radius: 12px 12px 0 0;display: block;bottom: 0;left: 0}
    #port_view .con11 .de01{position: relative}
    #port_view .con11 .txt_w{padding-right: 20px}
    #port_view .con11 .img i{width: 60px;height: 60px;left: 28%;top: -14px;margin-left: 30px}
    #port_view .con03 > div > div.color ul li img, #port_view .con11 ul li img{border-radius: 8px;}
    #port_view .con03 > div > div.font ul li{width: 50%;margin-right: 0}
    #port_view .con11 ul{width: 820px;}
    #port_view .con11 ul li strong{margin-bottom: 10px}
    #port_view .con06 .img_wrap{padding: 0 20px;}
    #port_view .con06 .img_wrap div{width: 100%;max-width: 100%}
    #port_view .con_w .p01{clear: left}
  #port_view .con08 .img_wrap ul li{ width: 100%; float: none; }
    #port_view .con08 .img_wrap ul li{position: relative}
    #port_view .con08 .img_wrap > ul > li .device_w{position: static;transform: none}
    #port_view .con08 .img_wrap > ul > li .bg{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 100%}
    #port_view .con08 .img_wrap > ul > li{padding: 48px 44px}
    #port_view .con08 .img_wrap > ul > li .device_w{padding: 0}
    #port_view .con08 .img_wrap ul li{overflow: hidden}
    #port_view .con08 .img_wrap > ul > li .bg{min-height: 100%}
    #port_view .con08 .img_wrap > ul > li .bg img{min-height: 100%;height: 100%;width: auto}
    #port_view .con06 .img_wrap .img_la{border-radius: 0 0 8px 8px}
    #port_view .con07 .inner{padding-top: 0}
    #port_view .con08 .img_wrap > ul > li .device_w ul li{margin-bottom: 22px;}
    #port_view .con08 .img_wrap > ul > li .device_w ul li .video{border-radius: 12px;}
    #port_view .con_w .pj_tit .link a .dot2{width: 40px;height: 40px;}
    #port_view .con_w .pj_tit .link a .dot2:after{width: 51px;height: 51px;margin-top: -25.5px;left: -21px;}
    #port_view .con_w .pj_tit .link a span{font-size: 14px;}
    #port_view .con_w .pj_tit .link a .dot div{width: 2px;height: 2px;margin-right: 3px;}
    #port_view .con_w .pj_tit .link a .dot{right: -22px;margin-top: -1px;}
    #port_view .con_w .pj_tit .link a span{margin-right: 6px;}
    #port_view .con11 ul li .title .link a span{font-size: 12px;}
    #port_view .con11 ul li .title .link a .dot2, #port_view .con11 ul li .title .link a .dot2:after{width: 28px;height: 28px;}
    #port_view .con11 ul li .title .link a .dot2:after{margin-top: -14px;left: -10px;}
    #port_view .con11 ul li .title strong{font-size: 14px;line-height: 28px;}
    #port_view .con11 ul li .title .link a .dot div{width: 3px;height: 3px}
    #port_view .con11 ul li .title .link a span{margin-right: 19px;}
	#sub.esg .con03 .swiper{width: 100vw}

}


@media (max-width: 540px){
	    #sub.why .con02 .icon_content {
        transform: scale(0.4) translate(-129%, -140%);
    }
	#sub.why .line_content .wrap .txt .txt_w strong{font-size: 13px;line-height: 1.5}
  #port_view .con03.on .c_list li{ width: 31.33333333%; margin-right: 3%; margin-left: 0; }
  #port_view .con03.on .c_list li:last-child{ margin-right: 0; }
  #port_view .con03.on .c_list li:first-child{ width: 100%; margin-bottom: 12px; }
  #port_view .con04 .ty_list li{ width: 100%; }
  #port_view .pj_info .inner{ padding-bottom: 20px; }
  #port_view .pj_info{ margin-bottom: 40px; }
  #port_view .con07 .inner{ padding-top: 17px; }
  #port_view .con02 .img_wrap img{ width: 170px; }
  #port_view .con02:before{ height: 270px; }
  #port_view .con01 .img_wrap img{ width: 100% !important; margin-right: 0 !important;  }
  #port_view .visual .txt_wrap strong{ font-size: 28px; }
  #port_view .visual .txt_wrap{ padding-right: 0; }
  #port_view .visual .txt_wrap{ top: 36%; }
  #port_view .con_w .p01 br{ display: none; }
  #port_view .con08 .p01{ margin-top: 15px; }
  #port_view .contents{ padding-bottom: 80px; }
  #port_view .list_b a{ width: 50px; height: 50px; }
  #port_view .list_b a .wrap{ width: 20px; height: 20px; }
  #port_view .list_b a .wrap span{ width: 9px; height: 9px; }
  #port_view .list_b{ margin-top: 20px; }
    #port_view .con11 .bg{border-radius: 20px 20px 0 0}

    #port_view .con11 .de01{margin-top: 34px;}
    #port_view .con_w.top_photo{margin-top: 40px}
}



@media (max-width: 290px){

  #port_view .pj_info .info .right dl{ width: 31.3333333%; margin-right: 3%;}
  #port_view .pj_info .info .right dl:last-child{ margin-right: 0; }
  #port_view .pj_info .info .right{ width: 100%; }
  #port_view .contents{ padding-top: 50px; }
  #port_view .con02 .img_wrap img{ width: 120px; }
  #port_view .con07 .inner{ padding-right: 20px; padding-top: 0;}
  #search_bg .p_tit{ font-size: 50px; margin-top: -20px; }
  #search_bg{ height: 300px; }
}





/*=============================*/

@media (max-width: 1260px) {
    #sub.why #service .service_tit .title strong{font-size: 80px;}
    #sub.why #service .service_w .title strong{font-size: 60px}
    #sub.why #service .service_w .title .txt p{font-size: 16px;}
    #sub.why #service .service_w .project_w .project_image{width: 360px;height: 360px;}
    #sub.why #service .ser03 .service_w .project_w .project_image{width: 400px;height: 400px}
    #sub.why #service .ser05 .service_w .project_w .project_image{width: 450px;height: 450px}
    #sub.why #service .ser04 .service_w .w01 .project_w .project_image{width: 400px;height: 400px}
    #sub.why #service .ser04 .service_w .w02 .project_w .project_image{width: 300px;height: 300px}
    #sub.why #service .ser01 .service_w .project_w.project_w01 .project_image div img{width: 430px}
    #sub.why #service .ser01 .service_w .project_w.project_w04 .project_image div img{width: 430px}
    #sub.why #service .ser01 .service_w .project_w.project_w02 .project_image div img{width: 470px}
    #sub.why #service .ser05 .service_w .project_w .project_image div img{width: 500px}
    #sub.why #service .ser04 .service_w .w01 .project_w .project_image div img{width: 420px}
    #sub.why #service .ser04 .service_w .w02 .project_w .project_image div img{width: 320px}
    #sub.why #service .ser03 .service_w .project_w .project_image div img{width: 420px}
    #sub.why #service .service_w .project_w .txt strong{font-size: 17px}
    #sub.why #service .service_w .project_w .txt p{font-size: 15px;}
}
@media (max-width: 980px) {
    #sub.why #service .ser06 .service_w .project_w02 .project_image {width: 270px;height: 270px;}
    #sub.why #service .ser06 .service_w .project_w01 .project_image {width: 270px;height: 270px;}
    #sub.why #service .ser03 .service_w{padding-left: 25px}
    #sub.why #service .ser03 .service_w > .txt{position: absolute;bottom: -80px}
    #sub.why #service .service_w .title .txt p, #sub.why #service .service_w .txt p{font-size: 14px}
    #sub.why #service .ser02{margin-top: 0}
    #sub.why #service .service_tit .title strong{font-size: 50px;}
    #sub.why #service .service_tit .title p{font-size: 14px;}
    #sub.why #service .bg01 img{width: 350px}
    #sub.why #service .bg02 img{width: 450px}
    #sub.why #service .service_w .title strong{font-size: 45px;}
    #sub.why #service .service_w .title .txt p{font-size: 14px}
    #sub.why #service .service_w .title .txt{gap: 3px;}
    #sub.why #service .ser01 .project_w01{padding-left: 220px;}
    #sub.why #service .service_w .project_w .project_image {width: 320px;height: 320px;}
    #sub.why #service .service_w .project_w .txt strong{font-size: 15px;}
    #sub.why #service .service_w .project_w .txt p{font-size: 12px;}
    #sub.why #service .ser01 .service_w .b_bg01 img{width: 160px}
    #sub.why #service .ser01{padding-right: 190px;}
    #sub.why #service .ser02 .service_w .project_w .project_image {width: 326px;height: 326px;}
    #sub.why #service .ser03 .service_w .title strong{padding-left: 0}
    #sub.why #service .ser03 .service_w .title .txt{margin-top: 15px;}
    #sub.why #service .ser03 .service_w .project_w .project_image{width: 360px;height: 360px;}
    #sub.why #service .ser03 .service_w .b_bg01 {left: 64px;top: 50%;margin-top: -200px;}
    #sub.why #service .ser03 .service_w .b_bg01 img{width: 200px;}
    #sub.why #service .ser03 .service_w .project_w .project_image {width: 330px;height: 330px;}
    #sub.why #service .ser03 .service_w .project_w .project_image div img {width: 390px;}
    #sub.why #service .ser03 {padding-right: 257px;}
    #sub.why #service .ser04 .service_w .w01 .project_w .project_image {width: 360px;height: 360px;}
    #sub.why #service .ser04 .service_w .w02 .project_w .project_image {width: 260px;height: 260px;}
    #sub.why #service .ser04 .service_w .b_bg01 {left: 386px;bottom: 214px;}
    #sub.why #service .ser04 .service_w .b_bg01 img{width: 120px;}
    #sub.why #service .ser04 .service_w{gap: 50px;}
    #sub.why #service .ser05 strong:nth-child(2){margin-top: 0}
    #sub.why #service .ser05 .service_w .project_w .project_image {width: 350px;height: 350px;}
    #sub.why #service .ser05 .service_w .project_w .project_image div img {width: 430px;}
    #sub.why #service .service_w .project_w .txt span{font-size: 13px;}
    #sub.why #service .ser06 .service_w .project_w01 .project_image {width: 320px;height: 320px;}
    #sub.why #service .ser06 .service_w .project_w01 .project_image img{width: 360px;}
    #sub.why #service .ser06 .service_w .project_w02{padding-top: 72px}
    #sub.why #service .ser06 strong:nth-child(2){padding-left: 50px;margin-top: 0}
    #sub.why #service .service_w .title .txt{padding-left: 0}
    
}
@media (max-width: 730px) {
    #sub.why #service .service_tit{height: auto;padding: 120px 0;}
    #sub.why #service .ser01{padding-right: 0;padding-left: 20px;}
    #sub.why #service .ser04{padding: 60px 0;padding-right: 20px;}
    #sub.why #service .ser05{padding-left: 20px;padding-bottom: 60px;}
    #sub.why #service .ser06 .service_w{flex-direction: column;}
    #sub.why #service .ser06 .service_w .pro_list{margin-top: 0;margin-left: 0;padding-top: 15px;;}
    #sub.why #service .ser01 .project_w01{padding-left: 0;margin-top: 15px;}
    #sub.why #service .ser03 .service_w{gap: 15px}
    #sub.why #service .ser04 .w02{display: none;}
    #sub.why #service .ser05 .service_w{flex-direction: column;justify-content: start;align-items: start;;}
    #sub.why #service .ser05 .service_w .project_w{margin-top: 0;margin-left: 0;padding-top: 0;}
    #sub.why #service .ser05 .service_w{gap: 15px}
    #sub.why #service .ser06 .service_w .project_w02{display: none;}
    #sub.why #service .ser06 .service_w .project_w01{padding-top: 0;}
    #sub.why #service .ser06{padding-right: 20px;}
    #sub.why #service .bg_img{height: 100vh;width: 100%;top: 0;left: 0;}
    #sub.why #service .bg_img img{width: 200vw;position: absolute;right: 0;}
    #sub.why .con01{padding-bottom: 0;}
    #sub.why #service{padding-bottom: 60px;}
    #sub.esg .con03 .image_content .image{transform: scale(0.7);}
    #sub.why #service .ser02 .service_w{flex-direction: column;gap: 15px}
    #sub.why #service .ser02{padding-right: 20px;}
}
@media (max-width: 660px) {
    #sub.esg .con01 .infog_box .esg_infograpic i{width: 260px;}
    #sub.esg .con01 .infog_box .esg_infograpic strong{font-size: 30px;}
    #sub.why #service .ser02 .service_w .b_bg01{left: 78px}
    #sub.why #service .ser02 .service_w .b_bg01 img{width: 240px;}
    #sub.why #service .ser06 .service_w .pro_list{margin-left: 0}
    #sub.why #service .service_w .b_bg {position: absolute;left: -140px;bottom: 80px;}
    #sub.why #service .service_w .b_bg img{width: 140px;}
    #sub.why #service .ser05{padding-right: 228px}
}
@media (max-width: 560px) {
    #sub.why .con01{padding-top: 70px;}
    #sub.why .con01 .device_w{padding-top: 70px;}
    #sub.why .con01 .resolution_w, #sub.why .con01 .device_w{gap: 30px}
    #sub.why #service .service_tit .title strong{font-size: 32px;line-height: 1.2}
    #sub.why #service .service_tit .title .txt{margin-top: 20px;}
    #sub.why #service .service_w .title strong{font-size: 30px;}
    #sub.why #service .ser03 .service_w .title .txt{margin-top: 15px;}
    #sub.why #service .ser01 .service_w .b_bg01 img{width: 110px}
    #sub.why #service .ser01 .service_w .b_bg01 {left: -66px;top: -50px;}
    #sub.why #service .ser03 .service_w .b_bg01 img {width: 140px;}
    #sub.why #service .ser03 .service_w .b_bg01 {left: 64px;top: 50%;margin-top: -110px;}
    #sub.why #service .ser03 .service_w{gap: 30px;}
    #sub.why #service .ser03 {padding-right: 120px;}
    #sub.why #service .service_w .project_w .txt strong{font-size: 13px}
    #sub.why #service .service_w .title strong{padding-left: 0}
    #sub.why #service .ser03 .service_w .b_bg01 img{width: 90px}
    #sub.why #service .ser03 .service_w .b_bg01{margin-top: -80px;}
    #sub.why #service .ser04 .service_w .b_bg01 img{width: 80px;}
    #sub.why #service .ser04 .service_w .b_bg01 {left: 386px;}
    #sub.why #service .service_w .b_bg img{width: 90px;}
    #sub.why #service .service_w .b_bg {left: -70px;}
    #sub.why #service .ser05 {padding-right: 128px;}
    #sub.why #service .ser05 .service_w .project_w .project_image div img{width: 360px;}
    #sub.why #service .ser04 .service_w .w01 .project_w .project_image, #sub.why #service .ser03 .service_w .project_w .project_image {width: 300px;height: 300px;}
    #sub.why #service .ser04 .service_w .w01 .project_w .project_image div img, #sub.why #service .ser03 .service_w .project_w .project_image img {width: 360px;}
    #sub.why #service .ser05 .service_w .project_w .project_image{width: 290px;height: 290px;;}
    #sub.w