@charset "utf-8";
main .title {
    /* width: 100%; */
    /* text-align: center; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
main .title h4 {font-size: 30px;font-family: var(--font-point);}
main .title p {font-size:18px; font-weight:400; padding-top:1rem}
.slide_txt {position:absolute;width: 1400px;height: auto;left: 50%;top: 55%;transform: translate(-50%, -50%);/* margin-top: 3rem; */}
.slide_txt h2 {
    font-size: 70px;
    font-family: var(--font-point);
    font-weight: 600;
    /* position: relative; */
    /* left: 0; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    color: #55adfc;
    line-height: 1.2;
    font-family:"Cafe24Ssurround"
}
.slide_txt p {position: relative;margin-top: 1.5rem;font-size: 24px;font-weight: 400;}
main h2 span, main h2 strong {
    font-weight: 900;
    font-size: 60px;
}
main h2 span {color: #64B259;;}
main h3 {
    font-size: 45px;
    font-family: var(--font-point);
    font-weight: 700;
}
main .sec1 {height: 700px;position: relative;max-width: 1920px;margin: 0 auto;}
.main_slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main_slide .swiper-wrapper {width: 100%;}
.main_slide .swiper-wrapper  div.slide1 {background-color:#eff7f7}
.main_slide .swiper-wrapper  div.slide2 {background-color:#fcfae1}
.main_slide .slide {height: 100%;}
.main_slide .slide img, .main_slide .slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.slide-control {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.slide-control .leaf{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.slide-control .leaf button {
    z-index: 1;
    background-color: unset;
    border: unset;
    position: relative;
    background-color: #00000054;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.slide-control .leaf .button-prev {
    /* left: 0; */
    /* position: relative; */
}
.slide-control .leaf .button-next {}
.slide-control .leaf button i {
    font-size: 2rem;
    color: #ffffff;
    transition:all .5s;
}
.slide-control .leaf button:hover {background-color:var(--color-main); }
.bg_visual {position:fixed;top:0;left: 0;width: 100%;height: 100vh;z-index: -1;}
.video_wrap{position:absolute;top:0;left:0;width:100%;height:100%}
.video_wrap video{position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;transform: translate(-50%,-50%);}
.contents_area {padding: 0 7%;}

