/* section .logo */
#wrap section{
    width: 80%; margin: auto; margin-top: 8%;
    /*border: 1px solid red;*/ 
}
#wrap section .logo{
    /*height: 100px; border: 1px solid blue;*/
    text-align: center; 
}
#wrap section div h3{
    color: #333;
    font-size: 1.5rem; font-weight: 700;
    padding-bottom: 10px; text-align: center;
}
#wrap section div hr{width: 90%; height: 3px; background-color: #333; border: 0;}
#wrap section .logo img{
   /* display: block;*/
    width: 100%;
}


/* section .cardNews */
.cardNews{margin-bottom: 10%;}
.swiper-container {
    width: 90%;
    height: 90%;
}

/* .swiper-slide */
.swiper-slide {
    /*text-align: center;
    font-size: 18px;
    background: #fff;*/
    width: 100%; margin-bottom: 3%;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide > img{width: 100%;}

/* .swiper-pagination */
.swiper-pagination-bullet{background-color: #035373;}
.swiper-pagination-bullet-active{background-color: #fff;}
.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 5%;
}


/* section .page */
#wrap section{
    width: 80%; margin: auto; margin-top: 8%;
    /*border: 1px solid red;*/ 
}
#wrap section .page{
    /*height: 100px; border: 1px solid blue;*/
    text-align: center; 
    margin-bottom: 10%;
}
#wrap section .page h3{
    color: #333;
    font-size: 1.5rem; font-weight: 700;
    padding-bottom: 10px; text-align: center;
}
#wrap section .page hr{width: 90%; height: 3px; background-color: #333; border: 0;}
#wrap section .page a{display: block; margin-bottom: 1.5%;}
#wrap section .page img{/* display: block;*/width: 100%;}
#wrap section .page a span{display: block;}
#wrap section .page a:hover span{}


/* section .print */
#wrap section{
    width: 80%; margin: auto; margin-top: 8%;
    /*border: 1px solid red;*/ 
}
#wrap section .print{
    /*height: 100px; border: 1px solid blue;*/
    text-align: center; 
    margin-bottom: 10%;
}
#wrap section .print h3{
    color: #333;
    font-size: 1.5rem; font-weight: 700;
    padding-bottom: 10px; text-align: center;
}
#wrap section .print hr{width: 90%; height: 3px; background-color: #333; border: 0;}
#wrap section .print a{display: block; margin-bottom: 1.5%;}
#wrap section .print img{/* display: block;*/width: 100%;}
#wrap section .print a span{display: block;}
#wrap section .print a:hover span{}

/* 태블릿 */
@media screen and (min-width:768px){    
    /* section .logo*/
    #wrap section{width: 95%;}
    #wrap section .logo h3 {font-size: 2rem;}
    #wrap section .logo {margin-bottom: 10%;}
    #wrap section .logo .box {display: flex; margin: 5% 0; flex-wrap: wrap;}
    #wrap section .logo .box a {display: block; width: 50%;}
    #wrap section .logo .box a img {
        /* display: block;*/
        width: 100%;
    }
    
    /* section .cardNews*/
    #wrap section .cardNews h3 {font-size: 2rem;}
    #wrap section .cardNews {margin-bottom: 10%;}
    #wrap section .cardNews .box {display: flex; margin: 5% 0; flex-wrap: wrap;}
    #wrap section .cardNews .box .swiper-container {width: 48.5%;}
    #wrap section .cardNews .box .swiper-slide {}
    #wrap section .cardNews .box .swiper-slide img {
         /*display: block;*/width: 100%;
    }
    
    .swiper-slide {
        /*text-align: center;
        font-size: 18px;
        background: #fff;*/
        width: 100%;
        margin-bottom: 3%;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide > img {
        width: 100%;
    }

    /* .swiper-pagination */
    .swiper-pagination-bullet {
        background-color: #035373;
    }

    .swiper-pagination-bullet-active {
        background-color: #fff;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 5%;
    }
    
    /* section .page */
    #wrap section .page {margin-bottom: 10%;}
    #wrap section .page h3 {font-size: 2rem;}
    #wrap section .page .box {display: flex; margin: 5% 0; flex-wrap: wrap;}
    #wrap section .page a {display: block; width: 48.5%; /*border: 1px solid red;*/}
    #wrap section .page a:nth-child(odd) {margin-right: 1.5%;}
    #wrap section .page img {width: 100%; /*display: block;*/}
}

/* PC */
@media screen and (min-width:1024px){
    /* section */
    #wrap section{width: 85%;}
    #wrap section .logo h3 {font-size: 3rem; padding-bottom: 1.5%;}
    #wrap section .logo .box a {display: block; width: 33.33%;}
    #wrap section .logo .box a img {width: 100%;}
    
    /* section .cardNews*/
    #wrap section .cardNews h3 {font-size: 3rem; padding-bottom: 1.5%;}
    #wrap section .cardNews .box .swiper-container {width: 32.33%;}
    #wrap section .cardNews .box .swiper-slide {}
    #wrap section .cardNews .box .swiper-slide img {
         /*display: block;*/width: 100%;
    }
    
    .swiper-slide {
        /*text-align: center;
        font-size: 18px;
        background: #fff;*/
        width: 100%;
        margin-bottom: 3%;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide > img {
        width: 100%;
    }

    /* .swiper-pagination */
    .swiper-pagination-bullet {
        background-color: #035373;
    }

    .swiper-pagination-bullet-active {
        background-color: #fff;
    }

    .swiper-container-horizontal > .swiper-pagination-bullets,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        bottom: 5%;
    }
    
    /* section .page */
    #wrap section .page {margin-bottom: 10%;}
    #wrap section .page h3 {font-size: 3rem; padding-bottom: 1.5%;}
    #wrap section .page .box{box-sizing: border-box;}
    #wrap section .page .box a {display: block; width: 32.83%;}
    #wrap section .page .box a:nth-child(even) {margin-left: 0 1.5%;}
    #wrap section .page .box a:nth-child(odd) {margin-right: 0;}
    #wrap section .page img {/*display: block;*/}
    
    /* section .print */
    #wrap section{width: 95%;}
    #wrap section .print{margin-bottom: 10%;}
    #wrap section .print .box {display: flex; margin: 5% 0; flex-wrap: wrap;}
    #wrap section .print .box a {display: block; width: 50%;}
    #wrap section .print .box a img {
        /* display: block;*/
        width: 100%;
    }
}