@charset "UTF-8";
@media (max-width: 1400px) {
    /* Qna */
    #sub-qna .sec-qna .flower-sway {left: 0px;}
}
@media (max-width: 1200px) {
    /* Sub */
    .inner {width: 100%;padding: 90px 20px 200px}
    /* Qna */
    #sub-qna .sec-qna .flower-sway {left: 20px;}
    /* Footer */
    #footer .f-wrap {width: 100%;padding: 0 20px;}
}
@media (max-width: 950px) {
    /* Header */
    #header h1 img {width: 180px;}
    #header .gnb .depth1 {width: 100%;}
    /* About */
    #sub-about .sec-about .inner {width: 100%;padding: 50px 20px;}
    #sub-about .sec-about .sub-tit {font-size: 34px;}
    #sub-about .sec-about .deco {height: 80px;margin: 10px 0;}
    #sub-about .sec-about p {padding-bottom: 20px;font-size: 15px;line-height: 1.8;}
    /* Product */
        #sub-product .sec-product .inner {width: 100%;padding: 50px 20px 150px;}
    /* Footer */
    #footer .quick-menu {width: 48px;height: 48px;}
}
@media (max-width: 860px) {
    /* Main */
    #main .visual img.m_show {display: block;}
    #main .visual img.m_hide {display: none;}
    /* Frame1 */
    #sub-frame1 .sec-frame1 ul li {width: 50%;}
    #sub-frame1 .sec-frame1.detail .inner {gap: 50px;}
    /* Product */
    #sub-product .sec-product .product-bottom .thumb_img {width: 50%;padding-top: 50%;}
    #sub-product .sec-product .product-bottom p {padding-left:20px;line-height: 1.5;}
    /* Footer */
    #footer .f-wrap .f-top .f-sns {position: static;margin-bottom: 20px;margin-left: -7px;}
    #footer .f-wrap .f-top .footer-logo,#footer .f-wrap .f-top .f-info {margin-bottom: 13px;}
}
@media (max-width: 768px) {
    /* Header */
    #header h1 img {width: 170px;}
    /* Header / gnb mobile */
    #header .gnb .btn-gnb {display: block;}
    #header .gnb .depth1 {display: none;position:absolute;left: auto;right: 0;top: 0;z-index: 10;flex-direction: column;justify-content: flex-start;width: 250px;height: 100vh;padding: 60px 0;background-color: var(--color-white);transform: translateX(0);}
    #header .gnb .depth1 li {width: 100%;text-align:left;}
    #header .gnb .depth1 > li > a {padding: 6px 30px;font-weight: 700;text-align:left;font-size: 25px;}
    #header .gnb .depth1 > li:hover > a {text-decoration: none;}
    #header .gnb .depth1 li.active > a {padding-bottom: 0;}
    /* Sub */
    .inner {width: 100%;padding: 70px 20px 150px;}
    .sub-tit {font-size: 48px;}
    /* frame2 */
    #sub-frame2 .sec-frame2 .inner {padding: 220px 0;}
    #sub-frame2 .sec-frame2 p {font-size: 17px;}
    /* Product */
    #sub-product .sec-product .product-info > li {flex-direction: column;}
    #sub-product .sec-product .product-info > li:last-child {margin-bottom: 60px;}
    #sub-product .sec-product .product-info > li .product-info-tit {width: 100%;font-size: 22px;}
    #sub-product .sec-product .product-info > li div {width: 100%;}
    #sub-product .sec-product .product-info > li dl {flex-direction: column;margin-bottom: 35px;}
    #sub-product .sec-product .product-info > li dl dt {width: 100%;}
    #sub-product .sec-product .product-info > li dl dd {padding-top: 10px;margin-left: 20px;}
    #sub-product .sec-product .product-info > li .product-info-tit .price {padding: 0px 0 30px;color: var(--color-main);}
    /* Qna */
    #sub-qna .sec-qna .sub-tit {padding-bottom: 20px;}
    #sub-qna .sec-qna .qna-question {padding: 20px 40px 20px 55px;background-position: 10px 17px;background-size: 30px 30px;}
    #sub-qna .sec-qna dl.active .qna-answer {padding: 20px 50px 20px 70px;}
    #sub-qna .sec-qna .flower-sway .flower-left {width: 45px;}
    #sub-qna .sec-qna .flower-sway .flower-right {right: -53px;bottom: 5px;width: 35px;}
    /* Footer */
    #footer {padding: 30px 0;}
    #footer .f-wrap .f-top .f-info {flex-direction: column;}
    #footer .f-wrap .f-top .f-info span {line-height: 1.3;}
    #footer .f-wrap .f-top .f-info span::after {display: none;}
    #footer .f-wrap .f-top .f-sns li a {padding: 0 10px;}
    #footer .f-wrap .f-top .f-sns li a img {height: 23px;}
    #footer .quick-menu {right: 7px;}
}
@media (max-width: 570px) {
    /* Frame1 */
    #sub-frame1 .sec-frame1 ul li {width: 100%;margin-bottom: 30px;}
    #sub-frame1 .sec-frame1 ul li p {padding-top: 5px;}
    /* Product */
    #sub-product .sec-product .product-info {margin-bottom: 50px;}
    #sub-product .sec-product .product-bottom {flex-direction: column;align-items: flex-start;}
    #sub-product .sec-product .product-bottom .thumb_img {width: 100%;padding-top: 50%}
    #sub-product .sec-product .product-bottom p {padding-left: 0;padding-top: 20px;font-size: 16px;}
}