/*=================================================
            REM 설정
=================================================*/
@import url("https://fastly.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

html, body{
    position: relative;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Pretendard';
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1199.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 14px;
    }
}
/***** md *****/
@media (min-width: 768px) and (max-width: 991.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 13px;
    }
}
/***** sm *****/
@media (min-width: 576px) and (max-width: 767.98px){
    html:not(.iframe),
    body:not(.iframe){
        font-size: 12px;
    }
}
/***** xs *****/
@media (min-width: 100px) and (max-width: 575.98px) {
    html:not(.iframe),
    body:not(.iframe){
        font-size: 12px;
    }
}

/*=================================================
			container
=================================================*/
@media (min-width: 1600px){
    .container{
        max-width: 1200px;
    }

    #main-index-page .container {
        max-width: 1074px;
    }
}

/*=================================================
			텍스트 설정
=================================================*/
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    margin: 0;
}

h1,.h1{
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.2em;
}

h2,.h2{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2em;
}

h3,.h3{
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.4em;
}

h4,.h4{
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.4em;
}

h5,.h5{
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6em;
}

h6,.h6{
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6em;
}

.display-1{
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6em;
}

.display-2{
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6em;
}

.bold{
    font-weight:700;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** lg *****/
@media (min-width: 992px) and (max-width: 1199.98px){

}
/***** md *****/
@media (min-width: 768px) and (max-width: 991.98px){

}
/***** sm *****/
@media (min-width: 576px) and (max-width: 767.98px){
    .page-h4{
        font-size: 1rem;
    }

    .page-h6{
        font-size: 1rem;
    }

    .page-display-4{
        font-size: 1rem;
    }
}
/***** xs *****/
@media (min-width: 100px) and (max-width: 575.98px) {
    .page-h4{
        font-size: 1rem;
    }

    .page-h6{
        font-size: 1rem;
    }

    .page-display-4{
        font-size: 1rem;
    }
}

/*=================================================
			버튼, 색 설정
=================================================*/
/*****#####===== 프로젝트 =====#####*****/
.point-color-1{color: #fc515a;}
.point-color-2{color: #555555;}
.point-color-3{color: #999999;}
.point-color-4{color: #B98369;}
.point-color-5{color: #DF0000;}
.point-sub-1{color: #222222;}
.point-sub-2{color: #555555;}
.point-sub-3{color: #888888;}
.point-bg-1{background-color: #e9fffe;}
.point-bg-2{background-color: #edf2ff;}
.point-bg-3{background-color: #f4f4f4;}

.point-btn-1{
    background-color:#5a7cd3;

    color: #ffffff !important;
}

.point-btn-2{
    background-color:transparent;
    border: 1px solid #ffffff;

    color: #ffffff !important;
}

.point-btn-3{
    background-color: #D0A088;
    border: 1px solid #D0A088;

    color: #ffffff !important;
}

.point-btn-4{
    background-color: transparent;
    border: 1px solid #EEEEEE;

    color: #888888 !important;
}

.point-btn-5{
    background-color: #00BCD4;
    border: 1px solid #00BCD4;

    color: #FFFFFF !important;
}

.point-btn-6{
    background-color: transparent;
    border: 1px solid #DDDDDD;

    color: #555555 !important;
}

.point-btn-7{
    background-color: transparent;
    border: 1px solid #D0A088;

    color: #D0A088 !important;
}

.point-btn-8{
    background-color: transparent;
    border: 1px solid #DDDDDD;

    color: #999999 !important;
}

[class*="point-btn"]{
    padding: 0.625rem 1rem;

    border-radius: 0.25rem;
}

.btn-small{
    width: 8.125rem;
    padding: 0.938rem 0;
}

[class*="point-btn"].btn-xs{
    padding: 0.25rem;

    font-size: 0.75rem;
}

/*=================================================
			전체
=================================================*/
[data-layout='slide_test']{
    padding: 0;

    color: #ffffff;
}

[data-layout='slide_test'] .slick-wrap{
    padding: 0;
}

[data-layout='slide_test'] .title-title{
    font-size: 3rem;
    font-weight: bold;
}

.section-wrap{
    position: relative;

    /*
    background-color: #111111;

    color: #ffffff;
     */
}

.bottom-shadow{
    box-shadow: 0 3vh 5vh 5vh rgba(0,0,0,0.8);
}

.sticky-container{
    height: 200vh;
}

.sticky-wrap{
    position: sticky;
    top: 1px;

    height: 100vh;
}

.upper-section{
    z-index: 4;
}

.downer-section{
    margin-top: -90vh;
    z-index: 3;
}

/*****#####===== fancy =====#####*****/
.fancy-alert{
    border-top: none;
}

.fancy-alert-confirm{
    border-color: #D0A088;
}

.fancybox-content{
    border-radius: 0.25rem;

    overflow: hidden;
}

.fancy-alert [class*="point-btn"]{
    padding: 0.875rem 0;
}

.fancy-alert .alert-btn-wrap .btn-ok,
.fancy-alert-basic .alert-btn-wrap .btn{
    padding: 0.875rem 0;

    font-size: 1rem;

    background-color: #D0A088 !important;

    border: 1px solid #D0A088;
}

.fancy-alert .alert-btn-wrap .btn-cancel{
    padding: 0.875rem 0;

    font-size: 1rem;

    color: #999999;

    background-color: #ffffff !important;

    border: 1px solid #cccccc;
}

/*****#####===== popover =====#####*****/
.popover{
    font-family: 'Pretendard';

    border: none;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.12);
}

.popover .arrow{
    display: none;
}

.popover .popover-body{
    padding: 1.125rem 0.875rem;
}

.popover .pop-item:not(:last-child){
    margin-bottom: 0.75rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 992px) {
    .popover .popover-body{
        width: 12rem;
        padding: 0.75rem 0.5rem;
    }
}

/*****#####===== page-header =====#####*****/
.page-header{
    margin-bottom: 3.75rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 767.98px) {
    .page-header{
        margin-bottom: 2rem;
    }
}

/*****#####===== form-control =====#####*****/
.form-control{
    height: auto;
    padding: 0.625rem 1rem;

    border: 1px solid #DDDDDD;
    border-radius: 0.25rem !important;
}

.form-control.form-border-none{
    padding: 0.5rem 0;
}

.form-input-title{
    margin-bottom: 0.5rem;

    font-weight: 500;
    color: #555555;
}

.req-btn{
    width: 6.5rem;
}

/*****#####===== nav-backdrop =====#####*****/
[id^="nav-backdrop"]{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.7);

    cursor: pointer;
    z-index: 98;
}

[id^="nav-backdrop"].show{
    display: block;
}

/*=================================================
            banner_slide_200322
=================================================*/
.section-wrap[data-layout="banner_slide_200322"] .sticky-wrap{
    padding: 5rem 0;
    height: calc(100vh - 10rem);
}

/*****#####===== 타이틀 =====#####*****/
.section-wrap[data-layout="banner_slide_200322"] .title-wrap{
    position: absolute;
    width: 40vw;
    height: 100%;
    padding: 0 2rem;
}

.section-wrap[data-layout="banner_slide_200322"] .inner-wrap{
    height: 100%;
    padding: 2rem;

    background-color: #000000;
}

/*****#####===== 슬라이드 =====#####*****/
.section-wrap[data-layout="banner_slide_200322"] .slick-wrap{
    transform: translateX(40vw);
    transition: all 0.9s ease-out;
}

.section-wrap[data-layout="banner_slide_200322"] .slick-wrap.active{
    transform: translateX(0%);
}

.section-wrap[data-layout="banner_slide_200322"] .close_slide_btn{
    display: none;
    position: absolute;
    top: 1rem;
    left: 3rem;
    z-index: 100;

    font-size: 1.8rem;
    color: #999999;
}

.section-wrap[data-layout="banner_slide_200322"] .slick-wrap.active .close_slide_btn{
    display: inline-block;
}

.section-wrap[data-layout="banner_slide_200322"] .slick-slide{
    position: relative;
    overflow: hidden;
}

.section-wrap[data-layout="banner_slide_200322"] .slick-slide .bg{
    height: calc(100vh - 10rem);
}

.section-wrap[data-layout="banner_slide_200322"] .slick-slide .slide-footer{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1rem;

    background-color: #000000;

    transform: translateY(100%);
    transition: all 0.6s ease-out;
}

.section-wrap[data-layout="banner_slide_200322"] .slick-wrap.active .slick-slide .slide-footer{
    transform: translateY(0%);
}

.section-wrap[data-layout="banner_slide_200322"] .custom-slick-arrow{
    width: 2rem;
    padding: 10px;

    background-color: rgba(0,0,0,0.7);
}


.section-wrap[data-layout="banner_slide_200322"] .custom-slick-prev{
    left: 2.5rem;
}

.section-wrap[data-layout="banner_slide_200322"] .custom-slick-next{
    right: 2.5rem;
}


/*=================================================
            banner_slide_200322
=================================================*/
.section-wrap[data-layout="banner_image_200323"]{
    padding: 5rem 0;
}

/*=================================================
            banner_slide_200323
=================================================*/
.section-wrap[data-layout="banner_slide_200323"] .slick-wrap{
    padding: 0;
}

.section-wrap[data-layout="banner_slide_200323"] .nav_wrap{
    margin: 2rem -10px 0;
}

.section-wrap[data-layout="banner_slide_200323"] .nav_item{
    padding: 0 10px;
    cursor: pointer;

    transition: all 0.6s ease-out;
}

.section-wrap[data-layout="banner_slide_200323"] .nav_item.active{
    flex: 1 1 auto!important;
}

.section-wrap[data-layout="banner_slide_200323"] .nav-title{
    position: relative;
    overflow: hidden;
    padding: 1rem 0;
    min-width: 12rem;

    color: #999999;
}
.section-wrap[data-layout="banner_slide_200323"] .nav_item.active .nav-title,
.section-wrap[data-layout="banner_slide_200323"] .nav_item:hover .nav-title{
    color: #ffffff;
}

.section-wrap[data-layout="banner_slide_200323"] .nav-title:before,
.section-wrap[data-layout="banner_slide_200323"] .nav-title:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;

    background-color: #999999;
}

.section-wrap[data-layout="banner_slide_200323"] .nav-title:after{
    width: 0%;

    background-color: #ffffff;

    transition: all 1.4s ease-out;
}

.section-wrap[data-layout="banner_slide_200323"] .nav_item.active .nav-title:after{
    width: 100%;
}

#banner_image_200323 .section-wrap {
    height: 100vh;
}

#banner_image_200323 .layer{
    opacity: 1;
    z-index: 10;
    background-color: #000000;
}

#marzipano_basic #marzipano-iframe{
    height: 700px;
}

/*=================================================
			gnb
=================================================*/
/*****#####===== top-nav =====#####*****/
#top-nav{
    background-color:#fafafa;
    border-bottom:1px solid #f1f3f5;
}

#top-nav .each-col:not(:last-child):after{
    content:'';
    position: absolute;
    top: 50%;
    right: 0;

    width: 1px;
    height: 0.625rem;

    background-color:#ddddde;

    transform:translateY(-50%);
}

#top-nav .top-nav-link{
    display:block;

    padding:0.8rem 0.2rem;
}

/*****#####===== gnb =====#####*****/
#gnb-wrap{
    background-color:#ffffff;

    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.16);

    transition: all .3s;
}

#gnb .logo-wrap span{
    display: inline-block;
}

