@charset "utf-8";
@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Serif:wght@100..900&family=Roboto:wght@100..900&display=swap');

html,body {   font-family: 'Roboto','Noto Serif', sans-serif;    font-size: 16px;   color:#333; width:100vw; height:auto;}
.fixd_btn{
    width:4vw; height:10vh; position:fixed; bottom:100px; right: 50px;
    background:url("../imgs/give.png") no-repeat center center;
    background-size:contain; display: none; z-index:99999;
}
#main_header{width:100vw; height:auto; position:fixed; top:0; z-index:9999; background:#fff;}
#main_header>.header_top{display: flex; width:100%; align-items: center; justify-content:space-between;}
#main_header>.header_top>h1>a{font-size:2rem; color:#09B200; font-weight: bold;}
#main_header > .header_top > .toggle_btn {
    margin-right:10px; z-index:9999999;
    width: 32px;  height: 32px;   background-color: transparent;   border: 0px none;   padding: 6px 0;
    display: flex;   flex-direction: column;   justify-content: space-between;   align-items: center;
    }
    #main_header > .header_top > .toggle_btn > span {
    display: block;  width: 28px;   height: 2px;   background: #000;   border-radius: 2px;
    transition: background-color .2s;
    }
#main_header>.header_top>.tree_img{
    margin-left:10px;
    width:60px; height:80px;
    background:url("../imgs/give.png") no-repeat center center;
    background-size:contain;
}
#main_header>.header_top>.tree_img>a{display: block; width: 100%; height: 100%;}
#main_header>.header_top>.sns_btn{display: none;}
#main_header>.header_top>.sns_btn>ul{display: flex; align-items: center; justify-content:center; gap:10px;}
#main_header>.header_top>.sns_btn>ul>li:nth-child(1){
    width: 30px; height: 30px; text-indent:-9999px; 
    background:url("../imgs/insta.jpg") no-repeat center center; border-radius:50%;
}
#main_header>.header_top>.sns_btn>ul>li:nth-child(2){
    width: 30px; height: 30px; text-indent:-9999px; 
    background:url("../imgs/face.jpg") no-repeat center center; border-radius:50%;
}
#main_header>.header_top>.sns_btn>ul>li:nth-child(3){
    width: 30px; height: 30px; text-indent:-9999px; 
    background:url("../imgs/blog.jpg") no-repeat center center; border-radius:50%;
}
#main_header>.header_top>.sns_btn>ul>li:nth-child(4){
    width: 30px; height: 30px; text-indent:-9999px; 
    background:url("../imgs/youtub.jpg") no-repeat center center; border-radius:50%;
}
#main_header>.header_top>.sns_btn>ul>li:nth-child(5){
    width: 30px; height: 30px; text-indent:-9999px; 
    background:url("../imgs/been.jpg") no-repeat center center; border-radius:50%;
}
.gnb_wrapper{width:100vw; height:100vh; margin-top:80px; position:fixed; z-index:9999; left:-100vw;
    transition: left 0.3s ease, opacity 0.3s ease;
}
.gnb_wrapper.active{left:0;}
.gnb_wrapper>.gnb{background:#F3F3F3; padding:10px; height:100%; position:relative;}
.gnb_wrapper>.gnb>.close_btn{width: 20px; height: 20px; position:absolute; top:10px; right:10px; display: none;}
.gnb_wrapper>.gnb>.close_btn>img{width:100%; height:100%;}
.gnb_wrapper>.gnb>ul{display: flex; flex-direction:row; flex-wrap: wrap; gap:20px; }
.gnb_wrapper>.gnb>ul>li{width:111px; align-items: center; justify-content: center; text-align: center; margin-bottom:15px;}
.gnb_wrapper>.gnb>ul>li>a{display: block; font-weight: 900; color:#000; font-size:0.99rem;}
.gnb_wrapper>.gnb>ul>li>.highlight-link{color:#00C458}
.gnb_wrapper>.gnb>ul>li>.sub{margin-top:10px;}
.gnb_wrapper>.gnb>ul>li>.sub>ul>li{margin-bottom:15px;}
.gnb_wrapper>.gnb>ul>li>.sub>ul>li>a{color:#000; font-size: 0.855rem;}


#slide_container{width:100%; height:auto; padding-top:80px;}
#slide_container>.swiper{width:100%;height:100%;}
#slide_container>.swiper>.swiper-wrapper{width:100%; height:100%;}
#slide_container>.swiper>.swiper-wrapper>.swiper-slide img{width:100%; height:100%; object-fit: cover;}
.swiper-button-next, .swiper-rtl .swiper-button-prev{display: none;}
.swiper-button-prev, .swiper-rtl .swiper-button-next{display: none;}

.give{width:100vw; height:auto; background: #0A49BD; padding:10px 0px;}
.give>form{width: 100%; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom:20px;}
.give>form>.radio_wrapper{
    width:100vw; height:120px; display: flex; flex-direction: row; flex-wrap:wrap; gap:30px; justify-content: center;
    margin:20px 0px;
}
.give>form>.radio_wrapper>label{
    font-size:16px; font-weight: bold; height:auto; display: flex; align-items: center;
    padding:5px 30px; border:1px solid #fff; color:#fff; background:transparent;}
.give>form>.radio_wrapper>label.active{background:#fff; color:#0A49BD;}
.give>form>.radio_wrapper>label:nth-child(4){padding:5px 25px;}
.give>form>.radio_wrapper>label>input{display: none;}
.give>form>label{width:40%; height:40px; margin-right:20px; /* margin-left:-30px; */}
.give>form>label>input{width:100%; height:100%; text-align: center; font-weight: bold; font-size:16px;}
.give>form>button{
    width:130px; border:1px solid #0A49BD; border-radius: 30px;
    background:#00C458; color:#fff; font-weight: bold; font-size:16px;
}
.give>p{width: 100vw; font-size: 1rem; font-weight: bold; color:#fff; padding:5px 10px; display: flex; 
    flex-wrap: wrap; justify-content: center;}
.give>p>span{color:#00C458;}

#necklace_wrap{width:100vw; margin:50px 0px;}
#necklace_wrap>h2{width:100%; text-align: center; margin-bottom: 30px; font-weight: 700; font-size: 1.15rem;}
#necklace_wrap>h2>span{color:#00DE3B;}
#necklace_wrap>.neck>.necklace_img{position:relative; margin-bottom:30px;}
#necklace_wrap>.neck>.necklace_img>img:nth-child(1){width:80%; margin:0 auto;}
#necklace_wrap>.neck>.necklace_img>img:nth-child(2){width:30%; position:absolute; bottom:20px; right:10px;}

#necklace_wrap>.neck>.necklace_info{width:100%;}
#necklace_wrap>.neck>.necklace_info>h2{
    width:60%; height:auto; margin:20px auto; background:#05CA5E; padding:15px 30px;
    text-align: center; font-size: 1.15rem; color:#fff; font-weight: bold;
}
#necklace_wrap>.neck>.necklace_info img{width:80%; margin:20px auto;}
#necklace_wrap>.neck>.necklace_info>p{
    width:100%; padding:5px 15px; font-size: 0.9rem; text-align: center; font-weight: 600;
    margin-bottom:10px; font-family:'Sans-serif';
}
#necklace_wrap>.neck>.necklace_info>p:nth-child(6){font-size: 1rem; font-weight: 800; color:#05CA5E;}

#content_wrap{width:100%; display: flex; flex-direction: row; flex-wrap: wrap; gap:10px; margin-bottom:50px;}
#content_wrap>a{
    width:328px; height: 384px; padding:20px; display: block; margin:0 auto;
    border:1px solid #D5D5D5; position:relative;
}
#content_wrap>a>.plus_btn{
    width: 42px; height: 42px; position:absolute; bottom:0; right:0; border-bottom:0px none; border-right:0px none;
    background:url("../imgs/plus.png") no-repeat center center
}
#content_wrap>a>div{margin:0 auto;}
#content_wrap>a>div>p{text-align: center; color:#000; font-size: 1.1rem;}
#content_wrap>a>div>h3{text-align: center; padding:30px 0; font-size: 1.6rem; font-weight: bold; color:#000;}
#content_wrap>a>div>img{width:100%;}

#info_wrap>.info_img{width:100%; margin-bottom:20px;}
#info_wrap>.info_img>a{display: block; width:90%; margin:5px auto;}
#info_wrap>.info_img img{width:100%;}
#info_wrap>.info{width:100vw;}
#info_wrap>.info>.info_top{width:90%; display: flex; justify-content: space-between; margin:0 auto;}
#info_wrap>.info>.info_top>h4{
    width:90px; height:30px; background:#AFF7FF;padding:10px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
#info_wrap>.info>.info_top>a{
    font-size: 12px; color:#979797;
    display: flex; align-items: center; justify-content: center;
}
#info_wrap>.info>ul{padding:15px 25px; border-top:1px solid #ccc; display: flex; flex-direction: column; gap:10px;}
#info_wrap>.info>ul>li{border-bottom:1px solid #ccc; padding-left:3%;}
#info_wrap>.info>ul>li>a{display: flex; width:100%; height:auto; gap:20px; align-items: center; margin: 0 auto 5px auto;}
#info_wrap>.info>ul>li>a>span{display: flex; flex-direction:column; align-items: center; justify-content: center; color:#000;}
#info_wrap>.info>ul>li>a>span>p:nth-child(2){font-size: 0.75rem; }
#info_wrap>.info>ul>li>a>span:nth-child(2){
    width:75%; color:#000; font-weight: 500;
    font-size: 0.805rem; display: flex; align-items: center; justify-content: center;
}
#info_wrap>.info>ul>li img{width: 90%;}

#main_footer{
    background:#CDFFCD; padding:40px 10px; gap:20px;
    width:100vw; height:auto; display: flex; flex-direction: column; justify-content: center; align-items: center;

}
#main_footer>address{
    color:#6C6C6C;
    width:90%; font-size: 14px;
    text-align: center;
}



