ul,ol  { list-style: none;margin:0 0 0 0;}
a      { text-decoration: none;}

/*---------------header------------------*/
header { width: 100%;height: 17.5vmin;}
header .inner
       { width: 100%;height: 17.5vmin;background-color: rgb(255, 255, 255);
         margin: 0;
         position: relative;padding: 5vmin 0 0 0;margin:0;} /*자식 absolute 요소의 기준점 설정*/    

/*--------------------메인화면----------------------*/
main   { width: 100%;height: 100vmin;background-color: ;}
main .main
       { width: 100%;height: 55vmin; /*전체 브라우저 높이에서 120px만큼 빼줌*/
         /*background: linear-gradient(-55deg,  #061c8a, #7df0a9e8);*/
         position: relative;
         overflow: hidden;}         
.main .background-color
       { width: 100%;height: 100%;
         background: linear-gradient(120deg, #1b2f58b6,#11b8a2bd,#1b2f58,rgb(16, 20, 34), rgb(16, 20, 34));
         background-size: 400% 400%;      
         object-fit: cover;
         opacity: 100%;
         position: absolute;margin: 0px 0 0 0px;
         animation: gradient 12s ease infinite;}
         @keyframes gradient {
         0%   { background-position: 0% 50%;}
         50%  { background-position: 100% 50%;}
         100% { background-position: 0% 50%;}}
.main .background-color .grid             
       { width: 200%;height: 200%;
         background: url(imagefile1/grid2.png);
         background-size: 100%;
         position: absolute;margin: -30vmin 0 0 -55vmin;
         transform: perspective(50vmin)rotateX(0deg);
         transform-origin: center;
         animation: grid 40s linear infinite;}
         @keyframes grid 
       { 0%  { opacity: 5%;transform: perspective(50vmin)rotateX(80deg)rotate( 360deg);}
         5%  { opacity: 70%;}
         30%  { opacity: 0%;}
         45% { opacity: 100%;}
         50% { opacity: 0%;}
         80% { opacity: 0%;}
         100%{ opacity: 100%;transform: perspective(50vmin)rotateX(80deg)rotate( 0deg);}}
   
.main .logoimage
       { width: 30vmin;height:3.93vmin;
         background-image: url("imagefile1/logo-white2\(GIF\).gif");
         background-size: 100%;
         opacity: 20%;margin: 29vmin 0 0 33vmin;
         animation: logo linear 10s infinite;
         animation-delay: 0s;}
         @keyframes logo 
       { 0%  {scale: 100%;}
         15% {scale: 150%;}
         20% {scale: 150%;opacity: 35%;}
         35% {scale: 150%;opacity: 0%;}
         100%{scale: 150%;opacity: 0%;}}

/*------------------이미지회전 배경-----------------------------*/              
.main  
       { width: 100%;height: 100%;
         overflow: hidden;
         position: absolute;}
.main .rotate1 
       { width: 100%;             
         position: absolute;perspective: 140vmax;}
.main .rotate1 #rotate2 
       { width: 90vmax;height: 90vmax;
         position: absolute; 
         top: -10vmin;left: -25vmin;
         transform-style: preserve-3d;
         animation: ani1 linear 30s infinite;}
         @keyframes ani1 
       { 0%  {transform: perspective(140vmax)rotateY(0deg);}
         100%{transform: perspective(140vmax)rotateY(360deg);}}
.main .rotate1 #rotate2 article .inner1 
       { width: 100%;height: 100%;background: rgba(42, 33, 161, 0.527);
         opacity: 0.7;overflow: hidden;
         box-sizing: border-box; 
         border-radius: 9vmin 9vmin 0 0; 
         position: absolute;     
         padding: 0px;
         transition: all 0.5s;}
                /* common ui */
.main .rotate1 #rotate2 article 
       { width: 100%;height: 50%;
         position: absolute;top: 0px;left: 0px;
         backface-visibility: hidden;}

                /* 3D 배치 */
.image1{ transform: rotateY(0deg)   translateZ(-124vmax);}
.image2{ transform: rotateY(45deg)  translateZ(-124vmax);}
.image3{ transform: rotateY(90deg)  translateZ(-124vmax);}
.image4{ transform: rotateY(135deg) translateZ(-124vmax);}
.image5{ transform: rotateY(180deg) translateZ(-124vmax);}
.image6{ transform: rotateY(225deg) translateZ(-124vmax);}
.image7{ transform: rotateY(270deg) translateZ(-124vmax);}
.image8{ transform: rotateY(315deg) translateZ(-124vmax);} 

.main .logoimage
       { width: 30vmin;height:3.93vmin;
         background-image: url("imagefile1/logo-white2\(GIF\).gif");
         background-size: 100%;
         opacity: 20%;margin: 29vmin 0 0 33vmin;
         animation: logo linear 10s infinite;
         animation-delay: 0s;}
         @keyframes logo 
       { 0%  {scale: 100%;}
         15% {scale: 150%;}
         20% {scale: 150%;opacity: 35%;}
         35% {scale: 150%;opacity: 0%;}
         100%{scale: 150%;opacity: 0%;}}

    /*------------------DOT 장식-----------------------------*/  
figure { width: 100%;height: 100%;}
figure .dot-rotate1 
       { position: fixed;
         width: 50vmin;height: 50vmin; 
         perspective: 150vmin;
         position: absolute;margin: 15vmin 0 0 0vmin;}
            
figure .dot-rotate1 #dot-rotate2 
       { width: 70vmin;height: 100vmin; 
         position: absolute;
         margin-top: -30vmin;margin-left: 0vmin; 
         transform-style: preserve-3d;
         animation: ani linear 10s infinite;}
         @keyframes ani {
         0% {transform: rotateY(360deg);}
         100% {transform: rotateY(0deg);}}
                
                                  /* common ui */
figure .dot-rotate1 #dot-rotate2 article 
       { position: absolute;top: 0px;left: 0px; 
         backface-visibility: hidden;}
                                    /*face1*/
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-1 
       { opacity:50%;
         width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 450px 0 0 500px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-2
       { width: 5px;height: 5px;background-color:#fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 400px 0 0 -200px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-3
       { width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 200px 0 0 -500px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-4
       { opacity:50%;width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 500px 0 0 -400px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-5
       { width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 550px 0 0 -700px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-6
       { width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 250px 0 0 -300px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-7
       { width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 300px 0 0 -480px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-8
       { width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 450px 0 0 200px;}
figure .dot-rotate1 #dot-rotate2 .dot1 .inner2 .dot1-9
       { opacity:50%;width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 300px 0 0 250px;}
       
                                /*face2*/
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2  
       { margin: 0 0 0 0;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-1 
       { opacity:50%;
         width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 150px 0 0 450px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-2
       { opacity:50%;
         width: 3px;height: 3px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 100px 0 0 200px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-3
       { width: 3px;height: 3px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 250px 0 0 150px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-4
       { width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 350px 0 0 350px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-5
       { opacity:50%;
         width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 180px 0 0 100px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-6
       { width: 15px;height: 15px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 200px 0 0 -380px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-7
       { opacity:80%;width: 15px;height: 15px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 300px 0 0 -580px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-8
       { opacity:70%;width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 230px 0 0 200px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-9
       { opacity:80%;width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 250px 0 0 200px;}
figure .dot-rotate1 #dot-rotate2 .dot2 .inner2 .dot2-10
       { opacity:50%;width: 5px;height: 5px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 230px 0 0 300px;}
       
                                      /*face3*/
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2
       { margin: 0 0 0 0;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-1 
       { opacity:50%;
         width: 3px;height: 3px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 420px 0 0 -300px;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-2
       { opacity:50%;
         width: 3px;height: 3px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 300px 0 0 -100px;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-3
       { opacity:80%;
         width: 3px;height: 3px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 400px 0 0 -150px;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-4
       { opacity:50%;
         width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 500px 0 0 50px;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-5
       { opacity:50%;
         width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 300px 0 0 0;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-6
       { width: 10px;height: 10px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 400px 0 0 200px;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-7
       { opacity:70%;width: 15px;height: 15px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 200px 0 0 0;}
figure .dot-rotate1 #dot-rotate2 .dot3 .inner2 .dot3-8
       { opacity:50%;width: 15px;height: 15px;background-color: #fff;
         border-radius: 50px;box-shadow: #fff 0px 0px 30px 5px;
         float: left;margin: 450px 0 0 100px;}
       
                               /* 3D 배치 */
.dot1  { transform: rotateY(0deg) translateZ(-900px);}
.dot2  { transform: rotateY(20deg) translateZ(-900px);}
.dot3  { transform: rotateY(40deg) translateZ(-900px);}


  /*----------------------보유기술소개(내용)-------------------------*/ 
section 
       { width: 93%;height: 450vmin;
         position: absolute;margin: 0;}             
section .section1 
       { width: 93%;height: 410vmin;
         position: absolute;
         padding: 0 5vmin 0;margin: 5vmin 0 0 0;}
.section1 h1       /*---text 보유기술소개(스타일)--*/
       {  font: bold 5vmin/1 "arial";color: rgb(255, 255, 255);	           
        position: absolute;margin: -37vmin 0 0 0vmin;}
                     /*-----------목록-----------*/
.section1 .title1
       { width: 60vmin;height: 70vmin;
         margin: 15vmin 0 0 -18.5vmin;}
.section1 .title1-1
       { width: 70vmin;height: 10vmin;
         font: normal 3.1vmin "arial";color: #1474e3;
         text-align: center;letter-spacing: 0px;
         display: flex;
         margin: 0 0 0 39vmin;}  
.section1 .title1-2
       { width: 50vmin;height: 0vmin;
         font: normal 3.1vmin "arial";color: rgb(0, 0, 0);
         text-align: center;letter-spacing: 0px;
         display: flex;
         margin: 0 0 0 5vmin;}                       
                     /*---------하단제목---------*/
.section1 .title2
       { width: 90.1vmin;height: 35vmin;
         border-top: #424242 dashed 0.4vmin;
         position: absolute;margin: -5vmin auto 0;} 
.section1 .title2-1
       { width: 50vmin;height: 13vmin;
         font: normal 3.1vmin "arial";color: #1474e3;
         text-align: center;letter-spacing: 0px;
         margin: 15vmin auto 0;}
.section1 .title2-2
       { width: 50vmin;height: 10vmin;
         font: normal 3.1vmin "arial";color: rgb(0, 0, 0);
         text-align: center;letter-spacing: 0px;
         margin:  -3vmin auto 0;}               

                     /*-----------내용-----------*/   
.section1 .inner1
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 80vmin 0 0 -29vmin;}
.section1 .inner2
       { width: 45vmin;height: 95vmin;
         position: absolute;
         padding: 0 5vmin;margin: 80vmin 0 0 16.5vmin;}              
.section1 .inner3
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 187vmin 0 0 -29vmin;} 
.section1 .inner4
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 187vmin 0 0 16.5vmin;}

.section1 .txt             /*-----제목,내용(범위)------*/ 
       { width: 50vmin;height: 100vmin;
         padding: 0 0vmin;margin: 0 0 0 9vmin;}                  
  
.section1 .txt h2          /*-------제목(스타일)-------*/ 
       { width: 37vmin;height: 17vmin;
         font: bold 2.9vmin "franklin gothic book";color: rgb(0, 0, 0);
         text-align: center;letter-spacing: 1px;
         padding: 15vmin 0 0 0;margin: -5vmin 0 -10vmin 17.5vmin;
         transition: 1s;}                                                                                                                                       
.section1 article .txt p   /*---------내용 text--------*/ 
       { width: 37vmin;height: 40vmin;
         font: normal 2.3vmin/1.6 "arial";color: rgb(0, 0, 0);
         text-align: justify;letter-spacing: -0.15vmin;
         margin: 23vmin 0 0 18.5vmin;} 
.section1 article .txt .p            
       { width: 37vmin;
         font: normal 2.3vmin 'arial';color: #1474e3;
         letter-spacing: -0.1vmin;margin: -25vmin 0 0 18.5vmin}            
.section1 article figure   /*-------이미지프레임-------*/ 
       { width: 35vmin;height: 35vmin;overflow: hidden;
         border-radius: 3.5vmin;box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
         position: absolute;margin: -130vmin 0 0 28.5vmin;
         transition: 1s;} 
                     
/*---------------------------Footer--------------------------------*/                     
footer 
       { width: 100%;height: 100vmin;background: rgb(16, 20, 34);
         padding: 7vmin 0px;margin: 410vmin 0 0 0;}
footer .inner 
       { width: 85vmin;padding-bottom: 10vmin;margin: 0px auto;}
footer .inner .upper        /*--언더라인--*/
       { width: 100%;
         border-bottom: 0.2vmin solid #777;
         padding-bottom: 2.5vmin;}
footer .inner .logo-footer  /*----로고----*/
       { width: 55%;display: inline-flex;
         padding-left: 2vmin;margin: -3vmin 0 0 -2.1vmin;}             
/*상단 영역 float해제*/    
footer .inner .upper::after 
       { content: "";  
         display: block;
         clear: both;}
footer .inner .upper ul 
       { float: left;
         width: 65vmin;margin: 3vmin 0 2vmin -1vmin;}
footer .inner .upper ul li /*--policy terms ...--*/
       { float: left;}
footer .inner .upper ul li a/*--policy terms ...--*/ 
       { font: bold 2.3vmin "arial";color: rgb(205, 207, 214);}
footer .inner .lower        /*----회사정보내용---*/ 
       { width: 100%;padding-top: 2.3vmin;}
footer .inner .lower address 
       { width: 100%;
         font: 2.3vmin/2.3 "arial";color: rgb(205, 207, 214);
         margin-bottom: 2vmin;}                                                  
footer .inner .lower p 
       { width: 100%;
         font: 2.3vmin/2.3 "arial";color: rgb(205, 207, 214);
         letter-spacing: 0.10vmin;margin-top: -2vmin;}