@charset "utf-8";


/* main visual */ 
#main_visual{
    background-color: white;
}
.bx1>div{
    height: 515px;
    background-repeat: no-repeat;
    background-position: center center;
}
.bx_1{
    background-color: #f4f4f6;
    background-image: url(../img/main_visual_01.jpg);
}
.bx_2{
    background-color: #e3e3e1;
    background-image: url(../img/main_visual_02.jpg);
}
.bx_3{
    background-color: #0031ed;
    background-image: url(../img/main_visual_03.jpg);
}
.bx_3>.text_box{
    color: white;
}
.bx_4{
    background-color: #7cab8c;
    background-image:  url(../img/main_visual_04.jpg);
}
.bx_5{
    background-color: #8a27f9;
    background-image:  url(../img/main_visual_05.jpg);
}

/* main visual text */
.text_box{
    padding-top: 182px;
    padding-left: 140px;
}
.text_box>p{
    opacity: 0;
    transform: translateY(100%);
    transition: 1s;
    line-height: 1.2;
    font-size: 5rem;
    font-weight: 100;
    padding-bottom: 48px;
}
.text_box>p.on{
    opacity: 1;
    transform: translateY(0%);
}
.text_box>p>strong{
    font-weight: 500;
}
.text_box>span{
    opacity: 0;
    transition: 1s 0.5s;
    font-size: 2rem;
    font-weight: 500;
}
.text_box>span.on{
    opacity: 1;
}
.bx_4,.bx_5>div{
    color: white;
}


/* main content 1 */
#main_content1{
    padding: 70px 0px 70px;
    background: white;
}
#main_content1>.best_goods_area{
    opacity: 0;
    margin-bottom: 70px;
    transform: translateY(20%);
    transition: 1s;
}
#main_content1>.best_goods_area.on{
    opacity: 1;
    transform: translateY(0%);
}
#main_content1>section>h2{
    position:relative;
    padding-top: 15px;
    margin-bottom: 15px;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    background: url(../img/img_crown.png) no-repeat 50% 0%;
}
#main_content1>.new_goods_area{
    opacity: 0;
    margin-bottom: 70px;
    transform: translateY(20%);
    transition: 1s;
}
#main_content1>.new_goods_area.on{
    opacity: 1;
    transform: translateY(0%);
}
#main_content1>.new_goods_area>h2{
    position:relative;
    padding-top: 0px;
    margin-bottom: 35px;
    background: none
}
#main_content1>section>h2>span{
    position:relative;
    top: -14px;
    font-size: 1.7rem;
    font-weight: 300;
    color: #808080;
    padding:0px 20px;
    background:white;
}

/* main content side border */
#main_content1>.best_goods_area>h2:before{
    content:'';
    position:absolute;
    top:79px;
    left:10px;
    width:calc(100% - 20px);
    height:1px;
    background:#d3d3d3;
}
#main_content1>.new_goods_area>h2:before{
    content:'';
    position:absolute;
    top:64px;
    left:10px;
    width:calc(100% - 20px);
    height:1px;
    background:#d3d3d3;
}

/* main content common style */
#main_content1>section>ul>li{
    float: left;
    width: 25%;
    padding: 0px 10px;
    margin-bottom: 40px;
}
#main_content1>section>ul>li>.img_box{
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    border-radius: 25px;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid #d3d3d3;
}
#main_content1>section>ul>li>.img_box:hover,
#main_content1>section>ul>li>.img_box:focus{
    border: 1px solid #76d622;
}
#main_content1>section>ul>li>.img_box>.sub{
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: -60px;
    padding: 12px 0px;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
    cursor: default;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px -5px 9.7px 0.3px rgba(0, 0, 0, 0.05);
}
#main_content1>section>ul>li>div>div>a{
    text-indent: -9999px;
    display: inline-block;
    width: 40px;
    height: 40px;
    transition: 0.3s;

}
/* button image */
#main_content1>section>ul>li>div>div>a:nth-of-type(1){
    background: url(../img/btn_heart.png);
}
#main_content1>section>ul>li>div>div>a:nth-of-type(2){
    margin: 0px 16px;
    background: url(../img/btn_cart.png);
}
#main_content1>section>ul>li>div>div>a:nth-of-type(3){
    background: url(../img/btn_newtab.png);
}
#main_content1>section>ul>li>div>div>a:nth-of-type(1):hover,
#main_content1>section>ul>li>div>div>a:nth-of-type(1):focus{
    background: url(../img/btn_heart_hover.png);
}
#main_content1>section>ul>li>div>div>a:nth-of-type(2):hover,
#main_content1>section>ul>li>div>div>a:nth-of-type(2):focus{
    background: url(../img/btn_cart_hover.png);
}
#main_content1>section>ul>li>div>div>a:nth-of-type(3):hover,
#main_content1>section>ul>li>div>div>a:nth-of-type(3):focus{
    background: url(../img/btn_newtab_hover.png);
}
#main_content1>section>ul>li>.img_box:hover>.sub,
#main_content1>section>ul>li>.img_box:focus>.sub{
    opacity: 1;
    bottom: 0px;
}