#gnb .logo-img{
    width: 12.5rem;
}

/*****##### gnb : .scrolled #####*****/
#gnb-wrap.scrolled{
    background: #F2EFED;

    transition: all .3s;
}

#gnb-wrap.scrolled .logo-wrap{
    display: none;

    transition: all .3s;
}

/*****#####===== 메뉴 =====#####*****/
#gnb-menu-wrap .nav-link{
    position: relative;

    padding: 1.5rem 2rem;

    font-size: 1.125rem;
    font-weight: 500;
    color: #888888;
}

/*****##### active #####*****/
#gnb-menu-wrap .nav-link.active:after{
    content: '';
    display: block;

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #B27050;
}

#gnb-menu-wrap .nav-link.active{
    color: #B98369;
}

/*****#####===== 버튼 =====#####*****/
.gnb-btn-wrap{
    display: flex;
    align-items: center;
}

/*****#####===== 미디어 쿼리 =====#####*****/
@media (min-width: 100px) and (max-width: 992px){
    /***** 로고 *****/
    #gnb .logo-img{
        display: block;

        padding: 1rem 0;
    }

    /***** 메뉴 *****/
    #gnb-wrap #gnb-menu-wrap{
        display: none;
    }

    #gnb-wrap.scrolled #gnb-menu-wrap{
        display: block;
    }
}

