@charset "utf-8";

/*sub_visual*/
.sub_visual_wrap {width: 100%; height: 350px; max-width: 1920px; display: flex; justify-content: center; align-items: center; margin: 0 auto;}
.sub_visual_wrap.sub_top1 {background: url(../../images/thema/sub/sub_visual/sub_top1_bg.jpg) center/cover no-repeat;}
.sub_visual_wrap.sub_top2 {background: url(../../images/thema/sub/sub_visual/sub_top2_bg.jpg) center/cover no-repeat;}
.sub_visual_wrap.sub_top3 {background: url(../../images/thema/sub/sub_visual/sub_top3_bg.jpg) center/cover no-repeat;}
.sub_visual_wrap.sub_top4 {background: url(../../images/thema/sub/sub_visual/sub_top4_bg.jpg) center/cover no-repeat;}

.sub_visual_title {text-align: center;}
.sub_visual_title h2 {color: #FFE476; font-size: 24px;}
.sub_visual_title h3 {color: #fff; font-size: 50px;}

/*공통*/
.sub_contents {padding-top: 120px; display: flex; flex-wrap: wrap;}
.sub_contents .inner {width: 100%; flex-direction: column;}
.sub_wrap {width: 100%; height: 120px; margin: 0 auto;}

.sub_contents .sub_title {width: 100%;}
.sub_contents .sub_title h2 {font-size: 44px; margin-bottom: 70px; text-align: center;}

.con_box {width: 100%; display: flex; align-items: flex-start; margin-bottom: 70px;}

.con_title, .con_title2 {width: 40%;}

.con_title h2 {font-size: 36px; font-weight: 700; }

.con_title2 {width: 30%; display: flex; align-items: flex-end;}
.con_title2 h2 {font-size: 40px; font-weight: 700; margin-right: 10px;}
.con_title2 h3 {font-size: 30px; color: #F79300; opacity: .5;}

.con_area {width: 100%;}
.con_area p {width: 100%; margin-bottom: 15px; font-size: 18px;}

.full_img_box {width: 100%; margin-bottom: 60px;}

/*(사)광주금융사회복지협회*/
#greeting.sub_contents {flex-direction: column;}
.greeting_top {width: 100%; display: flex; align-items: center; gap: 65px; max-width: 1920px; margin: 0 auto; z-index: 2;}

.greeting_img_wrap {width: 50%; flex: 1 1 50%; max-width: 960px;}
.greeting_img {width: 100%; height: auto; display: block; border-top-right-radius: 20px; border-bottom-right-radius: 20px; object-fit: cover;}

.greeting_top_text {width: 50%; flex: 1 1 50%; max-width: 960px;}
.greeting_top_text h2 {font-size: 38px; color: #F79300; margin-bottom: 20px;}
.greeting_top_text p {max-width: 570px; font-size: 20px; line-height: 2; text-align: justify;}

.greeting_info {background: #f8f8f8 url(../../images/thema/sub/greeting_info_bg.svg) center no-repeat; background-position: bottom; position: relative; margin-top: -80px; padding: 160px 0 70px 0; z-index: 0;}
.greeting_info_box {position: relative; width: fit-content; margin: 0 auto; z-index: 2; margin-bottom: 70px;}

#greeting .greeting_info2 .sub_title h2 {font-size: 60px; font-weight: 800;}

.greeting_info2_wrap {width: 100%; max-width: 1280px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 70px;}

.greeting_info2_text h2 {font-size: 40px; margin-bottom: 30px;}
.greeting_info2_text p {width: 510px; text-align: justify; letter-spacing: -.5px; font-size: 20px;}

.outer_circle1, .outer_circle2 {width: 100%; height: 100%;}

.greeting_info2_img {position: relative;}

.circle {position: absolute; width: 160px; height: 160px; border-radius: 50%; color: #fff; text-align: center; padding: 20px 10px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; line-height: 1.4;}

.top-right {top: -60px; right: -40px; background: #64A91C;}
.bottom-right {bottom: -50px; right: -50px; background: #F79300;}
.bottom-left {bottom: 20px; left: -100px; background: #296D94;}

.circle .icon {width: 45px; height: 45px; margin-bottom: 20px; background-size: contain; background-repeat: no-repeat; background-position: center;}

.top-right .icon {background-image: url('../../images/thema/sub/simbol01_icon01.svg');}
.bottom-right .icon {background-image: url('../../images/thema/sub/simbol01_icon02.svg');}
.bottom-left .icon {background-image: url('../../images/thema/sub/simbol01_icon03.svg');}

.greeting_simbol2_box {display: flex; align-items: center; }

.simbol02 {width: 280px; height: 280px; border: 20px solid #eee; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.simbol02_text {width: 50%; margin-left: 60px;}
.simbol02_text li {font-size: 14px; border-bottom: 1px solid #ccc; padding-bottom: 10px; letter-spacing: -1px; margin-bottom: 20px; text-align: center;}

.simbol02_color01, .simbol02_color02, .simbol02_color03 {width: 100%; height: 40px; border-radius: 8px; padding: 10px; text-align: center; font-weight: 700; margin-bottom: 10px;}
.simbol02_color01 {background: #FCAF17;}
.simbol02_color02 {background: #712C86; color: #fff;}
.simbol02_color03 {background: #25408F; color: #fff;}

.greeting_card {max-width: 1920px; margin: 0 auto; background: url(../../images/thema/sub/greeting02.jpg) center right / contain no-repeat; height: 350px; color: #fff;}
.greeting_bottom_text h2 {font-size: 38px;}
.greeting_bottom_text p {font-size: 20px; font-weight: 400; letter-spacing: -1px; text-align: justify; margin-top: 10px;}
.greeting_card .inner {min-height: 350px;}

/*협회캐릭터*/
.character_img_box {background: #F5F5F5; width: 100%; padding: 60px 0; display: flex; justify-content: center; align-items: center; border-radius: 20px; margin-bottom: 30px;}

.character_color {width: 100%; margin-bottom: 40px;}
.character_color h2 {margin-bottom: 20px;}
.character_color_box {display: flex; gap: 12px; padding: 0; list-style: none;}

.character_color_list {width: 25%; display: flex; flex-direction: column; align-items: center; font-size: 20px; color: #999; font-weight: 700;}
.character_color_list .swatch {width: 100%; aspect-ratio: 2 / .5; border-radius: 6px; margin-bottom: 20px;}
.swatch_cmyk {width: 100%; display: flex; gap: 20px; justify-content: space-around; color: #999; padding-left: 5px;}
.swatch_cmyk li {width: 50%;}
.swatch_title {padding-right: 10px; text-align: left; color: #666;}

.character_down {width: 270px; margin-left: auto; }
.character_down a {display: flex; padding: 10px 20px; justify-content: space-between; font-size: 18px; border: 1px solid #707070; border-radius: 37px; transition: ease .3s;}
.character_down a:hover {background: #444; color: #fff;}
.character_down a img {filter: brightness(0) saturate(100%); transition: filter 0.3s ease;}
.character_down a:hover img {filter: invert(1);}

/*가치&활동*/
.con_table ul li {padding: 30px 0; border-top: 1px solid #eee; display: flex; align-items: center; gap: 20px; font-size: 18px;}
.con_table ul li:last-child {border-bottom: 1px solid #eee;}
.con_table ul li span {width: 50px; font-size: 40px; color: #ccc; font-weight: 700; flex-shrink: 0; line-height: 1;}
.con_table ul li::marker {content: none;}

/*법인 STORY*/
.history_timeline {position:relative; width: 100%;}
.ht{display:flex;width:100%;position:relative; padding-bottom:90px;}
.ht.first{padding-top:83px;}
.ht::after{position:absolute; content:''; width:50px; height:50px; left: 50%; transform:translateX(-50%); top: -10px; background:url(../../images/thema/sub/ht_dot.svg) no-repeat center center;z-index:10;}
.ht:before{position:absolute;content:'';top:10px;left:50%;transform:translateX(-50%); display:block; width:1px; height:100%;background:#ccc;}
.ht-img, .contents{width:50%;}
.ht.right .ht-img{order:2; text-align: right;}
.ht.right .contents{order:1; }

.ht-list {padding-left:10.33%;}
.ht-list .year {position: relative; font-size:40px; font-weight: 700; color:#F79300; line-height:1;}

.ht-detail > li{position:relative; padding:20px 27px 20px 45px; font-size:20px; color:#444; font-weight:400;line-height:25px;letter-spacing:-0.02em;}
.month {display:inline-block; position:absolute; left:0; font-size:20px; font-weight:700; color:#222;}
.ht-detail > li ul li{margin-bottom:15px;}
.ht-detail > li ul li:last-child{margin-bottom:0;}

.ht-img{margin-top:-15px; text-align: left;}

.ht_first .ht-detail > li {padding-left: 110px;}
.month_detail {text-align: center; margin-bottom: 20px;}


/* right */
.ht.right .ht-list{padding-left:0;padding-right:10.33%;}
.ht.right .ht-list .year{text-align:right;}

.ht.right .month{left:auto;right:0;}
.ht.right .ht-detail > li{padding:20px 45px 20px 27px;text-align:right;}

.ht-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;}

/*후원*/
#support .full_img_box {background: url(../../images/thema/sub/support.png) center center / cover no-repeat; height: 350px; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 30px;}
#support .full_img_box h2 {font-size: 36px; text-align: center;}
#support .con_area p {margin-bottom: 0; font-size: 20px;}
#support_tel {background: #F8F8F8;}
#support_tel.sub_contents {padding-top: 70px;}
.tel_box {background: #fff; width: 100%; height: 150px; padding: 40px 0; display: flex; justify-content: center; align-items: center; border-radius: 20px; gap: 30px;}
.tel_box h2 {color: #222; font-size: 20px;}
.tel_box h3 {color: #F79300; font-size: 30px;}

/*오시는 길*/
.direct_box {width: 100%;}
.root_daum_roughmap .wrap_controllers, .root_daum_roughmap .cont .section.lst {display: none;}
.direct_content {background: #F7F7FA; padding: 40px; margin-top: 40px; border-radius: 20px;}
.direct_item {display: flex; align-items: center; justify-content: left; }
.direct_icon {width: 60px; height: 60px; background: #DCEFE8; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 25px;}
.direct_item h2 {font-size: 28px; color: #222; font-weight: 700;}

.direct_list {width: 100%; font-size: 18px;}
.direct_list li {display: flex; align-items: flex-start; gap: 100px; margin: 20px 20px 15px 60px; position: relative; padding-left: 20px; font-size: 18px;}
.direct_list li::before {content: '•';position: absolute; left: 0; top: 0; color: #f79300; font-size: 26px; line-height: 1;}
.direct_label {font-weight: 700; white-space: nowrap; flex-shrink: 0; width: 120px;}


/*청년도전지원사업*/
#product1 {background: url(../../images/thema/sub/product1_bg.svg) center center / cover no-repeat; max-width: 1920px; height: 863px; margin: 0 auto;}
#product1 .sub_title h2 {color: #444; font-size: 55px; font-weight: 900; margin-bottom: 30px;}
#product1 .sub_title h2 .pt_title1 {color: #EA5283;}
#product1 .sub_title h2 .pt_title2 {color: #003F98;}

.product_contents {width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.product_title_text {background: #fff; width: 100%; max-width: 830px; border-radius: 20px; padding: 20px; text-align: center; font-size: 20px;}

.product_con_title {display: flex; justify-content: center; align-items: center; flex-direction: column;}
.product_con_title h2 {font-size: 36px; margin-bottom: 40px;}
.product_con_title h3 {display: inline-flex; align-items: center; background: #ffd6e7; border-radius: 999px; padding: 6px 20px; font-weight: 600; font-size: 22px; gap: 40px; font-weight: 700; margin-bottom: 40px;}
.product_con_title .dot {width: 8px; height: 8px; background: #fff; border-radius: 50%;}
.product_con_title .label {font-size: 22px; color: #222; font-weight: 700;}

.product_person_list {width: 100%;}
.product_person_list li {display: flex; align-items: center; justify-content: space-between; border: 1px solid #ccc; border-radius: 999px; padding: 16px 24px; margin-bottom: 20px; background: #fff; font-size: 16px;}
.product_person_list .label {width: 280px; text-align: center; background: #C7DEF6; color: #222; padding: 13px 0; margin: 0; border-radius: 999px; font-size: 18px; font-weight: 700; white-space: nowrap; flex-shrink: 0;}
.product_person_list .bar {background: #ccc; width: 1px; height: 20px; margin-left: 30px;}
.product_person_list .desc {padding-left: 20px; color: #333; flex-grow: 1; font-size: 18px;}

.product_program {display: flex; align-items: center; gap: 20px; width: 100%; flex-wrap: wrap;}
.product_prg_items {width: 32%; height: 150px; background: #fff; border-radius: 20px; padding: 40px; display: flex; align-items: center;}
.product_prg_items img {width: 60px; height: 60px;}
.prg_text {margin-left: 25px;}
.prg_text h2 {font-size: 24px;}
.prg_text p {font-size: 18px; font-weight: 400;}
.prg_logo {background: #D4DEEF;}
.prg_logo img {width: 400px; height: auto;}

.incentive_contents {width: 100%;}
.incentive_card_box {width: 100%; max-width: 1280px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; margin-top: 40px;}
.incentive_card_item {width: 100%; display: flex; gap: 20px;}
.incentive_card_item h3 {font-size: 18px; color: #444; font-weight: 400;}
.incentive_card_item p {font-weight: 700; text-align: center;}
.inc_card_title, .inc_time, .inc_reward, .inc_completion, .inc_employment {display: flex; justify-content: center; align-items:center; flex-direction: column; background: #EEF1F5; padding: 20px 0; border-radius: 20px; font-weight: 700; text-align: center;}

.inc_card_title {width: 13.28%; font-size: 24px;}

.inc_time {width: 17.19%; color: #444;}
.inc_time p {font-size: 22px;}

.inc_reward {width: 15.63%; color: #444;}
.inc_reward p, .inc_comp_item .inc_completion p {font-size: 22px; color: #0E72FF; font-weight: 700;}

.inc_completion, .inc_comp_group {width: 21.88%; color: #444;}

.inc_comp_group .inc_completion {width: 100%; padding: 10px; border-radius: 12px;}
.inc_comp_item {display: flex; gap: 10px;}
.inc_comp_item .inc_completion {padding: 30px 10px; background: #DEECFF;}

.inc_employment {width: 25.78%; color: #444;}
.inc_employment p {font-size: 16px; font-weight: 500;}
.inc_employment span {font-size: 22px; color: #0E72FF; font-weight: 700;}

.apply_step_wrap {display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start;}

.apply_step_area {display: flex; flex-wrap: wrap; gap: 20px; flex: 1; max-width: calc(100% - 200px);}

.step_box {display: flex; align-items: center; flex: 1 1 45%; background: #fff; border-radius: 20px; padding: 26px 45px; box-sizing: border-box; font-size: 18px;}
.step_title {width: 40%; margin-right: 20px; font-weight: 800; color: #F79300; font-size: 24px;}
.step_desc {width: 100%;}
.step_box.active {background: #FFD89F;}
.apply_qr_area {width: 15%; text-align: center; background: #fff; padding: 16px; border-radius: 20px; box-sizing: border-box;}

.qr_img img {width: 100%; height: auto;}
.qr_label {margin-top: 8px; font-size: 20px; font-weight: 700; color: #444;}

.step_box.active .step_desc {position: relative;}
.step_box.active .step_desc::before {position: absolute; top: -10px; left: -20px; content:''; width: 20px; height: 24px; background: url(../../images/thema/sub/step_icon.svg) center center / contain no-repeat;}

.apply_button_wrap {margin-top: 40px; text-align: center;}
.apply_button_wrap i {color: #fff; margin-left: 5px; padding-top: 2px;}

.apply_btn {background: #007bff; color: #fff; font-weight: 700; font-size: 22px; padding: 14px 35px; border-radius: 50px; transition: ease .3s;}
.apply_btn img {margin-left: 20px;}
.apply_btn:hover {background: #303F54;}

/*금융사례관리 역량 PG*/
.program_table {width: 100%; border-collapse: collapse; text-align: center; font-size: 18px; border: none;}
.program_table th, .program_table td {padding: 10px 14px; vertical-align: middle;}

.program_table thead th {background: #f3f3f3; font-weight: bold;}
.program_table th {border-top: 2px solid #707070; border-right: 1px solid #ccc;}
.program_table th:last-child {border-right: none;}

.program_table td {border: 1px solid #ccc;}
.program_table td:first-child {border-left: none;}
.program_table td:last-child {border-right: none; text-align: left; padding-left: 20px;}



@media screen and (max-width: 1240px) {.greeting_top {gap: 40px;}  .greeting_top_text {padding-right: 20px;}
  .greeting_info2_wrap {width: 88%;}
  .greeting_bottom_text {padding: 20px;}
  .greeting_bottom_text h2 {font-size: 38px;}
  .greeting_bottom_text p {font-size: 20px;}

  .greeting_simbol2_box.simbol02_box {justify-content: center;}

  .character_title {width: 30%;}
  .character_color_list {font-size: 16px;}

  /*오시는 길*/
  .map, .map .root_daum_roughmap {width: 100% !important;}
  .map .root_daum_roughmap_landing {width: 100% !important;}
}

@media screen and (max-width: 1100px) {
  .greeting_top_text h2 {font-size: 28px;}
  .greeting_top_text p {font-size: 18px;}
  .greeting_bottom_text h2 {font-size: 28px;}

  .greeting_card {background-size: cover;}
}

@media screen and (max-width: 1024px) {
  .greeting_info2_wrap {width: 100% !important; flex-wrap: wrap !important; justify-content: center;}
  .greeting_info2_text {width: 100%; text-align: center; margin-bottom: 100px;}
  .greeting_info2_text p {width: 100%;}
  .sub_visual_wrap {margin-top: 90px;}

  .con_title, .con_title2 {width: 100%; margin-bottom: 20px;}
  .con_box {flex-direction: column;}

  .product_prg_items {width: 48%;}

  .apply_step_area {flex-wrap: wrap; max-width: 1280px; justify-content: center;}
  .step_box {width: 48%;}
}
@media screen and (max-width: 768px) {
  .greeting_top {flex-direction: column;}
  .greeting_img_wrap, .greeting_top_text {width: 100%;}
  .greeting_top_text {padding: 0 20px;}
  .greeting_top_text p {max-width: 100%;}

  .greeting_info2 .inner {justify-content: center;}
  .greeting_info2_wrap {flex-direction: column; margin-bottom: 0;}
  .greeting_info2_text, .greeting_info2_img {width: 100%;}
  .greeting_info2_text {padding-left: 0;}
  .greeting_info2_text p {width: 100%; max-width: 100%;}

  .greeting_info2_img {text-align: center;}
  .top-right {right: 100px;}
  .bottom-right {right: 90px;}
  .bottom-left {left: 50px;}

  .greeting_simbol2_box.simbol02_box {flex-direction: column;}
  .simbol02 {width: 300px; height: 300px;}
  .simbol02_text {width: 100%; margin-left: 0; text-align: center; margin-top: 40px;}

  .character_color_box {flex-wrap: wrap;}
  .character_color_list {width: 48%;}

  /*법인 STORY*/
  .history::before{left:0;}
	.ht-bar, .ht::before, .ht::after{left:0;}
	.ht{display:block;padding-bottom:50px;}
	.ht-img, .contents{width:100%;}
	.ht.first{padding-top:55px;}
	.ht-img {padding: 0 0 15px 50px;}
	.ht-img img{width:80%;}
	.ht-list{padding-left:10% !important;}

  .ht.right .ht-img {text-align: left;}
	.ht.right .ht-list{padding-right:0;}
	.ht-detail {padding-top: 18px !important;}
	.ht-list .year {font-size:46px;}
	.ht.right .ht-list .year{text-align:left;}
	.ht.right .month{left:0;right:auto;}
	.month{font-size:21px;}
	.ht.right .ht-detail > li{text-align:left;}
	.ht-detail > li{font-size:17px;padding:14px 0 14px 45px !important;}
	.ht-detail > li ul li{margin-bottom:10px;}
  .ht_first .ht-detail > li {padding-left: 130px !important;}

  /*후원*/
  #support .full_img_box {height: 260px;}
  .tel_box {width: 100%; height: 250px;flex-direction: column; gap: 10px;}

  /*오시는 길*/
  .direct_list li {flex-direction: column; gap: 10px; margin-left: 20px;}

  /*청년도전지원사업*/
  .product_prg_items {width: 100%;}
  .product_person_list li {flex-direction: column; border-radius: 20px; padding: 10px}
  .product_person_list .label {width: 100%; border-radius: 10px; padding: 10px}
  .product_person_list .bar {display: none;}
  .product_person_list .desc {padding: 20px;}

  .incentive_card_item {flex-wrap: wrap;}
  .inc_card_title {width: 98.8%; padding: 20px 0;}
  .inc_time, .inc_reward {width: 17%;}
  .inc_completion, .inc_employment, .inc_comp_group {width: 28%;}
  .inc_comp_item .inc_completion {width: 50%}

  .inc_time p, .inc_reward p, .inc_comp_item .inc_completion p, .incentive_card_item p, .inc_reward p, .inc_comp_item .inc_completion p, .inc_employment span {font-size: 18px;}

  .apply_step_wrap {flex-direction: column; justify-content: center; align-items: center;}
  .step_box {width: 100%; flex: none;}
  .apply_qr_area {width: 25%; margin-top: 40px;}
}
@media screen and (max-width: 560px) {
  /*공통*/
  .sub_visual_title h3 {font-size: 42px;}
  .sub_contents .sub_title h2 {font-size: 30px;}

  /*인사말*/
  #greeting .sub_title h2 {font-size: 40px;}
  .greeting_top_text h2 {font-size: 24px;}
  .greeting_info2_text h2 {font-size: 26px;}
  .greeting_info2_text p {font-size: 18px;}

  .greeting_bottom_text h2 {font-size: 24px;}
  .greeting_bottom_text p {font-size: 16px;}

  .circle {width: 130px; height: 130px; font-size: 12px;}
  
  .top-right {top: -40px; right: 10px;}
  .bottom-right {right: 10px;}
  .bottom-left {left: 0; bottom: 10px;}

  .character_color_list {width: 100%;}
  .character_down {width: 100%; margin: 0 auto;}

  /*법인 STORY*/
  .ht{padding-bottom:39px;}
	.ht.first{padding-top:28px;}
	.ht-img{padding-bottom:7px;}
	.ht-img img{width:100%;}
	.ht-list .year{font-size:38px;}
	.ht-list{padding-left:6% !important;}
	.month{font-size:19px;}
	.ht-detail {padding:9px 0 0 18px !important;}
	.ht-detail > li{font-size:16px;padding:6px 0 6px 35px !important;}
	.ht-detail > li ul li{margin-bottom:2px;}
  .ht_first .ht-detail > li {padding-left: 110px !important;}

  /*후원*/
  #support .full_img_box h2 {font-size: 26px;}

  /*청년도전지원사업*/
  .incentive_card_item {gap: 10px;}
  .inc_time, .inc_reward, .inc_completion, .inc_employment, .inc_comp_group {width: 48%;}
  .inc_comp_item .inc_completion {width: 48%;}
  .apply_btn {font-size: 18px;}

  /*금융사례관리 역량 PG*/
  .program_table {font-size: 16px;}
  
  
}