/**
 * DOREMI - 도레미 브랜드 전용 스타일
 * 레거시 doremi.css 마이그레이션
 *
 * 구성:
 *   - 공통 탑 배너
 *   - 브랜드 스토리 (brandstory)
 *   - 제작 과정 (product process)
 *   - 제품 소개 (product introduction)
 *   - 문의 게시판 (QnA)
 *   - 문의 상세 (QnA view)
 *   - 찾아오는길 (direction)
 *   - 로그인
 *   - 상품 상세 (product detail)
 *   - 문의 작성 (QnA write)
 *
 * 브랜드 컬러: #b8b9d8 (라벤더), 보조: #cb8e73 (코랄)
 * 이미지 경로: S3 CDN 원본 유지
 */


/* ==========================================================================
   공통 탑 배너
   ========================================================================== */

.dormei_top_banner {
    width: 100%;
    display: flex;
    position: relative;
    z-index: -1;
    max-width: 1920px;
    height: 450px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153204371740963.jpg") no-repeat center top;
    background-size: cover;
}
.dormei_top_banner::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5 !important;
    background-size: 100%;
    content: "";
    z-index: -1;
    background-color: #111111;
}
.doremi_top_txt_wrap {
    width: 90%;
    height: 95px;
    margin: auto;
    text-align: center;
}
.doremi_top_txt_wrap > h1 {
    font-size: 50px;
    line-height: 1.3;
    letter-spacing: 0;
    padding-left: 0.4rem;
}
.doremi_top_txt_wrap > h1 br { display: none; }
.doremi_top_txt_wrap > p {
    line-height: 1.5;
    padding-top: 1rem;
    word-break: keep-all;
}
.doremi_top-bar {
    width: 95%;
    height: 1px;
    margin: 0 auto;
    background-color: #ddd;
    display: block;
}


/* ==========================================================================
   브랜드 스토리 (Brand Story)
   ========================================================================== */

.doremi-brand {
    width: 100%;
    position: relative;
    height: 1610px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
}
.doremi-brand > li { position: absolute; width: 50%; overflow: hidden; }
.doremi-brand-inner { padding: 10px; }

/* 텍스트 블록 위치 */
.brand-txt-01 { top: 0; left: 0; height: 428px; text-align: left; }
.brand-txt-inner01 > p:nth-child(1) { font-size: 20px; }
.brand-txt-inner01 > p:nth-child(2) { font-size: 40px; line-height: 45px; font-weight: 700; }
.brand-txt-02 { right: 0; top: 605px; font-size: 28px; line-height: 28px; height: 266px; }
.brand-txt-inner02 { text-align: right; }
.brand-txt-03 { left: 0; top: 1102px; font-size: 26px; line-height: 30px; height: 473px; }

/* 장식 점 */
.doremi_brand-dot {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background-color: #dedeef;
    position: absolute;
    z-index: -1;
}
.brand-dot01 { top: 30px; left: 0; }
.brand-dot02 { top: 0; right: 0; }
.brand-dot03 { top: 0; left: 0; }

/* 연결선 */
.doremi_h-line {
    width: 1px;
    display: block;
    height: 126px;
    background-color: #424242;
    position: absolute;
}
.h-line-01 { left: 23%; top: 200px; }
.h-line-02 { right: 23%; top: 110px; }
.h-line-03 { left: 23%; top: 200px; }