@media (min-width: 100px) and (max-width: 767.98px){
    /***** gnb : .scrolled *****/
    #gnb-wrap.scrolled{
        background: #F2EFED;

        transition: all .3s;
    }

    #gnb-wrap.scrolled .logo-wrap{
        transition: all .3s;
    }

    #gnb-wrap.scrolled #gnb-menu-wrap{
        display: block;
    }

    #gnb-wrap.scrolled .gnb-btn-wrap{
        display: none;
    }

    #gnb-menu-wrap .nav-link{
        padding: 1.5rem 1.25rem;
    }
}

/*=================================================
			모바일 메뉴
=================================================*/
#m-gnb-wrap{
    background-color: #ffffff;

    z-index: 1031;

    -webkit-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease-in-out;
}

/*****#####===== 메뉴 =====#####*****/
.m-menu-wrap{
    position: relative;

    height: 100%;
    padding: 1rem 0 2rem 0;
}

.m-menu-wrap .nav-link{
    padding: 1rem;
}

.m-menu-wrap .nav-item{
    width:100%;

    text-align: center;
}

.m-menu-bottom{
    width: 100%;
    margin-top: 1rem;
}

/*****##### active #####*****/
.m-menu-wrap .lnb-link.active{
    font-weight: 600;

    border-bottom:1px solid #000000;
}

/*****#####===== 서브메뉴 =====#####*****/
.m-menu-wrap .lnb-wrap{
    display:none;
}

.m-menu-wrap .lnb-link{
    display: inline-block;

    padding-bottom:0.2rem;
    margin-bottom:1rem;
}

/*=================================================
			모바일 버튼
=================================================*/
.rotate-btn-wrap{
    position: relative;

    width: 2.5rem;
    height: 3.3rem;
    padding: 1rem 0.5rem;

    cursor:pointer;
}

.rotate-btn-wrap .ratio-box {
    height: 100%;
    overflow: visible;
}

.rotate-btn{
    position: relative;

    margin: auto;
}

.rotate-btn span{
    position: absolute;
    left:0;

    width:100%;
    height:2px;

    background-color:#333333;

    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease-in-out;
}

