:root {
    --color-main-blue: #53ADEF;
    --color-gray900: #191F28;
    --color-gray800: #333D4B;
    --color-gray700: #4E5968;
    --color-gray600: #6B7684;
    --color-gray500: #8B95A1;
    --color-gray400: #B5BEC7;
    --color-gray300: #EDF0F3;
    --color-gray200: #F7F8FA;
    --color-red: #F04452;
    --color-border: #E5E8EB;
    --color-border60: rgba(229, 232, 235, .6);
}


/*공통영역*/
/* Shared page width: main, search and header use the same available space. */
.box_width {
    width: min(1300px, calc(100% - 40px));
    margin: 0 auto;
}

header {
    width: 100%;
    z-index: 99;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    box-shadow: inset 0 -1px 0 var(--color-border);
    position: fixed;
    background: #fff;
}

header .header_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
}

header .logo {
    width: 195px;
    height: 40px;
    color: #004071; font-weight: 700; line-height: 40px;
    font-size: 20px;
}

header .logo,
#join .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

header .logo::before,
#join .logo::before {
    content: "";
    flex: 0 0 33px;
    height: 40px;
    background: url('../img/logo.svg') no-repeat left center / 195px 40px;
}

header .right {
    display: flex;
    align-items: center;
}

header .cart_icon {
    display: block;
    width: 32px;
    height: 32px;
    background: url('../img/icon_cart.svg');
    font-size: 0;
    position: relative;
}

header .cart_icon.red_dot::after {
    content: "3";
    width: 14px;
    height: 14px;
    position: absolute;
    top: -2px;
    right: -3px;
    border-radius: 99px;
    background: var(--color-red);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

header .right .btn_group {
    margin-left: 30px;
}

header .right .my {
    padding-right: 30px;
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray800);
}

header .right .my::after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background: var(--color-border);
    position: absolute;
    right: 0;
}

header .right .my > a {
    display: flex;
    align-items: center;
}

header .right .my .profile_img {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    background: url(../img/icon_profile_empty.svg);
    margin-right: 10px;
    overflow: hidden;
}

header .right .my > a::after {
    content: "";
    background: url(../img/icon_down_gray.svg);
    width: 12px;
    height: 12px;
    margin-left: 6px;
    display: block;
}

header.logout .my {
    display: none;
}

header.login .my {
    display: flex;
}

header.login .btn_login {
    display: none !important;
}

header .my .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 16px #0000001F;
    z-index: 99;
    padding: 16px 20px;
    border-radius: 16px;
    top: 40px;
    flex-direction: column;
    font-weight: 400;
    min-width: 160px;
}

header .my .dropdown-content a {
    margin-bottom: 10px;
    color: var(--color-gray600);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .my .dropdown-content a:hover {
    color: var(--color-gray900);
}

header .my .dropdown-content a:hover::after {
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    background: url("../img/icon_down_gray.svg");
    transform: rotate(-90deg);
}

header .my .dropdown-content > div {
    padding-bottom: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border60);
}

header .my .dropdown-content > div:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

header .my .dropdown-content > div:last-child a:last-child {
    margin-bottom: 0;
}

.shop_sub_header {
    width: 100%;
    box-shadow: inset 0 -1px 0 var(--color-border);
    position: fixed;
    top: 68px;
    background: #fff;
    z-index: 98;
}

.shop_sub_header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
}

.shop_sub_header .search_group {
    width: 318px !important;
}

.shop_sub_header .menu_group {
    display: flex;
    align-items: center;
    border: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.shop_sub_header .menu_group li {
    margin-bottom: 0 !important;
    margin-right: 30px;
    position: relative;
}

.shop_sub_header .menu_group li:last-child {
    margin-right: 0;
}

.shop_sub_header .menu_group li > a {
    line-height: 66px;
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray900);
}

.shop_sub_header .menu_group li > a:hover {
    color: var(--color-main-blue);
}

.shop_sub_header .menu_group li.active > a {
    color: var(--color-main-blue);
    box-shadow: inset 0 -2px 0 var(--color-main-blue);
}

.shop_sub_header .menu_group li > .hover_menu_group {
    display: none;
    flex-direction: column;
    width: max-content;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    top: 57px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    padding: 14px 10px;
}

.shop_sub_header .menu_group li:hover > .hover_menu_group {
    display: flex;
}

.shop_sub_header .menu_group li > .hover_menu_group a {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray900);
    background: #fff;
    padding: 13px 16px;
    border-radius: 4px;
}

.shop_sub_header .menu_group li > .hover_menu_group a:last-child {
    margin-bottom: 0;
}

.shop_sub_header .menu_group li > .hover_menu_group a i {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    display: block;
    margin-right: 10px;
}

.shop_sub_header .menu_group li > .hover_menu_group a:hover {
    background: var(--color-gray200);
}

footer {
    border-top: 1px solid var(--color-border);
    width: 100%;
}

footer .footer_info {
    border-top: 1px solid var(--color-border);
    width: 100%;
    padding: 24px 0 30px;
}

footer .footer_info .box_width {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footer_info p {
    color: var(--color-gray500);
    font-size: 13px;
    line-height: 22px;
}

footer .footer_info p > span {
    font-weight: 600;
}

footer .footer_info .sns_list {
    display: flex;
    align-items: center;
}

footer .footer_info .sns_list a {
    display: block;
    width: 36px;
    height: 36px;
    margin-left: 16px;
    border-radius: 99px;
    font-size: 0;
}

footer .footer_info .sns_list a.facebook {
    background: url(../img/icon_sns_facebook.svg);
}

footer .footer_info .sns_list a.instagram {
    background: url(../img/icon_sns_instagram.svg);
}

footer .footer_info .sns_list a.youtube {
    background: url(../img/icon_sns_youtube.svg);
}

footer .footer_info .sns_list a.twitter {
    background: url(../img/icon_sns_twitter.svg);
}

footer .footer_info .sns_list a.pinterest {
    background: url(../img/icon_sns_pinterest.svg);
}

footer .footer_sitemap {
    padding: 40px 0;
    display: flex;
    align-items: center;
}

footer .footer_sitemap .total {
    padding: 20px 24px;
    border-radius: 8px;
    background: var(--color-gray200);
    margin-right: 60px;
}

footer .footer_sitemap .total span {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray500);
    display: block;
    margin-bottom: 4px;
}

footer .footer_sitemap .total p {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-gray900);
}

footer .footer_sitemap .total > div:first-child {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

footer .footer_sitemap .sitemap_menu {
    display: flex;
    align-items: flex-start;
}

footer .footer_sitemap .sitemap_menu > div {
    margin-right: 80px;
}

footer .footer_sitemap .sitemap_menu > div:last-child {
    margin-right: 0;
}

footer .footer_sitemap .sitemap_menu a {
    display: block;
    font-size: 16px;
    color: var(--color-gray500);
    margin-bottom: 14px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

footer .footer_sitemap .sitemap_menu a:last-child {
    margin-bottom: 0;
}

footer .footer_sitemap .sitemap_menu a:hover {
    color: var(--color-gray700);
}

footer .footer_sitemap .sitemap_menu .label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-gray900);
    display: block;
}

.content_wrap {
    padding-top: 68px;
}

.shop_sub_header + .content_wrap {
    padding-top: 134px;
}

/*랜딩페이지 디자인*/
#landing header {
    box-shadow: none;
}

#landing .visual_area {
    text-align: center;
    padding-top: 30px;
    background: url("../img/landing_visual_bg.png") no-repeat center top;
    background-size: 1160px;
}

#landing .visual_area .text_group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#landing .visual_area .tit {
    font-size: 38px;
    line-height: 150%;
    font-weight: 800;
}

#landing .visual_area .tit > span {
    color: var(--color-main-blue);
}

#landing .visual_area .tit + span {
    font-size: 20px;
    margin-top: 24px;
    font-weight: 500;
}

#landing .visual_area .btn_group {
    margin-top: 40px;
}

#landing .visual_area .img_group {
    width: 1080px;
    margin: 110px auto 0;
}

#landing .img_group {
    position: relative;
    width: 1100px;
}

#landing .img_group .item01 {
    position: absolute;
    width: 192px;
    left: 0;
    top: 160px;
    animation: motion 1.7s /* 속도 */ linear 0s /* 처음부터 끝까지 일정 속도로 진행 */ infinite alternate;
}

#landing .img_group .globe {
    position: absolute;
    width: 64px;
    right: 214px;
    top: 50px;
    animation: motion2 1.2s /* 속도 */ linear 0s /* 처음부터 끝까지 일정 속도로 진행 */ infinite alternate;
}

#landing .img_group .item02 {
    position: absolute;
    width: 143px;
    right: 0;
    bottom: 0;
    animation: motion3 2.5s /* 속도 */ linear 0s /* 처음부터 끝까지 일정 속도로 진행 */ infinite alternate;
}

@keyframes motion {
    0% {
        margin-top: 30px;
    }
    100% {
        margin-top: 0;
    }
}

@keyframes motion2 {
    0% {
        margin-top: 0;
        transform: rotate(0deg);
    }
    100% {
        margin-top: 20px;
        transform: rotate(45deg);
    }
}

@keyframes motion3 {
    0% {
        margin-bottom: 0;
    }
    100% {
        margin-bottom: 30px;
    }
}

#landing h3.sc_tit {
    font-size: 44px;
    color: var(--color-gray900);
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
}

#landing .category_area, #landing .howto_area {
    margin-top: 140px;
    display: block
}

#landing .category_area .tab_btn {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

#landing .category_area .tab_btn button {
    height: 66px;
    display: flex;
    margin-right: 30px;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray500);
}

#landing .category_area .tab_btn button:last-child {
    margin-right: 0;
}

#landing .category_area .tab_btn button.active {
    color: var(--color-main-blue);
    border-bottom: 2px solid var(--color-main-blue);
}

#landing .category_area .tabcontent .sub_info_txt {
    text-align: center;
    font-size: 20px;
    color: var(--color-gray900);
    font-weight: 500;
    margin-top: 50px;
}

#landing .category_area .tabcontent .detail_box {
    background: var(--color-gray200);
    border-radius: 16px;
    width: calc(100% - 80px);
    margin: 50px auto 0;
    padding: 50px 0;
    height: 445px;
}

#landing .category_area .tabcontent .detail_box .box_width {
    display: flex;
    align-items: center;
}

#landing .category_area .tabcontent .detail_box .img_group {
    width: 620px;
    height: 345px;
    margin-right: 60px;
}

