@charset "utf-8";
@import url("https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
		/* Material Icons Outlined*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
@keyframes arrow {
    0% {transform: translateX(10px);}
    50% {transform: translateX(0%);}
    100% {transform: translateX(10px);}
}
body {position: relative; height: 100%; font-family: 'Noto Sans KR', sans-serif; background-color: rgb(233, 233, 233);}
* {margin: 0; padding: 0; text-decoration: none;
/* outline: solid red 1px; */
}
li{list-style: none;}
button{background: none; border: none; font-size: 19px; font-weight: 600; color:#2997ff;}
.head{display: flex; align-items: center; position: fixed; width: 100%; height: 50px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); z-index: 1000;  font-weight: 300; border-bottom: solid rgb(207, 207, 207) 1px;}
.mheadtitle{display: none;}
.logo{display: none; width: 60px; height: 40px;}
.headinner{display: flex; justify-content: space-between; align-items: center; width: 1200px; margin: 0 auto;}
.pro13{font-size: 1.2em; font-weight:500; color: black;}
.nav{display: flex; align-items: center; font-size: 13px;}
.nav a{color: rgb(10, 10, 10);}
.nav .gray{color: rgb(185, 185, 185);}
.nav li:last-child a{color: white;}
.nav a::after{ content: "";
    width: 1px;
    height: 11px;
    background: rgb(0, 0, 0);
    display: inline-block;
    margin: 0 20px;}
    .nav li:last-child a::after{display: none;}
