@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #DF3A6D;
    --red-color : #DF3A6D;
    --green-color : #42C17B; 
    --black-color : #222;
    --white-color : #fff
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--green-color); color:#222; }


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */




.watermelon{ position: relative; overflow: hidden; }

.watermelon .mainBanner{ text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 30px 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .mainBanner .borderBox{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 65px 20px; position: relative; border: 2px solid #fff; border-radius: 20px; background-color: rgba(0,0,0,0.40); }
.watermelon .mainBanner .borderBox .icon{ position: absolute; max-width: 80%; left: 10%; }
.watermelon .mainBanner .icon1{ top: 15%; }
.watermelon .mainBanner .icon2{ top: 15%; }
.watermelon .mainBanner .label{ padding: 9px 44px; border: 2px solid #fff; border-radius: 1000px; font-family: 'Wavve PADO'; font-weight: 100; font-size: 23px; }
.watermelon .mainBanner .title{ font-family: 'Wavve PADO'; position: relative; z-index: 1; }
.watermelon .mainBanner .title .t1{ margin-top:33px; font-size: 60px; }
.watermelon .mainBanner .title .t2{ font-size: 120px; }
.watermelon .mainBanner .red{ color:var(--red-color); }
.watermelon .mainBanner .green{ color:var(--green-color); }
.watermelon .mainBanner .bar{ margin: 33px auto; width: 2px; height: 40px; background:#fff; }
.watermelon .mainBanner .content{ line-height: 1.5em; font-size: 32px; }
.watermelon .mainBanner .content .big{ margin-top: 5px; font-size: 1.25em; }
.watermelon .mainBanner .moBr{ display: none; }
.watermelon .mainBanner .scrolldown_div{ gap: 8px; margin-top: 32px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.watermelon .mainBanner .scrolldown_div .mouse{ padding: 8px 0; display: flex; align-items: flex-start; justify-content: center; width: 28px; height: 50px; border-radius: 1000px; border: 2px solid #fff;  }
.watermelon .mainBanner .scrolldown_div .mouse .wheel{ width: 6px; height: 10px; border-radius:1000px; background-color: #fff; }

@media screen and (max-width: 1250px) { 
    .watermelon .mainBanner .label{ font-size: 4vw; padding: 1vw 4vw; }
    .watermelon .mainBanner .title .t1{ font-size: 6vw; }
    .watermelon .mainBanner .title .t2{ font-size: 10vw; }
}
@media screen and (max-width: 950px) { 
    .watermelon .mainBanner .content{ font-size: 24px; }
    .watermelon .mainBanner .moBr{ display: inline-block; }
}
@media screen and (max-width: 650px) { 
    .watermelon .mainBanner .icon1{ top: 25%; }
    .watermelon .mainBanner .icon2{ top: 25%; }
    .watermelon .mainBanner .bar{ width: 2px; height: 5vh; }

    .watermelon .mainBanner .content{ font-size: 3.5vw; }
    .watermelon .mainBanner .scrolldown_div .mouse{ padding: 4px 0; width: 20px; height: 32px; }
}


/* .watermelon .projectSec */
.watermelon .projectSec{ display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 100px 0; border: 35px solid var(--green-color); }
.watermelon .projectSec .moBr{ display: none; }
.watermelon .projectSec .title{ font-size: 52px; font-family: "Wavve PADO"; }
.watermelon .projectSec .title .underline{ border-bottom: 4px solid var(--green-color); }
.watermelon .projectSec .greenColor{ color: var(--green-color); }
.watermelon .projectSec .redColor{ color: var(--red-color); }
.watermelon .projectSec .imgList{ font-family: "Wavve PADO"; flex-wrap: wrap; display: flex; width: calc(100% + 20px); margin-left: -10px; margin-top: 24px; }
.watermelon .projectSec .imgList > li{ position: relative; display: flex; align-items: flex-end; justify-content: center; width: calc(100% / 2); padding: 10px; }
.watermelon .projectSec .imgList > li.full{ width: 100%; }
.watermelon .projectSec .imgList .imgBox{ text-align: center; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; position: relative; height: 320px; background-color: #222; }
.watermelon .projectSec .imgList .imgBox .bg{ background-position: center; transition: transform .5s; background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  }
.watermelon .projectSec .imgList .imgBox:hover .bg{ transform: scale(1.1); }
.watermelon .projectSec .imgList .textBox{ position: relative; z-index: 1; }
.watermelon .projectSec .imgList .textBox .blackBg{ border-radius: 10px; line-height: 1.5em; font-size: 24px; color: #fff; background-color: #222; padding: 10px 10px; }
.watermelon .projectSec .imgList .whiteText{ line-height: 1.5em; position: absolute; z-index: 1; width: 100%; top: 20px; color: #fff; left: 0; font-size: 24px; }
.watermelon .projectSec .imgList .greenBox{ position: absolute; padding: 10px; color: #fff; line-height: 1.25em; font-size: 30px; background-color: #42C17B; bottom: -20px; }

@media screen and (max-width: 1250px) { 
    .watermelon .projectSec{ border-width: 10px; }  
    .watermelon .projectSec .title{ font-size: 35px; }
    .watermelon .projectSec .imgList .imgBox{ height: 29vw; }
    .watermelon .projectSec .imgList .textBox .blackBg{ font-size: 18px; }
    .watermelon .projectSec .imgList .whiteText{ font-size: 18px; }
    .watermelon .projectSec .imgList .greenBox{ font-size: 18px; }
    
}
@media screen and (max-width: 950px) { 
    .watermelon .projectSec{ padding: 50px 0; }
    .watermelon .projectSec .title{ font-size: 18px; }
    .watermelon .projectSec .imgList > li{ width: 100%; }
    .watermelon .projectSec .imgList .imgBox{ height: 50vw; }

}
@media screen and (max-width: 650px) { 
    .watermelon .projectSec .imgList .textBox .blackBg{ font-size: 4vw; padding: 1vw 2vw; border-radius: 1vw; }
    .watermelon .projectSec .imgList .whiteText{ top: 2vw; font-size: 4vw; }
    .watermelon .projectSec .imgList .greenBox{ font-size: 3.8vw; padding: 1vw 2vw; bottom: -3vw; }
}

/* .watermelon .slideSec */
.watermelon .slideSec{ background-image: url('../../img/watermelon/main/slideSec/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 100px 0 100px 0; position: relative; overflow: hidden; }
.watermelon .slideSec .gradientDiv{ text-align: center; border-radius: 90px; background: linear-gradient(180deg, rgba(223, 58, 109, 0.00) 0%, #DF3A6D 100%), #42C17B; box-shadow: 21px 24px 31px 0px rgba(0, 0, 0, 0.25); padding: 80px 0 25vw 0; }
.watermelon .slideSec .gradientDiv .titleBox{ display: flex; align-items: center; justify-content: center; }
.watermelon .slideSec .gradientDiv .titleBox .title{ max-width: 100%; }
.watermelon .slideSec .contentBox{ line-height: 1.5em; text-align: center; margin-top: 8px; font-family: "Wavve PADO"; color: #fff; font-size: 32px; font-weight: 400; }
.watermelon .slideSec .slideBox{ position: absolute; width: 100%; left: 0; bottom: -50px; }
.watermelon .slideSec .slideBox .imgBox{ border-radius: 20px; border: 4px solid #DF3A6D; height: 30vw; background-repeat: no-repeat; background-position: center; background-size: cover; }

@media screen and (max-width: 1250px) { 
    .watermelon .slideSec .gradientDiv .titleBox .title{ width: 300px; }
    .watermelon .slideSec .contentBox{ font-size: 28px; }
    .watermelon .slideSec .gradientDiv{ padding-bottom: 22vw; }
}
@media screen and (max-width: 950px) { 
    .watermelon .slideSec .gradientDiv{ padding: 80px 0 39vw 0; }
    .watermelon .slideSec .slideBox .imgBox{ height: 50vw; }

}
@media screen and (max-width: 650px) { 
    .watermelon .slideSec .gradientDiv{ border-radius: 30px; }
    .watermelon .slideSec .contentBox{ font-size: 4vw; }
    .watermelon .slideSec .gradientDiv .titleBox .title{ max-width: 200px; }
    .watermelon .slideSec .slideBox .imgBox{ height: 108vw; max-height: 500px; }
    .watermelon .slideSec .gradientDiv{ padding-bottom: 77vw; } 
}

/* .watermelon .sweetSec */
.watermelon .sweetSec{ padding: 100px 0 50px 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: url('../../img/watermelon/main/sweetSec/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .sweetSec .pinkBox{ font-family: "Wavve PADO"; text-align: center; border-radius: 20px; } 
.watermelon .sweetSec .pinkBox .pinkBar{  border-radius: 20px 20px 0 0; height: 30px; background-color: #DF3A6D; display: flex; align-items: center; justify-content: center; }
.watermelon .sweetSec .pinkBox .contentBox{ background-color: #FCE8F1; padding: 100px 20px 50px 20px; border-radius: 0 0 20px 20px; }
.watermelon .sweetSec .pinkBox .t1{ font-size: 62px; color: var(--red-color); }
.watermelon .sweetSec .pinkBox .t2{ line-height: 1.5em; margin-top: 5px; font-size: 38px; margin-top: 5px; }
.watermelon .sweetSec .moBr{ display: none; }
.watermelon .sweetSec .halfBox{ margin-top: 30px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; }
.watermelon .sweetSec .halfBox .box{ width: calc(100% / 2); padding: 10px; }
.watermelon .sweetSec .halfBox .box .imgBox{ border-radius: 4px; overflow: hidden; position: relative; height: 445px; }
.watermelon .sweetSec .halfBox .box .imgBox .bg{ transition: transform .5s; width: 100%; height: 100%; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .sweetSec .halfBox .box:hover .imgBox .bg{ transform: scale(1.1); }
.watermelon .sweetSec .halfBox .titleBox{ border-radius: 4px; margin-top: 10px; font-size: 32px; padding: 10px; background-color: var(--red-color); color: #fff; }

@media screen and (max-width: 1250px) { 
    .watermelon .sweetSec .pinkBox .t1{ font-size: 40px; }
    .watermelon .sweetSec .pinkBox .t2{ font-size: 30px; }
    .watermelon .sweetSec .halfBox .box .imgBox{ height: 40vw; }
    .watermelon .sweetSec .halfBox .titleBox{ font-size: 20px; }
}
@media screen and (max-width: 950px) { 
    .watermelon .sweetSec .moBr{ display: inline-block; }
}
@media screen and (max-width: 650px) { 
    .watermelon .sweetSec{ padding: 50px 0; }
    .watermelon .sweetSec .pinkBox .t1{ font-size: 25px; }
    .watermelon .sweetSec .pinkBox .t2{ font-size: 20px; }
    .watermelon .sweetSec .pinkBox .pinkBar .label{ width: 100px; }
    .watermelon .sweetSec .pinkBox .contentBox{ padding: 50px 20px; }
    .watermelon .sweetSec .halfBox .box{ width: 100%; }
    .watermelon .sweetSec .halfBox .box .imgBox{ height: 80vw; }
    .watermelon .sweetSec .halfBox .titleBox{ font-size: 4vw; }
}

/* .watermelon .sweetRealSec */
.watermelon .sweetRealSec{ font-family: "Wavve PADO"; color: #fff; min-height: 100vh; padding: 100px 0; background: linear-gradient(90deg, rgba(34, 34, 34, 0.00) 0%, #222 38.46%, #222 60.58%, rgba(34, 34, 34, 0.00) 100%), #000; }
.watermelon .sweetRealSec .topBox{ padding-bottom: 25px; border-bottom: 1px solid #fff; display: flex; gap: 39px; }
.watermelon .sweetRealSec .topBox .imgBox{ flex-shrink: 0; border-radius: 10px; width: 490px; height: 297px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .sweetRealSec .topBox .contentBox{ flex-grow: 1; position: relative; }
.watermelon .sweetRealSec .topBox .icon{ position: absolute; right: 0; top: -50px; }
.watermelon .sweetRealSec .topBox .t1{ font-size: 62px; line-height: 1.25em; }
.watermelon .sweetRealSec .redColor{ color: #DF3A6D; }
.watermelon .sweetRealSec .t1{ margin-top: 20px; }
.watermelon .sweetRealSec .t2{ margin-top: 20px; font-size: 38px; line-height: 1.25em; }
.watermelon .sweetRealSec .bottomBox{  padding:20px 0; display: flex; align-items: center; gap: 60px; }
.watermelon .sweetRealSec .bottomBox .imgBox{ background-size: cover; background-repeat: no-repeat; background-position: center; width: 464px; height: 445px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.watermelon .sweetRealSec .bottomBox .contentBox{ flex-grow: 1; }
.watermelon .sweetRealSec .small{ font-size: .8em; margin-top: 10px; display: block; }

.watermelon .sweetRealSec .squreDiv{ margin-top: 40px; display: flex; gap: 10px;  }
.watermelon .sweetRealSec .squreDiv .leftBox{ display: flex; flex-direction: column; width: 50%; gap: 10px; }
.watermelon .sweetRealSec .squreDiv .box{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 7px 20px; font-size: 32px; color: #fff; border: 4px solid #fff; }
.watermelon .sweetRealSec .squreDiv .box.redColor{ color: var(--red-color); border-color: var(--red-color); }

.watermelon .sweetRealSec .importantDiv{ display: flex; align-items: center; gap: 20px; }
.watermelon .sweetRealSec .importantDiv .moBr{ display: none; }
.watermelon .sweetRealSec .importantDiv .text{ word-break: keep-all; font-size: 38px; }

@media screen and (max-width: 1250px) { 
    .watermelon .sweetRealSec .topBox{ gap: 20px; }
    .watermelon .sweetRealSec .topBox .t1{ font-size: 50px; }
    .watermelon .sweetRealSec .t2{ font-size: 30px; }
    .watermelon .sweetRealSec .squreDiv .box{ font-size: 24px; }
    .watermelon .sweetRealSec .bottomBox{ gap: 20px; }
}
@media screen and (max-width: 1050px) { 
    .watermelon .sweetRealSec .topBox .imgBox{ width: 390px; height: 283px; }
    .watermelon .sweetRealSec .bottomBox .imgBox{ width: 398px; height: 294px; }
}
@media screen and (max-width: 950px) { 
    .watermelon .sweetRealSec .topBox { flex-direction: column; }
    .watermelon .sweetRealSec .bottomBox{ flex-direction: column; }
    .watermelon .sweetRealSec .topBox .imgBox{ width: 100%; height: 70vw; }
    .watermelon .sweetRealSec .bottomBox .imgBox{ width: 100%; height: 70vw; }
    .watermelon .sweetRealSec .bottomBox .contentBox{ width:100%; order: 1; }
    .watermelon .sweetRealSec .squreDiv .box.redColor{ flex-grow: 1; }
}
@media screen and (max-width: 650px) { 
    .watermelon .sweetRealSec { padding: 50px 0; }
    .watermelon .sweetRealSec .topBox .icon{ width: 40vw; }
    .watermelon .sweetRealSec .topBox .t1{ font-size: 9vw; }
    .watermelon .sweetRealSec .t2{ font-size: 6vw; }
    .watermelon .sweetRealSec .squreDiv .box{ font-size: 4vw; padding: 2vw; border-width: .8vw; }
    .watermelon .sweetRealSec .importantDiv .icon{ width: 35vw; }
    .watermelon .sweetRealSec .importantDiv .text{ font-size: 5vw; }
}

/* .watermelon .startSec */
.watermelon .startSec{ word-break: keep-all; font-family: "Wavve PADO"; background-image: url('../../img/watermelon/main/startSec/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .startSec .pinkBox{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh ; padding: 100px 20px; background-image: url('../../img/watermelon/main/startSec/background2.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .startSec .pinkBox .title{ color: var(--red-color); font-size: 62px; }
.watermelon .startSec .pinkBox .content{ line-height: 1.25em; margin-top: 20px; font-size: 38px;  }
.watermelon .startSec .pinkBox .imgBox{ width: 100%; position: relative; margin-top: 20px; display: flex; justify-content: center; }
.watermelon .startSec .pinkBox .imgBox .box{ width: 440px; height: 440px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .startSec .pinkBox .imgBox .icon{ position: absolute; right: 0; bottom: -50px; }
.watermelon .startSec .pinkBox .content.type2{ margin-top: 40px; line-height: 1.5em; }
.watermelon .startSec .pinkBox .pinkBg{ margin-top: 20px; display: inline-block; background-color: #DF3A6D; padding: 5px 10px; }
.watermelon .startSec .pinkBox .pinkBg .content{ color: #fff; margin-top: 0; }
.watermelon .startSec .pinkBox .date{ margin-top: 20px; font-size: 30px; }

@media screen and (max-width: 1250px) { 
    .watermelon .startSec .pinkBox .title{ font-size: 40px; }
    .watermelon .startSec .pinkBox .content{ font-size: 30px; }
    .watermelon .startSec .pinkBox .date{ font-size: 20px; }
    .watermelon .startSec .pinkBox .imgBox .box{ width: 40vw; height: 40vw; }
    .watermelon .startSec .pinkBox .imgBox .icon{ width: 20vw; }
}
@media screen and (max-width: 950px) { 
    .watermelon .startSec .pinkBox .content br{ display: none; }
}
@media screen and (max-width: 650px) { 
    .watermelon .startSec .pinkBox{ padding: 50px 0; }
    .watermelon .startSec .pinkBox .title{ font-size: 24px; }
    .watermelon .startSec .pinkBox .content{ font-size: 20px; }
    .watermelon .startSec .pinkBox .content.type2{ font-size: 4vw; }
    .watermelon .startSec .pinkBox .date{ font-size: 4vw; }
}

/* .watermelon .growSec */
.watermelon .growSec{ word-break: keep-all; font-family: "Wavve PADO"; background-image: url('../../img/watermelon/main/growSec/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .growSec .whiteBg{ min-height: 100vh; background-color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 35px; }
.watermelon .growSec .main_title{ text-align: center; color: var(--red-color); font-size: 62px; }
.watermelon .growSec .main_title .underline{ background: linear-gradient(to top, rgba(223, 58, 109, .2) 50%, transparent 50%); } 
.watermelon .growSec .main_content{ margin-top: 40px; text-align: center; margin-top: 10px; font-size: 38px; font-weight: 700; }
.watermelon .growSec .imgWrap{ width: 100%; margin-top: 30px; display: flex; align-items: center; }
.watermelon .growSec .imgWrap .imgBox{ max-width: 100%;  background-size: cover; background-repeat: no-repeat; background-position: center; width: 463px; height: 549px; flex-shrink: 0; border: 4px solid #222; border-radius: 10px; }
.watermelon .growSec .imgWrap .contentBox{ font-family: 'Pretendard', sans-serif; padding: 40px; border: 6px solid var(--red-color); flex-grow: 1; border-left: none; }
.watermelon .growSec .imgWrap .contentBox .contentWrap + .contentWrap{ margin-top: 40px; }
.watermelon .growSec .imgWrap .contentBox .title{ font-weight: 700; color: var(--red-color); display: flex; align-items: center; gap: 14px; font-size: 26px; }
.watermelon .growSec .imgWrap .contentBox .title .icon{ flex-shrink: 0; }
.watermelon .growSec .imgWrap .contentBox .content{ margin-top: 10px; font-size: 22px; font-weight: 700; line-height: 1.5em; }

@media screen and (max-width: 1250px) { 
    .watermelon .growSec .main_title{ font-size: 40px; }
    .watermelon .growSec .main_content{ font-size: 30px; }
    .watermelon .growSec .imgWrap .imgBox{ width: 380px; height: 500px; }
    .watermelon .growSec .imgWrap .contentBox .title .icon{ width: 30px; }
    .watermelon .growSec .imgWrap .contentBox .content{ font-size: 18px; }
}
@media screen and (max-width: 950px) { 
    .watermelon .growSec .whiteBg{ padding: 50px 10px; }
    .watermelon .growSec .imgWrap{ flex-direction: column; gap: 30px; }
    .watermelon .growSec .imgWrap .contentBox{ border: 4px solid #DF3A6D; width: 100%; }
}
@media screen and (max-width: 650px) { 
    .watermelon .growSec .main_title{ font-size: 5.6vw; }
    .watermelon .growSec .main_content{ font-size: 4vw; }
    .watermelon .growSec .imgWrap .contentBox{ padding: 20px; }
    .watermelon .growSec .imgWrap .contentBox .title{ font-size: 16px; gap: 5px; }
    .watermelon .growSec .imgWrap .contentBox .content{ font-size: 14px; }
    .watermelon .growSec .imgWrap .imgBox{ width: 100%; height: 100vw; }
}

/*  .watermelon  .givenSec */
.watermelon  .givenSec{ background-image: url('../../img/watermelon/main/givenSec/background.jpg'); background-size: cover; padding: 100px 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.watermelon  .givenSec .title{ text-align: center; color: #fff; font-size: 48px; font-family: "Wavve PADO"; }
.watermelon  .givenSec .imgBox{ margin-top: 22px; display: flex; background-color: #339550; }
.watermelon  .givenSec .imgBox .leftBox{ width: 521px; height: 380px; flex-shrink: 0; background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon  .givenSec .contentBox{ color: #fff; flex-grow: 1; padding: 50px; }
.watermelon  .givenSec .contentBox .label{ font-size: 34px; font-weight: 600; }
.watermelon  .givenSec .contentBox .label .kg{ color: #CEE291; }

.watermelon  .givenSec .contentBox .checkBox{ font-size: 22px; font-weight: 600; margin-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.watermelon  .givenSec .contentBox .checkBox .item{ display: flex; gap: 10px; }
.watermelon  .givenSec .contentBox .checkBox .icon{ flex-shrink: 0; }

.watermelon  .givenSec .bottomContent{ text-align: center; position: relative; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; margin-top: 14px; background-color: #339550; }
.watermelon  .givenSec .bottomContent .bgText{ background-color: #5CAA73; padding: 14px 34px; border-radius: 100px; font-weight: 700; font-size: 26px; }
.watermelon  .givenSec .bottomContent .content{ margin-top: 10px; line-height: 1.5em; font-weight: 700; font-size: 26px; }
.watermelon  .givenSec .bottomContent .icon{ position: absolute; }
.watermelon  .givenSec .bottomContent .icon1{ left: 50px; bottom: -50px; }
.watermelon  .givenSec .bottomContent .icon2{ right: 50px; bottom: -30px; }
.watermelon  .givenSec .moBr{ display: none; }

.watermelon  .givenSec .priceDiv{ margin-top: 20px; display: flex; align-items: center; gap: 10px; }
.watermelon  .givenSec .priceDiv .bgText{ background-color: #5CAA73; padding: 10px 33px; border-radius: 8px; font-size: 21px; font-weight: 700; }
.watermelon  .givenSec .priceDiv .price{ font-weight: 700; font-size: 64px; }
.watermelon  .givenSec .priceDiv .info{ font-weight: 700; font-size: 22px; }
.watermelon .givenSec .priceDiv .price{ font-size: 30px; }
.watermelon .givenSec .priceDiv .price .del{ text-decoration: line-through; }

@media screen and (max-width: 1250px) { 
    .watermelon .givenSec .title{ font-size: 30px; }
    .watermelon .givenSec .imgBox .leftBox{ width: 50%; height: 40vw; }
    .watermelon .givenSec .contentBox{ padding: 30px; display: flex; flex-direction: column; justify-content: center; }
    .watermelon .givenSec .contentBox .label{ font-size: 28px; }
    .watermelon .givenSec .contentBox .checkBox{ font-size: 18px; }
    .watermelon .givenSec .contentBox .checkBox .icon{ width: 20px; }
    .watermelon .givenSec .priceDiv .bgText{ font-size: 18px; }
    .watermelon .givenSec .priceDiv .price{ font-size: 20px; }
    .watermelon .givenSec .priceDiv .info{ font-size: 18px; }

    .watermelon .givenSec .bottomContent .icon1{ width:20vw; left: -3vw; bottom: -2vw; }
    .watermelon .givenSec .bottomContent .icon2{ width:20vw; right: -3vw; bottom: -2vw; }

    .watermelon .givenSec .bottomContent .bgText{ font-size: 20px; }
    .watermelon .givenSec .bottomContent .content{ font-size: 20px; }

}
@media screen and (max-width: 950px) { 
    .watermelon  .givenSec .title{ line-height: 1.25em; }
    .watermelon  .givenSec .moBr{ display: inline-block; }

    .watermelon .givenSec .imgBox{ flex-direction: column; }
    .watermelon .givenSec .imgBox .leftBox{ width: 100%; height: 70vw; }
    .watermelon .givenSec .contentBox{ padding: 20px 20px 50px 20px; }
    .watermelon .givenSec .bottomContent{ padding: 50px 20px 50px 20px; }
    .watermelon .givenSec .bottomContent .icon1{ width: 100px; left: -20px; bottom: unset; top: -50px; }
    .watermelon .givenSec .bottomContent .icon2{ bottom: -40px; right: -10px; width: 100px; }
}
@media screen and (max-width: 650px) { 
    .watermelon .givenSec{ padding: 50px 0; }
    .watermelon .givenSec .title{ font-size: 6.2vw; }

    .watermelon .givenSec .contentBox .label{ font-size: 20px; }
    .watermelon .givenSec .contentBox .checkBox{ gap: 10px; font-size: 16px; }    
    
    .watermelon .givenSec .priceDiv .bgText{ font-size: 14px; padding: 5px 10px; border-radius: 4px; }
    .watermelon .givenSec .priceDiv .price{ font-size: 5vw; }
    .watermelon .givenSec .priceDiv .info{ font-size: 16px; }

    .watermelon .givenSec .bottomContent .bgText{ padding: 5px 10px; font-size: 4vw; }
    .watermelon .givenSec .bottomContent .content{ font-size: 16px; word-break: keep-all; }
    .watermelon .givenSec .bottomContent .content br{ display: none; }
}

/*  .watermelon  .nowSec */
.watermelon .nowSec{ background-image: url('../../img/watermelon/main/nowSec/background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.watermelon .nowSec .inner{ padding: 130px 10px; }
.watermelon .nowSec .bar{ height: 12px; background: linear-gradient(90deg, rgba(255, 165, 193, 0.00) 0%, #FFA5C1 100%), #42C17B; }
.watermelon .nowSec .title{ text-align: center; font-family: "Wavve PADO"; font-size: 58px; color: #fff;  }
.watermelon .nowSec .title .red{ color: #DF3A6D; }
.watermelon .nowSec .white_bar{ margin: 40px auto; width: 2px; height: 40px; background-color: #fff; }
.watermelon .nowSec .payBtn{ font-size: 20px; font-weight: 700; margin: 0 auto; display: block; width: 100%; max-width: 240px; border-radius: 4px; background-color: var(--green-color); display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; color: #fff;  }

@media screen and (max-width: 1250px) { 
    .watermelon .nowSec .title{ font-size: 40px; }
    .watermelon .nowSec .payBtn{ font-size: 18px; max-width: 200px; }
}
@media screen and (max-width: 650px) { 
    .watermelon .nowSec .title{ font-size: 10vw; }
    .watermelon .nowSec .payBtn{ font-size: 16px; }
}

.watermelon .nowSec .grayBtn{ font-size: 20px; font-weight: 700; margin: 10px auto; display: block; width: 100%; max-width: 240px; border-radius: 4px; background-color: gray; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px; color: #fff;  }

@media screen and (max-width: 1250px) { 
    .watermelon .nowSec .title{ font-size: 40px; }
    .watermelon .nowSec .grayBtn{ font-size: 18px; max-width: 200px; }
}
@media screen and (max-width: 650px) { 
    .watermelon .nowSec .title{ font-size: 10vw; }
    .watermelon .nowSec .grayBtn{ font-size: 16px; }
}

/*  .watermelon  .farmSec */
.watermelon .farmSec{ border: 35px solid #FFA5C1; padding: 100px 0; position: relative; overflow: hidden; }
.watermelon .farmSec .title{ text-align: center; font-family: "Wavve PADO"; line-height: 1.5em; font-size: 52px; }
.watermelon .farmSec .title .red{ color: var(--red-color); }
.watermelon .farmSec .imgBox{ position: relative; }
.watermelon .farmSec .imgList{ display: flex; flex-wrap: wrap; margin-top: 20px; width: calc(100% + 10px); margin-left: -5px; }
.watermelon .farmSec .imgList > li{ padding: 5px; width:calc(100% / 4) }
.watermelon .farmSec .imgList .imgBox{ background-size: cover; background-repeat: no-repeat; background-position: center; height:398px; }
.watermelon .farmSec .textWrapDiv{ margin-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.watermelon .farmSec .textWrapDiv .t1{ font-weight: 700; font-size: 26px; font-weight: 700; }
.watermelon .farmSec .textWrapDiv .t2{ margin-top: 15px; font-weight: 700; line-height: 1.25em; font-size: 34px; font-weight: 700; }
.watermelon .farmSec .textWrapDiv .t2 .underline{background: linear-gradient(to top, rgba(255, 82, 136, .2) 50%, transparent 50%);}
.watermelon .farmSec .textWrapDiv .imgBox{ position: relative; display: flex; align-items: center; justify-content: center; }
.watermelon .farmSec .textWrapDiv .imgBox .botbox{ position: absolute; bottom: -100px; }
.watermelon .farmSec .textWrapDiv .textBox2{ font-weight: 700; font-size: 20px; }

.watermelon .farmSec .moreBtn{ color: #fff; background-color: var(--red-color); width: 100%; max-width: 240px; padding: 10px 40px; border-radius: 4px; display: flex; align-items: center; margin: 80px auto 0 auto; gap: 5px; font-size: 20px; font-weight: 700; }


@media screen and (max-width: 1250px) {
    .watermelon .farmSec{ border-width: 10px; }
    .watermelon .farmSec .title{ font-size: 20px; }
    .watermelon .farmSec .textWrapDiv .t1{ font-size: 20px; }
    .watermelon .farmSec .textWrapDiv .t2 .underline{ font-size: 30px; }
    .watermelon .farmSec .textWrapDiv .imgBox .botbox{ width: 250px; }
    .watermelon .farmSec .moreBtn{ font-size: 18px; }

    .watermelon .farmSec .imgList .imgBox{ height: 33vw; }

}
@media screen and (max-width: 950px) {
    .watermelon .farmSec .textWrapDiv{ align-items: center; justify-content: center; }
    .watermelon .farmSec .textWrapDiv .imgBox .botbox{ position: static; text-align: center; }
    .watermelon .farmSec .textWrapDiv .imgBox .botbox{ width: auto; max-width: 100%; }
    .watermelon .farmSec .textWrapDiv .textBox{ width: 100%; margin-bottom: 30px; } 

    .watermelon .farmSec .imgList > li{ width: calc(100% / 2); }
    .watermelon .farmSec .imgList .imgBox{ height: 65vw; }
}
@media screen and (max-width: 650px) {
    .watermelon .farmSec{ padding: 50px 0; }
    .watermelon .farmSec .textWrapDiv .t1{ font-size: 4vw; }
    .watermelon .farmSec .textWrapDiv .t2{ font-size: 5vw; line-height: 1.5em; }
    .watermelon .farmSec .textWrapDiv .t2 br{ display: none; }
    .watermelon .farmSec .textWrapDiv .t2 .underline{ font-size: 16px; }
    .watermelon .farmSec .textWrapDiv .textBox2{ margin-top: 40px; text-align: center; }
    .watermelon .farmSec .moreBtn{ font-size: 16px; max-width: 200px; padding: 10px; justify-content: center; }
}


.floating_icon{ position: fixed; z-index: 99; right: 10px; bottom: 10px; }
@media screen and (max-width: 650px) {
    .floating_icon .icon{ width: 80px; }
}


/* .watermelon .thanksSec */
.watermelon .thanksSec{ word-break: keep-all; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 100px 0; color: #fff; text-align: center; font-family: 'Wavve PADO'; }
.watermelon .thanksSec .inner{ display: flex; flex-direction: column; align-items: center; }
.watermelon .thanksSec .t1{ font-size: 24px; line-height: 1.5em; }
.watermelon .thanksSec .blackBox{ margin-top: 10px; padding: 5px 20px; line-height: 1.5em; background-color: #000; color: #fff; font-size: 24px; border-radius: 10px; }
.watermelon .thanksSec .moBr{ display: none; }
.watermelon .thanksSec .red{ color: #DF3A6D; }
.watermelon .thanksSec .greenBox{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 80px 20px; margin-top: 24px; border: 4px solid #42C17B; border-radius: 10px;background: rgba(255, 255, 255, 0.10); width: 80%; max-width: 1000px; }
.watermelon .thanksSec .greenBox .t1{ position: relative; display: flex; align-items: center; justify-content: center; color: #42C17B; font-size: 56px; text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25); }
.watermelon .thanksSec .greenBox .shiny{ position: absolute; top: -40px; }
.watermelon .thanksSec .greenBox .t2{ font-size: 42px; line-height: 1.25em; margin-top: 20px; }
.watermelon .thanksSec .greenBox .greenBg{ font-size: 42px; margin-top:20px; padding: 7px 20px; border-radius: 8px; background-color: #42C17B; }
.watermelon .thanksSec .greenBox .icon{ position: absolute; }
.watermelon .thanksSec .greenBox .icon1{ left: -100px; top: 20px; }
.watermelon .thanksSec .greenBox .icon2{ right: -100px; bottom: 20px; }
.watermelon .thanksSec .itemList{ margin: 0 auto; max-width: 1020px; display: flex; flex-wrap: wrap; margin-top: 20px;  width: 80%; }
.watermelon .thanksSec .itemList > li{ width: calc(100% / 3); padding: 10px; }
.watermelon .thanksSec .itemList .item{ line-height: 1.5em; font-size: 26px; padding: 40px 20px; background: rgba(255, 255, 255, 0.10); border-radius: 10px; border: 4px solid #DF3A6D; }
.watermelon .thanksSec .itemList .item .after{ color: #DF3A6D; font-size: 1.25em; }

@media screen and (max-width: 1250px) {
    .watermelon .thanksSec .greenBox .icon1{ width:15vw; left: -8vw; }
    .watermelon .thanksSec .greenBox .icon2{ width:15vw; right: -8vw; }
    .watermelon .thanksSec .greenBox .shiny{ width: 120%; bottom: 10%; }
}
@media screen and (max-width: 950px) {
    .watermelon .thanksSec .moBr{ display: inline-block; }
    .watermelon .thanksSec .greenBox .t1{ font-size: 6vw; }
    .watermelon .thanksSec .greenBox .t2{ font-size: 5vw; }
    .watermelon .thanksSec .greenBox .greenBg{ font-size: 4vw; padding: 1vw 4vw; }
    .watermelon .thanksSec .itemList .item{ padding: 2vw 2vw; font-size: 2vw; word-break: keep-all; height: 100%; }
}
@media screen and (max-width: 650px) {
    .watermelon .thanksSec{ padding: 50px 0; }
    .watermelon .thanksSec .t1{ font-size: 4vw; }
    .watermelon .thanksSec .blackBox{ padding: 1vw 2vw; font-size: 4.5vw; }
    .watermelon .thanksSec .greenBox{ width: 90%; padding: 8vw 1vw; }
    .watermelon .thanksSec .itemList{ width: 90%; }
    .watermelon .thanksSec .greenBox .t1{ font-size: 8vw; }
    .watermelon .thanksSec .greenBox .icon{ z-index: 2; }
    .watermelon .thanksSec .greenBox .t2{ font-size: 6vw; }
    .watermelon .thanksSec .greenBox .greenBg{ font-size: 5vw; padding: 1vw; }
    .watermelon .thanksSec .itemList > li{ padding: .5vw; width: 100%; }
    .watermelon .thanksSec .itemList .item{ font-size: 3.5vw; }
}
#hd_pop{ width: 100%; }
@media screen and (max-width: 700px) {
    .hd_pops_con{ max-width: 100%; height:auto !important; min-height: 200px; }
    .hd_pops{ max-width: 95%; left: 2.5% !important; height: auto !important; min-height: 200px;  }
}