@charset "UTF-8";
/* CSS Document */
/* 0420 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Noto+Sans+KR:wght@100..900&display=swap');



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

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

h1 {
    font-family: "Gowun Batang", serif;
}

p {
    font-size: 0.9rem; /* 14px */
    color: #333;
    line-height: 1.4rem; /* 20px */
    font-family: "Noto Sans KR", sans-serif;
}

img { /* 이미지 태그는 인라인 요소이므로 블록 요소로 변경 */
    display : block;
    /* border : 0;
    font-size : 0; 블럭 요소로 변경*/
}

.logo {
    font-family: "Gowun Batang", serif;
}

header, section, footer {
    width: 100%;
}

/*----header----*/
header {
    height : 90px;
    background-color: #A0BED9;
    border-top : 10px solid #0A7AA6;
    position : relative;
}

header > h1 {
    position : absolute;
    top : 10px;
    left : 80px;
    font-size : 2.5rem; /* 40px */
    color : #087F8C;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header > .nav {
    width: 100%;
    height: 90px;
}

header > .nav ul{
    overflow : hidden;
    width: inherit;
    height: inherit;

}

header > .nav ul li {
    float: right;
    width: 10%;
    line-height: 80px;
    text-align: center;
}

header > .nav ul li a {
    color: #d4eafd;
    text-transform: uppercase;
    display : block;
    width: 100%;
    height : 80px;
    transition: 0.3s;}

header > .nav ul li a.home {
background-color: #0A7AA6;
color : #ffffff;
}

header > .nav ul li a:hover:not(.home) {
    background-color: #0A7AA6;
    color : #ffffff;
}

/*----section----*/

.container{
    width: 80%;
    /* background-color: #BF9484; */
    margin : auto;
}
.block{height : 100px;}
.main-banner{
    background-image: url(img/banner.jpg);
        /* background-image: url(img/banner.jpg) no-repeat center / cover; */
    background-position: center;
    background-size : cover;
    background-repeat: no-repeat;
    width: 100%;
    height : 600px;
    position: relative;}
    /* relative는 자식 요소의 위치를 기준으로 삼는다. */
.main-banner div{
    font-size : 7rem;
    color : #eee;
    opacity: 0.5;
    position: absolute;
    top : 244px;
}

.main-banner :first-child {
    left : 5%;
}

.main-banner :last-child {
    right : 5%;
}

.main-banner div:hover {
    opacity : 1;
    transition : 0.3s;}

.content-middle2{
    border-bottom : 1px dotted #326173;
    padding : 50px 0;
}

.content-bottom {
    padding : 50px 0 30px;
}

section h3, p {
    text-align: center;
    margin : 20px 0;
}

.content-top .content-top-nav {
    width: inherit;
    height: 50px;;
}

.content-top .content-top-nav ul {
    width: inherit;
    height: inherit;
    overflow: hidden;
}

.content-top .content-top-nav ul li:first-child,
.content-top .content-top-nav ul li:last-child {
    border: 0;
    border-bottom: 1px solid #326173;
    width: 30%;
    height: inherit;
    background-color: transparent;
}

.content-top .content-top-nav ul li {
    float : left;
    text-align: center;
    line-height: 50px;
    width: calc(40%/3);
    height : 50px;
    border : 1px solid #326173;
    background-color: #ccc;
}

.content-top .content-top-nav ul li:nth-child(2) {
    border-bottom : 0;
    background-color: #fff;
}

.content-top .content-top-nav ul li:nth-child(3){
    border-left : 0;
    border-right : 0;
}

.content-top img{
    width: 100%;
    height: 100%;
}
.content-top-con {
width: inherit;
overflow : hidden;
padding-bottom : 60px;
border-bottom : 1px dotted #326173;
}
.content-top-con div {
    float: left;
    margin-top : 30px;
}
.content-top-con div:first-child{
    width: 41.66666666667%;
}

.content-top-con div:last-child{
    width: 56.25%;
    float : right;
}

.content-top-con p {
    text-align: left;
}

.content-top-con ul {
    width: 100%;
    overflow : hidden;
}

.content-top-con ul li {
background-image: url(img/check-solid.png);
background-size: 15px;
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 20px;
margin : 10px 0;
}

.content-top-con ul li:hover {
    color : #0A7AA6;
    transition : 0.3s;
}


.content-middle .con-mid-img img{
    width: 100%;
    height: 250px;
}

.content-middle .con-mid-img ul{
    overflow: hidden;
    width: inherit;
}

.content-middle .con-mid-img ul li{
    float: left;
    width: 32.29166666667%;
    margin-right: 1.5625%;
    margin-bottom : 1.5625%;
}

.content-middle .con-mid-img ul li:nth-child(3),
.content-middle .con-mid-img ul li:last-child{
    margin-right: 0;
}


.content-middle2 .mid2-con ul {
    width: 100%;
    overflow: hidden;
}

.content-middle2 .mid2-con ul li {
    width: 47.9166666666667%; /*460px*/
    float : left;
    /* background-color: #087F8C; */
    margin-bottom :2.08333333333%;
    position : relative;
}

.content-middle2 .mid2-con ul li:nth-child(2n),
.content-middle2 .mid2-con ul li:last-child {
    float : right;
}

/* .content-middle2 .mid2-con ul li > div {
    float : left;
} */

.content-middle2 .mid2-con ul li .con-txt {
    position: absolute;
    top : 30px;
    left : 130px;
    /* background-color: #0A7AA6; 임시지정 */
    line-height: 1.2rem;
}

.content-middle2 .mid2-con ul li .con-txt span {
    color : red;
}

.content-middle2 .mid2-con ul li .con-num {
    width : 100px;
    height: 100px;
    background-color:#0A7AA6;
    border-radius: 50%;

}

.mid2-con ul li .con-num > p {
    padding-top : 30px;
}

.mid2-con ul li .con-txt {
    text-align: left;
    color : red;
}



.content-bottom ul {
    width: 90%;
    margin : auto;
    overflow : hidden;
    text-align: center;
}

.content-bottom ul li {
    display : inline-block;
    margin : 1.5625% 2.08333333333%;
    text-align: center;
}
.content-bottom ul li i {
    font-size : 3rem;
    color : #ccc;
}

.content-bottom ul li i:hover {
    color : #0A7AA6;
    transition : 0.3s;
}

footer {
    width: 100%;
    height: 300px;
    background-color: #A0BED9;
    border-top : 10px solid #0A7AA6;
    display : flex;
    justify-content: center;
    align-items: center;
}