/* 서브 공통 */
.sub-wrapper {margin-top: 50px; padding: 100px 30px 0;}
.sub-wrapper .sub-tit {display: block; font-size: 32px; padding-bottom: 32px; word-break: keep-all;}
.breadcrumb {display: flex; column-gap: 4px; padding: 0 12px; font-size: 14px; margin-bottom: 35px;}
.sub-cont {display: flex; flex-direction: column; row-gap: 90px;}
.sub-cont .flex {width: 100%; align-items: center; column-gap: 30px;}
.sub-cont .flex > div,
.sub-cont .flex > .sub-info {width: 50%;}
.sub-cont .flex .img-wrap {height: 52vw;}
.sub-cont .img_100 {flex-direction: column; align-items: flex-start !important; row-gap: 65px;}
.sub-cont .img_100 > div,
.sub-cont .img_100 > .sub-info {width: 100% !important;}
.sub-cont .img_100 .img-wrap {width: 100% !important; height: 37vw !important;}
.breadcrumb .sc-home{color: var(--text3);}
.breadcrumb a:hover span{text-decoration: underline;}
.collection-name {font-size: 124px; display: flex; align-items: flex-start; padding-bottom: 50px;}
.collection-name span{font-size: 12px; display: inline-block; padding-top: 30px; padding-left: 16px;}
.flex {display: flex;}

