@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* 사협생협 회원가입 */
.join-container img { width: 100%; max-width: 1200px; }
.top-bg_header { width: 100%; height: 60px; background-image: url("/coopmall/images/r16/sub/subline.jpg"); text-align: center; }
.top-bg_header span { padding: 15px; font-size: 15pt; line-height: 50px; background-color: #ffffff; font-weight: bold; }
.join-top { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 500px; background: url("/join/images/join_mockup2.jpg") no-repeat; background-position: right bottom; line-height: 1.2; text-align: left; }
.join-top p:first-child { font-size: 43px; }
.join-top p:last-child { padding-top: 20px; font-size: 26px; font-weight: 300; line-height: 1.4; }
.join-line { background-color: #a01749; }
.join-line p { padding: 24px 0; color: #fff; font-size: 27px; font-weight: 300; }
.join-sub-tit { margin: 60px auto 40px; line-height: 1.4; font-size: 35px; font-weight: 700; }
.join-box { width: 910px; height: 100px; line-height: 100px; border: 2px solid #dcdcdc; font-size: 30px; margin: 0 auto 20px; }
/* .txt_l p:last-child { font-size: 26px; font-weight: 300; line-height: 1.6; margin-bottom: 120px; } */
.join-container.v2 .join-top { height: 570px; background: url("/join/images/join_mockup.jpg") no-repeat; background-position: right bottom; line-height: 1.4; }
.join-container.v1 .join-top p:first-child { color: #a01749; }
.join-container.v2 .join-top p:first-child b { color: #a01749; font-weight: bold; }
.join-container.v2 .txt_l p:nth-child(2n) { font-size: 26px; font-weight: 300; line-height: 1.6; }
  @media screen and (max-width: 767px) {
.join-container img { width: 100%; }
  .join-container * { text-align: center;   font-size: 15px;   box-sizing: border-box;   word-break: keep-all; }
  .join-container .inner { padding: 0 20px; }
  .join-top { justify-content: flex-start;   width: 100%;   height: 440px;   background: url("/join/images/join_mockup_m.jpg") no-repeat;   background-position: center bottom; background-size: 80%; line-height: 1.4; text-align: center; }
  .join-top p:first-child { padding: 30px 30px 0;   font-size: 24px;   font-weight: 600; }
  .join-top p:last-child { padding-top: 10px;   font-size: 15px; }
  .join-line p { padding: 12px 0;   font-size: 15px; }
  .join-sub-tit { margin: 40px auto 10px;   line-height: 1.4;   text-align: left; }
  .txt_c .join-sub-tit { text-align: center; }
  .join-box { width: 100%;   height: auto; line-height: inherit; padding: 15px 0; }
  /* .txt_l p:last-child { font-size: 15px; text-align: left; } */
  .join-container.v2 .join-top { height: 590px;   background: url("/join/images/join_mockup_m2.jpg") no-repeat; background-size: 85%; background-position: center bottom; }
  .join-container.v2 .join-top p:first-child { padding: 30px 0 0;   font-size: 20px; font-weight: 300; }
  .join-container.v2 .join-top p:first-child b { font-size: 20px; }
  .join-container.v2 .join-sub-tit:first-child { margin: 40px auto 10px; }
  .join-container.v2 .txt_l p:nth-child(2n) { font-size: 15px;   text-align: left; }
}


/* 샵메인 팝업 */
.main_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; width: 450px; box-sizing:border-box; border-radius:20px; box-shadow:2px 5px 10px rgba(34,34,34,0.2); display:none; z-index:9999; }
#main_popup1 {top:30px; left:12%; background-color:#fbf6ef; width: 640px; height: 800px; padding:80px 40px 40px;}
.main_popup .btn_close { font-size: 0; position: absolute; top:30px; right:30px;cursor: pointer; z-index: 1;}
.main_popup .popheader { text-align: center;}
.main_popup .poptitle { font-size:30px; font-weight:bold; color:#252525; line-height:1.2; margin-top:20px; }
.main_popup .popsearch { width: 100%;}
.main_popup .popsearch input { border: 1px solid #ccc; border-radius: 10px; width: calc(100% - 40px); margin: 20px 20px 0; padding: 10px 10px 10px 40px; font-size: 16px; background-image: url('/coopmall/images/r16/main/ico_search.png'); background-repeat: no-repeat; background-position: left 6px center; background-size: 24px; font-family: 'Noto Sans KR';}
.main_popup .popsearch select { border: 1px solid #ccc; border-radius: 10px; width: calc(100% - 40px); margin: 20px 20px 0; padding: 10px; font-size: 16px; font-family: 'Noto Sans KR'; height: auto;}
.main_popup .popsearch.searchselect {display: none;}
.main_popup .popcontent {position: relative; font-size: 14px;padding: 20px 20px 30px 20px;}
.main_popup .popcontent .poptext { height: 340px; overflow-y: auto;}
.main_popup .popcontent .poptext::-webkit-scrollbar {background-color: #fff; width: 7px;}
.main_popup .popcontent .poptext::-webkit-scrollbar-thumb {background-color: #666666; border-radius: 5px;}
.main_popup .popcontent .item {border-bottom: 1px solid #eee; padding: 15px 0; cursor: pointer;}
.main_popup .popfooter {position:relative; margin:10px 0 20px; text-align: center;}
.main_popup .popfooter #sup_btn {display: inline-block; padding: 8px 24px; background-color: #0f8a9f; font-size: 16px; line-height: 1.6; color: #fff;border-radius: 4px; cursor: pointer;}

#main_popup2 {top:10%; left:50%; transform: translateX(-50%); background-color: #FEF3F7; padding: 40px; width:910px; text-align: left; background-image: url('/coopmall/img/popup_icon_pc.jpg'); background-repeat: no-repeat; background-position: bottom right;}
#main_popup2 .btn_close {background-image: url('/mobile/img/btn_close_new.png'); background-size: contain; width: 24px; height: 24px;}
#main_popup2 .popuser {margin-bottom: 25px; font-size: 2rem; }
#main_popup2 .popuser span { color: #7A4CB9; font-weight: 600; position: relative;}
#main_popup2 .popuser span:after {content:''; display: block; width: 100%; height: 1px; position: absolute;left: 0; bottom: -1px; background-color: #D6B588;}
#main_popup2 .popto1 {margin-bottom:20px; font-size: 1.7rem; color: #352F31; word-break: keep-all;}
#main_popup2 .popto2 {font-size: 1.7rem; color: #f82252;}
#main_popup2 .button_area {margin: 30px auto 20px; text-align: center;}
#main_popup2 .close_btn {width:130px; height:45px; line-height: 45px; margin-right: 10px; color: #fff; background-color: #7b7b7b; border: 0; font-size: 1.7rem; font-family: 'Noto Sans Kr',sans-serif; cursor: pointer;}
#main_popup2 .go_btn {display: inline-block; width:130px; height:45px; line-height: 45px; color: #fff; background-color: #7a4cb9;font-size: 1.7rem;vertical-align: bottom;}
#main_popup2 .popfooter {position: absolute; bottom: 60px; left: 40px;}

#main_popup3 {top:30px; left:50%; display: block; background-color: #FBF6EF; width: 582px; padding: 20px 10px 60px;}
#main_popup3 .btn_close {right: 20px; background-image: none;}

#main_popup4 { top:10%; left:50%; width: 720px; background-color: #050738; border-radius: 0; }
#main_popup4 .popfooter {bottom: 110px; left: 50px; }
#main_popup4 .popfooter .checkPrd {color: #fff; font-size: 15px;}
#main_popup4 .close_btn {width:130px; height:45px; line-height: 45px; color: #000; background-color: #a7a7a7; border: 0; border-radius: 10px; font-size: 1.7rem; font-family: 'Noto Sans Kr',sans-serif; cursor: pointer;}

#main_pop_left {position:absolute; margin-top:-77px; margin-left:26px; background-color: transparent; width:125px; height:45px; text-align: center;}
#main_pop_right {position:absolute; margin-top:-77px; margin-left:158px; background-color:transparent; width:125px; height:45px; text-align: center;}
#main_pop_left2 {position:absolute; margin-top:-77px; margin-left:26px; background-color:#339e41; width:125px; height:45px; text-align: center;}
#main_pop_right2 {position:absolute; margin-top:-77px; margin-left:158px; background-color:#339e41; width:125px; height:45px; text-align: center;}
@media screen and (max-width: 767px) {
    .main_popup  { width: 90%; height:auto; top:50%; left:50%; transform: translate(-50%,-50%); padding: 8px 20px 10px;}
    #main_popup1 {width: 90%; height:auto; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; padding: 80px 25px 60px;}
    .main_popup .btn_close {width: 24px; height:24px; }
    .main_popup .poptitle {font-size: 2.4rem;}
    .main_popup .popcontent a {margin-top:20px; font-size: 16px; padding: 14px 30px;}
    .main_popup .popsearch input {width: calc(100% - 90px);}
    .main_popup .popfooter p {margin-top: 40px;}
    .main_popup .popfooter .checkPrd {width: 165px;}

    #main_popup2 {top:5%; width: 320px; padding: 70px 20px 20px; border-radius: 10px; background-image: url('/coopmall/img/popup_icon_mo.jpg'); background-position: center 2%; background-size: 86px;}
    #main_popup2 .btn_close {top:19px; right:21px;}
    #main_popup2 .popuser {text-align: center; font-size: 2.2rem;}
    #main_popup2 .popuser span {border-bottom: 1px solid #D6B588;}
    #main_popup2 .poptxt {max-height: 280px; overflow: auto; }
    #main_popup2 .popto1 {font-size:1.8rem; word-break: break-all;}
    #main_popup2 .popto2 {font-size: 1.8rem;word-break: break-all;}
    #main_popup2 .button_area {margin: 25px auto 50px;}

    #main_popup3 {width: 90%; height:auto; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; padding: 28px 25px 60px;}
    #main_popup3 .btn_close {right: 27px; z-index:1;}
    
    #main_popup4 { top:50%; width: 320px;}
    #main_popup4 .button_area {text-align: center; padding-top: 30px;}
    #main_popup4 .close_btn {height: 36px; line-height: 36px; bottom: 100px; left: 15px;}
    #main_popup4 img {width: 100%;}
}

/* 전역에서 사용할 상품table css */
.prdList { display:flex; flex-wrap: wrap;}
.prdWrap { position: relative; width: calc(100% / 4 - 15px); height: 470px; margin-right: 20px; margin-bottom: 40px;}
.prdWrap:nth-child(4n) { margin-right: 0;}
.prdWrap a, .prdWrap p { color: #252525; font-size: 13px;}
.prdWrap .prd-img-area { position:relative; top:0px; left:0px; width: 295px; height: 295px; margin:0px; margin-bottom:4px;}
.prdWrap .prd-img-area .prd-sticker { position: absolute; top: 4px; left: 4px; z-index: 2;}
.prdWrap .prd-img-area .discount-rate { top: 0px; left: 0px; position: absolute; width: 58px; height: 55px; background-color: #0FC2C6; font-size: 15pt; line-height: 55px; color: #FFFFFF; text-align:center; z-index: 9}
.prdWrap .prd-img-area .ds-period-area { top: 0px; left: 60px; position: absolute; width: 215px; height: 55px;text-align:center;line-height:3.5; z-index: 9}
.prdWrap .prd-img-area .ds-period { position:relative; font-weight:bold; color:white; font-size:15px; z-index:2; line-height:55px;}
.prdWrap .prd-img-area .ds-period-bg { top:0px;right:0px; position:absolute;width:215px; height:55px; opacity:0.25;background-color:black;z-index:0;}
.prdWrap .prd-img-area > a, .prdWrap .prd-img-area .prd-link { display: block; width: 100%; height: 100%; line-height: 1; object-fit: cover; overflow: hidden;}
.prdWrap .prd-img-area a > img, .prdWrap .prd-img-area .prd-link img { width: 100%; height: 100%; transition: all .3s ease-in-out; object-fit: cover;}
.prdWrap .prd-img-area a > img:hover, .prdWrap .prd-img-area .prd-link img:hover { transform: scale(1.05);}
.prdWrap .tag { height: 24px;}
.prdWrap .tag img { height: 24px;}
.prdWrap .prd-name a { line-height: 1;  font-weight: bold;  font-size: 1.7rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.prdWrap .prd-des { line-height: 1.3; color: #333; overflow: hidden; text-overflow: ellipsis; word-wrap: normal; display: inline-block; -webkit-line-clamp: 1; white-space: nowrap; width: 270px; cursor: default;}
.prdWrap .prd-des.sale { font-size: 1.5rem; font-weight: bold; line-height: 1;}
.prdWrap .prd-des .sale { color: #f65d19;}
.prdWrap .prd-tit-area { height: 66px; padding: 5px 0 10px; vertical-align: top;}
.prdWrap .prd-weight { line-height: 1.5;}
.prdWrap .price-area { padding: 5px 0 0; border-top: 1px solid #dadada; line-height: 1.7;}
.prdWrap  .price-area .price_sale { color: #a01749; font-size: 2rem; font-weight: 600; line-height: 1.2;}
.prdWrap  .price-area .price_sale .unit { color: #353535; font-size: 1.5rem;}
.prdWrap  .price-area .price_mem { font-size: 1.5rem; color: #808080; text-decoration: line-through; padding-left: 12px;}
.prdWrap  .price-area .price_normal { color: #808080; font-size: 1.5rem;}
.prdWrap  .price-area .price_normal .unit { font-size: 1.4rem;}
.prdWrap .cart-area { display: inline-block; position: absolute; bottom: 0; right: 0;}
.prdWrap .prd-cart { position: absolute; right: 5px; bottom: 12px; width: 27px; height: 27px; background: url('/coopmall/images/r16/main/main_cart.png') no-repeat; background-position: center; background-size: 100%; border: 0;}
.prdWrap .prd-cart .cart-count { position: absolute; top: -6px; right: -5px; width: 17px; height: 17px; line-height: 1.2; color: #fff; background-color: #a01749; border: 2px solid #fff; border-radius: 50%; text-align: center;}
.prdWrap .cart-area .cart-count { display: none; position: absolute; bottom: 27px; right: -2px; width: 17px; height: 17px; line-height: 1.2; color: #fff; background-color: #a01749; border: 2px solid #fff; border-radius: 50%; text-align: center; z-index: 3;}
.prdWrap .cart-area .cart-count.on { display: inline-block;}
.prdWrap .prd-favor { position: absolute; right: 45px; bottom: 12px; width: 27px;}

/***************************** recipe list *****************************/
.titWrap { display: flex; align-items: baseline; justify-content: space-between; padding-top: 40px;}
.titWrap h2 { font-size: 3rem; font-weight: 600; line-height: 2;}
.titWrap .route { display: flex; align-items: center; font-size: 1.5rem; color: #999; line-height: 3;}
.titWrap .route a { position:relative; display: inline-block; margin-right: 10px; line-height: 2;}
.titWrap .route a.home { width: 16px; height: 16px; background: url('/coopmall/images/r16/main/home.png') no-repeat center; background-size: 100%;}
.titWrap a { color: inherit;}
.recipeSort { margin-top: 30px;}
.recipeSort .sortTop { display: flex; align-items: center; justify-content: space-between;}
.recipeSort .sortCate ul { display: flex; align-items: center;}
.recipeSort .sortCate ul li { position: relative; display: inline-block; padding-right: 16px; margin-right: 15px;}
.recipeSort .sortCate ul li:after { content: ''; position: absolute; top: 5px; right: -1px; width:1px; height: 14px; background-color: #999;}
.recipeSort .sortCate ul li:last-child:after { content: none;}
.recipeSort .sortCate ul a { display: block; font-size: 1.5rem; line-height: 1.5;}
.recipeSort .sortCate ul a.active { color: #0f8a9f; font-weight: 500;}
.recipeSort .searchBox { position: relative;}
.recipeSort .searchBox input { width: 300px; height: 40px; padding: 0 45px 0 20px; font-size: 1.4rem; line-height: 40px; border: 1px solid #858585; border-radius: 20px; box-sizing: border-box;}
.recipeSort .searchBox input::placeholder { color: #999; font-family: 'NanumBarunGothic', 'Noto Sans KR', '맑은 고딕', dotum, sans-serif;}
.recipeSort .searchBox a { position: absolute; top: 0; right: 6px; width: 40px; height: 40px; background: url('/coopmall/images/r16/main/ico_search.png') no-repeat center 42%; background-size: 24px;}
.recipeSort .sortBot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 10px 20px; background-color: #f6f6f6;}
.recipeSort .sortBot .count { font-size: 1.5rem; color: #999; line-height: 1.5;}
.recipeSort .sortBot span { font-size: 1.8rem; font-weight: 500; color: #0f8a9f;}
.recipeSort .sortBot select { width: 154px; margin-bottom:10px;}
.recipeList.active { display: flex; flex-wrap: wrap;}
.recipeList { display: none;}
.recipeList .listCont { width: calc(100% / 4 - 20px); margin-right: 26px; margin-top: 60px;}
.recipeList .listCont:nth-child(4n) { margin-right: 0;}
.recipeList .listCont .imgWrap { overflow: hidden; position:relative;}
.recipeList .listCont a { display: block; }
.recipeList .listCont .imgWrap img { position: relative; width: 280px; height: 280px; /* transform: scale(1.1); */ object-fit: cover;}
.recipeList .listCont .txtWrap { margin-top: 15px;}
.recipeList .listCont .recipeTit { font-size: 1.7rem; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.recipeList .listCont .recipeExp { margin-top: 5px; color:#616161; font-size: 1.4rem;}
.recipeList .listCont .icoBox { margin-top: 10px; color:#9e9e9e;}
.recipeList .listCont .icoBox span { font-size: 1.4rem; line-height: 1.5;}
.recipeList .listCont .icoBox span + span { margin-left: 14px;}
.recipeList .listCont .icoBox span:before { content: ''; display: inline-block; width: 20px; height:20px; margin-right: 5px; vertical-align: top;}
.recipeList .listCont .icoBox .recipeTime { background: url('/coopmall/icoop/recipe/images/img/time_grey9e.png') no-repeat;}
.recipeList .listCont .icoBox .recipeQuantity { background: url('/coopmall/icoop/recipe/images/img/person_grey9e.png') no-repeat;}
.pagination { margin: 60px auto; text-align: center;}

/***************************** recipe detail *****************************/
#dietaryCare_detail .contTopWrap {min-height: 580px;}
.contTopWrap { display: flex; min-height: 765px; margin-top: 20px;}
.contTopWrap .imgWrap { width: 580px; padding-right: 40px; border-right: 1px solid #dedede; overflow: hidden;}
.contTopWrap .imgWrap img { width: 100%; height: 100%; object-fit: cover; box-sizing: border-box;}
.contTopWrap .txtWrap { width: 579px; padding-left: 40px; position: relative;}
.contTopWrap .txtWrap .contTitWrap { }
.contTopWrap .txtWrap .contTitWrap .recipeCate { margin-bottom: 5px; color: #353535; font-size: 1.4rem; font-weight: 300;}
.contTopWrap .txtWrap .contTitWrap .recipeName { font-size: 2.4rem; font-weight: 500; color: #353535; width: 80%; max-height: 75px; overflow: hidden; word-break: keep-all; text-overflow: ellipsis;}
.contTopWrap .txtWrap .contTitWrap .carePrice {font-size: 2.4rem; font-weight: 600; margin: 10px 0 40px;}
.contTopWrap .txtWrap .contTitWrap .recipeExp { margin-top: 3px; font-size: 1.6rem; color: #999;}
.contTopWrap .txtWrap .contDetailWrap dl {display: flex; font-size: 1.6rem; padding: 10px 0;}
.contTopWrap .txtWrap .contDetailWrap dt {width: 124px;}
.contTopWrap .txtWrap .ingredientWrap { margin-top: 20px; padding: 25px 0 40px; border-top: 1px solid #dedede;}
.contTopWrap .txtWrap .ingredientWrap dl { display: flex; align-items:center;}
.contTopWrap .txtWrap .ingredientWrap dt { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; height: 50px; font-size: 1.6rem; color: #fff; border-radius: 10px; font-weight: 500; background-color: #0f8a9f;}
.contTopWrap .txtWrap .ingredientWrap dd { padding-left: 40px; font-size: 1.5rem; line-height: 1.7;}
#dietaryCare_detail .contTopWrap .txtWrap .recipeWrap {position: relative; left: 0; margin-top: 40px;}
.contTopWrap .txtWrap .recipeWrap { position: absolute; bottom: 0; left: 40px; right:0; padding: 20px; background-color: #f9f9f9; border-radius: 20px;}
.contTopWrap .txtWrap .recipeWrap dt { display: flex; align-items: flex-end; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #999;}
.contTopWrap .txtWrap .recipeWrap dt p { font-size: 1.8rem; font-weight: 500; line-height: 1.4;}
.contTopWrap .txtWrap .recipeWrap .icoBox { margin-left: 20px; color:#858585; line-height: 1.6;}
.contTopWrap .txtWrap .recipeWrap .icoBox span { font-size: 1.4rem; line-height: 1.5;}
.contTopWrap .txtWrap .recipeWrap .icoBox span + span { margin-left: 14px;}
.contTopWrap .txtWrap .recipeWrap .icoBox span:before { content: ''; display: inline-block; width: 20px; height:20px; margin-right: 5px; vertical-align: top;}
.contTopWrap .txtWrap .recipeWrap .icoBox .recipeTime { background: url('/coopmall/icoop/recipe/images/img/time_grey85.png') no-repeat;}
.contTopWrap .txtWrap .recipeWrap .icoBox .recipeQuantity { background: url('/coopmall/icoop/recipe/images/img/person_grey85.png') no-repeat;}
.contTopWrap .txtWrap .recipeWrap dd { font-size: 1.5rem; line-height: 2;}
.recipePrd { position: relative; margin-top: 60px;}
.recipePrd .recipePrdTit { margin-bottom: 10px; font-size: 2.5rem; font-weight: 500; line-height: 3;}
.recipePrd .recipePrdTit span { margin-left: 20px; font-size: 1.7rem; color: #858585; font-weight: 400;}
.recipePrd .addCart { position: absolute; top: 25px; right: 0; background-color: #0f8a9f; width: 212px; height: 40px; border: 0; border-radius: 5px; font-family:  'Noto Sans KR', 'NanumBarunGothic', '맑은 고딕', dotum, snas-serif; color: #fff; text-align: center; font-size: 1.5rem; font-weight: 500;}
.recipePrd .addCart:before { content: ''; display:inline-block; width: 24px; height: 24px; background: url('/coopmall/icoop/recipe/images/img/cart_w.png') no-repeat; background-size: contain; vertical-align: bottom; padding-right: 4px;}
.recipePrd .prdWrap .prd-img-area .discount-rate { left: 48px; right: auto;}
.recipePrd .prdWrap .prd-img-area .ds-period-area { right: 0; left: auto;}
.recipePrd .prdWrap .prd-img-area .ds-period-area { width: 187px;}
.recipePrd .prdWrap .prd-img-area .ds-period-bg { width: 187px;}
.recipePrd .prdWrap .prd-tit-area { height: auto; padding: 10px 0 5px;}
.recipePrd .prdWrap .prd-tit-area .prd-name a { line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.recipePrd .prdWrap .price-area { border: 0;}
.recipePrd .prdWrap .cart-area { bottom: 10px; right: 10px;}
.recipePrd .prdWrap .cart-area a { display: block; width: 36px; height: 36px; border-radius: 50%; background-color: #a01749; opacity: .6; font-size:0;}
.recipePrd .prdWrap .prd-cart { bottom:7px; right: 7px; width: 22px; height: 22px; background: none;}

.checkPrd input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkMark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #fff; border: 1px solid #c5c5c5; border-radius: 3px;}
.checkPrd input:checked~.checkMark:after { display: block;}
.checkPrd .checkMark:after { content: ""; position: absolute; display: none; left: 7px; top: 2px; width: 7px; height: 12px; border: solid white; border-color:#0f8a9f; border-width: 0 4px 4px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-radius: 2px;}
.checkPrd input:disabled~.checkMark { background-color: #ddd; border: 1px solid #c5c5c5;}
.checkPrd input:disabled~.checkMark:after { display: block; border-color:#ddd;}
.checkPrd input:disabled:checked~.checkMark:after { display: block; border-color:#c5c5c5;}
.checkPrd{ position:absolute; top:10px; left:10px; display: inline-block; vertical-align: middle; color: #222; font-size: 14px; line-height: 20px; padding: 0 0 0 30px; z-index: 1;}
.checkPrd input:checked~.checkMark{ border:1px solid #c5c5c5; background:#fff;}
.selectOpt { position: absolute; bottom: 72px; right: 20px;}

.recipePrd .imgWrap a { display: block; width: 100%; height: 220px;}
.recipePrd .imgWrap img { width: 100%; height: 100%; object-fit: cover;}
.recipePrd .txtWrap { margin-top: 12px;}
.recipePrd .txtWrap .recipeTit { font-size: 1.8rem; font-weight: 500; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.recipePrd .txtWrap .recipeExp { margin-top: 5px; color: #616161; font-size:1.5rem; line-height: 1;}
@media screen and (max-width:767px) {
    .recipeSort .sortTop {flex-direction: column; padding: 0 20px; align-items: flex-start;}
    .recipeSort .sortTop .sortCate {margin-bottom: 20px;}
    .recipeSort #frmrecipe {width: 100%;}
    .recipeSort .searchBox input {width: 100%; }
    .recipeSort .sortBot select {line-height: 1;}
    .recipeList {padding: 0 20px}
    .recipeList .listCont { width: calc(100% / 2 - 10px); margin-right: 20px;}
    .recipeList .listCont:nth-child(2n) {margin-right: 0;}
    .recipeList .listCont .imgWrap { display: flex; align-items: center;justify-content: center; max-height: 180px;}
    .recipeList .listCont .imgWrap img {width: 100%; height: 100%;}
    .recipePrd .recipePrdTit {padding: 0 20px; line-height: 1.4;}
    .recipePrd .recipePrdTit span {margin: 0; display: block;}
    .recipePrd .addCart {position: static; margin: 0 20px 20px;} 
    .recipePrd .prdWrap .prd-img-area .ds-period-area {display: none;}
    .recipePrd .prdWrap .prd-img-area .discount-rate {left: auto; right: 0; width: 50px; height: 50px; font-size: 18px;}
    .titWrap {padding: 10px 20px;}
    .titWrap .route {display: none;}
    .contTopWrap {flex-direction: column; min-height: auto; margin: 0; }
    .contTopWrap .imgWrap {width: 100%; padding: 0 20px; overflow: visible; border: 0;box-sizing: border-box;}
    .contTopWrap .txtWrap {width: 100%; padding: 20px;box-sizing: border-box;}
    .contTopWrap .txtWrap .ingredientWrap dl {align-items: flex-start;}
    .contTopWrap .txtWrap .ingredientWrap dd {padding-left: 20px;}
    .contTopWrap .tooltipCommon.typeShare .icoShare {top: 20px; right: 20px;}
    .contTopWrap .txtWrap .recipeWrap {position: relative; bottom: auto; left: auto; right: auto;}
    .prdList {padding: 0 20px 40px;}
    .prdWrap {width: calc(100% / 2 - 10px);height: auto;}
    .prdWrap:nth-child(2n) {margin-right: 0;}
    .prdWrap .prd-img-area {width: 100%; height: 170px;}
    .prdWrap .selectOpt {position: static; line-height: 1.4;}
    .prdWrap .prdWrap {margin-bottom: 0;}
}

/* 공통 카트모달창 */
#cart_modal-container {display:none;position:fixed; width: 100%; height: 100%; top:0px; left:0px; z-index: 99; }
#cart_modal-wrap {display:flex; align-items: center; flex-direction: column;min-height:100%; background-color:rgba(0, 0, 0, 0.57);}
#cart_modal-backcvr {position:fixed; width: 100%; min-height:100%;z-index:10;}
#cart_modal-content {width: 400px; margin:auto; background-color:#FFFFFF;border-radius:10px;  color:#414141; z-index: 11;}
#cart_modal-content-top { display: flex; align-items: center;height: 40px; line-height: 40px;padding: 10px;background-color:#EFEFEF;border-radius: 10px 10px 0 0px;font-size: 13pt; }
#cart_modal-content-top img {margin-right:10px; height:22px;}
#cart_modal-content-wrapper {padding-bottom: 20px;}
#cart_modal-content-main {width: 100%;margin: auto; position: relative;}
#modal-data-gname {width: 90%; height: 50px; line-height:50px; margin:auto; font-weight:bold; text-align:center;font-size: 1.8rem;}
#modal-content-info {margin:0 auto 20px; padding:20px;border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;}
#modal-content-info p {line-height: 30px;font-size: 1.7rem;}
#modal-content-info span {font-size: 1.7rem;}
#modal-content-info #tomorrow_price span:first-child {color:#049EA0;}
#modal-content-ordering {width: 85%; min-height:75px;margin:auto}
#modal-content-ordering .quantity-wrap {display:flex; align-items:center; justify-content:center;}
#modal-content-ordering .quantity img {width:37px; height:37px; margin:0 8px;}
#modal-content-ordering .quantity_num input{width: 37px;height:37px;border:1px solid rgb(204,204,204);text-align:center; font-weight:bold;}
#modal-content-ordering #modal-content-totalprice {margin: 0 20px 0 10px;}
#modal-content-ordering span {font-size: 1.8rem;}
#btn_bookmark {width: 37px; height: 37px; line-height: 30px; margin: 1px; text-align:center; vertical-align:middle; background:url('/mobile/img/bmark.jpg') no-repeat; background-size: 37px 37px; position: absolute; bottom: 2px; }
.modal-btn-wrap {display: flex;align-items: center;justify-content: center;width: 85%; margin:auto; text-align:right;line-height:250px;}
.cart_add_btn {width: 140px;min-height: 41px; line-height: 41px; text-align:center;border-radius: 5px;color: #fff;font-weight: bold;font-size:14px; cursor: pointer; }
.cart_add_btn#normal-cart-btn {background-color:#EC5A69; }
.cart_add_btn#modal-content-subscribe {margin: 0 5px; padding: 0 10px;  background-color:#3284d9;}
.lifecare-order {display: flex;align-items: center;justify-content: center;width:100%;padding-top:10px;}
.lifecare-order .cart_add_btn {background-color: #5c0f8b;}
.pointColor {color: #EC5A69;}

@media screen and (max-width:720px) {
	#cart_modal-content {width:300px;}
	#modal-content-info p {font-size: 17px;}
	#modal-content-info span {font-size:17px;}
	#modal-content-ordering > div {flex-direction: column;}
	#modal-content-ordering span {font-size: 18px;}
	#modal-content-ordering #modal-content-totalprice {margin: 20px 0; text-align: center;}
}

/* 이용약관, 개인정보취급방침 */
.clsTab{height:60px; margin:20px 0 40px; max-width: 1200px;}
.clsTab li{display:block; float:left; width:33.3%;}
.clsTab li a{display:block; padding:14px 0; line-height:30px; border-top:1px solid #ddd; border-right:1px solid #ddd;  border-bottom: 1px solid #ddd; background:#f6f6f6; text-align:center; font-size:18px; font-weight:500; color:#333; text-decoration:none}

.clsTab li:first-child{width:33.3%;}
.clsTab li:first-child a{border-left:1px solid #ddd}
.clsTab li.on a{padding:14px 0; border:1px solid #ddd; border-left:0; border-bottom:1px solid #fff; background:#a01749; color:#fff}

.clsTab li:first-child.on a{border-left:1px solid #ddd;}

/* 체크박스 */
.check_area .check_all_area { margin: 60px auto 20px; padding: 15px 30px; border: 1px solid #eee; box-shadow: 0 10px 20px rgba(25,25,25,0.1); border-radius: 12px;}
.check_area .check_all_area label { font-size: 1.2rem; font-weight: 600; width: 100%;}
.check_area .check_all_area label .input_box {width: 25px; height: 25px;}
.check_area .check_all_area label input[type='radio']:checked+.input_box i,
.check_area .check_all_area label input[type='checkbox']:checked+.input_box i {font-size: 1.5rem;}

.check_area .check_wrap {padding: 10px 0;}
.check_area .check_item {display: flex; align-items: center; justify-content: space-between; }
.check_area .check_item span { display: inline-block; width: 24px; height: 24px;}
.check_area .check_item span img {width: 12px;}
.check_area label {display:inline-flex; align-items:center; padding:10px 0; color:#707070;}
.check_area label input[type='radio'],
.check_area label input[type='checkbox'] {display:none; margin-right:5px;}
.check_area label .input_box {display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px solid #ddd; border-radius:15px; margin-right:15px; transition:.2s;}
.check_area label .input_box i {font-weight:600; color:#353535; transform:scale(0); transition:.2s;}
.check_area label input[type='radio']:checked+.input_box,
.check_area label input[type='checkbox']:checked+.input_box {border-color:#009ea1; background:#009ea1;}
.check_area label input[type='radio']:checked+.input_box i,
.check_area label input[type='checkbox']:checked+.input_box i {transform:scale(1); color:#fff;}

.check_area label > p {display:flex; align-items:center; font-size:.9rem;}
.check_area .agree-check {display:inline-block; font-size:.7rem; padding:2px 4px; background-color:#eee; margin-left:6px; border-radius:4px; cursor:pointer;}
.check_area .clause-txt {display:block; resize:none; width:100%; height:100px; border:1px solid #d6d6d6;padding:6px; font-size:.9rem; transition:all .2s; overflow-y:scroll;}

/* 라케TV */
.tv_titleWrap {border-bottom: 1px solid #dadada; background-color:#f9f9f9; padding: 36px 0;}
.tv_titleWrap .tit {font-size: 24px; font-weight: 600; color: #252525;}
.tabWrap {background-color: #f4f4f4; border-bottom: 1px solid #dadada;}
.tabWrap ul li {width: 176px; color: #252525; font-size: 18px; border-right: 1px solid #dadada;}
.tabWrap ul li:first-child {border-left: 1px solid #dadada; }
.tabWrap ul li.active {background-color: #fff; border-bottom: 0;}
.tabWrap ul li a {display: block; padding: 12px 0; text-align: center;}
.tabWrap ul li.active a {border-bottom: 2px solid #a01749; color: #a01749; font-weight: 600;}
#frmcont {display: flex; justify-content: flex-end; margin: 30px 0 20px;position: relative; }
#frmcont #search_keyword {border: 0; border-bottom: 2px solid #a01749; width: 280px; height: 40px; line-height: 40px; padding-right:45px; font-size: 15px; font-family: 'AppleSDGothicNeo', 'NanumSquare', 'Noto Sans KR', 'NanumBarunGothic', sans-serif; background-color: #fff;}
#frmcont .btnSearch {position: absolute; top: 0; right: 6px; width: 40px; height: 40px; background: url('/coopmall/img/common/icon_search.jpg') no-repeat center 42%; background-size: 23px;}
.contList {flex-wrap: wrap;}
.contList .contItem {width: calc(25% - 15px); margin-right: 20px; margin-bottom: 60px;}
.contList .contItem:nth-child(4n) {margin-right: 0;}
.contList .contItem .imgWrap {position: relative;}
.contList .contItem .imgWrap img {width: 100%;}
.contList .contItem .imgWrap img.best {width: auto; position: absolute; top: 0; left: 0;}
.contList .contItem .txtWrap {text-align: left; margin-top: 5px;}
.contList .contItem .txtWrap .cate {font-size: 15px; font-weight: 600; color: #a01749; }
.contList .contItem .txtWrap .tit {font-size: 18px; font-weight: 600; color: #252525;}
.contList .contItem .txtWrap .refBox {margin-top: 3px; color: #9e9e9e; font-size: 14px; }
.contList .contItem .txtWrap .viewCount {position: relative; margin-left: 2px; margin-right: 7px; padding-right: 13px;}
.contList .contItem .txtWrap .viewCount:after {position: absolute; display: block; content: ''; background-color: #ccc; width: 1px; height: 12px; top: 5px; right: 0;}
.pagination span {font-size: 18px; margin: 0 10px; color: #8d8d8d;}
.pagination b {font-size: 18px; margin: 0 10px; text-decoration: underline; color:#a01749;}


/* 라케TV 상세 */
.titleWrap {border-bottom: 1px solid #dadada; background-color:#f9f9f9; padding: 36px 0;}
.titArea {text-align: left;}
.titArea h2 {color: #252525; font-size: 36px; margin-bottom: 10px; line-height: 1;}
.titArea .refBox {margin-top: 3px; color: #9e9e9e; font-size: 14px; }
.titArea .viewCount {position: relative; margin-left: 2px; margin-right: 7px; padding-right: 13px;}
.titArea .viewCount:after {position: absolute; display: block; content: ''; background-color: #ccc; width: 1px; height: 12px; top: 5px; right: 0;}
.snsArea ul {display: flex; align-items: center; justify-content: center; margin: 60px 0;}
.snsArea ul li {margin-right: 10px;}

@media screen and (max-width:768px) {
  .tv_titleWrap {margin-top: 74px;}
  .tabWrap ul {overflow-x: auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none; white-space: nowrap;}
  .tabWrap ul li a {padding: 10px 25px; font-size: 15px; text-wrap: nowrap;}
  .titArea h2 {font-size: 24px;}
  .titArea .date {font-size: 16px;}
  .contWrap {padding-bottom: 60px;}
  .contList {flex-direction: column;}
  .contList .contItem {width: 100%; margin-right: 0;}
  .contArea iframe {height:52vw;}
  .contArea a {word-wrap: break-word;}
  .snsArea ul li img {width: 42px;}
  
  #loader {text-align: center;}
  #loader i {font-size: 36px; animation: rotate 1.5s infinite linear;}
  @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
      }
  }
}
/* 안내 박스 */
.notice_box {text-align: left; padding: 10px 20px; margin: 40px 0 20px; background-color:#f2f2f2; border-radius: 20px; word-spacing:0;}

/* 이용안내 */
.guide {padding-bottom: 60px;}
.guide h2 {font-size: 27px; font-weight: 600;} 
.guide h3 {font-size: 22px; font-weight: 600; line-height: 1.8;}
.guide p, .guide td {font-size: 19px; line-height: 1.8;}
.guide .benefit_wrap {position: relative; width: 580px; border: 2px solid #ddd; padding: 50px; margin-bottom: 40px; box-sizing: border-box; text-align: left; background-image: url('/coopmall/icoop/guide/images/ico_benefit1.png'); background-position: top 30px right 50px; background-repeat: no-repeat;}
.guide .benefit_wrap:nth-child(2) {background-image: url('/coopmall/icoop/guide/images/ico_benefit2.png'); }
.guide .benefit_wrap:nth-child(3) {background-image: url('/coopmall/icoop/guide/images/ico_benefit3.png'); }
.guide .benefit_wrap:nth-child(4) {background-image: url('/coopmall/icoop/guide/images/ico_benefit4.png'); }
.guide .guide_benefit_btn {background-color: #0FC2C6; width: 220px; height: 50px; line-height: 50px; text-align: center; font-size: 19px; color: #fff; transition: all .2s ease;}
.guide .guide_benefit_btn:hover {background-color: #0f8a9f; }

.guide .guide_bot_btn {border: 1px solid #ddd; width: 250px; height: 80px; line-height: 80px; text-align: center; font-size: 19px;  transition: all .2s ease;}
.guide .guide_bot_btn:hover {background-color: #ddd;}

.guide .guide_box {display: flex; justify-content: space-around; border: 1px solid #dfdfdf; margin-top: 50px; padding: 100px 0;}
.guide .guide_box > div {position: relative; flex: 1 1 0; padding: 0 40px;}
.guide .guide_box > div:first-child:after {display: block; content: ''; width: 1px; height: 100%; background-color: #ddd; position: absolute; top: 0; right: 0;}
.guide .guide_box p {text-align: center;}
.guide .guide_box .img_wrap {background-color: #f9f9f9; border-radius: 50%; width: 210px; height: 210px; display: inline-flex; align-items: center; justify-content: center;}
.guide .guide_box .img_wrap2 {background-color: #0FC0C5; border-radius: 50%; width: 160px; height: 160px; display: inline-flex; align-items: center; justify-content: center;}
.guide .guide_use_btn {border: 1px solid #ddd; width: 250px; height: 60px; line-height: 60px; text-align: center; font-size: 19px; transition: all .2s ease;}
.guide .guide_use_btn:hover {background-color: #0FC2C6; border: 1px solid #0FC2C6; color: #fff;}

.guide .sumae_box {background-color: #f9f9f9; margin: 50px 0; padding: 27px 0;}
.guide .sumae_box p {text-align: center;}
.guide .sumae_box img {margin: 20px 0 40px;}

.guide dl {display: flex; border: 1px solid #ddd; border-bottom: 0;}
.guide dl.last {border-bottom: 1px solid #ddd;}
.guide dt { display: flex; align-items: center; justify-content: center; width: 280px; background-color: #f1f1f1; font-size: 19px; font-weight: 600;}
.guide dd { text-align: left; padding: 20px; font-size: 19px;}
.guide .link {text-decoration: underline; font-weight: 600; margin-left: 10px;}

.hyetack-bottom {display: flex;margin-bottom: 100px;text-align: left;}
.hyetack-bottom .hyetack-box {position:relative;width:100%; height:297px; background-image:url('/coopmall/img/benefit_info_bottom1.jpg?v=1'); background-size:cover; background-repeat:no-repeat; }
.hyetack-bottom .hyetack-box:nth-child(2) {background-image:url('/coopmall/img/benefit_info_bottom2.jpg'); margin-left: 40px;}
.hyetack-bottom .hyetack-box .item {position:absolute; top:60px; right: 45px; width:340px; word-break:keep-all;}
.hyetack-bottom .hyetack-box:nth-child(2) .item {width:287px;}
.hyetack-bottom .hyetack-box .item h3 {margin-bottom:7px;font-size:22px; font-weight:700; }
.hyetack-bottom .hyetack-box .item p {padding-top:10px; font-size:19px}

@media screen and (max-width:768px) {
  .guide h2 { font-size: 15px; font-weight: 800;}
  .guide h3 { font-size: 14px; font-weight: 700;}
  .guide p, .guide td { font-size: 13px;}
  .guide .guide_box {flex-direction: column; align-items: center; border: 0; margin: 0; padding: 0;}
  .guide .guide_box > div {padding: 0; flex: auto;}
  .guide .guide_box > div:first-child:after {display: none;}
  .guide .guide_box .img_wrap {width: 100px; height: 100px;}
  .guide .guide_box .img_wrap img {width: auto; height: 60%;}
  .guide .guide_box .img_wrap2 {width: 100px; height: 100px;}
  .guide .guide_box .img_wrap2 img {width: 80%;}
  .guide .guide_bot_btn,
  .guide .guide_use_btn {width: 220px; height: 50px; line-height: 50px; font-size: 15px;}
  .guide .guide_benefit_btn {font-size: 15px;}
  .guide .benefit_wrap {width: 100%; padding: 20px; background-image: none!important; text-align: center;}
  .guide .guide_table td {border: 1px solid #eee;}
  .guide dt {flex: 80px 1 0; font-size: 13px;}
  .guide dd {font-size: 13px;}
}