/******************************************** sub common ********************************************/ /* sub visual */ .sub-visual { position:relative; width:100%; height:700px; background: #000; display:flex; align-items:center; justify-content:center; color: #fff; z-index:3; } .sub-visual .sub-bg { width:100%; height:100%; position:absolute; left:0; top:0; object-fit:cover; background-size:cover; background-repeat:no-repeat; background-position:center; center; z-index:-1; } .sub-visual .visual-tit { max-width:1200px; padding:0 5%;} .sub-visual .visual-tit h1 { font-size: 72px; font-weight: 600; line-height: 1.2; margin-top: -1rem; text-align: center; } .sub-visual.blog .blog_title { font-size: 72px; font-weight: 600; line-height: 1.2; margin-top: -1rem; text-align: center; } body:has(.irdata) .sub-bg { background-image:url('/images/sub/sub-bg01.jpg'); } body:has(.governance) .sub-bg { background-image:url('/images/sub/sub-bg02.jpg'); } body:has(.lib) .sub-bg { background-image:url('/images/sub/sub-bg03.jpg'); } body:has(.disclosure) .sub-bg { background-image:url('/images/sub/sub-bg04.jpg'); } body:has(.notice) .sub-bg { background-image:url('/images/sub/sub-bg05.jpg'); } body:has(.ci) .sub-bg { background-image:url('/images/sub/sub-bg06.jpg'); } body:has(.location) .sub-bg { background-image:url('/images/sub/sub-bg07.jpg'); } body:has(.news) .sub-bg { background-image:url('/images/sub/sub-bg08.jpg'); } body:has(.event) .sub-bg { background-image:url('/images/sub/sub-bg09.jpg'); } body:has(.ethical) .sub-bg { background-image:url('/images/sub/sub-bg10.jpg'); } body:has(.ehs) .sub-bg { background-image:url('/images/sub/sub-bg11.jpg'); } body:has(.customer) .sub-bg { background-image:url('/images/sub/sub-bg12.jpg'); } body:has(.robot) .sub-bg { background-image:url('/images/sub/sub-bg13.jpg'); } body:has(.catalog) .sub-bg { background-image:url('/images/sub/sub-bg14.jpg'); } body:has(.app) .sub-bg, body:has(.inquiry) .sub-bg { background-image:url('/images/sub/sub-bg15.jpg'); } body:has(.product) .sub-bg { background-image:url('/images/sub/sub-bg16.jpg'); } body:has(.cobot) .sub-bg { background-image:url('/images/sub/sub-bg17.jpg'); } body:has(.solution) .sub-bg { background-image:url('/images/sub/sub-bg18.jpg'); } body:has(.rental) .sub-bg { background-image:url('/images/sub/sub-bg18.jpg'); } body:has(.overview) .sub-bg { background-image:url('/images/sub/sub-bg19.jpg'); } body:has(.solution-list) .sub-bg { background-image:url('/images/sub/sub-bg20.jpg'); } body:has(.industry-list) .sub-bg { background-image:url('/images/sub/sub-bg21.jpg'); } /*body:has(.rental) .navigation { display:none; }*/ /* sub navigation */ .navigation { position:absolute; bottom:60px; width:90%; left:0; right:0; margin:0 auto; text-align: center; font-size: 16px; } .navigation .icon-arrow-down-light::before { width:10px; height:10px; } .navigation > ul { display:inline-flex; background:rgb(16 16 16 / 50%); backdrop-filter: blur(30px); border-radius:8px; } .navigation > ul > li { position:relative; width:220px; } :lang(en) .navigation > ul > li { width: 250px; } :lang(de) .navigation > ul > li { width: 250px; } :lang(fr) .navigation > ul > li { width: 290px; } :lang(ja) .navigation > ul > li { width: 250px; } .navigation > ul > li:before { content:''; width:1px; height:12px; background: rgba(255,255,255,0.2); position:absolute; left:0; top:50%; transform:translateY(-50%); } .navigation > ul > li:first-child:before, .navigation > ul > li:last-child:before { display:none; } .navigation > ul > li.home { width: 60px; } .navigation > ul > li > a { display:flex; align-items:center; height:60px; gap:8px; justify-content:center; font-size: 17px; color: #fff; word-break: keep-all; } .navigation > ul > li > a.open .icon-arrow-down-light { transform:rotate(180deg); } .navigation > ul > li > ul { position:absolute; width: 100%; background: #fff; color: #000; padding:20px 0; top:100%; border-radius:0 0 4px 4px; border:1px solid #e0e0e0; display:none; } .navigation > ul > li > ul > li > a { display:block; padding:5px; font-size: 16px; line-height: 1.6; } .navigation > ul > li > ul > li > a.on { color: #097CD3; } .navigation > ul > li > ul > li > a .icon { margin-top: 2px; } .navigation > ul > li > ul > li > a .icon::before { width:20px; height:20px; } @media (hover: hover) and (pointer: fine) { .navigation > ul > li > ul > li > a:hover { color: #097CD3; } .navigation > ul > li > ul > li > a:hover .icon::before { background-image: url('/images/icon-external-link-on.svg'); } } .navigation.fix { position:fixed; bottom:30px; z-index:3; } .navigation.fix > ul { animation: fadeUp .6s ease forwards; } .navigation.fix > ul > li > ul { top:auto; bottom:100%; border-radius: 4px 4px 0 0; } .navigation.fix > ul > li > a .icon { transform:rotate(180deg); } .navigation.fix > ul > li > a.open .icon { transform:rotate(0deg); } .navigation.hide > ul { animation: fadeDown .2s ease forwards; } @keyframes fadeUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(40px); opacity: 0; } } /* sub conatiner */ .sub-container { padding:130px 0 150px; position: relative; z-index:2; } .sub-container .dropdown { display:inline-block; min-width:220px; } .sub-container .dropdown .dropdown-toggle { width:100%; text-align:left; } .sub-container .section + .section { margin-top: 120px; } /* sub youtube */ .sub-container .frame { overflow: hidden; position: relative; background: #e8e8e8; } .sub-container .frame::before { content: ''; display: block; padding-top: 56.25%; width: 100%; height: 0; } .sub-container .frame .thumbnail { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all ease .85s; } .sub-container .frame .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sub-container .play { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: all ease .65s; } .sub-container .play::before { content: ''; display: block; width: 100%; height: 100%; background: url('/images/main/play.svg') no-repeat center / auto 50%; } .sub-container .frame.on .thumbnail, .sub-container .frame.on .play { visibility: hidden; opacity: 0; } /* sub layout */ .sub-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; } .sub-head .sub-tit { margin-bottom: 0; } .sub-head:has(.total) { align-items:flex-end; } .sub-head:has(.txt-box) { align-items:flex-end; } .sub-head .txt-box { font-size: 16px; } @media (hover: hover) and (pointer: fine) { .sub-head .txt-box a:hover { color:var(--clr-primary); text-decoration:underline; } } .sub-head select { padding: 0 64px 0 24px; height: 60px; font-size: 16px; font-weight: 600; color: var(--clr-dark); cursor:pointer; border:1px solid #E0E0E0; border-radius: 8px; transition:all ease .35s; min-width: 220px; background: url('/images/chevron-down.svg') #fff no-repeat center right 16px / 28px; } .tab-cont .sub-head { justify-content:flex-end; margin-top: -80px; } .sub-tit { margin-bottom: 40px; } .sub-tit h2 { font-size: 32px; font-weight: 600; color: var(--clr-dark); } .sub-tit p { margin-top: 32px; } .flex-cont { display:flex; } .flex-cont .left-cont { width:calc(100% - 980px); } .flex-cont .right-cont { width:980px; } /* link tab */ .tab-box { display:flex; gap:8px; } .tab-box > li > a { display:block; line-height: 1; padding:10px 20px; font-size: 16px; border:1px solid #ddd; color: #b9b9b9; border-radius:50px; transition:all ease .35s; font-weight: 600; } .tab-box > li > a:hover, .tab-box > li > a.on { background: var(--clr-dark); color: #fff; border-color:var(--clr-dark); } /* content tab */ .tabs { display:flex; gap:8px; flex-wrap:wrap; } .tab { padding:10px 20px; font-size: 16px; border:1px solid #ddd; background: #fff; color: #b9b9b9; border-radius:50px; transition:all ease .35s; font-weight: 600; line-height: 1.6; } .tabs > .tab:first-child:nth-last-child(2), .tabs > .tab:first-child:nth-last-child(2)~.tab { width: 50%; } .tabs > .tab:first-child:nth-last-child(3), .tabs > .tab:first-child:nth-last-child(3)~.tab { width: 33.33%; } .tabs > .tab:first-child:nth-last-child(4), .tabs > .tab:first-child:nth-last-child(4)~.tab { width:25%; } .tabs > .tab:first-child:nth-last-child(5), .tabs > .tab:first-child:nth-last-child(5)~.tab { width:20%; } .tab:hover, .tab.active { background: var(--clr-dark); color: #fff; border-color:var(--clr-dark); } .tab-cont { display: none; } .tab-cont.active { display: block; } .sub-head .tabs > .tab { width:auto !important; padding:6px 20px; } /* accordian */ .acc-cont { display:none; } /* btn */ .btn-external a { display:inline-flex; gap:8px; align-items:center; font-size: 18px; font-weight: 600; color: var(--clr-dark); line-height: 1; padding:14px 24px; border:1px solid var(--clr-dark); border-radius:8px; transition:all ease .35s; } .btn-external .icon:before { transition:all ease .35s; } .btn-wr { text-align: center; margin-top:64px; gap:8px; } .btn-wr .more { display:inline-block; font-size: 16px; padding:10px 20px 10px 30px; border:1px solid #ddd; border-radius:8px; background: #fff; color: #151515; transition:all ease .35s; } .btn-wr .more .icon::before { filter:invert(1); background-size:10px; transition:all ease .35s; } .btn-wr .btn { display:inline-flex; gap:16px; align-items:center; font-size: 15px; font-weight: 500; color: #151515; background: #fff; padding:17px 30px; border:1px solid #ddd; border-radius:8px; transition:all ease .35s; text-align:left; } .btn-wr .btn .icon:before { transition:all ease .35s; } @media (hover: hover) and (pointer: fine) { .btn-wr .more:hover { background: #151515; color: #fff; border-color:#151515; } .btn-wr .more:hover .icon::before { filter:invert(0); } .btn-wr .btn:hover { background: #151515; color: #fff; border-color:#151515; } .btn-wr .btn:hover .icon::before { filter:invert(1); } .btn-external a:hover { background: var(--clr-dark); color: #fff; border-color:var(--clr-dark); } .btn-external a:hover .icon:before { filter:invert(1); } } /* search */ .sub-search-box { margin-bottom: 30px; width: 100%; max-width: 600px;} .sub-search-box-wrapper { width:100%; margin:0 auto; font-size: 17px; } .sub-search-box form { display: block; width: 100%; } .sub-search-box .input-group { position: relative; display:flex; gap:0; border-radius:8px; border:1px solid #ddd; overflow:hidden; } .sub-search-box .input-group select { height:60px; padding:0 20px; border:0; width: 150px; min-width:auto; background-color: #fff; } :lang(fr) .sub-search-box .input-group select{ width: 210px;} .sub-search-box .input-group .search { position: absolute; top: 0; right: 0; width: 60px; height:60px; background: url('/images/search.svg') no-repeat center / auto 54%; } .sub-search-box .input-group .input { width:calc(100% - 150px); height: 60px; font-weight: 400; background: transparent; border: none; outline: none; padding: 0 60px 0 20px; } :lang(fr) .sub-search-box .input-group .input{ width:calc(100% - 210px);} .sub-search-box .input-group > * { flex:none; } /* table */ .cont-table { font-size: 18px; border-top:2px solid #000; } .cont-table table { table-layout:fixed; } .cont-table .title { color:var(--clr-dark); font-weight: 600; text-align:left; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; } .cont-table .title.no-contents { text-align: center; } .cont-table .title .type { color: var(--clr-primary); } .cont-table .title .date { display:inline-block; width: 120px; color: #444; font-size: 16px; font-weight: 400; } .cont-table .title a:hover { border-bottom:1px solid #000; } .cont-table .btns { display:flex; justify-content:space-around; align-items: center; } .cont-table .download { display:flex; gap:8px; align-items:center; justify-content:center; color: var(--clr-dark); font-size: 18px; } .cont-table .download:hover { color: var(--clr-primary); } .cont-table .download:hover .icon::before { background-image: url(/images/icon-download-on.svg); } .cont-table .link { display:flex; gap:8px; align-items:center; justify-content:center; color: var(--clr-dark); font-size: 18px; } .cont-table .link:hover { color: var(--clr-primary); border-color: var(--clr-primary); } .cont-table .link:hover .icon::before { background-image: url(/images/icon-external-link-on.svg); } .cont-table table th { border-bottom:1px solid #ddd; padding:20px 10px; color:var(--clr-dark); } .cont-table table td { border-bottom:1px solid #ddd; padding:24px 10px; text-align: center; } .cont-table + .txt-box { margin-top: 20px; text-align:right; } /* paging */ .pagination { display:flex; justify-content:center; gap:8px; margin-top: 80px; } .pagination > a { position:relative; width:36px; height:36px; display:inline-block; background-size:cover; background-repeat:no-repeat; background-position:center; display:flex; align-items:center; justify-content:center; text-align: center; color:var(--clr-dark); font-weight: 500; cursor: pointer;} .pagination > a.on { color: var(--clr-primary); } .pagination > a.on:before { content:''; width:12px; height:1px; background: var(--clr-primary); position:absolute; left:0; right:0; margin:0 auto; bottom:0; } .pagination > a.first { background-image: url('/images/sub/page-first.svg'); } .pagination > a.prev { background-image: url('/images/sub/page-prev.svg'); } .pagination > a.last { background-image: url('/images/sub/page-last.svg'); } .pagination > a.next { background-image: url('/images/sub/page-next.svg'); } .pagination > a.disabled{cursor: default; opacity:.5;} /* total */ .total { font-size: 16px; color:var(--clr-dark); font-weight: 600; } .total strong { color: var(--clr-primary); } /******************************************** sub page ********************************************/ /* news */ body:has(.news) .floater { display:none; } body:has(.news) .news-floater { display:block; } .news-floater .link { width:134px; } .news-floater .item:first-child .link { background: #fff; color: #151515; } .news-floater .icon { display: block; } .news-floater .icon::before { width: 20px; height: 20px; filter:invert(1); transition:all ease .3s; } .news-floater .icon-instagram::before { background-image: url('/images/instagram.svg'); } .news-floater .icon-linkedin::before { background-image: url('/images/linkedin.svg'); } .news-floater .icon-youtube::before { background-image: url('/images/youtube.svg'); } .news-floater .icon-facebook::before { background-image: url('/images/facebook.svg'); } .news-list { margin-bottom: 50px; } .news-list > ul > li { padding:60px 0; border-bottom:1px solid #ddd; } .news-list > ul > li > a { display:flex; align-items: center; } .news-list > ul > li:first-child { padding-top: 0; } .news-list .thumbnail { position:relative; width:400px; border-radius:16px; overflow:hidden; aspect-ratio: 1.55 / 1; } .news-list .thumbnail > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } .news-list .content { width:calc(100% - 400px); padding-left: 80px; } .news-list .content .text { margin:16px 0 40px; font-weight: 300; min-height:86px; line-height: 1.6; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-wrap:break-word; } .news-list .content .title { font-size: 28px; color: #151515; font-weight: 600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; } .news-list .content .date { color: #656565; font-weight: 300; font-size: 16px; } /* event */ .event .status { font-size: 14px; display:flex; gap:8px; justify-content:center; margin-top: 30px; } .event .status > span { border-radius:4px; border:1px solid #ddd; background: #fff; color: #656565; padding:6px 12px; min-width:60px; text-align: center; } .event .status > .ing { background: #005EB8; color: #fff; border-color:#005EB8; } .event .status > .end { background: #999; color: #fff; border-color:#999; } .event .status > .expected { background: #333; color: #fff; border-color:#333; } .event-list { margin-bottom: 50px; } .event-list > ul { display:flex; gap:80px 40px; flex-wrap: wrap; } .event-list > ul > li { width: calc(33.33% - 26.666px); } .event-list .thumbnail { position:relative; width:100%; border-radius:16px; overflow:hidden; aspect-ratio: 1.5 / 1; } .event-list .thumbnail .status { position:absolute; top:20px; left:20px; z-index:1; margin-top: 0; } .event-list .thumbnail > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } .event-list .content { margin-top: 30px; } .event-list .content .title { font-size: 20px; color: #151515; font-weight: 600; } .event-list .content .date { color: #656565; font-weight: 300; font-size: 16px; margin-bottom:6px; } .no-data{width: 100% !important; text-align: center !important; padding: 100px 10px !important;} /* board write */ .board-head { padding-bottom: 50px; border-bottom:1px solid #ddd; text-align: center; } .board-head h2 { font-size: 32px; color: #151515; font-weight: 600; line-height: 1.4; } .board-head p { color: #656565; margin-top: 30px; } .board-cont { max-width:1240px; margin:0 auto; padding:80px 0 40px; } .notice .content { text-align: center; } .board-cont figcaption { font-size: 15px; margin-top: 16px; margin-bottom: 2em; } .board-cont .key-list { background: #f5f5f5; padding:30px; border-radius:8px; margin-bottom: 60px; } .board-cont .key-list li { color: #151515; } .board-cont .key-list li + li { margin-top: 4px; } .board-cont .file-list { background: #f5f5f5; padding:30px; border-radius:8px; font-size: 16px; margin-top: 80px; } .board-cont .file-list .icon-download { margin-right: 6px; } .board-cont .file-list li + li { margin-top: 10px; } .board-cont .file-list li a:hover { color: #005EB8; } .board-cont .file-list li a:hover .icon-download::before { background-image: url('/images/icon-download-on.svg'); } .board-btns { position:relative; border-top:1px solid #ddd; display:flex; justify-content:space-between; align-items:center; height:110px; padding-top: 30px; } .board-cont .content{font-size: 17px;} .board-cont.promotion .content img {display: block; margin-right: auto; margin-left: auto;} .blog .board-head h1 { font-size: 32px; color: #151515; font-weight: 600; line-height: 1.4; } .blog .board-cont .content h2 { margin-top: 2em; font-size: 28px; color: #151515; font-weight: 600; line-height: 1.4; } .board-cont .content h3 { margin-top: 2em; margin-bottom: 0.4em; font-size: 22px; color: #151515; } .board-cont .content h6 { font-size: 20px; margin: 3em 0 1em; } .blog .board-cont .content p + p { margin-top: 1em; } .blog .board-cont .content h2 + p{ margin-top: 1em; } .blog .board-cont .content a { text-decoration: underline !important; font-weight: 600; color: #005EB8; } .board-cont .content ul{margin:5px 0;} .board-cont .content ul li{position:relative; padding-left: 12px;} .board-cont .content ul li:before{content:''; width:4px; height:4px; border-radius:50%; background: #666; position:absolute; left:0; top:12px;} .board-btns .btn-list { position:absolute; left:50%; margin-left: -40px; bottom:0; } .board-btns .btn-prev { width:calc(40% - 40px); background: url('/images/arrow-prev.svg') no-repeat left center; padding-left: 30px; } .board-btns .btn-next { width:calc(40% - 40px); background: url('/images/arrow-next.svg') no-repeat right center; padding-right: 30px; } .board-btns .btn-prev a, .board-btns .btn-next a { display:flex; gap:20px; } .board-btns .btn-prev strong, .board-btns .btn-next strong { color: #151515;white-space: nowrap; } .board-btns .btn-prev span, .board-btns .btn-next span { display:inline-block; width: 100%; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; } .board-btns .btn-next span { text-align: right; } .board-btns a[href=""], .board-btns a:not([href]) { pointer-events: none; cursor: default; } @media (hover: hover) and (pointer: fine) { .board-btns .btn-prev a:hover span, .board-btns .btn-next a:hover span { text-decoration: underline; text-underline-offset: 0.3em; } } /* social */ .social-cont{margin-top: 100px;} .social-cont .social-link { filter:invert(1); } .social-cont .social-sns { margin-top: 32px; display: flex; align-items: center; } .social-cont .social-sns li + li { margin-left: 24px; } .social-cont .social-link { transition: opacity ease .1s; opacity:.3; } .social-cont .social-link .icon { display: block; width: 24px; height: 24px; } .social-cont .social-link .icon-instagram::before { background-image: url('/images/instagram.svg'); } .social-cont .social-link .icon-linkedin::before { background-image: url('/images/linkedin.svg'); } .social-cont .social-link .icon-youtube::before { background-image: url('/images/youtube.svg'); } .social-cont .social-link .icon-facebook::before { background-image: url('/images/facebook.svg'); } @media (hover: hover) and (pointer: fine) { .social-cont .social-link:hover { opacity:1; } } /* embed */ .social-cont .list { overflow: hidden; padding-left: calc(50% - 760px); } .social-cont .taggbox { overflow: hidden; width: 100%; height: 100%;} .social-cont .tb_app_wrapper .splide.tb_hc_post_slider { padding: 0 20px; } .social-cont .tb_hc_content { display: none; } .social-cont .tb_hc_contant_wrapper { padding: 16px; } .social-cont .tb_hc_image_wrap_, .social-cont .tb_hc_video_wrap_ { padding-bottom: calc(192 / 340 * 100%) !important; } .social-cont .tb_hc_author_profile { margin: 0; } .social-cont .tb_hc_author_info { margin-bottom: 0; } .social-cont .tb_hc_authorname { text-align: left; } .social-cont .tb_hc_post_info { text-align: left; } .social-cont .tb_hc_post_info { justify-content: flex-start; } .social-cont .tb_hc_author_wrapper { position: relative; margin-bottom: 0; padding: 0em 54px; } .social-cont .tb_hc_author_profile { position: absolute; left: 0; top: -15%; box-shadow: none; width: 45px; height: 45px; } .social-cont .tb_hc_social_ { position: absolute; top: 0.285em; right: 0; } .social-cont .tb_hc_social_ico { font-size: 18px; } .social-cont .tb_hc_fixed_height .tb_hc_arrow, .social-cont .tb_hc_fixed_height_te .tb_hc_arrow { top: calc(50% - 25px); } .social-cont .tb_hc_arrow { width: 50px; height: 50px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; color: #fff; } .social-cont .tb_hc_arrow::before { content: none; } .social-cont .tb_hc_arrow::after { font-family: swiper-icons; font-size: 20px; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .social-cont .tb_hc_arrow_left__ { left: 0; } .social-cont .tb_hc_arrow_right__ { right: 10%; } .social-cont .tb_hc_arrow_left__::after { content: 'prev'; } .social-cont .tb_hc_arrow_right__::after { content: 'next'; } .social-cont .tb_share_button_ { display: none; } .social-cont .tb_share_icon_list { opacity: 1; transform: rotate(1turn); } .social-cont .tb_share_icon_list:nth-child(1) { left: 0 !important; } .social-cont .tb_share_icon_list:nth-child(2) { left: 32px !important; } .social-cont .tb_share_icon_list:nth-child(3) { left: 64px !important; } /* investment */ .investment .txt-flex { display:flex; justify-content:space-between; align-items:flex-start; margin-top: 20px; } .investment .txt-flex .txt-box { margin-top: 0; } .investment .txt-flex .btn-wr { margin-top: 0; } .investment .txt-flex .btn-wr .btn { padding:12px 24px; } .investment .txt-flex .txt-dot { color: var(--clr-dark); font-weight: 500; } .investment .txt-flex .txt-dot:before { content:''; width:7px; height:7px; background: #005EB8; border-radius:50%; display:inline-block; margin-right: 8px; vertical-align: middle; margin-top: -3px; } .investment .txt-box { color: #999; font-size: 16px; } .investment .img-box { text-align: center; } .investment .img-box + .txt-box { text-align:right; } /* contact btn */ body:has(.contact-btns) .floating-container { bottom: calc(100% + 220px); } .contact-btns { display:flex; width:100%; margin-top: 180px; } .contact-btns .btn { display:flex; align-items:center; justify-content:space-between;; width: 100%; background: #242424; color: #fff; padding:70px 120px; font-size: 28px; font-weight: 600; } .contact-btns .btn .icon::before { width: 48px; height:48px; } .contact-btns .btn.black { background: #000; } .contact-btns .btn.primary { background: #005EB8; } .contact-btns .btn .hover-under:before { background: #fff; } /* cobot */ .cobot { overflow:hidden; } .cobot section { padding:150px 0; } .cobot section:first-child { padding-top: 0; } .cobot section:last-child { padding-bottom: 70px; } .cobot .sub-tit h2 small { font-size: .7em; vertical-align:top; display:block; } .cobot .flex-cont { position:relative; justify-content:space-between; flex-wrap:wrap; } .cobot .flex-cont > div { width: calc(50% - 40px); } .cobot .flex-cont .right-cont { padding-right: 5%; } .cobot .flex-cont:before { content:''; color: #151515; opacity:.2; width: 100%; font-size: 92px; font-weight: 600; display:block; line-height: 1; margin-bottom: -13px; white-space: nowrap; } .cobot .num-list { counter-reset: my-counter; } .cobot .num-list .btn-wr { text-align:left; margin-top: 32px; } .cobot .num-list > li + li { margin-top: 40px; } .cobot .num-list > li { } .cobot .num-list > li .tit { font-size: 22px; font-weight: 500; position:relative; color: #005EB8; margin-bottom: 16px; } /* .cobot .num-list > li .tit { font-size: 22px; font-weight: 500; position:relative; padding-left: 40px; color: #151515; margin-bottom: 16px; } .cobot .num-list > li .tit:before { counter-increment: my-counter; content: counter(my-counter, decimal-leading-zero); width: 29px; height: 29px; border-radius:4px; background: #151515; color: #fff; font-size: 16px; font-weight: 600; display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:3px; } */ .cobot .super-safe .flex-cont:before { content:'SUPER SAFE'; } .cobot .super-easy .flex-cont { flex-direction: row-reverse; } .cobot .super-easy .flex-cont:before { content:'SUPER EASY'; color: #fff; text-align:right; } .cobot .super-easy { background: #181A1F; color: #fff; border-radius:36px 36px 0 0; } .cobot .super-easy .sub-tit h2 { color: #fff; } .cobot .super-easy .num-list > li .tit { color: #fff; } .cobot .super-easy .num-list > li .tit:before { background: #fff; color: #151515; } .cobot .super-easy .num-list > li p { color:rgba(255,255,255,0.8); } .cobot .super-flexible .flex-cont:before { content:'SUPER FLEXIBLE'; } /* robot */ .sub-container:has(.robot) { padding-top: 0; padding-bottom: 0; } .robot .section + .section { margin-top: 160px; } .robot .inner { max-width:1680px; } .robot h3 { font-size: 32px; font-weight: 600; color: #151515; } .robot .training-robot { position:relative; background: #f7f7f7; padding:150px 0 160px; } .robot .training-robot:before { content:''; width:1000px; background: url('/images/services/logo-symbol.png') no-repeat center center / contain; aspect-ratio:7.4 / 1; position:absolute; right:5%; bottom:0; } .robot .training-robot .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; height: 780px; } .robot .training-robot .grid-container h3 strong { color: #005EB8; } .robot .training-robot .grid-container .item { position:relative; background: #fff; border-radius:16px; padding:48px 40px; display: flex; flex-direction: column; justify-content: space-between; overflow:hidden; } .robot .training-robot .grid-container .item > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } .robot .training-robot .item:nth-child(1) { grid-column: 1; grid-row: span 2; } .robot .training-robot .item:nth-child(2) { grid-column: 2; grid-row: 1; } .robot .training-robot .item:nth-child(3) { grid-column: 3 / span 2; grid-row: 1; } .robot .training-robot .item:nth-child(4) { grid-column: 2; grid-row: 2; } .robot .training-robot .item:nth-child(5) { grid-column: 3; grid-row: 2; } .robot .training-robot .item:nth-child(6) { grid-column: 4; grid-row: 2; } .robot .training-kit { background: #f8f8f8; border-radius:16px; display:flex; align-items:flex-start; padding:40px; } .robot .training-kit .kit-box { width:488px; border-radius:16px; background: #fff; padding:48px 40px; } .robot .training-kit .kit-box .btn-wr .btn { display: flex; justify-content: space-between; align-items: center; } .robot .training-center { display:flex; color: #fff; border-radius:16px; justify-content: space-between; overflow:hidden; background: linear-gradient(78.36deg, #0D4E8E 29.41%, #043C73 69.96%); } .robot .training-center .img-box { width: 44.167%; } .robot .training-center .img-box img { width: 100%; object-fit: contain; height: 100%; object-position: center bottom; } .robot .training-center .txt-box { width: 55.833%; padding:64px 15% 64px 5%; } .robot .training-center .txt-box h3 { color: #fff; } .robot .training-center .txt-box ul { margin-top: 24px; } .robot .training-center .txt-box ul li { position:relative; color:rgba(255,255,255,0.8); padding-left: 15px; } .robot .training-center .txt-box ul li:before { content:''; width:4px; height:4px; border-radius:50%; background: #fff; position:absolute; left:0; top:12px; } .robot .training-center .txt-box ul li + li { margin-top: 4px; } .robot .training-center .txt-box .btn-wr { display:flex; gap:16px; } .robot .training-center .txt-box .btn-wr .btn { width: 100%; display: flex; justify-content: space-between; align-items: center; } .robot .training-solution { display:flex; align-items:center; gap:120px; } .robot .training-solution .img-box { border-radius:16px; } .robot .training-solution h3 { margin-top: 48px; margin-bottom: 8px; } .robot .training-solution h3:first-child { margin-top: 0; } .robot .training-solution .btn-wr .btn { width: 100%; max-width:280px; display: flex; justify-content: space-between; align-items: center; } /* catalog */ .sub-container:has(.catalog) .inner { max-width:1680px; } .catalog { padding-bottom: 60px; } .catalog .section:first-child { position:relative; z-index:2; } .catalog .dropdown { width:112px; min-width:auto; } .catalog .btn-wr { display:flex; gap:8px; } .catalog .btn-wr .btn { background: #999; border-color:#999; color: #fff; } .catalog .btn-wr .btn:hover { background: #151515; border-color:#151515; } .catalog .btn-wr .btn .icon::before { filter: invert(1); } .catalog .tabs { width: 100%; gap:0; margin-bottom: 60px; } .catalog .tab { height:65px; font-size: 18px; border:0; border-bottom:1px solid #ddd; border-radius:0; } .catalog .tab:hover { color: #151515; background: #fff; } .catalog .tab.active { color: #151515; background: #fff; border-bottom:2px solid #151515; } .total-brochure { display:flex; gap:20px; } .total-brochure > div { width:50%; border-radius:16px; } .total-brochure .bro-img { border-radius:16px; overflow:hidden; } .total-brochure .bro-img img { width:100%; height:100%; object-fit:cover; } .total-brochure .bro-cont .type { display:inline-block; background: #005EB8; color: #fff; padding:6px 12px; font-size: 14px; font-weight: 500; border-radius:4px; margin-bottom: 24px; } .total-brochure .bro-cont { background: #f1f1f1; padding:130px 80px; } .total-brochure .bro-cont h2 { font-size: 40px; font-weight: 600; color: #151515; } .total-brochure .bro-cont .dropdown { width:100%; } .total-brochure .dropdown .dropdown-button { font-size: 17px; padding:8px 0; } .total-brochure .bro-cont .btn-wr .btn { width:100%; justify-content:space-between; } .total-brochure .dropdown .dropdown-toggle { padding: 17px 30px; height:auto; font-size: 18px; } .total-brochure .btn-wr { gap:16px; } .catalog-list { display:flex; flex-wrap:wrap; gap:60px; } .catalog-list > li { width:calc(25% - 45px); } .catalog-list > li.active { display:block; } .catalog-list .catalog-thumb > img { width: 100%; } .catalog-list .desc { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; margin-top: 24px; } .catalog-list .sbj {width: calc(100% - 160px); padding-top: 5px; font-size: 20px; color: #151515; } .catalog-list .btn-wr { margin-top: 0; width: 160px; } .catalog-list .dropdown .dropdown-toggle { width: 100%; font-size: 15px; height:40px; padding: 0 24px 0 10px; border-radius:4px; } .catalog-list .dropdown .dropdown-toggle:after { right:6px; width: 16px; height: 16px; } .catalog-list .dropdown .dropdown-button { font-size: 15px; padding:5px 0; } .catalog-list .btn-wr .btn { border-radius:4px; padding:0; width: 40px; height: 40px; align-items: center; justify-content: center; } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); z-index:9999; display: none; } .popup-content { position:relative; background: #fff; padding: 48px; border-radius: 16px; width: 90%; max-width:860px; max-height: calc(100vh - 240px); font-size: 16px; } .popup-content .close-btn { position:absolute; top:30px; right:42px; font-size: 16px; } .popup-content .close-btn .icon:before { width: 40px; height: 40px; background-size:cover; } .popup-content h3 { color: #151515; font-size: 28px; } .popup-content > p { line-height: 1.5; margin-top: 5px; } .popup-content .form-container { border-top:2px solid #000; padding-top: 20px; margin-top: 20px; height: calc(100vh - 430px); } .popup-content .form-container .scrollable-container { padding-right: 20px; } .popup-content .form-container .form-list { flex-direction:column; gap:16px; } .popup-content .form-container .form-list > li { width: 100%; } .popup-content .form-container .privacy-use { border-top:0; margin-top: 0; padding-top: 40px; } .popup-content .form-container .privacy-use h3, .popup-content .form-container .privacy-use h4 { font-size: 22px; } .popup-content .form-container .privacy-use .cont { margin:20px 0; } .popup-content .form-container .privacy-use .cont { padding:20px; padding-bottom: 80px; font-size: 15px; } .popup-content .form-container .privacy-use .more { width:calc(100% - 40px); left:20px; } .popup-content .form-container::-webkit-scrollbar { width:6px; } .popup-content .form-container::-webkit-scrollbar-track { background-color: transparent; } .popup-content .form-container::-webkit-scrollbar-thumb { background-color: #aaa; } .popup-content .form-container::-webkit-scrollbar-button { display: none; } .popup-content .form-container::-webkit-scrollbar-track, .popup-content .form-container::-webkit-scrollbar-thumb { border-radius: 5px; } /* ci */ .ci h2 { line-height: 1; } .ci h3 { font-size: 22px; font-weight: 600; color: var(--clr-dark); margin-bottom: 20px; } .ci .btns { margin-top: 40px; } .ci .btns > a { gap:20px; display:inline-flex; color: var(--clr-dark); font-weight: 500; transition:all ease .35s; } .ci .btns > a + a { margin-left: 60px; } .ci .ci-color { display:flex; justify-content:space-between; } .ci .ci-color p strong { font-weight: 600; color: var(--clr-dark); } .ci .ci-provision { margin-top: 120px; } .ci .ci-provision .img { margin-top: 40px; } .ci .ci-wordmark { margin-top: 80px; } .ci .ci-wordmark .img { margin:40px 0; } .ci .ci-wordmark p { max-width:80%; } .ci-banner { width:100%; height:400px; background: url('/images/about/ci-banner.jpg') no-repeat center center / cover; padding:60px; } .ci-banner > ul { display:flex; } .ci-banner > ul > li { width:50%; } .ci-banner a { font-size: 28px; font-weight: 600; color: #fff; display:inline-flex; gap:16px; align-items:center; } .ci-banner a .icon:before { width: 40px; height: 40px; } .ci-banner a .hover-under:before { background: #fff; bottom:0; } @media (hover: hover) and (pointer: fine) { .ci .btns > a:hover { color:var(--clr-primary); } .ci .btns > a:hover .icon:before { background-image: url('/images/icon-download-on.svg'); } } /* location */ .sub-container:has(.location) { background: #f7f7f7; padding-bottom: 0; } .location .office-list > li { display:flex; background: #fff; padding:64px; border-radius:16px; border:1px solid #ddd; } .location .office-list > li + li { margin-top: 24px; } .location .office-list > li .office { width:300px; padding-right: 20px; } .location .office-list > li .address { width:calc(100% - 300px); padding-right: 60px; } :lang(en) .location .office-list > li .address { padding-right: 70px; } :lang(de) .location .office-list > li .address { padding-right: 110px; } :lang(ja) .location .office-list > li .address { padding-right: 110px; } :lang(fr) .location .office-list > li .address { padding-right: 90px; } .location .office-list > li .address dl { display:inline-flex; gap:10px; margin-top: 18px; } .location .office-list > li .address dl + dl { margin-left: 40px; } .location .office-list > li .address .icon { vertical-align:middle; } .location .office-list > li h2 { font-size: 26px; font-weight: 600; color:var(--clr-dark); } .location .address { position:relative; } .location .acc-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; right:0; top:0; } .location .acc-btn::after { content:'지도보기'; display:block; font-size: 16px; } :lang(en) .location .acc-btn::after { content:'View Map'; } :lang(zh) .location .acc-btn::after { content:'查看地图'; } :lang(de) .location .acc-btn::after { content:'Karte anzeigen'; } :lang(fr) .location .acc-btn::after { content:'Voir la carte'; } :lang(ja) .location .acc-btn::after { content:'マップを表示'; } .location .acc-btn.on::after { content:'지도닫기'; color: var(--clr-primary); } :lang(de) .location .acc-btn.on::after { content:'Schließen'; } :lang(en) .location .acc-btn.on::after { content:'Close'; } :lang(zh) .location .acc-btn.on::after { content:'关闭地图'; } :lang(fr) .location .acc-btn.on::after { content:'Fermer'; } :lang(ja) .location .acc-btn.on::after { content:'マップを非表示'; } .location .acc-btn.on .icon-map::before { background-image: url('/images/icon-map-on.svg'); } .location .icon-map::before { width:48px; height:48px; } .location .acc-cont { padding-top: 50px; } .location .acc-cont .map_content { border-radius: 16px; overflow: hidden; margin-right: -60px; width: calc(100% + 60px); height:500px; } :lang(en) .location .acc-cont .map_content { margin-right: -70px; width: calc(100% + 70px); } :lang(de) .location .acc-cont .map_content { margin-right: -110px; width: calc(100% + 110px); } :lang(ja) .location .acc-cont .map_content { margin-right: -110px; width: calc(100% + 110px); } :lang(fr) .location .acc-cont .map_content { margin-right: -90px; width: calc(100% + 90px); } @media (hover: hover) and (pointer: fine) { .location .acc-btn:hover::after { color: var(--clr-primary); } .location .acc-btn:hover .icon-map::before { background-image: url('/images/icon-map-on.svg'); } .location .office-list > li .address a:hover { text-decoration:underline; text-underline-offset: 0.3em; color: #000; } } /* inquiry */ .inquiry .sub-tit { margin-bottom: 24px; } .inquiry .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .inquiry .grid-container h3 strong { color: #005EB8; } .inquiry .grid-container .item { position:relative; background: #f1f1f1; border-radius:16px; padding:64px; } .inquiry .item:nth-child(3) { grid-column: span 2; } .inquiry .link-list { display:flex; gap:160px; } .inquiry .link-list > ul { width:100%; } .inquiry .link-list > ul > li { padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; } .inquiry .link-list > ul > li + li { border-top:1px solid #ddd; } .inquiry .link-list .btn { line-height: 1; padding:14px 24px; border-radius:4px; border:1px solid #ddd; background: #fff; display:inline-flex; align-items:center; font-weight: 400; transition:all ease .35s; min-width: 160px; justify-content: space-between; white-space: nowrap; } .inquiry .link-list .btn .icon::before { transition:all ease .35s; } :lang(fr) .inquiry .link-list .btn { min-width:180px; } :lang(ja) .inquiry .link-list .btn { min-width:180px; } @media (hover: hover) and (pointer: fine) { .inquiry .link-list .btn:hover { color:#fff; background: #151515; border-color:#151515; } .inquiry .link-list .btn:hover .icon::before { filter: invert(1); } } /* app */ .app .inner { max-width:1280px; width: 85%; } .app .sub-tit { text-align: center; margin-bottom: 80px; } .app .tabs { width: 100%; gap:0; margin-bottom: 60px; } .app .tab { height:auto; min-height: 65px; font-size: 18px; border:0; border-bottom:1px solid #ddd; border-radius:0; text-align: center; display:flex; align-items:center; justify-content:center; line-height: 1.4; } :lang(ja) .app .tab{letter-spacing:1px;} .app .tab:hover { color: #151515; background: #fff; } .app .tab.active { color: #151515; background: #fff; border-bottom:2px solid #151515; } .app-service { background: #f1f1f1; padding:60px; display:flex; justify-content:space-between; align-items:center; margin-bottom: 60px; gap:40px; } .app-service .btn-wr { margin-top: 0; } .app-service .btn-wr .btn { white-space: nowrap; } .app-partnership { background: #f1f1f1; padding:60px; margin-bottom: 60px; } .app-partnership h3:first-child { margin-top: 0; } .app-partnership h3 { font-size: 24px; color: #151515; margin-top: 40px; margin-bottom: 16px; } .app-partnership p { font-size: 16px; } /* sustainability */ .sustainability .tabs { width: 100%; gap:0; margin-bottom: 60px; } .sustainability .tab { width: 50%; height: 65px; font-size: 18px; border:0; border-bottom:1px solid #ddd; border-radius:0; text-align: center; display:flex; justify-content:center; align-items:center; } .sustainability .tab:hover { color: #151515; background: #fff; } .sustainability .tab.active { color: #151515; background: #fff; border-bottom:2px solid #151515; } /* ethical */ .ethical .code-ethics { text-align: center; } .ethical .code-ethics .btn-wr .btn { font-size: 18px; } .ethical .code-partner .title { position:relative; font-size: 32px; color: #151515; font-weight: 600; } .ethical .code-partner .title h3 { font-size: 18px; margin-bottom: 24px; } .ethical .code-partner .title:before { content:''; width:400px; aspect-ratio: 6 / 1; background: url('/images/sub/logo-symbol.png') no-repeat center center / contain; position:absolute; right:0; bottom:0; } .ethical .code-partner > ul { display:flex; gap:40px; justify-content:space-between; margin-top: 64px; } .ethical .code-partner > ul > li { position:relative; width:100%; text-align: center; border-radius:12px; overflow:hidden; } .ethical .code-partner > ul > li .bg { width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; } .ethical .code-partner > ul > li .bg img { width: 100%; height: 100%; object-fit:cover; } .ethical .code-partner > ul > li .text { color: #fff; margin:260px 24px 24px; background: rgba(0,0,0,0.2); backdrop-filter: blur(50px); padding:24px; border-radius:8px; } .ethical-help { margin-top: 80px; } .ethical-help > li { padding:64px; 80px; background: #f1f1f1; border-radius:16px; display:flex; } .ethical-help > li .title { width:40%; font-size: 32px; font-weight: 600; color: #151515; } .ethical-help > li .content { width:55%; } .ethical-help > li .content h3 { font-size: 22px; color: #151515; font-weight: 600; } .ethical-help > li .content p { margin-top: 20px; } .ethical-help > li.cyber-report { background: #151515; color: #fff; } .ethical-help > li.cyber-report .title { position:relative; color: #fff; } .ethical-help > li.cyber-report .title:before { content:''; width:400px; aspect-ratio: 6 / 1; background: url('/images/sub/logo-symbol.png') no-repeat center center / contain; position:absolute; left:0; bottom:0; } .ethical-help > li.cyber-report h3 { color: #fff; } .ethical-help .btn-external { margin-top: 64px; } .ethical-help .btn-external a { color: #fff; font-size: 18px; border-color:rgba(255,255,255,0.3); } @media (hover: hover) and (pointer: fine) { .ethical-help .btn-external a:hover { border-color:#fff; } .ethical-help .btn-external a:hover .icon:before { filter:none; } .ethical-help > li .content a[href^="mailto:"]:hover { text-decoration:underline; color: var(--clr-dark); } } /* ehs */ .ehs { font-size: 20px; } .ehs .ehs-list { margin:60px 0; } .ehs .ehs-list > li { padding:48px; background: #f1f1f1; border-radius:12px; } .ehs .ehs-list > li + li { margin-top: 24px; } .ehs .ehs-list > li h3 { font-size: 24px; font-weight: 600; color: #151515; display:flex; justify-content:space-between; margin-bottom: 24px; } .ehs .ehs-list > li h3 .num { font-size: 20px; font-weight: 650; color: #999; padding-top: 2px; } .ehs .ehs-list > li p { max-width:720px; font-size: 18px; } .ehs .sign { font-size: 24px; color: #151515; font-weight: 650; display:flex; gap:12px; align-items:center; margin-top: 10px; justify-content: flex-end; } .ehs .sign-txt { text-align: right; } .ehs .ehs-list.dot { display:flex; flex-wrap:wrap; gap:24px; } .ehs .ehs-list.dot > li { width:calc(50% - 12px); margin-top: 0; } .ehs .ehs-list.dot > li h3 { flex-direction: column-reverse; align-items: flex-start; gap:26px; margin-bottom: 18px; } .ehs .ehs-list.dot > li p { position:relative; padding-left: 14px; } .ehs .ehs-list.dot > li p:before { content:''; width:4px; height:4px; background: #151515; border-radius:50%; position:absolute; left:0; top:12px; } .ehs .ehs-list.dot > li p + p { margin-top: 8px; } /* process common */ .process-list { display:flex; gap:64px; } .process-list > li { position:relative; width:100%; background: #f1f1f1; border-radius:16px; padding:48px 32px; text-align: center; transition:all ease .35s; } .process-list > li:before { content:''; width:32px; height:32px; background: url('/images/services/process-arrow.png') no-repeat center center / contain; position:absolute; right:-48px; top:50%; margin-top: -16px; } .process-list > li:last-child:before { display:none; } .process-list > li strong { color: #005EB8; font-weight: 600; transition:all ease .35s; } .process-list > li .img { margin:32px 0; } .process-list > li .text h3 { font-size: 28px; color: #151515; transition:all ease .35s; font-weight: 600; margin-bottom: 10px; } :lang(en) .process-list > li .text h3 { font-size: 26px; } :lang(de) .process-list > li .text h3 { font-size: 24px; } .process-list > li .text p { margin-top: 4px; opacity:.8; } .process-list > li.on { background: #005EB8; color: #fff; } .process-list > li.on strong { color: #fff; } .process-list > li.on .text h3 { color: #fff; } /* customer */ .customer .flex-cont .left-cont { width: calc(100% - 1100px); } .customer .flex-cont .right-cont { width: 1100px; } .customer .call-center { text-align: center; } .customer .call-center .sub-tit strong { color: #005EB8; font-weight: 600; } .customer .call-box { display:flex; gap:20px; width: 100%; } .customer .call-box > div { background: #f1f1f1; border-radius:20px; padding:60px 48px; } .customer .call-box .left { background: #005EB8; color: #fff; width: 500px; } .customer .call-box .right { width:calc(100% - 520px); } :lang(ko) .customer .call-box .right { display: flex; flex-direction: column; justify-content: center; align-items: center; } .customer .call-box .img { margin:23px auto; max-width: 160px; } .customer .call-box h2 { font-size: 40px; font-weight: 600; color: #151515; margin-top: 20px; margin-bottom: 20px; } :lang(ko) .customer .call-box h2 { margin-top: 0; } .customer .call-box h2 strong { color: #005EB8; } .customer .call-box .tel { font-size: 52px; font-weight: 600; } .customer .call-box p img { vertical-align:sub; margin-right: 5px; } .customer .call-box .btn-wr { margin-top: 40px; } .customer .call-box .btn-wr a { font-weight: 600; font-size: 20px; } .customer .call-box .btn-wr .icon::before { width: 26px; height: 26px; } .customer .qna-list { border-top:2px solid #151515; } .customer .qna-list > li { border-bottom:1px solid #ddd; } .customer .qna-list .acc-btn { width: 100%; position:relative; font-size: 22px; font-weight: 600; color: #151515; padding:40px 48px; text-align:left; white-space: inherit; word-break: auto-phrase;} .customer .qna-list .acc-btn .icon { position:absolute; width: 20px; height: 20px; right:28px; top:46px; } .customer .qna-list .acc-btn .icon:before { content:''; width:100%; height:2px; background: #151515; position:absolute; left:0; top:50%; margin-top: -1px; } .customer .qna-list .acc-btn .icon:after { content:''; width:2px; height:100%; background: #151515; position:absolute; left:50%; top:0; margin-left: -1px; } .customer .qna-list .acc-btn.on .icon:after { display:none; } .customer .qna-list .acc-cont { background: #f1f1f1; padding:40px 48px; } .customer .call-center.custom .top_box{ display: flex; flex-direction: column; align-items: center; gap: 12px 0; padding: 40px; margin-bottom: 20px; width: 100%; background:#F1F1F1; border-radius: 20px; } .customer .call-center.custom .call-box .tel{ line-height: 1; } .customer .call-center.custom .top_box p { font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; } .customer .call-center.custom .top_box p span { color: #005EB8; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; } .customer .call-center.custom .call-box .left{ width: auto; flex: 1; } .customer .call-center.custom .call-box .right{ width: auto; flex: 1; } .customer .call-center.custom .call-box .left .time_info { margin-top: 40px; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; font-weight: 400; } .customer .call-center.custom .call-box .right .time_info { margin-top: 48px; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; font-weight: 400; } .customer .call-center.custom .call-box .right .qr_img { margin-top: 24px; padding: 20px; width: 160px; } .customer .call-center.custom .call-box .right .kakao_box { display: flex; align-items: center; gap:0 8px; margin-top: 24px; padding:6px 20px 6px 6px; background-color: #fff; border-radius: 999px; font-family: Pretendard; font-weight: 500; font-size: 22px; color:#151515; line-height: 1.5; letter-spacing: -0.02em; } .customer .call-center.custom .call-box .right .inquiry_info { font-size: 20px; color:#444; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; margin-bottom: 4px; } /* 공통 form */ .form-container .required { margin-bottom: 32px; text-align:right; font-size: 16px; } .form-container .req { color: #005EB8; } .form-container .form-list { width: 100%; display:flex; flex-wrap:wrap; gap:60px; } .form-container .form-list input { width: 100%; font-size: 16px; } .form-container .form-list input[name="tel"]::placeholder { font-size: 15px; } .form-container .form-list select { width: 100%; font-size: 16px; } :lang(ja) .form-container .form-list select{font-size: 14px;} .form-container .form-list textarea { width: 100%; font-size: 16px; padding:16px; height:260px; } .form-container .form-list > li { width: calc(50% - 30px); display:flex; flex-wrap:wrap; } .form-container .form-list > li.wide { width: 100%; } .form-container .form-list > li .th { width: 150px; padding-right: 10px; padding-top: 15px; color: #151515; line-height: 1.2; } :lang(de) .form-container .form-list > li .th { font-size: 17px; } :lang(ja) .form-container .form-list > li .th { font-size: 16px; } .form-container .form-list > li .td { width: calc(100% - 150px); font-size: 16px; } .form-container .form-list > li.channel .th { padding-top: 5px; } .form-container .form-list > li.channel .td { display:flex; gap:20px; } .form-container .form-list > li.channel .td select { width:calc(50% - 90px); } :lang(fr) .form-container .form-list > li.channel .td select { width:calc(50% - 20px); } :lang(fr) .form-container .form-list > li.channel .td input { width: 50%; } .form-container .form-list > li.channel .td input { width:calc(50% + 70px); } .form-container .note {margin-top: 80px; margin-bottom: -40px;} .form-container .note p {font-size: 16px; font-weight: 300;} .form-container .note p + p{font-size: 15px; margin-top: 3px;} .form-container .note p strong{color: #151515; font-weight: 600;} .form-container .file-upload > p { font-size: 15px; color: #999; } .form-container .file-upload > p strong { color: #151515; font-size: 16px; font-weight: 400; } .form-container .file-upload .file-select { display:flex; gap:12px; cursor:pointer; overflow:hidden; position:relative; margin-bottom: 5px; max-width:600px; } .form-container .file-upload .file-select input[type=file] { z-index:100; cursor:pointer; position:absolute; height:100%; width:100%; top:0; left:0; opacity:0; filter:alpha(opacity=0); } .form-container .file-upload .file-select .file-select-name { background: #f1f1f1; padding: 0 16px; width: 490px; border-radius: 4px; height: 60px; line-height: 60px; } .form-container .file-upload .file-select .file-select-button { background:#fff; padding:0 30px; color: #151515; border:1px solid #ddd; border-radius: 4px; height: 60px; line-height: 60px; transition:all ease .35s;white-space:nowrap; } .form-container .file-upload .file-select:hover .file-select-button { background: #151515; border-color:#151515; color: #fff; } .form-container .privacy-use { margin-top: 80px; padding-top: 80px; border-top:1px solid #ddd; } .form-container .privacy-use h3, .form-container .privacy-use h4 { font-size: 24px; } .form-container .privacy-use .cont { position:relative; background: #f1f1f1; border-radius:4px; height:295px; padding:40px; overflow:hidden; font-size: 16px; margin-top: 30px; margin-bottom: 30px; padding-bottom: 80px; } .form-container .privacy-use .more { display:inline-flex; align-items:center; justify-content:center; gap:10px; width: calc(100% - 80px); text-align: center; height:60px; font-size: 16px; position:absolute; left:40px; bottom:0; border-top:1px solid #ddd; background: #f1f1f1; } .form-container .privacy-use .more img { transition:all ease .35s; } .form-container .privacy-use .more:before { content:''; width:100%; height:60px; background-image: linear-gradient(0deg, #f1f1f1, transparent); top:-61px; position:absolute; left:0; } .form-container .privacy-use .cont.active { height:auto; } .form-container .privacy-use .cont.active .more img { transform:rotate(180deg); } .form-container .privacy-use .cont.active .more:before { display:none; } .form-container .btn-wr { display:flex; justify-content: center; gap:8px; } .form-container .btn { width: 48%; max-width: 180px; justify-content: center; font-size: 18px;} .form-container .btn:last-child { background: #151515; color: #fff; border-color:#151515; } .form-container .btn:last-child:hover { background-color: #005EB8; border-color: #005EB8; } .agreement { display:flex; justify-content:space-between; align-items:center; font-size: 16px; } .agreement .custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; text-decoration:underline; } .agreement .custom-checkbox input[type="checkbox"] { display: none; } .agreement .custom-checkbox .checkmark { width: 24px; height: 24px; background-color: #fff; border: 1px solid #ddd; border-radius: 0; position: relative; margin-right: 10px; transition: background-color 0.2s ease, border-color 0.2s ease; border-radius:2px; } .agreement .custom-checkbox input[type="checkbox"]:checked + .checkmark { background-color: #005EB8; border-color: #005EB8; } .agreement .custom-checkbox .checkmark:after { content: ""; position: absolute; left: 7px; top: 3px; width: 7px; height: 12px; border: solid #ddd; border-width: 0 2px 2px 0; transform: rotate(45deg); } .agreement .custom-checkbox input[type="checkbox"]:checked + .checkmark:after { display: block; } /* policy */ body:has(.policy) .sub-visual { display:none; } .policy .inner { max-width:1280px; } .policy .sub-tit { text-align: center; padding:150px 0 100px; margin-bottom: 0; } .policy .sub-tit h1 { font-size: 72px; font-weight: 600; color: #151515; } .policy .etc-head { font-size: 18px; padding:60px; background: #f1f1f1; margin-bottom: 100px; } .policy .etc-head a { text-decoration:underline; } .policy .etc-select { display:flex; align-items:center; justify-content:flex-end; gap:30px; margin-bottom: 30px; } .policy .etc-select .dropdown { width: 260px; } .policy .etc-select p { font-size: 18px; } .policy h2 { margin-bottom: 24px; color: var(--clr-dark); margin-top: 80px; font-size: 28px; } .policy h2:first-child { margin-top: 0; font-size: 36px; } .policy p { font-size: 17px; line-height: 1.8; } :lang(fr) .policy p, :lang(de) .policy p, :lang(en) .policy p { line-height: 1.5; } .policy h3 { color: var(--clr-dark); font-weight: 600; margin:24px 0 10px; font-size: 18px; } .policy .content { font-size: 17px; } .policy .content > ul { margin-top: 10px; } .policy .content p + ul { margin-top: 0; } .policy .content ul + p { margin-top: 10px; } .policy .content > ul > li { position:relative; padding-left: 10px; } .policy .content > ul > li:before { content:'·'; position:absolute; left:0; top:0; } .policy .content > ul > li > ul { margin-bottom: 10px; } .policy .content > ul > li > ul > li { position:relative; padding-left: 10px; } .policy .content > ul > li > ul > li:before { content:'-'; position:absolute; left:0; top:0; } .policy .content a { color: var(--clr-primary); text-decoration:underline; } .policy .content a:has(.icon-download){text-decoration:none;} .policy .content a .icon { margin-left: 5px; vertical-align: middle; } .policy .content a .icon-download::before { width: 20px; height: 20px; background-image: url('/images/icon-download-on.svg'); } .policy p strong { color: var(--clr-dark); font-weight: 600; } .policy .tabs { display:flex; justify-content:center; gap:16px; margin:120px 0 50px; } .policy .tab { width:45%; max-width:280px; text-align: center; height:68px; line-height: 68px; background: #F0F0F0; border-radius:8px; padding:0 10px; border:0; font-size: 18px; color: var(--clr-dark); } .policy .tab:hover, .policy .tab.active { background:var(--clr-primary); color: #fff; } .policy table { border-top:2px solid #151515; text-align: center; margin-top:10px; } .policy table + p { margin-top: 24px; } .policy table th { font-size: 17px; padding:18px 10px; background: #f3f3f3; border-bottom:1px solid #ddd; font-weight: 600; color: var(--clr-dark); border-right:1px solid #ddd; } .policy table td { font-size: 17px; padding:18px 10px; background: #fff; border-bottom:1px solid #ddd; border-right:1px solid #ddd; } .policy table th:last-child, .policy table td:last-child { border-right:0; } :not(:lang(ko)) .policy .content > ul > li { padding-left: 0; overflow:hidden; } :not(:lang(ko)) .policy .content > ul > li + li { margin-top: 10px; } :not(:lang(ko)) .policy .content > ul > li:before { display:none; } :not(:lang(ko)) .policy .content > ul > li em { display:inline-block; float:left; } :not(:lang(ko)) .policy .content > ul > li .pl_con { margin-left: 36px; line-height: 1.5; } /* error */ body:has(.error) .sub-visual { display:none; } .error { padding-top: 100px; text-align: center; min-height:70vh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:30px; } .error .btn { font-size: 18px; } .error .btn + .btn { margin-left:8px; } .error-message > img { width: 240px; margin-bottom: 30px; } .error-message strong { display:block; font-size: 42px; color: #151515; font-weight: 600; margin:20px 0; } /* scroll nav */ .scroll-section { background: #fff; scroll-margin-top: 90px; } .scroll-nav { position:sticky; top:0; background: #f1f1f1; z-index:2; width: 100%; transition:top ease .35s; } .opened-gnb-mask .scroll-nav { z-index:99; } .scroll-nav.down { top:90px; } .scroll-nav.fixed { z-index:102; } .scroll-nav.fixed.down { } .scroll-nav.fixed .header-toggle { right:36px; opacity:1; transition:all ease .35s; } .scroll-nav ul { display:flex; gap:48px; justify-content:center; height:90px; align-items:center; } .scroll-nav a { display:block; font-size: 20px; color: #151515; opacity:.3; font-weight: 600; transition:all ease .35s; } .scroll-nav a.active { opacity:1; } @media (hover: hover) and (pointer: fine) { .scroll-nav a:hover { opacity:1; } } .scroll-nav .header-toggle { display: inline-block; position:absolute; right:0; top:0; opacity:0; } .scroll-nav .header-toggle { height:100%; } .scroll-nav .header-toggle .ico { display: flex; flex-direction: column; justify-content: space-around; width:21px; height:21px; } .scroll-nav .header-toggle .ico span { display:block; width: 100%; height:2px; background: #151515; transition:all ease .3s; } .scroll-nav .header-toggle.close .ico { justify-content:center; } .scroll-nav .header-toggle.close .ico span { margin: -1px; background: #151515; } .scroll-nav .header-toggle.close .ico span:nth-child(1) { transform:rotate(45deg); } .scroll-nav .header-toggle.close .ico span:nth-child(2) { display:none; } .scroll-nav .header-toggle.close .ico span:nth-child(3) { transform:rotate(-45deg); } .scroll-nav .swiper-container { position:relative; width: 100%; background-color: #f1f1f1; overflow: hidden; padding:0 20px; text-align: center; } .scroll-nav .swiper-container:before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 100%; z-index: 11; pointer-events:none; background: linear-gradient(to right, #f1f1f1, transparent); } .scroll-nav .swiper-container:after { content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 100%; z-index: 11; pointer-events:none; background: linear-gradient(to left, #f1f1f1, transparent); } .scroll-nav .swiper-wrapper { display:inline-flex; width:auto; height:90px; align-items:center; } .scroll-nav .swiper-slide { display: flex; justify-content: center; align-items: center; text-align: center; width: auto !important; } .scroll-nav .swiper-slide .active, .scroll-nav .swiper-slide-active .active { opacity:1; } /******************************************** product & solution ********************************************/ .sub-container:has(.product-solutions) { background: #f1f1f1; padding-top: 0; z-index:auto; } .product-solutions .scroll-section { padding:84px; border-radius:24px; } .product-solutions .scroll-section + .scroll-section { margin-top: 36px; } .product-solutions .inner { max-width:100%; width: 100%; padding:0 36px; } .product-solutions .flex-cont .left-cont { width: 400px; } .product-solutions .flex-cont .right-cont { width: calc(100% - 400px); padding-left: 7%; } /* form */ .inquiry-form .inner { width: 85%; } .product-solutions .inquiry-form { background: #fff; padding:80px 0 160px; margin-top: 100px; } .product-solutions .inquiry-form .inner { max-width:1680px; } .product-detail .inquiry-form { padding-bottom: 160px; } .product-detail .inquiry-form .sub-tit { text-align:left; } .product-detail .prd-option + .inquiry-form { padding-top: 160px; } /******************************************** solution ********************************************/ .sub-container:has(.solution) { background: #f1f1f1; padding-bottom: 0; } .solution .flex-cont .left-cont { display: flex; flex-direction: column; justify-content: space-between; } .solution .flex-cont .left-cont .btn-wr { max-width: 345px; border-bottom:1px solid #ddd; } .solution .flex-cont .left-cont .btn-wr .btn { width: 100%; border:0; border-top:1px solid #ddd; border-radius:0; padding:22px 30px; font-size: 18px; justify-content:space-between; } .solution .flex-cont .right-cont { padding-left: 25px; display:flex; gap:80px; } .solution .flex-cont .right-cont .img { width:calc(50% - 40px); border-radius:16px; overflow:hidden; } .solution .flex-cont .right-cont .img img { width: 100%; } .solution .dot-list { padding:40px 0; color: #151515; width:calc(50% - 40px); } .solution .dot-list > li { position:relative; padding-left: 16px; } .solution .dot-list > li + li { margin-top: 10px; } .solution .dot-list > li:before { content:''; width: 5px; height: 5px; background: #d9d9d9; border-radius:50%; position:absolute; left:0; top:11px; } .video-popup { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; visibility: hidden; opacity: 0; background: rgba(0,0,0,0.7); } .video-popup.active { opacity: 1; visibility: inherit; z-index: 11; transition:all ease .35s; } .video-popup .popup-content { position:relative; width: 90%; max-width: 1066px; } .video-popup .close-btn { position:absolute; display:block; height: 40px; gap:8px; display: flex; align-items: center; justify-content: center; top:-50px; color: #fff; right:0; } .video-popup .close-btn .icon { filter:invert(1); } .video-popup .close-btn:before { content:''; width:0; height:2px; background: #fff; position:absolute; right:0; bottom:4px; transition:all ease .35s; } @media (hover: hover) and (pointer: fine) { .video-popup .close-btn:hover:before { width:100%; right:auto; left:0; } } /* 공정별 */ .solution:has(.solution-list) .inner { max-width:1480px; } .solution .solution-list { width: 100%; display:flex; flex-wrap:wrap; gap:32px; padding:150px 0 180px; } .solution .solution-list > li { width: calc(25% - 24px); text-align: center; } .solution .solution-list .card-item { display:flex; flex-direction:column; justify-content:space-between; background: #fff; border-radius:16px; padding: 28px; transition:all ease .35s; min-height:430px; height:100%; } .solution .solution-list .card-item .name { font-size: 28px; color: #151515; font-weight: 600; margin-top: 24px; margin-bottom: 16px; transition:all ease .35s; } :lang(de) .solution .solution-list .card-item .name { font-size: 26px; } .solution .solution-list .card-item .ico { transition:all ease .35s; } .solution .solution-list .card-item p { font-size: 18px; } .solution .solution-list .card-item .btn-wr { margin-top: 40px; } .solution .solution-list .card-item .btn { background: #f1f1f1; color: #151515; padding:14px; border:0; width: 100%; justify-content: center; } @media (hover: hover) and (pointer: fine) { .solution .solution-list .card-item:hover { background: #00287C; border-color:#00287C; color:rgba(255,255,255,0.8); } .solution .solution-list .card-item:hover .name { color: #fff; } .solution .solution-list .card-item:hover .btn { background: #fff; color: #151515; } .solution .solution-list .card-item:hover .ico { filter: brightness(0) invert(1); } } /* 산업군별 */ .solution:has(.industry-list) .inner { max-width:1480px; } .solution .industry-list { width: 100%; display:flex; flex-wrap:wrap; gap:32px; padding:150px 0 180px; } .solution .industry-list > li { width: calc(33.33% - 21.333px); } .solution .industry-list .card-item { display:flex; flex-direction:column; justify-content:space-between; background: #fff; border-radius:16px; transition:all ease .35s; height:100%; overflow:hidden; } .solution .industry-list .card-item .name { font-size: 28px; color: #151515; font-weight: 600; margin-bottom: 16px; transition:all ease .35s; } .solution .industry-list .card-item .desc { padding:40px; display:flex; flex-direction:column; justify-content:space-between; height:100%; } .solution .industry-list .card-item p { font-size: 17px; min-height:120px; } .solution .industry-list .card-item .btn-wr { margin-top: 40px; text-align:left; } .solution .industry-list .card-item .btn { padding:12px 16px; border-radius:6px; } @media (hover: hover) and (pointer: fine) { .solution .industry-list .card-item:hover { background: #00287C; border-color:#00287C; color:rgba(255,255,255,0.8); } .solution .industry-list .card-item:hover .name { color: #fff; } .solution .industry-list .card-item:hover .btn { background: #fff; color: #151515; border-color:#00287C; } .solution .industry-list .card-item:hover .icon::before { filter: invert(0); } } /* solution detail */ body:has(.solution-detail) .sub-visual { height:0; } body:has(.solution-detail) .sub-bg, body:has(.solution-detail) .visual-tit { display:none; } .sub-container:has(.solution-detail) { padding : 90px 0 0; } .solution-detail { overflow:hidden; } .solution-detail .section { padding:160px 0; } .solution-detail .section + .section { margin:0; } .solution-detail .sub-tit { text-align: center; } .solution-detail .contact-btns { margin-top: 0; } /* info */ .solution-detail .detail-info { width:100%; display:flex; align-items:center; position:relative; z-index:2; background: #f1f1f1; padding: 180px 0; } .solution-detail .detail-info .inner { display:flex; } .solution-detail .detail-info .img { width: 50%; } .solution-detail .detail-info .txt { width:50%; padding-left: 5%; } .solution-detail .detail-info .txt h1 { font-size: 48px; color: #151515; } .solution-detail .detail-info .txt p { font-size: 20px; margin-top: 24px; } .solution-detail .detail-info .dropdown { margin-top: 48px; } .solution-detail .detail-info .tag { display:flex; flex-wrap:wrap; gap:6px; margin-top: 20px; } .solution-detail .detail-info .tag span { display:inline-block; padding:8px 16px; border:1px solid #ddd; background: #fff; border-radius:40px; font-size: 16px; } /* feature */ .solution-detail .process-list { gap:24px; flex-wrap:wrap; justify-content:center; } .solution-detail .process-list > li { width:calc(25% - 18px); } .solution-detail .process-list > li:first-child:nth-last-child(5), .solution-detail .process-list > li:first-child:nth-last-child(5) ~ li { width:calc(25% - 17px); } .solution-detail .process-list > li:before { display:none; } .solution-detail .process-list > li .img { width: 120px; margin:0 auto 32px; } .solution-detail .process-list > li.on { background: #00287C; } .solution-detail .process-list > li p { font-size: 18px; } /* field */ .solution-detail .sol-field .field-list { display:flex; gap:32px; flex-wrap:wrap; } .solution-detail .sol-field .field-list > li { width:calc(50% - 16px); } .solution-detail .sol-field .field-list > li > a { display: flex; flex-direction: column; justify-content: space-between; padding:40px 30px; position:relative; padding-left: 170px; border-radius:12px; border:1px solid #ddd; height:100%; transition:all ease .35s; } .solution-detail .sol-field .field-list .ico { position:absolute; left:30px; top:40px; transition:all ease .35s; } .solution-detail .sol-field .field-list .ico img { width: 100px; } .solution-detail .sol-field .field-list .name { font-size: 28px; color: #151515; font-weight: 600; margin-bottom: 4px; transition:all ease .35s; } .solution-detail .sol-field .field-list .btn-wr { text-align:left; margin-top: 24px; } .solution-detail .sol-field .field-list .btn { padding: 12px 16px; border-radius:6px; } @media (hover: hover) and (pointer: fine) { .solution-detail .sol-field .field-list > li > a:hover { background: #062D7F; border-color:#00287C; color:rgba(255,255,255,0.8); } .solution-detail .sol-field .field-list > li > a:hover .name { color: #fff; } .solution-detail .sol-field .field-list > li > a:hover .btn { background: #fff; color: #151515; border-color:#00287C; } .solution-detail .sol-field .field-list > li > a:hover .ico { filter: brightness(0) invert(1); } .solution-detail .sol-field .field-list > li > a:hover .btn-wr .btn:hover .icon::before { filter: invert(0); } } /* case */ .solution-detail .sol-case { padding-top: 0; } .solution-detail .sol-case .case-list { display:flex; gap:80px 24px; flex-wrap:wrap; justify-content: center; } .solution-detail .sol-case .case-list > li { width: calc(33.33% - 16px); } .solution-detail .sol-case .case-list .frame { border-radius:12px; } .solution-detail .sol-case .case-list p { font-size: 20px; margin-top: 16px; color: #151515; margin-bottom: 10px; } .solution-detail .sol-case .case-list span { font-size: 17px; color: #444; } /* case */ .solution-detail .sol-partner { padding-top: 0; } .solution-detail .sol-partner .partner-list { display:flex; gap: 24px; flex-wrap:wrap; } .solution-detail .sol-partner .partner-list > li { width: calc(20% - 20px); } .solution-detail .sol-partner .partner-list > li img { width: 100%; } .solution-detail .sol-partner .partner-list:has(li:first-child:nth-last-child(-n+5)) { justify-content:center; } /* inquiry */ .solution-detail .sol-inquiry .sub-tit { margin-bottom: 50px; } .solution-detail .sol-inquiry .sub-tit p { margin-top: 20px; } .solution-detail .sol-inquiry { background: #f1f1f1; } .solution-detail .sol-inquiry .form-container { background: #fff; padding:64px 100px; border-radius:16px; } .solution-detail .contact-btns .btn .icon-download::before { width: 40px; height: 40px; filter:invert(1); } /* rental */ .rental h3 { font-size: 32px; font-weight: 600; color: #151515; } .rental .sub-tit { text-align: center; } .rental .sub-tit p{ font-size: 20px;} .rental .inquiry-form { padding-top: 140px; } .rental .inquiry-form .inner { max-width:1280px; } .rental-overview { display:flex; color: #fff; border-radius:16px; justify-content: space-between; overflow:hidden; background: linear-gradient(78.36deg, #071c3b 29.41%, #061c3a 69.96%); } .rental-overview .img-box { width: 50%; } .rental-overview .img-box img { width: 100%; object-fit: contain; height: 100%; object-position: center bottom; } .rental-overview .txt-box { width: 50%; padding:64px; } .rental-overview .txt-box h3 { color: #fff; } .rental-overview .txt-box h3 + p{margin-top: 16px;} .rental-overview .txt-box > ul { margin-top: 30px; padding:32px; border-radius:16px; background: #fff; color: #151515;} .rental-overview .txt-box > ul > li { position:relative; padding-left: 15px; } .rental-overview .txt-box > ul > li:before { content:''; width:4px; height:4px; border-radius:50%; background: #062D7F; position:absolute; left:0; top:12px; } .rental-overview .txt-box > ul > li strong{color: #062D7F;} .rental-overview .txt-box > ul > li + li { margin-top: 4px; } .rental-overview .txt-box > ul > li > ul { margin-top: 4px; } .rental-overview .txt-box > ul > li > ul > li { padding-left: 12px; text-indent: -12px; color: #444;} .rental-overview .txt-box > ul > li > ul > li + li { margin-top: 4px; } .rental-overview .txt-box .btn-wr { display:flex; gap:16px; } .rental-overview .txt-box .btn-wr .btn { width: 100%; display: flex; justify-content: space-between; align-items: center; } .rental-solution { background: #EAEAEA; padding:120px 0; margin-top: 120px; } .rental-solution .rental-list { } .rental-solution .rental-list > li { background: #fff; padding:64px; border-radius:24px; } .rental-solution .rental-list > li + li { margin-top: 36px; } .rental-solution .flex-cont .left-cont { width: 45%; } .rental-solution .flex-cont .btn-wr { display:flex; gap:12px; margin-top: 40px; } .rental-solution .flex-cont .btn-wr .btn { width: 50%; max-width:280px; justify-content: space-between; } .rental-solution .flex-cont .btn-wr .apply-btn{ background: #151515; color: #fff; border-color:#151515; } .rental-solution .flex-cont .btn-wr .apply-btn .icon::before { filter:invert(1); } .rental-solution .flex-cont .btn-wr .apply-btn:hover { background: var(--clr-primary); border-color:var(--clr-primary); } .rental-solution .flex-cont .right-cont { width: 50%; margin-left:5%; text-align:left; } .rental-solution .flex-cont .img { width:100%; border-radius:16px; overflow:hidden; } .rental-solution .flex-cont .img img { width: 100%; } .rental-solution .dot-list { padding:24px 0 0; color: #444; } .rental-solution .dot-list > li { position:relative; padding-left: 16px; } .rental-solution .dot-list > li + li { margin-top: 10px; } .rental-solution .dot-list > li:before { content:''; width: 5px; height: 5px; background: #444; border-radius:50%; position:absolute; left:0; top:11px; } .rental-available { padding-top: 100px; border-top:1px solid #ddd; margin-top: 100px; margin-bottom: 120px; } .rental-available > ul { display:flex; gap:24px; flex-wrap:wrap; } .rental-available > ul > li { position:relative; width:calc(50% - 12px); border-radius:16px; background: #F1F1F1; padding:40px; transition:all ease .35s;} .rental-available > ul > li h3 { font-size: 28px; margin-bottom: 16px; padding-right: 90px; } .rental-available > ul > li p { position:relative; padding-left: 15px; } .rental-available > ul > li p:before { content:''; width:4px; height:4px; border-radius:50%; background: #444; position:absolute; left:0; top:12px; } .rental-available > ul > li p + p { margin-top: 8px; } .rental-available > ul > li .ico { position:absolute; right:40px; top:20px; } .rental-required{padding-top: 120px;} .rental-required .req-box { padding:40px; border-radius:16px; background:#F1F1F1; color: #444; display:flex; gap:16px; justify-content:space-between; align-items:center;} .rental-required .req-box ul li { position:relative; padding-left: 15px; } .rental-required .req-box ul li:before { content:''; width:4px; height:4px; border-radius:50%; background: #444; position:absolute; left:0; top:12px; } .rental-required .req-box ul li + li { margin-top: 12px; } .rental-required .req-box .btn-wr{margin-top: 0;} .rental-required .hide-list{margin-top: 12px; display:none;} .rental-required .req-btn .icon:before{ transform: rotate(90deg);} .rental-required .req-btn.on .icon:before{ transform: rotate(-90deg);} /******************************************** product ********************************************/ /* product list */ .sub-container .badge { display:flex; align-items:flex-start; gap:10px; } .sub-container .badge span { font-size: 12px; width: 64px; height: 64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color: #fff; text-align: center; font-weight: 600; line-height: 1.2; word-break: keep-all; } .sub-container .badge span.fnb { background: #A3C948; padding:5px;} .sub-container .badge span.him { background: #69B0C4; padding:5px;} .sub-container .badge span:has(img) { align-items: flex-start;} :lang(ko) .sub-container .badge span { font-size: 13px; } :lang(ja) .sub-container .badge span br{display:none;} :lang(ja) .sub-container .badge span.him{word-break: break-all; } .product .desc-list { margin-top: 32px; } .product .desc-list > li { position: relative; border-bottom:1px solid #ddd; } .product .desc-list > li::after { position: absolute; content: ""; display: block; border-bottom: 1px solid #151515; transition: all 250ms ease-out; left:auto; right: 0; width: 0; } .product .desc-list > li:has(.on)::after, .product .desc-list > li:hover::after { width: 100%; left: 0; right: auto; } .product .desc-list .acc-btn { width: 100%; position:relative; font-size: 20px; font-weight: 500; color: #151515; padding:20px 0; text-align:left; padding-right: 50px; } .product .desc-list .acc-btn sup { color: #005EB8; font-weight: 600; } .product .desc-list .acc-btn .icon { position:absolute; right:0; top:50%; transform:translateY(-50%); width: 10px; height: 10px; } .product .desc-list .acc-btn .icon:before { content:''; width:100%; height:2px; background: #444; position:absolute; left:0; top:50%; margin-top: -1px; } .product .desc-list .acc-btn .icon:after { content:''; width:2px; height:100%; background: #444; position:absolute; left:50%; top:0; margin-left: -1px; } .product .desc-list .acc-btn.on .icon:after { display:none; } .product .desc-list .acc-cont { padding-bottom: 20px; font-size: 16px; font-weight: 400; } /* 제품 리스트 & 제품 비교 */ .prd-list { width: 100%; display:flex; flex-wrap:wrap; gap:32px; } .prd-list > li { width: calc(33.33% - 22px); } .prd-list .card-item { display:block; background: #f1f1f1; border:1px solid #E0E0E0; border-radius:12px; padding: 30px; transition:all ease .35s; } .prd-list .card-item .img { position:relative; border-radius:6px; } .prd-list .card-item .img img { width: 100%; } .prd-list .card-item .badge { position:absolute; top:12px; right:12px; flex-direction: column; gap:8px; } .prd-list .card-item .badge span { width: 56px; height: 56px; font-size: 10px; line-height: 1.2; word-break: keep-all;} :lang(ko) .prd-list .card-item .badge span { width: 48px; height: 48px; } .prd-list .card-item .badge span:has(img) { height:auto !important; } .prd-list .card-item .name { font-size: 28px; color: #151515; font-weight: 600; margin-top: 30px; transition:all ease .35s; } .prd-list .card-item .spec > li { padding:8px 0; font-size: 16px; display:flex; justify-content:space-between; transition:all ease .35s; } .prd-list .card-item .spec > li + li { border-top:1px solid rgba(0,0,0,0.1); } .prd-list .card-item .spec > li strong { color: #151515; font-weight: 500; transition:all ease .35s; text-align:right; } .prd-list .card-item .btn-wr { margin-top: 10px; } .prd-list .card-item .btn { background: #00287C; color: #fff; padding:14px; border:0; width: 100%; justify-content: center; } .prd-list .card-item.hover { background: #00287C; border-color:#00287C; color: #fff; } .prd-list .card-item.hover .name { color: #fff; } .prd-list .card-item.hover .spec > li { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); } .prd-list .card-item.hover .spec > li strong { color: #fff; } .prd-list .card-item.hover .btn { background: #fff; color: #151515; } /* product detail */ body:has(.product-detail) .sub-visual { height:0; } body:has(.product-detail) .sub-bg, body:has(.product-detail) .visual-tit { display:none; } .sub-container:has(.product-detail) { padding : 0; z-index:inherit; } .product-detail { overflow:hidden; } .product-detail .section { padding:160px 0; } .product-detail .section + .section { margin:0; } .product-detail .sub-tit { text-align: center; } .product-detail .contact-btns { margin-top: 0; } .product-detail .swiper-pagination { left:50%; transform:translateX(-50%); padding:10px; border-radius:50px; width:auto; background: rgba(0,0,0,0.1); bottom: 20px; font-size: 0; } .product-detail .swiper-pagination-bullet { width: 10px; height: 10px; background: #000; vertical-align:middle; margin:0 5px !important; } .product-detail .swiper-pagination-bullet-active { background: #000; } /* product visual */ .prd-visual { width:100%; display:flex; align-items:center; height:100vh; background: #091E37; padding-top: 90px; } .prd-visual .prd-visual-slider { width:100%; height:100%; } .prd-visual .prd-imgs { position:relative; width:50%; height:100%; } .prd-visual .prd-imgs .img { width:100%; height:100%; } .prd-visual .prd-imgs .img img { width:100%; height:100%; object-fit:cover; } .prd-visual .prd-info { width:50%; padding : 20px; } .prd-visual .prd-info .navigation:not(.fix) { position:relative; z-index:3; margin:0; bottom:0; margin-bottom: 24px; max-width:720px; width: 100%; } .prd-visual .prd-info .navigation:not(.fix) > ul { background: rgba(255,255,255,0.05); width: 100%; } .prd-visual .prd-info .navigation:not(.fix) > ul > li:not(.home) { width: calc(33.33% - 20px); } .prd-visual .prd-info .navigation:has(.open){z-index:11;} .prd-visual-slider .swiper-pagination { background: rgba(255,255,255,0.1); bottom: 70px; } .prd-visual-slider .swiper-pagination-bullet { background: #fff; } .prd-visual-slider .swiper-pagination-bullet-active { background: #fff; } .prd-info .info-box { padding:48px; border-radius:16px; background: #fff; max-width:720px; } .prd-info .info-box .tag { display:flex; flex-wrap:wrap; gap:8px; } .prd-info .info-box .tag span { display:inline-block; padding:8px 16px; border:1px solid #ddd; border-radius:40px; font-size: 16px; } .prd-info .info-box .tag span:first-child { color: #005EB8; font-weight: 500; background:#e5eff8; border-color:#e5eff8; } .prd-info .info-box .prd-txt h1 { font-size: 40px; color: #151515; margin:30px 0 20px; } .prd-info .info-box .prd-txt h1:has(.badge) { display: flex; justify-content: space-between; } .prd-info .info-box .spec { display:flex; text-align: center; background: #F1F1F1; border-radius:12px; margin-top: 48px; padding:40px 0; } .prd-info .info-box .spec li { width:33.33%; font-size: 16px; padding:0 10px; } .prd-info .info-box .spec li + li { border-left:1px solid #ddd; } .prd-info .info-box .spec li strong { font-size: 26px; display:block; font-weight: 600; color: #151515; line-height: 1.3; min-height: 57px; display: flex; align-items: center; justify-content: center; max-width: 130px; margin: 5px auto 0; } .prd-info .prd-download { max-width:720px; } .prd-info .btn-wr { display:flex; gap:16px; margin-top: 24px; } .prd-info .btn-wr .btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); backdrop-filter: blur(40px); color: #fff; border:none; } .prd-info .btn-wr .btn .icon::before { filter: invert(1); } @media (hover: hover) and (pointer: fine) { .prd-info .btn-wr .btn:hover { background: #005EB8; } } /* product sections */ .product-detail .prd-app { background: url('/images/product/prd-app-bg.jpg') no-repeat center center / cover; } .product-detail .prd-app .sub-tit h2 { color: #fff; } .product-detail .prd-option { background: #F1F1F1; } .product-detail .prd-kit .card { border:1px solid #ddd; } .product-detail .prd-feature { background: #F1F1F1; } /* product card */ .product-detail .card { padding:40px; background: #fff; border-radius:16px; height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:40px; transition:all ease .35s; } .product-detail .card h3 { font-size: 28px; font-weight: 600; color: #151515; margin-bottom: 12px; } :lang(en) .product-detail .card h3 { font-size: 26px; } :lang(de) .product-detail .card h3 { font-size: 24px; } .product-detail .card h3 sup { color: #005EB8; } .product-detail .card .tag { display:inline-block; font-size: 14px; font-weight: 500; line-height: 1; color: #005EB8; background: rgb(31 165 253 / 10%); padding:10px 16px; border-radius:4px; margin-bottom: 24px; } .product-detail .card .icon { margin-bottom: 32px; filter:invert(1); } .product-detail .card .icon:before { display:none; } .product-detail .card .icon img { width:64px; } .product-detail .card .img img { width: 100%; } .product-detail .card .btn-wr { text-align:left; margin-top: 0; } .product-detail .card .btn-wr .btn { font-size: 16px; padding: 16px; color: #1FA5FD; background: #F0F5FF; border:0; line-height: 1; } .product-detail .prd-app .card { border:1px solid rgba(255,255,255,0.1); background: rgb(7 30 57 / 70%); backdrop-filter: blur(40px); color: #fff; } .product-detail .prd-app .card h3 { color: #fff; } .product-detail .prd-app .card p { color:rgba(255,255,255,0.8); } .product-detail .prd-app .card .icon { filter:invert(0); } .product-detail .prd-app .card .btn { background: rgb(31 165 253 / 10%); } .product-detail .prd-app .prd-card-slider { overflow:visible; } .product-detail .prd-app .panel { width: 100%; height:100%; } .product-detail .prd-app .panel .front, .product-detail .prd-app .panel .back { width: 100%; height:100%; } /* product slider */ .prd-card-slider .swiper-wrapper .swiper-slide { height:auto; } .prd-card-slider .swiper-button-next, .prd-card-slider .swiper-button-prev { width: 50px; height: 50px; background: rgba(0,0,0,0.6); border-radius:50%; color: #fff; } .prd-card-slider .swiper-button-prev:after, .prd-card-slider .swiper-button-next:after { font-size: 20px; } .product-detail .prd-flex { display:flex; gap:40px; } .product-detail .prd-flex .left-cont { width: calc(66.66% - 20px); } .product-detail .prd-flex .right-cont { width: calc(33.33% - 20px); } .product-detail .prd-flex .card:has(.tag) { background: #F5F5F5; } /******************************************** overview ********************************************/ .sub-container:has(.overview) { padding-top: 0; } .overview .scroll-section { padding-top: 150px; } .overview .sub-tit { margin-bottom: 80px; text-align: center; } .overview .sub-tit h2 { font-size: 42px; word-break: keep-all; } .overview .sub-tit p { margin-top: 24px; font-size: 22px; word-break: keep-all; } :lang(ja) .overview .sub-tit p{word-break:break-all;} .overview .btn-wr .btn { font-size: 18px; padding:22px 30px; } /* vision */ .overview .section-vision { width:100%; height: 100vh; padding-top: 15vh; } .overview .section-vision .sub-tit { margin-bottom: 64px; margin-top: 0; margin-bottom: 0; } .overview .section-vision .sub-tit h2 { font-size: 60px; font-weight: 500; } .overview .section-vision .sub-tit h2 strong { font-weight: 900; } .overview .section-vision .sub-tit p { font-size: 28px; margin-top: 0; } .overview .section-vision .vision-bg { width:90%; max-width: 1230px; height: 470px; border-radius:16px; overflow:hidden; margin:0 auto; position:absolute; left:0; right:0; top:calc(15vh + 200px); background: #000; } .overview .section-vision .vision-bg img { width: 100%; height: 100%; object-fit:cover; } .overview .section-vision .vision-txt { position:absolute; top:22vh; left:10vw; max-width:640px; width: 90%; color: #fff; font-size: 24px; opacity:0; visibility:hidden; } :lang(ja) .overview .section-vision .vision-txt{word-break: break-all;} .overview .section-vision .vision-txt p:first-child { font-size: 42px; font-weight: 600; } .overview .section-vision .vision-txt p + p { margin-top: 40px; } /* dna */ .overview .section-dna .dna-cont { display:flex; gap:24px; height:520px; } .overview .section-dna .dna-cont .count-box { width: 66.66%; border-radius:16px; overflow:hidden; padding:24px; background: url('/images/about/ovv-dna-bg.png') no-repeat center center / cover; color: #fff; display:flex; flex-direction:column; justify-content:space-between; } .overview .section-dna .dna-cont .count-box > ul { display:flex; padding:20px 0; } .overview .section-dna .dna-cont .count-box > ul > li { position:relative; width: 33.33%; text-align: center; color:rgba(255,255,255,0.8); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; } .overview .section-dna .dna-cont .count-box > ul > li + li:before { content:''; width:1px; height:80%; background: rgba(255,255,255,0.3); position:absolute; left:0; top:10%; } .overview .section-dna .dna-cont .count-box > ul > li strong { display:block; font-size: 42px; font-weight: 600; color: #fff; margin-top: 4px; } :lang(zh) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 2vw; } :lang(en) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 1.8vw; } :lang(de) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 1.7vw; } :lang(fr) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 1.3vw; } .overview .section-dna .dna-cont .count-box .txt { padding:24px; border-radius:8px; background: rgba(0,0,0,0.2); backdrop-filter: blur(50px); text-align: center; } .overview .section-dna .dna-cont .group-box { position:relative; width: 33.33%; background: #005EB8; border-radius:16px; overflow:hidden; padding:24px; display:flex; align-items:flex-end; } .overview .section-dna .dna-cont .group-box .group-logo { text-align: center; position:absolute; left:0; top:50%; width: 100%; transform:translateY(-50%); } .overview .section-dna .dna-cont .group-box .group-logo img { width: 60%; } .overview .section-dna .dna-cont .group-box .btn-wr { width: 100%; } .overview .section-dna .dna-cont .group-box .btn-wr .btn { width: 100%; justify-content:space-between; } /* company */ .overview .section-company .company-box { height:580px; display:flex; align-items:flex-end; border-radius:12px; padding:24px; background: url('/images/about/ovv-company-bg.jpg') no-repeat center center / cover; } .overview .section-company .company-box > ul { display:flex; gap:24px; width: 100%; } .overview .section-company .company-box > ul > li { width: 33.33%; text-align: center; color:rgba(255,255,255,0.8); padding:32px 10px; border-radius:8px; backdrop-filter: blur(20px); background: rgba(255,255,255,0.1); font-size: 20px; transition:all ease .35s; } .overview .section-company .company-box > ul > li span { background: #fff; color: #005EB8; padding:4px 8px; margin-left: 8px; border-radius:4px; font-size: .9em; transition:all ease .35s; } .overview .section-company .company-box > ul > li strong { display:block; font-size: 42px; font-weight: 600; color: #fff; margin-top: 4px; transition:all ease .35s; } .overview .section-company .company-box > ul > li.on { background: #005EB8; } /* network */ .overview .section-network { width:100%; height: 100vh; padding-top: 15vh; } .overview .section-network .sub-tit { margin-bottom: 0; } .overview .section-network .network-bg { width:90%; max-width: 1480px; height: 470px; border-radius:16px; overflow:hidden; overflow:hidden; margin:0 auto; position:absolute; left:0; right:0; top:calc(15vh + 200px); } .overview .section-network .network-bg img { width: 100%; height: 100%; object-fit:cover; } .overview .section-network .network-bg .loc { position:absolute; left:0; top:0; width: 100%; height: 100%; opacity:0; z-index:2; } .overview .section-network .network-txt { position:absolute; top:15vh; right:10vw; max-width:426px; width: 90%; color: #fff; background: rgba(0,0,0,0.2); opacity:0; visibility:hidden; padding:40px; backdrop-filter: blur(40px); border-radius:16px; } .overview .section-network .network-txt p:first-child { font-size: 42px; line-height: 1; font-weight: 600; margin-bottom: 12px; } .overview .section-network .network-txt ul li { display:flex; flex-wrap:wrap; gap:10px; font-size: 16px; } .overview .section-network .network-txt ul li strong { font-weight: 400; } .overview .section-network .network-txt ul li span { color:rgba(255,255,255,0.6); } .overview .map-pins { position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:1; opacity:0; visibility:hidden; } .overview .map-pins .pin { width: 62px; height: 62px; background-color: #005EB8; border-radius: 50%; position: absolute; } .overview .map-pins .pin:nth-child(1) { left: 19.4%; top: 35.2%; } .overview .map-pins .pin:nth-child(2) { left: 46%; top: 47.6%; } .overview .map-pins .pin:nth-child(3) { left: 71.9%; top: 50.2%; } .overview .map-pins .pin::before, .overview .map-pins .pin::after { content: ""; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background-color: #005EB8; border-radius: 50%; animation: pulse 2s infinite ease-in-out; } .overview .map-pins .pin::before { width: 84px; height: 84px; animation-delay: 0.5s; } .overview .map-pins .pin::after { width: 102px; height: 102px; animation-delay: 1s; } @keyframes pulse { 0% { opacity: 0; transform:translate(-50%,-50%) scale(0.8); } 50% { opacity: 0.5; transform:translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform:translate(-50%,-50%) scale(0.8); } } /* core */ .overview .section-core { margin-bottom: 80px; } .overview .section-core .core-list li { padding:84px; background: #f1f1f1; border-radius:24px; display:flex; justify-content:space-between; } .overview .section-core .core-list li + li { margin-top: 48px; } .overview .section-core .core-list h3 { font-size: 28px; color: #151515; font-weight: 600; } .overview .section-core .core-list p { margin-top: 16px; font-size: 20px; } .overview .section-core .core-list .txt { max-width:521px; } .overview .section-core .core-list .img { border-radius:16px; overflow:hidden; } .overview .section-core .core-list .core-left { width: 45%; display:flex; flex-direction:column; justify-content:space-between; } .overview .section-core .core-list .core-left .btn-wr { display: flex; flex-direction:column; gap:16px; max-width:345px; } .overview .section-core .core-list .core-left .btn-wr .btn { justify-content:space-between; } .overview .section-core .core-list .core-right { width: 50%; } /* store */ body:has(.store) .sub-visual { display:none; } body:has(.sec-map) .sub-visual { display:none; } .sub-container:has(.store) { padding :0; } .sub-container:has(.sec-map) { padding :0; } .store { position:relative; width: 100%; height: calc(100vh);} .store .store-map { width: 100%; height: 100%; } .store .tab-cont { height:100%; } .store-finder { width:50%; max-width:490px; position:absolute; left:5%; bottom:0; z-index:2; font-size: 16px; transition:bottom ease .35s; } .store-finder.hide { bottom:calc(-100vh + 200px); } .store-finder .tabs { gap:0; border-radius:12px 0 0 0; } .store-finder .tab { text-align: center; width: 50%; border:0; font-weight: 400; background: #f7f7f7; border-radius:0; border-bottom:1px solid #ddd; color: #666; line-height: 1.3; min-height: 50px; white-space: pre-wrap;} .store-finder .tab + .tab { border-left:1px solid #ddd; } .store-finder .tab.active { background: #fff; color: #151515; font-weight:600; border-bottom:1px solid #fff; } .store-finder .tab:hover { color: #151515; } .store-search { padding:24px 20px; border-bottom:1px solid #ddd; } .store-search .th { color: #151515; font-weight: 500; margin:20px 0 12px; } .store-search li:first-child .th { margin-top: 0; } .store-search .td { display:flex; gap:12px; } .store-search input { height: 48px; line-height: 48px; width: 100%; } :lang(en) .store-search input { font-size: 14px; } .store-search select { height: 48px; line-height: 48px; width: 100%; } .store-search .btn-sch { height: 48px; border:1px solid #ddd; background: #fff; padding:0 16px; transition:all ease .35s; } .store-search .btn-sch:hover { border-color:#151515; background: #151515; color: #fff; } .store-search .btn-reset { width: 100%; display:block; text-align: center; margin-top: 20px; color: #444; font-weight: 400; display: flex; align-items: center; justify-content: center; } .store-search .btn-reset i { margin-right: 4px; } #tab1 .store-list { height:calc(100% - 360px); } .store-list { padding:24px 20px; height:calc(100% - 26px); } .store-list .total { font-size: 15px; font-weight: 400; margin-bottom: 20px; } .store-list > ul { overflow-y:auto; padding-right: 10px; height:100%; } .store-list > ul::-webkit-scrollbar { width: 4px; } .store-list > ul::-webkit-scrollbar-track { background-color: #f7f7f7; border-radius:10px; } .store-list > ul::-webkit-scrollbar-thumb { background-color: #d9d9d9; border-radius:10px; } .store-list > ul::-webkit-scrollbar-button { display: none; } .store-list > ul > li { margin-bottom: 12px; cursor:pointer; } .store-list > ul > li { display:block; border:1px solid #ddd; border-radius:12px; padding:24px; transition:all ease .35s; } .store-list > ul > li:hover { border-color:#151515; } .store-list .store-name { font-size: 24px; color: #151515; font-weight: 600; margin-bottom: 4px; } .store-list .store-info { margin-bottom: 4px; } .store-list .store-info > ul { margin-top: 24px; } .store-list .store-info > ul > li { margin-bottom: 6px; } .store-list .store-info > ul > li > a { display:flex; gap:8px; align-items:center; } .store-list .store-info > ul > li .icon::before { width: 18px; height: 18px; opacity:.5; } .store-list .store-info > ul > li .icon-map2::before { width: 16px; height: 16px; opacity:1; } .store-list .store-info > ul > li .icon-external-link-small::before { width: 15px; height: 15px; opacity:1; background-image: url(/images/icon-external-link-small2.svg); } .store-list .store-info > ul > li > a.phone { pointer-events: none; } .store-finder .btn-drop { border-radius:6px 6px 0 0; width: 54px; height: 30px; border:1px solid #ddd; background: #f7f7f7; display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:-30px; } .store-finder .btn-drop img { width:12px; } .store-finder .btn-drop.close img { transform:rotate(180deg); } .store .popup-content { max-width:464px; text-align: center; } .store .popup-content p { font-size: 20px; color: #151515; font-weight: 600; } .store .popup-content .btn-wr { margin-top: 24px; } .store .popup-content .btn { padding:12px 50px; } #map { position: absolute; top: 90px; left: 0; width: 100%; height:calc(100vh - 90px) !important; } .sec-map { position: relative; padding-top: 90px; height: calc(100vh); } .store-finder .btn-drop { position: relative; right:auto; top:auto; margin-left:auto; } .store-finder .map-wrap { max-height:calc(100vh - 180px); overflow: hidden; transition: max-height 0.5s; display: flex; flex-direction: column; height:calc(100vh - 180px); border-radius: 12px 0 0 0; border:1px solid #ddd; } .store-finder .store-info p { color:#666; } .store-finder .store-list .store-info > ul > li > a { color:#666; font-size: 14px; } .store-finder .tab-cont { background: #fff; height: calc(100% - 50px) } .store-finder .store-list > ul { overflow-y:initial; } .store-finder #tab1 .store-list { min-height:calc(100% - 285px); max-height:calc(100% - 285px); height:auto; overflow-y: auto; display: flex; flex-direction: column; } .store-finder #tab1 .store-list::-webkit-scrollbar-thumb { background: gray; border-radius: 10px; } .store-finder #tab1 .store-list::-webkit-scrollbar { width: 6px; } .store-finder #tab1 .store-list::-webkit-scrollbar-track { background: transparent; border-radius: 10px; } .store-finder #tab2 .store-list { min-height:calc(100%); max-height:calc(100%); height:auto; overflow-y: auto; display: flex; flex-direction: column; } .store-finder #tab2 .store-list::-webkit-scrollbar-thumb { background: gray; border-radius: 10px; } .store-finder #tab2 .store-list::-webkit-scrollbar { width: 6px; } .store-finder #tab2 .store-list::-webkit-scrollbar-track { background: transparent; border-radius: 10px; } .store-finder .custom-select { position: relative; background: #F7F7F7; flex-grow: 1; } .store-finder .custom-select .selected { width: 100%; padding: 5px 20px; background: #F7F7F7; border: none; text-align: left; position: relative; height: 48px; font-size: 16px; color: #444444 } .store-finder .custom-select .selected i { display: inline-block; width: 27px; height: 27px; background: url('/images/arrow-down.svg') no-repeat center; /* background: url(../images/ico-arrow-dropdown.png) no-repeat center/auto 30%; */ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .store-finder .custom-select.active .selected i { transform: translateY(-50%) rotate(180deg); } .store-finder .custom-select .option-list { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ddd; max-height: 400px; overflow-y: auto; display: none; z-index: 10; } .store-finder .custom-select.active .option-list { display: block; } .store-finder .custom-select .option-list li { padding: 0; } .store-finder .custom-select .option-list li button { width: 100%; padding: 5px 20px; text-align: left; background: #fff; transition: background 0.2s; font-size: 16px; border: none; color: #666; } .store-finder .custom-select .option-list li button:hover { /* background: var(--accent-color); */ background:#151515; color: #fff; font-weight: bold; } .store-finder .custom-select .option-list li button.disabled { background: #f7f7f7; pointer-events: none; } .store-finder .map-drop { width: 67px; height: 40px; margin-left: auto; background: #f7f7f7; border: 1px solid #ddd; border-radius: 10px 10px 0 0; border-bottom: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .store-finder .map-drop img { position: relative; } .store-finder .map-top .search-boxs { margin-bottom: 20px; } .store-finder .map-top .search-boxs .search-input { position: relative; display: flex; align-items: center; gap: 10px; height: 48px; } .store-finder .map-top .search-boxs .search-input input { flex-grow: 1; padding: 5px 20px; background: #f7f7f7; border-radius: 5px; font-size: 16px; height: 100%; } .store-finder .map-top .search-boxs .btn-keyword-search { height: 100%; width: 92px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; font-size: 16px; display: block; } .location_title { font-size: 24px; margin-bottom: 5px; } .gm-style-iw-d { font-size: 14px; line-height: 1.5; } .gm-style-iw-chr { position:absolute; right:0; top:0; } .gm-style .gm-style-iw { max-width:360px !important; } .gm-style .gm-style-iw-d { padding: 10px 0 0 !important; } .store-finder.active .map-drop img { transform: rotate(180deg); } .store-finder.active .map-wrap { max-height: 0; } @media (pointer:fine) { .store-finder .map-top .search-boxs .btn-keyword-search:hover { border-color: #151515; background: #151515; color: #fff; } .store-finder .map-drop:hover img { animation: floatYSmall 1s infinite ease-in-out; } } @media screen and (max-width: 767px) { .store { height: calc(100vh); } .sec-map { width: 100%; height: calc(100vh); overflow: hidden; padding-top: 60px; } .store-finder .map-wrap { border-radius:0 12px 0 0; } .store-finder .store-search { max-height:207px; } .location_title { font-size: 18px; } .store-finder { width: 95%; left: 2.5% } .store .map-wrap { max-height: 500px; } .store-finder .map-drop { width: 40px; height: 30px; border-radius: 7px 7px 0 0; } .store-finder .map-top { transition: max-height 0.5s; max-height: 500px; overflow: visible; } .store-finder #tab1 .store-list { min-height: calc(100% - 206px); max-height: calc(100% - 206px); } .store-finder .map-top .search-boxs .search-input { height: 36px; } .store-finder .map-top .search-boxs .search-input input { padding: 5px 10px; font-size: 14px; width: 200px; } .store-finder .map-top .search-boxs .btn-keyword-search { font-size: 14px; } .store-finder .custom-select .selected { padding: 5px 10px; height: 36px; font-size: 14px; } .store-finder .custom-select .selected i { width: 20px; height: 20px; right: 5px; } .store-finder .custom-select .option-list { max-height: 250px; } .store-finder .custom-select .option-list li button { padding: 5px 10px; font-size: 14px; } .store-finder.active .map-wrap { max-height: 220px; , height: 220px; } .store-finder.active #tab1 .store-list { max-height:100%; min-height:100%; } .store-finder.active .tab-cont { height: 100% } .store-finder.active .map-list { margin-top: 0; border-radius: 10px 0 0 0; } .store-finder.active .tabs { overflow:hidden; max-height:0; } .store-finder .btn-drop { margin-left:0; } .store-finder.active .store-search { padding: 0; overflow: hidden; max-height: 0; } .store-list .store-info > ul > li > a.phone { pointer-events: auto; } } /* 임시 */ .location-popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .location-popup { background: white; border-radius: 8px; width: 90%; width: max-content; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .location-popup-content { padding: 60px 100px; } .location-popup-text { text-align: center; margin: 0 0 32px 0; line-height: 1.5; font-size: 16px; font-size: 20px; font-weight: 600; } .popup-buttons { display: flex; justify-content: center; gap: 8px; } .popup-buttons button { display: inline-flex; gap: 16px; align-items: center; font-size: 16px; font-weight: 500; color: #151515; background: #fff; padding: 17px 30px; border: 1px solid #ddd; border-radius: 8px; transition: all ease .35s; text-align: left; padding: 12px 50px; } .popup-buttons button.btn-allow { background: #151515; color: white; border-color: #151515; } .popup-buttons button.btn-block:hover { background: #151515; color: #fff; border-color: #151515; } .popup-buttons button.btn-allow:hover { background-color: #005EB8; border-color: #005EB8; } @media screen and (max-width: 767px) { .location-popup { width: 90%; } .location-popup-content { padding: 24px } .location-popup-text { font-size: 18px; } .popup-buttons button { padding: 10px 30px; } } /* pagination */ .indicator { display: flex; align-items: center; justify-content: center; } .indicator .indi { display: flex; } .indicator .indi li a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; color: #666; font-size: 16px; border-radius: 50%; } .indicator .indi li a.active { background: #151515; color: #fff; } .indicator .btn { padding: 15px; } .indicator .btn-next, .indicator .btn-prev { width: 4px; height: 9px; background: url(/images/ico-page-right.png) no-repeat center; } .indicator .btn-next-end, .indicator .btn-prev-end { width: 6px; height: 9px; background: url(/images/ico-page-right-end.png) no-repeat center; } .indicator .btn-prev, .indicator .btn-prev-end { transform: scaleX(-1); } @media screen and (max-width: 767px) { .indicator { padding: 0; justify-content: center; } .indicator .indi li a { font-size: 14px; width: 30px; height: 30px; } } @keyframes floatYSmall { 0%, 100% { top: 0; } 50% { top: 3px; } } /******************************************** responsive ********************************************/ @media screen and (min-width:1200px) { /* product detail */ .prd-card-slider .swiper-wrapper { flex-wrap:wrap; gap:40px; justify-content:center; } .prd-card-slider .swiper-wrapper .swiper-slide { width:calc(25% - 30px); } .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(2), .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(2) + .swiper-slide, .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(3), .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(3) ~ .swiper-slide, .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(5), .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(5) ~ .swiper-slide, .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(6), .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(6) ~ .swiper-slide { width:calc(33.33% - 27px); } .product-detail .prd-feature .swiper-wrapper:has(.swiper-slide:nth-child(4):last-child) { gap: 24px; } .product-detail .prd-feature .swiper-wrapper .swiper-slide:first-child:nth-last-child(4), .product-detail .prd-feature .swiper-wrapper .swiper-slide:first-child:nth-last-child(4) ~ .swiper-slide { width:calc(25% - 18px); } .product-detail .prd-option .swiper-wrapper:has(.swiper-slide:nth-child(4):last-child) { max-width: 1026px; margin:0 auto; } .product-detail .prd-option .swiper-wrapper .swiper-slide:first-child:nth-last-child(4), .product-detail .prd-option .swiper-wrapper .swiper-slide:first-child:nth-last-child(4) ~ .swiper-slide { width:calc(50% - 20px); } .prd-card-slider .swiper-button-next, .prd-card-slider .swiper-button-prev { display:none; } .product-detail .prd-flex .sub-tit { text-align:left; } .product-detail .prd-flex .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(2), .product-detail .prd-flex .prd-card-slider .swiper-wrapper .swiper-slide:first-child:nth-last-child(2) + .swiper-slide { width: calc(50% - 20px); } .product-detail .prd-flex .prd-card-slider .swiper-wrapper .swiper-slide { width:100%; } .product-detail .prd-flex .card { min-height:511px; } .product-detail .prd-flex .card:has(.tag) h3 { display:inline-block; margin-left: 12px; vertical-align: sub; } .product-detail .prd-app .flip .card { background: #fff; } .product-detail .prd-app .flip .card h3 { color: #151515; } .product-detail .prd-app .flip .card p { color: #444; } .product-detail .prd-app .flip .card .icon { filter:invert(1); } /* flip card */ .panel { position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; min-height: 400px; } :lang(de) .panel { min-height: 480px; } :lang(en) .panel { min-height: 490px; } :lang(zh) .panel { min-height: 440px; } :lang(fr) .panel { min-height: 530px; } :lang(ja) .panel { min-height: 480px; } .panel .front { height: inherit; position: absolute; top: 0; z-index: 900; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel .back { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .panel.flip .front { z-index: 900; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); } .panel.flip .back { z-index: 1000; -webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg); } } @media screen and (min-width:1281px) { /* solution detail */ .solution-detail .sol-case .case-list > li:first-child:nth-last-child(4), .solution-detail .sol-case .case-list > li:first-child:nth-last-child(4) ~ li { width: calc(33.33% - 15px); } .solution-detail .sol-case .case-list > li:first-child:nth-last-child(7) ~ li:nth-last-child(-n+4) { width: calc(33.33% - 15px); } .solution-detail .sol-field .field-list:has(li:first-child:nth-last-child(1)) { justify-content:center; } .form-container .form-list > li.name { display:flex; flex-wrap:nowrap; row-gap: 10px; } .form-container .form-list > li.name .td { width: calc(50% - 150px); } .form-container .form-list > li.name .td + .th { padding-left: 20px; } } @media screen and (max-width:1740px) { .overview .section-network { height:auto; } .overview .section-network .sub-tit { margin-bottom: 80px; } .overview .section-network .network-bg { position:relative; top:auto; left:auto; right:auto; height:auto; } .overview .section-network .network-bg .loc { display:none; } .overview .section-network .network-bg .desktop { display:none; } .overview .section-network .network-bg .mobile { display:block; } .overview .section-network .network-txt { opacity:1; visibility:visible; top:2vw; right:2vw; padding:3vw; max-width: 28vw; border-radius:1vw; } .overview .section-network .network-txt p:first-child { font-size: 2vw; margin-bottom: 1vw; } .overview .section-network .network-txt ul li { font-size: 1vw; } .prd-list > li { width:calc(50% - 22px); } } @media screen and (max-width:1199px) { .panel .back { display:none; } .product-detail .prd-flex { flex-direction:column; gap:100px; } .product-detail .prd-flex .left-cont { width: 100%; } .product-detail .prd-flex .right-cont { width: 100%; } } @media screen and (max-width:1480px) { .flex-cont { flex-direction:column; } .flex-cont .left-cont { width:100%; } .flex-cont .right-cont { width:100%; } .btn-wr { margin-top: 32px; } .btn-wr .btn { padding:15px 20px; } .sub-tit { margin-bottom: 30px; } .cobot .flex-cont { flex-direction:inherit; } .rental-solution .rental-list .flex-cont { flex-direction:inherit; } .contact-btns .btn { padding:50px 5%; } .product-solutions .flex-cont { flex-direction:inherit; } .product-solutions .scroll-section { padding:60px 5%; } .product-solutions .flex-cont .left-cont { width: 300px; } .product-solutions .flex-cont .right-cont { width: calc(100% - 300px); padding-left: 5%; } .product-solutions .inquiry-form .flex-cont { flex-direction:column; } .product-solutions .inquiry-form .flex-cont .right-cont { width: 100%; padding-left: 0; } .product .desc-list { margin-top: 20px; } .product .desc-list .acc-btn { font-size: 18px; padding:15px 0; } .prd-list { gap:20px; } .prd-list > li { width: calc(50% - 10px); } .prd-list .card-item { padding:20px; } .prd-list .card-item .name { font-size: 24px; } .prd-list .card-item .spec > li { font-size: 14px; } .prd-list .card-item .btn { padding:10px; font-size: 15px; } .process-list > li .text p br { display:none; } .process-list > li .text p .mo-br { display: block; } .solution .flex-cont .right-cont { gap:40px; } .solution .flex-cont .right-cont .img { width:calc(50% - 20px); } .solution .dot-list { padding:20px 0; width:calc(50% - 20px); } .customer .flex-cont .left-cont { width:100%; } .customer .flex-cont .right-cont { width:100%; } .robot h3 { font-size: 24px; } .robot h3 + p { font-size:16px; } .robot .training-center .txt-box { padding:60px 5% 60px 0; } .robot .training-solution { gap:5%; } .catalog { padding-bottom: 0; } .catalog-list { gap:2%; } .catalog-list > li { width: 23.5%; } .total-brochure .bro-cont { padding:50px 30px; } .catalog-list .desc { flex-direction:column; margin-bottom: 30px; margin-top: 15px; gap:10px; } .catalog-list .sbj { font-size: 18px; width: 100%;} .total-brochure .dropdown .dropdown-toggle { padding:15px 20px; } .total-brochure .bro-cont h2 { font-size: 32px; } } @media screen and (max-width: 1280px) { .sub-visual { height:500px; } .sub-visual .visual-tit h1 { font-size: 56px; } .sub-visual.blog .blog_title { font-size: 56px; } .sub-container { padding: 80px 0 120px; } .sub-container .section + .section { margin-top: 80px; } .sub-container:has(.store) { padding:0; } .sub-container:has(.solution-detail) { padding:60px 0 0; } .scroll-section { scroll-margin-top: 60px; } .opened-mo-nav .scroll-nav { z-index:100; } .scroll-nav { } .scroll-nav ul { gap:10px; width: 100%; height: 60px; text-align: center; white-space: nowrap; } .scroll-nav a { font-size: 15px; } .scroll-nav .swiper-wrapper { height:60px; } .scroll-nav.down { top:60px; } .scroll-nav.fixed { padding-right:56px; } .scroll-nav.fixed .header-toggle { right:36px; } .cobot .flex-cont > div { width: calc(50% - 20px); } .cobot .flex-cont .right-cont { padding-right: 0; } .cobot .flex-cont .right-cont .sub-tit { margin-top: 30px; } .contact-btns { margin-top: 90px; } .contact-btns .btn { padding:30px 5%; font-size: 20px; } .prd-info .info-box .tag span { font-size: 14px; } .prd-info .info-box { padding:30px; } .prd-info .info-box .prd-txt h1 { font-size: 32px; margin: 20px 0 10px; } .prd-info .info-box .prd-txt p { font-size: 16px; } .prd-info .info-box .spec { margin-top: 30px; padding:20px 0; } .prd-info .info-box .spec li { font-size: 14px; } .prd-info .info-box .spec li strong { font-size: 20px; max-width: 100px; } .prd-info .info-box .spec li p:first-child { height: 40px; display: flex; align-items: center; justify-content: center; line-height: 1.2; } :lang(de) .prd-info .info-box .spec li p:first-child { word-break: break-all; } .robot .training-robot { padding: 70px 0 80px; } .robot .training-robot .grid-container { display: flex; flex-wrap: wrap; height:auto; } .robot .training-robot .grid-container .item { width: calc(50% - 12px); height:300px; } .robot .training-kit { flex-direction: column; } .robot .training-kit .kit-box { width: 100%; } .location .office-list > li { padding:60px 40px; } .location .office-list > li .office { width:160px; } .location .office-list > li .address { width: calc(100% - 160px); } .location .office-list > li h2 { font-size: 24px; } .location .office-list > li .address dl + dl { margin-left: 20px; } .inquiry .grid-container { display:block; } .inquiry .grid-container .item { padding:40px; } .inquiry .grid-container .item + .item { margin-top: 20px; } .inquiry .sub-tit { margin-bottom: 0; } .inquiry .link-list { gap:20px; } .customer .call-box h2 { font-size: 32px; } .customer .call-box .left { width: 40%; padding:40px 20px; } .customer .call-box .right { width: 60%; padding:40px 20px; } .customer .call-box .tel { font-size: 40px; } .process-list { gap:40px; } .process-list > li .text h3 { font-size: 24px; } .process-list > li .img { margin:20px 0; } .process-list > li:before { right:-38px; } .catalog-list > li { width: 32%; } .product-detail .section { padding:120px 0; } .product-detail .section + .section { margin-top: 0; } .product-detail .inquiry-form { padding-bottom: 80px; } .product-detail .prd-option + .inquiry-form { padding-top: 80px; } .rental h3 { font-size: 24px; } .rental-overview { flex-direction: column; margin-top: 70px; } .rental-overview .img-box { width: 100%; } .rental-overview .txt-box { width: 100%; padding:40px; } .rental-solution { padding: 100px 0; margin-top: 100px; } .rental-solution .rental-list .flex-cont { flex-direction: column; } .rental-solution .flex-cont .left-cont { width: 100%; } .rental-solution .flex-cont .right-cont { width: 100%; margin-left: 0; padding-top: 20px; } .rental-solution .dot-list { padding:12px 0; } .rental .inquiry-form { padding-top: 100px; } .rental-available { padding-top: 80px; margin-top: 80px; margin-bottom: 80px; } .rental-available > ul > li h3 { font-size: 24px; } .rental-required > ul { padding:40px; } .overview .sub-tit p { font-size: 18px; } .overview .section-vision .sub-tit h2 { font-size: 50px; } .overview .section-vision .sub-tit p { font-size: 24px; } .overview .section-vision .vision-txt { font-size: 18px; } .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 32px; } :lang(zh) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 2.2vw; } :lang(en) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 2vw; } :lang(de) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 1.9vw; } :lang(fr) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 1.4vw; } :lang(ja) .overview .section-dna .dna-cont .count-box > ul > li{font-size: 1.8vw;} :lang(ja) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 3vw; } .overview .section-company .company-box > ul > li strong { font-size: 32px; } .overview .section-core .core-list li { padding:60px; } .overview .section-core .core-list p { font-size: 18px; } .overview .btn-wr .btn { padding: 14px 16px; font-size: 14px; } .event-list > ul { gap: 40px 20px; } .event-list > ul > li { width: calc(50% - 10px); } .solution .solution-list { gap:20px; padding: 120px 0 150px; } .solution .solution-list > li { width:calc(33.33% - 13.333px); } .solution .solution-list .card-item .name { font-size: 24px; margin-bottom: 8px; } .solution .industry-list { gap:20px; padding: 120px 0 150px; } .solution .industry-list > li { width:calc(33.33% - 13.333px); } .solution .industry-list .card-item .desc { justify-content:flex-start; } .solution .industry-list .card-item p { min-height:auto; } .solution .industry-list .card-item .desc { padding:30px; } .solution .industry-list .card-item .name { font-size: 24px; margin-bottom: 8px; } .solution-detail .detail-info { padding:80px 0; } .solution-detail .detail-info .txt h1 { font-size: 36px; } .solution-detail .detail-info .txt p { font-size: 18px; } .solution-detail .section + .section { margin-top: 0; } .solution-detail .section { padding:80px 0; } .solution-detail .sol-case { padding-top: 0; } .solution-detail .sol-partner { padding-top: 0; } .solution-detail .sol-inquiry .form-container { padding:40px; } .solution-detail .sol-field .field-list > li { width: 100%; } .solution-detail .process-list > li { width: calc(50% - 18px); } .solution-detail .sol-case .case-list { justify-content:flex-start; gap: 24px; } .solution-detail .sol-case .case-list > li { width: calc(50% - 16px); } .form-container .privacy-use { margin-top: 40px; padding-top: 40px; } .form-container .form-list > li.name { row-gap: 10px; } #map { top: 60px; height: calc(100vh - 60px) !important; } } @media screen and (max-width: 820px) { body { font-size: 14px; } .sub-visual { height:280px; } .sub-visual .visual-tit h1 { font-size: 36px; } .sub-visual.blog .blog_title { font-size: 36px; } .scroll-nav.fixed { padding-right: calc(5% + 20px); } .scroll-nav.fixed .header-toggle { right:5%; } .navigation > ul > li.home { width: 60px !important; } .navigation > ul { width: 100%; } .navigation { font-size: 14px; bottom:20px; } .navigation.fix { bottom:20px; } .navigation > ul > li.home { width: 50px !important; } .navigation > ul > li.home a { } .navigation > ul > li > ul { padding:10px 0; } .navigation > ul > li > ul > li > a { font-size: 14px; padding:6px 5px; line-height: 1.2; } .navigation > ul > li > ul > li > a .icon { margin-top: -2px; } .navigation > ul > li > a { height:50px; font-size: 14px; line-height: 1.2; } .navigation > ul > li > a span { max-width: calc(100% - 40px); } :lang(fr) .navigation > ul > li > a { font-size: 13px; } .navigation > ul > li:nth-child(2) { display:none; } body:has(.detail-info) .navigation > ul > li:nth-child(3) { display:none; } .navigation > ul > li:first-child:nth-last-child(3), .navigation > ul > li:first-child:nth-last-child(3)~li { width:calc(100% - 50px); } .navigation > ul > li:first-child:nth-last-child(4), .navigation > ul > li:first-child:nth-last-child(4)~li { width:calc(50% - 25px); } .navigation > ul > li:first-child:nth-last-child(5), .navigation > ul > li:first-child:nth-last-child(5)~li { width:calc(50% - 25px); } .sub-tit { margin-bottom: 20px; } .sub-tit h2 { font-size: 23px; } .sub-tit p { margin-top: 15px; font-size: 16px;} :lang(ja) .app .sub-tit h2{font-size: 21px;} .sub-container { padding: 50px 0 80px; } .sub-container .section + .section { margin-top: 40px; } .solution-detail .section + .section { margin-top: 0; } .sub-head { flex-direction:column; gap:10px; align-items:flex-start; margin-bottom: 20px; } .sub-head:has(.total) { align-items: flex-start; } .sub-head:has(.txt-box) { align-items: flex-start; } .sub-head select { height: 50px; padding: 0 54px 0 20px; font-size: 14px; background-position: center right 8px; background-size: 22px; } .tab-cont .sub-head { margin-top: 0; } .tabs { gap:4px; } .tab { font-size: 14px; padding:8px 12px; } .tabs > .tab:first-child:nth-last-child(2), .tabs > .tab:first-child:nth-last-child(2)~.tab { width: 50%; } .tabs > .tab:first-child:nth-last-child(3), .tabs > .tab:first-child:nth-last-child(3)~.tab { width: 33.33%; } .tabs > .tab:first-child:nth-last-child(4), .tabs > .tab:first-child:nth-last-child(4)~.tab { width:50%; } .tabs > .tab:first-child:nth-last-child(5), .tabs > .tab:first-child:nth-last-child(5)~.tab { width:50%; } .tab-box { gap:4px; } .tab-box > li > a { font-size: 14px; } .sub-head .tabs > .tab { padding:4px 12px; } .cont-table { font-size: 15px; } .cont-table table th { padding:15px 5px; font-size: 14px; line-height: 1.4; } .cont-table table td { padding:15px 5px; font-size: 13px; line-height: 1.4; } .cont-table .btns { flex-direction:column; gap:4px; } .cont-table .download { gap:2px; font-size: 13px; } .cont-table .link { gap:2px; font-size: 13px; } .cont-table .title .date { font-size: 14px; margin-bottom: 4px; width: 50px; } .disclosure .cont-table .table-wrap { overflow-x:auto; } .disclosure .cont-table table { table-layout:inherit; } .disclosure .cont-table table th { white-space: nowrap; } .disclosure .cont-table table td { white-space: nowrap; } .governance .cont-table table th, .governance .cont-table table td, .irdata .cont-table table th, .irdata .cont-table table td { white-space: normal; } .cont-table { position:relative; } .cont-table:has(.table-overflow):before { content:''; width:50px; height:50px; background:url('/images/icon-hand.png') no-repeat rgba(0,0,0,0.5) center center / 28px; position:absolute; left:50%; top:50%; margin-top: -25px; margin-left: -25px; border-radius:50%; z-index:1; transition:all ease .35s; } .cont-table:has(.hand-remove):before { opacity:0; visibility:hidden; } .sub-search-box { margin-bottom: 15px; } .sub-search-box .input-group { gap:0; } .sub-search-box .input-group select { height: 50px; width: 90px; padding:0 10px; font-size: 13px; } .sub-search-box .input-group .input { height: 50px; width: calc(100% - 90px); padding : 0 40px 0 0; font-size: 13px;} :lang(fr) .sub-search-box .input-group select{ width: 160px;} :lang(fr) .sub-search-box .input-group .input{ width:calc(100% - 160px);} .sub-search-box-wrapper { font-size: 15px; } .sub-search-box .input-group .search { width: 50px; height: 50px; } .sub-head:has(.tabs) .sub-search-box { margin-top: 10px; } .total { font-size: 14px; } .btn-external a { font-size: 15px; padding: 12px 20px; } .btn-wr { gap:4px; } .btn-wr .btn { padding: 14px 20px; gap:10px; } .pagination { margin-top: 40px; } .pagination > a { width: 20px; height: 20px; } .contact-btns { flex-direction:column; } .contact-btns .btn { font-size: 18px; } .contact-btns .btn .icon::before { width: 32px; height: 32px; } .solution-detail .contact-btns .btn .icon-download::before { width: 28px; height: 28px; } .floating-container { bottom: 10px !important; z-index: 3; } .ci .btns { margin-top: 20px; } .ci .btns > a { gap:10px; } .ci .btns > a + a { margin-left: 30px; } .ci h3 { font-size: 20px; } .ci .ci-color { flex-direction:column; gap:20px; } .ci .ci-color .img { max-width:200px; } .ci .ci-provision { margin-top: 40px; } .ci .ci-wordmark { margin-top: 20px; } .ci .ci-wordmark .img { margin:20px 0; } .ci-banner { padding:20px; height:200px; } .ci-banner a { font-size: 18px; gap:10px; } .ci-banner a .icon:before { width: 30px; height: 30px; } .location .office-list > li { padding: 30px; flex-direction:column; gap:10px; } .location .office-list > li + li { margin-top: 12px; } .location .office-list > li .office { width:100%; } .location .office-list > li .address { width: 100%; padding-top: 10px; border-top:1px solid #ddd; } .location .office-list > li h2 { font-size: 20px; } .location .office-list > li .address h2 { font-size: 18px; } .location .office-list > li .address dl { margin-top: 10px; } .location .office-list > li .address dl + dl { margin-left: 0; } .location .acc-btn { top: 10px; } .location .icon-map::before { width: 30px; height: 30px; } .location .acc-btn::after { font-size: 12px; } .location .acc-cont { padding-top: 20px; } .location .acc-cont iframe { height: 200px !important; } .location .acc-cont .map_content { height:200px !important; } .location .acc-cont .map_content .gm-style-mtc-bbw .gm-style-mtc > button { font-size: 12px !important; padding: 10px !important; height: 30px !important; line-height: 1; } :lang(en) .location .office-list > li .address { padding-right: 60px; } :lang(de) .location .office-list > li .address { padding-right: 80px; } :lang(ja) .location .office-list > li .address { padding-right: 80px; } :lang(fr) .location .office-list > li .address { padding-right: 60px; } :lang(en) .location .acc-cont .map_content { margin-right: -60px; width: calc(100% + 60px); } :lang(de) .location .acc-cont .map_content { margin-right: -80px; width: calc(100% + 80px); } :lang(ja) .location .acc-cont .map_content { margin-right: -80px; width: calc(100% + 80px); } :lang(fr) .location .acc-cont .map_content { margin-right: -60px; width: calc(100% + 60px); } .sustainability .tab { font-size: 16px; height:50px; } .sustainability .tabs { margin-bottom: 20px; } .ethical .code-ethics .btn-wr .btn { font-size: 15px; } .ethical .code-partner .title { font-size: 22px; } :lang(en) .ethical .code-partner .title { font-size: 20px; } .ethical .code-partner .title:before { max-width: 80%; top:-50px; bottom:auto; } .ethical .section.code-partner { margin-top: 90px; } .ethical .code-partner .title h3 { margin-bottom: 12px; font-size: 16px; } .ethical .code-partner .title br { display:none; } .ethical .code-partner > ul { margin-top: 32px; flex-direction:column; gap:20px; } .ethical .code-partner > ul > li .text { margin:130px 24px 24px; padding:14px; } .ethical-help { margin-top: 20px; } .ethical-help > li { padding:40px 30px; flex-direction:column; gap:16px; } .ethical-help > li .title { width: 100%; font-size: 28px; } :lang(en) .ethical-help > li .title { font-size: 26px; } .ethical-help > li .content { width: 100%; } .ethical-help > li .content h3 { font-size: 18px; } .ethical-help > li .content p { margin-top: 15px; } .ethical-help > li.cyber-report h3 br { display:none; } .ethical-help > li.cyber-report .title:before { width: 80%; left: auto; right: 0; bottom:auto; top: -45px; } .ethical-help .btn-external { margin-top: 32px; } .ethical-help .btn-external a { font-size: 15px; } .ehs { font-size: 16px; } .ehs .ehs-list { margin:30px 0; } .ehs .ehs-list > li { padding:30px; } .ehs .ehs-list > li + li { margin-top: 16px; } :lang(en) .ehs .ehs-list > li { padding:20px; } .ehs .ehs-list > li h3 { font-size: 20px; margin-bottom: 12px; } :lang(en) .ehs .ehs-list > li h3 { font-size: 19px; } .ehs .ehs-list > li h3 .num { font-size: 18px; } .ehs .ehs-list > li p { font-size: 15px; } .ehs .sign { font-size: 20px; flex-wrap:wrap; gap:6px; } :lang(en) .ehs .sign { font-size: 16px; } .ehs .ehs-list.dot { flex-direction:column; } .ehs .ehs-list.dot > li { width: 100%; } .ehs .ehs-list.dot > li h3 { gap:10px; margin-bottom: 10px; } .ehs .ehs-list.dot > li p { padding-left: 12px; } .ehs .ehs-list.dot > li p:before { top:9px; } .news-list { margin-bottom: 30px; } .news-list > ul > li > a { flex-direction:column; } .news-list .thumbnail { width: 100%; } .news-list .content { width: 100%; padding-left: 4px; padding-top: 20px; } .news-list .content .title { font-size: 20px; } .news-list .content .text { margin:10px 0 20px; min-height:auto; -webkit-line-clamp: 2; } .news-list .content .date { font-size: 14px; } .news-list > ul > li { padding:30px 0; } .social-cont{margin-top: 50px;} .social-cont .social-sns { margin-top: 10px; } .social-cont .social-sns li + li { margin-left: 12px; } .social-cont .tb_hc_arrow { width: 40px; height: 40px; } .social-cont .tb_hc_arrow::after { font-size: 16px; } .social-cont .tb_hc_fixed_height .tb_hc_arrow, .social-cont .tb_hc_fixed_height_te .tb_hc_arrow { top: calc(50% - 20px); } .social-cont .tb_hc_arrow_left__ { left: calc(5% - 15px); } .social-cont .tb_hc_arrow_right__ { right: calc(5% - 15px); } .event-list { margin-bottom: 30px; } .event-list > ul { gap: 30px 0; } .event-list > ul > li { width:100%; } .event-list .content { margin-top: 15px; } .event-list .content .date { font-size: 14px; } .event-list .content .title { font-size: 18px; } .event .status { font-size: 13px; margin-top: 15px; } .event .status > span { padding:3px 6px; min-width:50px; } .event-list > ul { gap: 30px 0; } .event-list > ul > li { width:100%; } .event-list .content { margin-top: 15px; } .event-list .content .date { font-size: 14px; } .event-list .content .title { font-size: 18px; } .event-list .thumbnail .status { left:15px; top:15px; } .board-head { padding-bottom: 30px; } .board-head h2 { font-size: 22px; } :lang(en) .board-head h2 { font-size: 20px; } .board-head p { margin-top: 10px; } .board-cont { padding:40px 0 20px; font-size: 15px; } .board-cont .content{font-size: 15px;} .board-cont figcaption { font-size: 14px; } .board-cont .key-list { padding:20px; margin-bottom: 30px; } .board-cont .file-list { padding:16px; font-size: 14px; margin-top: 40px; } .board-cont .content ul li:before{top:10px;} .board-btns { height:70px; padding-top: 20px; } .board-btns .btn-list { width: 50px; margin-left: -25px; } .board-btns .btn-prev strong, .board-btns .btn-next strong { display:none; } .board-btns .btn-prev { width: calc(50% - 40px); padding-left: 20px; } .board-btns .btn-next { width: calc(50% - 40px); padding-right: 20px; } .btn-wr .more { font-size: 14px; padding: 8px 16px 8px 20px; } .btn-wr .more .icon { margin-top:2px; } .blog .board-head h1 { font-size: 22px; } .blog .board-cont .content h2 { font-size: 20px; } .board-cont .content h3 { font-size: 18px; color: #151515; } .board-cont .content h6{ font-size: 16px; } .inquiry .grid-container .item { padding:40px 30px; } .inquiry .link-list { flex-direction:column; gap:0; } .inquiry .link-list > ul > li { font-size: 16px; padding:18px 0; flex-direction: column; align-items: flex-start; } .inquiry .link-list .btn { gap:20px; font-size: 15px; padding: 12px 20px; } .customer .call-box h2 { font-size: 24px; margin:10px 0; } .customer .call-box .left { width: 100%; padding:30px 20px; font-size: 16px; } .customer .call-box .right { width: 100%; padding:30px 20px 40px; } .customer .call-box .img { margin:14px auto; } .customer .call-box .tel { font-size: 30px; } .customer .call-box { flex-direction:column; gap:20px; } .customer .call-box p img { width: 17px; } .customer .call-box .btn-wr { margin-top: 20px; } .customer .call-box .btn-wr a { font-size: 16px; } .customer .call-box .btn-wr .icon::before { width: 20px; height: 20px; } .customer .call-box .img img { max-width:30vw; } .customer .call-center.custom .top_box { padding: 20px; } .customer .call-center.custom .top_box p{ font-size: 16px; } .customer .call-center.custom .top_box p span{ font-size: 16px; } .customer .call-center.custom .call-box .left { font-size: 14px; } .customer .call-center.custom .call-box .left .time_info{ margin-top: 20px; font-size: 16px; } .customer .call-center.custom .call-box .right .qr_img{ margin-top: 16px; padding: 10px; width: 120px; } .customer .call-center.custom .call-box .right .kakao_box{ padding:4px 18px 4px 4px; font-size: 18px; } .customer .call-center.custom .call-box .right .inquiry_info{ font-size: 16px; } .customer .call-center.custom .call-box .right .time_info{ margin-top: 20px; font-size: 16px; } .process-list { flex-direction:column; gap:40px; } .process-list > li { padding:30px 20px; } .process-list > li .text h3 { font-size: 24px; } .process-list > li .img { margin:10px 0; } .process-list > li .img img { max-width:30vw; } .process-list > li:before { right:50%; top:auto; bottom:-36px; margin-right: -18px; transform:rotate(90deg); } .process-list > li .text h3 { font-size: 20px; } :lang(en) .process-list > li .text h3 { font-size: 20px; } .customer .qna-list .acc-btn { padding:20px 60px 20px 20px; font-size:16px; } .customer .qna-list .acc-btn .icon { right:18px; top:26px; width: 14px; height: 14px; } .customer .qna-list .acc-cont { padding:20px } .overview .sub-tit { margin-bottom: 30px; } .overview .sub-tit h2 { font-size: 26px; } .overview .sub-tit p { font-size: 14px; margin-top: 12px; } .overview .scroll-section { padding-top: 60px; } .overview .section-vision { padding-top: 80px; } .overview .section-vision .vision-bg { top: calc(15vh + 160px); } .overview .section-vision .sub-tit h2 { font-size: 26px; line-height: 1.2; } .overview .section-vision .sub-tit p { font-size: 16px; margin-top: 15px; line-height: 1.2; } .overview .section-vision .vision-txt { font-size: 14px; left:10%; width: 80%; } .overview .section-vision .vision-txt p:first-child { font-size: 32px; } .overview .section-vision .vision-txt p + p { margin-top: 20px; } .overview .section-dna .sub-tit p br { display:none; } .overview .section-dna .dna-cont { flex-direction:column; gap:12px; height:auto; } .overview .section-dna .dna-cont .count-box { width: 100%; padding:12px; aspect-ratio: 1; } .overview .section-dna .dna-cont .group-box { width: 100%; padding:12px; aspect-ratio: 1; } .overview .section-dna .dna-cont .count-box .txt { padding:12px; } .overview .section-dna .dna-cont .count-box > ul { padding:10px 0; } .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 24px; } :lang(zh) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 3.6vw; } :lang(en) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 3.8vw; } :lang(de) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 3.7vw; } :lang(fr) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 3.2vw; height:32px; display:flex; flex-direction: column; justify-content: center; } :lang(de) .overview .section-dna .dna-cont .count-box > ul > li > span { display:block; height:56px; display:flex; flex-direction: column; justify-content: center; } :lang(ja) .overview .section-dna .dna-cont .count-box > ul > li{font-size: 3vw;} :lang(ja) .overview .section-dna .dna-cont .count-box > ul > li strong { font-size: 5vw; } .overview .section-company .company-box { padding:12px; height:auto; aspect-ratio: 1; } .overview .section-company .company-box > ul { gap:12px; } .overview .section-company .company-box > ul > li { padding: 10px 5px; font-size: 14px; display: flex; flex-direction: column; justify-content: center; } .overview .section-company .company-box > ul > li strong { font-size: 24px; } .overview .section-company .company-box > ul > li span { margin : 0 auto; padding:2px 4px; font-size: 12px; } .overview .section-network .sub-tit { margin-bottom: 30px; } .overview .section-network .sub-tit p br { display:none; } .overview .section-network .network-txt { top:3vw; right:3vw; padding:3.2vw; max-width: 50vw; border-radius:2vw; } .overview .section-network .network-txt p:first-child { font-size: 3vw; } .overview .section-network .network-txt ul li { font-size: 1.8vw; } .overview .section-core .core-list li { padding:36px 24px; flex-direction:column; gap:24px; } .overview .section-core .core-list li + li { margin-top: 16px; } .overview .section-core .core-list .core-left { width: 100%; } .overview .section-core .core-list .core-right { width: 100%; } .overview .section-core .core-list h3 { font-size: 20px; } .overview .section-core .core-list p { font-size: 14px; margin-top: 8px; } .overview .section-core .core-list .core-left .btn-wr { gap:8px; margin-top: 16px; } .overview .section-core { margin-bottom: 0; } .robot .training-robot { padding: 50px 0 80px; } .robot .training-robot .grid-container { gap:20px; } .robot .training-robot .grid-container h3 strong { display:block; } .robot .training-robot .grid-container .item { width:100%; height:260px; padding:36px 30px; } .robot h3 { font-size: 20px; } .robot h3 + p { font-size: 15px; } .robot .training-robot:before { width: 80%; } .robot .training-kit { padding:20px; } .robot .training-kit .kit-box { padding:20px; } .robot .training-center { flex-direction: column; } .robot .training-center .img-box { width: 100%; } .robot .training-center .txt-box { padding:30px; width: 100%; } .robot .training-center .txt-box .btn-wr { flex-direction: column; gap:10px; } .robot .training-center .txt-box ul { margin-top: 12px; } .robot .training-solution { flex-direction: column; gap:30px; } .robot .training-solution h3 { margin-top: 24px; } .investment .txt-box { font-size: 14px; } .investment .txt-flex { flex-direction:column; gap:10px; align-items:flex-start; } .cobot section { padding: 70px 0; } .cobot .flex-cont { flex-direction:column; } .cobot .flex-cont > div { width: 100%; } .cobot .flex-cont:before { font-size: 40px; margin-bottom: -7px; } .cobot .num-list > li .tit { font-size: 20px; margin-bottom: 8px; } .cobot .num-list > li .tit:before { width: 26px; height: 26px; font-size: 14px; top:3px; } .cobot .num-list > li + li { margin-top: 30px; } .cobot .num-list .btn-wr { margin-top: 16px; } .cobot .super-easy { border-radius:24px 24px 0 0; } .cobot section:last-child { padding-bottom: 0; } .total-brochure { flex-direction:column; } .total-brochure > div { width: 100%; } .total-brochure .bro-cont { padding:40px 30px; } .total-brochure .btn-wr { flex-direction:column; gap:10px; } .total-brochure .dropdown .dropdown-toggle { font-size: 16px; padding:14px 20px; } .total-brochure .dropdown .dropdown-button { font-size: 16px; } .total-brochure .bro-cont h2 { font-size: 25px; } .total-brochure .bro-cont .type { margin-bottom: 10px; font-size: 13px; padding:4px 10px; } .catalog-list { gap:16px; } .catalog-list > li { width: calc(50% - 8px); } .catalog .tabs { margin-bottom: 30px; overflow-x: auto; flex-wrap: nowrap; } .catalog .tab { font-size: 16px; height:40px; padding:10px; flex: 0 0 auto; width: auto !important; } .catalog-list .btn-wr { width: 100%; } .catalog .dropdown { width: calc(100% - 48px); } .catalog-list .dropdown .dropdown-toggle { width: 100%; font-size: 13px; } .catalog-list .dropdown .dropdown-button { font-size: 13px; } .catalog-list .sbj { font-size: 16px; padding-top: 0; } .catalog-list .desc { margin-bottom: 10px; } .no-data{ padding: 50px 10px !important;} .product-solutions .inner { width: 90%; padding:0; } .product-solutions .inquiry-form .inner { width: 85%; } .product-solutions .scroll-section { padding:30px 20px; } .product-solutions .scroll-section + .scroll-section { margin-top: 20px; } .product-solutions .flex-cont { flex-direction:column; } .product-solutions .flex-cont .left-cont { width: 100%; } .product-solutions .flex-cont .left-cont .sub-tit { margin-bottom: 10px; } .product-solutions .flex-cont .left-cont .sub-tit p { margin-top: 0; } .product-solutions .flex-cont .right-cont { padding-left: 0; width: 100%; margin-top: 30px; } .product .desc-list .acc-btn { padding:7px 0; font-size: 16px; } .product .desc-list .acc-cont { font-size: 14px; padding-bottom: 10px; } .product-solutions .inquiry-form { padding: 40px 0 80px; margin-top: 50px; } .product-solutions .inquiry-form .flex-cont .right-cont { margin-top: 10px; } .product-solutions .inquiry-form .flex-cont .left-cont .sub-tit { margin-bottom: 0; } .solution .flex-cont .left-cont .btn-wr { max-width:100%; margin-top:10px; } .solution .flex-cont .left-cont .btn-wr .btn { padding:10px; font-size: 16px; } .solution .flex-cont .right-cont .img { width: 100%; } .solution .dot-list { width: 100%; } .solution .dot-list > li { font-size: 15px; padding-left: 12px; } .solution .dot-list > li:before { top:9px; width: 4px; height: 4px; } .sub-container .play { width: 50px; height: 50px; } .sub-container .badge { transform: scale(0.7); transform-origin: right top; } :lang(de) .sub-container .badge span.him, :lang(fr) .sub-container .badge span.him{width: 70px; height: 70px;} .product .desc-list { margin-top: 10px; } .product-solutions .flex-cont .right-cont { margin-top: 30px; flex-direction:column; gap:0; } .prd-list { gap:10px; } .prd-list > li { width: calc(50% - 5px); } .prd-list .card-item .spec > li { flex-direction:column; align-items: flex-start; } .prd-list .card-item .spec > li strong { text-align:left; } .prd-list .card-item .badge { top:2px; right:2px; gap:2px; } .prd-list .card-item .badge span{width: 48px; height: 48px;} :lang(de) .prd-list .card-item .badge span.him, :lang(fr) .prd-list .card-item .badge span.him{width: 56px; height: 56px;} .prd-list .card-item { padding:10px; } .prd-list .card-item .name { font-size:20px; margin-top: 10px; } .prd-list .card-item .btn-wr { margin-top: 5px; } .prd-list .card-item .btn { padding:7px; font-size: 14px; } .prd-visual { height:auto; flex-direction:column; } .prd-visual .prd-imgs { width: 100%; } .prd-visual .prd-info { width: 100%; padding : 0 20px 30px; } .prd-visual-slider .swiper-pagination { bottom:20px; } .prd-visual .prd-info .navigation:not(.fix) { margin-bottom: 12px; } .prd-visual .prd-info .navigation:not(.fix) > ul > li:not(.home) { width: calc(50% - 25px); } .prd-info .info-box { padding:30px 20px; } .prd-info .info-box .tag { gap:4px; } .prd-info .info-box .tag span { font-size: 12px; padding: 4px 8px; } .prd-info .info-box .prd-txt h1 { margin:10px 0 0; } .prd-info .info-box .spec { margin-top: 20px; padding:15px 0; } .prd-info .info-box .spec li { font-size: 13px; } .prd-info .info-box .spec li strong { font-size: 16px; max-width:80px; } .prd-info .info-box .prd-txt p { font-size: 15px; } .prd-info .btn-wr { flex-direction:column; gap:8px; margin-top: 12px; } .product-detail { overflow:hidden; } .product-detail .section { padding:60px 0; } .product-detail .section + .section { margin-top: 0; } .product-detail .section .prd-card-slider { overflow:inherit; } .product-detail .section .prd-card-slider:before { content:''; width:50px; height:50px; background:url('/images/icon-hand.png') no-repeat rgba(0,0,0,0.5) center center / 28px; position:absolute; left:50%; top:50%; margin-top: -25px; margin-left: -25px; border-radius:50%; z-index:2; transition:all ease .35s; } .product-detail .section .prd-card-slider.hand-remove:before { opacity:0; visibility:hidden; } .prd-card-slider .swiper-button-next, .prd-card-slider .swiper-button-prev { display:none; } .product-detail .inquiry-form .sub-tit { margin-bottom: 0; } .product-detail .inquiry-form { padding-bottom: 40px; } .product-detail .prd-option + .inquiry-form { padding-top: 40px; } .product-detail .card h3 { font-size: 20px; margin-bottom: 6px; } :lang(de) .product-detail .card h3, :lang(en) .product-detail .card h3 { font-size: 20px; } .product-detail .card .icon { margin-bottom: 20px; } .product-detail .card .btn-wr .btn { font-size: 14px; padding:10px 12px; } .product-detail .card { padding:24px; gap:24px; } .product-detail .card .tag { font-size: 12px; padding:8px 12px; margin-bottom: 12px; } .solution .solution-list { gap:10px; padding: 60px 0 80px; } .solution .solution-list > li { width:100%; } .solution .solution-list .card-item .btn-wr { margin-top: 20px; } .solution .solution-list .card-item .name { margin-top: 12px; } .solution .solution-list .card-item { min-height:auto; padding:20px; } .solution .solution-list .card-item p { font-size: 15px; } .solution .industry-list { gap:10px; padding: 60px 0 80px; } .solution .industry-list > li { width:100%; } .solution .industry-list .card-item p { font-size: 15px; } .solution .industry-list .card-item .btn-wr { margin-top: 20px; } .solution .industry-list .card-item .btn { font-size: 15px; } .solution-detail .detail-info { padding:60px 0; } .solution-detail .detail-info .inner { flex-direction:column; gap:30px; } .solution-detail .detail-info .img { width: 100%; } .solution-detail .detail-info .txt { width: 100%; padding-left: 0; } .solution-detail .detail-info .txt h1 { font-size: 26px; } .solution-detail .detail-info .txt p { font-size: 16px; margin-top:12px; } .solution-detail .detail-info .dropdown { margin-top: 24px; } .solution-detail .detail-info .tag { gap:3px; } .solution-detail .detail-info .tag span { font-size: 14px; padding: 4px 14px; } .solution-detail .section { padding:60px 0; } .solution-detail .process-list { gap:12px; } .solution-detail .process-list > li, .solution-detail .process-list > li:first-child:nth-last-child(5), .solution-detail .process-list > li:first-child:nth-last-child(5) ~ li { width: 100%; } .solution-detail .process-list > li p { font-size: 14px; } .solution-detail .process-list > li .img { margin:10px auto; } .solution-detail .sol-case { padding-top: 0; } .solution-detail .sol-case .case-list { gap:30px; } .solution-detail .sol-case .case-list > li { width: 100%; } .solution-detail .sol-case .case-list p { font-size: 17px; margin-top:10px; } .solution-detail .sol-inquiry .sub-tit p { margin-top: 10px; } .solution-detail .sol-inquiry .sub-tit { margin-bottom: 30px; } .solution-detail .sol-inquiry .form-container { padding:20px; } .solution-detail .sol-field .field-list { gap:16px; } .solution-detail .sol-field .field-list .ico { width: 80px; height: 80px; left: 16px; top: 30px; } .solution-detail .sol-field .field-list > li > a { padding:30px; padding-left: 110px; } .solution-detail .sol-field .field-list .name { font-size: 20px; } .solution-detail .sol-field .field-list .btn { padding:10px 16px; font-size: 15px; } .solution-detail .sol-partner { padding-top: 0; } .solution-detail .sol-partner .partner-list { gap:12px; } .solution-detail .sol-partner .partner-list > li { width: calc(33.33% - 8px); } .solution-detail .sol-partner .partner-list:has(li:first-child:nth-last-child(-n+5)) { justify-content:flex-start; } .solution-detail .sol-partner .partner-list:has(li:first-child:nth-last-child(-n+3)) { justify-content:center; } .rental h3 { font-size: 20px; } .rental .sub-tit p{ font-size: 16px;} .rental-overview { margin-top:30px; } .rental-overview .txt-box { padding:30px; } .rental-overview .txt-box > ul { margin-top: 20px; padding:20px; border-radius: 10px; } .rental-overview .txt-box > ul > li { padding-left: 10px; } .rental-overview .txt-box > ul > li:before { top:9px; } .rental-overview .txt-box > ul > li > ul > li { padding-left: 10px; text-indent: -10px; } .rental-solution { padding: 50px 0; margin-top: 50px; } .rental-solution .rental-list > li { padding:24px; } .rental-solution .rental-list > li + li { margin-top: 20px; } .rental-solution .dot-list { padding:10px 0; } .rental-solution .dot-list > li { padding-left: 12px; } .rental-solution .dot-list > li + li { margin-top: 5px; } .rental-solution .dot-list > li:before { top:8px; } .rental .inquiry-form { padding-top:40px; } .rental-solution .flex-cont .btn-wr { flex-direction:column; gap:8px; margin-top: 20px; } .rental-solution .flex-cont .btn-wr .btn { width: 100%; font-size: 15px; } .rental-required{padding-top: 50px;} .rental-required .req-box { flex-direction:column; padding:24px; } .rental-required .req-box ul li + li{margin-top: 6px;} .rental-required .req-box ul li:before{top:8px;} .rental-required .req-box ul li{padding-left: 12px;} .rental-required .hide-list{margin-top: 6px;} .rental-required .req-box .btn-wr .btn{font-size: 14px;} .rental-available { padding-top: 40px; margin-top: 50px; margin-bottom: 50px; } .rental-available > ul { gap:16px; } .rental-available > ul > li { width: 100%; padding:30px; } .rental-available > ul > li h3 { font-size: 20px; margin-bottom: 10px; } .rental-available > ul > li p { padding-left: 12px; } .rental-available > ul > li p:before { top:8px; } .rental-available > ul > li .ico { width:50px; right:20px; } .rental-required > ul { padding:40px 30px; } .rental-required > ul > li { padding-left: 12px; } .rental-required > ul > li:before { top:8px; } .error { padding-top: 70px; gap:40px; } .error .btn { font-size: 16px; } .error .btn + .btn { margin-left:4px; } .error-message > img { width: 160px; margin-bottom: 20px; } .error-message strong { font-size: 24px; margin:5px 0; } .policy .sub-tit { padding:70px 0 50px; } .policy .sub-tit h1 { font-size: 36px; } .policy h2 { font-size: 20px; margin-bottom: 12px; margin-top: 40px; } .policy h3 { font-size: 16px; margin: 12px 0 5px; } .policy h2:first-child { font-size: 22px; } .policy .content, .policy p { font-size: 15px; } .policy .etc-head { padding:18px; margin-bottom: 30px; } .policy .tabs { margin:30px 0 30px; gap:8px; } .policy .tab { font-size: 14px; height:50px; line-height: 50px; width: 100% !important; } .policy .etc-select .dropdown { width: 220px; } .policy .etc-select { margin-bottom: 20px; } .policy table { margin-top: 5px; } .policy table th, .policy table td { font-size: 14px; padding:10px 5px; } .policy table td{ word-break: break-all;} .policy table + p { margin-top: 12px; } :not(:lang(ko)) .policy .content > ul > li .pl_con { margin-left: 30px; } .popup-content { padding:24px; font-size: 14px; max-height: calc(100vh - 140px); } .popup-content h3 { font-size: 22px; } .popup-content .close-btn { top:10px; right:14px; font-size: 13px; } .popup-content .close-btn .icon:before { width: 34px; height: 34px; } .popup-content .form-container { padding-top: 10px; height: calc(100vh - 330px); } .popup-content .form-container .privacy-use .cont { font-size: 14px; margin:10px 0; } .popup-content .form-container .privacy-use h3, .popup-content .form-container .privacy-use h4 { font-size: 20px; } .popup-content > p { font-size: 15px; } .video-popup .close-btn { top:-40px; right:0; } .store .popup-content .btn { padding:10px 30px; } .store .popup-content p { font-size: 18px; } .store .popup-content .btn-wr { margin-top: 12px; } .store-finder { width: 90%; } .store-search { font-size: 14px; padding:14px 20px; } .store-search select, .store-search input { height:40px; line-height: 40px; } .store-search .btn-sch { height:40px; } .store-search .btn-reset { margin-top: 10px; } .store-search .th { margin:10px 0 5px; } .store-list { font-size: 14px; padding:20px; } .store-list .store-info > ul { margin-top: 12px; } .store-list > ul > li { padding:20px; } .store-list .store-name { font-size: 18px; } .store-list .total { margin-bottom: 10px; } #tab1 .store-list { height: calc(100% - 270px); } .app .sub-tit { margin-bottom: 20px; } .app .tabs { margin-bottom: 20px; flex-wrap:wrap; } .app .tab { font-size: 14px; min-height: 50px; } :lang(ja) .app .tab{ letter-spacing: inherit;} .app-service { padding:20px; flex-direction: column; align-items: flex-start; gap:10px; margin-bottom: 20px; } .app-service .btn-wr .btn { font-size: 14px; padding:12px 16px; } .app-partnership { padding:20px; margin-bottom: 20px; } .app-partnership h3 { font-size: 18px; margin-bottom: 8px; margin-top: 16px; } .app-partnership p { font-size: 14px; } .form-container .required { font-size: 13px; margin-bottom: 10px; } .form-container .form-list { gap:16px; } .form-container .form-list > li { width: 100%; gap:10px; } .form-container .form-list > li.name .td + .th { margin-top: 6px; } .form-container .form-list > li .th { width: 100%; font-size: 16px; padding:0; } :lang(de) .form-container .form-list > li .th { font-size: 16px; } :lang(ja) .form-container .form-list > li .th { font-size: 16px; } .form-container .form-list > li .th br{display:none;} .form-container .form-list > li .td { width: 100%; font-size: 14px; } .form-container .form-list > li.channel .td { flex-wrap:wrap; gap:10px; } .form-container .form-list > li.channel .td select { width: 100%; } .form-container .form-list > li.channel .td input { width: 100%; } :lang(fr) .form-container .form-list > li.channel .td select, :lang(fr) .form-container .form-list > li.channel .td input { width: 100%; font-size: 13px; } .form-container .form-list select, .form-container .form-list textarea, .form-container .form-list input { font-size: 15px; } .form-container .form-list textarea { height: 200px; } .form-container .note{margin-top: 30px; margin-bottom: -15px;} .form-container .note p{font-size: 14px;} .form-container .note p + p{font-size: 13px; text-indent: -10px; padding-left: 10px;} .form-container .file-upload .file-select .file-select-button { padding:0 20px; height: 50px; line-height: 50px; } .form-container .file-upload .file-select .file-select-name { width: 100%; height:50px; line-height: 50px; } .form-container .file-upload > p strong { font-size: 13px; } .form-container .file-upload > p { font-size: 13px; } .form-container .privacy-use { margin-top: 30px; padding-top: 30px; } .form-container .privacy-use h3, .form-container .privacy-use h4 { font-size: 20px; } .form-container .privacy-use .cont { margin-top: 10px; padding:20px; font-size: 14px; margin-bottom: 10px; height: 200px; padding-bottom: 70px;} .form-container .privacy-use .more { height: 50px; width: calc(100% - 40px); left:20px; font-size: 14px; } :lang(de) .form-container .privacy-use .more, :lang(fr) .form-container .privacy-use .more{font-size: 11px;} .agreement { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; } .agreement .custom-checkbox { font-size: 16px; } .form-container .btn{font-size: 16px;} } @media screen and (max-width: 500px) { .social-cont .tb_hc_arrow_left__ { left: 5%; } .social-cont .tb_hc_arrow_right__ { right: 5%; } } /******************************************** product compare ********************************************/ body:has(.compare-container) .sub-visual, body:has(.compare-result-container) .sub-visual { display: none; } .sub-container:has(.compare), .sub-container:has(.compare-result-container) { background: #f1f1f1; } .range-slider-container.disabled { pointer-events: none; opacity: 0.4; } .range-slider { height: 6px; background: #B9B9B9; } .range-slider .range-slider__range { background: #151515; } .range-slider .range-slider__thumb { width: 16px; height: 16px; background: #151515; border: 2px solid #fff; box-shadow: 0 0 2px 0 rgba(156, 156, 156, 0.45); } .range-slider-scale { display: flex; margin-bottom: 6px; } .range-slider-scale .scale { flex: 1 1; word-break: normal;} .range-slider-scale .scale:last-child { flex: 0; } .range-slider-scale .scale span { line-height: 1; font-size: 15px; font-weight: 600; white-space: nowrap; } .range-slider-input { display: flex; align-items: stretch; align-items: center; margin-top: 24px; } .range-slider-input span { padding: 0 0.5em; font-size: 14px; } .range-slider-input .input { flex: 1 1 auto; width: 1%; height: 50px; text-align: center; font-size: 16px; color: #4B4B4B; font-weight: 600; background-color: #fff; border: 1px solid #DDDDDD; } .range-slider-input .input:disabled { user-select: none; } .compare-filter .range-slider-container.disabled { pointer-events: none; opacity: 0.4; } .compare-filter .range-slider { height: 6px; background: #B9B9B9; } .compare-filter .range-slider .range-slider__range { background: #151515; } .compare-filter .range-slider .range-slider__thumb { width: 16px; height: 16px; background: #151515; border: 2px solid #fff; box-shadow: 0 0 2px 0 rgba(156, 156, 156, 0.45); } .compare-filter .range-slider-scale { display: flex; margin-bottom: 6px; } .compare-filter .range-slider-scale .scale { flex: 1 1; } .compare-filter .range-slider-scale .scale:last-child { flex: 0; } .compare-filter .range-slider-scale .scale span { line-height: 1; font-size: 15px; font-weight: 600; white-space: nowrap; font-family:'Pretendard', Pretendard, "Noto Sans SC",'Noto Sans CJK', "Noto Sans KR", 'Pretendard', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} .compare-filter .range-slider-input { display: flex; align-items: stretch; align-items: center; margin-top: 24px; } .compare-filter .range-slider-input span { padding: 0 0.5em; font-size: 14px; } .compare-filter .range-slider-input .input { flex: 1 1 auto; width: 1%; height: 50px; text-align: center; font-size: 16px; color: #4B4B4B; font-weight: 600; background-color: #fff; border: 1px solid #DDDDDD; font-family:'Pretendard', Pretendard, "Noto Sans SC",'Noto Sans CJK', "Noto Sans KR", 'Pretendard', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;} .compare-filter .range-slider-input .input:disabled { user-select: none; } .input-group { display: flex; } .input-group > * { flex: 1 1; } .radio-block { position: relative; } .radio-block input { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); overflow: hidden; } .radio-block label { display: inline-flex; justify-content: center; padding: 0 1em; width: 100%; height: 50px; line-height: 50px; font-size: 16px; font-weight: 600; color: #151515; border: 1px solid #151515; border-radius: 5px; cursor: pointer; transition: all ease .15s; } .radio-block input:checked + label { color: #fff; background: #151515; } @media (hover: hover) and (pointer: fine) { .radio-block label:hover { color: #fff; background: #151515; } } .compare-container .inner { max-width:100%; width: 100%; padding:0 36px; } .compare-container .sub-tit { text-align: center; padding: 150px 0 100px; margin-bottom: 0; } .compare-container .sub-tit h1 { font-size: 72px; font-weight: 600; color: #151515; } .compare { display: flex; padding: 84px; border-radius: 24px; background: #fff; } .compare .side { position: relative; width: 380px; } .compare .side .sticky { position: sticky; top: 120px; left: 0; width: 100%; } .compare .contents { flex: 1 1; padding-left: 84px; } .compare .input-group { margin: 0 -8px; } .compare .input-group > * { margin: 0 8px; } .compare .heading { font-size: 20px; font-weight: 600; color: var(--clr-dark); } .compare .title { margin-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--clr-dark); } .compare .compare-filter { position: relative; } .compare .compare-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .compare .compare-filter-head .button-container { margin: 0 -0.865em; } .compare .compare-filter-head .button { display: inline-flex; align-items: center; height: 30px; line-height: 30px; font-size: 14px; font-weight: 500; } .compare .compare-filter-head .button .icon { margin-left: 4px; } .compare .compare-filter-head .button .icon::before { width: 16px; height: 16px; } .compare .compare-filter-body .row { margin-bottom: 40px; } .compare .compare-filter-foot { margin-top: 40px; } .compare .compare-filter-foot .button-container .button { width: 100%; } .compare .compare-filter-foot .button-container .close { position: absolute; top: 9px; right: 0; margin: 0; width: 50px; height: 50px; } .compare .compare-filter-foot .button-container .reset, .compare .compare-filter-foot .button-container .close { display: none; } .compare .prd-list .button-container { margin: 10px -6px 0; } .compare .prd-list .button-container .button { flex: 1 1; margin: 0 6px; font-size: 16px; font-weight: 500; white-space: nowrap; } .compare .prd-list .button-container .button .icon-plus { margin-left: 0; } .compare .prd-list .button-container .button.disabled { background: #ddd; color: #aaa; border-color: #aaa; cursor: default; } .compare .prd-list .button-container .button.disabled .icon-plus { display: none; } .compare .filter-button { display: none; z-index: 10; position: sticky; top: 70px; left: 0; margin-bottom: 30px; width: 100%; transition: all ease .35s; } .compare .filter-button .button { display: inline-flex; align-items: center; justify-content: center; height: 45px; line-height: 45px; width: 100%; color: #fff; background: #00287C; } .header.scroll-down ~ .sub-container .compare .filter-button { top: 20px; } .compare-preview { z-index: 10; display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); transition: transform ease .35s; } .compare-preview .heading { font-size: 24px; font-weight: 700; color: #151515; } .compare-preview-head { display: flex; align-items: center; justify-content: space-between; margin-right: auto; margin-left: auto; padding: 40px 0; max-width: 1680px; width: 90%; } .compare-preview-head .button-container { margin: 0 -3px; } .compare-preview-head .button-container .button { margin: 0 3px; width: 150px; font-size: 16px; } .compare-preview-body { margin-right: auto; margin-left: auto; padding-bottom: 32px; max-width: 1680px; width: 90%; } .compare-preview-body .list { display: flex; margin: -16px; } .compare-preview-body .list .item { padding: 16px; width: 25%; } .compare-preview-body .list .block { position: relative; padding: 30px; background: #F1F1F1; border: 1px solid #E0E0E0; border-radius: 12px; transition: all ease .35s; } .compare-preview-body .list .title { overflow: hidden; margin-bottom: 16px; padding-right: 36px; font-size: 20px; font-weight: 600; color: #151515; text-overflow: ellipsis; white-space: nowrap; transition: all ease .35s; } .compare-preview-body .list .thumbnail { overflow: hidden; position: relative; background: #fff; border-radius: 8px; } .compare-preview-body .list .thumbnail::before { content: ''; display: block; padding-top: calc(210 / 336 * 100%); width: 100%; height: 0; } .compare-preview-body .list .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .compare-preview-body .list .empty .message { overflow: hidden; position: relative; border-radius: 8px; border: 1px dashed #888888; } .compare-preview-body .list .empty .message::before { content: ''; display: block; padding-top: calc(210 / 336 * 100%); width: 100%; height: 0; } .compare-preview-body .list .empty .message .text { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1.4; text-align: center; color: #444444; } .compare-preview-body .list .delete { position: absolute; top: 34px; right: 28px; transition: all ease .35s; } .compare-preview-foot { overflow: hidden; position: absolute; bottom: 100%; left: 0; right: 0; margin-right: auto; margin-left: auto; margin-bottom: -0.1em; padding: 10px 10px 0; max-width: 1700px; width: 90%; pointer-events: none; } .compare-preview-foot .toggle { width: 70px; height: 30px; background: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15); pointer-events: all; } .compare-preview-foot .toggle::before { content: ''; display: block; width: 100%; height: 100%; background: url('/images/chevron-down.svg') no-repeat center / auto 100%; transition: transform ease .15s; } .compare-preview[data-compare-preview] { display: block; } .compare-preview[data-compare-preview="closed"] { transform: translateY(calc(100% - 130px)); } .compare-preview[data-compare-preview="closed"] .compare-preview-foot .toggle::before { transform: scaleY(-1); } .compare-row { display: flex; margin: -12px; } .compare-column { flex: 1 1; padding: 12px; } .compare-column-heading { flex: 0 1 auto; } .compare-column-heading .heading { width: 175px; font-size: 24px; font-weight: 700; color: #151515; } .compare-column-heading.mobile { display: none; margin-bottom: 14px; } .compare-result-container .inner { max-width: 100%; width: 100%; padding: 0 36px; } .compare-result-container .sub-tit { text-align: center; padding: 150px 0 100px; margin-bottom: 0; } .compare-result-container .sub-tit h1 { font-size: 72px; font-weight: 600; color: #151515; } .compare-result { padding: 84px; border-radius: 24px; background: #fff; } .compare-result-head { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 36px; } .compare-result-head .button-container { margin: 0 -6px; } .compare-result-head .button-container .button { margin: 0 6px; font-size: 16px; } .compare-result-head .button-container .button .icon::before { width: 20px; height: 20px; } .compare-result-body .block { display: block; position: relative; padding: 30px; background: #F1F1F1; border: 1px solid #E0E0E0; border-radius: 12px; transition: all ease .35s; } .compare-result-body .title { overflow: hidden; margin-bottom: 16px; padding-right: 36px; font-size: 20px; font-weight: 600; color: #151515; transition: color ease .35s; } .compare-result-body .thumbnail { overflow: hidden; position: relative; background: #fff; border-radius: 8px; aspect-ratio: 1.53 / 1;} .compare-result-body .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .compare-result-body .empty { cursor: default; } .compare-result-body .empty .message { overflow: hidden; position: relative; border-radius: 8px; border: 1px dashed #888888; aspect-ratio: 1.53 / 1;} .compare-result-body .empty .message .text { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 1.3; text-align: center; color: #444444; padding:0 5px; font-size: 15px; } .compare-result-body .link { position: absolute; top: 34px; right: 28px; transition: filter ease .35s; } .compare-result-body .table { margin-top: 50px; width: 100%; border-top: 2px solid #000000; } .compare-result-body .table .row { display: flex; } .compare-result-body .table .row:nth-child(even) { background: #F8F8F8; } .compare-result-body .table .th { padding: 30px; width: 214px; font-size: 20px; font-weight: 700; color: #151515; border-right: 1px solid #ddd; } .compare-result-body .table .td { flex: 1 1; padding: 30px; font-size: 18px; color: #444444; } .compare-result-scroll { position: relative; } .compare-result-scroll .accessibility-text { display: none; position: absolute; top: 0; left: -20px; width: calc(100% + 40px); height: 100%; background: rgba(0, 0, 0, .5); pointer-events: none; } .compare-result-scroll .accessibility-text p { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: -200px; width: 100%; height: 100%; text-align: center; font-size: 15px; color: #fff; } .compare-result-scroll .accessibility-text .icon::before { width: 60px; height: 60px; background: url('/images/icon-hand.png') no-repeat center / 40px; border-radius: 50%; } @media (hover: hover) and (pointer: fine) { .compare-result-body .block:not(.empty):hover { background: #00287C; } .compare-result-body .block:not(.empty):hover .title { color: #fff; } .compare-result-body .block:not(.empty):hover .link { filter: invert(1); } .compare-preview-body .item:not(.empty) .block:hover { background: #00287C; } .compare-preview-body .item:not(.empty) .block:not(.empty):hover .title { color: #fff; } .compare-preview-body .item:not(.empty) .block:not(.empty):hover .delete { filter: invert(1); } } @media screen and (min-width: 1481px) { .compare .prd-list { gap: 84px 32px; } } @media screen and (max-width: 1480px) { .radio-block label { height: 45px; line-height: 45px; font-size: 14px; } .compare-result-body .empty .message .text { font-size: 12px; } .compare { flex-direction: column; padding: 60px 5%; } .compare-container .sub-tit h1 { font-size: 48px; } .compare .input-group { margin: 0 -3px; } .compare .input-group > * { margin: 0 3px; } .compare .contents { padding-left: 0; width: 100%; } .compare .filter-button { display: block; } .compare .side { display: none; z-index: 10; position: fixed; top: 0; left: 0; padding: 80px 16px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .compare .side .sticky { position: static; width: 100%; height: 100%; } .compare .heading { font-size: 18px; } .compare .title { margin-bottom: 10px; font-size: 15px; } .compare .compare-filter { padding: 20px 16px; width: 100%; background: #fff; border-radius: 8px; } .compare .compare-filter-head .reset { display: none; } .compare .compare-filter-body .row { margin-bottom: 30px; } .compare .compare-filter-foot { margin-top: 30px; } .compare .compare-filter-foot .button-container { margin: 0 -3px; } .compare .compare-filter-foot .button-container .button { margin: 0 3px; height: 45px; line-height: 45px; font-size: 14px; } .compare .compare-filter-foot .button-container .reset { display: inline-flex; } .compare .compare-filter-foot .button-container .close { display: inline-flex; } .compare .compare-filter-foot .button-container .close .icon { margin: 0; } .compare .side[data-compare-filter="opened"] { display: block; } .range-slider-input .input { height: 45px; line-height: 45px; font-size: 14px; } .range-slider-scale .scale span { font-size: 14px; } .compare-preview .heading { font-size: 16px; } .compare-preview-head { padding: 20px 0; } .compare-preview-head .button-container .button { width: 120px; height: 45px; line-height: 45px; font-size: 14px; } .compare-preview-body { padding-bottom: 20px; } .compare-preview-body .list { margin: -6px; } .compare-preview-body .list .item { padding: 6px; } .compare-preview-body .list .block { padding: 16px; } .compare-preview-body .list .title { margin-bottom: 10px; font-size: 16px; } .compare-preview-body .list .delete { top: 16px; right: 14px; } .compare-preview-body .list .empty .message .text { font-size: 14px; } .compare-preview-foot .toggle { width: 60px; height: 24px; } .compare-preview[data-compare-preview="closed"] { transform: translateY(calc(100% - 85px)); } .compare-row { flex-wrap: wrap; margin: -6px; } .compare-column { padding: 6px; } .compare-column-heading { width: 100%; } .compare-column-heading .heading { width: auto; font-size: 20px; } .compare-result { padding: 60px 5%; } .compare-result-container .sub-tit h1 { font-size: 48px; } .compare-result-head { padding-bottom: 24px; } .compare-result-head .button-container { margin: 0 -3px; } .compare-result-head .button-container .button { margin: 0 3px; height: 45px; line-height: 45px; font-size: 14px; } .compare-result-head .button-container .button .icon::before { width: 16px; height: 16px; } .compare-result-head .button-container .button .icon:last-child { margin-left: 6px; } .compare-result-body .block { padding: 20px; } .compare-result-body .title { margin-bottom: 12px; font-size: 16px; } .compare-result-body .link { top: 20px; right: 24px; } .compare-result-body .table { margin-top: 30px; } .compare-result-body .table .row { flex-wrap: wrap; } .compare-result-body .table .th { padding: 16px 20px 6px; width: 100%; font-size: 16px; border-right: none; } .compare-result-body .table .td { padding: 0 20px 16px; font-size: 14px; } .compare-result-body .thumbnail::before { height: 110px; } .compare-result-body .empty .message::before { height: 110px; } } @media screen and (max-width: 820px) { .compare { padding: 30px 20px; } .compare-container .sub-tit h1 { font-size: 32px; } .compare-container .inner { padding: 0; width: 94%; } .compare-container .sub-tit { padding: 70px 0 30px; } .compare-result-container .sub-tit { padding: 70px 0 30px; } .compare-result-container .sub-tit h1 { font-size: 32px; } .compare .prd-list .button-container { flex-direction: column; margin: -3px 0; } .compare .prd-list .button-container .button { margin: 3px 0; height: 35px; line-height: 35px; font-size: 14px; } .range-slider-scale .scale span { font-size: 13px; } .button .icon:last-child{margin-left: 5px;} .compare-preview-head .button-container{gap:5px;} .compare-preview .heading { font-size: 14px; } .compare-preview-head { padding: 15px 0; } .compare-preview-head .button-container .button { width: 100px; height: 40px; line-height: 40px; } /* .compare-preview-body .list { overflow-y: auto; overflow-x: hidden; flex-direction: column; height: 230px; } */ .compare-preview-body .list { overflow-y: auto; overflow-x: hidden; flex-direction: column; height: 190px; } .compare-preview-body .list .block { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; border-radius: 6px; } .compare-preview-body .list .item { width: 100%; } .compare-preview-body .list .thumbnail { flex-shrink: 0; border-radius: 6px; } .compare-preview-body .list .thumbnail::before { padding-top: 0; width: 75px; height: 50px; } .compare-preview-body .list .title { flex: 1 1; margin-bottom: 0; padding-left: 14px; font-size: 14px; } .compare-preview-body .list .delete { top: 32px; right: 20px; } .compare-preview-body .list .empty { display: none; } .compare-preview[data-compare-preview="closed"] { transform: translateY(calc(100% - 70px)); } .compare-table { overflow-x: auto; overflow-y: hidden; position: relative; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } .compare-table .compare-column-heading { display: none; } .compare-row { min-width: 240%; } .compare-column-heading .heading { font-size: 18px; } .compare-column-heading.mobile { display: block; } .compare-result { padding: 30px 20px; } .compare-result-container .inner { padding: 0; width: 94%; } .compare-result-body .link { top: 10px; right: 12px; } .compare-result-body .block { padding: 12px; } .compare-result-body .title { margin-bottom: 8px; font-size: 14px; } .compare-result-body .table .th { padding: 12px 16px 6px; } .compare-result-body .table .td { padding: 0 16px 12px; } .compare-result-scroll .accessibility-text { display: block; } .compare-result-scroll.scrolled .accessibility-text { display: none; } } @media screen and (max-width: 500px) { .compare-result-head .button-container { flex: 1 1; flex-wrap: wrap; margin: -3px; } .compare-result-head .button-container .button { flex: 1 1 auto; margin: 3px; } .compare-result-head .button-container .button-primary { width: 100%; } } @media print { @page { size: A4 landscape; margin: 0.5cm; orphans: 4; widows: 2 } .header, .footer, .floater, .sub-visual, .compare-result-head, .compare-result-body .link { display: none; } body { font-size: 8pt; } .compare-result-container .sub-tit { padding-top: 0; } .compare-result-container .sub-tit h1 { font-size: 24pt; } .compare-row { margin: -6px; } .compare-column { padding: 6px; } .compare-column-heading .heading { font-size: 14pt; } .compare-result-body .block { padding: 16px; } .compare-result-body .thumbnail::before { height: 120px; } .compare-result-body .empty .message::before { height: 120px; } .compare-result-body .title { margin-bottom: 10px; font-size: 12pt; } .compare-result-body .table .th { padding: 16px; font-size: 10pt; } .compare-result-body .table .td { padding: 16px; font-size: 10pt; } } /* ------- Modal ------- */ .modal-container { display: none; z-index: 11; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .modal-container .modal-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 5px; width: auto; height: 100%; min-height: calc(100% - 10px); max-height: calc(100% - 10px); } .modal-container .modal { overflow: hidden; display: flex; flex-direction: column; justify-content: center; position: relative; max-width: 800px; min-width: 470px; height: 100%; } .modal-container .head-title { margin-bottom: 16px; font-size: 18px; font-weight: 600; color: #151515; } .modal-container .modal-body { position: relative; overflow-x: hidden; overflow-y: auto; padding: 32px; min-height: 200px; background: #fff; border-radius: 20px; } .modal-container .modal .close { display: flex; align-items: center; justify-content: center; position: absolute; top: 34px; right: 32px; width: 22px; height: 22px; } .modal-container .share-list { display: flex; justify-content: center; margin: 28px -20px 30px; } .modal-container .share-list .item { padding: 20px; } .modal-container .share-list .item a{cursor:pointer;} .modal-container .share-list p { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 500; color: #444444; } @media screen and (max-width: 1024px) { } @media screen and (max-width: 820px) { .modal-container .modal { min-width: auto; width: 100%; } .modal-container .head-title { font-size: 16px; } .modal-container .share-list { margin: 20px -12px; } .modal-container .share-list p { margin-top: 10px; font-size: 13px; } .modal-container .share-list .item { padding: 12px; } .modal-container .share-list .item img { width: 48px; height: auto; } }