@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(6rem, var(--header-height)); background-color: rgba(0, 0, 0, 0.8);}
#contents{position: relative; margin-top: max(6rem, 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;}

.container{margin:0 auto;padding:0 10px;max-width:1620px; position:relative; width: 100%;}
.container-sm{margin:0 auto;padding:0 1.5rem;max-width:1220px; position:relative; width: 100%;}
.container-full{margin:0 auto;padding:0 1rem; position:relative; width: 100%;}
.container-wide{margin:0 auto; padding: 0 1rem; 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.8rem 0; font-size: 14px;}
.header-tnb a{margin-left: 1rem;}
.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: 1rem;}

.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: 7rem; height: 3rem; line-height: 3rem; text-align: center; border-radius: 20px; padding: 0 1rem;}
.header-util .item{margin-left: 2.7rem; 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: 2rem;}
.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: 1.4rem 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: 96rem; 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: 1rem; 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: 6rem;}
.search-input-wrap .info p{color: #666; text-align: center; padding: 4.5rem 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: 1.5rem;}
.util .list li a.social{background-color: transparent; max-width: 56px; margin-bottom: 1.5rem;}
.util .list li a.cart{max-width: 56px; margin-bottom: 1.5rem;}
.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: 3.2rem 0; font-size: clamp(1.6rem, var(--font-16), 1.6rem); 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: 600;}
#gnb .topmenu > li.hover .mega-menu {display: block; opacity: 1; pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s}
#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;}
.mega-menu.open {display: block; opacity: 1; pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s}
.mega-menu.open .dropdown-menu{opacity: 1;}