#landing .category_area .tabcontent .detail_box .txt_group p {
    font-size: 38px;
    color: var(--color-gray900);
    margin-bottom: 40px;
    font-weight: 800;
}

#landing .category_area .tabcontent .detail_box .txt_group span {
    font-size: 18px;
    color: var(--color-gray700);
    margin-bottom: 40px;
    font-weight: 300;
    line-height: 1.75;
}

#landing .howto_area ul {
    display: flex;
    align-items: flex-start;
    padding-top: 30px;
    margin-bottom: 100px;
}

#landing .howto_area li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

#landing .howto_area li img {
    width: 82px;
    height: 70px;
    display: block;
    margin-bottom: 40px;
}

#landing .howto_area li p {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

#landing .howto_area li span {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 16px;
    color: var(--color-gray600);
}

#landing .howto_area li a {
    display: flex;
    align-items: center;
    color: var(--color-main-blue);
    font-size: 16px;
    font-weight: 500;
}

#landing .howto_area li a > i {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    display: block;
    background: url(../img/icon_arrow_right_blue.svg);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

#landing .howto_area li a:hover i {
    margin-left: 16px;
}

#landing .scroll_float {
    height: 51px;
}

#landing .scroll_float .btn_group {
    width: 100%;
    display: flex;
    justify-content: center;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    position: relative;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.00) 100%);
    padding-bottom: 0;
}

#landing .scroll_float.down .btn_group {
    position: fixed;
    padding-bottom: 30px;
    bottom: 0;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

#landing > footer {
    margin-top: 120px;
}


/*회원가입 스텝 디자인*/
#join .box_width {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

#join .img_group {
    height: calc(100vh - 80px);
    background: var(--color-gray200);
    border-radius: 30px;
    width: 730px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#join .img_group img {
    width: 564px;
}

#join .logo {
    width: 195px;
    height: 40px;
    color: #004071; font-weight: 700; line-height: 40px;
    font-size: 20px;
    margin-bottom: 36px;
}

#join .content_group .txt_group .tit {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 700;
}

#join .content_group .txt_group .sub_tit {
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: 500;
    display: block;
}

#join .content_group .txt_group .sub_tit.small {
    color: var(--color-gray600);
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 50px;
}

#join .content_group .txt_group .list li {
    color: var(--color-main-blue);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

#join .content_group .txt_group .list li > i {
    background: url(../img/icon_check_only_blue.svg);
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 10px;
}

#join .content_group .info_group {
    width: 400px;
    margin-top: 50px;
}

#join .content_group .checkbox_group {
    margin: 24px 0 40px;
}

#join .radio_group .container {
    margin-bottom: 12px;
}

#join .radio_group .container > div {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 100%;
    align-items: center;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

#join .radio_group .container input:checked + div {
    border-color: var(--color-main-blue);
}

#join .radio_group .container input + div .txt {
    font-size: 16px;
    color: var(--color-gray700);
    font-weight: 300;
}

#join .radio_group .container input:checked + div .txt {
    font-size: 16px;
    color: var(--color-main-blue);
    font-weight: 500;
}

#join.join02 .img_group {
    width: 660px;
    height: 100vh;
    border: none;
    background-size: 100%;
    background: url(../img/join02_bg.svg) no-repeat bottom right;
    border-radius: 0;
}

#join.join02 .content_group {
    width: 570px;
}

#forget_wrap .tit {
    margin-top: 60px;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

#forget_wrap .sub_tit {
    text-align: center;
    font-size: 16px;
    color: var(--color-gray600);
    margin-bottom: 24px;
    display: block;
}

#forget_wrap .tab_btn_group {
    width: 100%;
    box-shadow: inset 0 -1px 0 var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

#forget_wrap .tab_btn_group a {
    display: block;
    height: 66px;
    line-height: 66px;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-gray500);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

#forget_wrap .tab_btn_group a:first-child {
    margin-right: 30px;
}

#forget_wrap .tab_btn_group a:hover {
    color: var(--color-gray900);
}

#forget_wrap .tab_btn_group a.active {
    border-bottom: 2px solid var(--color-gray900);
    color: var(--color-gray900);
}

#forget_wrap .pw_search_group {
    width: 500px;
    margin: 40px auto 0;
}

#forget_wrap .pw_search_group .btn_group {
    justify-content: center;
    margin-top: 40px;
}

#forget_wrap .pw_search_group .btn_group button {
    width: 140px;
}

#forget_wrap .pw_search_group .input_group .container {
    margin-bottom: 12px;
}

/*what is ERWeb*/
#whatis header {
    background: none;
    box-shadow: none;
}

#whatis .content_wrap {
    padding-top: 0;
}

#whatis .visual_top {
    padding-top: 68px;
    padding-bottom: 80px;
    background: #EDF6FF;
}

#whatis .visual_top img {
    width: 320px;
    margin: 0 auto;
    display: block;
}

#whatis .visual_top .tit {
    font-size: 44px;
    margin-top: 0;
    font-weight: 800;
    text-align: center;
}

#whatis .visual_top .search_group {
    width: 560px;
    overflow: hidden;
    margin: 30px auto 0;
}

#whatis .qa_list_group {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 100px 0 20px;
}

#whatis .qa_list_group .category_box {
    width: calc(33.33% - 43px);
    margin-right: 64px;
    margin-bottom: 100px;
}

#whatis .qa_list_group .category_box:nth-child(3n) {
    margin-right: 0;
}

#whatis .qa_list_group .category_box .question_group a {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

#whatis .qa_list_group .category_box .question_group a:hover {
    text-decoration: underline;
}

#whatis .qa_list_group .category_box .question_group a:last-child {
    margin-bottom: 0;
}

#whatis .qa_list_group .category_box .label {
    font-size: 24px;
    margin-bottom: 40px;
    font-weight: 700;
    color: var(--color-gray800);
}

#whatis .qa_list_group .category_box .question_group + .more {
    margin-top: 30px;
    display: flex;
    align-items: center;
    color: var(--color-main-blue);
    font-size: 16px;
    font-weight: 500;
}

#whatis .qa_list_group .category_box .question_group + .more i {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    display: block;
    background: url(../img/icon_arrow_right_blue.svg);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

#whatis .qa_list_group .category_box .question_group + .more:hover i {
    margin-left: 16px;
}

#whatis header.down {
    background: #fff;
}

.cs_detail_wrap {
    padding-top: 68px;
}

.shop_sub_header + .cs_detail_wrap {
    padding-top: 134px;
}

#whatisDetail .half_left {
    width: 990px;
    border-right: 1px solid var(--color-border);
    padding-right: 40px;
}

.cs_detail_wrap .detail_header {
    margin-top: 20px;
    margin-bottom: 40px;
}

.cs_detail_wrap .detail_header .tit {
    margin-top: 30px;
    font-size: 32px;
    font-weight: 800;
}

.cs_detail_wrap .detail_header .update {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-gray500);
    display: block;
    margin-top: 10px;
}

.cs_detail_wrap .detail_content {
    width: 100%;
    background: var(--color-gray200);
    border-radius: 12px;
    padding: 50px 40px;
    margin-bottom: 100px;
}

.cs_detail_wrap .detail_content section {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border);
}

.cs_detail_wrap .detail_content section:last-child {
    border: none;
    padding-bottom: 0;
}

.cs_detail_wrap .detail_content .detail_tit {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.cs_detail_wrap .detail_content p {
    font-size: 16px;
    color: var(--color-gray700);
    margin-bottom: 20px;
}

.cs_detail_wrap .detail_content p:last-child {
    margin-bottom: 0;
}

.cs_detail_wrap .detail_content p > a {
    color: var(--color-main-blue);
    font-weight: 400;
    text-decoration: underline;
}

.cs_detail_wrap .detail_content .black {
    color: var(--color-gray900);
    font-weight: 600;
}

.cs_detail_wrap .detail_content .list_group {
    font-size: 16px;
    color: var(--color-gray700);
    margin-top: 16px;
    margin-left: 20px;
}

.cs_detail_wrap .detail_content .list_group li {
    margin-bottom: 10px;
}

.cs_detail_wrap .detail_content .img_box {
    width: 100%;
    background: var(--color-gray400);
    border-radius: 8px;
    margin-top: 30px;
    color: #fff;
    text-align: center;
}

.cs_detail_wrap .detail_content .page_link_group a {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--color-main-blue);
    font-size: 16px;
    margin-bottom: 8px;
}

.cs_detail_wrap .detail_content .page_link_group a:last-child {
    margin-bottom: 0;
}

.cs_detail_wrap .detail_content .page_link_group a > i {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    display: block;
    background: url(../img/icon_arrow_right_blue.svg);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.cs_detail_wrap .detail_content .page_link_group a:hover > i {
    margin-left: 10px;
}

#whatisDetail .half_right {
    margin-left: 40px;
    width: calc(100% - 1030px);
}

#whatisDetail .half_right .search_group {
    margin: 20px 0;
}

#whatisDetail .content_half .menu_group {
    border: 1px solid var(--color-border);
    padding: 24px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
}

#whatisDetail .content_half .menu_group:last-child {
    margin-bottom: 0;
}

#whatisDetail .content_half .menu_group .top_hd {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 20px;
}

#whatisDetail .content_half .menu_group .top_hd .more {
    font-size: 14px;
    color: var(--color-gray400);
    font-weight: 400;
    display: flex;
    align-items: center;
}

#whatisDetail .content_half .menu_group .top_hd .more > i {
    background: url(../img/icon_right_gray.svg);
    width: 16px;
    height: 16px;
    margin-left: 2px;
    display: block;
}

#whatisDetail .content_half .menu_group .item a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 14px;
}

#whatisDetail .content_half .menu_group .item a:hover {
    text-decoration: underline;
}

#whatisDetail .menu_group .item:last-child a {
    margin-bottom: 0;
}

#whatisDetail .menu_group .item.active a {
    font-weight: 600;
    color: var(--color-main-blue);
}

#whatisDetail .content_half .menu_group .item.active a::before {
    content: "";
    width: 20px;
    height: 20px;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    background: url(../img/icon_arrow_right_blue.svg);
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    margin-right: 6px;
}

#whatisDetail .content_half .menu_group.other .item.active a::before {
    content: "";
    display: block;
    width: 2px;
    height: 16px;
    background: var(--color-main-blue);
    margin-right: 12px;
}

#terms .half_left {
    width: 1000px;
    margin-left: 40px;
}

#terms .half_right {
    width: calc(100% - 1040px);
}

#terms .content_half .menu_group.type1 {
    margin-top: 20px;
}

.content_half .menu_group.type1 {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 30px;
    width: 260px;
}

.content_half .menu_group.type1 .top_hd {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-gray400);
}

.content_half .menu_group.type1 ul {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-top: 20px;
}

.content_half .menu_group.type1 ul:first-child {
    padding-top: 0;
}

.content_half .menu_group.type1 ul:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.content_half .menu_group.type1 li {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray600);
}

.content_half .menu_group.type1 li:last-child {
    margin-bottom: 0;
}

.content_half .menu_group.type1 li.active {
    color: var(--color-main-blue);
    font-weight: 600;
}

.content_half .menu_group.type1 li:hover:not(.active) {
    color: var(--color-gray900);
}

/*쇼핑몰*/
#shop .product_wrap section {
    padding-top: 60px;
}

#shop .product_wrap section:last-child {
    margin-bottom: 100px;
}

#shop .product_wrap section .sc_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

#shop .product_wrap section .sc_header .sc_tit {
    font-size: 24px;
    font-weight: 800;
}

#shop .product_wrap section .sc_header .more {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray400);
}

#shop .product_wrap section .sc_header .more i {
    background: url(../img/icon_right_gray.svg);
    width: 16px;
    height: 16px;
    margin-left: 6px;
    display: block;
}

#shop .product_wrap .banner_slider {
    padding: 40px;
    background: var(--color-gray200);
    margin-top: 60px;
}

#shop .product_wrap .banner_slider > div {
    display: flex;
    align-items: flex-start;
    position: relative;
    width: 1320px;
    margin: 0 auto;
}

#shop .product_wrap .banner_slider .sc_header {
    width: calc(100% - 1100px);
    margin-bottom: 0;
    padding: 4px 0;
    margin-left: 10px;
}

#shop .product_wrap .banner_slider .sc_header .slider_btn_group {
    position: absolute;
    bottom: 6px;
}

#shop .product_wrap .banner_slider .sc_header .slider_btn_group button:first-child {
    margin-right: 16px;
}

#shop .product_wrap .banner_slider .slick {
    width: 1100px;
}

#shop .product_wrap .banner_slider .slick .item > div {
    width: 530px !important;
    background: var(--color-gray400);
    margin: 0 10px;
    border-radius: 16px;
    overflow: hidden;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

#shop .slider_btn_group button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    font-size: 0;
    background: url("../img/icon_right_black.svg") rgba(255, 255, 255, 1) center no-repeat;
    background-size: 16px;
    opacity: .6;
}

#shop .slider_btn_group button.slide-next {
    transform: rotate(-180deg);
}

#shop .slider_btn_group button:hover {
    opacity: 1;
}

#shop .product_wrap .slider04 {
    width: 1320px;
    margin: 0 auto;
}

#shop .product_wrap .slider04 .item {
}

#shop .product_wrap .slider04 .item > .productCard_typeA {
    margin: 0 10px;
}

/*검색결과 화면*/
#productSearch .content_half {
    padding-top: 134px;
}

#productSearch .half_left {
    width: 290px;
    padding-right: 30px;
    padding-top: 27px;
    padding-bottom: 100px;
}

#productSearch .half_right {
    width: calc(100% - 290px);
    border-left: 1px solid var(--color-border);
    padding-left: 30px;
    padding-top: 24px;
    padding-bottom: 100px;
}

#productSearch .productCardList_area {
    display: flex;
    flex-wrap: wrap;
}

#productSearch .productCardList_area a {
    width: calc(33.33% - 13px);
    margin-right: 20px;
    margin-top: 20px;
}

#productSearch .productCardList_area a:nth-child(3n) {
    margin-right: 0;
}

#productSearch .productList_group .top_guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#productSearch .productList_group .top_guide > div {
    display: flex;
    align-items: center;
}

#productSearch .productList_group .top_guide .selectbox_group {
    width: 135px;
}

#productSearch .productList_group .searchTotal_area {
    font-size: 16px;
}

#productSearch .productList_group .searchTotal_area .value {
    font-weight: 700;
    color: var(--color-main-blue);
}

#productSearch .productList_group .productListType_btnGroup {
    display: flex;
    align-items: center;
}

#productSearch .productList_group .productListType_btnGroup::after {
    content: "";
    display: block;
    width: 1px;
    height: 19px;
    background: var(--color-border);
    margin: 0 16px;
}

#productSearch .productList_group .productListType_btnGroup button {
    width: 44px;
    height: 44px;
    font-size: 0;
    border-radius: 4px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

#productSearch .productList_group .productListType_btnGroup button.btn_list {
    margin-right: 8px;
    background: url(../img/icon_listtype_list.svg) center / 32px 32px no-repeat;
}

#productSearch .productList_group .productListType_btnGroup button.btn_list:hover:not(.active) {
    background: url(../img/icon_listtype_list.svg) center / 32px 32px no-repeat var(--color-gray300);
}

#productSearch .productList_group .productListType_btnGroup button.btn_list.active {
    background: url(../img/icon_listtype_list_white.svg) center / 32px 32px no-repeat rgba(0, 0, 0, 1);
}

#productSearch .productList_group .productListType_btnGroup button.btn_card {
    background: url(../img/icon_listtype_card.svg) center / 32px 32px no-repeat;
}

#productSearch .productList_group .productListType_btnGroup button.btn_card:hover:not(.active) {
    background: url(../img/icon_listtype_card.svg) center / 32px 32px no-repeat var(--color-gray300);
}

#productSearch .productList_group .productListType_btnGroup button.btn_card.active {
    background: url(../img/icon_listtype_card_white.svg) center / 32px 32px no-repeat rgba(0, 0, 0, 1);
}

#productSearch .fillter_group .fillter_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

#productSearch .fillter_group .fillter_top .tit {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

#productSearch .fillter_group .fillter_top .tit i {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/icon_fillter.svg);
    margin-right: 6px;
}

#productSearch .fillter_group .fillter_top .btn_reset {
    font-size: 14px;
    color: var(--color-gray500);
    display: flex;
    align-items: center;
}

#productSearch .fillter_group .fillter_top .btn_reset i {
    background: url(../img/icon_replay_gray.svg);
    width: 16px;
    height: 16px;
    display: block;
    margin-right: 4px;
    opacity: .7;
}

#productSearch .fillter_group .fillter_top .btn_reset:hover {
    color: var(--color-gray600);
}

#productSearch .fillter_group .fillter_top .btn_reset:hover i {
    opacity: 1;
}

#productSearch .fillter_group .fillter_tag_group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

#productSearch .fillter_group .fillter_tag_group .item {
    height: 32px;
    border-radius: 99px;
    background: var(--color-gray200);
    color: var(--color-gray800);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 0 8px 0 16px;
    margin-right: 8px;
    margin-bottom: 8px;
}

#productSearch .fillter_group .fillter_tag_group .item .btn_del {
    background: url(../img/icon_close_gray.svg) center no-repeat;
    background-size: 16px;
    width: 24px;
    height: 24px;
    display: block;
    font-size: 0;
}

#productSearch .fillter_group .fillter_tag_group .item:hover {
    background: var(--color-gray300);
}

#productSearch .fillter_group .fillter_tag_group .item .btn_del:hover {
    background-size: 18px;
}

#productSearch .fillter_group .box_fillters {
    border: 1px solid #E5E8EB99;
    border-radius: 8px;
    width: 100%;
    padding: 6px 30px;
}

#productSearch .fillter_group .box_fillters .accordion_group {
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--color-border);
}

#productSearch .fillter_group .box_fillters .accordion_group:last-child {
    border: none;
}

#productSearch .fillter_group .accordion__title {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    padding: 4px 0;
}

#productSearch .fillter_group .accordion__title p {
    display: flex;
    align-items: center;
}

#productSearch .fillter_group .accordion_group .inner_num {
    color: var(--color-gray400) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    display: block;
    padding-left: 6px !important;
}

#productSearch .fillter_group .dropdown-none {
    padding: 24px 0 !important;
}

#productSearch .fillter_group .checkbox_group {
    margin-top: 14px;
}

#productSearch .fillter_group .checkbox_group:first-child {
    margin-top: 12px;
}

#productSearch .fillter_group .checkbox_group input[type="checkbox"] + label > span {
    padding-left: 10px;
    font-size: 14px;
    color: var(--color-gray900);
}

#productSearch .fillter_group .price_group .input_group {
    margin-top: 16px;
}

#productSearch .fillter_group .price_group .input_group .container:first-child {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

#productSearch .fillter_group .price_group .input_group .container:first-child::after {
    content: "~";
    margin-left: 6px;
    color: var(--color-gray400);
    font-size: 16px;
}

/*마이페이지*/
#myPage .dashHeader_group {
    display: flex;
    align-items: center;
    padding: 30px 0 40px;
}

#myPage .dashHeader_group a {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-gray400);
    margin-right: 30px;
}

#myPage .dashHeader_group a:last-child {
    margin-right: 0;
}

#myPage .dashHeader_group a:hover {
    color: var(--color-gray600);
}

#myPage .dashHeader_group a.active {
    color: var(--color-gray900);
}

#myPage .dashHeader_group a .dot_alarm {
    width: 20px;
    height: 20px;
    background: var(--color-red);
    border-radius: 99px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    justify-content: center;
    margin-left: 6px;
}

#myPage .content_wrap {
    padding-bottom: 100px;
}

#myPage .my_main .sc_tit {
    color: var(--color-gray600);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
}

#myPage .my_main section {
    margin-bottom: 60px;
}

#myPage .my_main section:last-child {
    margin-bottom: 0;
}

#myPage .my_main .myTotal_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#myPage .my_main .myTotal_group > div {
    width: calc(50% - 10px);
    background: var(--color-gray200);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#myPage .my_main .myTotal_group .label {
    display: block;
    color: var(--color-gray800);
    font-size: 18px;
    font-weight: 600;
}

#myPage .my_main .myTotal_group .value {
    font-size: 24px;
    font-weight: 600;
}

#myPage .my_main table .tit {
    width: 390px;
    padding-left: 10px;
}

#myPage .my_main table .content_txt {
    width: 100%;
}

#myPage .my_main table td, #myPage .my_main table th {
    width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#myPage .my_main .tag_group {
    justify-content: center;
}

#myPage .my_main .tag_group span {
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    height: 22px;
    padding: 0 6px;
    display: flex;
    align-items: center;
}