.buy{display: block; width: 65px; height: 27px; line-height: 27px; background-color: #147ce5; text-align: center; border-radius: 980px;}
.testsec{display: none; overflow: hidden;}
.mnav{display: none;}
.head button{display: none;}


.s1{position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: rgb(233, 233, 233);}
.sec1textbox{display: flex; flex-direction: column; justify-content:end; margin: 0 auto; align-items: center; width: 70%; height: 100vh; text-align: center; position: relative;}
.sec1textbox p{font-size: 0.8vw; margin: 3% 0 10% 0; font-weight: 400; color: gray; position: relative; z-index: 2;}
h1{font-size: 3.5vw; font-weight: bolder; line-height: 3.7vw; position: relative; z-index: 2;}
.sec1bg{position: absolute; width: 16vw; top: 0; left: 8%; z-index: 1;}
.sec1bg2{position: absolute; width: 29vw; top: 20%; left: 30%; z-index: 1;}
.sec1bg3{position: absolute; width: 29vw; bottom: 0; left: -5%; z-index: 1;}
.sec1bg4{position: absolute; width: 16vw; top: -15%; right: 15%; z-index: 1;}
.sec1bg5{position: absolute; width: 16vw; bottom: 0%; right: 5%; z-index: 1;}
.sec1bg6{position: absolute; width: 16vw; top: -45%; left: 30%; z-index: 1;}
.sec1bg7{position: absolute; width: 16vw; top: -15%; right: -8%; z-index: 1;}
.sec1bg8{position: absolute; width: 16vw; top: -45%; left: 50%; z-index: 1;}
.sec1bg9{position: absolute; width: 29vw; top: 33%; left: -23%; z-index: 1;}
.msec1bg{display: none;}
.msec1bg2{display: none;}
.msec1bg3{display: none;}
.msec1bg4{display: none;}
.msec1bg6{display: none;}
.msec1bg7{display: none;}




.s2{width: 100%; overflow: hidden;}
.inner{width: 1300px; margin: 0 auto; padding: 100px 0;}
.sec2box1{overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    width: 100%; height: 500px; background: #d3d2d8; border-radius: 25px; padding-top: 15px; z-index: 10; margin: 20px 0;}
.sec2box1 h2{font-size: 30px; font-weight: bolder; line-height: 33px;}
.sec2box1 h3{font-size: 20px; color: gray; font-weight: 400;}
.sec2box1 h4{font-size: 19px; color: rgb(160, 160, 160); font-weight: 500; padding-top: 150px;}
.sec2box1 img{width: 800px;}
.sec2box1:hover img,.sec2box1:hover h3,.sec2box1:hover h2{filter: blur(14px); transition: all 0.5s;}
.sec2box1 button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%;}
.sec2box1:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.arrow{font-size: 20px; padding-top: 1px;}
.box1plus{position: absolute; top: 0; background-color: black; width: 100%; height: 100%; z-index: 100;
            display: flex; flex-direction: column; text-align: center;}
.close{position: absolute; top: 6%; right: 3%; font-size: 30px; color: white;}
.box1plus p{color: gray; font-size: 20px; font-weight: 400; padding: 16px 0;}
.s1link{color: #2997ff; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 500; margin-top: 50px; animation: arrow 2s infinite;}


.sec3{display: flex;}
.sec3box1{overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center;
    width: 50%; height: 500px; background: #ffffff; border-radius: 25px; padding-top: 15px; z-index: 10; margin: 0 10px 0 0;}
.sec3box1 h3{font-size: 20px; color: gray; font-weight: 400;}
.sec3box1 h2{font-size: 30px; font-weight: bolder; line-height: 33px; margin-top: 10px;}
.sec3boximg{position: relative; top: -60px; margin-left: 280px; width: 300px; height: 510px; background: url(../img/pjB/sec3box1.png) no-repeat;}
.sec3boximg video{position: absolute; bottom: 170px; right: 90px;}
.sec3box1img{position: absolute; bottom: 50px; right: 200px;}
.sec3box1textbox{position: absolute; top: 70px; left: 50px;}
.sec3box1 button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%;}
.sec3box1:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.sec3box1:hover img,.sec3box1:hover h3,.sec3box1:hover h2,.sec3box1:hover .sec3boximg{filter: blur(14px); transition: all 0.5s;}
.box2plus{position: absolute; top: 0; background-color: black; width: 100%; height: 100%; z-index: 100; padding-top: 150px;
    display: flex; flex-direction: column; text-align: center;}
.box2plus p{color: rgb(255, 255, 255); font-size: 20px; font-weight: 500;}
.box2plus h4{color: gray; font-size: 16px; font-weight: 500; padding-top: 50px; width: 80%; margin: 0 auto;}
.close2{position: absolute; top: 6%; right: 3%; font-size: 30px; color: white;}



.sec3box2{overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
     width: 50%; height: 500px; background: black; background-position: 50% 20%; border-radius: 25px; padding-top: 15px; z-index: 10; margin: 0 0 0 10px;}
.sec3box2textbox{position: absolute; top: 70px; left: 50px;}
.sec3box2 h3{font-size: 20px; color: gray; font-weight: 600;}
.sec3box2 h2{font-size: 25px; color: white; font-weight: bolder; line-height: 33px; margin-top: 10px;}
.sec3box2 button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%; color: #2997ff;}
.sec3box2:hover img,.sec3box2:hover h3,.sec3box2:hover h2{filter: blur(14px); transition: all 0.5s;}
.sec3box2:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.box3plus{position: absolute; top: 0; background-color: black; width: 100%; height: 100%; z-index: 100; padding-top: 150px;
    display: flex; flex-direction: column; text-align: center;}
.box3plus p{color: rgb(255, 255, 255); font-size: 20px; font-weight: 500;}
.box3plus h4{color: gray; font-size: 16px; font-weight: 500; padding-top: 50px; width: 80%; margin: 0 auto;}
.close3{position: absolute; top: 6%; right: 3%; font-size: 30px; color: white;}

.sec4{display: flex;}

.sec4left{width: 50%; display: flex; flex-direction: column;}

.sec4leftbox1{display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 500px; overflow: hidden; background-color: bisque; border-radius: 25px; margin: 20px 10px 10px 0; position: relative;}
.sec4leftbox1 img{height: 100%; width: 100%;}
.sec4lefttextbox1{position: absolute; top: 70px; left: 50px;}
.sec4leftbox1 h3{font-size: 23px; color: rgb(255, 255, 255); font-weight: 600;}
.sec4leftbox1 h2{font-size: 30px; color: #a0cdec; font-weight: bolder; line-height: 33px; margin-top: 10px;}
.sec4leftbox1 button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%; color: #2997ff;}
.sec4leftbox1:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.sec4leftbox1:hover img,.sec4leftbox1:hover h3,.sec4leftbox1:hover h2{filter: blur(14px); transition: filter 0.3s;}
.box4plus{position: absolute; top: 0; background-color: black; width: 100%; height: 100%; z-index: 100; padding-top: 150px;
    display: flex; flex-direction: column; text-align: center;}
.box4plus p{color: rgb(255, 255, 255); font-size: 20px; font-weight: 500;}
.box4plus h4{color: gray; font-size: 16px; font-weight: 500; padding-top: 50px; width: 80%; margin: 0 auto;}
.close4{position: absolute; top: 6%; right: 3%; font-size: 30px; color: white;}



.sec4leftbox2{height: 500px; background-color: rgb(216, 216, 216); border-radius: 25px; margin: 10px 10px 0 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden;}
.sec4leftbox2 img{position: absolute; right: 3%; bottom: 50px; width: 220px;}
/* .sec4leftbox2:hover img{bottom: 50px; transition: all 0.5s;} */
.sec4lefttextbox2{position: absolute; top: 70px; left: 50px;}
.sec4leftbox2 h3{font-size: 23px; color: rgb(114, 114, 114); font-weight: 600;}
.sec4leftbox2 h2{font-size: 30px; color: black; font-weight: bolder; line-height: 33px; margin-top: 10px;}
.sec4leftbox2 button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%; color: #2997ff;}
.sec4leftbox2:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.sec4leftbox2:hover img,.sec4leftbox2:hover h3,.sec4leftbox2:hover h2{filter: blur(14px); transition: filter 0.3s;}
.box5plus{position: absolute; top: 0; background-color: black; width: 100%; height: 100%; z-index: 100; padding-top: 150px;
    display: flex; flex-direction: column; text-align: center;}
    .box5plus p{color: rgb(255, 255, 255); font-size: 20px; font-weight: 500;}
    .box5plus h4{color: gray; font-size: 16px; font-weight: 500; padding-top: 50px; width: 70%; margin: 0 auto;}
    .close5{position: absolute; top: 6%; right: 3%; font-size: 30px; color: white;}
    





.sec4right{width: 50%; background-color: black; border-radius: 25px; margin: 20px 0 0 10px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.sec4right img{position: absolute; width: 100%; height: 100%; z-index: 1;}
.sec4righttextbox1{position: absolute; top: 70px; left: 50px; z-index: 2;}
.sec4right h3{font-size: 23px; color: gray; font-weight: 600;}
.sec4right h2{font-size: 30px; color: white; font-weight: bolder; line-height: 33px; margin-top: 10px;}
.sec4right button{position: absolute; display: flex; align-items: center; opacity: 0; top: 50%; color: #2997ff; z-index: 2;}
.sec4right:hover button{opacity: 1; transition: all 2s; animation: arrow 2s infinite;}
.sec4right:hover img,.sec4right:hover h3,.sec4right:hover h2{filter: blur(14px); transition: filter 0.3s;}
.box6plus{position: absolute; top: 0; background: black; width: 100%; height: 100%; z-index: 100; padding-top: 150px;
    display: flex; flex-direction: column; text-align: center;}
.box6plus p{color: rgb(255, 255, 255); font-size: 28px; font-weight: 500;}
.box6plus h4{color: gray; font-size: 19px; font-weight: 400; padding-top: 50px; width: 60%; margin: 0 auto;}
.close6{position: absolute; top: 3%; right: 5%; font-size: 30px; color: white;}
    

.s3{width: 100%; background: white;}
.inner2{width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;}
.s3title{width: 100%; height: 130px; line-height: 130px; text-align: center; font-size: 40px; letter-spacing: -2px; font-weight: 900;}
.s3title2{width: 100%; height: 130px; line-height: 130px; text-align: center; font-size: 20px; font-weight: 500; padding-top: 150px;}
.s3title2 a{color: #147ce5;}
.buy2{display: flex; justify-content: center; margin: 0 auto; width: 65px; height: 27px; line-height: 27px; background-color: #147ce5; color: white; font-size: 13px; border-radius: 980px;}
.s3box{width: 220px; display: block; text-align: center; padding: 20px 0;}
.s3minibox{padding: 20px 0; border-top: solid rgb(209, 209, 209) 1px; border-bottom: solid rgb(209, 209, 209) 1px; margin-top: 30px;}
.minibox{padding: 20px 0;}
.s3boxtext1{font-size: 20px; font-weight: 600;}
.s3boxtext2{padding:20px 0;}
.s3boxtext3{font-size: 13px; color: gray; width: 73%; text-align: center; margin: 0 auto;}
.s3link{color: #2997ff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; margin: 10px 0 0 10px;}

.s3link span{font-size: 18px;}

footer{width: 100%; height: 1220px; overflow: hidden; background-color: rgb(240, 240, 240);}
.footinner{width: 1200px; margin: 0 auto;}
.foottext{width: 370px; font-size: 17px; text-align: center; padding: 20px 0;}
.footbox{display: flex; flex-direction: column; align-items: center; text-align: center;}
.footbutton{display: flex; height: 30px; line-height: 30px; font-size: 20px;}
.footbutton a{color: #06c;}
.footbutton span{font-size: 17px; margin: 7px 0 0 7px; color: #06c;}
.foot1{display: flex; justify-content: space-around; padding: 50px 0 100px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot2{display: flex; justify-content: space-around; padding: 50px 0 50px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot3{font-size: 13px; color: gray; padding: 10px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foottext2{width: 210px; font-size: 15px; text-align: center; padding: 20px 0;}
.size{font-size: 60px; color: rgb(163, 163, 163); font-weight: 200; padding: 10px 0;}
.footbutton2{display: flex; height: 30px; line-height: 30px; font-size: 15px;}
.footbutton2 a{color: #06c;}
.footbutton2 span{font-size: 15px; margin: 8px 0 0 5px; color: #06c;}
.foot4{font-size: 13px; color: gray; padding: 10px 0;}