@charset "utf-8"; /*─────────────────────────────────────────────────────────── " board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods " " layout/popup.html " 위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다. ** header, footer, main 관련은 /css/skin.css 에 있습니다. ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── common.css 커스텀 css 아래에 작성 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── ** navigation, button 관련 css 영역 ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── button common ───────────────────────────────────────────────────────────*/ .btn, .btn_lg, .btn_sm, .btn_md {position: relative;display: inline-flex;align-items: center;justify-content: center;border:1px solid;font-weight: 600;box-sizing: border-box;font-family: var(--font-type02);color: var(--black-color00); line-height: 1.2; border-radius: 0; overflow: hidden;} .btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;} .btn {min-width: 180px;height: 60px;padding: 0 20px;font-size: 110%;} .btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;} .btn_md {width:60px;line-height:28px;height:30px;font-size:13px;} .btn_sm {height:30px;line-height:28px;width:auto;padding:0 8px;font-size:inherit;border-color:#aaa;background-color:#aaa;color:#fff;} #wrap .btn_point{border-color: var(--point-color01);background-color: var(--point-color01);color: var(--point-white);} #wrap .btn_wh{border-color: var(--point-white);background-color: var(--point-white);color: var(--black-color00);} #wrap .btn_basic{border-color:#777;background-color:#777;color:#fff;} #wrap .btn_default{border-color:#aaa;background-color:#aaa;color:#fff;} #wrap .btn_info{border-color:#d3d3d3;background-color:#fff;color:#555;} #wrap .btn_reset{border-color:#d3d3d3;background:#fff url('../images/common/icon_btn_reset.gif') no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;} .btn_wrap {margin: 0;padding: 50px 0 0;display:inline-flex;justify-content: center;flex-wrap: wrap;gap: 15px;font-size: var(--title-20);} .btn_wrap button > a, .btn_wrap a > a{margin-left:0;} .view_btn .btn_wrap.ta_right {position:absolute;right:0;top:0;} @media (max-width:1023px) { .btn_wrap{padding-top: clamp(30px, 5vw, 50px);} .btn {min-width: 170px;height: 55px;} } @media (max-width:860px) { .btn {min-width: 160px;height: 50px;} } @media (max-width:640px) { .btn {min-width: 150px;} } @media (max-width:479px) { .btn_wrap{gap: 10px;} .btn {min-width: 130px;height: 45px; font-size: 100%;} } /*─────────────────────────────────────────────────────────── 서브 공통 ───────────────────────────────────────────────────────────*/ /* 비주얼 */ #wrap .sub_visual{position: relative; width: 100%; overflow: hidden; box-sizing: border-box; } #wrap .sub_visual .swiper-slide{height: auto; background: var(--point-color04); box-sizing: border-box;} #wrap .sub_visual .thumb{position: absolute;top: 0;right: -116px;width: 836px;height: calc(100% + 1px);} #wrap .sub_visual .thumb:before{position: absolute;content:'';width: 128px;height: 57%;background: var(--point-grad01);right: -14px;top: 0;z-index: 3;clip-path: var(--polygon-path05);} #wrap .sub_visual .thumb:after{position: absolute;content:'';width: 120px;height: 38%;background: var(--point-grad03);left: -28px;bottom:0;z-index: 3;clip-path: var(--polygon-path06);} #wrap .sub_visual .thumb span{display: block; width: 100%; height: 100%;} #wrap .sub_visual .thumb span:has(.video):before{position: absolute; content:''; width: 78px; height: 50px; background: rgba(21, 9, 7, 0.9); border-radius: var(--radius-03); top:50%; left:50%; transform: translate(-50%, -50%); z-index: 3;} #wrap .sub_visual .thumb span:has(.video):after{position: absolute;content:'';border:10px solid var(--trans-color);border-left: 16px solid var(--point-white);top:50%;left: calc(50% + 6px);transform: translate(-50%, -50%);z-index: 4;} #wrap .sub_visual .thumb img{position: relative;width: 100%;height: 100%;object-fit: cover;clip-path: var(--polygon-path04);} #wrap .sub_visual .txt_wrap{position: relative;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;font-size: var(--title-20);color: var(--point-white);gap: 12px;z-index: 5;width: 100%;max-width: 540px;margin-top: -0.5px;padding-block: 30px;min-height: 360px;box-sizing: border-box;} #wrap .sub_visual .txt_wrap:has(.top_sec){max-width: 660px;} #wrap .sub_visual .top_sec{position: relative;padding-bottom: 20px;margin-bottom: 5px;display: flex;flex-direction: column;gap: 2px;width: 100%;} #wrap .sub_visual .top_sec:after{position: absolute;content:'';left:0;bottom:0;width: 100%;height: 1px;background: var(--point-white);} #wrap .sub_visual .txt_wrap h2{position: relative; width: fit-content; background: var(--point-grad01); background-clip: text; color:var(--trans-color); font-size: 400%; font-weight: 700; line-height: 1.12; } #wrap .sub_visual .txt_wrap h2 + h5{margin-top:2px;} #wrap .sub_visual .txt_wrap h3{position: relative; width: fit-content; background: var(--point-grad01); background-clip: text; color:var(--trans-color); font-size: 250%; font-weight: 700; line-height: 1.12; padding-bottom: 10px; } #wrap .sub_visual .txt_wrap h3:after{position: absolute; content:''; width: 100vw; max-width: 537px; height: 1px; background: var(--point-white); left:0; bottom:0;} #wrap .sub_visual .txt_wrap h4{position: relative; width: fit-content; background: var(--point-grad01); background-clip: text; color:var(--trans-color); font-size: 200%; font-weight: 600; line-height: 1.2; } #wrap .sub_visual .txt_wrap h5{font-size: 90%; font-weight: 400; line-height: 1.44;} #wrap .sub_visual .txt_wrap h5 big{font-size: 144%;font-weight: 700;line-height: 1.38;} #wrap .sub_visual .txt_wrap h6{font-size: max(13px, 75%);font-weight:300;line-height: 1.6;font-family: var(--font-type02);} #wrap .sub_visual .bullet_list li{font-size: 90%;filter: var(--filter-white);letter-spacing: -0.01em;} #wrap .sub_visual .bullet_list li + li{padding-top: 1px;} #wrap .sub_visual .bullet_list li:before{width: 4px; height: 4px;} #wrap .sub_visual .bullet_list li em{font-weight: 600;} #wrap .sub_visual .see_more{margin-top: 17px;} #wrap .sub_visual .tag_list{display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;} #wrap .sub_visual .tag_list .see_more{margin:0;} #wrap .sub_visual .swiper-pagination{position: absolute;width: 100%;inset: auto auto 20px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 10px;padding-inline: 15px;box-sizing: border-box;} #wrap .sub_visual .swiper-pagination span{width: 10px;height: auto;aspect-ratio: auto 1;margin: 0;background: var(--border-color01);opacity: 1;display: inline-block;border-radius: 100%;transition: all 0.4s;} #wrap .sub_visual .swiper-pagination .swiper-pagination-bullet-active{background: var(--point-color03);} #wrap .sub_visual .m_top_box{display: none;} #wrap .sub_visual .swiper-slide.dep{background: var(--point-color09);} #wrap .sub_visual .swiper-slide.dep .txt_wrap{min-height: 860px;padding-block: 70px;} #wrap .sub_visual .lm75 .thumb{width: auto;} #wrap .sub_visual .lm75 .thumb img{width: auto;height: auto;transform: translate(76px, 5px);z-index: 5; clip-path: none;} #wrap .sub_visual .lm75 .thumb:before{width: 470px;height: 77%;right: -50px; background: var(--point-grad04); clip-path: var(--polygon-path08)} #wrap .sub_visual .lm75 .thumb:after{width: 220px;height: 43%;left: 5%;clip-path: var(--polygon-path09);background: var(--point-grad05);} #wrap .sub_visual .cm65 .thumb{width: auto;max-width: 80%;display: flex;align-items: center;justify-content: center;} #wrap .sub_visual .cm65 .thumb img{width: auto;height: auto;transform: translate(-32px, 12px);z-index: 5;clip-path: none;} #wrap .sub_visual .cm65 .thumb:before{width: 470px;height: 77%;right: -50px; background: var(--point-grad04); clip-path: var(--polygon-path08)} #wrap .sub_visual .cm65 .thumb:after{width: 220px;height: 43%;left:-7%;clip-path: var(--polygon-path09);background: var(--point-grad05);} @media (max-width:1200px){ #wrap .sub_visual.img_visual .thumb{width:70%;} #wrap .sub_visual.img_visual .txt_wrap{width:45%;} #wrap .sub_visual.img_visual .txt_wrap br{display: none;} } @media (max-width:1023px){ #wrap .sub_visual .thumb{right:-12vw;width: clamp(600px, 83.6vw, 836px);} #wrap .sub_visual .txt_wrap{text-wrap:balance;} #wrap .sub_visual .txt_wrap h3{font-size: 230%;} #wrap .sub_visual .txt_wrap h4{font-size: 180%;} #wrap .sub_visual .txt_wrap h6{text-shadow: 1px 1px 1px rgba(0,0,0,0.7);} #wrap .sub_visual .see_more span{font-size: 95%;} #wrap .sub_visual.img_visual .txt_wrap h3{font-size: 230%;width:100%;} #wrap .sub_visual.img_visual .txt_wrap h3:after{width:100%;} #wrap .sub_visual .swiper-slide.dep .txt_wrap{min-height:initial;} #wrap .sub_visual .dep .txt_wrap:has(.top_sec){padding-top:0;max-width:100%;transform:translateY(-60px);} #wrap .sub_visual .swiper-slide.dep .txt_wrap.m_top_box{padding:30px 0 0 0;} #wrap .sub_visual .m_top_box{display:flex;} #wrap .sub_visual .dep .thumb{position: relative;height:auto;right:0;} #wrap .sub_visual .sub_top_sec{display: none;} #wrap .sub_visual .cm65 .thumb img{transform:translate(-10px, -100px);} #wrap .sub_visual .cm65 .thumb:before{top:-50%;right:-39%;} #wrap .sub_visual .cm65 .thumb:after{bottom:14%;left:-10%;} #wrap .sub_visual .lm75 .thumb img{transform:translate(105px, -200px);} #wrap .sub_visual .lm75 .thumb:before{top:-30%;right:-6%;} #wrap .sub_visual .lm75 .thumb:after{bottom:14%;left:-10%;} #wrap .sub_visual .lm75 .txt_wrap:has(.top_sec){padding:0;transform:translateY(-170px);} } @media (max-width:860px){ #wrap .sub_visual .lm75 .thumb:before{width:410px;right:-10%;} #wrap .sub_visual .lm75 .thumb img{transform:translate(15px, -160px);} #wrap .sub_visual .lm75 .txt_wrap:has(.top_sec){transform:translateY(-130px);} #wrap .sub_visual.img_visual:after{position: absolute;content: '';width: 120px;height:140px;background: var(--point-grad03);left:10px;bottom: 0;z-index: 3;clip-path: var(--polygon-path06);} #wrap .sub_visual.img_visual .swiper-slide .w_custom{display: flex;flex-direction: column-reverse;justify-content: space-between;height:100%} #wrap .sub_visual.img_visual .thumb{width:100%;position:relative;right:-15px;clip-path:polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%);} #wrap .sub_visual.img_visual .thumb:before{display: none;} #wrap .sub_visual.img_visual .thumb:after{display: none;} #wrap .sub_visual.img_visual .thumb img{clip-path:none;} #wrap .sub_visual.img_visual .thumb img.mcx_img{margin-left:50px;} #wrap .sub_visual.img_visual .txt_wrap{width:100%;max-width:100%;min-height:initial;justify-content: flex-start;} #wrap .sub_visual.img_visual .txt_wrap h3{width:fit-content;} #wrap .sub_visual.img_visual .txt_wrap h3:after{width:100vw;} } @media (max-width:767px){ #wrap .sub_visual .cm65 .thumb:before{right:-40%;width:420px;height:93%;;} #wrap .sub_visual .cm65 .thumb img{transform:translate(40px, -69px);} } @media (max-width:640px){ #wrap .sub_visual .thumb{right:-260px} #wrap .sub_visual .txt_wrap h3{font-size: 210%;} #wrap .sub_visual .txt_wrap h4{font-size: 160%;} #wrap .sub_visual .see_more{margin-top: 12px;} #wrap .sub_visual .cm65 .thumb:before{right: -52%;width: 400px;height: 100%;} #wrap .sub_visual .cm65 .thumb:after{width:220px;height:58%;} #wrap .sub_visual .lm75 .thumb:before{width:250px;height:80%;top:-40%;right:-10%;clip-path:var(--polygon-path04);} #wrap .sub_visual .lm75 .thumb:after{bottom:30%;} #wrap .sub_visual.img_visual:after{height:100px;left:-10px;} #wrap .sub_visual.img_visual .thumb:after{left:-46px;transform:none;} } @media (max-width:479px){ #wrap .sub_visual .txt_wrap h3{font-size: 190%;} #wrap .sub_visual .txt_wrap h4{font-size: 140%;} #wrap .sub_visual .cm65 .thumb img{transform:translate(30px, -60px);width:130%;max-width:initial;} #wrap .sub_visual .cm65 .thumb:before{width:96%;height:136%;right:-65%;top:-83%;clip-path:var(--polygon-path04);} #wrap .sub_visual .cm65 .thumb:after{width:106px;height:60%;left:-16%;bottom:14%;clip-path:var(--polygon-path06);} #wrap .sub_visual .cm65 .txt_wrap:has(.top_sec){padding-bottom:0;} #wrap .sub_visual .lm75 .thumb img{transform:translate(-38px, -140px);width:115vw;max-width:initial;} #wrap .sub_visual .lm75 .thumb:before{width:75%;height:109%;right:-43%;top:-82%;clip-path:var(--polygon-path04);} #wrap .sub_visual .lm75 .thumb:after{width:106px;height:46%;left:-16%;bottom:30%;clip-path:var(--polygon-path06);} #wrap .sub_visual .lm75 .txt_wrap:has(.top_sec){transform:none;margin-top:-160px;padding-bottom:60px;} #wrap .sub_visual.img_visual:after{width:100px;left:-46px;bottom:-50px;height:164px;} #wrap .sub_visual.img_visual .thumb{width:140vw;height:66vw;right:27%;clip-path:polygon(34% 0%, 100% 0%, 100% 100%, 0% 166%);} #wrap .sub_visual.img_visual .thumb img.mcx_img{margin-left:32px;} #wrap .sub_visual.img_visual .thumb img.safety_img{margin-left:-38px;} #wrap .sub_visual.img_visual .thumb img.int_img{margin-left:54px;} } @media (max-width:375px){ #wrap .sub_visual.img_visual .thumb:after{left:6%;} } @media (max-width:360px){ #wrap .sub_visual .lm75 .thumb:before{width:80%;right:-33%;} #wrap .sub_visual .lm75 .thumb:after{height:54%;bottom:23%; #wrap .sub_visual.img_visual .thumb img.int_img{margin-left:38px;}} } @media (max-width:350px){ #wrap .sub_visual.img_visual .thumb:after{left:1%;} } @media (max-width:320px){ #wrap .sub_visual.img_visual:after{left: -58px;bottom: -79px;height:176px;} } @media (max-width:280px){ #wrap .sub_visual.img_visual .thumb:after{left:0;height:173px;width:100px;bottom:-74px;} } /* 버튼 */ #wrap .see_more{position: relative;display: flex;width: fit-content;padding:1px;background: var(--point-white);font-size: var(--title-20);font-family: var(--font-type01);clip-path: var(--polygon-path02);box-sizing: border-box;height: 38px;} #wrap .see_more span{position: relative;display: flex;align-items: center;justify-content: center;height: 100%; padding-top: 1px; padding-inline: 15px 17px;clip-path: inherit;box-sizing: border-box;gap: 11px;transition: all 0.4s;font-size: 105%;font-weight: 400;color: var(--point-white); background: var(--point-color04);} #wrap .see_more span:before{position: absolute;content:''; top:0; left:0; width: 100%; height: 100%; background: inherit;z-index: -1; } #wrap .see_more:where(button, a) span:after{display: inline-flex;content:'';width: 10px;aspect-ratio: auto 1;border:solid var(--point-color02);border-width: 2px 2px 0 0;box-sizing: border-box;transform: rotate(45deg) translateY(-1px);filter: var(--filter-white);transition: all 0.4s;} #wrap .see_list{display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 50px;} #wrap .see_more.sm{height: 23px;clip-path: var(--polygon-path01);} #wrap .see_more.sm span{gap: 2px;font-size: max(13px, 65%);font-weight: 500;padding-inline: 10px;padding-top: 1px;} #wrap .see_more.md{height: 26px; clip-path: var(--polygon-path01);} #wrap .see_more.md span{gap: 6px;font-size: max(13px, 75%);font-weight: 400;padding-inline: 10px;padding-top: 1px;} #wrap .see_more.xmd{height: 40px; } #wrap .see_more.xmd span{font-size: 80%; padding-inline: 12px;} #wrap .see_more.lg{height: 50px; clip-path: var(--polygon-path02);} #wrap .see_more.lg span{font-size: 115%; font-weight: 500; gap: 7px;} #wrap .see_more.wh{background: var(--point-color02); } #wrap .see_more.wh span{background: var(--point-white); color: var(--point-color02);} #wrap .see_more.wh span:after{filter: none;width: 7px;} #wrap .see_more.light span{background: var(--point-color01);} #wrap .see_more.gray{background: var(--border-color02);} #wrap .see_more.gray span{background: var(--point-white); color: var(--point-color03);} #wrap .see_more.dep span{background: var(--point-color09);} /* over */ @media (hover:hover) and (pointer: fine){ #wrap .see_more:where(button, a):hover span{background: var(--point-white); color: var(--point-color02);} #wrap .see_more:where(button, a):hover span:after{filter: none;} #wrap .see_more.wh:where(button, a):hover span{color: var(--point-white); background: var(--point-color02);} #wrap .see_more.wh:where(button, a):hover span:after{filter: var(--filter-white);} #wrap .see_more.light:where(button, a):hover span{background: var(--point-color03); color: var(--point-white);} #wrap .see_more.light:where(button, a):hover span:after{filter: var(--filter-white);} } @media (max-width:1023px){ #wrap .see_list{gap: 15px; margin-top: clamp(30px, 5vw, 50px);} } @media (max-width:860px){ #wrap .see_more.lg span{font-size: 105%;} #wrap .see_more span:after{width: 8px;} } @media (max-width:640px){ #wrap .see_more{height: 35px;} #wrap .see_more span{gap: 8px;} #wrap .see_more.lg{height: 40px;} #wrap .see_more.xmd{height: 36px;} } @media (max-width:479px){ #wrap .see_more{height: 32px;} } /* 타이틀 */ #wrap .sub_title{position: relative; font-size: var(--title-20); box-sizing: border-box;} #wrap .sub_title.hd{margin-bottom: 10px;} #wrap .sub_title h5{font-size: 140%; font-weight: 700; color: var(--black-color00);} #wrap .sub_title h5 em{font-weight: 700; color: var(--point-color01);} /*컨텐츠 타이틀*/ .cont_title{position: relative; font-size:var(--title-20); box-sizing: border-box;} .cont_title h4{width: fit-content;background: var(--point-grad01);background-clip: text;color: var(--trans-color);font-size: 200%;font-weight: 700;line-height: 1.25;position: relative;padding-bottom:11px;margin-bottom:14px;} .cont_title h4:before{width:100%;height:5px;content:"";background: var(--point-grad01);position: absolute;bottom:0;left:0;} .cont_title h5{font-size:140%;color:var(--point-color01);font-weight:700;line-height:1.21;margin-bottom:18px;} .cont_title ul + h5{margin-top:30px;} .cont_title p{font-size: max(14px, 75%);color:var(--black-color00);font-weight:400;font-family:var(--font-type02);line-height:1.6;letter-spacing:-0.028em; } .cont_title p + p{margin-top:0;} .cont_title p big{font-size: 106%; font-weight: inherit; color: var(--point-color03);} .cont_title h4 + ul{margin:30px 0 0 0;} .cont_title > ul:not(.info_list, .exp_list){margin:0;box-sizing:border-box;font-size:var(--title-18);color:var(--point-color01);font-weight:400;line-height:1.44;font-family:var(--font-type02);} .cont_title > ul:not(.info_list, .exp_list) li{display: flex;align-items: baseline;gap:10px;} .cont_title > ul:not(.info_list, .exp_list) li p{font-size:inherit;color:inherit;font-weight:inherit;text-wrap:initial;} .cont_title > ul:not(.info_list, .exp_list) li strong{font-weight:600;} .cont_title > ul:not(.info_list, .exp_list) li + li{margin-top:0;} .sub_int .cont_title > ul li + li{margin-top:0;} .cont_title > ul:not(.info_list, .exp_list) li:before{width:4px;height:4px;content:"";display: inline-block;box-sizing:border-box;background:var(--point-color01);flex-shrink:0;transform:translateY(-4px);} .cont_title > ul:not(.info_list, .exp_list) + p{margin-top:0;} @media (max-width:1023px){ /* .cont_title p{text-wrap: balance;} */ .cont_title p br{display: none;} } @media (max-width:640px){ .cont_title h4{margin-bottom:10px;padding-bottom:5px;font-size:180%;} .cont_title h4:before{height:4px;} .cont_title ul:not(.info_list, .exp_list) + h5{margin-top:20px;} /* .cont_title p + p{margin-top:6px;} */ .cont_title ul:not(.info_list, .exp_list){margin:8px 0;} .cont_title h4 + ul{margin:20px 0 0 0;} .cont_title ul:not(.info_list, .exp_list) li{gap:6px;} .cont_title ul:not(.info_list, .exp_list) li + li{margin-top:4px;} .cont_title ul:not(.info_list, .exp_list) li:before{width:3px;height:3px;transform:translateY(-3px);} } @media (max-width:479px){ } /* 셀렉트 박스 */ #wrap .sel_custom{position: relative;z-index: 5;box-sizing: border-box;display: inline-block;} #wrap .sel_custom .desc{position: relative; font-size: var(--title-20); font-family: var(--font-type02); box-sizing: border-box;} #wrap .sel_custom .desc dt span{position: relative;display: inline-flex;align-items: center;min-width: 100px;height: 32px;padding-inline: 12px 35px;font-size: max(14px, 80%);font-weight: 300;color: var(--point-color03);border:1px solid var(--border-color02);border-radius: 50px;box-sizing: border-box;line-height: 1.2;background: var(--point-white); cursor: pointer;} #wrap .sel_custom .desc dt span:after{position: absolute;content:'';width: 8px;aspect-ratio: auto 1;border:solid var(--point-color03);border-width: 0 0 2px 2px;transform: rotate(-45deg) translateY(-50%);box-sizing: border-box;top: 40%;right: 12px; transition: all 0.4s;} #wrap .sel_custom .desc dt.on span:after{top: 50%; transform: rotate(-45deg) translateY(-50%) scale(-1,-1);} #wrap .sel_custom .desc dd{position: absolute;top: calc(100% - 1px);left:0;width: 100%;padding-block: 7px;border:1px solid var(--border-color02);border-radius: 10px;box-sizing: border-box;line-height: 1.2;font-size: max(14px, 75%);font-weight: 400;color: var(--point-color03);background: var(--point-white);opacity: 0;pointer-events: none;transition: all 0.4s;max-height: 200px;overflow: hidden;overflow-y: auto;} #wrap .sel_custom .desc:has(dt.on) > dd{opacity: 1; pointer-events: all} #wrap .sel_custom .desc dd{-ms-overflow-style: none; scrollbar-width: none;} #wrap .sel_custom .desc dd::-webkit-scrollbar {display: none;} #wrap .sel_custom .desc dd a{display:block;padding: 5px 10px; transition: all 0.4s;} #wrap .sel_custom .desc dd a.on{color: var(--point-color02);} #wrap .sel_custom .desc dd:not(:has(a.on)) a:first-child{color: var(--point-color02);} #wrap .sel_custom select{display: none;} /* over */ @media (hover:hover) and (pointer: fine){ #wrap .sel_custom .desc dd a:not(.on):hover{color: var(--point-color02);} } @media (max-width:479px){ #wrap .sel_custom .desc dt span{padding-top: 1px;} } /* 인풋 */ #wrap input:is([type='text'], [type='password'], [type='number']){border:1px solid var(--border-color02);height: 40px;padding-inline: 10px;font-size: max(14px, var(--title-16));line-height: normal;color: var(--black-color03);font-family: var(--font-type02);font-weight: 400;box-sizing: border-box;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;} input:is([type='text'], [type='password'], [type='number'])::placeholder{color: var(--black-color10); font-weight: 200;} @media (max-width:640px){ #wrap input:is([type='text'], [type='password'], [type='number']){height: 35px;} } /* 체크박스 */ #wrap label:has([type='checkbox']){position: relative; display: flex; gap: 10px; font-size: var(--title-16); font-weight: 400; color: var(--black-color00); line-height: 20px; font-family: var(--font-type02); cursor: pointer;} #wrap label:has([type='checkbox']) em{font-weight: inherit; color: var(--point-color10); display: contents;} #wrap label [type='checkbox']{display: inline-block;width: 20px;height: 20px;appearance: none;background: url('../images/sub/chk_box.svg') no-repeat center / 100% auto;transition: all 0.4s;} #wrap label [type='checkbox']:checked{background-image: url('../images/sub/chk_boxOn.svg');} /* over */ @media (hover:hover) and (pointer: fine){ #wrap label:hover [type='checkbox']:not(:checked){background-image: url('../images/sub/chk_boxOv.svg');} } /*bullet list*/ #wrap .bullet_list{position: relative; font-size: var(--title-20);} #wrap .bullet_list li{font-size:80%;color:var(--black-color03);font-weight:400;line-height:1.37;font-family:var(--font-type02);display: flex;align-items: baseline;gap:10px;} #wrap .bullet_list li + li{margin-top:0;} #wrap .bullet_list li:before{width:3px;height:3px;content:'';background:var(--black-color03);display: inline-flex;flex-shrink:0;transform:translateY(-3px);} @media (max-width:479px){ #wrap .bullet_list li{gap:7px;} #wrap .bullet_list li:before{width:2px;height:2px;} } /*─────────────────────────────────────────────────────────── 게시판 ───────────────────────────────────────────────────────────*/ /* 검색 */ #wrap .search_wrap{position: relative;z-index: 10;margin-bottom: 20px;} #wrap .search_wrap fieldset{display: flex;justify-content: space-between;flex-wrap: wrap;gap: 15px 30px;} #wrap .search_wrap .sort_box{display: flex; flex-wrap: wrap; gap: 12px;} #wrap .search_wrap .inp_box{position: relative;width: 100%;max-width: 190px;} #wrap .search_wrap .inp_box input[type='text']{width: 100%;padding-right: 40px;} #wrap .search_wrap .search_btn{position: absolute;top:0;right: 10px;width: 15px;height: 100%;background: url('../images/sub/search_btn.svg') no-repeat center / 100% auto;font-size: 0;} @media (max-width:479px){ #wrap .search_wrap .sort_box{gap: 10px;} #wrap .search_wrap .inp_box{max-width: 100%;} } /* 보도자료 */ #wrap .press_list{display: flex; flex-wrap: wrap; gap:30px 20px;} #wrap .press_list + .press_list{margin-top: 30px;} #wrap .press_list > li{position: relative;width: calc(100% / 4 - 15px);padding:10px 10px 61px;border-radius: var(--radius-05);background: var(--point-white);box-sizing: border-box;box-shadow:var(--shadow-01);font-size: var(--title-20);font-weight: 400;font-family: var(--font-type02);color: var(--black-color00);overflow: hidden;display: flex;flex-direction: column;gap: 10px;} #wrap .press_list > li:before{position: absolute;content: '';width: 100%;height: 30.9%;background: var(--point-color01);top:0;left:0;} #wrap .press_list .link{position: absolute; inset: 0; z-index: 5;} #wrap .press_list .thumb{width: 100%;aspect-ratio: auto 1.5;overflow: hidden;box-sizing: border-box;clip-path: var(--polygon-path03);background: var(--point-white);} #wrap .press_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;} #wrap .press_list .preface{position: absolute;top: 0;left: 0;background: var(--point-color01);display: inline-block;font-size: max(14px, 90%);font-weight: 300;color: var(--point-white);padding: 10px 10px 8px;border-radius: 0 0 5px;line-height: 1; word-break: break-all;} #wrap .press_list .desc dt{font-size: max(14px, 85%); font-weight: 400; color: var(--black-color00); line-height: 1.29; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} #wrap .press_list .desc dd{position: absolute;left:10px;bottom:14px;} #wrap .press_list .desc .see_more{z-index:9;} /* over */ @media (hover:hover) and (pointer:fine){ #wrap .press_list > li:hover .thumb img{transform: scale(1.1);} } @media (max-width:1023px){ #wrap .press_list{gap:clamp(15px, 3vw, 30px) 15px;} #wrap .press_list + .press_list{margin-top: clamp(15px, 3vw, 30px);} #wrap .press_list > li{width: calc(100% / 4 - 11.25px);} } @media (max-width:860px){ #wrap .press_list > li{width: calc(100% / 3 - 10px);} } @media (max-width:640px){ #wrap .press_list > li{width: calc(100% / 2 - 7.5px);} } @media (max-width:360px){ #wrap .press_list > li{width: 100%;} } /* 페이징 */ #wrap .paging {text-align:center;padding:0;line-height:inherit;margin:0;box-sizing:border-box;font-size: var(--title-20);font-family: var(--font-type02);display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 10px;} #wrap .paging:has(*){padding-top: 50px;} #wrap .paging span {display:inline-block;} #wrap .paging a {display: inline-flex;align-items: center;justify-content: center;min-width: 40px;width: auto;height: 40px;box-sizing: border-box;line-height: 1.2;padding: 0 5px;word-break: break-all;font-size: 125%;font-weight: 400;color: var(--point-color03);margin: 0;border: 1px solid var(--border-color01);text-align: center;background: var(--point-white);transition: all 0.4s;} #wrap .paging :is(.on a, a.on){border-color: var(--point-color03); background: var(--point-color05);} #wrap .paging .arrow a {font-size:0;border: 0; background: url('../images/sub/paging_prev.svg') no-repeat center;} #wrap .paging :is(.arrow.first, .arrow.last){display: none;} #wrap .paging .arrow.next a {transform: scale(-1,-1);} #wrap .view_btn {text-align:center;line-height:inherit;position:relative;min-height:auto;} /* over */ @media (hover:hover) and (pointer:fine){ .press_list > li:hover .thumb img{transform: scale(1.1);} #wrap .paging a:not(.on, .on a, .arrow a):hover{background: var(--point-color03); border-color: var(--point-color03); color: var(--point-white);} } @media (max-width:1023px){ #wrap .paging:has(*){padding-top: clamp(30px, 6vw, 50px);} } @media (max-width:860px){ #wrap .paging a{font-size: 115%;} } @media (max-width:640px){ #wrap .paging a{font-size: 105%;min-width: 36px;height: 36px;} #wrap .paging .arrow a{background-size: 11px auto;} } @media (max-width:479px){ #wrap .paging a{font-size: 95%;min-width: 32px;height: 32px;} #wrap .paging .arrow a{background-size: 9px auto;} } /* 뷰 */ #wrap .bbs_view {position:relative;z-index:1;text-align:inherit;margin-top: 10px;min-height: 470px;border-radius: var(--radius-05);overflow: hidden;box-shadow: var(--shadow-01);} #wrap .bbs_view:before{position: absolute; content:''; width: 100%; height: 470px; background: var(--point-color01); top:0; left:0;} #wrap .bbs_view:has(.view_video):before{display: none;} #wrap .bbs_view:not(:has(.view_video)) .view_tit{border-color: rgba(255,255,255,0.3);} #wrap .bbs_view:not(:has(.view_video)) .view_tit :where(h3, p, .share_list){filter: var(--filter-white);} #wrap .bbs_view .cont{position: relative;padding-inline: 40px;box-sizing: border-box;} #wrap .bbs_view.bbs_video .cont{padding-bottom:40px;} #wrap .bbs_view .view_tit{position: relative;border: 0;background: none;margin: 0;width: 100%;text-align: center;font-size: var(--title-20);color: var(--point-color02);box-sizing: border-box;display: flex;flex-direction: column;gap: 12px;padding: 30px 0 27px;border-bottom: 1px solid var(--border-color01);align-items: center;} #wrap .bbs_view .view_tit .see_more{font-family: var(--font-type02); } #wrap .bbs_view .view_tit .see_more span{font-weight: 300;} #wrap .bbs_view .view_tit:after{display:none;} #wrap .bbs_view .view_tit .preface{padding: 1px;background: var(--point-white);width: fit-content;margin-inline:auto;font-family: var(--font-type02);} #wrap .bbs_view .view_tit .preface span{background: var(--point-color01);} #wrap .bbs_view .view_tit h3{width: 100%;font-size: 200%;font-weight: 700;color: inherit;line-height: 1.125;text-align: inherit;display: block;box-sizing: border-box;} #wrap .bbs_view .view_tit p{width: 100%;font-size: max(13px, 75%);font-weight: 300;color: inherit;text-align: inherit;display: block;box-sizing: border-box;padding-top: 5px;font-family: var(--font-type02);} #wrap .bbs_view .share_list{position: absolute;right:0;bottom: 11px;display: flex;gap: 6px;flex-wrap: wrap;} #wrap .bbs_view .share_list a{display: flex;align-items: center;justify-content: center;width: 34px;aspect-ratio: auto 1;border: 1px solid var(--point-color02);border-radius: 100%;box-sizing: border-box;} #wrap .bbs_view .share_list a img{width: calc(100% - 14px);} #wrap .bbs_view .view_cont{position: relative;padding: 30px 0;font-size: var(--title-20);font-weight: 300;font-family: var(--font-type02);color: var(--black-color00);line-height: 1.5;min-height: 300px;border: 0;margin: 0;width: 100%;box-sizing: border-box;word-break: keep-all;} #wrap .bbs_view.bbs_video .view_video{margin-top:30px;} #wrap .bbs_view .view_cont b{font-weight: 700;} #wrap .bbs_view .keyword_wrap{border-top: 1px solid var(--border-color01);padding-block: 12px 40px;} #wrap .bbs_view .tag_list{display: flex; flex-wrap: wrap; gap: 10px;} #wrap .bbs_view .tag_list .see_more{font-family: var(--font-type02);} #wrap .bbs_view .photo_wrap{position: relative; padding:40px 90px; background: var(--gray-bg02); box-sizing: border-box;} #wrap .bbs_view .photoSwiper{overflow: hidden;} #wrap .bbs_view .photoSwiper .swiper-slide{width: auto; height: 220px; border:1px solid var(--border-color01); box-sizing: border-box; cursor:pointer; overflow: hidden;} #wrap .bbs_view .photoSwiper .swiper-slide img{width:100%; height: 100%; object-fit: cover;} #wrap .bbs_view .photo_wrap [class^='swiper-button']{position: absolute; top:50%; left:40px; right:auto; transform: translateY(-50%); margin:0; background: none; width: 18px; height: 36px;} #wrap .bbs_view .photo_wrap [class^='swiper-button-next']{left:auto !important; right:40px; transform: translateY(-50%) scale(-1,-1);} #wrap .bbs_view .photo_wrap [class^='swiper-button']:before{position: absolute;content:'';height: 70%;aspect-ratio: auto 1;border:solid var(--black-color08);border-width: 0 0 3px 3px;top: 50%;left: 100%;transform: translate(-50%, -50%) rotate(45deg);border-radius: 2px;} #wrap .bbs_view .view_video{position: relative;width: 100%;height: 0;padding-top:56.25%;overflow: hidden;border-radius: 5px; cursor: pointer;} #wrap .bbs_view .view_video iframe{position: absolute; top:0; left:0; width: 100%; height: 100%; /* pointer-events: none; */} #wrap .bbs_view .view_video .video_btn{position: absolute;content:'';width: 78px;aspect-ratio: auto 1.56;background: rgba(21, 9, 7, 0.9);border-radius: var(--radius-03);top:50%;left:50%;transform: translate(-50%, -50%);z-index: 3;transition: all 0.4s;} #wrap .bbs_view .view_video .video_btn:after{position: absolute;content:'';border:10px solid var(--trans-color);border-left: 16px solid var(--point-white);top:50%;left:58%;transform: translate(-50%, -50%);z-index: 4;transition: all 0.4s;} #wrap .bbs_view .view_video.on .video_btn{opacity: 0;} #wrap .photo_bg{position: fixed;inset: 0;background: rgba(0,0,0,0.75);z-index: 190;opacity: 0;pointer-events: none;transition: all 0.4s;} body:has(.photo_layer.on){overflow: clip; touch-action: none;} body:has(.photo_layer.on) #wrap .photo_bg{opacity: 1; pointer-events: all;} #wrap .photo_layer{position: fixed; inset:0; width: 100%; height: 100%; z-index: 200; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: all 0.4s;} #wrap .photo_layer.on{opacity: 1;} #wrap .photo_layer.on .w_custom{pointer-events: all;} #wrap .photo_layer .w_custom{max-width: 960px; padding-inline: 80px;} #wrap .photo_layer .close_btn{position: absolute;top: 5px;right: 25px;width: 30px;aspect-ratio: auto 1;} #wrap .photo_layer .close_btn span{position: absolute; width: 100%; height: 2px; background: var(--point-white); top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box;} #wrap .photo_layer .close_btn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);} #wrap .photo_layer .thumbSwiper{overflow: hidden; box-shadow: var(--shadow-02);} #wrap .photo_layer .thumbSwiper .swiper-slide{height: 476px; background: var(--point-white); display: flex; align-items: center; justify-content: center;} #wrap .photo_layer [class^='swiper-button']{position: absolute;top:50%;left:0;right:0;width: 50px;height: auto;aspect-ratio: auto 1;border: 2px solid var(--point-white);border-radius: 100%;box-sizing: border-box;margin:0;transform: translateY(-50%);} #wrap .photo_layer [class^='swiper-button-next']{left:auto; right:0; transform: translateY(-50%) scale(-1,-1);} #wrap .photo_layer [class^='swiper-button']:before{position: absolute;content:'';width: 40%;aspect-ratio: auto 1;border:solid var(--point-white);border-width: 0 0 2px 2px;top: 50%;left: 60%;transform: translate(-50%, -50%) rotate(45deg);box-sizing: border-box;} #wrap .prev_list{display: flex;flex-wrap: wrap;gap: 20px;margin-top: 80px;} #wrap .prev_list > li{position: relative;width: calc(100% / 2 - 10px);border-radius: var(--radius-05);overflow: hidden;background: var(--gray-bg01);padding:20px;box-sizing: border-box;display: flex;align-items: center;gap: 20px;} #wrap .prev_list > li:nth-child(2n){flex-direction: row-reverse;text-align: right;} #wrap .prev_list > li:nth-child(2n) .desc dd{flex-direction: row-reverse;} #wrap .prev_list > li:nth-child(2n) .desc dd:before{transform: translateY(-2px) rotate(45deg);} #wrap .prev_list .link{position: absolute; inset: 0; z-index: 5;} #wrap .prev_list .thumb{width: 140px; aspect-ratio: auto 1.4; overflow: hidden; border-radius: var(--radius-05);} #wrap .prev_list .thumb img{width: 100%; height: 100%; object-fit: cover;} #wrap .prev_list .desc{width: calc(100% - 160px);box-sizing: border-box;font-size: var(--title-20);font-family: var(--font-type02);} #wrap .prev_list .desc :where(dt, dd){font-size: max(13px, 80%); font-weight: 400;} #wrap .prev_list .desc dt{ color: var(--black-color00); line-height: 1.25; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #wrap .prev_list .desc dt + dd{margin-top: 10px;} #wrap .prev_list .desc dd{color: var(--point-color01);display: inline-flex;align-items: baseline;gap: 5px;line-height: 1.125;} #wrap .prev_list .desc dd:before{display: inline-flex;content:'';width: 6px;aspect-ratio: auto 1;border:solid var(--point-color01);border-width: 1px 1px 0 0;box-sizing: border-box;transform: translateY(-2px) rotate(45deg) scale(-1,-1);} /* over */ @media (hover:hover) and (pointer:fine){ #wrap .bbs_view .view_video:hover:before{background: rgba(0, 144, 255, 0.9);} } @media (max-width:1023px){ #wrap .bbs_view:before{height: clamp(350px, 47vw, 470px);} #wrap .bbs_view .cont{padding-inline: clamp(25px, 5vw, 40px);} #wrap .bbs_view .view_tit{padding-block: clamp(20px, 4vw, 27px);} #wrap .bbs_view .view_cont{padding-block: clamp(20px, 4vw, 30px);} #wrap .bbs_view.bbs_video .cont{padding-bottom:0;} #wrap .bbs_view .keyword_wrap{padding-bottom: clamp(25px, 5vw, 40px);} #wrap .bbs_view .photo_wrap{padding: clamp(25px, 5vw, 40px) clamp(65px, 10vw, 90px);} #wrap .bbs_view .photoSwiper .swiper-slide{height: clamp(150px, 22vw, 220px);} #wrap .bbs_view .photo_wrap [class^='swiper-button']{height: clamp(26px, 4vw, 36px); left: clamp(25px, 4vw, 40px);} #wrap .bbs_view .photo_wrap [class^='swiper-button-next']{right:clamp(25px, 4vw, 40px);} #wrap .photo_layer .close_btn{right:clamp(15px, 2.5vw, 25px);width: clamp(22px, 3vw, 30px);} #wrap .photo_layer .w_custom{padding-inline: clamp(50px, 8vw, 80px);} #wrap .photo_layer [class^='swiper-button']{width: clamp(35px, 5vw, 50px);} #wrap .photo_layer .thumbSwiper .swiper-slide{height: clamp(250px, 47.6vw, 476px);} #wrap .prev_list{margin-top: clamp(40px, 8vw, 80px); gap: 15px;} #wrap .prev_list > li{width: calc(100% / 2 - 7.5px);} #wrap .prev_list .thumb{width: 13.5vw;} #wrap .prev_list .desc{width: calc(100% - 13.5vw - 20px);} #wrap .bbs_view .view_video:before{width: clamp(50px, 7.8vw, 78px);} #wrap .bbs_view .view_video:after{border-width: clamp(6px, 1vw, 10px);border-left-width: clamp(10px, 1.6vw, 16px);} } @media (max-width:640px){ #wrap .bbs_view .share_list{position: relative; inset: auto;} #wrap .bbs_view .share_list a{width: 30px;} #wrap .prev_list > li{width: 100%;} #wrap .prev_list .thumb{width: 85px;} #wrap .prev_list .desc{width: calc(100% - 105px);} } @media (max-width:479px){ #wrap .bbs_view.bbs_video .view_video{margin-top:20px;} #wrap .bbs_view .photoSwiper .swiper-slide{width: 100%;} #wrap .prev_list > li{padding: 15px; gap: 15px;} #wrap .prev_list .desc{width: calc(100% - 100px);} } /* 소셜 */ #wrap .social_list{display: flex; flex-wrap: wrap; gap: 10px;} #wrap .social_list > li{position: relative; width:calc(100% / 5 - 8px); box-sizing: border-box; } #wrap .social_list .link{position: absolute; inset: 0; z-index: 5;} #wrap .social_list .thumb{width: 100%; aspect-ratio: auto 1; overflow: hidden; background: var(--black-color00);} #wrap .social_list .thumb:before{position: absolute; content:''; width: 100%; height: 100%; background: rgba(0,0,0,0.2); inset: 0; opacity: 0; transition: all 0.4s;} #wrap .social_list .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;} /* over */ @media (hover:hover) and (pointer:fine){ #wrap .social_list > li:hover .thumb img{transform: scale(1.1);} } @media (max-width:860px){ #wrap .social_list > li{width:calc(100% / 4 - 7.5px);} } @media (max-width:640px){ #wrap .social_list > li{width:calc(100% / 2 - 5px);} } /*─────────────────────────────────────────────────────────── device ───────────────────────────────────────────────────────────*/ /* lm75 */ #wrap .device_lm75 .detail {padding-block: 0 100px;} #wrap .device_lm75 .detail .item_wrap{position:relative;text-align:center;margin-top: 40px;box-sizing:border-box;} #wrap .device_lm75 .detail .thumb{font-size:0;max-width: 176px;margin-inline: auto;} #wrap .device_lm75 .detail .thumb img{transform: translateX(-21px);} #wrap .device_lm75 .detail .exp_list > li{position:absolute;top: 7.8%;left: 66px;display:flex;text-align:left;} #wrap .device_lm75 .detail .exp_list .cut{position:relative; display:inline-flex; width:140px; height:140px; box-sizing:border-box;} #wrap .device_lm75 .detail .exp_list .cut img{width:100%;height:100%;object-fit:cover;border-radius:100%;box-sizing:border-box;box-shadow: 0 0 0 2px var(--point-color03);} #wrap .device_lm75 .detail .exp_list .cut:before{position:absolute;content:'';width: 310px;height:1px;background: var(--point-color03);top: 69px;left:100%;} #wrap .device_lm75 .detail .exp_list .cut:after{position:absolute;content:'';width: 36px;height: 68px;background: var(--point-color03);top: 69px;left: calc(100% + 310px);clip-path: var(--polygon-path11);} #wrap .device_lm75 .detail .exp_list .cut span:before{position:absolute;content:'';width: 10px;height: 10px;background: var(--point-color03);border: 2px solid var(--point-white);border-radius:100%;box-sizing:border-box;left: calc(100% + 340px);top: 133px;z-index: 3;} #wrap .device_lm75 .detail .exp_list .desc{position: relative;font-size:var(--title-20);width:calc(100% - 140px);padding: 26px 0 0 20px;box-sizing:border-box;z-index: 5;} #wrap .device_lm75 .detail .exp_list .desc dt{font-size: 125%;font-weight: 700;color: var(--point-color01);letter-spacing:0;line-height:1.4;} #wrap .device_lm75 .detail .exp_list .desc dt + dd{margin-top: 23px;} #wrap .device_lm75 .detail .exp_list .desc dd{font-size: 90%;font-weight: 400;color: var(--point-color01);letter-spacing: -0.03em;line-height: 1.33;font-family: var(--font-type02);} #wrap .device_lm75 .detail .exp_list .desc dd em{display: block; font-weight: 600;} #wrap .device_lm75 .detail .exp_list .desc dd em + small{margin-top: 4px;} #wrap .device_lm75 .detail .exp_list .desc dd small{display: block; font-size: max(13px, 88.8%);} #wrap .device_lm75 .detail .exp_list .desc dd small + em{margin-top: 7px;} @media (min-width:1024px){ #wrap .device_lm75 .detail .exp_list > li[data-aos].aos-animate{transition-delay:0.2s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2)[data-aos].aos-animate{transition-delay:0.3s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3)[data-aos].aos-animate{transition-delay:0.4s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4)[data-aos].aos-animate{transition-delay:0.5s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5)[data-aos].aos-animate{transition-delay:0.6s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6)[data-aos].aos-animate{transition-delay:0.7s;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6)[data-aos].aos-animate{transition-delay:0.8s;} } #wrap .device_lm75 .detail .exp_list > li:nth-child(2n){left:auto;right: 58px;flex-direction:row-reverse;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .cut:before{left:auto; right:100%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .cut:after{left: auto;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .cut span:before{left:auto;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .desc{padding-left:0; padding-right:20px; text-align: right;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut:before{width: 290px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut:after{right: calc(100% + 287px);width: 165px;height: 93px;clip-path: var(--polygon-path10);} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut span:before{left: auto;right: calc(100% + 445px);top: 155px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3){top: 41%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3) .cut:before{width: 308px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3) .cut:after{display:none;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3) .cut span:before{top:50%;margin-top: -5px;left: calc(100% + 301px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(4){top: 41.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4) .cut:before{right:100%;width: 358px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4) .cut:after{display:none;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4) .cut span:before{right: calc(100% + 351px);top: 50%;margin-top: -5px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5){top: 75.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut:before{width: 253px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut:after{left: calc(100% + 252px);width: 55px;height: 78px;top: auto;bottom: 70px;clip-path: var(--polygon-path12);} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut span:before{top: auto;left: calc(100% + 300px);bottom: calc(100% + 2px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(6){top: 75.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut:before{width: 278px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut:after{top: auto;bottom: 70px;right: calc(100% + 276px);width: 83px;height: 105px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut span:before{top: auto;right: calc(100% + 354px);bottom: calc(100% + 30px);} @media (max-width:1280px){ #wrap .device_lm75 .detail .item_wrap{margin-inline: auto;width: fit-content;max-width: 1000px;} #wrap .device_lm75 .detail .exp_list > li{left:-394px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n){right:-394px;} #wrap .device_lm75 .detail .exp_list .cut:before{width: 240px;} #wrap .device_lm75 .detail .exp_list .cut:after{left: calc(100% + 240px);} #wrap .device_lm75 .detail .exp_list .cut span:before{left: calc(100% + 269px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut:before{width: 240px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut:after{right: calc(100% + 239px);width: 130px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2) .cut span:before{right: calc(100% + 362px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(3){top: 41%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3) .cut:before{width: 235px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(3) .cut span:before{left: calc(100% + 230px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(4){top: 41.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4) .cut:before{width: 276px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(4) .cut span:before{right: calc(100% + 270px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(5){top: 75.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut:before{width: 181px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut:after{left: calc(100% + 181px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(5) .cut span:before{left: calc(100% + 230px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(6){top: 75.5%;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut:before{width: 255px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut:after{right: calc(100% + 255px);width: 21px;} #wrap .device_lm75 .detail .exp_list > li:nth-child(6) .cut span:before{right: calc(100% + 270px);} } @media (max-width:1023px){ #wrap .device_lm75 .detail{padding-block: 0 clamp(70px, 10vw, 100px);} #wrap .device_lm75 .detail .thumb{width:19vw;min-width:120px;} #wrap .device_lm75 .detail .thumb img{transform:none;} #wrap .device_lm75 .detail .exp_list{display:flex;flex-wrap:wrap;gap: 30px;margin-top:40px;} #wrap .device_lm75 .detail .exp_list > li{position:relative;inset: auto !important;width: calc(100% / 2 - 15px);} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n){flex-direction:row; } #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .desc{padding-right:0;padding-left: 20px;text-align: left;} #wrap .device_lm75 .detail .exp_list > li:nth-child(2n) .cut:before{left:0;} #wrap .device_lm75 .detail .exp_list .cut{width:130px; height:130px; position:static;} #wrap .device_lm75 .detail .exp_list .cut:after{display:none;} #wrap .device_lm75 .detail .exp_list .cut:before{width:100% !important; top:64px; left:0; z-index:-1;} #wrap .device_lm75 .detail .exp_list .cut span:before{display:none;} #wrap .device_lm75 .detail .exp_list .desc{width:calc(100% - 130px);padding: 26px 0 0 20px;text-align: left;} #wrap .device_lm75 .detail .exp_list .desc dt + dd{margin-top: clamp(15px, 2.3vw, 23px);} } @media (max-width:860px){ #wrap .device_lm75 .detail .exp_list .cut{width:110px; height:110px;} #wrap .device_lm75 .detail .exp_list .cut:before{top:54px;} #wrap .device_lm75 .detail .exp_list .desc{width:calc(100% - 110px);padding-top: 18px;} } @media (max-width:767px){ #wrap .device_lm75 .detail .exp_list{gap:20px;} #wrap .device_lm75 .detail .exp_list > li{width:100%;} } @media (max-width:479px){ #wrap .device_lm75 .detail .exp_list .cut{width:100px; height:100px;} #wrap .device_lm75 .detail .exp_list .cut:before{top:49px;} #wrap .device_lm75 .detail .exp_list .desc{width:calc(100% - 100px);padding-top: 13px;} } @media (max-width:360px){ #wrap .device_lm75 .detail .exp_list .cut{width:80px; height:80px;} #wrap .device_lm75 .detail .exp_list .cut:before{top:39px;} #wrap .device_lm75 .detail .exp_list .desc{width:calc(100% - 80px); padding:10px 0 0 15px;} } #wrap .device_lm75 .spec{background: var(--point-color06);} #wrap .device_lm75 .spec .w_custom{padding-block: 98px 204px;} #wrap .device_lm75 .spec .cont_title{max-width: 560px;z-index: 2;} #wrap .device_lm75 .spec .info_list{display: flex; flex-wrap: wrap; gap: 30px; margin-top: 60px;} #wrap .device_lm75 .spec .info_list > li{position: relative;width: calc(100% / 2 - 15px);display: flex;align-items: center;box-sizing: border-box;gap: 16px;} #wrap .device_lm75 .spec .info_list .icon{display: flex;justify-content: center;width:80px;box-sizing: border-box;flex-shrink: 0;} #wrap .device_lm75 .spec .info_list .desc{box-sizing: border-box;font-size: var(--title-20);} #wrap .device_lm75 .spec .info_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .device_lm75 .spec .info_list .desc dt + dd{margin-top: 7px;} #wrap .device_lm75 .spec .info_list .desc dd{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color00);font-family: var(--font-type02);letter-spacing: -0.03em;} #wrap .device_lm75 .spec .thumb{position: absolute; right:-200px; bottom:0; font-size: 0;} @media (max-width:1320px){ #wrap .device_lm75 .spec .thumb{width: 81vw;} } @media (max-width:1023px){ #wrap .device_lm75 .spec .w_custom{padding-block:clamp(70px, 9.8vw, 98px) 0;} #wrap .device_lm75 .spec .cont_title{max-width: none;} #wrap .device_lm75 .spec .info_list{margin-top: clamp(30px, 6vw, 60px); gap: 20px;} #wrap .device_lm75 .spec .info_list > li{width: calc(100% / 2 - 10px);} #wrap .device_lm75 .spec .info_list .icon{width: clamp(60px, 9vw, 80px);} #wrap .device_lm75 .spec .thumb{position: relative; inset: auto; width:auto; margin-top: clamp(30px, 6vw, 60px);} } @media (max-width:640px){ #wrap .device_lm75 .spec .info_list{gap: 15px;} #wrap .device_lm75 .spec .info_list > li{width: calc(100% / 2 - 7.5px);} #wrap .device_lm75 .spec .info_list .desc dt{font-size: 115%;} #wrap .device_lm75 .spec .thumb img{max-width: none; width: calc(100% + 300px); margin-left: -150px;} } @media (max-width:479px){ #wrap .device_lm75 .spec .info_list > li{flex-direction: column;gap:5px;} #wrap .device_lm75 .spec .info_list .icon{width:50px;} #wrap .device_lm75 .spec .info_list .desc{text-align: center;} #wrap .device_lm75 .spec .info_list .desc dt + dd{margin-top:4px;} #wrap .device_lm75.cm65 .spec .info_list > li{width:calc(100% / 3 - 10px);} } #wrap .device_lm75 .sound{padding-block: 100px; background: var(--point-color09);} #wrap .device_lm75 .sound .thumb_box{position: relative;text-align: center;margin-top: 124px;width: fit-content;margin-inline: auto;} #wrap .device_lm75 .sound .thumb{position: absolute;font-size: 0;top: 29%;left: 48%;transform: translate(-50%, -50%);z-index: 3;} #wrap .device_lm75 .sound .thumb:before{position: absolute;content: '';width: 528px;aspect-ratio: auto 1;background: var(--point-grad06);border-radius: 100%;opacity: 0.2;top: 60%;left:50%;transform: translate(-50%, -50%);} #wrap .device_lm75 .sound .thumb img{position: relative;} #wrap .device_lm75 .sound .wave{position: relative;width: fit-content;box-sizing: border-box; clip-path: inset(0 100% 0 0);} #wrap .device_lm75 .sound .aos-animate .wave{clip-path: inset(0 0 0 0); transition: all 3s;} #wrap .device_lm75 .sound .step_list{counter-reset: stepList; font-size: var(--title-20);} #wrap .device_lm75 .sound .step_list > li{position: absolute;top: -14%;left: 25.5%;font-size: 80%;font-weight: 300;color: var(--point-white);line-height: 1.25;font-family: var(--font-type02);transform: translate(-100%, 50px);opacity:0;transition:all 0.5s;} #wrap .device_lm75 .sound .step_list > li:before{display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;margin-inline: auto;margin-bottom: 9px;padding: 1px 3px 0;border-radius: 100%;background: var(--point-color03);content: counter(stepList);counter-increment: stepList;box-sizing: border-box;font-weight: 500;} #wrap .device_lm75 .sound .step_list > li:nth-child(2){inset: auto;right: 34%;bottom: -6%;transform: translate(100%, 50px);} #wrap .device_lm75 .sound .step_list > li:nth-child(3){inset: auto;top: -3%;right:13.6%;transform: translate(100%, 50px);} #wrap .device_lm75 .sound .step_list.m_step{display: none;} #wrap .device_lm75 .sound .aos-animate .step_list > li:nth-child(1){transform: translate(-100%, 0);opacity:1;} #wrap .device_lm75 .sound .aos-animate .step_list > li:nth-child(2){transform: translate(100%, 0);opacity:1;transition-delay:0.5s;} #wrap .device_lm75 .sound .aos-animate .step_list > li:nth-child(3){transform: translate(100%, 0);opacity:1;transition-delay:0.8s;} #wrap .device_lm75 .sound .step_list .arw{position: absolute;width: 30px;height: 41px;top: calc(100% + 10px);left: -10px;} #wrap .device_lm75 .sound .step_list .arw + .arw{left:auto; right:-10px; transform: scaleX(-1);} #wrap .device_lm75 .sound .step_list .arw:before{position: absolute;content:'';inset: 0;background: var(--point-white);clip-path:var(--polygon-path13);} #wrap .device_lm75 .sound .step_list .arw:after{position: absolute;content:'';width: 11px;height: 12px;background: var(--point-white);left: 0;bottom: 0;clip-path: var(--polygon-path14);} #wrap .device_lm75 .sound .step_list > li:nth-child(2) .arw{width: 39px;height: 30px;top: auto;left: 50%;bottom: calc(100% + 1px);transform: translateX(-150%) scaleY(-1);} #wrap .device_lm75 .sound .step_list > li:nth-child(2) .arw:after{transform: translate(2px, 2px) rotate(16deg);} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw{width: 2px;height: 128px;left: 50%;transform: translateX(-50%);} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw:before{clip-path: inset(0 0 5px 0);} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw:after{left: 50%;transform: translateX(-50%) rotate(86deg);} #wrap .device_lm75 .detail_list{display: flex;gap: 30px;flex-wrap: wrap;margin-top: 80px;} #wrap .device_lm75 .detail_list > li{position: relative;width: calc(100% / 3 - 20px);box-sizing: border-box;display: flex;align-items: flex-start;gap: 10px;} #wrap .device_lm75 .detail_list .icon{display: flex;justify-content: center;width: 80px;box-sizing: border-box;flex-shrink: 0;} #wrap .device_lm75 .detail_list .desc{box-sizing: border-box;font-size: var(--title-20);color: var(--point-white);} #wrap .device_lm75 .detail_list .desc dt{font-weight: 600;} #wrap .device_lm75 .detail_list .desc dt + dd{margin-top: 10px;} #wrap .device_lm75 .detail_list .desc dd{font-size: max(13px, 80%);font-weight: 300;font-family: var(--font-type02);line-height: 1.25;} @media (max-width:1150px){ #wrap .device_lm75 .sound .thumb_box{margin-top: 200px;} #wrap .device_lm75 .sound .step_list > li{top:-32%} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw{height: 10vw;} } @media (max-width:1023px){ #wrap .device_lm75 .sound{padding-block: clamp(70px, 10vw, 100px);} #wrap .device_lm75 .sound .thumb{width: clamp(70px, 15.2vw, 152px);top: 70px;} #wrap .device_lm75 .sound .thumb:before{width: clamp(300px, 55vw, 528px);} #wrap .device_lm75 .sound .step_list > li{top: -40%;left: 26%;} #wrap .device_lm75 .sound .step_list > li:nth-child(2){right: 32%;} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw{height:9vw;} #wrap .device_lm75 .detail_list{gap: 20px;} #wrap .device_lm75 .detail_list > li{width: calc(100% / 2 - 10px);} #wrap .device_lm75 .detail_list .icon{width: clamp(55px, 9vw, 80px);} #wrap .device_lm75 .detail_list .desc{text-wrap:balance;} } @media (max-width:950px){ #wrap .device_lm75 .sound .step_list > li:nth-child(3){right:14.5%;} } @media (max-width:860px){ #wrap .device_lm75 .sound .step_list > li{top: -42%;left: 27%;} #wrap .device_lm75 .sound .step_list > li:nth-child(2){bottom: -14%;right: 31%;} #wrap .device_lm75 .sound .step_list > li:nth-child(3){top:0;} #wrap .device_lm75 .sound .step_list > li:nth-child(3) .arw{height: 8vw;} } @media (max-width:767px){ #wrap .device_lm75 .sound .thumb_box{margin-top: 50px;width: auto;} #wrap .device_lm75 .sound .thumb{position: relative; inset: auto; transform: none; margin-inline: auto;} #wrap .device_lm75 .sound .wave{position: absolute;top: 23vw;} #wrap .device_lm75 .sound .step_list{display: flex;flex-wrap: wrap;gap: 20px;margin-top: clamp(30px, 8vw, 60px);} #wrap .device_lm75 .sound .step_list > li{position: static;transform: none !important;text-align: left;display: flex;align-items: center;gap: 14px; width: calc(100% / 2 - 10px);} #wrap .device_lm75 .sound .step_list > li:before{margin:0; flex-shrink: 0;} #wrap .device_lm75 .sound .step_list > li br{display: none;} #wrap .device_lm75 .sound .step_list .arw{display: none;} #wrap .device_lm75 .sound .step_list.m_step{display: block;margin:0;} #wrap .device_lm75 .sound .step_list.m_step li{position: absolute;inset:initial;width:auto;justify-content: center;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){width:66px;left:15%;top:-31px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:22%;bottom:121px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){right:6%;top:27px;} #wrap .device_lm75 .sound .step_list.m_step li .arw{display: block;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){width:66px;left:15%;top:19%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:22%;bottom:121px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:6%;top:32%;} #wrap .device_lm75 .detail_list{margin-top: clamp(35px, 8vw, 60px);} } @media (max-width:640px){ #wrap .device_lm75 .sound .step_list{gap: 15px;} #wrap .device_lm75 .sound .step_list > li{width: calc(100% / 2 - 7.5px);} #wrap .device_lm75 .sound .step_list .arw{width:20px;height:28px;} #wrap .device_lm75 .sound .step_list .arw:after{width:8px;height:9px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){width:44px;left:16.5%;} #wrap .device_lm75.cm65 .sound .step_list > li:nth-child(2) .arw{width:33px;height:22px;transform:translateX(-140%) scaleY(-1);} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){right:5.5%;top:37px;} #wrap .device_lm75.cm65 .sound .step_list > li:nth-child(3) .arw{height:5vw;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){left:14%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:19%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:5%;top:30%;} #wrap .device_lm75 .detail_list > li{width:100%;} } @media (max-width:600px){ #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){left:16%;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:20%;bottom:108px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){right:4.5%;top:25px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){top:15%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:17%;bottom:110px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:4.5%;top:28%;} } @media (max-width:500px){ #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){left:17%;width:29px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:18%;bottom:96px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){right:4%;top:19px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){width:29px;top:17%;left:17%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){bottom:100px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:4%;top:27%;} } @media (max-width:431px){ #wrap .device_lm75 .sound .step_list > li{width: 100%;} #wrap .device_lm75 .sound .step_list .arw{top:calc(100% + 3px);width:14px;height:22px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:19%;bottom:138px;} #wrap .device_lm75 .sound .step_list > li:nth-child(2) .arw{width:25px;height:17px;;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){right:3.5%;top:14px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){left:16%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:19%;bottom:156px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:3.5%;top:23%;} } @media (max-width:400px){ #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){top:12%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:18%;bottom:177px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){top:20.5%;} } @media (max-width:390px){ #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){left:16%;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:17%;bottom:152px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){top:10px;right:3%;} } @media (max-width:360px){ #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){top:9%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:16%;bottom:193px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){top:17%;right:3%;} } @media (max-width:350px){ #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(1){left:15%;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(2){right:15%;bottom:164px;} #wrap .device_lm75.cm65 .sound .step_list.m_step li:nth-child(3){top:4px;right:2%;} } @media (max-width:330px){ #wrap .device_lm75 .sound .step_list.m_step li:nth-child(1){left:15%;top:6%;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(2){right:15%;bottom:213px;} #wrap .device_lm75 .sound .step_list.m_step li:nth-child(3){right:2%;top:15%;} } #wrap .device_lm75 .coverage .w_custom{padding-block: 100px;} #wrap .device_lm75 .coverage .thumb_desc{position: absolute;left:11.2%;bottom:0;font-size: 0;box-sizing: border-box; max-width: 40%;} #wrap .device_lm75 .coverage .thumb_desc dd{position: absolute;top: -30px;right: -14px;width: 200px;aspect-ratio: auto 1;box-shadow: 0 0 0 3px var(--point-color03);border-radius: 100%;box-sizing: border-box;overflow: hidden;} #wrap .device_lm75 .coverage .cont_title{width: 53.2%; margin-left: auto;} #wrap .device_lm75 .coverage .exp_list{margin-top: 34px;} #wrap .device_lm75 .coverage .exp_list + p{margin-top: 31px;} #wrap .device_lm75 .coverage .exp_list > li{display: flex;align-items: center;gap: 16px;} #wrap .device_lm75 .coverage .exp_list > li + li{margin-top: 24px;} #wrap .device_lm75 .coverage .exp_list .icon{display: flex;justify-content: center;width: 70px;flex-shrink: 0;} #wrap .device_lm75 .coverage .exp_list .desc{box-sizing: border-box;font-size: var(--title-20);} #wrap .device_lm75 .coverage .exp_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .device_lm75 .coverage .exp_list .desc dt + dd{margin-top: 5px;} #wrap .device_lm75 .coverage .exp_list .desc dd{font-size: 80%;font-weight: 400;color: var(--black-color00);font-family: var(--font-type02);line-height: 1.25;letter-spacing: -0.03em;} @media (max-width:1023px){ #wrap .device_lm75 .coverage .w_custom{padding-block: clamp(70px, 10vw, 100px);} #wrap .device_lm75 .coverage .thumb_desc{left:0;} #wrap .device_lm75 .coverage .exp_list{margin-top: clamp(25px, 3.4vw, 34px);} #wrap .device_lm75 .coverage .exp_list + p{margin-top: clamp(25px, 3.1vw, 31px);} #wrap .device_lm75 .coverage .exp_list > li + li{margin-top: clamp(15px, 3vw, 24px);} #wrap .device_lm75 .coverage .exp_list .icon{width: clamp(50px, 8vw, 70px);} #wrap .device_lm75 .coverage .exp_list .desc{text-wrap: balance;} } @media (max-width:767px){ #wrap .device_lm75 .coverage .w_custom{padding-bottom: 0;} #wrap .device_lm75 .coverage .thumb_desc{position: relative;inset: auto;max-width: none;width: clamp(180px, 40vw, 287px);margin-inline: auto;} #wrap .device_lm75 .coverage .thumb_desc dd{width: clamp(135px, 28vw, 200px);} #wrap .device_lm75 .coverage .cont_title{width: 100%; margin:0 0 70px;} } #wrap .device_lm75 .battery{height: 680px; background: url('../images/sub/device_lm75_battery01.jpg') no-repeat center / cover; box-sizing: border-box; } #wrap .device_lm75 .battery .w_custom{height: 100%;padding-top: 97px;} #wrap .device_lm75 .battery .cont_title{max-width: 470px;z-index: 3;} #wrap .device_lm75 .battery .exp_list{display: flex; flex-wrap: wrap; gap: 44px; text-align: center; margin-top: 40px;} #wrap .device_lm75 .battery .exp_list .icon{position: relative;display: flex;align-items: center;justify-content: center;width: 100px;height: 100px;padding: 21px;border:1px dashed var(--point-color03);border-radius: 100%;box-sizing: border-box;margin-inline:auto;} #wrap .device_lm75 .battery .exp_list .icon:before{position: absolute;content: '';width: calc(100% - 17px);aspect-ratio: auto 1;background: var(--point-white);top:50%;left:50%;transform: translate(-50%, -50%);border-radius: inherit;} #wrap .device_lm75 .battery .exp_list .icon + .desc{margin-top: 14px;} #wrap .device_lm75 .battery .exp_list .icon img{position: relative;} #wrap .device_lm75 .battery .exp_list .desc{font-size: var(--title-20);} #wrap .device_lm75 .battery .exp_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color03);} #wrap .device_lm75 .battery .exp_list .desc dt + dd{margin-top: 5px;} #wrap .device_lm75 .battery .exp_list .desc dd{font-size: max(13px, 80%); font-weight: 400; color: var(--black-color00); line-height: 1.25; font-family: var(--font-type02);} #wrap .device_lm75 .prod_box{position: absolute;bottom: 76px;left: 0;font-size: 0;width: 100%;text-align: center;} #wrap .device_lm75 .prod_box .info_list{position: absolute;bottom: 30px;right: 0;width: max-content;max-width: 470px;counter-reset: stepList;} #wrap .device_lm75 .prod_box .info_list:before{position: absolute;content:'';width: 10px;height: 10px;background: var(--point-color03);border:2px solid var(--point-white);border-radius: 100%;box-sizing: border-box;top: 56%;right: calc(100% + 145px);z-index: 5;} #wrap .device_lm75 .prod{position: relative; display: inline-block;} #wrap .device_lm75 .prod_box .info_list > li{position: relative; display: flex; align-items: center;} #wrap .device_lm75 .prod_box .info_list > li + li{margin-top: 12px;} #wrap .device_lm75 .prod_box .info_list .thumb{position: relative;display: flex;width: 134px;flex-shrink: 0;} #wrap .device_lm75 .prod_box .info_list .thumb:before{position: absolute; content:''; width: 100px; height: 1px; background: var(--point-color03); top:50%; right:50%;} #wrap .device_lm75 .prod_box .info_list .thumb:after{position: absolute;content:'';width: 119px;height: 155px;background: var(--point-color03);top:50%;right: calc(50% + 99px);clip-path: var(--polygon-path12);} #wrap .device_lm75 .prod_box .info_list > li:nth-child(2) .thumb:after{position: absolute;width: 116px;height: 85px;top: auto;bottom: calc(50% - 1px);clip-path: var(--polygon-path10);transform: scaleY(-1);} #wrap .device_lm75 .prod_box .info_list .thumb img{position: relative;} #wrap .device_lm75 .prod_box .info_list .desc{font-size: var(--title-20);text-align: left;padding: 20px 0 0 15px;box-sizing: border-box;} #wrap .device_lm75 .prod_box .info_list .desc:before{display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;margin-bottom: 9px;padding: 1px 3px 0;border-radius: 100%;background: var(--point-color01);color: var(--point-white);content: counter(stepList);counter-increment: stepList;box-sizing: border-box;font-size: max(13px, 80%);font-weight: 500;font-family: var(--font-type02);} #wrap .device_lm75 .prod_box .info_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .device_lm75 .prod_box .info_list .desc dt + dd{margin-top: 5px;} #wrap .device_lm75 .prod_box .info_list .desc dd{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color00);line-height: 1.25;font-family: var(--font-type02);/* text-wrap: balance; */} @media (max-width:1200px){ #wrap .device_lm75 .battery{height: 1100px;background-position: -1295px 50%;background-size: auto 100%;} #wrap .device_lm75 .battery .w_custom{padding-top: 70px;} #wrap .device_lm75 .prod_box{width: fit-content;left: 120px;bottom: 140px;} #wrap .device_lm75 .prod_box .info_list{right:auto;left: calc(100% + 40px);} } @media (max-width:1023px){ #wrap .device_lm75 .battery .exp_list{margin-top: clamp(25px, 4vw, 40px); gap: clamp(30px, 4.4vw, 44px);} #wrap .device_lm75 .battery .exp_list .icon{width: clamp(70px, 11vw, 100px); height: clamp(70px, 11vw, 100px);} #wrap .device_lm75 .battery .exp_list .icon + .desc{margin-top: clamp(10px, 2vw, 14px);} } @media (max-width:860px){ #wrap .device_lm75 .battery{background: var(--gray-bg03); height: auto;} #wrap .device_lm75 .battery .w_custom{padding-block: 70px;} #wrap .device_lm75 .prod_box{position: relative; inset: auto; width: 100%; margin-top: 40px;} #wrap .device_lm75 .prod_box .info_list{position: relative; inset: auto; width: 100%; max-width:none;} #wrap .device_lm75 .prod_box .info_list:before, #wrap .device_lm75 .prod_box .info_list .thumb:before, #wrap .device_lm75 .prod_box .info_list .thumb:after{display: none;} } @media (max-width:640px){ #wrap .device_lm75 .prod{width: clamp(140px, 33vw, 206px);} #wrap .device_lm75 .prod_box .info_list .thumb{width: clamp(90px, 21vw, 134px);} } #wrap .device_lm75 .support{background: url('../images/sub/device_lm75_support01.jpg') no-repeat center / cover; padding-block: 100px;} #wrap .device_lm75 .support .w_custom{display: flex;align-items: center;justify-content: space-between;gap: 40px;} #wrap .device_lm75 .support .cont_title p{filter: var(--filter-white);} #wrap .device_lm75 .support .info_list{margin-top: 40px;} #wrap .device_lm75 .support .info_list > li{display: flex;align-items: center;gap: 20px;} #wrap .device_lm75 .support .info_list > li + li{margin-top: 30px;} #wrap .device_lm75 .support .info_list .icon{display:flex;align-items: center;justify-content: center;flex-shrink: 0;width: 80px;height: 80px;border: 2px solid var(--point-white);border-radius: 100%;box-sizing: border-box;padding: 18px;background: var(--point-grad07);} #wrap .device_lm75 .support .info_list .desc{font-size: var(--title-20); filter: var(--filter-white);} #wrap .device_lm75 .support .info_list .desc dt{font-size: 125%; font-weight: 700;} #wrap .device_lm75 .support .info_list .desc dt + dd{margin-top: 5px;} #wrap .device_lm75 .support .info_list .desc dd{font-size: max(13px, 80%); font-weight: 400; line-height: 1.25; font-family: var(--font-type02);} #wrap .device_lm75 .support .thumb{font-size: 0; box-shadow: var(--shadow-01);} #wrap .device_lm75 .support .thumb img{clip-path: var(--polygon-path03);} @media (max-width:1023px){ #wrap .device_lm75 .support{padding-block: clamp(70px, 10vw, 100px);} #wrap .device_lm75 .support .w_custom{flex-wrap: wrap;} #wrap .device_lm75 .support .info_list{margin-top: clamp(25px, 4vw, 40px);} #wrap .device_lm75 .support .info_list > li + li{margin-top: clamp(15px, 3vw, 30px);} #wrap .device_lm75 .support .info_list .icon{width: clamp(60px, 8vw, 80px); height: clamp(60px, 8vw, 80px); padding: clamp(15px, 2vw, 18px);} #wrap .device_lm75 .support .info_list .desc{text-wrap: balance;} } #wrap .device_lm75 .prodline{padding-block: 100px;} #wrap .device_lm75 .prodline .w_custom{display: flex;align-items: flex-end;justify-content: space-between;gap: clamp(40px, 4vw, 60px);} #wrap .device_lm75 .prodline .cont_title{width: 50%;} #wrap .device_lm75 .prodline .info_list{margin-top: 40px;} #wrap .device_lm75 .prodline .info_list > li{padding:20px 24px;background: var(--gray-bg01);clip-path: var(--polygon-path03);border-radius: var(--radius-05);} #wrap .device_lm75 .prodline .info_list > li + li{margin-top: 10px;} #wrap .device_lm75 .prodline .info_list .desc{font-size: var(--title-20);} #wrap .device_lm75 .prodline .info_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .device_lm75 .prodline .info_list .desc dt + dd{margin-top: 8px;} #wrap .device_lm75 .prodline .info_list .desc dd{font-size: 80%;font-weight: 400;color: var(--black-color00);line-height: 1.25;font-family: var(--font-type02);letter-spacing: -0.02em;} @media (max-width:1320px){ #wrap .device_lm75 .prodline .info_list .desc dd br.for_pc{display: none;} } @media (max-width:1023px){ #wrap .device_lm75 .prodline{padding-block: clamp(70px, 10vw, 100px);} #wrap .device_lm75 .prodline .w_custom{flex-wrap: wrap;} #wrap .device_lm75 .prodline .cont_title{width: 100%;} #wrap .device_lm75 .prodline .info_list{margin-top: clamp(25px, 4vw, 40px);} #wrap .device_lm75 .prodline .info_list .desc{text-wrap: balance;} } #wrap .warranty{padding-block: 97px 100px;background: url('../images/sub/warranty_bg.jpg') no-repeat center / cover;} #wrap .warranty .cont_title + .mainte_list{margin-top: 40px;} #wrap .warranty .mainte_list{display: flex; flex-wrap: wrap; gap: 20px;} #wrap .warranty .mainte_list > li{position: relative;width: calc(100% / 3 - 13.34px);box-sizing: border-box;box-shadow: var(--shadow-03);border-radius: 0 0 50px;} #wrap .warranty .mainte_list .cont{padding:40px;height: 100%;box-sizing: border-box;background: rgba(255,255,255,0.9);clip-path: var(--polygon-path03);border-radius: var(--radius-05);} #wrap .warranty .mainte_list .icon{display: flex; align-items: center; height: 48px;} #wrap .warranty .mainte_list .icon + .desc{margin-top: 20px;} #wrap .warranty .mainte_list .desc{font-size: var(--title-20);} #wrap .warranty .mainte_list .desc dt{font-size: 125%; font-weight: 700; color: var(--point-color03);} #wrap .warranty .mainte_list .desc dt + dd{margin-top: 5px;} #wrap .warranty .mainte_list .desc dd{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color00);line-height: 1.25;font-family: var(--font-type02);letter-spacing: -0.02em;} @media (max-width:1023px){ #wrap .warranty{padding-block: clamp(70px, 10vw, 97px);} #wrap .warranty .cont_title + .mainte_list{margin-top: clamp(25px, 4vw, 40px);} #wrap .warranty .mainte_list{gap: 15px;} #wrap .warranty .mainte_list > li{width: calc(100% / 3 - 10px);} #wrap .warranty .mainte_list .cont{padding: clamp(25px, 4vw, 40px);} #wrap .warranty .mainte_list .icon{height: clamp(40px, 5vw, 48px);} #wrap .warranty .mainte_list .icon + .desc{margin-top: clamp(15px, 2vw, 20px);} #wrap .warranty .mainte_list .desc{text-wrap: balance;} } @media (max-width:860px){ #wrap .warranty .mainte_list > li{width: calc(100% / 2 - 7.5px);} } @media (max-width:479px){ #wrap .warranty .mainte_list > li{width: 100%;} #wrap .warranty .mainte_list .cont{display: flex;flex-wrap:wrap;gap:15px;align-items: center;padding:15px 15px;} #wrap .warranty .mainte_list .icon + .desc{margin:0;width:calc(100% - 65px);} } #wrap .accessory{padding-top: 97px;} #wrap .accessory .cont_title + .rel_box{margin-top: 40px;} #wrap .accessory .rel_box{position: relative; box-sizing: border-box;} #wrap .accessory .accSwiper{position: relative; overflow: hidden;} #wrap .accessory .accSwiper .swiper-slide{position: relative; height: auto;} #wrap .accessory .accSwiper .link{position: absolute; inset: 0; z-index: 5;pointer-events:none;} #wrap .accessory .accSwiper .desc{font-size: var(--title-20);} #wrap .accessory .accSwiper .desc dt{position: relative; font-size: 0; width: 100%; aspect-ratio: auto 1; overflow: hidden;} /* #wrap .accessory .accSwiper .desc dt + dd{margin-top: 18px;} */ #wrap .accessory .accSwiper .desc dt:before{position: absolute;content:'';inset: 0;border:1px solid var(--point-color01);box-sizing: border-box;opacity: 0;transition: all 0.4s;border-radius: inherit;} #wrap .accessory .accSwiper .desc dt img{width: 100%; height: 100%; object-fit: cover;} #wrap .accessory .accSwiper .desc dd{background:var(--point-color01);font-size: inherit; font-weight: 400; color: var(--point-white); line-height: 1.25; font-family: var(--font-type02); letter-spacing: -0.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;text-align: center;padding:12px 0;} #wrap .accessory [class^='swiper-button']{position: absolute;inset: auto;top: 44%;right: calc(100% + 20px);margin:0;width: 36px;height: auto;aspect-ratio: auto 1;background: none;transform: translateY(-50%);} #wrap .accessory [class^='swiper-button']:before{position: absolute;content:'';width: 78%;height: 78%;border:solid var(--black-color08);border-width: 0 0 3px 3px;box-sizing: border-box;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);border-radius: 2px; transition: all 0.4s;} #wrap .accessory [class^='swiper-button'].swiper-button-next{right:auto; left: calc(100% + 20px); transform: translateY(-50%) scale(-1,-1);} /* over */ @media (hover:hover) and (pointer:fine){ #wrap .accessory [class^='swiper-button']:hover:before{border-color: var(--point-color01);} #wrap .accessory .accSwiper .swiper-slide:hover .desc dt:before{opacity: 1;} } @media (max-width:1380px){ #wrap .accessory .rel_box{padding-inline: 50px;} #wrap .accessory [class^='swiper-button']{right:auto; left: 0;} #wrap .accessory [class^='swiper-button'].swiper-button-next{left:auto; right:0;} } @media (max-width:1023px){ #wrap .accessory{padding-top: clamp(70px, 9.7vw, 97px);} #wrap .accessory .cont_title + .rel_box{margin-top: clamp(25px, 4vw, 40px);} #wrap .accessory .rel_box{padding-inline:clamp(35px, 5vw, 50px);} /* #wrap .accessory .accSwiper .desc dt + dd{margin-top: clamp(14px, 2vw, 18px);} */ #wrap .accessory [class^='swiper-button']{width: clamp(30px, 4vw, 36px);} } @media (max-width:640px){ #wrap .accessory .rel_box{padding-inline:0;} #wrap .accessory .accSwiper{overflow: visible;} #wrap .accessory [class^='swiper-button']{display: none;} #wrap .accessory .accSwiper .desc dd{padding:10px 0;} } /* 팝업 */ #layerDim{position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: all 0.4s;} body:has(.layer_popup.on){overflow: clip; touch-action: none;} body:has(.layer_popup.on) #layerDim{opacity: 1; pointer-events: all;} #wrap .layer_popup{position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.4s;} #wrap .layer_popup.on{opacity: 1;} #wrap .layer_popup .close_btn{position: absolute;top: 5px;left: calc(100% + 25px);width: 30px;height: 30px;} #wrap .layer_popup .close_btn:before, #wrap .layer_popup .close_btn:after{position: absolute; content:''; width: 100%; height: 2px; background: var(--point-white); top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box;} #wrap .layer_popup .close_btn:after{transform: translate(-50%, -50%) rotate(-45deg);} #wrap .layer_popup .w_custom{max-width: 760px;background: var(--point-white);box-shadow: var(--shadow-02);} #wrap .layer_popup.on .w_custom{pointer-events: all;} #wrap .layer_popup .w_custom.w_1200{max-width: 1200px;} #wrap .layer_popup .cont{position: relative;padding: 26px 30px 30px;max-height: 85vh;overflow: hidden;overflow-y: auto;box-sizing: border-box;} .layer_title{position: relative; font-size: var(--title-20); box-sizing: border-box; padding-bottom: 16px; border-bottom: 1px solid var(--black-color00); margin-bottom: 20px;} .layer_title h4{font-size: 150%; font-weight: 700; color: var(--black-color00); } .layer_title h4 + p{margin-top: 7px;} .layer_title h4:has(small){display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px;} .layer_title h4 small{font-size: max(13px, 60%); font-weight: 400; color: inherit; font-family: var(--font-type02);} .layer_title p{font-size: max(13px, 80%);font-weight: 400;color: var(--black-color00);line-height: 1.5;font-family: var(--font-type02);letter-spacing: -0.02em;} #wrap .layer_popup .form_wrap{display: flex; flex-wrap: wrap; gap: 16px 20px;} #wrap .layer_popup .form_desc{position: relative; width: calc(100% / 2 - 10px); box-sizing: border-box; font-size: var(--title-20); display: flex; flex-direction: column; gap: 10px;} #wrap .layer_popup .form_desc:has(textarea){width: 100%;} #wrap .layer_popup .form_desc > :where(dt, dd){font-size: max(13px, 80%); font-weight: 400; color: var(--black-color00); line-height: 1; font-family: var(--font-type02);} #wrap .layer_popup .form_desc > dt em{font-weight: inherit; color: var(--point-color10);} #wrap .layer_popup .form_desc > dd{font-size: max(13px, 70%);} #wrap .layer_popup .form_desc :is([type='text'], [type='password'], [type='number'], textarea, select){width: 100%;background: var(--gray-bg01);border-color:var(--gray-bg01);font-size: inherit;color: inherit;font-weight: inherit;} #wrap .layer_popup .form_desc :is([type='text'], [type='password'], [type='number'], textarea):focus{border-color: var(--black-color00); background: var(--point-white);} #wrap .layer_popup .form_desc textarea{height: 90px;line-height: 1.5;padding: 10px;} #wrap .layer_popup .sel_custom{width: 100%;} #wrap .layer_popup .sel_custom .desc{width: 100%;} #wrap .layer_popup .sel_custom .desc dt span{width: 100%; height: 40px; border-color: var(--gray-bg01); background-color: var(--gray-bg01); border-radius: 0; color: inherit;} #wrap .layer_popup .sel_custom .desc dt span:after{filter: var(--filter-black);opacity: 0.6;} #wrap .layer_popup .sel_custom .desc dd{border-radius: 0;color: var(--black-color08);} #wrap .layer_popup .see_list{margin-top: 30px;} #wrap .layer_popup .prod_info{display: flex; align-items: flex-start; flex-wrap: wrap;} #wrap .layer_popup .prod_info .thumb{font-size: 0; width: 240px; aspect-ratio: auto 1; overflow: hidden;} #wrap .layer_popup .prod_info .thumb img{width: 100%; height: 100%; object-fit: cover;} #wrap .layer_popup .prod_info .detail{width: calc(100% - 240px); padding-left: 20px; box-sizing: border-box;} #wrap .layer_popup .prod_info .detail_title{position: relative; font-size: var(--title-20); box-sizing: border-box;} #wrap .layer_popup .prod_info .detail_title + .detail_title{margin-top: 15px;} #wrap .layer_popup .prod_info .detail_title.hd{margin-bottom: 10px;} #wrap .layer_popup .prod_info .detail_title h4{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .layer_popup .prod_info .detail_title h4 + p{margin-top: 5px;} #wrap .layer_popup .prod_info .detail_title p{font-size: max(13px, 70%); font-weight: 400; color: var(--black-color00); line-height: 1.28; font-family: var(--font-type02); letter-spacing: -0.02em;} #wrap .detail_table{position: relative;box-sizing: border-box;overflow: hidden;overflow-x: auto;} #wrap .detail_table {-ms-overflow-style: none; scrollbar-width: none; } #wrap .detail_table::-webkit-scrollbar {display: none;} #wrap .detail_table + .detail_table{margin-top: 10px;} #wrap .detail_table table{width: 100%;min-width: 860px;box-sizing: border-box;} #wrap .detail_table tr{font-size: var(--title-20);} #wrap .detail_table :where(th, td){font-size: max(13px, 70%);font-weight: 400;font-family: var(--font-type02);line-height: 1.14;letter-spacing: -0.02em;text-align: left;padding: 8px 10px 7px;} #wrap .detail_table thead th{background: var(--point-color01); color: var(--point-white);} #wrap .detail_table thead th:not(:first-child){border-left: 1px solid var(--border-color01);} #wrap .detail_table tbody td{border:1px solid var(--border-color01);border-top: 0;vertical-align: top;} #wrap .layer_popup .tab_conts > .item{opacity: 0; height: 0; overflow: hidden; transition: all 0.4s;} #wrap .layer_popup .tab_conts > .item.on{opacity: 1; height: auto; overflow: visible;} #wrap .layer_popup .accessory{margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color01);} #wrap .layer_popup .accessory .rel_box{padding-inline: 34px;} #wrap .layer_popup .accessory .accSwiper{overflow: hidden;} #wrap .layer_popup .accessory .accSwiper .desc dt{border-radius: var(--radius-03);} /* #wrap .layer_popup .accessory .accSwiper .desc dt + dd{margin-top: 10px;} */ #wrap .layer_popup .accessory .accSwiper .desc dt:before{border-color: var(--black-color00);} #wrap .layer_popup .accessory .accSwiper .desc dd{text-align: center; font-size: max(13px, 70%); line-height: 1.14;} #wrap .layer_popup .accessory [class^='swiper-button']{left:0;right:auto;width: 29px; display: block;} #wrap .layer_popup .accessory [class^='swiper-button'].swiper-button-next{left:auto; right:0;} @media (max-width:1023px){ #wrap .layer_popup .close_btn{inset: auto; right:0; bottom: calc(100% + 10px);} #wrap .layer_popup .form_wrap{gap: 15px;} #wrap .layer_popup .form_desc{width: calc(100% / 2 - 7.5px);} #wrap .layer_popup .prod_info .thumb{width: clamp(150px, 24vw, 240px);} #wrap .layer_popup .prod_info .detail{width: calc(100% - clamp(150px, 24vw, 240px));} } @media (max-width:860px){ #wrap .layer_popup .cont{max-height: 70vh;} #wrap .layer_popup .prod_info .thumb{width: 100%; max-width: 240px; margin-inline: auto;} #wrap .layer_popup .prod_info .detail{width: 100%; padding: 20px 0 0;} } @media (max-width:640px){ #wrap .detail_table{width: calc(100% + 60px);margin-left: -30px;} #wrap .detail_table table{padding-inline: 30px;display: block;} } @media (max-width:479px){ #wrap .layer_popup .cont{padding-inline: 25px;} #wrap .layer_popup .form_desc{width: 100%;} #wrap .detail_table{width: calc(100% + 50px);margin-left: -25px; } #wrap .detail_table table{padding-inline: 25px;} #wrap .layer_popup .accessory{margin-top: 15px; padding-top: 15px;} } /* cm65 */ #wrap .device_lm75.cm65 .detail{margin-bottom: 110px;} #wrap .device_lm75.cm65 .detail .item_wrap{margin-top: 157px;} #wrap .device_lm75.cm65 .detail .thumb{max-width: 386px;} #wrap .device_lm75.cm65 .detail .thumb img{transform: none;} #wrap .device_lm75.cm65 .detail .exp_list > li{top: -28%;} #wrap .device_lm75.cm65 .detail .exp_list .cut:before{width: 305px;} #wrap .device_lm75.cm65 .detail .exp_list .cut:after{width: 39px;height: 62px;left: calc(100% + 305px);} #wrap .device_lm75.cm65 .detail .exp_list .cut span{gap: 0;} #wrap .device_lm75.cm65 .detail .exp_list .cut span:before{left: calc(100% + 337px);top: 126px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut:before{width: 305px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut:after{right: calc(100% + 303px);width: 40px;height: 65px;clip-path: var(--polygon-path12);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut span:before{left: auto;right: calc(100% + 336px);top: 127px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3){top: 13%;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3) .cut:before{width: 312px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3) .cut:after{display:none;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3) .cut span:before{left: calc(100% + 309px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4){top: 20.5%;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut:before{right:100%;width: 250px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut:after{display:block;top: auto;bottom: 70px;right: calc(100% + 247px);width: 80px;height: 16px;clip-path: var(--polygon-path16);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut span:before{right: calc(100% + 318px);top: auto;bottom: 81px;margin-top: 0;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5){top: 54%;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut:before{width: 250px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut:after{left: calc(100% + 249px);width: 70px;height: 126px;bottom: 70px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut span:before{left: calc(100% + 310px);bottom: calc(100% + 47px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6){top: 67.5%;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut:before{width: 260px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut:after{bottom: 70px;right: calc(100% + 258px);width: 66px;height: 98px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut span:before{right: calc(100% + 322px);bottom: calc(100% + 26px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7){top: 94%;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut:before{width: 330px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut:after{left: calc(100% + 329px);width: 85px;height: 56px;top: auto;bottom: 70px;clip-path: var(--polygon-path10);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut span:before{top: auto;left: calc(100% + 408px);bottom: calc(100% - 20px);} #wrap .device_lm75.cm65 .dispatching_kit{padding-bottom:0;} #wrap .device_lm75.cm65 .schematic .item_wrap{display: none;} @media (max-width:1250px){ #wrap .device_lm75.cm65 .detail{margin-bottom: 0;} #wrap .device_lm75.cm65 .detail .exp_list .cut:before{width: 256px;} #wrap .device_lm75.cm65 .detail .exp_list .cut:after{left: calc(100% + 255px);} #wrap .device_lm75.cm65 .detail .exp_list .cut span:before{left: calc(100% + 289px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut:before{width: 244px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut:after{right: calc(100% + 243px);width: 40px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(2) .cut span:before{right: calc(100% + 276px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3) .cut:before{width: 262px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(3) .cut span:before{left: calc(100% + 258px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut:before{width: 230px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut:after{width: 44px;height: 18px;right: calc(100% + 228px);clip-path: var(--polygon-path13);transform: scaleY(-1);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut span:before{right: calc(100% + 260px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut:before{width: 198px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut:after{left: calc(100% + 197px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(5) .cut span:before{left: calc(100% + 258px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut:before{width: 245px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut:after{right: calc(100% + 244px);width: 21px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(6) .cut span:before{right: calc(100% + 260px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut:before{width: 280px;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut:after{left: calc(100% + 279px);} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(7) .cut span:before{left: calc(100% + 358px);} } @media (max-width:1023px){ #wrap .device_lm75.cm65 .detail .item_wrap{margin-top: 40px;} #wrap .device_lm75.cm65 .compo_list .schematic .item{padding:clamp(25px, 5vw, 50px) 0;} #wrap .device_lm75.cm65 .schematic .item_wrap{display: block;} #wrap .device_lm75.cm65 .schematic .thumb{max-width:34vw;width:auto;} #wrap .device_lm75.cm65 .schematic .exp_list .cut:before{display: none;} #wrap .device_lm75.cm65 .dispatching_kit .vec_list{display: none;} #wrap .device_lm75.cm65 .schematic .exp_list > li{align-items: center;} #wrap .device_lm75.cm65 .schematic .exp_list .desc{padding-top:0;} #wrap .device_lm75.cm65 .detail .exp_list > li:nth-child(4) .cut:after{display: none;} } @media (max-width:479px){ #wrap .device_lm75.cm65 .schematic .thumb{max-width:45vw;} } #wrap .device_lm75.cm65 .sound .thumb{top:48%; left:49%;} @media (max-width:767px){ #wrap .device_lm75.cm65 .sound .thumb{inset: auto;} #wrap .device_lm75.cm65 .sound .wave{top:1vw;} } #wrap .components{position: relative; padding-block: 100px; box-sizing: border-box;} #wrap .compo_list{display: flex; flex-direction: column; gap: 100px;} #wrap .compo_list > li{display: flex; flex-direction: column; gap: 60px;} #wrap .compo_list .flex_box{display: flex;flex-wrap: wrap;align-items: center;gap: 40px 0;} #wrap .compo_list .flex_box .thumb{font-size: 0;width: 37%;box-sizing: border-box;text-align: center;overflow: hidden;} #wrap .compo_list .flex_box .thumb.ver_m{display: none;} #wrap .compo_list .flex_box .cont_title{width: 63%;padding-left: clamp(40px, 6.3vw, 120px);box-sizing: border-box;} #wrap .compo_list .cont_title .icon{display: flex; height: 50px; align-items: center;} #wrap .compo_list .cont_title .icon + h4{margin-top: 27px;} #wrap .compo_list .exp_desc{font-size: var(--title-20);} #wrap .compo_list .cont_title .exp_desc{margin-top: 36px;} #wrap .compo_list .exp_desc dt{font-size: 125%; font-weight: 700; color: var(--point-color01);} #wrap .compo_list .exp_desc dt + dd{margin-top: 10px;} #wrap .compo_list .bullet_list li{letter-spacing: -0.02em;} #wrap .compo_list .schematic{background: var(--point-white);/* box-shadow: var(--shadow-01); */border-radius: 0 0 50px;} #wrap .compo_list .schematic .item{text-align: center;padding:50px 60px;box-sizing: border-box;background: inherit;clip-path: var(--polygon-path03);} #wrap .compo_list .schematic .title{position: relative;font-size: var(--title-20);margin-bottom: 27px;} #wrap .compo_list .schematic .title h4{font-size: 190%; font-weight: 700; color: var(--point-color02);} #wrap .compo_list .schematic .vec_list{display: flex; flex-wrap: wrap; gap: 40px;} #wrap .compo_list .schematic .vec_list + .vec_exp{margin-top: 30px;} #wrap .compo_list .schematic .vec_list > li{width: calc(100% / 2 - 20px); box-sizing: border-box;} #wrap .compo_list .schematic .vec_list a{display: block;} #wrap .compo_list .schematic .vec_list:not(:has(> li:nth-child(2))) > li{width: 100%;} #wrap .compo_list .schematic .heli_list > li:nth-child(1){width:calc(68% - 20px);} #wrap .compo_list .schematic .heli_list > li:nth-child(2){width:calc(32% - 20px);} #wrap .compo_list .schematic .vec_exp{display: flex;flex-wrap: wrap;gap: 40px 24px;padding-bottom: 28px;} #wrap .compo_list .schematic .vec_exp > li{position: relative; width: calc(100% / 4 - 18px); box-sizing: border-box;} #wrap .compo_list .schematic .vec_exp .desc{font-size: var(--title-20);} #wrap .compo_list .schematic .vec_exp .desc dt{position: relative; width: 100%; aspect-ratio: auto 1; overflow: hidden;} #wrap .compo_list .schematic .vec_exp .desc dt + dd{margin-top: 18px;} #wrap .compo_list .schematic .vec_exp .desc dt img{width: 100%; height: 100%; object-fit: cover;} #wrap .compo_list .schematic .vec_exp .desc dd{font-size: 110%; font-weight: 700; color: var(--point-color01);} #wrap .compo_list > li:nth-child(2n) .flex_box{flex-direction: row-reverse;} #wrap .compo_list .flex_box.clip .thumb{width: 50%;clip-path: var(--polygon-path03);border-radius: var(--radius-03);} #wrap .compo_list .flex_box.clip .cont_title{width: 50%;padding-left: clamp(40px, 4.2vw, 80px);} #wrap .compo_list > li:nth-child(2n) .flex_box.clip .cont_title{padding-inline: 0 clamp(40px, 4.2vw, 80px);} @media (max-width:1023px){ #wrap .components{padding-block: clamp(70px, 10vw, 100px);} #wrap .compo_list{gap: clamp(60px, 10vw, 100px);} #wrap .compo_list > li{gap: clamp(40px, 6vw, 60px);} #wrap .compo_list .cont_title .icon{height: clamp(35px, 5vw, 50px);} #wrap .compo_list .cont_title .icon + h4{margin-top: clamp(15px, 3vw, 27px);} #wrap .compo_list .cont_title .exp_desc{margin-top: clamp(20px, 4vw, 36px);} #wrap .compo_list .schematic .item{padding: clamp(25px, 5vw, 50px) clamp(25px, 6vw, 60px);} #wrap .compo_list .schematic .title{margin-bottom: clamp(15px, 3vw, 27px);} #wrap .compo_list .schematic .vec_list{gap: clamp(0px, 4vw, 40px);} #wrap .compo_list .schematic .vec_list + .vec_exp{margin-top: clamp(15px, 3vw, 30px);} #wrap .compo_list .schematic .vec_list > li{width: calc(100% / 2 - clamp(0px, 4vw, 40px) / 2);} #wrap .compo_list .schematic .vec_exp{gap: 30px 20px;padding-bottom:clamp(15px, 3vw, 28px)} #wrap .compo_list .schematic .vec_exp > li{width: calc(100% / 4 - 15px);} #wrap .compo_list .schematic .vec_exp .desc dt + dd{margin-top: clamp(12px, 2vw, 18px);} } @media (max-width:860px){ #wrap .compo_list .flex_box .thumb{width: 100% !important;} #wrap .compo_list .flex_box .thumb.ver_pc{display: none;} #wrap .compo_list .flex_box .thumb.ver_m{display:block;margin:25px 0;} #wrap .compo_list .flex_box .cont_title{width: 100% !important; padding-inline: 0 !important;} #wrap .compo_list .schematic .vec_list > li{width: 100%;} #wrap .compo_list .schematic .heli_list > li:nth-child(1){width:100%;} #wrap .compo_list .schematic .heli_list > li:nth-child(2){width:100%;} #wrap .compo_list .schematic .vec_exp{column-gap: 15px;} #wrap .compo_list .schematic .vec_exp > li{width: calc(100% / 3 - 10px);} #wrap .compo_list .schematic .vec_list > li .components02{width: calc(100% + 40px);max-width: initial;margin-left: -20px;} } @media (max-width:860px){ #wrap .compo_list .schematic .vec_exp > li{width: calc(100% / 2 - 7.5px);} } @media (max-width:860px){ #wrap .compo_list .schematic .vec_exp .desc dd{font-size: 100%;} } /*─────────────────────────────────────────────────────────── 게시판 작성 ───────────────────────────────────────────────────────────*/ /*** TABLE write ( board/_form_board_write ｜ board/_form_board_answer_write ｜ member/join ｜ member/mypage ｜ member/withdrawal ｜ member/change_pw ｜ member/periodic_change_pw ) ***/ .inq_title{text-align: center;font-size:var(--title-20);margin-bottom:20px;} .inq_title h3{font-size:200%;color:var(--black-color00);font-weight:700;} #wrap .bbs_write_box{box-sizing:border-box;padding:30px 20px;gap:20px;display: flex;flex-direction: column;flex-wrap:wrap;border-top:1px solid var(--black-color03);border-bottom:1px solid var(--border-color01);} #wrap .bbs_write_box .line2{display: flex;flex-wrap:wrap;gap:80px;} #wrap .bbs_write_box .line2 dl{width:calc(50% - 40px);max-width:590px;} #wrap .bbs_write_box dl{display: flex;flex-wrap:wrap;width:100%;align-items: flex-start;} #wrap .bbs_write_box dl dt{width:150px;font-size:var(--title-20);color:var(--black-color03);font-weight:500;display: flex;align-items: center;min-height:60px;text-align:left;} #wrap .bbs_write_box dl dt .require_dot{font-size:inherit;color:var(--point-color01);font-weight:inherit;display: inline-block;margin-left:3px;} #wrap .bbs_write_box dl dd{box-sizing:border-box;width:calc(100% - 150px);min-height:60px;display: flex;align-items: center;} #wrap .bbs_write_box dl dd ul{display: flex;gap:20px;align-items: center;height:100%;flex-wrap:wrap;} #wrap .bbs_write_box dl dd input[type="text"]{width:100%;height:60px;box-sizing:border-box;border-radius:4px;border:1px solid var(--border-color01);padding:0 20px;font-size:var(--title-18);color:var(--black-color03);font-weight:400;} #wrap .bbs_write_box dl dd input[type="text"]:focus, #wrap .bbs_write_box textarea:focus{border-color:var(--black-color01);} #wrap .bbs_write_box dl dd input[type="text"]::place-holder, #wrap .bbs_write_box textarea::placeholder{color:var(--black-color08);} #wrap .bbs_write_box dl dd select{width:240px;height:60px;} #wrap .bbs_write_box textarea{resize:none;width:100%;height:200px;box-sizing:border-box;border-radius:4px;border:1px solid var(--border-color01);padding:20px 20px;font-size:var(--title-18);color:var(--black-color03);font-weight:400;letter-spacing:-0.03em;} #wrap .bbs_write_box dl.captcha_dl dd{gap:10px;} #wrap .bbs_write_box .captcha_wrap{border:1px solid var(--border-color01);padding:10px;box-sizing: border-box; display: flex; gap:10px;border-radius:4px;} #wrap .bbs_write_box #captcha_box{margin:0;} #wrap .bbs_write_box #captcha_box img{width:155px !important;height:40px !important;box-sizing:border-box;border-radius:4px;border:1px solid var(--border-color01);} #wrap .bbs_write_box #refreshCode{display: inline-flex; background: url('../images/sub/icon_reset.svg') no-repeat center; font-size: 0; cursor: pointer; min-width: 40px; width: 40px; height: 40px; border:1px solid var(--border-color01); box-sizing: border-box;border-radius:4px;} #wrap .bbs_write_box input#captcha{max-width: 300px; margin:0;} #wrap .policy_wrap{box-sizing: border-box; margin-top: 40px;} #wrap .policy_wrap .area_box{margin-top: 20px;} #wrap .area_box{width: 100%; padding:10px;box-sizing: border-box;border-radius:4px;border:1px solid var(--border-color01);} #wrap .area_box textarea{width: 100%; padding:5px 7px; border:0; background: none; box-sizing: border-box; font-size: var(--title-14); font-weight: 400; color: var(--black-color08); line-height: 1.6; font-family: var(--font-type01);height:137px;} #wrap .area_box textarea::-webkit-scrollbar { width: 4px;} #wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color10); border-radius: 10px;} #wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background:var(--border-color01);} @media only screen and (max-width:1200px) { /* write */ #wrap .bbs_write_box .line2{gap:40px;} #wrap .bbs_write_box .line2 dl{width:calc(50% - 20px);} } @media only screen and (max-width:1024px) { #wrap .bbs_write_box dl dt{width:120px;} #wrap .bbs_write_box dl dd{width:calc(100% - 120px);} } @media only screen and (max-width:860px) { #wrap .bbs_write_box{padding:30px 15px;} #wrap .bbs_write_box .line2{gap:20px;} #wrap .bbs_write_box .line2 dl{width:100%;} #wrap .bbs_write_box dl.captcha_dl dd{flex-wrap:wrap;} #wrap .bbs_write_box input#captcha{width:100%;max-width:100%;} } @media only screen and (max-width:640px) { #wrap .bbs_write_box, #wrap .bbs_write_box .line2{gap:10px;} #wrap .bbs_write_box dl dt{min-height:50px;} #wrap .bbs_write_box dl dd{min-height:50px;} #wrap .bbs_write_box dl dd ul{gap:15px;} #wrap .bbs_write_box dl dd input[type="text"]{height:50px;padding:0 15px;} #wrap .bbs_write_box textarea{height:150px;padding:15px 15px;} #wrap .bbs_write_box dl dd select{width:100%;height:50px;} } @media only screen and (max-width: 479px) { #wrap .bbs_write_box{padding:20px 0;} #wrap .bbs_write_box dl dt{min-height:46px;width:90px;} #wrap .bbs_write_box dl dd{min-height:46px;width:calc(100% - 90px);} #wrap .bbs_write_box dl dd ul{gap:6px 10px;} #wrap .bbs_write_box dl dd input[type="text"]{height:46px;} #wrap .bbs_write_box dl dd select{height:46px;} #wrap .bbs_write_box .captcha_wrap{width:100%;} #wrap .bbs_write_box #refreshCode{min-width:30px;width:30px;height:40px;background-size:auto 13px;} #wrap .policy_wrap{margin-top:20px;} #wrap .policy_wrap .area_box{margin-top:10px;} }