.rotate-btn span.top{
    top:0;
}

.rotate-btn span.middle{
    top:50%;

    opacity: 1;

    transform: translateY(-50%)
}

.rotate-btn span.bottom{
    bottom:0
}

/***** show *****/
.rotate-btn-wrap.show span.top{
    top:50%;

    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.rotate-btn-wrap.show span.middle{
    opacity: 0;
}

.rotate-btn-wrap.show span.bottom{
    top:50%;

    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/*=================================================
			footer
=================================================*/
.footer-wrap{
    padding:2.5rem 0;

    border-top: 1px solid #dfe5ef;
}

/*****#####===== 푸터 정보 =====#####*****/
#footer-info-wrap .terms-wrap .terms-item{
    display:inline-block;
}

#footer-info-wrap .terms-wrap .terms-item:not(:last-child){
    padding-right:2rem;
}

#footer-info-wrap .list-inline-item:not(:last-child):after,
#footer-info-wrap .terms-wrap .terms-item:not(:last-child):after{
    right:0.8rem;

    background-color:#ddddde;
}

/*****##### 약관 #####*****/
#footer-info-wrap .terms-wrap{
    margin-bottom: 1.5rem;
}

/*****##### 정보 #####*****/
#footer-info-wrap .list-inline{
    line-height: 1.6rem;
}

#footer-info-wrap .list-inline-item:not(:last-child){
    padding-right:0.6rem;
}

#footer-info-wrap .list-inline-item:not(:last-child):after{
    right:0;
}

/*****##### 이미지 #####*****/
#footer-info-wrap .img-wrap{
    text-align: right;
}

#footer-info-wrap .img-wrap .img-item:not(:last-child){
    margin-right:1rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** xs / sm *****/
@media (min-width: 100px) and (max-width: 767.98px){
    #footer-info-wrap .img-wrap{
        margin-top:2rem;

        text-align: left;
    }
}

/*=================================================
			pretty
=================================================*/
.pretty .state label:before{
    border-color: #cccccc;
    border-radius: 0.25rem;
}

.pretty input:checked~.state label:before{
    border-color: #D0A088;
    background-color: #D0A088;
}

/*=================================================
			[Component] 컴포넌트
=================================================*/
/*****#####===== 상품 카드 컨텐츠 =====#####*****/
.card-item-wrap{
    height: 100%;
    padding: 1.25rem;

    background: #F2EFED;

    border-radius: 0.25rem;
}

.card-item-wrap[type="line"]{

    background: transparent;

    border: 1px solid #CCCCCC;
}

/*****##### 항목 상하 배치 #####*****/
.card-inner-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    height: 100%;
}

/*****##### 타이틀 #####*****/
.card-title-wrap{
    font-size: 1rem;
    font-weight: 600;
}

.card-info-title{
    margin-bottom: 0.25rem;

    font-size: 0.875rem;
    font-weight: 600;
}

/*****##### 폼 컨트롤 #####*****/
.card-item-wrap .form-control{
    width: 6.25rem;
    padding: 0.5rem 0.75rem;

    border: 1px solid #cccccc;
    border-radius: 0 !important;
}

/*=================================================
			[User] 회원
=================================================*/
/*****#####===== 로그인 =====#####*****/
.page-wrap[id^='user-'] .page-header{
    margin-bottom: 3rem;
}

.page-wrap[id^='user-'] .page-header-image{
    width: 18.75rem;
}

.page-wrap[id^='user-'] .form-control{
    height: auto;
}

.user-login-wrap .form-id svg,
.user-login-wrap .form-pw svg{
    margin: -0.125rem 0.25rem 0 0;
}

#user-login-body .pretty.p-svg .state .svg{
    background-color: #D0A088;

    border-radius: 0.25rem;
}

/*****#####===== 회원가입 =====#####*****/
#user-signup-page.page-wrap .login-box{
    margin: 5rem auto 8rem;
}

.user-signup-wrap .form-group-wrap:not(:last-child){
    margin-bottom: 3.75rem;
}
.user-signup-wrap .pretty .state label{
    font-weight: 500;
}

/*****#####===== 회원가입 완료 =====#####*****/
[id^='user-']:not(.iframe) .page-wrap .login-box{
    margin: 11rem auto 8rem;
}

@media (min-width: 100px) and (max-width: 991.98px){
    .page-wrap[id^='user-'] .logo-wrap svg {
        width: 30rem;
        height: auto;
    }
}

/*=================================================
			[Main] 메인페이지
=================================================*/
.page-wrap[id^='main-']{
    padding: 5rem 0;
}

/*****#####===== 컨텐츠 타이틀 =====#####*****/
.content-title-wrap{
    position: relative;

    margin-bottom: 2.25rem;
    padding-left: 2rem;

    font-weight: 600;
    color: #B98369;
}

.content-title-wrap::before{
    content: '';
    display: inline-block;

    position: absolute;
    top: 50%;
    left: 0;

    width: 1.25rem;
    height: 0.625rem;

    background: #B98369;

    transform: translateY(-50%);
}

