@charset "utf-8"; /*
 * Site Name: LogoBank
 * Description: Created by NXweb.
 * Author: NXWEB (https://nxweb.kr)
 */
/********************************************************
* Common
*********************************************************/
img { display:block; max-width:100%; height:auto; }
.inner { max-width:1240px; }

/* Scroll Bar */
.scrollbar--default::-webkit-scrollbar { width:5px }
.scrollbar--default::-webkit-scrollbar-thumb { border-radius:3px; background-color:#a7a7a7 }
.scrollbar--default::-webkit-scrollbar-track { background-color:#eee }


/********************************************************
* Header
*********************************************************/
.mybrand-header { border-bottom:1px solid #e5e5e5; }
.mybrand-header__inner { display:flex; justify-content:space-between; height:130px; padding-top:55px; padding-bottom:5px; }
.mybrand-header__title a { font-size:28px; font-weight:500; color:#ff0000; }

@media(max-width:1440px){
 .mybrand-header__inner { align-items:center; height:100px; padding-top:20px; padding-bottom:20px; }
.mybrand-header__title a { font-size:26px; }
.mybrand-header__logo { width:140px; }
 }
@media(min-width:1025px) { }
@media(max-width:1024px){
 .mybrand-header__inner { height:80px; }
 .mybrand-header__title a { font-size:24px; }
 .mybrand-header__logo { width:120px; }
 }
@media(max-width:640px){
 .mybrand-header__title a { font-size:20px; }
 .mybrand-header__logo { width:110px; }
 }
@media(max-width:480px){
 .mybrand-header__inner { justify-content:left; flex-direction:column; height:auto; padding-top:30px; }
 .mybrand-header__title { order:2; }
 .mybrand-header__logo { order:1; margin-bottom:10px; }
 }


/********************************************************
* Body
*********************************************************/
/* Body */
.mybrand-body { padding:70px 0 180px; }

/* Tab */
.logobank__tab { margin-bottom:40px; }
.logobank__tab-wrap { display:flex; }
.logobank__item { position:relative; }
.logobank__item:not(:last-child) { margin-right:56px }
.logobank__item.act .logobank__link { color:#222; }
.logobank__item:not(:last-child) .logobank__link::after { content:''; display:inline-block; position:absolute; top:50%; right:-30px; width:8px; height:8px; border-top:1px solid #ccc; border-right:1px solid #ccc; transform:translateY(-50%) rotate(45deg); }
.logobank__link { font-size:20px; font-weight:500; color:#aaa; letter-spacing:-0.3px; cursor:text }

/* Body */
.logobank__main { display:none; }
.logobank__main.act { display:flex; gap:15px; }
.logobank__img-wrap { display:flex; justify-content:center; align-items:center; max-width:810px; width:100%; height:560px; padding:20px; margin-right:15px; border:1px solid #e5e5e5; }
.logobank__options { padding-right:15px }
.logobank__options-wrap { display:flex; flex-direction:column; justify-content:space-between; gap:20px; position:relative; right:-15px; max-width:375px; width:100%; }
.logobank__options-wrap.hide { display:none; }
.logobank__options-wrapper { height:400px; overflow-y:auto; overflow-x:hidden }
.logobank__option-name { padding:13px 0 15px 20px; font-size:18px; font-weight:400; color:#ff0000; line-height:1; border-bottom:1px solid #3e3a39; }
.logobank__option-data { padding:20px; }
.logobank__option-data-item:not(:last-child) { margin-bottom:17px; }
.logobank__label { display:flex; line-height:1; }
.logobank__label-radio .icon { position:relative; color:#d8d8d8; transition:color .3s; }
.logobank__check { position:absolute; opacity:0 }
.logobank__label .icon { position:relative; }
.logobank__check:focus + .logobank__label .icon::after { content:""; display:inline-block; position:absolute; top:-2px; bottom:-2px; right:-2px; left:-2px; border:2px solid #000; border-radius:3px }
.logobank__check:checked + .logobank__label .logobank__label-box.radio .icon::before { content:"\e9c7"; color:#ec174c; }
.logobank__check:checked + .logobank__label .logobank__label-box.checkbox .icon::before { content:"\e92d"; color:#ec174c; }
.logobank__label-box { flex-shrink:0; margin-right:16px; color:#d8d8d8; }
.logobank__label-text { display:flex; justify-content:space-between; width:100%; }
.logobank__label-name { color:#555; }
.logobank__label-price { color:#aaa; }
.logobank__estimate { height:140px; padding:30px 40px; background-color:#f8f8f8; }
.logobank__estimate-title { padding-bottom:15px; margin-bottom:15px; font-size:18px; color:#ff0000; line-height:1; border-bottom:1px solid #e5e5e5; }
.logobank__totla-estimate { font-size:30px; font-weight:500; color:#222; line-height:1; }
.logobank__totla-estimate span { font-size:17px; font-weight:500; }

/* final */
.logobank__final-wrap { display:flex; justify-content:center; align-items:center; max-width:810px; width:100%; height:560px; padding:20px; border:1px solid #f8f8f8; background-color:#f8f8f8; }
.final-wrap-inner { display:flex; align-items:center; flex-direction:column; max-width:500px; width:100%; font-size:20px; }

.final-wrap-inner.hide { display:none; }
.final-desc { margin-bottom:40px; font-size:30px; font-weight:400; }
.final-form { display:flex; width:100%; justify-content:center; }
.final-form__form { max-width:400px; width:100%; }
.final-form__table { margin-bottom:40px; border-collapse: separate; border-spacing:5px; }
.final-form__label { position:relative; padding-left:20px; margin-right:30px; font-size:20px; }
.final-form__label.required::before { content:"*"; position:absolute; top:0px; left:0px; color:#f00 }
.final-form__input-wrap { width:100%; }
.final-form__input { width:100%; padding:5px 15px; font-size:16px; border:2px solid #999; }
.final-form__btn-wrap { display:flex; gap:10px; }
.final-form__btn { display:flex; justify-content:center; align-items:center; width:100%; padding:10px 20px; font-size:16px; color:#fff; border:none; background-color:#000; }
.final-form__btn.submit { background-color:#f00; }
.submit-done-box p { font-size:18px; }
.final-form__btn.wid200 { width:200px; }
/* .logobank__img-wrap.logobank__mail { padding:30px 20px; background-color:#f8f8f8 }
.logobank__mail-desc { font-size:18px; color:#222; margin-bottom:30px; text-align:center }
.logobank__form-wrap { display:flex }
.logobank__mail-input { width:340px; height:54px; border:1px solid #e5e5e5; border-right:0; background-color:#fff; text-indent:20px; font-size:16px; color:#444 }
.logobank__mail-submit { width:120px; height:54px; border:0; background-color:#222; color:#fff; font-size:16px } */
.final__list { width:100% }
.final__item { display:flex; align-items:center; border-top:1px solid #888 }
.final__item:last-child { border-bottom:1px solid #888; }
.final__name { display:flex; align-items:center; justify-content:center; width:200px; font-size:16px; font-weight:500; color:#888; }
.final__info { width:calc(100% - 200px); border-left:1px solid #e5e5e5; }
.final__article { display:flex; width:100%; height:70px; border-bottom:1px solid #e5e5e5; }
.final__article:last-child { border-bottom:0 }
.final__label { display:flex; align-items:center; width:calc(100% - 200px); padding-left: 27px; }
.final__price { display:flex; align-items:center; justify-content:center; width:200px; border-left:1px solid #e5e5e5; }
.mail-final__list { width:100% }
.mail-final__item { display:flex; align-items:center; border-top:1px solid #888; }
.mail-final__item:last-child { border-bottom:1px solid #888; }
.mail-final__name { display:flex; align-items:center; justify-content:center; width:125px; font-size:16px; font-weight:500; color:#888; }
.mail-final__info { width:calc(100% - 125px); border-left:1px solid #e5e5e5; }
.mail-final__article { display:flex; align-items:center; width:100%; height:38px; border-bottom:1px solid #e5e5e5; }
.mail-final__article:last-child { border-bottom:0 }
.mail-final__label { padding-left:15px; font-size:15px }
.loader-mask .xi-spin { position:absolute; top:50%; left:50%; margin-top:-24px; margin-left:-24px; font-size:48px; color:#fff; z-index:2501 }

/* Controller */
.controller-wrap { display:flex; gap:20px; width:100%; }
.controller-wrap.hide { display:none !important; }
.controller-wrap.right { display:flex; justify-content:flex-end; }
.controller-btn { display:flex; justify-content:space-between; align-items:center; width:180px; height:50px; padding:0 30px; font-size:15px; color:#555; border:0; transition:background-color .3s }
.controller-btn.download { border:1px solid #e5e5e5; background-color:#222; color:#fff }
.controller-btn.hide { display:none !important; }
.controller-btn.prev { background-color:#fff; border:1px solid #e5e5e5; }
.controller-btn.prev:hover { border-color:#aaa; }
.controller-btn.next { background-color:#eaeaea; }
.controller-btn.next:hover { background-color:#ddd; }
.btn-estimate-submit { display: flex; justify-content: center; align-items: center; width: 100%; padding: 12px 0; color: #fff; font-size: 16px; font-weight: 500; border: none; background: #f00; }

@media(max-width:1280px){
 .mybrand-body { padding:70px 0 120px; }
 .logobank__item:not(:last-child) { margin-right:45px; }
 .logobank__item:not(:last-child) .logobank__link::after { right:-22px }
 .logobank__link { font-size:18px; }
 }
@media(max-width:1024px){
 .mybrand-body { padding:70px 0 100px; }
 .logobank__item:not(:last-child) { margin-right:33px; }
 .logobank__item:not(:last-child) .logobank__link::after { right:-18px }
 .logobank__link { font-size:17px; }
 .logobank__estimate { padding:30px; }
 .logobank__options-wrap { right:0; }
 .logobank__options-wrap.mail { right:0; }
 .logobank__options { padding-right:0; }
 .logobank__estimate-wrap { padding-right:0; }

 /* final */
 .final-desc { font-size:26px; }
 .logobank__mail-input { width:280px; }
 }
@media(max-width:850px){
 .mybrand-body { padding:70px 0; }
 .logobank__main { flex-wrap:wrap; }
 .final-form__table { margin-bottom:0; }
 .logobank__img-wrap { width:100%; height:auto; padding:0; margin-right:0; border:none; }
 .logobank__final-wrap { width:100%; height:auto; padding:40px 20px; margin-right:0; border:none; }
 .logobank__options-wrapper { height:auto; }
 .logobank__options-wrap { width:100%; max-width:100%; right:0; padding:20px 0; }
 .logobank__options-wrap.mail { max-width:100%; }
 .logobank__options { padding-right:0; }
 .controller-wrap { justify-content:space-between; gap:10px; }

 /* Controller */
 .controller-btn { justify-content:center; gap:15px; width:50%; height:45px; padding:0 10px; }
 }
@media(max-width:640px){
 .logobank__tab-wrap { flex-wrap:wrap; }

 .logobank__tab { margin-bottom:30px; }
 .logobank__item:not(:last-child) { margin-right:30px; margin-bottom:5px; }
 /* .logobank__item:not(.act) { display:none; } */
 .logobank__link { font-size:16px; }
 .logobank__item:not(:last-child) .logobank__link::after { right:-16px }
 .controller-btn.download { font-size:14px }

 .final-wrap-inner { font-size: 18px; text-align: center; }

 /* final */
 .logobank__mail-desc { font-size:17px; }
 .logobank__mail-input { height:50px; font-size:14px; }
 .logobank__mail-submit { height:50px; font-size:14px; }
 .mail-final__name { font-size:14px; }
 .mail-final__label { font-size:14px; }

 .final-desc { font-size:22px; }
 .final-form__label { margin-right:15px; font-size:16px; }
 .final-form__input { font-size:14px; }
 .final-form__btn { padding:10px; font-size:14px; }

 /* Controller */
 #btn_first { width:150px; }
 }
@media(max-width:480px) { /* final */
 .logobank__mail { padding:60px 20px; }
 .logobank__mail-desc { font-size:16px; }
 .logobank__mail-input { width:200px; text-indent:16px; }
 .logobank__mail-submit { width:90px; }
 .logobank__estimate-title { font-size:17px; }
 .logobank__totla-estimate { font-size:28px; }
 }
@media(max-width:400px){
 .logobank__mail-submit { width:70px; }
 }


/********************************************************
* Footer
*********************************************************/
.mybrand-footer { padding:0 0 50px; }
.mybrand-footer__inner { display:flex; justify-content:space-between; }
.mybrand-footer__left { display:flex; }
.mybrand__address-wrap { margin-right:214px; }
.mybrand-footer__title { position:relative; padding:25px 0 10px; font-size:18px; font-weight:500; color:#222; }
.mybrand-footer__title::before { content:""; position:absolute; top:0; left:0; width:60px; height:1px; background-color:#ec174c; }
.mybrand-footer__content { font-size:14px; color:#999; line-height:18px; }
.mybrand-footer__content.contact { display:flex; }
.contact .mybrand-footer__con-wrap:first-child { position:relative; padding-right:10px; }
.contact .mybrand-footer__con-wrap:first-child::after { content:""; position:absolute; top:50%; right:0; width:1px; height:12px; transform:translateY(-50%); background-color:#999; }
.contact .mybrand-footer__con-wrap:last-child { padding-left:10px; }
.mybrand-footer__con-wrap { font-size:14px; color:#999; line-height:18px; }
.mybrand-footer__con-info { font-size:14px; color:#999; line-height:18px; }
.mybrand-footer__con-info:hover { text-decoration:underline; }
.mybrand__links-wrap { display:flex; }
.mybrand__item:not(:last-child) { margin-right:30px; }
.mybrand__link { font-size:28px; color:#7d808a; transition:color .3s }
.mybrand__link:hover { color:#222; }

@media(max-width:1280px){
 .mybrand__address-wrap { margin-right:100px; }
 }
@media(max-width:1024px){
 .mybrand__address-wrap { margin-right:60px; }
 }
@media(max-width:800px){
 .mybrand-footer__inner { justify-content:flex-start; flex-wrap:wrap; }
 .mybrand-footer__left { width:100%; margin-bottom:50px; }
 .mybrand-footer__right { width:100%; }
 .mybrand__links-wrap { justify-content:center; }
 }
@media(max-width:640px){
 .mybrand-footer { padding:40px 0; border-top:1px solid #e5e5e5; }
 .mybrand-footer__left { flex-wrap:wrap; margin-bottom:40px; }
 .mybrand__address-wrap { width:100%; margin:0 0 20px 0; }
 .mybrand__contact-wrap { width:100%; }
 .mybrand-footer__title { padding:0; text-align:center; }
 .mybrand-footer__title::before { display:none; }
 .mybrand-footer__content { text-align:center; }
 .mybrand-footer__content.contact { justify-content:center; }
 }


/********************************************************
* Intro
*********************************************************/
#app { position:relative; }
/* Intro */
.intro { }
.intro { position:absolute; top:0; left:0; width:100%; min-height:calc(100vh - 131px); padding:100px 0 150px; background:url('/mybrand/src/img/intro_bg.jpg') no-repeat center center / cover; z-index:100; }
.intro__logo-wrap { margin-bottom:50px; }
.intro__logo-img { width:250px; height:65px; }
.intro__p { font-size:32px; color:#fff; }
.intro__p .u { position:relative; }
.intro__p .u::after { content:''; position:absolute; bottom:4px; left:0px; width:100%; height:1px; background:#fff; }
.intro .controller-btn { width:180px; height:55px; padding:0px 25px; margin-top:130px; font-size:15px; color:#fff; background:#ff2d2d; }
.intro .controller-btn:hover { background:#a80000; }
/* Intro */
@media(max-width:1440px){
 .intro { min-height:calc(100vh - 101px); }
 }
@media(max-width:1280px){
 .intro { padding:70px 0 120px; }
 /* .intro__logo-img { } */
 .intro__p { margin-bottom:100px; }
 .intro .controller-btn { width:150px; height:50px; }
 }
@media(max-width:1024px){
 .intro { min-height:calc(100vh - 81px); padding:70px 0 100px; }
 .intro__logo-img { width:220px; height:55px; }
 .intro__p { font-size:28px; }
 .intro .controller-btn { margin-top:100px; }
 }
@media(max-width:800px){
 .intro { padding:70px 0; }
 .intro__p .u { text-decoration:underline; text-underline-position: under; }
 .intro__p .u::after { display:none; }
 .intro .controller-btn { position:initial; }
 }
@media(max-width:480px){
 .intro { min-height:calc(100vh - 120px); }
 .intro__p { font-size:24px; }
 .intro .controller-btn { width:140px; height:45px; font-size:14px; }
 }