@charset "utf-8";
body {background-color:var(--color-bg)}
main {}
main h2 {
    font-size: 56px;
    font-weight: 900;
    /* color: #fff; */
    line-height: 140%;
    letter-spacing: -0.0625rem;
    word-break: keep-all;
}
main h3 {
    font-size: 50px;
    font-weight: 400;
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
    line-height: 120%;
    color: #232323;
}
main h3 span {font-weight:900}
main h4 {font-size: 30px;font-weight: 800;letter-spacing: -.5px;}


.sec1 {position:relative;height: 100vh;}
.sec_share {display:flex;width: 100%;width: var(--width-size);padding: var(--sub_pd) 30px;margin: 0 auto;gap: 2rem;z-index: 1;position: relative;}
.main_bg {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.main_bg .slide_bg {position:relative;z-index: -1;}
.main_bg .slide_bg:after {content:"";position:absolute;display:block;width:100%;height:100%;background-color:#fff9f3;opacity: .9;left: 0;top: 0;}
.main_bg .slide_bg img {width:100%;height: 100%;object-fit:contain;object-position:center;position: relative;}
.sec1_bg {width: 100%;height: 100vh;background: linear-gradient(120deg, #fdfdfd, rgb(208 157 126 / 10%) 50%, #e2662d33);}
.slide_area {display:flex;height: 100%;padding-top: 2rem;position: relative;z-index: 1;gap: 6%;/* width: var(--width-size); */margin: 0 auto;width: 80%;/* min-width: var(--width-size); */align-items: center;justify-content: center;}
.slide_img {
    width: 52%;
    height: auto;
    max-width: 860px;
    position: relative;
    }
.main_slide {
    /* width: 760px; */
    /* height: 500px; */
    /* overflow: hidden; */
    /* border-radius: 0 500px 500px 0; */
    /* position: relative; */
    /* width: 52%; */
    /* height: auto; */
    /* max-width: 860px; */
    overflow: hidden;
    border-radius: 3rem;
}
.main_slide .swiper-wrapper {width: 100%;}
.main_slide .slide {height: 100%;/* overflow: hidden; *//* border-radius: 3rem; */}
.slide_img > span {position:absolute;bottom: -8%;right: -8%;z-index:1;width: 200px;}
.slide_img > span img {object-fit:contain; width:100%; height:100%}
.main_slide .txt_wrap {position: relative;width: 100%;height: 100%;z-index: 3;display: flex;/* margin-left: 8.5rem; */opacity: 0;transition: all 2s;/* animation: fadein; *//* animation-delay: 1s; */flex-direction: column;align-items: center;}
.swiper-slide-active.inr .slide{width: 100%;}
.swiper-slide-active .txt_wrap {opacity:1;/* padding-left: 8rem; */}
.swiper-slide-active .txt_wrap h2 {}
.swiper-slide-active .txt_wrap p {font-size:1.5rem}
.swiper-slide-active .txt_wrap span {color:var(--color-main); font-weight:600;}
.main_slide .slide img, .main_slide .slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.fix_area {width: 42%;position: relative;}
.slide_txt {font-family: var(--font-point);margin-bottom: 4rem;}
.slide_txt h2 {
    font-size: clamp(60px, 2.5vw, 70px);
    font-family: var(--font-point);
    line-height: 160%;
}
.slide_txt h2 span {color:var(--color-main);font-family: var(--font-point-b);font-size: clamp(65px, 4vw, 80px);}
.slide_txt p {margin-top: 3rem;font-size:24px;color: #515151;}
.slide-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    /* margin-right: 17rem; */
    justify-content: center;
    position: absolute;
    width: 100%;
}
.slide-control:before, .slide-control:after {content: "";position: absolute;display: block;/* width: 4rem; *//* height: 4rem; */}
.slide-control button {
    z-index: 1;
    border: unset;
    background: unset;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    background-color: rgb(255 255 255 / 50%);
    transition:.4s
}

.button-prev {
    /* left: -6%; */
    /* position: relative; */
}
.button-next {/* right: -6%; */}
.slide-control .swiper-pagination {position:relative; width:auto}
.slide-control .swiper-pagination span {width: 15px;height: 15px;background-color: var(--color-main);border:2px solid var(--color-main);}
.slide-control .swiper-pagination-bullets.swiper-pagination-horizontal {position: relative;top: 0;width: auto;}
.slide-control .swiper-pagination .swiper-pagination-bullet-active{}
.slide-control button.swiper-button-disabled{opacity: 40%;}
.slide-control button i {
    font-size: 1.5rem;
    color: #636363;
    transition:all .5s;
}
.slide-control .play_pause button {border:unset;width:auto; height:auto; background-color:unset;}
.slide-control .play_pause i {font-size: 1.5rem;color:var(--color-main)}
.slide-control .play_pause .slide_play {padding-left:2px}
.slide-control .play_pause .slide_pause, .slide-control .play_pause .slide_play {display:none;}
.slide-control .play_pause .slide_pause.on, .slide-control .play_pause .slide_play.on {display:block;}

.sec_top button {
    border: unset;
    background: unset;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color:#fff;
}
.sec_top button i {
	font-size: 1.5rem;
	color: #888;
	transition:all .5s;
}
.sec_top button:hover i {color:var(--color-main)}
.sec_top .more_link {background-color:var(--color-main); border-color:var(--color-main); transition: .4s}
.more_link a {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 600;
}
.sec_top .more_link i {color: #fff;font-size: 1.5rem;font-weight: 300;}
.sec_top .more_link:hover  {background-color:var(--color-main2); border-color:var(--color-main2)}
.sec_top .more_link:hover i  {color:#ffffff}

.main_icon {display:flex;gap: 2rem;justify-content: flex-start;width: 100%;margin-bottom: 1rem;}
.main_icon li {/* width:100%; */text-align: center;}
.main_icon li a {display:block; width:100%; height:100%}
.main_icon li span {width:120px;height:120px;background-color:#fff;display: block;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;box-shadow: 0 3px 8px rgb(0 0 0 / 6%);transition: .5s;}
.main_icon li img:nth-of-type(2) {opacity:0;display:none;}
.main_icon li p {padding-top:1rem;font-weight: 500;}
.main_icon li:hover span {background-color:var(--color-main)}
.main_icon li:hover p {color:var(--color-main)}
.main_icon li:hover img:nth-of-type(1) {opacity:0; display:none;}
.main_icon li:hover img:nth-of-type(2) {opacity:1; display:block;}

main .sec2{
    /* padding-top: var(--sub_pd); */
    position: relative;
    width: 100%;
    overflow: hidden;
    }
.sec2 .sec2_inner {
	width: var(--width-size);
	margin: 0 auto;
	padding: 0 30px;
}
.sec2 .news_top {
    display: flex;
    position: relative;
    width: 100%;
}
main .bg_title {color: rgb(208 157 126 / 10%);text-align: left;}
main .bg_title h2 {font-size: 130px;text-transform: uppercase;font-family: 'Pretendard';position: relative;line-height: 200px;}
main .bg_title h2 span {display:block;text-transform: capitalize;position: absolute;right: 0;top: 0;margin-top: 5rem;/* margin-right: 7rem; */color: rgb(255 255 255 / 12%);-webkit-text-stroke: 1px rgb(208 157 126 / 15%);}
.news_inner {display: flex;margin-top: 4rem;}
.news_inner .title {
    width: 30%;
    /* margin-left: 12%; */
    position: relative;
    z-index: 1;
    padding-top: 1.5rem;
}
.news_inner .title .bg {display:block;margin-bottom: 4rem;}
.news_inner .title:before {content:"";position:absolute;width: 250%;height:100%;background-color: var(--color-bg);z-index:-1;right: 0;}
.news_inner .contents {width:70%}

.gallerySwiper {/* padding:2rem; *//* border:1px solid #ddd; */overflow: hidden;position: relative;}
.gallerySwiper ul{/* overflow: hidden; */}
.gallerySwiper ul li {margin-top: 80px; transition: .4s}
.gallerySwiper ul li div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.gallerySwiper ul li div  a{
    display: flex;
    width: 100%;
    height: 260px;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 1em;
}
.gallerySwiper .swiper-slide:nth-of-type(even) {margin-top:0}
.swiper-slide .imgbox {border-radius: 20px;/* overflow:hidden; */width: 100%;/* height: 260px; */display: flex;align-items: flex-start;justify-content: center;}
.swiper-slide .imgbox img {object-position:center;width: 100%;height: 100%;object-fit: cover;}
.gallerySwiper li .gallery_txt {text-align:center; padding-top:1rem;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
	overflow:hidden}

.slide_btn button {
	/* border:none; */
	/* background: none; */
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 50%;
	/* margin-top: 2rem; */
	transition: .3s
}
.slide_btn button:hover {background-color:#fff;border-color:#fff;box-shadow: 2px 3px 8px rgb(0 0 0 / 6%);}
.slide_btn button:hover i {color:var(--color-main)}
.slide_btn .more_link {
    background-color: var(--color-main);
    border: 0;
}
.slide_btn .more_link i {color:#fff; font-weight:100}
.news_btn button {margin-top:2rem}
.news_btn .news-prev {}
.news_btn .news-next {}
.news_slide {/* width: 70%; */position: relative;overflow: inherit;}
.tab_inner {visibility:hidden;display: none;/* height: 375px; */width: 100%;}
.tab_inner.on {display: block;visibility:revert}

.news_top .subtab_case1 {display: flex;align-items: center;margin-left: 5rem;}
.title_tab {
    display: flex;
    justify-content: center;
    gap: 3rem;
}
.subtab_case1 {/* text-align:center; */margin-bottom: 4rem;}
.subtab_case1 .tabs {
    display: inline-flex;
    /* gap: 1rem; */
    justify-content: center;
    background-color: #fff;
    /* padding: 1rem; */
    border-radius: 100px;
    position: relative;
    z-index: 1;
}
.subtab_case1 .tabs li {
    /* padding: 1rem; */
    position: relative;
}
.subtab_case1 .tabs li.on {/* text-align: center; */}
.subtab_case1 .tabs a {
    font-size: 20px;
    font-weight: 600;
    position:relative;
    transition: all .4s;
    /* display: inline-flex; */
    align-items: center;
    color: #616161;
    padding: 1rem 2rem;
    border-bottom: 2px solid #ffffff00;
    display: block;
    min-width: 150px;
    text-align: center;
    height: 100%;
}

.subtab_case1 .tabs li:hover a {color:var(--color-main)}
.subtab_case1 .tabs li:hover a.on {color:var(--color-main);color:#fff}
.subtab_case1 .tabs a.on {background-color: var(--color-main);color: #fff;/* border-color: var(--color-main); */border-radius: 120px;}
.subtab_case1 .tabs li a.on:before {
	content: "";
	/* width: 60px; */
	/* height: 30px; */
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-bottom: -1.2rem;
	border-style: solid;
	border-width: 12px 0px 12px 10px;
	border-color: transparent transparent transparent #e2712d;
	transform: translateX(-50%) rotate(90deg);
}
.sec_top {position: relative; margin-bottom: var(--sub_pd_half);}
main .sec3 {
    width:100%;
    height: auto;
    padding-top: var(--sub_pd_half);
}
.sec_inner {padding:0 30px;width: var(--width-size);margin: 0 auto;}
.gall_btn {position: absolute;right: 0;bottom: 0;z-index: 1;background-color: #f9f4ee;}
main .sec4 {padding-top: var(--sub_pd);}
.service {display:flex;gap: 6rem;align-items: center;}
.service .left_img {width: 40%;border-radius:0 200px 200px 0;overflow:hidden;height: 400px;}
.left_img img{width:100%;height:100%;object-fit:cover;object-position: center;}
.ri_icon {width: 55%;}
.ri_icon h3 {margin-bottom:var(--sub_pd_half)}
.icon_conts {display:flex;gap: 5rem;}
.icon_conts li {/* width:100%; */text-align: center;}
.icon_conts li a {display:block; width:100%; height:100%}
.icon_conts li span {width:120px;height:120px;background-color:#fff;display: block;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;box-shadow: 0 3px 8px rgb(0 0 0 / 6%);transition: .5s;}
.icon_conts li img:nth-of-type(2) {opacity:0;display:none;}
.icon_conts li p {padding-top:1rem;font-weight: 500;}
.icon_conts li:hover span {background-color:var(--color-main)}
.icon_conts li:hover p {color:var(--color-main)}
.icon_conts li:hover img:nth-of-type(1) {opacity:0; display:none;}
.icon_conts li:hover img:nth-of-type(2) {opacity:1; display:block;}
main .sec5 {padding: var(--sub_pd) 0;} 
.sec5 .sec_inner {}
.sec5 .group {display:flex;gap: 4rem;justify-content: center;align-items: flex-start;}
.sec5 .group li {width:100%;border-radius:2rem;padding: 3rem 3rem 2rem;position: relative;}
.sec5 .group .volun {background-color:#F6E5D3}
.sec5 .group .spon {background-color:#DDE9CD}
.sec5 .group .sns {border:1px solid #ddd;margin-top: 5%;}
.sec5 .group li:after {content:"";background-image:url(/img/main/volunteer.svg);position:absolute;display:block;width: 100px;height: 100px;top: 0;right: 0;transform: translate(-30px, -40px);background-repeat: no-repeat;background-size: 100%;background-position: center;}
.sec5 .group .spon:after {background-image:url(/img/main/sponsor.svg);}
.sec5 .group .sns:after {background-image:url(/img/main/sns.svg);}
.sec5 .group li p {font-size: 20px;padding-top: 1.5rem;}
.sec5 .group li button {width: 50px;height: 50px;background-color:rgb(255 255 255 / 50%);border-radius: 50%;float: right;margin-top: 1.5rem;transition: .3s;}
.sec5 .group li button i {color:#636363}
.sec5 .group li button:hover {background-color:#fff;box-shadow: 2px 3px 8px rgb(0 0 0 / 6%);}
.sec5 .group li button:hover i {color:var(--color-main)}
.group .sns .snslink {/* text-align:center; */display:flex;gap: 2.5rem;padding-top:2rem;justify-content: center;}


/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1500px)  {
    main {width:100%}
	.main_bg {height:auto}
    
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media (max-width: 1024px) {
	.sec1 {height:auto;}
	.main_bg {height: 100%;}
	.main_bg .slide_bg {height:100%;width: 100%;}
	.main_bg .slide_bg img {object-fit:cover}
	.main_bg .slide_bg:after {/* opacity:.5; */}
	.slide_txt h2 {font-size: clamp(3rem, 6.5vw, 4rem)}
	.slide_txt p {margin-top:2rem}
	.slide_area {flex-wrap:wrap;padding-top: 80px;}
	.slide_img {width:100%}
	.main_slide .swiper-wrapper {}
	.slide_area .main_slide > span {
    left: unset;
    right: 2%;
    width: 180px;
    bottom: 40%;
}
	.slide_area .main_slide span img{width:100%;object-fit: contain;}
	.fix_area {width:100%;padding: 2rem;}
	main .sec3 {padding-top:1rem}
	.news_inner {/* flex-wrap:wrap; */display: flex;/* align-items: center; */}
	.news_inner .title {/* width: 40%; *//* display:flex; *//* flex-wrap:wrap; *//* align-items: center; *//* justify-content: space-between; *//* padding: 6rem 0 0; */}
	.news_inner .title .bundle {/* width:60%; */}
	main .bg_title h2 {font-size: 70px;/* height: 10px; */line-height: 1;}
	main h3 {font-size: 36px;}
	main h3 span {font-size: 40px;}
	.news_inner .title:before {height:100%}
	.news_inner .title .bg {width: 55%;margin-bottom: 2rem;}
	.news_inner .title .bg img {width:100%}
	.news_inner .contents {/* width: 65%; */}
	.subtab_case1 {margin-bottom: 3rem;}
	.swiper-slide .imgbox {height:200px}
	.gallerySwiper ul li {margin-top: 0;}
	.gallerySwiper ul li:nth-child(even) {margin-top:3.3rem}
	.gall_btn {}
	.subtab_case1 .tabs {/* text-align:center; *//* margin:0 auto; */width: 100%;justify-content: space-between;}
	.subtab_case1 .tabs a {min-width: 120px;padding: .6rem;}
	.service {gap:2rem}
	.service .left_img {width:45%}
	.ri_icon {padding-right:30px;width: 45%;}
	.ri_icon h3 {word-break:keep-all}
	.icon_conts {gap: 2rem;flex-wrap:wrap;/* padding: 0 3rem; */}
	.icon_conts li span {/* width: 100px; *//* height: 100px; */}
	.icon_conts li span img {width: 45%;object-fit: contain;}
	.sec5 .group {/* flex-wrap:wrap; */gap: 2rem;}
	.sec5 .group li {width:33%;padding: 1.5rem;padding-top: 4rem;}
	.sec5 .group li p {font-size:18px; word-break:keep-all}
	.sec5 .group li p br {display:none;}
	.group .sns .snslink {gap:5px}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	p, li {font-size: clamp(.9rem, 4.5vw, 1rem);}
	.sec1 {
}
	.sec_inner {padding:0 3%}
	.fix_area {padding:0;}
	.sec1_bg {height:auto}
	.slide_area {width:100%;padding-top:70px;height: auto;padding: 70px 3%;gap: 2rem;text-align: center;}
	.slide_img > span {display:none}
	.slide_txt {margin-bottom:1rem;margin-top: 2rem;}
	.slide_txt h2 {font-size: clamp(1.8rem, 7vw, 2.2rem);/* width: 100%; */}
	.slide_txt h2 span {font-size: clamp(2.2rem, 7.5vw, 2.8rem);}
	.slide_txt p {font-size: clamp(.9rem, 4.5vw, 1rem);word-break: keep-all;margin-top: 1rem;}
	.slide_txt p br {display:none;}
	.slide-control {margin-top:1rem}
	.slide-control button {width:45px; height:45px}
	.slide-control button i, .news_btn button i {font-size: 16px;}
	.main_icon {flex-wrap:wrap;gap: 1rem;display: flex;justify-content: center;}
	.main_icon li {width: 45%;}
	.main_icon li span {width:100px; height:100px}
	.sec2 .sec2_inner {padding:0 3%}
	main h3, main h3 span {font-size: clamp(1.8rem, 6.5vw, 2rem);}
	.news_btn button {margin-top:1rem}
	main .bg_title h2 {font-size: 50px;height: 70px;}
	main .bg_title h2 span {margin-top: 2rem;}
	.news_inner {flex-wrap:wrap;display: flex;align-items: center;}
	.news_inner .title {width: 100%;display:flex;flex-wrap:wrap;align-items: center;justify-content: space-between;padding: 0;}
	.news_inner .title .bg {width: 35%;margin-bottom: 0;}
	.news_inner .title .bundle {width: 60%;}
	.news_inner .contents {width:100%}
	.subtab_case1 {margin-bottom:2rem}
	.subtab_case1 .tabs {width:100%;display: flex;justify-content: space-between;text-align:center;margin:0 auto;}
	.subtab_case1 .tabs li {width:auto}
	.subtab_case1 .tabs a {min-width: 70px;padding: .5rem 1rem;font-size: 16px;}
	.subtab_case1 .tabs li a.on:before {border-style: solid;border-width: 10px 0px 10px 8px;margin-bottom: -16px;}
    .gallerySwiper ul li {margin-top:2rem}
	.gallerySwiper ul li:nth-child(even) {margin-top:2rem}
	.gallerySwiper ul li.swiper-slide-active {margin-top:0; transition: .4s}
	.swiper-slide .imgbox {height: 120px;}
	.gall_btn {position:relative;margin-top: 1rem;text-align: center;}
	.service {flex-wrap:wrap}
	.service .left_img {width:100%;height: auto;margin-right: 1rem;}
	.ri_icon {width:100%; padding:0 3%}
	.icon_conts {
    display: flex;
    justify-content: center;
}
	.icon_conts li {width: 40%;}
	.icon_conts li span {/* width: 90px; *//* height: 90px; */}
	.sec5 .group {flex-wrap:wrap}
	.sec5 .group li {width:100%;padding: 2rem 1.5rem 1.5rem;}
	main h4 {font-size: clamp(1.4rem, 6vw, 1.8rem);}
	.sec5 .group li p {font-size: clamp(.9rem, 4.5vw, 1rem);}
	.sec5 .group li p br {display:none}
	.sec5 .group li button {margin-top:0}
	.sec5 .group li:after {width: 80px;height: 80px;transform: translate(-20px, -20px);}
	.group .sns .snslink {gap:1rem}
}
