@charset "UTF-8";
/*Gmarket Sans*/


body {
  width: 100%;height: 100%;
  margin: 0 auto;
  font-family: 'GmarketSans', sans-serif;
  overflow: hidden;
  background-color: #0066A5;
}
main{width: 100%;}
#wrap{margin: 0; padding: 0; width: 100%; height: 100%;}

h2{font-size: 40px; margin: 40px auto 40px;}

h1, h2, h3, h4, h5, h6, p{font-family: 'GmarketSans', sans-serif;}

#page-2 .text h2, #page-3 .text h2{position: absolute; top: 60px; }

pre {
  background-color: #3a3a3a;
  padding: 20px;
  border-radius: 5px;
}

.token.string,
.token.number,
.token.comment,
.token.keyword,
.token.attr-value {
  opacity: 0.6;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row;
  color: #fff;
  position: relative;
}
#page-1 .text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  position: relative;
  background: url(../images/office.jpg) no-repeat center;
  background-size: cover;
}
.textP1{text-align: center;}
#page-1 .text h1{ font-size: 60px; margin: 0 auto; }
#page-1 .text p{ font-size: 30px; margin: 0 auto; font-weight: 300; }
#page-1 .text h3{ font-size: 40px;}
.T_m{display: none;}

#page-2 .text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row;
  position: relative;
  background: url(../images/about.jpg) no-repeat center;
  background-size: cover;}

#page-2 .text .about{width: 100%; height: 70%;}

.about ul{width: 100%; height: 100%; /*background-color: #666;*/margin-top: 80px; padding: 0;}
.about ul li{width: 50%; height: 650px; list-style: none; float: left; text-align: center; position: relative;}
.about ul li .about_left{ width: 410px; height: 650px; 
  position: absolute; top: 0; right: 10%;
  background: url(../images/edge.png)no-repeat center;
  background-size: cover;}

  .about_left h3{position: absolute; left: 0; right: 0; top: 14%; font-size: 55px;}
  .about_left p{font-size: 28px; position: absolute; left: 0; right: 0; top: 60%; }
  

.about ul li .about_right{ width: 410px; height: 650px; 
  position: absolute; top: 0; left: 10%;
  background: url(../images/edge.png)no-repeat center;
  background-size: cover;}
  .about_right h3{position: absolute; left: 0; right: 0; bottom: 14%; font-size: 55px;}
  .about_right p{font-size: 28px; position: absolute; left: 0; right: 0; top: 20%; }

  .Circle{position: relative; width: 100%; height: 650px; /*background-color: #1a4ab9;*/ text-align: center;}
  .Circle img{z-index: 999; position: absolute; left: 55px; right: 0; top: 55px;}
  
  .Circle .Acp{transition-duration: 0.7s; transition-timing-function: ease-in-out;}
  .Circle .Acm{top: 45%; transition-duration: 0.7s; transition-timing-function: ease-in-out;}
  .Circle .Acp:hover{ transform:translateY(240px) ;}
  .Circle .Acm:hover{ transform:translateY(-240px) ;}
  

#page-3 .text {width: 100%; height: 100%; position: relative;
background: url(../images/ser.jpg) no-repeat center;background-size: cover;}
.Sbox{/* background-color: #0066A5;*/ padding: 0 auto; margin-top: 120px;}
.Sbox ul{width: 1060px; height: 630px; list-style: none; padding: 0;/* position: absolute; 
  top: 120px; bottom: 0; left: 0; right: 0; margin: auto;*/}

.Sbox ul li{width: 300px; height: 250px; padding-top: 50px; margin-top: 25px;
   background-color: rgba(255, 255, 255, 0); 
   border-radius:15px; text-align: center; float: left;} 
   .Sbox ul li:nth-child(2),.Sbox ul li:nth-child(5){margin-left: 80px; margin-right: 80px;}
   .Sbox ul li:nth-child(1),.Sbox ul li:nth-child(2),.Sbox ul li:nth-child(3){margin-bottom: 25px;}
.Sbox ul li .S_icon{ display: none; margin: 0 auto;}
.Sbox ul li:hover .S_icon{ display: inline;}
.Sbox ul li .S_icon_h{ display: inline; margin: 0 auto;}
.Sbox ul li:hover .S_icon_h{ display: none;}

