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

/*---------------header------------------*/
header { width: 100%;height: 12.3vmin;}
header .navbar
       { width: 100%;height: 12.3vmin;
         display: flex;
         justify-content: space-between;
         align-items: center;
         position: absolute;padding: 3vmin 0;}
header .util         /*--상단 네비게이션 위치---*/
       { width: 47%;height: 10vmin;
         display: block;position: absolute;
         margin: 0vmin 0 0 37%;}
header .util li
       { display: block;float: left;}
header .util li a    /*--상단 네비게이션 text---*/
       { font: 1.8vmin "arial";
         color: rgb(192, 193, 201);
         display: block;
         padding: 0 1.3vmin;margin: 0 0 0 0vmin;}
header .navbar__logo
       { width: 40.5vmin;height: 20vmin;
         background: url(imagefile1/logo.png)no-repeat;
         background-size: 100%;
         position:absolute;margin: -0.5% 0 0 -47%;}           
header .navbar__menu 
       { width: 16.5%;height: 455%;background-color: #1b2f58; 
         z-index : 1;flex-direction: column;
         align-items: center;
         border-radius: 0 0 1.5vmin 1.5vmin;
         display: none;margin: 9.3vmin 0 0 70.5%;}
header .navbar__menu li 
       { width: 100%;height: 455%;
         z-index : 1;text-align: center;line-height: 5.5vmin;
         padding: 4.5% 0 0 0;margin: 0 0 0 0;}
header .navbar__menu li a
       { font: normal 2.3vmin/1 "arial";color: #fff;} 
header .navbar__menu li:hover 
       { z-index : 1;
         background:radial-gradient(circle,#00378f,#071b74);/*-#162544-*/
         color: white;text-align: center;
         border-radius: 3px;border-bottom: none;}                                  
header .navbar__icons 
       { width: 100%;
         justify-content: center;display: none;}
header .menubar
       { width: 8vmin;height: 6vmin;
         background-image: url(imagefile1/menuBar.png);
         background-size: 92%;
         display: block;position: absolute;
         margin: -0.2% 0 0 85%;}
header .navbar__menu.active,.navbar__icons.active 
       { display: flex;}

       /*--------------------메인화면----------------------*/
body   { width: 100%;height: 100%;}
main   { width: 100%;height: 100%;background-color: #FFF; 
         position: absolute;}
main .main
       { width: 100%;height: 40vmin;
         background:#000;position: absolute;
         overflow: hidden;
         position: relative;margin: 0;}         
.main .background-color
       { width: 100%;height: 80vmin;
         background: linear-gradient(120deg, #1b2f58b6,#16dcffbd,#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 10s ease infinite;}
         @keyframes gradient {
         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: -55vmin 0 0 -70vmin;
         transform: perspective(50vmin)rotateX(0deg);
         transform-origin: center;
         animation: grid 40s linear infinite;}
         @keyframes grid 
       { 0%  { opacity: 5%;transform: perspective(500px)rotateX(70deg)rotate( 360deg);}
         5%  { opacity: 70%;}
         30% { opacity: 0%;}
         45% { opacity: 100%;}
         50% { opacity: 0%;}
         80% { opacity: 0%;}
         100%{ opacity: 100%;transform: perspective(500px)rotateX(70deg)rotate( 0deg);}}
   
.main .logoimage
       { width: 30vmin;height:3.93vmin;display: none;
         background-image: url("imagefile1/logo-white2\(GIF\).gif");
         background-size: 100%;
         opacity: 20%;
         position: center;margin: 23vmin auto 0;
         animation: logo linear 10s infinite;
         animation-delay: 3s;}
         @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: 70vmax;height: 70vmax;
         position: absolute; 
         top: -15vmin;left: 15vmin;
         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(-100vmax);}
.image2{ transform: rotateY(45deg)  translateZ(-100vmax);}
.image3{ transform: rotateY(90deg)  translateZ(-100vmax);}
.image4{ transform: rotateY(135deg) translateZ(-100vmax);}
.image5{ transform: rotateY(180deg) translateZ(-100vmax);}
.image6{ transform: rotateY(225deg) translateZ(-100vmax);}
.image7{ transform: rotateY(270deg) translateZ(-100vmax);}
.image8{ transform: rotateY(315deg) translateZ(-100vmax);} 

.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 .dot-rotate1 
       { position: fixed;
         width: 150vmin;height: 30vmin; 
         perspective: 150vmin;margin-top: -10vmin;margin-left: -5vmin;}

figure .dot-rotate1 #dot-rotate2 
       { width: 150vmin;height: 30vmin; 
         position: absolute; 
         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: 100%;height: 450vmin;
         position: center;margin: 10vmin auto 0;}             
section .section1 
       { width: 100%;height: 410vmin;
         position: center;margin: 1.3vmin auto 0;}
.section1 h1       /*---text 회사소개(스타일)--*/
       { width: 95%;font: bold 5vmin/1 "arial";color: rgb(255, 255, 255);	           
         position: center;margin: -35vmin auto 0;}
                     /*-----------목록-----------*/
.section1 .title1
       { width: 61%;height: 70vmin;
         margin: 15vmin auto 0;}
.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: 95%;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 5%;}
.section1 .inner2
       { width: 45vmin;height: 95vmin;
         position: absolute;
         padding: 0 5vmin;margin: 80vmin 0 0 40%;}              
.section1 .inner3
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 200vmin 0 0 5%;} 
.section1 .inner4
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 200vmin 0 0 40%;}
.section1 .inner5
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 271.5vmin 0 0 5%;} 
.section1 .inner6
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 271.5vmin 0 0 40%;}           
.section1 .inner7
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 369vmin 0 0 5%;} 
.section1 .inner8
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 369vmin 0 0 40%;}
.section1 .inner9
       { width: 45vmin;height: 95vmin;
         text-align: center;
         position: absolute;
         padding: 0 5vmin;margin: 464.5vmin 0 0 5%;} 
.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: 31vmin 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: 3vmin 0 0 0;margin: 430vmin 0 0 0;}
footer .inner 
       { width: 80%;height: 80vmin;
         margin: 0px auto;}
footer .inner .upper        /*--언더라인--*/
       { width: 100%;height: 9.5vmin;
         border-bottom: 0.2vmin solid #777;
         padding: 0 0 5vmin 0;margin: 5vmin 0 0 0;}
footer .inner .logo-footer  /*----로고----*/
       { width: 45vmin;height: 3.5vmin;display: inline-flex;
         padding: 0 0 0 2vmin;margin: 0 0 0 -2.1vmin;}             
         /*상단 영역 float해제*/    
footer .inner .upper::after 
       { content: "";
         display: block;
         clear: both;}
footer .inner .upper ul 
       { width: 70%;height: 0;float: right;}
footer .inner .upper ul li /*--policy terms ...--*/
       { float: left;display: none;
         padding: 0 3vmin;margin: 4.1vmin 0 0 5vmin;}
footer .inner .upper ul li a/*--policy terms ...--*/ 
       { font: bold 1.3vmin "arial";color: rgb(205, 207, 214);}
footer .inner .lower        /*----회사정보내용---*/ 
       { width: 100%;padding-top: 1.3%;}
footer .inner .lower address 
       { width: 100%;
         font: 1.3vmin/2.3 "arial";color: rgb(205, 207, 214);
         margin-bottom: 2vmin;}                                                  
footer .inner .lower p 
       { width: 100%;
         font: 1.3vmin/2.3 "arial";color: rgb(205, 207, 214);
         letter-spacing: 0.10vmin;margin-top: -2vmin;}