/* 
 * GitHub Repository Phishing Alert Appeal & Project Verification
이 페이지는 깃허브에서 발생한 피싱 경고 오탐지(False Positive)를 해명하고, 해당 코드가 순수한 학습 및 포트폴리오용임을 증명하기 위해 작성되었습니다.
This CSS is part of a student project. 
Any resemblance to real-world commercial sites is purely for design practice.
*/
/* common.css */
@font-face {
    font-family:'DecaydenceStraight';
    src: url('../font/DecaydenceStraight.otf');
}
/* ================================================================================================================ */
#wrap {max-width: 1760px; min-width: 320px; }
/* ----------------------------------------------------------- top_bnr */
#wrap .top_bnr_swiper {position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
#wrap .top_bnr_swiper .top_bnr {}
#wrap .top_bnr_swiper .top_bnr .swiper-wrapper {}
#wrap .top_bnr_swiper .top_bnr .swiper-wrapper .swiper-slide {text-align: center; background-color: #F5F8FF;}
#wrap .top_bnr_swiper .top_bnr .swiper-wrapper .swiper-slide a:nth-child(1) {
    font-size: 0.88rem; line-height: 32px; 
}
#wrap .top_bnr_swiper .top_bnr .close_btn {
    position: absolute; right:20px; top:50%; transform: translateY(-50%); z-index: 10;
}
#wrap .top_bnr_swiper .top_bnr .close_btn img {width: 100%;}
#wrap .top_bnr_swiper .top_bnr .swiper-wrapper .slide1 {}
#wrap .top_bnr_swiper .top_bnr .swiper-wrapper .slide2 {}
/* ==================================================================== header */
#wrap header {
    background-color: #fff;
    display: flex; flex-flow: row nowrap;
    justify-content: space-between; align-items: center;
    height: 80px; padding: 0 40px;
    position: fixed; z-index: 999;
    top: 32px; left: 0;
    width: 100%;
    border-bottom: 1px solid #eee; 
}
#wrap header h1 {width: 244px;}
#wrap header h1 a {}
#wrap header h1 a img {width: 100%;}