.Sbox ul li h1 {color: #fff;  font-size: 28px;}
.Sbox ul li h3 {color: #fff;  font-size: 20px; font-weight: 400;}
.Sbox ul li:hover{background-color: #f0f2f5;}
.Sbox ul li:hover h1{color: #0066A5;}
.Sbox ul li:hover h3{color: #000000;}



#page-4 .text {position: relative; background: url(../images/po.jpg) no-repeat center; background-size: cover;}
#page-4 .text div{width: 100%; height: 50%; text-align: center; margin: 0; padding: 0; }
#page-4 .text .box_pro h1, #page-4 .text .box_par h1{font-size: 40px; margin: 100px auto 40px;}
#page-4 .text .box_pro h3{font-size: 22px; font-weight: 300; margin-top: 0px;}
#page-4 .text .box_pro .P_icon{margin-top: 30px;}
#page-4 .text .box_par ul{width: 80%; height: 95%;
  padding: 0; margin: 0 auto; background-color: #f0f2f5;}
#page-4 .text .box_par ul li{width: 20%; height: 30%; padding-top: 22px; 
  float: left; list-style: none; color: #000000;}
#page-4 .text .box_par ul .par_img1{ padding-top: 40px;}

#page-5 .text { background-color: #fff; position: relative;}
#page-5 .C_left{width: 50%; height: 100%;  position: absolute; top: 0; left: 0;}
#page-5 .CL_text{width: 66%; float: right;}
#page-5 .CL_text h2{color: #2a2a2a; margin-top: 160px;}
#page-5 .C_left h4{font-size: 32px; margin: 0;color: #0066A5;}
#page-5 .C_left h6{font-size: 19px; margin: 0px; font-weight: 300; color: #008ECA;}
/*#page-5 .CL_text h2{font-size: 83px; margin: 60px auto 20px;  position: absolute; top: 60px; }*/
.tel_box{width: 98%; height: 320px; background-color: #e8e8e8; margin-top: 360px; position: relative;}
.tel_box ul{width: 65%; height: 70%; float: right; list-style: none; position: absolute; top: 45px; right: 0;}
.tel_box ul li{color: #2a2a2a; font-size: 30px; margin-top: 10px;}
/*.tel_box ul li:first-child{margin-top: 50px;}*/
.tel_box ul li h5{margin: 20px 0 0 0; font-weight: 700;}

.C_reght{width: 50%; height: 100%;  position: absolute; top: 0; right: 0;
background: url(../images/co_right.jpg) no-repeat center; background-size: cover;}
.C_reght .box_cr{width: 60%; height: 50%; /*background-color: thistle;*/
  position: absolute; top: 25%; left: 15%; z-index: 99;}
.C_reght h3{ font-size: 30px; font-weight: 300;}


footer {width: 100%; height: 230px; z-index: 999; text-align: right;
  background: url(../images/co_b.png) no-repeat center;background-size: cover; position: absolute; bottom: 0;}
footer h5{font-weight: 300; padding: 0px; margin: 0; color: #fff; position: absolute;
   right: 74px; bottom: 74px; z-index: 101; letter-spacing: 1px;}

.scroller {
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  width: 40px;
  height: 65px;
  border: 4px solid #fff;
  border-radius: 30px;
}
.scroller::after {
  position: absolute;
  top: 12px;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: 1200ms ease 0ms forwards infinite scroll;
          animation: 1200ms ease 0ms forwards infinite scroll;
  content: "";
}
.scroller small {
  position: absolute;
  width: 174px;
  left: -70px;
  top: -34px;
  font-size: 12px;
}

@-webkit-keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}

@keyframes scroll {
  from {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 10px, 0);
            transform: translate3d(-50%, 10px, 0);
    opacity: 0;
  }
}

.logo{
  position: fixed;
  top: 20px; left: 62px;
  z-index: 100;
}
.anchors {
  position: fixed;
  top: 40px;
  right: 50px;
  z-index: 100;
}
.anchors ul {
  margin: 0;
  padding: 0;
}
.anchors ul li {
  float: left;
  list-style: none;
}
.anchors ul li a {
  padding: 12px 24px 12px 24px;
  color: #fff;
  text-decoration: none;
  position: relative;
}
.anchors ul li a:hover{color: #A0CBEC;}

.text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

nav {
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 100;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav ul li a span {
  background: #fff;
}

nav li {
  display: block;
  width: 10px;
  height: 10px;
  margin: 16px;
  position: relative;
}

nav span:after {
  background: rgba(255, 255, 255, 0.15);
  position: absolute;
  content: "";
  display: block;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 100%;
  transition: 0.3s;
}

nav li .active span {
  background: #fff;
  position: absolute;
}

nav li .active span:after {
  top: -6px;
  left: -6px;
  bottom: -6px;
  right: -6px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

nav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

nav ul li a.active span,
nav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

nav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #fff;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  transition: all 0.1s ease-in-out;
}

nav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}


#settings {
  opacity: 0;
}

/* Light */
@font-face {
  font-family: 'GmarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: 'GmarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
/* Bold */
@font-face {
  font-family: 'GmarketSans';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}