@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: relative; z-index: 10; transition: all 0.3s; height: max(10rem, 6.25vw); border-bottom: 1px solid #f9f9f9;} #contents{position: relative; } #footer{position:relative; bottom: 0; width: 100%; color: #666; padding: 0; clear:both; z-index: 5;} .detail-page #header{position: relative;} .detail-page #contents{margin-top: -3.5rem;} .container{margin:0 auto;padding:0 10px;max-width:1420px; 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%;} #header .logo{display: inline-block; z-index: 10;} #header .logo h1{font-size: 0;} .logo a{display: inline-block; width: 210px; height: 60px; background: url('../images/logo-gb-c.png') 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;} .header-util .m-user{display: none;} .header-util .m-user a{color: #39a845; border: 1px solid #39a845; 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;} .header-util .item:first-child{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: 8px;} .util-dropdown{position: relative; display: inline-block;} .util-dropdown a{color: #f0f5fc; display: inline-flex; align-items: center;} .util-dropdown a .icon{margin-left: 10px; transition: transform .2s ease;} .util-dropdown.on a .icon{transform: rotate(180deg);} .user-icon-menu{opacity: 0; position: absolute; top: -172px; left: 0; width: 100px; left: 50%; transform: translate(-50%, 0); transition: opacity .3s ease;} .util-dropdown.on .user-icon-menu{opacity: 1; top: 100%;} .user-icon-menu ul{background-color: #fff; display: flex; flex-direction: column; padding: 10px 0; border-radius: 6px; box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.16), 0 3px 12px 0 rgba(0, 0, 0, 0.12)} .user-icon-menu li{padding: 5px 10px;} .user-icon-menu li a{display: block; color: #888; text-align: center; font-size: 1.4rem;} .user-icon-menu li a:hover{color: #000;} .user-icon-menu .pop-arrow{text-align: center; line-height: 1;} .pop-arrow .ico-arrow{display: inline-block; margin-bottom: -3px; width: 0px; height: 0px; border-bottom: 7px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent;} .ico-down{background-image: url('../images/icons/ico-down-w.png'); width: 1rem; height: 0.7rem; } /* .util-button{position: relative;} .util-button button{display: inline-block; margin: 0; } .util-button .icon-bar {background-color: #444; width: 24px; height: 2px; display: block; } .util-button .icon-bar:nth-child(2){margin: 8px 0;} */ .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;} .search-input-wrap input{background: #fff; border: 0; height: 50px; line-height: 50px; border-bottom: 2px solid #0a0a0a; width: 100%; padding-left: 2rem; font-size: clamp(1.8rem, 1.25vw, 3.2rem);} .search-input-wrap .btn-search{width: 50px; height: 50px; background: url('../images/icons/search.png') no-repeat center; background-size: 28px auto; position: absolute; top: 0; right: 2rem;} .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%; top: 46%; 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:0;right:0px;display:block;height:16px;line-height:16px;border-radius:8px;background:#ff5b4d;font-size:12px;color:#fff;padding:0 5px} .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: left .5s ease-in-out;} #gnb .topmenu{display: flex; justify-content: center; align-items: center; height: 100%; background-color: #fff; box-shadow: 0px 3px 6.7px 0.4px rgba(0, 0, 0, 0.05); border-radius: 28.5px} #gnb .topmenu > li{position: relative; display: flex; height: 100%; align-items: center;} #gnb .topmenu > li > a{display: flex; align-items: center; justify-content: center; position: relative; width: 100%; padding: 1.25rem 4rem; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); white-space: nowrap; transition: padding .3s; height: 100%; border-radius: 28.5px; } #gnb .topmenu > li > a:hover, #gnb .topmenu > li.active > a, #gnb .topmenu > li.hover > a{background-image: linear-gradient(to top, #39a845, #7fc844); color: #fff;} #gnb .topmenu > li.hover .dropdown-menu {opacity: 1;;pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s} #gnb .topmenu > li > .dropdown-menu{position: absolute; width: 100%; top: 136%; left: 50%; transform: translate(-50%, 0); white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; background-color: #effaed; border-radius: 2.8rem; padding: 2.8rem 0;} #gnb .topmenu > li > .dropdown-menu.active{display: block;} #gnb .topmenu > li > .dropdown-menu.active{opacity:1;transition:all 0.4s 0.4s;} #gnb .topmenu > li > .dropdown-menu > li{text-align: center; line-height: 1.2;} #gnb .topmenu > li > .dropdown-menu > li + li{margin-top: 2.4rem;} #gnb .topmenu > li > .dropdown-menu > li > a{position: relative; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); width: 100%; display: inline-block;} #gnb .topmenu > li > .dropdown-menu > li > a:hover{color: #39a845; font-weight: 600;} #gnb .topmenu > li > .dropdown-menu > li > a.font-xs{font-size: 1.2rem;} #gnb .topmenu > li > .dropdown-menu > li span{position: relative;} #header.open {background-color: transparent; box-shadow: 0px 1px 16px 4px rgba(0, 0, 0, 0.05);} #header.open .util .list{transform: translateX(-1rem); } /* #header.open .topmenu > li > a{padding: 0 4em} #header.open .topmenu > li.menu-03 > a{padding: 0 5em} #header.open .topmenu > li:before{height: 400px; transition: height ease-in-out.5s, opacity ease-in-out .5s } #header.open #header.open .topmenu > li > a:before {background-color: #fff} #header.open .topmenu a svg {fill: #fff} */ #header.open .util-dropdown a{color: #f0f5fc;} #header.open .ico-down{background-image: url('../images/icons/ico-down-w.png');} #header.open .user-icon-menu li a{color: #0a0a0a;} /********** * ## 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 **********/ .footer-info-top{background-color: #343434; padding: 2rem 0;} .footer-info-wrap{padding: 4rem 0 4.5rem;} .footer-widget .tel{color: #f5f7f9; font-size: 3.6rem; font-weight: 700; margin-bottom: 2.6rem;} .footer-widget.menu{display: flex; } .footer-widget.other p{color: #f5f7f9;} .footer-widget.logo a{background-image: url('../images/logo-gb-c.png'); width: 178px; height: 50px; opacity: 0.6;} .footer-widget.logo img{max-width: 174px; display: inline-block; margin-left: 2rem;} .footer-widget.info{margin-top: 3rem;} .footer-widget.info p + p{margin-top: 3px;} .footer-etc{padding: 0 0 4rem; display: flex; justify-content: space-between; align-items: flex-end;} .footer-etc p{line-height: 1;} .copyright {letter-spacing: -0.5px; color: #cbcbcb;} .pay-logo{display: flex; align-items: center;} .pay-logo span{display: inline-block; margin-left: 2rem;} .pay-logo span img{opacity: 0.5;} .social-link{margin-bottom: 1.5rem;} .social-link:last-child{margin-bottom: 0;} .footer-links{display: flex; align-items: center; justify-content: space-between;} .footer-links li a{display: inline-block; color: #cbcbcb; margin-right: max(3rem, 3.125vw);} .footer-links li:last-child a{color: #fff; margin-right: 0;} .footer-social{background-color: #fff; border-radius: 2rem; padding: 0 2.8rem; height: 4rem; display: flex; align-items: center;} .footer-social a{padding: 0.5rem; display: inline-block; line-height: 1;} .footer-social a + a{margin-left: 1.8rem;} .ico-facebook{background-image: url('../images/common/sns-facebook.png'); width: 14px; height: 24px;} .ico-instagram{background-image: url('../images/common/sns-instagram.png'); width: 22px; height: 22px;} .ico-blog{background-image: url('../images/common/sns-blog.png'); width: 22px; height: 20px;} .ico-facebook:hover{background-image: url('../images/common/sns-facebook-h.png');} .ico-instagram:hover{background-image: url('../images/common/sns-instagram-h.png');} .ico-blog:hover{background-image: url('../images/common/sns-blog-h.png');} .buy-menu, .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: 100%;} .icon-arrow-wrap{width: 2rem; height: 2rem; background-color: #f2eee9; text-align: center; border-radius: 50%; 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: -100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} .icon-btn .arrow + .arrow{left: 0;} [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(3rem, 5.21vw) auto;} .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, 2.08334vw, 4.8rem); font-weight: 600; line-height: 1.2;} .panel-header .desc{font-size: clamp(1.8rem, 1.25vw, 3.2rem); color: #666; font-weight: 400; margin-top: max(1.5rem, 2.083334vw);} .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, 1.041665vw, 2.4rem); text-align: center; padding: 1.5rem 0; } .panel .tabs.line li a:hover{color: #0a0a0a;} .panel .tabs.line li a.active{border-bottom-color: #39a845; 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, 3.125vw); line-height: max(5rem, 3.125vw);} .panel-login .links{background-color: #f5f5f5; text-align: center; height: max(6rem, 5.209vw); 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, 1.041665vw, 2.4rem);} .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, 1.041665vw, 2.4rem); text-align: center; padding: 2rem 0; line-height: 1;} .tabs.dark li a.active{background-color: #0a0a0a; color: #fff;} .register-section{margin-top: 8rem;} .register-section .contact-top{margin-bottom: 4rem;} .register-section .bs-number-input{width: auto;} .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;} .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, 2.0887vw);} .btn-group .btn{padding: 0; flex: 1; height: 4rem; line-height: 4rem;} .btn.btn-lg{padding: 0; height: max(5rem, 3.646vw); line-height: max(5rem, 3.646vw); font-size: clamp(1.6rem, 1.041665vw, 2.4rem);} .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, 1.25vw, 3.2rem); font-weight: 500; margin: 4rem 0 1.5rem; line-height: 1.4;} .result-wrap .message{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); } .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, 1.041665vw, 2.4rem); color: #666;} .result-wrap .info-box p + p{margin-top: 1rem;} .status-wrap{text-align: center;} .status-wrap h3{font-size: clamp(1.8rem, 1.25vw, 3.2rem); font-weight: 500; margin: 4rem 0 1.5rem; line-height: 1.4;} .status-wrap .message{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); } .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, 1.041665vw, 2.4rem);} /********** * ## MAIN **********/ #main{position: relative;} #main .section{padding: max(3rem, 6.25vw) 0; z-index: 1;} .section{position: relative;} /* .btn-more{width: 10rem; height: 4rem; line-height: 4rem; background-color: #5e5e5e; color: #fff; display: inline-block; text-align: center; } */ .btn-more{width: 100%; height: 5rem; border: 1px solid #cbcbcb; color: #0a0a0a;} .full-screen {display: block; width: 100%; height: 100vh; overflow: hidden; } .main-container{display: flex; margin: 4rem 0 7rem;} .main-container .content{flex-grow: 1; padding: 0 4rem 4rem 0; width: calc(100% - 35rem);} .main-container .widget{flex-shrink: 0; border-left: 1px solid #cbcbcb; padding: 4rem; width: 35rem;} .main-container .widget h4{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); font-weight: 600;} .main-container .widget h4 span{font-weight: 400; display: inline-block;} .main-container .widget .btn-wrap a{display: block; border: 1px solid #cbcbcb; padding: 0.65rem 0; color: #343434; text-align: center; transition: all ease .2s;} .main-container .widget .btn-wrap a:hover{-webkit-box-shadow:inset 0px 0px 0px 1px #1f5c25; -moz-box-shadow:inset 0px 0px 0px 1px #1f5c25; box-shadow:inset 0px 0px 0px 1px #1f5c25; border-color: #1f5c25; font-weight: 600; color: #1f5c25; } .main-container .widget section{border-bottom: 1px solid #cbcbcb;} .main-container .widget .section-member .btn-group{border-bottom: 1px solid #cbcbcb; margin-top: 2rem; padding-bottom: 4rem; display: flex; align-items: center; justify-content: center;} .main-container .widget .section-member .btn-group a{border-radius: 2rem; border: 1px solid #cbcbcb; display: inline-block; flex: 1; height: 4rem; line-height: 4rem; text-align: center; transition: all ease .3s;} .main-container .widget .section-member .btn-group a:hover{color: #39a845; border-color: #39a845; -webkit-box-shadow:inset 0px 0px 0px 1px #39a845; -moz-box-shadow:inset 0px 0px 0px 1px #39a845; box-shadow:inset 0px 0px 0px 1px #39a845; font-weight: 600;} .main-container .widget .section-member .btn-group a + a{margin-left: 1rem;} .main-container .widget .section-member .links{padding: 6rem 0; display: flex; align-items: center; justify-content: space-between;} .main-container .widget .section-member .links a{flex: 1; text-align: center;} .main-container .widget .section-member .links a:hover p{color: #39a845;} .main-container .widget .section-support{padding: 4rem 0 6rem; margin-bottom: 4rem;} .main-container .widget .section-support > div{display: flex; justify-content: center; margin-top: 4rem;} .main-container .widget .section-support a{flex: 1; display: inline-block; text-align: center;} .main-container .widget .section-support a:hover p{color: #39a845;} .main-container .widget .section-support p{margin-top: 10px; line-height: 1.3;} .section-main-visual{position: relative; overflow: hidden; max-height: 44rem; z-index: 1; margin-bottom: 4rem;} .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 img{width: 100%; border-radius: 3rem;} .section-main-visual .swiper-pagination{bottom: 2.6rem; left: 0; width: 100%; } .section-main-visual .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background-color: #fff; opacity: 0.5; border-radius: 1rem;} .section-main-visual .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; width: 25px;} .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: 4.8rem; margin-bottom: 0.8rem; font-weight: 600; } .section-header-desc{font-size: 14px; color: #727273;} .section-header-line{width: 30px; margin: 0 auto 1.4rem; height: 2px; background-color: #0a0a0a;} .section-header-arrow button{width: 22px; height: 18px; background-size: 22px 18px; display: inline-block; background-repeat: no-repeat;} .section-header.text-white .section-header-title, .section-header.text-white .section-header-desc{color: #fff;} #main .section-header .section-header-title{font-size: clamp(2rem, 1.6667vw, 4.8rem) ; color: #39a845; font-weight: 700; margin-bottom: 0;} #main .section-header .section-header-desc{margin-top: 6rem; font-size: clamp(2.4rem, 2.1vw, 5.2rem); line-height: 1.3; color: #0a0a0a;} .swiper-arrows{position: absolute; top: 50%; z-index: 1; width: 100%;} .swiper-arrows button{width: 60px; height: 60px; background-size: cover; display: inline-block; background-repeat: no-repeat; position: absolute;} .swiper-arrows .btn-swiper-prev{left: 5rem; margin-top: -30px; background-image: url('../images/icons/btn-slide-pre-d.png'); } .swiper-arrows .btn-swiper-next{right: 5rem; margin-top: -30px; background-image: url('../images/icons/btn-slide-next-d.png');} .swiper-arrows .btn-swiper-prev:hover{background-image: url('../images/icons/btn-slide-pre-h.png'); } .swiper-arrows .btn-swiper-next:hover{background-image: url('../images/icons/btn-slide-next-h.png'); } #sit_rel .swiper-arrows .btn-swiper-prev{left: -8rem; margin-top: -6rem;} #sit_rel .swiper-arrows .btn-swiper-next{right: -8rem; margin-top: -6rem;} .section-qmenu .section-wrap{position: relative; display: flex; align-items: center;} .section-qmenu .item{flex: 1; } .section-qmenu .item a{display: block; border-radius: 4rem; border: 5px solid #7fc844; padding: 3.3rem 3rem; transition: all ease .3s;} .section-qmenu .item a:hover{background-color: #7fc844;} .section-qmenu .item a:hover .grid-title, .section-qmenu .item a:hover .grid-desc{color: #fff;} .section-qmenu .item:nth-child(2) a{border-color: #39a845;} .section-qmenu .item:nth-child(2) a:hover{background-color: #39a845;} .section-qmenu .item:nth-child(2) .grid-title{color: #39a845;} .section-qmenu .item:nth-child(3) a{border-color: #f5973b;} .section-qmenu .item:nth-child(3) a:hover{background-color: #f5973b;} .section-qmenu .item:nth-child(3) .grid-title{color: #f5973b;} .section-qmenu .item .grid-desc{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); margin-bottom: 1rem; line-height: 1.2;} .section-qmenu .item .grid-title{font-size: clamp(1.8rem, 1.6667vw, 4.8rem); font-weight: 600; line-height: 1.2; color: #7fc844;} .section-qmenu .item + .item{margin-left: 2rem;} .section-qmenu .item .image{text-align: right;} .section-qmenu .item .image img{border-radius: 50%; width: 15rem; height: 15rem; background-color: #eee; } #main #section-02{background-color: #f8fdf9; } .company-cont{margin-top: 4rem;} .company-cont p{font-size: clamp(1.6rem, 1.25vw, 3.2rem); } .company-cont .image{margin-top: 6rem;} .company-cont .image img{max-width: 50%;} .company-wrap .mark{margin-top: 11.8rem; z-index: 3; position: relative; opacity: 0.2;} .company-wrap .mark img{width: 100%;} #main #section-02 .bg{background: #f8fdf9 url('../images/main/company-02.jpg') no-repeat center/cover; position: absolute; right: 0; height: 100%; width: 68rem; top: 0; z-index: -1;} #main #section-03{position: relative; background-color: #fff;} .business-wrap {display: flex; margin-top: 10rem;} .business-wrap .item{font-size: clamp(1.6rem, 0.9375vw, 2.4rem); background-position: center; background-size: cover; background-repeat: no-repeat; flex: 1; margin-left: 7rem; padding: 3rem; border-radius: 2rem; height: 52rem;} .business-wrap .item:nth-child(1){background-image: url('../images/main/business-01.jpg'); margin-left: 0;} .business-wrap .item:nth-child(2){background-image: url('../images/main/business-02.jpg');} .business-wrap .item:nth-child(3){background-image: url('../images/main/business-03.jpg');} .business-wrap .item .title{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); font-weight: 600; color: #343434; background-color: #fff; border-radius: 2.4rem; padding: 1.5rem 3rem; line-height: 1; display: inline-block;} .business-wrap .item p{font-size: clamp(1.8rem, 1.25vw, 3.2rem); color: #fff; line-height: 1.6; margin-top: 3rem;} #main #section-04{background: #effaed url('../images/main/partner-deco.png') no-repeat center/cover;} .partner-wrap{background-color: #fff; margin-top: 6rem; padding: 2.6rem 0;} .partner-wrap ul{display: flex; flex-wrap: wrap; justify-content: space-between;} .partner-wrap ul li{padding: 2rem 0; flex: 0 0 25%; text-align: center;} #main #section-05{position: relative; padding-bottom: 20rem;} .support-wrap{display: flex;} .support-wrap .notice-container{flex-grow: 1; width: 53%; position: relative;} .support-wrap .info-container{flex-shrink: 0; width: 35%; position: relative; margin-left: 4rem;} .support-wrap .download-container{flex-shrink: 0; width: 12%; position: relative; margin-left: 4rem;} .support-wrap .card-header{position: relative; display: flex; justify-content: space-between; margin-bottom: 6rem; align-items: center; background: url('../images/main/cs-pattern.png') repeat-x center;} .support-wrap .card-header .card-title{font-size: 4rem; font-weight: 600; border-bottom: 0; padding: 0; display: inline-block; background-color: #fff; padding-right: 2rem;} .more-wrap{font-size: clamp(1.2rem, 1.041665vw, 2.4rem); background-color: #fff; padding-left: 2rem; line-height: 1;} .more-wrap .btn-icon-wrap .icon{margin-left: 0; margin-right: 7px;} .bg-card{position: fixed; top: 0; right: 0; width: 30%; height: 100%; background-color: #f5f5f5; z-index: 0;} .notice-container .bbs-list{border-top: 1px solid #0a0a0a;} .notice-container .bbs-list li{padding: 2.6rem 4rem 2.6rem 2rem; border-bottom: 1px solid #cbcbcb;} .notice-container .bbs-list li a{display: flex; align-items: center; justify-content: space-between;} .notice-container .bbs-list .title{font-size: clamp(1.2rem, 1.041665vw, 2.4rem); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.2; max-width: 80%;} .notice-container .bbs-list .date{font-size: clamp(1.4rem, 0.83334vw, 1.8rem); color: #666;} .info-container .item{background-color: #f8fdf9; padding: 2rem 4rem; } .info-container .item.phone{background-color: #fff; padding: 0; margin-bottom: 2rem;} .info-container .item strong{font-weight: 600;} .info-container .item .inner{font-size: clamp(1.6rem, 0.9375vw, 2.4rem); line-height: 1;} .info-container .item .inner p + p{margin-top: 1.2rem;} .info-container .box-desc{margin-bottom: 1rem; color: #333;} .tel-info{display: flex; font-weight: 700; max-width: 50rem;} .tel-info .label{flex-shrink: 0; background-color: #1f5c25; color: #fff; width: 16rem; height: 9rem; font-size: clamp(1.6rem, 1.375vw, 3.2rem); display: flex; align-items: center; justify-content: center;} .tel-info .tel{background-color: #fff; display: flex; align-items: center; justify-content: center; flex-grow: 1; border: 1px solid #1f5c25; border-left: 0;} .tel-info .tel a{display: inline-flex; color: #1f5c25; font-size: clamp(1.8rem, 2.2917vw, 4.8rem); align-items: center;} .tel-info .tel a .icon{margin-right: 1rem;} .download-container .box{background-color: #f8fdf9; padding: 2.5rem 3rem; text-align: center;} .download-container .box p{color: #1f5c25; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); font-weight: 600; margin-bottom: 1.4rem;} .download-container .box img{width: 100%;} /********** * ## SUB **********/ .sub{position: relative;} .sub section.bg-section{margin-bottom: 0; background-color: #f9f9f9; } .sub section.bg-section-f5{margin-bottom: 0; background-color: #f5f5f5; } .sub section.bg-section-f8{background-color: #f8fdf9; } .sub section.bg-section-ef{background-color: #effaed; } .sub section.section-product{margin-bottom: 0;} .section-page{position: relative; padding: max(8rem, 7.825vw) 0;} .section-page.first{padding-top: 10rem;} .section-page.last{border-top: 1px solid #ccc; padding-bottom: max(12rem, 10.3925vw);} /* .section-page:last-child{padding-bottom: max(10rem, 5.21vw);} */ .section-title{font-size: clamp(2.8rem, 2.083334vw, 5.6rem); line-height: 1.2; font-weight: 600;} .section-title em{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); line-height: 1; margin-left: 1rem;} .section-desc{position: relative; font-size: clamp(1.6rem, 0.9375vw, 2.4rem); 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, 2.0834vw, 5.2rem);} .basic-section.section-page{padding-top: 6rem;} .basic-section .section-header .section-desc{font-size: clamp(1.8rem, 1.25vw, 3.2rem); margin-top: 0; color: #0a0a0a;} .sub-tab-wrap + .basic-section.section-page{padding-top: 0;} .green-mark{background-color: #1f5c25; color: #fff; font-size: clamp(1.8rem, 1.45834vw, 3.2rem); height: 5rem; line-height: 5rem; text-align: center; font-family: 'General Sans', sans-serif; margin-bottom: 2.4rem; display: inline-block; padding: 0 1.6rem;} /********** * #### SUB TOP **********/ .sub-top-visual {position: relative; width: 100%; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; } .sub-top-visual.with-tabs .visual-header{padding-bottom: 0;} .sub-top-visual .visual-header {display: flex; align-items: center; flex-direction: column; justify-content: center; padding: max(3rem, 4.922vw) 0;} .sub-top-visual .visual-header h2{font-size: clamp(2rem, 2.0834vw, 5.6rem) ; position: relative; line-height: 1.2; display: inline-block; font-weight: 600;} .sub-top-visual .visual-header .breadcrumb{margin-bottom: 0; margin-top: 1.1rem;} .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/cs-bg.jpg'); margin-top: 4rem;} .sub-top-visual.support .visual-header h2{color: #343434;} .sub-top-visual.support .visual-header .breadcrumb .breadcrumb-item a{color: #666;} .sub-top-visual.support .visual-header .breadcrumb .breadcrumb-item .angle{ color: #666;} /********** * #### SUB TAB **********/ .sub-tab-wrap{margin-top: max(3rem, 3.125vw);} .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:flex; width:100%; justify-content: center; margin: 0 auto;} .sub-tab ul li {flex: 1; margin-left: -1px; max-width: 27rem;} .sub-tab ul li a {display: block; text-align: center; height: max(4rem, 2.969vw); line-height: max(4rem, 2.969vw); letter-spacing: 0; border: 1px solid #ccc; font-size: clamp(1.6rem, 1.041665vw, 2.4rem) ; background-color: #f5f5f5; color: #cbcbcb;} .sub-tab ul li a:hover{color: #888;} .sub-tab ul li a.active{background-color: #39a845; color: #fff;} .sub-tab ul li a.active:hover{color:#fff} /********** * #### 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; margin: 1.5rem 0; align-items: center;} .breadcrumb-item{margin-left: 7px; font-weight: 500; line-height: 1; color: #666; font-size: 1.4rem;} .breadcrumb-item:first-child{margin-left: 0; display: flex; align-items: center;} .breadcrumb-item a{padding-right: 7px; position: relative; font-size: 1.4rem; display: inline-block; } .breadcrumb-item:last-child a{padding-right: 0;} .ico-home{background-image: url('../images/icons/home-g.png'); width: 18px; height: 18px;} .ico-home-b{background-image: url('../images/icons/home-b.png'); width: 18px; height: 18px;} /* .breadcrumb-item a::after{content: ''; font-family: 'Spoqa Han Sans Neo'; position: absolute; top: 0; right: 0; } */ /* .breadcrumb-item.active a{color: var(--theme-color);} */ /********** * #### SUB TOP ETC **********/ .subwrap-top{text-align:center; background-position: top center; position: relative; padding: 10rem 0 0;} .subwrap-top.pc { overflow: hidden} .subwrap-top h2{font-size: clamp(2.4rem, 2.08334vw, 4.8rem); font-weight: 600; line-height: 1.2;} .subwrap-top .desc{font-size: clamp(1.8rem, 1.25vw, 3.2rem); 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-title-s{font-size: 42px; color: #121212; font-weight: 700; line-height: 1.3em;} .sub-etc{position: relative;} .sub-etc .section-header .section-title{font-size: clamp(2.4rem, 1.6667vw, 4.8rem); font-weight: 400; margin-bottom: 0; } .sub-etc .section-header{border-bottom: 1px solid #0a0a0a; margin: 6rem 0 4rem; padding-bottom: 1.4rem;} .gallery img{width: 100%;} .gallery-top{position: relative;} .thumb-swiper{margin-top: 3rem;} /* .thumb-swiper .swiper-slide{opacity: 0.8;} */ .thumb-swiper .swiper-slide{cursor: pointer; display: block; } .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:hover{opacity: 1;} */ .thumb-swiper .swiper-slide:hover::before{background: rgba(0, 0, 0, .2) url('../images/icons/ico-zoom.png') no-repeat center; background-size: 35px; } .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;} /********** * ## ABOUT **********/ .overview-wrap .image{margin-bottom: max(3rem, 3.125vw);} .overview-wrap .cont{color: #343434; font-size: clamp(1.6rem, 1.25vw, 3.2rem);} .history-wrap{background-color: #fff; position: relative; padding: 6rem 0;} .history-wrap .bg{position: absolute; right: -84px; top: -84px;} .history-wrap .bg img{max-width: 168px;} .history-wrap .item{max-width: 88rem; margin: 0 auto; display: flex; position: relative;} .history-wrap .item .year{flex-shrink: 0; margin-right: 6rem;} .history-wrap .item .year h4{display: flex; justify-content: center; align-items: center; color: #fff; background-color: #39a845; height: 65px; width: 175px; font-size: clamp(2.4rem, 2.083334vw, 5.4rem);} .history-wrap .item .cont{flex-grow: 1; display: flex; align-items: center; position: relative;} .history-wrap .item .cont ul li{display: flex;} .history-wrap .item .cont ul li + li{margin-top: 6rem;} .history-wrap .item .cont ul li .month{font-size: clamp(1.8rem, 1.45834vw, 3.2rem); font-weight: 600; color: #39a845; flex-shrink: 0; position: relative; width: 100px; margin-right: 3rem; } .history-wrap .item .cont ul li .text{font-size: clamp(1.6rem, 1.25vw, 2.8rem); flex-grow: 1; display: inline-block; line-height: 1.65;} .history-wrap .item .cont .line{position: absolute; right: 0; height: 100%; width: 1px; background-color: #39a845; left: 100px;} .history-wrap .item.border{margin-bottom: 8rem; padding-bottom: 8rem;} .history-wrap .item.border::after{content: ''; position: absolute; bottom: 0; width: 100%; height: 10px; background: url('../images/main/cs-pattern.png') repeat-x center;} .history-wrap .item + .item.basic{padding-top: 0; margin-top: 6rem;} .history-wrap .item.basic .year h4{background-color: #343434;} .history-wrap .item:nth-child(3) .year h4{background-color: #1f5c25;} .history-wrap .item:nth-child(3) .cont .line{background-color: #1f5c25;} .history-wrap .item:nth-child(3) .cont ul li .month{color: #1f5c25;} /********** * ## Alliance **********/ .alliance-wrap{position: relative;} .alliance-wrap .image{margin-bottom: max(3rem, 3.125vw)} .alliance-wrap .image img{max-width: 100%; width: auto;} .alliance-wrap .text{font-size: clamp(1.6rem, 1.25vw, 3.2rem);} .alliance-wrap .text strong{font-weight: 600;} .alliance-wrap .text strong, .alliance-wrap .text span{color: #39a845;} .alliance-wrap .items{display: flex; align-items: center; justify-content: space-between; margin: 0 -1rem;} .alliance-wrap .items .item{border: 2px solid #39a845; border-radius: 2rem; padding: 6rem 2rem; display: flex; align-items: center; flex-direction: column; justify-content: center; width: 40rem; background-color: #f8fdf9; margin: 0 1rem;} .alliance-wrap .items .item .image{margin-bottom: 3rem;} .alliance-wrap .items .item .image img{max-height: 100px;} .alliance-wrap .items .item p{text-align: center; font-size: clamp(1.8rem, 1.25vw, 3.2rem); line-height: 1.4;} .partner-info .title{color: #fff; background-color: #39a845; font-size: clamp(1.8rem, 1.45834vw, 3.2rem); padding: 1.35rem 2.9rem; display: inline-block; line-height: 1;} .partner-info .cont{border: 1px solid #39a845; padding: max(1.5rem, 1.564vw); font-size: clamp(1.6rem, 1.041665vw, 3.2rem); background-color: #fff;} .partner-info .cont em{font-size: 16px;} .partner-info + .partner-info{margin-top: max(3rem, 3.125vw);} .partner-info .highlight{color: #e50026; font-weight: 400;} .alliance-box{border-radius: 4rem; border: 1px solid #343434; height: 8rem; display: flex; align-items: center; justify-content: center; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); color: #343434; max-width: 72rem; margin: 0 auto;} .contact-info{margin-top: max(3rem, 3.125vw);} .contact-info dl{display: flex; font-size: clamp(1.8rem, 1.25vw, 3.2rem); max-width: 72rem; margin: 0 auto;} .contact-info dt{flex-shrink: 0; width: 40%; background-color: #39a845; color: #fff; height: 8rem; display: flex; align-items: center; justify-content: center;} .contact-info dd{flex-grow: 1; width: 60%; border: 1px solid #39a845; display: flex; align-items: center; justify-content: center;} /********** * ## Contact **********/ .contact-form{position: relative;} .contact-form.table-layout .form-group{display: flex; margin-bottom: 4rem;} .contact-form.table-layout .form-group .label{flex-shrink: 0; width: 180px; 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: 5rem; line-height: 5rem; padding-left: 1.5rem;} .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;} .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: 35rem; 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: 2.4rem; font-weight: 600; color: #0a0a0a;} .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;} /********** * ## 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: 42.858%;} .email-input .unit {width: 7.143%; height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: #666;} .email-input .select-box {position: absolute; right: 0; top:0; width: 30%;} .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: 6rem; justify-content: center;} .btn-line{border: 1px solid #333; width: auto; min-width: auto; font-size: 13px;} .btn-line:hover{color: #ccc; } .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%;} /********** * ## SUPPORT **********/ /********** * #### 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 #39a845;} .faq-wrap ul.faq li.faq-item { border-bottom:1px solid #cbcbcb;} .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(0.5rem, 2.08333vw); 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; background-color:#f9f9f9; padding: 2rem 2rem 2rem 0; overflow: hidden;} .faq-wrap ul.faq li.faq-item .answer .answer-content {width: 90%; padding-left: max(0.5rem, 2.0833vw); flex-grow: 1;} .faq-wrap ul.faq li.faq-item .faq-label {display:inline-block; color: #666; width: max(2rem, 4.688vw); text-align: center; font-size: 2rem; flex-shrink: 0;} .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: #343434 url('../images/mypage/title-bg.jpg') no-repeat center/cover; height: 100%; display: flex; align-items: center;justify-content: center;} .mypage-wrap .header .title h2{color: #fff; font-size: clamp(2.4rem, 1.6667vw, 4.8rem);} .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, 1.25vw, 3.2rem); 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, 1.041665vw, 2.4rem);} .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, 1.041665vw, 2.4rem);} .mypage-content .left .info a{display: block; color: #1f5c25; font-size: clamp(1.8rem, 1.25vw, 3.2rem); 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, 3.125vw);} .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, 1.25vw, 3.2rem);} .mypage-content .section-header h4 .count{color: #ff5b4d; font-weight: 600; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); 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, 1.041665vw, 2.4rem ); 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, 3.125vw);} .point-wrap .point-box .text{font-size: clamp(1.6rem, 1.041665vw, 2.4rem); 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, 2.08334vw, 5.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, 3.125vw);} .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 dashed #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 dashed #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: 0 0 6rem;} .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; border-top: 2px solid #39a845;} .bbs-table table thead th { position: relative; font-weight:500; background-color: #f9f9f9;} .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 #cbcbcb;color:#666; padding:16.5px 20px;/* text-align:center*/} .bbs-table table thead th {padding:24px 0; border-bottom:1px solid #cbcbcb;} .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:40px 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, 0.9375vw, 2.4rem);} .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, 1.041665vw, 2.4rem); 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; } .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; } /********** * ## 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 #post-content .table td{padding: 0.75rem;} 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, 6.25vw);} .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;} /********* * ## 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; } /********** * ## SHOP GUIDE **********/ .guide-wrap .guide-title{font-size: clamp(1.6rem, 1.25vw, 3.2rem); font-weight: 600;} .guide-wrap ul{display: flex; margin: 0 -10px; flex-wrap: wrap;} .guide-wrap ul li{padding: 15px 10px; flex: 0 0 20%;} .guide-wrap ul li a{display: block; border: 1px solid #cbcbcb; background-color: #f9f9f9; font-size: clamp(1.6rem, 1.041665vw, 2.4rem); text-align: center; line-height: 1; height: 5rem; line-height: 5rem;} .guide-wrap ul + h3{margin-top: max(3rem, 4.6875vw);} /********** * ## 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.png') no-repeat center/cover; width: 2rem; height: 2rem; text-indent: -9999px; transform: translate(0, -50%);} .page-search .list-header{border: 0; padding-top: 2rem;} .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;} } /* 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);} @keyframes spinner { to {transform: rotateZ(360deg);} } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } }