@charset "UTF-8";

@media (max-width:1919px) {
    #index_item .swiper-button-prev {left: 65px;}
    #index_item .swiper-button-next {right: 65px;}
}

@media (max-width:1439px) {
    #index_item .swiper-button-next,
    #index_item .swiper-button-prev {display: none;}
}

@media (max-width:1023px) {
    #gnb, #gnb_all .gnb_al_ul {width: 80%; margin-right: 0;}
    #index_brandstory .con_txt {flex-direction: column;}
    #index_brandstory .con_txt .con_box {width: 100%;}
    #index_brandstory .con_txt .con_box .icon {max-width: 80px;}
    
    #index_franchise .con_txt .con_box .icon>i {font-size: 2rem;}
    #index_franchise .con_txt .con_box .info .txt_tit {font-size: 1rem;}
    #index_franchise .con_txt .con_box .info .txt_list {font-size: 0.8rem;}

    #index_youtube_wrap .iframe_wrap>li {width: 32%;}
    #index_youtube_wrap .iframe_wrap>li:last-of-type {display: none;}

    #container #sit_pvi {flex-direction: column; justify-content: flex-start;}
    #container #sit_pvi::after {content: '좌우로 스크롤해서 이미지 더보기'; text-align:right; margin-top: 3px;}
    #container #sit_pvi_big {width: 100%;}
    #container #sit_pvi_thumb {margin-top: 10px; margin-right: 0; display: flex;}
    #container #sit_pvi_thumb li {margin-bottom:0; margin-right: 10px; margin-top: 5px;}
    #container #sit_info {flex-direction: column;}
    #container #sit_tab {width: 100%;}
    #container #sit_buy {width: 100%; border-left: none; border-top: 1px solid #e8e8e8;}

    #bo_gall .gall_li {width: 33.33%;}

    .sod_left, 
    .sod_right {float: none; width: 100%;}

    .btn_cart_del {padding: 20px 15px;}
    .tbl_head03 table {margin-top: 15px;}
    .tbl_head03 table thead,
    .tbl_head03 tbody td.td_num,
    .tbl_head03 tbody td.td_dvr,
    .tbl_head03 tbody td.td_numbig {display: none;}
    .sod_mob_div {display: block;}
    .tbl_head03 tbody .sod_table_mob td.td_num,
    .tbl_head03 tbody .sod_table_mob td.td_dvr,
    .tbl_head03 tbody .sod_table_mob td.td_numbig {display: table-cell;}
    .tbl_head03 tbody .sod_table_mob td {padding: 15px 10px;}
}

@media (max-width:767px) {
    nav#gnb, #gnb_all {display: none;}
    .gnb_mobile_btn, #gnb_mobile {display: block;}
    #hd_wrapper #logo {width: 30%; min-width: 180px;}
    #mobile_big_menu {display: block;}
    #container .sub_menu_inc {display: block;}

    #footer .copy_area {flex-direction: column-reverse;}
    #footer [class~=copyright] {width: 100%; padding-top: 10px !important;}
    #footer [class~=copyright] p span {word-break: keep-all;}
    #footer [class~=cs_area] {margin-top: 20px; max-width: 100%;}

    #upper_banner .banner_title>h1 {font-size: 2.5rem;}

    #index_banner {margin-top: 77px;}
    #index_banner .slide_bn {height: 60vh;}
    #index_banner .swiper-button-prev,
    #index_banner .swiper-button-next {opacity: 0.4; width: 35px;}

    #index_franchise .con_txt {grid-template-columns: repeat(2, 1fr);}
    #index_franchise .con_txt .con_box {aspect-ratio: 3/2; padding: 10px;}
    #index_franchise .con_txt .con_box:nth-of-type(3) {order: 4;}

    #index_aboutus ul>li {width: 100%}
    #index_aboutus ul>li>a>div.con_txt {padding: 10px 15px;}

    #index_youtube_wrap .iframe_wrap>li {width: 49%;}
    #index_youtube_wrap .iframe_wrap>li:nth-last-of-type(2) {display: none;}

    #container .sct_20 .sct_li {width: 33.33% !important;}
    #container #sit_ov_wrap {flex-direction: column;}
    #container #sit_pvi {width: 100%;}
    #container #sit_ov {width: 100%; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e8e8e8;}

    .notice_bo_list#bo_list .tbl_head01 thead th,
    .notice_bo_list#bo_list .td_num2,
    .notice_bo_list#bo_list .td_num,
    .notice_bo_list#bo_list .td_name,
    .notice_bo_list#bo_list .td_datetime {display: none;}

    .qna_bo_list#bo_list .tbl_head01 thead th,
    .qna_bo_list#bo_list .td_num2,
    .qna_bo_list#bo_list .td_num,
    .qna_bo_list#bo_list .td_datetime {display: none;}
    .qna_bo_list#bo_list .td_subject,
    .qna_bo_list#bo_list#bo_list .td_name {font-size: 0.8rem;}

    #container #faq_sch .frm_input {width: 60%;}

    .news_bo_gall#bo_gall #gall_ul {display: flex; flex-wrap: wrap;}
    .news_bo_gall#bo_gall #gall_ul .gall_li {width: 50%;}
    .news_bo_gall#bo_gall .gall_li .gall_con>a {flex-direction: column;}
    .news_bo_gall#bo_gall .gall_img {width: 100%; height: auto !important; max-height: none !important;}
    .news_bo_gall#bo_gall .gall_text_href {width: 100%; margin-top: 15px;}

    #company_hello .ch_wrap .hello_cont {flex-direction: column;}
    #container #company_hello .ch_wrap .hello_cont>div {width: 100%;}

    #company_info .organization-chart .level.level-1::after,
    #company_info .organization-chart .team_flex .box:first-child::before,
    #company_info .organization-chart .team_flex .box:not(:last-child)::after {display: none;}
    #company_info .organization-chart .team_flex>div {width: 49%; margin-bottom: 30px;}
    #company_info .organization-chart .team_flex>div:nth-of-type(3), 
    #company_info .organization-chart .team_flex>div:nth-of-type(4) {margin-bottom: 0;}

    [class~=timeline] [class~=timeline-content] ul li img {height:auto}
    [class~=timeline] [class~=timeline-content] ul li {font-size:1em}
    [class~=timeline] [class~=timeline-icon] {left:5%}
    [class~=timeline]::before {left:5%}
    [class~=timeline] [class~=timeline-content] {width:85%;margin-left: 10%}
    [class~=timeline][class~=timeline-alternating] [class~=timeline-block]:nth-of-type(2n+1) [class~=timeline-content] {text-align:left}
    [class~=timeline][class~=timeline-alternating]:not([class~=timeline-left]) [class~=timeline-block]:nth-of-type(2n) [class~=timeline-content] {left:0}

    #company_business .busi_item_wrap .busi_item,
    #company_business .busi_item_wrap .busi_item:nth-of-type(2n) {flex-direction: column; text-align: center;}
    #company_business .busi_item_wrap .busi_img {width: 100%;}
    #company_business .busi_item_wrap .busi_cont {width: 100%; margin: 15px 0 25px;}
    #company_business .busi_item_wrap .busi_cont .busi_text {text-align: justify; text-indent: 1rem;}

    #company_cibi .ccb_wrap .cibi_logo {flex-direction: column;}
    #company_cibi .ccb_wrap .cibi_logo .cibi_img {width: 50%;}
    #company_cibi .ccb_wrap .cibi_logo .cibi_text {width: 100%; margin-top: 30px;}

    #product_feature,
    #product_silver,
    #product_magnet,
    #product_dirt,
    #product_charcoal,
    #product_guide {background-size: 70%;}

    #product_guide .guide_wrap .guide_item {grid-template-columns: repeat(2, 1fr);}

    #call_btn {display: block;}

    #bo_gall .gall_li {width: 50%;}

    #product_acupressure .acupressure_wrap>h2 {font-size: 1.1rem;}
    #product_acupressure .acupressure_wrap>h1 {font-size: 3rem;}
    #product_acupressure .acupressure_wrap>p {font-size: 0.9rem;}
    #product_acupressure .acupressure_wrap>h3 {font-size: 1.5rem;}
    #product_acupressure .acupressure_wrap>ol {font-size: 0.9rem;}
    #product_acupressure .acupressure_wrap>span {font-size: 0.8rem;}
    #product_acupressure .acupressure_wrap>div>h3 {font-size: 1rem;}
    #product_acupressure .acupressure_wrap>div>p {font-size: 0.9rem;}
    #product_acupressure .acupressure_wrap>h5 {font-size: 1.5rem;}

    .sod_table_none {display: none;}
    .sod_table_mob {display: table-row;}

    #sod_bsk #sod_bsk_tot li,
    #sod_bsk #sod_bsk_tot .sod_bsk_cnt {float: none; width: 100%;}
    #sod_bsk_act {display: flex; justify-content: space-between; flex-wrap: wrap;}
    #sod_bsk_act .btn_submit {width: 49%;}
    #sod_bsk_act .btn01 {width: 49%;}

    div.user_menu {position: relative; margin-top: 5px; text-align: right;}
}

@media (max-width:500px) {
    #index_franchise .con_txt .con_box {aspect-ratio: 1/1;}
    #index_banner .swiper-button-prev,
    #index_banner .swiper-button-next {display: none;}

    .od_prd_list .td_prd {padding-left: 15px;}
    .od_prd_list .td_prd .sod_img {position: inherit; top: auto; left: auto;}
    .od_prd_list .td_prd .sod_name {margin-top: 10px;}
}

