@charset "UTF-8";

/* 헤더, 푸터는 common.css에 있음 */

.visual{height: 70%;position: relative;z-index: 1000;}
.visual .centerbox{position: relative;height: 100%;}
.visual .visual_box{position: relative;top: 50%;transform: translateY(-50%); display: flex;justify-content: space-between;align-items: center;}
.visual .textbox{position: relative;left: 15%;transform: translateX(-15%);}
.visual .textbox .text{color: #fff;text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);margin-bottom: 61px;}
.visual .textbox .text em{font-size: 3.8rem;font-style: normal;font-weight: 600;}
.visual .textbox .text strong{display: block;font-size: 11rem; font-family: 'Aggravo';}
.visual .textbox .btn{display: inline-block; font-size: 2rem;padding: 15px 30px;background: #fff;border-radius: 60px;font-weight: 600;}
.visual figure{width: 500px; }
.visual figure img{}

.main_bg{background: linear-gradient(#FFA72C, #FF9500);height: 945px;position: relative;overflow: hidden;}
.main_bg .bg_box{position: absolute;width: 100vw;height: 945px; margin: 0 auto;inset: 0;}
.main_bg .bg{position: absolute;bottom: -95px;left: 50%;transform: translateX(-50%);}
.main_bg .bg_parts1{position: absolute;left:-48px;top: 136px;}
.main_bg .bg_parts2{position: absolute;right: -360px;top: 177px;}

.part1 .swiper-pagination {top:auto !important; bottom: 100px !important;}
#section1{background: url(../images/1bg.png)no-repeat center top;position: relative;}
#section1 .part1{}
.part1 .content{max-width: 1130px;margin: 0 auto;box-sizing: border-box;}
.part1 .content ul{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: 1fr 1fr;gap:40px;/* width: 100% */}
.part1 .content ul li{padding: 60px 40px;border: 1.5px solid #D6D6D6; display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;border-radius: 30px;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);word-break: keep-all; box-sizing: border-box;}
.part1 .content ul li.swiper-slide{width: auto;height: auto;}
.part1 .content ul li figure{width: 70px;height: 70px;background: linear-gradient(#E5B42C,#E56718);display: flex;align-items: center;justify-content: center;border-radius: 23px;margin-bottom: 25px;}
.part1 .content ul li figure img{}
.part1 .content ul li h4{display: inline;font-size: 2rem;font-weight: 600;margin-bottom: 20px;}
.part1 .content ul li p{display: inline;font-size: 1.6rem;color: #767676;}
.part1 .content ul li p span{display: block;}

#section1 .section_bg{height: 137px;position: absolute;bottom: -85px;z-index: 99;left: 50%;transform: translateX(-50%);}

#section2{background: #FBF2E6;position: relative;padding-bottom: 50px;}
.part2 .content{display: flex;flex-direction: column; justify-content: center;align-items: center;}

/* 스와이퍼 슬라이드 */
#section2 .swiper {
    width: 100%;
    height: 100%;
}
#section2 .swiper {
  width: 100%;
  height: 330px;
}
#section2 .swiper-wrapper {
  /* align-items:center */
  height:auto
}

.mySwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    overflow: hidden;
    box-shadow: 0 8px 16.3px rgba(188, 135, 103, 0.12);
    background:#fff;
    width:800px; 
    transition:.5s;
}

.tool_desc .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 45px;
    overflow: hidden;
    box-shadow: 0 8px 16.3px rgba(188, 135, 103, 0.12);
    background:#fff;
    width:800px; 
    transition:.5s;
}

#section2 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section2 .mySwiper .swiper-wrapper {transition: 0.3s cubic-bezier(.24,.58,.46,1.01);}
#section2 .mySwiper .swiper-wrapper .big{display: flex;justify-content: center;align-items: center; height:276px}
#section2 .mySwiper .swiper-wrapper .big img{max-width:780px; max-height:240px; /* width: 704px;height: 320px; */border-radius: 45px;overflow: hidden;}
#section2 .mySwiper{position: relative;}
#section2 .mySwiper .btn_prev{
  display: block;width: 60px;height: 60px;background: url(../images/btn_prev.svg);position: absolute;top: 40%;left: 21%;cursor: pointer;z-index: 9;
}
#section2 .mySwiper .btn_next{
  display: block;width: 60px;height: 60px;background: url(../images/btn_next.svg);position: absolute;top: 40%;right: 21%;cursor: pointer;z-index: 9;
}

#section2 .swiper.tool_desc {max-width: 900px;margin-top: -40px;}
#section2 .tool_desc .swiper-slide {display: flex; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 171, 60, 0.1));padding: 30px 50px;box-sizing: border-box;border-radius: 30px;box-shadow: none;justify-content: start;align-items: start;overflow: hidden;line-height: 1.5;}
#section2 .tool_desc .swiper-slide img {}

#section2 .swiper-button-disabled {opacity: 0.5;pointer-events: none;}



.part2 .content .tool_desc{}
.part2 .content .tool_desc figure{}
.part2 .content .tool_desc figure img{}
.part2 .content .tool_desc .text{margin-left: 30px;text-align: left;}
.part2 .content .tool_desc .text h5{font-size: 20px;font-weight: 600;margin-bottom: 0.5em;}
.part2 .content .tool_desc .text p{color: #767676;font-size: 16px;display: block;}

#section2 .section_bg{height: 140px;position: absolute;bottom: -86px;z-index: 99;left: 50%;transform: translateX(-50%);}
.section_bg img{}

#section3{background: url(../images/3bg.png) no-repeat center top;position: relative;}
#section3::before{content: "";background: linear-gradient(rgba(255, 255, 255, 0.92) 60%, #fff 100%);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 4;}
#section3 .part3 .centerbox{z-index: 5;position: relative;}
.part3 .content{display: flex;flex-direction: column;align-items: center;}
.part3 .swiper {overflow: visible;}
.part3 .content ul.video{display: flex;margin-bottom: 40px;justify-content: start;position: relative;z-index: 5;}
.part3 .content .video li{background: #fff;padding: 20px;border-radius: 30px;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);transition: .5s;width: 100%; box-sizing: border-box; }
.part3 .content .video li:hover{box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);}
.part3 .content .video li a{}
.part3 .content .video li a .cont{}
.part3 .content .video li a .cont .thumnail{margin-bottom: 20px;border-radius: 17px;overflow: hidden;max-height: 215px;position: relative;display: flex;align-items: center;justify-content: center;}
.part3 .content .video li a .cont .thumnail::before{content: "";position: absolute;inset: 0;background: rgba(0, 0, 0, 0.5) url("../images/play_icon.svg") no-repeat center center;opacity: 1;transition: .5s;}
.part3 .content .video li:hover a .cont .thumnail::before{opacity: 0;}
.part3 .content .video li a .cont .thumnail img{width: 100%;display: block;}
.part3 .content .video li a .cont .vid_tit{font-size: 20px;font-weight: 600;margin-bottom: 15px;overflow: hidden;text-overflow: ellipsis;white-space : nowrap;}
.part3 .content .video li a .cont .uploader_info{display: flex;align-items: center;}
.part3 .content .video li a .cont .uploader_info .profile_img{border-radius: 50%;overflow: hidden;}
.part3 .content .video li a .cont .uploader_info .profile_img img{width: 100%;height: 100%;}
.part3 .content .video li a .cont .uploader_info .info{margin-left: 10px;color: #767676;}
.part3 .content .video li a .cont .uploader_info .info .name{font-size: 1.6rem;margin-bottom: 5px;}
.part3 .content .video li a .cont .uploader_info .info .subscribe_count{font-size: 1.2rem;}

.part3 .content .btn{padding: 15px 30px;box-shadow: 0 0 0 1.5px #E56718 inset;border-radius: 61px;color: #E56718;font-size: 20px;font-weight: 600;display: block;box-sizing: border-box;position: relative;z-index: 5;}
.part3 .content .btn:hover{color: #fff;background: linear-gradient(135deg, #E56718 15%, #490179 100%);box-shadow: none;}

#section3 .section_bg{position: absolute;z-index: 4;bottom: -212px;}

.bg4{position: relative;}
.bg4 .section_bg{position: absolute;background: linear-gradient(-27deg, #FFA72C 0%, #FF9500 100%);width: 1920px;height: 1000px;z-index: 4;top: -999px;left: 50%;transform: translate(-50%);}
.bg4 .section_bg img:nth-child(1){position: absolute;left: -200px;top: 50px;}
.bg4 .section_bg img:nth-child(2){position: absolute;right: -150px;bottom: 0px;}

#section4{position: relative;z-index: 99;}
#section4 .part4 .centerbox{}
.part4 .title{color: #fff;text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);}
.part4 .title p{font-size: 3.8rem;font-style: normal;font-weight: 600;margin-bottom: 0.5em;}
.part4 .title h2{font-size: 6rem; font-family: 'Aggravo';}
.part4 ul.content{display: flex;margin-top: 88px;gap: 40px;justify-content: center;align-items: center;}
.part4 ul.content li{width: 230px;height: 230px;display: flex;justify-content: center;align-items: center;position: relative;}
.part4 ul.content li::before{content: "";width: 230px;height: 230px;border-radius: 30px;background: rgba(255, 255, 255, 0.1);position: absolute;top: 0;left: 50%;transform: translateX(-50%); transition: 0.35s;}
.part4 ul.content li .icon{display: flex;justify-content: center;align-items: center;transition: .2s;}
.part4 ul.content li .icon img{}
.part4 ul.content li .desc{position: absolute;top: 30px;width: 100%;height: auto;box-sizing: border-box;color: #fff;display: flex;flex-direction: column;padding: 15px;opacity: 0;transition: .2s;visibility: hidden;z-index: 3;}
.part4 ul.content li .desc h5{font-size: 1.8rem;margin-bottom: 15px;}
.part4 ul.content li .desc p{font-size: 1.6rem; font-weight: 400;margin-bottom: 25px;line-height: 1.5;}
.part4 ul.content li .desc p span{display: block;}
.part4 ul.content li .desc .btn{background: #fff;align-self: end;padding: 8px 20px;border-radius: 32px;font-size: 1.8rem;display: flex; align-items: center;font-weight: 500;}
.part4 ul.content li .desc .btn img{margin-left: 10px;width: 8px;height: 8px;}

.part4 ul.content li:hover::before{background: #E38B10;width: 294px;height: 298px;z-index: 2;}
.part4 ul.content li:first-child:hover::before{width: 294px;height: 274px;}
.part4 ul.content li:hover .icon{opacity: 0;}
.part4 ul.content li:hover .desc{opacity: 1;visibility: visible;}
.a_wrap{all: unset;display: contents;}

#section4 .section_bg{position: absolute;top: -223px;left: 50%;transform: translateX(-50%); z-index: -1;}

.bg_shape{pointer-events: none;user-select: none;-webkit-user-drag: none;}


/* 모바일 */
@media screen and (max-width: 1152px) {
.part4 ul.content li .desc .btn.pc{display: none;}

.bg4 .section_bg{height: 1600px;z-index: 4;top: -1200px;}
.bg4 .section_bg img:nth-child(1){position: absolute;left: 6%;top: -100px;}
.bg4 .section_bg img:nth-child(2){position: absolute;right: 200px;bottom: 50px;}

.part4 .title{text-align: center;}
.part4 .title p{font-size: clamp(2rem, 4vw, 3rem);}
.part4 .title h2{font-size: clamp(4rem, 8vw, 6rem);}
.part4 ul.content{flex-direction: column; margin-top: 50px;gap: 10px;}
.part4 ul.content li{max-width: 700px; width: 100%;height: auto;justify-content: start;background: #E38B10;padding: 30px;border-radius: 22px;gap: 30px;}
.part4 ul.content li::before{display: none;}
.part4 ul.content li .icon{max-width: 67px; min-width: 50px;}
.part4 ul.content li .icon img{width: 100%;}
.part4 ul.content li .desc{max-width: 490px; width: auto;height: auto;position: relative;opacity: 1;visibility: visible;padding: 0;top: 0;}
.part4 ul.content li .desc h5{font-size: clamp(1.4rem, 2vw, 1.8rem);}
.part4 ul.content li .desc p{font-size: clamp(1.2rem, 2vw, 1.6rem);line-height: 1.5;margin-bottom: 0;}

.part4 ul.content li:first-child:hover::before{width: 0;height: 0;}
.part4 ul.content li:hover .icon{opacity: 1;}

.a_wrap{all: unset;display: contents;cursor: pointer;}
}

@media screen and (max-width: 1149px){
  .main_bg{height: 750px;}
  .main_bg .bg_box{width: 100vw;height: 750px;}
  .main_bg .bg{bottom: -3vw;width: 100vw;}
  .main_bg .bg img{width: 100%;}
  .main_bg .bg_parts1{top: 70%;}
  .main_bg .bg_parts2{top: 60%;}
  .main_bg .bg_parts1 img, .main_bg .bg_parts2 img{width: 100%;}

  .visual{height: 70%;position: relative;z-index: 1000;}
  .visual .centerbox{position: relative;height: 100%;}
  .visual .visual_box{position: relative;top: 50%;transform: translateY(-50%); display: flex;flex-direction: column;align-items: center;}
  .visual .textbox{position: relative;left: auto;transform: none;display: flex;justify-content: center;top: 20px;}
  .visual .textbox .text{margin-bottom: 0;}
  .visual .textbox .text em{font-size: clamp(2rem, 4vw, 3rem);}
  .visual .textbox .text strong{font-size: clamp(5.7rem, 10vw, 8rem);}
  .visual .textbox .btn{position: absolute; display: inline-block; font-size: clamp(1.6rem, 2.5vw, 2rem);padding: 10px 20px;background: #fff;border-radius: 60px;font-weight: 600;top: 340%;}
  .visual figure{width: clamp(284px, 50vw, 400px);}
  .visual figure img{width: 100%;}

  .part1 .content ul li p span{display: inline;}
}

@media screen and (max-width: 1023px){
  :root {--swiper-theme-color: #E56718;}
  
  
  #section3{background: #F9F9F9;}
  #section3::before{display: none;}

  .part3 .swiper {overflow: visible;}
  .part3 .content ul.video{margin-bottom: 110px;}
  .part3 .swiper-pagination { top:auto !important; bottom: 100px !important; width:calc(100% - 100px); left: 50%; transform: translateX(-50%); }
}

@media screen and (max-width: 995px) {
  #section1{background: #F9F9F9;}

  .part1 .content ul.swiper-wrapper {display: flex;}
  .part1 .content ul{gap:0px}
  .part1 .content.swiper{position: relative;overflow: visible;}
  .part1 .swiper-pagination.mo{display: block;}
  .swiper-pagination-bullet{transition: .3s;}
}

/* 섹션2- 슬라이드 버튼 없어지고 프로그레스 바 추가 */

@media screen and (max-width: 700px) {
  .main_bg{height: 650px;}
  .main_bg .bg_box{width: 100vw;height: 650px;}
}

 @media screen and (max-width: 467px) {
  .section_title p span{display: inline;}
  .part2 .section_title p span{display: block;}
 }