@charset "UTF-8";
/* 부트스트랩 컬럼 패딩 0으로 초기화 */

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(18,121,189,0.3);
}

[class*="row"] {
    padding: 0; margin: 0;
}

input.form-control[readonly] {
    background-color: #f9f9f4 !important;
}

[class*="col-"] {
    padding: 0; margin: 0;
}

[class*="col"] {
    padding: 0; margin: 0;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    padding: 0; margin: 0;
}

input[type=checkbox] {
    display: none;
}

input[type=radio] {
    display: none;
}

.container-980 {
    max-width: 980px;
}

.artframe .slick-prev, .artframe .slick-next {
    top: 40%!important;
}
/* 슬릭 슬라이드 화살표 기본값 코드 */
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 60px!important;
    height: 60px!important;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: #6C757D!important;
    border: none;
    outline: none;
    background: #ffffff!important;
    box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    z-index: 10;
    opacity: 100%;
}

.slick-disabled {
    opacity: 0;
}

.slick-prev::after {
    position: absolute;
    width: 1px;
    height: 14px;
    top: 28px;
    right: 30px;
    background: #6C757D;
    content: ""!important;
    transform: rotate(-45deg);
    border-radius: 1px;
    z-index: 11;
}

.slick-prev::before {
    position: absolute;
    width: 14px;
    height: 1px;
    top: 25px;
    right: 24px;
    background: #6C757D;
    content: ""!important;
    transform: rotate(-45deg);
    border-radius: 1px;
    z-index: 11;
}

.slick-next::after {
    position: absolute;
    width: 1px;
    height: 14px;
    top: 28px;
    right: 30px;
    background: #6C757D;
    content: ""!important;
    transform: rotate(45deg);
    border-radius: 1px;
    z-index: 11;
}

.slick-next::before {
    position: absolute;
    width: 14px;
    height: 1px;
    top: 25px;
    right: 24px;
    background: #6C757D;
    content: ""!important;
    transform: rotate(45deg);
    border-radius: 1px;
    z-index: 11;
}










#quick-menu {
    position: fixed; top: 0; right: 0; width: 95px; height: 100vh; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05); z-index: 1022;
}

#quick-menu .grid {
    align-self: stretch; display: flex; align-items: center; justify-content: center; width: 95px; height: 95px; text-align: center; border-bottom: 1px solid #ced4da; cursor: pointer;
}


#quick-menu .active {
    background: #ff5b59;
}

#quick-menu .active i.fal {
    color: #fff;
}

#quick-menu .active div > p {
    color: #fff;
}

.quick-submenu {
    position: fixed; top: 120px; right: -445px; width: 390px; height: 100vh; background: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}

.quick-submenu #qm-mypage {
    z-index: 1019;
}

.quick-submenu #qm-cart {
    z-index: 1019;
}

.quick-submenu #qm-guide {
    z-index: 1019;
}

.quick-submenu #qm-customer {
    z-index: 1019;
}

#qm-estimate {
    right: 95px;
    z-index:1020;
}

#qm-estimate img {
    width: 100%;
}

#qm-estimate table td {
    line-height: 1.8rem; font-size: 12px;
}

#qm-estimate .button {
    width: 86px; height: 34px; color: #fff; text-align: center;
    /* line-height: 35px;  */
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qm-estimate .btn-webhard {
    background: #fff; color: #8b969f; border: 1px solid #cecece;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qm-estimate .btn-cart {
    background: #fff; border: 1px solid #ff5b59; color: #ff5b59;
}

#qm-estimate .btn-order {
    background: #ff5b59;
}

#qm-estimate .btn-estimate {
    background:#8b969f;
    transition: .2s;
}

#qm-estimate .btn-estimate:hover {
    transition: .2s;
    background:#1279bd;
}


/* 모바일 작업 주의 사항 */
.work-precaution-txt { display:none; }


/* TODO:액자 페이지 ------------------------------------------------------------------------ */
/* 크롬 업데이트로 클릭 시 짙은 검은 테두리가 생기는 걸 방지 */
input:focus, select:focus, option:focus, textarea:focus, button:focus{
    outline: none;
}
/* 액자 상단 */
/* .main-frame-img {
    max-width: 1920px;
    margin: 0 auto;
}

.main-frame-img img{
    width: 100%;
} */