#myPage .my_main .tag_group span.main {
    background: #53ADEF1A;
}

#myPage .my_main .tag_group span.red {
    background: #F044521A;
}

#myPage .productList_group .top_guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#myPage .productList_group .top_guide > div {
    display: flex;
    align-items: center;
}

#myPage .productList_group .top_guide .selectbox_group select {
    height: 44px;
    width: 180px;
}

#myPage .productList_group .top_guide > div > div:first-child {
    margin-right: 16px;
}

#myPage .my_order_detail_wrap .half_left {
    width: calc(100% - 284px);
    margin-left: 24px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 30px 30px 40px;
}

#myPage .my_order_detail_wrap .half_left > .btn_group {
    justify-content: center;
    margin-top: 40px;
}

#myPage .my_order_detail_wrap .content_box .content_section .box_tit {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}

#myPage .my_order_detail_wrap .content_box .content_section .form_group .input_group,
#myPage .my_order_detail_wrap .content_box .content_section .form_group .input_group_select {
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .input_group.type_label input:focus {
    border: 1px solid var(--color-border);
}

#myPage .my_order_detail_wrap .tag_select_box input {
    padding: 16px 200px;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
}

#myPage .my_order_detail_wrap .tag_select_box input:focus {
    border: 1px solid var(--color-border);
    border-bottom: 0 !important;
}

#myPage .my_order_detail_wrap .tag_select_box .btn_group {
    position: absolute;
    right: 20px;
    top: 11px;
}

#myPage .my_order_detail_wrap .tag_select_box .tag_group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 20px 4px;
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
}

#myPage .my_order_detail_wrap .tag_select_box .tag_group .del_tag {
    margin-bottom: 8px;
}

#myPage .my_order_detail_wrap .qaHistory_group li {
    background: var(--color-gray200);
    padding: 14px 20px;
    border-radius: 8px;
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .qaHistory_group li:last-child {
    margin-bottom: 0;
}

#myPage .my_order_detail_wrap .qaHistory_group li .txt {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 6px;
}

#myPage .my_order_detail_wrap .qaHistory_group li .date {
    color: var(--color-gray400);
    font-size: 13px;
    font-weight: 300;
}

#myPage .my_order_detail_wrap .radio_group.type_label {
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group {
    background: var(--color-gray200);
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group:last-child {
    margin-bottom: 0;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group .accordion__title {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group .accordion__title .txt_group {
    width: calc(100% - 46px);
    margin-right: 30px;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group .accordion__title .date {
    color: var(--color-gray400);
    font-size: 13px;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group .accordion__title .tit {
    font-size: 14px;
    margin-top: 6px;
    font-weight: 400;
}

#myPage .my_order_detail_wrap .qacomment_group .accordion_group .open-container.active {
    display: block;
    padding: 20px 0 10px;
}

#myPage .my_order_detail_wrap .qacomment_group .pagination {
    margin-top: 30px;
}

#myPage .my_order_detail_wrap .textarea_group {
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .form_group .half {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin-bottom: 12px;
}

#myPage .my_order_detail_wrap .form_group .half .container {
    width: calc(50% - 10px);
    display: flex;
    align-items: flex-start;
}

#myPage .my_order_detail_wrap .form_group .container {
    display: flex;
    align-items: flex-start;
}

#myPage .my_order_detail_wrap .form_group .tit_group {
    width: 160px;
    font-size: 16px;
    font-weight: 600;
    margin-right: 20px;
}

#myPage .my_order_detail_wrap .form_group .tit_group .label {
    display: flex;
    align-items: center;
}

#myPage .my_order_detail_wrap .form_group .tit_group span.num {
    color: var(--color-gray500);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    display: block;
    margin-left: 8px;
}

#myPage .my_order_detail_wrap .form_group .file_uploader {
    width: calc(100% - 160px);
}

#myPage .my_order_detail_wrap .form_group .info_group {
    margin-top: 8px;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.logoImg {
    width: 175px;
    height: 175px;
    border-radius: 175px;
    background: url(../img/my_profile_empty.svg) no-repeat center;
    background-size: 50px;
    font-size: 0;
    display: block;
    margin: 0 auto 12px;
    overflow: hidden;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.mainImg {
    width: 248px;
    height: 175px;
    border-radius: 8px;
    background: url(../img/img_empty.svg) no-repeat center;
    background-size: 74px;
    font-size: 0;
    display: block;
    margin: 0 auto 12px;
    overflow: hidden;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.profileImg {
    width: 80px;
    height: 80px;
    border-radius: 99px;
    background: url(../img/my_profile_empty.svg) no-repeat center;
    background-size: 24px;
    font-size: 0;
    display: block;
    margin: 0 auto 12px;
    overflow: hidden;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.homepageImg {
    width: 195px;
    height: 80px;
    border-radius: 4px;
    background: url(../img/img_empty.svg) no-repeat center;
    background-size: 34px;
    font-size: 0;
    display: block;
    margin: 0 auto 12px;
    overflow: hidden;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.empty {
    border: 1px dashed var(--color-border);
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg {
    display: flex;
    flex-wrap: wrap;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg li {
    width: calc(33.33% - 13px);
    margin-right: 20px;
    margin-top: 20px;
    border: 1px solid var(--color-border);
    height: 230px;
    overflow: hidden;
    display: flex;
    position: relative;
    border-radius: 8px;
    background: var(--color-gray300);
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg li:nth-child(3n) {
    margin-right: 0;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg li img {
    display: block;
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg li .del_btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 1) url("../img/icon_close_gray.svg") center no-repeat;
    background-size: 16px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
}

#myPage .my_order_detail_wrap .file_uploader .value_group.screenImg li .del_btn:hover {
    background-color: var(--color-gray200);
}

#myPage .my_order_detail_wrap .form_group .input_group.type_label.dual input + .info_group {
    margin-top: -5px;
    margin-bottom: 12px;
}


/*상품 상세페이지 화면*/
#ProductDetail .half_right {
    width: 484px;
    padding-left: 40px;
    padding-top: 50px;
    padding-bottom: 120px;
}

#ProductDetail .half_left {
    width: calc(100% - 484px);
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 120px;
    border-right: 1px solid var(--color-border);
}

#ProductDetail .detail_content section {
    margin-bottom: 50px;
}

#ProductDetail .detail_content section:last-child {
    margin-bottom: 0;
}

#ProductDetail .detail_content section .detail_con_tit {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

#ProductDetail .detail_content section .inner_con.type_txt p {
    font-size: 16px;
    font-weight: 200;
    margin-bottom: 16px;
    color: var(--color-gray700);
}

#ProductDetail .detail_content section .inner_con.type_txt p:last-child {
    margin-bottom: 0;
}

#ProductDetail .detail_content section .inner_con .img_box {
    width: 100%;
    background: var(--color-gray400);
    border-radius: 8px;
    margin-top: 30px;
    color: #fff;
    text-align: center;
}

#ProductDetail .price_group > .btn_group button:first-child {
    margin-right: 10px;
    width: 138px;
}

#ProductDetail .price_group > .btn_group button:last-child {
    width: calc(100% - 138px);
}

#ProductDetail .price_group .product_tit {
    font-size: 32px;
    font-weight: 700;
    margin: 16px 0;
}

#ProductDetail .price_group .writer {
    display: flex;
    align-items: center;
}

#ProductDetail .price_group .writer .id {
    font-size: 14px;
    font-weight: 400;
    display: block;
    margin-left: 8px;
    color: var(--color-gray500);
}

#ProductDetail .price_group .writer .profile_img {
    width: 26px;
    height: 26px;
    border-radius: 99px;
    overflow: hidden;
}

#ProductDetail .price_group .writer .profile_img.empty {
    background: url("../img/icon_profile_empty.svg") no-repeat center;
    background-size: 26px;
}

#ProductDetail .price_group .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

#ProductDetail .price_group .price .label {
    font-size: 18px;
    font-weight: 800;
}

#ProductDetail .price_group .price .value {
    font-size: 24px;
    font-weight: 800;
    color: var(--color-main-blue);
}

#ProductDetail .price_group .option_groupBox {
    border-radius: 16px;
    background: var(--color-gray200);
    width: 100%;
    padding: 30px;
    margin-bottom: 30px;
}

#ProductDetail .price_group .option_groupBox .radio_group {
    margin-bottom: 30px;
}

#ProductDetail .price_group .option_groupBox .radio_group:last-child {
    margin-bottom: 0;
}

#ProductDetail .price_group .option_groupBox .radio_group .label {
    font-size: 16px;
    font-weight: 700;
    display: block;
}

#ProductDetail .price_group .option_groupBox .radio_group > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

#ProductDetail .price_group .option_groupBox .radio_group label {
    margin-top: 16px;
}

#ProductDetail .price_group .option_groupBox .radio_group .container {
    width: 33.33%;
}

#ProductDetail .price_group .option_groupBox .radio_group .txt {
    color: var(--color-gray600);
    font-weight: 400;
}

#ProductDetail .price_group .option_groupBox .radio_group .container input:checked + div .txt {
    color: var(--color-gray900);
}

#ProductDetail .information_drop_group {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

#ProductDetail .information_drop_group .accordion__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 0;
}

#ProductDetail .information_drop_group .open-container {
    margin-top: 10px;
}

#ProductDetail .information_drop_group .open-container li {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    margin-bottom: 16px;
}

#ProductDetail .information_drop_group .open-container li .label {
    width: 150px;
    color: var(--color-gray500);
    margin-right: 30px;
}

#ProductDetail .information_drop_group .open-container li .value {
    width: calc(100% - 180px);
}

#ProductDetail .information_drop_group .open-container li:last-child {
    margin-bottom: 0;
}

#ProductDetail .copyright_group {
    margin-top: 60px;
    font-size: 13px;
    color: var(--color-gray500);
}

#ProductDetail .copyright_group a {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

#ProductDetail .copyright_group a:hover {
    color: var(--color-gray900);
}

#ProductDetail .copyright_group a i {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    display: block;
    background: url(../img/icon_right_gray.svg) center no-repeat;
    background-size: 12px;
}

#ProductDetail .copyright_group a:hover i {
    background: url("../img/icon_right_black.svg") center no-repeat;
    background-size: 12px;
    transform: rotate(180deg);
}

#ProductDetail .content_half {
    align-items: stretch;
}

#ProductDetail .detail_top {
    margin-bottom: 60px;
    position: relative;
}

#ProductDetail .detail_top > .btn_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