/* 하단 링크 버튼 */
.dormei-brand-link {
    width: 256px;
    height: 54px;
    background-color: #111111;
    position: absolute;
    bottom: 0;
}
.dormei-brand-inner-link { display: flex; padding: 13px 30px; }
.dormei-brand-inner-link p { color: #fff; font-size: 16px; float: left; height: 26px; margin: auto; }
.dormei-brand-link .doremi-click-link {
    float: right;
    margin-top: 8px;
    width: 24px;
    height: 16px;
    margin: auto;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153158985084366.png") no-repeat center top;
    background-size: cover;
}

/* 이미지 블록 */
.doremi-brand-pic { width: 550px; }
.brand-pic-01 {
    top: 0;
    right: 0;
    height: 540px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153204670791980.jpg") no-repeat center top;
    background-size: auto 100%;
}
.brand-pic-02 {
    top: 428px;
    left: 0;
    height: 540px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153204671278529.jpg") no-repeat center top;
    background-size: auto 100%;
}
.brand-pic-03 {
    bottom: 0;
    right: 0;
    height: 697px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153204671687597.jpg") no-repeat center top;
    background-size: auto 100%;
}


/* ==========================================================================
   제작 과정 (Product Process)
   ========================================================================== */

.doremi-process { position: relative; margin-top: 100px; }
.process-section,
.doremi-process-top {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.doremi-process-top { margin-bottom: 50px; }
.process-top-inner > p:nth-child(1) { padding: 10px; }
.process-top-inner > p:nth-child(2) {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    padding-left: 10px;
}
.process02 { margin-top: 110px; margin-bottom: 110px; }
.process03 { margin-bottom: 110px; }

.process-section { height: 452px; width: 100%; }

/* 세로 텍스트 라벨 */
.trans_text-form { width: 38px; height: 100%; }
.text-form01 { float: left; position: relative; }
.text-form02 { position: absolute; right: 8px; }
.trans-number-01 { bottom: 0; }
.trans-number-02 { top: 100px; }

.tran-border-line {
    width: 107%;
    height: 40%;
    display: block;
    border-right: 1px solid #8989b9;
    position: absolute;
}
.tran-line01 { bottom: 60px; }
.tran-line02 { bottom: 0; }
.tran-small-txt {
    font-size: 12px;
    line-height: 12px;
    position: absolute;
    height: 38px;
    left: -10px;
    width: 120px;
    color: #131373;
}
.tran-samll-txt01 { top: 126px; }
.tran-samll-txt02 { top: 184px; }
.trans-number {
    font-size: 42px;
    font-weight: 700;
    color: #b8b8d8;
    position: absolute;
}
.transfrom {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* 공정 이미지 */
.process-pic { width: 724px; height: 452px; position: relative; margin-left: 37px; }
.process-pic01 {
    float: left;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153210993845940.jpg") no-repeat center top;
    background-size: auto 100%;
}
.process-pic02 {
    position: absolute;
    right: 64px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153210994393803.jpg") no-repeat center top;
    background-size: auto 100%;
}
.process-pic03 {
    float: left;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153210995086201.jpg") no-repeat center top;
    background-size: auto 100%;
}

/* 공정 설명 카드 */
.process-information {
    width: 495px;
    height: 307px;
    background-color: #f5f5f5;
    position: absolute;
    display: flex;
}
.pro-info01 { z-index: 2; right: 0; top: 50%; margin-top: -153.5px; }
.pro-info02 { z-index: -1; left: 0; top: 50%; margin-top: -153.5px; }
.process-bar {
    width: 33px;
    height: 2px;
    background-color: #131373;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.process-icon { width: 90px; height: 90px; display: block; margin: 0 auto; }
.pro-icon01 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153211299814781.png") no-repeat center top;
    background-size: auto 100%;
}
.pro-icon02 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153211300347137.png") no-repeat center top;
    background-size: auto 100%;
}
.pro-icon03 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153211300860913.png") no-repeat center top;
    background-size: auto 100%;
}

.process-txt { text-align: center; }
.pro-inner { margin: auto; height: 60%; overflow: hidden; }
.pro-txt-inner > p { font-size: 20px; line-height: 27px; }


/* ==========================================================================
   제품 카테고리 탭 (Product Kind Tabs)
   ========================================================================== */

.product-kind-tabs {
    max-width: 1200px;
    margin: 80px auto 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.kind-tab {
    padding: 8px 20px;
    font-size: 14px;
    color: #424242;
    background-color: #fff;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.kind-tab.active,
.kind-tab:hover {
    background-color: #b8b9d8;
    color: #fff;
    border-color: #b8b9d8;
}


/* ==========================================================================
   제품 소개 (Product Introduction)
   ========================================================================== */

.product-introduction {
    margin-top: 100px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 100px;
    position: relative;
}
.doremi-process-intro { width: 100%; }
.doremi-process-intro > li {
    float: left;
    width: 22.5%;
    margin-right: 3.3%;
    background-color: #fff;
}
.doremi-process-intro > li:last-child { margin-right: 0; }
.intro-kind-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.intro-pic { width: 270px; height: 300px; border: 1px solid #d0d0d0; }
.intro-pic01 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153176351248840.jpg") no-repeat center;
    background-size: cover;
}
.intro-pic02 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153176351757763.jpg") no-repeat center;
    background-size: cover;
}
.intro-pic03 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153176352265673.jpg") no-repeat center;
    background-size: cover;
}
.intro-pic04 {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153176352651083.jpg") no-repeat center;
    background-size: cover;
}

.intro-txt-con { padding: 14px; float: left; }
.intro-txt-con > p:nth-child(1) { font-size: 20px; font-weight: 600; color: #424242; line-height: 27px; }
.intro-txt-con > p:nth-child(2) { font-size: 10px; color: #858585; }

/* 원형 화살표 버튼 */
.intro-click-but {
    margin-top: 14px;
    float: right;
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153158985084366.png") no-repeat center #bfbfdf;
    background-size: 50%;
}
.intro-click-but > a { width: 100%; height: 100%; display: block; }

/* 배경 영역 */
.intro-bg {
    width: 100%;
    height: 946px;
    background-color: #f5f5f5;
    z-index: -3;
    position: absolute;
    top: 0;
    left: 0;
}


/* ==========================================================================
   문의 게시판 (QnA)
   ========================================================================== */

/* 검색창 */
.qna { margin-top: 100px; }
.doremi_qna_inner { float: right; }
.doremi_qna_container {
    width: 100%;
    padding: 30px 20px;
    background-color: #f5f5f5;
    margin-bottom: 60px;
    overflow: hidden;
}
.doremi_qna_inner .sch_input {
    height: 46px;
    width: 287px;
    padding-left: 15px;
    background: #fff;
    float: left;
    border: 0;
}
.doremi_qna_inner .sch_btn {
    height: 46px;
    float: left;
    border: 0;
    width: 40px;
    font-size: 15px;
    background-color: #fff;
    cursor: pointer;
}
/* 검색 돋보기 아이콘 (도레미 색상) */
.find {
    display: inline-block;
    color: #b8b9d8;
    font-size: 1.5em;
    font-weight: normal;
    width: 20px;
    height: 20px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153203737552429.png") no-repeat center top;
    background-size: cover;
}

/* 탭 메뉴 */
#qna_tab1, #qna_tab2, #qna_tab3 { display: none; }
#qna_tab1:checked ~ #qna_table_01 { display: block; }
#qna_tab2:checked ~ #qna_table_02 { display: block; }
#qna_tab3:checked ~ #qna_table_03 { display: block; }

.doremi_qna-check {
    width: 324px;
    height: 40px;
    margin-top: 100px;
    box-sizing: border-box;
    position: relative;
    top: 2px;
}
.doremi_qna-check > label {
    cursor: pointer;
    width: 33.33333%;
    height: 100%;
    font-size: 15px;
    color: #fff;
    line-height: 16px;
    background-color: #222222;
    letter-spacing: 1.2px;
    padding: 9px 0;
    border-top: 1px solid #222222;
    box-sizing: border-box;
    float: left;
    display: block;
    text-align: center;
    transition-duration: 0.5s;
}
.doremi_qna_table { display: none; width: 100%; overflow: hidden; }

/* 활성 탭 스타일 */
#qna_tab1:checked ~ .doremi_qna-check > label:nth-child(1) {
    background-color: #fff;
    color: #424242;
    border-bottom: 3px solid #fff;
    border-left: 1px solid #222222;
}
#qna_tab2:checked ~ .doremi_qna-check > label:nth-child(2) {
    background-color: #fff;
    color: #424242;
    border-bottom: 3px solid #fff;
}
#qna_tab3:checked ~ .doremi_qna-check > label:nth-child(3) {
    background-color: #fff;
    color: #424242;
    border-bottom: 3px solid #fff;
    border-right: 1px solid #222222;
}