@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
    .gnb_wrapper{width:80vw;}
    .gnb_wrapper>.gnb{padding:20px;}
    .gnb_wrapper>.gnb>ul{gap:40px; margin-top:30px;}
    .gnb_wrapper>.gnb>ul>li{margin-left:5px;}
    .gnb_wrapper>.gnb>ul>.highlight{display: flex; width:100%; gap:50px;}
    .gnb_wrapper>.gnb>ul>.highlight>.sub>ul{display: flex; gap:40px;}
    .gnb_wrapper>.gnb>.close_btn{display: block;}

    #info_wrap>.info_img img{height:170px;}



    }



    @media (min-width: 1280px) {
    body {
        overflow-x:hidden;
    }
    #main_header{height:60px;}
    #main_header>.header_top{height:100%;}
    #main_header>.header_top>.tree_img{display: none;}
    #main_header > .header_top{width:100vw; display:block;}
    #main_header > .header_top>h1{display: flex; align-items: center; justify-content: center; height:100%;}
    #main_header > .header_top > .toggle_btn{display: none;}
    #main_header > .header_top > .sns_btn{display: block; position:absolute; right:40px; bottom:10px;}
    .fixd_btn{display: block;}

    .gnb_wrapper{left:0; width:100vw; height:auto; margin-top:60px;}
    .gnb_wrapper>.navbg{width:100vw; height:45vh; background:#F5F5F5; display: none;}
    .gnb_wrapper>.navbg.active{display: block;}
    .gnb_wrapper>.gnb{padding:0px; /* background:none; */ height:auto;}
    .gnb_wrapper>.gnb>.close_btn{display: none;}
    .gnb_wrapper>.gnb>ul{
        margin:0; width:100%; justify-content: center; height:100%; height:40px; gap:25px;
        background:#fff; border-top:1px solid #000; border-bottom:1px solid #000;
    }
    .gnb_wrapper>.gnb>ul>li{margin-top:5px; width:120px;}
    .gnb_wrapper>.gnb>ul>li>a{font-size: 17px; font-weight:600;}
    .gnb_wrapper>.gnb>ul>.highlight{margin-top:5px; height:auto; display: block; width:120px;}
    .gnb_wrapper>.gnb>ul>.highlight>.sub>ul{display: block;}
    .gnb_wrapper>.gnb>ul>li>.sub{display: none;}
    .gnb_wrapper>.gnb>ul>li>.sub.active{display: block;}
    .gnb_wrapper>.gnb>ul>li>.sub>ul>li{margin-top:25px;}

    
    #necklace_wrap>.neck>.necklace_img{width:45vw;}
    #necklace_wrap>.neck{display: flex; justify-content: center; gap:10px;}
    #necklace_wrap>.neck>.necklace_img>img:nth-child(2){position:static; width:80%; margin:0 auto; height:300px; margin-top:40px;}
    #necklace_wrap>.neck>.necklace_info{width:45vw;}
    
    #content_wrap{width:90vw; margin:0px auto;}
    #content_wrap>a:hover .plus_btn{background-image: url("../imgs/plus_btn.png");}
    #content_wrap>a:hover{border:1px solid #05CA5E;}

    #info_wrap{display: flex; align-items: center; justify-content: center; gap: 30px; margin-top:50px;}
    #info_wrap>.info{width:45vw; height:100%;}
    #info_wrap>.info>ul{gap:0px;}
    #info_wrap>.info>ul>li{padding:15px;}
    #info_wrap>.info>ul>li>a{gap:30px;}
    #info_wrap>.info>ul>li>a>span:nth-child(2){font-size: 15px;}
    #info_wrap>.info>ul>li>a>span:hover{margin-left:15px;}
    #info_wrap>.info_img{width:45vw;}
    #info_wrap>.info_img>a:hover{margin-right:15px;}
    #info_wrap>.info_img img{width:100%; height:120px;}
    
    }