#ProductDetail .detail_top > .btn_group .btn_left {
    display: flex;
    align-items: center;
}

#ProductDetail .detail_top > .btn_group .btn_left button {
    margin-right: 8px;
}

#ProductDetail .detail_top .img_slider_group {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

#ProductDetail .detail_top .img_slider_group .slick-prev {
    left: 20px;
    z-index: 1;
}

#ProductDetail .detail_top .img_slider_group .slick-next {
    right: 20px;
    z-index: 1;
}

#ProductDetail .detail_top .img_slider_group .slick-list {
    border-radius: 16px;
    overflow: hidden;
}

#ProductDetail .detail_top .img_slider_group .item {
    background: var(--color-gray400);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 480px;
}

#ProductDetail .detail_top .pagingInfo {
    position: absolute;
    color: #fff;
    z-index: 9;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0);
    font-weight: 500;
    font-size: 13px;
    background: #000000A6;
    border-radius: 999px;
    padding: 3px 0;
    width: 54px;
    display: flex;
    align-items: center;
    letter-spacing: 2px;
    justify-content: center;
}

#ProductDetail .video_controlGroup > .slider-handle {
    width: 100%;
    margin-bottom: 6px;
}

#ProductDetail .video_controlGroup > .slider-handle input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #fff;
    border-radius: 0;
}

#ProductDetail .video_controlGroup > .slider-handle input[type=range]:focus {
    outline: none;
}

#ProductDetail .video_controlGroup > .slider-handle input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-main-blue);
    border-radius: 99px;
    cursor: pointer;
}

#ProductDetail .video_group {
    height: 480px;
    background: var(--color-gray400);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

#ProductDetail .video_group .video_link_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ProductDetail .video_group .video_link_box iframe {
    width: 100%;
    height: 100%;
}

#ProductDetail .video_group .video_controlGroup {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: transparent linear-gradient(0deg, #000000 0%, #54545400 100%) 0 0 no-repeat padding-box;
    padding: 30px 20px 12px;
}

#ProductDetail .video_group .controls_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ProductDetail .video_group .controls_group .btn_sound_group {
    display: flex;
    align-items: center;
}

#ProductDetail .btn_sound_group input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: rgba(255, 255, 255, .6);
    border-radius: 0;
}

#ProductDetail .btn_sound_group input[type=range]:focus {
    outline: none;
}

#ProductDetail .btn_sound_group input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 99px;
    cursor: pointer;
}

#ProductDetail .btn_sound_group .sound {
    width: 24px;
    height: 24px;
    background: url('../img/icon_volume_fill.svg') no-repeat center;
    font-size: 0;
    margin-top: 6px;
    margin-right: 6px;
}

#ProductDetail .btn_sound_group .sound.off {
    background: url('../img/icon_volumemuted_fill.svg') no-repeat center;
}

#ProductDetail .controls_group .play_stop_group {
    display: flex;
    align-items: center;
}

#ProductDetail .controls_group .play_stop_group .time {
    display: block;
    font-size: 12px;
    color: #fff;
}

#ProductDetail .controls_group .play_stop_group button {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    font-size: 0;
    background: url('../img/icon_play_fill.svg') no-repeat center;
}

#ProductDetail .controls_group .play_stop_group button.stop {
    background: url('../img/icon_stop_fill.svg') no-repeat center;
}

/*장바구니*/
#cart .half_right {
    width: 330px;
    padding-left: 40px;
    padding-top: 36px;
    border-left: 1px solid var(--color-border);
    padding-bottom: 100px;
}

#cart .half_left {
    width: calc(100% - 330px);
    padding-right: 40px;
    padding-top: 36px;
    padding-bottom: 100px;
}

#cart .content_half {
    align-items: stretch;
}

#cart .top_tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#cart .top_tit .sc_tit {
    font-size: 24px;
    font-weight: 800;
}

#cart .top_tit .step_group {
    display: flex;
    align-items: center;
}

#cart .top_tit .step_group li {
    display: flex;
    align-items: center;
    color: var(--color-gray400);
    font-size: 14px;
    font-weight: 600;
}

#cart .top_tit .step_group li::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url("../img/icon_right_gray.svg");
    margin: 0 10px;
}

#cart .top_tit .step_group li:last-child::after {
    display: none;
}

#cart .top_tit .step_group li:first-child::before {
    content: "1";
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 99px;
    background: var(--color-gray400);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cart .top_tit .step_group li:nth-child(2)::before {
    content: "2";
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 99px;
    background: var(--color-gray400);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cart .top_tit .step_group li:last-child::before {
    content: "3";
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 99px;
    background: var(--color-gray400);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cart .top_tit .step_group li.finish::before {
    background: url("../img/icon_checkbox_sel.svg");
    font-size: 0;
}

#cart .top_tit .step_group li.finish {
    color: var(--color-main-blue);
}

#cart .top_tit .step_group li.finish::after {
    background: url("../img/icon_right_blue.svg");
}

#cart .top_tit .step_group li.active::before {
    background: url("../img/icon_radio_sel.svg");
    font-size: 0;
}

#cart .top_tit .step_group li.active {
    color: var(--color-main-blue);
}

#cart .cart_content_group section {
    padding-top: 40px;
}

#cart .cart_content_group section:first-child {
    padding-top: 24px;
}

#cart section .box {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 24px;
}

#cart .cart_content_group section .top_group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

#cart .cart_content_group section .top_group .total_select {
    display: flex;
    align-items: center;
}

#cart .cart_content_group section .top_group .total_select .value {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

#cart .cart_content_group section .top_group .total_select .value span {
    display: block;
    margin-left: 4px;
}

#cart .cart_content_group section .top_group .del_btn_group {
    display: flex;
    align-items: center;
}

#cart .cart_content_group section .top_group .del_btn_group button {
    display: flex;
    align-items: center;
    color: var(--color-gray700);
    font-size: 14px;
    font-weight: 400;
}

#cart .cart_content_group section .top_group .del_btn_group button:last-child {
    color: var(--color-gray500);
}

#cart .cart_content_group section .top_group .del_btn_group button:first-child::after {
    content: "";
    width: 1px;
    height: 14px;
    background: var(--color-border);
    display: block;
    margin: 0 10px;
}

#cart .cart_content_group section .top_group .del_btn_group button:hover {
    color: var(--color-gray900);
}

#cart .cart_content_group .product_list li {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border);
}

#cart .cart_content_group .product_list li:first-child {
    padding-top: 0;
}

#cart .cart_content_group .product_list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#cart .cart_content_group .product_list li .checkbox_group {
    width: 20px;
    margin-right: 12px;
}

#cart .cart_content_group .product_list li .checkbox_group + a {
    width: calc(100% - 192px);
}

#cart .cart_content_group .product_list li .price_group {
    width: 140px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#cart .cart_content_group .product_list li .price_group .beforePrice {
    text-decoration: line-through;
    color: var(--color-gray400);
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 2px;
    display: block;
}

#cart .cart_content_group .product_list li .price_group .afterPrice {
    color: var(--color-gray900);
    font-size: 20px;
    font-weight: 700;
    display: block;
}

#cart .cart_content_group .product_list li a {
    display: flex;
    align-items: flex-start;
    width: calc(100% - 160px);
}

#cart .cart_content_group .product_list li a:hover .tit {
    text-decoration: underline;
}

#cart .cart_content_group .product_list li a .img_group {
    width: 180px;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
}

#cart .cart_content_group .product_list li a .img_group img {
    display: block;
}

#cart .cart_content_group .product_list li a .txt_group {
    width: calc(100% - 200px);
}

#cart .cart_content_group .product_list li a .tit {
    font-size: 16px;
    font-weight: 400;
}

#cart .cart_content_group .product_list li a .writer {
    color: var(--color-gray500);
    margin-top: 4px;
    display: block;
}

#cart .half_right .btn_group {
    margin: 24px 0 16px;
}

#cart .half_right .btn_group,
#cart .half_right .btn_group button {
    width: 100%;
}

#cart .total_group .box {
    padding: 20px;
    background: var(--color-gray200);
    border-radius: 12px;
    margin-top: 24px;
}

#cart .total_group .box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

#cart .total_group .box > div:last-child {
    margin-bottom: 0;
}

#cart .total_group .box span {
    color: var(--color-gray700);
    font-size: 14px;
    font-weight: 300;
}

#cart .total_group .last_total_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    color: var(--color-main-blue);
}

#cart .total_group .last_total_price .label {
    font-size: 16px;
    font-weight: 600;
}

#cart .total_group .last_total_price .value {
    font-size: 24px;
    font-weight: 700;
}

#cart .half_right .taxes {
    display: block;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 300;
}

#cart section .sc_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

#cart section .sc_top .tit {
    color: var(--color-gray600);
    font-size: 20px;
    font-weight: 600;
}

#cart section .addr_group .tit {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

#cart section .addr_group .number {
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

#cart section .addr_group .detail_addr {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-gray600);
}

#cart section .payment_option .radio_group .txt {
    font-size: 16px;
    font-weight: 600;
}

#cart section .payment_option .radio_group {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}

#cart section .payment_option .radio_group:last-child {
    padding-bottom: 0;
    border-bottom: none
}

#cart section .payment_option .radio_group:first-child {
    padding-top: 0;
}

