@charset "utf-8";

#shopAbout{position: relative;padding: 30px 0 37px;margin-bottom: 120px;background-color: #f5f5f5;}
#shopAbout .inner{}
#shopAbout .row-2{display: flex;flex-direction: column;gap: 20px;}
#shopAbout .top{display: flex;align-items: center;gap: 14px;}
#shopAbout .top .fl-l{display: flex;align-items: center;justify-content: space-between;gap: 45px;width: 100%;padding: 27px 50px;border-radius: 13px;background-color: #fff;}
#shopAbout .top .tit-box{}
#shopAbout .top .tit-box h2{padding-bottom: 6px;font-family: var(--mainfont);font-size: 25px;font-weight: 700;color: var(--primary);line-height: 1.2;word-break:keep-all}
#shopAbout .top .tit-box p.desc{font-size: 16px;font-weight: 600;line-height: 1.4;word-break:keep-all}
#shopAbout .top ul{display: flex;gap: 45px;}
#shopAbout .top ul li{display: flex;align-items: center;gap: 16px;}
#shopAbout .top ul li .ic-box{flex-shrink:0;display: flex;align-items: center;justify-content: center;width: 70px;aspect-ratio: 1;background-color: #f5f5f5;border-radius: 13px;}
#shopAbout .top ul li .ic-box img{width: 100%;height: 100%;object-fit: cover;}
#shopAbout .top ul li .txt-box{}
#shopAbout .top ul li .txt-box dt{padding-bottom: 5px;font-size: 14px;font-weight: 700;color: #111;line-height: 1.2;word-break:keep-all}
#shopAbout .top ul li .txt-box dd{font-size: 17px;font-weight: 700;color: #111;line-height: 1.2;}

#shopAbout .top .fl-r{position: relative;max-width:377px;width: 100%;}
#shopAbout .top .fl-r .link-guide{display: flex;border-radius: 13px;overflow:hidden;border: 2px solid var(--primary);}
#shopAbout .top .fl-r .tool-tip{position: absolute;left: 20px;top: -15px;padding: 7px 12px;background-color: var(--primary);border-radius: 5px;font-family: var(--mainfont);font-size: 14px;font-weight: 600;color: #fff;line-height: 1.2;animation: bounce 1.2s infinite;transform-origin: bottom center;}
#shopAbout .top .fl-r .tool-tip::after{position: absolute;content:'';bottom: -9px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--primary)}
#shopAbout .top .fl-r .col-2{display: flex;gap: 20px;width: 100%;padding: 29px 33px 25px;background-color: #fff;}
#shopAbout .top .fl-r .ic-box{flex-shrink:0;display: flex;align-items: center;justify-content: center;width: 70px;aspect-ratio: 1;background-color: #f5f5f5;border-radius: 13px;}
#shopAbout .top .fl-r .ic-box img{}
#shopAbout .top .fl-r .txt-box{}
#shopAbout .top .fl-r .txt-box dt{padding-bottom: 8px;font-family: var(--mainfont);font-size: 18px;font-weight: 700;color: #111;line-height: 1.2;}
#shopAbout .top .fl-r .txt-box dd{font-size: 14px;font-weight: 600;line-height: 1.3;white-space: pre-line;color: #777;word-break:keep-all}
#shopAbout .top .fl-r .ic-arrow{flex-shrink:0;display: flex;align-items: center;justify-content: center;width: 36px;background-color: var(--primary);color: #fff;}
#shopAbout .top .fl-r .ic-arrow .hover-box{position: relative;display: flex;}
#shopAbout .top .fl-r .ic-arrow svg{flex-shrink: 0;transition:transform 0.2s}
/* #shopAbout .top .fl-r .ic-arrow svg:last-child{position: absolute;transform: translateX(-100%);}
#shopAbout .top .fl-r:hover .ic-arrow svg:first-child{transform: translateX(100%);}
#shopAbout .top .fl-r:hover .ic-arrow svg:last-child{transform: translateX(0);} */