/* input */
.input-wrap {display: flex; flex-direction: column; row-gap: 20px;}
.input-wrap .input-item-box > span {position: relative; padding-bottom: 4px;}
.input-wrap .input-item-box.must > span::after {position: absolute; display: block; top: 0; right: -10px; content: '*'; color: #ff0000;}
.input-wrap .input-item-box .input-item {width: 100%;}
.input-wrap .input-item-box .input-item input[type="text"],
.input-wrap .input-item-box .input-item input[type="password"] {width:100%; padding: 10px 12px; outline: none; border: 1px solid var(--line); border-radius: 0;}
.input-wrap .input-item-box .input-item input[type="text"]:focus,
.input-wrap .input-item-box .input-item input[type="password"]:focus {border: 1px solid var(--text1);  transition: all 0.3s;}
.input-wrap .input-item-box .input-item input[readonly] {background-color: var(--depth2);}
.input-wrap .input-item-box .input-item input[readonly]:focus {border: 1px solid var(--line); background-color: var(--depth2); pointer-events: none;background-color: #f5f5f5; cursor: default;}
.input-wrap .input-item-box .input-item input[readonly]::placeholder {color: var(--text1);}

.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label{position: relative; cursor:pointer; color: var(--text1) !important; padding-left: 24px !important;}
.checkbox-item input[type="checkbox"] + label:hover {color: var(--text2) !important; transition: all 0.3s;}
.checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; width:16px; height:16px; border:1px solid var(--line); left:0; top: 50%; transform: translate(0, -50%);}
.checkbox-item input[type="checkbox"]:checked + label:before{ content:""; background-color: var(--text1); border: 1px solid var(--text1); background-image: url('../img/chk.png'); background-repeat: no-repeat; background-position: 50%;}

/* 페이징 */
.pg_wrap {display: flex; align-items: center; justify-content: center; margin-top: 130px;}
.pg {display: flex; align-items: center;}
.pg_page, .pg_current {display:inline-block;vertical-align:middle; height:30px; width: 30px;}
.pg_page:not(.pg_start):not(.pg_end),.pg_current{display:inline-block; line-height: 28px; text-align: center;}
.pg_current {color: var(--text1); font-weight: normal;}
.pg_page:not(.pg_start):not(.pg_end) {color:var(--text3);}
.pg_page:not(.pg_start):not(.pg_end):hover {text-decoration: underline;}
.pg_start, .pg_prev, .pg_end, .pg_next {text-indent:-999px; overflow:hidden; padding:0; border: 0; opacity: 0.5;}
.pg_start {background:url('../img/btn_first.gif') no-repeat 50% 50%;}
.pg_prev {background:url('../img/btn_prev.gif') no-repeat 50% 50%;}
.pg_end {background:url('../img/btn_end.gif') no-repeat 50% 50%;}
.pg_next {background:url('../img/btn_next.gif') no-repeat 50% 50%;}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {opacity: 1;}

/* 이전글,다음글 */
.bo_v_nb {margin-top: 100px;}
.bo_v_nb li {border-top: 1px solid var(--line);}
.bo_v_nb li:last-child {border-bottom: 1px solid var(--line);}
.bo_v_nb li a, .bo_v_nb li div {display: flex; align-items: center; column-gap: 30px; padding: 10px 8px;}
.bo_v_nb li a:hover {text-decoration: underline;}
.bo_v_nb li.disabled {color: var(--text4);}

/* About */
.about .flex:nth-of-type(2n) {flex-direction: row-reverse;}
.about .flex:nth-of-type(2n) .sub-tit,
.about .flex:nth-of-type(2n) .sub-info p {text-align: right;}

/* Our Story */
.story .flex {flex-direction: column; align-items: flex-start; row-gap: 65px;}
.story .flex > div {width: 100%;}
.story .img-flex {display: flex; column-gap: 10px;}

/* value */
.value .sub-info li .sub-tit {display: flex; padding-bottom: 0;}
.value .sub-info li .sub-tit .num {width: 60px;}
.value .sub-info li {padding: 36px 12px; border-bottom: 1px solid var(--line); cursor:pointer;}
.value .sub-info li:nth-of-type(1) {border-top: 1px solid var(--line);}
.value .sub-info li .value-info {display: none; padding: 40px 0 0; line-height: 1.4;}
.value .sub-info li.on .value-info {display: block;}
.value .img_100 .img-wrap {height: 20vw !important;}

/* REVIEWS */
/* list */
.review-ul {display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 130px;}
.review-li {width: calc(100% / 2 - 30px / 2);}
.review-li .img-wrap {width: 100%; height: calc(((100vw - 70px) / 2 - 30px / 2) * 0.5626); margin-bottom: 30px;}
.review-li .txt-wrap h5 {margin-bottom: 10px;}
.review-li .txt-wrap p {font-size: 14px;}
.review-li:hover .txt-wrap h5 {text-decoration: underline;}
/* view */
.review-view {width: 100%; max-width: 900px; margin: 0 auto 100px;}
.review-view .tit-wrap {margin-bottom: 180px; text-align: center;}
.review-view .tit-wrap .line {display: inline-block; margin: 22px 0; width: 30px; height: 1px; background-color: var(--line);}
.review-view .tit-wrap h5 {font-size: 24px;}
.review-view .img-wrap {width: 100%; height: 524px; margin-bottom: 70px;}
.review-view .tags {margin-top: 90px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;}
.review-view .tags li {padding: 4px 6px; border-radius: 4px; background-color: var(--line2); color: var(--text2);}

/* Bridal & Wedding */
/* list */
.gall-top-wrap {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 16px;}
#gall_ul {display: flex; flex-wrap: wrap; gap: 16px;}
.gall_li {width: calc(100% / 4 - (16px * 3) / 4);}
.gall_box, .gall_con, .gall_img, .gall_img a , .gall_img a img {width: 100%;}
.gall_box {position: relative;}
.gall_box .gall_chk {position: absolute; top: 0; left: 0;}
.gall_img {margin-bottom: 10px;}
.gall_text_href {display: flex; flex-direction: column; row-gap: 8px;}
.gall_text_href .bo_tit{ font-size: 14px;}
.gall_text_href .bo_cnt{ font-size: 12px;}
.gall_img:hover + .gall_text_href .bo_tit, .bo_tit:hover {text-decoration: underline;}
/* write */
.collection-input-wrap {display: flex; margin-bottom: 130px;}
.collection-input-wrap > * {flex: 1; padding: 0 16px;}
.collection-input-ul {display: flex; flex-direction: column; row-gap: 16px;}
.collection-input-li {width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; row-gap: 8px;}
.collection-input-li input, .collection-input-li textarea{width: 100%; border: 1px solid var(--line); border-radius: 0; background-color: transparent; padding: 12px 16px;}
.collection-input-li textarea {height: 150px;}
.collection-input-li input:focus, .collection-input-li textarea:focus{outline: none;}
.collection-input-li p {margin-bottom: 8px;}
.collection-input-li input[type="file"] {padding-left: 106px;}
.collection-input-li .file-wr-wrap{position: relative;}
.collection-input-li .lb_icon { display: inline-block; padding: 12px 60px; background-color: #fff; border: 1px solid var(--line); color: var(--text1); font-size: 14px;cursor: pointer;text-align: center;white-space: nowrap;position: absolute; top: 50%; left: 4px; transform: translateY(-50%);}
.btn_confirm > * {width: 100%; max-width: 600px; margin: 0 auto;}
.btn_confirm .txt-wrap {text-align: center; margin-bottom: 30px;}
.btn_confirm .txt-wrap p {font-size: 20px; margin-bottom: 16px;}
.btn_confirm .txt-wrap span {font-size: 14px; color: var(--text2);}
.btn_confirm .btn {font-size: 14px; padding: 12px 16px; height: 45px; width: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line);}
.btn_confirm a {margin-bottom: 16px;}
.btn_confirm button{transition: background 0.2s; background-color: var(--text2); color: #fff;}
.btn_confirm button:hover {background-color: var(--text3);}
/* view */
/*
#bo_v_atc::-webkit-scrollbar {display: none;}
#bo_v_con div, #bo_v_con ul {width: 100%; max-width: 600px; margin: 0 auto;}
#bo_v_con {position: sticky; top: 0; right: 0;} */
#bo_v_atc {display: flex;}
#bo_v_atc #bo_v_img {width: calc(100% - 45vw); text-align: center;}
/* #bo_v_atc #bo_v_img a {width: 100%; margin-bottom: 20px;}
#bo_v_atc #bo_v_img a:last-child {margin-bottom: 0;} */
#bo_v_atc #bo_v_img img {width: 100%; max-width: 600px; margin-bottom: 20px;}
#bo_v_atc #bo_v_img img:last-child {margin-bottom: 0;}
#bo_v_con {width: 45vw; padding: 0 20px; padding-top: 70px; height: calc(100svh - 150px); min-height: 600px; display: flex; flex-direction: column; align-items: center; row-gap: 3vw; position: sticky; top: 50px;}
#bo_v_con > * {max-width: 600px; margin: 0 auto;}
#bo_v_con .goods-tit {text-align: center;  width: 100%;}
#bo_v_con .goods-tit h5 {font-size: 20px; margin-bottom: 16px;}
#bo_v_con .goods-tit p {font-size: 14px; color: var(--text2); margin-bottom: 30px;}
#bo_v_con .goods-tit .default-btn {width: 100%;}
.goods-detail-wrap {font-size: 14px; width: 100%;}
.goods-detail-wrap li:not(:last-child) {margin-bottom: 20px;}
.goods-detail-wrap li button {margin-bottom: 20px; display: flex; align-items: center;}
.goods-detail-wrap li button svg {rotate: 0deg; transition: rotate 0.2s;}
.goods-detail-wrap li button.open svg {rotate: -180deg;}
.goods-detail-wrap li p {line-height: 1.5;}
.goods-detail-wrap .goods-detail {padding-left: 15px; display: none;}
.goods-detail-wrap .goods-detail span{display: inline-block; color: var(--text2); margin-bottom: 20px;}
.goods-detail-wrap .goods-detail .designby{margin-top: 12px;}

/* login */
.login-wrap.mbskin {margin: 0 !important; width: auto !important; height: 100vh; display: flex; align-items: center; justify-content: center;}
.login-wrap.mbskin .mbskin_box {width: 420px; display: flex; flex-direction: column; row-gap: 60px;  padding: 60px 50px; border: 1px solid #d4d4d4;}
.login-wrap.mbskin .mbskin_box .login-logo {width: 140px;}
.login-wrap.mbskin .mbskin_box #login_fs {padding: 0; border: 0;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit {margin: 0 !important; background-color: var(--primary-btn-bg); color: var(--primary-btn-text); font-weight: normal;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit:hover {background-color: var(--primary-btn-hover-bg);}
.login-wrap.mbskin .mbskin_box #login_fs #login_info {display: flex; flex-direction: column; row-gap: 8px;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info:after {display: none;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl {text-align: initial;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl:hover a {color: var(--primary); transition: all 0.3s;}
.login-wrap.mbskin .input-wrap .input-item-box {display: flex; flex-direction: column; align-items: flex-start;}
.login-wrap.mbskin .input-wrap .input-item-box .input-item input {height: auto !important; margin: 0 !important; box-shadow: none;}
.login-wrap .btn-default {width: 100%; height: 44px !important; font-size: 20px; color: var(--text1); display: flex; align-items: center; justify-content: center; font-size: 16px !important; border: 1px solid var(--text1);}
.login-wrap .btn-default:hover {background-color: var(--text1) !important; color: #fff !important; transition: all 0.3s;}
.login-wrap .checkbox-wrap {padding: 0 4px;}
.login-wrap .btn-wrap {margin-top: 0;}

@media screen and (max-width: 1200px) {
    .value .flex:not(.img_100) {flex-direction: column-reverse;}
    .value .flex:not(.img_100) > .sub-info,
    .value .flex:not(.img_100) > div {width: 100%;}
    .value .sub-info li {padding: 32px 0;}
    .value .sub-info li:nth-of-type(1) {border-top: 0;}
}

@media screen and (max-width: 1024px) {
    .sub-wrapper {padding: 50px 24px 0;}
    .pg_wrap {margin-top: 90px;}
    .collection-name {font-size: 96px;}
    /* REVIEWS */
    .review-ul {column-gap: 24px; row-gap: 90px;}
    .review-li {width: calc(100% / 2 - 24px / 2);}
    .review-li .img-wrap {height: calc(((100vw - 48px) / 2 - 24px / 2) * 0.5626);}
    /* view */
    .review-view .tit-wrap {margin-bottom: 100px;}
    .review-view .img-wrap {height: 55vw; margin-bottom: 50px;}
    .review-view .tags {margin-top: 30px;}
    /* Bridal & Wedding */
    /* list */
    .gall_li {width: calc(100% / 3 - (16px * 2) / 3);}
    /* write */
    .collection-input-wrap {margin-bottom: 90px;}
    /* view */
    #bo_v_atc {flex-direction: column-reverse; row-gap: 70px;}
    #bo_v_con {position: unset; width: 100%; height: fit-content; min-height: unset; row-gap: 50px;}
    #bo_v_atc #bo_v_img {width: 100%; max-width: 600px; margin: 0 auto;}
}
@media screen and (max-width: 768px) {
    .sub-wrapper {padding: 16px 16px 0;}
    .pg_wrap {margin-top: 50px;}
    /* REVIEWS */
    .review-li {width: 100%; row-gap: 50px;}
    .review-li .img-wrap {height: calc((100vw - 32px) * 0.5626);}
    /* view */
    .review-view .tit-wrap {margin-bottom: 50px;}
    .review-view .tit-wrap h5 {font-size: 20px;}
    /* Bridal & Wedding */
    /* list */
    .gall_li {width: calc(100% / 2 - 16px  / 2);}
    /* write */
    .collection-input-wrap {flex-direction: column; row-gap: 30px; margin-bottom: 50px;}
    .collection-input-wrap > * {padding: 0;}
    .btn_confirm .txt-wrap {display: none;}
    /* about */
    .sub-cont .flex > div,
    .sub-cont .flex > .sub-info {width: 100% !important;}
    .sub-cont .img_100 .img-wrap,
    .sub-cont .flex .img-wrap {height: 56vw !important;}
    .sub-cont .flex,
    .about .flex:nth-of-type(2n) {flex-direction: column; row-gap: 40px !important;}
    .about .flex:nth-of-type(2n) .sub-tit,
    .about .flex:nth-of-type(2n) .sub-info p {text-align: left;}
    .value .img_100 .img-wrap {height: 40vw !important;}
}

@media screen and (max-width: 500px) {
    .collection-name {font-size: 20vw; padding-bottom: 40px;}
    .sub-wrapper .sub-tit {font-size: 28px; padding-bottom: 20px;}
    .sub-wrapper .sub-info p {font-size: 15px;}
    .sub-cont .img_100 .img-wrap,
    .sub-cont .flex .img-wrap {height: 64vw !important;}
    .value .img_100 .img-wrap {height: 48vw !important;}
    .value .sub-info li {padding: 28px 0;}
    .value .sub-info li .sub-tit p {font-size: 28px;}
    .value .sub-info li .sub-tit .num {display: none;}
    .value .sub-info li:nth-of-type(1) {padding: 0 0 28px 0;}
    .story .img-flex {flex-direction: column; row-gap: 10px;}
    .story .img-flex .img-wrap {width: 100%;}
}

@media screen and (max-width: 480px) {
    .login-wrap.mbskin .mbskin_box {width: 100vw; height: 100vh; border: 0; border-radius: 0; justify-content: center; align-items: center; padding: 0px 20px 40vw 20px;}
    .login-wrap.mbskin .mbskin_box > form {width: 100%;}
}