@charset "utf-8";

/*main header s*/
.main #header {transition: all .3s ease-in-out;}
.main #header h1 {background: url(/images/common/logo_wt.png) no-repeat center/contain;}
.main #header {background-color: rgba(0,0,0,0);}
.main #header .gnb > li > a {color: #fff;}
#header .gnb > li:hover > a, #header .gnb > li.active > a {color: #047d42;}
.main #header .navLayerOpen{ bottom:41px;}

.main #header .navLayerOpen:before, #header .navLayerOpen:after {background-color: #fff;}
#header .lang_btn a {color: #fff;}
#header .lang_btn a.on, #header .lang_btn a:hover {border-bottom: none;}

/*main header scroll*/
.main #header.scroll {padding: 11px 0 10px 0; background-color: #fff;}
.main #header.scroll h1{background: url(/images/common/logo.png) no-repeat left center/ contain; position: absolute; left: 50px; top: 50%; transform: translateY(-50%);}
.main #header.scroll .gnb > li > a {color: inherit;}
.main #header.scroll .navLayerOpen {top: 50%; transform: translateY(-50%);}
.main #header.scroll .navLayerOpen:before, #header.scroll .navLayerOpen:after {background-color: #111;}
.main #header.scroll:after {display: none;}

.main #header.scroll .lang_btn {top: 50%;transform: translateY(-50%);}
.main #header.scroll .lang_btn a {color: #222222;}
.main #header.scroll .lang_btn a.on, .main #header.scroll .lang_btn a:hover {color: #047d42; border-bottom: 1px solid #047d42;}


/*main header e*/