.dropdown-menu{position: relative; white-space: nowrap; text-align: left; pointer-events: none; display: flex; height: 100%; opacity: 0; color: #28282a;}
.dropdown-menu.active{display: block;}
.dropdown-menu.active{opacity:1;transition:all 0.4s 0.4s;}
.dropdown-menu .menu-title{font-weight: 600; margin-bottom: 2rem; display: block;}
.dropdown-menu > li{text-align: left; line-height: 1.2;}
.dropdown-menu > li.depth1{margin-bottom: 2rem;}
.dropdown-menu > li + li{margin-left: 8rem;}
.dropdown-menu > li > a{position: relative; font-size: clamp(1.6rem, var(--font-16), 1.6rem); width: 100%; display: inline-block; font-weight: 600; transition: color .2s ease-in-out;}
.dropdown-menu > li > a:hover{color: #8f1d22;}
.dropdown-menu > li > a.font-xs{font-size: 1.2rem;}
.dropdown-menu > li span{position: relative;}

#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(6rem, var(--header-height)); z-index: 5; padding: 2.8rem 0;}
.mega-menu .in{display: flex; justify-content: space-between;}
.mega-menu .collection .dropdown-menu{display: block;}
.mega-menu .collection .dropdown-menu li + li{margin-top: 1.5rem; margin-left: 0;}
.mega-menu .collection .dropdown-menu li a{display: inline;}
.mega-menu .collection .dropdown-menu > li.depth1 > a{font-weight: 600;}
.mega-menu .collection .dropdown-menu > li > a{font-weight: 400;}

.menu-image{position: relative; opacity: 0; visibility: hidden;}
#gnb .topmenu > li.hover .menu-image{zoom: 1; visibility: visible; animation: aniPf 1s; opacity: 1;}

.bg-gnb{position:absolute; left:0; top:0; background-color: rgba(255, 255, 255, 0.9); opacity: 0; width:100%; height:0; overflow: hidden; z-index: -1; transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;}
.bg-gnb:before{display:block; content:""; width:100%; height: max(6rem, 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: max(383px, 16vw); opacity: 1; }

#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');}




/**********
* ## 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: #16d977;}
.dlpo-wrap .banner-item a{position: relative; z-index: 1; text-align: center; color: #fff; font-weight: 600; padding: 2.25rem 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;}


/**********
* ## FOOTER
**********/

.widget-wrap{display: flex; justify-content: space-between; padding-top: 10rem; color: #eceae5;}
.show-room{margin-bottom: 3rem;}
.show-room .title{font-size: clamp(1.6rem, var(--font-20), 2rem); font-weight: 600; margin-bottom: 2.5rem; 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.8rem;}
.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(3rem, 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: 3rem;}
.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: 3.4rem; color: #a0a0a0; padding-bottom: 10rem; font-size: 12px;}
.footer-company-wrap p{line-height: 1.8;}
.footer-company-wrap p + p{margin-top: 1.2rem;}
.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: 6rem; background-image: url('../images/logo-tsl-w.svg'); width: 180px; height: 20px;}

.footer-info{background-color: #28282a; padding: 2.3rem 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(3rem, 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: 4rem;}

.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: 2rem; height: 2rem; background-color: transparent; text-align: center; margin-left: 1rem; position: relative;}
.icon-btn{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.icon-btn .arrow{width: 2rem; height: 2rem; 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: 72rem; margin: max(6rem, var(--header-height)) auto; padding: max(6rem, var(--header-height)) 0;}
.panel-header{padding: 0 0 2rem; background-color: #fff;}
.panel-header.border{margin-bottom: 2rem; border-bottom: 1px solid #111;}
.panel-header h2{font-size: clamp(2.4rem, var(--font-36), 3.6rem); font-weight: 600; line-height: 1.2;}
.panel-header .desc{font-size: clamp(1.6rem, var(--font-24), 2.4rem); color: #666; font-weight: 400; margin-top: max(1.5rem, var(--vw-40));}
.panel-body{position: relative; margin: 0 auto;}
.panel-body .desc{margin-bottom: 15px; line-height: 1.5;}
.panel-link{margin-top: 1rem; 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: 4rem 0 0; margin-top: 4rem;}

.panel .tabs.line{justify-content: space-between; margin: 1.2rem 0 4rem;}
.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(1.6rem, var(--font-20), 2rem); text-align: center; padding: 1.5rem 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: 2rem;}
.login-box + .login-box{padding-bottom: 1rem;}
.panel-login .form-group{margin-bottom: 2rem;}

.login-box .input{height: max(5rem, var(--vw-60)); line-height: max(5rem, var(--vw-60));}
.panel-login .links{background-color: #f5f5f5; text-align: center; height: max(6rem, var(--vw-100)); display: flex; align-items: center; justify-content: space-evenly; margin-top: 4rem;}
.panel-login .links a{display: inline-block;}

.sns-login{text-align: center; margin-top: 4rem; border-top: 1px solid #cbcbcb; padding-top: 4rem;}
.sns-login h4{font-size: clamp(1.6rem, var(--font-20), 2rem);}
.sns-login .form-group{display: inline-flex; margin-top: 3rem; margin-bottom: 0;}
.sns-login .form-group + .form-group{margin-left: 6.5rem;}

.login-button{margin-top: 2rem;}
.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: 1rem;}
.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: 1rem;}

.guest-wrap{margin-top: 2rem;}
.guest-wrap h4{font-size: 0.85rem;}
.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.65rem;}
.guest-wrap .btn{margin-top: 1rem;}
.guest-wrap .checkbox-custom label{font-size: 0.65rem; letter-spacing: -1px;}

.guest-order-desc{background: #f5f5f5; padding: 2rem; margin-top: 2rem; text-align: center}

.logrin-row .label{font-size: 1.6rem; font-weight: 500; color: #000; line-height: 1; margin-bottom: 1rem; display: block;}


/* ## PASSWORD / FINDACCOUNT */
.target-row{display: none;}
.findaccount .form-table .phone-input{width: 50%;}

.result-message{padding: 1rem 0; text-align: center;}


.panel.findaccount .form-group{margin-bottom: 2rem;}
.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(1.6rem, var(--font-20), 2rem); text-align: center; padding: 2rem 0; line-height: 1;}
.tabs.dark li a.active{background-color: var(--theme-color); color: #fff;}

.register-section{}
.register-section + .register-section{margin-top: 8rem;}
.register-section .contact-top{margin-bottom: 4rem;}
.register-section .bs-number-input{width: auto;}
.register-section .contact-top .contact-title{font-size: clamp(1.8rem, var(--font-24), 2.4rem);}
.register-section .contact-form{max-width: 122rem;}
.register-section .contact-form.table-layout .form-group .label{width: 20%;}
.register-section .contact-form .input{max-width: 60rem;}
.register-section .email-input{max-width: 70rem;}

.check-agrea{margin-bottom: 1rem;}
.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: 1rem; margin-top: 3rem; 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: 1rem; color: #0a0a0a; padding: 1.5rem; margin-bottom: 0; background-color: #f5f5f5;}

.check-container{display: flex; justify-content: space-between; border: 1px solid #ddd; padding: 2rem;}
.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: 4rem; 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: 1.5rem;}

.help-box{background-color: #f5f5f5; margin-top: 2rem; padding: 2rem; display: block;}
.help-box .warning{color: #ff5b4d; background-color: transparent;}

.page-register .btn-wrap{margin-top: 10rem;}

.btn-group{display: inline-flex; justify-content: center; max-width: 74rem; width: 100%;}
.btn-group .btn-lg + .btn-lg{margin-left: max(2rem, var(--vw-40));}
.btn-group .btn{padding: 0; flex: 1; height: 4rem; line-height: 4rem;}
.btn.btn-lg{padding: 0; height: max(5rem, var(--vw-70)); line-height: max(5rem, var(--vw-70)); font-size: clamp(1.6rem, var(--font-20), 2rem);}

.result-place{font-size: 12px; display: inline-block; margin-left: 1rem;}
.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: 4rem;}
.d-inline-flex .radio-box + .radio-box{margin-left: 10px;}


.pass-modify .form-group{margin-bottom: 1rem;}
.pass-modify .form-btn{margin-top: 2rem;}


/**********
* ## RESULT
**********/
.result-wrap{position: relative; max-width: 80rem; margin: 16rem auto 10rem; text-align: center;}
.result-wrap h3{font-size: clamp(1.8rem, var(--font-24), 2.4rem); font-weight: 500; margin: 4rem 0 1.5rem; line-height: 1.4;}
.result-wrap .message{font-size: clamp(1.6rem, var(--font-20), 2rem); }
.result-icon{margin: 0 auto 4rem; text-align: center;}
.result-wrap .btn-wrap{margin-top: 6rem;}
.result-wrap .info-box{background-color: #f9f9f9; text-align: center; display: block; margin: 4rem auto 0; max-width: 60rem;}
.result-wrap .info-box p{font-size: clamp(1.6rem, var(--font-20), 2rem); color: #666;}
.result-wrap .info-box p + p{margin-top: 1rem;}

.status-wrap{text-align: center;}
.status-wrap h3{font-size: clamp(1.8rem, var(--font-24), 2.4rem); font-weight: 500; margin: 4rem 0 1.5rem; line-height: 1.4;}
.status-wrap .message{font-size: clamp(1.6rem, var(--font-20), 2rem); }

.cancel-calc-wrap{position: relative; margin-top: 2rem;}
.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: 1.6rem; text-align: center; color: #777;}
.cancel-calc-wrap ul li.unit{width: 5%;}
.cancel-calc-wrap .total-price{margin-top: 2rem; text-align: center; font-weight: 600; font-size: clamp(1.6rem, var(--font-20), 2rem);}

/**********
* ## MAIN
**********/
#main{position: relative; }
#main .section{padding: max(4rem, 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: 1.45rem 4rem; background-color: #0d0d0d; color: #fff;}
.btn-more-wrap a > .icon{margin-left: 4rem;}
.btn-more-wrap a.border{background-color: transparent; border: 1px solid #0d0d0d; color: #0d0d0d; padding: 1.35rem 4.25rem;}
.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(2.4rem, var(--font-64), 6.4rem); line-height: 1;}
.section-main-visual .screen-content .inner > p{font-size: clamp(1.8rem, var(--font-42), 4.2rem); line-height: 1; margin-top: 2.2rem;}
.section-main-visual .screen-content a{display: inline-block; border: 1px solid #0d0d0d; padding: 1.35rem 4rem; line-height: 1; margin-top: 5.4rem;}
.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: 2.6rem; left: 0; width: 100%; }
.section-main-visual .swiper-pagination .swiper-pagination-bullet-active{opacity: 1;}



.scroll-down{position: relative; bottom: 11rem; 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(2.8rem, var(--font-36), 3.6rem); font-weight: 600; }
.section-header-desc{font-size: 1.6rem; margin-top: 1.5rem;}

.section-header.line{display: flex; align-items: center; margin-bottom: 5.5rem;}
.section-header.line .line{background-color: #0d0d0d; width: 0; height: 2px; margin: 0 3rem; 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: -7rem; margin-top: -25px; background-image: url('../images/icons/arw-c-l-g.svg'); transition: background .2s ease;}
.swiper-arrows .btn-swiper-next{right: -7rem; 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: 1.2rem;}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity: 1;}

.gallery-swiper .swiper-arrows .btn-swiper-prev{left: 3rem;}
.gallery-swiper .swiper-arrows .btn-swiper-next{right: 3rem;}
.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(1rem, 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: 3rem; background-image: url('../images/icons/arw-l-w.svg'); width: 20px; height: 37px;}
.pop-gallery-swiper .swiper-arrows .btn-swiper-next{right: 3rem; 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: 12rem 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: 6rem;}
#section-02 .section-wrap .cont{padding: 12rem 0 12rem 6rem; background-color: #fff; z-index: 10;}
#section-02 .section-wrap .cont .text{margin-bottom: max(4rem, var(--vw-60)); font-size: clamp(1.6rem, var(--font-20), 2rem); 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(1.6rem, var(--font-20), 2rem);}
.grid .item .image img{width: 100%;}
.grid .item .desc{margin-top: 1rem;}

.grid-brand{grid-template-columns: 1fr 1fr 1fr; row-gap:90px; column-gap: 50px;}
.grid-brand .item .title{font-size: clamp(1.8rem, var(--font-24), 2.4rem); line-height: 1;}
.grid-brand .item .cont{padding: 3rem; background-color: #fafafb;}
.grid-brand .item .desc{font-size: clamp(1.6rem, var(--font-20), 2rem); margin: 2.2rem 0 3rem; 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: 1rem;}
.grid-collection .grid-badge{position: relative; left: 0; right: 0; bottom: 0; top: 0;}
.grid-collection .badge{border-radius: 0; padding: 0.95rem 3rem; color: #fff; font-size: 1.6rem; 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: 3rem; background-color: #f2f2f2; height: max(15rem, 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: 6rem 3rem 3rem; 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(1.6rem, var(--font-24), 2.4rem);}
.grid-resource .item .desc{margin-top: 1rem; 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: 6rem; column-gap: 4rem; 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: 1rem;}
.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: 9rem;  */
.brand-wrap .brand-card .cont .brand-logo {margin-bottom: 3rem;}
.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: 3rem;}
.brand-wrap .brand-card .cont .line.white {background-color: #e3e3e3;}
.brand-wrap .brand-card .cont h4 {font-weight: 700; font-size: clamp(2.4rem, var(--font-36), 3.6rem); 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.8rem, var(--font-20), 2rem); display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-height: 1.6; margin: 3rem 0 max(3rem, 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: 1.5rem; position: relative;}
.best-swiper .item .image img{width: 100%; height: 100%; max-height: 289px; 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(1.4rem, var(--font-20), 2rem); font-weight: 600; margin-bottom: 0.6rem;}
.best-swiper .swiper-arrows{margin-top: -42px;}

.tab-list{margin-bottom: max(3rem, 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: 2.3rem 3rem; color: #a0a0a0; font-size: clamp(1.6rem, var(--font-20), 2rem); 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.7rem 2rem;}

.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(1.6rem, var(--font-28), 2.8rem); font-weight: 400; margin-bottom: 2.5rem;}

#section-08 .image-wrap{position: relative; display: flex; justify-content: space-between; margin-top: max(4rem, 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(5rem, 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: 3.6rem; padding-top: 3.2rem;}
#section-08 dl dt{font-size: clamp(2.8rem, var(--font-36), 3.6rem); margin-bottom: 1.7rem; line-height: 1.4;}
#section-08 dl dd{font-size: clamp(1.6rem, var(--font-20), 2rem); 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(6rem, var(--vw-120)) 0;}
.section-page.first{padding-top: 10rem;}
.section-page.last{border-top: 1px solid #ccc; padding-bottom: max(12rem, var(--vw-200));}
.section-title{font-size: clamp(2.8rem, var(--font-36), 3.6rem); line-height: 1.28; font-weight: 600;}
.section-title em{font-size: clamp(1.6rem, var(--font-20), 2rem); line-height: 1; margin-left: 1rem;}
.section-desc{position: relative; font-size: clamp(1.6rem, var(--font-18), 1.8rem); color: #727273;}
.bg-desc{background-color: #f0f0f0; padding: 2rem 1rem; margin-bottom: 2rem;}
.section-image{margin-top: 60px;}
.section-title-wrap{text-align: center;}
.page-title{font-size: 1.2rem; color: #232323; font-weight: 600; line-height: 1;}
.section-content{position: relative;}

.sub .section-header{margin-bottom: 5.5rem;}
.section-header .section-desc{margin-top: 0.4rem;}
.section-header h4{font-size: clamp(3.2rem, var(--font-40), 4rem);}

.basic-section.section-page{padding-top: max(3rem, var(--vw-60));}
.basic-section .section-header .section-desc{font-size: clamp(1.8rem, var(--font-24), 2.4rem); 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 .inner{height: max(24rem, var(--vw-270)); max-height: 270px; max-width: 990px; padding: 0 3rem; 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(2.8rem, var(--font-36), 3.6rem) ; position: relative; line-height: 1.2; display: inline-block; font-weight: 600;}
.sub-top-visual .visual-header span{margin-left: 3rem;}
.sub-top-visual .visual-header .breadcrumb{margin-bottom: 0; margin-top: 1.1rem;}

.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-visual .visual-form{margin-top: 2.8rem;}
.sub-top-visual .visual-form .input{height: max(4rem, var(--vw-70)); line-height: max(4rem, var(--vw-70)); font-size: clamp(1.6rem, var(--font-20), 2rem); color: #0d0d00; padding-left: max(1.5rem, var(--vw-30)); max-width: 100%;}
.sub-top-visual .visual-form .search-input-wrap .btn-search{width: max(4rem, var(--vw-70)); height: max(4rem, var(--vw-70)); background-size: 25px auto;}

.sub-top-wrap{display: flex; flex-direction: column; height: 480px; }
.sub-top-content{display: flex; flex-direction: column; margin-top: 3.5rem; justify-content: center; height: 100%; position: relative;}

.sub-top-visual.support{background-image: url('../images/support/bg-help-top.png'); background-color: var(--theme-color);}
.sub-top-visual.download{background-color: #f2f2f2; background-image: url('../images/support/bg-download-top-v2.png'); }

.sub-top-visual.contact-us{background-image: url('../images/contact/contact-jumbo.jpg');}
.sub-top-visual.showroom{background-image: url('../images/contact/showroom-jumbo.jpg');}

.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(1.6rem, var(--font-20), 2rem); margin-top: 2.6rem;}


/**********
* #### SUB TAB
**********/
.sub-tab-wrap{margin: max(3rem, 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(1.6rem, var(--font-20), 2rem) ; color: #a0a0a0; padding: 1.95rem 3rem; 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 3rem; 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 3rem; align-items: center; margin-top: auto;}
.lnb-wrap h2{font-size: 1.2rem; 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: 5rem; 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: 3rem;}
.lnb-wrap .lnb-menu li{position:relative; margin-right: 3rem; font-size: 0.9rem; 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: 1.6rem 0; align-items: center;}
.breadcrumb-item{margin-left: 7px; font-weight: 500; line-height: 1; color: #0d0d0d; font-size: 1.6rem;  display: flex; align-items: center;}
.breadcrumb-item:first-child{margin-left: 0;}
.breadcrumb-item a{padding-right: 7px; position: relative; font-size: 1.6rem; 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: '&#xE001;'; 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(3rem, var(--vw-90)) 0 0;}
.subwrap-top.pc { overflow: hidden}
.subwrap-top h2{font-size: clamp(2.8rem, var(--font-40), 4rem); font-weight: 600; line-height: 1.2;}
.subwrap-top .desc{font-size: clamp(1.8rem, var(--font-24), 2.4rem); color: #666; font-weight: 400; margin-top: 4rem; line-height: 1;}

.subwrap-top.bg-top{background-color: #f0f0f0; margin-bottom: 2rem;}

.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(2.4rem, var(--font-36), 3.6rem); color: #121212; font-weight: 700;}


.sub-etc{position: relative;}
.sub-etc .section-header .section-title{font-size: clamp(2.4rem, var(--font-36), 3.6rem); font-weight: 400; margin-bottom: 0; }
.sub-etc .section-header{border-bottom: 1px solid #0a0a0a; padding: 6rem 0 4rem;}


.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%;}
.page-brands-view .section-banner .cont .title{margin-top: max(3rem, var(--vw-60)); font-weight: 600;}
.page-brands-view .section-banner .cont .inner{padding-left: 4rem; max-width: 600px;}
.page-brands-view .section-banner .cont .desc{margin-top: 1.5rem; 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(3.2rem, var(--font-64), 6.4rem);  padding-top: max(6rem, var(--vw-180)); padding-bottom: max(3rem, 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(30rem, var(--vw-600)); min-height: 600px;}

.overview-wrap .about{margin: max(6rem, var(--vw-200)) 0 max(6rem, 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(2.4rem, var(--font-42), 4.2rem); font-weight: 700; margin-bottom: max(3rem, var(--vw-60)); line-height: 1;}
.overview-wrap .about .inner .cont p{font-size: clamp(1.6rem, var(--font-20), 2rem); max-width: 72rem; line-height: 1.7;}
.overview-wrap .about .inner .cont .btn-wrap{text-align: left; margin-top: max(3rem, var(--vw-60)); display: flex; max-width: 62rem;}
.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: 1.4rem 0;}
.overview-wrap .about .inner .cont .btn-wrap a + a{margin-left: 2rem;}
.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: 2rem;}


/**********
* ## SUPPORT
**********/
.grid-help .item{background-color: #eceae5; }
.grid-help .item a{display: block; padding: 6rem 3rem;}
.grid-help .item.policy a{padding-bottom: 3rem;}
.grid-help .item h4{font-size: clamp(1.8rem, var(--font-24), 2.4rem); margin-bottom: 1.8rem; line-height: 1;}


/**********
* #### Inquiry
**********/
.inquiry-wrap{display: flex; border-top: 1px solid #a0a0a0; padding-top: max(3rem, var(--vw-120));}
.inquiry-wrap .contact-top{width: 25%; padding: 0; margin: 0; border: 0; padding-left: max(1.5rem, 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(4rem, var(--vw-120));}
.po-wrap h3{font-size: clamp(1.8rem, var(--font-24), 2.4rem); font-weight: 600; line-height: 1; margin-bottom: max(2.5rem, var(--vw-60));}
.po-wrap .cont{font-size: clamp(1.6rem, var(--font-20), 2rem);}
.po-wrap ol{margin-left: max(2rem, var(--vw-40));}


/**********
* ## Contact
**********/
.contact-form{position: relative; max-width: 93rem;}
.contact-form.table-layout .form-group{display: flex; margin-bottom: 3rem;}
.contact-form.table-layout .form-group .label{flex-shrink: 0; width: 25.807%; margin-bottom: 0; display: inline-block; font-size: 2rem; height: 5rem; line-height: 5rem;}
.contact-form.table-layout .form-group .cont{flex-grow: 1;}
.contact-form.table-layout .form-group .cont.static{line-height: 5rem;}
.contact-form.table-layout .form-group .select-box .btn-select{height: 4.8rem; line-height: 4.8rem; padding-left: 1.5rem;}
.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.8rem;}
.no-input{line-height: 5rem;}
.no-input .error-place{line-height: 1.2;}
.no-label{margin-left: 25.807%;}


.contact-form .form-group{margin-bottom: 3rem;}
.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.5rem 1rem; margin-right: 1rem; flex: 0 0 33.33%;}

.contact-form .form-input{margin-bottom: 6rem;}
.form-inner{margin-top: 1rem;}
.contact-form .input{height: 5rem; line-height: 5rem; padding-left: 1.5rem;}
.contact-form .select-box .btn-select{ background-color: #fff; height: 5rem; line-height: 5rem; padding-left: 1.5rem;}
.contact-form .label{font-size: 1.8rem; margin-bottom: 0.8rem; display: block; font-weight: 600;}
.contact-form textarea.input{min-height: 30rem; line-height: 1.35; padding: 1.5rem;}
.contact-form .input.border{border: 1px solid #d0d0d0; background-color: #f5f5f5; width: 10rem; padding-left: 1rem;}
.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.8rem; margin-bottom: 1.8rem;}
.contact-top .contact-title{font-size: clamp(2.4rem, var(--font-36), 3.6rem); font-weight: 600;}
.contact-top .contact-title .icon{margin-left: 2rem;}


.contact-container{display: flex;}
.contact-container .map-wrap{flex-shrink: 1; flex: 1;}
.contact-container .address-info{flex-grow: 0; background-color: #fff; padding: 4rem 2rem; width: 40rem; height: 40rem;}
.contact-container .address-info .line{width: 30px; height: 3px; background-color: #121212; margin-bottom: 2rem;}
.contact-container .address-info .form-group{margin-bottom: 4rem;}
.contact-container .address-info p{display: flex; align-items: center; font-size: 1.8rem;}
.contact-container .address-info p .icon{margin-right: 1rem; 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(6rem, var(--vw-120)) max(1.5rem, var(--vw-30));}
.contact-wrap .cont{width: 75%; display: flex;}
.contact-item{padding: max(6rem, var(--vw-120)) max(3rem, 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.8rem, var(--font-28), 2.8rem); }
.contact-item dl{margin-top: max(3rem, var(--vw-60)); font-size: clamp(1.6rem, var(--font-20), 2rem);}
.contact-item dl dt{font-weight: 600; line-height: 1; margin-bottom: 1.2rem;}


/**********
* #### SHOW ROOM
**********/
.showroom-wrap{position: relative; display: flex; padding-top: max(4rem, var(--vw-80));}
.showroom-wrap .view{flex-shrink: 0; width: 50%; position: relative;}
.showroom-wrap .view-tabs{justify-content: flex-start; position: absolute; top: 2rem; left: 2rem; display: flex; z-index: 1;}
.showroom-wrap .view-tabs li{flex: 0;}
.showroom-wrap .view-tabs li a{background-color: #fff; font-size: 1.6rem; padding: 0.9rem 4rem; 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: 1rem;}
.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(3rem, var(--vw-50)); text-align: left;}
.showroom-wrap .btn-border{line-height: 1; padding: 1.8rem 12rem; 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(6rem, var(--vw-120)); margin-top: max(6rem, var(--vw-120)); border-top: 1px solid #a0a0a0;}

/**********
* ## Form
**********/
.form-table {table-layout: fixed; margin-bottom: 2rem;}
.form-table th, .form-table td {padding: 1rem 0; position: relative;}
.form-table th {width: 18%; font-weight: 500; text-align: left; padding-left: 1rem; 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: 5rem; line-height: 5rem; 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: 1rem; }
.address-input .zipcode{display: flex;}
.address-input .zipcode .input{max-width: 100px;}
.address-input .zipcode .btn{margin-left: 1rem; height: 5rem}
.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(4rem, 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: 1rem;}
.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: 3rem; }
.info-box{display: flex; align-items: center; padding: 1.5rem; background-color: #f5f5f5; margin: 3rem 0;}
.info-icon{width: 75px; margin-right: 1rem; flex-shrink: 1;}
.info-icon img{max-width: 75px;}
.info-text{flex-grow: 0; color: #000;}
.info-text .info-title{font-size: 1.2rem; font-weight: 600;}

#fqnaform .btn-wrap{margin-top: 5rem; margin-bottom: 2.5rem;}



/* 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: 2rem 0 2rem 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:2rem; padding-left: max(1rem, 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(1rem, var(--vw-30)); overflow: hidden;}
.faq-wrap ul.faq li.faq-item .answer .answer-content {width: 90%; padding-left: 2rem; 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: 3rem;}
.faq-wrap .btn-wrap {margin-top:20px; text-align: center}



/**********
* ## MYPAGE
**********/
.mypage-wrap{position: relative;}
.mypage-wrap .header{display: flex; align-items: center; height: 12rem; margin-bottom: 4rem;}
.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(2.4rem, var(--font-36), 3.6rem);}
.mypage-wrap .header .welcome{background-image: linear-gradient(to top, #affaca, #9fd8f5); height: 100%; display: flex; justify-content: center; flex-direction: column; padding-left: 9rem; width: 60%;}
.mypage-wrap .header .welcome div{font-size: clamp(1.8rem, var(--font-24), 2.4rem); margin-bottom: 0.7rem; 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: 1.6rem; line-height: 1;}
.mypage-wrap .header .widget p{font-size: clamp(1.6rem, var(--font-20), 2rem);}


.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: 3rem 2rem; }
.mypage-content .left ul{margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid #cbcbcb;}
.mypage-content .left ul li{padding-top: 2rem; line-height: 1;}
.mypage-content .left ul li a{color: #343434;}
.mypage-content .left .title{font-size: clamp(1.6rem, var(--font-20), 2rem);}
.mypage-content .left .info a{display: block; color: #1f5c25; font-size: clamp(1.8rem, var(--font-24), 2.4rem); line-height: 1; display: block; font-weight: 700; margin: 3rem 0 2rem;}
.mypage-content .left .info p{color: #1f5c25;}
.mypage-content > .cont{flex-grow: 1; margin-left: max(3rem, var(--vw-60));}
.mypage-content .section-header{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #0a0a0a; padding-bottom: 2rem; margin-bottom: 4rem;}
.mypage-content .section-header h4{font-size: clamp(1.8rem, var(--font-24), 2.4rem);}
.mypage-content .section-header h4 .count{color: #ff5b4d; font-weight: 600; font-size: clamp(1.6rem, var(--font-20), 2rem); margin-left: 1rem;}
.mypage-content .section-header .more{color: #666;}
.mypage-content .section-header.with-form{display: block; }
.mypage-content .section-header.with-form h4{margin-bottom: 2rem;}

.mypage-content .section + .section{margin-top: 6rem;}

.status-wrap .step{border: 1px solid #0a0a0a; display: flex; align-items: center;}
.status-wrap .etc{display: flex; align-items: center; margin-top: 1rem;}
.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.8rem, var(--font-20), 2rem ); display: inline-block; line-height: 1;}

.status-wrap .step .item a{display: inline-block; padding: 3rem;}
.status-wrap .step .item span{margin-bottom: 1.5rem;}
.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: 1.2rem;}
.status-wrap .etc .item span{margin-left: 1.8rem;}
.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: 2rem; align-items: center; justify-content: center; margin-bottom: max(3rem, var(--vw-60));}
.point-wrap .point-box .text{font-size: clamp(1.6rem, var(--font-20), 2rem); font-weight: 600; margin: 0 3rem 0 1.5rem;}
.point-wrap .point-box .point{background-color: #fff; height: 5rem; padding: 0 3rem; display: flex; align-items: center; justify-content: center;}
.point-wrap .point-box .point em{font-size: clamp(2.4rem, var(--font-40), 4rem); color: #39a845; font-weight: 600; margin-right: 0.6rem;}

.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: 4rem;}
.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: 4rem; border-radius: 4px; background-color: #080d0a; padding: 0 2rem; font-size: 16px; margin-left: 10px;}

.order-wrap{margin-top: 4rem; margin-bottom: 2rem;}
.order-wrap a{color: #666; position: relative;}
.order-wrap a + a{padding-left: 2rem; margin-left: 2rem;}
.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: 2rem; color: #666; display: flex; align-items: center;}
.filter-wrap button{color: #666; line-height: 1.3; position: relative; margin-left: 2rem; padding-left: 2rem;}
.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(3rem, var(--vw-60));}
.coupon-info h5{display: flex; align-items: center; border-bottom: 1px solid #cbcbcb; padding-bottom: 1.2rem; margin-bottom: 1.8rem; font-weight: 600;}
.coupon-info h5 .icon{margin-right: 1rem;}
.coupon-info p{color: #666; line-height: 1.65;}


.qna-list li{border: 1px solid #d0d0d0; background-color: #f5f5f5; padding: 1rem;}
.qna-list li .title{font-size: 0.9rem; 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: 20rem;}
.file-input button{background-color: #343434; color: #fff; line-height: 5rem; height: 5rem; width: 10rem; margin-left: 1rem;}

.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: 2rem;}

.file-info{margin-top: 2rem; font-size: 1.2rem; color: #666;}
.file-info .label-req{font-size: 1.2rem;}
.file-info p + p{margin-top: 0.5rem;}

.file-view{line-height: 5rem; }
.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: 1rem 0.8rem; 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: 4rem;}
.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: 3rem 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: 2rem; background-color: #f5f5f5;}
.qna-wrap .reply .answer{margin-top: 2rem; padding-top: 2rem; 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: 2rem;}


/**********
* ## 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.5rem;}
.subject-etc{display: none; }

/**********
* ## MYPAGE REVIEW
**********/
.review-wrap .tabs{display: flex;}
.review-wrap .tabs li{position: relative;}
.review-wrap .tabs li a{width: 15rem; height: 4rem; line-height: 4rem; 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: 2rem 0; position: relative;}
.review-list .btn-area{margin-top: 3rem;}
.review-list .btn-area a{border-radius: 4px; width: 15rem; height: 4rem; line-height: 4rem; 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 2rem;}
.social-login-button{margin-right: 1rem;}


 
/**********
* ## BOARD
**********/
.bbs-wrap {min-height: 600px;}

.bbs-top {position: relative; margin-bottom: 2rem; 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(3rem, var(--vw-100));}
.bbs-tab {display: flex; justify-content: center; align-items: center;}
.bbs-tab li {position: relative; margin-right: 2rem;}
.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(6rem, 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(1.6rem, var(--font-18), 1.8rem);}
.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(1.6rem, var(--font-18), 1.8rem); font-weight: 500; letter-spacing:-0.5px;}
.empty-wrap p span {color:#666}

.round-box{background-color: #f9f9f9; width: 16rem; height: 16rem; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; margin-bottom: 3rem;}
.round-box .ico-cart{width: 80px; height: 88px;}
.empty-wrap .round-box .icon{margin-bottom: 0;}

.empty-wrap .btn-round{border-radius: 2rem; border: 1px solid #cbcbcb; padding: 0; width: 12rem; height: 4rem; line-height: 4rem; margin-top: 3rem;}

.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: 3rem;}
.list-banner .inner{display: flex; align-items: center; background-color: #ede6d5; justify-content: space-between; padding: 2rem 3rem;}
.list-banner .inner .ico-help{margin-top: 2px;}
.list-banner .inner .btn-white{line-height: 1; padding: 1.8rem 10.862rem; 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: 3rem; height: 17.8rem;}
.bbs-card .grid-list .grid-item .grid-image{flex-shrink: 0; max-width: 12rem; margin-right: 2rem;}/*  */
.bbs-card .grid-list .grid-item .grid-image img{width: auto; max-width: 100%;}/* margin-right: 2rem; */
.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.8rem; text-align: left;}
.bbs-card .grid-item .grid-desc{color: #121212; font-size: 1.5rem;}
.bbs-card .grid-item .line{width: 30px; height: 3px; background-color: #121212; margin: 2rem 0;}

.page-contact .bbs-wrap .bbs-tab-wrap{margin-bottom: 4rem;}
.page-contact .bbs-wrap .bbs-tab li{margin-right: 1rem;}
.page-contact .bbs-wrap .bbs-tab li a{width: 12rem; }



.bbs-banner{padding-top: max(3rem, var(--vw-60)); position: relative;}
.bbs-banner .bbs-bg{background-position: center; background-repeat: no-repeat; background-size: cover; height: max(20rem, 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(3rem, var(--vw-120)); right: max(3rem, var(--vw-120));  background-color: rgba(255, 255, 255, 0.95); display: inline-block; padding: 6rem; height: max(24rem, 22.917vw); width: 56rem;}
.bbs-banner .inner h2{font-weight: 700; font-size: clamp(2.4rem, var(--font-36), 3.6rem); line-height: 1;}
.bbs-banner .inner .desc{font-size: clamp(1.6rem, var(--font-20), 2rem); margin-top: 5rem;}


.grid-gallery-products{grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.grid-gallery-products .image{margin-bottom: 1rem;}
.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(1.6rem, var(--font-20), 2rem);}


.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: 2rem;}
.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.8rem, var(--font-24), 2.4rem);}
.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(3rem, var(--vw-60)); position: relative;}
.paging-wrap .btn-more{padding: 1.5rem 5rem; 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(4rem, 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: 3rem;}
.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: 1rem; 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.5rem 1.5rem; margin-bottom: -1px;}
.list-group-title{width: 10%; font-weight: 500;}


.post-contents + .post-contents{margin-top: max(6rem, 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: 1rem; line-height: 1.7 !important;}
.custom-board-box{display: flex; margin-top: 2rem;}
.custom-board-box table td{padding: 0.5rem; 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: 3rem 1.5rem; text-align: center;}
.pop-catalogue .pop-content .inner .image{margin: 0 auto; width: max(26rem, var(--vw-480)); height: max(50vh, 62rem); 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: 2.8rem; 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.8rem 2rem; 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: 2.5rem; 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.65rem; padding: 0.3rem; 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 .section-title{font-size: 2.4rem; margin-bottom: 1rem;}
.page-search .input-container .input{border:0; border-bottom: 2px solid #000;}
.page-search .input-container .btn-search{position: absolute; top: 50%; right: 1.5rem; background: url('../images/icons/search-b.svg') no-repeat center/cover; width: 18px; height: 21px; text-indent: -9999px; transform: translate(0, -50%);}
.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;}


/**********
* ## 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; }
}

/****
* 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(100%); 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;}
}


/* 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);
	}
}