.visual{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#444961;
  background-image: url(../img/original-content-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation-name: view-visual;
  animation-duration: 1s;
  animation-delay: 0s;
}
@keyframes view-visual{
  from{opacity: 0;}
  to{opacity: 1;}
}
.visual h2 {
  position: relative;
  color: #fff;
  font-size: 80px;
  font-family: 'CookieRun-Regular';
}

.visual img {
  position: absolute;
  width: 10vw;
  height: auto;
}

.comet {
  width: 10vw;
  top: 5%;
  left: 5%;
}

.oneP {
  width: 8vw;
  top: 15%;
  left: 40%;
}

.twoP {
  width: 15vw;;
  top: 65%;
  left: 40%;
}

.threeP {
  width: 5vw;
  bottom: 5%;
  right: 30%;
}

.fourP {
  width: 4vw;
  height: 8vh;
  left: 20%;
  bottom: 20%;
  cursor: pointer;
}

.fiveP {
  width: 3vw;
  top: 15%;
  left: 50%;
  cursor: pointer;
}

.sixP {
  width: 8vw;
  right: 15%;
  bottom: 40%;
  cursor: pointer;
}

.sevenP {
  width: 2.5vw;
  left: 5%;
  bottom: 7%;
}

.eightP {
  width: 18vw;;
  top: 40%;
  left: 3%;
}

.nineP {
  width: 10vw;
  top: 30%;
  right: 30%;
}

.tenP {
  width: 7vw;
  right: 10%;
  bottom: 20%;
}

.sun {
  width: 25vw;
  top: 0%;
  right: 2%;
}

/* 섹션 웹 */
.section.portfolio_web{
  margin-top: 150px;
  padding-bottom: 150px;
  opacity: 0;
}
.section.portfolio_web .center_box{
  width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.section.portfolio_web .center_box>h1{
  font-size: 40px;
  font-family: 'CookieRun-Regular';
}
.section.portfolio_web .w_btn{
  margin-top: 40px;
}
.section.portfolio_web .w_btn > p{
  text-align: center;
  margin-bottom: 20px;
  font-family: 'CookieRun-Regular';
  font-size: 20px;
  background-image: linear-gradient(transparent 70%, #c8ccff 30%);
}
.section.portfolio_web .w_btn ul{
  display: flex;
  justify-content: center;
  font-size: 25px;
  font-family: 'CookieRun-Regular';
}
.section.portfolio_web .w_btn ul li{
  padding: 0 20px;
}
.section.portfolio_web .w_btn ul li a{
  font-family: 'CookieRun-Regular';
  transition: all 1s;
}
.section.portfolio_web .w_btn ul li.active a{
  background-image: linear-gradient(transparent 70%, #F8CD07 30%);
}

.section.portfolio_web .web_box{
  margin-top: 80px;
  width: 1400px;
  height: 2300px;
  position: relative;
  overflow: hidden;
  transition: 0.5s;
}
.section.portfolio_web .web_box > ul{
  width: 4200px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
}
.section.portfolio_web .web_box > ul > li{
  width: 1400px;
  float: left;
  display: hidden;
}
.section.portfolio_web .web_box > ul > li > ul > li{
  width: 100%;
  opacity: 0;
  height: 500px;
  margin-bottom: 100px;
  display: flex;
  position: relative;
}
.section.portfolio_web .web_box > ul > li > ul > li:last-child{
  margin-bottom: 0;
}
.section.portfolio_web .web_box .pofol4:hover .getting_ready{
  opacity: 0;
}
.section.portfolio_web .web_box .pofol4 .getting_ready{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba( 255, 255, 255, 0.4 );
  backdrop-filter: blur( 10px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  font-family: 'CookieRun-Regular';
}
.section.portfolio_web .web_box .pofol4 .getting_ready h2{
  font-size: 50px;
}
.section.portfolio_web .web_box .pofol4 .getting_ready p{
  font-size: 18px;
  margin-top: 10px;
}

.section.portfolio_web .web_box .preview{
  width: 600px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* 나중에 삭제 */
  /* height: 100%;
  background-color:aquamarine; */
}
.section.portfolio_web .web_box .pc-preview{display: flex; align-items: center; justify-content: center;}
.section.portfolio_web .web_box .m-preview{display: none; width: 100%; height: 100%;}
.section.portfolio_web .web_box .m-preview img{object-fit: cover; height: 100%;}

.section.portfolio_web .web_box .pc-preview.onlyM .laptop.mobile{width: 30%; bottom: auto; right: auto;}

.section.portfolio_web .web_box .preview .preview_explain{position: absolute; top: 3px; right: 0;}
.section.portfolio_web .web_box .preview .preview_explain p{position: relative; font-family: 'CookieRun-Regular'; font-size: 18px;}
.section.portfolio_web .web_box .preview .preview_explain p:after{content: ''; position: absolute; width: 28px;height: 28px; background-image:url(../img/arrow_explain.png); background-position: center; background-repeat: no-repeat; background-size: contain; top: 0; right: 100%; }

.section.portfolio_web .web_box .detail{
  width: 800px;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 나중에 삭제 */
  /* background-color: azure;
  height: 100%; */
}
.section.portfolio_web .web_box .detail .box{
  margin-top: 20px;
}
.section.portfolio_web .web_box .detail h2{
  font-size: 30px;
}
.section.portfolio_web .web_box .detail p{
  font-size: 16px;
  line-height: 25px;
  /* font-weight: bold; */
}
.section.portfolio_web .web_box .detail p span{
  color: #494846;
  width: 130px;
  float: left;
  font-weight: bold;
}
.section.portfolio_web .web_box .detail p span.last{
  height: 30px;
}

.section.portfolio_web .web_box .btn{
  margin-top: 50px;
}
.section.portfolio_web .web_box .btn button{
  border: none;
  background-color: transparent;
  margin-right: 20px;
}
.section.portfolio_web .web_box .btn button a{
  width: 200px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #E4A9A8;
  text-align: center;
  font-weight: bold;
  float: left;
  transition: all 0.3s;
}
.section.portfolio_web .web_box .pc-btn button a:hover{
  border: 1px solid #7a5b5a;
  background-color: #E4A9A8;
  color: #fff;
}
.section.portfolio_web .web_box .btn button.m a{
  border: 1px solid #63ad6d;
}
.section.portfolio_web .web_box .pc-btn button.m a:hover{
  border: 1px solid #38633d;
  background-color: #63ad6d;
  color: #fff;
}
.section.portfolio_web .web_box .btn.now button a{
  width: 250px;
  border: 1px solid #6400ff;
}
.section.portfolio_web .web_box .btn.now button a:hover{
  width: 250px;
  border: 1px solid #4400aa;
  background-color: #bc90ff;
  color: #fff;
}

.section.portfolio_web .web_box .m-btn{display: none;}

.section.portfolio_web .web_box > ul > li > ul > li:nth-child(even) .preview{
  order: 2;
}
.section.portfolio_web .web_box > ul > li > ul > li:nth-child(even) .detail{
  order: 1;
}
.laptop{
  display: inline-block;
  position: relative;
  text-align: center;
  width: 80%;
}
.laptop.mobile{
  width: 200px;
}
.laptop.mobile .laptop-inner{
  border-radius: 10px;
  height: 92%;
  top: 50%;
}
.laptop.mobile{
  width: 20%;
  position: absolute;
  bottom: 40px;
  right: 50px;
}
.laptop .laptop-inner{
  display: inline-block;
  height: 68%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 37%;
  transform: translate(-50%, -50%) !important;
  width: 94%;
}

.laptop .laptop-inner img{
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate3d(0px, 0px, 0px);
  transition: 5s ease-in-out;
  width: 100%
}

.map .laptop .laptop-inner img{ width: 128%;}


.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  z-index: 1;
}
.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}



/* 반응형 */
@media screen and (max-width:1600px){
  

}

@media screen and (max-width:1440px){
  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 1200px;}
  .section.portfolio_web .web_box > ul{width: 3840px;}
  .section.portfolio_web .web_box .preview .preview_explain { top: 28px;}
  .laptop.mobile{width: 120px;}
}

@media screen and (max-width:1280px){
  .visual h2{font-size: 65px;}
  .visual img{height: 8vw; width: 8vw;}
  .visual .fourP, .visual .fiveP, .visual .sixP{width: 15vw; height: 15vw;}
  .fiveP{top: 13%; left: auto; right: 14%; }
  .sixP {bottom: 20%; right: 20%;}
  .tenP{right: 7%; bottom: 16%;}
  .comet{top: 22%; left: 12%;}

  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 1000px;}
  .section.portfolio_web .web_box > ul > li > ul > li {height: 430px;}
  .laptop.mobile{width: 100px;}
}

@media screen and (max-width:1024px){
  .tenP, .eightP, .nineP{display: none;}
  
  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 900px;}
  .section.portfolio_web .web_box .preview .preview_explain p {font-size: 17px;}
  .section.portfolio_web .web_box > ul > li > ul > li {height: 400px;}
  .ocean{height: 52px;}
  
  .laptop.mobile{width: 90px;}
}

