body {overflow-y: hidden;}
body::-webkit-scrollbar{ display:none;}
.container_1420 {width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 40px;}
.br_pc {display: none;}

#main {height: 100%; display: flex; position: relative;}
#main.main_mo {display: none; height: 100%; position: relative;}
.box {width: 100%; height: 100%;}
.box:nth-child(1) {flex: 2100px 0 0; background: url(/img/main1.jpg) no-repeat left bottom; background-size: cover; min-width: 130%;}
.box:nth-child(2) {flex: 1600px 0 0; background-color: #f2f2f2; min-width: 88%;}
.box:nth-child(3) {flex: 1600px 0 0; background-color: #f2f2f2; min-width: 88%; padding-right: 300px;}
.box:nth-child(4) {flex: 1600px 0 0; background-color: #f2f2f2; min-width: 88%;}
.box:nth-child(5) {flex: 1600px 0 0; background-color: #f2f2f2; min-width: 88%;}
.box:nth-child(6) {flex: 1100px 0 0; background-color: #222222; min-width: 30%;}

.txt_wrap {overflow: hidden;}
.box1_txt {position: absolute; top: 50%; left: 40px; transform: translateY(-50%); color: #fff; overflow: hidden; line-height: 6.5rem;}

.box1_txt .mont {font-size: 100px; font-weight: 700; letter-spacing: -4px;}
.box1_txt .core {font-size: 30px; margin-top: 60px;}
.move_txt {
  font-size: 240px; opacity: 0.1; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: #fff;
  cursor: default;
}
.move_txt .agency {position: absolute; bottom: 0px; left: -100%; /* max-height: 230px; */}
.move_txt .creative {position: absolute; top: 50%; right: -140%; transform: translate(-50%, -50%);}

.vertical_line .line1 {width: 1px; height: 100%; background: #fff; opacity: 0.1; position: absolute; left: calc(37% - 10px); bottom: -100%; transform: translateX(-50%);}
.vertical_line .line2 {width: 1px; height: 100%; background: #fff; opacity: 0.1; position: absolute; right: 10%; top: -100%; transform: translateX(-50%);}

.box2_wrap {width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.box2_txt {text-align: center; flex: 50% 0 0;}
.box2_img {flex: 50% 0 0; height: 80vh; position: relative;}
.box2_img img {/* width: 100%; */ height: 100%;}
.box2_img img.heart_ani {position: absolute; top: 0; left: 0;}
.box2_img img.heart_ani.heart_ani1 {-webkit-animation-name: bounceball; animation-name: bounceball; animation-duration: 1.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}
.box2_img img.heart_ani.heart_ani2 {-webkit-animation-name: bounceball2; animation-name: bounceball2; animation-duration: 3s; animation-iteration-count: infinite; animation-fill-mode: forwards;}
.box2_img img.heart_ani.heart_ani3 {-webkit-animation-name: bounceball2; animation-name: bounceball2; animation-duration: 3s; animation-iteration-count: infinite; animation-fill-mode: forwards;}
.box2_img img.heart_ani.heart_ani4 {-webkit-animation-name: bounceball; animation-name: bounceball; animation-duration: 3.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}

.box2_txt .mont {font-size: 75px; font-weight: 500;}
.box2_txt .mont.bold {font-weight: 700;}
.box2_txt .serif {font-size: 120px;}
.box2_txt .core {font-size: 20px; margin-top: 60px; line-height: 2rem;}

.box3_wrap {position: relative; width: 100%; height: 100%;overflow-y: hidden;}
.box3_circle {position: relative; left: 50%; bottom: -52%; transform: translateX(-50%);  width: 50vw; height: 50vw; border-radius: 50%; background: linear-gradient(135deg, #514ecf, #450093); overflow: hidden; cursor: pointer; z-index: 1;}
.box3_circle img {width: 100%; opacity: 0; transition: all 0.2s;}
.box3_circle:hover img {opacity: 1;}
.box3_circle:hover {background: #f2f2f2;}
.box3_txt {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.box3_txt .mont {font-size: 140px; left: 50%; top: 12%; position: absolute; transform: translateX(-50%); z-index: 1; transition: all 1s;}
.box3_txt .serif {font-size: 130px; display: inline-block; left: 12%; top: 35%; position: relative; transition: all 1s; z-index: 1;}
.box3_txt .memory_line {border: 1px solid #111; position: absolute; bottom: 20px; width: 100%;}
.box3_txt .core {font-size: 20px; text-align: center; right: 4vw; top: 65%; position: absolute; mix-blend-mode: difference; color: #fff; z-index: 1; transition: all 2.5s;}
.icecream {position: absolute; bottom: -100%; left: 50%; transform: translate(-50%); z-index: 1; transition: all 1s;}

.box4_wrap {display: flex; width: 100%; height: 100%;}
.box4_lt {flex: 70% 0 0; display: flex; flex-direction: column; justify-content: center; padding-top: 100px;}
.box4_lt .core {font-size: 20px; margin-bottom: 60px; padding-left: 100px;}
.box4_rt {flex: 30% 0 0; position: relative;}
.box4_rt .rotate {position: absolute; bottom: 0; right: -50%; transform: translate(-50%, -50%) rotate(-90deg);}
.box4_rt .serif {font-size: 130px; letter-spacing: 6px; margin-bottom: 40px;}
.box4_rt .game {font-size: 100px; line-height: 90%;}
.box4_img .develop {height: 100%;}
.box4_img .code_wrap {position: relative;}
.box4_img .code_wrap .code {position: absolute; right: 24.2%; top: 30.1%;}
.box4_img .code_wrap .light {width: 45.3%;}
.box4_img {position: relative;}
.box4_img .ball {position: absolute;}
.box4_img .ball1 {left: -10%; bottom: 30%; -webkit-animation-name: bounceball; animation-name: bounceball; animation-duration: 1.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}
.box4_img .ball2 {bottom: 50%; left: -7%; -webkit-animation-name: bounceball2; animation-name: bounceball2; animation-duration: 1.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}
.box4_img .ball3 {left: 20%; top: 20%; -webkit-animation-name: bounceball; animation-name: bounceball; animation-duration: 1.5s; animation-iteration-count: infinite; animation-fill-mode: forwards;}

@keyframes bounceball {

  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
     -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes bounceball2 {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
     -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }
}

@keyframes bounceball3 {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
     -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.box5_wrap {width: 100%; height: 100%;}
.box5_txt {background: url(/img/sec5.jpg) no-repeat center center; width: 100%; height: 100%; position: relative;}
.box5_txt .rotate {position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); transition: all 0.6s; color: #fff; transform-origin: left;}
.box5_txt .serif {font-size: 120px; font-weight: 900; font-family: 'S-CoreDream-4Regular';}
.box5_txt .mont {font-size: 75px; position: relative; transition: all 0.1s; transform-origin: left;}
.box5_txt .mont.after {font-size: 75px; position: relative; transition: all 0.1s; transform-origin: left; z-index: -1; position: absolute; top: 0; right: 0; color: transparent; -webkit-text-stroke: 1px; -webkit-text-stroke-color: #fff; margin-left: 0 !important;}
.box5_txt .mont span {font-weight: 400; margin-right: 15px;}
.box5_txt .core {font-size: 20px; color: #fff; position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);}

.box6_wrap {padding: 5.5vw 8vw; width: 100%; height: 100%;}
.box6_txt {color: #fff; transition: all 1s; height: 100%;}
.box6_txt .mont {font-size: 110px;}
.box6_txt .mont span {color: #222; background: linear-gradient(to right, #fa526a, #ee3c8f); padding: 10px 15px; display: inline-block; height: 100px; vertical-align: text-top;  line-height: 100px;}
.box6_txt div.core {font-size: 20px; margin-top: 45px;}
.box6_flex {height: 100%; 
  display: flex; display: -ms-flexbox; 
  flex-direction: column; -webkit-box-orient: vertical; -ms-flex-direction: column;
  justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify;
}
.box6_wrap .inquiry > p {width: max-content; display: inline-flex; border-bottom: 2px solid #fff; padding-bottom: 20px;}
.box6_wrap .inquiry > p span {display: inline;}
.box6_wrap .inquiry > p::after {content: ""; display: block; border-bottom: 2px solid #fff; margin-top: 20px; clear: both;}
.box6_wrap .txt_ani_wrap.btn_inquiry {display: inline-table; overflow-y: auto;}
.box6_wrap .txt_ani_wrap.btn_inquiry span {display: inline-block; transition: all 0.2s;}
.txt_ani_wrap > div.cursor {opacity: 1 !important;}
.box6 .inquiry {z-index: 98;}


@media screen and (max-width: 1720px) { .box3_circle {bottom: -56%;} }
@media screen and (max-width: 1600px) { .box3_circle {width: 54vw;} }
@media screen and (max-width: 1500px) { .box3_circle {bottom: -60%;} }

@media screen and (max-width: 1420px) {
  .box:nth-child(1) {flex: 150% 0 0;}
  .box:nth-child(2) {flex: 120% 0 0;}
  .box:nth-child(3) {flex: 120% 0 0;}
  .box:nth-child(4) {flex: 120% 0 0;}
  .box:nth-child(5) {flex: 120% 0 0;}
  .box:nth-child(6) {flex: 60% 0 0;}
  .core {font-size: 17px !important;}
  .box1_txt .mont {font-size: 90px;}
  .box1_txt .core {font-size: 25px !important; margin-top: 60px;}
  .move_txt {font-size: 200px;}
  .box2_txt .mont {font-size: 60px;}
  .box2_txt .serif {font-size: 80px;}
  .box2_txt .core {margin-top: 50px;}
  .box3_circle {width: 60vw; height: 60vw; bottom: -60%;}
  .box3_txt .mont {font-size: 120px;}
  .box3_txt .serif {font-size: 100px; left: 17%;}
  .box4_rt .serif {font-size: 110px; margin-bottom: 30px;}
  .box4_rt .game {font-size: 90px;}
  .box5_txt .serif {font-size: 140px;}
  .box5_txt .mont {font-size: 80px;}
  .box5_txt .mont::after {top: -8px; left: 75px;}
  .box6_txt .inquiry {font-size: 45px !important;}
  .box6_txt .mont {font-size: 100px;}
}

@media screen and (max-width: 1200px) { .box3_circle {bottom: -65%;} }

@media screen and (max-width: 1024px) {
  .core {font-size: 15px !important;}
  .box1_txt .mont {font-size: 80px;}
  .box1_txt .core {font-size: 20px !important; margin-top: 50px;}
  .move_txt {font-size: 170px;}
  .icecream {width: 280px;}
  .box3_txt .mont {font-size: 100px;}
  .box3_txt .serif {font-size: 80px;}
  .box3_circle {width: 70vw; height: 70vw;}
  .box4_rt .serif {font-size: 60px; margin-bottom: 20px;}
  .box4_rt .game {font-size: 70px;}
  .box4_rt .rotate {padding-top: 100px;}
}

@media screen and (max-width: 768px) {
  body {overflow-y: visible; overflow-x: hidden; width: 100%;}
  #header .logo .logo2 {opacity: 0;}
  #main {height: auto; display: block;}
  .box {width: 100vw; height: 100vh; padding: 50px 35px; overflow: hidden;}
  .box:nth-child(1) {flex: none; min-width: auto; position: relative;}
  .box:nth-child(2) {flex: none; min-width: auto;}
  .box:nth-child(3) {flex: none; min-width: auto; padding: 50px 0;}
  .box:nth-child(4) {flex: none; min-width: auto;}
  .box:nth-child(5) {flex: none; min-width: auto;}
  .box:nth-child(6) {flex: none; min-width: auto;}
  .box1_txt {bottom: auto; top: 50%;}
  .box1_txt .mont {font-size: 60px;}
  .move_txt {font-size: 130px;}
  .box2_wrap {flex-direction: column;}
  .box2_img {width: 65%; height: auto; margin: 0 auto;}
  .box2_img img {width: 100%;}
  .move_txt .creative {top: 37%;}
  .box2_txt {flex: 40% 0 0;}
  .box2_txt .mont {font-size: 50px;}
  .box2_txt .core {margin-top: 20px}
  .box2_txt .core {line-height: 1.75rem;}
  .box3_wrap {position: relative; overflow-x: hidden;}
  .box3_circle {width: 110%; height: 100%; bottom: -50%;}
  .box3_circle img {position: absolute; bottom: 0; height: 100%; left: 50%; transform: translateX(-50%); width: 140%;}
  .box3_txt .mont {font-size: 70px;}
  .box3_txt .serif {font-size: 60px; left: 0;}
  .box3_txt .core {right: auto; left: 50%; transform: translateX(-50%); width: 100%;}
  .box3_txt .memory_line {bottom: 7px;}
  .box4_wrap {flex-direction: column;}
  .box4_rt .rotate {right: auto; left: 50%; transform: translateX(-50%);}
  .box5_txt .serif {font-size: 100px;}
  .box5_txt .mont {font-size: 43px;}
  .box5_txt .mont.after {font-size: 43px;}
  .box5_txt .core {width: 100%; text-align: center;}
  .box6_wrap {padding: 0;}
  .box4_img {width: 100%; margin: 0 auto; height: 100%;}
  .box4_rt .serif {line-height: 1.5rem;}
  .box4_rt .rotate {padding-top: 0; bottom: auto; top: 0;}
  .box6_txt {transform: none; opacity: 1;}
  .box6_txt .mont {font-size: 80px;}
  .txt_ani_wrap > a {width: 45%;}
  .box4_img .ball1 {width: 19px; left: -5%; bottom: 12%;}
  .box4_img .ball2 {width: 15px;}
  .box4_img .ball3 {width: 25px;}
  #scroll_btn {display: none;}
  .box6_txt div.core.ani {margin-top: 0;}
  .box4_img .develop {width: 100%;}
  .box4_rt {margin-top: 50px;}
  .box4_lt .core {padding-left: 10vw;}

  .fork__modal_container{
    justify-content: center;
    align-items: center;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    height: max-content;
    max-width: 90%;
    max-height: 90vh;
  }
}

@media screen and (max-width: 560px) {
  .box1_txt {line-height: normal;}
  .br_pc {display: block;}
  .core {font-size: 14px !important;}
  .box1_txt .mont {font-size: 40px;}
  .move_txt {font-size: 80px;}
  .box2_img {width: 90%;}
  .box3_txt .serif {font-size: 45px; left: 50%; transform: translateX(-50%);}
  .box3_txt .core {font-size: 12px !important; top: 50%; padding: 0 30px;}
  .box3_txt .core br {display: none;}
  .box3_circle {height: 85%; bottom: -60%; width: 120%;}
/*   .box3_circle img {left: 50%; transform: translateX(-50%); width: 140%;} */
  .icecream {width: 200px;}
  .box4_rt .serif {font-size: 50px;}
  .box4_rt .game {font-size: 60px;}
  .box4_lt {flex: 60% 0 0;}
  .box4_rt {flex: auto; margin-top: 100px;}
  .box4_lt .core {margin-bottom: 40px;}
  .box5_txt .core {padding: 0 20px; font-size: 13px !important;}
  .box5_txt .mont {font-size: 30px;}
  .box5_txt .mont.after {font-size: 30px;}
  .box6_txt .mont {font-size: 60px;}
  .box6_txt .mont span {height: 50px; line-height: 50px;}
  .box6 {padding: 100px 35px;}
  .box6 .txt_ani_wrap > a {width: 180px;}
  .box6_txt div.core {margin-top: 15px;}
  .box6_txt .inquiry {font-size: 36px !important;}
  .box6_wrap .inquiry > p {padding-bottom: 10px;}
}

@media screen and (max-width: 414px) {
.box6_txt .inquiry {font-size: 24px !important;}
}