@charset "utf-8";
/* CSS Document */

/************************************
 * Infomation : 한국재자원에너지협회
 * FileName   : sub.css 
 * Update     : 2026.01.16.
*************************************/

/*************************** Page Tab Menu ***************************/
.page_tab_wrap {
  margin-bottom: 4rem;
}
.page_tab.pagein {
  
} /* 페이지내에서 버튼 이벤트 시 */
.page_tab {
  display: flex;
}
.page_tab li {
  flex: 1;
}
.page_tab li a,
.page_tab li button {
  font-size: 1.7rem;
  height: 4.4rem;
  width: 100%;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_tab li:not(:first-child) a,
.page_tab li:not(:first-child) button {
  border-left: 1px solid #d8d8d8;
}
.page_tab li:first-child a,
.page_tab li:first-child button {
  border-radius: 0.6rem 0 0 0.6rem;
  border-left: 1px solid #d8d8d8;
}
.page_tab li:last-child a,
.page_tab li:last-child button {
  border-radius: 0 0.6rem 0.6rem 0;
  border-right: 1px solid #d8d8d8;
}
.page_tab li.on a,
.page_tab li.on button {
  color: #fff;
  font-weight: 600;
  background-color: var(--sub-color);
  border: none;
}

/*************************** Sub Layout ***************************/
#g_container {
  position: relative;
  margin: 0 auto;
}

#g_contents { width: 100%; position: relative;}
.sub_cont_body{ min-height: 330px;}

.newWindow { background: url("../images/common/icon_newpage2.svg") no-repeat right 1rem center; background-size: 1rem;}

.sec_cont{ display: flex; flex-direction: column; gap: 3.6rem;}
.sec_cont + .sec_cont{ margin-top: 8rem;}
.sec_cont .h4{ margin-bottom: 0;}

.sec_incont{ display: flex; flex-direction: column; gap: 1.4rem;}
.sec_incont + .sec_incont{ margin-top: 3rem;}

.bbs_sec_cont{ display: flex; flex-direction: column; gap: 1.6rem;}
.bbs_sec_cont + .bbs_sec_cont{ margin-top: 2rem;}

/* 서브 공통 */
.h4{ position: relative; font-size: 2.8rem; font-weight: 700; margin-bottom: 4rem; line-height: 1; padding-top: 2rem;}
.h4::before{ content: ""; width: 2.4rem; height: 0.6rem; position: absolute; left: 0; top:0;
    background: linear-gradient(180deg, rgba(255, 136, 51, 1) 0%, rgba(255, 71, 37, 1) 100%); display: block; border-radius: 0.3rem;}