.favorites {
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35%;
}
.favorites strong {
    font-size: 30px;
    font-family: var(--font-point);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--color-main);
    color: var(--color-main);
    width: 100%;
    display: inline-block;
    font-weight: 800;
}
.favorites .fav_icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.favorites .fav_icon li {
    width: 30%;
    text-align: center;
    margin-top: 2rem;
}
.favorites .fav_icon li span {
    display: block;
    background-color: #ffffff;
    width: 130px;
    height: 130px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 20px rgb(37 94 124 / 30%);
    transition: all .4s;
}
.favorites .fav_icon li p {margin-top:1rem;font-weight: 500;font-size: 20px;transition: all .4s;}
.favorites .fav_icon li:hover span {background-color:#e2f0f6}
.favorites .fav_icon li:hover p {color:var(--color-main2)}
.icon_area_bg {
    padding: 5rem 0 0;
    /* background-color: var(--color-bg-gray); */
    }
.icon_area {
	max-width: var(--width-size);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 200px;
}
.icon_area ul {
    display: flex;
    width: 100%;
    gap: 40px;
}
.icon_area ul li {
    width: 100%;
    text-align: center;
    /* transition: all .4s; */
    border-radius: 1rem;
    position: relative;
	transition: all .4s;
}
.icon_area ul li:before {content:"";position: absolute;background-color: #ecf6ff;width:100%;height:100%;top:0;left:0;z-index: -1;border-radius: 1rem;border: 1px solid #55adfc00;transition: all .4s;}
.icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.icon dt {height: 80px;display: flex;justify-content: center;align-items: center;transition:all 1.5s}
.icon dd {
    font-weight: 500;
    padding-top: 1rem;
    font-size: 20px;
    
}
.icon_area ul li:hover {transform:translateY(-2rem);}
.icon_area ul li:hover::before {background-color:#fff;box-shadow: 0px 2px 23px rgb(58 138 253 / 20%);border-color: var(--color-main);}
.icon_area ul li:hover dt, .business_list li:hover dt {transform: rotateY(180deg);}
.icon_area ul li a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.icon_area ul li:hover span {
	border-color:var(--color-main);	
}
.icon_area ul li:hover p {color:var(--color-main)} 
.icon_area ul li:hover svg {fill:var(--color-main)}

main .sec3 {
    width:100%;
    height: auto;
    /* padding: 5rem 13rem; */
    /* display: flex; */
    /* align-items: center; */
    /* flex-direction: column; */
    max-width: var(--width-size);
    margin: 0 auto;
    padding: 0 0 6rem;
}
main .sec2 .title {display:flex;justify-content: flex-start;align-items: center;}
main .sec2 .title a {font-size: 1.5rem;border-radius: 50%;border: 1px solid #ccc;width: 42px;height: 42px;display: inline-flex;justify-content: center;align-items: center;color: #666;transition:all .4s;margin-left: 1rem;}
main .sec2 .title a:hover {background-color:var(--color-main); border-color:var(--color-main); color:#fff}
.story_inner {
    width: 49%;
    /* margin-top: 4rem; */
    position: relative;
    max-width: 1500px;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 1rem;
    padding: 1.5rem 2rem 2rem;
}
.story_inner .gallerySwiper {overflow: hidden;position: relative;}
.story_inner li > div {
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    /* margin-bottom: 1rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* margin-bottom: .5em; */
}
.story_inner li > div img {width:100%; height:100%; object-fit:cover}
.story_inner li > div.txt {height:auto;border-radius: 0;padding: 1rem .5rem 0;}
.story_inner li a {
    font-weight: 400;
    word-break: keep-all;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.gall_btn {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 1.5rem;
    margin-right: 2rem;
}
.gall_btn button {background-color:unset;border:unset;position: relative;width: 42px;height: 42px;border: 1px solid #ddd;border-radius: 50%;}
.gall_btn button i {font-size: 2rem;color: #888;}
.gall_btn .gall-prev {left: -15px;}
.gall_btn .gall-next {
    /* right: -35px; */
}
.gall_btn button:hover i {color:var(--color-main)}
div.story_inner .gall_scroll {max-width: 20rem;width:100%;left: 50%;transform: translateX(-50%);background-color: rgba(81, 94, 120, 0.12);margin-bottom: 1rem;}
.news_inner .inner_top {
    display: flex;
    justify-content: space-between;
    padding: 3rem 0;
    align-items: center;
    padding-left: 1rem;
}
.news_btn button {
	border:none;
	background: none;
}
.news_btn button i {font-size: 35px;color: var(--color-dark);transition:all .5s}
.news_btn button:hover i {color:var(--color-main2)}

.tab_inner {/* visibility:hidden; */height: auto;display: none;width: 100%;}
.tab_inner.on {display:block; }

.subtab_case1 {
    /* margin-bottom: 2rem; */
}
.subtab_case1 .tabs {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-bg-gray);
    /* padding: 10px; */
    /* border-radius: 3rem; */
    align-items: center;
    height: 74px;
    border-radius: 1rem 1rem 0 0;
}
.subtab_case1 .tabs li {width: 50%;text-align: center;height: 100%;}
.subtab_case1 .tabs a {
    font-size: 26px;
    font-weight: 600;
    font-family: var(--font-point);
    position:relative;
    transition: all .4s;
    height: 100%;
    width: 100%;
    display: inline-flex;
    /* border-radius: 2rem; */
    color: #616161;
    border-radius: 1rem 0 0 0;
    padding: 0 2rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: all .4s;
}
.subtab_case1 .tabs span {font-weight:300;display:none;width: 36px;height: 36px;border: 1px solid #fff;border-radius: 50%;transition:all .4s}
.subtab_case1 .tabs li:hover span {background-color:#fff; color:var(--color-main)}
.subtab_case1 .tabs li:hover a {color:var(--color-main)}
.subtab_case1 .tabs li:hover a.on {color:#fff;padding: 0;}
.subtab_case1 .tabs a.on:after {display:unset;}
.subtab_case1 .tabs a.on {
    background-color: var(--color-main);
    color: #fff;
    border-radius: 1rem 1rem 0 0;
}
.subtab_case1 .tabs a.on span {display:unset;display: inline-flex;align-items: center;justify-content: center;}
.news_btn {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.slide_btn {
    display: flex;
    align-items: center;
}
.more_link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
}
.more_link a {
    width: 170px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 50px;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    color: var(--color-main);
    font-weight: 600;
}
.more_link i {color: var(--color-main);font-size: 1.5rem;font-weight: 300;transition:all .5s}
.more_link a:hover  {background-color:var(--color-main); color:#ffffff; border-color:var(--color-main)}
.more_link a:hover i {color:#ffffff}

main .sec2 {
    width:100%;
    height: auto;
    padding: 6rem 0 8rem;
    display: flex;
    background-position: center;
    max-width: var(--width-size);
    width: 100%;
    margin: 0 auto;
    justify-content: space-between;
}

.notice_inner {
    width: 48%;
    border: 1px solid #ddd;
    border-radius: 1rem;
}
.calendar {
    width: 45%;
}
.calendar_skin {
				background-color:#fff;
				padding: 1.5rem;
				/* height: 624px; */
				border-radius: 1rem;
				position: relative;
				display: flex;
				justify-content: space-between;
				border: 1px solid var(--color-main);
				border-radius: 1rem;
				/* padding-bottom: .5rem; */
				height: 100%;
				}
.calendar_skin .day {width: 51%;}
.calendar_skin ul {
    display: flex;
    width: 100%;
    justify-content: center;
}
.calendar_skin ul li {font-size: 24px;line-height: 30px;}
.calendar_skin ul li a {font-weight:500}
.calendar_skin ul li span {font-size:40px;font-weight: 600;}
.calendar_skin ul li i {
    /* padding: 0 2rem; */
    color: var(--color-main2);
}
main .sec4 {width:100%;background-color: #ecf6ff;padding: 5rem 0;}
main .sec4_inner{
    width:100%;
    height: auto;
    /* padding: 5rem 0 10rem; */
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
}
.business_list {width: calc(100% - 420px);display: flex;gap: 60px;height: 200px;}
.business_list li {width:100%;background-color:#fff;border-radius:1rem;border: 1px solid #0000;transition:all .4s}
.business_list li:hover {transform:translateY(-1rem);box-shadow: 0px 2px 23px rgb(58 138 253 / 20%);border-color: var(--color-main);}


main .sec5 {max-width: 1400px;margin: 0 auto;padding: 0 0 7rem;}
.sec5 .title {display:block}
.banner {display:flex;gap: 4rem;}
.banner li {width:100%;padding: 3rem;background-color: #fff8da;border-radius: 1rem;position: relative;}
.banner li:last-of-type{background-color: #e5f7d2;}
.banner li:after {content:"";background-image:url(/img/main/bn1.svg);background-repeat: no-repeat;position: absolute;width: 250px;height: 200px;right: 5%;top: 50%;transform: translateY(-50%);}
.banner li a {background-color:#fff; padding:.5rem 2rem;display:inline-block; margin-top:2rem; border-radius:1rem; transition
			 :all .4s}
.banner li a:hover {color:#fff;background-color:#fdce00}
.banner li:last-of-type a:hover {background-color:#71a736}
.banner li:last-of-type::after {background-image:url(/img/main/bn2.svg);}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
	main .sec1, main .sec2, main .sec3, main .sec4 {padding:5%;}
    main .sec1 {
		padding: 0;
	}
    .main_slide {}
	.slide-control {width: 54%;top: 59%;}
	.icon_area {
    padding: 6rem 5%;
}
	.icon_area ul {width: 70%;}
	
	.notice_inner {width:50%}
    .calendar {
		width: 47%;
	}
	.calendar_skin .day {width:52%}
	.banner {
    width: 22%;
}
    .tablist {
		width: 22%;
	}
    .related {
		padding: 0 5%;
	}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
	main .sec1, main .sec2, main .sec3, main .sec4, main .sec5 {padding: 0 5% 10%;}
    main .sec1 {padding: 0;height: 520px;}
	.slide_txt {width:100%;padding: 1rem;top: 36%;}
	.slide_txt h2 {font-size: 4vw;}
	.slide_txt h2 span, .slide_txt h2 strong {font-size: 4vw;}
	.icon_area_bg {padding:0;}
	.icon_area {
    padding: 10% 5%;
    flex-wrap: wrap;
    margin-bottom: 10%;
}
	.icon_area ul {
    width: 100%;
}
	.icon_area ul li {width: 18%;height: 100%;}
	.icon_area ul li span {height: 120px;}
	
	.slide-control {width: 90%;/* top: 32%; */}
	.slide-control .leaf button i {
    font-size: 2.5rem;
}
	.slide-control .leaf .button-prev {left: 0;}
	.slide-control .leaf .button-next {right: 0;}
	
	.favorites {margin-top:2rem;padding: 3%;}
	.favorites .fav_icon li {
    width: 15%;
}
	.favorites .fav_icon li span {width:100%;height:auto;padding: 1.45rem 0;}
	.favorites .fav_icon li p {font-size: 1.1rem;}
	.gall_btn .gall-prev {left: -40px;}
	.gall_btn .gall-next {
    right: -40px;}
	.news_btn {width:35%}
	main .sec3 {
    display: flex;
    /* flex-wrap: wrap; */
}
	.story_inner {
    margin-top: 2rem;
}
	.more_link {
    padding-top: 1rem;
}
	.subtab_case1 .tabs li {width: 60%;}
	.subtab_case1 .tabs li:first-child {/* width:40%; */}
	.subtab_case1 .tabs a {font-size:20px}
	.notice_inner {width:100%;/* padding: 0 0 1rem; */}
	.gallery, .calendar {width:100%}
	.calendar {margin-top: 2rem;}
	.calendar_skin {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    justify-content: space-between;
}
	.calendar_skin ul {display: block;text-align: center;}
	.latest_calendar {/* width:50%; *//* margin: 0; */}
	.calendar_list {width: 48%;position: relative;transform: unset;left: 0;margin-top: 1rem;}
	.calendar_list dl {
    flex-wrap: wrap;
}
	.calendar_list dt {width:100%;margin-bottom: 1rem;}
	
} 



/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
	main .sec1 {}
	main h3, main .title h4 {font-size:6vw}
	main .title p, .banner li a {font-size:4vw;}
	.banner li a {margin-top: 1rem;}
	.main_slide {border-radius:0}
	.main_slide .slide img {object-position: 63%;/* height: 70%; *//* bottom: 0; *//* position: absolute; */padding-top: 157px;}
	.main_slide .swiper-wrapper div.slide1 img {object-position: 80%;}
	.slide-control {/* width:100%; *//* top: 0; *//* margin-top: 150px; */left: 50%;transform: translateX(-50%);z-index: 1;text-align: center;}
	.slide-control .leaf button {width:40px; height:40px}
	.slide-control .leaf button i {font-size:1.6rem}
	.favorites .fav_icon li {width: 30%;}
	main .sec2, main .sec3, main .sec4 {padding: 10% 3%;}
	main .sec2, main .sec4 {flex-wrap: wrap;}
	main .sec3 {display:block}
	.slide_txt h2 {font-size: 10vw;width: 100%;}
	.slide_txt p {font-size:5vw;margin-top: 1rem;}
	main h3, .favorites strong {font-size:8vw;/* text-align: center; */}
	main .sec3 .title a {width:42px; height:42px}
	main .sec3 .title a i {font-size:1.5rem}
	.icon_area {
    /* padding: 15% 3%; */
    /* margin-bottom: 0; */
    height: 100%;
    margin-bottom: 0;
}
	.icon_area ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
}
	.icon_area ul li {
    width: 31%;
    height: auto;
}
	.icon {padding: 1rem .5rem;}
	.icon dt {height: 50px;}
	.icon dt img {width:60%}
	.icon dd {font-size: 4vw;padding-top: .5rem;}
	.subtab_case1 .tabs {height:54px}
	.subtab_case1 .tabs a {font-size: 20px;padding: 0;}
	.news_btn {width:100%;margin-top: 1rem;display: flex;justify-content: space-between;align-items: center;}
	.more_link {/* padding-top: 0; */}
	.news_board li {border-radius:1rem;padding: 2rem 1rem;}
	
	.gallery > ul li, .gallery > ul li:last-child, .gallery > ul li:nth-last-child(2) {width:100%;margin-bottom: 1rem;}
	.gall_btn .gall-prev {left: -10px; z-index: 1;}
	.gall_btn .gall-next {right: -10px; z-index: 1;}
	.gall_btn button i {color:#fff;}
	.calendar_skin {background-color:#fff;padding: 1rem;border-radius: 1rem;position: relative;display: block;}
	.calendar_skin ul {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    width: 100%;
	}
	.calendar_skin .day {width:100%}
	.latest_calendar, .calendar_list {width:100%;height: auto;margin-top: 1rem;padding: 1rem .8rem;}
	.calendar_list dt {margin-bottom:0}
	.calendar_list dd {font-size: 16px;height: auto;font-weight: 400;}
	main .sec4_inner {display:block}
	main .sec4_inner h3 {margin-bottom:2rem}
	.business_list {flex-wrap:wrap;width:100%;gap: 1rem;justify-content: center;height: auto;}
	.business_list li {width: 45%;}
	.banner {flex-wrap:wrap;gap: 1rem;}
	.banner li {padding: 1.5rem;}
	.banner li:after {background-size: contain;width: 100px;height: 81px;transform: unset;top: unset;bottom: 10%;right: 3%;}
	main .sec5 {padding: 15% 5%;}
}