/* 전체보기 버튼 */
#main_content1>section>.more{
    margin: 20px 0px 10px;
    text-align: center;
}
#main_content1>section>.more>a{
    display: inline-block;
    color: #76d622;
    border: 1px solid #76d622;
    border-radius: 25px;
    padding: 10px 16px;
    transition: 0.3s;
}
#main_content1>section>.more:hover>a,
#main_content1>section>.more:focus>a{
    color: white;
    background-color: #76d622;
}

/* 제품 가격 정보 */
#main_content1>section>ul>li>.pro_info>a>.pro_sub_title{
    display: block;
    padding: 0px 10px;
    margin-bottom: 25px;
}
#main_content1>section>ul>li>.pro_info>a>.pro_price>.pro_price_now{
    margin-right: 6px;
}
.pro_info{
    position: relative;
}
.pro_title{
    font-size: 2rem;
    font-weight: 800;
    padding: 0px 10px;
    min-height:33px;
}
.pro_sub_title{
    font-size: 1.4rem;
}
.pro_price{
    display: block;
    padding: 0px 10px;
    margin-bottom: 8px;
}
.pro_percent{
    color: #f10000;
    font-size: 2rem;
    font-weight: 700;
    margin-right: 6px;
}
.pro_price_now{
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
}
.pro_info>a:after{
    content: '';
    position: absolute;
    width: 280px;
    height: 1px;
    top: 123px;
    left: 0px;
    background: #d3d3d3;
}
.pro_bottom {
    padding: 15px 10px 0px 10px;
}
/* 별점 및 무료배송 */
.rating{
    float: left;
    font-size: 0px;
    margin-top: 8px;
}
.rating>span:last-child{
    font-size: 1.2rem;
    color: #808080;
}
.rating>span>img{
    margin-right: 6px;
    vertical-align: top;
}
.text_bullet{
    float: right;
    color: #76d622;
    font-size: 1.4rem;
    padding: 4px 10px;
    /* margin-top: 10px; */
    font-weight: 400;
    border: 1px solid #76d622;
    background: white;
}

/* 중간 배너 */
#main_bnr{
    background: white;
}
#main_bnr>div{
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease-out;
}
#main_bnr>div.on{
    opacity: 1;
    transform: translateY(0%);
}
.bx3>div{
    height: 170px
}
.bx3>div:nth-of-type(1){
    background: #3ca4a1 url(../img/main_bnr_01.jpg) center no-repeat;
}
.bx3>div:nth-of-type(2){
    background: #dbe3d6 url(../img/main_bnr_02.jpg) center no-repeat;
}
.bx3>div:nth-of-type(3){
    background: #00cdd3 url(../img/main_bnr_03.jpg) center no-repeat;
}
.bnr_txt_box{
    padding-top: 56px;
    padding-left: 250px;
}
.bnr_txt_box>a>p{
    display: inline-block;
    font-size: 2rem;
    line-height: 1.3;
}
.bnr_txt_box>a>p>strong{
    font-size: 3rem;
    font-weight: 700;
}
.bx3>div:nth-of-type(1)>div>a>p{
    color: white;
}
.bx3>div:nth-of-type(1)>div>a>p>strong>span{
    font-weight: 700;
    color: #fecb34;
}
.bx3>div:nth-of-type(2)>div>a>p{
    color: #222222; 
}
.bx3>div:nth-of-type(2)>div>a>p>strong{
    color: #3d6a65;
}
.bx3>div:nth-of-type(3)>div>a>p{
    color: white; 
}