@media screen and (max-width:960px){
  .pc-preview, .pc-btn, .ocean{display: none !important;}
  .m-preview, .m-btn{display: block !important;}
  .section.portfolio_web .web_box > ul > li > ul > li{height: 300px; gap: 20px;}
  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 760px;}
  .section.portfolio_web .web_box .preview{width: 240px;}
  .section.portfolio_web .web_box .detail h2{font-size: 26px;}
  .section.portfolio_web .web_box .detail p{font-size: 14px;}
  .section.portfolio_web .web_box .btn button a{width: 180px; font-size: 16px; line-height: 45px; height: 45px;}
  .section.portfolio_web .web_box > ul > li > ul > li:nth-child(even) .detail{order: 2;}
  .section.portfolio_web .web_box > ul > li > ul > li:nth-child(even) .preview{order: 1;}
  .section.portfolio_web .web_box .detail{width: 500px; justify-content: left;}
  .section.portfolio_web .web_box .btn button.m{display: none;}
  .section.portfolio_web .web_box .btn button.ok-m a{border: 1px solid #63ad6d !important;}
}

@media screen and (max-width:769px){
  .visual h2{font-size: 50px;}
  .visual .fourP, .visual .fiveP, .visual .sixP {width: 20vw; height: 20vw;}
  .fiveP {top: 26%; right: 25%;}

  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 500px;}
  .section.portfolio_web .w_btn ul {font-size: 20px;}
  .section.portfolio_web .w_btn > p {font-size: 18px;}
  .section.portfolio_web .web_box > ul > li > ul > li{flex-direction: column; height: auto;}
  .section.portfolio_web .web_box .preview{width: 100%; height: 300px;}
  .section.portfolio_web .web_box .detail{width: 100%;}

  .section.portfolio_web,
  .section.portfolio_web .web_box > ul > li > ul > li{opacity: 1;}

}

