/*common*/
.dfbox {display: flex;}
.main {color: #222;}
.tits .line {width: 1px; height: 196px; background: #222; margin: 0 auto 50px;}
.tits .circle {width: 18px; height: 18px; background: #ef4d35; border-radius: 50%; margin: 0 auto;}
.tits .big_tit {font-size: 75px; text-align: center;}
.tits .tit {font-size: 55px; text-align: center; margin-top: 35px;}


.main .gif_banner {height: auto; width: 100%; background: #fff; position: relative;}
.main .gif_banner .imgbox {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main .gif_banner .sp_btn {width: 30px; height: 30px; border: 1px solid #ef4d35; border-radius: 50%; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); cursor: pointer;}
.main .gif_banner .sp_btn .play {position: relative; width: 100%; height: 100%; display: none; left: 3.5px;}
.main .gif_banner .sp_btn .play::after {content: ''; width: 0; height: 0; border: 6.5px solid transparent; border-left: 9px solid #ef4d35; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main .gif_banner .sp_btn .pause {width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; gap: 2px;}
.main .gif_banner .sp_btn .pause .lines {width: 2px; height: 11px; background: #ef4d35;}
.main .gif_banner .sp_btn.stop .play {display: block;}
.main .gif_banner .sp_btn.stop .pause {display: none;}
.main .gif_banner video {width: 100%; height: 100%; display: block; margin: 0 auto; object-fit: cover;}
.main .gif_banner .video_wrap {position: relative; width: 100%; height: 0; padding-top: 56.25%;}
.main .gif_banner .video_wrap iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


.main .sect01 {text-align: center;}
.main .sect01 h2 {margin: 50px 0 40px; font-size: 55px; line-height: 1.36;}
.main .sect01 p {line-height: 1.538;}
.main .sect01 ul {justify-content: center;}
.main .sect01 ul li {width: 380px; height: 380px; border-radius: 50%; position: relative; font-size: 35px; color: #fff; z-index: 1;}
.main .sect01 ul li:nth-child(1) {background-color: #f9a51b; left: 30px;}
.main .sect01 ul li:nth-child(2) {background: url(../img/main/mainSect01_img.png) no-repeat; background-size: cover; z-index: 2;}
.main .sect01 ul li:nth-child(3) {background-color: #ef4d35; right: 30px;}
.main .sect01 ul li p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}


.main .sect02 {margin-bottom: 265px;}
.main .sect02 ul li {align-items: center;}
.main .sect02 ul li.reverse {flex-direction: row-reverse;}
.main .sect02 ul li .imgWrap, .sect02 ul li .txtbox {width: 50%;}
.main .sect02 ul li.reverse .imgWrap {justify-content: end;}
.main .sect02 ul li .imgbox {border-radius: 50px; overflow: hidden; width: 100%; position: relative; left: -50px;}
.main .sect02 ul li.reverse .imgbox {left: auto; right: -50px;}
.main .sect02 ul li .txtbox h3 {font-size: 55px; margin-bottom: 40px;}
.main .sect02 ul li .txtbox p {line-height: 1.636;}
.main .sect02 ul li .txtbox a {padding-top: 40px; margin-top: 45px; display: block; padding-right: 15px; position: relative; width: fit-content ;}
.main .sect02 ul li .txtbox a:hover {color: #ef4d35;}
.main .sect02 ul li .txtbox a::before {content: ''; width: 7px; height: 7px; background: #ef4d35; border-radius: 50%; position: absolute; right: 0; bottom: 0; transform: translateY(-50%); z-index: 2;}
.main .sect02 ul li .txtbox a::after {content: ''; width: 15px; height: 15px; background: #ff8370; border-radius: 50%; position: absolute; right: -4px; bottom: 0; opacity: 0;}
.main .sect02 ul li .txtbox a:hover::after {animation: fadeOut 1.5s infinite;}
.main .sect02 ul li .txtbox a span.line1 {width: 300vw; height: 1px; background: #ced4da; opacity: .5; position: absolute; top: 0; left: 0; transform: translateX(-50%); z-index: -1;}
.main .sect02 ul li .txtbox a span.line2 {display: inline-block; width: 27px; height: 1px; background: #ced4da; margin-left: 15px; vertical-align: middle;}


.main .sect03 {background-color: #f0f2f4; padding: 110px 0 150px;}
.main .sect03 .sect03_1 {width: 95%; max-width: 1800px; height: 800px; margin: 165px auto 0; background: url(../img/main/sect3_img.jpg) no-repeat center; background-size: cover; border-radius: 100px; overflow: hidden;}
.main .sect03 .sect03_1 .inner_container {height: 100%;}
.main .sect03 .sect03_1 ul {align-items: center; height: 100%; position: relative;}
.main .sect03 .sect03_1 ul::after {content: ''; width: 1px; height: 300px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.main .sect03 .sect03_1 ul li {width: 50%; color: #fff; text-align: center;}
.main .sect03 .sect03_1 ul li .imgbox {display: flex; justify-content: center; align-items: end; height: 90px;}
.main .sect03 .sect03_1 ul li p {line-height: 1.3; margin: 45px 0 30px;}
.main .sect03 .sect03_1 ul li button {width: 280px; height: 70px; line-height: 70px; text-align: center; border-radius: 40px; border: 0; color: #fff;}
.main .sect03 .sect03_1 ul li.service button {background-color: #f9a51b;}
.main .sect03 .sect03_1 ul li.newsletter button {background-color: #ef4d35;}
.main .sect03 .sect03_1 ul li.service button:hover {background-color: #e29312;}
.main .sect03 .sect03_1 ul li.newsletter button:hover {background-color: #db4129;}



@media (max-width:1600px) {
  /*common*/
  .tits .big_tit {font-size: 4.695vw;}
  .tits .tit {font-size: 3.580vw;}

  .main .sect01 h2 {font-size: 3.420vw;}
  .main .sect01 ul li {font-size: 2.180vw; width: 320px; height: 320px;}

  .main .sect02 {margin-bottom: 17.5vw;}
  .main .sect02 ul li .imgbox {left: 0;}
  .main .sect02 ul li.reverse .imgbox {right: 0;}
  .main .sect02 ul li .txtbox h3 {font-size: 3.580vw;}

  .main .sect03 {padding: 6.3vw 0 7.5vw;}
  .main .sect03 .sect03_1 {margin: 7.95vw auto 0; height: 700px;}
}
@media (max-width:1024px) {
  /*common*/
  .tits .line {margin: 0 auto 40px; height: 145px;}
  .tits .circle {width: 14px; height: 14px;}
  .tits .big_tit {font-size: 4.900vw;}
  .tits .tit {font-size: 4.180vw;}

/*   .main .gif_banner video {width: 70%;} */
	.main .gif_banner .sp_btn {bottom: 25px;}

  .main .sect01 ul li {width: 28vw; height: 28vw; font-size: 2.580vw;}
  .main .sect01 h2 {font-size: 3.820vw; margin: 40px 0 30px;}

  .main .sect02 {margin-bottom: 15.5vw;}
  .main .sect02 ul li {align-items: start;}
  .main .sect02 ul li .txtbox h3 {font-size: 3.455vw; margin-bottom: 30px;}
  .main .sect02 ul li .txtbox a {padding-top: 30px; margin-top: 35px;}
  .main .sect02 ul li .imgbox {border-radius: 40px;}

  .main .sect03 {padding: 9.1vw 0 12vw;}
  .main .sect03 .sect03_1 {height: 600px; margin: 12.9vw auto 0; border-radius: 80px;}
}
@media (max-width:767px) {
  /*common*/
  .tits .line {margin: 0 auto 35px; height: 115px;}
  .tits .big_tit {font-size: 6.5vw;}
  .tits .tit {font-size: 5.180vw; margin-top: 25px;}

/*   .main .gif_banner {height: calc(100vh - 70px);} */
	.main .gif_banner .sp_btn {bottom: 20px;}

  .main .sect01 .symbol img {width: 13%;}
  .main .sect01 h2 {font-size: 4.628vw; word-break: keep-all; white-space: wrap;}
  .main .sect01 p {word-break: keep-all; white-space: wrap;}

  .main .sect02 {margin-bottom: 14.1vw;}
  .main .sect02 ul li .txtbox p {word-break: keep-all; white-space: wrap;}
  .main .sect03 .sect03_1 {height: 550px; border-radius: 60px;}
  .main .sect03 .sect03_1 ul li .imgbox img {width: 18%;}
  .main .sect03 .sect03_1 ul li p {word-break: keep-all; white-space: wrap;}
  .main .sect03 .sect03_1 ul li p br {display: none;}
  .main .sect03 .sect03_1 ul li button {width: 260px; height: 60px; line-height: 60px;}
  .main .sect03 .sect03_1 ul li .imgbox {height: 65px;}
}

@media (max-width:480px) {
  /*common*/
  .tits .line {margin: 0 auto 20px; height: 85px;}
  .tits .circle {width: 10px; height: 10px;}
  .tits .big_tit {font-size: 10vw;}
  .tits .tit {font-size: 8.828vw; word-break: keep-all; white-space: wrap; line-height: 1.2;}

  .main .sect01 .symbol img {width: 20%;}
  .main .sect01 h2 {font-size: 8.828vw; margin: 30px 0 20px;}
  .main .sect01 h2 br {display: none;}
  .main .sect01 p {word-break: keep-all; white-space: wrap;}
  .main .sect01 p br {display: none;}
  .main .sect01 ul {flex-direction: column; align-items: center;}
  .main .sect01 ul li {width: 90vw; height: 90vw; font-size: 6.180vw;}
  .main .sect01 ul li p br {display: block;}
  .main .sect01 ul li:nth-child(1) {left: 0; bottom: -40px;}
  .main .sect01 ul li:nth-child(3) {right: 0; top: -40px;}

  .main .sect02 ul li, .main .sect02 ul li.reverse {flex-direction: column; gap: 35px;}
  .main .sect02 ul li .imgWrap, .sect02 ul li .txtbox {width: 100%;}
  .main .sect02 ul li .txtbox {padding-left: 0;}
  .main .sect02 ul li .txtbox h3 {margin-bottom: 15px; font-size: 8.828vw;}
  .main .sect02 ul li .txtbox a span.line1 {display: none;}
  .main .sect02 ul li .txtbox a {padding-top: 0; margin-top: 25px;}
  .main .sect02 ul li .imgbox {border-radius: 30px;}
  .main .sect03 .sect03_1 ul li .imgbox {height: 57px;}

  .main .sect03 .sect03_1 {border-radius: 50px; height: 600px;}
  .main .sect03 .sect03_1 ul {flex-direction: column; justify-content: center; gap: 50px;}
  .main .sect03 .sect03_1 ul::after {width: 80%; height: 1px; top: 52%;}
  .main .sect03 .sect03_1 ul li {width: 100%;}
  .main .sect03 .sect03_1 ul li p {margin: 30px 0 20px;}
  .main .sect03 .sect03_1 ul li button {width: 210px; height: 50px; line-height: 50px;}
  .main .sect03 .sect03_1 ul li .imgbox img {width: 15%;}
}



@keyframes fadeOut {
  0% {opacity: 0}
  50% {opacity: 0.3; transform: scale(1); transform-origin: center}
  100% {opacity: 0; transform: scale(1); transform-origin: center}
}


/*수정 이다혜 2024-01-26*/

#main_visual {position:relative; height:55.72vw; overflow:hidden;}
.video {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
}

.video .video-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 56.22%;
}

.video .video-container iframe {
  z-index: 1;
  top: -3vw;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events:none;
}

.main .gif_banner .sp_btn{
	z-index:2;
}

.main .sect01{padding:calc(135px - 3vw) 0 135px;}
.main .gif_banner .sp_btn{bottom:calc(40px + 3vw);}

@media (max-width:1600px) {
	.main .sect01{padding:calc(7.05vw - 3vw) 0 7.05vw;}
}

@media (max-width:1024px) {
	.main .sect01{padding:calc(11vw - 3vw) 0 11vw;}
	.main .gif_banner .sp_btn{bottom:calc(25px + 3vw);}
}

@media (max-width:767px) {
	.main .gif_banner .sp_btn{bottom:calc(20px + 3vw);}
}

@media (max-width:480px) {
	.main .sect01{padding:calc(16.1vw - 3vw) 0 16.1vw;}
}