/* main content 2 산지직송*/
#main_content2{
    background: #f7f7f7;
    padding: 100px 0px 88px;
}
.direct_goods_area{
    opacity: 0;
    padding: 0px 10px;
    transform: translateY(100%);
}
.direct_goods_area.on{
    opacity: 1;
    transition: 1s;
    transform: translateY(0%);
}
#main_content2>section>h2{
    position: relative;
    padding-top: 15px;
    margin-bottom: 40px;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
}
#main_content2>section>h2>span{
    position: relative;
    top: -14px;
    font-size: 1.7rem;
    font-weight: 300;
    color: #808080;
    padding: 0px 20px;
    background: #f7f7f7;
}
#main_content2>section>h2:before{
    content: '';
    position:absolute;
    top: 79px;
    left: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background:#d3d3d3;
}

/* main content 2 산지직송 컨텐츠 */
.direct_goods_area>div:nth-of-type(1){
    position: relative;
    float: left;
    margin-right: 35px;
}
.direct_goods_area>div:nth-of-type(1)>div>img{
    border-radius: 50px;
    border: 2px solid #d3d3d3;
    transition: 0.3s;
}
.direct_goods_area>div:nth-of-type(1)>div:hover>img,
.direct_goods_area>div:nth-of-type(1)>div:focus>img{
    border: 2px solid #76d622;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}

/* 무료배송 & 지역아이콘 */
.direct_goods_area>div:nth-of-type(1)>div>.delivery_icon>img,
.direct_goods_area>div:nth-of-type(1)>div>.location_icon>img{
    position: absolute;
    top: 30px;
}
.direct_goods_area>div:nth-of-type(1)>div>.delivery_icon>img{
    left: 30px;
}
.direct_goods_area>div:nth-of-type(1)>div>.location_icon>img{
    left: 130px;
}
.direct_goods_area>div:nth-of-type(1)>a{
    position: absolute;
    top: 335px;
    left: -30px;
    border-radius: 50px;
    width: 354px;
    height: 178px;
    padding: 30px 0px 0px 50px;
    background: white;
    box-shadow: 0px 5px 19px 1px rgba(0, 0, 0, 0.15);
}
.direct_goods_area>div:nth-of-type(1)>a>span{
    font-size: 1.5rem;
    display: inline-block;
    padding-bottom: 8px;
    color: #808080;
}
.direct_goods_area>div:nth-of-type(1)>a>strong{
    font-size: 3rem;
    line-height: 1.4;
}
.direct_goods_area>.bx4>div>ul{
    float: left;
}
.direct_goods_area>.bx4>div>ul>li>div{
    float: left;
}
.direct_goods_area>.bx4>div>ul>li:nth-of-type(2){
    padding: 18px 0px;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(1)>img{
    border-radius: 25px;
    border: 1px solid #d3d3d3;
    transition: 0.3s;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(1)>img:hover,
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(1)>img:focus{
    border: 1px solid #76d622;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 2px;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div{
    padding-top: 20px;
    padding-left: 20px;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div>span{
    display: inline-block;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div>span:first-child{
    margin-right: 4px;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div>a{
    display: block;
    padding-top: 14px;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div>a>span{
    display: inline-block;
    font-size: 1.3rem;
    color: #808080;
}
.direct_goods_area>.bx4>div>ul>li>div:nth-of-type(2)>div>a>strong{
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
}

/* main recipe */
#main_recipe{
    background: white;
    padding-top: 95px;
    padding-bottom: 116px;
    margin-bottom: 342px;
}
#main_recipe>h2{
    opacity: 0;
    position: relative;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
    transition: 1s;
    transform: translateY(100%);
}
#main_recipe>h2>span{
    position:relative;
    font-size: 1.7rem;
    font-weight: 300;
    color: #808080;
    padding:0px 20px;
    margin-bottom: 35px;
    top: -14px;
    background: white;
}
#main_recipe>div{
    opacity: 0;
    transition: 1s 0.5s;
    transform: translateY(100%);
}
#main_recipe>h2.on,
#main_recipe>div.on{
    opacity: 1;
    transform: translateY(0%);
}
/* main recipe side border */
#main_recipe>h2:before{
    content:'';
    position:absolute;
    top: 65px;
    left: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background:#d3d3d3;
}

/* recipe contents */
.bx5>li{
    float: left;
    width: 244px;
    text-align: center;
    padding: 0px 20px;
}
.bx5>li>a>img{
    border-radius: 50%;
    border: 2px solid #d3d3d3;
    transition: 0.3s;
}
.bx5>li:hover>a>img,
.bx5>li:focus>a>img{
    border: 2px solid #76d622;
}
.bx5>li>a>p{
    padding-top: 28px;
    font-size: 1.7rem;
    color: #808080;
}

/* members box */
#members_box{
    background: white;
}
#members_box>section>h2{
    padding-top: 15px;
    margin-bottom: 35px;
    font-size: 3rem;
    font-weight: 600;
    text-align: center;
    color: white;
    opacity: 0;
    transform: translateY(100%);
    transition: 1s;
}
#members_box>section>h2.on{
    opacity: 1;
    transform: translateY(0%);
}
#members_box>.members{
    transform: translateY(-250px);
}
#members_box>.members>h2>span{
    display: block;
    font-size: 1.7rem;
    font-weight: 300;
    color: white;
}
#members_box>.members>div{
    text-align: center;
    background: white;
    border-radius: 0px 50px;
    border: 1px solid #d3d3d3;
    box-shadow: 0px 5px 19px 1px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(100%);
    transition: 1s;
}
#members_box>.members>div.on{
    opacity: 1;
    transform: translateY(0%);
}
#members_box>.members>div>a{
    float: left;
    width: 25%;
    padding: 160px 0px 96px;
    background-size: 48px 48px;
    background-repeat: no-repeat;
    background-position: center 100px;
}
#members_box>.members>div>a:nth-of-type(1){
    background-image: url(../svg/icon_delivery_2.svg);
}
#members_box>.members>div>a:nth-of-type(2){
    background-image: url(../svg/icon_member.svg);
}
#members_box>.members>div>a:nth-of-type(3){
    background-image: url(../svg/icon_membership.svg);
}
#members_box>.members>div>a:nth-of-type(4){
    background-image: url(../svg/icon_percent.svg);
}
#members_box>.members>div>a>strong{
    font-size: 1.8rem;
    font-weight: 400;
}
#members_box>.members>div>a>span{
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: #808080;
}