/* ==================================================================== gnb 메뉴 시작 */
#wrap header #gnb {}
#wrap header #gnb .gnb_depth1 {
    display: flex; flex-flow: row nowrap;
    justify-content: center;
}
#wrap header #gnb .gnb_depth1 > li {}
#wrap header #gnb .gnb_depth1 > li > a {
    display: block; font-weight: 500;
    line-height: 80px; padding: 0 20px;
}
/* hover 시 gnb depth2 열림 */
#wrap header #gnb .gnb_depth1 > li > .depth2_container {display: none;}
#wrap header #gnb .gnb_depth1 > li:nth-child(1):hover > .depth2_container {display: block;}
#wrap header #gnb .gnb_depth1 > li:nth-child(2):hover > .depth2_container {display: block;}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap {
    display: flex; flex-flow: row nowrap;
    justify-content: center; gap: 40px;
    position: absolute; top: 80px; left: 0;
    width: 100%; height: 300px;
    padding: 30px 0;
}
/* gnb depth2 */
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 {
    display: flex; flex-flow: row nowrap;
}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 > li {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 > li > a {
    display: inline-block; width: 120px; line-height: 52px; text-align: center;
    font-size: 0.88rem; font-weight: 500;
}
/* gnb depth3 */
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 > li > .gnb_depth3 {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 > li > .gnb_depth3 > li {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_depth2 > li > .gnb_depth3 > li > a {
    display: inline-block; width: 120px; line-height: 52px; text-align: center;
    font-size: 0.75rem;
}
/* gnb 배너 */
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a .bnr_txt {
    display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;
    background-color: #1e1e1e; padding: 4px 10px;
}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a .bnr_txt p {font-size: 0.69rem; color: #fff;}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a .bnr_txt img {}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a .bnr_img {width: 100%;}
#wrap header #gnb .gnb_depth1 > li > .depth2_container .depth2_wrap .gnb_bnr a p {font-size: 0.69rem;}
/* gnb_bg */
#wrap header #gnb .gnb_bg {
    background-color: #fff; width: 100vw; height: 300px;
    position: absolute; top: 80px; left: 0; z-index: -1;
}
/* ==================================================================== header_right */
#wrap header .header_right {
    display: flex; flex-flow: row nowrap;
    align-items: center; gap: 20px;
}
/* ==================================================================== lnb */
#wrap header .header_right .lnb {
    display: flex; flex-flow: row nowrap; gap: 20px;
}
#wrap header .header_right .lnb a {display: block; width: 24px;}
#wrap header .header_right .lnb a img {width: 100%;}
/* ==================================================================== 모바일 태블릿 gnb, lnb */
#wrap header .header_right .tm_menu {display: none;}
#wrap header .header_right .tm_nav {display: none;}
/* ==================================================================== 공통 콘텐츠 container 설정 + 타이틀 디자인 */
#wrap main .container {
    display: flex; flex-flow: row nowrap; 
    justify-content: space-between; gap: 80px;
}
#wrap main .container .contents {flex: 0 0 320px;}
#wrap main .container .contents .title {margin-bottom: 40px;}
#wrap main .container .contents .title p {font-weight: 500; line-height: 160%; color: #aaa;}
#wrap main .container .contents .title h1 {margin-bottom: 20px; font-family: 'DecaydenceStraight'; font-size: 1.50rem;}
/* ==================================================================== 공통 tab_manu 디자인 */
#wrap main .container .contents_more {
    display: flex; flex-flow: column nowrap; justify-content: space-between;
}
#wrap main .container .contents .contents_wrap {flex:0 0 320px;}
#wrap main .container .contents .contents_wrap .title {}
#wrap main .container .contents .contents_wrap .title p {font-weight: 500; color: #aaa;}
#wrap main .container .contents .contents_wrap .title h1 {margin-bottom: 20px; font-family: 'DecaydenceStraight'; font-size: 1.50rem;}
#wrap main .container .contents .contents_wrap .tab_menu {}
#wrap main .container .contents .contents_wrap .tab_menu li {}
#wrap main .container .contents .contents_wrap .tab_menu li a {
    display: flex; flex-flow: row nowrap;
    align-items: center; justify-content: space-between; 
    height: 64px; width: 100%; 
    padding: 10px 0; border-bottom: 1px solid #f9f9f9; 
}
#wrap main .container .contents .contents_wrap .tab_menu li a .tab {color: #aaa;}
#wrap main .container .contents .contents_wrap .tab_menu li a img {display: none;}
/* ==================================================================== 공통 tab_manu버튼에 hover 됐을 때 */
#wrap main .container .contents .contents_wrap .tab_menu li:hover a {border-bottom: 1px solid #1C4797;}
#wrap main .container .contents .contents_wrap .tab_menu li:hover a .tab {color: #1C4797;}
#wrap main .container .contents .contents_wrap .tab_menu li:hover a img {display: block;}
/* =========================================================================== active는 index.js에 있음. */
#wrap main .container .contents .contents_wrap .tab_menu li .active {}
#wrap main .container .contents .contents_wrap .tab_menu li .active .tab {}
#wrap main .container .contents .contents_wrap .tab_menu li .active .img {}
/* ================================================================================= moer :: 더보기 버튼 */
#wrap main .container .contents_more .more_btn a {
    display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;
    height: 64px; width: 100%; padding: 10px 20px; border: 1px solid #ddd;
}
/* ==================================================================== 공통 item list 디자인 */
#wrap main .container .item {}
#wrap main .container .item .swiper {}
#wrap main .container .item .swiper .swiper-wrapper {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_list {
    margin-bottom: 20px; position: relative; 
}
#wrap main .container .container .item .swiper .swiper-wrapper .swiper-slide .item_list .item_img {
    width: 100%; height: 340px; margin-bottom: 20px; 
}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_list .item_img img {width: 100%;}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_list .rank {
    position: absolute; top: 0; left: 0;
    width: 40px; height: 40px; 
    font-size: 1.13em; text-align: center; line-height: 40px;
    background-color: #1e1e1e; color: #fff;
}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_list .like {
    position: absolute; top: 16px; right: 16px;
}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_list .like img {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .artist_name {display: block; font-weight: 700; color: #555;}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .artist_name,
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info h1,
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info .price {font-size: 0.88rem; margin-bottom: 8px; font-weight: 600;}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info h1 {color: #555;}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info .price {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info .badge {}
#wrap main .container .item .swiper .swiper-wrapper .swiper-slide .item_info .info .badge span {
    display: inline-block; padding: 4px;
    font-size: 0.88rem; font-size: 0.69rem;
    color: #fff; background-color: #1e1e1e;
}
#wrap main .container .contents .item .swiper .swiper-wrapper .swiper-slide .item_info .info .badge span:last-child {background-color: #1C4797; margin-left: 8px;}
/* ========================================================================cta */
.floating_cta {
    position: fixed; right: 20px; bottom: 100px;
    display: flex; flex-flow: column nowrap;
    z-index: 999;
    border: 1px solid #eee;
}
.floating_cta a {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.8);
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: center;
    
}
.floating_cta .cta_history {background-image:  url(../images/common/history.svg);}
.floating_cta .cta_chat {background-image: url(../images/common/chat.svg);}
.floating_cta .page_up {background-image: url(../images/product/product_more.svg);}
.floating_cta .cta_chat:hover {background-image: url(../images/common/chat_on.svg);}
.floating_cta .cta_history:hover {background-image:  url(../images/common/history_on.svg);}
.floating_cta .page_up:hover {background-image: url(../images/common/page_up_acive.svg);}
.floating_cta span {height: 1px; width: 100%; background: #eee; }