.h5{ position: relative; font-size: 2.2rem; font-weight: 700; line-height: 1;}
.h5 .sub{ color: #717171; font-weight: normal; font-size: 1.6rem; margin-left: 1rem;}

.h6_ck{ position: relative; font-size: 1.8rem; font-weight: 700; padding-left: 2.8rem; background: url("../images/sub/blit02.png") no-repeat left 0 center; margin-bottom: 1rem;}

.h6{ font-size: 2rem; font-weight: 700; margin-bottom: 1rem;}
.h6 .num{ color: #e14c07; font-weight: normal; margin-right: 1.2rem;}
.sec_incont .h6{ margin-bottom: 0;}

.h7{ position: relative; font-weight: 700;}
.h7.dot{ margin-bottom: .8rem; display: flex; align-items: center; gap: 1rem; line-height: 1;}
.h7.dot::before{ content: ""; width: 4px; height: 4px; border-radius: 4px; background-color: var(--main-color); display: inline-flex;}

/*************************** Sub Visual ***************************/
.sub_visual{ width: 100%; height: 16.4rem; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center;}

/* Sub Visual */
.sub_visual.sv01{ background-image: url("../images/sub/sub_visual01.jpg");} /* 협회소개 */
.sub_visual.sv02{ background-image: url("../images/sub/sub_visual02.jpg");} /* 사업 소개 */
.sub_visual.sv03{ background-image: url("../images/sub/sub_visual03.jpg");} /* 알림마당 */
.sub_visual.sv04{ background-image: url("../images/sub/sub_visual04.jpg");} /* 산업동향 */
.sub_visual.sv05{ background-image: url("../images/sub/sub_visual05.jpg");} /* 회원가입안내 */

.sub_visual.mem{ background-image: url("../images/sub/sub_visual_mem.jpg");} /* 로그인/회원가입 */

.sub_visual.etc{ background-image: url("../images/sub/sub_visual_etc.jpg");} /* 관리자/정관/이용약관/개인정보 */

.sub_visual h3{ font-family: 'Gmarket Sans'; font-weight: 700; color: #fff; font-size: 3.2rem; font-weight: 700; text-align: center;}

/* Location */
.e_breadcrumb_wrap { border-bottom: 1px solid var(--ce-line-color); margin-bottom: 8rem;}
.e_breadcrumb{ position: relative; display: flex; align-items: center;}
.e_breadcrumb > li{ position: relative; height: 5.4rem; display: flex; align-items: center;}
.e_breadcrumb > li::after{ content: ""; background-color: var(--ce-line-color); width: 1px; height: 18px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.e_breadcrumb > li:not(:first-child){ min-width: 27.8rem;}

.e_breadcrumb li button{ position: relative; height: 5.4rem; width: 100%; font-size: 1.6rem; display: inline-block; line-height: 1.2; text-align: left; padding-left: 1.6rem;}
.e_breadcrumb li button::after{ content: ""; width: 1.2rem; height: .8rem; background: url("../images/sub/arr_loc_dep.png") no-repeat center; position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); transition: all 0.3s ease-in;}

.e_breadcrumb li.on button::after{ transform: translateY(-50%) rotate(180deg);}

.e_breadcrumb .home { width: 4.4rem; height: 100%; background: url("../images/sub/icon_loc_home.png") no-repeat left 0 center;
}

.e_breadcrumb li ul{ background-color: #fff; border: 1px solid #0087f1; position: absolute; width: 100%; top: 5.5rem; z-index: 9; display: none;}
.e_breadcrumb li ul li { padding: 0 2.4rem;}
.e_breadcrumb li ul li a{ display: block; height: 5.4rem; display: flex; align-items: center;}
.e_breadcrumb li ul li.on a{ color: #f33f29;}
.e_breadcrumb li ul li:not(:last-child) a{ border-bottom: 1px dashed #d4d4d4;}


/*########################### 협회소개 ###########################*/

/* 협회소개 : 협회장 인사말 */
.chairman_intro{ display: flex; gap: 8rem;}
.chairman_cont{ background: url("../images/sub/chairman_intro_bg.png") no-repeat top 5rem right 0; border-radius: 15px;}
.chairman_txt01{ font-family: 'Gmarket Sans'; font-size: 2.8rem;}
.chairman_txt01 p{ position: relative; line-height: 1.4; letter-spacing: -1px;}
/*
.chairman_txt01 p:first-child::before{ content: ""; width: 2.5rem; height: .6rem; position: absolute; left: 0; top: -2rem;
	background: linear-gradient(180deg, rgba(232, 135, 60, 1) 0%, rgba(243, 63, 41, 1) 100%) ; border-radius: 0.3rem;
}
  */
.chairman_txt01 p + p{ margin-top: 2.8rem;}

.chairman_txt02{ font-size: 1.7rem; margin-top: 2.8rem;}
.chairman_txt02 p{ letter-spacing: -1.1px;}
.chairman_txt02 p + p{ margin-top: 2.8rem;}

/* 협회소개 : 설립 목적 */
.krea_mission{}

.mis_tree01{ height: 30rem; background: url("../images/sub/mis_img01.png") no-repeat center; display: flex; justify-content: center; align-items: center;}
.mis_tree01 div{ width: 18rem; height: 18rem; margin-top: -4rem; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.mis_tree01 div p{ font-family: 'Gmarket Sans'; text-align: center;}
.mis_tree01 div strong{ font-family: 'Gmarket Sans'; font-size: 3rem; text-align: center; display: block;}

.mis_tree02{ background: url("../images/sub/mis_tree02_img01.png") no-repeat center top; height: 34.2rem; padding-top: 4.5rem; display: flex; justify-content: space-between;}
.mis_tree02 li{}

.mis_tree02_box{ position: relative; padding-top: 15rem; background-color: #fef4f2; background-repeat: no-repeat; width: 26rem; height: 26rem; border-radius: 100%;}
.mis_tree02_box::before{ content: ""; position: absolute; width: 5rem; height: 5rem; background: url("../images/sub/mis_tree02_top.png") no-repeat; left: 50%; transform: translateX(-50%); top: -2.5rem;}

.mis_tree02 .li:nth-child(1) .mis_tree02_box{ background-image: url(../images/sub/mis_tree02_icon01.png); background-position: center top 6rem;}
.mis_tree02 .li:nth-child(2) .mis_tree02_box{ background-image: url(../images/sub/mis_tree02_icon02.png); background-position: center top 6.5rem;}
.mis_tree02 .li:nth-child(3) .mis_tree02_box{ background-image: url(../images/sub/mis_tree02_icon03.png); background-position: center top 6.5rem;}
.mis_tree02 .li:nth-child(4) .mis_tree02_box{ background-image: url(../images/sub/mis_tree02_icon04.png); background-position: center top 6.9rem;}

.mis_tree02_box p{ text-align: center; font-family: 'Gmarket Sans'; font-size: 2.2rem; line-height: 1.3; font-weight: 500;}

.mis_tree03{ display: flex; justify-content: space-between;}
.mis_tree03 > li{}

.mis_tree03_box{ width: 26rem; border: 1px solid #c6c6c6; border-radius: 1.5rem; padding: 4rem 0;}
.mis_tree03_box .li{ text-align: center;}
.mis_tree03_box .li:not(:first-child){ margin-top: 2.2rem;}
.mis_tree03_box .li strong{ border-bottom: 1px solid #c6c6c6; padding-bottom: .2rem;}
.mis_tree03_box .li p{ margin-top: 1rem;}
.mis_tree03_box .li span{ display: block; font-size: 1.4rem; color: var(--txt-sub-color); line-height: 1.4; margin-top: .6rem;}

/******** 협회 연혁 *********/
.krea_history_wrap{ position: relative;}

.krea_history_visual{ font-family: 'Gmarket Sans'; height: 27.5rem; background: url("../images/sub/krea_history_visual.png") no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.krea_history_visual p{ font-size: 4rem;}
.krea_history_visual strong{ font-size: 4.6rem; line-height: 1.2;}

.krea_history_tree{ position: relative; padding-top: 10rem;}
.krea_history_tree::before{ content: ""; position: absolute; width: 1px; height: 100%; background-color: #c6c6c6; left: 50%; transform: scaleX(-50%); top: 0;}
.krea_history_tree > div{ overflow: hidden;}
.krea_history_tree > div > .li{ position: relative; width: 50.1%; margin-bottom: 4rem;}
.krea_history_tree > div > .li::before{ content: ""; position: absolute; width: 3rem; height: 3rem; background: url("../images/sub/his_blit.png") no-repeat;}

.krea_history_tree > div > .li:nth-child(odd)::before{ top: 0; left: -1.4rem;}
.krea_history_tree > div > .li:nth-child(even)::before{ top: 0; right: -1.4rem;}

.krea_history_tree > div > .li:nth-child(odd){ float: right; padding: .8rem 0 0 4rem;}
.krea_history_tree > div > .li:nth-child(even){ float: left; padding: .8rem 4rem 0 0; text-align: right;}

.krea_history_tree > div > .li > span{ font-size: 1.8rem; color: var(--txt-sub-color); line-height: 1.2;}
.krea_history_tree > div > .li > p{ font-size: 3rem; line-height: 1.2; margin-top: .8rem;}

.krea_history_wrap .his_bg01 {position: absolute; bottom: 0px; left: -250px; width: 540px; height: auto;}
.krea_history_wrap .his_bg02 {position: absolute; top: 400px; right: -250px; width: 320px; height: auto;}

.his_text_list{ margin-top: 1.4rem;}
.his_text_list .li{ position: relative; padding-left: 1.3rem; display: flex; margin-bottom: .8rem; display: flex;}
.his_text_list .li::before{ content: ""; position: absolute; width: 3px; height: 3px; border-radius: 3px; background-color: #1d1d1d; left: 0; top: 1.2rem;}
.his_text_list .li span{ font-size: 1.8rem; flex-shrink: 0; line-height: 1.3;}
.his_text_list .li p{ font-size: 1.8rem; margin-left: 4px; line-height: 1.3;}
.his_text_list .li p em{ color: var(--txt-sub-color); display: block;}

/* 조직도(연락처) : 조직도 */
.member_tree{}
.member_tree > div{ position: relative;}
.member_tree > div::before{ content: ""; position: absolute; width: 1px; height: 64rem; background-color: #c6c6c6; top: 0; left: 50%;}
.member_tree > div .li{ position: relative; display: flex; justify-content: space-between;}
.member_tree > div .li:nth-child(1){ margin-bottom: 6rem; justify-content: center;}
.member_tree > div .li:nth-child(2){ margin-bottom: 8rem; padding: 0 19rem;}
.member_tree > div .li:nth-child(3){ margin-bottom: 10rem; padding: 0 5.4rem;}
.member_tree > div .li:nth-child(4){ margin-bottom: 8rem; padding: 0 19rem; align-items: center;}

.membox{ position: relative; width: 20rem; height: 7rem; border-radius: 1.5rem; padding: 1.5rem; font-size: 2rem; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; z-index: 2;}

.membox.mb01{ color: #fff; font-size: 2.2rem; font-weight: 700;
  background: linear-gradient(90deg,rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%);
}

.membox.mb02{ background-color: #5b5b5b; color: #fff;}
.membox.mb03{ background-color: #fef4f2; color: #e14c07; border: 1px solid #e14c07; margin-top: 4rem;}
.membox.mb03::before{ content: ""; position: absolute; width: 1px; height: 4rem; background-color: #c6c6c6; top: -4rem; left: 50%;}

.membox.mb04{ border: 1px solid #5b5b5b; color: #5b5b5b;}
.membox.mb04.samk{ height: 7rem; border-radius: 7rem;}
.membox.mb04 .mem_name_box{ background-color: #f8f8f8;}

.membox.mb05{ width: 17.4rem; border: 1px solid #c6c6c6; background-color: #f8f8f8; border-radius: 1.5rem; margin-top: 4rem;}
.membox.mb05::before{ content: ""; position: absolute; width: 1px; height: 4rem; background-color: #c6c6c6; top: -4rem; left: 50%;}

.mem_name_box{ width: 100%; border-radius: 1rem; height: 4.5rem; font-size: 1.8rem; background-color: #fff; color: #1d1d1d; display: flex; justify-content: center; align-items: center;}

.memline{ position: absolute; height: 1px; width: 300px; background-color: #c6c6c6;}

.memline.mline01,
.member_tree > div .li:nth-child(2) .memline{ left: 30rem; top: 4rem; width: 60rem;}
.memline.mline02,
.member_tree > div .li:nth-child(3) .memline{ left: 15.3rem; top: 0; width: 97.4rem;}
.memline.mline03,
.member_tree > div .li:nth-child(4) .memline{ left: 39rem; top: 3.5rem; width: 50rem;}
.memline.mline04,
.member_tree > div .li:nth-child(5) .memline{ left: 8.6rem; top: 0; width: 110.8rem;}

/* 조직도(연락처) : 연락처 */
.mem_add_telnum{ display: flex; gap: 4rem;}
.mem_add_telnum .tbl_list_wrap{ width: 100%;}
.mem_add_telnum .tbl_list_wrap th,
.mem_add_telnum .tbl_list_wrap td{ padding: 1.2rem 0;}

/*********** 오기는 길 *********/
.krea_location_map{ border-radius: 1.5rem; overflow: hidden;}

.krea_map_point{ position: absolute; height: 6rem; padding: 0 2.5rem; display: flex; align-items: center; border-radius: 1.5rem; color: #fff;
background-color:rgba(45, 45, 45, 0.9); opacity: 0.9;
left: 52.2rem; top: 19rem;
}

.krea_map_point:after{content: ''; position: absolute; display: inline-block; bottom: -7px; left: 50%; transform: translateX(-50%); width:0; height:0;border-left: 5px solid transparent; border-right: 5px solid transparent; border-top:7px solid #2d2d2d;}

.krea_location_info{ margin-top: 4rem; display: flex;}

.k_loc_wrap{ width: 33.3%;}
.k_loc_wrap > span{ position: relative; display: inline-flex; width: 12rem; height: 12rem; border-radius: 12rem; background-color: #fbf3ef; font-size: 1.4rem; font-weight: 700; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.4rem;}
.k_loc_wrap > span::before{ content: ""; display: inline-flex;}

.k_loc_wrap.lw01 > span::before{ background: url("../images/sub/loc_icon01.png") no-repeat; width: 2.8rem; height: 3.3rem;}
.k_loc_wrap.lw02 > span::before{ background: url("../images/sub/loc_icon02.png") no-repeat; width: 3.2rem; height: 3.1rem;}
.k_loc_wrap.lw03 > span::before{ background: url("../images/sub/loc_icon03.png") no-repeat; width: 3.4rem; height: 3.3rem;}

.k_loc_wrap > div{ margin-top: 2rem; line-height: 1.5;}
.k_loc_wrap > div strong{ display: inline-block;}
.k_loc_wrap > div em{}


/*################################ [02] 사업 소개 ##############################*/

/* 사업 소개 : SRF/바이오 */
.srf_visual{ height: 24.8rem; border-radius: 1.5rem; padding-left: 9rem; background: url("../images/sub/srf_visual.jpg") no-repeat; display: flex; flex-direction: column; justify-content: center;}
.sfrv_tit{ font-family: 'Gmarket Sans'; font-size: 3.4rem; font-weight: 700; letter-spacing: 0;}
.sfrv_stit{ font-size: 2rem; margin-top: 2rem;}
.sfrv_stit p strong em{ font-weight: 700; color: var(--main-color);}
.sfrv_stit p span{ font-size: 1.4rem;}

/* SRF */
.txt_list_wrap{}
.p_txt{ line-height: 1.6;}
.p_desc{ font-size: 1.4rem; color: var(--txt-sub-color);}

.sfr_link{ font-weight: 700; text-decoration: underline; color: var(--main-color);}
.sfr_link:hover{ text-decoration: underline;}

.dash_box{ border: 1px dashed var(--ce-line-color); padding: 2.6rem 3rem; border-radius: 1.5rem;}

.text_list{}
.text_list > p:not(:first-child){ margin-top: .6rem;}

.cycle_num .no{ width: 1.8rem; height: 1.8rem; border-radius: 1.8rem; font-size: 1.3rem; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; color: #fff; margin-right: 1rem; background: linear-gradient(90deg, rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%);
}

.sfr_img_list{ display: flex; justify-content: space-between;}
.srf_il_item{ width: 40rem; display: flex; flex-direction: column; gap: .8rem;}
.srf_il_item img{ margin-bottom: .8rem;}
.srf_il_item .tit{ font-size: 2rem;}
.srf_il_item .tit span{ color: var(--main-color);}
.srf_il_item .desc{}

/* 바이오 */
.bio_visual{ height: 24.8rem; border-radius: 1.5rem; overflow: hidden; background: url("../images/sub/bio_visual.jpg") no-repeat; padding-left: 9rem; display: flex; flex-direction: column; justify-content: center;}
.bio_visual .bio_tit{ font-family: 'Gmarket Sans'; font-size: 3.4rem; font-weight: 700; letter-spacing: 0;}
.bio_visual .bio_desc{ margin-top: 1rem; font-size: 2rem;}

.bio_box{ padding: 3rem; border: 1px solid var(--ce-line-color); border-radius: 1.5rem;}

.bio_box + .bio_box{ margin-top: 1rem;}

.bio_box .tit{ font-size: 2rem; font-weight: 700;}
.bio_box .tit span{ color: var(--main-color);}
.bio_box.biy02 .tit span{ color: #187a0b;}
.bio_box .p_txt{ margin-top: 1rem;}

.boi_box_inner + .boi_box_inner{ border-top: 1px solid var(--ce-line-color); margin-top: 3rem; padding-top: 3rem;}

/* 사업 소개 : 재자원에너지 정책동향 */
.pol_trends{}
.pol_trends_wrap + .pol_trends_wrap{ margin-top: 4rem;}

.pt_tit{ font-size: 2.2rem; font-weight: 700; text-align: center; background-color: #edf1f5; border-radius: 1.5rem; padding: 1rem 0; margin-bottom: 1rem;}

.pol_trends{ border: 1px solid var(--ce-line-color); padding: 3.6rem 0 4rem 0; border-radius: 1.5rem;}
.pol_inner{ text-align: center;}
.pol_inner + .pol_inner{ margin-top: 3rem;}
.pol_inner img{ width: 86rem; height: auto;}
.pol_stit{ font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 1.4rem;}

/* 사업소개 : 주요사업 */
.srf_system{ border: 1px solid #c6c6c6; border-radius: 1.5rem; padding: 2rem;}
.btn_srf_sys{ font-size: 2.2rem; font-weight: 600; width: 100%; display: flex; background: url("../images/ico/arr_common_down.svg") no-repeat right center;}
.btn_srf_sys.on{ background: url("../images/ico/arr_common_up.svg") no-repeat right center;}

.sfr_sys_img_box{ margin-top: 2rem; padding: 4rem 0 3rem 0; border-radius: 1.5rem; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center; display: none; text-align: center;}

.sfr_waste_box{ border-radius: 2rem; display: flex; flex-direction: column; align-items: center; gap: 3rem;}
.sfr_waste_tit{ font-size: 1.8rem; width: 17rem; height: 4.5rem; border-radius: 4.5rem; display: inline-flex; align-items: center; justify-content: center;}
.sfr_waste_cont{ display: flex; gap: 10rem;}
.sfr_waste_cont span{ position: relative;}
.sfr_waste_cont span img{ border-radius: 2rem; overflow: hidden;}
.sfr_waste_cont span strong{ font-size: 2rem; color: #fff; position: absolute; top: 3rem; right: 3rem;}
.sfr_waste_cont span:not(:first-child)::before{ content: ""; width: 6rem; height: 4.8rem; background: url("../images/sub/sfr_waste_arr.png") no-repeat; position: absolute; top: 50%; transform: translateY(-50%); left: -7.6rem;}

.sfr_waste_box.wasb01{ padding: 0 3rem;}
.sfr_waste_box.wasb01 .sfr_waste_tit{ background: linear-gradient(90deg, rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%); color: #fff;}

.sfr_waste_box.wasb02{ background-color: #f8f8f8; padding: 3rem 0 4rem 0;}
.sfr_waste_box.wasb02 .sfr_waste_tit{ background-color: #fef4f2; border: 1px solid #e14c07; color: #e14c07;}

.srf_oldnew_wrap{ display: flex; gap: 2rem;}
.srf_olew_item{ flex: 1; display: flex; flex-direction: column;}

.srf_olew_item .srf_ow_tit{ height: 5rem; font-size: 1.8rem; border-radius: 1rem; border: 1px solid #c6c6c6; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; gap: .8rem;}
.srf_olew_item .srf_ow_cont{ margin-top: .5rem; border-radius: 1rem; border: 1px solid #c6c6c6; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; flex: 1;}
.srf_olew_item .srf_ow_cont p{ font-size: 1.6rem;}

.srf_olew_item.scnt{ width: 30rem; flex: none;}
.srf_olew_item.scnt .srf_ow_tit{ color: #fff; border: none; font-weight: 600;}
.srf_olew_item.scnt .srf_ow_cont{ background-color: #fef4f2; border: 1px solid #e14c07;}
.srf_olew_item.scnt .srf_ow_cont p{ font-weight: 600;}

.srf_olew_item:last-child .srf_ow_tit strong{ color: var(--main-color);}

.srf_pic_list{ display: flex; flex-wrap: wrap; gap: 4rem;}
.srf_pic_list li{}

.srf_pic_desc{ font-size: 1.6rem; background-color: #fef4f2; border-radius: 1.5rem; padding: 2.5rem; text-align: center;}

.srf_hquaity_wrap{ display: flex; justify-content: space-between;}
.srf_hquaity_wrap > div:first-child{ width: 90rem;}

.srf_hq_img_wrap{}
.srf_hqimg_box{ padding: 3rem; border-radius: 1rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}

.sfr_desc_sm{ font-size: 1.2rem; color: #555; margin-bottom: .8rem;}
.sfr_desc_sm2{ font-size: 1.4rem; color: #717171; margin-top: -.8rem;}
.srf_unit_list{ display: flex; gap: 2rem;}
.srf_unit_list .srf_unit_box{ flex: 1; display: flex; gap: .5rem;}

.srf_unit_list .srf_unit_box > span{ width: 7rem; height: 15rem; border: 1px solid #c6c6c6; border-radius: 1rem; background-color: #f8f8f8; display: inline-flex; justify-content: center; align-items: center;}

.srf_unit_val{ padding: 1rem; border: 1px solid #c6c6c6; border-radius: 1rem; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.srf_unit_val p{ width: 100%; height: 4rem; padding: 0 1.2rem; border-radius: 1rem; display: flex; justify-content: space-between; align-items: center;}

.srf_unit_list .srf_unit_box:last-child{ }
.srf_unit_list .srf_unit_box:last-child > span{ background: linear-gradient(90deg, rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%); color: #fff; font-weight: 600; border: none;}
.srf_unit_list .srf_unit_box:last-child .srf_unit_val p:first-child{ background-color: #fef4f2;}
.srf_unit_list .srf_unit_box:last-child .srf_unit_val p:first-child span{ color: #e14c07;}

.srf_unit_list + p{ margin-top: 1.8rem;}
.fc_main{ color: #e14c07;}

.srf_carbon_box{ border-radius: 1.5rem; background-color: #f8f8f8; padding: 4rem;}
.srf_carbon_box .carbon_item{ position: relative; text-align: center;}
.srf_carbon_box .carbon_item:not(:first-child){ margin-top: 10rem;}
.srf_carbon_box .carbon_item:not(:first-child)::before{ content: ""; width: 4.8rem; height: 5.8rem; background: url("../images/sub/carbon_arr.png") no-repeat; position: absolute; top: -7.5rem; left: 50%; transform: translateX(-50%);}
.srf_carbon_box .cbn_tit{ font-size: 2rem;}
.srf_carbon_box .cbn_tit em{ font-size: 1.4rem;}

.carb_txt_wrap{ margin-top: 1.3rem; display: flex; justify-content: center; gap: 2.3rem;}
.carb_txt_wrap p{ position: relative; text-align: left;}
.carb_txt_wrap p span{ color: #717171; font-size: 14px; display: block;}
.carb_txt_wrap p:not(:first-child)::before{ content: ""; background-color: #8a8a8a; width: .1rem; height: 1.4rem; position: absolute; left: -1.1rem; top: .4rem;}

.car_cycle_wrap{ margin-bottom: 1.8rem;}
.car_cycle_wrap .car_cycle{ line-height: 1.2; font-size: 2rem; color: #fff; width: 16rem; height: 16rem; border-radius: 100%; background: linear-gradient(90deg, rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: .6rem;}
.car_cycle_wrap .car_cycle::before{ content: ""; width: 3.2rem; height: 5rem; background: url("../images/sub/carbon_icon.png") no-repeat;}

.srf_effect_box{ border: 1px solid #c6c6c6; border-radius: 1.5rem; padding: 3rem 4rem; display: flex; gap: 8.1rem;}

.srf_effect_item{ position: relative; flex: 1;}
.srf_eff_tit{ font-size: 2rem; margin-bottom: 1.4rem; display: block;}
.srf_eff_tit span{ color: #ed6e34;}

.srf_eff_list > p{}
.srf_eff_list > p:not(:first-child){ margin-top: .8rem;}
.srf_eff_list > p > em{ width: 1.8rem; height: 1.8rem; border-radius: 100%; font-size: 1.3rem; font-weight: 600; color: #fff; margin-right: 1.2rem; vertical-align: middle; background: linear-gradient(90deg,rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%); display: inline-flex; justify-content: center; align-items: center;}

.srf_effect_item.eff02::before{ content: ""; width: 1px; height: 15.5rem; background-color: #c6c6c6; position: absolute; left: -4.1rem; top: 0;}

.srf_effect_item.eff02 .srf_eff_tit span{ color: #187a0b;}
.srf_effect_item.eff02 .srf_eff_list > p > em{ background: linear-gradient(90deg,rgba(136, 208, 126, 1) 0%, rgba(24, 122, 11, 1) 100%);}

/*################################ [05] 회원가입안내 ##############################*/

.memjoin_info_slogan{ font-family: 'Gmarket Sans'; font-size: 2.4rem; font-weight: 500; line-height: 4rem; text-align: center; border-bottom: 1px solid var(--ce-line-color); padding-bottom: 5.4rem; margin-bottom: 8rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem;}
.memjoin_info_slogan img{ max-width: fit-content;}

.memjoin_target{ display: flex; justify-content: space-between;}
.memjt_item{ position: relative; width: 40rem; height: 19rem; border-radius: 1.5rem; padding-left: 19.5rem; background-color: #edf1f5; display: flex; align-items: center;}
.memjt_item::before{ content: ""; position: absolute; width: 12rem; height: 12rem; border-radius: 12rem; left: 5rem; top: 50%; transform: translateY(-50%);
  background-color: #fff; background-repeat: no-repeat; background-position: center;
}

.memjt_item.jt01::before{ background-image: url("../images/sub/memj_icon01.png");}
.memjt_item.jt02::before{ background-image: url("../images/sub/memj_icon02.png");}
.memjt_item.jt03::before{ background-image: url("../images/sub/memj_icon03.png");}

.memjt_item strong{ font-size: 2rem;}

.mem_boon{ padding: 4rem; border: 1px solid var(--ce-line-color); border-radius: 1.5rem; display: flex;}
.mem_boon_item{ width: 33.3%;}
.mem_boon_item:not(:first-child){ border-left: 1px solid var(--ce-line-color); padding-left: 4rem;}
.mem_boon_item .tit{ font-size: 2rem; font-weight: 700; margin-bottom: 1.4rem;}

.mem_boon_list{}
.mem_boon_list p{ position: relative; padding-left: 1.5rem;}
.mem_boon_list p::before{ content: ""; position: absolute; width: 4px; height: 4px; border-radius: 4px; background-color: #ed6e34; left: 0; top: 6px;}
.mem_boon_list p:not(:first-child){ margin-top: 4px;}

.memjoin_imgflow_wrap{ display: flex; justify-content: space-between;}
.memjo_flow_item{ position: relative; width: 29rem; height: 31rem; border: 1px solid var(--ce-line-color); border-radius: 1.5rem; padding: 1.5rem;}

.memjo_flow_item:not(:first-child)::after{ content: ""; position: absolute;
  left: -2.6rem; top: 50%; transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--main-color);
}
.memjo_flow_item:not(:first-child)::before{ content: ""; position: absolute;
  width: 8rem; height: 8rem; border-radius: 8rem; background-color: #fff; left: -6rem; top: 50%; transform: translateY(-50%); box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); 
}

.memjo_flow_item .icon_box{ border-radius: 1rem; background-color: #f8f8f8; height: 15.5rem; width: 100%;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1) inset;
  background-position: center; background-repeat: no-repeat;
}
.memjo_flow_item.fl01 .icon_box{ background-image: url("../images/sub/memj_flow_icon01.png");}
.memjo_flow_item.fl02 .icon_box{ background-image: url("../images/sub/memj_flow_icon02.png");}
.memjo_flow_item.fl03 .icon_box{ background-image: url("../images/sub/memj_flow_icon03.png");}
.memjo_flow_item.fl04 .icon_box{ background-image: url("../images/sub/memj_flow_icon04.png");}

.memjo_flow_item .step{ margin-top: 2rem; text-align: center; color: var(--txt-sub-color); letter-spacing: 0;}
.memjo_flow_item .step span{ color: var(--main-color);}
.memjo_flow_item .mf_tit{ margin-top: 1rem; text-align: center; font-size: 2rem; font-weight: 700;}

.memjo_text_flow_wrap{}
.memjo_text_flow{ margin-left: 3rem; display: flex; gap: 2rem;}
.memjo_text_flow span{}
.memjo_text_flow span em{ color: var(--main-color);}

.mem_join_down_wrap{ margin-top: 7rem; display: flex; justify-content: center;}
.btn_memjoin_filedown{ width: 27rem; height: 6rem; border-radius: 6rem; color: #fff; font-size: 2rem; font-weight: 700; display: flex; gap: 1rem; justify-content: center; align-items: center;
  background: linear-gradient(90deg, rgba(232, 119, 31, 1) 0%, rgba(234, 58, 36, 1) 100%);
}
.btn_memjoin_filedown::after{ content: ""; width: 2rem; height: 2rem; background: url("../images/sub/icon_memjoin_downfile.png") no-repeat; display: inline-flex;}


/*################################ [ETC] ##############################*/

/* 정관 */
.arti_update_info{ color: var(--txt-sub-color); margin-bottom: 2rem;}

.arti_wrap{ display: flex; flex-direction: column; gap: 2rem;}
.arti_wrap + .arti_wrap{ margin-top: 3rem;}
.arti_box{ border: 1px solid var(--ce-line-color); border-radius: 1.5rem; padding: 4rem;}
.arti_cont{}
.arti_cont .h7:not(:first-child){ margin-top: 2rem;}
.ar_p{ position: relative; margin-left: 1.4rem;}
.ar_p.dot::before{
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: var(--main-color);
    display: inline-flex;
    position: absolute;
    left: -1rem;
    top: .8rem;
}

.ar_txt_list{ margin-left: 1.4rem;}
.ar_txt_list > li:not(:first-child){ margin-top: .5rem;}

.ar_txt_list.onum > li{ position: relative; padding-left: 1.6rem;}
.ar_txt_list.onum > li::before{ position: absolute; left: 0;}
.ar_txt_list.onum > li:nth-child(1)::before { content: "① ";}
.ar_txt_list.onum > li:nth-child(2)::before { content: "② ";}
.ar_txt_list.onum > li:nth-child(3)::before { content: "③ ";}
.ar_txt_list.onum > li:nth-child(4)::before { content: "④ ";}
.ar_txt_list.onum > li:nth-child(5)::before { content: "⑤ ";}
.ar_txt_list.onum > li:nth-child(6)::before { content: "⑥ ";}
.ar_txt_list.onum > li:nth-child(7)::before { content: "⑦ ";}
.ar_txt_list.onum > li:nth-child(8)::before { content: "⑧ ";}
.ar_txt_list.onum > li:nth-child(9)::before { content: "⑨ ";}
.ar_txt_list.onum > li:nth-child(10)::before { content: "⑩ ";}

.ar_txt_list.num{}
.ar_txt_list.num li{ list-style:decimal; margin-left: 1.6rem;}

.ar_txt_list.num{ margin-left: 1.6rem; margin-top: .4rem; margin-bottom: .8rem;}
.ar_txt_list.num li{ font-size: 1.4rem; color: var(--txt-sub-color);}
.ar_txt_list.num li:not(:first-child){ margin-top: .4rem;}

.ar_p + .ar_txt_list{ margin-top: .8rem;}

.ar_txt_list.bar > li{ padding-left: 1rem; margin-top: .4rem; margin-bottom: .8rem; font-size: 1.4rem; color: var(--txt-sub-color); position: relative;}
.ar_txt_list.bar > li::before{ content: "-"; position: absolute; left: 0;}

.ar_txt_list .ar_txt_list{ margin-left: 1.2rem;}
.ar_txt_list .ar_txt_list li{ font-size: 1.4rem; color: var(--txt-sub-color);}

.ar_txt_list.onum .ar_txt_list{ margin-left: 0;}

/* 이용약관 */
.terms_box{ border: 1px solid var(--ce-line-color); border-radius: 1.5rem; overflow: hidden; padding: 3rem; height: 700px;}
.terms_box .terms_inner {height: 100%; overflow-y: auto; padding: 3rem; box-sizing: border-box;}
.terms_sec + .terms_sec{ margin-top: 4rem;}

.txt_list{}
.txt_list li{ position: relative; line-height: 1.5;}
.txt_list.dot > li{ margin-bottom: .8rem; padding-left: 1.2rem;}
.txt_list.dot > li::before { content: ""; width: 4px; height: 4px; border-radius: 4px; background-color: var(--main-color); position: absolute; left: 0; top: .8rem;}

.txt_list.bar > li{ padding-left: 1.4rem;}
.txt_list.bar > li::before{ content: "-"; position: absolute; left: 0;}

.coming_soon_page{ min-height: 33.3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem;}
.coming_soon_page img{ width: max-content;}
.coming_soon_page span{ font-size: 2.4rem;}


/*################################ 로그인/회원가입 ##############################*/

.login_wrap{ position: relative; width: 130rem; margin: -8rem auto 0 auto; display: flex; justify-content: space-between;}

.login_txt_wrap{ color: #fff; width: 49rem;}
.login_txt_wrap .txt01{ font-size: 6rem; line-height: 1.2; margin-top: 3rem;}
.login_txt_wrap .txt02{ font-size: 6rem; font-weight: 700; line-height: 1.2; margin-top: .5rem;}
.login_txt_wrap .txt03{ font-size: 1.9rem; margin-top: 4rem;}

.login_idpw_wrap{ position: relative;}
.login_idpw_wrap::before{ content: ""; background: url("../images/mem/login_bg1.png") no-repeat; position: absolute; width: 443px; height: 444px; left: -200px; bottom: -218px;}
.login_idpw_wrap::after{ content: ""; background: url("../images/mem/login_bg2.png") no-repeat; position: absolute; width: 263px; height: 319px; right: -90px; top: 0;}

.mem_login_wrap{ width: 52rem; background-color: #fff; border-radius: 1rem; padding: 6rem; margin: 0 auto;}

.mem_join_tit{ width: 100%; text-align: center; position: relative; font-size: 3.2rem; font-weight: 700; line-height: 1; background-repeat: no-repeat; background-position: center bottom 0;}
.mem_join_tit .h4::before{ left: 50%; transform: translateX(-50%);}

/* 로그인 */
.mem_join_tit.ulo{ background-image: url("../images/mem/icon_mem_user.png"); padding-bottom: 9rem;}

/* 아이디 찾기 */
.mem_join_tit.uid{ background-image: url("../images/mem/icon_user_id.svg"); padding-bottom: 11rem; font-size: 2.5rem;}

/* 비밀번호 찾기 */
.mem_join_tit.upw{ background-image: url("../images/mem/icon_user_pw.svg"); padding-bottom: 11rem; font-size: 2.5rem;}

.idpw_search_wrap a{ border-bottom: 1px solid var(--txt-color); line-height: 1;}
.idpw_search_wrap{ width: 100%;}
.idpw_search{ display: flex; justify-content: flex-end; gap: 25px;}
.idpw_search li{ position: relative;}
.idpw_search li:not(:first-child)::before{ content: ""; background-color: #5f5f5f; width: 1px; height: 16px; position: absolute; left: -13px; top: 4px;}

/* 마이페이지 */
.mp_idchk_wrap{ display: flex; align-items: center; gap: .8rem;}
.mp_idchk_wrap .form_inp,
.mp_idchk_wrap span{ width: 40.1rem !important; min-width: auto;}
.mp_pwchg_wrap{ display: flex; align-items: center; justify-content: space-between;}

/* 약관동의 : Step */
.join_step_tit_wrap{ margin-bottom: 20px;}

.mem_join_step{ width: 1072px; margin: 50px auto 20px auto; display: flex; justify-content: space-between;}
.mem_join_step li{ position: relative; flex: 1; display: flex; align-items: center; flex-direction: column;}
.mem_join_step li:not(:last-child)::after{ content: ""; position: absolute; height: 1px; width: 100%; background-color: #c6c6c6; top: 8px; right: -50%;}

.mem_join_step li i{ position: absolute; width: 17px; height: 17px; border-radius: 100%; background: #e4e4e4; display: inline-block; z-index: 2;}
.mem_join_step li span{ font-size: 17px; font-weight: 700; margin-top: 30px;}

/* 1단계 : 시스템 이용 동의*/
.mem_join_step.step01 li:nth-child(1) i{ border: 1px solid var(--main-color); width: 25px; height: 25px; background-color: #fff; top: -3px;}
.mem_join_step.step01 li:nth-child(1) i::before{ content: ""; position: absolute; width: 17px; height: 17px; border-radius: 100%; background-color: var(--main-color); left: 3px; top: 3px;}
.mem_join_step.step01 li:nth-child(1) i::after{ content: "…"; color: #fff; position: absolute; left: 5px; top: 2px;}

/* 2단계 : 정보입력*/
.mem_join_step.step02 li:nth-child(1)::after{ background-color: var(--main-color);}

.mem_join_step.step02 li:nth-child(1) i{ width: 25px; height: 25px; background-color: var(--main-color); top: -3px; background-image: url("../images/member/ico_check_checked.svg"); background-repeat: no-repeat; background-size: 20px auto; background-position: center;}

.mem_join_step.step02 li:nth-child(2) i{ border: 1px solid var(--main-color); width: 25px; height: 25px; background-color: #fff; top: -3px;}
.mem_join_step.step02 li:nth-child(2) i::before{ content: ""; position: absolute; width: 17px; height: 17px; border-radius: 100%; background-color: var(--main-color); left: 3px; top: 3px;}
.mem_join_step.step02 li:nth-child(2) i::after{ content: "…"; color: #fff; position: absolute; left: 5px; top: 2px;}

/* 3단계 : 가입완료 */
.mem_join_step.step03 li:nth-child(1)::after,
.mem_join_step.step03 li:nth-child(2)::after,
.mem_join_step.step03 li:nth-child(3)::after{ background-color: var(--main-color);}

.mem_join_step.step03 li:nth-child(1) i,
.mem_join_step.step03 li:nth-child(2) i{ width: 25px; height: 25px; background-color: var(--main-color); top: -3px; background-image: url("../images/member/ico_check_checked.svg"); background-repeat: no-repeat; background-size: 20px auto; background-position: center;}

.mem_join_step.step03 li:nth-child(3) i{ border: 1px solid var(--main-color); width: 25px; height: 25px; background-color: #fff; top: -3px;}
.mem_join_step.step03 li:nth-child(3) i::before{ content: ""; position: absolute; width: 17px; height: 17px; border-radius: 100%; background-color: var(--main-color); left: 3px; top: 3px;}
.mem_join_step.step03 li:nth-child(3) i::after{ content: "…"; color: #fff; position: absolute; left: 5px; top: 2px;}

/* 약관동의 */
.join_box { border: 1px solid #c6c6c6; border-radius: 1rem; padding: 4rem; overflow: auto;}

/* 가입완료 */
.mem_join_step + .join_box{ margin-top: 5rem;}
.join_step_end_txt{ text-align: center; margin: 4rem 0;}
.join_step_end_txt div{ font-size: 3.2rem; font-weight: 700;}
.join_step_end_txt p{ font-size: 1.7rem; margin-top: 2rem;}

/*################################ [CMS] 시스템 관리 ##############################*/
.tui-grid-cell{ font-family: "Pretendard GOV"; font-size: 15px;}
.tui-grid-cell .tui-grid-cell-content{ font-size: 15px;}
.tui-grid-cell-content select{ height: 30px; border-radius: 5px; font-family: "Pretendard GOV"; font-size: 15px;}