/*****##### 박스 형태 #####*****/
.content-box-title{
    margin-bottom: 1rem;
    padding: 0.5rem 0.875rem;

    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;

    background: #D0A088;
}

.main-content-wrap .content-box-title{
    padding: 0 0 0 0.875rem;
}

.content-box-title svg{
    margin: -0.25rem 0.375rem 0 0;
}

.content-box-title .content-title-btn{
    display: inline-block;

    height: 100%;
    padding: 0.75rem 1rem;

    font-size: 0.875rem;

    background: #A05C3B;
}

.content-box-title .content-title-btn.chart{
    background: #B27050;
}

.content-box-title svg{
    margin: -0.125rem 0 0 0.25rem;
}

/*****##### 타이틀 버튼 #####*****/
.title-btn-wrap{
    padding: 0.6rem 1.25rem;

    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;

    background: #B27050;
}

.title-btn-wrap svg{
    margin: -0.125rem 0 0 0.125rem;
}

/*****#####===== 메인 컨텐츠 =====#####*****/
.main-top-wrap{
    margin-bottom: 2.375rem;
}

.main-top-wrap .img-wrap{
    width: 15.813rem;
}

.main-content-wrap{
    margin-bottom: 5rem;
}

/*****##### 항목 #####*****/
.main-content-wrap .each-col{
    margin-bottom: 1.125rem;
}

/*****##### 배경 있음 #####*****/
.main-box-wrap{
    padding: 5rem 0;
    background: #F2EFED;
}

/***** 카드 항목 *****/
.main-box-wrap .card-item-wrap{
    background: #ffffff;
}

/*****#####===== 색상 리스트 =====#####*****/
.table-title-wrap{
    padding: 0.625rem 0;

    font-weight: 600;
    color: #ffffff;

    background: #222222;
}

.color-list-wrap{
    position: relative;

    max-height: 43.75rem;
    
    overflow: scroll;
}

.color-list-wrap.bottom{
    overflow-x: scroll;
    overflow-y: visible;
}

.color-list-inner{
    position: relative;

    padding-left: 1.875rem;
}

.color-list-inner .row{
    flex-wrap: nowrap;
}

.color-list-wrap .each-col{
    margin-bottom: 0;
}

.color-list-wrap .each-col:not(:last-child) .table-title-wrap{
    border-right: 1px solid #cccccc;
}

/*****##### 테이블 항목 #####*****/
.color-list-wrap .each-col:not(:first-child) td{
    border-left: none;
}

.color-list-wrap td{
    width: 5.5rem;
    padding: 0;

    border: 1px solid #cccccc;
}

/***** 색상 타이틀 *****/
.color-list-wrap .item-color-title{
    padding: 0.125rem 0;
    color: #ffffff;
}

.color-list-wrap .item-color-title .title-ko{
    font-size: 0.75rem;
    font-weight: 500;
}

/***** 약자 타이틀 *****/
.color-list-wrap .item-mini-title{
    font-size: 1.125rem;
    color: #ffffff;

    background: #818286;
}

/***** 한국어 타이틀 *****/
.color-list-wrap .item-title{
    height: 3.063rem;
    padding: 0.375rem 0.5rem;

    font-size: 0.75rem;
    font-weight: 500;
    color: #222222;

    border-bottom: 1px solid #cccccc;
}

/***** 컬러 타입 타이틀 *****/
.color-type-title{
    position: absolute;
    left: 0;
    bottom: 0;

    width: 1.875rem;
}

.color-type-title .item-wrap{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 5.95rem;

    font-weight: 600;
    text-align: center;
    color: #ffffff;

    background: #888888;
    border: 1px solid #cccccc;
}

/***** 컬러 타입 항목 *****/
.color-list-wrap .item-cell{
    padding: 0.625rem 0;
}

.color-list-wrap .item-cell:not(:last-child),
.color-list-wrap .item-cell.gray:not(:last-child){
    border-bottom: 1px solid #cccccc;
}

.color-list-wrap .item-cell .form-control{
    margin: 0.5rem auto 0.75rem;
    padding: 0.5rem;

    width: 3.75rem;
    height: 1.875rem;

    font-size: 0.875rem;
    text-align: center;

    border: 1px solid #CCCCCC;
    border-radius: 0 !important;
}

/***** : 항목이 없을 때 *****/
.color-list-wrap .item-cell.gray{
    height: 5.938rem;

    background: #eeeeee;

    border-bottom: 1px solid #cccccc;
}

.color-list-wrap .item-btn{
    padding: 0;

    font-size: 0.75rem;
    color: #888888;

    background: transparent;

    border: none;
}

.color-list-wrap .item-btn svg{
    margin-top: -0.125rem;
}

.item-test{
    border: 1px solid #000;
    padding: 0.625rem 0;
}

/*****#####===== 플로팅 항목 =====#####*****/
.float-content-wrap{
    position: fixed;
    bottom: 10rem;
    right: 2.5rem;

    width: 21.375rem;
    padding: 1.25rem;

    background: #ffffff;

    border-radius: 0.25rem;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.12);

    z-index: 999;
}

