@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

ul,
ol,
li {
    list-style: none;
}

ul::after,
ol::after {
    content: "";
    display: block;
    clear: both;
}

li {
    float: left;
}

a {
    text-decoration: none;
    color: #555;
}

clear::after {
    content: "";
    display: none;
    clear: both;

}

html,
body {
    /* 보이는 화면 기준! (한페이지씩 구현을 위한 설정- 꼭!! html, body둘다 100%를 줘야함) */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Work Sans', sans-serif;

}

header {
    border-bottom: 1px solid #0a1543;
}

header#top {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 253, 253, 0.966);
    position: fixed;
    z-index: 9999;
}

.inbox {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    height: 100%;
    position: relative;
    /* #gnb 기준!*/
}

header .logo {
    display: block;
    height: 100%;
    /* background-color: yellow; */

}

header .logo img {
    height: 60px;
    margin-top: 10px;
    display: block;
}

#gnb {
    position: absolute;
    right: 100px;
    top: 30px;
    line-height: 100%;
    /* background-color: lightgreen; */

}

#gnb li {
    margin-left: 50px;
    font-size: 18px;
}

#gnb li:hover {
    /* font-size: 18px; */
    transform: scale(1.1);
    /*글자밀림없이 커지게 효과주기*/
}

#gnb li a:hover {
    color: #0a1543;
    text-decoration: overline;
}

#lang {
    position: absolute;
    right: 10px;
    top: 20px;

}

#lang a img {
    width: 30px;
    display: block;
}

/*선택된 메뉴 - selM (메뉴 li 에 적용)  */
.selM {
    transform: scale(1.1);
}

.selM a {
    /* 첫번째로 보여질 화면 지정하는 클래스 */
    color: #647bda;
    text-decoration: overline;
}


/* 각 섹션 디자인*/
section.page {
    /*보이는화면 한페이지 전체를 사용하는 설정*/
    width: 100%;
    height: 100%;
    /* outline: 2px solid red; */
}

.page .big {
    font-weight: bold;
}

#page1 {
    background: url(../images/main-img1.jpg)no-repeat top/cover;
}

#page2 {
    background: url(../images/page2-3.jpg)no-repeat top/cover;
}

#page2 .about {
    display: inline-block;
    margin: 300px 0 50px 150px;
    padding: 15px 35px;
    border-radius: 35px;
    background-color: #0a1543;
    color: #fff;
}

#page2 .a_txt {
    width: 50%;
    padding: 100px;
    box-sizing: border-box;
}

#page2 .a_txt p {
    font-size: 20px;
}

#page2 .big {
    font-weight: bold;
}

/* #page2 .iframe_box{
    width:600px;  
} */

#page3 {
    background: url(../images/page3.jpg)no-repeat top/cover;
}

#page3 .b_txt {
    /* padding-bottom: 100px; */
    text-align: right;
    margin-right: 300px;
}

#page3 .business {
    display: inline-block;
    margin: 300px 0 100px 150px;
    padding: 15px 35px;
    border-radius: 35px;
    background-color: #0a1543;
    color: #fff;
}

#page3 .para {
    font-size: 20px;
}

#page4 .Solution {
    display: inline-block;
    margin: 200px 0 100px 150px;
    padding: 15px 35px;
    border-radius: 35px;
    background-color: #0a1543;
    color: #fff;
}

#page4 {}

#page4 .system {
    width: 1280px;
    margin: 0 auto;
    margin-right: 300px;
    border-radius: 15px;
}

#page4 .system .box {
    width: 32%;
    border-radius: 20px;
    overflow: hidden;
    /* outline: 2px solid red; */
}

#page4 .system .box~.box {
    margin-left: 25px;
}

#page4 .system .tit {
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    text-align: center;
    background-color: #0a1543;
    color: #fff;
    font-size: 20px;
   
}

#page4 .system li .fild {
    /* margin-top:5px; */

}

/* #page4 .system li .fild::after{
    content:"";
    width:2px;
    height:70px;
    background-color: #555;
    display: block;
    position:absolute;
    top:-20px;
    left:300px;
} */

#page4 .system li .fild li {
    width: 100%;
    height: 80px;
    /* margin:0 auto; */
    float: none;
    background-color: rgb(140, 212, 214);
    /* color:#fff; */
    font-size: 20px;
    padding: 20px 30px;
    line-height: 20px;
    box-sizing: border-box;
}

#page5 {
    width: 100%;
    height: 80%;
    background: url(../images/page5.jpg)no-repeat top/cover;
    /* outline: 2px solid blue; */
}

#page5 .c_txt {

    position: relative;
}

#page5 .consulting {
    position: absolute;
    display: inline-block;
    margin: 200px 0 100px 150px;
    padding: 15px 35px;
    border-radius: 30px;
    background-color: #0a1543;
    color: #fff;
    position: absolute;
    right: 300px;
    /* outline: 2px solid red; */
}

#page5 .b_wrap li {
    width: 40%;
    position: absolute;
    top: 400px;
    right: 300px;
    transform: translateY(-25%);
    font-size: 20px;

}





ol#bnavi {
    width: 15px;
    position: fixed;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    /*내용의 반만큼 이동*/
    /* outline: 2px solid lime; */
}

ol#bnavi li {
    /* float:none; */
    width: 100%;
    height: 15px;
    margin: 6px 0;
    border: 2px solid #ccc;
    border-radius: 50%;
    /*원만들기*/
    box-sizing: border-box;
    position: relative;
    /*span태그 기준!*/
}

ol#bnavi li a {
    width: 100%;
    height: 100%;
    display: block;
}

ol#bnavi li a span {
    position: absolute;
    right: 200%;
    /*부모너비는 15% = 30px*/
    top: -40%;
    /*pager간격*/
    white-space: nowrap;
    /* white-space = 공백처리-공백을 하나로, 영역 너비를 넘어가도 한줄로 표시*/
    font: bold 0.9rem '맑은 고딕';
    /* text-shadow: 1px 0 #888, -1px 0 #888, 0 1px #888, 0 -1px #888; */
    /*그림자효과로 글자에 테두리넣기 x y*/
    display: none;
}

/*선택된 블릿 -selB*/
.selB {
    background-color: #647bda;
    transform: scale(1.15);
    /*pager크기*/
}

.selB span {
    display: block !important;
    /*선택자에 밀려서 우선순위에 !important 지정함*/
}

footer {
    width: 100%;
    border-top: 1px solid #0a1543;
    padding: 30px 0 30px;
    position:relative;
}

footer .f_wrap {
   position:absolute;
   left:100px;
}
footer .under_logo{
float:left;
}
footer .company{
    float:left;
    margin-left: 30px;
    margin-bottom:30px
}