.frame-header {
    position: fixed;
    top: 119px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    height: 72px;
    display: flex;
    align-items: center;
    z-index: 20;
}

.frame-header .container{
    height: 70px;
}

.frame-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.frame-nav > ul {
    justify-content: flex-start!important;
}

.frame-nav ul span {
    color: #d6d6d6;
}

/* 상단 hover 오픈예정 */
.frame-nav ul li .header-comming-normal {
    animation: hovertext 0.2s ease-out;
    color: #525252!important;
}

.frame-nav ul li .header-comming-hover {
    display: none;
    animation: hovertext 0.2s ease-out;
    color: rgba(82, 82, 82, 0.6)!important;
}

.frame-nav ul li:hover .header-comming-normal {
    display: none;
}

.frame-nav ul li:hover .header-comming-hover {
    display: block;
}

.frame-nav ul li .fa-triangle {
    transform: rotate(180deg);
    font-size: 11px;
    position: relative;
    left: 5px;
    bottom: 2px;
}

#main-menu>li {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border-bottom: 3px solid #fff;
    padding-top: 3px;
}

#main-menu>li:hover {
    /* color: #000000; */
    border-bottom: 3px solid #1279bd;
}
#main-menu>li > a:hover {
    color: #1279bd;
}

#main-menu>li>a {
    text-align: center;
    text-decoration: none;
    display: block;
    padding: 24px 20px;
    /* padding: 12px 12px; */
}

#sub-menu {
    position: absolute;
    top: 70px;
    background: #fff;
    opacity: 1;
    display: none;
    width: 100%;
    border:1px solid #E9ECEF;
}

#sub-menu>li {
    text-align: center;
    /* padding: 12px 28px; */
    padding: 12px 0px;
}

#sub-menu>li>a {
    font-size: 15px;
    text-decoration: none;
}

#sub-menu > li:hover {
    color: #000000;
}

#sub-menu > li > a:hover {
    color: #000000;
    border-bottom:1px solid #000000;
}

/* #main-menu>li:hover #sub-menu {
    opacity: 1;
    visibility: visible;
    border: 1px solid #e9ecef;
} */

.frame-header .frame-header-btn1 {
    width: 160px;
    height: 50px;
    line-height: 45px;
    font-size: 16px;
    background-color: #131829;
    color: #fff;
}

.frame-header .frame-header-btn1-sm {
    width: 160px;
    height: 35px;
    line-height: 30px;
    font-size: 16px;
    background-color: #131829;
    color: #fff;
}

.frame-header .frame-header-btn2 {
    width: 160px;
    height: 50px;
    line-height: 45px;
    font-size: 16px;
}

.frame-header .frame-header-btn2-sm {
    width: 160px;
    height: 35px;
    line-height: 30px;
    font-size: 16px;
    color: #525252;
    border: 1px solid #525252;
}

.frame-header .frame-header-btn2:hover {
    color: #525252;
    background-color: #fff;
    border-color: #131829;
}

.frame-header .frame-header-btn2-sm:hover {
    color: #525252;
    background-color: #fff;
    border-color: #131829;
}

.order-artframe select {
    background: url('/data/assets/images/photoframe/select-arrow.png') no-repeat 95% 50%;
    border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.frame-header .select-orderlink {
    width: 125px;
    height: 25px;
    border: none;
}

.frame-header .select-header-size {
    width: 80px;
    border: none;
}
/* 액자 메인페이지 */
/* .artframe {
    margin-top: 95px;
} */

.frame-main-box {
    width: 350px;
    height: 550px;
    position: absolute;
    /* z-index: 1; */
    /* background-color: #fbad79; */
}

.frame-main-box .main-text-box {
    /* animation: slide 1s ease-out; */
    padding-left: 20px;
}

@keyframes slide {
    from {
        left: 0px;
        opacity: 0;
    }
    to {
        left: 0px;
    }
}

.frame-main-box .main-text-box .mainbox-text01 {
    font-size: 43px;
    color: #fff;
    padding-top: 40px;
}

.frame-main-box .main-text-box .mainbox-text02 {
    font-size: 55px;
    color: #fff;
    line-height: 70px;
    font-weight: 500;
}

.frame-main-box .main-box-link {
    /* position: relative;
    bottom: -140px; */
    position:absolute;
    top:75%;
    left:50%;
    transform:translate(-50%,-50%);

}

.frame-main-box .main-box-link .btn {
    width: 310px;
    height: 45px;
    font-size: 15px;
    padding-top: 10px;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 500;
}

.frame-slick-responive {
    height: 550px;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

/* 액자 메인이미지 바꿀때 여기서 바꾸기 */
.framemain-img-url01 {
    background-image: url('/data/assets/images/photoframe/frame-main/frame-main-slide05.png?v={{ $ver }}');
}

.framemain-img-url02 {
    background-image: url('/data/assets/images/photoframe/frame-main/frame-main-slide04.png?v={{ $ver }}');
}

.framemain-img-url03 {
    background-image: url('/data/assets/images/photoframe/frame-main/frame-main-slide03.png?v={{ $ver }}');
}

.framemain-img-url04 {
    background-image: url('/data/assets/images/photoframe/frame-main/frame-main-slide02.png?v={{ $ver }}');
}

.framemain-img-url05 {
    background-image: url('/data/assets/images/photoframe/frame-main/frame-main-slide01.jpg?v={{ $ver }}');
}

.frame-main-container .frame-main-slick .slick-track{
    top: 1px; /* 밑에 검은색 줄이 생겨서 슬릭에 1px을 줌 */
}

.frame-main-slick .slick-prev {
    opacity: 20%!important;
    left: 2%!important;
}

.frame-main-slick .slick-prev:hover {
    opacity: 50%!important;
    background: #ffffff!important;
}

.frame-main-slick .slick-next {
    opacity: 20%!important;
    right: 7.2%!important;
}

.frame-main-slick .slick-next:hover {
    opacity: 50%!important;
    background: #ffffff!important;
}


.frame-main-container .slick-dots {
    padding-bottom: 40px;
    bottom: 0!important;
    z-index: 2;
}

.frame-main-container .slick-dots li.slick-active button:before {
    color: #fff!important;
}

.frame-main-container .slick-dots li button:before {
    color: #fff!important;
}
.frame-mainlink-text {
    margin-top: 20px;
    margin-bottom: 65px;
}

.artframe-main .frame-home-title01 {
    font-size: 29px;
    font-weight: 500;
    margin-top: 80px;
    margin-bottom: 70px;
}

/* 액자 메인 링크 이미지 오버일때 */
.easy-quick-order .framelink-zoom {
    overflow: hidden;
    border-radius: 25px;
}

.artframe-main .framelink-zoom a img{
    transition: all 0.2s linear;
}

.artframe-main .framelink-zoom a img:hover {
    transform: scale(1.1);
}

/* 액자 메인 링크 오픈예정이미지 오버일때 */
.artframe-main .link-zoom-comming:hover a img{
    transform: scale(1.0);
    filter: brightness(0.9);
}

.link-zoom-comming .img-over-link .zoom-comming-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 200%);
    z-index: 5;

    animation: hovertext 0.2s ease-out;
}
@keyframes hovertext {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.link-zoom-comming .img-over-link .zoom-comming-text p {
    font-size: 23px;
    font-weight: 500;
    color: #191919;
}

.artframe-main .home-link-title {
    font-size: 20px;
    color: #191919;
    margin-bottom: 10px;
}

.artframe-main .home-link-text {
    font-size: 14px;
    color: #8b969f;
}

.frame-list-title {
    font-size: 15px;
    color: #191919;
}

.frame-list-subtitle {
    font-size: 14px;
    color: #8b969f;
}

.artframe-main .frame-video {
    margin-top: 100px;
}

.artframe-main .design-room-title {
    font-size: 29px;
    font-weight: 500;
    margin-top: 80px;
    margin-bottom: 75px;
}

.artframe-main .add-option-title {
    font-size: 18px;
    color: #191919;
    margin-top: 20px;
    margin-bottom: 70px;
}

.artframe-main .popular-frame-title {
    font-size: 29px;
    font-weight: 500;
    margin-top: 100px;
    margin-bottom: 55px;
}
/*
.main-link-title {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #191919;
}

.main-link-text {
    font-size: 14px;
    color: #8B969F;
    margin-bottom: 65px;
}
*/

.frame-main-title01 {
    margin-top: 65px;
    margin-bottom: 65px;
    font-size: 29px;
    font-weight: 500;
}

.frame-main-title02 {
    margin-top: 100px;
    margin-bottom: 25px;
    font-size: 29px;
    font-weight: 500;
}

.frame-main-title03 {
    margin-top: 100px;
    margin-bottom: 55px;
    font-size: 29px;
    font-weight: 500;
}

.famous-frame-title {
    font-size: 15px;
    color: #191919;
}

.famous-frame-text {
    font-size: 14px;
    color: #8b969f;
}

.frame-main-text-01 {
    margin-top: 100px;
    margin-bottom: 55px;
    font-weight: 500;
    font-size: 29px;
}

.frame-main-text-02 {
    margin-top: 50px;
    margin-bottom: 55px;
    font-weight: 500;
}

.frame-popular-tem {
    margin-bottom: 100px;
}
.frame-popular-tem .slick-list {
    /*padding: 0 30px !important;*/
}


.slick-gradient-left::after {
    content: "";
    display: block;
    position: absolute;
    left: -145px;
    width: 200px;
    height: 230px;
    background-image: linear-gradient(to right,#fff,#fff 88%,rgba(255,255,255,0));
    z-index: 2;
}

.slick-gradient-right::after {
    content: "";
    display: block;
    position: absolute;
    right: -170px;
    width: 200px;
    height: 230px;
    background-image: linear-gradient(to left,#fff,#fff 75%,rgba(255,255,255,0));
    z-index: 2;
}

/* 액자 메인페이지 끝 */

/* 셀프 액자 만들기 */
.myframe-section .myframe-link-title {
    font-size: 29px;
    font-weight: 500;
    margin-top: 125px;
    margin-bottom: 55px;
}

.myframe-section .myframe-link-text {
    font-size: 20px;
    color: #060606;
}

.choose-artist div img:hover {
    filter: brightness(70%);
}

.enlarge-img {
    overflow: hidden; margin-left: 15px; margin-right: 15px; border-radius: 22px;
}

.enlarge-img img {
    transition: all 0.2s linear;
}

.enlarge-img:hover img {
    transform: scale(1.1); filter: brightness(70%);
}

.img-over-link {
    position: relative;
}

.img-over-link .btn {
    position: absolute;
    top: 160px;
    left:50%;
    transform: translateX(-50%);
    width: 190px;
    height: 55px; font-size: 18px; line-height: 40px; border: 1px solid #fff; color: #fff; font-weight: 350; z-index: 3; border-radius: 10px;
}

.over-link-btn2 {
    top: 230px !important;
}

.frame-comming-btn {
    top: 190px !important;
}

/* 상세보기 메인 영상 hover */
.enlarge-video video {
    transition: all 0.2s linear;
}

.enlarge-video:hover video {
    filter: brightness(70%);
}

.enlarge-video .video-over-link {
    position: relative;
}

.enlarge-video .video-over-link .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,450%);
    width: 190px;
    height: 55px;
    font-size: 18px;
    line-height: 40px;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 350;
    z-index: 3;
    border-radius: 10px;
}

/* 캔버스 액자*/
.artframe .main-frame {
    max-width: 1920px;
}

.frameview-section .frame-view-title01 {
    font-size: 29px;
    color: #000000;
    font-weight: 350;
    margin-top: 55px;
    margin-bottom: 20px;
}

.frameview-section .frame-view-subtitle01 {
    font-size: 15px;
    color: #000000;
    font-weight: 350;
    margin-bottom: 40px;
}

.frameview-section .frame-view-title02 {
    font-size: 29px;
    color: #000000;
    font-weight: 350;
    margin-top: 100px;
    margin-bottom: 10px;
}

.frameview-section .frame-view-title02-1 {
    font-size: 29px;
    color: #000000;
    font-weight: 350;
    margin-top: 100px;
    margin-bottom: 10px;
}

.frameview-section .frame-view-subtitle02 {
    font-size: 15px;
    color: #000000;
    font-weight: 350;
    margin-bottom: 60px;
}

.frameview-section .frame-view-text01 {
    font-size: 15px;
    color: #000000;
    font-weight: 350;
    margin-top: 20px;
}

.frameview-section .frame-compare-title01 {
    font-size: 16px;
    color: #000000;
    margin-top: 20px;

}

.frameview-section .frame-compare-title02 {
    font-size: 16px;
    color: #fb5b59;
    margin-top: 20px;
}

.frameview-section .frame-compare-subtitle {
    font-size: 15px;
    color: #000000;
    font-weight: 350;
    margin-top: 5px;
}

.frameview-section .view-indesign-title {
    font-size: 29px;
    color: #000000;
    font-weight: 350;
    margin-top: 100px;
    margin-bottom: 65px;
}

.frameview-section .view-size-title {
    font-size: 29px;
    color: #000000;
    font-weight: 350;
    margin-top: 100px;
    margin-bottom: 20px;
}

.frameview-section .view-size-subtitle {
    font-size: 15px;
    color: #000000;
    font-weight: 350;
    margin-bottom: 75px;
}

.frameview-section .compare-size-text {
    margin-top: 20px;
    margin-bottom: 10px;
}


.artframe .frame-text-01 {
    margin-top: 50px;
}

.artframe .frame-text-02 {
    margin-top: 10px; margin-bottom: 40px;
}

.artframe .frame-text-03 {
    margin-top: 20px; font-size: 15px; color: #000000;
}

.artframe .frame-slide-title {
    margin-top: 15px; font-size: 20px; color: #191919; /* margin-right: 30px; */
}

.artwork-slide-title {
    font-size: 16px; color: #191919; position: relative;
}

.size-slide-title {
    font-size: 16px; color: #191919; position: relative; bottom: 40px;
}

.artframe .frame-add-optitle {
    margin-top: 20px;font-size: 20px;color: #000000;
}

.artframe .frame-text-04 {
    font-size: 29px; color: #525252; margin-top: 150px; margin-bottom: 100px; font-weight: 500;
}
.artframe .frame-text-05 {
    font-size: 18px;
    color: #191919;
    margin-top: 15px;
    margin-bottom: 50px;
}

.artframe .design-category-name1 {
    font-size: 18px;
    color: #191919;
    margin-top: 15px;
    margin-bottom: 10px;
}

.artframe .design-category-name2 {
    font-size: 14px;
    color: #8b969f;
    margin-bottom: 50px;
}

.artframe .design-view-name2 {
    font-size: 14px;
    color: #8b969f;
    margin-bottom: 30px;
}

.artframe .design-room-text01 {
    font-size: 20px; color: #191919; margin-top: 15px; margin-bottom: 50px;
}
.artframe .design-room-text02 {
    font-size: 20px; color: #191919; margin-top: 15px; margin-bottom: 125px;
}

.top-banner .make-frame {
    width: 190px;
    height: 55px;
    font-size: 18px;
    line-height: 40px;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 350;
    z-index: 3;
    border-radius: 10px;
}

.artframe .make-frame {
    width: 330px; height: 77px; font-size: 28px; margin: auto; display: inherit; padding-top: 15px; margin-bottom: 50px;
}


.frame-template-container .btn-slide-prev, .frame-template-container .btn-slide-next {
    top: 40%!important;
    box-shadow: none!important;
    background: #fff!important;
    font-size: 40px;
    position: relative;
}

.frame-template-container .btn-slide-prev {
    left: -25px;
}

.frame-template-container .btn-slide-next {
    right: -25px;
}

.frame-template-container .btn-slide-prev:hover, .frame-template-container .btn-slide-next:hover {
    background: #f5f5f5!important;
}

.cvsize-carousel .owl-stage {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    align-items: center;
}

/* 쉽고 빠른 액자주문 */
.artframe .easy-quick-order {
    /* display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, auto)); column-gap:10px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.artframe .my-room {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(565px, auto)); column-gap:10px;
}

.artframe .add-option {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, auto)); /* row-gap: 30px; */
}

.artframe .select-myframe {
    /* display:grid; grid-template-columns: repeat(auto-fill, minmax(350px, auto)); column-gap:10px; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* justify-content: center; */
}

.artframe .choice-box {
    height: 180px; background-color: #fcfcfc; border-bottom:1px solid #dee2e6;
}

.artframe .choice-box label {
    cursor:pointer;
}

#two-btn-choicebox {
    width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 100;
}

.btn-choice1 {
    display: inline-block; width: 90%; background: #333; color:#fff; padding: 10px 0; text-align:center; font-size: 15px;
}

.btn-choice2 {
    display: inline-block; width: 90%; background: #fff; border:1px solid #ccc; padding: 10px 0; text-align:center; font-size: 15px;
}

.btn-choice1:hover {
    background-color: rgb(0,0,0,0.7); color:#fff;
}

/* 액자 주문페이지 */
.goods-tab-link-holder .nav-tabs .nav-item {
    background-color: #fff;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: #fff;
}

.goods-tab-link-holder .nav-tabs .nav-link.active {
    color: #1279bd !important;
}

.goods-tab-link-holder .active {
    border-bottom: 4px solid #1279bd !important;
}

.goods-tab-link-holder .nav-tabs .nav-item .product-link {
    border: none;
    border-right: 1px solid #dee2e6;
}

.order-review-newtext {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff5b59;
    color: #ffffff;
    border-radius: 3px;
    width: 14px;
    height: 15px;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

.container-980 .owl-carousel .owl-item img {
    width: 100%;
}

.order-artframe {
    margin-top: 95px;
}

/* .order-menu-ul>li>a {
    padding: 0px 0px!important;
} */

.order-artframe .slider-nav li {
    margin-top: 10px;
    margin-right: 10px;
}

.preview-slide {
    padding: 3px;
}

.preview-slide-active {
    filter: brightness(80%);
    /* box-shadow: 0 0 0 3px #707070 inset; */
}

.fm-order-interval {
    margin-top: 19px;
    /* margin-bottom: 10px; */
    margin-bottom: 2px;
}

.order-artframe .artframe-order-title {
    font-size: 25px;
    color: #191919;
}

.order-artframe .artframe-order-subtitle {
    font-size: 14px;
    color: #a8a8a8;
}

.order-artframe .artframe-order-text {
    font-size: 14px;
    color: #191919;
}

.artframe .frame-order-text-01 {
    margin-top: 80px;
    margin-bottom: 15px;
}
.artframe .frame-order-text-02 {
    margin-top: 100px;
    margin-bottom: 15px;
}

.frame-radio input[type=radio] + label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    height: 30px;
    border: 1px solid #dee2e6;
    text-align: center;
    background-image: none;
    font-size: 12px;
}

.frame-radio input[type=radio]:checked + label {
    border: 1px solid #1279bd;
}

.frame-radio input[type=radio]:checked + label > div {
    color: #1279bd;
}

.order-artframe .order-slide-wrap select {
    font-size: 12px;
}

.over-frame-title {
    font-size: 25px;
    color: #000000;
    margin-bottom: 15px;
}

.over-frame-subtitle {
    font-size: 15px;
    color: #000000;
    margin-top: 10px;
}

.over-orderbtn-img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: #fff;
    width: 450px;
    height: 450px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);

    z-index: 10;
    /* top: 0px; */
    top: -342px;
    right: 313px;
}

.frame-speech-square {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff5b59;
    color: #ffffff;
    border-radius: 3px;
    width: 15px;
    height: 15px;
    font-weight: 400;
    font-size: 12px;
    padding-bottom: 1px;

    position: relative;
    top: 4px;
    left: 3px;
}

.frame-commonsize {
    position: relative;
    order: 1;
}

.frame-expertsize {
    position: relative;
    order: 2;
}

/* 액자 주문 가이드모달 */
.pagingInfo::first-letter {
    font-size: 36px;
}

.pagingInfo {
    position: relative;
    bottom: 18px;
}

.close-frame-Modal {
    position: absolute; font-size: 35px; right: 8px; color: #909090; z-index: 100;
}

.modal-guide {
    background-color: #fff !important;
}

.order-artframe .modal-guide-btn {
    width: 60px; height: 25px; background-color: #707070;
}
.order-artframe .modal-guide-btn a {
    font-size: 12px; display: flex; justify-content: center; color: #ffffff; line-height: 22px;
}

.modal-guide-margin {
    margin: 80px 55px 45px 55px;
}
.frame-popup-slick {
    height: 550px; border: 1px solid black;
}

.modal-edit-title01 {
    font-size: 28px; color: #000; line-height: 40px; font-weight: 350;
}

.modal-print-title01 {
    font-size: 28px; color: #000; line-height: 40px; margin-top: 40px; margin-bottom: 30px;
}

.modal-print-title02 {
    font-size: 19px; color: #000; margin-top: 15px;
}

#frame-prev {
    cursor: pointer;
}
#frame-next {
    cursor: pointer;
}
.slick-dots > .slick-active {
    color: #ff0000 !important; font-weight: bold;
}

.artist-category img {
    border-radius: 15px;
}
.artist-category img:hover {
    filter: brightness(90%);
}

.modal-print-margin {
    margin: 70px 50px 45px 50px;
}

.modal-download-btn .btn {
    position: absolute; /*bottom: 23px;*/ top: 320px; width: 210px; height: 40px; font-size: 15px; line-height: 25px; border: 1px solid #d6d6d6; color: #525252;
}

/* 모달 편집 설명 */
.modal-print-tab .nav-tabs .nav-item .frame-link {
    border: none; height: 60px; font-size: 15px; padding-top: 19px;
}

.modal-print-tab .active {
    border-bottom: 3px solid #000 !important; color: #000000 !important;
}

.modal-print-tab .nav-tabs li {
    width: 160px;
}

/* 모달 액자 선택 설명 */
.modal-choose-margin {
    margin: 5px 35px 35px 35px;
}

.modal-choose-title02 {
    margin-top: 20px;
    /* margin-bottom: 85px; */
}

.frame-choose-sm {
    position: absolute; bottom: 0px;
}
/* 주문페이지 artwork 명화 선택 주문 */
.container-980 .btn-prev {
    position:absolute; left:-75px; top:50%; transform: translateY(-50%); width:60px; height:60px; z-index:10;
}

.container-980 .btn-next {
    position:absolute; right:-75px; top:50%; transform: translateY(-50%); width:60px; height:60px; z-index:10;
}

.container-980 .btn-prev:hover {
    cursor:pointer; border-radius: 50%; background-color: #f5f5f5
}

.container-980 .btn-next:hover {
    cursor:pointer; border-radius: 50%; background-color: #f5f5f5
}

.container-980 .fa-solid {
    font-size: 34px;
    font-weight: 300;
    color: #a8a8a8;
}

/* 명화 선택 주문 */
.choosefamous #main-menu>li {
    border-bottom: none;
}
.choosefamous #main-menu > li:hover{
    border-bottom: none;
}

.choosefamous #main-menu > li > a:hover {
    border-bottom: 1px solid black;
}
.choosefamous #main-menu > li > a {
    padding: 0px 0px; border-bottom: 1px solid #fff;
}


.custom-checkbox input[type=checkbox] + label {
    padding: 5px 0; padding-top: 0px; width: 100px; height: 100px; border-radius: 8px; text-align: center; background: #fcfcfc;
}

.custom-checkbox input[type=checkbox] + label img.off {
    display: inline-block;
}

.custom-checkbox input[type=checkbox] + label img.on {
    display: none;
}

.custom-checkbox input[type=checkbox]:checked + label {
    background-image: none; border-color: #7A9FD0;
}

.custom-checkbox input[type=checkbox]:checked + label img.on {
    display: inline-block;
}

.custom-checkbox input[type=checkbox]:checked + label img.off {
    display: none;
}

.choose-frame .slick-prev{
    box-shadow: none !important; background: #fcfcfc !important; border-radius: 0px !important; top: 28% !important; left: -45px !important;
}

.choose-frame .slick-next{
    box-shadow: none !important; background: #fcfcfc !important; border-radius: 0px!important; top: 28% !important; right: -45px !important;

}

.blue-bar {
    /* background-image: url('/assets/images/photoframe/choosefamous/blue-bar.png');
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    height: 54px; */
    background-color: #242939;
}

.blue-bar .blue-bar-title {
    font-size: 29px;
    color: #fff700;
    padding-right: 20px;
}

.blue-bar .blue-bar-subtitle {
    font-size: 20px;
    color: #ffffff;
}


.btn-prev-wrap {
    position:absolute; left:-50px; top:35%; transform: translate(0, -35%); z-index:2;
}

.btn-slide-prev, .btn-slide-next {
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; color: #6c757d; text-align: center; font-size: 30px; background: #fff; box-shadow: 0px 1px 6px 2px rgba(0, 0, 0, 0.1);
}






.btn-next-wrap {
    position:absolute; right:-50px; top:35%; transform: translate(0, -35%); z-index:2;
}

.nopc-main-img-caption {
    display:flex; justify-content: space-between; align-items: center; padding:12px;
}

.nopc-main-img-caption .txt-wrap {
    width:70%; color:#fff;
}

.nopc-main-img-caption .txt-wrap .copy1 {
    font-size:20px; color:#fff; opacity: 0.7;
}

.nopc-main-img-caption .txt-wrap .copy2 {
    font-size:28px; color:#fff;
}

.nopc-main-img-caption .btn-wrap {

}

.nopc-main-img-caption .btn-wrap .btn {
    border:1px solid #fff; padding:10px 15px; color:#fff;
}


.choose-picture {
    /* display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, auto)); column-gap:10px; overflow: hidden; */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.myframe-slide {
    position:relative; margin-bottom:95px;
}

.myframe-slide .gradient-bar {
    position:absolute; right:0; top:86px; height:300px; width:5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    /* background: linear-gradient(to left,#fff,#fff 88%,rgba(255,255,255,0)); */
    z-index:9;
}

.gradient-bar {
    position:absolute; right:0; top:86px; height:300px; width:5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    /* background: linear-gradient(to left,#fff,#fff 88%,rgba(255,255,255,0)); */
    z-index:9;
}

.myframe-slide .btn-prev {
    position:absolute; left:-100px; top:55%; transform: translateY(-55%); width:60px; height:60px; z-index:10;
}

.myframe-slide .btn-next {
    position:absolute; right:-100px; top:55%; transform: translateY(-55%); width:60px; height:60px; z-index:10;
}

.myframe-slide .btn-prev:hover {
    cursor:pointer; border-radius: 50%; background-color: #f5f5f5
}

.myframe-slide .btn-next:hover {
    cursor:pointer; border-radius: 50%; background-color: #f5f5f5
}

.myframe-slide .fa-solid {
    font-size: 40px;
    font-weight: 300;
    color: #a8a8a8;
}

.artframe .column3 {
    display:grid; grid-template-columns: auto 276px 276px; gap: 12px;
}

.artframe .order-column3 {
    display:grid; grid-template-columns: auto 240px 240px; gap: 10px;
}


.artframe .more-grid2 {
    /* display:grid; grid-template-columns: repeat(auto-fill, minmax(400px, auto)); gap:15px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.artframe .more-grid3 {
    display:grid;
    /* grid-template-columns: repeat(auto-fill, minmax(350px, auto));  */
    grid-template-columns: repeat(auto-fill, minmax(400px, auto));
    gap:15px;
}

.compare-pcmargin {
    margin-right: 6px;
}

.artframe .order-grid2 {
    /* display:grid; grid-template-columns: repeat(auto-fill, minmax(400px, auto)); gap:15px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.artframe .artluxe-view-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.artframe .order-myroom-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}


.artframe .order-grid3 {
    display:grid; grid-template-columns: repeat(auto-fill, minmax(310px, auto)); gap:15px;
}

.go-slide {
    cursor: pointer;
}



.artluxe .sizing {
    display: grid; grid-template-columns: auto 102px 152px 203px 304px; column-gap:73px; align-items: end;
}


.img-href-over img {
    transition: all 0.5s;
}

.img-href-over img:hover {
    opacity: 0;
}







#estimate-box {
    position:fixed; width:100%; left:0; bottom:0px; background-color:rgba(255,255,255,1); padding:1.2rem 0; border-top:1px solid #ff5b59; z-index:99;
}

#estimate-box a.rect-btn {
    display:block; width:100%; padding:10px 20px; border:1px solid #ff5b59; background: #fff; text-align:center; color:#ff5b59; font-size:14px;
}

#estimate-box a.rect-btn2 {
    display:block; width:100%; padding:10px 20px; border:1px solid #ff5b59; background: #ff5b59; text-align:center; color:#fff; font-size:14px;
}

#estimate-box .rect-btn3 {
    border:1px solid #ff5b59; background: #ff5b59; padding:6px 0;
}

#estimate-box-detail {
    display:flex; justify-content:center; border-top:2px solid #ff5b59; position:fixed; left:0; bottom:-620px; width:100%; height:620px; background-color:rgba(255,255,255,1); z-index:2;
}

#estimate-box-detail .wrapper {
    width:100%;
}

#estimate-box-detail .title {
    font-size:16px; font-weight:500;
}

#estimate-box-detail .close {
    font-size:24px; font-weight:500; color:#707070;
}

#estimate-box-detail .sub-title {
    font-size:16px; font-weight:500;
}

#estimate-box-detail .contents {
    color:#707070;
    font-size:14px;
}