@charset "utf-8";

/* board */
.label_wrap{ display: flex; flex-wrap: wrap; gap:.5em;}
.label_wrap.d2{ gap:3em }

.bgfix.ct{ background-size: contain;}

/* inc */
.c_dgray{ color:#555;}

.tSdw{ text-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}

.hideT { position: absolute; z-index: -1; display: inline-block; overflow: hidden; height: 1px; width: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-break: initial; word-wrap: initial; } 
.hideT.close { display:none } 

/*SUB PAGE*******************/
/*공통*/
/*flex box*/
.flex_box { } 
.flex_box.s1 { margin: 0 0 -1em -1em; } 
.flex_box.s2 { margin: 0 0 -2em -2em; } 
.flex_box.s3 { } 
.flex_box.s4 { } 
.flex_box.s5 { } 

.flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } 
.flex_box .fst1 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } 
.flex_box .fst2 > li > .in { margin: 0 0 1em 1em; }
.flex_box .fst2.st2 > li { flex: 1 1 48%; max-width: 48%; } 
.flex_box .fst2.st2 > li > .in { margin: 0 0 1em 1em; }  
.flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } 
.flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst3.st2 > li { flex: 1 1 31%; max-width: 31%; } 
.flex_box .fst3.st2 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } 
.flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst5 > li { flex: 1 1 20%; max-width: 20%; } 
.flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } 
.flex_box .fst6 > li { flex: 1 1 16.66%; max-width: 16.66%; } 
.flex_box .fst6 > li > .in { margin: 0 0 1em 1em; } 

.flex_box li > a { display: block; } 

/*  */
.page_txt_wrap + .page_tit{ margin-top: 2em;}