#shopAbout .bottom{display: flex;align-items: center;gap: 15px;padding: 10px 15px;background-color: #fff;border-radius: 8px;}
#shopAbout .bottom h3{padding: 1px 25px;font-family: var(--mainfont);font-size: 15px;font-weight: 700;color: #fff;border-radius: 5px;background-color: #111;word-break:keep-all}
#shopAbout .bottom p.desc{flex: 1;font-size: 15px;font-weight: 600;color: #aaa;word-break:keep-all}
#shopAbout .bottom .guest-account{display: flex;align-items: center;gap: 15px;}
#shopAbout .bottom .guest-account dl{display: flex;align-items: center;gap: 15px;}
#shopAbout .bottom .guest-account dt{display: flex;align-items: center;justify-content: center;padding: 4px 9px;background-color: #f5f5f5;border: 1px solid #e1e1e1;border-radius: 5px;font-size: 14px;font-weight: 500;line-height: 1.2;color: #777;}
#shopAbout .bottom .guest-account dd{font-family: var(--mainfont);font-size: 16px;font-weight: 600;color: #111;}

#shopAbout .bottom .link-webhard{display: flex;align-items: center;justify-content: center;width: 34px;aspect-ratio: 1;background-color: #f5f5f5;border-radius: 5px;transition:background-color 0.2s}
#shopAbout .bottom .link-webhard svg{width: 16px;height: 16px;stroke: #777;transform: translateY(-1px);transition:stroke 0.2s}
#shopAbout .bottom .link-webhard:hover{background-color: var(--primary);}
#shopAbout .bottom .link-webhard:hover svg{stroke:#fff}
@keyframes bounce {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-2.5deg); } /* 첫 번째 흔들림 (좌) */
    20% { transform: rotate(2.5deg); }  /* 첫 번째 흔들림 (우) */
    30% { transform: rotate(-2.5deg); } /* 두 번째 흔들림 (좌) */
    40% { transform: rotate(2.5deg); }  /* 두 번째 흔들림 (우) */
    50% { transform: rotate(0deg); }   /* 제자리로 복귀 */
    100% { transform: rotate(0deg); }  /* 100%까지 멈춰서 딜레이 효과 */
}

