/*  폰트 적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
    font-family: "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body,
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* 라이브러리 */
.con {
    margin: 0 auto;
}

.img-box > img {
    width: 100%;
    height: auto;
    display: block;
}

.row::after {
    content: "";
    display: block;
    clear: both;
}

.cell {
    float: left;
    box-sizing: border-box;
}

.cell-right {
    float: right;
    box-sizing: border-box;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.text-align-center {
    text-align: center;
}

.line-height-0-ch-only {
    line-height: 0;
}

.line-height-0-ch-only > * {
    line-height: normal;
}

.relative {
    position: relative;
}

.absolute-left {
    position: absolute;
    left: 0;
}

.absolute-right {
    position: absolute;
    right: 0;
}

.absolute-middle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*커스텀*/

.sub-head {
    position: fixed;
    height: 90px;
    width: 100%;
    background-color: white;
    box-shadow: 0 10px 35px 0 rgba(210, 210, 210, 0.5);
    z-index: 10000;
}

.sub-head .content {
    position: relative;
}

.sub-head .content .img-box {
    position: absolute;
    left: 2%;
    width: 210px;
}

/*색션1*/
.section1 {
    background-image: url(../img/bg_02.png);
    background-size: cover;
    width: 100%;
    height: auto;
    padding-top: 150px;
    padding-bottom: 50px;
}

h1 {
    color: #031D5B;
    text-align: center;
    margin: 0 auto;
    font-size: 40px;
}

.section1 .container-box {
    height: auto;
    width: 1500px;
    margin: 0 auto;
    margin-top: 70px;
}

.section1 .container-box .img-box {
    width: 220px;
    margin-left: 10px;
    margin-right: 10px;
}

.section1 br {
    display: none;
}

/*섹션2*/
.section2 {
    background-color: #313A5A;
    padding-top: 90px;
    padding-bottom: 90px;
}

.section2 h1 {
    color: #fff;
}

.section2 h1 br {
    display: none;
}

.section2 .container-box {
    width: 1500px;
    margin: 0 auto;
    margin-top: 100px;
}

.section2 .img-box {
    padding-left: 10px;
    padding-right: 10px;
}

.img-box p {
    text-align: center;
    color: white;
}

.section2 .container-box .relative {
    position: relative;
    overflow: visible;
    padding-left: 30px;
    padding-right: 200px;
}

.section2 .relative .finger {
    position: absolute;
    top: 42%;
    left: 48%;
    transform: translateX(-20%);
    right: auto;
}


.section2 .relative .pointer {
    position: absolute;
    padding: 0;
    top: 42%;
    left: 80%;
    transform: translateX(-50%);
    right: auto;
}

.section2 .relative .text {
    width: 200px;
    position: absolute;
    padding: 0;
    font-size: 14px;
    text-align: center;
    top: 32%;
    left: 80%;
    transform: translateX(-50%);
    right: auto;
    color: white;
}

/*푸터*/
footer {
    background-color: #1e233a;
    padding: 40px 0px;
}

footer p {
    color: #ccc;
    margin: 0 auto;
    text-align: center;
}

/*반응형*/
@media (max-width: 1500px) {
    .section1 .container-box {
        width: 800px;
    }

    .section2 > .container-box {
        width: 800px;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {
    .section1 .container-box {
        width: 500px;
    }

    .section2 > .container-box {
        width: 500px;
    }
    
    .section2 > .container-box .finger{
        display: none;
    }
    .section2 > .container-box .pointer{
        display: none;
    }
    .section2 > .container-box .text{
        display: none;
    }
    
    .section2 > .container-box .relative{
        padding: 0 10px;
    }

    .section1 h1 br {
        display: block;
    }

    .section2 h1 br {
        display: block;
    }

    h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 575.98px) {}