@charset "utf-8"; /*─────────────────────────────────────────────────────────── sub 공통 ───────────────────────────────────────────────────────────*/ .sub_visual{height:800px;display: flex;align-items: center;background-image:url('../images/sub/sv_company.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;font-size:var(--title-20);} #wrap:has(.sub_industry) .sub_visual{background-image:url('../images/sub/sv_industry.jpg');} #wrap:has(.sub_tech) .sub_visual{background-image:url('../images/sub/sv_tech.jpg');} #wrap:has(.sub_prd) .sub_visual{background-image:url('../images/sub/sv_prd.jpg');} #wrap:has(.sub_news) .sub_visual{background-image:url('../images/sub/sv_news.jpg');} #wrap:has(.sub_inquiry) .sub_visual{background-image:url('../images/sub/sv_inq.jpg');} /*nav*/ .sub_visual .txt{display: flex;flex-direction: column;gap:40px;} .sub_visual .nav_desc{display: flex;align-items: center;} .sub_visual .nav_desc dt a{display: block;height:17px;} .sub_visual .nav_desc dt a img{vertical-align: top;} .sub_visual .nav_desc dd{display: flex;align-items: center;} .sub_visual .nav_desc dd:before{width:8px;aspect-ratio:auto 1;content:"";border:1px solid var(--point-white);border-width:1px 1px 0 0;transform:rotate(45deg);display: inline-block;margin:0 16px 0 12px;opacity:0.6;} .sub_visual .nav_desc dd span{font-size:90%;color:var(--point-white);font-weight:500;text-transform:capitalize;letter-spacing:0.03em;font-family:var(--font-type02);} .sub_visual h2{font-size:500%;color:var(--point-white);font-weight:700;line-height:1.4;text-transform:capitalize;letter-spacing:0.03em;font-family:var(--font-type02);} @media (max-width:1400px) { .sub_visual{height:57vw;} } @media (max-width:1023px) { .sub_visual{height:clamp(270px, 57vw, 580px);} .sub_visual .nav_desc dt a{height:clamp(14px, 1.7vw, 17px);} .sub_visual .txt{gap:clamp(10px, 4vw, 40px);} .sub_visual h2{font-size:clamp(250%, 9.3vw, 500%);} } @media (max-width:479px) { .sub_visual .nav_desc dd:before{width:5px;margin:0 12px 0 8px;} } /* 간격 */ .gapBox{display: grid;grid-template-columns: minmax(0, 1fr);gap: 140px;} .gapBox.g10{gap: 10px;} .gapBox.g20{gap: 20px;} .gapBox.g30{gap: 30px;} .gapBox.g40{gap: 40px;} .gapBox.g50{gap: 50px;} .gapBox.g60{gap: 60px;} .gapBox.g100{gap: 100px;} .gapBox.g160{gap: 160px;} .bdSec{border-top: 1px solid var(--black-color00); padding-top: 80px;} @media (max-width:1023px) { .gapBox{gap: clamp(80px, 14vw, 140px);} .gapBox.g10{gap: clamp(5px, 1vw, 10px);} .gapBox.g20{gap: clamp(10px, 2vw, 20px);} .gapBox.g30{gap: clamp(12px, 3vw, 30px);} .gapBox.g40{gap: clamp(15px, 4vw, 40px);} .gapBox.g50{gap: clamp(20px, 5vw, 50px);} .gapBox.g60{gap: clamp(30px, 6vw, 60px);} .gapBox.g100{gap: clamp(50px, 10vw, 100px);} .gapBox.g160{gap: clamp(80px, 16vw, 160px);} .bdSec{padding-top: clamp(40px, 8vw, 80px);} } /*img*/ .sub_img_box{box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--point-color04); overflow:hidden;} .img_link{text-align: center;} .img_link a{position:relative;display: block;pointer-events:none;} .img_link a:before{position:absolute;content:'';width: clamp(40px, 6vw, 45px);aspect-ratio: auto 1;background: var(--black-color03) url('../images/sub/search_icon.svg') no-repeat center / 18px auto;top: 10px;right: 10px;border-radius: var(--radius-06);display: none;} @media (max-width:1023px) { .img_link a{pointer-events:initial;} .img_link a:before{display: block;} } /*title*/ .page_title{text-align: center;font-size:var(--title-20);display: flex;flex-direction: column;gap:20px;align-items: center;} .page_title h4{font-size:300%;color:var(--point-color01);font-weight:700;line-height:1.4;letter-spacing:-0.03em;} .page_title h4 strong{font-weight:inherit;} .page_title p{display: block;font-size:100%;color:var(--black-color00);font-weight:500;line-height:1.8;} .sub_title{text-align: center;padding:100px 0 60px;font-size:var(--title-20);} .sub_title h3{font-size:300%;color:var(--black-color01);font-weight:700;line-height:1.4;letter-spacing:-0.03em;font-family:var(--font-type02);} @media (max-width:1023px) { .page_title{gap:clamp(10px, 2vw, 20px);} .page_title h4{font-size:clamp(200%, 5.5vw, 300%);} .sub_title{padding:clamp(60px, 10vw, 100px) 0 clamp(30px, 6vw, 60px);} .sub_title h3{font-size:clamp(200%, 5.5vw, 300%);} } @media (max-width:479px) { .page_title h4{font-size:165%;} } .bg_b{background:var(--point-color08);} /*paging*/ #wrap .paging {text-align:center;padding:0;line-height:normal;font-size:0;margin:80px auto 0;vertical-align:top;box-sizing:border-box;} #wrap .paging span {display:inline-block;vertical-align:top;} #wrap .paging a {display:inline-flex;align-items:center;justify-content:center;font-size:var(--title-20);font-weight: 400;color:var(--black-color06);padding:0;border:0;box-sizing:border-box;width:40px;height:40px;line-height:1;min-width:auto;text-align:center;vertical-align:top;margin:0 5px;font-family:var(--font-type02);border-radius:100%;} #wrap .paging :is(.on a, a.on){color:var(--point-white);font-weight:500;border-bottom:none;background:var(--black-color00);} #wrap .paging .arrow a {font-size:0;width:40px; background:no-repeat center;margin:0;} #wrap .paging .arrow.first a {background-image:url("../images/sub/paging_first.svg");} #wrap .paging .arrow.prev a {background-image:url("../images/sub/paging_prev.svg"); margin-right:30px;} #wrap .paging .arrow.next a {background-image:url("../images/sub/paging_next.svg"); margin-left:30px;} #wrap .paging .arrow.last a {background-image:url("../images/sub/paging_last.svg");} @media (max-width:1023px) { #wrap .paging{margin-top:clamp(40px, 8vw, 80px);} #wrap .paging a, #wrap .paging .arrow a{width:30px;height:30px;} } @media (max-width:640px) { #wrap .paging .arrow.prev a{margin-right:15px;} #wrap .paging .arrow.next a{margin-left:15px;} } /*btn*/ #wrap .btn_wrap{padding-top:60px;} #wrap .btn_wrap .btn{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;border-radius:4px;width:200px;height:70px;font-size:var(--title-20);font-weight:500;transition:all 0.3s;} #wrap .btn_wrap .btn_point{background:var(--point-white);border:1px solid var(--black-color03);color:var(--black-color03);} #wrap .btn_wrap .btn_basic{background:var(--point-color01);border:1px solid var(--point-color01);color:var(--point-white);} #wrap .btn_wrap .btn span{font-size:inherit;color:inherit;font-weight:inherit;} /* over */ @media (hover:hover) and (pointer:fine) { #wrap .btn_wrap .btn_point:hover{color:var(--point-white);border-color:var(--point-color01);background:var(--point-color01);;} #wrap .btn_wrap .btn_basic:hover{background:var(--point-white);color:var(--point-color01);} } @media (max-width:1023px) { #wrap .btn_wrap{padding-top:clamp(40px, 6vw, 60px);} #wrap .btn_wrap .btn{width:clamp(140px, 2vw, 200px);height:clamp(50px, 7vw, 70px);} } /*checkbox*/ #wrap label:has([type="checkbox"]){display: flex;align-items: flex-start;font-size: var(--title-18);font-weight: 500;color: var(--black-color03);gap: 10px;cursor: pointer;line-height: 26px;} #wrap label:has([type="checkbox"]) em{font-weight: 500; color: var(--point-color01); display: contents;} #wrap [type="checkbox"]{position: relative; display: inline-flex; width: 26px; height: 26px; border:1px solid var(--border-color01); background: var(--point-white); flex-shrink: 0; cursor: pointer;border-radius:2px;} #wrap [type="checkbox"]:before{position: absolute; content:''; inset: 0; background: url('../images/sub/chk_icon.svg') no-repeat center / 12px auto; filter: var(--filter-black) opacity(0.4); transition: all 0.4s;} #wrap [type="checkbox"]:checked{background:var(--point-color01);border-color:var(--point-color01);} #wrap [type="checkbox"]:checked:before{filter:var(--filter-white);} @media (max-width:1023px){ #wrap label:has([type="checkbox"]){line-height: clamp(20px, 2.9vw, 26px);} #wrap [type="checkbox"]{width: clamp(20px, 2.9vw, 26px); height: clamp(20px, 2.9vw, 26px);} #wrap [type="checkbox"]:before{background-size: clamp(10px, 1.7vw, 12px) auto;} } /*─────────────────────────────────────────────────────────── industry ───────────────────────────────────────────────────────────*/ .sub_content > section{box-sizing:border-box;position: relative;font-size:var(--title-20);outline:none;scroll-margin-top:100px;} .sub_content > section > a{position: absolute;top:-100px;} .indus_title{font-size:var(--title-20);box-sizing:border-box;display: flex;align-items: center;justify-content: center;padding:354px 0;position: relative;} .indus_title:before{width:100%;height:100%;content:"";background:url('../images/sub/industry_title_bg.jpg')no-repeat center / cover;opacity:0;pointer-events:none;transition:all 1.5s;transition-delay:0.8s;position: absolute;top:0;left:0;} .sub_tech .indus_title:before{background:url('../images/sub/tech_title_bg.png')no-repeat center / cover;} .indus_title:has(.aos-animate):before{opacity:1;} .indus_title .txt{text-align: center;} .indus_title .txt h3{font-size:320%;color:var(--point-color01);font-weight:700;line-height:1.4;letter-spacing:-0.03em;} .indus_title .txt strong{display: block;font-size:150%;color:var(--black-color00);font-weight:500;line-height:1.8;margin-top:30px;} .indus_title .txt p{margin-top:20px;font-size:100%;color:var(--black-color00);font-weight:500;line-height:1.8;} .sub_tech .indus_title p{margin-top:10px;} .info_increase{margin-top:30px;font-size:var(--title-20);padding-bottom:120px;} .info_increase ol{display: flex;gap:84px;} .info_increase ol li{width:calc(25% - 63px);box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--point-color04);padding:40px 0; display: flex;flex-direction: column;gap:25px;align-items: center;position: relative;transition:all 0.3s;} .info_increase ol li + li:before{width:13px;aspect-ratio:auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;transform:rotate(45deg);position: absolute;left:-47px;top:47%;translate:-50%;} .info_increase ol li:after{width:100%;height:100%;content:"";box-sizing:border-box;border-radius:var(--radius-10);border:1px solid var(--point-color01);box-shadow: 5px 5px 20px 0 rgba(26, 65, 194, 0.20);pointer-events:none;opacity:0;transition:all 0.3s;position: absolute;top:0;left:0;} .info_increase ol li span{font-size:90%;color:var(--point-color01);font-weight:600;line-height:1.3;font-family:var(--font-type02);} .info_increase ol li p{font-size:120%;color:var(--black-color00);font-weight:500;line-height:1.5;} .info_increase > p{text-align: center;margin-top:40px;font-size:120%;color:var(--point-color01);font-weight:400;line-height:1.5;} /*on*/ .info_increase ol li.on, .info_increase ol li.swiper-slide-active{border-color:transparent;} .info_increase ol li.on:after, .info_increase ol li.swiper-slide-active:after{opacity:1;} .info_increase .sub_img_box{margin-top:58px;} @media (max-width:1400px) { .indus_title{padding:250px 0;} } @media (max-width:1023px) { .indus_title{padding-block:clamp(120px, 25vw, 250px);} .indus_title .txt h3{font-size:clamp(200%, 6vw, 320%);} .indus_title .txt strong{font-size:clamp(120%, 2.7vw, 150%);margin-top:clamp(10px, 3vw, 30px);} .info_increase{padding-bottom:clamp(60px, 12vw, 120px);} .info_increase ol{gap:0;} .info_increase ol li{padding-block:clamp(20px, 4vw, 40px);gap:clamp(10px, 2.5vw, 25px);} .info_increase ol li + li:before{display: none;} .info_increase > p{margin-top:clamp(20px, 4vw, 40px);} .info_increase .sub_img_box{margin-top:clamp(40px, 6vw, 60px);} } @media (max-width:640px) { .info_increase{margin-top:-10px;} .info_increase ol li .icon{width:60px;} } .auto_sensor{padding:159px 0;background:var(--point-grid04);} .auto_sensor:before{width:100%;height:26%;content:"";background: linear-gradient(180deg, var(--point-white) 0%, rgba(255, 255, 255, 0.00) 100%);position: absolute;top:-1px;left:0;} .auto_sensor .sensor_list{display: flex;flex-wrap:wrap;gap:20px;} .auto_sensor .sensor_list > li{width:calc(50% - 10px);box-sizing:border-box;border-radius:var(--radius-20);padding:60px 70px 63px;background:var(--point-grid05);backdrop-filter: blur(2px);font-size:var(--title-20);} .auto_sensor .sensor_list .sensor_title{text-align: center;} .auto_sensor .sensor_list .sensor_title h5{font-size:250%;color:var(--point-white);font-weight:600;line-height:1.4;letter-spacing:-0.03em;} .auto_sensor .sensor_list .sensor_title p{font-size:150%;color:var(--point-color01);font-weight:600;line-height:1.4;box-sizing:border-box;border-radius:50px;background:var(--point-white);padding:10px 40px;margin-top:30px;display: inline-block;} .chk_list{display: flex;flex-direction: column;gap:20px;} .auto_sensor .chk_list{margin-top:50px;} .chk_list li{display: flex;align-items: flex-start;gap:20px;font-size:110%;color:var(--point-white);font-weight:300;line-height:1.6;} .chk_list li:before{width:16px;height:13px;content:"";background:url('../images/sub/icon_chk.png')no-repeat center;background-size:auto 100%;display: inline-block;translate:0 11px;flex-shrink:0;} .lidar_focus{margin-top:100px;padding-top:190px;padding-bottom:180px;background:url('../images/sub/lidar_bg.png')no-repeat center top;background-size:100% auto;} .lidar_focus .focus_content{box-sizing:border-box;padding:0 50px;margin-top:65px;display: flex;align-items: center;} .lidar_focus .focus_content .img_box{width:46.7%;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;position: relative;display: flex;align-items: center;justify-content: center;} .lidar_focus .focus_content .img_box:before{width:100%;height:100%;content:"";box-sizing:border-box;border-radius:100%;opacity: 0.2;background: linear-gradient(180deg, rgba(5, 97, 252, 0.00) 6.4%, var(--point-color06) 76.15%);position: absolute;top:0;left:0;} .lidar_focus .focus_content .img_box:after{width:calc(100% - 100px);height:calc(100% - 100px);content:"";box-sizing:border-box;border-radius:100%;opacity: 0.1;background:var(--point-color06);position: absolute;top:50%;left:50%;translate:-50% -50%;} .lidar_focus .focus_content .img_box .img{position: relative;width:84%;z-index:3;box-sizing:border-box;padding-top:130px;} .lidar_focus .focus_content .img_box .img:before{width:calc(100% - 91px);aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;border: 2px solid rgba(255, 255, 255, 0.20);opacity: 0.1;background: #0561FC;position: absolute;top:50%;left:50%;translate:-50% -50%;} .lidar_focus .focus_content .img_box .img img{position: relative;z-index:3;} .lidar_focus .focus_content .img_box .img .prd_zoom{position: absolute;top:18%;right:0;} .lidar_focus .focus_content .text_box{position: relative;padding-left:124px;} .lidar_focus .focus_content .text_box:before{width:10px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-white);position: absolute;left:-5px;top:48%;translate:0 -50%;z-index:3;} .lidar_focus .focus_content .text_box:after{width:264px;height:386px;content:"";background:url('../images/sub/sensor_line.png')no-repeat center;background-size:auto 100%;position: absolute;left:0;top:57%;translate:0 -50%;} /* .lidar_focus .focus_content .text_box .line_box{position: absolute;width:124px;height:100px;left:0;top:50%;translate:0 -50%;} .lidar_focus .focus_content .text_box .line_box:before, .lidar_focus .focus_content .text_box .line_box:after{width:100%;height:50%;content:"";box-sizing:border-box;position: absolute;border:1px solid var(--point-white);} .lidar_focus .focus_content .text_box .line_box:before{border-width:0 1px 1px 0;top:0;left:0;border-radius:0 0 500px 0;} .lidar_focus .focus_content .text_box .line_box:after{border-width:1px 1px 0 0;top:calc(50% - 1px);left:0;border-radius:0 500px 0 0;} */ .lidar_focus .focus_content .focus_txt{margin-left:120px;box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-color07);padding:20px 20px;text-align: center;position: relative;} .lidar_focus .focus_content .focus_txt h5{font-size:100%;color:var(--point-white);font-weight:400;margin-bottom:15px;} .lidar_focus .focus_content .focus_txt h5 big{font-size:140%;color:inherit;font-weight:600;} .lidar_focus .focus_content ul{display: flex;flex-direction: column;gap:10px;} .lidar_focus .focus_content ul li{box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-white);padding:10px 10px;display: flex;gap:10px;position: relative;} .lidar_focus .focus_content ul li h6{position: absolute;left:-122px;top:35%;translate:0 -50%;font-size:70%;color:var(--point-white);font-weight:500;text-align: center;width: 110px;} .lidar_focus .focus_content ul li:nth-child(2) h6{top: 20%;} .lidar_focus .focus_content ul li:nth-child(3) h6{top: 25%;} /* .lidar_focus .focus_content ul li:after{width:141px;content:"";box-sizing:border-box;border:1px solid var(--point-white);position: absolute;left:-141px;top:50%;translate:0 -50%;} .lidar_focus .focus_content ul li:nth-child(1):after{height:100px;border-radius:500px 0 0 0;border-width:1px 0 0 1px;top:70%;} .lidar_focus .focus_content ul li:nth-child(2):after{height:28px;border-radius:0 0 0 500px;border-width:0 0 1px 1px;top:42%;} .lidar_focus .focus_content ul li:nth-child(3):after{height:190px;border-radius:0 0 0 50px;border-width:0 0 1px 1px;top:-10%;} */ .lidar_focus .focus_content ul li:before{width:10px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-white);border:2px solid var(--point-color01);position: absolute;left:-5px;top:50%;translate:0 -50%;} .lidar_focus .focus_content ul li:nth-child(1) .img{height:230px;} .lidar_focus .focus_content ul li .img{box-sizing:border-box;border-radius:var(--radius-20);overflow:clip;height:140px;} .lidar_focus .focus_content ul li .img img{width:100%;height:100%;object-fit:cover;} @media (max-width:1450px) { .lidar_focus .focus_content{padding:0;} .lidar_focus .focus_content .focus_txt h5{font-size:85%;} .lidar_focus .focus_content .focus_txt h5 big{font-size:120%;} .lidar_focus .focus_content .text_box:before{top:47%;} .lidar_focus .focus_content .text_box:after{height:58%;top:57%;translate:0 -51%;} } @media (max-width:1300px) { .auto_sensor .sensor_list > li{padding:clamp(25px, 4vw, 40px) clamp(15px, 5vw, 50px)} } @media (max-width:1200px) { .lidar_focus .focus_content .img_box{width:50%;} .lidar_focus .focus_content .img_box:after{width:calc(100% - 50px);height:calc(100% - 50px);} .lidar_focus .focus_content .img_box .img{height:94%;} .lidar_focus .focus_content .img_box .img:before{width:calc(100% - 50px);} .lidar_focus .focus_content .img_box .img .prd_zoom{width:17vw;right:-30px;} .lidar_focus .focus_content .text_box{padding-left:88px;width:50%;} .lidar_focus .focus_content .text_box:before{top:48.7%;} .lidar_focus .focus_content .text_box:after{width:182px;height:56%;top:58.5%;background-position:right center} .lidar_focus .focus_content .text_box .line_box{width:60px;} .lidar_focus .focus_content .focus_txt{margin-left:70px;} .lidar_focus .focus_content ul li:after{width:91px;left:-91px;} .lidar_focus .focus_content ul li:nth-child(1):after{height:90px;border-radius:50px 0 0 0;top:68%;} } @media (max-width:1023px) { .auto_sensor{padding-block:clamp(70px, 16vw, 159px);} .auto_sensor .sensor_list .sensor_title h5{font-size:clamp(160%, 4.3vw, 250%);} .auto_sensor .sensor_list .sensor_title p{font-size:clamp(120%, 2.7vw, 150%);padding-inline:clamp(20px, 4vw, 40px);margin-top:clamp(10px, 3vw, 30px);} .auto_sensor .chk_list{margin-top:clamp(20px, 5vw, 50px);} .lidar_focus{margin-top:clamp(50px, 10vw, 100px);padding-block:clamp(80px, 19vw, 190px);} .lidar_focus .focus_content{margin-top:clamp(40px, 6.5vw, 65px);} } @media (max-width:860px) { .auto_sensor .sensor_list > li{width:100%;} .chk_list{gap:10px;} .chk_list li{gap:10px;} .chk_list li:before{width:12px;height:10px;translate:0 9px;} .lidar_focus .focus_content{flex-direction: column;} .lidar_focus .focus_content .img_box .img .prd_zoom{width:24vw;} .lidar_focus .focus_content .text_box{width:100%;padding:60px 0 0 0;} .lidar_focus .focus_content .text_box:before{left:50%;top:-5px;translate:-50% 0;} .lidar_focus .focus_content .text_box:after{width:1px;height:60px;content:"";background:var(--point-white);position: absolute;top:0;left:calc(50% - 1px);translate:0;} .lidar_focus .focus_content .text_box .line_box{display: none;} .lidar_focus .focus_content .focus_txt{margin:0;} .lidar_focus .focus_content .focus_txt h5{font-size:100%;} .lidar_focus .focus_content .focus_txt h5 big{font-size:140%;} .lidar_focus .focus_content ul li .img{height:auto;width:100%;} .lidar_focus .focus_content ul li:before, .lidar_focus .focus_content ul li:after{display: none;} .lidar_focus .focus_content ul li h6{display: none;} } @media (max-width:640px) { .lidar_focus .focus_content .img_box{width:90%;} .lidar_focus .focus_content .img_box .img .prd_zoom{width:33vw;} } @media (max-width:479px) { .chk_list li:before{translate:0 8px;} .lidar_focus .focus_content{margin-top:10px;} .lidar_focus .focus_content .text_box{padding-top:40px;} .lidar_focus .focus_content .text_box:after{height:40px;} .lidar_focus .focus_content .img_box{width:100%;} .lidar_focus .focus_content .img_box .img{padding-top:23%;} .lidar_focus .focus_content .img_box .img .prd_zoom{right:-15px;width:35vw;} .lidar_focus .focus_content .focus_txt{padding:10px 10px;} } .indus_lidar{background:var(--point-color05);} .indus_lidar .page_title{filter:var(--filter-white);} .indus_lidar .lidar_system{box-sizing:border-box;border-radius:var(--radius-20);background: rgba(255, 255, 255, 0.10);padding:20px 20px 40px 20px;} .indus_lidar .lidar_system h5{display: flex;align-items: center;justify-content: center;text-align: center;box-sizing:border-box;margin-bottom:40px;padding:20px 15px;background:var(--point-color01);border-radius:var(--radius-20);font-size:160%;color:var(--point-white);font-weight:600;line-height:1.4;} @media (max-width:1023px) { .indus_lidar .lidar_system h5{font-size:clamp(120%, 2.6vw, 160%);margin-bottom:clamp(20px, 4vw, 40px);} } @media (max-width:640px) { .indus_lidar .lidar_system{padding:20px 20px 30px 20px;} .indus_lidar .lidar_system h5{padding:14px 10px;} } .hyper_lidar{padding:160px 0;} .hyper_lidar .page_title h4{color:var(--black-color00);} .hyper_lidar .page_title h4 strong{color:var(--point-color01);} .hyper_lidar .part_list{display: flex;flex-wrap:wrap;gap:20px;} .hyper_lidar .part_list > dl{width:calc(50% - 10px);box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-white);overflow:clip;} .hyper_lidar .part_list > dl dt{font-size:160%;color:var(--point-white);font-weight:600;line-height:1.4;padding:17px 0;background:var(--point-color09);text-align: center;} .hyper_lidar .part_list > dl dd{box-sizing:border-box;padding:30px 30px;display: flex;flex-direction: column;gap:30px;} .hyper_lidar .part_list > dl dd h5{font-size:150%;color:var(--black-color00);font-weight:600;line-height:1.4;margin-bottom:20px;display: flex;align-items: flex-start;gap:10px;} .hyper_lidar .part_list > dl dd h5 span{display: flex;align-items: center;gap:10px;flex-wrap:wrap;} .hyper_lidar .part_list > dl dd h5 em{font-size:60%;font-weight:400;} /*future*/ .hyper_lidar .part_list > dl.future dd{counter-reset:futureNum;} .hyper_lidar .part_list > dl.future dd > div{counter-increment:futureNum;} .hyper_lidar .part_list > dl.future dd > div h5:before{content:counter(futureNum);width:40px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;background:var(--black-color00);font-size:var(--title-20);color:var(--point-white);font-weight:600;text-align: center;display: inline-flex;align-items: center;justify-content: center;flex-shrink:0;} .hyper_lidar .speed_scan{display: flex;flex-wrap:wrap;gap:70px;} .hyper_lidar .speed_scan .scan_type{width:calc(50% - 35px);box-sizing:border-box;position: relative;} .hyper_lidar .speed_scan .scan_type + .scan_type:before{width:50px;height:30px;content:"";background:url('../images/sub/scan_arw.png')no-repeat center;background-size:auto 100%;position: absolute;left:-59px;top:50%;translate:0 -50%;} .hyper_lidar .speed_scan .scan_type .img{width:100%;aspect-ratio:auto 1.65;box-sizing:border-box;border-radius:20px 20px 0 0;overflow:clip;} .hyper_lidar .speed_scan .scan_type .img img{width:100%;height:100%;object-fit:cover;} .hyper_lidar .speed_scan .scan_type p{font-size:110%;color:var(--black-color00);font-weight:500;line-height:1.4;box-sizing:border-box;border-radius:0 0 20px 20px;border:1px solid var(--border-color01);border-top:none;text-align: center;padding:9px 0;} .hyper_lidar .surface_img{box-sizing:border-box;border-radius:var(--radius-20);overflow:clip;} /*robotics*/ .hyper_lidar .part_list > dl.robotics dt{background:var(--point-color01);} .hyper_lidar .part_list > dl.robotics .vfov_scan{box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-20);padding:20px 20px;display: flex;gap:130px;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div{width:calc(50% - 65px);position: relative;} .hyper_lidar .part_list > dl.robotics .vfov_scan .img{position: relative;width:100%;aspect-ratio:1.55;box-sizing:border-box;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div + div .img:before{content:"VS";width:48px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;background:var(--black-color05);font-size:var(--title-20);color:var(--point-white);font-weight:600;display: inline-flex;align-items: center;justify-content: center;text-align: center;position: absolute;left:-90px;top:50%;translate:0 -50%;} .hyper_lidar .part_list > dl.robotics .vfov_scan .img:after{width:21px;height:100%;content:"";position: absolute;bottom:0;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(1) .img:after{right:-31px;background:url('../images/sub/vfov_arw01.png')no-repeat center bottom / 21px auto;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(2) .img:after{left:-31px;background:url('../images/sub/vfov_arw02.png')no-repeat center bottom / 21px auto;} .hyper_lidar .part_list > dl.robotics .vfov_scan .img img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-10);} .hyper_lidar .part_list > dl.robotics .vfov_scan p{text-align: center;font-size:110%;color:var(--black-color00);font-weight:500;line-height:1.4;margin-top:10px;} .hyper_scan_table{box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;border:1px solid var(--border-color01);} .hyper_scan_table table{border-collapse:collapse;} .hyper_scan_table table thead tr th{box-sizing:border-box;text-align: center;vertical-align: middle;border:1px solid var(--border-color01);border-top:none;background:var(--gray-bg01);font-size:100%;color:var(--black-color00);font-weight:600;line-height:1.3;padding:12px 5px;} .hyper_scan_table table tbody tr th, .hyper_scan_table table tbody tr td{box-sizing:border-box;text-align: center;vertical-align: middle;border:1px solid var(--border-color01);border-top:none;font-size:var(--title-18);color:var(--black-color03);font-weight:400;line-height:1.3;padding:13px 5px;} .hyper_scan_table table thead tr th:first-child, .hyper_scan_table table tbody tr th:first-child{border-left:none;} .hyper_scan_table table thead tr th:last-child, .hyper_scan_table table tbody tr td:last-child{border-right:none;} .hyper_scan_table table tbody tr:last-child th, .hyper_scan_table table tbody tr:last-child td{border-bottom:none;} .hyper_scan_table table tbody tr td.laser{color:var(--point-red);} .hyper_scan_table table tbody tr td.hyper{color:var(--point-color01);font-weight:600;} @media (max-width:1650px) { .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(2) .img:after{background-position:center top;} } @media (max-width:1023px) { .hyper_lidar{padding-block:clamp(60px, 16vw, 160px);} .hyper_lidar .part_list > dl{width:100%;} .hyper_lidar .part_list > dl dt{font-size:clamp(120%, 2.6vw, 160%);} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(2) .img:after{background-position:center bottom;} } @media (max-width:860px) { .hyper_lidar .part_list > dl dt{padding:13px 0;} .hyper_lidar .part_list > dl.future dd > div h5:before{width:32px;translate:0 3px;} .hyper_lidar .speed_scan{gap:50px;} .hyper_lidar .speed_scan .scan_type{width:calc(50% - 25px);} .hyper_lidar .speed_scan .scan_type + .scan_type:before{width:50px;height:22px;left:-50px;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(2) .img:after{background-position:center top;} } @media (max-width:640px) { .hyper_lidar .part_list > dl dd{padding:20px 15px;} .hyper_lidar .part_list > dl dd h5{font-size:110%;margin-bottom:10px;} .hyper_lidar .part_list > dl.future dd > div h5:before{translate:0 -4px;} .hyper_lidar .speed_scan .scan_type .img{border-radius:10px 10px 0 0;} .hyper_lidar .speed_scan .scan_type p{border-radius:0 0 10px 10px;} } @media (max-width:479px) { .hyper_lidar .part_list > dl dd h5{gap:6px;} .hyper_lidar .part_list > dl dd h5 span{gap:6px;} .hyper_lidar .part_list > dl.future dd > div h5:before{width:28px;translate:0 -2px;} .hyper_lidar .speed_scan{gap:60px;} .hyper_lidar .speed_scan .scan_type{width:100%;} .hyper_lidar .speed_scan .scan_type + .scan_type:before{transform:rotate(90deg);left: 50%;translate: -50%;top: -42px;} .hyper_lidar .part_list > dl.robotics .vfov_scan{gap:80px;flex-direction: column;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div{width:100%;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div + div .img:before{left:50%;translate:-50% 0;top:-66px;width:40px;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(1) .img:after{background-size:16px auto;} .hyper_lidar .part_list > dl.robotics .vfov_scan > div:nth-child(2) .img:after{background-position:center bottom;background-size:16px auto;} .hyper_lidar .part_list > dl.robotics .vfov_scan .img{padding-right:15px;} #wrap .hyper_lidar .part_list > dl.robotics .vfov_scan .img:after{left:auto;right:-11px;} } @media (max-width:414px) { .hyper_lidar .part_list > dl.robotics .vfov_scan .img{aspect-ratio:1.65;} } .indus_business .page_title{box-sizing:border-box;padding:160px 0 100px;text-align:left;align-items: flex-start;} .indus_business .business_wrap{box-sizing:border-box;border-top:1px solid var(--gray-bg04);display: flex;align-items: flex-start;flex-wrap:wrap;} .business_wrap .business_tab{width:540px;box-sizing:border-box;position:sticky;top:60px;left:0;padding-left:160px;padding-top:80px;display: flex;flex-direction:column;gap:20px;} .business_wrap .business_tab button{display: inline-flex;align-items: center;gap:12px;} .business_wrap .business_tab .icon{display: inline-flex;box-sizing:border-box;border-radius:var(--radius-10);width:50px;aspect-ratio:auto 1;align-items: center;justify-content: center;background:var(--gray-bg05);flex-shrink:0;} .business_wrap .business_tab span{font-size:var(--title-20);color:var(--black-color05);font-weight: 400;line-height:1.3;font-family:var(--font-type02);} .business_wrap .business_tab .on .icon{background:var(--point-color01);} .business_wrap .business_tab .on .icon img{filter:var(--filter-white);} .business_wrap .business_tab .on span{color:var(--point-color01);font-weight:500;} .business_wrap .business_cont{box-sizing:border-box;width:calc(100% - 540px);border-left:1px solid var(--border-color01);padding:80px 160px 0 80px;font-size:var(--title-20);} .business_wrap .business_cont .business_box{box-sizing:border-box;padding:50px 0 80px;position: relative;scroll-margin-top:200px;} .business_wrap .business_cont .business_box + .business_box{border-top:1px solid var(--border-color01);} .business_wrap .business_cont .business_box:first-child{padding-top:0;} .business_wrap .business_cont .business_box > a{position: absolute;top:-140px} .business_cont .title .icon{width:70px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:var(--radius-20);background:var(--gray-bg05);display:flex;align-items: center;justify-content: center;margin-bottom:30px;} .business_cont .title span{font-size:120%;color:var(--point-color01);font-weight:500;line-height:1.3;} .business_cont .title h5{font-size:200%;color:var(--black-color00);font-weight: 600;line-height:1.3;margin-top:16px;} .business_cont .title p{font-size:100%;color:var(--black-color05);font-weight: 400;line-height:1.6;margin-top:20px;} .business_cont .img_box{margin-top:40px;display: flex;flex-wrap:wrap;gap:20px;} .business_cont .img_box .img{width:calc(50% - 10px);box-sizing:border-box;border-radius:var(--radius-20);overflow:clip;aspect-ratio: auto 1.75;} .business_cont .img_box .img img{width:100%;height:100%;object-fit:cover;} @media (min-width:860px) { .indus_business [data-aos]{opacity:1;transform:none;} } @media (max-width:1500px) { .business_wrap .business_tab{padding-left:30px;width:30%;} .business_wrap .business_cont{padding-right:30px;width:70%;} } @media (max-width:1023px) { .indus_business .page_title{padding:clamp(70px, 16vw, 160px) 0 clamp(40px, 10vw, 100px)} .business_wrap .business_cont{padding:30px 30px 0 30px;} .business_wrap .business_cont .business_box{padding:clamp(25px, 5vw, 50px) 0 clamp(40px, 8vw, 80px);} } @media (max-width:860px) { .business_wrap .business_tab{display: none;} .business_wrap .business_cont{width:100%;border:none;} .business_wrap .business_cont .business_box > a{top:-100px} .business_cont .title .icon{width:clamp(50px, 7vw, 70px);margin-bottom:clamp(15px, 3vw, 30px);} .business_cont .title .icon img{max-width:60%} .business_cont .title h5{font-size:160%;margin-top:10px;} .business_cont .img_box{margin-top:clamp(20px, 4vw, 40px);} } @media (max-width:479px) { .business_wrap .business_cont .business_box{scroll-margin-top:100px;} .business_cont .img_box .img{width:100%;} } /*─────────────────────────────────────────────────────────── tech ───────────────────────────────────────────────────────────*/ /*핵심기술*/ .tech_core{padding:83px 0 160px;font-size:var(--title-20);} .tech_core > a{position: absolute;top:-80px;} .core_tech_wrap > .title{display: flex;justify-content: center;position: relative;} .core_tech_wrap > .title strong{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:600px;height:100px;font-size:150%;color:var(--point-white);font-weight:600;background:rgba(19, 168, 232, 0.9);border-radius:100px;position: relative;z-index:3;letter-spacing:-0.03em} .core_tech_wrap > .title strong:last-child{background:rgba(13, 78, 174, 0.9);color:var(--point-yellow);margin-left:-100px;z-index:2;padding-left:78px;} .core_tech_wrap .plus{width:100px;aspect-ratio:auto 1;box-sizing:border-box;border-radius:100%;position: absolute;top:0;left:50%;translate:-50%;z-index:5;} .core_tech_wrap .plus:before, .core_tech_wrap .plus:after{content:"";background:var(--point-white);position: absolute;top:50%;left:50%;translate:-50% -50%;} .core_tech_wrap .plus:before{width:43px;height:4px;} .core_tech_wrap .plus:after{width:4px;height:43px;} .core_tech_wrap .tech_container{margin-top:10px;position: relative;padding-top:130px;text-align: center;} .core_tech_wrap .tech_container:before{width:100%;height:100px;content:"";background:url('../images/sub/tech_arw.svg')no-repeat center;background-size:auto 100%;position: absolute;top:0;left:0;} .core_tech_wrap .tech_box{display: flex;flex-wrap:wrap;gap:50px;} .core_tech_wrap .tech_box > li{width:calc(100% / 3 - 33.4px);box-sizing:border-box;} .core_tech_wrap .tech_box h5{width:100%;height:60px;box-sizing:border-box;text-align: center;font-size:120%;color:var(--black-color03);font-weight: 500;line-height:1.6;border-radius:var(--radius-10);border:1px solid var(--border-color02);display: inline-flex;align-items: center;justify-content: center;position: relative;} .core_tech_wrap .tech_box h5:before{width:1px;height:20px;content:"";background:var(--border-color02);position: absolute;bottom:-20px;left:50%;} .core_tech_wrap .tech_box dl{position: relative;margin-top:20px;box-sizing:border-box;height:calc(100% - 80px);border:1px solid var(--border-color02);border-radius:var(--radius-10);overflow:hidden;} .core_tech_wrap .tech_box dl.nano_scan{border-color:var(--point-color09);} .core_tech_wrap .tech_box dl.macro_scan{border-color:var(--point-color10);} .core_tech_wrap .tech_box dl.hybrid_tech dd{display: flex;flex-direction: column;justify-content: center;height:100%;} .core_tech_wrap .tech_box .scan_box dt{display: flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;height:59px;font-size:150%;color:var(--point-white);font-weight:600;background:var(--point-color09);} .core_tech_wrap .tech_box dl dd{box-sizing:border-box;padding:20px 20px;} .core_tech_wrap .core_tech_img{display: none;} /*nano*/ .core_tech_wrap .tech_box .nano_high{display: flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:var(--radius-20);gap:18px;background:var(--point-color11);padding:7px 0;} .core_tech_wrap .tech_box .nano_high span{font-size:120%;color:var(--black-color03);font-weight: 500;line-height:1.8;} .core_tech_wrap .tech_box .scan_img{margin-top:10px;box-sizing:border-box;padding: 10px 10px;background:var(--gray-bg01);border-radius:var(--radius-20);} .core_tech_wrap .tech_box .scan_img .img_box{display: flex;gap:10px;} .core_tech_wrap .tech_box .scan_img .img_box img{border-radius:var(--radius-20);box-sizing:border-box;border:1px solid transparent;width:36.5%;} .core_tech_wrap .tech_box .scan_img .img_box img:nth-child(2){border-color:var(--border-color01);width:calc(63.5% - 10px);} .core_tech_wrap .tech_box .scan_img p{margin-top:14px;font-size:100%;color:var(--black-color03);font-weight:500;line-height:1.6;} /*hybrid*/ .core_tech_wrap .hybrid_title strong{font-size:120%;color:var(--black-color00);font-weight:700;line-height:1.6;} .core_tech_wrap .hybrid_title .img{margin-top:6px;} .core_tech_wrap .hybrid_tech .img_box{box-sizing:border-box;border:2px solid var(--border-color01);border-radius:var(--radius-20);margin:30px 0;overflow:clip;} .core_tech_wrap .hybrid_tech .txt{display: flex;align-items: center;gap:24px;justify-content: center;} .core_tech_wrap .hybrid_tech .txt p{font-size:100%;color:var(--black-color03);font-weight:500;line-height:1.6;} .core_tech_wrap .hybrid_tech .txt:after{width:170px;height:12px;content:"";background:url('../images/sub/hybrid_arw.png')no-repeat right center / auto 100%;} /*macro*/ .core_tech_wrap .tech_box .macro_scan dt{background:var(--point-color10);} .core_tech_wrap .macro_box{box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-color12);padding:20px 20px 30px;} .core_tech_wrap .macro_box .title h6{font-size:120%;color:var(--black-color03);font-weight: 500;line-height:1.4;} .core_tech_wrap .macro_box .title h6 strong{display: block;font-size:124%;color:var(--point-color10);font-weight: 700;line-height:1.4;} .core_tech_wrap .macro_box .img_box{margin:18px 0 20px;} .core_tech_wrap .macro_box .img_box img{box-shadow: 10px 10px 60px 0 rgba(0, 0, 0, 0.10);} .core_tech_wrap .macro_box p{font-size:100%;color:var(--black-color00);font-weight: 500;line-height:1.4;} .core_tech_wrap .macro_box p strong{font-size:inherit;color:var(--point-color10);font-weight: 600;} @media (max-width:1550px) { .core_tech_wrap .hybrid_tech .txt{gap:10px;} .core_tech_wrap .hybrid_tech .txt:after{width:25%;} } @media (max-width:1200px) { .core_tech_wrap > .title strong{width:calc(50% + 50px);} .core_tech_wrap > .title strong:last-child{padding-left:50px;} .core_tech_wrap .tech_box{gap:24px;} .core_tech_wrap .tech_box > li{width:calc(100% / 3 - 16px);} } @media (max-width:1023px) { .tech_core{padding:clamp(40px, 8vw, 83px) 0 clamp(70px, 16vw, 160px);} .core_tech_wrap > .title strong{height:80px;font-size:120%;} .core_tech_wrap > .title strong:last-child{margin-left:-80px;} .core_tech_wrap .plus:before{width:30px;} .core_tech_wrap .plus:after{height:30px;} .core_tech_wrap .plus{width:80px;} .core_tech_wrap .tech_box .scan_box dt{font-size:120%;} .core_tech_wrap .tech_box .nano_high{gap:10px;} .core_tech_wrap .tech_box .nano_high .img{width:44px;} .core_tech_wrap .tech_box .nano_high span{font-size:100%;} .core_tech_wrap .tech_box .scan_img p{font-size:90%;} .core_tech_wrap .hybrid_title strong{font-size:100%;} .core_tech_wrap .hybrid_tech .img_box{margin:20px 0;} .core_tech_wrap .hybrid_tech .txt p{font-size:80%;} .core_tech_wrap .hybrid_tech .txt:after{width:50px;} .core_tech_wrap .macro_box .title h6{font-size:110%;} .core_tech_wrap .macro_box .title h6 strong{font-size:100%;} .core_tech_wrap .macro_box p{font-size:90%;} } @media (max-width:860px) { /*nano*/ .core_tech_wrap .tech_box .nano_high{gap:6px;} .core_tech_wrap .tech_box .nano_high .img{width:50px;} } @media (max-width:767px) { .core_tech_wrap > .title{flex-direction:column;gap:30px;align-items: center;} #wrap .core_tech_wrap > .title strong{width:100%;height:auto;padding:20px 0;} .core_tech_wrap .plus{position: static;translate:0;background:var(--point-color09);width:64px;} .core_tech_wrap > .title strong:last-child{margin:0;padding:0;} .core_tech_wrap .tech_container{padding-top:100px;} .core_tech_wrap .tech_container:before{height:70px;} .core_tech_wrap .tech_box h5{font-size:100%;} .core_tech_wrap .tech_box dl dd{padding:10px 10px;} } @media (max-width:640px) { .tech_core{scroll-margin-top:100px;} .core_tech_wrap .tech_box{display: none;} .core_tech_wrap .core_tech_img{display:block;} } @media (max-width:479px) { .core_tech_wrap > .title{gap:20px;} #wrap .core_tech_wrap > .title strong{padding:12px 0;} .core_tech_wrap .plus{width:50px;} .core_tech_wrap .plus:before{width:22px;height:2px;} .core_tech_wrap .plus:after{width:2px;height:22px;} .core_tech_wrap .tech_box h5{height:50px;} .core_tech_wrap .tech_box .scan_box dt{height:50px;font-size:120%;} .core_tech_wrap .tech_box dl dd{padding:20px 15px;} /*nano*/ .core_tech_wrap .tech_box .nano_high span{font-size:100%;} /*hybrid*/ .core_tech_wrap .hybrid_tech .img_box{margin:15px 0;} /*macro*/ .core_tech_wrap .macro_box{padding:20px 15px 20px;} } /*기대효과 & 제품 특성*/ .tech_feature{background:var(--point-color05) url('../images/sub/tech_effect_bg.png')no-repeat center / 100%;padding:160px 0;} .tech_feature .main_w_custom > div{position: relative;} .tech_feature .main_w_custom > div > a{position: absolute;top:-140px;} .tech_effect, .tech_prd{scroll-margin-top:200px;} .tech_feature .page_title{filter:var(--filter-white);} .tech_feature .feature_box{box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-color13);padding:40px 40px;font-size:var(--title-20);} .tech_feature .feature_title{display: flex;align-items: flex-start;gap:20px;font-size:230%;color:var(--point-white);font-weight: 700;line-height:1.4;margin-bottom:30px;} .tech_feature .feature_title:before{width:40px;aspect-ratio:auto 1;content:"";box-sizing: border-box;border-radius:100%;background:var(--point-color01) url('../images/sub/tech_chk.png')no-repeat center;translate:0 11px;flex-shrink: 0;} .tech_feature .feature_title span{display: flex;align-items: center;} .tech_feature .feature_title em{font-size:66%;color:var(--point-white);font-weight:500;line-height:1.4;display: inline-flex;align-items: center;} .tech_feature .feature_title em:before{width:1px;height:20px;content:"";background:var(--point-white);opacity:0.5;display: inline-block;margin:0 30px;} .feature_img{box-sizing:border-box;border-radius:var(--radius-20);background:var(--point-white);padding:40px 40px;} .feature_img.img_link a:before{top:-10px;right:-10px;} /*솔루션*/ .tech_solution > h5{display: flex;flex-direction: column;gap:10px;box-sizing:border-box;width:100%;padding:20px 0;font-size:100%;color:var(--point-white);font-weight:400;line-height:1.8;background:var(--point-color01);align-items: center;justify-content: center;text-align: center;border-radius:100px;} .tech_solution > h5 strong{font-size:140%;color:inherit;font-weight:600;line-height:1.4;} .tech_solution > ul{position: relative;display: flex;flex-wrap:wrap;gap:25px;margin-top:60px;} .tech_solution > ul:before{width:1px;height:60px;content:"";background:var(--black-color10);position: absolute;top:-60px;left:50%;} .tech_solution > ul:after{width:calc(66% + 27px);height:1px;content:"";background:var(--black-color10);position: absolute;top:0;left:50%;translate:-50%;} .tech_solution > ul > li{width:calc(100% / 3 - 16.7px);box-sizing:border-box;position: relative;margin-top:60px;border-radius:var(--radius-10);border:1px solid;} .tech_solution > ul > li:nth-child(1){background:var(--gray-bg01);border-color:var(--black-color03);} .tech_solution > ul > li:nth-child(2){background:var(--point-color11);border-color:var(--point-color09);} .tech_solution > ul > li:nth-child(3){background:var(--point-color08);border-color:var(--point-color10);} .tech_solution > ul > li:before{width:1px;height:60px;content:"";background:var(--black-color10);position: absolute;top:-60px;left:50%;} .tech_solution > ul > li > h6{box-sizing:border-box;border-radius:7px 7px 0 0;display: flex;align-items: center;justify-content: center;text-align: center;font-size:150%;color:var(--point-white);font-weight:600;height:60px;} .tech_solution > ul > li:nth-child(1) > h6{background:var(--black-color03);} .tech_solution > ul > li:nth-child(2) > h6{background:var(--point-color09);} .tech_solution > ul > li:nth-child(3) > h6{background:var(--point-color10);} .tech_solution .sol_cont{box-sizing:border-box;padding:20px 20px;height:calc(100% - 60px);} /*scan*/ .tech_solution .sol_scan dl{display: flex;flex-direction: column-reverse;align-items: center;gap:14px;} .tech_solution .sol_scan dl dt{font-size:100%;color:var(--black-color03);font-weight: 500;line-height:1.6;} .tech_solution .sol_scan dl dd{width:100%;} .tech_solution .sol_scan dl .scan_prd{display: flex;flex-direction:column;gap:10px;flex-wrap:wrap;} .tech_solution .sol_scan dl .scan_prd li{box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-white);border:1px solid var(--border-color01);text-align: center;aspect-ratio:auto 2.04;display: flex;align-items: center;justify-content: center;width:100%;} /*tech*/ .tech_solution .sol_tech .float_icon{position: absolute;width:120px;aspect-ratio:auto 1;display: flex;flex-direction: column;align-items:center;justify-content: center;background:var(--point-color01);box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.15);border-radius:100%;text-align: center;left:-16%;top:50%;translate:0 -50%;z-index:3;} .tech_solution .sol_tech .float_icon span{font-size:80%;color:var(--point-white);font-weight:300;line-height:1.4;} .tech_solution .sol_tech .float_icon p{font-size:140%;color:var(--point-white);font-weight:600;line-height:1.4;} .tech_solution .sol_tech ul{width:100%;display: flex;flex-direction:column;gap:10px;height:100%} .tech_solution .sol_tech ul li{box-sizing:border-box;background:var(--point-white);border-radius:var(--radius-10);padding:30px 30px;position: relative;min-height: 240px;} .tech_solution .sol_tech ul li .txt{max-width:calc(100% - 60px)} .tech_solution .sol_tech ul li .txt span{display: inline-flex;align-items: center;justify-content: center;text-align: center;height:44px;box-sizing:border-box;border-radius:44px;padding:0 20px;background:var(--point-color09);font-size:100%;color:var(--point-white);font-weight:500;} .tech_solution .sol_tech ul li .txt dl{margin-top:20px;} .tech_solution .sol_tech ul li .txt dl dt{font-size:110%;color:var(--black-color00);font-weight:500;line-height:1.4;} .tech_solution .sol_tech ul li .txt dl dd{font-size:110%;color:var(--point-color09);font-weight:600;line-height:1.4;margin-top:4px;} .tech_solution .sol_tech ul li .icon{position: absolute;bottom:30px;right:30px;} /*effect*/ .tech_solution .sol_effect ul{display: flex;flex-direction: column;gap:10px;min-height:100%;} .tech_solution .sol_effect ul li{box-sizing:border-box;background:var(--point-white);border-radius:var(--radius-10);padding:20px 30px;display: flex;align-items: center;justify-content: space-between;min-height:calc(25% - 7.5px)} .tech_solution .sol_effect ul li dl dt{font-size:140%;color:var(--point-color10);font-weight: 600;line-height:1.4;} .tech_solution .sol_effect ul li dl dd{font-size:90%;color:var(--black-color03);font-weight:400;line-height:1.4;margin-top:4px;} /*performance*/ .tech_performance .peformance_list{display: flex;flex-wrap:wrap;gap:25px;} .tech_performance .peformance_list > li{box-sizing:border-box;width:calc(100% / 3 - 16.7px);overflow:clip;border-radius:var(--radius-10);background:var(--point-white);border:1px solid;text-align: center;} .tech_performance .peformance_list > li:nth-child(1){border-color:var(--black-color03);} .tech_performance .peformance_list > li:nth-child(2){border-color:var(--point-color09);} .tech_performance .peformance_list > li:nth-child(3){border-color:var(--point-color10);} .tech_performance .peformance_list dl dt{display:flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;gap:20px;height:80px;} .tech_performance .peformance_list > li:nth-child(1) dl dt{background:var(--black-color03);} .tech_performance .peformance_list > li:nth-child(2) dl dt{background:var(--point-color09);} .tech_performance .peformance_list > li:nth-child(3) dl dt{background:var(--point-color10);} .tech_performance .peformance_list dl dt .txt{display: flex;align-items: center;} .tech_performance .peformance_list dl dt strong{font-size:150%;color:var(--point-white);font-weight:600;line-height:1.4;} .tech_performance .peformance_list dl dt span{font-size:120%;color:var(--point-white);font-weight:300;line-height:1.4;display: inline-flex;align-items: center;} .tech_performance .peformance_list dl dt span:before{width:1px;height:16px;content:"";background:var(--gray-bg04);display: inline-block;margin:0 20px;opacity:0.5;} .tech_performance .peformance_list dl dd{position: relative;} .tech_performance .peformance_list dl dd .cnt{position: absolute;top:30px;left:50px;width:150px;} /*table*/ .feature_table_container > .scroll_txt{font-size:var(--title-16);color:var(--point-white);font-weight: 400;display:none;margin-bottom:10px;} .feature_table_container .table_box{box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;position: relative;} .feature_table_container .table_box table{position: relative;} .feature_table_container .table_box table:before{width:19.74%;height:100%;content:"";border:4px solid var(--point-color01);box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.30);position: absolute;top:0;right:0;box-sizing:border-box;border-radius:var(--radius-10);pointer-events:none;} .feature_table_container thead tr th{box-sizing:border-box;vertical-align: middle;text-align: center;font-size:100%;color:var(--black-color00);font-weight: 600;line-height:1.3;background:var(--point-white);border-bottom:1px solid var(--border-color01);padding:11px 5px;} .feature_table_container thead tr th.oversea{background:var(--black-color05);color:var(--point-white);} .feature_table_container thead tr th.domestic{background:var(--black-color03);color:var(--point-white);} .feature_table_container thead tr th.firm_bg{background:var(--point-color01);color:var(--point-white);} .feature_table_container thead tr.company th{background:var(--gray-bg01);border:1px solid var(--border-color01);border-top:none;} #wrap .feature_table_container table .lchp{color:var(--point-color01);font-weight:600;} #wrap .feature_table_container table td.lchp{font-weight: 700;} .feature_table_container tbody tr th, .feature_table_container tbody tr td{box-sizing:border-box;text-align: center;vertical-align: middle;font-size:90%;color:var(--black-color03);font-weight: 400;line-height:1.3;border-bottom:1px solid var(--border-color01);background:var(--point-white);padding:13px 5px;} .feature_table_container tbody tr th{font-weight: 500;} .feature_table_container tbody tr td{border-left:1px solid var(--border-color01);} .feature_table_container tbody tr.resolution th, .feature_table_container tbody tr.resolution td{background:var(--point-color12);} .feature_table_container tbody tr td.market{color:var(--point-color01);font-weight: 600;} @media (max-width:1600px) { /*performance*/ .tech_performance .peformance_list dl dd .cnt{width:8vw;left:25px;top:20px;} } @media (max-width:1450px) { /*tech*/ .tech_solution .sol_tech .float_icon{left:-19%;} /*performance*/ .tech_performance .peformance_list dl dt{height: 120px;} .tech_performance .peformance_list dl dt .txt{flex-direction:column;} .tech_performance .peformance_list dl dt span:before{display: none;} } @media (max-width:1200px) { /*tech*/ .tech_solution .sol_tech .float_icon{left:-25%;} .tech_solution .sol_tech ul li{padding:20px 15px;display: flex;flex-direction: column;gap:10px;} .tech_solution .sol_tech ul li .icon{position: static;align-self: flex-end;} .tech_solution .sol_tech ul li .txt{max-width:100%;} /*effect*/ .tech_solution .sol_effect ul li{padding:20px 15px;} } @media (max-width:1023px) { .tech_feature{padding-block:clamp(70px, 16vw, 160px);background-position:center top 62%;} .tech_feature .feature_box{padding:clamp(20px, 4vw, 40px);} .tech_solution .sol_cont{height:auto;} .tech_solution > ul{margin-top:30px;gap:0;} .tech_solution > ul:before{height:30px;top:-30px;} .tech_solution > ul:after{display: none;} .tech_solution > ul > li{width:100%;margin-top:29px;} .tech_solution > ul > li:before{height:30px;top:-30px;} /*scan*/ .tech_solution .sol_scan dl .scan_prd{flex-direction: row;} .tech_solution .sol_scan dl .scan_prd > li{width:calc(50% - 5px);} /*tech*/ .tech_solution .sol_tech ul li{min-height:auto;} .tech_solution .sol_tech .float_icon{left:-6%;top:-3%;} .tech_feature .feature_title{font-size:clamp(150%, 3.8vw, 230%);gap:10px;margin-bottom:clamp(14px, 3vw, 30px);} .tech_feature .feature_title:before{width:clamp(30px, 4vw, 40px);background-size:auto 32%;translate:0 7px;} .tech_feature .feature_title em:before{margin:0 clamp(10px, 3vw, 30px);height:clamp(10px, 2vw, 20px);} .feature_img{padding:clamp(20px, 4vw, 40px);} /*table*/ .feature_table_container > .scroll_txt{display: block;} .feature_table_container .table_box{overflow-x:auto;} .feature_table_container .table_box table{width:120vw;} } @media (max-width:860px) { .tech_feature{background-position:center top 73%;} .tech_solution > ul > li > h6{border-radius:4px 4px 0 0;} .tech_feature .feature_title:before{translate:0 4px;} /*performance*/ .tech_performance .peformance_list > li{width:100%;} .tech_performance .peformance_list dl dd .cnt{width:17vw;left:27%;} .tech_performance .peformance_list dl dt{height:100px;} .tech_performance .peformance_list dl dt .txt{flex-direction:row;} .tech_performance .peformance_list dl dt span:before{display:block;} /*table*/ .feature_table_container .table_box table{width:145vw;} } @media (max-width:640px) { .tech_feature{background-position:center top 77%;} .tech_solution > ul > li > h6{border-radius:2px 2px 0 0;font-size:120%;height:46px;} .tech_solution .sol_cont{padding:15px;} .tech_feature .feature_title:before{translate:0 2px;} .tech_effect, .tech_prd{scroll-margin-top:100px;} /*scan*/ .tech_solution .sol_scan dl .scan_prd > li{width:100%;} /*tech*/ .tech_solution .sol_tech .float_icon{width:100px;} .tech_solution .sol_tech ul li .txt span{height:36px;padding:0 14px;} .tech_solution .sol_tech ul li .txt dl{margin-top:15px;} .tech_solution .sol_tech ul li .icon{height:45px;} /*effect*/ .tech_solution .sol_effect ul li dl{box-sizing:border-box;padding-right:10px;width:calc(100% - 50px);} .tech_solution .sol_effect ul li .icon{width:50px;height:55px;display: flex;align-items: center;justify-content: center;} /*performance*/ .tech_performance .peformance_list dl dd .cnt{width:23vw;left:16%;} } @media (max-width:479px) { .tech_solution > h5{padding:20px 10px;} .tech_solution .sol_tech .float_icon{left:-8%;width:90px;} .tech_solution .sol_tech .float_icon span{font-size:70%;} .tech_solution .sol_tech .float_icon p{font-size:120%;} .tech_feature .feature_title span{flex-direction:column;align-items: flex-start;} .tech_feature .feature_title em:before{display: none;} /*performance*/ .tech_performance .peformance_list dl dt{gap:10px;height:auto;padding:16px 0;} .tech_performance .peformance_list dl dt .icon{height:36px;} .tech_performance .peformance_list dl dt .txt{flex-direction:column;} .tech_performance .peformance_list dl dt strong{font-size:120%;} .tech_performance .peformance_list dl dt span{font-size:100%;} .tech_performance .peformance_list dl dt span:before{display:none;} .tech_performance .peformance_list dl dd .cnt{top:10px;width:25vw;left:10%;max-width:150px;} /*table*/ .feature_table_container .table_box table{width:600px;} .feature_table_container thead tr th{padding:8px 5px;} .feature_table_container tbody tr th, .feature_table_container tbody tr td{padding:8px 5px;} } .tech_sustain{padding:160px 0 190px;} .sub_img_box.tech_img_box{border-color:var(--border-color01);} .tech_strategy, .tech_certificate{padding:160px 0;} .tech_strategy .sub_img_box{background:var(--point-white);padding:30px 30px;} .tech_strategy h5{font-size:150%;color:var(--point-color01);font-weight: 700;line-height:1.4;} .tech_certificate > a{position: absolute;top:-80px;left:0;} .tech_certificate .certificate_cnt{margin-top:20px;display: flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:100px;border:1px solid var(--border-color01);font-size:var(--title-20);gap:80px;padding:11px 71px;;} .tech_certificate .certificate_cnt p{display: flex;align-items: center;gap:20px;font-size:100%;color:var(--black-color00);font-weight:400;line-height:1.4;position: relative;} .tech_certificate .certificate_cnt p + p:before{width:1px;height:20px;content:"";background: var(--border-color02);position: absolute;left:-40px;top:50%;translate:0 -50%;} .tech_certificate .certificate_cnt p span{font-size:100%;color:var(--black-color00);font-weight:500;line-height:1.4;} .tech_certificate .certificate_cnt p span em{font-size:200%;color:var(--point-color01);font-weight:500;line-height:1.4;} .tech_certificate .list{display: flex;flex-wrap:wrap;gap:40px;font-size:var(--title-20);text-align: center;} .tech_certificate .list li{width:calc(20% - 32px);} .tech_certificate .list .thumb{box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);padding:40px 40px;} .tech_certificate .list img{box-shadow:10px 10px 30px 0 rgba(0, 0, 0, 0.20);} .tech_certificate .list p{font-size:120%;color:var(--black-color03);font-weight:500;line-height:1.4;margin-top:20px;letter-spacing:0;} @media (max-width:1023px) { .tech_sustain{padding:clamp(70px, 16vw, 160px) 0 clamp(80px, 19vw, 190px);} .tech_strategy, .tech_certificate{padding-block:clamp(70px, 16vw, 160px);} .tech_strategy .sub_img_box{padding:clamp(15px, 3vw, 30px);} .tech_certificate .list{gap:clamp(15px, 3vw, 30px);} .tech_certificate .list li{width:calc(100% / 3 - (clamp(15px, 3vw, 30px) * 2 / 3));} .tech_certificate .list .thumb{padding:clamp(15px, 3vw, 30px);} } @media (max-width:640px) { .tech_certificate .certificate_cnt{margin-top:10px;gap:40px;padding:8px 30px;} .tech_certificate .certificate_cnt p{gap:10px;} .tech_certificate .certificate_cnt p + p:before{left:-20px;height:12px;} .tech_certificate .list li{width:calc(50% - (clamp(15px, 3vw, 30px) / 2));} .tech_certificate .list p{margin-top:10px;} } @media (max-width:479px) { .tech_certificate{scroll-margin-top:0;} .tech_certificate .certificate_cnt{gap:20px;padding:8px 20px;} .tech_certificate .certificate_cnt p{font-size:90%;} .tech_certificate .certificate_cnt p + p:before{left:-10px;} } /*contact*/ .contact_bnr{padding:136px 0;background:url('../images/sub/contact_bnr_bg.jpg')no-repeat center / cover;text-align: center;} .contact_bnr .title span{font-size:100%;color:var(--point-white);font-weight:500;line-height:1.8;} .contact_bnr .title h4{margin-top:20px;font-size:200%;color:var(--point-white);font-weight:700;line-height:1.4;} .contact_bnr .btn_box{margin-top:40px;display: flex;justify-content: center;gap:20px;align-items: center;} .contact_bnr .btn_box a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;gap:20px;border-radius:var(--radius-10);font-size:100%;font-weight:500;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.15);padding:0 20px;height:60px;min-width:160px;transition:all 0.3s;} .contact_bnr .btn_box a.btn_down{background:var(--point-white);color:var(--point-color01);} .contact_bnr .btn_box a.btn_down:after{width:20px;aspect-ratio:auto 1;content:"";background:url('../images/sub/icon_down.svg')no-repeat center;background-size:auto 100%;display: inline-block;} .contact_bnr .btn_box a.btn_inq{background:var(--point-color01);color:var(--point-white);} .contact_bnr .btn_box a.btn_inq:after{width:10px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border:2px solid var(--point-white);border-width:2px 2px 0 0;transform:rotate(45deg);} .contact_bnr .btn_box a span{font-size:inherit;color:inherit;font-weight:inherit;} /* over */ @media (hover:hover) and (pointer:fine) { .contact_bnr .btn_box a.btn_down:hover{background:var(--point-color01);color:var(--point-white);} .contact_bnr .btn_box a.btn_down:hover:after{filter:var(--filter-white);} .contact_bnr .btn_box a.btn_inq:hover{background:var(--point-white);color:var(--point-color01);} .contact_bnr .btn_box a.btn_inq:hover:after{border-color:var(--point-color01);} } @media (max-width:1023px) { .contact_bnr{padding-block:clamp(50px, 13vw, 136px);} .contact_bnr .title h4{font-size:clamp(150%, 3.7vw, 200%);} .contact_bnr .btn_box a{height:clamp(45px, 6vw, 60px);gap:clamp(10px, 2vw, 20px);min-width:clamp(120px, 1.6vw, 160px);} .contact_bnr .btn_box a.btn_down:after{width:clamp(13px, 2vw, 20px);} .contact_bnr .btn_box a.btn_inq:after{width:clamp(7px, 1vw, 10px);} } @media (max-width:860px) { .contact_bnr .title h4{margin-top:10px;} .contact_bnr .btn_box{margin-top:20px;} } @media (max-width:479px) { .contact_bnr .btn_box{flex-direction: column;gap:10px;} } /*─────────────────────────────────────────────────────────── product ───────────────────────────────────────────────────────────*/ /*title*/ .prd_title{padding-top:100px;text-align: center;} .prd_title .page_title em{text-decoration: underline;text-underline-offset:18px;text-decoration-thickness:4px;} .prd_title .page_title span strong{font-weight:500;} .prd_title .page_title span strong.pal{color:var(--point-color09);} .prd_title .page_title span strong.mal{color:var(--point-color01);} .prd_title .prd_link_box{} .prd_title .prd_link_box .box{align-items: center;justify-content: center;padding:10px;gap:10px;background:var(--point-color12);display: inline-flex;box-sizing:border-box;border-radius:var(--radius-10);} .prd_title .prd_link_box a{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:280px;border-radius:var(--radius-10);padding:14px 0;} .prd_title .prd_link_box a.pal_link{background:var(--point-color09);} .prd_title .prd_link_box a.mal_link{background:var(--point-color01);} .prd_title .prd_link_box span{font-size:90%;color:var(--point-white);font-weight:300;line-height:1.4;} .prd_title .prd_link_box span strong{font-size:130%;color:inherit;font-weight:600;line-height:1.4;display: block;} .prd_title .prd_box{margin-top:20px;display: flex;flex-wrap:wrap;gap:20px;} .prd_title .prd_box .prd{width:calc(50% - 10px);box-sizing:border-box;background:var(--border-color03);border-radius:var(--radius-20);position:relative;padding:60px 60px;display: flex;align-items: flex-start;justify-content:space-between;aspect-ratio:auto 2.23;} .prd_title .prd_box .txt{position: relative; display: flex;flex-direction: column;gap:30px;text-align:left;flex-shrink:0; z-index: 1;} .prd_title .prd_box .txt span{font-size:120%;color:var(--point-color01);font-weight:500;line-height:1.3;font-family:var(--font-type02);letter-spacing:0;} .prd_title .prd_box .txt strong{font-size:240%;color:var(--black-color00);font-weight:700;line-height:1.4;} .prd_title .prd_box .img{position: absolute;} .prd_title .prd_box .prd:nth-child(1) .img{right:37px;bottom:41px;width:20vw;max-width:384px;} .prd_title .prd_box .prd:nth-child(2) .img{right:15px;bottom:35px;width:22.1vw;max-width:424px;} @media (max-width:1600px) { .prd_title .prd_box .prd{padding:45px 20px;} .prd_title .prd_box .txt{gap:10px;} .prd_title .prd_box .prd:nth-child(1) .img{width:20vw;right:30px;bottom:25px;} .prd_title .prd_box .prd:nth-child(2) .img{bottom:20px;width:22vw;} } @media (max-width:1200px) { .prd_title .prd_box .prd{gap:20px;} .prd_title .prd_box .img{position: static;} .prd_title .prd_box .prd .img{align-self: flex-end;} } @media (max-width:1023px) { .prd_title .prd_box .prd{flex-direction: column;aspect-ratio:initial;} .prd_title .prd_box .txt strong{font-size:clamp(150%, 3.8vw, 200%);} #wrap .prd_title .prd_box .prd .img{width:100%;} } @media (max-width:860px) { .prd_title .prd_link_box a{width:200px;} .prd_title .prd_box{margin-top:0;} } @media (max-width:640px) { .prd_title .prd_link_box a{width:160px;} } @media (max-width:479px) { .prd_title .prd_link_box .box{width:100%;} .prd_title .prd_link_box a{width:calc(50% - 5px);padding:8px 0;} .prd_title .prd_box .prd{padding:20px 15px;width:100%;} .prd_title .prd_box .txt strong{font-size:200%;} } /*series*/ .prd_series{padding:160px 0;} .prd_series .series_name{display: inline-block;border-radius:var(--radius-10);font-size:150%;color:var(--point-white);font-weight:500;line-height:1.8;padding:0 30px;background:var(--point-color09);} .prd_series .page_title h4{color:var(--black-color00);font-family:var(--font-type02);} .prd_feature{display: flex;flex-wrap:wrap;gap:20px;} .prd_feature li{box-sizing:border-box;width:calc(20% - 16px);border-radius:var(--radius-10);padding:30px 30px;background:var(--point-color11);display: flex;flex-direction: column;gap:20px;} .prd_feature li:before{width:30px;aspect-ratio:auto 1;content:"";background:var(--point-color09) url('../images/sub/icon_chk.png')no-repeat center / 12px auto;box-sizing:border-box;border-radius:100%;display: inline-block;} .prd_feature li p{font-size:100%;color:var(--black-color00);font-weight:400;line-height:1.6;} .prd_feature li p strong{display: inline-block;font-size:inherit;color:inherit;font-weight:600;text-decoration: underline;text-decoration-color: var(--point-color14);text-decoration-skip-ink: none;text-underline-offset: -5px;text-decoration-thickness: 12px;} .prd_spec{margin-top:20px;} .prd_spec h5{font-size:170%;color:var(--black-color00);font-weight:500;line-height:1.4;display: flex;align-items: center;gap:10px;margin-bottom:30px;} .prd_spec h5:before{width:12px;aspect-ratio:auto 1;content:"";box-sizing:border-box;border-radius:100%;background:var(--point-color09);} .prd_spec .table_container > .scroll_txt{font-size:var(--title-16);color:var(--black-color03);font-weight:400;margin-bottom:10px;display: none;} .prd_spec .table_container > p{font-size:var(--title-16);color:var(--black-color03);font-weight:400;line-height:1.3;margin-top:20px;} .prd_spec .table_container > p em{font-size:var(--title-18);color:var(--point-color09);font-weight:500;line-height:1.3;} .prd_spec .table_box{box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;border:1px solid var(--border-color01);} .prd_spec .table_box table{border-collapse:collapse;} .prd_spec .table_box table thead tr th{box-sizing:border-box;vertical-align: middle;text-align: center;font-size:100%;color:var(--black-color00);font-weight:600;line-height:1.3;border:1px solid var(--border-color01);border-top:none;background:var(--gray-bg01);padding:17px 5px;} .prd_spec .table_box table tr th:nth-child(1){border-left:none;} .prd_spec .table_box table tr th:last-child, .prd_spec .table_box table tr td:last-child{border-right:none;} .prd_spec .table_box table tbody tr th, .prd_spec .table_box table tbody tr td{box-sizing:border-box;vertical-align: middle;text-align: center;border-bottom:1px solid var(--border-color01);font-size:90%;color:var(--black-color03);font-weight:400;padding:13px 20px;background:var(--point-white);} .prd_spec .table_box table tbody tr th{font-weight:500;} .prd_spec .table_box table tbody tr th em{color:var(--point-color09);} .prd_spec .table_box table tbody tr td{border-left:1px solid var(--border-color01);} .prd_spec .table_box table tbody tr td.tal{text-align:left;} .prd_spec .table_box table tbody tr:last-child th, .prd_spec .table_box table tbody tr:last-child td{border-bottom:none;} /*mal*/ .mal_series .series_name{background:var(--point-color01);} .mal_series .prd_feature li{background:var(--point-white);} .mal_series .prd_feature li:before{background-color:var(--point-color01);} .mal_series .prd_feature li p strong{text-decoration-color: var(--point-color15);} .mal_series .prd_spec h5:before{background:var(--point-color01);} .mal_series .prd_spec .table_container > p em{color:var(--point-color01);} .mal_series .prd_spec .table_box table tbody tr th em{color:var(--point-color01);} @media (max-width:1300px) { .prd_feature li{padding:20px 15px;} } @media (max-width:1100px) { .prd_feature li{width:calc(50% - 10px);gap:5px;padding:30px 20px;} } @media (max-width:1023px) { .prd_series{padding-block:clamp(70px, 16vw, 160px);} .prd_series .series_name{font-size:clamp(120%, 3vw, 150%);padding-inline:clamp(15px, 3vw, 30px);} .prd_spec h5{margin-bottom:clamp(15px, 3vw, 30px);font-size:clamp(140%, 3.4vw, 170%);} .prd_spec .table_container > .scroll_txt{display: block;} .prd_spec .table_container > p{margin-top:10px;} .prd_spec .table_box{overflow-x:auto;} .prd_spec .table_box table{width:130vw;} .prd_spec .table_box table tbody tr th, .prd_spec .table_box table tbody tr td{padding:10px 10px;} .prd_feature li p strong{text-decoration-thickness:clamp(7px, 1.7vw, 12px); text-underline-offset:clamp(-5px, -0.5vw, 0px);} } @media (max-width:640px) { .prd_feature li{padding:20px 15px;width:100%;} .prd_feature li:before{width:22px;background-size:9px auto;} .prd_spec h5{gap:7px;} .prd_spec h5:before{width:8px;} .prd_spec .table_box table{width:160vw;} } @media (max-width:479px) { .prd_spec .table_box table{width:700px;} } /*─────────────────────────────────────────────────────────── 게시판 ───────────────────────────────────────────────────────────*/ /* 인풋 */ #wrap :where([type="text"], [type="password"], select){border:1px solid var(--border-color01);background: var(--point-white);font-size: var(--title-19);font-weight: 400;color: var(--black-color03);line-height: normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:60px;padding: 0 24px;letter-spacing: -0.03em; transition: all 0.4s;border-radius:var(--radius-06);} #wrap :where([type="text"], [type="password"], select)::placeholder{color: var(--black-color06);} #wrap :where([type="text"], [type="password"], select):focus{border-color: var(--black-color00);} #wrap select{width: 100%;max-width: 180px;padding-right:30px;appearance: none;background:var(--point-white) url('../images/sub/sel_arw.svg') no-repeat calc(100% - 20px) / 14px auto;} #wrap input[type="text"]::-webkit-input-placeholder {color:var(--black-color06);} #wrap input[type="password"]::-webkit-input-placeholder {color:var(--black-color06);} #wrap input[type="text"]::-moz-placeholder {color:var(--black-color06);} #wrap input[type="password"]::-moz-placeholder {color:var(--black-color06);} #wrap input[type="text"]:-ms-input-placeholder {color:var(--black-color06);} #wrap input[type="password"]:-ms-input-placeholder {color:var(--black-color06);} #wrap input[type="text"]:-moz-placeholder {color:var(--black-color06);} #wrap input[type="password"]:-moz-placeholder {color:var(--black-color06);} #wrap input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset;-webkit-text-fill-color:var(--black-color03);font-size:inherit;} @media (max-width:1023px) { #wrap :where([type="text"], [type="password"], [type="number"], [type="date"], select){padding-inline: clamp(15px, 2.3vw, 20px);height: clamp(45px, 6.1vw, 60px);} #wrap select{max-width: clamp(110px, 18vw, 180px);padding-right: clamp(24px, 5.5px, 30px);background-position: calc(100% - clamp(15px, 2.3vw, 20px)) 50%;background-size: clamp(8px, 1.9vw, 11px);} } #wrap .search_wrap{position: relative; margin-bottom:40px;} #wrap .search_wrap fieldset{display: flex;gap: 10px; justify-content: flex-end;} #wrap .search_wrap select{flex-shrink: 0;} #wrap .search_wrap .inp_box{position: relative;width: 100%; max-width:440px;} #wrap .search_wrap .inp_box [type="text"]{width: 100%;} #wrap .search_wrap .inp_box button{position: absolute;top: 0;right:0;width:60px;height:100%;background:url('../images/sub/icon_search.svg') no-repeat center / 24px auto;box-sizing:border-box;} @media (max-width:1023px) { #wrap .search_wrap{margin-bottom: clamp(25px, 3vw, 40px);} #wrap .search_wrap .inp_box{max-width: clamp(250px, 40vw, 440px);} #wrap .search_wrap .inp_box button{width:clamp(45px, 6.1vw, 60px);height: clamp(45px, 6.1vw, 60px);background-size:clamp(15px, 2.2vw, 22px);} } @media (max-width:479px) { #wrap .search_wrap fieldset{flex-wrap: wrap;} #wrap .search_wrap select{flex-shrink: unset;max-width: 100%;} #wrap .search_wrap .inp_box{max-width: 100%;} } /* 일반 */ .nodata{position: relative; text-align: center; font-size: var(--title-18); font-weight: 600; color: var(--black-color06); padding-block: 50px;} .bbs_table{position: relative; width: 100%; table-layout: fixed; font-size: var(--title-20); border-top: 2px solid var(--black-color01);} .bbs_table :where(th, td){line-height: 1.3;border-bottom: 1px solid var(--border-color01);padding: 23px 10px;text-align: center;letter-spacing: 0;} .bbs_table th{font-size:90%; font-weight: 500; color: var(--black-color00);} .bbs_table td{font-size:90%;font-weight: 400; color: var(--black-color03);} .bbs_table td.left{text-align: left; padding-inline: 20px; } .bbs_table td.left > div{display: flex;align-items: center;gap:10px;} .bbs_table td.left a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all;color:var(--black-color03);font-weight:500;display:block;max-width:100%;} .bbs_table td br{display: none;} .bbs_table .notice td.left{font-weight:500;} .bbs_table .notice .tag{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;padding:0 15px;height:34px;border:1px solid var(--point-red02);font-size:var(--title-17);color:var(--point-red02);font-weight:600;flex-shrink:0;border-radius:34px;} .bbs_table .for_t{display: none;} .bbs_table.donors td{color: var(--black-color05);} /* over */ @media (hover:hover) and (pointer:fine) { .bbs_table tr:hover td{background:var(--point-color08);} } @media (max-width:1023px) { .bbs_table .notice .tag{padding:0 12px;} } @media (max-width:860px) { .bbs_table{display: block; } .bbs_table thead{display: none;} .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0; padding:0; text-align: left;} .bbs_table tr{padding:20px;display: flex;flex-wrap: wrap;gap: 10px 20px;border-bottom: 1px solid var(--border-color01);} .bbs_table td{width: auto;} .bbs_table .notice .tag{height:28px;padding:0 8px;} .bbs_table td.left{width: 100%; padding: 0;} .bbs_table td.left > div{gap:6px;} .bbs_table td.num{display: none;} .bbs_table .for_pc{display: none;} .bbs_table .for_t{display: inline-block;} } /*gallery*/ .gallery_list{display: flex;flex-wrap:wrap;gap:50px 40px;font-size:var(--title-20);} .gallery_list > li{width:calc(100% / 3 - 26.7px);} .gallery_list > li .thumb{width:100%;box-sizing:border-box;aspect-ratio:auto 1.58;border-radius:var(--radius-10);overflow:clip;border:1px solid transparent;} .gallery_list > li .thumb img{transition:all 0.3s;width:100%;height:100%;object-fit:cover;} .gallery_list > li .thumb:has(.no_img){border-color:var(--border-color01)} .gallery_list > li .txt_info{margin-top:30px;display: flex;flex-direction: column;gap:16px;} .gallery_list > li .txt_info .notice{font-size:80%;color:var(--point-color01);font-weight:500;} .gallery_list > li .txt_info .title{font-size:110%;color:var(--black-color00);font-weight:500;line-height:1.36;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:1;} .gallery_list > li .txt_info .content{font-size:90%;color:var(--black-color03);font-weight:400;line-height:1.66;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp:2;} /* over */ @media (hover:hover) and (pointer:fine) { .gallery_list > li:hover .thumb img{transform:scale(1.1);} } @media (max-width:1023px) { .gallery_list{gap:40px 24px;} .gallery_list > li{width:calc(100% / 3 - 16px);} .gallery_list > li .txt_info{margin-top:clamp(10px, 3vw, 30px);gap:10px;} } @media (max-width:640px) { .gallery_list{gap:30px 15px;} .gallery_list > li{width:calc(100% / 2 - 7.5px);} } @media (max-width:479px) { .gallery_list > li{width:100%;} } /*view*/ .bbs_view{font-size:var(--title-20);padding-top:100px;} .bbs_view .view_title{font-size:var(--title-20);display: flex;flex-direction: column;gap:25px;padding-bottom:39px;border-bottom:1px solid var(--black-color03);} .bbs_view .view_title h3{font-size:180%;color:var(--black-color03);font-weight:500;} .bbs_view .view_title p{font-size:100%;color:var(--black-color05);font-weight:400;font-family:var(--font-type02);} #wrap .bbs_view div.view_cont{border-bottom:1px solid var(--border-color01);padding:30px 0;display: flex;flex-direction: column;justify-content: space-between;} #wrap .sub_board .bbs_view .extra_editor_wrap{display: flex;box-sizing:border-box;border-radius:var(--radius-10);background:var(--gray-bg01);align-items: center;padding:21px 0;border:none;margin-top:40px;} #wrap .sub_board .bbs_view .extra_editor_wrap h4, #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{display: block;font-size:var(--title-20);padding:0;} #wrap .sub_board .bbs_view .extra_editor_wrap h4{text-align: center;font-size:var(--title-18);color:var(--black-color03);font-weight:500;width:140px;flex-shrink:0;background:none;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{box-sizing:border-box;padding:0 30px 0 60px;position: relative;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont:before{width:1px;height:10px;content:"";background:var(--border-color02);display: inline-block;position: absolute;left:0;top:50%;translate:0 -50%;} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont a{font-size:var(--title-18);color:var(--black-color05) !important;font-weight:400;} @media (max-width:1023px) { .bbs_view{padding-top:clamp(60px, 10vw, 100px);} .bbs_view .view_title{gap:12px;padding-bottom:clamp(20px, 4vw, 40px);} #wrap .sub_board .bbs_view .extra_editor_wrap{margin-top:clamp(20px, 4vw, 40px);} #wrap .sub_board .bbs_view .extra_editor_wrap h4{width:clamp(90px, 14vw, 140px);} #wrap .sub_board .bbs_view .extra_editor_wrap > div.extra_cont{padding:0 clamp(10px, 3vw, 30px) 0 clamp(20px, 6vw, 60px);} } @media (max-width:479px) { .bbs_view .view_title h3{font-size:150%;} } /*write*/ .board_write_wrap{padding-top:100px;} #wrap .board_write{position: relative; display: block; width: 100%; text-align: left; font-size: var(--title-20);box-sizing:border-box;border-top:1px solid var(--black-color01);border-bottom:1px solid var(--border-color01);padding:40px 0;} #wrap .board_write :where{display: block; width: 100%;} #wrap .board_write tbody{display: flex; gap:20px 96px;flex-wrap: wrap;} #wrap .board_write tr{display: flex;align-items: center;100%;background: var(--point-white);width:100%;width: calc(50% - 48px);} #wrap .board_write th{width:150px;flex-shrink: 0;font-size: 100%;font-weight: 500;color: var(--black-color03);box-sizing:border-box;} #wrap .board_write th label{display: block; width: 100%;} #wrap .board_write th em{font-weight: inherit; color: var(--point-color01);display: inline-block;} #wrap .board_write td{width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color00);} #wrap .board_write input:where([type="text"], [type="password"]){max-width:100%;width: 100%;font-size: inherit;font-weight: inherit;color: inherit;} #wrap .board_write tr.title, #wrap .board_write tr.contents, #wrap .board_write tr.file, #wrap .board_write tr.captcha{width:100%;} #wrap .board_write tr.contents{align-items: flex-start;} #wrap .board_write tr.contents th{line-height:60px;} #wrap .board_write td textarea{width:100%;box-sizing:border-box;height:250px;resize:none;border:1px solid var(--border-color01);font-size: var(--title-18);color: var(--black-color03);font-weight:400;padding:20px 15px;border-radius:var(--radius-06);} #wrap .bbs_write_box .file_box{display: flex;gap:10px;width:495px;} #wrap .bbs_write_box .file_box .file_txt{width:calc(100% - 150px);height:60px;box-sizing:border-box;padding-inline:15px;display: inline-flex;align-items: center;border:1px solid var(--border-color01);border-radius:var(--radius-06);} #wrap .bbs_write_box .file_box label{cursor:pointer;display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:140px;height:60px;border:1px solid var(--black-color00);font-size:var(--title-18);color:var(--black-color00);font-weight:500;border-radius:var(--radius-06);} #wrap .bbs_write_box .captcha_td{display: flex;gap:10px;} #wrap .bbs_write_box .captcha_wrap {display: flex;gap: 10px;padding:10px;width: 225px;box-shadow: inset 0 0 0 1px var(--border-color01);border-radius:var(--radius-06);box-sizing:border-box;} #wrap .board_write #captcha_box{width: 155px;height: 38px;overflow: hidden;box-sizing:border-box;border:1px solid var(--border-color01);border-radius:var(--radius-06);} #wrap .board_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height:none;margin: -1px 0 0 -1px;} #wrap .board_write #refreshCode{width: 40px;height: 40px;font-size: 0;box-sizing:border-box;background:url('../images/sub/refreshCode.svg') no-repeat center;cursor: pointer;border:1px solid var(--border-color01);border-radius:var(--radius-06);} #wrap .bbs_write_box .captcha_wrap + input{width:260px;} #wrap .policy_wrap {margin-top:40px; box-sizing: border-box;} #wrap .policy_wrap label:has([type="checkbox"]) strong{color:var(--point-color01);font-weight:500;} #wrap .policy_wrap .area_box {width: 100%;margin-top: 20px;padding-inline: 9px; box-sizing: border-box;border-radius:var(--radius-10);border:1px solid var(--border-color01)} #wrap .policy_wrap .area_box textarea {width: 100%;height:160px;padding-block: 20px 16px; padding-inline: 10px; box-sizing: border-box;color: var(--black-color07);font-size: var(--title-18);line-height: 1.6;letter-spacing: 0;border: none;resize: none;background: var(--trans-color);outline: none;} #wrap .policy_wrap .area_box textarea::-webkit-scrollbar {width: 4px;} #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color10); border-radius: 2px;} #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background: var(--border-color01);margin-block: 10px; } @media (max-width:1023px) { #wrap .board_write{padding:30px 0;} #wrap .board_write tbody{gap:20px 60px;} #wrap .board_write tr{width:100%;} #wrap .board_write input:where([type="text"], [type="password"]){max-width:100%;} #wrap .board_write tr.contents th{line-height:clamp(40px, 6.1vw, 60px);} #wrap .bbs_write_box .file_box{width:100%;} #wrap .bbs_write_box .file_box .file_txt, #wrap .bbs_write_box .file_box label{height:clamp(40px, 6.1vw, 60px);} #wrap .bbs_write_box .captcha_wrap + input{width:calc(100% - 235px);height:60px;} #wrap .policy_cont{margin-top: clamp(20px, 3vw, 30px);} } @media (max-width:860px) { #wrap .policy_wrap{margin-top:30px;} } @media (max-width:640px) { #wrap .board_write th{width: 140px;} #wrap .board_write td textarea{height:250px;padding:15px 10px;} #wrap .board_write td:has(.cap_wrap){flex-wrap: wrap;} #wrap .bbs_write_box .captcha_td{flex-direction: column;align-items: flex-start;} #wrap .bbs_write_box .captcha_wrap{width:auto;} #wrap .board_write #captcha_box{width: 160px;height: 35px;} #wrap .board_write #refreshCode{width: 35px;height: 35px;background-size: 13px auto;} #wrap .bbs_write_box .captcha_wrap + input{width:100%;height:clamp(40px, 6.1vw, 60px)} } @media (max-width:479px) { #wrap .board_write{padding:25px 0;} #wrap .board_write tr{flex-wrap: wrap;min-height: auto;padding:0;gap:10px;} #wrap .board_write th{width: 100%; padding-right: 0; flex-shrink: unset; font-size: 100%;} #wrap .bbs_write_box .file_box label{width:90px;} #wrap .bbs_write_box .file_box .file_txt{width:calc(100% - 100px);} } /*─────────────────────────────────────────────────────────── team ───────────────────────────────────────────────────────────*/ .team_list{font-size:var(--title-20);} .team_list > li{position: relative;box-sizing:border-box;display: flex;align-items: center;gap: clamp(70px, 5.3vw, 100px);} .team_list > li + li:before{width:100%;height:1px;content:"";background:var(--border-color01);position: absolute;top:-80px;left:0;} .team_list > li .thumb{box-sizing:border-box;border-radius:var(--radius-10);overflow:clip;width: 23.13%;aspect-ratio: auto 0.77;flex-shrink:0;} .team_list > li .thumb img{width:100%;height:100%;object-fit:cover;} .team_list > li .txt_box{width: 100%;} .team_list > li .txt_box .name_box{display: flex;align-items: center;gap: 10px 26px;flex-wrap: wrap;} .team_list > li .txt_box .name_box .position{font-size:140%;color:var(--point-color01);font-weight:600;line-height:1.3;} .team_list > li .txt_box .name_box .name{font-size:250%;color:var(--black-color00);font-weight:700;line-height:1.3;letter-spacing:0;} .team_list .career{margin-top:50px;display: flex;flex-direction: column;gap:24px;} .team_list .career > li{box-sizing:border-box;position: relative;padding-left:37px;} .team_list .career > li:before{width:16px;height:13px;content:"";background:url('../images/sub/icon_chk.png')no-repeat center;position: absolute;left:0;top:12px;background-size:auto 100%;filter: brightness(0) saturate(100%) invert(7%) sepia(65%) saturate(5005%) hue-rotate(233deg) brightness(97%) contrast(89%);} .team_list .career > li > p{font-size:120%;color:var(--black-color03);font-weight:500;line-height:1.6;} .team_list .career .bullet_list{margin-top:12px;} .team_list .career .bullet_list li{font-size:var(--title-20);color:var(--black-color05);letter-spacing:0;} .team_list .career .bullet_list li:before{background:var(--black-color05);} @media (max-width:1023px) { .team_list > li{gap: clamp(50px, 7vw, 70px);} .team_list > li + li:before{top:calc(clamp(80px, 16vw, 160px) / -2);} .team_list > li .thumb{width:32%;} .team_list .career{margin-top:clamp(20px, 5vw, 50px);} } @media (max-width:860px) { .team_list .career > li{padding-left:27px;} } @media (max-width:640px) { .team_list > li{flex-direction: column;align-items: flex-start;gap:30px;} .team_list > li .thumb{width:61%;} .team_list > li .txt_box .name_box{gap:10px;} .team_list .career{gap:12px;} } @media (max-width:479px) { .team_list > li .thumb{width:70%;margin:0 auto;} .team_list > li .txt_box .name_box .position{font-size:120%;} .team_list > li .txt_box .name_box .name{font-size:200%;} .team_list .career > li:before{width:14px;height:11px;top:10px;} } /*─────────────────────────────────────────────────────────── history ───────────────────────────────────────────────────────────*/ .history_wrap{display: flex;align-items: flex-start;gap: clamp(40px, 8.4vw, 160px);font-size:var(--title-20);padding-top:20px;} .history_wrap .history_img_box{position: sticky;top:140px;left:0;width:40%;padding-top:4px;flex-shrink: 0;} .history_img_box .title{display: flex;flex-direction: column;gap:30px;} .history_img_box .title h4{font-size:350%;color:var(--point-color01);font-weight:700;line-height:1.4;letter-spacing:-0.03em;} .history_img_box .title p{font-size:120%;color:var(--black-color01);font-weight:400;line-height:1.6;opacity:0.8;} .history_img_box .img_box{margin-top:60px;box-sizing:border-box;border-radius:var(--radius-20);overflow:clip;width:100%;aspect-ratio:1.6;} .history_img_box .img_box img{width:100%;height:100%;object-fit:cover;} .history_box{width: 100%;} .history_box > ol{display: flex;flex-direction: column;gap:120px;} .history_box > ol > li{display: flex;flex-direction: column;gap:51px;} .history_box h5{font-size:200%;color:var(--black-color00);font-weight:600;line-height:1.4;display: flex;align-items: center;justify-content: space-between;} .history_box .month{display: flex;flex-direction: column;gap:40px;} .history_box .month dl{display: flex;align-items: flex-start;gap:55px;} .history_box .month dl dt{width: 120px;font-size:110%;color:var(--black-color03);font-weight:500;line-height:1.4;font-family:var(--font-type02);text-align: right;letter-spacing:0.01em;flex-shrink: 0;} .history_box .month dl dd{display: flex;align-items: flex-start;justify-content: space-between;width: 100%;box-sizing:border-box;padding-right:50px;gap:10px;} .history_box .bullet_list li{font-size:var(--title-20);color:var(--black-color03);gap:10px;} .history_box .bullet_list li span{display: block;margin-top:10px;font-size:90%;color:var(--black-color06);font-weight:400;line-height:1.4;} .history_box .bullet_list li:before{background:var(--black-color10);width:4px;} @media (max-width:1300px) { .history_wrap{gap:40px;} } @media (max-width:1023px) { .history_img_box .title{gap:clamp(10px, 3vw, 30px);} .history_img_box .title .img{height:clamp(30px, 4.6vw, 46px);} .history_img_box .title h4{font-size:clamp(250%, 6vw, 350%);} .history_img_box .img_box{margin-top:clamp(30px, 6vw, 60px);} .history_box > ol{gap:clamp(60px, 12vw, 120px);} .history_box > ol > li{gap:clamp(20px, 5vw, 51px);} .history_box .month{gap:clamp(20px, 4vw, 40px);} .history_box .month dl{gap: 12px clamp(20px, 5.5vw, 55px);} .history_box .month dl dt{width:110px;} .history_box .month dl dd{padding-right:0;} .history_box h5 .img, .history_box .month dl dd .img{max-width:10vw;} } @media (max-width:767px) { .history_wrap{padding-top:0; flex-wrap:wrap;} .history_wrap .history_img_box{padding:0;width:100%;position: relative;inset: auto;flex-shrink: unset;} .history_box{width:100%;} .history_box .month dl dd .img{max-width:21vw;} .history_box h5 .img{max-width:38vw;} } @media (max-width:479px) { .history_box .month dl dt{width:100px;} .history_box .month dl dd{flex-direction: column;width:100%;} .history_box .month dl dd .img{margin-left:15px;} } @media (max-width:360px) { .history_box .month dl{flex-wrap: wrap;} .history_box .month dl dt{width:100%;flex-shrink: unset;text-align: left;} .history_box .month dl dd{flex-direction: column;width:100%;} .history_box .month dl dd .img{margin-left:15px;} } /*─────────────────────────────────────────────────────────── partner ───────────────────────────────────────────────────────────*/ .sub_parnter{font-size:var(--title-20);} .sub_parnter .sustain_global{display: flex;align-items: center;justify-content: space-between;gap:30px;padding-bottom: 160px;} .sub_parnter .sustain_global dl{box-sizing:border-box;border-radius:var(--radius-20);border:1px solid var(--border-color01);padding:30px 30px;position: relative;} .sub_parnter .sustain_global dl.asis{width:43.8%;} .sub_parnter .sustain_global dl.tobe{border-color:transparent;width:46.3%;} .sub_parnter .sustain_global dl.tobe:before{width:100%;height:100%;content:"";box-sizing:border-box;border-radius:var(--radius-20);border:2px solid var(--point-color01);box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);position: absolute;top:0;left:0;pointer-events:none;} .sub_parnter .sustain_global dl dt{display: flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;border-radius:var(--radius-10);font-size:120%;color:var(--point-white);font-weight:500;line-height:1.6;padding:16px 10px;background:var(--black-color08);margin-bottom:20px;} .sub_parnter .sustain_global dl dd{text-align: center;} .sub_parnter .sustain_global dl.tobe dt{background:var(--point-color01);} @media (max-width:1023px) { .sub_parnter .sustain_global{padding-bottom:clamp(70px, 16vw, 160px);} .sub_parnter .sustain_global dl{padding:20px 20px;} .sub_parnter .sustain_global dl.asis{width:43%;} .sub_parnter .sustain_global dl.tobe{width:47%;} .sub_parnter .sustain_global .arw{width:60px;} } @media (max-width:860px) { .sub_parnter .sustain_global{flex-direction: column;} #wrap .sub_parnter .sustain_global dl{width:100%;text-align: center;} .sub_parnter .sustain_global .arw{transform:rotate(90deg);} } @media (max-width:479px) { .sub_parnter .sustain_global{gap:20px;} .sub_parnter .sustain_global dl dt{padding:12px 10px;margin-bottom:10px;} .sub_parnter .sustain_global .arw{width:50px;} } .tech_global{padding:160px 0 180px;} .sub_parnter .page_title h4{color:var(--black-color00);font-family:var(--font-type02);letter-spacing:0;} .tech_global ul{display: flex;flex-wrap:wrap;gap:35px 35px;} .tech_global ul li{box-sizing:border-box;width:calc(100% / 3 - 23.4px);border-radius:var(--radius-20);border:1px solid var(--border-color01);background:var(--point-white);padding:0 20px 20px;} .tech_global ul li dl dt{width: 100%;aspect-ratio: auto 2.92;overflow:clip;} .tech_global ul li dl dt img{width:100%;height:100%;object-fit:cover;} .tech_global ul li dl dd{display: flex;align-items: center;justify-content: center;box-sizing:border-box;border-radius:var(--radius-10);background:var(--point-color08);font-size:120%;color:var(--black-color00);font-weight:500;line-height:1.6;padding:16px 10px;text-align: center;} @media (max-width:1023px) { .tech_global{padding:clamp(70px, 16vw, 160px) 0 clamp(90px, 18vw, 180px);} .tech_global ul{gap:24px;} .tech_global ul li{width:calc(100% / 3 - 16px);padding:0 15px 15px;} .tech_global ul li dl dd{font-size:100%} } @media (max-width:767px) { .tech_global ul{gap:15px;} .tech_global ul li{width:calc(100% / 2 - 7.5px);} } @media (max-width:479px) { .tech_global ul li{padding:0 10px 10px;} .tech_global ul li dl dd{padding:10px 5px;font-size:80%;} } @media (max-width:350px) { .tech_global ul{gap:10px;} .tech_global ul li{width:calc(100% / 2 - 5px);} .tech_global ul li dl dd{font-size:70%;} } .general_global{padding:160px 0 180px;} .general_global ul{display: flex;flex-wrap:wrap;gap:35px 35px;} .general_global ul li{box-sizing:border-box;width:calc(100% / 3 - 23.4px);border-radius:var(--radius-20);border:1px solid var(--border-color01);aspect-ratio:auto 3.2;overflow:clip;} .general_global ul li img{width:100%;height:100%;object-fit:cover;} @media (max-width:1023px) { .general_global{padding:clamp(70px, 16vw, 160px) 0 clamp(90px, 18vw, 180px);} .general_global ul{gap:24px;} .general_global ul li{width:calc(100% / 3 - 16px);} } @media (max-width:767px) { .general_global ul{gap:15px;} .general_global ul li{width:calc(100% / 2 - 7.5px);} }