@charset "UTF-8"; /* ## layout */ .full-screen{display: block;width: 100%;height: 100vh;overflow: hidden;} .scrollbar-track-y{opacity: 0 !important;} /* #scrollWrap{width: 100%; height: 100%; background-color: #000;} #scrollWrap #wrapper{width: 100%;height: auto;overflow: hidden;background: #FFFFFF;} #scrollWrap #wrapper .cont-wrap {min-width: 1400px; } */ #wrapper{width: 100%; height: auto; position: relative;} /* box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.05); */ #header{display: block; clear: both; width: 100%; position: fixed; top: 0; z-index: 10; transition: background-color 0.3s 0.15s ease; height: max(3.75rem, var(--header-height)); background-color: rgba(0, 0, 0, 0.8);} #contents{position: relative; margin-top: max(3.125rem, var(--header-height));} #footer{position:relative; bottom: 0; width: 100%; color: #666; padding: 0; clear:both; z-index: 5; background-color: #0d0d0d;} .detail-page #header{position: relative;} .hide-header #header{position: relative;} .hide-header #contents{margin-top: 0;} /* .st-up .mega-menu{top: 0; display: none !important;} */ /* .detail-page #contents{margin-top: 0;} */ .detail-page.st-up .mega-menu{top: 0; display: none !important;} /* Tessol Web container — main.css와 동일 (Figma 1440 기준 컨텐츠 1320) */ .container{ margin: 0 auto; padding: 0 var(--container-gutter-x, 16px); max-width: var(--container-max, 100%); position: relative; width: 100%; } @media (min-width: 576px) { :root { --container-max: 540px; } } @media (min-width: 768px) { :root { --container-max: 720px; --container-gutter-x: 24px; } } @media (min-width: 992px) { :root { --container-max: 960px; } } @media (min-width: 1200px) { :root { --container-max: 1140px; } } @media (min-width: 1400px) { :root { --container-max: 1320px; --container-gutter-x: 0px; } } .container-sm{margin:0 auto;padding:0 0.9375rem;max-width:1220px; position:relative; width: 100%;} .container-full{margin:0 auto;padding:0 0.625rem; position:relative; width: 100%;} .container-wide{margin:0 auto; padding: 0 0.625rem; max-width: 1640px; position:relative; width: 100%;} .section-container{max-width: 1000px; padding: 0; margin: 0 auto;} #sp-wrapper{width: 100%; margin: 0 auto;} #sp-header{padding: 20px 0; background-color: #151515;} #sp-header .container{display: flex; justify-content: space-between; align-items: center;} #sp-header .btn{color: #fff; border: 1px solid #fff; border-radius: 20px; padding: 9px 23px 7px;} .sp-bg{background-color: #f5f7fa;} #sp-footer{padding: 10px; color: #777; margin-top: 30px; text-align: center; font-size: 13px;} #sp-header .btn-history-back{display: none;} #sp-wrapper.page-mypage #contents{max-width: 660px; margin: 0 auto;} #sp-wrapper.page-mypage #sp-content{max-width: 660px; margin: 0 auto;} /* #sp-wrapper.page-mypage #sp-footer{position: relative;} #sp-wrapper.page-mypage .btn-back{display: none;} #sp-wrapper.page-mypage .btn-history-back{display: block;} #sp-wrapper.page-mypage #sp-header{padding: 40px 0 0 0 } #sp-wrapper.page-mypage .subwrap-top{padding-top: 30px;} #sp-wrapper.page-mypage .subwrap-top .container{overflow: visible;} #sp-wrapper.page-mypage .subwrap-top .subwrap-title{font-size: 40px; color: #1a1a1a; line-height: 1em; font-weight: 500; text-align: center; display: block;} */ /********** * ## header **********/ .header-tnb{background-color: #f5f5f5; text-align: right; padding: 0.5rem 0; font-size: 14px;} .header-tnb a{margin-left: 0.625rem;} .header-tnb a strong{font-weight: 600; display: inline-block; margin-right: 3px;} #header > .container{height: 100%;} #header .header-wrap{display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative;} #header .logo{display: inline-block; z-index: 10; position: absolute;} #header .logo h1{font-size: 0;} .logo a{display: inline-block; width: 202px; height: 23px; background: url('../images/logo-tsl-w.svg') no-repeat 0 0; /* background-size: cover; */ } .tnb{display: flex; align-items: center;} .tnb li{position: relative; } .tnb li:last-child{margin-left: 0.625rem;} .header-util{display: flex; align-items: center; z-index: 10; position: absolute; right: 0;} .header-util .m-user{display: none;} .header-util .m-user a{color: #e3e3e3; border: 1px solid #e3e3e3; display: inline-block; min-width: 4.375rem; height: 1.875rem; line-height: 1.875rem; text-align: center; border-radius: 20px; padding: 0 0.625rem;} .header-util .item{margin-left: 1.6875rem; position: relative;} .header-util .item.first{margin-left: 0;} .header-util .item .inner{display: flex; flex-direction: column; align-items: center; justify-content: center;} .header-util .item .inner p{font-size: 12px; margin-top: 0; color: #fff; line-height: 1; margin-top: 2px;} .header-util .item .user-proc{display: none; position: absolute; top: 40px; left: -70px; z-index: 10; width: 180px; background: #fff; font-size: 14px; box-shadow: 0px 1px 9px 1px rgba(0, 0, 0, 0.1); border: 1px solid #ececec;} .header-util .item .user-proc .user{padding: 1.25rem;} .header-util .item .user-proc .user .btn{min-width: 60px; padding: 5.5px 5px; border-radius: 4px; border: solid 1px #e3e3e3; font-size: 12px; margin-left: 8px;} .header-util .item ul{display: flex; align-items: center; border-top: 1px solid #ececec;} .header-util .item ul li{flex: 1; background-color: #fafafb;} .header-util .item ul li + li{border-left: 1px solid #ececec;} .header-util .item ul li a{display: block; text-align: center; padding: 0.875rem 0; font-size: 12px; font-weight: 600; line-height: 1;} .header-util .item.on .user-proc{display: block;} .mobile-search{position: fixed; top: -200px; left: 0; width: 100%; display: none; -webkit-transition: all 0.2s; transition: all 0.2s; z-index: 20; opacity: 0; animation: aniDown 0.3s; -moz-animation: aniDown 0.3s; -webkit-animation: aniDown 0.3s; -o-animation: aniDown 0.3s; height: 100vh; background-color: rgba(0, 0, 0, .2);} .mobile-search.active{display: block; top: 0; opacity: 1;} .mobile-search-wrap{background-color: #fff; height: 52.468vh; padding-top: 10vw;} .mobile-search-wrap .btn-close{position: absolute; top: -8vw; right: 0; display: inline-block; color: #fff; width: 30px; height: 30px; background: url('../images/icons/ico-cancel-g.png') no-repeat center; text-decoration: none; -webkit-transition: all 0.25s; transition: all 0.25s; z-index: 2; background-size: 20px;} .search-input-wrap{max-width: 60rem; margin: 0 auto; position: relative; } .search-input-wrap .input-container{position: relative; display: block; margin-bottom: 0;} .search-input-wrap input{background: #fff; border: 0; height: 40px; max-width: 140px; line-height: 40px; width: 100%; padding-left: 0.625rem; font-size: 12px; color: #a0a0a0;} .search-input-wrap .btn-search{width: 40px; height: 40px; background: url('../images/icons/search-g.svg') no-repeat center; background-size: 16px auto; position: absolute; top: 0; right: 0;} .search-input-wrap .info{background-color: #f5f5f5; margin-top: 3.75rem;} .search-input-wrap .info p{color: #666; text-align: center; padding: 2.8125rem 0;} .util{position: fixed; right: 1.3vw; width: 100%; bottom: 7%; z-index: 200; width: auto;} .util .list{position: absolute; right: 0; top: 0; transform: translateX(0); transition: transform .5s ease-in-out;} .util .list li{display: flex; text-align: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .util .list li img{width: 100%;} .util .list li a.btn-recent{width: 59px; margin-bottom: 0.9375rem;} .util .list li a.social{background-color: transparent; max-width: 56px; margin-bottom: 0.9375rem;} .util .list li a.cart{max-width: 56px; margin-bottom: 0.9375rem;} .util .list a{display: flex; align-items: center; justify-content: center; position: relative;} .cart-count{position:absolute;top:-7px;right:-14px;display:block; width: 20px; height:20px;line-height:20px;border-radius:20px;background:#ede6d5;font-size:12px; padding:0 5px; text-align: center; font-weight: 600;} .util .list > li .dropdown{ position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; } .util .list > li .dropdown.active{ opacity: 1; visibility: visible; height: 106px; top: -106px;} .util .list > li .dropdown li{position: absolute; bottom: 0; transform: scale(1);} /* .subpage .util{bottom: 52.5%;} */ .util-help {position: fixed; right: 1.3vw; bottom: 40px; width: 56px; height: 56px; background: #FEE500; border-radius: 50%; box-shadow: 10px 15px 30px rgba(5, 144, 95, 0.13); text-align: center; vertical-align: middle; z-index: 998; display: flex; align-items: center; justify-content: center;} .util-help img{max-width: 20px;} /********** * ## ASIDE **********/ aside.slp-menu {display: none; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; } aside.slp-menu .aside-dimm{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; opacity: 0; z-index: 100; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; will-change: opacity; background-color: rgba(0, 0, 0, 0.1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } aside.slp-menu .slp-wrap {position: fixed; top: 0; bottom: 0; max-width: 348px; width: 100%; z-index: 200; -webkit-transform: translateX(103%); transform: translateX(103%); background-color: #fff; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; will-change: transform; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .rp-history-wrap {position: relative; height: 100%; background-color: #fff; } .rp-history-top {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 50px; padding: 0 16px; border-bottom: 1px solid #f0f0f0; } .rp-history-title {overflow: hidden; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 17px;} .rp-history-title .count {margin: 1px 0 0 4px; font-weight: bold; color: #ff5452;} .rp-history-control {display: -webkit-box; display: -ms-flexbox; display: flex ; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .rp-history-control .rp-delete{width: 57px; height: 24px; padding-top: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #cfcfcf; border-radius: 4px; font-size: 11px; line-height: 14px; color: #444;} .rp-history-control .rp-close{width: 24px; height: 24px; } .rp-history-control .rp-close .icon{width: 24px; height: 24px;} .ico-close::after {content: ""; background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.3623 18.7882L18.7871 4.36332L19.6357 5.21184L5.21082 19.6367L4.3623 18.7882Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3cpath d='M4.3623 5.21156L5.21082 4.36304L19.6357 18.7879L18.7871 19.6364L4.3623 5.21156Z' fill='rgb%280%2C0%2C0%29'%3e%3c/path%3e %3c/svg%3e"); background-position: center; background-repeat: no-repeat; background-size: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; height: 100%;} .rp-history-cont {height: 100%; } .rp-history-scroll {overflow-y: auto; width: 100%; height: calc(100% - 50px); -ms-scroll-chaining: none; overscroll-behavior: contain; } .rp-history-list {padding-top: 3px; } .rp-history-list > li {position: relative; padding: 8px 16px; background-color: #fff; } .rp-history-list > li:first-child {padding-top: 13px; } .rp-history-list .item .item-link{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rp-history-list .item .image {-ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 70px; height: 70px; border-radius: 6px; overflow: hidden;} .rp-history-list .item .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;} .rp-history-list .item .image::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.03); content: "";} .rp-history-list .item .cont {padding: 0 0 0 12px;} .rp-history-list .item .title {display: -webkit-box; overflow: hidden; max-height: 34px; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .rp-history-list .item .title .category {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px; line-height: 14px; color: #222;} .rp-history-list .item .title .title-name {color: #777; font-weight: 400; font-size: 11px; line-height: 14px;} .rp-history-list .item .price-wrap {padding-top: 3px; font-size: 12px; line-height: 14px; letter-spacing: -0.3px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } .rp-history-list .item .price-wrap .price-type {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;} .rp-history-list .item .price-wrap .price-type + .price-type{margin-right: 6px;} .rp-history-list .item .price-wrap del {text-decoration: line-through; } .rp-history-list .item .price-wrap .price {display: -webkit-box; display: -ms-flexbox; display: flex; color: #222; } .rp-history-list .item .price-wrap .price em {font-size: 12px; font-weight: bold;} .rp-history-list .item .price-wrap .price span{font-size: 11px;} .rp-unit-delete {position: absolute; top: 9px; right: 12px; width: 26px; height: 26px; z-index: 10; } .rp-unit-delete .ico-close {width: 16px; height: 16px; border-radius: 50%; background-color: #222;} .rp-unit-delete .ico-close::after{width: 16px; height: 16px; background: center / 100% no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23222222'/%3E%3Cpath d='M11.4003 5.39961L10.6003 4.59961L8.00034 7.29961L5.40034 4.59961L4.60034 5.39961L7.30034 7.99961L4.60034 10.5996L5.40034 11.3996L8.00034 8.69961L10.6003 11.3996L11.4003 10.5996L8.70034 7.99961L11.4003 5.39961Z' fill='white'/%3E%3C/svg%3E");} .rp-history-cont .loading {position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; height: 30px; background: url('../images/ajax-loader.gif') center no-repeat; background-size: 20px; display: none;} .rp-history-cont .empty-post{position: absolute; top: 50%; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; font-size: 12px; line-height: 16px; text-align: center; color: #969696; background-color: #fff; display: none;} aside.slp-menu.open .aside-dimm{position: fixed; pointer-events: auto; -webkit-animation-name: aniFadeIn; animation-name: aniFadeIn; } aside.slp-menu.slide-right .slp-wrap {right: 0; left: auto; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);} aside.slp-menu.open .slp-wrap {-webkit-transform: translateX(0); transform: translateX(0); } aside.slp-menu.open{display: block;} /********** * ## gnb **********/ #gnb{text-align: center; transition: all .3s ease-in-out; width: 100%; max-width: 800px; margin: 0 auto;} #gnb .topmenu{justify-content: center; align-items: center; height: 100%; display: flex;} #gnb .topmenu > li{position: relative; height: 100%; align-items: center; flex: 1;} #gnb .topmenu > li > a{display: block; position: relative; width: 100%; padding: 2rem 0; font-size: clamp(1rem, var(--font-16), 1rem); white-space: nowrap; height: 100%; color: #fff; transition: font-weight ease .2s; } #gnb .topmenu > li > a:hover, #gnb .topmenu > li.active > a, #gnb .topmenu > li.hover > a{font-weight: 700;} #gnb .topmenu > li.hover .mega-menu {display: block; opacity: 1; pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s; display: flex; flex-direction: column;} #gnb .topmenu > li.hover .line{animation: aniLine 0.5s; opacity: 1; height: 100%;} #gnb .topmenu > li.hover .dropdown-menu{pointer-events: visible; animation: aniUpMega 0.5s; opacity: 1;} #gnb .topmenu > li.dropdown.hover .dropdown-menu{animation: aniUp 0.5s; opacity: 1;} #gnb .topmenu > li.hover .featured-list{animation: aniUp 0.5s; opacity: 1;} .mega-menu.open {display: block; opacity: 1; pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s} .mega-menu.open .dropdown-menu{opacity: 1;} #gnb .topmenu > li.dropdown.hover .brand-list{animation: aniUp 0.5s; opacity: 1;} /* #gnb .topmenu > li.mega.hover .mega-menu{} */ .dropdown-menu{position: relative; white-space: nowrap; text-align: left; pointer-events: none; display: flex; height: 100%; opacity: 0; color: #28282a; flex-direction: column; width: 18.75%; padding-top: 3.125rem;} /* .dropdown-menu.active{display: block; opacity:1; transition: all 0.4s 0.4s;} */ .dropdown-menu .menu-title{font-weight: 600; margin-bottom: 1.25rem; display: block;} .dropdown-menu > li{text-align: left; line-height: 1.2;} .dropdown-menu > li + li{margin-top: 2.5rem;} .dropdown-menu > li > a{position: relative; font-size: clamp(1rem, var(--font-16), 1rem); display: inline-block; font-weight: 600; transition: color .2s ease-in-out;} .dropdown-menu > li > a:hover{color: #8f1d22;} .dropdown-menu > li > a.active{color: #8f1d22;} #gnb .dropdown-menu > li > a.active span::before{width: 100%;} .dropdown-menu > li > a.font-xs{font-size: 0.75rem;} .dropdown-menu > li span{position: relative;} .dropdown-menu > li .depth2{position: absolute; opacity: 0; top: 0; left: 280px; display: none; margin-left: 3.125rem; margin-top: 3.125rem; transition: all .3s ease; z-index: 3;} .dropdown-menu > li .depth2.active{opacity: 1; display: block; animation: aniLeftToRight .3s; left: 300px;} .dropdown-menu > li .depth2 li a{display: inline-block; line-height: 1; transition: font-weight ease .2s;} .dropdown-menu > li .depth2 li a:hover{font-weight: 600;} .dropdown-menu > li .depth2 li + li{margin-top: 2.5rem;} #gnb ul.dropdown-menu > li > a span::before{content: ''; position: absolute; display: block; bottom: 0; left: 0; width: 0; background-color: #8f1d22; height: 1px; transition: width 0.3s ease; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease;} #gnb ul.dropdown-menu > li > a:hover span::before{width: 100%;} .mega-menu{width: 100%; display: none; position: fixed; left: 0; right: inherit; opacity: 0; top: max(3.75rem, var(--header-height)); z-index: 5; height: 500px;} .mega-menu .container{height: 100%;} .mega-menu .in{display: flex; height: 100%;} .mega-menu .line{background-color: #e3e3e3; height: 0; width: 1px; opacity: 0; } .menu-image{position: relative; opacity: 0; visibility: hidden; width: calc(100% - 18.75%); text-align: left; transition: all ease 0.3s;} .menu-image .in-cont{position: relative; padding-top: 3.125rem; padding-left: 6.25rem; height: 100%;} .menu-image img{/* max-width: 100%; position: absolute; object-fit: cover; width: 100%; height: 100%; top: 3.125rem; left: 0; */ max-width: 100%; transition: all ease 0.3s;} #gnb .topmenu > li.hover .menu-image{zoom: 1; visibility: visible; animation: aniPf 1s; opacity: 1;} /* .menu-image.right{text-align: right;} */ .mega-menu.collection .menu-image.right img{width: 45%; right: 0; left: auto; } .mega-menu.collection .menu-image img{position: absolute; height: 400px; width: 100%; max-width: 1200px;} .brand-list{display: grid; grid-template-columns: 1fr 1fr 1fr; row-gap: 30px; column-gap: 80px; padding: 3.125rem 0;} .brand-list li{position: relative;} .brand-list li a{display: block;} .brand-list li a span{position: absolute; color: #fff; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 1; font-size: 1.125rem;} .brand-list .image{position: relative; overflow: hidden;} .brand-list .image img{transition: all ease .3s;} .brand-list .image::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.13); transition: all 0.3s ease; opacity: 1;} .brand-list .image:hover img{transform: scale(1.1);} .brand-list .image:hover span{font-weight: 600;} .brand-list .image:hover::before{opacity: 0;} .featured-list{background-color: #fafafb; border-top: 1px solid #e3e3e3; opacity: 0; transition: opacity;} .featured-list .menu-title{padding: 1.4375rem 1.875rem; font-weight: 600;} .featured-list ul{display: flex;} .featured-list ul li{position: relative; padding: 1.4375rem 1.875rem;} .featured-list ul li a{display: inline-block; color: var(--theme-color);} .featured-list ul li a span{display: inline-block; position: relative;} .featured-list ul li a:hover{color: #8f1d22;} .featured-list ul li::before{position: absolute; left: 0; height: 12px; top: 50%; margin-top: -6px; width: 1px; background-color: #a0a0a0; content: '';} .featured-list ul li a span::before{content: ''; position: absolute; display: block; bottom: 0; left: 0; width: 0; background-color: #8f1d22; height: 1px; transition: width 0.3s ease; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -ms-transition: width 0.3s ease; -o-transition: width 0.3s ease;} .featured-list ul li a:hover span::before{width: 100%;} .mega-menu.collection{height: calc(500px + 70px ) ;} .bg-gnb{position:absolute; left:0; top:0; background-color: rgba(255, 255, 255, 1); opacity: 0; width:100%; height:0; overflow: hidden; z-index: -1; transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);} .bg-gnb:before{display:block; content:""; width:100%; height: max(3.75rem, var(--header-height)); background-color:rgba(255,255,255, 1); position:absolute; left:0; top: 0; border-bottom: 1px solid #e3e3e3;} .bg-gnb.active{height: calc(500px + var(--header-height)); opacity: 1; } .bg-gnb.active.mega{height: calc(500px + var(--header-height) + 70px);} #header.open{background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.05);} #gnb.active{max-width: 860px;} #header.open #gnb .topmenu > li > a{color: #0d0d0d;} #header.open .ico-cart-w{background-image: url('../images/icons/cart-b-v3.svg');} #header.open .ico-user-w{background-image: url('../images/icons/avatar-b-v2.svg');} #header.open .header-util .search-input-wrap input{background-color: #f2f2f2;} #header.open .header-util .item .inner p{color: #0d0d0d;} #header.open .logo a{background-image: url('../images/logo-tsl-b.svg');} #header.test{background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.05);} #header.test #gnb .topmenu > li > a{color: #0d0d0d;} #header.test .ico-cart-w{background-image: url('../images/icons/cart-b-v3.svg');} #header.test .ico-user-w{background-image: url('../images/icons/avatar-b-v2.svg');} #header.test .header-util .search-input-wrap input{background-color: #f2f2f2;} #header.test .header-util .item .inner p{color: #0d0d0d;} #header.test .logo a{background-image: url('../images/logo-tsl-b.svg');} #header.test #gnb .topmenu > li .dropdown-menu{pointer-events: visible; animation: aniUpMega 0.5s; opacity: 1;} #header.test #gnb .topmenu > li.active .mega-menu{display: block; opacity: 1;} #header.test #gnb .topmenu > li.active .menu-image{display: block; opacity: 1; visibility: visible;} #header.test #gnb .topmenu > li.dropdown .dropdown-menu{animation: aniUp 0.5s; opacity: 1;} #header.test #gnb .topmenu > li.active .mega-menu {opacity: 1; pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s; display: flex; flex-direction: column;} #header.test #gnb .topmenu > li.active .line{animation: aniLine 0.5s; opacity: 1; height: 100%;} #header.test .bg-gnb{height: calc(500px + var(--header-height)); opacity: 1;} #header.test .bg-gnb{height: calc(500px + var(--header-height) + 70px);} #header.test .mega-menu .container{height: auto;} /********** * ## dlpo **********/ /* .dlpo-wrap.hide{display: none;} .dlpo-wrap {-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out} .dlpo-wrap { position:relative;top:0; overflow: hidden; z-index: 20;} .dlpo-wrap .banner-item{display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; margin: 0 auto; padding: 0; align-items: center; justify-content: center; background-color: #eceae5;} .dlpo-wrap .banner-item a{position: relative; z-index: 1; text-align: center; color: #000; font-weight: 600; padding: 0.78125rem 0; display: flex; align-items: center;} .dlpo-wrap .banner-item a .icon{margin-right: 10px;} .dlpo-wrap .dlpo-close{position: absolute; top: 50%; transform: translate(0, -50%); right: 40px; width: 20px; height: 20px; text-indent: -9999px; cursor: pointer; z-index: 1;} .dlpo-wrap .dlpo-close:before, .dlpo-wrap .dlpo-close:after{width: 25px; height: 1px; top: 50%; margin-top: -1px; left: -2px; content: ""; background: #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); position: absolute;} .dlpo-wrap .dlpo-close:after {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);} .dlpo-wrap.close { height:0} .dlpo-footer{display: none;} */ .dlpo-wrap{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999; } .dlpo-wrap::before{background: rgba(0, 0, 0, 0.3); content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .dlpo-wrap .banner-item{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; width: 90%; padding: 3.75rem 0; flex-direction: column; text-align: center; padding-bottom: 0; max-width: 360px;} .dlpo-wrap .banner-item .ico-reminder{background-image: url('../images/icons/m-alert.png'); width: 60px; height: 60px; margin-right: 0; margin-bottom: 1.5rem;} .dlpo-wrap .banner-item .title{color: #000; flex-direction: column; font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 15px;} .dlpo-wrap .banner-item a{background-color: #333; color: #fff; display: block; margin-top: 15px; text-align: center; padding: 0.59375rem 1.25rem; border-radius: 1.25rem; display: inline-block;} .dlpo-footer{display: flex; justify-content: space-between; padding: 1.875rem 1.25rem; background-color: #f9f9f9; width: 100%; margin-top: 3.75rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} .dlpo-wrap .dlpo-footer .dlpo-close:before, .dlpo-wrap .dlpo-footer .dlpo-close:after{transform: rotate(0);} .dlpo-wrap .dlpo-footer .check-box.icon label{color: #cbcbcb;} .dlpo-wrap .check-box.icon input:checked + label{color: #0a0a0a;} .dlpo-wrap .dlpo-footer .dlpo-direct{color: #666;} /********** * ## FOOTER **********/ .widget-wrap{display: flex; justify-content: space-between; padding-top: 6.25rem; color: #eceae5;} .show-room{margin-bottom: 1.875rem;} .show-room .title{font-size: clamp(1rem, var(--font-20), 1.25rem); font-weight: 600; margin-bottom: 1.5625rem; line-height: 1;} .show-room dl{display: flex; align-items: center;} .show-room dl + dl{margin-top: 7px;} .show-room dt{width: 18%; flex-shrink: 0;} .show-room dd{width: 80%; flex-grow: 1;} .footer-widget.info{width: 35%;} .footer-widget.info p + p{margin-top: 10px;} .footer-social{display: flex; align-items: center; margin-top: 17px;} .footer-social a{display: inline-block; line-height: 1; } .footer-social a .icon{transition: opacity .3s ease;} .footer-social a .icon:hover{opacity: 0.7;} .footer-social a + a{margin-left: 1.125rem;} .footer-social a:last-child{margin-top: -2px;} .footer-social a:last-child img{opacity: 0.9;} .ico-youtube{background-image: url('../images/common/youtube-y.svg'); width: 30px; height: 22px;} .ico-instagram{background-image: url('../images/common/instagram-y.svg'); width: 22px; height: 22px;} /* .ico-youtube:hover{background-image: url('../images/common/youtube-b.svg');} .ico-instagram:hover{background-image: url('../images/common/instagram-b.svg');} */ .ico-instagram-b{background-image: url('../images/common/instagram-b.svg'); width: 48px; height: 48px;} .footer-widget.category{display: flex; } .footer-widget.category ul{margin-left: max(1.875rem, var(--vw-80));} .footer-widget.category ul:first-child{margin-left: 0;} .footer-widget.category ul .title{font-weight: 600; line-height: 1; margin-bottom: 1.875rem;} .footer-widget.category ul li a{font-size: 12px; line-height: 1.4;} .footer-widget.category ul li + li{margin-top: 5px;} .footer-company-wrap{margin-top: 2.125rem; color: #a0a0a0; padding-bottom: 6.25rem; font-size: 12px;} .footer-company-wrap p{line-height: 1.8;} .footer-company-wrap p + p{margin-top: 0.75rem;} .copyright {margin-top: 10px;} .logo-wrap{display: flex; align-items: center;} .logo-wrap a{display: inline-block; background: url('../images/logo-tessol-w.png') no-repeat center/cover; width: 104px; height: 20px;} .logo-wrap a + a{margin-left: 3.75rem; background-image: url('../images/logo-tsl-w.svg'); width: 180px; height: 20px;} .footer-info{background-color: #28282a; padding: 1.4375rem 0;} .footer-info .inner{display: flex; justify-content: space-between;} .footer-links{display: flex; align-items: center;} .footer-links li a{display: inline-block; color: #a0a0a0; margin-right: max(1.875rem, var(--vw-60)); font-size: 12px;} .footer-links li:last-child a{color: #e3e3e3; margin-right: 0;} .fixed-util{display: none;} /********** * ## common **********/ .form-group .form-content{position: relative; display: flex;} .form-group .form-content .location-input{display: flex; flex: 1;} .form-group .form-content .location-input .select-box{width: 57%; } .form-group .form-content .location-input .select-box.sub{margin-left: 3%; width: 40%;} .form-group .form-content .name-container{margin-right: 20px; width: 40%;} .form-group .form-content .phone-container{width: 60%;} .form-group.form-inline .radio-box{display: inline-flex;} .form-group.form-inline .radio-box + .radio-box{margin-left: 2.5rem;} .phone-container .select-box{flex: 0 0 31%;} .phone-container .dx-input{flex: 0 0 31%; margin-left: 3.5%;} /* ## single page wrap */ .btn-back{background: url('../images/icons/btn_back_s2.png') no-repeat center left; display: inline-block;} .btn-back span{margin-left: 30px; display: inline-block;} .page-mypage .btn-history-back{background: url('../images/icons/btn_back_s2.png') no-repeat center left; display: inline-block;} .page-mypage .btn-history-back span{margin-left: 30px; display: inline-block;} .animation-arrow a:hover .icon-btn .arrow { transition: 0.5s; left: 0;} .animation-arrow a:hover .icon-btn .arrow + .arrow {transition: 0.5s; left: 200%;} .icon-arrow-wrap{width: 1.25rem; height: 1.25rem; background-color: transparent; text-align: center; margin-left: 0.625rem; position: relative;} .icon-btn{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} .icon-btn .arrow{width: 1.25rem; height: 1.25rem; position: absolute; left: -200%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} .icon-btn .arrow + .arrow{left: 0;} /* .icon-more{text-align: center; border-radius: 50%; margin-left: 10px; position: relative;} .icon-btn{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} .icon-btn .arrow{position: absolute; left: -100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} .icon-btn .arrow + .arrow{left: 0;} .ani-icon:hover .icon-btn .arrow { transition: 0.5s; left: 0;} .ani-icon:hover .icon-btn .arrow + .arrow {transition: 0.5s; left: 100%;} */ [data-animate] {opacity: 0; transition: all 0.8s ease-out; } [data-animate="bottom"] {transform: translate3d(0, 30px, 0); } /********** * ## PANEL **********/ .panel{width: 100%; max-width: 45rem; margin: max(3.75rem, var(--header-height)) auto; padding: max(3.75rem, var(--header-height)) 0;} .panel-header{padding: 0 0 1.25rem; background-color: #fff;} .panel-header.border{margin-bottom: 1.25rem; border-bottom: 1px solid #111;} .panel-header h2{font-size: clamp(1.5rem, var(--font-36), 2.25rem); font-weight: 600; line-height: 1.2;} .panel-header .desc{font-size: clamp(1rem, var(--font-24), 1.5rem); color: #666; font-weight: 400; margin-top: max(0.9375rem, var(--vw-40));} .panel-body{position: relative; margin: 0 auto;} .panel-body .desc{margin-bottom: 15px; line-height: 1.5;} .panel-link{margin-top: 0.625rem; display: flex; align-items: center; justify-content: space-between; color: #666;} .panel-link .links a{position: relative; padding-left: 10px; margin-left: 5px;} .panel-link .links a::before{content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 15px; background-color: #626262; margin-right: 5px; } .panel-link .links a:first-child::before{display: none;} .panel-footer{position: relative; text-align: center; border-top: 1px solid #cbcbcb; background-color: #fff; padding: 2.5rem 0 0; margin-top: 2.5rem;} .panel .tabs.line{justify-content: space-between; margin: 0.75rem 0 2.5rem;} .panel .tabs.line li{flex: 1; text-align: center; margin: 0; } .panel .tabs.line li a{display: block; border-bottom: 5px solid #f5f5f5; font-size: clamp(1rem, var(--font-20), 1.25rem); text-align: center; padding: 0.9375rem 0; } .panel .tabs.line li a:hover{color: #0a0a0a;} .panel .tabs.line li a.active{border-bottom-color: var(--theme-color); color: #0a0a0a;} /********** * ## LOGIN **********/ .login-box{margin-bottom: 1.25rem;} .login-box + .login-box{padding-bottom: 0.625rem;} .panel-login .form-group{margin-bottom: 1.25rem;} .login-box .input{height: max(3.125rem, var(--vw-60)); line-height: max(3.125rem, var(--vw-60));} .panel-login .links{background-color: #f5f5f5; text-align: center; height: max(3.75rem, var(--vw-100)); display: flex; align-items: center; justify-content: space-evenly; margin-top: 2.5rem;} .panel-login .links a{display: inline-block;} .sns-login{text-align: center; margin-top: 2.5rem; border-top: 1px solid #cbcbcb; padding-top: 2.5rem;} .sns-login h4{font-size: clamp(1rem, var(--font-20), 1.25rem);} .sns-login .form-group{display: inline-flex; margin-top: 1.875rem; margin-bottom: 0;} .sns-login .form-group + .form-group{margin-left: 4.0625rem;} .login-button{margin-top: 1.25rem;} .login-row .login-label{font-size: 14px; color: #111;} .social-login{position: relative; display: inline-flex; align-items: center;} .social-login img{max-width: 30px; max-height: 30px; margin-right: 10px;} .social-login p{margin-bottom: 0.625rem;} .sl-btns a{width: 100%; display: block; border: 1px solid #ddd; padding: 9px 10px 10px 10px; margin-bottom: 10px; position: relative;} .sl-btns a img{position: absolute; left: 10px; top: 11px;} .sl-btns a .text{line-height: 1em; margin-left: 28px;} .login-register{background-color: #f4f4f4; padding: 15px 0; text-align: center;} .login-register p{margin-bottom: 10px;} .login-register a{text-decoration: underline;} .autologinalert{font-size: 12px; margin-top: 0.625rem;} .guest-wrap{margin-top: 1.25rem;} .guest-wrap h4{font-size: 0.53125rem;} .guest-privacy{border: 1px solid #cdcdcd; text-align: left; line-height: 1.6em; color: #666; background: #fafafa; padding: 10px; height: 150px; margin: 10px 0; overflow-y: auto; font-size: 0.40625rem;} .guest-wrap .btn{margin-top: 0.625rem;} .guest-wrap .checkbox-custom label{font-size: 0.40625rem; letter-spacing: -1px;} .guest-order-desc{background: #f5f5f5; padding: 1.25rem; margin-top: 1.25rem; text-align: center} .logrin-row .label{font-size: 1rem; font-weight: 500; color: #000; line-height: 1; margin-bottom: 0.625rem; display: block;} /* ## PASSWORD / FINDACCOUNT */ .target-row{display: none;} .findaccount .form-table .phone-input{width: 50%;} .result-message{padding: 0.625rem 0; text-align: center;} .panel.findaccount .form-group{margin-bottom: 1.25rem;} .panel.findaccount .login-box{padding-bottom: 0;} /********** * ## REGISTER **********/ /* #sp-wrapper.register{max-width: 640px;} */ .tabs.dark{justify-content: center;} .tabs.dark li{flex: 1; max-width: 350px;} .tabs.dark li a{display: block; background-color: #f5f5f5; font-size: clamp(1rem, var(--font-20), 1.25rem); text-align: center; padding: 1.25rem 0; line-height: 1;} .tabs.dark li a.active{background-color: var(--theme-color); color: #fff;} .register-section{} .register-section + .register-section{margin-top: 5rem;} .register-section .contact-top{margin-bottom: 2.5rem;} .register-section .bs-number-input{width: auto;} .register-section .contact-top .contact-title{font-size: clamp(1.125rem, var(--font-24), 1.5rem);} .register-section .contact-form{max-width: 76.25rem;} .register-section .contact-form.table-layout .form-group .label{width: 20%;} .register-section .contact-form .input{max-width: 37.5rem;} .register-section .email-input{max-width: 43.75rem;} .check-agrea{margin-bottom: 0.625rem;} .check-agrea label{font-weight: 600; color: #000;} .check-agrea label .req{color: #ff8133; font-size: 12px;} .check-agrea label .req.sel{color: #888; } .agree-box{color: #626262;} .agree-box .check-title{font-weight: 600; margin-bottom: 0.625rem; margin-top: 1.875rem; color: #0a0a0a;} .agree-box .error-place .error + .error{display: block; margin-left: 0; margin-top: 0;} .agree-box .check-container strong{margin-right: 5px;} .agree-box .info-box{border: 1px solid #cbcbcb; margin-top: 0.625rem; color: #0a0a0a; padding: 0.9375rem; margin-bottom: 0; background-color: #f5f5f5;} .check-container{display: flex; justify-content: space-between; border: 1px solid #ddd; padding: 1.25rem;} .check-container + .check-container{border-top: 0; } .check-container .check-box.icon label::before{top: 2px} .check-container .check-box.icon label::after{top: 2px;} .check-container .check-box.icon input[type="checkbox"]:checked + label::after {top: 2px} .check-container strong{color: #065ab9; display: inline-block;} .check-container .text{font-size: 14px; color: #666; margin-left: 10px;} .check-container .more a{color: #000; font-size: 14px; text-decoration: underline;} .ready-login{margin-top: 2.5rem; text-align: center;} .ready-login span{color: #888; display: inline-block;} .ready-login a{display: inline-block; text-decoration: underline; color: #333; font-weight: 500; margin-left: 0.9375rem;} .help-box{background-color: #f5f5f5; margin-top: 1.25rem; padding: 1.25rem; display: block;} .help-box .warning{color: #ff5b4d; background-color: transparent;} .page-register .btn-wrap{margin-top: 6.25rem;} .btn-group{display: inline-flex; justify-content: center; max-width: 46.25rem; width: 100%;} .btn-group .btn-lg + .btn-lg{margin-left: max(1.25rem, var(--vw-40));} .btn-group .btn{padding: 0; flex: 1; height: 2.5rem; line-height: 2.5rem;} .btn.btn-lg{padding: 0; height: max(3.125rem, var(--vw-70)); line-height: max(3.125rem, var(--vw-70)); font-size: clamp(1rem, var(--font-20), 1.25rem);} .result-place{font-size: 12px; display: inline-block; margin-left: 0.625rem;} .result-place .success{color: #1473e6; background-color: transparent;} .result-place .fail{color: #ff8133;} .cert-container{display: none; margin-top: 10px;} .d-inline-flex{display: inline-flex;} .d-inline-flex .check-box + .check-box{margin-left: 2.5rem;} .d-inline-flex .radio-box + .radio-box{margin-left: 10px;} .pass-modify .form-group{margin-bottom: 0.625rem;} .pass-modify .form-btn{margin-top: 1.25rem;} /********** * ## RESULT **********/ .result-wrap{position: relative; max-width: 50rem; margin: 10rem auto 6.25rem; text-align: center;} .result-wrap h3{font-size: clamp(1.125rem, var(--font-24), 1.5rem); font-weight: 500; margin: 2.5rem 0 0.9375rem; line-height: 1.4;} .result-wrap .message{font-size: clamp(1rem, var(--font-20), 1.25rem); } .result-icon{margin: 0 auto 2.5rem; text-align: center;} .result-wrap .btn-wrap{margin-top: 3.75rem;} .result-wrap .info-box{background-color: #f9f9f9; text-align: center; display: block; margin: 2.5rem auto 0; max-width: 37.5rem;} .result-wrap .info-box p{font-size: clamp(1rem, var(--font-20), 1.25rem); color: #666;} .result-wrap .info-box p + p{margin-top: 0.625rem;} .status-wrap{text-align: center;} .status-wrap h3{font-size: clamp(1.125rem, var(--font-24), 1.5rem); font-weight: 500; margin: 2.5rem 0 0.9375rem; line-height: 1.4;} .status-wrap .message{font-size: clamp(1rem, var(--font-20), 1.25rem); } .cancel-calc-wrap{position: relative; margin-top: 1.25rem;} .cancel-calc-wrap ul{display: flex; align-items: center; justify-content: space-evenly;} .cancel-calc-wrap ul li{text-align: center;} .cancel-calc-wrap ul li .label{display: block; font-size: 1rem; text-align: center; color: #777;} .cancel-calc-wrap ul li.unit{width: 5%;} .cancel-calc-wrap .total-price{margin-top: 1.25rem; text-align: center; font-weight: 600; font-size: clamp(1rem, var(--font-20), 1.25rem);} /********** * ## MAIN **********/ #main{position: relative; } #main .section{padding: max(2.5rem, var(--vw-120)) 0; z-index: 1;} .section{position: relative;} .full-screen {display: block; width: 100%; height: 100vh; overflow: hidden; } .btn-more-wrap a{padding: 0.90625rem 2.5rem; background-color: #0d0d0d; color: #fff;} .btn-more-wrap a > .icon{margin-left: 2.5rem;} .btn-more-wrap a.border{background-color: transparent; border: 1px solid #0d0d0d; color: #0d0d0d; padding: 0.84375rem 2.65625rem;} .btn-more-wrap .icon-arrow-wrap{width: 21px; height: 13px;} .btn-more-wrap .icon-btn .arrow{width: auto; height: auto;} .section-main-visual{position: relative; overflow: hidden; height: 100vh; z-index: 1;} .section-main-visual .screen-swiper{height: 100%;} .section-main-visual .swiper-slide{ overflow: hidden; position: relative;} /* .section-main-visual .screen-image::before{content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #000; opacity: 0.4;} */ .section-main-visual .screen-image {display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden;} .section-main-visual .screen-image.hide-mobile-xs{display: block;} .section-main-visual .screen-image.show-mobile-xs{display: none;} .section-main-visual .screen-content{position: relative; z-index: 10; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%;} .section-main-visual .screen-content.white{color: #eceae5;} .section-main-visual .screen-content .inner{position: relative;} .section-main-visual .screen-content .inner > div{font-size: clamp(1.5rem, var(--font-64), 4rem); line-height: 1;} .section-main-visual .screen-content .inner > p{font-size: clamp(1.125rem, var(--font-42), 2.625rem); line-height: 1; margin-top: 1.375rem;} .section-main-visual .screen-content a{display: inline-block; border: 1px solid #0d0d0d; padding: 0.84375rem 2.5rem; line-height: 1; margin-top: 3.375rem;} .section-main-visual .screen-content.white a{border-color: #fff;} .section-main-visual .screen-media{height: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .section-main-visual .screen-media video{display: block; width: 100%; height: 100%; object-fit: cover;} .section-main-visual .screen-media img{width: 100%; height: 100%; object-fit: cover;} .section-main-visual .vbg-video{z-index: 10 !important; position:absolute;left:0;top:0;width:100%;height:100%} .section-main-visual .ytplayer-player {position: absolute; z-index: 10 !important;} .section-main-visual .slide-youtube .screen-media.loaded .screen-image{opacity: 0;} .section-main-visual .ytp-pause-overlay{display: none !important;} .section-main-visual .swiper-pagination{bottom: 1.625rem; left: 0; width: 100%; } .section-main-visual .swiper-pagination .swiper-pagination-bullet-active{opacity: 1;} .scroll-down{position: relative; bottom: 6.875rem; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2} .scroll-down .btn-scroll{width: 140px; height: 30px; border-radius: 15px; position: relative; margin-bottom: 5px;} .scroll-down .btn-scroll::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; background-color: #fff; border-radius: 15px;} .scroll-down .btn-scroll button{width: 140px; height: 30px; line-height: 30px; color: #fff; border-radius: 15px; position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); z-index: 999;} .scroll-down span{width: 5px; height: 5px; background-color: #d0d0d0; border-radius: 5px; display: inline-block; margin-top: 10px;} .btn-arrow-wrap{position: absolute; width: 100%; top: 50%; margin-top: -25px; ;} .btn-arrow-wrap button{background-position: center; background-size: cover; width: 50px; height: 50px; position: absolute; z-index: 1;} .btn-arrow-wrap .screen-prev{background-image: url('../images/icons/ico_slide_lt_dft.png'); left: -100px;} .btn-arrow-wrap .screen-next{background-image: url('../images/icons/ico_slide_rt_dft.png'); right: -100px;} .btn-arrow-wrap .screen-prev:hover{background-image: url('../images/icons/ico_slide_lt_act.png');} .btn-arrow-wrap .screen-next:hover{background-image: url('../images/icons/ico_slide_rt_act.png');} .section-header{position: relative;} .section-header-title{font-size: clamp(1.75rem, var(--font-36), 2.25rem); font-weight: 600; } .section-header-desc{font-size: 1rem; margin-top: 0.9375rem;} .section-header.line{display: flex; align-items: center; margin-bottom: 3.4375rem;} .section-header.line .line{background-color: #0d0d0d; width: 0; height: 2px; margin: 0 1.875rem; transition: width .5s ease;} .section-header.line .section-header-desc{line-height: 1; margin: 0;} .section-header.line.active .line{width: 160px;} .swiper-arrows{position: absolute; top: 50%; z-index: 1; width: 100%;} .swiper-arrows button{width: 50px; height: 50px; background-size: cover; display: inline-block; background-repeat: no-repeat; position: absolute;} .swiper-arrows .btn-swiper-prev{left: -4.375rem; margin-top: -25px; background-image: url('../images/icons/arw-c-l-g.svg'); transition: background .2s ease;} .swiper-arrows .btn-swiper-next{right: -4.375rem; margin-top: -25px; background-image: url('../images/icons/arw-c-r-g.svg'); transition: background .2s ease;} .swiper-arrows .btn-swiper-prev:hover{background-image: url('../images/icons/arw-c-l-b.svg'); } .swiper-arrows .btn-swiper-prev.swiper-button-disabled:hover{background-image: url('../images/icons/arw-c-l-g.svg'); } .swiper-arrows .btn-swiper-next:hover{background-image: url('../images/icons/arw-c-r-b.svg'); } .swiper-arrows .btn-swiper-next.swiper-button-disabled:hover{background-image: url('../images/icons/arw-c-r-g.svg'); } .swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background-color: #fff; opacity: 0.3; border-radius: 0.75rem;} .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;} .gallery-swiper .swiper-arrows .btn-swiper-prev{left: 1.875rem;} .gallery-swiper .swiper-arrows .btn-swiper-next{right: 1.875rem;} .gallery-swiper .swiper-arrows .btn-swiper-prev:hover{background-image: url('../images/icons/arw-c-l-w.svg'); } .gallery-swiper .swiper-arrows .btn-swiper-next:hover{background-image: url('../images/icons/arw-c-r-w.svg'); } .gallery-swiper .swiper-pagination{bottom: max(0.625rem, var(--vw-60));} .gallery-swiper .swiper-arrows .btn-swiper-prev.swiper-button-disabled:hover{background-image: url('../images/icons/arw-c-l-g.svg'); } .gallery-swiper .swiper-arrows .btn-swiper-next.swiper-button-disabled:hover{background-image: url('../images/icons/arw-c-r-g.svg'); } .sns-grid-wrap .swiper-arrows .btn-swiper-prev:hover{background-image: url('../images/icons/arw-c-l-w.svg'); } .sns-grid-wrap .swiper-arrows .btn-swiper-next:hover{background-image: url('../images/icons/arw-c-r-w.svg'); } .pop-gallery-swiper .swiper-arrows .btn-swiper-prev{left: 1.875rem; background-image: url('../images/icons/arw-l-w.svg'); width: 20px; height: 37px;} .pop-gallery-swiper .swiper-arrows .btn-swiper-next{right: 1.875rem; background-image: url('../images/icons/arw-r-w.svg'); width: 20px; height: 37px; } .pop-gallery-swiper .swiper-arrows .btn-swiper-prev:hover{background-image: url('../images/icons/arw-l-w.svg'); } .pop-gallery-swiper .swiper-arrows .btn-swiper-next:hover{background-image: url('../images/icons/arw-r-w.svg'); } .pop-gallery-swiper .swiper-arrows .btn-swiper-prev.swiper-button-disabled{opacity: 0.5;} .pop-gallery-swiper .swiper-arrows .btn-swiper-next.swiper-button-disabled{opacity: 0.5; } #main #section-02{padding: 0;} #section-02 .section-wrap{display: flex;} #section-02 .section-wrap .section-header{background-color: #eceae5; padding: 7.5rem 0 0; width: 25%; flex-shrink: 0;} #section-02 .section-wrap .section-header .section-header-title{line-height: 1.28;} #section-02 .section-wrap .section-header .btn-more-wrap{margin-top: 3.75rem;} #section-02 .section-wrap .cont{padding: 7.5rem 0 7.5rem 3.75rem; background-color: #fff; z-index: 10;} #section-02 .section-wrap .cont .text{margin-bottom: max(2.5rem, var(--vw-60)); font-size: clamp(1rem, var(--font-20), 1.25rem); font-weight: 600;} .bg-section-02{background-color: #eceae5; position: absolute; left: 0; top: 0; height: 100%; width: 50%;} .grid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:20px; /* row-gap: 10px; column-gap: 20px; */} .grid.gap25{gap:25px} .grid.gap40{gap:40px} .grid.row40{row-gap: 40px;} .grid .item{position: relative;} .grid .item .title{font-weight: 600; font-size: clamp(1rem, var(--font-20), 1.25rem);} .grid .item .image img{width: 100%;} .grid .item .desc{margin-top: 0.625rem;} .grid-brand{grid-template-columns: 1fr 1fr 1fr; row-gap:90px; column-gap: 50px;} .grid-brand .item .title{font-size: clamp(1.125rem, var(--font-24), 1.5rem); line-height: 1;} .grid-brand .item .cont{padding: 1.875rem; background-color: #fafafb;} .grid-brand .item .desc{font-size: clamp(1rem, var(--font-20), 1.25rem); margin: 1.375rem 0 1.875rem; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .grid-collection{row-gap:40px; column-gap: 20px;} .grid-collection a{position: relative;} .grid-collection .cont{text-align: center; font-weight: 600; margin-top: 0.625rem;} .grid-collection .grid-badge{position: relative; left: 0; right: 0; bottom: 0; top: 0;} .grid-collection .badge{border-radius: 0; padding: 0.59375rem 1.875rem; color: #fff; font-size: 1rem; background-color: rgba(0, 0, 0, 0.5);} .grid-collection .image{position: relative;} .grid-collection .image img{object-fit: cover;} .grid-collection .image .studio{position: relative;} .grid-collection .image .studio::after{content: ''; position: absolute; top: 0; left: 0; border: 1px solid #eee; width: calc(100% - 2px); height: calc(100% - 2px); } .grid-collection .image .hover{opacity: 0; transition: opacity .3s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .grid-collection .image:hover .hover{opacity: 1; background-color: #eee;} .grid-box{grid-template-columns: 1fr 1fr 1fr;} .grid-box .item{padding: 1.875rem; background-color: #f2f2f2; height: max(9.375rem, 10.417vw); max-height: 200px;} .grid-box.bg-white .item{background-color: #fff;} .grid-resource .item{background-color: #fff; border: 1px solid #ececec;} .grid-resource .item a{display: block; padding: 3.75rem 1.875rem 1.875rem; transition: all .3s ease;} .grid-resource .item a::after{content: ''; opacity: 0; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #28282a; transition: all .3s ease;} .grid-resource .item .title{font-weight: 600; font-size: clamp(1rem, var(--font-24), 1.5rem);} .grid-resource .item .desc{margin-top: 0.625rem; color: #a0a0a0; letter-spacing: -0.4px;} .grid-resource .item:hover{border-color: #28282a; } .grid-resource .item:hover a::after{opacity: 1;} #main #section-04{position: relative;} .grid.grid-inspiration{row-gap: 3.75rem; column-gap: 2.5rem; grid-template-columns: 1fr 1fr 1fr;} .grid-inspiration .image{position: relative; overflow: hidden; border-radius: 10px;} .grid-inspiration .image img{ transform: scale(1.1); transition: opacity 1s .2s ease, transform .3s ease;} .grid-inspiration a:hover img{ transform: scale(1);} .grid-inspiration .badge{border-radius: 15px;} .grid-inspiration .cont{margin-top: 0.625rem;} .grid-inspiration .cont .desc{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .inspiration-swiper{display: none} #main #section-05{overflow: hidden; width: 100%; position: relative; padding: 0;} .brand-wrap .brand-card {position: absolute; left: 0; top: 0; width: 50%; height: 100vh; } .brand-wrap .container-header{position: absolute; left: 100%; top: 0; max-width: 85.416vw; width: 100vw; -webkit-transform: translateX(-50%) rotate(0.001deg); -ms-transform: translateX(-50%) rotate(0.001deg); transform: translateX(-50%) rotate(0.001deg); height: 30%; z-index: 2; padding: 0 10px;} .brand-wrap .brand-card.fixed {position: fixed; left: 0; bottom: 0; } .brand-wrap .brand-card.fixed .card {opacity: 0; visibility: hidden;/* transition: opacity 1s .5s ease-in; */} .brand-wrap .brand-card.fixed .card.active {opacity: 1; visibility: visible; } .brand-wrap .brand-card.fired {position: absolute; left: 0; bottom: 0; height: auto; } .brand-wrap .brand-card.fired .card:last-child {opacity: 1; visibility: visible; } .brand-wrap .brand-card .card {position: absolute; left: 0; bottom: 0; width: 100%; height: 100vh; -webkit-transition: .3s; transition: .3s; } .brand-wrap .brand-card .card.first {z-index: 1;} .brand-wrap .brand-card .cont {position: relative; width: 100%; height: 100%;} .brand-wrap .brand-card .cont .container {position: absolute; left: 100%; top: 0; max-width: 85.416vw; width: 100vw; -webkit-transform: translateX(-50%) rotate(0.001deg); -ms-transform: translateX(-50%) rotate(0.001deg); transform: translateX(-50%) rotate(0.001deg); display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .brand-wrap .brand-card .cont .container .inner {width: 100%; width: 38.021vw; position: relative;} /* top: 5.625rem; */ .brand-wrap .brand-card .cont .brand-logo {margin-bottom: 1.875rem;} .brand-wrap .brand-card .cont .brand-logo img{max-width: 100%; width: auto;} .brand-wrap .brand-card .cont .line {width: 40px; height: 2px; background-color: #0a0a0a; margin-bottom: 1.875rem;} .brand-wrap .brand-card .cont .line.white {background-color: #e3e3e3;} .brand-wrap .brand-card .cont h4 {font-weight: 700; font-size: clamp(1.5rem, var(--font-36), 2.25rem); line-height: 1em; display: inline-block; color: #28282a;} .brand-wrap .brand-card .cont .line {width: 60px; height: 1px; background-color: #0d0d0d; } .brand-wrap .brand-card .cont .desc {font-size: clamp(1.125rem, var(--font-20), 1.25rem); display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-height: 1.6; margin: 1.875rem 0 max(1.875rem, var(--vw-60));} .brand-wrap .brand-card .cont .desc em{} .brand-wrap .brand-card .cont .btn {} .brand-wrap .brand-card .cont.deco-flame {background-color: #ede6d5; } .brand-wrap .brand-card .cont.deco-flame .brand-logo img{max-width: 144px;} .brand-wrap .brand-card .cont.focus {background-color: #28282a; } .brand-wrap .brand-card .cont.focus .brand-logo img{max-width: 194.5px;} .brand-wrap .brand-card .cont.focus h4{color: #ede6d5;} .brand-wrap .brand-card .cont.focus .desc{color: #ede6d5; } .brand-wrap .brand-card .cont.focus .btn-more-wrap a{color: #ede6d5; border-color: #ede6d5;} .brand-wrap .brand-card .cont.ecosmart-fire {background-color: #f39020; } .brand-wrap .brand-card .cont.ecosmart-fire .brand-logo img{max-width: 176px;} .brand-wrap .brand-card .cont.ecosmart-fire .desc{color: #28282a; } /* .brand-wrap .brand-card .cont.ecosmart-fire .btn-more-wrap a{color: #ede6d5; border-color: #ede6d5;} */ .brand-wrap .brand-card .cont.vauni {background-color: #e3e9ec; } .brand-wrap .brand-card .cont.vauni .brand-logo img{max-width: 178.5px;} .brand-wrap .brand-card .cont.vauni .desc{color: #28282a;} .brand-wrap .brand-card .cont.la-castellamonte {background-color: #55453c; } .brand-wrap .brand-card .cont.la-castellamonte .brand-logo img{max-width: 140px;} .brand-wrap .brand-card .cont.la-castellamonte h4{color: #ede6d5;} .brand-wrap .brand-card .cont.la-castellamonte .desc{color: #ede6d5;} .brand-wrap .brand-card .cont.la-castellamonte .btn-more-wrap a{color: #ede6d5; border-color: #ede6d5;} .brand-wrap .brand-view .vis {width: 50%; height: 100vh; margin-left: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; } .brand-wrap .brand-mobile {display: none; } #main #section-06{background-color: #fff;} .best-swiper{position: relative;} .best-swiper .item .image{margin-bottom: 0.9375rem; position: relative;} .best-swiper .item .image img{width: 100%; height: 100%; max-height: 288px; object-fit: cover;} .best-swiper .item .image::before{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ececec;} .best-swiper .item .title{font-size: clamp(0.875rem, var(--font-20), 1.25rem); font-weight: 600; margin-bottom: 0.375rem;} .best-swiper .swiper-arrows{margin-top: -42px;} .tab-list{margin-bottom: max(1.875rem, var(--vw-60)); justify-content: center; display: flex;} .tab-list li{position: relative; width: auto !important;} .tab-list li a{background-color: #fafafb; display: inline-block; padding: 1.4375rem 1.875rem; color: #a0a0a0; font-size: clamp(1rem, var(--font-20), 1.25rem); position: relative; line-height: 1; } .tab-list li a::after{content: ''; position: absolute; right: 0; top: 30%; background-color: #e3e3e3; height: 41.5%; width: 2px;} .tab-list li:last-child a::after{display: none;} .tab-list li a.active{color: #0d0d0d; font-weight: 600;} .btn-category{display: none;} /* #section-6 .tab-content{tran} */ #main #section-07{position: relative;} .hashtag{display: inline-block; background-color: #eceae5; border-radius: 14px; line-height: 1; padding: 0.4375rem 1.25rem;} .grid-sns .image{border-radius: 10px; overflow: hidden; background-color: #9dd6bd;} .grid-sns img{border-radius: 10px;} .grid-sns a:hover .cont{opacity: 1;} .grid-sns .cont{opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(237, 230, 213, .7); border-radius: 10px; transition: opacity .2s ease-in-out; z-index: 1; display: flex; align-items: center; justify-content: center;} #main #section-08{background-color: #0d0d0d;} #main #section-08 .section-header .section-header-title{color: #eceae5; font-size: clamp(1rem, var(--font-28), 1.75rem); font-weight: 400; margin-bottom: 1.5625rem;} #section-08 .image-wrap{position: relative; display: flex; justify-content: space-between; margin-top: max(2.5rem, var(--vw-100));} #section-08 .image-wrap .txt{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) perspective(150px) translateZ(-100px); transition: all 1s 0.5s ease; opacity: 0;} #section-08 .image-wrap .m1{position: relative; transform: translateX(-100px); transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);} #section-08 .image-wrap .m2{position: relative; margin-top: max(3.125rem, var(--vw-100)); transform: translateX(100px); transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);} #section-08 .image-wrap.active .m1{transform: translateX(0);} #section-08 .image-wrap.active .m2{transform: translateX(0);} #section-08 .image-wrap.active .txt{transform: translate(-50%, -50%) perspective(150px) translateZ(0); opacity: 1;} #section-08 dl{max-width: 1200px; color: #a0a0a0;} #section-08 dl + dl{border-top: 1px solid #28282a; margin-top: 2.25rem; padding-top: 2rem;} #section-08 dl dt{font-size: clamp(1.75rem, var(--font-36), 2.25rem); margin-bottom: 1.0625rem; line-height: 1.4;} #section-08 dl dd{font-size: clamp(1rem, var(--font-20), 1.25rem); font-weight: 100;} #section-08 dl + dl dt{font-weight: 500; text-transform: uppercase;} #section-08 dl + dl dd{font-weight: 300;} section.bg-section-dark{background-color: #28282a;} section.bg-section-dark .section-header-title{color: #eceae5;} section.bg-section-dark .section-header .line{background-color: #eceae5;} section.bg-section{margin-bottom: 0; background-color: #f9f9f9; } section.bg-section-f5{margin-bottom: 0; background-color: #f5f5f5; } section.bg-section-f8{background-color: #f8fdf9; } section.bg-section-ef{background-color: #effaed; } section.bg-section-ec{background-color: #eceae5; } section.bg-section-fa{background-color: #fafafb; } /********** * ## SUB **********/ .sub{position: relative;} .sub section.section-product{margin-bottom: 0;} .section-page{position: relative; padding: max(3.75rem, var(--vw-120)) 0;} .section-page.first{padding-top: 6.25rem;} .section-page.last{border-top: 1px solid #ccc; padding-bottom: max(7.5rem, var(--vw-200));} .section-title{font-size: clamp(1.75rem, var(--font-36), 2.25rem); line-height: 1.28; font-weight: 600;} .section-title em{font-size: clamp(1rem, var(--font-20), 1.25rem); line-height: 1; margin-left: 0.625rem;} .section-desc{position: relative; font-size: clamp(1rem, var(--font-18), 1.125rem); color: #727273;} .bg-desc{background-color: #f0f0f0; padding: 1.25rem 0.625rem; margin-bottom: 1.25rem;} .section-image{margin-top: 60px;} .section-title-wrap{text-align: center;} .page-title{font-size: 0.75rem; color: #232323; font-weight: 600; line-height: 1;} .section-content{position: relative;} .sub .section-header{margin-bottom: 3.4375rem;} .section-header .section-desc{margin-top: 0.25rem;} .section-header h4{font-size: clamp(2rem, var(--font-40), 2.5rem);} .basic-section.section-page{padding-top: max(1.875rem, var(--vw-60));} .basic-section .section-header .section-desc{font-size: clamp(1.125rem, var(--font-24), 1.5rem); margin-top: 0; color: #0a0a0a;} .sub-tab-wrap + .basic-section.section-page{padding-top: 0;} /********** * #### SUB TOP **********/ .sub-top-visual {position: relative; width: 100%; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; } .sub-top-visual .container{height: max(15rem, var(--vw-270)); max-height: 270px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;} .sub-top-visual .visual-header {display: flex; align-items: center; justify-content: flex-start; } .sub-top-visual .visual-header h2{font-size: clamp(1.75rem, var(--font-36), 2.25rem) ; position: relative; line-height: 1.2; display: inline-block; font-weight: 600;} .sub-top-visual .visual-header span{margin-left: 1.875rem;} .sub-top-visual .visual-header .breadcrumb{margin-bottom: 0; margin-top: 0.6875rem;} .sub-top-visual .visual-header.center{justify-content: center;} .sub-top-visual .visual-header.dark h2{color: #fff;} .sub-top-visual .visual-header.dark span{color: #fff;} .sub-top-wrap{display: flex; flex-direction: column; height: 480px; } .sub-top-content{display: flex; flex-direction: column; margin-top: 2.1875rem; justify-content: center; height: 100%; position: relative;} .sub-top-visual.support{background-color: #f2f2f2;} .sub .visual-section{padding-bottom: 0;} .sub .visual-section .section-title{font-weight: 400;} .sub .visual-section .section-header{margin-bottom: 0;} .sub .visual-section .section-desc{color: #0d0d0d; font-size: clamp(1rem, var(--font-20), 1.25rem); margin-top: 1.625rem;} /********** * #### SUB TAB **********/ .sub-tab-wrap{margin: max(1.875rem, var(--vw-60)) 0;} .sub-tab.white{background-color: #f0f0f0;} .sub-tab.sticky{position: fixed; top: 0; width: 100%; z-index: 10; } .sub-tab {position: relative;} .sub-tab ul {display:inline-flex; width:100%; justify-content: center; margin: 0 auto;} .sub-tab ul li { margin-left: -1px; background-color: #fafafb; text-align: center;} .sub-tab ul li a {display: inline-block; text-align: center; letter-spacing: 0; font-size: clamp(1rem, var(--font-20), 1.25rem) ; color: #a0a0a0; padding: 1.21875rem 1.875rem; line-height: 1.3; position: relative;} .sub-tab ul li a::before{content: ''; height: 44%; top: 28%; width: 1px; background-color: #e3e3e3; position: absolute; left: 0} .sub-tab ul li:first-child a::before{display: none;} .sub-tab ul li a:hover{color: #888;} .sub-tab ul li a.active{font-weight: 600; color: #0d0d0d;} .sub-tab ul li a.active:hover{color:#555} /********** * #### SUB TOP NAV **********/ .sub-tab-nav-warp{position:relative; margin-top: 30px;} .sub-tab-nav-warp .btn-lnb{display: none;} .fixed-nav .sub-tab-nav-warp{position:fixed; width: 100%; top: 0; z-index: 2; background-color: #f7f7f7;} .fixed-nav .sub-tab-nav{margin-bottom: 0;} .fixed-nav #header{display: none;} .sub-tab-nav {font-size:0;clear: both;/* display: none; */ margin: 0 auto 1.875rem; text-align: center; display: flex;} .sub-tab-nav li { display:inline-block; position: relative; flex: 1; border-bottom: 2px solid #ddd;} .sub-tab-nav li:last-child {margin-right:0} .sub-tab-nav li a {display:block;padding: 17px 0 16px;font-size:18px; color: #666;-webkit-transition: color 0.3s;transition: color 0.3s; line-height: 1;} .sub-tab-nav li.active a, .sub-tab-nav li a:hover{ color: #111; font-weight: 500;} /* .sub-tab-nav li a:after {content: '';display: block; height: 2px;width: 100%; background: #121212;position: absolute;bottom: 0;left: 0;opacity: 0;transition: opacity .3s; ;} */ .sub-tab-nav li.active{border-bottom-color: #111; border-bottom-width: 3px;} /* .sub-tab-nav li.active a:after { opacity: 1; } */ /********** * #### SUB LNB **********/ .lnb-wrap{position:relative; background:#fff; bottom: 0; width: 100%; display: flex; padding: 0 1.875rem; align-items: center; margin-top: auto;} .lnb-wrap h2{font-size: 0.75rem; font-weight: 600;} .lnb-wrap.fixed-layer{position:fixed; background:#fff; top: 0; width: 100%; z-index: 10; border-bottom: 1px solid #ddd;} .lnb-wrap .lnb-menu{height: 3.125rem; display: flex; align-items: center; border-bottom: 1px solid #d0d0d0; width: 100%;} .lnb-wrap .lnb-menu .ic{display: inline-block; margin-left: 10px; width: 2px; height: 20px; background-color: #000;} .lnb-wrap .lnb-menu ul{display: flex; align-items: center; margin-left: 1.875rem;} .lnb-wrap .lnb-menu li{position:relative; margin-right: 1.875rem; font-size: 0.5625rem; color: #666;} .lnb-wrap .lnb-menu li a{color: #666;} .lnb-wrap .lnb-menu li a.active{color: #000; font-weight: 500; border-bottom: 1px solid #000;} .lnb-wrap .lnb-menu li a:hover{color: #000; font-weight: 500;} .breadcrumb{position: relative; display: flex; padding: 1rem 0; align-items: center;} .breadcrumb-item{margin-left: 7px; font-weight: 500; line-height: 1; color: #0d0d0d; font-size: 1rem; display: flex; align-items: center;} .breadcrumb-item:first-child{margin-left: 0;} .breadcrumb-item a{padding-right: 7px; position: relative; font-size: 1rem; display: inline-block; } .breadcrumb-item:last-child a{padding-right: 0;} .ico-home{background-image: url('../images/icons/home-g.png'); width: 18px; height: 18px;} .ico-home-b{background-image: url('../images/icons/home-b.png'); width: 18px; height: 18px;} /* .breadcrumb-item a::after{content: ''; font-family: 'Spoqa Han Sans Neo'; position: absolute; top: 0; right: 0; } */ /* .breadcrumb-item.active a{color: var(--theme-color);} */ /********** * #### SUB TOP ETC **********/ .subwrap-top{text-align:center; background-position: top center; position: relative; padding: max(1.875rem, var(--vw-90)) 0 0;} .subwrap-top.pc { overflow: hidden} .subwrap-top h2{font-size: clamp(1.75rem, var(--font-40), 2.5rem); font-weight: 600; line-height: 1.2;} .subwrap-top .desc{font-size: clamp(1.125rem, var(--font-24), 1.5rem); color: #666; font-weight: 400; margin-top: 2.5rem; line-height: 1;} .subwrap-top.bg-top{background-color: #f0f0f0; margin-bottom: 1.25rem;} .subwrap-top .arrow-prev { position:absolute; top:30px; left:15px;} .subwrap-top .arrow-prev span { color:#777; text-align:left; padding-left:10px; vertical-align:middle} .subwrap-top .arrow-prev img { vertical-align:middle; width:30px;} .subwrap-top .arrow-next { position:absolute; top:30px; right:15px;} .subwrap-top .arrow-next span { color:#777; text-align:right; padding-right:10px;vertical-align:middle} .subwrap-top .arrow-next img { vertical-align:middle; width:30px;} .subwrap-top .subwrap-title + a { position:absolute; bottom:0; right:10px;} .subwrap-top .subwrap-title-s{font-size: clamp(1.5rem, var(--font-36), 2.25rem); color: #121212; font-weight: 700;} .sub-etc{position: relative;} .sub-etc .section-header .section-title{font-size: clamp(1.5rem, var(--font-36), 2.25rem); font-weight: 400; margin-bottom: 0; } .sub-etc .section-header{border-bottom: 1px solid #0a0a0a; padding: 3.75rem 0 2.5rem;} .gallery img{width: 100%;} .gallery-top{position: relative;} /* .thumb-swiper .swiper-slide{opacity: 0.8;} */ .thumb-swiper{max-height: 680px; overflow: hidden;} .thumb-swiper .swiper-slide{cursor: pointer; } .thumb-swiper .swiper-slide img{width: 100%;} /* .thumb-swiper .swiper-slide::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); transition: background-color ease-in-out .2s;} */ .thumb-swiper .swiper-slide-thumb-active {opacity: 1;} /* .thumb-swiper .swiper-slide-thumb-active::before{background-color: rgba(0, 0, 0, 0);} */ /* .thumb-swiper .swiper-slide-thumb-active:hover::before{display: none;} */ /********** * ## BRAND **********/ .page-brands-view .section-banner .cont{background-color: #eceae5; color: #0d0d0d;} .page-brands-view .section-banner .cont .logo{display: inline-block;} .page-brands-view .section-banner .cont .logo img{max-width: 50%; width: 100%;} .page-brands-view .section-banner .cont .title{margin-top: max(1.875rem, var(--vw-60)); font-weight: 600;} .page-brands-view .section-banner .cont .inner{padding-left: 2.5rem; max-width: 600px;} .page-brands-view .section-banner .cont .desc{margin-top: 0.9375rem; font-weight: 300;} .page-brands-view .section-banner.deco-flame .cont{background-color: #ede6d5;} .page-brands-view .section-banner.focus .cont{background-color: #28282a; color: #fff;} .page-brands-view .section-banner.ecosmart-fire .cont{background-color: #f39020;} .page-brands-view .section-banner.vauni .cont{background-color: #e3e9ec;} .page-brands-view .section-banner.la-castellamonte .cont{background-color: #55453c; color: #ede6d5} /********** * ## ABOUT **********/ .overview-wrap .title{font-size: clamp(2rem, var(--font-64), 4rem); padding-top: max(3.75rem, var(--vw-180)); padding-bottom: max(1.875rem, var(--vw-60));} .overview-wrap .title div{font-weight: 400; line-height: 1.3;} .overview-wrap .title div + div{font-weight: 600;} .overview-wrap .video{max-height: 600px; overflow: hidden;} .overview-wrap .video video{height: 100%; object-fit: cover; width: 100%; height: max(18.75rem, var(--vw-600)); min-height: 600px;} .overview-wrap .about{margin: max(3.75rem, var(--vw-200)) 0 max(3.75rem, var(--vw-120));} .overview-wrap .about .inner{display: flex; justify-content: space-between;} .overview-wrap .about .inner .cont{flex-shrink: 0; width: 45%; margin-right: 5%;} .overview-wrap .about .inner .cont h3{font-size: clamp(1.5rem, var(--font-42), 2.625rem); font-weight: 700; margin-bottom: max(1.875rem, var(--vw-60)); line-height: 1;} .overview-wrap .about .inner .cont p{font-size: clamp(1rem, var(--font-20), 1.25rem); max-width: 45rem; line-height: 1.7;} .overview-wrap .about .inner .cont .btn-wrap{text-align: left; margin-top: max(1.875rem, var(--vw-60)); display: flex; max-width: 38.75rem;} .overview-wrap .about .inner .cont .btn-wrap a{border: 1px solid var(--theme-color); font-weight: 600; display: inline-block; flex: 1; text-align: center; padding: 0.875rem 0;} .overview-wrap .about .inner .cont .btn-wrap a + a{margin-left: 1.25rem;} .overview-wrap .about .inner .image{display: flex; flex-grow: 1;} .overview-wrap .about .inner .image span{display: inline-block; flex: 1;} .overview-wrap .about .inner .image span img{width: 100%;} .overview-wrap .about .inner .image span + span{margin-left: 1.25rem;} /********** * ## SUPPORT **********/ .grid-help .item{background-color: #eceae5; } .grid-help .item a{display: block; padding: 3.75rem 1.875rem;} .grid-help .item.policy a{padding-bottom: 1.875rem;} .grid-help .item h4{font-size: clamp(1.125rem, var(--font-24), 1.5rem); margin-bottom: 1.125rem; line-height: 1;} /********** * #### Inquiry **********/ .inquiry-wrap{display: flex; border-top: 1px solid #a0a0a0; padding-top: max(1.875rem, var(--vw-120));} .inquiry-wrap .contact-top{width: 25%; padding: 0; margin: 0; border: 0; padding-left: max(0.9375rem, var(--vw-30));} .inquiry-wrap .contact-form{width: 75%;} /********** * #### Policy **********/ .page-support-policy .section-page{padding-top: 0;} .po-wrap{border-top: 1px solid #a0a0a0; padding-top: max(2.5rem, var(--vw-120));} .po-wrap h3{font-size: clamp(1.125rem, var(--font-24), 1.5rem); font-weight: 600; line-height: 1; margin-bottom: max(1.5625rem, var(--vw-60));} .po-wrap .cont{font-size: clamp(1rem, var(--font-20), 1.25rem);} .po-wrap ol{margin-left: max(1.25rem, var(--vw-40));} /********** * ## Contact **********/ .contact-form{position: relative; max-width: 58.125rem;} .contact-form.table-layout .form-group{display: flex; margin-bottom: 1.875rem;} .contact-form.table-layout .form-group .label{flex-shrink: 0; width: 25.807%; margin-bottom: 0; display: inline-block; font-size: 1.25rem; height: 3.125rem; line-height: 3.125rem;} .contact-form.table-layout .form-group .cont{flex-grow: 1;} .contact-form.table-layout .form-group .cont.static{line-height: 3.125rem;} .contact-form.table-layout .form-group .select-box .btn-select{height: 3rem; line-height: 3rem; padding-left: 0.9375rem;} .contact-form.table-layout .select-box.full{width: 100%;} /* .contact-form.table-layout .phone-input{max-width: 60%} .contact-form.table-layout .email-input{max-width: 60%} .contact-form.table-layout .name-input{max-width: 60%} */ .contact-top .label-req{font-size: 14px; font-weight: 600;} .label-not-req{font-size: 14px; font-weight: 600; color: #ff5b4d; margin-left: 5px;} .label-req-info{color: #ff5b4d; margin-bottom: 1.125rem;} .no-input{line-height: 3.125rem;} .no-input .error-place{line-height: 1.2;} .no-label{margin-left: 25.807%;} .contact-form .form-group{margin-bottom: 1.875rem;} .contact-form .radio-box{display: inline-flex;} .contact-form .radio-input{max-width: 81%;} .contact-form .radio-box-wrap{border: 1px solid #d0d0d0; padding: 0.3125rem 0.625rem; margin-right: 0.625rem; flex: 0 0 33.33%;} .contact-form .form-input{margin-bottom: 3.75rem;} .form-inner{margin-top: 0.625rem;} .contact-form .input{height: 3.125rem; line-height: 3.125rem; padding-left: 0.9375rem;} .contact-form .select-box .btn-select{ background-color: #fff; height: 3.125rem; line-height: 3.125rem; padding-left: 0.9375rem;} .contact-form .label{font-size: 1.125rem; margin-bottom: 0.5rem; display: block; font-weight: 600;} .contact-form textarea.input{min-height: 18.75rem; line-height: 1.35; padding: 0.9375rem;} .contact-form .input.border{border: 1px solid #d0d0d0; background-color: #f5f5f5; width: 6.25rem; padding-left: 0.625rem;} .contact-form .select-box .select-list a{line-height: 1; padding: 8px 5px;} .contact-errors{position: absolute; right: -280px; top: 0; font-size: 12px; } .contact-errors .alert{padding: 10px; margin-bottom: 5px;} .btn-submit{background-color: #080d0a; border: 1px solid #343434; color: #fff; display: inline-block; font-weight: 600; line-height: 1;} .row-cert{display: none;} .error-cert-check{display: inline-block;} .contact-top{border-bottom: 1px solid #666; padding-bottom: 1.125rem; margin-bottom: 1.125rem;} .contact-top .contact-title{font-size: clamp(1.5rem, var(--font-36), 2.25rem); font-weight: 600;} .contact-top .contact-title .icon{margin-left: 1.25rem;} .contact-container{display: flex;} .contact-container .map-wrap{flex-shrink: 1; flex: 1;} .contact-container .address-info{flex-grow: 0; background-color: #fff; padding: 2.5rem 1.25rem; width: 25rem; height: 25rem;} .contact-container .address-info .line{width: 30px; height: 3px; background-color: #121212; margin-bottom: 1.25rem;} .contact-container .address-info .form-group{margin-bottom: 2.5rem;} .contact-container .address-info p{display: flex; align-items: center; font-size: 1.125rem;} .contact-container .address-info p .icon{margin-right: 0.625rem; flex-shrink: 0;} .contact-container .address-info p .text{flex-grow: 1;} .contact-container .address-info p + p{margin-top: 5px;} /********** * #### CONTACT US **********/ .page-contact-contact-us .inquiry-wrap{border-top: 0;} .contact-wrap{display: flex;} .contact-wrap .section-title{line-height: 1;} .contact-wrap .section-header{width: 25%; padding: max(3.75rem, var(--vw-120)) max(0.9375rem, var(--vw-30));} .contact-wrap .cont{width: 75%; display: flex;} .contact-item{padding: max(3.75rem, var(--vw-120)) max(1.875rem, var(--vw-60)); flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } .contact-item + .contact-item::before{background-color: #a0a0a0; height: 100%; position: absolute; left: 0; top: 0; content: ''; width: 1px;} .contact-item h4{font-size: clamp(1.125rem, var(--font-28), 1.75rem); } .contact-item dl{margin-top: max(1.875rem, var(--vw-60)); font-size: clamp(1rem, var(--font-20), 1.25rem);} .contact-item dl dt{font-weight: 600; line-height: 1; margin-bottom: 0.75rem;} /********** * #### SHOW ROOM **********/ .showroom-wrap{position: relative; display: flex; padding-top: max(2.5rem, var(--vw-80));} .showroom-wrap .view{flex-shrink: 0; width: 50%; position: relative;} .showroom-wrap .view-tabs{justify-content: flex-start; position: absolute; top: 1.25rem; left: 1.25rem; display: flex; z-index: 1;} .showroom-wrap .view-tabs li{flex: 0;} .showroom-wrap .view-tabs li a{background-color: #fff; font-size: 1rem; padding: 0.5625rem 2.5rem; line-height: 1; opacity: 0.8; border-radius: 4px; color: #a0a0a0; display: block;} .showroom-wrap .view-tabs li a.active{background-color: var(--theme-color); color: #fff; opacity: 1;} .showroom-wrap .view-tabs li + li{margin-left: 0.625rem;} .map{background-color: #eee; width: 100%; height: 34.219vw; max-height: 657px;} .iw-inner{background-color: #0076F4; border: 1px solid #0076F4; border-radius: 22px; color: #fff; padding: 10px; font-weight: 500; text-align: center;} .showroom-wrap .btn-wrap{margin-top: max(1.875rem, var(--vw-50)); text-align: left;} .showroom-wrap .btn-border{line-height: 1; padding: 1.125rem 7.5rem; font-weight: 600;} .showroom-wrap .btn-border:hover{background-color: var(--theme-color); color: #fff;} .showroom-wrap .contact-item{padding-bottom: 0; padding-top: 0;} .showroom-wrap + .showroom-wrap{padding-top: max(3.75rem, var(--vw-120)); margin-top: max(3.75rem, var(--vw-120)); border-top: 1px solid #a0a0a0;} /********** * ## Form **********/ .form-table {table-layout: fixed; margin-bottom: 1.25rem;} .form-table th, .form-table td {padding: 0.625rem 0; position: relative;} .form-table th {width: 18%; font-weight: 500; text-align: left; padding-left: 0.625rem; line-height: 1; } .form-table th label{vertical-align: middle;} .form-table td {padding-left: 0;} .form-table th em {font-size: 14px; margin-left: 11px;} .req {position: relative;} .req::after {content: "*"; padding-left: 5px; color: #fe0000;} .form-table .select-box{display: inline-block; vertical-align: middle;} .form-table .select-box + a{display: inline-block; margin-left: 10px; font-size: 13px; min-width: auto;} /* .bg_gray .form-table .dx-input, .bg_gray .form-table .select-box .btn-select {background-color: #f8f8f8; } */ .phone-input {position: relative; display: flex; align-items: center; justify-content: space-between;} .phone-input + a {display: inline-block; vertical-align: middle; margin-left: 10px;} .phone-input .select-box {width: 30%;} .phone-input .unit {width: 5%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;} .phone-input .input {width: 30%;} .form-table .name-input {position: relative; width: 100%; display: inline-block; vertical-align: middle;} .form-table .product-input{display: flex; width: 60%;} .form-table .product-input .dx-input{width: 70%;} .form-table .product-input .select-box{margin-left: 1%;} .email-input {position: relative; display: flex;} .email-input .inputs{width: 70%; display: flex;} .email-input .input {width: 43%;} .email-input .unit {width: 7%; height: 3.125rem; line-height: 3.125rem; text-align: center; font-size: 14px; color: #666;} .email-input .select-box {position: absolute; right: 0; top:0; width: 32%;} .address-input .addr-line{margin-bottom: 0.625rem; } .address-input .zipcode{display: flex;} .address-input .zipcode .input{max-width: 100px;} .address-input .zipcode .btn{margin-left: 0.625rem; height: 3.125rem} .address-input .input{max-width: 60%;} .button-input{position: relative;} .button-input .input{width: 60%;} .button-input .check-box{margin-left: 2%;} .form-table .num-input {position: relative; width: 50%; display: inline-block; vertical-align: middle;} .form-table .num-input .dx-input {width: 35%;} .form-table .num-input a {display: inline-block; margin-left: 10px;} .form-table .num-input .time {font-size: 14px; font-weight: 500; color: #fe0000; margin-left: 10px; display: inline-block;} .form-table .time-input{position: relative; display: inline-block; width: 100%;} .form-table .time-input .select-box{float: left; width: 20%;} .form-table .time-input .unit {float: left; width: 4%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;} .form-table .marker-input{position: relative; width: 58%; display: inline-block; vertical-align: middle;} .form-table .marker-input .dx-input {width: 76%;} .form-table .marker-input a {display: inline-block; margin-left: 10px;} .contact-form .form-group.lg{margin-top: 20px;} .form-btn {display: flex; margin-top: max(2.5rem, var(--vw-100)); justify-content: center;} .btn-line{border: 1px solid #333; width: auto; min-width: auto; font-size: 13px;} .btn-line:hover{color: #ccc; } .form-btn.no-label{justify-content: flex-start; margin-left: 25.807%;} .form-table .help-desc{margin-top: 10px;} .form-table-footer{margin-top: 0.625rem;} .form-table-footer .check-box a{text-decoration: underline; color: #0e9bf5;} /* .bs-number-input{display: inline-block; width: 60%;} .bs-number-input .bno1{width: 80px;} .bs-number-input .bno2{width: 50px;} .bs-number-input .bno3{width: 100px;} */ .bs-number-input{display: flex; align-items: center; max-width: 60%;} .bs-number-input .unit{width: 3%;} .bs-number-input input.n1{width: 28%; margin-right: 1%;} .bs-number-input input.n2{width: 20%; margin-right: 1%;} .bs-number-input input.n3{width: 44%;} /********** * #### QNA **********/ .page-support .info-box{margin-top: 1.875rem; } .info-box{display: flex; align-items: center; padding: 0.9375rem; background-color: #f5f5f5; margin: 1.875rem 0;} .info-icon{width: 75px; margin-right: 0.625rem; flex-shrink: 1;} .info-icon img{max-width: 75px;} .info-text{flex-grow: 0; color: #000;} .info-text .info-title{font-size: 0.75rem; font-weight: 600;} #fqnaform .btn-wrap{margin-top: 3.125rem; margin-bottom: 1.5625rem;} /* NOTICE */ .check-border{position: relative; display: inline-block; line-height: 1.25; font-size: 15px;} .check-border input[type=checkbox]{opacity: 0; position: absolute; top: 0; left: 0; z-index: 0;} .check-border label{display: inline; cursor: pointer; text-align: center; line-height: 1em; font-weight: normal; font-size: 14px; padding: 5px 10px; border: 1px solid transparent; color: #233b4d;} .check-border input[type="checkbox"]:checked + label{color: #ecb10d; border-radius: 15px; border: 1px solid #ecb10d; font-weight: 500;} .list-empty{height: calc(100vh - 100px); background: #f2f2f2; text-align: center;} .list-empty:after {content: ''; display: inline-block; height: 100%; vertical-align: middle;} .list-empty .text {display: inline-block; vertical-align: middle; font-size: 15px; color: #b8bfc4;} /********** * ## Terms **********/ .privacy-wrap {color:#666; line-height:1.6em; display:block; clear:both; min-height:600px} .privacy-wrap .privacy-box {padding:30px 0;} .privacy-wrap .privacy-box:first-child{padding-top: 0;} .privacy-wrap .privacy-box:last-child {padding-bottom: 0;} .privacy-wrap .privacy-box.summary {padding:30px; background:#f8f8f8; margin-bottom:20px} .privacy-wrap .privacy-box.summary p {color:#333;} .privacy-wrap .privacy-box.summary span.desc {font-size:13px; color:#999} .privacy-wrap .privacy-box.summary p + p {margin-top:20px} .privacy-box h4{margin: 15px 0 5px; color: #000; font-weight: 500;} .terms .privacy-box h4{margin-top: 60px;} .terms .privacy-box h4:first-child{margin-top: 0;} .privacy-box.summary .list-style-box {display: table; width: 100%; table-layout: fixed; vertical-align: top;} .privacy-box.summary .list-style {display: table-cell; width: 50%;} .privacy-box.summary .list-style li{padding: 2px 0;} .privacy-wrap .privacy-box .privacy-title { font-weight: 700; color:#333; font-size:18px;} .privacy-wrap .privacy-box p + p, .privacy-wrap .privacy-box div + p, .privacy-wrap .privacy-box p + div, .privacy-wrap .privacy-box div + div{margin-top:10px;} .privacy-wrap .privacy-listbox {padding:20px; border:1px solid #d5d5d5} .privacy-wrap .privacy-listbox p {line-height: 1.4em} .privacy-wrap .privacy-listbox p + p, .list-style-box .list-style{position: relative; padding-left: 20px; font-size: 15px; color: #666; line-height: 1.4em;} /********** * ## FAQ **********/ .faq-wrap { margin:0 auto; border-top: 2px solid #a0a0a0;} .faq-wrap ul.faq li.faq-item { border-bottom:1px solid #a0a0a0;} .faq-wrap ul.faq li.faq-item a.faq-title { padding: 1.25rem 0 1.25rem 0; display:flex; position: relative; align-items: center;} .faq-wrap ul.faq li.faq-item a.faq-title:hover { background-color: #f5f5f5;} .faq-wrap ul.faq li.faq-item a.faq-title.active:hover { background-color: #fff;} .faq-wrap ul.faq li.faq-item a.faq-title span { vertical-align:middle; display:inline-block} .faq-wrap ul.faq li.faq-item a.faq-title span.subject {width:90%; font-size:1.25rem; padding-left: max(0.625rem, var(--vw-30)); flex-grow: 1;} .faq-wrap ul.faq li.faq-item a.faq-title span.arrow { text-indent: -9999px; background: url("../images/icons/ico-angle-down.png") center/cover no-repeat; width:13px; height:8px; position:absolute; top: 50%; margin-top: -4px; right:20px; transition: all ease 0.2s;} .faq-wrap ul.faq li.faq-item a.active .arrow { -webkit-transform:rotate(180deg); color:#333} .faq-wrap ul.faq li.faq-item .answer {display:none; padding: max(0.625rem, var(--vw-30)); overflow: hidden;} .faq-wrap ul.faq li.faq-item .answer .answer-content {width: 90%; padding-left: 1.25rem; flex-grow: 1;} .faq-wrap ul.faq li.faq-item .faq-label {display:inline-block; text-align: center; flex-shrink: 0; background-color: #f2f2f2; line-height: 1; padding: 7px 16px; border-radius: 16px; height: 1.875rem;} .faq-wrap .btn-wrap {margin-top:20px; text-align: center} /********** * ## MYPAGE **********/ .mypage-wrap{position: relative;} .mypage-wrap .header{display: flex; align-items: center; height: 7.5rem; margin-bottom: 2.5rem;} .mypage-wrap .header .title{width: 20%; background-color: #343434; height: 100%; display: flex; align-items: center;justify-content: center;} .mypage-wrap .header .title h2{color: #fff; font-size: clamp(1.5rem, var(--font-36), 2.25rem);} .mypage-wrap .header .welcome{background-image: linear-gradient(to top, #affaca, #9fd8f5); height: 100%; display: flex; justify-content: center; flex-direction: column; padding-left: 5.625rem; width: 60%;} .mypage-wrap .header .welcome div{font-size: clamp(1.125rem, var(--font-24), 1.5rem); margin-bottom: 0.4375rem; font-weight: 600; line-height: 1;} .mypage-wrap .header .welcome p{color: #666;} .mypage-wrap .header .widget{width: 20%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; border: 1px solid #f5f5f5; background-color: #f9f9f9; text-align: center;} .mypage-wrap .header .widget:last-child{border-left: 0;} .mypage-wrap .header .widget div{color: #666; line-height: 1; margin-bottom: 1rem; line-height: 1;} .mypage-wrap .header .widget p{font-size: clamp(1rem, var(--font-20), 1.25rem);} .mypage-content{position: relative; display: flex;} .mypage-content .left{flex-shrink: 0; width: 20%;} .mypage-content .left .inner{border-radius: 4px; border: 1px solid #cbcbcb; padding: 1.875rem 1.25rem; } .mypage-content .left ul{margin-bottom: 1.875rem; padding-bottom: 1.875rem; border-bottom: 1px solid #cbcbcb;} .mypage-content .left ul li{padding-top: 1.25rem; line-height: 1;} .mypage-content .left ul li a{color: #343434;} .mypage-content .left .title{font-size: clamp(1rem, var(--font-20), 1.25rem);} .mypage-content .left .info a{display: block; color: #1f5c25; font-size: clamp(1.125rem, var(--font-24), 1.5rem); line-height: 1; display: block; font-weight: 700; margin: 1.875rem 0 1.25rem;} .mypage-content .left .info p{color: #1f5c25;} .mypage-content > .cont{flex-grow: 1; margin-left: max(1.875rem, var(--vw-60));} .mypage-content .section-header{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0a0a0a; padding-bottom: 1.25rem; margin-bottom: 2.5rem;} .mypage-content .section-header h4{font-size: clamp(1.125rem, var(--font-24), 1.5rem);} .mypage-content .section-header h4 .count{color: #ff5b4d; font-weight: 600; font-size: clamp(1rem, var(--font-20), 1.25rem); margin-left: 0.625rem;} .mypage-content .section-header .more{color: #666;} .mypage-content .section-header.with-form{display: block; } .mypage-content .section-header.with-form h4{margin-bottom: 1.25rem;} .mypage-content .section + .section{margin-top: 3.75rem;} .status-wrap .step{border: 1px solid #0a0a0a; display: flex; align-items: center;} .status-wrap .etc{display: flex; align-items: center; margin-top: 0.625rem;} .status-wrap .item{background-color: #f9f9f9; flex: 1; text-align: center; position: relative;} .status-wrap .item::after{content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background-color: #cbcbcb;} .status-wrap .item:last-child:after{display: none;} .status-wrap .item span{color: #cbcbcb; font-weight: 600; font-size: clamp(1.125rem, var(--font-20), 1.25rem ); display: inline-block; line-height: 1;} .status-wrap .step .item a{display: inline-block; padding: 1.875rem;} .status-wrap .step .item span{margin-bottom: 0.9375rem;} .status-wrap .step .item span.active{color: #ff5b4d; font-weight: 600;} .status-wrap .etc .item a{display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem;} .status-wrap .etc .item span{margin-left: 1.125rem;} .status-wrap .etc .item span.active{color: #0a0a0a; font-weight: 600;} .mypage-content .grid-image{position: relative} .mypage-content .grid-btn{position: absolute; bottom: -1px; left: -1px; z-index: 2; right: -1px;} .mypage-content .grid-btn a{background-color: #0a0a0a; opacity: 0.4; color: #fff;} /********** * ## MYPAGE POINT **********/ .point-wrap .point-box{display: flex; background-color: #effaed; padding: 1.25rem; align-items: center; justify-content: center; margin-bottom: max(1.875rem, var(--vw-60));} .point-wrap .point-box .text{font-size: clamp(1rem, var(--font-20), 1.25rem); font-weight: 600; margin: 0 1.875rem 0 0.9375rem;} .point-wrap .point-box .point{background-color: #fff; height: 3.125rem; padding: 0 1.875rem; display: flex; align-items: center; justify-content: center;} .point-wrap .point-box .point em{font-size: clamp(1.5rem, var(--font-40), 2.5rem); color: #39a845; font-weight: 600; margin-right: 0.375rem;} .ico-point{background-image: url('../images/mypage/point.png'); width: 30px; height: 27px;} .mypage-content .search-wrap{display: flex;} .mypage-content .search-wrap .item{display: flex; align-items: center;} .mypage-content .search-wrap .item .btn + .btn{margin-left: 0; border-left: 0;} .mypage-content .search-wrap .item .btn:first-child{border-top-left-radius: 4px; border-bottom-left-radius: 4px;} .mypage-content .search-wrap .item .btn:first-child::before{display: none !important;} .mypage-content .search-wrap .item .btn:last-child{border-top-right-radius: 4px; border-bottom-right-radius: 4px;} .mypage-content .search-wrap .item .btn{border: 1px solid #cbcbcb; color: #cbcbcb; min-width: auto; padding: 11px 19px; line-height: 1; position: relative;} .mypage-content .search-wrap .item .btn.active{border-color: #666; color: #0a0a0a; } .mypage-content .search-wrap .item .btn.active::before{content: ''; position: absolute; left: 0; top: 0; background-color: #666; height: 100%; width: 1px;} .mypage-content .search-wrap .item + .item{margin-left: 2.5rem;} .mypage-content .search-wrap .input{max-width: 150px; border-radius: 4px;} .mypage-content .search-wrap .label{margin-right: 10px;} .mypage-content .search-wrap .btn-submit{height: 2.5rem; border-radius: 4px; background-color: #080d0a; padding: 0 1.25rem; font-size: 16px; margin-left: 10px;} .order-wrap{margin-top: 2.5rem; margin-bottom: 1.25rem;} .order-wrap a{color: #666; position: relative;} .order-wrap a + a{padding-left: 1.25rem; margin-left: 1.25rem;} .order-wrap a + a::before{content: ''; position: absolute; left: 0; top: 10%; width: 1px; height: 80%; background-color: #cbcbcb;} .order-wrap a.active{color: #0a0a0a; font-weight: 500;} .filter-wrap{margin-bottom: 1.25rem; color: #666; display: flex; align-items: center;} .filter-wrap button{color: #666; line-height: 1.3; position: relative; margin-left: 1.25rem; padding-left: 1.25rem;} .filter-wrap button::before{content: ''; position: absolute; left: 0; top: 10%; width: 1px; height: 80%; background-color: #cbcbcb;} /********** * ## MYPAGE Coupon **********/ .coupon-info{margin-top: max(1.875rem, var(--vw-60));} .coupon-info h5{display: flex; align-items: center; border-bottom: 1px solid #cbcbcb; padding-bottom: 0.75rem; margin-bottom: 1.125rem; font-weight: 600;} .coupon-info h5 .icon{margin-right: 0.625rem;} .coupon-info p{color: #666; line-height: 1.65;} .qna-list li{border: 1px solid #d0d0d0; background-color: #f5f5f5; padding: 0.625rem;} .qna-list li .title{font-size: 0.5625rem; color: #000; font-weight: 600; margin-bottom: 10px;} .qna-list li p{color: #000; } .file-attach-wrap{display: flex; align-items: center;} .file-input{position: relative; overflow: hidden; } .hidden-input{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0;} .file-input .input{display: inline-block; overflow: hidden; max-width: 12.5rem;} .file-input button{background-color: #343434; color: #fff; line-height: 3.125rem; height: 3.125rem; width: 6.25rem; margin-left: 0.625rem;} .file-attach-wrap .file-input .input{width: 80px; height: 80px; cursor: pointer; background: #cbcbcb url('../images/icons/ico-zoom.png') no-repeat center/cover; padding: 0; line-height: 80px;} .file-input .input img{width: 100%; border: 0; height: 80px; object-fit: cover; background-color: #fff;} .file-input + .file-input{margin-left: 1.25rem;} .file-info{margin-top: 1.25rem; font-size: 0.75rem; color: #666;} .file-info .label-req{font-size: 0.75rem;} .file-info p + p{margin-top: 0.3125rem;} .file-view{line-height: 3.125rem; } .file-view a{text-decoration: underline;} .input-inner{margin-bottom: 10px;} #resultFile{display: flex; flex-wrap: wrap; box-sizing: border-box; margin: 0 -10px 20px -10px;} .file-item{flex: 0 0 25%; padding: 10px; position: relative;} .file-item .file-image{background-position: center; background-size: cover; background-repeat: no-repeat; width: 140px; height: 140px; display: inline-block;} .file-item .icon-ga-main{position: absolute; top: 10px; max-width: 140px; width: 100%; height: 30px; background-color: rgba(0,0,0,0.5); font-size: 13px; color: #fff; line-height: 30px; text-align: center;} .file-item p{text-align: center;} /********** * ## MYPAGE STATEMENT **********/ .statement-wrap{max-width: 1024px; margin: 0 auto;} .statement-wrap .table-wrap table{border-top: 1px solid #065ab9; border-left: 1px solid #065ab9; border-right: 1px solid #065ab9; border-bottom: 1px solid #065ab9;} .statement-wrap .table-wrap table td{border: 1px solid #065ab9; border-left: 0; padding: 0.625rem 0.5rem; position: relative;} .statement-wrap .table-wrap table td .price{text-align: right; font-weight: 600;} .statement-wrap .table-wrap table td ul li{font-size: 14px; color: #444;} .statement-wrap .table-wrap table th{background-color: #fff; border-bottom: 3px double #065ab9; color: #065ab9; border-right: 1px solid #065ab9;} .statement-wrap .table-wrap table + table{border-top: 0;} .statement-wrap .table-wrap table td.supply-title{text-align: center; border-right: 0;} .statement-wrap .table-wrap table td.supply-title .text{font-size: 24px; letter-spacing: 4px; color: #065ab9; font-weight: 600;} .statement-wrap .table-wrap table td.supply-type{ border-left: 0; text-align: right;} .statement-wrap .table-wrap table td.supply-type .text{ right: 10px; bottom: 10px; color: #065ab9; padding-top: 50px;} .statement-wrap .table-wrap.supply{margin-bottom: 2.5rem;} .statement-wrap .table-wrap.supply table{ border-color: #fe0000;} .statement-wrap .table-wrap.supply table th{color: #fe0000; border-color: #fe0000;} .statement-wrap .table-wrap.supply table td{border-color: #fe0000;} .statement-wrap .table-wrap.supply table td.supply-title .text{color: #fe0000;} .statement-wrap .table-wrap.supply table td.supply-type .text{color: #fe0000;} .statement-wrap .btn-wrap{padding: 1.875rem 0;} /* .sign{position: absolute; right: 3px; background: url('../images/common/stamp.png') no-repeat center/cover; width: 30px; height: 29px; z-index: 1; top: 50%; margin-top: -15px;} */ .sign{position: absolute; right: 4px; z-index: 1; top: 50%; margin-top: -15px;} .sign img{max-width: 30px;} /********** * ## MYPAGE QNA **********/ .td-click{cursor: pointer;} .qna-wrap .reply{display: none;} .qna-wrap .reply.active{display: table-row;} .qna-wrap .reply td{padding: 0;} .qna-wrap .reply td .inner{padding: 1.25rem; background-color: #f5f5f5;} .qna-wrap .reply .answer{margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dotted #cbcbcb;} .qna-wrap .reply ul li{display: flex;} .qna-wrap .reply ul li + li{margin-top: 4px;} .qna-wrap .reply ul li .label{flex-shrink: 0; color: #777;} .qna-wrap .reply ul li .text{flex-grow: 1; margin-left: 1.25rem;} /********** * ## MYPAGE ITEM QNA **********/ .item-qna-wrap table td{color: #666;} .item-qna-wrap table .sod-product-wrap{color: #0a0a0a;} .subject-icon{display: flex; align-items: center;} .subject-icon img{margin-left: 0.3125rem;} .subject-etc{display: none; } /********** * ## MYPAGE REVIEW **********/ .review-wrap .tabs{display: flex;} .review-wrap .tabs li{position: relative;} .review-wrap .tabs li a{width: 9.375rem; height: 2.5rem; line-height: 2.5rem; background-color: #f5f5f5; border: 1px solid #cbcbcb; display: inline-block; text-align: center; color: #666;} .review-wrap .tabs li a.active{background-color: #fff; border-color: #666; color: #0a0a0a; font-weight: 600;} /* .review-wrap .tabs li + li a{border-left: 0;} */ .review-list{border-top: 1px solid #cbcbcb; } .review-list li{border-bottom: 1px solid #cbcbcb; padding: 1.25rem 0; position: relative;} .review-list .btn-area{margin-top: 1.875rem;} .review-list .btn-area a{border-radius: 4px; width: 9.375rem; height: 2.5rem; line-height: 2.5rem; padding: 0; } .btn-tabs{margin-bottom: 30px; text-align: center;} .btn-tabs a + a{margin-left: 10px;} .btn-tabs a.active{background-color: #2c353c; color: #fff; border-color: #2c353c;} .social-login-button .social-login{border: 1px solid #d0d0d0; padding: 10px 1.25rem;} .social-login-button{margin-right: 0.625rem;} /********** * ## BOARD **********/ .bbs-wrap {min-height: 600px;} .bbs-top {position: relative; margin-bottom: 1.25rem; display: flex; align-items: center;} .bbs-top .top-left strong{color:#e50026; font-weight: 600;} .bbs-top .top-right {margin-left: auto;} .bbs-top .top-right a+a{margin-left: 5px; border-left: 1px solid #ddd; padding-left: 8px;} .bbs-top .top-right ul.search-wrap > li { display:inline-block; vertical-align: middle; position:relative} .search-status{margin-top: 3px;} .status-label{color: #000; margin-right: 10px; display: inline-block; font-weight: 500;} .search-status label{margin: 0 5px; } .bbs-top .top-right ul.search-wrap > li + li::before { content: ""; width:1px; height: 20px; background:#ccc; position: absolute; top:50%; margin-top:-10px; left: -1px} .bbs-top .top-right ul.search-wrap > li input[type=text] {border:0; padding:10px 0 10px 5px; width:250px; color:#333; } .bbs-top .top-right ul.search-wrap > li .btn-search{width:20px;height:20px;background:url("../images/icons/ico-search.png") no-repeat center center; display: block; position:absolute; top:50%; margin-top:-10px;right:0; background-size: 15px auto; } .bbs-top .top-right ul.search-wrap .select-box {width:100px; border: 0;} .bbs-top .top-right ul.search-wrap .select-box .btn-select {padding-right: 30px; height: 33px;line-height: 33px; color: #000;} .bbs-top .top-right ul.search-wrap .all-view{margin-right: 10px;} .bbs-top .top-right .btn-write{margin-left: 20px;} .search-order{text-align: right; margin-bottom: 20px; line-height: 1;} .search-order .select-box{width: auto; display: inline-block;} .search-order .select-box .btn-select{height: 33px; line-height: 33px; font-size: 14px; color: #000;} .search-order .select-box .select-list li a{font-size: 14px;} .search-category{padding: 20px 0 30px; margin-bottom: 30px; text-align: center; border: 1px solid #d5d5d5;} .search-category .select-box{display: inline-block; width: 200px; vertical-align: middle;} .search-category .select-box + .select-box{margin-left: 15px;} .bbs-tab-wrap{position:relative; margin-bottom: max(1.875rem, var(--vw-100));} .bbs-tab {display: flex; justify-content: center; align-items: center;} .bbs-tab li {position: relative; margin-right: 1.25rem;} .bbs-tab li:last-child {margin-right:0; } .bbs-tab li a {display:inline-block; -webkit-transition: color 0.3s;transition: color 0.3s; text-align: center; text-align: center; border: 1px solid #f5f7f9; background-color: #f5f7f9; color: #5e5e5e; padding: 4px 10px;} .bbs-tab li.active a{ font-weight: 500; border-color: var(--theme-color); background-color: #fff; color: var(--theme-color);} .bbs-tab li a:hover{border-color: #96979e;} .bbs-table { min-height:300px;} .bbs-wrap .bbs-table {min-height:auto;} .bbs-table .line { display:block; width:100%; height:1px; background:#ececec; margin:20px auto} .bbs-table .tit { color:#666} .bbs-table table{table-layout: fixed; } .bbs-table table thead th { position: relative; font-weight:500; background-color: #f2f2f2;} .bbs-table table tbody td.ft-s { font-size:13px; color:#333} .bbs-table table thead td span.icon { font-size:9px; opacity: 0.5; margin-left:5px; vertical-align: middle;padding-bottom: 3px} .bbs-table table tbody tr:hover { background-color: #f9f9f9;} .bbs-table table tbody td { position: relative; } .bbs-table table tbody td.date { color:#999} .bbs-table table tbody td .state { color:#f42534} .bbs-table table tbody td .state.end { color:#999} .bbs-table table td { border-bottom:1px solid #e3e3e3;color:#666; padding:16.5px 20px;/* text-align:center*/} .bbs-table table thead th {padding:15.5px 0; border-bottom:1px solid #e3e3e3;} .bbs-table table td.subject { text-align:left; } .bbs-table table td.subject .category {font-size: 14px; vertical-align: middle; background-color: #F0EDFF; border-radius: 5px; width: 40px; height: 24px; line-height: 24px; display: inline-block; text-align: center; font-weight: 500; margin-right: 5px;} .bbs-table table td.subject .category.key-1 { color: #6841ff;} .bbs-table table td.subject .category.key-2 { color: #61cdc9;} .bbs-table table td a {color:#0a0a0a;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display: inline-block;max-width: 95%;vertical-align: middle;} .bbs-table table td a:hover {text-decoration: underline;} .bbs-table table td.last-btn a.btn span { text-decoration: underline;} .bbs-table table td.last-btn span {font-size: 13px;} .bbs-table table td .bbs-col {font-size: 13px; color: #777; display: inline-block; position: relative; padding-right: 10px; margin-right: 5px;} .bbs-table table td .bbs-col:first-child::after {position: absolute; content: ''; top: 4px; right: 0; width: 1px; height: 10px; background-color: #777;} .bbs-table table tr.noti td { background:#f8f8f8; font-weight: 500;} .bbs-table table tr.noti td:first-child {color:#f42534} .bbs-table table tr.cancel td, .bbs-table table tr.cancel td a, .bbs-table table tr.cancel td a:hover { color:#999!important; cursor:default; text-decoration: none;} .bbs-table table td.bd_r { border-right:1px solid #ececec} .bbs-table table td.bd_l { border-left:1px solid #ececec} .bbs-table table td.info_left { text-align:left; padding:0 20px} .bbs-table table tbody td.date { font-size: 13px; color: #666; letter-spacing: -0.5px; font-weight: normal;} .bbs-table .type-box { position:relative; display:inline-block; top:0; left:0; font-size:12px; padding:0} .bbs-table .type-box.end{background:#666666; border-color:#666666} .bbs-table .type-box.ing{background:#f42534 ; border-color:#f42534 ;} .bbs-btn {margin:max(3.75rem, var(--vw-100)) auto 0; text-align: center} .bbs-btn a {min-width:200px;} .bbs-btn a span {font-weight:500; color:#333} .bbs-btn a span.total { opacity: 0.6} .bbs-btn .btn-line{border: 1px solid #a7a8a9; height: 50px; line-height: 47px; color: #333; display: inline-block; text-align: center; font-size: clamp(1rem, var(--font-18), 1.125rem);} .bbs-btn .btn-line + .btn-line{margin-left: 10px;} .bbs-btn .btn-line.btn-success span{color: #fff;} .bbs-btn .btn-line.btn-primary span{color: #fff;} .bbs-list-search{margin-top: 40px;} .bbs-list-search .search-wrap{display: flex; align-items: center; justify-content: center;} .bbs-list-search .search-wrap li{flex-direction: row; position: relative;} .bbs-list-search .search-wrap li .select-box{width: 120px; border: 0; margin-right: 20px; padding-right: 10px;} .bbs-list-search .search-wrap li .select-box::after{position: absolute; top: 11px; right: 0; width: 1px; height: 15px; background: #121212; content: '';} .bbs-list-search .search-wrap li input[type=text]{border: 0; height: 38px; width: auto;} .bbs-list-search .search-wrap li input[type=text]::placeholder{text-decoration: underline;} .bbs-list-search .search-wrap li .btn-search{ background: url('../images/icons/ico-search.png') no-repeat center/cover; width: 16px; height: 16px; margin-top: -5px;} .bbs-list-footer{overflow: hidden; margin-top: 40px;} .bbs-list-footer .btn{padding: 7px 12px;} .empty-wrap { padding:100px 0 66px; margin:0 auto; text-align:center; } .empty-wrap .icon { margin-bottom:10px;} .empty-wrap p {font-size: clamp(1rem, var(--font-18), 1.125rem); font-weight: 500; letter-spacing:-0.5px;} .empty-wrap p span {color:#666} .round-box{background-color: #f9f9f9; width: 10rem; height: 10rem; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; margin-bottom: 1.875rem;} .round-box .ico-cart{width: 80px; height: 88px;} .empty-wrap .round-box .icon{margin-bottom: 0;} .empty-wrap .btn-round{border-radius: 1.25rem; border: 1px solid #cbcbcb; padding: 0; width: 7.5rem; height: 2.5rem; line-height: 2.5rem; margin-top: 1.875rem;} .empty-wrap .btn-wrap { text-align:center} .empty-wrap .btn-wrap a {min-width:100px} .empty-wrap .btn-wrap a + a { margin-left:4px} .empty-post{padding: 50px 0 !important; text-align: center;} .bbs-new { display: inline-block;background:#fe0000; width:5px;height:5px; border-radius: 5px; font-weight: 700; margin-left: 3px;vertical-align:middle; position: relative;top:-5px} .bbs-new + a {vertical-align:middle} .bbs-icon{display: inline-block; background: #f2f2f2; width: 15px; height: 15px; line-height: 15px; font-size: 13px; text-align: center; vertical-align: text-bottom; margin-left: 3px;} .bbs-icon.download{background-image: url('../images/icons/ico_file.png'); width: 16px; height: 16px; } .list-banner{margin-top: 1.875rem;} .list-banner .inner{display: flex; align-items: center; background-color: #ede6d5; justify-content: space-between; padding: 1.25rem 1.875rem;} .list-banner .inner .ico-help{margin-top: 2px;} .list-banner .inner .btn-white{line-height: 1; padding: 1.125rem 6.78875rem; font-weight: 600;} .btn-white{background-color: #fff;} .section-last{padding-top: 0;} .bbs-card{position: relative;} .bbs-card .grid-list .grid-item{border: 1px solid #d0d0d0; padding: 10px; display: flex; margin-bottom: 1.875rem; height: 11.125rem;} .bbs-card .grid-list .grid-item .grid-image{flex-shrink: 0; max-width: 7.5rem; margin-right: 1.25rem;}/* */ .bbs-card .grid-list .grid-item .grid-image img{width: auto; max-width: 100%;}/* margin-right: 1.25rem; */ .bbs-card .grid-list .grid-item .grid-content{flex-grow: 1;} .bbs-card .grid-item .grid-title{color: #121212; font-weight: 600; font-size: 1.125rem; text-align: left;} .bbs-card .grid-item .grid-desc{color: #121212; font-size: 0.9375rem;} .bbs-card .grid-item .line{width: 30px; height: 3px; background-color: #121212; margin: 1.25rem 0;} .page-contact .bbs-wrap .bbs-tab-wrap{margin-bottom: 2.5rem;} .page-contact .bbs-wrap .bbs-tab li{margin-right: 0.625rem;} .page-contact .bbs-wrap .bbs-tab li a{width: 7.5rem; } .bbs-banner{padding-top: max(1.875rem, var(--vw-60)); position: relative;} .bbs-banner .bbs-bg{background-position: center; background-repeat: no-repeat; background-size: cover; height: max(12.5rem, var(--vw-680)); max-height: 680px; display: flex; align-items: center; justify-content: flex-end;} .bbs-banner .bbs-bg.gallery{background-image: url('../images/board/gallery-jumbo.jpg');} .bbs-banner .bbs-bg.case-study{background-image: url('../images/board/casestudy-jumbo.jpg');} .bbs-banner .bbs-bg.catalogue{background-image: url('../images/board/catalogue-jumbo.jpg');} .bbs-banner .bbs-bg.architects{background-image: url('../images/board/for Architects-jumbo.jpg');} .bbs-banner .bbs-bg.custom-made{background-image: url('../images/board/Custom-Made-jumbo.jpg');} .bbs-banner .inner{position: absolute; top: max(1.875rem, var(--vw-120)); right: max(1.875rem, var(--vw-120)); background-color: rgba(255, 255, 255, 0.95); display: inline-block; padding: 3.75rem; height: max(15rem, 22.917vw); width: 35rem;} .bbs-banner .inner h2{font-weight: 700; font-size: clamp(1.5rem, var(--font-36), 2.25rem); line-height: 1;} .bbs-banner .inner .desc{font-size: clamp(1rem, var(--font-20), 1.25rem); margin-top: 3.125rem;} .grid-gallery-products{grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;} .grid-gallery-products .image{margin-bottom: 0.625rem;} .grid-gallery-products .image img{width: 100%; height: 100%; object-fit: cover; max-height: 123px;} .grid-gallery-products .title{font-weight: 600; font-size: clamp(1rem, var(--font-20), 1.25rem);} .bbs-gallery .grid-list .item{position: relative; padding-bottom: 0; margin-bottom: 0;} .bbs-gallery .grid-list .item .grid-image{border: 0;} .bbs-gallery .grid-image{margin-bottom: 1.25rem;} .bbs-gallery .grid-image .border{position: absolute; top: 0; left: 0; border: 1px solid #e3e3e3; width: 100%; height: 100%;} .bbs-gallery .grid-title{font-weight: 600; font-size: clamp(1.125rem, var(--font-24), 1.5rem);} .bbs-gallery .grid-desc{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .paging-wrap{margin-top: max(1.875rem, var(--vw-60)); position: relative;} .paging-wrap .btn-more{padding: 0.9375rem 3.125rem; border: 1px solid #a0a0a0;} .paging-wrap.hide{display: none;} /********** * ## Board view **********/ .bbs_btn { text-align:center; margin:20px auto 0} table.bbs-view { width:100%;table-layout:fixed; word-break:break-all; border-top:2px solid #777} table.bbs-view td { border-bottom:1px solid #ccc; padding:20px 0;} table.bbs-view td img { max-width:100%} table.bbs-view td.date { text-align:right} table.bbs-view td.subject {text-align:left;} table.bbs-view td.subject .detail-header { padding:15px 30px; font-size: 14px; color: #666; letter-spacing: -0.5px; position: relative;} table.bbs-view td.subject .detail-header .info{background: none; margin-right: 10px;} table.bbs-view td.subject .detail-header .info em{color: #333; padding-right: 3px;} table.bbs-view td.subject .detail-header .label-type { position:absolute; top:50%; margin-top:-13px;right:30px} .label-type.end {background-color: #999;} .label-type span {background: #f42534; display: inline-block; padding: 8px 10px; color: #fff; font-size: 13px; line-height: 1em;} table.bbs-view td.subject .detail-header p.hd-cate {color:#333; margin-bottom:10px; font-weight: 500; font-size: 15px} table.bbs-view td.subject .detail-header p.hd-tit {color:#333; font-size:34px; padding-bottom:15px;letter-spacing:-1px; font-weight: 500; max-width: 90%; line-height: 1.3em; } table.bbs-view td.subject .detail-header p.hd-tit span + span { margin-left:10px} table.bbs-view td.subject .detail-header p .type { padding-right:10px; margin-right:15px; border-right:1px solid #d9d9d9} table.bbs-view td.subject a{ color:#333} table.bbs-view td.subject a:hover { color:#333; text-decoration:underline} table.bbs-view td.subject p.date {display:none; color:#777; margin-top:4px; clear:both; } table.bbs-view td.subject ul li { font-size:14px; color:#666; float:left; padding:10px;} table.bbs-view td.subject ul li:first-child { padding-left:0} table.bbs-view td.subject ul li.dot { padding:10px 0} table.bbs-view thead td { padding:16px 0} table.bbs-view tbody td { border-bottom:0} table.bbs-view tbody td.contents { text-align:left; padding:30px; line-height:1.8em; word-break:break-word; overflow:hidden} table.bbs-view tbody td.contents #player {margin:0 auto 30px; display:block;} table.bbs-view tbody td.contents p {word-break:break-word; line-height: 1.4;} table.bbs-view tbody td.contents strong{font-weight: 500;} #post-content{min-height: 300px;} #post-content iframe{max-width: 960px; width: 100%; height: 56vh;} table.bbs-view tbody td.contents img { max-width:100%} table.bbs-view tbody td.contents.btn-wrap { text-align:center} table.bbs-view tbody td.file-wrap { border-bottom:1px solid #eee; padding:20px 30px 20px; text-align: left} table.bbs-view tbody td.file-wrap ul {display:table; width:100%; table-layout: fixed;} table.bbs-view tbody td.file-wrap ul li {display:table-cell; vertical-align: middle; padding-right:20px;} table.bbs-view tbody td.file-wrap ul li + li {width:88%} table.bbs-view tbody td.file-wrap p {color:#333; padding-left:25px; background:url('../images/icons/ico_file.png') left center no-repeat; line-height: 1.4em; font-weight: 500; font-size: 17px} table.bbs-view tbody td.file-wrap a { color:#666; display: inline-block; font-weight: 500;word-break: break-all; } table.bbs-view tbody td.file-wrap a:hover { color:#333; text-decoration:underline} table.bbs-view tbody td.btn-wrap { border-top:1px solid #eee; padding:30px; text-align: left} table.bbs-view tbody tr:last-child td {border-bottom:1px solid #ccc} table.bbs-view tfoot td { font-size:18px; color:#666; text-align:left } table.bbs-view tfoot td a {color:#333;} table.bbs-view tfoot td a .title { padding:0 10px; width:60%; overflow:hidden; display:inline-block; vertical-align:middle; white-space:nowrap; text-overflow:ellipsis} table.bbs-view tfoot td a:hover .title { text-decoration:underline; font-weight:500} table.bbs-view tfoot td.prev { text-align:left;} table.bbs-view tfoot td.next { text-align:right} table.bbs-view tfoot td.prev span.arrow { padding:0 10px 0 32px; border-right:1px solid #e5e5e5; background:url('../images/icons/arrow_prev.png') left center no-repeat} table.bbs-view tfoot td.next span.arrow { padding:0 32px 0 10px; border-left:1px solid #e5e5e5; background:url('../images/icons/arrow_next.png') right center no-repeat} .bbs-view .tag { text-align:left} .bbs-view .tag .tag_box { color:#666} .sns_area_title {font-size:18px; display:block; margin:0; height:auto;padding-bottom: 5px} .bbs_photo .sns_area_title {display:none} .bbs-view .tf_admin td .tf_img, .bbs-view .tf_admin td .tf_name_wrap { display:inline-block; vertical-align: middle} .bbs-view .tf_admin td .tf_name_wrap { background:url('../images/icons/admin.png') left center no-repeat; padding-left: 50px;} .bbs-view .tf_admin td .tf_img { margin-right:10px;} .bbs-view .tf_admin td .tf_img img{ width:50px; height:50px; border-radius: 50%} .bbs-view .tf_admin td p { font-size:14px; color:#333} .bbs-view .tf_admin td p span + span { margin-left:10px} .bbs-view .tf_admin td.tf_share { text-align:right;line-height: 1em} .bbs-view .tf_admin td.tf_share a + a { margin-left:5px} .bbs-bot {margin-top: max(2.5rem, var(--vw-120));} .bbs-bot ul {display:table; width:100%; padding:20px 0; table-layout: fixed; border-top:1px solid #ccc} .bbs-bot ul + ul {border-bottom:1px solid #ccc} .bbs-bot ul li {display:table-cell; vertical-align: middle; width:10%} .bbs-bot ul li.label {font-weight: 500; font-size: 14px; color: #333; padding: 0; border-radius: 0; text-align: left;} .bbs-bot ul li.arrow {width:70px; background:url("../images/icons/ico-angle-up.png") center no-repeat; background-size: 13px auto;} .bbs-bot ul li.subject {width:70%; color:#999} .bbs-bot ul li.subject a {color:#333;font-weight: 500;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 90%;display: block; } .bbs-bot ul li.date {color:#666; text-align: right;padding-right:30px; font-size: 14px } .bbs-bot ul + ul li.arrow {background-image:url("../images/icons/ico-angle-down.png")} .post-action{display: flex; margin-top: 1.875rem;} .post-action .btn-line{line-height: 1; padding: 7px 12px; } .post-action .btn-line:hover{text-decoration: none !important;} .post-action .btn{padding: 7px 0 7px;} .post-desc{padding: 20px; background-color: #f5f7fa; margin-bottom: 0.625rem; color: #111;} .list-group{position: relative;} .list-group-item:first-child {border-top-left-radius: 4px; border-top-right-radius: 4px;} .list-group-item:last-child {margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;} .list-group-item{display: flex; border: 1px solid #e1e1e1; padding: 0.3125rem 0.9375rem; margin-bottom: -1px;} .list-group-title{width: 10%; font-weight: 500;} .post-contents + .post-contents{margin-top: max(3.75rem, var(--vw-120));} .post-contents .inner{max-width: 1170px; margin: 0 auto;} .customStyle_borderTop {display: inline-block; padding-top: 0.5em; line-height: 1.3; vertical-align: middle; border-top: 0.2em solid #333; margin-bottom: 10px;} .customStyle_boxContainer {padding: 20px; } .customStyle_boxContainer_bg.customStyle_boxContainer_lg {background-color: #eaeaea; } .customStyle_boxContainer.customStyle_boxContainer_borderTB {padding-left: 0; padding-right: 0; border-top: 1px solid #444; margin-top: 0.625rem; line-height: 1.7 !important;} .custom-board-box{display: flex; margin-top: 1.25rem;} .custom-board-box table td{padding: 0.3125rem; line-height: 1.4;} .custom-board-box .image{flex-shrink: 0;} .pop-catalogue .pop-wrap{max-width: 1200px;} .pop-catalogue .pop-content .inner{background-color: #e3e3e3; position: relative; padding: 1.875rem 0.9375rem; text-align: center;} .pop-catalogue .pop-content .inner .image{margin: 0 auto; width: max(16.25rem, var(--vw-480)); height: max(50vh, 38.75rem); max-height: 620px;} .pop-catalogue .pop-content .inner .image img{width: 100%; height: 100%; object-fit: cover;} .pop-catalogue .pop-content .bottom{background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: space-between; padding: 1.75rem; position: absolute; left: 0; right: 0; bottom: 0;} .pop-catalogue .pop-content .inner .title{color: #e3e3e3; font-weight: 600;} .pop-catalogue .pop-content .inner .btn-area{display: flex; align-items: center;} .pop-catalogue .pop-content .inner .btn-area a{padding: 0.5rem 1.25rem; font-size: 14px;} .pop-catalogue .pop-content .inner .btn-area .btn-download{background-color: #28282a; color: #fff;} .pop-catalogue .pop-content .inner .btn-area .btn-copy{background-color: #f2f2f2; margin-left: 10px;} .grid-all-image{grid-auto-rows: 240px;} .grid-all-image .item{overflow: hidden;} .grid-all-image .item::before{opacity: 0; content: ''; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.25); width: 100%; height: 100%; transition: all ease .3s;} .grid-all-image .item:hover .cont{opacity: 1;} .grid-all-image .item:hover::before{opacity: 1;} .grid-all-image .item .image{display: flex; object-fit: cover; width: 100%; height: 100%;} .grid-all-image .item .image img{display: block; width: 100%; height: 100%; object-fit: cover;} .grid-all-image .item .cont{opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.1); padding: 1.5625rem; transition: all ease .3s; color: #fff; z-index: 3;} .grid-all-image .item .cont .title{display: block;} .grid-all-image .item .cont .desc{display: block; margin-top: 10px; color: #f6f6f6;} /********* * ## Board write **********/ .bbs-write{padding: 30px; border-top: 2px solid #777;} /* .bbs-title{text-align: center; font-size: 18px;} */ .bt-label{display: block; margin-bottom: 5px;} .board-write .btn{width: 150px; height: 45px; line-height: 43px; padding: 0; font-size: 15px;} .board-table .category-input {width: 100%; position: relative;} .board-table .category-input .select-box {width: 30%; display: inline-block;} .board-table .category-input a.btn-info {position: absolute; right: 0; top: 0; height: 38px; line-height: 38px; padding: 0 10px;} .board-table .category-input label.error{display: block;} .board-table textarea.dx-input{min-height: 250px;} .well {min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f7f7f7; border: 1px solid #d1d1d1; } .well-sm {padding: 9px;} .passcord li {display: inline-block; margin-right: 5px; vertical-align: middle;} #captcha_key {height: 40px; line-height: 40px; max-width: 90px;} #captcha-reload {font-size: 0.40625rem; padding: 0.1875rem; background: #cdcdcd; border-radius: 2px; cursor: pointer; } .password-wrap .panel{margin: 100px auto;} /********** * ## COMMENT **********/ #comment_write_box{margin: 60px 0 20px;} .chk_comment_all_wrapper {padding: 15px 0 10px; font-size: 14px;} .comment_write_box_inner {margin-top:20px; padding:20px; border: 1px solid #ccc; border-radius: 5px;} .comment_write_button_area {margin-top:20px; display: flex; align-items: center; font-size: 14px;} .comment_write_button_area .checkbox{display: inline-block; margin-right: 5px;} .comment_write_button_area .btn-group{margin-top: 0; display: flex;} .comment_write_button_area .btn{min-width: auto;} .comment_write_button_area .btn-xs{padding: 3px 5px; background-color: #fff;} .comment_write_button_area .btn + .btn{margin-left: 10px;} #viewcomment{position: relative;} .comment-list-wrap{margin-top: 40px;} .media-wrap{border-top: 1px solid #f0f0f0; margin-top: 20px;} .media {clear: both; margin: 15px 0; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0;} .media, .media-body {overflow: hidden; zoom: 1;} .media-left, .media>.pull-left {padding-right: 10px;} .media-body, .media-left, .media-right {display: block;} .media-heading {font-size: 14px; overflow: hidden; margin-top: 0; margin-bottom: 5px; font-weight: 500;} .media .time{font-size:12px; padding-left:10px; color: #777;} .media .ip{font-size:12px; padding-left:10px; color: #777;} .media .reply{float:right; font-size:12px;} .media .reply a{padding-left:5px; font-weight: 400;} .media .label-warning{background: #888; padding: 2px 6px; margin-right: 4px; font-weight: 400; color: #fff;} .btn-manage-wrap{position: relative; display: inline-block;} .btn-manage-wrap .btn{margin-left: 10px;} .btn-admin-manage-layer { display:none;border:1px solid #ddd;position:absolute;background-color:#fff;z-index:99999;} .btn-admin-manage-layer div.item { height:23px;border-bottom:1px solid #ddd; cursor:pointer;padding-left:2px;padding-right:10px; } .btn-admin-manage-layer div.item { font:normal 11px 'dotum';line-height:23px; } .btn-admin-manage-layer div.item i { width:20px;text-align:center; } /********** * ## SEARCH — 통합검색 **********/ .page-search .page-search__inner { padding-top: 80px; padding-bottom: 120px; } .page-search .page-search__form { width: 100%; margin: 0 0 28px; } .page-search .page-search__bar { position: relative; display: block; width: 100%; max-width: none; } .page-search .page-search__input { display: block; box-sizing: border-box; width: 100%; height: 56px; padding: 0 52px 0 4px; border: 0; border-bottom: 2px solid #131313; border-radius: 0; background: transparent; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; line-height: 1.3; color: #131313; outline: none; } .page-search .page-search__input::placeholder { color: #959da4; font-weight: 400; } .page-search .page-search__submit { appearance: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .page-search .page-search__submit img { display: block; width: 20px; height: 20px; } .page-search .page-search__summary { margin: 0 0 40px; font-size: 15px; line-height: 1.5; color: #5e5e5e; } .page-search .page-search__summary strong { color: #131313; font-weight: 600; } .page-search .page-search__summary-count { display: inline-block; margin-left: 10px; color: #8a9299; } .page-search .page-search__hint { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #8a9299; } .page-search .page-search__section { margin: 0 0 56px; padding-top: 28px; border-top: 1px solid #e6eaee; } .page-search .page-search__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .page-search .page-search__section-title { margin: 0; font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; line-height: 1.3; color: #131313; letter-spacing: -0.02em; } .page-search .page-search__section-count { font-size: 14px; color: #8a9299; font-weight: 500; } .page-search .page-search__empty-text { margin: 0 0 16px; font-size: 14px; color: #8a9299; } .page-search .page-search__sample-list, .page-search .page-search__product-list, .page-search .page-search__post-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .page-search .page-search__sample-item, .page-search .page-search__product-item, .page-search .page-search__post-item { margin: 0; } .page-search .page-search__sample-item.is-placeholder { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px dashed #d5dbe1; border-radius: 8px; background: #fafbfc; opacity: 0.85; pointer-events: none; } .page-search .page-search__sample-list--posts .page-search__sample-item.is-placeholder { grid-template-columns: 1fr; } .page-search .page-search__sample-thumb { display: block; width: 88px; height: 66px; border-radius: 6px; background: linear-gradient(135deg, #e8eef4, #f3f5f7); } .page-search .page-search__sample-body, .page-search .page-search__product-body, .page-search .page-search__post-link { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .page-search .page-search__sample-meta, .page-search .page-search__product-brand, .page-search .page-search__post-meta { font-size: 12px; color: #8a9299; font-weight: 500; } .page-search .page-search__post-meta em { font-style: normal; color: #154670; } .page-search .page-search__sample-title, .page-search .page-search__product-name, .page-search .page-search__post-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: #131313; } .page-search .page-search__sample-desc, .page-search .page-search__product-desc, .page-search .page-search__post-excerpt { font-size: 14px; line-height: 1.55; color: #5e5e5e; } .page-search .page-search__product-link { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid #eef1f4; text-decoration: none; color: inherit; } .page-search .page-search__product-thumb { display: block; width: 88px; height: 66px; border-radius: 6px; overflow: hidden; background: #f3f5f7; } .page-search .page-search__product-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .page-search .page-search__product-price { font-size: 15px; font-weight: 600; color: #154670; } .page-search .page-search__post-link { padding: 16px 0; border-bottom: 1px solid #eef1f4; text-decoration: none; color: inherit; } .page-search .page-search__post-link:hover .page-search__post-title, .page-search .page-search__product-link:hover .page-search__product-name { color: #008cff; } @media (max-width: 767px) { .page-search .page-search__inner { padding-top: 56px; padding-bottom: 80px; } .page-search .page-search__input { height: 48px; font-size: 18px; } .page-search .page-search__sample-item.is-placeholder, .page-search .page-search__product-link { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } .page-search .page-search__sample-thumb, .page-search .page-search__product-thumb { width: 64px; height: 48px; } } .media-box .media{display: flex; } .media-box .media-left{flex-shrink: 0;} .media-box .media-body{flex-grow: 1;} .media-box .media-body .highlight{font-weight: 500;} /********** * #### NEWSLETTER **********/ .bbs-newsletter .grid-list .item{position: relative; padding-bottom: 0; margin-bottom: 0;} .bbs-newsletter .grid-list .item .grid-image{border: 0;} .bbs-newsletter .grid-image{margin-bottom: 0.625rem;} .bbs-newsletter .grid-image img{max-width: 100%;} .bbs-newsletter .grid-image .border{position: absolute; top: 0; left: 0; border: 1px solid #e3e3e3; width: 100%; height: 100%;} .bbs-newsletter .grid-image .default-image{border: 1px solid #eee; border-top: 5px solid #941e2f; position: relative;} .bbs-newsletter .grid-image .default-image .inner{border-top: 1px dotted #941e2f; padding: 5px; margin-top: 5px; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 15vw;} .bbs-newsletter .grid-image .default-image .logo{display: block; background: url('../images/newsletter/logo-tsl.svg') no-repeat center/cover; height: 20px; background-size: 100px auto; width: 100%;} .bbs-newsletter .grid-image .default-image .newsletter-logo{display: block; height: 50px; background: url('../images/newsletter/NEWSLETTER.svg') no-repeat center/cover; background-size: 240px auto; width: 100%;} .bbs-newsletter .grid-badge{top: 20px;} .bbs-newsletter .grid-title{font-weight: 600; } .subscribe-wrap{padding: 0 0.625rem; position: relative; height: 40px; line-height: 40px;} .subscribe-wrap .btn{margin-left: 0.625rem;} .layer-popup.pop-subscribe{bottom: 0; max-width: 500px; width: 100%; left: auto; right: 0; height: auto; top: auto;} .layer-popup.pop-subscribe .pop-wrap{max-width: 50rem; width: 95%; position: relative; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: #fff;} .layer-popup.pop-subscribe .pop-wrap .btn-close{width: 24px; height: 24px;} .layer-popup.pop-subscribe .pop-header h3{font-size: 1.5rem;} .layer-popup.pop-subscribe .layer-dim{display: none;} .layer-popup.pop-subscribe .pop-header{background-color: transparent; padding: 1.875rem 1.25rem; padding-bottom: 0;} .layer-popup.pop-subscribe .pop-content{background-color: transparent; padding: 1.875rem 1.25rem; font-size: 14px;} .layer-popup.pop-subscribe .pop-content .desc{margin-bottom: 0.625rem; color: #ccc;} .layer-popup.pop-subscribe .pop-content .btn-dark{background-color: #000; border-color: #000;} .mb-1{margin-bottom: 0.625rem;} .layer-popup.pop-subscribe .check-box label{margin-left: 1.25rem; font-size: 0.875rem;} .layer-popup.pop-subscribe .check-box label::before{top: 2px; width: 12px; height: 12px; } .layer-popup.pop-subscribe .check-box label::after{top: 4px; width: 10px; height: 10px; left: 2px;} .fixed-btn{position: fixed; right: 1.3vw; bottom: 10%; display: none; z-index: 10;} .fixed-btn.active{display: block;} .fixed-btn a{width: 3.75rem; height: 3.75rem; border-radius: 50%; background-color: #333; color: #fff; display: flex; align-items: center; justify-content: center;} .page-newsletter-post table.bbs-view tbody tr:last-child td{border-bottom: 0;} .page-newsletter-post table.bbs-view tbody td{padding: 0;} .page-newsletter-post table.bbs-view tbody td.contents{padding: 1.875rem; background-color: #f8f8f8; padding: 1.875rem;} .page-newsletter-post #post-content{max-width: 640px; margin: 0 auto; background-color: #fff;} /********** * ## ANIMATION **********/ @keyframes scaleUp { 0% {transform: scale(1)} 100% {transform: scale(1.2);} } @keyframes aniScaleDown { 0% {transform: scale(1.2)} 100% {transform: scale(1);} } @keyframes aniScreen{ from {felx: 0;} to {flex: 1;} } @keyframes aniLeftToRight{ from {right: -100px;} to {right: 0;} } /* animation slideUp */ @keyframes aniSlideUp { from {top: -100%;} to {top: -158%;} } /**** * aniRotating ****/ @-webkit-keyframes aniRotating /* Safari and Chrome */ { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes aniRotating { from { -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /**** * animation pf ****/ @keyframes aniPf { from {opacity: 0; right: -50px; } to {opacity: 1; right: 0; } } @-moz-keyframes aniPf { /* Firefox */ from {opacity: 0; right: -50px; } to {opacity: 1; right: 0; } } @-webkit-keyframes aniPf { /* Safari and Chrome */ from {opacity: 0; right: -50px; } to {opacity: 1; right: 0; } } @-o-keyframes aniPf { /* Opera */ from {opacity: 0; right: -50px; } to {opacity: 1; right: 0; } } @keyframes aniImageRight { from {width: calc(100% - 18.75%);} to {width: 40%; } } /**** * animation fadeIn ****/ @keyframes aniFadeIn { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes aniFadeIn { /* Firefox */ from {opacity: 0;} to {opacity: 1;} } @-webkit-keyframes aniFadeIn { /* Safari and Chrome */ from {opacity: 0;} to {opacity: 1;} } @-o-keyframes aniFadeIn { /* Opera */ from {opacity: 0;} to {opacity: 1;} } /* animation aniDown */ @keyframes aniDown { from {top: -200px;} to {top: 0;} } @keyframes aniUp { from {transform: translateY(10%); opacity: 0; visibility: hidden;} to {transform: translateY(0); opacity: 1; visibility: visible;} } @keyframes aniUpMega { from {transform: translateY(10%); opacity: 0; visibility: hidden;} to {transform: translateY(0); opacity: 1; visibility: visible;} } @keyframes aniLine { from {height: 0; opacity: 0; visibility: hidden;} to {height: 100%; opacity: 1; visibility: visible;} } @keyframes aniLeftToRight { from {left: 280px;} to {left: 300px;} } /* animation gnb */ @keyframes aniGnb { from {height: 0;} to {height: 100vh;} } /**** * animation gradient ****/ @-webkit-keyframes aniGradient { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } @keyframes aniGradient { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } /* Preloader */ .handle-preloader.v-2{background: -webkit-linear-gradient(0deg, #c335dc, #ff3c56 100%);} .handle-preloader{background: -webkit-linear-gradient(0deg, #41a0ea, #f18e95 75%);} .handle-preloader {align-items: center; -webkit-align-items: center; display: flex; display: -ms-flexbox; height: 100%; justify-content: center; -webkit-justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9999999; } .preloader-close{position: fixed; z-index: 99999999; font-size: 18px; background: #fff; width: 30px; height: 30px; line-height: 26px; text-align: center; cursor: pointer; right: 15px; top: 15px; border-radius: 50%;} .handle-preloader .animation-preloader {position: absolute; z-index: 100;} .handle-preloader .animation-preloader .spinner{animation: spinner 1s infinite linear; border-radius: 50%; height: 150px; margin: 0 auto 45px auto; width: 150px; } .handle-preloader .animation-preloader .txt-loading {text-align: center; user-select: none;} .handle-preloader .animation-preloader .txt-loading .letters-loading:before{animation: letters-loading 4s infinite; content: attr(data-text-preloader); left: 0; opacity: 0; top:0; position: absolute;} .handle-preloader .animation-preloader .txt-loading .letters-loading{font-weight: 500; letter-spacing: 15px; display: inline-block; position: relative; font-size: 70px;line-height: 70px; text-transform: uppercase; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.30); } .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;} .handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;} .handle-preloader .loader-section {background-color: #ffffff; height: 100%; position: fixed; top: 0; width: calc(50% + 1px);} .handle-preloader .animation-preloader .txt-loading .letters-loading:before{color: #ffffff;} .handle-preloader .animation-preloader .spinner{border: 3px solid #ffffff; border-top-color: rgba(255, 255, 255, 0.5);} .btn-admin-wrap{position: absolute; right: 2vw; z-index: 5;} @keyframes spinner { to {transform: rotateZ(360deg);} } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } /* ========================================================================== Page stub / pilot subpages (inline styles extracted) ========================================================================== */ .page-stub__inner { padding: 80px 0 120px; } .page-stub__inner--tight-bottom { padding: 80px 0 40px; } .page-stub__title { margin: 0 0 16px; /* 1920px → 48px (2.5vw), 작을 때 최소 28px */ font-size: clamp(28px, 2.5vw, 48px); line-height: 1.2; color: #131313; } .page-stub__desc { margin: 0 0 32px; max-width: 560px; font-size: 16px; line-height: 1.6; color: #5e5e5e; } .page-stub__desc--wide { max-width: 640px; margin-bottom: 40px; } .page-stub__actions { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px; } .page-stub__btn { display: inline-block; padding: 12px 18px; text-decoration: none; color: #131313; border: 1px solid #c8ced3; background: transparent; } .page-stub__btn--primary { background: #091f2c; border-color: #091f2c; color: #fff; } .page-stub__btn--chip { padding: 10px 14px; } /* —— About overview (section page) —— */ .page-about-overview { position: relative; } .page-about-overview .about-overview__side-nav { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; pointer-events: none; } .page-about-overview .about-overview__side-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; } .page-about-overview .about-overview__side-link { display: flex; align-items: center; gap: 10px; min-height: 22px; text-decoration: none; color: #8a9299; transition: color 0.2s ease; } .page-about-overview .about-overview__side-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.45; transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; } .page-about-overview .about-overview__side-label { font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; } .page-about-overview .about-overview__side-link:hover, .page-about-overview .about-overview__side-link:focus-visible { color: #154670; } .page-about-overview .about-overview__side-link:hover .about-overview__side-dot, .page-about-overview .about-overview__side-link:focus-visible .about-overview__side-dot, .page-about-overview .about-overview__side-link.is-active .about-overview__side-dot { opacity: 1; transform: scale(1.25); background: #008cff; } .page-about-overview .about-overview__side-link.is-active { color: #131313; } .page-about-overview .about-overview__side-link.is-active .about-overview__side-label { opacity: 1; font-weight: 600; } .page-about-overview .about-overview__slogan-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 90px); padding: 80px 24px 60px; box-sizing: border-box; text-align: center; width: 100%; } .page-about-overview .about-overview__slogan { margin: 0; max-width: 920px; font-family: "DM Sans", "Noto Sans KR", sans-serif; font-size: clamp(28px, 4.2vw, 52px); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; color: #131313; } .page-about-overview .about-overview__slogan-line { display: block; opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .page-about-overview .about-overview__slogan.is-inview .about-overview__slogan-line { opacity: 1; transform: translateY(0); } .page-about-overview .about-overview__slogan.is-inview .about-overview__slogan-line:nth-child(1) { transition-delay: 0.05s; } .page-about-overview .about-overview__slogan.is-inview .about-overview__slogan-line:nth-child(2) { transition-delay: 0.18s; } .page-about-overview .about-overview__slogan.is-inview .about-overview__slogan-line:nth-child(3) { transition-delay: 0.31s; } .page-about-overview .about-overview__slogan.is-leaving .about-overview__slogan-line { opacity: 0.15; transform: translateY(-18px); transition-duration: 0.45s; transition-delay: 0s; } .page-about-overview .about-overview-section--goal { display: block; min-height: auto; padding: 0 0 120px; } .page-about-overview .about-overview__goal-body { padding-top: 40px; padding-bottom: 40px; } .page-about-overview .about-overview-section { scroll-margin-top: 100px; min-height: 85vh; padding: 120px 0; box-sizing: border-box; } .page-about-overview .about-overview-section--muted { background: #f7f8f9; } .page-about-overview .about-overview-section--last { padding-bottom: 160px; min-height: 90vh; } .page-about-overview .about-overview-section .container { padding-left: 16px; padding-right: 16px; width: 100%; } .page-about-overview .about-overview__heading { margin: 0 0 16px; font-size: 32px; line-height: 1.3; color: #131313; } .page-about-overview .about-overview__text { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.7; color: #5e5e5e; } @media (max-width: 1100px) { .page-about-overview .about-overview__side-nav { left: 12px; } .page-about-overview .about-overview__side-label { position: absolute; left: 22px; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(16, 24, 31, 0.08); opacity: 0; pointer-events: none; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .page-about-overview .about-overview__side-link { position: relative; } .page-about-overview .about-overview__side-link:hover .about-overview__side-label, .page-about-overview .about-overview__side-link:focus-visible .about-overview__side-label, .page-about-overview .about-overview__side-link.is-active .about-overview__side-label { opacity: 1; transform: translateX(0); } } @media (max-width: 767px) { .page-about-overview .about-overview__side-nav { display: none; } .page-about-overview .about-overview__slogan-wrap { min-height: calc(100vh - 70px); padding: 64px 20px 48px; } .page-about-overview .about-overview-section { min-height: 70vh; padding: 88px 0; } .page-about-overview .about-overview-section--goal { padding-bottom: 88px; } } /* —— Embed form iframe —— */ .embed-form-frame { height: 100vh; margin: 0 auto; padding: 0; border: 0; width: 100%; } /* —— Etc legal tweaks —— */ .privacy-box.is-flush-top { padding-top: 0; } .privacy-box .info-box.is-spaced { margin-bottom: 20px; } .privacy-list-item { margin: 10px 0; }