#main {font-size:17px}


div.in {width:90%; border:1px solid #7e7e7e; margin:0 auto; margin-top:80px; box-sizing:border-box; padding:80px; border-radius:80px }


@media all and (max-width:1400px) {
	 div.in {padding:40px; border-radius:40px} 
}
@media all and (max-width:900px) {
	 div.in {width:100%; border:none; margin:0 auto; padding:80px 4%; border-radius:0 } 
}

.main_vi {  background-color:#fff; width:100%; display:inline-block; height:100%; position:relative; overflow:hidden; margin-bottom:-5px}
.main_vi iframe {min-width:calc(100% + 200px); min-height:115vh; border:1px solid red;  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }


@media all and (max-width:1400px) {
  .main_vi iframe {min-width:calc(100% + 100%);    }

}
 @media all and (max-width:900px) {
	 .main_vi iframe {min-width:calc(100% + 200%);    }

}
  @media all and (max-width:500px) {
	 .main_vi iframe {min-width:calc(100% + 300%);    }

}

@media all and (max-height:800px) {
	 .main_vi iframe {min-height:200vh; }
}

@media all and (max-height:500px) {
  .main_vi iframe {min-height:300vh; }
}


/*갤럭시폴드*/
@media all and (max-height:653px) and (max-width:280px) {
    .main_vi iframe {min-width:calc(100% + 350%);  }
 
}

.vi_items {width:80%; margin-left:10%;  margin-top:120px; height:calc(100% - 300px); position:relative;   }
.vi_items p {position:absolute}
.vi_items p:nth-child(1) {left:3%; top:3%}
.vi_items p:nth-child(2) {right:0; bottom:7%}
.vi_items p:nth-child(3) {top:50%; left:50%; transform: translate(-50%,  -47%);}
 p.vi_scroll {position:absolute; bottom:5%; left:50%; transform: translate(-50%, 0);}

@media all and (max-width:900px) {
		.vi_items {width:94%; margin-left:3%;  top:50%; transform: translate(0, -53%); margin-top:0; height:53vh;   }

		.vi_items p:nth-child(1) {left:0; top:0; z-index:99; width:45%}

		.vi_items p:nth-child(2) {right:0; bottom:0; z-index:99; width:60%; text-align:right}
		.vi_items p:nth-child(3) {width:85%; top:50%; left:50%; transform: translate(-50%,  -60%);}
		 p.vi_scroll { bottom:3%; }

}

.side_nav {width:27px; left:1.5vw; top:36vh; position:fixed; z-index:9999}
.side_nav * {transition: all 0.3s ease-out;}
.side_nav li {width:100%;  height:27px; margin-bottom:30px; background-color:#ddd; background:url('/common/img/main_btn_icon.png') no-repeat center;  box-sizing:border-box; display:flex; align-items:center;  border:1px solid #fff; border-radius:50%}
.side_nav.scroll li { background:url('/common/img/main_btn_icon_b.png') no-repeat center; border:1px solid rgba(0,0,0,.5);  }
.side_nav li.current {  background:url('/common/img/main_btn_icon_ov.png') no-repeat center; border:1px solid #fff;   }
.side_nav.scroll li.current {  border:1px solid rgba(0,0,0,.5);  }
.side_nav li a {width:100%; height:100%; display:inline-block}

 
@media all and (max-width:900px) {
	.side_nav {display:none;  left:3%; top:50%; transform: translate(0, -50%);  }
 
}
 
h3.tit {font-size:5em; font-family: 'Sawarabi Mincho', serif;  font-weight:500; line-height:1.1}
h3.tit span {font-weight:500; }
 


#section02 {background:url('/common/img/cloud_bg3.png') no-repeat bottom; box-sizing:border-box; padding-top:10vw;  background-size:cover; height:70vw;}
#section02 .h3_ani {font-size:3vw; font-style:italic;  }
#section02 .h3_ani:after {width:19vw;   border-bottom:4px solid #333; content:''; position:absolute; bottom:0; left:50%; height:2px; display:inline-block; transform: translate(-50%, 0);}

#section02 .h3_ani span { font-family: 'Sawarabi Mincho', serif; font-weight:400}
#section02 div.text {font-size:1.3em; line-height:1.8; margin-top:80px;   } 

 
 
 

@media all and (max-width:900px) {
		#section02 { padding:100px 0 50px 0;   height:auto;}
		#section02 div.text {font-size:.9em; line-height:1.7; margin-top:40px  } 

		#section02 .h3_ani {font-size:9vw;  }
		#section02 .h3_ani:after {width:50vw;   border-bottom:3px solid #333;   }

}


#section03 div.in {margin-top:0}
#section03 div.in .h3_ani_wrap {margin-bottom:40px}

#section03 div.in .flex_box {margin-top:20px; align-items:Center}
#section03 div.in .flex_box .frame_box {width:36%;    padding-bottom:42%;  position:relative}
#section03 div.in .flex_box .frame_box iframe {position:absolute; left:0; top:0; border-radius:50px;}


.right_div {width:59%; margin-left:auto;}
.right_div ul {width:100%; display:flex;  justify-content:space-between;   margin-top:28px;}
.right_div ul li { line-height:0;  position:relative;   border:1px solid #7e7e7e;  border-radius:40px; overflow:hidden; box-sizing:border-box; width:50%;  cursor:pointer}
.right_div ul li:nth-child(1) {  margin-right:3.7%}
.right_div ul li:nth-child(2) { margin-left:3.7%}

.right_div ul li div.img {width:100%; padding-bottom:95%; display:inline-block;  background-color:#f9f9f9; text-align:center; position:relative;  overflow:hidden}
.right_div ul li div.img img {position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); max-width:100%; max-height:100%} 
.right_div ul li div.text {width:100%; line-height:1.3; display:flex; border-top:1px solid #555; box-sizing:border-box; padding:25px 20px; align-items:Center; font-size:1.2em;}
.right_div ul li div.text h4 { margin-bottom:3px}
.right_div ul li a { margin-left:auto;  background-color:var(--main_c); display:inline-block;  color:#fff; padding:11px 20px; border-radius:50px; font-size:.9em; font-family: 'Lexend', sans-serif;}

#section03 div.in .flex_box .right_div .roll_bn {margin-top:0 !important}


@media all and (max-width:900px) {
			#section03 div.in .h3_ani_wrap  {margin-bottom:20px}
			#section03 div.in .flex_box { margin-top:0}
 			#section03 div.in .flex_box .frame_box {width:70%; padding-bottom:72.5vw;   margin:20px auto 13px auto }


			#section03 .right_div > div  {width:100%;   text-align:center}
			#section03 .right_div > div a {justify-content:center }
			.right_div ul {margin-top:20px}
			.right_div ul li { border-radius:30px; }
			.right_div ul li:nth-child(1) {  margin-right:2%}
			.right_div ul li:nth-child(2) { margin-left:2%}

			.right_div {width:100%; margin-left:auto;}
			.right_div ul li div.text {font-size:.9em; flex-wrap:wrap}
			.right_div ul li a {width:100%; margin-top:10px; text-align:center}			.right_div ul li div.img img {width:80%} 
  
}



.h3_box {border:1px solid #999; background-color:#fff; border-radius:50px; box-sizing:border-box; padding:30px; text-align:center}

#section04 .in {background-color:#fdfbee; display:flex; flex-wrap:wrap}
#section04 .in img.border-img {width:100%; border:1px solid #7e7e7e }

#section04 .box:nth-child(1) {width:65%}
#section04 .box:nth-child(2) {width:32%; margin-left:auto;   transform: rotate(-5deg); }
#section04 .box:nth-child(3) {width:100%; display:flex; /*  justify-content:space-between;  */margin-top:-20px; position:relative; z-index:9;  }
 
.border-img-box {width:31.2%; padding-bottom:31.2%; display:inline-block; border-radius:50px; border:1px solid #7e7e7e; box-sizing:border-box; background-size:cover !important; position:relative}
.border-img-box a {width:100%; height:100%; position:absolute; z-index:99; }

.border-img {border-radius:50px}
.swiper { margin-top:20px;   width: 100%; height: 100%;}
.swiper-slide { width:70%; margin-right:5%  }
.swiper-slide .border-img-box {width:100%; padding-bottom:100%} 
    


@media all and (min-width:900px) {
  .swiper {display:none}
  .border-img-box:last-child {margin-right:0;}
  .border-img-box {margin-right:3.3%}

}

@media all and (max-width:900px) {
		.h3_box { border-radius:30px; padding:20px}

		#section04 .box:nth-child(2) {width:100%; margin-top:10px;  transform: rotate(0); }
		#section04 .box:nth-child(1) {width:100%}
 		#section04 .box:nth-child(3) {display:none}
  
		.border-img {border-radius:30px}
		.border-img-box {border-radius:30px}

}



#section05 .in {padding:0; height:46vw; background:url('/common/img/main_img1.png') no-repeat center; background-size:cover; position:Relative; margin-bottom:0}
.t {background-color:#fff; color:#333; display:inline-block; border-radius:50px; padding:18px 15px; width:auto; font-size:1.9em}
#section05 .in > div {position:absolute; right:17%; top:7vw; background:url('/common/img/bubble_t.png') no-repeat; background-size:100%;}
#section05 .in > div p {background:none}
#section05 .in > div p:last-child {margin-left:80px; margin-right:5px; margin-top:-25px}
#section05 .in p.t.last {position:Absolute; bottom:10vw; left:30%; padding-left:25px; padding-right:25px}

#section05 a {position:absolute;   width:35%; height:50%; display:inline-block; top:50%; left:50%; transform: translate(-50%, -50%);   }



@media all and (max-width:900px) {
   #section05 .in { display:none  }
   #section05 .in p {display:none; }
 
}

.roll_bn {width:100%; background-color:var(--main_c);   white-space:nowrap; overflow:hidden; padding:10px 0; margin-bottom:10px; box-sizing:border-box; position:relative}



.body-content__rollig-text {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

.rolling-text__text {
    animation: textLoop 10s linear infinite;
    font-size:1.3em;
    padding-right:30px;
	color:#fff; font-family: 'Lexend', sans-serif; 
	
}
.rolling-text__text span {font-family: 'Sawarabi Mincho', serif;}

@keyframes textLoop {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

a.more_btn {position:relative; z-index:999; color:var(--main_c); display:flex; align-items:center; font-size:1em;  font-family: 'Lexend', sans-serif; }
a.more_btn img {width:auto; margin-right:10px}
a.more_btn svg {fill:var(--main_c);  width:23px; height:23px; margin-right:8px}

@media all and (max-width:900px) {
	.rolling-text__text {font-size:1em}
 
}


[data-text-ani]{
  overflow: hidden;
}

.word{
  white-space: nowrap;
}

.char {
  display: inline-block;
  animation: textAni var(--duration) var(--delay) cubic-bezier(1,0,1,1)  reverse backwards;
}

@keyframes textAni {
  to {
    transform: translateY(100%);
  }

}