.float-content-wrap .form-control{
    display: inline-block;

    width: 7rem;
    padding: 0;

    font-size: 1.125rem;
    font-weight: 500;
    text-align: right;
    color: #222222;

    background: #ffffff;

    border: none;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md ~ *****/
@media (min-width: 100px) and (max-width: 992px) {
    .main-top-wrap .card-item-wrap{
        margin-bottom: 1rem;
    }
}

/***** sm ~ *****/
@media (min-width: 100px) and (max-width: 768px) {
    #main-index-body .footer-wrap{
        margin-bottom: 10rem;
    }

    .float-content-wrap{
        bottom: 0;
        left: 0;

        width: 100%;
    }
}

/*=================================================
			[Order] 주문
=================================================*/
/*****#####===== 전체 =====#####*****/
[id^="order-"] .page-wrap{
    padding: 4rem 0 5rem;
}

/*****#####===== 장바구니 =====#####*****/
.order-cart-wrap .header-btn-wrap{
    margin: 0;
    padding: 1.25rem;

    border: 1px solid #cccccc;
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;
}

.order-list-wrap .header-btn-wrap{
    border: none;
}

.order-list-wrap{
    border-radius: 0.25rem;
}

.order-list-wrap .order-list-title{
    font-weight: 400;

    border-top: 1px solid #999999;
    border-bottom: 1px solid #DDDDDD;
}

.order-item-img{
    border: 1px solid #CCCCCC;
}

.order-cart-wrap .total-price-icon{
    margin: 0 1.875rem;
}

.order-cart-wrap .total-price-icon svg{
    margin-top: -0.25rem;
}

.order-cart-wrap .total-price-wrap.final-price{
    border: 1px solid #222222;
    border-radius: 0.25rem;
}

/*****##### 옵션 #####*****/
.ordg-options-wrap .ordg-options:last-child{
    margin: 0 0 0 0.5rem;
}

.ordg-options-wrap .ordg-options:not(:last-child):after{
    display: none;
}

.ordg-options-wrap .ordg-options:last-child::after{
    content: '';
    display: inline-block;

    position: absolute;
    top: 50%;
    left: -0.625rem;

    width: 1px;
    height: 0.625rem;

    background-color: #cccccc;

    transform: translateY(-50%);
}

@media (min-width: 100px) and (max-width: 767.98px){
    .order-cart-wrap .header-btn-wrap{
        border-bottom: 1px solid #cccccc;
    }

    .order-list-wrap .order-item-title {
        font-size: 1.25rem;
    }
}

/*****#####===== 주문하기 =====#####*****/
#order-form-page .order-list-wrap .order-list-title{
    border-top: none;
    border-bottom: 1px solid #999999;
}

.order-list-wrap .order-list-item .order-item{
    border-bottom: 1px solid #dddddd;
}

#order-form-page  .order-list-item .order-item:last-child{
    border-bottom: none;
}

.form-item-wrap:not(:first-child){
    margin-top: 3.75rem;
}

.form-order-wrap .form-item-title{
    padding-bottom: 1rem;

    border-bottom: 1px solid #999999;
}

.form-order-wrap .form-group{
    border-top: none;
    border-bottom: 1px solid #DDDDDD;
}

.form-order-wrap .form-group .form-title{
    background-color: #F4F4F4;
}

.form-order-wrap .btn{
    padding: 0.875rem 1rem;
}

.form-order-wrap .form-radio-content .pretty input:checked~.state label:before{
    background-color: transparent;

    border-color: #D0A088;
}

.form-order-wrap .form-radio-content .pretty input:checked~.state label:after{
    background-color: #D0A088 !important;
}

.form-order-wrap .price-group{
    padding-bottom: 0.875rem;
}

.form-order-wrap .total-price-title{
    padding-bottom: 1rem;
}

.form-order-wrap .price-group-wrap .price-title-title,
.form-order-wrap .price-group-wrap .price-content{
    font-weight: 500;
}

.form-order-wrap .terms-wrap .term-agree-content{
    margin: 0.5rem 0 0.75rem;
    padding: 0 1.25rem 0.688rem;
}

.form-order-wrap .terms-wrap .term-notice-content{
    margin-bottom: 1.25rem;
    padding-left: 0.5rem;
}

.form-order-wrap .terms-wrap .term-notice-content:before{
    left: -0.625rem;
}

.order-btn-wrap [class*="point-btn"]{
    padding: 0.75rem 1rem;
}

.order-addr-wrap [class*="point-btn"]{
    padding: 1rem 1rem;

    font-size: 1rem;
    text-align: center;
}

/*****##### 배송지 선택 #####*****/
.order-addr-wrap .addr-title-wrap{
    padding: 0.75rem 0;

    background-color: #F4F4F4;
}

.gds-write-wrap .addr-wrap{
    padding: 2.5rem 1.5rem 2.125rem;
}

.gds-write-wrap .form-item-title{
    padding-bottom: 1.125rem;

    font-weight: 600;
    font-size: 1.375rem;
    text-align: left;
}