/* 답변 완료 뱃지 */
.reply {
    width: 70%;
    height: 35px;
    display: block;
    margin: 0 auto;
    line-height: 35px;
    background-color: #696969;
    color: #fff;
}

/* 게시판 테이블 */
.doremi_qna-table { width: 100%; font-size: 15px; table-layout: fixed; }
.doremi_qna-table th,
.doremi_qna-table td {
    padding: 20px 10px;
    vertical-align: middle;
    text-align: center;
    color: #424242;
}
.doremi_qna-table th {
    border-top: 2px solid #808080;
    border-bottom: 1px solid #c1c1c1;
    font-weight: 300;
    letter-spacing: 2px;
}
.doremi_qna-table td {
    border-bottom: 1px solid #c1c1c1;
    cursor: pointer;
}
.doremi_qna-table td.board_title:hover { color: #b8b9d8; }
.board_title { width: 50%; }
.qna-lock-icon {
    display: inline-block;
    width: 0.875em;
    height: 1em;
    vertical-align: -0.125em;
    margin-right: 10px;
    color: inherit;
    fill: currentColor;
}
.qna-empty {
    text-align: center;
    padding: 40px 0;
    color: #888;
}
.board_title i {
    font-family: "FONT Awesome 5 Free";
    display: inline-block;
    font: normal;
    font-size: inherit;
    text-rendering: auto;
    margin-right: 15px;
}

/* 글쓰기 버튼 */
.do_board-write-btn {
    margin: 0 auto;
    display: table;
    margin-top: 30px;
    margin-bottom: 30px;
}
.do_board-write-btn > a {
    width: 150px;
    height: 50px;
    background-color: #222222;
    display: table-cell;
    font-size: 15px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}

/* 페이지네이션 */
.pagination_container { padding-top: 60px; }
.pagination { text-align: center; font-size: 15px; }
.pagination .page_item {
    cursor: pointer;
    display: inline-block;
    margin: 0 6px;
    color: #424242;
    border: none;
    height: 38px;
    width: 38px;
    line-height: 38px;
    background-color: transparent;
    font-size: 17px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-transform: uppercase;
}
.page_item:hover { color: #b8b9d8; }
.pagination .page_item.active { color: #424242; font-weight: 500; }
.pagination .page_item.disabled { opacity: 0.3; cursor: default; }
.template-hidden { display: none; }


/* ==========================================================================
   문의 상세 (QnA View)
   ========================================================================== */

.doremi_board { margin-top: 100px; }
.doremi_board_view { color: #111111; font-size: 14px; }
.doremi_board_view_title_wrap {
    overflow: hidden;
    padding: 15px 24px 20px 24px;
    border-top: 2px solid #b8b9d8;
    border-bottom: 1px solid rgba(184,185,216,0.5);
}
.doremi_board_title { font-size: 20px; font-weight: 500; }
.doremi-board-view { padding-top: 10px; float: left; }
.doremi-board-view > li { font-size: 14px; float: left; color: #b3b3b3; }
.doremi-board-view > li:nth-child(2) { margin-right: 15px; margin-left: 15px; }
.doremi_board_view_wrap {
    padding: 30px;
    min-height: 300px;
    border-bottom: 1px solid rgba(184,185,216,0.5);
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* 이전글/다음글 */
.doremi_pre_next_wrap {
    width: 100%;
    border-top: 2px solid rgba(184,185,216,0.5);
    text-align: left;
}
.doremi_pre_next_wrap > dl {
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(184,185,216,0.5);
    font-size: 14px;
}
.doremi_pre_next_wrap dt { padding: 0 30px; float: left; }
.doremi_pre_next_wrap dd { padding: 0 30px; float: left; color: #858585; }
.doremi_prenext::after { content: ""; display: block; clear: both; }
.doremi_prn-btn {
    font-family: "FONT Awesome 5 Free";
    display: inline-block;
    font: normal;
    font-size: inherit;
    text-rendering: auto;
    margin-right: 15px;
}
.doremi_prn-btn i { display: block; }

/* 목록 버튼 */
.doremi_board-view-list {
    margin: 0 auto;
    display: table;
    margin-top: 30px;
    margin-bottom: 100px;
}
.doremi_board-view-list > a {
    width: 150px;
    height: 50px;
    background-color: #b8b9d8;
    display: table-cell;
    font-size: 15px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}

/* 메뉴 뱃지 */
.do-board-menu {
    width: 60px;
    height: 23px;
    text-align: center;
    border-radius: 20px;
    line-height: 23px;
    color: #fff;
    background-color: #b8b8d8;
    display: block;
}


/* ==========================================================================
   답변 영역
   ========================================================================== */

.reply_edit {
    display: inline-block;
    float: right;
    color: #c1c1c1;
    font-size: 13px;
    position: relative;
    height: 40px;
}
.reply_edit > li { margin-right: 10px; cursor: pointer; float: left; }
.doremi_reply_view { padding: 15px; overflow: hidden; }
.doremi_rp_inner .do-re-view { min-height: 100px; float: left; position: relative; }
.doremi_rp_inner ul > li { float: left; }
.reply_icon {
    width: 20px;
    height: 20px;
    border-bottom: 1px solid #b3b3b3;
    border-left: 1px solid #b3b3b3;
    display: block;
}
.reply_box {
    width: 43px;
    height: 28px;
    background-color: #b8b8d8;
    color: #fff;
    display: block;
    margin-left: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 27px;
}
.reply_txt { margin-left: 20px; }
.doremi_rp_inner ul > li:nth-child(3) { max-width: 90%; min-height: 100px; }

/* 관리자 답변 입력 */
.doremi_reply_admin { padding: 15px; overflow: hidden; }
.doremi_reply_admin ul {
    background-color: #f5f5f5;
    width: 100%;
    overflow: hidden;
    padding: 30px 8px 19px 8px;
}
.doremi_reply_admin ul > li { float: left; }
.doremi_reply_admin ul > li:nth-child(1) {
    display: block;
    width: 90px;
    height: 100%;
    text-align: center;
    line-height: 118px;
    color: #858585;
}
.doremi_reply_admin ul > li:nth-child(2) { width: 90%; height: 100%; }
.re_txt-area { min-width: 100%; min-height: 100px; max-height: 150px; }
.reply_quill_wrap {
    width: 100%;
    min-height: 140px;
    background: #fff;
}
.reply_quill_wrap .ql-toolbar.ql-snow {
    border-color: #d8d8d8;
    background: #fff;
}
.reply_quill_wrap .ql-container.ql-snow {
    min-height: 100px;
    border-color: #d8d8d8;
    background: #fff;
}
.reply_quill_wrap .ql-editor {
    min-height: 100px;
    font-size: 14px;
    line-height: 1.7;
}
.box_upload > input {
    width: 150px;
    height: 30px;
    background: #b8b8d8;
    color: #fff;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}


/* ==========================================================================
   찾아오는길 (Direction)
   ========================================================================== */

.do_direction { margin-top: 100px; }
.doremi_map_con { width: 100%; height: 770px; position: relative; }
.doremi_map { width: 100%; height: 700px; }
.doremi_map iframe { border: 0; }
.doremi_dir_txtbox {
    width: 70%;
    height: 134px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #b8b8d8;
    left: 50%;
    margin-left: -35%;
}
.doremi_dir_txtbox p { color: #424242; }
.doremi_dir_inner { width: 100%; height: 100%; }
.doremi_dir_inner > li {
    float: left;
    height: 100%;
    text-align: center;
    display: table;
    position: relative;
}
.doremi_dir_inner > li:nth-child(1) { width: 40%; }
.doremi_dir_inner > li:nth-child(2) { width: 60%; }
.doremi_dir_inner > li .doremi-dir-title {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
}
.doremi_dir_inner > li:nth-child(1)::after {
    content: "";
    width: 1px;
    height: 60%;
    position: absolute;
    top: 20%;
    right: 0;
    display: block;
    background-color: #fff;
}
.doremi-dir-inner-txt {
    width: 80%;
    height: 50px;
    vertical-align: middle;
    display: table-cell;
}

/* 교통편 안내 */
.doremi_direction-inner {
    width: 90%;
    height: 155px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 80px;
}
.doremi_direction-inner > li { width: 50%; float: left; height: 100%; }

.doremi_trans-icon { width: 20%; height: 100%; float: left; position: relative; }
.doremi_trans_info { width: 80%; height: 100%; float: left; padding-left: 20px; }
.doremi_trans_icon { width: 80px; height: 80px; }
/* 도레미 교통 아이콘 (선형상사와 공유) */
.train {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153212155511497.jpg") no-repeat center top;
    background-size: 100%;
}
.bus {
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153212156128423.jpg") no-repeat center top;
    background-size: 100%;
}
.height_line {
    top: 55px;
    content: "";
    width: 3px;
    height: 50%;
    left: 26%;
    background-color: #ca8d7b;
    display: block;
    position: absolute;
}


/* ==========================================================================
   로그인
   ========================================================================== */

.doremi_top_banner { margin-top: 80px; margin-bottom: 80px; }
.login {
    margin: auto;
    text-align: center;
    background-color: #fff;
    width: 350px;
    height: 365px;
    box-shadow: 3px 4px 5px hsla(0,0%,0%,0.2);
    margin-bottom: 60px;
    padding-top: 25px;
    margin-top: 80px;
}
.sunhyung-logo {
    margin: 0 auto;
    margin-bottom: 28px;
    background: url("https://d1qwqwcfqaqmy4.cloudfront.net/static/images/SUNHYUNG/153222310868905.png") no-repeat;
    background-size: contain;
    width: 175px;
    height: 50px;
    padding: 34px 10px 20px 10px;
}
.secret-bigger { font-size: 33px; color: #222222; font-weight: 600; }
.login > p { font-size: 16px; color: #222222; margin-bottom: 23px; }
.up { border: 2px solid #222222; box-sizing: border-box; }
.pass_box { width: 90%; height: 47px; margin-bottom: 10px; font-size: 20px; }
.down {
    background-color: #222222;
    color: #fff;
    border: none;
    outline: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}


/* ==========================================================================
   상품 상세 (Product Detail)
   ========================================================================== */

.product-introduction > ul {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 50px 30px;
    flex-wrap: wrap;
}
.detail_wrap {
    width: calc((100% - 60px) / 3);
    list-style: none;
    overflow: hidden;
}
.detail_product_img {
    width: 100%;
    padding-bottom: 66.7%;
    position: relative;
    margin: 0 auto;
    border: 1px solid #c7c7c7;
    overflow: hidden;
}
.detail_product_img > img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.detail-text { width: 100%; float: left; }
.detail_title { text-align: left; margin-top: 20px; font-size: 23px; font-weight: 700; }
.detail_sub_title { text-align: left; font-size: 15px; margin-top: 8px; }
.detail_line {
    width: 95%;
    height: 1px;
    background-color: #dfdfdf;
    margin: 30px auto 80px auto;
}
.detail_text {
    width: 90%;
    height: 500px;
    margin: 0 auto;
    background-color: lightgray;
    text-align: center;
}


/* ==========================================================================
   문의 작성 (QnA Write)
   ========================================================================== */

.qna_textarea { width: 98%; margin: 0 auto; }

.qna_input_0, .qna_input_1, .qna_input_2, .qna_input_3, .qna_input_4 {
    width: 100%;
    height: 60px;
    border-top: 1px solid #dfdfdf;
    padding-top: 14px;
    float: left;
}
.qna_input_1 { width: 100%; }
.qna_input_1:first-child { width: 27%; }
.qna_input_0 > li, .qna_input_1 > li, .qna_input_2 > li { float: left; }
.qna_input_title { font-size: 16px; margin: 3px 50px 0px 5px; width: 9%; }
.qna_input_title_01 { font-size: 16px; margin: 3px 30px 0px 5px; }
.qna_input_3 li { float: left; }
.qna_input_field { flex: 1; }
.qna_open_row { height: auto; padding-bottom: 14px; }
.qna_open_options { padding-top: 6px; }
.qna_open_label { padding-left: 28px; }
.qna_open_label_gap { margin-right: 30px; }
.qna_content_title { margin-top: 14px; }
.qna_content_area {
    width: 100%;
    height: 300px;
    resize: vertical;
    margin-top: 14px;
}
.qna_write_buttons {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 60px;
}
.qna_btn_cancel {
    float: left;
    background-color: #888;
    margin: 0;
}
.qna_btn_submit {
    float: right;
    margin: 0;
}

.qna_input_box { width: 84%; }
.qna_textarea > ul input {
    margin-right: 50px;
    background-color: #e9e7e7;
    height: 30px;
    width: 100%;
}
.qna_input_3 > li > textarea { width: 1000px; height: 300px; resize: none; }
.qna_text_btn {
    width: 80px;
    height: 35px;
    float: right;
    background-color: #b8b8d8;
    color: white;
    cursor: pointer;
    margin: 20px 100px 50px 0;
    text-align: center;
    line-height: 35px;
}
.qna_input_3 > li > textarea.qna_content_area {
    width: 100%;
    height: 300px;
    resize: vertical;
    margin-top: 14px;
}
.qna_text_btn.qna_btn_cancel {
    float: left;
    background-color: #888;
    margin: 0;
}
.qna_text_btn.qna_btn_submit {
    float: right;
    margin: 0;
}
.qna_input_3 { height: 500px; border-bottom: 1px solid #dfdfdf; }
.qna_input_1 select {
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
    height: 30px;
}

/* 체크박스 커스텀 */
.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 7px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #eee;
}
.container:hover input ~ .checkmark { background: #ccc; }
.container input:checked ~ .checkmark { background: #dedeef; }
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
}
.container input:checked ~ .checkmark::after { display: block; }
.container .checkmark::after {
    top: 5px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}