.page_txt_wrap .wrap_box{ padding: 2em; border-radius: 1em; border:1px solid #ddd;}

.page_twrap_img{ position:relative; padding-bottom:7em}
.page_twrap_img .wrap_con{ width:70%; background:#fff; position:relative;  z-index:1; box-sizing:border-box; padding:3em; padding-bottom:4em}
.page_twrap_img .wrap_con:before{ content:""; position:absolute; left:0; top:0; width:2em; height:2em; border:.25em solid #0060ae; border-right:none; border-bottom:none}
.page_twrap_img .wrap_img{ position:absolute; left:0; bottom:0; width:100%; height:70%}
.page_twrap_img .wrap_img .img{ height:100%}
.page_twrap_img.st1{ padding-bottom:5em}
.page_twrap_img.st1 .wrap_con{ width:80%; margin:0 auto; text-align:center; padding:3em; border-top:1px solid #111; box-shadow: 0 5px 10px rgba(0, 0, 0, .2);}
.page_twrap_img.st1 .wrap_con:before{ display:none}
.page_twrap_img.st1 .wrap_img{ height:80%}

/* KCCF캠페인 */
.campaignInfoList{ border-top: 2px solid var(--siteC);}
.campaignInfoList dl{display: flex;border-bottom:1px solid #ddd;}
.campaignInfoList dt,
.campaignInfoList dd{padding: .8em .5em .8em 1em; box-sizing:border-box; font-size: 1.125em; line-height: 1.4; }
.campaignInfoList dt{ width: 8em; color:#666;}
.campaignInfoList dt.w100{ width:100%; color:#666;}
.campaignInfoList dd{ flex:1; color:#333;}
.campaignImgList{gap: 2em;margin-top: 3em;}
.campaignImgList > li{ display: flex; flex-direction: column; gap: 1em; width: calc((100% - 2em) / 2);}
.campaignImgList > li .img{ border-radius: 1em; overflow: hidden; box-shadow:2px 2px 10px rgba(0, 0, 0, .1)}
.campaignImgList > li .img img{ display: block;}
.campaignImgList > li .txt{ gap: 1em; padding: 0 .25em;}
.campaignImgList > li .txt .xi{ color:#999}
.campaignImgList > li .txt .tt{ color:#666;}

/* 탄소중립가맹점 - 가맹점혜택 */
.imgCont_list{ gap:8em 5em; padding-bottom: 10em;}
.imgCont_list > li{ width: calc((100% - 5em) / 2);}
.imgCont_list > li .img_box{ height: 24em; box-shadow: 3px 3px 10px rgba(0,0,0,.1);}
.imgCont_list > li .img_box .img{ height: 100%;}
.imgCont_list > li .txt_box{ margin-top:2em; padding: 0 1em;}
.imgCont_list > li .txt_box .tit{}
.imgCont_list > li .txt_box .tit .tt{ font-weight: 700; font-size: 1.5em; color:#111; position: relative;}
.imgCont_list > li .txt_box .tit .tt::after{ content: ''; width: 105%; height: 0.5em; background: var(--siteC); position: absolute; left: 0; bottom: 0; z-index: -1; opacity: .2; transform: skew(15deg);}
.imgCont_list > li .txt_box .cont{ margin-top: 1.5em;}
.imgCont_list > li:nth-child(2n){ transform: translateY(10em);}


.imgCont_list.st2{ gap:8em 2em; padding-bottom: 10em;}
.imgCont_list.st2 > li{ width: calc((100% - 2em) / 3);}
.imgCont_list.st2 > li .img_box{ height: 24em; box-shadow: 3px 3px 10px rgba(0,0,0,.1);}
.imgCont_list.st2 > li .img_box .img{ height: 100%;}
.imgCont_list.st2 > li .txt_box{ margin-top:2em; padding: 0 1em;}
.imgCont_list.st2 > li .txt_box .tit{}
.imgCont_list.st2 > li .txt_box .tit .tt{ font-weight: 700; font-size: 1.5em; color:#111; position: relative;}
.imgCont_list.st2 > li .txt_box .tit .tt::after{ content: ''; width: 105%; height: 0.5em; background: var(--siteC); position: absolute; left: 0; bottom: 0; z-index: -1; opacity: .2; transform: skew(15deg);}
.imgCont_list.st2 > li .txt_box .cont{ margin-top: 1.5em;}
.imgCont_list.st2 > li:nth-child(2n){ transform: translateY(0);}
/* 탄소중립가맹점 - 회원혜택 */
.security_wrap { position: relative; } 
.security_wrap .cir_inner { position: absolute; display: flex; align-items: center; flex-direction: column; justify-content: center; border-radius: 50%; background: var(--siteC); color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 19em; height: 19em; box-shadow: 0 25px 30px #2E3B8030; } 
.security_wrap .cir_inner:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25em; height: 25em; border: 4px dotted #d2d6ff; border-radius: 50%; animation-name: rotateAni; animation-duration: 50s; transform-origin: center; animation-timing-function: linear; animation-iteration-count: infinite; } 
.security_wrap .cir_inner .icon { } 
.security_wrap .cir_inner .icon > .xi { font-size: 5.15em; } 
.security_wrap .cir_inner .txt{ gap: 0.25em;}
.security_wrap .cir_inner .tt { font-size: 1.5em; font-weight: 800; } 
.security_wrap .cir_inner .xi{ margin-bottom: 0.5rem; font-size: 2em;}
.security_wrap .security_list { gap: 2em;} 
.security_wrap .security_list > li { flex: 1 1 calc((100% - 2em) / 2); max-width: 50%; } 
.security_wrap .security_list > li > .in { width: 100%;} 
.security_wrap .security_list > li > .in > .inner { box-sizing: border-box; padding: 3em; background: #f7f7f7; border-radius: 1em; height: 100%;} 
.security_list > li > .in > .inner .icon{ position:relative}
.security_wrap .security_list > li > .in > .inner .icon img{ height:3em; position:relative; z-index:1;}
.security_wrap .security_list > li > .in > .inner .icon::after{ content:''; width:5em; height:5em; border-radius:50%; background:var(--siteC2); position:absolute; left:1em; top:-1.5em; opacity:.05;}
.security_wrap .security_list > li:nth-child(2n) > .in > .inner .icon::after{ right:1em; left:auto;}
.security_wrap .security_list > li > .in > .inner > .title { font-size: 1.5em; font-weight: 800; margin: 1em 0; } 
.security_wrap .security_list > li > .in > .inner > .page_dot_list{}
.security_wrap .security_list > li:nth-child(1) .in > .inner { text-align: left; } 
.security_wrap .security_list > li:nth-child(2n) .in > .inner { text-align: right; padding-left: 8em;} 
.security_wrap .security_list > li:nth-child(2n) .in > .inner .page_dot_list li:before { right: -15px; } 

@keyframes rotateAni { 
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}

.page_dot_list { padding: 0 1.25em; margin-top: 1.25em; } 
.page_dot_list.pN { padding: 0em; } 
.page_dot_list.pN > li:before { display: none; } 
.page_dot_list > li { position:relative; margin-bottom: .5em; letter-spacing: -0.05em; font-weight: 500; } 
.page_dot_list > li > .txt { font-size: 1em; } 
.page_dot_list > li:before { position: absolute; left: -15px; top: -1px; content: '-'; } 
.page_dot_list > li:last-of-type { margin-bottom: 0em; } 


/* 후원하기 - 후원안내 */
.stepList_wrap { } 
.stepList { gap: 2em 2em; counter-reset: stepNum; } 
.stepList > li { width: calc((100% - 6em) / 4); padding:1.5em 1em; box-sizing: border-box; border:1px solid #ddd; border-radius: 1em; position: relative; counter-increment: stepNum; box-shadow: 0 3px 10px rgba(0,0,0,.05); } 
.stepList > li + li { } 
.stepList > li:after { content: ''; width: 2em; height: 100%; background:url(../images/inc/steps.gif) no-repeat center center; position: absolute; right: calc(-2em - 1px); top: 0; opacity: .5; transform: scale(.8);} 
.stepList > li:first-child{ border:2px solid var(--siteC2)}
.stepList > li:first-child .txt_wrap .num{ color:var(--siteC2)}
.stepList > li:last-child{ border:2px solid var(--siteC)}
/* .stepList > li:nth-child(1) { order: 1; } 
.stepList > li:nth-child(2) { order: 2; } 
.stepList > li:nth-child(3) { order: 3; } 
.stepList > li:nth-child(3)::after { width:3em; height:3em; right:50%; top:auto; bottom:-3em; transform:rotate(90deg) translate(0, -50%) } 
.stepList > li:nth-child(n+4):nth-child(-n+6)::after { left:-3em; transform:rotate(180deg) } 
.stepList > li:nth-child(4) { order: 6; } 
.stepList > li:nth-child(5) { order: 5; } 
.stepList > li:nth-child(6) { order: 4; }  */
.stepList > li:last-child::after { display:none; }  
.stepList > li .icon_wrap { margin-bottom: 1em; } 
.stepList > li .icon_wrap .icon { display: block; width: 5em; height: 3.5em; margin:0 auto; opacity: .85;} 
.stepList > li .txt_wrap { 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
    text-align: center; 
} 
.stepList > li .txt_wrap .num { margin-bottom: 5px; font-weight: 600; font-size: .9375em; color: var(--siteC); opacity: .6; } 
.stepList > li .txt_wrap .num::after { content:'0'counter(stepNum) } 
.stepList > li .txt_wrap .tit { font-weight: 600; font-size: 1.125em; color:#333; word-break: keep-all; } 
.stepList > li .txt_wrap .t2{ margin-top: 0.5em; color:#555; font-size: .9375em;}

.icon_txt_list{ gap:1em; counter-reset: stepNum;}
.icon_txt_list > li{ flex:1 0 calc((100% - 2em) / 3); counter-increment: stepNum;}
.icon_txt_list > li .in{ width: 100%; height: 100%; padding: 2.5em; box-sizing: border-box; border:1px solid #ddd; border-radius: 1em; background:linear-gradient(180deg, #f4f4f4, #fff); box-shadow: 0 3px 10px rgba(0,0,0,.05); position: relative;}
.icon_txt_list > li .txt{ }
.icon_txt_list > li .txt .tit{ margin: 1.5rem 0 1rem; font-weight: 600; font-size: 1.25em;}
.icon_txt_list > li .txt .tit .num{ padding-right: .5em; color:var(--siteC); opacity: .3;}
.icon_txt_list > li .txt .tit .num::after{content:'0'counter(stepNum);}
.icon_txt_list > li .txt .tit .tt{ display: block;}
.icon_txt_list > li .txt .desc{ font-size: 1.125em; color:#666;}
.icon_txt_list > li .icon{ width: 5em; height: 5em; padding: 1em; box-sizing: border-box; border-radius: 2em; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .25); position: absolute; right: 1em; top: 1em;}
.icon_txt_list > li .icon i.icon_img{ display: block; width: 100%; height: 100%;}

.vision_list{ gap:2em}
.vision_list > li{ display:flex; flex-direction:column; align-items:center; width:calc( (100% - 6em) / 4); padding:3em 2em; box-sizing:border-box; border:1px solid #ddd; position:relative;}
.vision_list > li::after{ content:''; width:20px; height:20px; border-top:2px solid #0060ae; border-right:2px solid #0060ae; position:absolute; right:-1px; top:-1px;}
.vision_list > li img{ display:block; height:70px; }
.vision_list > li .tit{ margin-top:20px; font-weight:500; font-size:1.3em; color:#0060ae; opacity:.8; text-align:center}
.vision_list > li .tt{ font-weight:400; font-size:1em; color:#fff; text-align:center}
.vision_list li .icon{ display:flex; justify-content:center; align-items:center; width:100px; height:100px; border-radius:50%; background-color:var(--red);}
.vision_list li .icon img{ width:5em; height:4em; object-fit:contain;}
.vision_list li .num{ margin-bottom:1em; font-weight:600; font-size:1.5em; color:#0060ae; text-align:center;}
.vision_list li .tt{ font-weight:500; font-size:1.0625em; line-height:1.6; color:#333; text-align:center; /*text-shadow:0 1px 1px rgba(255, 255, 255, .25)*/}

/* 후원하기 - 후원문의 */
.inquiry_wrap{}
.inquiry_wrap .board_st.write{ border-top-color:var(--siteC);}
.inquiry_wrap .board_st.write th, 
.inquiry_wrap .board_st.write td{ height: 2.5em;}
/*개인정보처리방침*/
.agree_wrap{ padding:.5em; font-size:.938em; line-height:1.5; border-top:2px solid var(--siteC); border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; box-shadow:3px 1px 9px rgba(0,0,0,.2); padding:2em;}
.agree_wrap .agree p{ line-height:1.9; padding:1em 0; color:#222;}
.agree_wrap .agree p strong {font-size:1.3em; }

.member_agree .agree{ padding:3em; border:1px solid #ddd; border-top:2px solid #3c3c3d; font-size:.938em; color:#69696b; font-weight:300; line-height:1.4em;}
.member_agree .agree.H{ padding:1.5em; border-top-width:1px; height:7em; overflow-y:scroll;}
.member_agree .agree p{ padding:.5em 0;}
.member_agree .agree *{ vertical-align:baseline;}
.member_agree .agree strong{ color:#3c3c3d;}
.member_agree .check{ padding:1em 2em; border:1px solid #ddd; border-top:none; border-radius:0 0 5px 5px; text-align:right; background:#f9f9f9}
.member_agree .check .label_st{ min-width: 0!important;}
.member_agree .check .label_st input ~ .xi ~ span{ padding-top: 0;}
.member_agree h1{ color:#111; font-weight:600}
.member_agree .check .xi {font-size:1em;}