@media (max-width:424px) {
    #gnb_mobile #gnb_1dul .gnb_1dli .more_btn {left: 85%;}
    .gnb_1dli .gnb_1da {font-size: 1.1rem;}
    #mobile_big_menu .gnb_1dli .gnb_1da {font-size: 0.85rem;}

    #upper_banner .banner_title>h1 {font-size: 1.8rem;}

    .index_text .index_title {font-size: 1.5rem;}
    .index_text .index_stitle {font-size: 1rem;}

    #index_franchise .con_txt {grid-template-columns: repeat(1, 1fr);}
    #index_franchise .con_txt .con_box {aspect-ratio: 3/2;}
    #index_franchise .con_txt .con_box:nth-of-type(3) {order: inherit;}

    #index_aboutus ul>li>a>div {width: 100%; aspect-ratio: auto;}
    #index_aboutus ul>li>a>div.con_img {overflow: hidden; height: 80px;}
    #index_aboutus ul>li>a>div.con_img>img {height: auto;}
    #index_aboutus ul>li>a>div.con_txt {padding: 10px 0 30px;}

    #index_youtube_wrap .iframe_wrap>li {width: 100%;}
    #index_youtube_wrap .iframe_wrap>li:nth-last-of-type(3) {display: none;}

    #container .sct_20 .sct_li {width: 50% !important;}
    #container #sit_inf_open tbody,
    #container #sit_inf_open tbody tr,
    #container #sit_inf_open tbody tr th,
    #container #sit_inf_open tbody tr td {display: block; width: 100%;}

    .news_bo_gall#bo_gall #gall_ul .gall_li,
    .gallery_bo_gall#bo_gall #gall_ul .gall_li {width: 100%;}

    #company_info .organization-chart .level-1 .box {max-width: none;}
    #company_info .organization-chart .box h1.name {font-size: 1.2rem;}
    #company_info .organization-chart .team_flex>div {width: 100%; margin-bottom: 30px; grid-template-rows: auto}
    #company_info .organization-chart .team_flex>div:nth-of-type(3) {margin-bottom: 30px;} 

    #company_info .info_wrap .info_items .info_item {grid-template-columns: 1fr;}
    #company_info .info_wrap .info_items .info_item .info_icon {display: none;}

    [class~=company] [class~=ceo_msg] [class~=con_right] [class~=bold] {font-size:1.5em}
    [class~=brand100_area] {padding:80px 25px}
    [class~=brand100_area] p[class~=txt] {font-size:1.5em}
    [class~=timeline] [class~=timeline-content] ul li img {width:100%;height: auto}

    #company_cibi .ccb_wrap .cibi_logo .cibi_img {width: 100%;}

    #product_feature,
    #product_silver,
    #product_magnet,
    #product_dirt,
    #product_charcoal,
    #product_guide {background-size: 100%;}

    #product_guide .guide_wrap .guide_item {grid-template-columns: 1fr;}
    #product_ceramic .ceramic_wrap .ceramic_grid {grid-template-columns: 1fr;}

    #bo_gall .gall_li {width: 100%;}
}

@media (max-width:374px) {
    #gnb_mobile {width: 75vw;}
    #mobile_big_menu .gnb_1dli .gnb_1da {padding: 12px 0;}

    #footer [class~=cs_area]>* {float: none; width: 100%; text-align: center;}

    #index_brandstory .con_txt .con_box {grid-template-columns: 1fr;}
    #index_brandstory .con_txt .con_box .icon {display: none;}

    #container .sit_info tbody,
    #container .sit_info tr, 
    #container .sit_info tr th,
    #container .sit_info tr td {display: block; width: 100%;}
    #container .sit_info tr.tr_price th,
    #container .sit_info tr.tr_price td {padding-bottom: 10px;}
    #container .sit_ov_tbl td strong {line-height: normal;}
    #container .sit_info .tr_price td {padding-top: 0;}
    #container .sit_info tr:not(.tr_price) th {font-weight: 700; padding-top: 5px;}

    #company_hello .ch_wrap table th,
    #company_hello .ch_wrap table td, 
    #company_info .info_wrap table th, 
    #company_info .info_wrap table td {display: block; width: 100%; text-align: center}

    #sod_bsk_act .btn_submit {width: 100%;}
    #sod_bsk_act .btn01 {width: 100%; margin-bottom: 10px;}

    .od_prd_list .td_prd .prd_name {font-size: 1rem;}
    .sod_opt li {font-size: 0.8rem;}

    #mb_login #login_fs,
    #mb_login #mb_login_od_wr {padding: 20px 15px;}
}

@media (max-width:319px) {
    #container .sct_20 .sct_li {width: 100% !important;}

    #container #faq_sch .btn_submit {width: 45px;}
    #container #faq_sch .btn_submit>span {display: none;}
}