#cart section .payment_option .radio_group .payment_inner_group {
    display: flex;
    margin-top: 16px;
    background: var(--color-gray200);
    border-radius: 12px;
    padding: 16px;
    align-items: center;
    justify-content: space-between;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info {
    display: flex;
    align-items: center;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info i {
    width: 80px;
    height: 50px;
    background: url("../img/creditcard_mastercard.svg");
    background-size: 100%;
    display: block;
    margin-right: 12px;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.mastercard i {
    background: url("../img/creditcard_mastercard.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.cirrus i {
    background: url("../img/creditcard_cirrus.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.maestro i {
    background: url("../img/creditcard_maestro.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.visa i {
    background: url("../img/creditcard_visa.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.american i {
    background: url("../img/creditcard_american.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.diners i {
    background: url("../img/creditcard_diners.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.unionpay i {
    background: url("../img/creditcard_unionpay.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.jcb i {
    background: url("../img/creditcard_jcb.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.bc i {
    background: url("../img/creditcard_bc.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.kb i {
    background: url("../img/creditcard_kb.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.ibk i {
    background: url("../img/creditcard_ibk.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.nh i {
    background: url("../img/creditcard_nh.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.lotte i {
    background: url("../img/creditcard_lotte.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.samsung i {
    background: url("../img/creditcard_samsung.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.shinhan i {
    background: url("../img/creditcard_shinhan.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.woori i {
    background: url("../img/creditcard_woori.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.hana i {
    background: url("../img/creditcard_hana.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info.hyundai i {
    background: url("../img/creditcard_hyundai.svg");
    background-size: 100%;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info .txt_group p {
    font-size: 14px;
    font-weight: 600;
}

#cart section .payment_option .radio_group .payment_inner_group .card_info .txt_group span {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-gray600);
    display: block;
    margin-top: 2px;
}


/* ================컴포넌트 css================*/
/*드롭다운 기본 형태*/
.accordion_group .open-btn i.down {
    width: 16px;
    height: 16px;
    display: block;
    background: url("../img/icon_right_gray.svg") center no-repeat;
    background-size: 16px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transform: rotate(90deg);
}

.accordion_group .open-btn.active i.down {
    transform: rotate(-90deg);
}

.accordion_group .open-container {
    display: none;
}

.accordion_group .open-container.active {
    display: block;
}

/*테이블 디자인*/
table {
    border-top: 1px solid var(--color-gray900);
}

table tr {
    border-bottom: 1px solid var(--color-border);
    padding: 0 10px;
}

table td, table th {
    text-align: center;
    padding: 12px 0;
}

table td {
    font-size: 16px;
    color: var(--color-gray700);
}

table th {
    font-size: 14px;
    color: var(--color-gray500);
}

table td.tit {
    font-weight: 500;
    color: var(--color-gray900);
}

/*toggle button 토글 버튼*/
.toggle_group .switch {
    position: relative;
    display: inline-block;
    width: 39px;
    height: 24px;
}

.toggle_group .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle_group .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-gray400);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 99px;
}

.toggle_group .slider:before {
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 99px;
}

.toggle_group input:checked + .slider {
    background-color: var(--color-main-blue);
}

.toggle_group input:checked + .slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

/*버튼 디자인*/
.btn_group {
    display: flex;
    align-items: center;
}

.btn_group button {
    border-radius: 99px;
    background: var(--color-main-blue);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 32px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_group button:hover {
    background: rgba(62, 159, 230, 1);
}

.btn_group button > i.right {
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

.btn_group button > i.left {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.btn_group.small button {
    font-size: 14px;
    padding: 10px 20px;
    height: 37px;
    display: flex;
    align-items: center;
}

.btn_group.small button > i.left {
    margin-right: 6px;
}

.btn_group.smallQuadrangle button {
    height: 36px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    color: var(--color-gray800);
    font-weight: 500;
    justify-content: center;
    padding: 0;
}

.btn_group.smallQuadrangle button > i {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    display: block;
}

.btn_group.xsmall button {
    height: 31px;
    font-size: 13px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    font-weight: 500;
    justify-content: center;
    padding: 0 20px;
}

.btn_group button.fill_gray {
    background: var(--color-gray300);
    color: var(--color-gray800);
}

.btn_group button.fill_gray:hover {
    background: rgba(217, 224, 232, 1);
}

.btn_group button.fill_black {
    background: var(--color-gray900);
}

.btn_group button.fill_black:hover {
    background: #000;
}

.btn_group button.line_gray {
    border: 1px solid var(--color-border);
    background: none;
    color: var(--color-gray900);
}

.btn_group button.line_gray:hover {
    border-color: var(--color-gray400);
}

.btn_group button.line_black {
    border: 2px solid var(--color-gray900);
    background: none;
    color: var(--color-gray900);
}

.btn_group button.line_black .icon_heart {
    width: 20px;
    height: 20px;
    display: block;
    background: url("../img/icon_heart_line.svg");
    margin-right: 4px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn_group button.line_black:hover {
    border-color: var(--color-main-blue);
    color: var(--color-main-blue);
}

.btn_group button.line_black.active .icon_heart {
    background: url("../img/icon_heart_fill_blue.svg");
}

.btn_group button.line_black:hover .icon_heart {
    background: url("../img/icon_heart_line_blue.svg");
}

.btn_group button.disable {
    opacity: .3;
}

/*tag group*/
.tag_group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tag_group button {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    padding: 0 20px;
    line-height: 36px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    margin-right: 10px;
    margin-bottom: 12px;
}

.tag_group button:hover {
    background: var(--color-gray200);
}

.tag_group.opacitytag .red {
    display: flex;
    align-items: center;
    color: var(--color-red);
    font-size: 13px;
    font-weight: 500;
    height: 21px;
    padding: 0 6px;
    border-radius: 4px;
    background: #F044521A;
}

.tag_group.opacitytag .blue {
    display: flex;
    align-items: center;
    color: var(--color-main-blue);
    font-size: 13px;
    font-weight: 500;
    height: 21px;
    padding: 0 6px;
    border-radius: 4px;
    background: #53ADEF1A;
}

.tag_group .del_tag {
    display: flex;
    align-items: center;
    background: var(--color-gray200);
    border-radius: 99px;
    height: 32px;
    padding: 0 10px 0 16px;
    margin-right: 8px;
}

.tag_group .del_tag:last-child {
    margin-right: 0;
}

.tag_group .del_tag .value {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray800);
}

.tag_group .del_tag > button {
    width: 30px;
    height: 30px;
    background: url("../img/icon_close_gray.svg") no-repeat center;
    background-size: 16px;
    opacity: .7;
    padding: 0;
    margin: 0;
    font-size: 0 !important;
    border: none;
}

.tag_group .del_tag > button:hover {
    opacity: 1;
}

.tag_group .line_tag {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    height: 32px;
    padding: 0 20px;
    margin-right: 8px;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-gray700);
}

/*인포 텍스트 그룹*/
.info_group > p {
    color: var(--color-gray500);
    font-size: 13px;
    font-weight: 300;
}

/*selectbox 셀렉트박스*/
.selectbox_group {
    display: flex;
    flex-direction: column;
}

.selectbox_group select {
    width: 100%;
    border-radius: 4px;
    background: #fff;
    height: 51px;
    padding: 0 20px 0 0;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-gray400);
    position: relative;
    background: url("../img/icon_down_gray.svg") no-repeat rgba(255, 255, 255, 1);
    background-size: 12px;
    background-position: center right;
}

.selectbox_group.small select {
    border: 1px solid var(--color-border);
    height: 32px;
    padding: 0 32px 0 16px;
    background-position: center right 16px;
    font-size: 14px;
}

.selectbox_group select:valid {
    color: var(--color-gray900);
}

.input_group_select.type_label .container {
    border-radius: 8px;
    font-size: 16px;
    padding: 0 20px;
    border: 1px solid var(--color-border);
    width: 100%;
    display: flex;
    align-items: center;
}

.input_group_select .error_txt {
    display: none;
}

.input_group_select.type_label .container .label {
    font-size: 16px;
    font-weight: 600;
    width: 160px;
    margin-right: 20px;
    padding: 14px 0;
}

.input_group_select.type_label .container .selectbox_group {
    width: 260px;
}

.input_group_select.error .container {
    border-color: var(--color-red);
    margin-bottom: 4px !important;
}

.input_group_select.error .error_txt {
    display: block !important;
    text-align: left;
    margin-left: 8px;
    font-size: 13px;
    color: var(--color-red);
}

/*checkbox*/
.checkbox_group input[type="checkbox"] {
    display: none;
}

.checkbox_group input[type="checkbox"] + label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.checkbox_group input[type="checkbox"] + label > span {
    vertical-align: middle;
    padding-left: 12px;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-gray600);
}

.checkbox_group input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/icon_unsel.svg);
    border-radius: 99px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.checkbox_group input[type="checkbox"]:checked + label:before {
    background: url(../img/icon_checkbox_sel.svg);
}

.checkbox_group input[type="checkbox"]:hover + label:before {
    box-shadow: inset 0 0 0 1px var(--color-main-blue);
}

.checkbox_group input[type="checkbox"] + label > span a {
    text-decoration: underline;
}

/*라디오박스*/
.radio_group .container {
    display: flex;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio_group .container > div {
    display: flex;
    align-items: center;
}

.radio_group .container input {
    opacity: 0;
    cursor: pointer;
}

.radio_group .checkmark {
    position: relative;
    display: block;
    height: 20px;
    width: 20px;
    background: url(../img/icon_unsel.svg);
    border-radius: 50%;
    -webkit-transition-duration: 0.1s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.1s;
    transition-timing-function: ease;
}

.radio_group .container:hover input ~ .checkmark {
    box-shadow: inset 0 0 0 1px var(--color-main-blue);
}

.radio_group .container input:checked ~ .checkmark {
    background: url(../img/icon_radio_sel.svg);
}

.radio_group .container:hover input + div .checkmark {
    box-shadow: inset 0 0 0 1px var(--color-main-blue);
}

.radio_group .container input:checked + div .checkmark {
    background: url(../img/icon_radio_sel.svg);
}

.radio_group .txt {
    margin-left: 12px;
}

.radio_group .txt img {
    display: block;
}

.radio_group.type_label {
    padding: 14px 20px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.radio_group.type_label.align_right {
    justify-content: space-between;
}

.radio_group.type_label .label {
    font-size: 16px;
    font-weight: 600;
    width: 160px;
    margin-right: 20px;
}

.radio_group.type_label > div {
    display: flex;
    align-items: center;
}

.radio_group.type_label .txt {
    margin-left: 10px;
    font-size: 14px;
    color: var(--color-gray600);
}

.radio_group.type_label .container input:checked + div .txt {
    color: var(--color-gray900);
    font-weight: 400;
}

.radio_group.type_label .container {
    margin-right: 30px;
}

.radio_group.type_label .container:last-child {
    margin-right: 0;
}

/*인풋그룹*/
.input_group input {
    font-size: 16px;
    padding: 16px 24px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    width: 100%;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

input::placeholder {
    letter-spacing: 0;
}

.input_group input:focus {
    border-color: var(--color-gray900);
}

.input_group .error input {
    border-color: var(--color-red);
    margin-bottom: 4px !important;
}

.input_group .error_txt {
    display: none;
}

.input_group .error .error_txt {
    display: block !important;
    text-align: left;
    margin-left: 8px;
    font-size: 13px;
    color: var(--color-red);
}

.input_group.type_label input {
    border-radius: 8px;
    padding-left: 200px;
}

.input_group.type_label .container {
    position: relative;
}

.input_group.type_label .container label {
    position: absolute;
    left: 20px;
    top: 0;
    font-size: 16px;
    padding: 14px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.input_group.type_label .container label i img,
.input_group.type_label .container label i {
    display: block;
    width: 22px;
    margin-right: 4px;
}

.input_group.type_label.small label {
    font-size: 13px;
    font-weight: 500;
    left: 12px;
    padding: 11px 0;
}

.input_group.type_label.small input {
    border-radius: 8px;
    padding: 11px 24px 11px 54px;
}

.input_group.type_label.rightOn input.al_right {
    padding: 16px 50px 16px 200px;
}

.input_group.type_label.rightOn .right_group {
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 16px;
    font-weight: 300;
}

.input_group.type_label.dual .container {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
}

.input_group.type_label.dual .container .label {
    font-size: 16px;
    font-weight: 600;
    width: 160px;
    margin-right: 20px;
    padding: 14px 0;
}

.input_group.type_label.dual .container > div {
    width: calc(100% - 160px);
}

.input_group.type_label.dual input {
    padding: 16px 0;
    width: 100%;
    border-radius: 0;
    border: 0;
}

.input_group.type_label.dual input:focus {
    border: none !important;
}

.input_group.type_label.dual input:nth-child(2):focus {
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
}

.input_group.type_label.dual input:nth-child(2) {
    border-top: 1px solid var(--color-border);
}

.input_group.type_label.dual .error {
    border-color: var(--color-red);
    margin-bottom: 4px !important;
}

.input_group.type_label.dual .error input {
    margin: 0 !important;
}

.input_group.type_label.dual .error + .error_txt {
    display: block !important;
    text-align: left;
    margin-left: 8px;
    font-size: 13px;
    color: var(--color-red);
}

/*파일업로드 버튼 file upload*/
.file_upload_btn input {
    display: none;
}

.file_upload_btn label {
    width: 100%;
    height: 52px;
    background: var(--color-gray300);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray800);
}

.file_upload_btn label i,
.file_upload_btn label img {
    display: block;
}

.file_upload_btn label i {
    margin-right: 8px;
    width: 20px;
    height: 20px;
}

/*file_upload_group*/
.fileupload.container {
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

/*search group*/
.search_group {
    background: #fff;
    border-radius: 99px;
    overflow: hidden;
    padding-left: 30px;
    padding-right: 14px;
    display: flex;
    align-items: center;
}

.search_group input {
    height: 60px;
    width: 100%;
    font-size: 16px;
}

.search_group button {
    width: 44px;
    height: 44px;
    background-size: 24px;
    background: url(../img/icon_search.svg) no-repeat center;
}

.search_group.small_gray {
    background: var(--color-gray300);
    padding-left: 24px;
    padding-right: 10px;
    width: 100%;
}

.search_group.small_gray input {
    font-size: 14px;
    height: 44px;
    background: none;
}

.search_group.btn_openVer {
    padding: 0;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    background: none;
    width: 44px;
}

.search_group.btn_openVer .search-open-btn {
    background: url(../img/icon_search.svg) no-repeat var(--color-gray300) center;
    border-radius: 99px;
}

.search_group.btn_openVer.active .search-open-btn {
    background: url("../img/icon_close.svg") no-repeat #fff center;
    background-size: 20px;
}

.search_group.btn_openVer .hide_form {
    display: none;
}

.search_group.btn_openVer.active {
    width: 360px;
    padding-right: 16px;
}

.search_group.btn_openVer.active .hide_form {
    display: flex;
    align-items: center;
    width: calc(100% - 44px);
    margin-left: 0;
    background: var(--color-gray300);
    border-radius: 99px;
    padding-left: 24px;
    padding-right: 10px;
}

/*textarea group*/
.textarea_group.type_label {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    width: 100%;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
}

.textarea_group.type_label .label {
    font-size: 16px;
    font-weight: 600;
    width: 160px;
    margin-right: 20px;
}

.textarea_group.type_label .text_box {
    width: calc(100% - 160px);
}

.textarea_group.type_label textarea {
    border: none;
    background: var(--color-gray200);
    border-radius: 8px;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    height: 200px;
    resize: none;
}

.textarea_group.type_label textarea + .info_group {
    margin-top: 6px;
}

/*pagination paging 페이징*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.pagination a {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray400);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}

.pagination a:last-child {
    margin-right: 0;
}

.pagination a.active {
    color: var(--color-main-blue);
    font-weight: 600;
}

.pagination a:hover:not(.active) {
    background-color: var(--color-gray200);
}

.pagination .prev {
    font-size: 0;
    background: url("../img/icon_right_gray.svg") no-repeat center;
    background-size: 14px;
    transform: rotate(180deg);
}

.pagination .next {
    font-size: 0;
    background: url("../img/icon_right_gray.svg") no-repeat center;
    background-size: 14px;
}

.pagination a:last-child {
    margin-right: 0;
}

/*스크롤바 숨기기*/
.scroll_hidden {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overflow: hidden;
    height: 100vh;
}

.scroll_hidden::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

/*콘텐츠 하프 영역 content_half*/
.content_half {
    display: flex;
    align-items: flex-start;
}

/*홈페이지 경로*/
.route_wrap {
    display: flex;
    align-items: center;
}

.route_wrap a {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--color-gray500);
}

.route_wrap a::after {
    content: ">";
    font-size: 12px;
    color: var(--color-gray500);
    margin: 0 4px;
}

.route_wrap a:last-child::after {
    content: none;
}

.route_wrap a:hover {
    color: var(--color-gray700);
}

/*상품 카드 product card*/
.productCard_typeA {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 10px;
    display: block;
}

.productCard_typeA .img_box {
    width: 290px;
    height: 180px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-gray400);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.productCard_typeA .img_box img {
    width: 100%;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.productCard_typeA:hover .img_box img {
    width: 105%;
}

.productCard_typeA .productCard_info_area {
    padding: 0 10px;
    margin-top: 16px;
}

.productCard_typeA .productCard_info_area .tit {
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.productCard_typeA:hover .productCard_info_area .tit {
    font-weight: 600;
}

.productCard_typeA .productCard_info_area .writer {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-gray500);
    margin-top: 2px;
}

.productCard_typeA .productCard_info_area .price_group {
    margin-top: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.productCard_typeA .productCard_info_area .price_group .beforePrice {
    text-decoration: line-through;
    color: var(--color-gray400);
    font-size: 14px;
    font-weight: 300;
    margin-right: 10px;
    display: block;
}

.productCard_typeA .productCard_info_area .price_group .afterPrice {
    color: var(--color-gray900);
    font-size: 18px;
    font-weight: 800;
}

.productCard_typeA .total_group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.productCard_typeA .total_group > div {
    display: flex;
    align-items: center;
    color: var(--color-gray500);
    font-size: 13px;
}

.productCard_typeA .total_group > div:first-child::after {
    content: "";
    display: block;
    width: 3px;
    height: 3px;
    background: var(--color-gray600);
    margin: 0 5px;
    border-radius: 99px;
}

.productCard_typeA .total_group .star_group {
    display: flex;
    align-items: center;
}

.productCard_typeA .total_group .star_group i {
    display: block;
    width: 13px;
    height: 13px;
    margin-right: 2px;
}

.productCard_typeA .total_group .review_total .value::before {
    content: "(";
}

.productCard_typeA .total_group .review_total .value::after {
    content: ")";
}

.productCard_typeA .btn_group {
    padding: 10px;
}

.productCard_typeA .btn_group button {
    width: 100%;
    padding: 0;
}

.productCard_typeA .btn_group button.preview {
    margin-right: 10px;
}

/*상품카드 리스트 형태*/
.productCard_typeA.list {
    width: 100% !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.productCard_typeA.list > div:first-child {
    display: flex;
    align-items: center;
    width: calc(100% - 220px);
}

.productCard_typeA.list .img_box {
    width: 257px;
    height: 160px;
}

.productCard_typeA.list .productCard_info_area {
    padding: 0 30px;
    margin: 0;
    width: calc(100% - 257px);
}

.productCard_typeA.list .productCard_info_area .tit {
    font-size: 20px;
    -webkit-line-clamp: 2;
    font-weight: 600;
}

.productCard_typeA.list .productCard_info_area .price_group {
    margin-top: 10px;
}

.productCard_typeA.list .productCard_info_area .price_group .afterPrice {
    font-size: 24px;
}

.productCard_typeA.list .btn_group {
    flex-direction: column;
}

.productCard_typeA.list .btn_group button {
    margin: 0;
    width: 150px;
    height: 50px;
    background: var(--color-gray300);
    color: var(--color-gray800);
    border: none;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 600;
}

.productCard_typeA.list .btn_group button:hover {
    background: rgba(217, 224, 232, .8);
}

.productCard_typeA.list .btn_group button:last-child {
    margin-top: 10px;
}

/*상품타입 _ 판매목록상품*/
.productCard_typeB {
    width: 100% !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.productCard_typeB:last-child {
    margin-bottom: 0;
}

.productCard_typeB > div:first-child {
    display: flex;
    align-items: center;
    width: calc(100% - 220px);
}

.productCard_typeB .img_box {
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-gray400);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 257px;
    height: 160px;
}

.productCard_typeB .img_box img {
    width: 100%;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.productCard_typeB:hover .img_box img {
    width: 105%;
}

.productCard_typeB .productCard_info_area {
    padding: 0 30px;
    margin: 0;
    width: calc(100% - 257px);
}

.productCard_typeB .history_box {
    background: var(--color-gray200);
    border-radius: 8px;
    width: 220px;
    display: block;
    align-items: stretch;
    padding: 20px;
    overflow: auto;
    height: 160px;
}

.productCard_typeB .history_box .label {
    color: var(--color-gray900);
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.productCard_typeB .history_box li {
    color: var(--color-gray600);
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}

.productCard_typeB .history_box li::before {
    content: "-";
    display: block;
    margin-right: 4px;
}

.productCard_typeB .productCard_info_area > .tit {
    color: var(--color-gray800);
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.productCard_typeB .qa_state_group {
    display: flex;
    align-items: center;
}

.productCard_typeB .qa_state_group .label {
    color: var(--color-gray900);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.productCard_typeB .qa_state_group .label .time {
    color: var(--color-gray400);
    font-size: 12px;
    font-weight: 400;
    display: block;
    margin-left: 6px;
}

.productCard_typeB .qa_state_group .tag_group {
    margin-left: 8px;
}

.productCard_typeB .detail_group {
    margin-top: 22px;
}

.productCard_typeB .detail_group .version_type {
    color: var(--color-gray900);
    font-size: 14px;
    font-weight: 600;
}

.productCard_typeB .detail_group .detail_type {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.productCard_typeB .detail_group .detail_type li {
    color: var(--color-gray600);
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
}

.productCard_typeB .detail_group .detail_type li::after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    margin: 0 12px;
    background-color: var(--color-border);
}

.productCard_typeB .detail_group .detail_type li:last-child::after {
    display: none;
}

.productCard_typeB .detail_group .language_type {
    color: var(--color-gray600);
    font-size: 14px;
    font-weight: 300;
    margin-top: 4px;
}

/*상품타입 _ 구매목록상품*/
.productCard_typeC {
    width: 100% !important;
    margin-right: 0 !important;
    display: flex;
    justify-content: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.productCard_typeC:last-child {
    margin-bottom: 0;
}

.productCard_typeC .img_box {
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-gray400);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 257px;
    height: 160px;
}

.productCard_typeC .img_box img {
    width: 100%;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.productCard_typeC:hover .img_box img {
    width: 105%;
}

.productCard_typeC .productCard_info_area {
    padding: 0 14px 0 30px;
    width: calc(100% - 257px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.productCard_typeC .productCard_info_area > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productCard_typeC .productCard_info_area .detail_info_group .tit {
    color: var(--color-gray800);
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.productCard_typeC .productCard_info_area .detail_info_group .license {
    color: var(--color-gray500);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.productCard_typeC .productCard_info_area .detail_info_group .license i {
    width: 12px;
    height: 12px;
    display: block;
    background: url("../img/icon_down_gray.svg");
    background-size: 12px;
    transform: rotate(-90deg);
    margin-left: 6px;
}

.productCard_typeC .checkbox_group input[type="checkbox"] + label > span {
    font-size: 14px;
    padding-left: 8px;
}

.productCard_typeC .productCard_info_area .btn_group button {
    width: 160px;
}

.productCard_typeC .productCard_info_area .detail_info_group {
    width: calc(100% - 180px);
}

.productCard_typeC .review_check_group {
    display: flex;
    align-items: center;
    background: var(--color-gray200);
    width: 100%;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--color-gray600);
    font-size: 16px;
    font-weight: 500;
}

.productCard_typeC .review_check_group .star_group {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.productCard_typeC .review_check_group .star_group .item {
    width: 16px;
    height: 16px;
    display: block;
    background: url(../img/icon_star_line.svg) no-repeat center;
    background-size: 100%;
    font-size: 0;
    margin-right: 4px;
}

.productCard_typeC .review_check_group .star_group .item:hover {
    cursor: pointer;
    opacity: .6;
}

.productCard_typeC .review_check_group .star_group .item.active {
    background: url(../img/icon_star_fill.svg) no-repeat center;
    background-size: 100%;
}

.productCard_typeC .review_check_group .star_group .item:last-child {
    margin-right: 0;
}

/*모달 팝업 modal popup*/
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    opacity: 0;
    transition-duration: 0.1s;
}

.modal.show {
    opacity: 1;
    z-index: 999;
    transition-duration: 0.15s;
}

.modal .modal_container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.modal .modal_container .modal_box {
    background: #fff;
    border-radius: 16px;
    text-align: center;
    width: 500px;
    overflow: auto;
    position: relative;
}

.modal .modal_container .modal_box .close_btn {
    width: 24px;
    height: 24px;
    background: url(../img/icon_close.svg);
    background-size: 100%;
    font-size: 0;
    opacity: .7;
    position: absolute;
    top: 20px;
    right: 20px;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.modal .modal_container .modal_box .close_btn:hover {
    opacity: 1;
}

/*로그인모달*/
.modal.modal_login .modal_box {
    width: 400px;
    padding: 40px 30px 0;
    max-height: 95vh;
}

.modal.modal_login .modal_box .logo {
    width: 185px;
    height: 24px; font-size: 22px; font-weight: 700; line-height: 24px;
    margin-bottom: 30px;
}

.modal.modal_login .sns_login_set {
    flex-direction: column;
}

.modal.modal_login .sns_login_set button {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.modal_login .sns_login_set button i {
    width: 24px;
    height: 24px;
    display: block;
    margin-right: 4px;
}

.modal.modal_login .sns_login_set button i.ico_google {
    background: url(../img/icon_sns_login_google.svg);
}

.modal.modal_login .sns_login_set button i.ico_facebook {
    background: url(../img/icon_sns_login_facebook.svg);
}

.modal.modal_login .sns_login_set button i.ico_apple {
    background: url(../img/icon_sns_login_apple.svg);
}

.modal.modal_login .info_group {
    padding: 14px 0 18px;
    border-top: 1px solid var(--color-border);
}

.modal.modal_login .info_group a {
    font-weight: 400;
    color: var(--color-gray600);
    text-decoration: underline;
}

.modal.modal_login .id_login_form button {
    width: 100%;
}

.modal.modal_login .id_login_form .id_pw_link_group {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.modal.modal_login .id_login_form .id_pw_link_group a {
    display: flex;
    align-items: center;
    color: var(--color-gray400);
    font-weight: 400;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.modal.modal_login .id_login_form .id_pw_link_group a:first-child:not(:only-child)::after {
    content: "";
    width: 1px;
    height: 16px;
    background: var(--color-border);
    display: block;
    margin: 0 10px;
}

.modal.modal_login .id_login_form .id_pw_link_group a:hover {
    color: var(--color-gray700);
}

.modal.modal_login .a_join_link {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-gray900);
    margin-bottom: 20px;
}

.modal.modal_login .a_join_link a {
    color: var(--color-main-blue);
    margin-left: 6px;
    font-weight: 500;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.modal.modal_login .a_join_link a:hover {
    text-decoration: underline;
}

.modal.modal_login .id_login_form .or {
    color: var(--color-gray500);
    margin: 20px 0 16px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.modal_login .id_login_form .or::before {
    content: "";
    width: 60px;
    height: 1px;
    background: var(--color-border);
    display: block;
    margin-right: 16px;
}

.modal.modal_login .id_login_form .or::after {
    content: "";
    width: 60px;
    height: 1px;
    background: var(--color-border);
    display: block;
    margin-left: 16px;
}

.modal.modal_login .input_group .container {
    margin-bottom: 10px;
}

.modal.modal_login .btn_group {
    margin-top: 20px;
}

/*상품 담기 팝업 모달 add cart*/
.modal.modal_addcart .modal_content {
    padding: 30px;
}

.modal.modal_addcart .modal_content .tit_group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.modal.modal_addcart .modal_content .tit_group img {
    display: block;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
}

.modal.modal_addcart .modal_content .tit_group .tit {
    font-size: 24px;
    font-weight: 700;
}

.modal.modal_addcart .MdProductInfo_group {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0 20px;
}

.modal.modal_addcart .MdProductInfo_group .MdProductInfo_detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal.modal_addcart .MdProductInfo_group .MdProductInfo_detail > .txt_group {
    text-align: left;
    width: 230px;
}

.modal.modal_addcart .MdProductInfo_group .MdProductInfo_detail > .txt_group .tit {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
}

.modal.modal_addcart .MdProductInfo_group .MdProductInfo_detail > .txt_group .writer {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--color-gray500);
}

.modal.modal_addcart .MdProductInfo_group .MdProductInfo_detail .price {
    font-size: 18px;
    font-weight: 800;
}

.modal.modal_addcart .MdProductInfo_group .btn_group button {
    width: 100%;
    margin-top: 16px;
}

.modal.modal_addcart .modal_content > .btn_group button:first-child {
    margin-right: 10px;
}

.modal.modal_addcart .modal_content > .btn_group {
    display: flex;
    justify-content: center;
}

.modal.modal_apipop .tit_group {
    padding: 24px;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
}

.modal.modal_apipop .modal_container .modal_box {
    width: 880px;
}

.modal.modal_apipop .api_con_box {
    padding: 24px;
    margin: 0 24px 24px;
    font-size: 16px;
    background: var(--color-gray300);
    border-radius: 16px;
    max-height: 75vh;
    overflow: auto;
}

/* Both search views share the outer geometry so switching only changes the results.
   Card-specific grid rules remain isolated from list rows and other product shelves. */
#productSearch.search-layout .half_left {
    flex-shrink: 0;
}

#productSearch.search-layout .half_right {
    min-width: 0;
    container-type: inline-size;
    container-name: search-results;
}

#productSearch.search-card-page .productCardList_area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    margin-top: 20px;
}

#productSearch.search-card-page .productCardList_area > a {
    width: auto;
    min-width: 0;
    margin: 0;
}

#productSearch.search-card-page .productCard_typeA .img_box {
    width: 100%;
    height: auto;
    aspect-ratio: 29 / 18;
}

#productSearch.search-card-page .productCard_info_area {
    padding: 0 6px;
    margin-top: 12px;
}

#productSearch.search-card-page .productCard_info_area .tit {
    -webkit-line-clamp: 2;
    line-height: 1.5;
    min-height: 3em;
    overflow-wrap: anywhere;
    word-break: normal;
}

#productSearch.search-card-page .price_group {
    flex-wrap: wrap;
}

/* Compact cards keep their controls and metadata inside the available column. */
#productSearch.search-card-page .total_group {
    flex-wrap: wrap;
    gap: 4px 0;
}

/* Scope spacing to product actions; the header also uses btn_group. */
#productSearch.search-card-page .productCard_typeA .btn_group {
    padding: 8px 0 0;
}

/* List presentation uses the same result width instead of fixed child widths. */
#productSearch.search-layout .productCard_typeA.list {
    flex-wrap: wrap;
    gap: 16px;
}

#productSearch.search-layout .productCard_typeA.list > div:first-child {
    flex: 1 1 400px;
    min-width: 0;
}

#productSearch.search-layout .productCard_typeA.list .img_box {
    flex: 0 0 35%;
    width: 35%;
    height: auto;
    aspect-ratio: 257 / 160;
}

#productSearch.search-layout .productCard_typeA.list .productCard_info_area {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    overflow-wrap: anywhere;
}

#productSearch.search-layout .top_guide {
    flex-wrap: wrap;
    gap: 12px;
}

/* On small screens the filters precede results, without enlarging the container. */
@media (max-width: 760px) {
    #productSearch.search-layout .content_half {
        flex-direction: column;
    }

    #productSearch.search-layout .half_left,
    #productSearch.search-layout .half_right {
        width: 100%;
        padding: 24px 0;
        border-left: 0;
    }
}