@charset "utf-8";

/* ==============================
* content
* ============================== */

.empty{ 
	background: white;
    border-right: 0;
    font-size: 0;
}
.grid2{
	width:50%; 
	display:inline-flex !important;border-bottom:1px solid #eeeeee;border-top:0 !important;} /* html - box 클래스 옆에 grid2 추가*/
.gridWrap{display:table;}/* html -  .searchDetailWrap .searchDetailBox 클래스 옆에 .gridWrap 추가*/
.tabList a.on{    z-index: 1;
    font-size: 16px;/* 18 -> 16 변경*/
}

.searchDetailWrap .searchDetailBox.gridWrap .box:nth-child(2n) .left .tit{padding-right:100px;}
.searchDetailWrap .searchDetailBox.gridWrap .box:nth-child(2n) .right .formBox{justify-content:end;}

#container { width:100%; min-width:1240px; padding-top:80px; padding-bottom:160px; transition: margin .3s ease;}
.section { position:relative; width:1240px; padding:0 20px; margin:0 auto;}
.section.mainSlide{position:relative; width:100%; padding:0; margin:0 auto; margin-bottom: 38px;}

.subH1 { margin-top:40px; font-size:32px; color:#222; font-weight:bold; text-align:center;}
.subH2 { margin-top:80px; font-size:24px; color:#222; font-weight:bold; text-align:center;}
.subH3 { margin-top:24px; font-size:18px; color:#222; font-weight:bold; text-align:left;}

.locationBar { margin-top:16px; margin-bottom:16px; line-height: 1;}
.locationBar span { font-size:16px; color:#666; line-height:1.43; vertical-align: middle;}
.locationBar span:after { content:''; display:inline-block; width:5px; height:5px; margin:-2px 2px 0 5px; vertical-align: middle; border:1px solid #cccccc; border-width:1px 1px 0 0; transform: rotate(45deg);}
.locationBar span.home { color:#666;}
.locationBar span.home:after { content:''; display:inline-block; width:5px; height:5px; margin:-2px 2px 0 5px; vertical-align: middle; border:1px solid #cccccc; border-width:1px 1px 0 0; transform: rotate(45deg);}

.locationBar span:last-child { color:#222;}
.locationBar span:last-child:after { display:none;}


/* login */
.loginWrap { width:480px; margin:0 auto;}
.loginWrap.type2 { width:620px;}
.loginWrap.boder { border:1px solid #eee;}
.loginWrap h1 { margin-bottom:40px; font-size:32px; color:#222; font-weight:bold; text-align:center;}
.loginWrap .tabListView .text { margin:20px 0; font-size:13px; text-align:center; color:#666;}

.loginOtherLink { margin-top:24px; text-align:center; }
.loginOtherLink a { display:inline-block; vertical-align: middle; font-size:14px; color:#222; font-weight:500; line-height:1.57; letter-spacing: -0.28px;}
.loginOtherLink a + a:before { content:''; display:inline-block; width:1px; height:12px; margin:0 12px; vertical-align: middle; background:#ddd;}

.easyLogin { margin-top:60px;}
.easyLogin h2 { position:relative;}
.easyLogin h2:before { content:''; display: block; position:absolute; top:50%; left:0; right:0; height:1px; background:#eee;}
.easyLogin h2 span { display:block; position:relative; width:126px; margin:0 auto; font-size:14px; color:#666; text-align: center; background:#fff;;}
.kindLogin { display:flex; margin-top:32px; justify-content: center;}
.kindLogin a { text-align:center; font-size:12px; color:#666;}
.kindLogin a + a { margin-left:24px;}
.kindLogin i { display:block; width:48px; height:48px; margin-bottom:4px; font-size:0; background:no-repeat center center / 100%;}
.kindLogin i.ico1 { background-image:url('../images/login/ico_naver.png');}
.kindLogin i.ico2 { background-image:url('../images/login/ico_kakao.png');}
.kindLogin i.ico3 { background-image:url('../images/login/ico_facebook.png');}
.kindLogin i.ico4 { background-image:url('../images/login/ico_twitter.png');}
.kindLogin i.ico5 { background-image:url('../images/login/ico_share.png');}

.kindLogin.box {}
.kindLogin.box > div { width:100%; padding:28px 0 24px; border:1px solid #eee; border-radius: 8px; text-align: center;}
.kindLogin.box > div + div { margin-left:20px;}
.kindLogin.box > div i { display:block; margin:0 auto;}

.certificationSuccess { display:flex; height:48px; border:1px solid #eee; border-radius: 4px; font-size:16px; color:222; ;font-weight:bold; align-items: center; justify-content: center; background:#f8f8f8;}
.certificationSuccess:before { content:''; display:inline-block; width:20px; height:20px; margin-right:8px; vertical-align: middle; background:url('../images/login/ico_check.png') no-repeat center center / 100%;}

.simpleLoginText { margin:54px 0 85px; text-align:center;}
.simpleLoginText .tit { font-size:22px; color:#222; font-weight:500; line-height: 1.36;;}
.simpleLoginText .text { margin-top:12px; font-size:13px; color:#666;}

.stepBox { display:flex; margin-bottom:24px; align-items: center;}
.stepBox .tit { flex:1 1 auto; font-size:20px; color:#222; font-weight:bold;}
.stepBox .step { flex:0 0 auto; position:relative; ;font-size:0;}
.stepBox .step:before { content: ''; display:block; position:absolute; top:50%; left:0; right:0; height:1px; background:#ddd; z-index:-1;}
.stepBox .step span { display:inline-flex; width:8px; height:8px; border-radius: 50%; font-size:0; vertical-align: middle; background:#888; align-items: center; justify-content: center;}
.stepBox .step span + span { margin-left:12px;}
.stepBox .step span.on { width:24px; height:24px; text-align:center; font-family: 'Poppins'; font-weight:bold; font-size:11px; color:#fff; background:#000;}

.agreePopCont {}
.agreePopCont .tit { font-size:16px; color:#222; font-weight:bold;}
.agreePopCont .tit ~ .tit { margin-top:24px;}
.agreePopCont .text { margin-top:8px; font-size:15px; color:#222;}

.successJoin { padding:33px 0 50px; border-radius:8px; text-align:center; background:#f8f8f8;}
.successJoin i { display:block; width:60px; height:60px; margin:0 auto; background:url('../images/login/ico_welcome.png') no-repeat center center / 100%;}
.successJoin .tit { margin-top:11px; font-size:22px; color:#222; font-weight:bold;letter-spacing: -0.32px;}
.successJoin .text { margin-top:4px; font-size:16px; font-weight:500; color:#222; letter-spacing: -0.32px;}
.successJoin .subText { margin-top:4px; font-size:13px; color:#666; letter-spacing: -0.26px;}

/* 제품 리스트 */


.searchDetailWrap { display:flex; flex-flow: column;position:relative;}
/*.searchDetailWrap .searchDetailBox { display:none;}*/
.searchDetailWrap .searchDetailBox .box { display:flex; padding:24px 0;}
.searchDetailWrap .searchDetailBox .box + .box { border-top:1px solid #eeeeee;}
.searchDetailWrap .searchDetailBox .left { flex:0 0 auto; width:190px;}
.searchDetailWrap .searchDetailBox .left .tit { font-size:14px; color:#222; font-weight:bold;}
.searchDetailWrap .searchDetailBox .left .btnAll { font-size:11px; color:#666; line-height:1.45;}
.searchDetailWrap .searchDetailBox .left .btnAll:after { content:''; display:inline-block; width:5px; height:5px; margin-left:6px; margin-right:2px; border:1px solid #666; border-width:0 1px 1px 0; transform: translateY(-50%) rotate(45deg); transition: all .3s ease;}
.searchDetailWrap .searchDetailBox .left .btnAll.on:after { transform:translateY(0%) rotate(-135deg);}
.searchDetailWrap .searchDetailBox .right { width:100%;}
.searchDetailWrap .searchDetailBox .formBox { display:flex; width:100%; flex-wrap: wrap;}
.searchDetailWrap .searchDetailBox .formBox .checkbox { width:20%;}
.searchDetailWrap .searchDetailBox .formBox .checkbox label { font-size:14px;}
.searchDetailWrap .searchDetailBox .formBox .checkbox:nth-child(n+6) { margin-top:16px;}
.searchDetailWrap .searchDetailBox .formBox .checkbox:nth-child(n+11) { display:none;}
.searchDetailWrap .searchDetailBox .allopen .formBox .checkbox:nth-child(n+11) { display:block;}

.searchDetailWrap .searchDetailBox .formBox.searchBox {display: flex; align-items: center;}
.searchDetailWrap .searchDetailBox .formBox.searchBox .inputBox { flex:0 0 auto; width:120px; }
.searchDetailWrap .searchDetailBox .formBox.searchBox span { font-size:14px; color:#666; margin:0 8px;}
.searchDetailWrap .searchDetailBox .formBox.searchBox .btnSearch { display:block; width:32px; height:32px; margin-left:8px; border-radius:4px; font-size:0; background:#000 url('../images/content/ico_search.png') no-repeat center center / 16px;}

.searchDetailWrap .optionList { display:flex; padding:12px 0; align-items: center; border-radius:8px; background:#f6f6f6;}
.searchDetailWrap .optionList .tit { flex:0 0 auto; width:116px; padding-left:24px; font-size:14px; color:#222; font-weight:bold;}
.searchDetailWrap .optionList .labelG { display:flex; flex-wrap: wrap; margin:-6px 0;}
.searchDetailWrap .optionList .labelG .label { display:flex; margin:6px 0; padding:8px 16px 9px; border-radius:40px; margin-left:4px; border:1px solid #ddd; background:#fff; align-items: center;}
.searchDetailWrap .optionList .labelG .label span { overflow:hidden; max-width:150px; font-size:13px; color:#222; line-height:1.54; letter-spacing: -0.26px; text-overflow: ellipsis; white-space: nowrap;;}
.searchDetailWrap .optionList .labelG .label a { display:inline-block; width:16px; height:16px; font-size:0; margin-left:4px; background:url('../images/common/tooltip-close.png') no-repeat center center / 100%;}
.searchDetailWrap .optionList .btnReset { margin-left:auto; margin-right:28px; font-size:13px; color:#666;}

.searchDetailWrap .btnSearchText { margin-left:auto; margin-top:16px; font-size:0;}
.searchDetailWrap .btnSearchText:before { content:'상세검색 열기'; display:inline-block; font-size:13px; color:#555; letter-spacing: -0.26px; font-weight:500;}
.searchDetailWrap .btnSearchText:after { content:''; display:inline-block; width:5px; height:5px; margin-left:6px; margin-right:2px; border:1px solid #666; border-width:0 1px 1px 0; transform: translateY(-50%) rotate(45deg); transition: all .3s ease;}
.searchDetailWrap .btnSearchText.on:before {content:'상세검색 닫기';}
.searchDetailWrap .btnSearchText.on:after { transform:translateY(0%) rotate(-135deg);}

.productTopBox { display:flex; margin-top:32px; align-items: center;}
.productTopBox .infoText { font-size:14px; color:#222; line-height:2.29; letter-spacing: -0.28px;}
.productTopBox .infoText strong { display:inline-block; overflow:hidden; margin-top:-6px; font-size:18px; max-width:200px; vertical-align: middle; text-overflow:ellipsis; white-space: nowrap;}
.productTopBox .right { display:flex; margin-left:auto; align-items: center;}
.productTopBox .optionList { position:relative; margin-right:12px;}
.productTopBox .optionList > a { display:block; font-size:14px; color:#222;}
.productTopBox .optionList > a:after { content:''; display:inline-block; width:5px; height:5px; margin-left:6px; margin-right:2px; border:1px solid #666; border-width:0 1px 1px 0; transform: translateY(-50%) rotate(45deg); transition: all .3s ease;}
.productTopBox .optionList > a.on:after { transform:translateY(0%) rotate(-135deg);}
.productTopBox .optionList .view { display:none; position:absolute; top:35px; left:-20px; right:-21px; z-index:5; padding:16px; border-radius: 8px; box-shadow: 1px 1px 6px 0 rgba(0, 0, 0, 0.2); background:#fff;}
.productTopBox .optionList .view > a { display:block; font-size:13px; color:#666; letter-spacing: -0.26px;}
.productTopBox .optionList .view > a + a { margin-top:8px;}

.productTopBox .viewBox { display:flex;}
.productTopBox .viewBox a { display:block; width:24px; height:24px; font-size:0;}
.productTopBox .viewBox a + a { margin-left:4px;}
.productTopBox .viewBox .btnList { background:url('../images/content/ico_list_view.png');}
.productTopBox .viewBox .btnList.on { background:url('../images/content/ico_list_view_on.png');}
.productTopBox .viewBox .btnGrid { background:url('../images/content/ico_grid_view.png');}
.productTopBox .viewBox .btnGrid.on { background:url('../images/content/ico_grid_view_on.png');}


.productVisualWrap { position:relative; margin-top:40px;}

.productVisualWrap .arrowGroup a { position:absolute; top:145px; z-index:1; width:60px; height:60px; border-radius:50%; font-size:0;box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.2); background:#fff;}
.productVisualWrap .arrowGroup a:after { content:''; display:block; position:absolute; top:50%; left:50%; width:13px; height:22px; background:url('../images/content/ico_visual_arrow.png') no-repeat center center / 13px; transform:translate(-50%, -50%);}
.productVisualWrap .arrowGroup .btnPrev { left:-30px;}
.productVisualWrap .arrowGroup .btnPrev:after { transform:translate(-50%, -50%) rotate(180deg);}
.productVisualWrap .arrowGroup .btnNext { right:-30px;}

.productVisualWrap .infoBox { display:flex; justify-content: center; align-items: center; margin-top:25px;}
.productVisualWrap .slick-dots { display:flex; justify-content: center;}
.productVisualWrap .slick-dots li { margin:0 4px; line-height:0;}
.productVisualWrap .slick-dots button { width:6px; height:6px; border-radius:3px; font-size:0; background:#222; opacity:0.18; transition: all .3s ease;}
.productVisualWrap .slick-dots .slick-active button { width:16px; opacity:0.8}


.productViewTop { display: flex; margin-bottom:73px;}
.productViewTop .visualBox { flex:0 0 auto; width:554px;}
.productViewTop .visualBox .visual { overflow: hidden; position:relative; width:100%; height:554px; border-radius:12px;}
.productViewTop .visualBox .visual .img { overflow: hidden; position:absolute; top:0; left:100%; width:100%; height:100%;}
.productViewTop .visualBox .visual .img.on { left:0;}
.productViewTop .visualBox .visual .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / cover;}
.productViewTop .visualBox .visual .time { position:absolute; top:16px; left:16px; z-index:1; padding:20px 24px 16px ; font-size:24px; color:#f0431a; font-weight:bold; border-radius:8px; background:rgba(255,255,255,0.85)}
.productViewTop .visualBox .visual .time:before { content:'남은시간'; display:block; margin-bottom:3px; padding-left:21px; font-size:14px; color:#222; font-weight:500; background:url('../images/common/ico_clock.png') no-repeat 0 center / 16px;}

.productViewTop .visualBox .visual .labelImg  { display:flex; position:absolute; z-index:1; font-size:0; font-family:"Black Han Sans"; line-height:1; background:#000; justify-content: center; align-items: center;}

/* 이미지라벨 위치*/
.productViewTop .visualBox .visual .labelImg.right { top:16px; right:16px;}
.productViewTop .visualBox .visual .labelImg.left { bottom:16px; left:16px;}

.productViewTop .visualBox .visual .labelImg.type1_1 { width:80px; height:80px; background:url('../images/content/bedge_circle1.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_2 { width:80px; height:80px; background:url('../images/content/bedge_circle2.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_3 { width:80px; height:80px; background:url('../images/content/bedge_circle3.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_4 { width:80px; height:80px; background:url('../images/content/bedge_circle4.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_5 { width:80px; height:80px; background:url('../images/content/bedge_circle5.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_6 { width:80px; height:80px; background:url('../images/content/bedge_circle6.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_7 { width:80px; height:80px; background:url('../images/content/bedge_circle7.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_8 { width:80px; height:80px; background:url('../images/content/bedge_circle8.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_9 { width:80px; height:80px; background:url('../images/content/bedge_circle9.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_10 { width:80px; height:80px; background:url('../images/content/bedge_circle10.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_11 { width:80px; height:80px; background:url('../images/content/bedge_circle11.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_12 { width:80px; height:80px; background:url('../images/content/bedge_circle12.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_13 { width:80px; height:80px; background:url('../images/content/bedge_circle13.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_14 { width:80px; height:80px; background:url('../images/content/bedge_circle14.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_15 { width:80px; height:80px; background:url('../images/content/bedge_circle15.png') no-repeat center center / 100%;}
.productViewTop .visualBox .visual .labelImg.type1_17 { width:80px; height:80px; background:url('../images/content/bedge_circle16.png') no-repeat center center / 100%;}

.productViewTop .visualBox .visual .labelImg.type2_1 { width:88px; height:41px; background:url('../images/content/bedge_text1.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_2 { width:102px; height:41px; background:url('../images/content/bedge_text2.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_3 { width:88px; height:41px; background:url('../images/content/bedge_text3.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_4 { width:88px; height:41px; background:url('../images/content/bedge_text4.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_5 { width:88px; height:41px; background:url('../images/content/bedge_text5.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_6 { width:88px; height:41px; background:url('../images/content/bedge_text6.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_7 { width:74px; height:41px; background:url('../images/content/bedge_text7.png') no-repeat 0 center / auto 100%;}
.productViewTop .visualBox .visual .labelImg.type2_8 { width:86px; height:38px; background:url('../images/content/bedge_text.png') no-repeat 0 center / auto 100%;}

.productViewTop .visualBox .visual .targetBar {z-index:1;}

.productViewTop .visualBox .visualList { display:flex; margin-top:12px;}
.productViewTop .visualBox .visualList a { overflow: hidden; display:block; position:relative; width:50px; height:50px; opacity:0.4; transition: all .3s ease;}
.productViewTop .visualBox .visualList a + a { margin-left:6px;}
.productViewTop .visualBox .visualList a span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / cover;}
.productViewTop .visualBox .visualList a.on,
.productViewTop .visualBox .visualList a:hover { opacity:1;}

.productViewTop .textBox { flex:1 1 auto; position: relative; margin-left:92px;}
.productViewTop .textBox h1 { padding-right:54px; font-size:24px; color:#222; line-height:1.33; letter-spacing: -0.48px; font-weight: normal;}
.productViewTop .textBox h1 .subTit { display:block; margin-bottom:4px; font-size:13px; color:#222; opacity:0.7; line-height: 1.54; letter-spacing: -0.26px;}
.productViewTop .textBox p.money { margin-top:8px; font-size:28px; font-weight:600;font-family: 'Poppins'; color:#222;}
.productViewTop .textBox p.money .small { font-size:16px; font-weight:500; font-family: 'Noto Sans KR';}
.productViewTop .textBox p.money .prime { padding-left:12px; font-size:14px; color:#888; text-decoration:line-through;}
.productViewTop .textBox p.money .gray { padding-left:5px; font-size:18px; color:#888; }
.productViewTop .textBox .infoBox { margin-top:28px;}
.productViewTop .textBox .infoBox li { font-size:14px; color:#222;}
.productViewTop .textBox .infoBox li + li { margin-top:12px;}
.productViewTop .textBox .infoBox .label { display:inline-block; width:100px; font-size:14px; color:#222; letter-spacing: -0.28px; opacity:0.65;}
.productViewTop .textBox .infoBox .textButton { font-size:13px; color:#555;}
.productViewTop .textBox .selectBox { margin-top:28px;}

.productViewTop .percentBox { margin-top:40px;}
.productViewTop .percentBox .day { font-size:14px; text-align: right; font-weight: bold;}
.productViewTop .percentBox .percentBar { position:relative; height:8px; margin-bottom:10px; margin-top:6px; border-radius: 10px; background:#ebebeb;}
.productViewTop .percentBox .percentBar span { position:absolute; top:0; left:0; bottom:0; background:var(--point-color);}
.productViewTop .percentBox .textInfo { display: flex; margin-top:20px; align-items: center;}
.productViewTop .percentBox .textInfo .text { font-size:28px; color:#000; line-height: 1; font-weight: bold;}
.productViewTop .percentBox .textInfo .money { margin-left:auto; margin-top:0; font-weight:500; font-size:16px; color:#222222; letter-spacing: -0.3px; line-height: 1;}
.productViewTop .percentBox .textInfo .money strong { font-size:28px; font-weight: bold;}

.productViewTop .infoListBox { margin-top:30px; border-top:1px solid #eeeeee;}
.productViewTop .infoListBox dl { display: flex; padding:10px 0; border-bottom:1px solid #eeeeee;}
.productViewTop .infoListBox dt { font-size:16px; color:#666666;}
.productViewTop .infoListBox dd { margin-left:auto; font-size:16px; color:#222222;}

.productViewTop .grayTextBox { margin-top:15px; margin-bottom:10px; padding:20px; border-radius: 5px; text-align: center; font-size:14px; color:#222; background:#f8f8f8;}
.productViewTop .grayTextBox strong { font-weight:600;}

.donationTotalInfo { position:relative; margin-top:20px; padding:25px 0; border-radius:5px; font-size:24px; text-align: center; background:#f4f4f4;}
.donationTotalInfo strong { font-weight: bold;}
.donationTotalInfo:before { content:''; display: block; position:absolute; top:25px; left:25px; width:60px; height:60px; background:url('../images/content/ico_donation_01.png') no-repeat center center / 100%;}

.donationCheerList { margin-top:60px; border-top:1px solid #eeeeee;}
.donationCheerList li { display: flex; padding:10px 20px; border-bottom:1px solid #eeeeee; align-items: center;}
.donationCheerList li i { display: block; width:60px; height:60px; background:url('../images/content/ico_donation_02.png') no-repeat center center / 100%;}
.donationCheerList li i.icoCheer1 { background-image: url('../images/content/ico_cheer_01.png');}
.donationCheerList li i.icoCheer2 { background-image: url('../images/content/ico_cheer_02.png');}
.donationCheerList li i.icoCheer3 { background-image: url('../images/content/ico_cheer_03.png');}
.donationCheerList li i.icoCheer4 { background-image: url('../images/content/ico_cheer_04.png');}
.donationCheerList li i.icoCheer5 { background-image: url('../images/content/ico_cheer_05.png');}
.donationCheerList li .textBox { margin-left:18px;}
.donationCheerList li .textBox .tit { margin:0; font-size:16px;}
.donationCheerList li .textBox .text { margin:0; font-size:18px; color:#222;}
.donationCheerList li .date { margin-left:auto; font-size:14px; color:#666666;}

.cheerInfoText { display: block; margin-top:20px; padding:25px 0; border-radius:5px; border:2px solid #222222; font-size:24px; text-align: center; background:#f4f4f4;}
.cheerInfoText strong { font-weight: bold;}

.hashtagGroup { margin-top:10px; text-align: center;}
.hashtagGroup span { display: inline-block; padding:5px 15px; border:1px solid #dddddd; border-radius: 50px; font-size:13px; color:#222;}

.icoListBox { display: flex; justify-content: center; gap:30px}
.icoListBox li {}
.icoListBox li a { display: block; font-size:18px; color:#222; font-weight: 500;}
.icoListBox li a i { display: block; width:60px; height:60px; margin-bottom:10px; background:url('../images/content/ico_donation_02.png') no-repeat center center / 100%;}
.icoListBox li a i.icoCheer1 { background-image: url('../images/content/ico_cheer_01.png');}
.icoListBox li a i.icoCheer2 { background-image: url('../images/content/ico_cheer_02.png');}
.icoListBox li a i.icoCheer3 { background-image: url('../images/content/ico_cheer_03.png');}
.icoListBox li a i.icoCheer4 { background-image: url('../images/content/ico_cheer_04.png');}
.icoListBox li a i.icoCheer5 { background-image: url('../images/content/ico_cheer_05.png');}

/* 토탈 박스 */
.totalBox { margin-top:8px;}
.totalBox .grayBox { display:flex; position:relative; flex-wrap: wrap; padding:16px; border-radius:4px; background:#f8f8f8;}
.totalBox .grayBox .tit { width:100%; padding-right:30px; font-size:13px; color:#222; font-weight:500;}
.totalBox .grayBox p.money { align-self: flex-end; margin-left:auto; font-size:13px; color:#222;}
.totalBox .grayBox p.money strong { font-size:16px; font-weight:bold; font-family: 'Poppins';}
.totalBox .grayBox .countBox { margin-top:12px;}
.totalBox .grayBox .btnDelete { display:block; position:absolute; top:16px; right:16px; width:20px; height:20px; font-size:0; background:url('../images/content/btn_delete.png') no-repeat;}
.totalBox .total { display:flex; margin:15px 0 17px; align-items: center;}
.totalBox .total dt { font-size:12px; color:#222;}
.totalBox .total dd { flex:1 1 auto; text-align:right; font-size:13px; color:#222;}
.totalBox .total dd strong { font-size:18px; font-weight:bold; font-family: 'Poppins';}

.shareWrap { position:absolute; top:0; right:0;}
.shareWrap .btnShare { display:block; width:48px; height:48px; border:1px solid #ddd; border-radius:50%; font-size:0; background:#fff url('../images/content/ico_share.png') no-repeat center center;}
.shareWrap .sharePop { visibility: hidden; position:absolute; top:70px; left:0; z-index:5; width:300px; padding:24px 20px 24px 20px; margin-left:-200px; border-radius: 8px; box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.12); border: solid 1px #eee; opacity: 0; transition: all .3s ease; transform: translateY(-15px); font-size:14px; color:#666; background:#fff;}
.shareWrap .sharePop .tit { margin-bottom:12px; font-size:16px; color:#222; font-weight:bold; text-align:center;}
.shareWrap .sharePop .kindLogin a + a { margin-left:16px;}
.shareWrap .sharePop .btnClose { display:block; position:absolute; top:22px; right:20px; width:24px; height:24px; font-size:0; background: url(../images/common/tooltip-close.png) no-repeat center center;}
.shareWrap .sharePop.on { visibility: visible; opacity: 1; transform: translateY(0px);}

/* 카운트박스 */
.countBox { position:relative; width:96px; height:36px; border:1px solid #ddd; background:#fff; top:4px;}
.countBox input { display:block; width:100%; height:100%; padding:0; border:0; margin:0; text-align:center; font-size:14px; color:#000;}
.countBox button { display:block; position:absolute; top:0; width:34px; height:34px; font-size:0;}
.countBox .btnMinus { left:0; background:url('../images/content/ico_minus.png') no-repeat center center;}
.countBox .btnPlus { right:0; background:url('../images/content/ico_plus.png') no-repeat center center;}

/* 별점 */
.starIcon { margin-top:9px; font-size:12px; color:#666; line-height: 1.33;}
.starIcon span { display:inline-block; position:relative; width:80px; height:16px; margin-top:-4px; margin-right:8px; vertical-align: middle; background:url('../images/content/ico_product_star_off.png') repeat-x 0 center;}
.starIcon span i { display:block; position:absolute; top:0; left:0; height:100%; background:url('../images/content/ico_product_star.png') repeat-x 0 center;}

.starIcon.large {}
.starIcon.large span { width:180px; height:36px; background:url('../images/content/ico_product_star2_off.png') repeat-x 0 center;}
.starIcon.large span i { background:url('../images/content/ico_product_star2.png') repeat-x 0 center;}

.starIcon.large2 {}
.starIcon.large2 span { width:120px; height:24px; background:url('../images/content/ico_product_star2_off.png') repeat-x 0 center / auto 100%;}
.starIcon.large2 span i { background:url('../images/content/ico_product_star2.png') repeat-x 0 center / auto 100%;}

/* 제품 상세 */
.productDetailWrap { position:relative;}
.productDetailWrap > .left { width:880px;}
.productDetailWrap > .right { position:absolute; top:0; right:0; width:280px; padding:20px; border:1px solid #ddd;}
.productDetailWrap > .right .tit { margin-top:0; margin-bottom:20px; font-size:16px; color:#222; font-weight:500;}
.productDetailWrap > .right.fixed { overflow-y: auto; position:fixed; top:95px; left:50%; margin-left:320px; max-height: calc(100% - 105px);}
.productDetailWrap > .right .tooltipPop { width:230px; margin-left:-80px;padding:30px 20px 10px;font-size: 12px;}
.productDetailWrap > .right .tooltipPop .btnClose { top:5px; right:10px;}
.productDetailWrap > .right.grayInfoBox { border-radius: 5px; background:#f4f4f4;}
.productDetailWrap > .right.grayInfoBox .tit { margin-top:20px; font-size:16px;}

.productDetailWrap > .right .locationInfo { font-size:24px;}
.productDetailWrap > .right .locationInfo i { width:66px; height:66px; margin-right:10px; background:#fff;}

.productDetailWrap > .right .percentBox { margin-top:20px;}
.productDetailWrap > .right .percentBox .day { font-size:14px; text-align: right; font-weight: bold;}
.productDetailWrap > .right .percentBox .percentBar { position:relative; height:8px; margin-bottom:10px; margin-top:6px; border-radius: 10px; background:#ebebeb;}
.productDetailWrap > .right .percentBox .percentBar span { position:absolute; top:0; left:0; bottom:0; background:var(--point-color);}
.productDetailWrap > .right .percentBox .textInfo { display: flex; margin-top:10px; align-items: center;}
.productDetailWrap > .right .percentBox .textInfo .text { margin-top:0; font-size:16px; color:#000; line-height: 1; font-weight: bold;}
.productDetailWrap > .right .percentBox .textInfo .money { margin-left:auto; margin-top:0; font-weight:500; font-size:13px; color:#222222; letter-spacing: -0.3px; line-height: 1;}
.productDetailWrap > .right .percentBox .textInfo .money strong { font-size:16px; font-weight: bold;}

.productDetailWrap > .right .infoListBox { padding:15px 0; margin-top:15px; border-top:1px solid #eeeeee;}
.productDetailWrap > .right .infoListBox dl { display: flex; padding:5px 0;}
.productDetailWrap > .right .infoListBox dt { font-size:14px; color:#666666;}
.productDetailWrap > .right .infoListBox dd { margin-left:auto; font-size:13px; color:#222222;}

.productDetailWrap .tit { margin-top:40px; font-size:18px; color:#222;font-weight:bold;}
.productDetailWrap .text { margin-top:20px; font-size:15px; color:#666666;}

.productDetailWrap .productTab { display:flex; margin-top:80px; border-top:1px solid #dbdbdb; border-bottom:1px solid #f4f4f4; padding-top:8px; background:#f4f4f4;}
.productDetailWrap .productTab a { display:flex; width:100%; height:60px; background:#fff; align-items: center; justify-content: center;}
.productDetailWrap .productTab a > span { position:relative; display:inline-flex; height:100%; font-size:16px; color:#666; letter-spacing: -0.32px; align-items: center;}
.productDetailWrap .productTab a > span:after { opacity:0; content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background:#222;}
.productDetailWrap .productTab a > span span { margin-left:5px;}
.productDetailWrap .productTab a.on > span { color:#222; font-weight: bold;}
.productDetailWrap .productTab a.on > span:after { opacity:1;}

/* 소개 컨텐츠 영역 — BO 에디터에서 입력한 heading 스타일 복원 */
.productDetailWrap .sec01 h1 { font-size:28px; font-weight:bold; margin:24px 0 12px; }
.productDetailWrap .sec01 h2 { font-size:24px; font-weight:bold; margin:20px 0 10px; }
.productDetailWrap .sec01 h3 { font-size:20px; font-weight:bold; margin:16px 0 8px; }
.productDetailWrap .sec01 h4 { font-size:18px; font-weight:bold; margin:12px 0 6px; }

.productDetailWrap .sec01 { overflow: hidden;}
.productDetailWrap .sec01 .imgBox { overflow: hidden; position:relative; max-height:1000px;}
.productDetailWrap .sec01 .imgBox img { width:100%;}
.productDetailWrap .sec01 .imgBox .button { position:absolute; bottom:20px; left:20px; right:20px; font-weight:normal}
.productDetailWrap .sec01 .imgBox .button span:before { content:'더보기'; display:inline-block; margin-left:5px; font-size:16px; color:#222;}
.productDetailWrap .sec01 .imgBox .button span:after { content:''; display:inline-block; width:5px; height:5px; margin-top:5px; margin-left:6px; margin-right:2px; border:1px solid #666; border-width:0 1px 1px 0; transform: translateY(-50%) rotate(45deg); transition: all .3s ease;}

.productDetailWrap .sec01 .imgBox.on { max-height:none; padding-bottom:60px;}
.productDetailWrap .sec01 .imgBox.on .button span:before { content:'닫기';}
.productDetailWrap .sec01 .imgBox.on .button span:after { transform:translateY(0%) rotate(-135deg);}
.productDetailWrap .sec01 .tableView { margin-top:16px;}

.productDetailWrap .sec02 { overflow: hidden;}
.productDetailWrap .sec02 .dotList  {}
.productDetailWrap .sec02 .dotList li{ font-size:15px; color:#666;}
.productDetailWrap .sec02 .dotList li + li { margin-top:8px;}

.productDetailWrap .appraisalBox { display:flex; padding:24px 0; background:#f8f8f8; align-items: center;}
.productDetailWrap .appraisalBox .left { width:50%; text-align:center;}
.productDetailWrap .appraisalBox .left strong { font-size:28px; color:#222; font-weight:bold;}
.productDetailWrap .appraisalBox .right { display:flex; width:50%; text-align:center; justify-content: center;}
.productDetailWrap .appraisalBox .right .barBox { text-align:center;}
.productDetailWrap .appraisalBox .right .barBox + .barBox { margin-left:25px;}
.productDetailWrap .appraisalBox .right .barBox .text { font-size:13px; color:#222; font-weight:bold;}
.productDetailWrap .appraisalBox .right .barBox .bar { display:block; position:relative; width:6px; height:80px; margin:8px auto; border-radius:3px; background:#eee;}
.productDetailWrap .appraisalBox .right .barBox .bar i { display:block; position:absolute; bottom:0; right:0; bottom:0; width:100%; border-radius:3px; background:#ffd700}
.productDetailWrap .appraisalBox .right .barBox .percent { font-size:13px; color:#222;}

.productDetailWrap .sec03 { overflow: hidden;}
.productDetailWrap .sec03 .button { display:flex; width:320px; margin:26px auto 41px;}

.productDetailWrap .sec04 { overflow: hidden;}
.productDetailWrap .sec04 .text { margin-top:8px; font-size:14px; color:#222; line-height:1.57; letter-spacing: -0.28px;}

.productDetailWrap .productList.col4 .list { width:268px;}
.productDetailWrap .productList.col4 .list .imgBox { height:268px;}

.productDetailWrap .photoReviewList { display: flex; gap:8px; margin:20px 0 50px;}
.productDetailWrap .photoReviewList a { overflow: hidden; position:relative; display: block; width:80px; height:80px; border-radius: 3px;}
.productDetailWrap .photoReviewList a img { width:100%; height:100%; object-fit: cover; transition: all .3s ease;}
.productDetailWrap .photoReviewList a.btnMore span { display: flex; position:absolute; top:0; left:0; width:100%; height:100%; justify-content: center; color:#fff; text-align: center; align-items: center; font-size:14px; font-weight: bold; background:rgba(0,0,0,0.35);}
.productDetailWrap .photoReviewList a:hover img { transform: scale(1.1);}

.productDetailWrap .productList { margin-top:30px;}
.productDetailWrap .productList .list { width:273px;}
.productDetailWrap .productList .list .textBox .text{ margin-top:0; font-size:16px; min-height:50px;}
.productDetailWrap .productList .list .textBox .percentBox .textInfo { align-items: flex-end;}
.productDetailWrap .productList .list .textBox .percentBox .textInfo .text { min-height:auto;}

.productDetailWrap .newsList { margin-top:20px; border-top:1px solid #eeeeee}
.productDetailWrap .newsList li {}
.productDetailWrap .newsList li a { display: block; padding:20px 0; border-bottom:1px solid #eeeeee;}
.productDetailWrap .newsList li a .tit { overflow: hidden; margin:0; white-space: nowrap; font-size:15px; color:#222; font-weight: 500; text-overflow: ellipsis;}
.productDetailWrap .newsList li a .date { margin-top:10px; font-size:12px; color:#666666; font-weight: 400;}

.photoListGroup { display: flex; flex-wrap: wrap; gap:8px;}
.photoListGroup a { overflow: hidden; display: block; width:130px; height:130px; border-radius: 3px;}
.photoListGroup a img { width:100%; height:100%; object-fit: cover; transition: all .3s ease;}
.photoListGroup a:hover img { transform: scale(1.1);}

.qnaList {}
.qnaList li { padding:16px 0; border-bottom:1px solid #eeeeee;}
.qnaList li.type2 { padding:0; border-bottom:0;}

.qnaList .imgTextBox { display:flex; padding:16px; border:1px solid #eee;}
.qnaList .imgTextBox .img { overflow:hidden; flex:0 0 auto; position:relative; width:60px; height:60px; margin-right:24px; border-radius: 8px;}
.qnaList .imgTextBox .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}
.qnaList .imgTextBox .text { margin-top:0; font-size:15px; font-weight:500;}

.qnaList .top { display:flex; align-items: center;}
.qnaList .top.secret:after { content:''; display:inline-block; width:16px; height:16px; margin-left:6px; background:url('../images/content/ico_lock.png') no-repeat center center;}
.qnaList .label { padding:4px 12px; border:1px solid #eee; border-radius:14px;; font-size:10px; color:#222;}
.qnaList .label.ok { border-color:#000; color:#fff; background:#000000}
.qnaList .name { margin-left:12px; font-size:12px; color:#666;}
.qnaList .text { margin-top:15px; font-size:15px; color:#222;}
.qnaList .view { display:none; padding:16px; border-radius:4px; margin-top:16px; font-size:15px; color:#222; line-height:1.33; letter-spacing: -0.3px; background:#f6f6f6;}

.qnaList a.success { display:block; position:relative;}
.qnaList a.success:after { content:''; display:block; position:absolute; top:0; right:0; width:24px; height:24px; background:url('../images/common/ico_select.png') no-repeat; transition: all .3s ease;}
.qnaList a.success.on:after { transform: rotate(180deg);}

.kindList { display:flex; margin-top:32px;}
.kindList span + span:before { content:''; display:inline-block; width:1px; height:13px; margin:0 12px; vertical-align: middle; background:#ddd;}
.kindList a { font-size:14px;color:#999; line-height:1.43;}
.kindList a.on { color:#222; font-weight:500;}

.productReview {}
.productReview li { position:relative; padding:16px 0; border-bottom:1px solid #eee;}
.productReview li .name { font-size:12px; color:#666;}
.productReview li .text { margin-top:11px; font-size:14px; color:#222; line-height:1.57; letter-spacing: -0.28px;}
.productReview li .img { margin-top:15px;}
.productReview li .img img { width:80px; height:80px;}
.productReview li .img img + img { margin-left:8px;}
.productReview li .starIcon { position:absolute; top:16px; right:0; margin:0;}
.productReview li .btnRevise { display:flex; width:68px; height:32px; margin-top:12px; border-radius:4px; font-size:12px; color:#222; font-weight:500; background:#eee; align-items: center; justify-content: center;}

.productReview .localProductBox { display: flex; padding-top:20px; margin-top:20px; border-top:1px solid #eee; align-items: center;}
.productReview .localProductBox:first-child:last-child { padding-top:0; margin-top:0; border-top:0;}
.productReview .localProductBox .img { width:80px; height:80px; margin-top:0;}
.productReview .localProductBox .textBox { margin-left:20px;}
.productReview .localProductBox .textBox .locationInfo {}
.productReview .localProductBox .textBox .text { margin-top:5px; font-size:15px;}

.noInterestCardList { margin-top:11px; border-top:1px solid #eee;}
.noInterestCardList .list { display:flex; padding:20px 0; border-bottom:1px solid #eee; align-items: center;}
.noInterestCardList .list .card { flex:0 0 auto; width:210px; padding-left:20px; font-weight: bold; color:#222; font-size: 14px;}
.noInterestCardList .list .textBox {}
.noInterestCardList .list .textBox p { font-size:13px; color:#222;}
.noInterestCardList .list .textBox p + p { margin-top:4px;}
/* .noInterestCardList .list .textBox p span { flex:0 0 auto; width:120px;} */


/* icon */
i[class*=card] { display:inline-block; width:32px; height:32px; vertical-align: middle; background:no-repeat center center / 100%;}
i.card1 { background-image:url('../images/card/ico_card1.png');}
i.card2 { background-image:url('../images/card/ico_card2.png');}
i.card3 { background-image:url('../images/card/ico_card3.png');}
i.card4 { background-image:url('../images/card/ico_card4.png');}
i.card5 { background-image:url('../images/card/ico_card5.png');}
i.card6 { background-image:url('../images/card/ico_card6.png');}
i.card7 { background-image:url('../images/card/ico_card7.png');}
i.card8 { background-image:url('../images/card/ico_card8.png');}
i.card9 { background-image:url('../images/card/ico_card9.png');}
i.card10 { background-image:url('../images/card/ico_card10.png');}
i.card11 { background-image:url('../images/card/ico_card11.png');}


/* 장바구니 */
.shoppingWrap {}
.shoppingWrap .top { position:relative;}
.shoppingWrap .stepBox { display:flex; position:absolute; right:0; top:50%; transform: translateY(-50%); align-items: center;}
.shoppingWrap .stepBox span { display:flex; font-size:15px; color:rgba(34,34,34,0.3); font-weight:500; align-items: center;}
.shoppingWrap .stepBox span + span {}
.shoppingWrap .stepBox span + span:before { content:''; display:inline-flex; width:6px; height:6px; border:2px solid rgba(34,34,34,0.3); border-width:2px 2px 0 0; margin:0px 16px 0; transform:rotate(45deg);}
.shoppingWrap .stepBox span.on { color:#222;}

.shoppingWrap .listWrap { margin-top:20px;}
.shoppingWrap .listWrap table { border-top:1px solid #ccc;}
.shoppingWrap .listWrap th { height:48px; line-height:48px; font-size:13px; color:#222; line-height:1.54; font-weight:500; border-bottom:1px solid #eee;}
.shoppingWrap .listWrap td { border-bottom:1px solid #eee;}
.shoppingWrap .listWrap td + td { border-left:1px solid #eee;}
.shoppingWrap .listWrap .list { display:flex; padding:24px 0px 12px 0;}
.shoppingWrap .listWrap .list + .list { border-top:1px solid #eee;}
.shoppingWrap .listWrap .list .checkbox { margin-top:30px; margin-right:20px;}
.shoppingWrap .listWrap .list > .img { overflow:hidden; flex:0 0 auto; position:relative; width:80px; height:80px; margin-right:24px; border-radius: 8px;}
.shoppingWrap .listWrap .list > .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}
.shoppingWrap .listWrap .list > .img.end:before { content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#000; opacity:0.5;}
.shoppingWrap .listWrap .list > .img.end:after { content:'품절'; display:block; position:absolute; top:50%; left:50%; z-index:1; font-size:16px; color:#fff; font-weight:bold; transform:translate(-50%,-50%)}
.shoppingWrap .listWrap .list .textBox { flex:1 1 auto;}
.shoppingWrap .listWrap .list .textBox .flex { margin-bottom:10px; margin-right:36px;}
.shoppingWrap .listWrap .list .textBox .tit { font-size:15px; color:#222; font-weight: 500;;}
.shoppingWrap .listWrap .list .textBox .text {/* width:378px; */ margin-right:10px; font-size:13px; color:#666;}
.shoppingWrap .listWrap .list .textBox .optionList { display:flex; padding:12px 0; align-items: center;}
.shoppingWrap .listWrap .list .textBox .optionList + .optionList { border-top:1px solid #eee;}
.shoppingWrap .listWrap .list .textBox .money { flex:1 1 auto; font-size:13px; color:#222; text-align:right;}
.shoppingWrap .listWrap .list .textBox .money strong { font-size:14px; font-weight:bold; font-family: 'Poppins';}
.shoppingWrap .listWrap .list .textBox .btnDelete { display:block; width:20px; height:20px; margin-left:14px; font-size:0; background:url('../images/content/btn_delete.png') no-repeat;}
.shoppingWrap .listWrap .list .textBox .optionList > *:last-child { margin-right:36px;}
.shoppingWrap .listWrap .deliverBox { position:relative; height:100%; padding:47px 0; text-align:center;}
.shoppingWrap .listWrap .deliverBox .money { font-size:13px; color:#222;}
.shoppingWrap .listWrap .deliverBox .money strong { font-size:16px; font-weight:bold; font-family: 'Poppins';}
.shoppingWrap .listWrap .deliverBox .textButton { position:absolute; bottom:0; left:50%; width:131px; transform: translateX(-50%);}
.shoppingWrap .listWrap .tfoot td { background:#eee;}
.shoppingWrap .listWrap .tfoot .totalBox .grayBox { background:none;}
.shoppingWrap .listWrap tfoot td { border-bottom:0;}
.shoppingWrap .shoppingTotal { display:flex; padding-top:25px; border-top:1px solid #222; justify-content: center;}
.shoppingWrap .shoppingTotal > div { position:relative; width:220px; text-align:center;}
.shoppingWrap .shoppingTotal > div + div { margin-left:24px;}
.shoppingWrap .shoppingTotal > div.plus:before { content:''; display:block; position:absolute; top:50%; left:-24px; width:24px; height:24px; margin-top:-12px; background:url('../images/content/ico_total_plus.png') no-repeat center center / 100%;}
.shoppingWrap .shoppingTotal > div.minus:before { content:''; display:block; position:absolute; top:50%; left:-24px; width:24px; height:24px; margin-top:-12px; background:url('../images/content/ico_minus.png') no-repeat center center / 100%;}
.shoppingWrap .shoppingTotal > div.result:before { content:''; display:block; position:absolute; top:50%; left:-24px; width:24px; height:24px; margin-top:-12px; background:url('../images/content/ico_total_equal.png') no-repeat center center / 100%;}
.shoppingWrap .shoppingTotal .tit { display:block; margin-bottom:4px; font-size:14px; color:#666;}
.shoppingWrap .shoppingTotal .money { font-size:16px; color:#222;}
.shoppingWrap .shoppingTotal .money strong { font-size:22px; font-weight:bold; font-family: 'Poppins';}
.shoppingWrap .listWrap + .btnGroup { margin:40px 0 0px; justify-content: center;}
.shoppingWrap .listWrap + .btnGroup a { width:308px; height:60px; font-size:18px;}
.shoppingWrap .noneBox { display:flex; padding:160px 0; flex-flow: column; justify-content: center; align-items: center; font-size:14px; color:#666; text-align:center;}
.shoppingWrap .noneBox i { display:block; width:60px; height:60px; margin-bottom:16px; background:url('../images/content/ico_cart_empty.png') no-repeat center center / 100%;}
.shoppingWrap .noneBox + .btnGroup { margin:0px 0 0px; justify-content: center;}
.shoppingWrap .noneBox + .btnGroup a { width:308px; height:60px; font-size:18px;}

/* 기부 내역 */
.donationList { border-top:1px solid #eeeeee;}
.donationList li { padding:17px 0; border-bottom:1px solid #eeeeee;}
.donationList .label { display: inline-flex; min-width:68px; height:20px; border-radius: 3px; padding:0 3px; border:1px solid #e3635f; color:#e3635f; font-size:10px; align-items: center; justify-content: center;}
.donationList .label.wating { border-color:#c6cfe4; color:#425fa5;}
.donationList .date { font-size:11px; color:#666666;}
.donationList .infoBox { display: flex; margin-top:10px; align-items: flex-end;}
.donationList .infoBox .img { overflow: hidden; width:80px; height:80px; border-radius: 50%; border:1px solid #dddddd;}
.donationList .infoBox .img img { width:100%; height:100%; object-fit: cover;}
.donationList .infoBox .textBox { flex:1 1 auto; align-self: center; margin-left:20px;}
.donationList .infoBox .textBox .tit { font-size:15px; font-weight: 500; color:#222;}
.donationList .infoBox .textBox .text { font-size:13px; color:#666666;}
.donationList .infoBox .money { width:160px; margin-bottom:5px; font-size:14px; color:#222; font-weight: bold;}
.donationList .infoBox .button { width:100px; margin-right:18px;}

/* 묶음 상품 팝업 */
.bundlePop {}
.bundlePop .layerPopCont { width:1094px; max-width:1094px;}
.bundlePop .layerPopCont .productListWrap { margin:0 30px;}
.bundlePop .layerPopCont .productListWrap .col4 .slick-list { margin:0 -15px;}
.bundlePop .layerPopCont .productListWrap .col4 .slick-slide { margin:0 15px;}
.bundlePop .layerPopCont .productList.col4 .list .imgBox { height:216px;}
.bundlePop .layerPopCont .productListWrap .arrowGroup a { position:absolute; top:78px; z-index:1; width:60px; height:60px; border-radius:50%; font-size:0;box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.2); background:#fff;}
.bundlePop .layerPopCont .productListWrap .arrowGroup a:after { content:''; display:block; position:absolute; top:50%; left:50%; width:13px; height:22px; background:url('../images/content/ico_visual_arrow.png') no-repeat center center / 13px; transform:translate(-50%, -50%);}
.bundlePop .layerPopCont .productListWrap .arrowGroup .btnPrev { left:-30px;}
.bundlePop .layerPopCont .productListWrap .arrowGroup .btnPrev:after { transform:translate(-50%, -50%) rotate(180deg);}
.bundlePop .layerPopCont .productListWrap .arrowGroup .btnNext { right:-30px;}


/* 주문정보 */
.orderInfo { position: relative; padding-right:364px;}
.orderInfo .left { margin-right:72px}
.orderInfo > .right { position:absolute; top:0; right:0; width:364px; background:#fff;}
.orderInfo > .right .tit { margin-bottom:20px; font-size:18px; color:#222; font-weight:bold;}
.orderInfo > .right ul {}
.orderInfo > .right li { align-items: center;}
.orderInfo > .right li + li { margin-top:8px;}
.orderInfo > .right .label { margin-right:10px; font-size:14px; color:#666;}
.orderInfo > .right .money { margin-left:auto; color:#222; font-size:13px;}
.orderInfo > .right .money strong { font-size: 16px; font-weight:bold;font-family: 'Poppins';}
.orderInfo > .right .total { display:flex; margin-top:15px; padding-top:12px; border-top:1px solid #eee; align-items: center;}
.orderInfo > .right .total .label { font-size:14px; font-weight:500; color:#222;}
.orderInfo > .right .total .money { font-size:16px;}
.orderInfo > .right .total .money strong { font-size:22px;}
.orderInfo > .right .total.lineNone { padding-top:0; border-top:0;}
.orderInfo > .right .grayBox { margin:17px 0 24px; padding:16px; border-radius:8px; background:#f6f6f6;}
.orderInfo > .right .line { margin-top:15px; padding-top:12px; border-top:1px solid #eee;}
.orderInfo > .right .lineBox { padding:32px; border-radius:4px; border:1px solid #eee;}
.orderInfo > .right .moisLinkBox { display: flex; height:110px; border-radius: 10px; margin-top:20px; background:#edf2fc; align-items: center; justify-content: center;}

.orderInfo > .right.fixed { overflow-y: auto; position:fixed; top:95px; left:50%; margin-left:235px; max-height: calc(100% - 105px);}


.addressAdd { display:flex; align-items: center; margin-left:auto; font-size:13px; color:#222;}
.addressAdd a.button { margin-left:12px; min-width:46px; height:28px;}

.addressWrap { margin-bottom:24px;}
.addressWrap .flex { margin-bottom:7px; align-items: center;}
.addressWrap .tit { margin-right:auto; font-size:15px; color:#222; font-weight:500;}
.addressWrap .defultLabel { display:inline-block; margin-left:8px; border:1px solid #eee; border-radius:15px; padding:4px 12px 5px; font-size:10px; color:#222;}
.addressWrap .button.gray { margin-left:4px;}

.paymentBox {}
.paymentBox .info { overflow:hidden; margin-top:24px; border-radius:8px; background:#eeeeee;}
.paymentBox .info .tit { padding:8px 16px 9px; font-size:10px; color:#fff; line-height:1.4; letter-spacing: -0.2px; background:#000; }
.paymentBox .info .text { padding:16px; font-size:10px; color:#666; line-height:1.4; letter-spacing: -0.2px;}
.paymentBox .info .text strong { display:block; margin-bottom:6px; font-size:14px; color:#222; font-weight:500;}
.paymentBox dl { display:flex; margin-top:24px;}
.paymentBox dt { flex:0 0 auto; display:flex; width:214px; height:48px; font-size:12px; color:#666; justify-content: center; flex-flow: column;}
.paymentBox dt strong { display:block; font-size:14px; font-weight:500;}
.paymentBox dd { flex:1 1 auto;}

.payChoice { display:flex; margin-top:16px; flex-wrap: wrap; margin-left:-8px; margin-bottom:-8px;}
.payChoice > div { position:relative; width:calc(20% - 8px); margin-left:8px; margin-bottom:8px;}
.payChoice input { position:absolute; opacity:0;}
.payChoice label { display:flex; height:80px; border:1px solid #eee; border-radius: 4px; font-size:12px; color:#666; align-items:center; justify-content: center; flex-flow: column; transition: border .3s ease; cursor: pointer;}
.payChoice label i { display:block; width:60px; height:28px; margin-bottom:6px; background:no-repeat center center / 100%;}
.payChoice label i.icoPay1 { background-image:url('../images/content/ico_pay1.png');}
.payChoice label i.icoPay2 { background-image:url('../images/content/ico_pay2.png');}
.payChoice label i.icoPay3 { background-image:url('../images/content/ico_pay3.png');}
.payChoice label i.icoPay4 { background-image:url('../images/content/ico_pay4.png');}
.payChoice label i.icoPay5 { background-image:url('../images/content/ico_pay5.png');}
.payChoice label i.icoPay6 { background-image:url('../images/content/ico_pay6.png');}
.payChoice label i.icoPay7 { background-image:url('../images/content/ico_pay7.png');}
.payChoice label i.icoPay8 { background-image:url('../images/content/ico_pay8.png');}
.payChoice label i.icoPay9 { background-image:url('../images/content/ico_pay9.png');}
.payChoice label i.icoPay10 { background-image:url('../images/content/ico_pay10.png');}
.payChoice label i.icoPay11 { background-image:url('../images/content/ico_pay11.png');}
.payChoice label i.icoPay11Over { background-image:url('../images/content/ico_pay11_over.png');}
.payChoice label i.icoPay12 { background-image:url('../images/content/ico_pay12.png');}
.payChoice label i.icoPay13 { background-image:url('../images/content/ico_pay13.png');}
.payChoice label i.icoPay14 { background-image:url('../images/content/ico_pay14.png');}
.payChoice label i.icoPay15 { background-image:url('../images/content/ico_pay15_v2.png');}
.payChoice label i.icoPay15Over { background-image:url('../images/content/ico_pay15_over_v2.png');}


.payChoice input:checked + label { border-color:#222; font-weight:bold;}

.cashReceipt { margin-top:24px;}
.cashReceipt .cashReceiptBox.on { display:flex;}
.cashReceipt .cashReceiptBox { display:none; margin-top:20px;} 
.cashReceipt .cashReceiptBox > .selectBox { flex:0 0 auto; width:288px; margin-right:20px;}
.cashReceipt .cashReceiptBox .phoneForm .selectBox { width:102px}
.cashReceipt .cashReceiptBox .phoneForm .inputBox { width:92px;}

.selectView { display:none;}
.selectView.on { display:block;}

.addressPopWrap .layerPopCont { height:640px;}
.addressPopWrap .popCont { overflow-y: auto; height:456px; margin-bottom:20px;}
.addressPopList {}
.addressPopList .list { margin-bottom:12px; position:relative;}
.addressPopList input { position:absolute; opacity:0;}
.addressPopList label,
.addressPopList .textBox { display:block; position:relative; padding:20px 16px 55px 16px; border:1px solid #eee; border-radius: 8px; transition: border .3s ease; cursor: pointer;}
.addressPopList .tit { display:flex; margin-bottom:8px; align-items: center;}
.addressPopList .tit strong { font-size:16px; font-weight:bold;}
.addressPopList .tit span { margin-left:8px; font-size:15px; font-weight:500;}
.addressPopList .defultLabel { position:absolute; bottom:20px; left:16px; display:inline-block; margin-top:12px; border:1px solid #eee; border-radius:15px; padding:4px 12px 5px; font-size:10px; color:#222; font-weight:bold;}
.addressPopList .button.gray,
.addressPopList .btnEdit { position:absolute; bottom:20px; right:16px;}
.addressPopList .btnEdit .button.gray { position:relative; bottom:0; right:0;}
.addressPopList input:checked + label { border-color:#222;}
.addressPopList .addList { height:64px; border:1px solid #eee; border-radius: 8px;}
.addressPopList .addList a { display:flex; height:100%; align-items: center; justify-content: center; font-size:16px; color:#666; font-weight:500;}


/* 주문완료 */
.resultBox { width:620px; margin:80px auto 0;}
.resultBox .tit { font-size:22px; font-weight: bold; text-align:center;}
.resultBox .text { margin-top:12px; font-size:13px; color:#666; text-align:center;}
.resultBox .grayBox { margin-top:40px; padding:28px 40px; border-radius:8px; background:#f8f8f8;}
.resultBox .grayBox .tit { margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #eee; font-size:14px; font-weight:500;}
.resultBox .grayBox dl { display:flex;}
.resultBox .grayBox dl + dl { margin-top:8px;}
.resultBox .grayBox dt { flex:0 0 auto; width:77px;}
.resultBox .grayBox dd {letter-spacing: -0.28px}
.resultBox .btnGroup { margin-top:26px;}

.resultBox.type2 { width:800px; margin:100px auto 0;}
.resultBox.type2 .tit { font-size:36px; font-weight: bold; text-align:center; line-height:1;}
.resultBox.type2 .text { margin-top:24px; font-size:16px; color:#0c0c0c; text-align:center;}
.resultBox.type2 .subText { margin-top:12px; font-size:14px; color:#767676; text-align:center;}
.resultBox.type2 .grayBox { margin-top:40px; padding:40px 40px; border-radius:16px; background:#f8f8f8;}
.resultBox.type2 .grayBox .tit { margin-bottom:16px; padding-bottom:0px; border-bottom:0px solid #eee; font-size:16px; font-weight:700; text-align:left;}
.resultBox.type2 .grayBox .tit span { font-weight:400; color:#767676;}
.resultBox.type2 .grayBox .smallText { margin-top:8px; font-size:12px; color:#767676; font-weight:400;}
.resultBox.type2 .inputBox { border-radius:8px; background:#fff;}
.resultBox.type2 .inputBox .util { flex:0 0 auto; font-size:16px; color:#767676;}
.resultBox.type2 .btnGroup { margin-top:40px; justify-content: center;}
.resultBox.type2 .btnGroup a { max-width:200px; height:50px; border-radius:8px; font-size:18px; font-weight:400;}

/* 마이페이지 */
.mypageWrap { display:flex; margin-top:44px;}
.mypageWrap .leftGnb { flex:0 0 auto; width:260px;}
.mypageWrap .leftGnb h1 { font-size:30px; font-weight:bold; line-height:1.2;}
.mypageWrap .leftGnb h2 { margin-top:32px; font-size:15px; font-weight:bold; line-height:1.47; letter-spacing: -0.3px;}
.mypageWrap .leftGnb ul { margin-top:12px;}
.mypageWrap .leftGnb li + li { margin-top:8px;}
.mypageWrap .leftGnb li a { font-size:14px; color:#666; line-height:1.57; letter-spacing: -0.28px; transition: all .3s ease;}
.mypageWrap .leftGnb li.on a{ color:#E8890A; font-weight:bold;}
.mypageWrap .leftGnb li:hover a { color:#E8890A;}

.mypageCont { flex:1 1 auto;}
.mypageCont.noTit { margin-top:-27px;}
.mypageCont .myInfoBox { padding:36px 40px 32px; margin-top:8px; border-radius: 12px; border:1px solid #222;}
.mypageCont .myInfoBox > div { display:flex;}
.mypageCont .myInfoBox > div + div { margin-top:36px; padding-top:32px; border-top:1px solid #eee;}
.mypageCont .myInfoBox .userInfo { flex:0 0 auto;}
.mypageCont .myInfoBox .userInfo .name { font-size:20px; font-weight:500; line-height:1.4; letter-spacing: -0.4px;}
.mypageCont .myInfoBox .userInfo .text { margin-top:20px; font-size:12px;}
.mypageCont .myInfoBox .userInfo .text .label { display:inline-block; padding:5px 12px; border-radius:14px; margin-left:12px; vertical-align: middle; font-size:12px; color:#fff; font-weight:bold; background:#3cc35b;}
.mypageCont .myInfoBox .userInfo .text .label.type1 { background:#f2cd00}
.mypageCont .myInfoBox .userInfo .text .label.type2 { background:#cbcbcb;}
.mypageCont .myInfoBox .userInfo .text .label.type3 { background:#a57c5d;}
.mypageCont .myInfoBox .userInfo .text .label.type4 { background:#3cc35b;}
.mypageCont .myInfoBox .orderCount { display:flex; width:608px; margin-left:auto;}
.mypageCont .myInfoBox .orderCount p { position:relative; flex:1 1 auto; font-size:15px; color:#666; text-align:center;}
.mypageCont .myInfoBox .orderCount p + p { margin-left:52px;}
.mypageCont .myInfoBox .orderCount p + p:after { content:''; display:block; position:absolute; top:50%; left:-32px; width:15px; height:26px; background:url('../images/mypage/ico_arrow.png') no-repeat center center /100%; transform: translateY(-50%);}
.mypageCont .myInfoBox .orderCount strong { display:block; font-size:36px; font-family: 'Poppins'; font-weight:bold; color:#222;}

.mypageCont .myInfoBox .addressBox { margin-right:56px;}
.mypageCont .myInfoBox .addressBox > div { display:flex;}
.mypageCont .myInfoBox .addressBox > div + div { margin-top:20px;}
.mypageCont .myInfoBox .addressBox .tit { flex:0 0 auto; width:86px; font-size:14px; color:#666;}
.mypageCont .myInfoBox .addressBox .text { flex:1 1 auto; font-size:14px;}
.mypageCont .myInfoBox .addressBox .textButton { flex:0 0 auto; margin-left:32px; align-self: flex-start;}

.mypageCont .myInfoBox .grayBox { flex:0 0 auto; align-self:flex-start; display:flex; width:340px; padding:20px 32px 13px; border-radius: 12px; background:#f8f8f8; justify-content: space-between;}
.mypageCont .myInfoBox .grayBox > div { font-size:14px; color:#666; text-align:center; font-weight:500;}
.mypageCont .myInfoBox .grayBox strong { display:block; margin-top:15px; font-family: 'Poppins'; font-weight:bold; color:#222; font-size:22px; line-height:1.27; letter-spacing: -0.44px;}
.mypageCont .myInfoBox .grayBox strong em { font-family: 'Noto Sans KR'; font-size:16px; line-height:1.5; letter-spacing: -0.32px;}

.mypageCont .myInfoBox.type2 { padding:36px;}
.mypageCont .myInfoBox.type2 > div { flex-wrap: wrap;}
.mypageCont .myInfoBox.type2 > div + div { margin-top:16px; padding-top:16px;}
.mypageCont .myInfoBox.type2 .userInfo .name { font-size:24px; font-weight:500; line-height:1.4; letter-spacing: -0.4px;}
.mypageCont .myInfoBox.type2 .userInfo .text { margin-top:20px; font-size:15px;}
.mypageCont .myInfoBox.type2 .money { margin-left:auto; align-self: flex-end; font-size:36px; font-weight: 500;}
.mypageCont .myInfoBox.type2 .money span { margin-left:5px; font-size:16px;}
.mypageCont .myInfoBox.type2 .grayBox { flex:1 1 auto;}
.mypageCont .myInfoBox.type2 .grayBox > div { width:100%;}
.mypageCont .myInfoBox.type2 .top { display: flex; width:100%; justify-content: end; gap:5px;}

.myListTop { display:flex; padding:8px 20px; border-top:1px solid #ccc; background:#f8f8f8;}
.myListTop.bt0 { border-top:0;}
.myListTop .tit { flex:1 1 auto; font-weight: bold; font-size:16px;}
.myListTop .tit .textButton { color:#666; font-size:13px;}

.myListWrap .myListBox { display:flex; border-bottom:1px solid #eee;}
.myListWrap .myListBox .list { flex:1 1 auto;}
.myListWrap .myListBox .delivery { display:flex; flex:0 0 auto; width:136px; border-left:1px solid #eee; font-size:12px; line-height:1.83; flex-flow: column; justify-content: center; align-items: center;}
.myListWrap .myListBox .delivery strong { display:block; margin-top:2px; font-size:14px; font-weight:bold; line-height:1.57;}
.myListWrap .myListBox .delivery span { display:block;}
.myListWrap .myListBox .stateBtn { display:flex; flex:0 0 auto; width:200px; border-left:1px solid #eee; justify-content: center; align-items: center; flex-flow: column;}
.myListWrap .myListBox .stateBtn strong { display:block; margin-top:2px; font-size:14px; font-weight:bold; line-height:1.57;}
.myListWrap .myListBox .stateBtn span { display:block; font-size:11px;}
.myListWrap .myListBox .stateBtn > * + * { margin-top:4px;}

.myListWrap.bb0 .myListBox:last-child { border-bottom:0}

.deliveryStepBox { margin-top:20px; padding:40px; border:1px solid #eee; border-radius:4px;}
.deliveryStepBox .stepBox { display:flex; justify-content: space-between;}
.deliveryStepBox .stepBox > div { text-align:center;}
.deliveryStepBox .stepBox > div i { display:block; position:relative; width:80px; height:80px; margin:0 auto; border-radius: 50%; background:#f6f6f6;}
.deliveryStepBox .stepBox > div i:after { content:''; display:block; position:absolute; top:50%; left:50%; width:36px; height:36px; background:no-repeat center center / 100%; transform: translate(-50%,-50%);}
.deliveryStepBox .stepBox > div i.ico1:after { background-image: url('../images/mypage/ico_delivery1.png');}
.deliveryStepBox .stepBox > div i.ico2:after { background-image: url('../images/mypage/ico_delivery2.png');}
.deliveryStepBox .stepBox > div i.ico3:after { background-image: url('../images/mypage/ico_delivery3.png');}
.deliveryStepBox .stepBox > div i.ico4:after { background-image: url('../images/mypage/ico_delivery4.png');}
.deliveryStepBox .stepBox > div i.ico5:after { background-image: url('../images/mypage/ico_delivery5.png');}
.deliveryStepBox .stepBox > div .tit { margin-top:16px; font-size:15px; font-weight:bold;}
.deliveryStepBox .stepBox > div .text { margin-top:8px; font-size:13px; color:#666;}
.deliveryStepBox .stepBox > .arrow { display:block; width:15px; height:26px; background:url('../images/mypage/ico_arrow.png') no-repeat center center /100%; transform: translateY(-50%);}
.deliveryStepBox .textBox {padding-top:40px; margin-top:40px; border-top:1px solid #eee;}
.deliveryStepBox .textBox .text { font-size:15px; color:#f0431a; font-weight:500;}
.deliveryStepBox .textBox dl { display:flex; margin-top:20px; align-items: center;}
.deliveryStepBox .textBox dt { flex:0 0 auto; width:60px; font-size:18px; font-weight:500;}
.deliveryStepBox .textBox dd {}
.deliveryStepBox .textBox dd li + li { margin-top:4px;}

/* 데이터 없음 */
.dataNone { padding:80px 0; text-align:center;}
.dataNone.borderT { border-top:1px solid #ccc;}
.dataNone i { display:block; width:60px; height:60px; margin:0 auto; background:url('../images/common/ico_data_none.png') no-repeat center center / 100%;}
.dataNone p { margin-top:16px; font-size:14px; color:#666;}

/* searchWrap */
.searchWrap { display:flex; margin-top:40px;}
.searchWrap > * + * { margin-left:20px;}
.searchWrap .selectBox { flex:0 0 auto; width:150px;}
.searchWrap .toggleRadio { flex:1 1 auto;}
.searchWrap .datepickerWrap { width:320px;}
.searchWrap .button { min-width:85px;}


/* productItem */
.productItem { display:flex;}
.productItem .img { overflow:hidden; position:relative; flex:0 0 auto; border-radius:8px; width:80px; height:80px;}
.productItem .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}
.productItem .text { align-self: flex-start; margin-left:24px; font-size:15px; font-weight:500; line-height:1.47; letter-spacing: -0.3px;}

/* 사잔등록 및 미리보기 */
.btnPicture { width:100%; font-size:14px;}
.btnPicture:before { content:''; display:inline-block; width:24px; height:24px; margin-right:8px; background:url('../images/content/ico_camera.png') no-repeat center center / 100%;}
.pictureList { display:flex; margin-top:24px; flex-wrap: wrap;}
.pictureList .img { position:relative; width:80px; height:80px; border:1px solid #ddd; border-radius:4px;}
.pictureList .img + .img { margin-left:16px;}
.pictureList .img span { position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / contain;}
.pictureList .img .btnClose { position:absolute; top:-4px; right:-4px; width:20px; height:20px; font-size:0; background:url('../images/content/btn_delete.png') no-repeat center center / 100%;}

/* orderDetailBox */
.orderDetailBox { padding:12px; margin-top:24px; background:#f8f8f8;}

/* whiteBox */
.whiteBox { padding:20px 24px; border:1px solid #eee; border-radius:8px; background:#fff;}


/* */
.paymentInfo { display:flex;}
.paymentInfo > div { width:50%; padding:20px 0;}
.paymentInfo > div:first-child { padding-right:30px;}
.paymentInfo > div + div { padding-left:40px; border-left:1px solid #f6f6f6}


.dlInfoText { display: flex; flex-wrap: wrap;}
.dlInfoText dt { flex:0 0 auto; width:144px; font-size:14px; color:#666;}
.dlInfoText dd { flex:1 1 auto; width:calc(100% - 144px); font-size:14px;}
.dlInfoText dt ~ dt,
.dlInfoText dd ~ dd { margin-top:8px}


.successBox { display:flex; flex-flow: column; padding:120px 0; align-items: center;}
.successBox .tit { font-size:22px; font-weight:bold; text-align:center;}
.successBox .text { margin-top:12px; font-size:13px; color:#666;}

.pointInfoBox { display:flex; border-radius:12px; padding:24px 0; background:#f8f8f8;}
.pointInfoBox > div { width:100%; padding-left:50px; border-left:1px solid #eee;}
.pointInfoBox > div:first-child { border-left:0;}
.pointInfoBox .text { height:40px; margin-bottom:8px; font-size:13px; color:#666;}
.pointInfoBox .point { font-size:13px;}
.pointInfoBox .point strong { font-size:18px; font-weight:bold; font-family: 'Poppins';}

.myProductCommentList { margin:4px 0 26px;}
.myProductCommentList li { padding:16px 0; border-bottom:1px solid #eee;}
.myProductCommentList .imgTextBox { display:flex; margin-top:16px;}
.myProductCommentList .imgTextBox .img { overflow:hidden; flex:0 0 auto; position:relative; width:60px; height:60px; margin-right:24px; border-radius: 8px;}
.myProductCommentList .imgTextBox .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}
.myProductCommentList .imgTextBox .text { margin-top:0; font-size:15px; font-weight:500; color:#222;}


.myProductCommentView .imgTextBox { display:flex; margin-top:16px;}
.myProductCommentView .imgTextBox .img { overflow:hidden; flex:0 0 auto; position:relative; width:80px; height:80px; margin-right:24px; border-radius: 8px;}
.myProductCommentView .imgTextBox .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}
.myProductCommentView .imgTextBox .text { margin-top:0; font-size:15px; font-weight:500; color:#222;}
.myProductCommentView .imgGroup { display:flex;}
.myProductCommentView .imgGroup .img { overflow:hidden; flex:0 0 auto; position:relative; width:80px; height:80px; margin-right:24px; border-radius: 8px;}
.myProductCommentView .imgGroup .img span { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center center / 100%;}

.myProductCommentView .imgTextBox.small { align-items: center;}
.myProductCommentView .imgTextBox.small .img { width:40px; height:40px;}
.myProductCommentView .imgTextBox.small .text { font-size:13px;}

/* 고객센터 */
.customerWrap { display:flex; margin-top:44px;}
.customerWrap .leftGnb { flex:0 0 auto; width:260px;}
.customerWrap .leftGnb h1 { font-size:30px; font-weight:bold; line-height:1.2;}
.customerWrap .leftGnb h2 { margin-top:32px; font-size:15px; font-weight:bold; line-height:1.47; letter-spacing: -0.3px;}
.customerWrap .leftGnb ul { margin-top:12px;}
.customerWrap .leftGnb li + li { margin-top:8px;}
.customerWrap .leftGnb li a { font-size:14px; color:#666; line-height:1.57; letter-spacing: -0.28px; transition: all .3s ease;}
.customerWrap .leftGnb li.on a{ color:#E8890A; font-weight:bold;}
.customerWrap .leftGnb li:hover a { color:#E8890A;}
.customerWrap .customerInfoText { width:160px; margin-top:28px; padding-top:28px; border-top:1px solid #eee}
.customerWrap .customerInfoText .tit { font-size:15px; font-weight:bold;}
.customerWrap .customerInfoText .phone { margin-top:4px; font-family: 'Poppins'; font-size:24px; font-weight:bold;}
.customerWrap .customerInfoText .date { margin-top:8px; font-size:14px; color:#666;}

.customerCont { flex:1 1 auto; }
.customerCont p { letter-spacing: -0.32px;}

.customerSearchWrap { padding:30px 120px 24px; border-radius:12px; background:#f8f8f8;}
.customerSearchWrap .inputBox { background:#fff;}
.customerSearchWrap .text { text-align: center; font-size:13px; color:#666;}
.customerSearchWrap .text a { display:inline-block; position:relative; font-size:13px; color:#666;}
.customerSearchWrap .text a:first-child { margin-left:16px;}
.customerSearchWrap .text a + a { margin-left:33px;}
.customerSearchWrap .text a + a:before { content:''; display:block; position:absolute; top:50%; left:-16px; width:1px; height:12px; background:#ccc; transform: translateY(-50%);}

.qnaBox {}
.qnaBox .list { border-bottom:1px solid #eee;}
.qnaBox .list .q { display:block; position: relative; padding:18px 64px 18px 40px; font-size:14px; color:#222;}
.qnaBox .list .q:before { content:'Q'; display:block; position:absolute; top:15px; left:20px; font-size:16px; color:#666; font-weight: 500}
.qnaBox .list .q:after { content:''; display: block; position:absolute; top:50%; right:20px; width:24px; height:24px; background:url('../images/common/ico_qna_arrow.png') no-repeat center center / 100%; transform: translateY(-50%); transition: all .3s ease;}
.qnaBox .list .q.on:after {  transform: translateY(-50%) rotate(180deg);}
.qnaBox .list .view { display:none; position: relative; padding:20px 20px 20px 40px; font-size:14px; background:#f6f6f6;}
.qnaBox .list .view:before { content:'A'; display:block; position:absolute; top:20px; left:20px; font-size:16px; color:#0082cd; font-weight: 500;}


.tableSearchBox { display: flex; justify-content: flex-end;}
.tableSearchBox * + * { margin-left:4px;}
.tableSearchBox .selectBox { flex:0 0 auto; width:auto; min-width:120px;}
.tableSearchBox .inputBox { flex:0 0 auto; width:auto; min-width:180px;}
.tableSearchBox .btnSearch { display:block; width:32px; height:32px; margin-left:4px; border-radius:4px; font-size:0; background:#000 url('../images/content/ico_search.png') no-repeat center center / 16px;}


.userLevel { display:flex; padding:33px 100px 33px 80px; border-radius: 8px; border:1px solid #eee;;}
.userLevel > div:first-child { width:420px;}
.userLevel > div:nth-child(2) { width:190px;}
.userLevel > div:nth-child(3) { margin-left:auto;}
.userLevel .label { display:inline-block; padding:5px 12px; border-radius:14px; vertical-align: middle; font-size:12px; color:#fff; font-weight:bold; background:#3cc35b;}
.userLevel .label.type1 { background:#f2cd00}
.userLevel .label.type2 { background:#cbcbcb;}
.userLevel .label.type3 { background:#a57c5d;}
.userLevel .label.type4 { background:#3cc35b;}


.paymentKindBox { margin-top:40px;}
.paymentKindBox .list { display:flex;}
.paymentKindBox .list i { flex:0 0 auto; align-self: flex-start; width:52px; height:52px; margin-right:28px; background:no-repeat center center /100%;}
.paymentKindBox .list + .list { margin-top:24px; padding-top:24px; border-top:1px solid #eee}
.paymentKindBox .list i.ico1 { background-image:url('../images/content/ico_point.png')}
.paymentKindBox .list i.ico2 { background-image:url('../images/content/ico_bank.png')}
.paymentKindBox .list i.ico3 { background-image:url('../images/content/ico_creditcard.png')}
.paymentKindBox .list i.ico4 { background-image:url('../images/content/ico_pay.png')}
.paymentKindBox .list i.ico5 { background-image:url('../images/content/ico_zeropay.png')}


/* 이용안내(mypage/infoUse) - 고향사랑기부제 안내 콘텐츠 */
.grad-insert-section { margin-top:32px; line-height:1.7;}
.grad-insert-section .grad-title { position:relative; padding-left:14px; display:flex; align-items:center; font-size:20px; font-weight:700; color:#222; margin:0 0 14px;}
.grad-insert-section .grad-title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:20px; background:linear-gradient(to bottom, #ff6b00, #ffcc00); border-radius:2px;}
.grad-insert-section p { font-size:15px; color:#666; margin:0 0 10px;}
.grad-insert-section ul { margin:0 0 5px; padding-left:40px;}
.grad-insert-section ul li { font-size:15px; color:#666; margin-bottom:4px; list-style:disc; padding-left:6px;}
.grad-insert-section .note { color:#bbb;}
.grad-insert-divider { border:0; margin:32px 0;}
.grad-insert-img { display:block; width:100%; max-width:100%; margin:25px 0 0;}


/* 기획전 */
.eventWrap {}

.visualEvent { position:relative; margin-top:40px;}
.visualEvent .img { overflow:hidden; width:100%; height:349px; border-radius: 16px;}
.visualEvent .img span { display:block; width:100%; height:100%; font-size:0; background:no-repeat center center / cover;}
.visualEvent > .hiddenText { position:absolute; top:50%; left:50%; font-size:30px; font-weight:bold; color:#fff; transform: translate(-50%, -50%);}
.visualEvent .textBox { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center;}
.visualEvent .textBox .tit { font-size:36px; color:#fff; font-weight:bold;}
.visualEvent .textBox .text { margin-top:4px; font-size:18px; color:#fff;}
.visualEvent .textBox .date { margin-top:16px; font-size:18px; color:#fff;}

.eventImgBox { display:flex; flex-wrap: wrap; margin-top:22px; margin-left:-42px;}
.eventImgBox li { width:33.333%; padding-left:42px; margin-bottom:60px;}
.eventImgBox a { display:block;}
.eventImgBox .img { overflow:hidden; width:372px; height:224px;}
.eventImgBox .img span { display:block; width:100%; height:100%; background:no-repeat center center / cover; transition: all .3s ease;}
.eventImgBox .tit { margin-top:20px; font-size:22px; font-weight:bold;}
.eventImgBox .text { margin-top:4px; font-size:16px; color:#666;}
.eventImgBox a:hover .img span { transform: scale(1.1);}


.eventQuizBox { margin-top:40px; padding:40px 0; border:1px solid #ddd; border-radius: 4px; background:#fff;}
.eventQuizBox > .tit { font-size:26px; font-weight: bold; text-align:center;}
.eventQuizBox > .text { margin-top:8px; font-size:15px; color:#666; text-align:center;}
.eventQuizBox > .quizBox { width:680px; margin:32px auto 0; padding:16px 20px 20px; border-radius: 8px; background:#f8f8f8;}
.eventQuizBox > .quizBox .quiz { font-size:15px; color:#3cc35b; font-weight: bold;}
.eventQuizBox > .quizBox .quiz:before { content:''; display:inline-block; width:20px; height:20px; margin-top:-2px; margin-right:4px; vertical-align: middle; background:url('../images/event/ico_quiz.png') no-repeat center center / 100%;}
.eventQuizBox > .quizBox .text { margin-top:8px; font-size:16px;}
.eventQuizBox >.quizRadio { width:680px; margin:24px auto 0;}
.eventQuizBox >.quizRadio p { position:relative;}
.eventQuizBox >.quizRadio p + p { margin-top:8px;}
.eventQuizBox >.quizRadio input { position:absolute; opacity:0}
.eventQuizBox >.quizRadio label { display:block; position:relative; padding:13px 30px 13px 130px; border:1px solid #eee; border-radius: 4px; transition: all .3s ease; cursor: pointer;}
.eventQuizBox >.quizRadio label:before { content:''; ;display:block; position:absolute; left:16px; top:50%; width:24px; height:24px; background:url('../images/event/ico_check.png') no-repeat center center /100%; transform: translateY(-50%);}
.eventQuizBox >.quizRadio input:checked + label { border:3px solid #0774C2}
.eventQuizBox >.quizRadio + .btnGroup { width:680px; margin:32px auto 0;}

.surveyQuizBox { margin-top:40px; padding:40px 0; border:1px solid #ddd; border-radius: 4px; background:#fff;}
.surveyQuizBox > .tit { font-size:26px; font-weight: bold; text-align:center;}
.surveyQuizBox > .text { margin-top:8px; font-size:15px; color:#666; text-align:center;}
.surveyQuizBox > .quizBox { width:680px; margin:32px auto 0; padding:16px 20px 20px; border-radius: 8px; background:#f8f8f8;}
.surveyQuizBox > .quizBox .quiz { font-size:15px; color:#3cc35b; font-weight: bold;}
.surveyQuizBox > .quizBox .quiz:before { content:''; display:inline-block; width:20px; height:20px; margin-top:-2px; margin-right:4px; vertical-align: middle; background:url('../images/event/ico_quiz.png') no-repeat center center / 100%;}
.surveyQuizBox > .quizBox .text { margin-top:8px; font-size:16px;}
.surveyQuizBox >.quizRadio { width:680px; margin:24px auto 0;}
.surveyQuizBox >.quizRadio p { position:relative;}
.surveyQuizBox >.quizRadio p + p { margin-top:8px;}
.surveyQuizBox >.quizRadio input {  }
.surveyQuizBox >.quizRadio label { display:block; position:relative; padding:13px 30px 13px 0; border:1px solid #eee; border-radius: 4px; transition: all .3s ease; cursor: pointer;}
.surveyQuizBox >.quizRadio label:before { content:''; ;display:block; position:absolute; left:16px; top:50%; width:24px; height:24px; transform: translateY(-50%);}
.surveyQuizBox >.quizRadio input:checked + label { border:3px solid #0774C2}
.surveyQuizBox >.quizRadio + .btnGroup { width:680px; margin:32px auto 0;}

.giftCardBox { display:flex;}
.giftCardBox .cardList { width:312px;}
.giftCardBox .cardList .cardImg { display:flex; margin-bottom:36px; flex-wrap: wrap; margin-top:16px; margin-left:-8px;}
.giftCardBox .cardList .cardImg a { display:block; position:relative; width:72px; height:48px; border-radius: 4px; margin-left:8px; margin-bottom:8px; font-size:0; background:no-repeat center center / 100%;}
.giftCardBox .cardList .cardImg a.on:after { content:''; display:block; position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:1px solid #000; border-radius: 4px;}
.giftCardBox .cardList .cardImg .type1 { background-image: url('../images/event/img_gift_card1.png');}
.giftCardBox .cardList .cardImg .type2 { background-image: url('../images/event/img_gift_card2.png');}
.giftCardBox .cardList .cardImg .type3 { background-image: url('../images/event/img_gift_card3.png');}
.giftCardBox .cardList .cardImg .type4 { background-image: url('../images/event/img_gift_card4.png');}
.giftCardBox .cardList .cardImg .type5 { background-image: url('../images/event/img_gift_card5.png');}
.giftCardBox .cardList .cardImg .type6 { background-image: url('../images/event/img_gift_card6.png');}
.giftCardBox .cardList .cardImg .type7 { background-image: url('../images/event/img_gift_card7.png');}
.giftCardBox .cardList .cardImg .type8 { background-image: url('../images/event/img_gift_card8.png');}
.giftCardBox .cardList .textarea textarea { height:120px;}
.giftCardBox .cardView { align-self: flex-start; width:320px; margin-left:auto; border-radius: 8px;}
.giftCardBox .cardView .img { width:100%; height:248px; font-size:0; background:no-repeat center center / 100%;}
.giftCardBox .cardView .text { display:block; width:auto; height:auto; margin:0 16px 16px; padding:17px 16px; border-radius:8px; font-weight: 500; text-align:center; font-size:15px; color:#222;font-family: "Noto Sans KR", sans-serif; background:rgba(255,255,255,0.5);}

.giftCardBox .cardView.type1 { background:#ffec80;}
.giftCardBox .cardView.type1 .img { background-image: url('../images/event/img_gift_card_view1.png');}
.giftCardBox .cardView.type2 { background:#f5ecd3;}
.giftCardBox .cardView.type2 .img { background-image: url('../images/event/img_gift_card_view2.png');}
.giftCardBox .cardView.type3 { background:#adeaed;}
.giftCardBox .cardView.type3 .img { background-image: url('../images/event/img_gift_card_view3.png');}
.giftCardBox .cardView.type4 { background:#fddddd;}
.giftCardBox .cardView.type4 .img { background-image: url('../images/event/img_gift_card_view4.png');}
.giftCardBox .cardView.type5 { background:#dfdcf4;}
.giftCardBox .cardView.type5 .img { background-image: url('../images/event/img_gift_card_view5.png');}
.giftCardBox .cardView.type6 { background:#efeff4;}
.giftCardBox .cardView.type6 .img { background-image: url('../images/event/img_gift_card_view6.png');}
.giftCardBox .cardView.type7 { background:#ededef;}
.giftCardBox .cardView.type7 .img { background-image: url('../images/event/img_gift_card_view7.png');}
.giftCardBox .cardView.type8 { background:#ededef;}
.giftCardBox .cardView.type8 .img { background-image: url('../images/event/img_gift_card_view8.png');}


/* 카드 */
.cardSwipeBox {}
.cardSwipeBox .cardListBox { position:relative;}
.cardSwipeBox .cardListBox input { position:absolute; top:0px; left:0; opacity:0;}
.cardSwipeBox .cardList { display:block; position:relative; width:220px; height:140px; margin:0 10px; border-radius: 8px; background:#000; transition: all .3s ease; cursor: pointer;background:#f4f4f4}
.cardSwipeBox .cardList .logo { position:absolute; top:20px; left:16px;width:62px; height:15px; background:url('../images/card/ico_cardList12.png') no-repeat center center / 100%;}
.cardSwipeBox .cardList .textBox { position:absolute; bottom:16px; right:20px; text-align:right;}
.cardSwipeBox .cardList .textBox .text { font-size:14px; color:#222; font-weight:bold;}
.cardSwipeBox .cardList .textBox .number { margin-top:5px; font-size:13px; color:#222;}
.cardSwipeBox .cardList.other { background:#fff; border:1px solid #eee}
.cardSwipeBox .cardList.other .textBox { display:block; width:100%; height:100%; display:flex; position:static; align-items: center; justify-content: center;}
.cardSwipeBox .cardList.other .textBox .text { font-size:16px; color:#666; font-weight: 500;}
.cardSwipeBox .cardListBox.slick-slide { opacity:0.3;}
.cardSwipeBox .cardListBox.slick-center { opacity:1}

.cardSwipeBox .cardListBox .selectBox { width:auto; margin:10px 10px 0;}

.cardSwipeBox .cardList.CCDI { background:#000;}
.cardSwipeBox .cardList.CCDI .logo { width:68px; height:14px; background-image:url('../images/card/ico_cardList1.png')}
.cardSwipeBox .cardList.CCDI .textBox .text { color:#fff;}
.cardSwipeBox .cardList.CCDI .textBox .number { color:#fff;}
.cardSwipeBox .cardList.CCKM { background:#ffce0b;}
.cardSwipeBox .cardList.CCKM .logo { width:24px; height:18px; background-image:url('../images/card/ico_cardList2.png')}
.cardSwipeBox .cardList.CCLG { background:#b5ebff;}
.cardSwipeBox .cardList.CCLG .logo { width:24px; height:24px; background-image:url('../images/card/ico_cardList3.png')}
.cardSwipeBox .cardList.CCSS { background:#cbe0ff;}
.cardSwipeBox .cardList.CCSS .logo { width:68px; height:8px; background-image:url('../images/card/ico_cardList4.png')}
.cardSwipeBox .cardList.CCLO {background:#6f6259}
.cardSwipeBox .cardList.CCLO .logo { width:24px; height:24px; background-image:url('../images/card/ico_cardList5.png')}
.cardSwipeBox .cardList.CCLO .textBox .text { color:#fff;}
.cardSwipeBox .cardList.CCLO .textBox .number { color:#fff;}
.cardSwipeBox .cardList.BK20 {background:#aceff8}
.cardSwipeBox .cardList.BK20 .logo { width:24px; height:24px; background-image:url('../images/card/ico_cardList6.png')}
.cardSwipeBox .cardList.CCKE {background:#a6d8d1}
.cardSwipeBox .cardList.CCKE .logo { width:24px; height:22px; background-image:url('../images/card/ico_cardList7.png')}
.cardSwipeBox .cardList.CCBC {background:#e73e44}
.cardSwipeBox .cardList.CCBC .logo { width:24px; height:24px; background-image:url('../images/card/ico_cardList8.png')}
.cardSwipeBox .cardList.CCBC .textBox .text { color:#fff;}
.cardSwipeBox .cardList.CCBC .textBox .number { color:#fff;}
.cardSwipeBox .cardList.CCNH {background:#d6eaff}
.cardSwipeBox .cardList.CCNH .logo { width:49px; height:18px; background-image:url('../images/card/ico_cardList9.png')}
.cardSwipeBox .cardList.CCCT {background:#c9e3f4}
.cardSwipeBox .cardList.CCCT .logo { width:28px; height:18px; background-image:url('../images/card/ico_cardList10.png')}
.cardSwipeBox .cardList.CCHM {background:#c9e3f4}
.cardSwipeBox .cardList.CCHM .logo { width:28px; height:18px; background-image:url('../images/card/ico_cardList10.png')}
.cardSwipeBox .cardList.CCSG {background:#c9e3f4}
.cardSwipeBox .cardList.CCSG .logo { width:28px; height:18px; background-image:url('../images/card/ico_cardList10.png')}
.cardSwipeBox .cardList.BK90 {background:#ffde21}
.cardSwipeBox .cardList.BK90 .logo { width:15px; height:20px; background-image:url('../images/card/ico_cardList11.png')}

.cardSwipeBox .slick-arrow { position:absolute; top:40px; z-index:1; width:60px; height:60px; font-size:0; border-radius: 50%;box-shadow: 3px 3px 12px 0 rgba(0, 0, 0, 0.2); background:#fff no-repeat center center / 13px;}
.cardSwipeBox .slick-arrow:after { content:''; display:block; position:absolute; top:50%; left:50%; width:13px; height:22px; transform: translate(-50%,-50%); background:no-repeat center center / 100%;}
.cardSwipeBox .slick-prev { left:-40px;}
.cardSwipeBox .slick-prev:after { background-image:url('../images/content/ico_visual_arrow.png'); transform: translate(-50%,-50%) rotate(180deg)}
.cardSwipeBox .slick-next { right:-40px;}
.cardSwipeBox .slick-next:after { background-image:url('../images/content/ico_visual_arrow.png')}
.cardSwipeBox ~ .numberCount { margin:8px 0 16px; text-align: center; font-size:12px; color:rgba(34,34,34,0.6)}
.cardSwipeBox ~ .numberCount strong { color:#222; font-weight:bold;}

.cardSwipeBox.col4 { display:flex; flex-flow: wrap; margin-left:-20px;}
.cardSwipeBox.col4 .cardList { margin-left:20px; margin-right:0; margin-bottom:20px;}

.cardSwipeBox .cardList .btnDelete { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; font-size:0; background:#fff url('../images/common/btn_delete.png') no-repeat center center / 16px;}


.popularSearch { position:relative; margin-top:40px; padding:24px; border-radius:8px; background:rgba(60, 195, 91,0.1);}
.popularSearch .tit { text-align:center; font-size:15px; color:#000; font-weight:bold; letter-spacing: -0.3px;}
.popularSearch .time { position:absolute; top:24px; right:24px; font-size:13px; color:#666;}
.popularSearch .wordList { margin-top:16px; text-align:center; font-size:0;}
.popularSearch .wordList a { display:inline-flex; padding:8px 16px; margin:0 4px; vertical-align: middle; font-size:13px; color:#222; background:#fff; border:1px solid #ddd; border-radius: 30px;}
.popularSearch .wordList a.hash:before { content:'#'; display:inline-block; margin-right:3px; vertical-align: middle; font-size:13px; color:#222;}

.errorBox { display:flex; width:620px; height:100vh; margin:0 auto; flex-flow: column; justify-content: center; text-align: center;}
.errorBox .ico { display:block; width:100px; height:80px; margin:0 auto; background:no-repeat center center / 100%;}
.errorBox .ico.type1 { background-image:url('../images/common/ico_error1.png')}
.errorBox .ico.type2 { background-image:url('../images/common/ico_error2.png')}
.errorBox .ico.type3 { background-image:url('../images/common/ico_error3.png')}
.errorBox .tit { margin-top:24px; font-size:32px; color:#222; line-height:1.44; letter-spacing: -0.64px; font-weight:bold;}
.errorBox .text { margin-top:24px; font-size:16px; color:#222; line-height:1.5; letter-spacing: -0.32px;}
.errorBox .btnGroup { margin-top:80px;}


.scrollBox { overflow-y: auto; max-height:323px;}

.partershipWrap { width:940px; margin:0 auto;}

.scrollBox { overflow-y: auto; max-height:177px; padding:13px 16px; border:1px solid #eee; border-radius:4px; font-size:13px; color:#666;}

.whiteBoxList { display:flex;  justify-content: space-between;}
.whiteBoxList li { display:flex; flex-flow: column; justify-content: center; align-items: center; width:280px; height:140px; background:#fff; border:1px solid #ddd; border-radius:12px;}
.whiteBoxList li .tit { margin-bottom:12px; font-size:20px; color:#222; font-weight:500;}

.roundList { display:flex;}
.roundList li { display:flex; width:180px; height:60px; border:1px solid #dbdbdb; border-radius: 8px; background:#fff; font-size:16px; font-weight:500; align-items: center; justify-content: center;}
.roundList li + li { margin-left:10px;}
.roundList.type2 li { width:calc(25% - 20px); height:auto; padding:28px 20px; font-size:14px; line-height:1.57;}

.imgStepBox { display:flex; margin-top:20px;}
.imgStepBox .img { font-size:0;}
.imgStepBox .img img { margin-right:20px;}
.imgStepBox .textBox { padding:32px 0 0 60px;}
.imgStepBox .textBox ul {}
.imgStepBox .textBox li { display:flex; font-size:16px; align-items: center;}
.imgStepBox .textBox li + li { margin-top:20px;}
.imgStepBox .textBox .step { display:flex; flex:0 0 auto; margin-right:16px; width:48px; height:48px; border-radius:50%; background:#ddd; font-size:16px; font-family: 'Poppins'; align-items: center; justify-content: center;}

.imgStepBox.type2 { width:756px; margin:60px auto 0; flex-flow: column;}
.imgStepBox.type2 .textBox { padding-left:0;}
.imgStepBox.type2 .textBox ul { display:flex; flex-flow: wrap;}
.imgStepBox.type2 .textBox li { width:33.333%;}

.imgStepBox2 { display:flex; flex-flow: wrap; margin-top:26px;}
.imgStepBox2 li { display:flex; width:50%;}
.imgStepBox2 li:nth-child(2n) { padding-left:50px;}
.imgStepBox2 .img { margin-top:57px; margin-left:auto;}
.imgStepBox2 .img img {}
.imgStepBox2 .textBox {}
.imgStepBox2 .textBox .number { display:block; font-size:36px; font-weight:bold; font-family: 'Poppins'; color:#3cc35b;}
.imgStepBox2 .textBox .tit { font-size:22px; font-weight:500;}
.imgStepBox2 .textBox .text { margin-top:16px; font-size:14px; line-height:1.71;}


.stepArrowBox {}
.stepArrowBox ol { display:flex; justify-content: space-between;}
.stepArrowBox li { display:flex;  width:280px; height:68px; background:#f8f8f8; border-radius: 12px; align-items: center; justify-content: center;}
.stepArrowBox li + li { position:relative;}
.stepArrowBox li + li:before { content:''; display:block; position:absolute; top:31px; left:-30px; width:15px; height:26px; background:url('../images/content/ico_step_arrow.png') no-repeat center center / 100%;}

.lineLinkBox { display:flex; margin-left:-16px;}
.lineLinkBox > div { display:flex; width:calc(50% - 16px); height:100px; padding:0 40px; margin-left:16px; align-items: center; border:1px solid #dddddd; border-radius:4px;}
.lineLinkBox > div a { margin-left:auto;}

.imgNumBox { margin-top:28px;}
.imgNumBox ul { display:flex; text-align:center; justify-content: space-between;}
.imgNumBox li { display:flex; flex-flow: column;}
.imgNumBox li .step { display:flex; flex:0 0 auto; margin:0 auto; width:48px; height:48px; border-radius:50%; background:#ddd; font-size:16px; font-family: 'Poppins'; align-items: center; justify-content: center;}
.imgNumBox li .img { padding-top:24px; margin-top:auto;}


.payChoiceBox {}
.payChoiceBox .grayBox { display:none; padding:24px;}
.payChoiceBox .grayBox.on { display:block;}
.payChoiceBox .grayBox li { margin-top:8px;}



/************************************  jlee추가   *********************************************/
.stampBox {position:relative;}
.stampBox .stamp {position:absolute;color:transparent;width:70px;height:70px;background-size:contain;}
.section.print {}
.section.print .printA4Cont {}
.section.print .printA4Cont h1 {font-size:32px;margin-bottom:40px;color:#222;font-weight:bold;text-align:center;}
.section.print .printA4Cont .tableView table {border:2px solid #6f7a94;}
.section.print .printA4Cont .tableView table th {border-color:#ccc;color:#222;}
.section.print .printA4Cont .tableView table td {border-color:#ccc;color:#555;}
.section.print .printA4Cont .tableView.slim table th,
.section.print .printA4Cont .tableView.slim table td {border-right:1px solid #ccc;}
.myListWrap.type2 .myListTop {padding:8px 0;}
.myListWrap.type2 .th1 {display:flex;flex:1 1 auto;}
.myListWrap.type2 .th4,
.myListWrap.type2 .th3,
.myListWrap.type2 .th2 {display:flex;flex:0 0 auto;width:110px;justify-content:center;align-items:center;flex-flow:column;}
.layerPopWrap.wAutoScroll .layerPopCont {max-width:none;height:700px;}
.layerPopWrap.wAutoScroll .layerPopCont .popCont {overflow-y:auto;height:500px;margin-bottom: 20px;}
.tableView.slim table th {text-align:center;}
.tableView.slim table th,
.tableView.slim table td {padding:10px;}
.tableView.slim2 table th,
.tableView.slim2 table td {padding:0;border-left:1px solid #eee;text-align:center;line-height:1;padding:10px 0;}
.tableView.slim2 table td.rt {text-align:right;padding-right:5px;}
.tableView.slim2 table td.lt {text-align:left;padding-left:5px;}

.guidePopWrap .layerPopCont { height:700px;}
.guidePopWrap .popCont { overflow-y: auto; height:650px;}


/*********************************** 고향사랑 기부제 ***********************************/
.bannerBox { margin-top:18px;}
.bannerBox a { display: block;}
.bannerBox a + a { margin-top:20px;}


/* 06-20 */
#container.localWrap { padding-top:73px;}
#container.localWrap .section { width:1280px;}

/*.localWrap {}*/
/*.localWrap * { font-family: 'Pretendard'; color:#0C0C0C; letter-spacing: -0.5px;}*/
/*.localWrap .visualBox { overflow: hidden; position:relative;}*/
/*.localWrap .visualBox .visual {}*/
/*.localWrap .visualBox .visual:after { content:''; display: block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7);}*/
/*.localWrap .visualBox .visual img { animation:visualAni 10s infinite alternate;}*/
/*.localWrap .visualBox .textBox { position:absolute; top:50%; left:0; right:0; width:1280px; margin:0 auto; transform: translateY(-50%);}*/
/*.localWrap .visualBox .textBox .label { display: inline-flex; padding:12px 20px; border-radius:80px; font-size:16px; font-weight: 400; background:#fff; align-items: center; line-height: 1;}*/
/*.localWrap .visualBox .textBox .tit { margin-top:32px; font-size:40px; color:#fff; font-weight: 700; line-height:1.3}*/
/*.localWrap .visualBox .textBox .text { margin-top:16px; font-size:14px; line-height: 1.6; color:#fff;}*/

.localWrap .bannerBox { margin:100px 0;}
.localWrap .bannerBox .swiper { overflow: hidden; border-radius: 32px;}
.localWrap .bannerBox .swiper .swiper-slide { position:relative; min-height:310px; /*background-color: #454545;*/}
.localWrap .bannerBox .swiper .textBox { padding:100px 160px;}
.localWrap .bannerBox .swiper .textBox .subTit { font-size:16px; color:#000000; font-weight: 400; line-height: 1;}
.localWrap .bannerBox .swiper .textBox .tit { margin-top:12px; line-height: 1.3; color:#000000; font-size: 40px; font-weight: 700;}
.localWrap .bannerBox .swiper .textBox .btn { display: inline-block; margin-top:48px; padding:12px 28px; border:1px solid #fff; border-radius: 60px; font-size:16px; color:#fff;;}
.localWrap .bannerBox .swiper .img { position:absolute; top:50%; right:auto; transform: translateY(-50%);}
.localWrap .bannerBox [class*=swiper-button] { width:64px; height:64px; border-radius: 50%; font-size:0; background:rgba(255,255,255,0.12)}
.localWrap .bannerBox [class*=swiper-button]:after { width:14px; height:22px; font-size:0; background-image: url("data:image/svg+xml,%3Csvg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 11L12 20' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.localWrap .bannerBox .swiper-button-next:after { transform: rotate(180deg);}
.localWrap .bannerBox .swiper-pagination { margin-top:20px;}
.localWrap .bannerBox .swiper-pagination .swiper-pagination-bullet { width:8px; height:8px; background:#0C0C0C; transition: all .3s ease;}
.localWrap .bannerBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width:24px; border-radius: 5px;}

.localWrap .tit-h2 { font-size:36px; color:#000; font-weight: 600;}
/* 검색 페이지에서 검색 시에 우측 쏠림현상 문제점 해당 코드가 없어서 생기는 문제 */
.localWrap .productListWrap .productList.col4 { margin-left:-20px; margin-bottom:-80px;}
.localWrap .productListWrap.noSlick .productList.col4 { margin-left:-20px; margin-bottom:-80px;}
.localWrap .productList.col4 .list { width:calc(25% - 20px); margin-left:20px; margin-bottom:80px !important;}
.localWrap .productList.col4 .list .imgBox { height:305px; border-radius: 16px;}
/* 인기 답례품 Best의 padding 제거하여 좌측 정렬 */
.localWrap .productList .list .textBox { padding-top:15px;}
/* .localWrap .productList .list .textBox { padding:0px;} */
/* .localWrap .productList .list .textBox { padding:20px;} */
.localWrap .productList .list .textBox .sutTit { line-height:1; font-size:16px; color:#767676; margin-top: 10px;}
.localWrap .reviewSwiper .textBox dl dd .sutTit {line-height:1; font-size:14px; color:#767676;}
.localWrap .productList .list .textBox .sutTit.location::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23767676'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");    background-size: contain;
    vertical-align: middle;}
.localWrap .reviewSwiper .textBox dl dd .sutTit.location{
    margin-top: 5px;
}
.localWrap .reviewSwiper .textBox dl dd .sutTit.location::before{
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23767676'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");    background-size: contain;
    vertical-align: middle;
}
.localWrap .productList .list .textBox .text { font-size:18px; margin-top: 8px;}
.localWrap .productList .list .textBox .money { font-size:20px;}
.localWrap .productList .list .textBox .money .small { font-size:18px; font-weight: 400;}
.localWrap .productList .list .textBox .grayLine { margin-left:8px; padding:6px 12px; border:1px solid #DEDEDE; border-radius: 20px; margin-top:-2px; vertical-align: middle; font-size:12px;}
.localWrap .productList .list .textBox .yellowLine {    margin-left: 8px;padding: 6px 12px;border: 0px solid #eca9a9;background: #FFF9E9;border-radius: 20px;margin-top: -2px;vertical-align: middle;font-size: 14px;color: #FF8800;}
.localWrap .productList .list .textBox .star { margin-top:0px; font-size:16px; font-weight: bold;}
.localWrap .productList .list .textBox .star:before { width:16px; height:16px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.9801L4.93959 13.9094C4.8372 13.9769 4.72912 14.0067 4.61534 13.9987C4.50157 13.9908 4.40105 13.9531 4.31379 13.8857C4.22653 13.8181 4.16014 13.7318 4.11463 13.6266C4.06912 13.5213 4.05968 13.4032 4.0863 13.2722L4.89403 9.62205L2.192 7.16271C2.09336 7.07148 2.03363 6.9693 2.01281 6.85616C1.99188 6.74302 1.9966 6.63286 2.02698 6.52567C2.05735 6.41849 2.11424 6.32917 2.19763 6.25771C2.28103 6.18626 2.38723 6.14255 2.51625 6.12659L6.08863 5.79914L7.47096 2.35728C7.52022 2.23819 7.59514 2.14887 7.69572 2.08932C7.79618 2.02977 7.89761 2 8 2C8.10239 2 8.20382 2.02977 8.30428 2.08932C8.40486 2.14887 8.47978 2.23819 8.52904 2.35728L9.91137 5.79914L13.4837 6.12659C13.6128 6.14255 13.719 6.18626 13.8024 6.25771C13.8858 6.32917 13.9426 6.41849 13.973 6.52567C14.0034 6.63286 14.0081 6.74302 13.9872 6.85616C13.9664 6.9693 13.9066 7.07148 13.808 7.16271L11.106 9.62205L11.9137 13.2722C11.9403 13.4032 11.9309 13.5213 11.8854 13.6266C11.8399 13.7318 11.7735 13.8181 11.6862 13.8857C11.5989 13.9531 11.4984 13.9908 11.3847 13.9987C11.2709 14.0067 11.1628 13.9769 11.0604 13.9094L8 11.9801Z' fill='%23FF8800'/%3E%3C/svg%3E%0A");}
.localWrap .productList .list .textBox .star span { margin-left:3px; color:#767676;}

.mainMindBox { overflow: hidden; position: relative; display: flex; height:832px; margin-top:100px; padding:40px 0 0; border-radius: 32px; flex-flow: column; background:no-repeat center center / cover;}
.mainMindBox:before { content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7);}
.mainMindBox .tit-h2 { position:relative; text-align: center; color:#fff;}
.mainMindBox .swipe_mind { overflow: hidden; display: flex; margin:0 auto; flex:1 1 auto; gap:20px;}
.mainMindBox .swiper-wrapper {transition-timing-function:linear}
.mainMindBox .swiper-slide { display: flex; width:286px; height:328px; padding:20px 40px; border-radius: 16px; background:#fff; flex-flow: column; justify-content: center; box-sizing: border-box;}
.mainMindBox .swiper-slide .tit { font-size:32px;}
.mainMindBox .swiper-slide .tit strong { font-weight: bold;}
.mainMindBox .swiper-slide .time { margin-top:6px; color:#767676; font-size:16px; font-weight: 400;}
.mainMindBox .swiper-slide .text { margin-top:28px; font-size:20px; font-weight: 700;}

.mainBannerBox { padding:80px 0; background:#F2F2F2;}
.mainBannerBox .section { display: flex; align-items: center;}
.mainBannerBox .textBox .subTit { font-size:24px; line-height: 1; font-weight: 600;}
.mainBannerBox .textBox .tit { margin-top:28px; font-weight: 700; line-height: 1.4; font-size:36px;}
.mainBannerBox .textBox .text { margin-top:16px; color:#767676;}
.mainBannerBox .imgBox { width:550px; height:400px; margin-left:auto;}
.mainBannerBox .imgBox  img { width:100%; height:100%;}

.donationInfoBox { overflow: hidden; margin-top:200px;}
.donationInfoBox .tit-h2 { font-weight: 600; font-size:80px; line-height: 1.2;}
.donationInfoBox .tit-h2 > span:not(.pointyellow){ display: block; margin-bottom:12px; font-size:32px; font-weight: 700; line-height: 1.2;}
.donationInfoBox .info { display: flex; margin-top:100px; margin-bottom:-60px; margin-left:-80px; flex-wrap: wrap;}
.donationInfoBox .info dl { width:calc(50% - 80px); margin-left:80px; margin-bottom:60px;}
.donationInfoBox .info dl dt { padding-bottom:24px; border-bottom:1px solid #DBDBDB; font-size:20px; font-weight: 600; line-height: 1;}
.donationInfoBox .info dl dt i { display: inline-block; width:24px; height:24px; margin-top:-2px; margin-right:8px; vertical-align: middle;}
.donationInfoBox .info dl dt i.icoDonation1 { background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.91553 10.5463C8.09691 9.71092 7.68759 8.662 7.68759 7.3995C7.68759 6.13701 8.09691 5.08809 8.91553 4.25274C9.73434 3.41758 10.7625 3 12 3C13.2375 3 14.2657 3.41758 15.0845 4.25274C15.9031 5.08809 16.3124 6.13701 16.3124 7.3995C16.3124 8.662 15.9031 9.71092 15.0845 10.5463C14.2657 11.3814 13.2375 11.799 12 11.799C10.7625 11.799 9.73434 11.3814 8.91553 10.5463ZM3 19.087V18.1307C3 17.4292 3.17344 16.8155 3.52031 16.2895C3.86719 15.7634 4.31878 15.3633 4.87509 15.0892C6.10003 14.5091 7.29684 14.0739 8.46553 13.7837C9.63441 13.4935 10.8126 13.3484 12 13.3484C13.1874 13.3484 14.3624 13.4967 15.5249 13.7932C16.6874 14.0897 17.8812 14.5217 19.1063 15.0892C19.675 15.3633 20.1328 15.7634 20.4797 16.2895C20.8266 16.8155 21 17.4292 21 18.1307V19.087C21 19.6163 20.8172 20.0675 20.4516 20.4405C20.0859 20.8135 19.6437 21 19.1249 21H4.87509C4.35628 21 3.91406 20.8135 3.54844 20.4405C3.18281 20.0675 3 19.6163 3 19.087Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.donationInfoBox .info dl dt i.icoDonation2 {background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4668 9.79175C20.1556 8.98608 21 8.0555 21 7C21 5.93333 20.1556 5 18.4668 4.2C16.7778 3.4 14.6222 3 12 3C9.37783 3 7.22225 3.4 5.53325 4.2C3.84442 5 3 5.93333 3 7C3 8.0555 3.84442 8.98608 5.53325 9.79175C7.22225 10.5972 9.37783 11 12 11C14.6222 11 16.7778 10.5972 18.4668 9.79175ZM14.7208 13.2875C15.7514 13.1458 16.7334 12.9223 17.6667 12.6168C18.6001 12.3111 19.3889 11.9153 20.0333 11.4293C20.6778 10.9431 21 10.3556 21 9.66675V12.1668C21 12.8556 20.6778 13.4431 20.0333 13.9293C19.3889 14.4153 18.6001 14.8111 17.6667 15.1168C16.7334 15.4223 15.7514 15.6458 14.7208 15.7875C13.6903 15.9292 12.7861 16 12.0083 16C11.2306 16 10.3237 15.9292 9.2875 15.7875C8.25133 15.6458 7.26658 15.4194 6.33325 15.1082C5.39992 14.7972 4.61108 14.3987 3.96675 13.9125C3.32225 13.4263 3 12.8444 3 12.1668V9.66675C3 10.3444 3.32225 10.9263 3.96675 11.4125C4.61108 11.8987 5.39992 12.2972 6.33325 12.6082C7.26658 12.9194 8.25133 13.1458 9.2875 13.2875C10.3237 13.4292 11.2306 13.5 12.0083 13.5C12.7861 13.5 13.6903 13.4292 14.7208 13.2875ZM14.7208 18.2875C15.7514 18.1458 16.7334 17.9222 17.6667 17.6167C18.6001 17.3111 19.3889 16.9153 20.0333 16.4293C20.6778 15.9431 21 15.3556 21 14.6668V17.1668C21 17.8556 20.6778 18.4431 20.0333 18.9292C19.3889 19.4153 18.6001 19.8111 17.6667 20.1168C16.7334 20.4223 15.7514 20.6458 14.7208 20.7875C13.6903 20.9292 12.7861 21 12.0083 21C11.2306 21 10.3237 20.9292 9.2875 20.7875C8.25133 20.6458 7.26658 20.4194 6.33325 20.1083C5.39992 19.7973 4.61108 19.3987 3.96675 18.9125C3.32225 18.4263 3 17.8444 3 17.1668V14.6668C3 15.3444 3.32225 15.9263 3.96675 16.4125C4.61108 16.8987 5.39992 17.2973 6.33325 17.6083C7.26658 17.9194 8.25133 18.1458 9.2875 18.2875C10.3237 18.4292 11.2306 18.5 12.0083 18.5C12.7861 18.5 13.6903 18.4292 14.7208 18.2875Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.donationInfoBox .info dl dt i.icoDonation3 {background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1668 13.7168L9.93325 12.4918C9.77225 12.3306 9.57925 12.25 9.35425 12.25C9.12925 12.25 8.93342 12.3333 8.76675 12.5C8.60558 12.6612 8.525 12.8584 8.525 13.0918C8.525 13.3251 8.60558 13.5223 8.76675 13.6833L11.4668 16.3668C11.6334 16.5334 11.8278 16.6168 12.05 16.6168C12.2722 16.6168 12.4666 16.5334 12.6333 16.3668L15.3167 13.6833C15.4777 13.5223 15.5569 13.3264 15.5542 13.0958C15.5514 12.8653 15.4667 12.6667 15.3 12.5C15.1388 12.3388 14.9458 12.2569 14.7208 12.2543C14.4958 12.2514 14.2999 12.325 14.1333 12.475L12.8333 13.7168V9.96675C12.8333 9.72775 12.7541 9.52908 12.5957 9.37075C12.4374 9.21242 12.2388 9.13325 12 9.13325C11.7612 9.13325 11.5626 9.21242 11.4043 9.37075C11.2459 9.52908 11.1668 9.72775 11.1668 9.96675V13.7168ZM4.66675 22C4.20558 22 3.8125 21.8375 3.4875 21.5125C3.1625 21.1875 3 20.7944 3 20.3333V5.66675C3 5.20558 3.1625 4.8125 3.4875 4.4875C3.8125 4.1625 4.20558 4 4.66675 4H9.48325C9.61108 3.41117 9.90975 2.93058 10.3793 2.55825C10.8486 2.18608 11.3888 2 12 2C12.6112 2 13.1514 2.18608 13.6208 2.55825C14.0903 2.93058 14.3889 3.41117 14.5167 4H19.3333C19.7944 4 20.1875 4.1625 20.5125 4.4875C20.8375 4.8125 21 5.20558 21 5.66675V20.3333C21 20.7944 20.8375 21.1875 20.5125 21.5125C20.1875 21.8375 19.7944 22 19.3333 22H4.66675ZM12.5875 4.8875C12.7513 4.72367 12.8333 4.52783 12.8333 4.3C12.8333 4.07217 12.7513 3.87633 12.5875 3.7125C12.4237 3.54867 12.2278 3.46675 12 3.46675C11.7722 3.46675 11.5763 3.54867 11.4125 3.7125C11.2487 3.87633 11.1668 4.07217 11.1668 4.3C11.1668 4.52783 11.2487 4.72367 11.4125 4.8875C11.5763 5.05133 11.7722 5.13325 12 5.13325C12.2278 5.13325 12.4237 5.05133 12.5875 4.8875Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.donationInfoBox .info dl dt i.icoDonation4 {background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5832 14.5L8.2 12.1168C8.03883 11.9556 7.84442 11.875 7.61675 11.875C7.38892 11.875 7.19442 11.9556 7.03325 12.1168C6.87225 12.2778 6.7945 12.4722 6.8 12.7C6.8055 12.9278 6.88325 13.1223 7.03325 13.2833L10 16.2832C10.1667 16.4499 10.3611 16.5332 10.5832 16.5332C10.8056 16.5332 11.0001 16.4499 11.1668 16.2832L16.9668 10.4833C17.1277 10.3223 17.2083 10.1251 17.2083 9.89175C17.2083 9.65842 17.1277 9.46117 16.9668 9.3C16.8056 9.13883 16.6083 9.05825 16.375 9.05825C16.1417 9.05825 15.9444 9.13883 15.7833 9.3L10.5832 14.5ZM4.66675 22C4.20558 22 3.8125 21.8375 3.4875 21.5125C3.1625 21.1875 3 20.7944 3 20.3333V5.66675C3 5.20558 3.1625 4.8125 3.4875 4.4875C3.8125 4.1625 4.20558 4 4.66675 4H9.48325C9.61108 3.41117 9.90975 2.93058 10.3793 2.55825C10.8486 2.18608 11.3888 2 12 2C12.6112 2 13.1514 2.18608 13.6208 2.55825C14.0903 2.93058 14.3889 3.41117 14.5167 4H19.3333C19.7944 4 20.1875 4.1625 20.5125 4.4875C20.8375 4.8125 21 5.20558 21 5.66675V20.3333C21 20.7944 20.8375 21.1875 20.5125 21.5125C20.1875 21.8375 19.7944 22 19.3333 22H4.66675ZM12.5875 4.8875C12.7513 4.72367 12.8333 4.52783 12.8333 4.3C12.8333 4.07217 12.7513 3.87633 12.5875 3.7125C12.4237 3.54867 12.2278 3.46675 12 3.46675C11.7722 3.46675 11.5763 3.54867 11.4125 3.7125C11.2487 3.87633 11.1668 4.07217 11.1668 4.3C11.1668 4.52783 11.2487 4.72367 11.4125 4.8875C11.5763 5.05133 11.7722 5.13325 12 5.13325C12.2278 5.13325 12.4237 5.05133 12.5875 4.8875Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.donationInfoBox .info dl dd { display: flex; align-items: center; margin-top:24px;}
.donationInfoBox .info dl dd strong { font-size:100px; font-weight: 700; line-height: 1;}
.donationInfoBox .info dl dd span { margin-left:4px; font-size:36px;}

.donationInfoBox .donationSwiper { margin-top:100px; padding-bottom:100px;}
.donationInfoBox .donationSwiper .swiper-wrapper {transition-timing-function:linear}
.donationInfoBox .donationSwiper .swiper-slide { overflow: hidden; width:360px; border-radius: 16px; box-shadow: 0px 20px 40px 0px #0000000A; background:#fff;}
.donationInfoBox .donationSwiper .swiper-slide .imgBox { width:100%; height:300px;}
.donationInfoBox .donationSwiper .swiper-slide .imgBox img { width:100%; height:100%; object-fit: cover;}
.donationInfoBox .donationSwiper .swiper-slide .textBox { position: relative; padding:32px 24px;}
.donationInfoBox .donationSwiper .swiper-slide .status { position:absolute; top:-15px; left:24px; padding:8px 14px; border-radius: 20px; line-height:1; color:#fff; font-size:14px; font-weight: 700; background:#0c0c0c;}
.donationInfoBox .donationSwiper .swiper-slide .tit { font-size:20px; font-weight: 700; color:#000;}
.donationInfoBox .donationSwiper .swiper-slide .text { margin-top:12px; font-size:14px; color:#767676;}
.donationInfoBox .donationSwiper .swiper-slide .keyword { margin-top:24px;}
.donationInfoBox .donationSwiper .swiper-slide .keyword span { display: inline-block; margin-right:4px; padding:6px 10px; border-radius: 4px; line-height: 1; font-size:14px; color:#767676; background:#F1F1F1;}

/* 임시로 주석 처리 */
/*
.mainImgDonationBox { margin-top:100px;}
.mainImgDonationBox .tit-h2 { font-size:36px; font-weight: 600; line-height: 1;}
.mainImgDonationBox .text { margin-top:16px; font-size:16px; color:#767676; font-weight: 400; line-height: 1;}
.mainImgDonationBox .imgBox { position: relative; margin-top:40px; margin-bottom:100px;}
.mainImgDonationBox .imgBox:before { content:''; display: block; position:absolute; top:0; right:0; bottom:0; width:80%;background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);}
.mainImgDonationBox .imgBox .linkInfo { position:absolute; top:50%; right:0; transform: translateY(-50%);}
.mainImgDonationBox .imgBox .linkInfo a { display: block; position:relative; width:760px; padding:48px; border-radius: 32px; background:#fff;box-shadow: 30px 30px 30px 0px #00000014;}
.mainImgDonationBox .imgBox .linkInfo .date { position:absolute; top:-20px; left:38px; padding:12px 24px; border-radius: 30px; font-size:24px; color:#fff; font-weight: 600; line-height: 1; background:#0c0c0c;}
.mainImgDonationBox .imgBox .linkInfo .tit { font-size:28px; font-weight: 700; line-height: 1;}
.mainImgDonationBox .imgBox .linkInfo .progress { position:relative; height:8px; margin-top:20px; border-radius: 4px; background:#e1e1e1;}
.mainImgDonationBox .imgBox .linkInfo .progress span { position: absolute; top:0; left:0; height:100%; border-radius: 4px; background:#009DFF;}
.mainImgDonationBox .imgBox .linkInfo .progressInfo { display: flex; margin-top:10px; justify-content: space-between;}
.mainImgDonationBox .imgBox .linkInfo .progressInfo p { font-size:24px;}
.mainImgDonationBox .imgBox .linkInfo .progressInfo strong { font-weight: 700;}
.mainImgDonationBox .imgBox .linkInfo .progressInfo p:first-child strong { color:#E60000;}
.mainImgDonationBox .imgBox .linkInfo .join { position:absolute; top:50px; right:48px; font-size:24px; font-weight: 400;}
.mainImgDonationBox .imgBox .linkInfo .join:after { content:''; display: inline-block; width:24px; height:24px; margin-left:2px; vertical-align: middle; background:no-repeat center center / 8px; background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 6L1 11' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}*/

.imgVideoSwipeBox { overflow: hidden; margin-top:40px;}
.imgVideoSwipeBox .swiper-slide { width:360px; height:360px;}
.imgVideoSwipeBox .swiper-slide a { overflow: hidden; display: block; position:relative; width:100%; height:100%; border-radius: 16px; background:#D9D9D9}
.imgVideoSwipeBox .swiper-slide a:before { content:''; display: block; position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); opacity: 0.6;}
.imgVideoSwipeBox .swiper-slide .label { position:absolute; top:20px; left:28px; padding:6px 12px; border-radius: 20px; font-size:14px; line-height: 1; background:#fff;}
.imgVideoSwipeBox .swiper-slide .tit { overflow: hidden; position:absolute; bottom:50px; left:28px; right:28px; font-size:20px; color:#fff; text-overflow: ellipsis; white-space: nowrap;}
.imgVideoSwipeBox .swiper-slide .date { position:absolute; bottom:28px; left:28px;font-size:14px; line-height: 1; color:#fff;}

@keyframes visualAni {
    0% { transform: scale(1);}
    100% { transform: scale(1.05);}
}

.tit-box { display: flex; align-items: center;}
.tit-box .label-red { display: inline-block; padding:8px 16px;  margin-left:10px; margin-top:-5px; border-radius: 40px; vertical-align: middle; font-size:16px; font-weight: bold; color:#FFFFFF; background:#FFA300E5; line-height: 1;}
.tit-box a { margin-left:auto; font-size:16px; color:#767676;}

.reviewProductBox { display: flex; margin-top: 40px; margin-left:-20px; margin-bottom:-60px;}
.reviewProductBox .list { overflow: hidden; width:calc(25% - 20px); margin-left:20px; margin-bottom:60px; border-radius: 16px; border:1px solid #DBDBDB;}
.reviewProductBox .list .imgBox { height:220px;}
.reviewProductBox .list .imgBox img { width:100%; height:100%; object-fit: cover;}
.reviewProductBox .textBox { position:relative; padding:28px 24px 40px;}
.reviewProductBox .textBox:not(dl) { padding-bottom:28px;}
.reviewProductBox .textBox > .star { position:absolute; top:-20px; left:24px; padding:7px 12px; border-radius: 30px; font-size:16px; color:#fff; font-weight: 600; line-height: 1; background:#0c0c0c;}
.reviewProductBox .textBox > .star .ico-star { display:inline-block; width:16px; height:16px; margin-right:2px; margin-top:-6px; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.9801L4.93959 13.9094C4.8372 13.9769 4.72912 14.0067 4.61534 13.9987C4.50157 13.9908 4.40105 13.9531 4.31379 13.8857C4.22653 13.8181 4.16014 13.7318 4.11463 13.6266C4.06912 13.5213 4.05968 13.4032 4.0863 13.2722L4.89403 9.62205L2.192 7.16271C2.09336 7.07148 2.03363 6.9693 2.01281 6.85616C1.99188 6.74302 1.9966 6.63286 2.02698 6.52567C2.05735 6.41849 2.11424 6.32917 2.19763 6.25771C2.28103 6.18626 2.38723 6.14255 2.51625 6.12659L6.08863 5.79914L7.47096 2.35728C7.52022 2.23819 7.59514 2.14887 7.69572 2.08932C7.79618 2.02977 7.89761 2 8 2C8.10239 2 8.20382 2.02977 8.30428 2.08932C8.40486 2.14887 8.47978 2.23819 8.52904 2.35728L9.91137 5.79914L13.4837 6.12659C13.6128 6.14255 13.719 6.18626 13.8024 6.25771C13.8858 6.32917 13.9426 6.41849 13.973 6.52567C14.0034 6.63286 14.0081 6.74302 13.9872 6.85616C13.9664 6.9693 13.9066 7.07148 13.808 7.16271L11.106 9.62205L11.9137 13.2722C11.9403 13.4032 11.9309 13.5213 11.8854 13.6266C11.8399 13.7318 11.7735 13.8181 11.6862 13.8857C11.5989 13.9531 11.4984 13.9908 11.3847 13.9987C11.2709 14.0067 11.1628 13.9769 11.0604 13.9094L8 11.9801Z' fill='white'/%3E%3C/svg%3E%0A");}
.reviewProductBox .textBox > .tit { font-size:18px; font-weight: bold; white-space: nowrap;}
.reviewProductBox .textBox > .info { margin-top:8px;}
.reviewProductBox .textBox > .info span { font-size:16px; color:#767676;}
.reviewProductBox .textBox > .info span + span { margin-left:10px;}
.reviewProductBox .textBox dl { display: flex; margin-top:20px; padding-top:20px; border-top:1px solid #dbdbdb; align-items: center;}
.reviewProductBox .textBox dl dt { width:68px; height:62px;}
.reviewProductBox .textBox dl dd { padding-left:8px;}
.reviewProductBox .textBox dl dd .tit { font-size:12px; color:#767676;}
.reviewProductBox .textBox dl dd .text { font-size:16px; margin-top: 5px;}

/* 지역 상세 */
.localWrap .productDetailWrap { display: flex; align-items: flex-start;}
.localWrap .productDetailWrap .left { width:720px;}
.localWrap .productDetailWrap .right { position:sticky; top:100px; right:auto; width:480px; margin-left:auto; border:0; padding:0;}

.localWrap .productDetailWrap .productVisualBox { display: flex; gap:8px;}
.localWrap .productDetailWrap .productVisualBox .thumbnailBox a { display: block; position:relative; width:68px; height:68px; border-radius: 8px; background:#D9D9D9;}
.localWrap .productDetailWrap .productVisualBox .thumbnailBox a + a { margin-top:8px;}
.localWrap .productDetailWrap .productVisualBox .thumbnailBox a:after { content:''; display: none; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: 8px; border:2px solid #000;;}
.localWrap .productDetailWrap .productVisualBox .thumbnailBox a.on:after { display: block;;}
.localWrap .productDetailWrap .productVisualBox .productVisual img { width:644px; height:644px; object-fit: cover;}

.localWrap .productDetailWrap .productTab { position:sticky; top:0px; z-index:10; border-top:0; padding-top:0;}
.localWrap .productDetailWrap .productTab a { position:relative; font-size:20px; color:#000;}
.localWrap .productDetailWrap .productTab a:after { opacity:0; content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#0c0c0c;}
.localWrap .productDetailWrap .productTab a span { font-size:20px; color:#767676;}
.localWrap .productDetailWrap .productTab a > span:after { display: none;}
.localWrap .productDetailWrap .productTab a.on {}
.localWrap .productDetailWrap .productTab a.on span { color:#000;}
.localWrap .productDetailWrap .productTab a.on:after { opacity:1;}
/* 헤더만큼 */
.localWrap .productDetailWrap .productDetailCont { scroll-margin-top: 132px; }

.localWrap .productDetailWrap .imgBox { overflow: hidden; position:relative; max-height:1000px;}
.localWrap .productDetailWrap .imgBox:before { content:''; display: block; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #FFFFFF 100%);}
.localWrap .productDetailWrap .imgBox img { width:100%;}
.localWrap .productDetailWrap .imgBox .button { position:absolute; bottom:20px; left:20px; right:20px; font-weight:normal; background:#fff;}
.localWrap .productDetailWrap .imgBox .button span:before { content:'더보기'; display:inline-block; margin-left:5px; font-size:16px; color:#222;}
.localWrap .productDetailWrap .imgBox .button span:after { content:''; display:inline-block; width:5px; height:5px; margin-top:5px; margin-left:6px; margin-right:2px; border:1px solid #666; border-width:0 1px 1px 0; transform: translateY(-50%) rotate(45deg); transition: all .3s ease;}

.localWrap .productDetailWrap .imgBox.on { max-height:none; padding-bottom:60px;}
.localWrap .productDetailWrap .imgBox.on:before { display: none;}
.localWrap .productDetailWrap .imgBox.on .button span:before { content:'닫기';}
.localWrap .productDetailWrap .imgBox.on .button span:after { transform:translateY(0%) rotate(-135deg);}

.localWrap .accodionWrap { margin-top:80px;}
.localWrap .accodionWrap .accodionBox {}
.localWrap .accodionWrap .accodionBox .tit { margin-top:5px; font-size: 20px; font-weight: 400;}
.localWrap .accodionWrap .accodionView { padding-bottom:28px}
.localWrap .accodionWrap .accodionView .infoText {}
.localWrap .accodionWrap .accodionView .infoText dl { display: flex;}
.localWrap .accodionWrap .accodionView .infoText dl + dl { margin-top:15px;}
.localWrap .accodionWrap .accodionView .infoText dt { width:130px; font-size:16px; color:#767676; flex-shrink: 0;}
.localWrap .accodionWrap .accodionView .infoText dd { font-size:16px; color:#0c0c0c;}

.localWrap .productDetailWrap .tit-h3 { font-size:24px;}
.localWrap .productDetailWrap .tit-h3 .ico-star { display:inline-block; width:24px; height:24px; margin-left:10px; margin-right:2px; margin-top:-6px; vertical-align: middle; background:no-repeat center center / 100%;  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.9801L4.93959 13.9094C4.8372 13.9769 4.72912 14.0067 4.61534 13.9987C4.50157 13.9908 4.40105 13.9531 4.31379 13.8857C4.22653 13.8181 4.16014 13.7318 4.11463 13.6266C4.06912 13.5213 4.05968 13.4032 4.0863 13.2722L4.89403 9.62205L2.192 7.16271C2.09336 7.07148 2.03363 6.9693 2.01281 6.85616C1.99188 6.74302 1.9966 6.63286 2.02698 6.52567C2.05735 6.41849 2.11424 6.32917 2.19763 6.25771C2.28103 6.18626 2.38723 6.14255 2.51625 6.12659L6.08863 5.79914L7.47096 2.35728C7.52022 2.23819 7.59514 2.14887 7.69572 2.08932C7.79618 2.02977 7.89761 2 8 2C8.10239 2 8.20382 2.02977 8.30428 2.08932C8.40486 2.14887 8.47978 2.23819 8.52904 2.35728L9.91137 5.79914L13.4837 6.12659C13.6128 6.14255 13.719 6.18626 13.8024 6.25771C13.8858 6.32917 13.9426 6.41849 13.973 6.52567C14.0034 6.63286 14.0081 6.74302 13.9872 6.85616C13.9664 6.9693 13.9066 7.07148 13.808 7.16271L11.106 9.62205L11.9137 13.2722C11.9403 13.4032 11.9309 13.5213 11.8854 13.6266C11.8399 13.7318 11.7735 13.8181 11.6862 13.8857C11.5989 13.9531 11.4984 13.9908 11.3847 13.9987C11.2709 14.0067 11.1628 13.9769 11.0604 13.9094L8 11.9801Z' fill='%23404040'/%3E%3C/svg%3E%0A");}
.localWrap .productSwiper { overflow: hidden; margin-bottom:100px;}
.localWrap .productSwiper .reviewProductBox { margin-left:0; margin-bottom:0; margin-top:28px; flex-wrap: nowrap;}
.localWrap .productSwiper .reviewProductBox .list { width:305px; margin:0;}
.localWrap .productSwiper .reviewProductBox .list .imgBox:before { display: none;}
.localWrap .productSwiper .productList { margin:0; flex-wrap: nowrap;}
.localWrap .productSwiper .productList .list { width:305px; margin:0;}

.localWrap .qnaList .top.secret:after { display: none;}
.localWrap .qnaList .top .date { font-size:14px; color:#767676; font-weight: 400;}
.localWrap .qnaList .top .name { font-size:14px; color:#767676; font-weight: 400;}
.localWrap .qnaList .success:after { top:auto; bottom:0;}
.localWrap .qnaList .success dl { display: flex; margin-top:10px;}
.localWrap .qnaList .success dt { width:60px; font-size:14px; font-weight: bold;}
.localWrap .qnaList .success dd { margin:0; font-size:14px; color:#0c0c0c;}
.localWrap .qnaList .success dd .ico-lock { display: inline-block; width:14px; height:14px; margin-right:2px; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.30626 12.832C3.03889 12.832 2.80998 12.7369 2.61953 12.5465C2.42916 12.356 2.33398 12.1271 2.33398 11.8598V5.69597C2.33398 5.42861 2.42916 5.1997 2.61953 5.00924C2.80998 4.81888 3.03889 4.7237 3.30626 4.7237H4.18126V3.40143C4.18126 2.62141 4.45625 1.95651 5.00623 1.40672C5.55622 0.856927 6.22137 0.582031 7.00167 0.582031C7.78198 0.582031 8.44678 0.856927 8.99609 1.40672C9.54539 1.95651 9.82005 2.62141 9.82005 3.40143V4.7237H10.695C10.9624 4.7237 11.1913 4.81888 11.3818 5.00924C11.5721 5.1997 11.6673 5.42861 11.6673 5.69597V11.8598C11.6673 12.1271 11.5721 12.356 11.3818 12.5465C11.1913 12.7369 10.9624 12.832 10.695 12.832H3.30626ZM3.30626 11.8598H10.695V5.69597H3.30626V11.8598ZM7.80521 9.58695C8.02717 9.368 8.13815 9.10477 8.13815 8.79726C8.13815 8.49587 8.02659 8.22773 7.80346 7.99284C7.58044 7.75786 7.3123 7.64036 6.99905 7.64036C6.6858 7.64036 6.41814 7.75786 6.19609 7.99284C5.97413 8.22773 5.86315 8.49753 5.86315 8.80222C5.86315 9.10682 5.97471 9.36849 6.19784 9.58724C6.42087 9.80599 6.68901 9.91536 7.00226 9.91536C7.31551 9.91536 7.58316 9.80589 7.80521 9.58695ZM5.15338 4.7237H8.84792V3.40143C8.84792 2.88839 8.66845 2.45225 8.30951 2.09301C7.95046 1.73387 7.51457 1.5543 7.00182 1.5543C6.48897 1.5543 6.05269 1.73387 5.69296 2.09301C5.33324 2.45225 5.15338 2.88839 5.15338 3.40143V4.7237Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.localWrap .qnaList .view { padding:28px 20px 20px 60px}
.localWrap .qnaList .view .tit { margin-top:0; font-size:14px;}
.localWrap .qnaList .view .tit ~ .tit { margin-top:28px;}
.localWrap .qnaList .view .date { margin-top:10px; font-size:14px; color:#767676;}
.localWrap .qnaList .view .text { margin-top:10px; font-size:14px;}

/* 답례품 상세 좌측 이미지 */
.localWrap .productDetailWrap .left .productVisualBox .thumbnailBox img { border-radius: 8px; }

.localWrap .productDetailWrap .right .subTit { font-size:16px; color:#767676; font-weight: 400;}
.localWrap .productDetailWrap .right .tit { margin-top:16px; font-size:32px; font-weight: bold; line-height: 1; color:#000;}
.localWrap .productDetailWrap .right .starInfo { display: flex;}
.localWrap .productDetailWrap .right .starInfo .star { font-size:16px;}
.localWrap .productDetailWrap .right .starInfo .star .ico-star { display:inline-block; width:18px; height:18px; margin-right:2px; margin-top:-6px; vertical-align: middle; background:no-repeat center center / 100%;  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11.9801L4.93959 13.9094C4.8372 13.9769 4.72912 14.0067 4.61534 13.9987C4.50157 13.9908 4.40105 13.9531 4.31379 13.8857C4.22653 13.8181 4.16014 13.7318 4.11463 13.6266C4.06912 13.5213 4.05968 13.4032 4.0863 13.2722L4.89403 9.62205L2.192 7.16271C2.09336 7.07148 2.03363 6.9693 2.01281 6.85616C1.99188 6.74302 1.9966 6.63286 2.02698 6.52567C2.05735 6.41849 2.11424 6.32917 2.19763 6.25771C2.28103 6.18626 2.38723 6.14255 2.51625 6.12659L6.08863 5.79914L7.47096 2.35728C7.52022 2.23819 7.59514 2.14887 7.69572 2.08932C7.79618 2.02977 7.89761 2 8 2C8.10239 2 8.20382 2.02977 8.30428 2.08932C8.40486 2.14887 8.47978 2.23819 8.52904 2.35728L9.91137 5.79914L13.4837 6.12659C13.6128 6.14255 13.719 6.18626 13.8024 6.25771C13.8858 6.32917 13.9426 6.41849 13.973 6.52567C14.0034 6.63286 14.0081 6.74302 13.9872 6.85616C13.9664 6.9693 13.9066 7.07148 13.808 7.16271L11.106 9.62205L11.9137 13.2722C11.9403 13.4032 11.9309 13.5213 11.8854 13.6266C11.8399 13.7318 11.7735 13.8181 11.6862 13.8857C11.5989 13.9531 11.4984 13.9908 11.3847 13.9987C11.2709 14.0067 11.1628 13.9769 11.0604 13.9094L8 11.9801Z' fill='%23404040'/%3E%3C/svg%3E%0A");}
.localWrap .productDetailWrap .right .starInfo .star span { margin-left:10px; color:#767676;}
.localWrap .productDetailWrap .right .starInfo .count { position:relative; margin-left:25px;}
.localWrap .productDetailWrap .right .starInfo .count:before { content:''; display: block; position:absolute; top:50%; left:-12.5px; width:1px; height:10px; transform: translateY(-50%); background:#D9D9D9}
.localWrap .productDetailWrap .right .giveBenefit { position: relative; width:100%; margin-top:25px; border-radius: 8px; padding:12px; padding-left: 0px; text-align: center; font-size:18px; background:linear-gradient(90deg, #F9A825 0%, #FDC44A 35%, #FFD56A 70%, #FFE08A 100%);}
.localWrap .productDetailWrap .right .giveBenefit i { display: inline-block; width:16px; height:16px; margin-top:-2px; margin-right:4px; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.66732 13.5568V7.27914H2.44515C2.1396 7.27914 1.87798 7.1703 1.66032 6.95264C1.44276 6.73508 1.33398 6.47352 1.33398 6.16797V4.5013C1.33398 4.19575 1.44276 3.93419 1.66032 3.71664C1.87798 3.49897 2.1396 3.39014 2.44515 3.39014H4.93398C4.85621 3.26791 4.79971 3.1383 4.76448 3.0013C4.72937 2.8643 4.71182 2.72358 4.71182 2.57914C4.71182 2.04825 4.8976 1.59697 5.26915 1.2253C5.64082 0.853747 6.09204 0.667969 6.62282 0.667969C6.88582 0.667969 7.13771 0.720747 7.37848 0.826302C7.61915 0.931858 7.82654 1.0828 8.00065 1.27914C8.17476 1.07914 8.38215 0.927247 8.62282 0.823469C8.8636 0.719802 9.11548 0.667969 9.37848 0.667969C9.90926 0.667969 10.3605 0.853747 10.7322 1.2253C11.1037 1.59697 11.2895 2.04825 11.2895 2.57914C11.2895 2.72358 11.271 2.86336 11.234 2.99847C11.197 3.13369 11.1414 3.26425 11.0673 3.39014H13.5562C13.8617 3.39014 14.1233 3.49897 14.341 3.71664C14.5585 3.93419 14.6673 4.19575 14.6673 4.5013V6.16797C14.6673 6.47352 14.5585 6.73508 14.341 6.95264C14.1233 7.1703 13.8617 7.27914 13.5562 7.27914H13.334V13.5568C13.334 13.8624 13.2252 14.124 13.0077 14.3416C12.79 14.5592 12.5284 14.668 12.2228 14.668H3.77848C3.47293 14.668 3.21132 14.5592 2.99365 14.3416C2.7761 14.124 2.66732 13.8624 2.66732 13.5568ZM8.80898 2.0088C8.65532 2.16202 8.57848 2.35186 8.57848 2.5783C8.57848 2.80475 8.65504 2.9948 8.80815 3.14847C8.96137 3.30225 9.15121 3.37914 9.37765 3.37914C9.6041 3.37914 9.79415 3.30252 9.94782 3.1493C10.1016 2.99608 10.1785 2.80625 10.1785 2.5798C10.1785 2.35336 10.1019 2.1633 9.94865 2.00964C9.79543 1.85597 9.6056 1.77914 9.37915 1.77914C9.15271 1.77914 8.96265 1.85569 8.80898 2.0088ZM5.82282 2.5783C5.82282 2.80475 5.89943 2.9948 6.05265 3.14847C6.20587 3.30225 6.39571 3.37914 6.62215 3.37914C6.8486 3.37914 7.03865 3.30252 7.19232 3.1493C7.34598 2.99608 7.42282 2.80625 7.42282 2.5798C7.42282 2.35336 7.34626 2.1633 7.19315 2.00964C7.03993 1.85597 6.8501 1.77914 6.62365 1.77914C6.39721 1.77914 6.20715 1.85569 6.05348 2.0088C5.89971 2.16202 5.82282 2.35186 5.82282 2.5783ZM2.44515 4.5013V6.16797H7.44515V4.5013H2.44515ZM7.44515 13.5568V7.27914H3.71182V13.5568H7.44515ZM8.55615 13.5568H12.2895V7.27914H8.55615V13.5568ZM13.5562 6.16797V4.5013H8.55615V6.16797H13.5562Z' fill='%230C0C0C'/%3E%3C/svg%3E%0A");}
.localWrap .productDetailWrap .right .giveBenefit strong { font-weight: bold;}
.localWrap .productDetailWrap .right .infoBox { margin-top:10px;}
.localWrap .productDetailWrap .right .infoBox li { position:relative; padding-left:80px; font-size:16px; color:#0c0c0c; line-height: 1.5;}
.localWrap .productDetailWrap .right .infoBox li + li { margin-top:8px;}
.localWrap .productDetailWrap .right .infoBox li .label { position:absolute; left:0; font-size:16px; color:#767676; font-weight: 400;}
.localWrap .productDetailWrap .right .benefitBox { margin-top:20px; padding:14px; border:1px solid #FFA404; border-radius:12px;}
.localWrap .productDetailWrap .right .benefitBox .tit { margin:0; font-size:14px; font-weight:700; color:#FFA402;}
.localWrap .productDetailWrap .right .benefitBox .text { margin-top:5px; font-size:14px; color:#212121; font-weight:500;}
.localWrap .productDetailWrap .right .benefitBox .text2 { margin-top:5px; font-size:12px; color:#757575;}
.localWrap .productDetailWrap .right .selectBox { margin-top:30px}
.localWrap .productDetailWrap .right .total { display: flex; margin-top:30px; align-items: center;}
.localWrap .productDetailWrap .right .total dt { font-size:16px; font-weight: 400;}
.localWrap .productDetailWrap .right .total dd { margin-left:auto; font-size:28px;}
.localWrap .productDetailWrap .right .btnGroup { margin-top:22px;}
.localWrap .productDetailWrap .right .btnGroup .button { border-radius: 8px; font-size:20px; color:#fff; background:#0c0c0c;}

/* ── 답례품 상세 우측: 선택 옵션/단품 박스 (productDetail 옵션 UI 이식분) ──
   ※ .right .tit(32px 상품명 타이틀)가 grayBox 안 .tit 까지 먹어 깨지므로 .right 스코프로 눌러줌 */
.localWrap .productDetailWrap .right .totalBox { margin-top:15px;}
.localWrap .productDetailWrap .right .totalBox .grayBox { display:flex; position:relative; flex-wrap:wrap; padding:16px; border-radius:4px; background:#f8f8f8;}
.localWrap .productDetailWrap .right .totalBox .grayBox + .grayBox { margin-top:8px;}
.localWrap .productDetailWrap .right .totalBox .grayBox .tit { width:100%; margin-top:0; padding-right:30px; font-size:13px; font-weight:500; line-height:1.4; color:#222;}
.localWrap .productDetailWrap .right .totalBox .grayBox .countBox { margin-top:12px;}
.localWrap .productDetailWrap .right .totalBox .grayBox p.money { align-self:flex-end; margin-left:auto; font-size:13px; color:#222;}
.localWrap .productDetailWrap .right .totalBox .grayBox p.money strong { font-size:16px; font-weight:bold;}
.localWrap .productDetailWrap .right .totalBox .grayBox .btnDelete { display:block; position:absolute; top:16px; right:16px; width:20px; height:20px; font-size:0; background:url('../images/content/btn_delete.png') no-repeat;}


.localWrap .givOrderBox { display:flex; margin-top:80px;}
.localWrap .givOrderBox .left { width:700px;}
.localWrap .givOrderBox .right { width:520px; margin-left:80px;}

.localWrap .givOrderBox .titBox { display:flex; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #D9D9D9;}
.localWrap .givOrderBox .titBox h2 { font-size:24px; font-weight:700; color:#000; line-height:1;}

.localWrap .givOrderBox .productBox { display:flex; align-items:center;}
.localWrap .givOrderBox .productBox .img { flex:0 0 auto; overflow:hidden; width:72px; height:72px; border-radius:8px; background:#d9d9d9;}
.localWrap .givOrderBox .productBox .textBox { margin-left:12px;}
.localWrap .givOrderBox .productBox .textBox .kind { font-size:12px; color:#767676; font-weight:400;}
.localWrap .givOrderBox .productBox .textBox .text { margin-top:8px; font-size:16px; color:#000;}
.localWrap .givOrderBox .productBox .cash { flex:0 0 auto; margin-left:auto; font-size:18px; font-weight:700;}

.localWrap .givOrderBox .shippingAddress {}
.localWrap .givOrderBox .shippingAddress .tit { font-size:18px; font-weight:700; color:#000;}
.localWrap .givOrderBox .shippingAddress .tit span { margin-left:5px; color:#767676; font-weight:400;}
.localWrap .givOrderBox .shippingAddress .text { margin-top:10px; font-size:16px; font-weight:400; color:#000;}
.localWrap .givOrderBox .shippingAddress .phone { margin-top:10px; font-size:16px; font-weight:400; color:#000;}
.localWrap .givOrderBox .shippingAddress .selectBox { margin-top:15px;}

.localWrap .givOrderBox .infoAside { padding:40px; border:1px solid #0c0c0c; border-radius:16px;}
.localWrap .givOrderBox .infoAside + .infoAside { margin-top:20px;}
.localWrap .givOrderBox .infoAside h3 { font-size:20px; font-weight: 700; line-height: 1;}
.localWrap .givOrderBox .infoAside .text { margin-top:20px; font-size:14px; line-height:1.6; }
.localWrap .givOrderBox .infoAside .text strong { font-weight:700;}
.localWrap .givOrderBox .infoAside dl { display:flex; padding-top:24px; margin-top:24px; border-top:1px solid #d9d9d9; align-items:center;}
.localWrap .givOrderBox .infoAside dl dt { font-size:16px; font-weight:400;}
.localWrap .givOrderBox .infoAside dl dd { margin-left:auto; font-size:28px; font-weight: 700; line-height: 1;}
.localWrap .givOrderBox .infoAside .button { width:100%; margin-top:24px;}
.localWrap .givOrderBox .infoAside .subText { margin-top:12px; font-size:12px; color:#767676; text-align:center;}

.localWrap .givOrderBox .infoAside.disabled { position:relative;}
.localWrap .givOrderBox .infoAside.disabled * { color:#ABABAB; cursor:auto;}
.localWrap .givOrderBox .infoAside.disabled .button { background:#F8F8F8;}
.localWrap .givOrderBox .infoAside.disabled:after { content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:#fff; opacity:0;}

/* 로그인 */
.localWrap .loginWrap { margin-top:100px;}
.localWrap .loginWrap h1 { font-size:36px; line-height:1;}
.localWrap .loginWrap h2 { margin-top:40px; font-size:24px; line-height:1;}
.localWrap .loginWrap h3 { margin:20px 0; font-size:16px; line-height:1;}
.localWrap .loginWrap .tit { margin-top:12px; font-size:14px; color:#767676; font-weight:400; text-align:center;}
.localWrap .loginWrap .titagree { flex: 1 1 auto;font-size: 20px;color: #222;font-weight: bold; }
.localWrap .loginWrap .formBox { position:relative;}
.localWrap .loginWrap .formBox:has( .infoText) { padding-bottom:23px;}
.localWrap .loginWrap .formBox .infoText { position:absolute; bottom:0px; left:0; display:none; margin-top:8px; font-size:12px; color:#ABABAB;}
.localWrap .loginWrap .formBox .infoText.pwdInfo {
    position: absolute;
    display: none;
    margin-top: 8px;
}

/** 찾기-중복메시지 */
.findResult {
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
    font-size: 12px;
}
.localWrap .loginWrap .formBox .errorText {
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    font-size: 12px;
    color: #ff4d4f;
}
.localWrap .loginWrap .formBox.hasMsg {
    padding-bottom: 23px;
}

.localWrap .loginWrap .formBox:not(:has(input:placeholder-shown)) .infoText { display:block;}
.localWrap .loginWrap .formBox.error .infoText { display:none !important;}
.localWrap .loginWrap .formBox.error .errorText { display:block;}
.localWrap .loginWrap .formBox .label { font-size:12px; color:#767676; font-weight:400; line-height:1;}
.localWrap .loginWrap .inputBox { display:block; padding:16px 20px 5px; border-radius:8px;}
.localWrap .loginWrap .inputBox input { padding:0; font-size:16px;}
.localWrap .loginWrap .inputBox:has(input[readonly]) { background:#F8F8F8;}
.localWrap .loginWrap .inputBox .btnClose { display:none;}
.localWrap .loginWrap .inputBox:after { display:none;}
.localWrap .loginWrap .btnGroup { display:block;}
.localWrap .loginWrap .btnGroup a { font-weight:400;}
.localWrap .loginWrap .btnGroup a + a { margin-top:12px;}
.localWrap .loginWrap .loginOtherLink { margin-top:24px;}
.localWrap .loginWrap .loginOtherLink a { font-size:16px; color:#767676;}
.localWrap .loginWrap .loginOtherLink a + a:before { width:3px; height:3px; margin:0 8px; background:#767676;}
.localWrap .loginWrap .agreeWrap { padding:40px; border:1px solid #000; border-radius:16px;}


/* 고향사랑 안내 */
.infomationBox .sec01 { text-align:center;}
.infomationBox .sec02 { overflow:hidden; position:relative; height:1080px; margin-top:100px; background:no-repeat center center / cover;}
.infomationBox .sec02:before { content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:1; background:rgba(0,0,0,0.6)}
.infomationBox .sec02 .img { position:absolute; top:0; left:0; right:0; bottom:0; animation:visualAni 5s infinite alternate; background:no-repeat center center / cover;}
.infomationBox .sec02 .text { position:absolute; top:50%; left:0; right:0; z-index:2; text-align:center;}
.infomationBox .sec02 .text p { font-size:58px; font-weight:bold; color:#fff;}
.infomationBox .sec02 p strong { color:#FFB200; font-weight:bold;}

.infomationBox .sec03 { margin-top:240px;}
.infomationBox .sec03 h1 { font-size:120px; line-height:1.2; font-weight:bold; text-align:center;}
.infomationBox .sec03 h1 span.line { display:inline-block; color:transparent; -webkit-text-stroke: 1px #0c0c0c ; font-weight:bold; line-height:1.2;}
.infomationBox .sec03 h1 span.color { display:inline-block; color:#FFB200; font-weight:bold; line-height:1.2;}
.infomationBox .sec03 .text { margin-top:24px; text-align:center; font-size:24px;}
.infomationBox .sec03 .bgBox { margin-top:240px; padding:100px 0; background:#F8F8F8;}
.infomationBox .sec03 .bgBox h2 { margin-bottom:60px; font-size:42px; font-weight:bold; text-align:center;}
.infomationBox .sec03 .bgBox ul { display:flex; gap:28px;}
.infomationBox .sec03 .bgBox ul li { width:100%; padding:36px 0 80px; border-radius:16px; text-align:center; background:#fff;}
.infomationBox .sec03 .bgBox ul li .img { width:168px; height:168px; margin:0 auto;}
.infomationBox .sec03 .bgBox ul li .img img { width:100%; height:100%; object-fit: cover;}
.infomationBox .sec03 .bgBox ul li h3 { margin-top:32px; line-height:1; font-size:32px; font-weight:bold;}
.infomationBox .sec03 .bgBox ul li > p { margin-top:12px; font-size:16px; color:#767676;}

.infomationBox .sec04 { margin-top:100px;}
.infomationBox .sec04 h2 { font-size:42px; font-weight:bold; text-align:center; line-height:1;}
.infomationBox .sec04 .box { display:flex; margin-top:60px; gap:28px;}
.infomationBox .sec04 .box h3 { font-size:32px; font-weight:bold; line-height:1;}
.infomationBox .sec04 .box .left { width:752px; padding:48px 40px; border-radius: 16px; background:#FFF3D7;}
.infomationBox .sec04 .box .left ul { display:flex; margin:54px 40px 0; align-items: flex-end;}
.infomationBox .sec04 .box .left ul li { display:flex; flex-flow: column; border-radius:50%; justify-content: center; align-items: center; --text-subText:16px; --text-tit:28px;}
.infomationBox .sec04 .box .left ul li .subText { font-size:var(--text-subText); line-height:1;}
.infomationBox .sec04 .box .left ul li .tit { margin-top:12px; font-size:var(--text-tit); line-height:1; font-weight:bold;}
.infomationBox .sec04 .box .left ul li:nth-child(1) { width:232px; height:232px; background:#FFB200;}
.infomationBox .sec04 .box .left ul li:nth-child(2) { width:198px; height:198px; --text-subText:14px; --text-tit:24px; background: linear-gradient(90deg, rgba(255, 243, 215, 0) 0%, #FFB200 100%);}
.infomationBox .sec04 .box .left ul li:nth-child(3) { width:160px; height:160px; --text-subText:12px; --text-tit:20px; background: linear-gradient(90deg, rgba(255, 243, 215, 0) 0%, #FFB200 100%);}
.infomationBox .sec04 .box .left .text { margin-top:66px; font-size:20px; line-height: 1; text-align:center;}
.infomationBox .sec04 .box .right { flex:0 0 auto; width:500px; padding:48px 40px; border-radius: 16px; background:#FFE097;}
.infomationBox .sec04 .box .right ul { margin-top:16px;}
.infomationBox .sec04 .box .right ul li { font-size:16px; letter-spacing: -0.5px;}
.infomationBox .sec04 .box .right a { margin-top:30px;}

.infomationBox .sec05 { margin-top:100px;}
.infomationBox .sec05 h2 { font-size:42px; font-weight:bold; text-align:center; line-height:1;}
.infomationBox .sec05 ol { display:flex; margin-top:60px; gap:28px;}
.infomationBox .sec05 ol li:nth-child(even) { margin-top:60px;}
.infomationBox .sec05 ol li:nth-child(even) > div { animation:sec05Ani2 3s linear infinite alternate;}
.infomationBox .sec05 ol li > div { display:flex; width:299px; height:299px; padding:28px; border:1px solid #E9E9E9; border-radius: 16px; flex-flow: column; animation:sec05Ani 3s linear infinite alternate;}
.infomationBox .sec05 ol li .number { display:flex; width:40px; height:40px; border-radius:50%; font-size:24px; color:#fff; font-weight:bold; text-align:center; align-items: center; justify-content: center; background:#FFB200;}
.infomationBox .sec05 ol li .tit { margin-top:auto; font-size:28px; font-weight:bold;}
.infomationBox .sec05 ol li .text { margin-top:16px; font-size:16px; color:#767676; }
.infomationBox .sec05 ol li:nth-child(1) > div { animation-delay:0s;}
.infomationBox .sec05 ol li:nth-child(2) > div { animation-delay:0.1s;}
.infomationBox .sec05 ol li:nth-child(3) > div { animation-delay:0.2s;}
.infomationBox .sec05 ol li:nth-child(4) > div { animation-delay:0.3s;}

.infomationBox .sec06 { margin-top:100px;}
.infomationBox .sec06 h2 { font-size:42px; font-weight:bold; text-align:center; line-height:1;}
.infomationBox .sec06 .accodionWrap { margin-top:60px;}
.infomationBox .sec06 .accodionWrap a.tit { font-size:28px; font-weight:bold;}
.infomationBox .sec06 .accodionWrap a.tit .q { margin-right:12px; font-size:28px; font-weight:bold; color:#FFB200;}
.infomationBox .sec06 .accodionWrap .accodionView { padding:40px; background:#f8f8f8;}
.infomationBox .sec06 .accodionWrap .accodionView .text { font-size:16px;}

@keyframes sec05Ani {
    0% { transform:translateY(0)}
    100% { transform:translateY(10px)}
}
@keyframes sec05Ani2 {
    0% { transform:translateY(0)}
    100% { transform:translateY(-10px)}
}

.localSearchWrap {
    margin: 80px 0 140px;
}

.localSearchWrap .searchBox {
    display: flex;
    border-bottom: 2px solid #0c0c0c;
    align-items: center;
    gap: 10px;
}

.localSearchWrap .searchBox input {
    width: 100%;
    height: 72px;
    border: 0;
    font-size: 24px;
    outline: 0;
}

.localSearchWrap .searchBox input:not(:placeholder-shown) + .btnDelete {
    display: block;
}

.localSearchWrap .searchBox .btnDelete {
    display: none;
    ; flex: 0 0 auto;
    width: 24px;
    height: 24px;
    font-size: 0;
    background: no-repeat center center / 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23F4F4F4'/%3E%3Cpath d='M8.57129 15.4297L15.8444 8.15659' stroke='%23767676' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M15.8447 15.4297L8.57163 8.15659' stroke='%23767676' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.localSearchWrap .searchBox .btnSearch {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    font-size: 0;
    background: no-repeat center center / 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30.1684 29.0306L23.4244 22.2866C25.2724 20.1746 26.4004 17.4226 26.4004 14.3906C26.4004 7.76662 21.0244 2.39062 14.4004 2.39062C7.77639 2.39062 2.40039 7.77463 2.40039 14.3986C2.40039 21.0226 7.77639 26.3986 14.4004 26.3986C17.4244 26.3986 20.1844 25.2706 22.2964 23.4226L29.0404 30.1666L30.1684 29.0386V29.0306ZM14.4004 24.7986C8.65639 24.7986 4.00039 20.1426 4.00039 14.3986C4.00039 8.65462 8.65639 3.99862 14.4004 3.99862C20.1444 3.99862 24.8004 8.65462 24.8004 14.3986C24.8004 20.1426 20.1444 24.7986 14.4004 24.7986Z' fill='black'/%3E%3C/svg%3E%0A");
}

.localSearchWrap .searchWord {
    margin-top: 24px;
}

.localSearchWrap .searchWord .tit {
    font-size: 16px;
    color: #0c0c0c;
    font-weight: 400;
}

.localSearchWrap .searchWord .wordGroup {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 4px;
}

.localSearchWrap .searchWord .wordGroup a {
    padding: 6px 12px;
    border-radius: 50px;
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    background: #F4F4F4;
}

.search-data-none {
    margin: 80px 0;
    text-align: center;
}

.search-data-none p {
    font-size: 14px;
}

.search-data-none p strong {
    color: #FF8800;
}

.search-data-none p + p {
    color: #767676;
}

.search-data-none a {
    margin-top: 20px;
}

/* ===== RT-04 후기 상세 팝업(포토후기) =====
   썸네일/이미지 선언은 pub .productDetailWrap .productVisualBox(.thumbnailBox) 규칙 재사용(가로 배치로 스코프만 변경) */
#popReviewDetail .layerPopCont { max-width:960px; }
#popReviewDetail .reviewVisualBox { flex:0 0 440px; width:440px; }
#popReviewDetail .reviewVisualBox .mainImg img { width:440px; height:440px; object-fit:cover; border-radius:8px; background:#D9D9D9; }
#popReviewDetail .thumbnailBox { display:flex; gap:8px; margin-top:8px; }
#popReviewDetail .thumbnailBox a { display:block; position:relative; width:68px; height:68px; border-radius:8px; background:#D9D9D9; }
#popReviewDetail .thumbnailBox a img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
#popReviewDetail .thumbnailBox a:after { content:''; display:none; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:8px; border:2px solid #000; }
#popReviewDetail .thumbnailBox a.on:after { display:block; }



.giveVisualBox { display:flex; position:relative; height:580px; align-items: center; background:url('../images/local/img_give_visual.jpg') no-repeat center center / cover;}
.giveVisualBox:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.giveVisualBox .section {}
.giveVisualBox .subTit { font-size:16px; color:#fff; font-weight:bold;}
.giveVisualBox .tit { margin-top:12px; font-size:40px; color:#fff; line-height:1.3; font-weight:bold;}
.giveVisualBox .text { margin-top:24px; font-size:16px; color:#fff;}