.gds-write-wrap .addr-btn-item [class*="point-btn"]{
    border-radius: 0.25rem;
}

/*****##### 배송지 등록 #####*****/
.gds-write-wrap .gds-write-content{
    padding: 2.5rem 1.5rem 2.125rem;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** ~ lg *****/
@media (min-width: 992px){
    .addr-btn-item [class*="point-btn"]{
        padding: 0.875rem 1rem;
    }
}

@media (min-width: 768px) and (max-width: 992px){
    .form-addr-content .each-col:nth-child(3),
    .form-addr-content .each-col:nth-child(4){
        margin-top: 0.5rem;
    }
}

/***** ~ md *****/
@media (min-width: 768px){
    .form-order-wrap .price-group-wrap,
    .form-order-wrap .terms-wrap {
        border: 1px solid #999999;
    }

    .form-order-wrap .price-group-wrap{
        padding: 1.313rem;

        border-radius: 0.25rem 0.25rem 0 0;
    }

    .form-order-wrap .terms-wrap{
        border-radius: 0 0 0.25rem 0.25rem;
    }

    .addr-btn-item [class*="point-btn"]{
        padding: 0.875rem 1rem;
    }
}

/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .order-list-wrap{
        border: none;
    }

    .addr-btn-item [class*="point-btn"]{
        padding: 0.875rem 1rem;
    }

    .form-order-wrap .page-h3{
        font-size: 1.125rem;
    }

    .item-price-title{
        font-size: 1rem;
    }

    .order-cart-wrap .order-list-item{
        padding: 0 1.25rem;

        border-bottom: none;
    }
}

@media (min-width: 100px) and (max-width: 575.98px){
    .gds-write-content .form-item-title{
        margin-bottom: 1rem;
    }

    .gds-write-wrap .form-group .form-title {
        background-color: #ffffff;
    }
}

/*****#####===== 주문 완료 =====#####*****/
.order-complete-wrap .page-header{
    margin-bottom: 3rem;
}

#order-complete-page .order-list-wrap .order-list-title{
    border-top: none;
    border-bottom: 1px solid #999999;
}

#order-complete-page .order-list-item .order-item:last-child{
    border-bottom: none;
}

/***** sm *****/
@media (min-width: 100px) and (max-width: 767.98px) {
    .form-order-wrap .form-item-wrap,
    #order_form .order-list-wrap .order-list-item{
        padding: 0 1.5rem;

        border-bottom: none;
    }

    .form-order-wrap .total-price-wrap{
        margin-top: 2.25rem;

        border-bottom: none;
    }

    .form-order-wrap .terms-wrap{
        border: 1px solid #dddddd;
    }
}

/*=================================================
			[Mypage] 마이페이지
=================================================*/
/*****#####===== 공통 =====#####*****/
[id^="mypage-"] #gnb-wrap.scrolled{
    background: #ffffff;
}

[id^="mypage-"] #gnb-wrap.scrolled .logo-wrap{
    display: block;
}

[id^="mypage-"] #gnb-menu-wrap{
    display: none;
}

[id^="mypage-"] .gnb-btn-wrap{
    padding: 0.688rem 0;
}

[id^="mypage-"] .page-wrap{
    background: #F5F5F5;
}

@media (min-width: 100px) and (max-width: 767.98px){
    [id^="mypage-"] #gnb-wrap.scrolled #gnb-menu-wrap{
        display: none;
    }

    [id^="mypage-"] #gnb-wrap.scrolled .gnb-btn-wrap{
        display: block;
    }
}

/*****#####===== 페이지 타이틀 =====#####*****/
.mypage-title-wrap .title-title{
    font-size: 1.75rem;
    font-weight: 700;
}

.mypage-title-wrap .breadcrumb-wrap{
    margin-top: 0.5rem;
}


.mypage-title-wrap .breadcrumb-item{
    font-size: 0.875rem;
    font-weight: 400;
}

.breadcrumb-wrap .breadcrumb-item:last-child{
    font-weight: 500;
    color: #111111;
}

/*****#####===== 박스 컨텐츠 =====#####*****/
.mypage-border-box{
    border-radius: 0.25rem;
}

.mypage-item-title,
.mypage-order-wrap .ordg-item-title{
    padding: 0.875rem;

    font-weight: 400;
    color: #222222;

    background-color: #F4F4F4;
}

/*****#####===== 주문 항목 버튼 =====#####*****/
.ordg-btn{
    border-radius: 0.25rem;
}

/*****#####===== 네비게이션 =====#####*****/
.mypage-nav-wrap .nav-wrap{
    margin: 0;
    padding: 0;
}

.mypage-nav-wrap .mem-info-wrap{
    padding: 1.125rem 1.75rem;

    font-size: 1.125rem;

    border: none;
    border-bottom: 1px solid #DDDDDD;
}

.mypage-nav-wrap .nav{
    padding: 1.688rem;
}

.mypage-nav-wrap .nav-item{
    padding: 0;
}