@media screen and (max-width:560px){
  .visual h2{font-size: 40px;}
  .visual {height: 500px;}
  .sun{display: none;}

  .section.portfolio_web .center_box, .section.portfolio_web .web_box, .section.portfolio_web .web_box > ul > li{width: 450px;}
  .section.portfolio_web .w_btn > p{font-size: 16px;}
  .section.portfolio_web .w_btn ul li{padding:0 8px;}
  .section.portfolio_web .web_box .prctice .detail p span,
  .section.portfolio_web .web_box .portfolio .detail p span{width: 80px;}
  .section.portfolio_web .web_box .detail p span.last{height: 52px;}
  .section.portfolio_web .web_box .detail .detail_box{width: 100%;}
  .section.portfolio_web .web_box .btn button{width: 100%; margin: 0;}
  .section.portfolio_web .web_box .btn button a{width: 99%;}
  .section.portfolio_web .web_box .btn.now button a,
  .section.portfolio_web .web_box .btn.now button a:hover{width: 99%;}
}

@media screen and (max-width:460px){
  .visual h2{font-size: 32px;}
  .visual .fourP, .visual .fiveP, .visual .sixP{display: none;}
  .visual{height: 400px;}
  .visual img{height: 12vw; width: 12vw;}
  .oneP {top: 27%; left: auto; right: 10%;}
  .threeP{bottom: 10%; right: 17%;}

  .section.portfolio_web .center_box>h1{font-size: 30px;}
  .section.portfolio_web .center_box{width: 100vw; padding:0 20px;}
  .section.portfolio_web .web_box{width: 100%; margin: 80px 20px 0;}
  .section.portfolio_web .web_box > ul > li{width: 100vw;}
  .section.portfolio_web {margin-top: 100px; padding-bottom: 120px;}

  .section.portfolio_web .web_box .detail p{display: flex; flex-direction: column; margin-bottom: 10px;}
  .section.portfolio_web .web_box .detail p span.last{height: auto; margin-bottom: 0px;}

  .section.portfolio_web .w_btn{width: 100%;}
  .section.portfolio_web .w_btn > p{display: none;}
  .section.portfolio_web .w_btn ul{flex-direction: column; gap: 5px;}
  .section.portfolio_web .w_btn ul i{display: none;}
  .section.portfolio_web .w_btn ul li a{text-align: center; height: 50px; border: 2px solid #4400aa ; line-height: 50px;}
  .section.portfolio_web .w_btn ul li.active a{background-color: #4400aa; color: #fff; background-image: none;}

  .section.portfolio_web .web_box .preview {height: 230px;}
}

@media screen and (max-width:360px){
  .visual{height: 340px;}
  .visual h2{font-size: 30px;}
  .section.portfolio_web .w_btn ul {font-size: 18px;}
  .section.portfolio_web .w_btn ul li a {height: 40px; line-height: 40px;}
  .section.portfolio_web .web_box{margin: 50px 20px 0;}
  .section.portfolio_web .web_box .preview{height: 200px;}
  .section.portfolio_web .web_box .detail h2{font-size: 24px;}
  .section.portfolio_web .web_box .detail .box{margin-top: 15px;}
  .section.portfolio_web .web_box .detail p {margin-bottom: 5px;}
  .section.portfolio_web .web_box .btn{margin-bottom: 30px;}
  .section.portfolio_web .web_box .btn button a {font-size: 14px; height: 40px; line-height: 40px;}
  .section.portfolio_web .web_box > ul > li > ul > li {margin-bottom: 50px;}
}