/* community box 3종 */
#community_box{
    background: white;
}
#community_box>div:nth-of-type(1){
    padding: 0px 10px;
    margin-bottom: 64px;
}
#community_box>div:nth-of-type(1)>section{
    float: left;
    width: 380px;
    border: 1px solid #d3d3d3;
    border-radius: 0px 50px 0px;
    transition: 0.3s;
    margin-top: -150px;
}
#community_box>div:nth-of-type(1)>section:nth-of-type(1){
    opacity: 0;
    transition: 1s;
    transform: translateY(100%);
}
#community_box>div:nth-of-type(1)>section:nth-of-type(1).on,
#community_box>div:nth-of-type(1)>section:nth-of-type(2).on,
#community_box>div:nth-of-type(1)>section:nth-of-type(3).on{
    opacity: 1;
    transform: translateY(0%);
}
#community_box>div:nth-of-type(1)>section:nth-of-type(2){
    margin-right: 20px;
    margin-left: 20px;
    opacity: 0;
    transform: translateY(100%);
    transition: 1s 0.3s;
}
#community_box>div:nth-of-type(1)>section:nth-of-type(3){
    opacity: 0;
    transform: translateY(100%);
    transition: 1s 0.6s;
}
#community_box>div:nth-of-type(1)>section:hover,
#community_box>div:nth-of-type(1)>section:focus{
    border: 1px solid #76d622;
}
#community_box>div:nth-of-type(1)>section>div:nth-of-type(1)>img{
    border-radius: 0px 50px 0px 0px;
}
#community_box>div:nth-of-type(1)>section>.comu_text{
    text-align: center;
    margin-top: 32px;
}
#community_box>div:nth-of-type(1)>section>.comu_text>strong{
    font-size: 2rem;
}
#community_box>div:nth-of-type(1)>section>.comu_text>p{
    font-size: 1.5rem;
    color: #808080;
    margin: 4px 0px 18px;
}
#community_box>div:nth-of-type(1)>section>.comu_text>a{
    display: inline-block;
    font-size: 1.4rem;
    margin-bottom: 24px;
    color: #808080;
    transition: 0.3s;
}
#community_box>div:nth-of-type(1)>section>.comu_text>a>img{
    margin-left: 5px;
    vertical-align: -1px;
    transition: 0.3s;
}
#community_box>div:nth-of-type(1)>section>.comu_text>a:hover,
#community_box>div:nth-of-type(1)>section>.comu_text>a:focus{
    transform: translateX(-10px);
}
#community_box>div:nth-of-type(1)>section>.comu_text>a:hover>img,
#community_box>div:nth-of-type(1)>section>.comu_text>a:focus>img{
    transform: translateX(14px);
}
#community_box>.ft_wrap{
    padding: 32px 10px 50px;
}
#community_box>.ft_wrap>div{
    float: left;
    width: 380px;
    padding: 0px 15px;
}
#community_box>.ft_wrap>div:nth-of-type(2){
    margin: 0px 20px;
}
/* 고객센터 */
#community_box>.ft_wrap>.ft_contact{
    position: relative;
}
#community_box>.ft_wrap>.ft_contact>h3{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}
#community_box>.ft_wrap>.ft_contact>.contact_data{
    float: left;
}
#community_box>.ft_wrap>.ft_contact>.contact_data>strong{
    display: block;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #4f6746;
    margin-bottom: 8px;
}
#community_box>.ft_wrap>.ft_contact>.contact_data>p{
    font-size: 1.2rem;
    color: #808080;
}
#community_box>.ft_wrap>.ft_contact>.contact_btn{
    position: absolute;
    bottom: 0px;
    right: 15px;
}
#community_box>.ft_wrap>.ft_contact>.contact_btn>.ft_btn{
    display: block;
    width: 152px;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px 38px 10px 24px;
    color: #808080;
    border: 1px solid #cccccc;
    background: white url(../img/btn_shortcuts.png) no-repeat 120px center ;
    transition: 0.5s;
}
#community_box>.ft_wrap>.ft_contact>.contact_btn>.ft_btn:hover,
#community_box>.ft_wrap>.ft_contact>.contact_btn>.ft_btn:focus{
    color: white;
    border: 1px solid #76d622;
    background: #76d622 url(../img/btn_shortcuts_hover.png) no-repeat 120px center ;
}
/* 공지사항 */
.ft_info_notice{
    position: relative;
}
.ft_info_notice>h3{
    margin-bottom: 16px;
    font-size: 2rem;
    font-weight: 600;
}
.ft_info_notice>ul>li{
    float: left;
    width: 100%;
    line-height: 2;
}
.ft_info_notice>ul>li>a{
    float: left;
    font-size: 1.5rem;
    color: #808080;
}
.ft_info_notice>ul>li>a:hover,
.ft_info_notice>ul>li>a:focus{
    text-decoration: underline;
}
.ft_info_notice>ul>li>span{
    float: right;
    color: #808080;
}
.ft_info_notice>a{
    position: absolute;
    top: 18px;
    right: 15px;
    font-size: 1.4rem;
    color: #808080;
    transition: 0.3s;
}
.ft_info_notice>a:hover,
.ft_info_notice>a:focus{
    transform: translateX(-12px);
}
.ft_info_notice>a>img{
    position: absolute;
    top: 5px;
    transition: 0.3s;
    opacity: 0;
}
.ft_info_notice>a:hover>img,
.ft_info_notice>a:focus>img{
    opacity: 1;
    transform: translateX(5px);
}
/* 친환경 인증 정보 */
.ft_mark_info{
    padding-top: 20px;
}
.ft_mark_info>img{
    float: left;
    vertical-align: middle;
    margin-top: 8px;
    margin-right: 16px;
}
.ft_mark_info>div{
    float: left;
}
.ft_mark_info>div>h3{
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 16px;
}
.ft_mark_info>div>p{
    font-size: 1.5rem;
    line-height: 1.8;
    color: #808080;
}