.mypage-nav-wrap .nav-item:not(:last-child){
    margin-bottom: 1.25rem;
}

.mypage-nav-wrap .nav-item .nav-text{
    margin-left: 0.25rem;
}

.nav[data-type="basic"] .nav-link{
    padding: 0;

    font-weight: 500;
}

.nav[data-type="basic"] .nav-link svg{
    margin-top: -0.25rem;
}

.nav[data-type="basic"] .nav-link.active{
    font-weight: 600;
    color: #B98369;
}

.nav[data-type="basic"] .nav-link.active svg path,
.nav[data-type="basic"] .nav-link.active svg g{
    fill: #B98369;
}

/*****#####===== 정보 수정 =====#####*****/
.mypage-info-wrap [class*="point-btn"]{
    width: 6.5rem;
}

.mypage-info-wrap .form-title{
    background-color: #F4F4F4;
}

.mypage-info-wrap .terms-group:nth-child(1){
    margin-bottom: 0.5rem;
}

.mypage-info-wrap .pretty .state label{
    font-size: 0.875rem;
    font-weight: 500;
}

#mypage-info-body .pretty .state label:after,
#mypage-info-body .pretty .state label:before{
    top: calc((0% - (100% - 1em)) - 8%);
}

#mypage-info-body .pretty.p-svg .state .svg{
    width: calc(1.25em + 2px);
}

.withdraw-btn{
    padding: 0.375rem 0.625rem;

    font-size: 0.75rem;
    font-weight: 400;
    color: #ffffff;

    background: #999999;

    border-radius: 0.25rem;
}

/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .mypage-info-wrap .form-control{
        height: auto;
    }

    .mypage-info-wrap [class*="point-btn"]{
        width: 7.5rem;
    }
}

/*****#####===== 배송지 추가 =====#####*****/
/***** sm *****/
@media (min-width: 100px) and (max-width: 768px){
    .mypage-info-wrap .form-group-wrap .form-group{
        border: none;
    }
}

/*****#####===== 계정 정보 =====#####*****/
.mypage-info-wrap{
    margin: 0;
}

.company-info-wrap .mypage-right-lists:not(:last-child){
    margin-bottom: 1.5rem;
}

.mypage-info-wrap .mypage-title-border{
    padding: 1.25rem;
}

.mypage-info-wrap .mypage-info-inner{
    background-color: #F4F4F4;

    border-radius: 0.25rem;

    overflow: hidden;
}

.mypage-info-wrap .mypage-box-inner{
    padding: 1.5rem 1.25rem;
}

.myapge-list-item{
    padding: 1rem 0.875rem;

    border-bottom: 1px solid #DDDDDD;
}

.company-info-wrap{
    padding-bottom: 0;
}

.company-info-wrap .mypage-border-box{
    padding: 0;
}

.company-info-wrap .form-title{
    padding: 1.375rem 1.5rem;

    background-color: #F4F4F4;
}

.company-info-wrap .form-content{
    min-height: 4.25rem;
    padding: 1.375rem 1.5rem;
}

.company-info-wrap .form-border-none{
    padding: 0;

    border: none;
}

.edit-btn{
    font-size: 0.875rem;
    line-height: 1rem;
    letter-spacing: -0.44px;

    border-bottom: 1px solid #555555;
}

@media (min-width: 768px){
    .addr-btn-item [class*="point-btn"].btn-xs {
        padding: 0.25rem 0.5rem;
    }
}

@media (min-width: 100px) and (max-width: 767.98px) {
    .addr-btn-item [class*="point-btn"].btn-xs {
        padding: 0.25rem 0.5rem;

        font-size: 1rem;
    }
}

/*****#####===== 주문 상세 =====#####*****/
#mypage_order_view .form-item-wrap:first-child{
    margin-top: 0;
}

/*****#####===== 주문 취소/환불 =====#####*****/
.ordg-price-content{
    text-align: center;
}

.mypage-refund_write-page .ordg-options-wrap .ordg-options:last-child::after,
.mypage-cancel_write-page .ordg-options-wrap .ordg-options:last-child::after{
    display: none;
}

.mypage-refund_write-page .ordg-options-wrap .ordg-options:last-child,
.mypage-cancel_write-page .ordg-options-wrap .ordg-options:last-child{
    margin: 0;
}

/*****#####===== 미디어 쿼리 =====#####*****/
/***** md *****/
@media (min-width: 100px) and (max-width: 992px) {
    .mypage-nav-wrap{
        border: 1px solid #dddddd;
    }

    .mypage-nav-wrap .nav-wrap{
        border: none;
    }
}

/***** sm *****/
@media (min-width: 100px) and (max-width: 768px) {
    .mypage-nav-wrap{
        margin: 2rem 0 3rem;

        border: 1px solid #DDDDDD;
        border-radius: 0.25rem;
    }

    .mypage-nav-wrap .nav{
        padding: 1.5rem 1.5rem  0.5rem;
    }

    .mypage-nav-wrap .nav-link.active .nav-text{
        border-bottom: none;
    }

    .ordg-price-content{
        text-align: right;
    }
}