/* 반응형 [s] */
@media (max-width:1600px){
    #shopAbout{margin-bottom: 100px;}
}
@media (max-width:1400px){
    /* #shopAbout{padding: 30px 20px 37px;} */
    #shopAbout{padding: 30px 0;}
    #shopAbout .row-2{gap: 14px;}
    #shopAbout .top .tit-box h2{font-size: 22px;}
    #shopAbout .top .fl-l{gap: 30px;padding: 25px 30px;}
    #shopAbout .top ul li .ic-box{width: 65px;}
    #shopAbout .top .fl-r{max-width:320px}
    #shopAbout .top .fl-r .col-2{padding: 27px 22px 23px;}
    #shopAbout .top .fl-r .ic-arrow{width: 30px;}
    #shopAbout .top .fl-r .ic-box{width: 60px;}
    #shopAbout .top .fl-r .ic-box img{width: 40px;}
    #shopAbout .top .fl-r .txt-box dt{font-size: 17px;}
    #shopAbout .top .fl-r .tool-tip{left: 7px;top: -18px;font-size: 13px;}
    #shopAbout .bottom h3{font-size: 14px;}
    #shopAbout .bottom p.desc{font-size: 14px;}
    #shopAbout .bottom .guest-account dt{font-size: 13px;}
    #shopAbout .bottom .guest-account dd{font-size: 14px;}
    #shopAbout .bottom .link-webhard{width: 30px;}
    /* #shopAbout .bottom .link-webhard svg{width: 14px;height: 14px;} */
    /* 
    #shopAbout .top ul li .ic-box{width: 65px;}
    #shopAbout .top .fl-r .ic-box{width: 60px;}
    #shopAbout .top .fl-r .ic-box img{width: 40px;} */
}
@media (max-width:1200px){
    #shopAbout .top .tit-box{text-align: center;}
    #shopAbout .top .fl-l{flex-direction: column;align-items: center;gap: 20px;}
    #shopAbout .top .tit-box h2{padding-bottom: 4px;font-size: 20px;}
    #shopAbout .top .tit-box p.desc{font-size: 15px;}
    #shopAbout .top ul li .ic-box{width: 60px;}
    #shopAbout .top .fl-r{max-width:430px}
    #shopAbout .top .fl-r .col-2{flex-direction: column;align-items: center;gap: 12px;padding: 23px 22px 21px;text-align: center;}
    #shopAbout .top .fl-r .tool-tip{left: 152px;}
    #shopAbout .top .fl-r .ic-box{width: 55px;}
    #shopAbout .top .fl-r .ic-box img{width: 35px;}
}
@media (max-width:1024px){
    #shopAbout .top .fl-l{padding: 25px 20px;border-radius:10px}
    #shopAbout .top .tit-box h2{font-size: 18px;}
    #shopAbout .top ul li .ic-box{width: 55px;}
    #shopAbout .top ul li .txt-box dd{font-size: 16px;}
    #shopAbout .top .fl-r{max-width:300px}
    #shopAbout .top .fl-r .col-2{gap: 11px;}
    #shopAbout .top .fl-r .tool-tip{left: 88px;}
    #shopAbout .top .fl-r .link-guide{border-radius:10px}
    #shopAbout .top .fl-r .txt-box dt{font-size: 16px;}
    #shopAbout .top .fl-r .ic-arrow{width: 28px;}
    #shopAbout .top .fl-r .ic-box{width: 50px;}
    #shopAbout .top .fl-r .ic-box img{width: 32px;}
}
@media (max-width:890px){
    #shopAbout{padding: 20px 0;}
#shopAbout .top{flex-direction: column;gap: 30px;}
#shopAbout .top .fl-r{max-width: none;}
#shopAbout .top .fl-r .tool-tip{left: 48%;}
#shopAbout .top .fl-r .txt-box dd{white-space: nowrap;}

#shopAbout .bottom{flex-direction: column;gap: 6px;padding: 20px; border-radius:10px}

#shopAbout .bottom .guest-account{gap: 20px;padding-top: 6px;}
#shopAbout .bottom .guest-account dl{gap: 12px;}
#shopAbout .bottom .link-webhard{width: 28px;}

@keyframes bounce {
    0% { transform: translateX(-50%) rotate(0deg); }
    10% { transform: translateX(-50%) rotate(-2.5deg); } /* 첫 번째 흔들림 (좌) */
    20% { transform: translateX(-50%) rotate(2.5deg); }  /* 첫 번째 흔들림 (우) */
    30% { transform: translateX(-50%) rotate(-2.5deg); } /* 두 번째 흔들림 (좌) */
    40% { transform: translateX(-50%) rotate(2.5deg); }  /* 두 번째 흔들림 (우) */
    50% { transform: translateX(-50%) rotate(0deg); }   /* 제자리로 복귀 */
    100% { transform: translateX(-50%) rotate(0deg); }  /* 100%까지 멈춰서 딜레이 효과 */
}
}
@media (max-width:768px){
        #shopAbout{margin-bottom: 60px;}

}
@media (max-width:520px){
    #shopAbout .top .fl-l{gap: 15px;padding: 20px;}
    #shopAbout .top ul{flex-direction: column;gap: 12px;}
    #shopAbout .top .tit-box h2{font-size: 16px;}
    #shopAbout .top .tit-box p.desc{font-size: 14px;}
    #shopAbout .top ul li .txt-box dd{font-size: 15px;}
    #shopAbout .top ul li .ic-box{width: 50px;}
    #shopAbout .top .fl-r .tool-tip{left: 47%;top: -16px;font-size: 12px;}
    #shopAbout .top .fl-r .tool-tip::after{bottom: -7px;}
    #shopAbout .top .fl-r .ic-arrow{width: 26px;}
    #shopAbout .top .fl-r .ic-arrow svg{width: 20px;height: 20px;}
    #shopAbout .top .fl-r .txt-box dt{padding-bottom: 6px;font-size: 15px;}
    #shopAbout .top .fl-r .txt-box dd{white-space:normal}
    #shopAbout .top .fl-r .ic-box{width: 45px;}
    #shopAbout .top .fl-r .ic-box img{width: 27px;}

    #shopAbout .bottom{gap: 5px;}
    #shopAbout .bottom h3{font-size: 13px;}
    #shopAbout .bottom p.desc{font-size: 13px;text-align: center}
    #shopAbout .top .fl-r .col-2{padding: 23px 20px 18px;}
#shopAbout .bottom .guest-account dt{word-break:keep-all;text-align: center;font-size: 12px;}
    #shopAbout .bottom .guest-account dd{font-size: 12px;}
}
@media (max-width:480px){
            #shopAbout{margin-bottom: 40px;}

}
@media (max-width:390px){
    #shopAbout .bottom .guest-account{flex-direction: column;gap: 8px;}
    #shopAbout .bottom .guest-account dt{width: 85px;}
    #shopAbout .bottom .link-webhard{display: none;}
}