/*main common s*/
.main {background-color: #000; color:#fff;}
.main #container { padding: 0; letter-spacing: normal; text-align: left;   font-stretch: normal; font-style: normal; font-weight: normal;}
.inner {max-width: 1571px; margin: 0 auto; position: relative;}

/*main common e*/

/*main section common s*/
.main .section {padding-right: 176px; padding-left: 176px; box-sizing: border-box;}
.big_tit {font-weight: 500; line-height: 1.57;}

.tit_box .tit { font-size: 31px;font-weight: 500;
line-height: 1.48; text-align: left; }
.tit_box .txt {  opacity: 0.6; font-size: 18px; line-height: 1.5; margin-top: 14px;}

.more_btn {margin-top: 49px;}
.more_btn .btn_txt {width: 68px; height: 22px; font-family: Saira; font-size: 14px; line-height: 1.57; color: #fff; }
.more_btn .btn_txt:after {content: ""; display: inline-block; width: 35px; height: 1px; background-color: #fff; vertical-align: middle; margin: 0 7px 0 10px;}
.more_btn .hexagon {  width: 8px; height: 5px; background: #fff; position: relative; display: inline-block; vertical-align: middle;}
.more_btn .hexagon:before, .more_btn .hexagon:after {content: ""; position: absolute;}
.more_btn .hexagon:before {  top: -2px; left: 0;  width: 0; height: 0;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 2px solid #fff;}
.more_btn .hexagon:after {bottom: -2px; left: 0; width: 0; height: 0;  border-left: 4px solid transparent;  border-right: 4px solid transparent;  border-top: 2px solid #fff;}



.sec_cont {position: relative;}

/*pageIndicatore s*/

.main .pageIndicator .num_box {position: absolute; left: -2px; top: 244px; color: #fff;}
.main .pageIndicator .num_box .bar {position: absolute; left: 0; top: 0; width: 3px; height: 144px; background-color: #3a9446; margin-top: 16px;}
.main .pageIndicator .num_box .number {font-size: 18px; line-height: 1.56; margin-left: 22px;}
.main .pageIndicator .num_box .number p.p_first{margin-left: 19px; position: relative;}
.main .pageIndicator .num_box .number p.p_first:after {content: ""; width: 1px;height: 19px; transform: rotate(45deg); display: block;background-color: #fff; position: absolute; top: 16px; right: -8px;}
.main .pageIndicator .num_box .number p.p_scd {margin-top: 15px;}
.main .pageIndicator .num_box .number span {display: inline-block;}

.main .pageIndicator .scroll {position: absolute; bottom: 4%; z-index: 1;}
.main .pageIndicator .scroll span{display: block; color: #fff;}
.main .pageIndicator .scroll span.txt {transform: rotate(-90deg); margin-left: -5px;}
.main .pageIndicator .scroll span.arrow {width: 13px; height: 34px; background: url("/images/main/scroll_arrow.png")no-repeat center/contain; margin: 44px auto 0;}
.main .pageIndicator .scroll span.arrow {animation: DownAni 1s infinite;}


/******** SB : 230322 *********/
/* MAIN : PUBLIC */
.main *{box-sizing:border-box;}
.main .m{ display:none;}
.main h1{ font-family:'saira', sans-serif; font-weight:600; line-height:.8; font-size:350px;}
.main .txtBox span{ font-size: 46px; font-weight: 500; line-height: 1; display: block;}
.main .txtBox p{ font-size: 17px; margin: 40px 0 55px; text-align: end;}
.main .txtBox a{ display:inline-block; padding:10px 38px; font-size:16px; font-family:'saira', sans-serif; border-radius:999px; border:1px solid #fff; color:#fff; cursor:pointer; transition:.3s ease; white-space:nowrap; align-self: end;}
.main .txtBox a:hover{ background:#fff; color:#000;}
.main .img-curtain-wrap {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  /*background-image:url(/images/main/main_bg_2.jpg)no-repeat center center / cover;*/
  box-sizing: border-box;
}
.main .img-curtain-wrap::after {
  /*content: '';*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1;
}
.img-curtain {
  position: relative;
  width: calc(25% + 1px);
  height: 100%;
  overflow: hidden;
  z-index: 2;
  box-sizing: border-box;
  margin-left: -1px;
}
.img-position {
  position: absolute;
  width: 400%;
  height: 100%;
  background:url(/images/main/main_bg_2.jpg)no-repeat center center / cover;
  box-sizing: border-box;
  clip-path:inset(0% 0% 100% 0%);
  transition-property: clip-path;
  transition-duration: .5s;
}
.img-curtain.img-curtain--1 .img-position {
  /*background-position: left 0 center;*/
  left: 0;
}
.img-curtain.img-curtain--2 .img-position {
  /*background-position: left 25% center;*/
  left: -100%;
}
.img-curtain.img-curtain--3 .img-position {
  /*background-position: left 50% center;*/
  left: -200%;
}
.img-curtain.img-curtain--4 .img-position {
  /*background-position: left 75% center;*/
  left: -300%;
}
.sceneC .img-curtain.img-curtain--1 .img-position {
  clip-path:inset(0% 0% 0% 0%);
  transition-delay: 0s;
}
.sceneC .img-curtain.img-curtain--2 .img-position {
  clip-path:inset(0% 0% 0% 0%);
  transition-delay: .1s;
}
.sceneC .img-curtain.img-curtain--3 .img-position {
  clip-path:inset(0% 0% 0% 0%);
  transition-delay: .2s;
}
.sceneC .img-curtain.img-curtain--4 .img-position {
  clip-path:inset(0% 0% 0% 0%);
  transition-delay: .3s;
}


.main .cover{ width:100%; height:100%; object-fit:cover;}
.main .p_center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main .f_center{ display: flex; align-items: center; justify-content: center;}

.main .mainConBox{ width:100%; height: calc(var(--vh, 1vh) * 100); position:relative; overflow:hidden;}

/* MAIN : AI */
.main #main_ai{ background:url(/images/main/main_bg_1.jpg)no-repeat center top / cover; padding-bottom:130px;}
.main #main_ai .cover{ opacity:0; transition:.3s ease;}
.main #main_ai .sub_bg{
  width:100%; height:100%; position:absolute; left:0; top:0;
  /*clip-path:inset(calc(50% - 3vw) 47.4% calc(50% - 2.6vw) 47.3%); */
  transition:.5s ease;
}
.main #main_ai .sub_bg .chip{ width: 5.1%; height: 0; padding-top: 5.4%; left: calc(50% - 0.6px); top: calc(50% - 4px); }
.main #main_ai .sub_bg .chip i{ background-color: #fff; position: absolute; transition: .5s ease;}
.main #main_ai .sub_bg .chip i.t{ left: 0; top: 0; width: 0; height: 3px;}
.main #main_ai .sub_bg .chip i.r{ right: 0; top: 0; width: 3px; height: 0;}
.main #main_ai .sub_bg .chip i.b{ right: 0; bottom: 0; width: 0; height: 3px;}
.main #main_ai .sub_bg .chip i.l{ left: 0; bottom: 0; width: 3px; height: 0;}

.main #main_ai.sceneA .cover{ opacity:1; transition:1s ease .7s;}
.main #main_ai.sceneA .sub_bg .chip i.t,
.main #main_ai.sceneA .sub_bg .chip i.b{ width: 100%;}
.main #main_ai.sceneA .sub_bg .chip i.r,
.main #main_ai.sceneA .sub_bg .chip i.l{ height: 100%;}

.main #main_ai .inner{ height:100%;}
/*.main #main_ai .inner h1{ margin-bottom:80px;}*/
.main #main_ai .inner .txtBox{ position:absolute; left:0;bottom:0; display: flex; justify-content: space-between; width: 100%; z-index: 5;}
.main #main_ai .inner .txtBox h1 {animation: fade-in 1s ease forwards;}
.main #main_ai .inner .txtBox .txt{display: flex; flex-direction: column; align-self: end; animation: fade-in 1s ease forwards; margin-right: 40px;}
.main #main_ai.sceneB .inner .txtBox .txt{ }
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* MAIN : CLOUD */
.main #main_cloud{ background:url(/images/main/main_bg_3.jpg)no-repeat center center / cover; padding:160px 0 99px;}
.main #main_cloud .sub_bg{ position:absolute; left:0; top:-13px; bottom:-13px; width:100%;}
.main #main_cloud .sub_bg .sub_bg_wrap{ width:100%; height:100%; clip-path:circle(0%); transition:.5s ease;}
.main #main_cloud .inner h1 {padding-right: 35px;}
.main #main_cloud .inner .txtBox{padding-right: 47px;}
.main #main_cloud .inner .txtBox > span{margin-right: -3px;}
/* .main #main_cloud .sub_bg .cloud{ padding:50px; box-sizing:content-box; top:52%;}
.main #main_cloud .sub_bg .cloud img{filter: drop-shadow(0px 0px 15px #249DE1); transform:translateY(100%); opacity:0; transition:1s ease; animation:cloud 2s ease infinite alternate-reverse; position:relative; top:0; max-width:inset;}
.main #main_cloud .sub_bg .cloud img:first-child{ width:210px; margin:15px -105px 0 0; transition-duration:.6s; animation-duration:4s; }
@keyframes cloud{
	0%{ filter: drop-shadow(0px 0px 15px #249DE1); transform:translateY(-3%);}
	100%{ filter: drop-shadow(0px 0px 40px #249DE1); transform:translateY(3%);}
}

.main #main_cloud.sceneA .sub_bg .cloud img{ transform:translateY(0%); opacity:1;}*/

.main #main_cloud .inner{ height:100%; text-align:right;}
.main #main_cloud .inner h1{ width:100%; font-size:250px;}
.main #main_cloud .inner .txtBox{ position:absolute; right:0;bottom:0;}
/******** //SB : 230322 *********/



/*sec3 s*/
#sec3 {background: url("/images/main/sec3_bg.png")no-repeat center/cover; background-attachment: fixed; min-height: 944px;}
#sec3 .inner {padding-top: 141px;}

#sec3 .big_tit { font-size: 142px; position: absolute; right: 0; top: -116px;}

@media ( max-width:1024px){
#sec3 {background-attachment: local;}
}


/*sec3 e*/

/*sec4 s*/

#sec4 {padding: 106px 176px 134px; box-sizing: border-box;}

#sec4 .bg{position: absolute; background: url("/images/main/sec4_bg.png")no-repeat right center/contain;width: 87.54%;  height: 525px; left: 42px; top: 61px;}

#sec4 .big_tit { /*width: 255px; height: 110px;*/  font-size: 70px; margin-left: -6px;}
#sec4 .tit_box .txt {margin-top: 0;}

#sec4 .img_box {width: 577px; height: 640px; position: absolute; right: 5%; width: 39.74%; height: 33.334vw; top: 50%; transform: translateY(-50%);}
#sec4 .img_box img {width: 100%;}
#sec4 .img_box .img {position: absolute;}
#sec4 .img_box .img1 {/*top: 44px;*/ top: 6.6%; left: 0px; width: 31.543%;}
#sec4 .img_box .img2 {top: 10%;/* right: 20px;*/ right: -5.5%; width: 15.6%; }
#sec4 .img_box .img3 {bottom: 0; /*left: 38px;*/ left: 6.7%; width: 22.01%;}
#sec4 .img_box .img4 {/*bottom:40px;*/ bottom: 6vw; right: 0;  width: 56.325%;}

@media ( min-width:1024px){
#sec4 .img_box .img1 {transform: translateX(calc(var(--mouse-x) * 0.01px)) translateY(calc(var(--mouse-y) * 0.01px));}
#sec4 .img_box .img2 {transform: translateX(calc(var(--mouse-x) * -0.01px)) translateY(calc(var(--mouse-y) * -0.01px));}
#sec4 .img_box .img3 {transform: translateX(calc(var(--mouse-x) * 0.02px)) translateY(calc(var(--mouse-y) * -0.02px));}
#sec4 .img_box .img4 {transform: translateX(calc(var(--mouse-x) * -0.05px)) translateY(calc(var(--mouse-y) * 0.05px));}
}


#sec4 .watch {margin-top: 488px;}
#sec4 .w_circle {display: inline-block; width: 15px; height: 15px; background-color: #ef5d39; margin-right: 9px; border-radius: 15px;}
#sec4 .watch span {display: inline-block; vertical-align: middle;}

/*sec4 e*/

/*sec5 s*/

#sec5 {padding-left: 0; padding-right: 0;}
#sec5 .cw1 {background-color: #1d2d3b; padding: 61px 176px 112px;}
#sec5 .cw1 .cont_box:after{content: ""; clear: both; display: block;}
#sec5 .cw1 .cont_box{display: flex; justify-content: space-between;}
#sec5 .cw1 .cont_box .cont {padding-top: 13px; border-top: 1px solid #fff; /*float: left; */width: 30.27%;}
#sec5 .cw1 .cont_box .ct2 {margin: 0 4.55%;}
/*#sec5 .cw1 .cont_box .ct3 {float: right;}*/

#sec5 .cw1 .cont_box .cont .tit {  font-size: 20px; font-weight: 300; line-height: 1.6; font-family: Saira;}
#sec5 .cw1 .cont_box .cont .c_box {margin-top: 18px;}
#sec5 .cw1 .cont_box .cont .c_box .txt {padding-top: 11px; font-weight: 100; font-size: 18px; line-height: 1.72;}

#sec5 .cw1 .cont_box .ct1 .c_box .more_btn {margin-top: 107px;}
#sec5 .cw1 .cont_box .ct2 .c_box {background: url("/images/main/sec5_img1.png")no-repeat center/cover; width: 100%; height: 163px;}
#sec5 .cw1 .cont_box .ct3 .c_box {background: url("/images/main/sec5_img2.png")no-repeat center/cover; width: 100%; height: 163px;}

#sec5 .cw1 .big_tit {  /*width: 811px; height: 126px;*/ font-size: 80px; line-height: 1.58; margin-top: 129px; text-align: center; font-family: Saira;}

#sec5 .cw2 {background-color: #fff; padding: 157px 176px 159px;}
#sec5 .cw2 .img_box { display: flex; justify-content: space-between;   align-items: center; background-color: #fff;}
#sec5 .cw2 .img_box .img {padding: 0 3%; box-sizing: border-box;}
.swiper-wrapper {   align-items: center; text-align: center;}



/*#sec5 .swiper-btn-wrap {opacity: 0;}*/
#sec5 .swiper-btn-wrap { text-align: right; margin-top: 50px;}
#sec5 .swiper-btn-wrap .swiper-arrow {width: 24px; height: 21px; background: url("/images/main/slide_arrow.png")no-repeat; background-position: 0 0; position: static; display: inline-block; margin: 0; vertical-align: middle;}
#sec5 .swiper-btn-wrap {opacity: 1;}
#sec5 .swiper-btn-wrap .swiper-arrow.swiper-button-next {background-position: right 0 top 0;}
#sec5 .swiper-btn-wrap .swiper-pagination {position: static; display: inline-block; font-size: 0; margin: 0 32px;}
#sec5 .swiper-btn-wrap .swiper-pagination span.swiper-pagination-current {color: #111; font-size: 16px; width: 10px; display: inline-block;}

#sec5 .swiper-btn-wrap {opacity: 1;}

/*sec5 e*/



/*animation*/
span.wow {display: inline-block;}

.animated {
  animation-duration: 0.8s;
  animation-delay:0.3s;
  animation-fill-mode: both;
}


@keyframes DownAni{
  0% {
    transform: translateY(0);
  }

    50% {
    transform: translateY(5px);
    }
  100% {
    transform: translateY(0);
  }
}

.DownAni {
  animation-name: DownAni;
}


@keyframes DownAni2{
  0% {
    transform: translateY(0);
  }

    50% {
    transform: translateY(20px);
    }
  100% {
    transform: translateY(0);

  }
}

.DownAni2 {
  animation-name: DownAni2;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(-50px);
  }

  100% {
    transform: translateX(0);
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}


@keyframes fadeIn {
  0% {
   opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes flicker {
   0% {
   opacity: 0;
  }

    20% {
        opacity: 0.8;
    }
    40% {
        opacity: 0.4;
    }

  100% {
 opacity: 1;
  }
}

.flicker {
  animation-name: flicker;
}



/*responsive*/


@media screen and (max-width:1400px){

    /*sec1 s*/
    #sec1 .big_tit {transform: none; right: -30px; left: auto;}
    #sec1 .bg {display: none;}
    /*sec1 e*/

    /*sec2 s*/
    #sec2 {margin-top: 100px;}
    #sec2 .big_tit {font-size: 170px; }
    /*sec2 e*/


    /*sec4 s*/
    #sec4 .bg {left: -10px; width: 100%; top: 156px;}
    #sec4 .img_box {right: 0px; width: 45%; height: 36vw;}




    /*sec4 e*/
}

@media screen and (max-width:1300px){


}

@media screen and (max-width:1200px){
    #sec5 .cw1 .big_tit {font-size: 64px;}
}

@media screen and (max-width:1100px){

    /*sec1 s*/
    #sec1 .big_tit {font-size: 320px; right: -25px;}
    #sec1 .inner {padding-top: 190px;}
    /*sec1 e*/

}


@media screen and (max-width:1000px){

    /*main header s*/

    .main #header {padding: 39px 0 5px;}
    #header .lang_btn {top: 44px; right: 84px;}

    .main #header.scroll h1 {left: 0;}
    .main #header.scroll {padding: 0; height: 56px;}
    .main #header.scroll .navLayerOpen {}



    /*main header e*/



    .main .section {padding-left: 0; padding-right: 0;}
    .inner {padding-left: 30px; padding-right: 30px; box-sizing: border-box;}



	/******** SB : 230322 *********/
	/* MAIN : PUBLIC */
	.main .m{ display:block;}
	.main h1{ font-size:80px !important; margin-bottom:40px !important;}
	.main .txtBox span{ font-size: 23px; }
	.main .txtBox p{ font-size: 16px; margin: 30px 0 ;}
	.main .txtBox a{ padding:7px 20px;}
	.main .mainConBox{}

	/* MAIN : AI */
	.main #main_ai{ background:url(/images/main/main_bg_1.jpg)no-repeat center center / cover; padding-bottom:70px;}
	.main #main_ai .sub_bg{
    /*clip-path: inset(44.6vh calc(50% - 4.7vh) 45.3vh calc(50% - 4.8vh));*/
  }
	.main #main_ai .sub_bg .chip{ width:9.4vh; height:10.1vh; padding-top:0;}
	.main #main_ai .inner h1{}
	.main #main_ai .inner .txtBox{ left:30px; width: calc(100% - 60px);}
	.main #main_ai.sceneA .cover{ transition-delay:0s;}
  .main #main_ai .inner .txtBox .txt{margin-right: 0;}

	/* MAIN : CLOUD */
	.main #main_cloud{padding:70px 0;}
	.main #main_cloud .sub_bg .cloud img{ width:215px;}
	.main #main_cloud .sub_bg .cloud img:first-child{ width:194px; margin:0 -102px 0px -7px;}
	.main #main_cloud .inner{ display:flex; flex-direction:column; justify-content:flex-end;}
	.main #main_cloud .inner h1{ width:100%; }
	.main #main_cloud .inner .txtBox{ position:static; white-space:nowrap;}

  .main #main_cloud .inner h1 {padding-right: 0;}
  .main #main_cloud .inner .txtBox{padding-right: 0;}
  .main #main_cloud .inner .txtBox > span{margin-right: 0;}
	/******** //SB : 230322 *********/










    /*sec1 s*/

    #sec1 .big_tit {font-size: 320px; right: 4px; top: -180px;}
    #sec1 .inner {padding-top: 0;}
    /*sec1 e*/


    /*sec3 s*/
    #sec3 .big_tit {right: 30px; font-size: 130px; top: -106px;}
    /*sec3 e*/


    /*sec4 s*/

    #sec4 {padding: 106px 0 134px;}
       #sec4 .img_box { width: 45%; height: 50vw;}
    #sec4 .img_box .img1 {width: 35%;}
    #sec4 .img_box .img2 {width: 22%;}
    #sec4 .img_box .img3 {width: 25%;}
    #sec4 .img_box .img4 {width: 60%; right: -15px; bottom: 3%;}
    #sec4 .bg {left: -6px;}

    /*sec4 e*/

    /*sec5 s*/

    #sec5 .cw1 { padding: 61px 0px 112px;}
    #sec5 .cw2 { padding: 157px 0px 159px;}

    /*sec5 e*/
}

@media screen and (max-width:806px){
	/* MAIN : CLOUD */
	.main #main_cloud .sub_bg .cloud{ padding: 0;}
	.main #main_cloud .sub_bg .cloud img:first-child{ width: 191px;}
}

@media screen and (max-width:768px){


    /*main common s*/
    .tit_box .tit {font-size: 23px; }
    .tit_box .txt {font-size: 16px;}
    /*main common e*/

    /*sec1 s*/
    #sec1 {padding: 110px 0 0;}
    #sec1 .inner {padding-bottom: 300px;}
    #sec1 .big_tit{position: static; font-size: 230px; text-align: center;}
    #sec1 .img {margin-top: -50px;}

    #sec1 .tit_box {position: absolute; bottom: 67px;}
    /*sec1 e*/

    /*sec2 s*/

    #sec2 {margin-top: 0; background-size: 177%; background-position: center top 33%; padding-bottom: 0;}
    #sec2 .inner {padding-top: 0;}
    #sec2 .sec_cont {padding-bottom: 259px;}
    #sec2 .big_tit {font-size: 140px; margin: 0; text-align: center;}
    #sec2 .tit_box {position: absolute; bottom: 113px;}
    #sec2 .img_box {margin-top: 120px; }
    #sec2 .bg {width: 70%; height: 70vw; top: 41%; transform: translateX(-50%) translateY(-55%);}

    #sec2 .img_box .img1 img { width: 61.35%;}
     #sec2 .img_box .img2 img { width: 43.56%;}

    /*sec2 e*/

    /*sec3 s*/
    #sec3 .big_tit {font-size: 120px;}
    #sec3 {min-height: 498px; height: 800px;}
    #sec3 .inner {height: 100%; padding-top: 0;}
    #sec3 .tit_box {position: absolute; bottom: 57px;}
    /*sec3 e*/

    /*sec4 s*/
    #sec4 {padding: 100px 0 100px;}
    #sec4 .big_tit {font-size: 62px;}
    #sec4 .watch {margin-top: 440px;}
    #sec4 .bg {width: 90%; left: 50%; transform: translateX(-50%);}
    #sec4 .img_box {width: 63%; transform: translateY(-34%); height: 55vw;}
    #sec4 .img_box .img1 {width: 30%; top: 0; left: 23%;}
    #sec4 .img_box .img2 {width: 18%; top: 20px;}
    #sec4 .img_box .img3 {width: 23%; left: 0;}
    #sec4 .img_box .img4 {width: 52%;}

    /*sec4 e*/

    /*sec5 s*/
    #sec5 .cw1 .cont_box {display: block !important; }
    #sec5 .cw1 .cont_box .cont { float: none; width: 100%; padding-bottom: 100px;}
    #sec5 .cw1 .cont_box .ct2 {margin: 0;}
    #sec5 .cw1 .big_tit {margin-top: 0px; font-size: 42px;}

    #sec5 .cw2 {padding: 100px 0 120px;}
    #sec5 .cw2 .img_box img {display: block; margin: 0 auto;}

    /*sec5 6*/
}

@media screen and (max-width:626px){
	/* MAIN : CLOUD */
	.main #main_cloud .sub_bg .cloud{ padding: 0; )
	.main #main_cloud .sub_bg .cloud img:first-child { width: 170px; margin: 32px 0 0 0;}
	.main #main_cloud .sub_bg .cloud img:nth-child(2) { width: 225px; margin: 14px 0 0 -95px;}
}

@media screen and (max-width:600px){
	/* MAIN : CLOUD */
	.main #main_cloud .sub_bg .cloud{ width:320px; padding: 0; )
	.main #main_cloud .sub_bg .cloud img{ width: 179px;}
	.main #main_cloud .sub_bg .cloud img:first-child { width: 170px; margin: 0 -79px 0px 0px;}
	.main #main_cloud .sub_bg .cloud img:nth-child(2) { width: 182px;}

}


@media screen and (max-width:500px){

    /*header*/
        #header .lang_btn {top: 44px;}

    .more_btn {margin-top: 30px;}
    .tit_box .txt {margin-top: 7px;}

    /*sec1 s*/
    #sec1 .big_tit { font-size: 115px;}
    #sec1 .img {margin-top: -20px;}
    #sec1 .inner {padding-bottom: 260px;}
    /*sec1 e*/

    /*sec2 s*/
    #sec2 { background-size: 220%; background-position: center top 4%;}
    #sec2 .img_box {margin-top: 65px;}
    #sec2 .big_tit {font-size: 94px;}
    #sec2 .bg {background: url(/images/main/sec2_bg2_m.png)no-repeat center/contain; transform: translateX(-50%) translateY(-65%); }
    #sec2 .img_box .img2 {margin-top: -17px;}

    #sec2 .img_box .img1 img {width: 54.67%;}
     #sec2 .img_box .img2 img {width: 31.34%;}

    /*sec2 e*/

    /*sec3 s*/
    #sec3 .big_tit {font-size: 56px; top: -47px;}
    #sec3 {height: 498px;}

    /*sec3 e*/
    /*sec4 s*/
    #sec4 {padding: 60px 0 60px;}
    #sec4 .big_tit {font-size: 56px;}
    #sec4 .tit_box {margin-top: 8px;}
    #sec4 .tit_box .txt span {display: block;}
    #sec4 .watch {margin-top: 314px;}
    #sec4 .bg {height: 285px; top: 137px; width: 83.5%;background: url(/images/main/sec4_bg_m.png)no-repeat center/contain;}

    #sec4 .img_box {transform: translateY(-23%)}

    #sec4 .img_box .img1 {width: 33.87%;}
    #sec4 .img_box .img2 {width: 16.935%; top: 11px;}
    #sec4 .img_box .img3 {width: 23.285%; left: -25px;}
    #sec4 .img_box .img4 {right: 0; bottom: 0; width: 55.03%;}

    /*sec4 e*/
    /*sec5 s*/
    #sec5 .cw1 .cont_box .ct1 .c_box .more_btn {margin-top: 70px;}
    #sec5 .cw1 .big_tit {font-size: 30px;}
    #sec5 .cw2 {padding: 61px 0 120px;}
    #sec5 .cw1 .cont_box .ct2 .c_box {background: url(/images/main/sec5_img1_m.png)no-repeat center/contain;}
     #sec5 .cw1 .cont_box .ct3 .c_box {background: url(/images/main/sec5_img2_m.png)no-repeat center/contain;}

    #sec5 .cw2 .img_box .img {padding: 0;}

    /*sec5 e*/
	#sec5 .cw1{ padding-bottom: 50px;}
	#sec5 .cw1 .cont_box .cont{ padding-top: 57px; padding-bottom: 20px;}
	#sec5 .cw1 .cont_box .cont:last-child{ border-bottom: 1px solid #fff;}
	#sec5 .cw1 .big_tit{ padding-top: 50px;}
	#sec5 .cw2{ padding: 50px 0;}

}

@media screen and (max-width:360px){

	/* MAIN : CLOUD */
	.main #main_cloud .sub_bg .cloud{ width: 235px; top: 43%;}
	.main #main_cloud .sub_bg .cloud img:first-child{ width: 142px;}
	.main #main_cloud .sub_bg .cloud img:last-child{ width: 182px;}

}