/****** 공통사항 ******/
.main{background: url(../images/bg/bg_main.jpg) repeat center top;}
.main .container{padding: 60px 0 90px;}
.h4_grd{height: 50px;padding: 13px 30px;background: linear-gradient(90deg, #34ccc3, #1d749d);font-size: 18px;color: white;}

/* swiper slider */
.visual_slide{ width: 100%; height: 520px; transition: height 0.2s ease-in-out; }
.visual_img{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.2s ease-in-out; }
.visual_img>a{ width: 100%; height: 100%; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.visual_img>a>div{ width: 100%; height: 75%; max-width: 1200px; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start; transition: all 0.2s ease-in-out; }
.visual_img>a>div>h4{ width: 100%; font-size: 34px; color: rgb(0,67,133); font-weight: bold; transition: all 0.2s ease-in-out; }
.visual_img>a>div>h5{ width: 100%; font-size: 34px; color: rgb(255,255,255); font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5); transition: all 0.2s ease-in-out; }
.visual_img>a>div>p{ width: 210px; height: 40px; border: 1px solid rgb(255,255,255); display: flex; flex-flow: row wrap; transition: all 1s ease-in-out; }
.visual_img>a>div>p>span{ width: 100%; height: 100%; font-size: 24px; color: rgb(255,255,255); font-weight: bold; text-align: center; line-height: 38px; transition: all 0.3s ease-in-out; }
/* .visual_img>a>div>p:hover>span{ background-color: rgb(255,255,255); color: rgb(185,185,185); } */
.visual_img>a>ul{ width: 100%; height: 75%; max-width: 1200px; display: flex; flex-flow: row nowrap; transition: all 0.2s ease-in-out; }
.visual_img>a>ul>li{ width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; transition: all 0.2s ease-in-out; }
.visual_img>a>ul>li>h4{ width: 100%; font-size: 34px; color: rgb(0,67,133); font-weight: bold; word-break: keep-all; text-align: center; transition: all 0.2s ease-in-out; }
.visual_img>a>ul>li>p{ width: 100%; width: 210px; height: 40px; border: 1px solid rgb(255,255,255); display: flex; flex-flow: row wrap; transition: all 1s ease-in-out; }
.visual_img>a>ul>li>p>span{ width: 100%; height: 100%; font-size: 24px; color: rgb(255,255,255); font-weight: bold; text-align: center; line-height: 38px; transition: all 0.3s ease-in-out; }
/* .visual_img>a>ul>li>p:hover>span{ background-color: rgb(255,255,255); color: rgb(185,185,185); } */

@media all and (max-width:1200px){
    .visual_slide{ height: 480px; }
    .visual_img>a>div>h4{ font-size: 28px; }
    .visual_img>a>div>h5{ font-size: 28px; }
    .visual_img>a>div>p>span{ font-size: 20px; }
    .visual_img>a>ul>li>h4{ font-size: 28px; }
    .visual_img>a>ul>li>p>span{ font-size: 20px; }
}
@media all and (max-width:960px){
    html body {overflow-x: initial}
    .swiper-container { position: sticky!important;top:110px; z-index:1000!important;}
    .visual_slide{ height: 400px; }
    .visual_img>a>div>h4{ font-size: 26px; }
    .visual_img>a>div>h5{ font-size: 26px; }
    .visual_img>a>div>p{ width: 180px; height: 35px; }
    .visual_img>a>div>p>span{ font-size: 18px; line-height: 33px; }
    .visual_img>a>ul>li>h4{ font-size: 26px; }
    .visual_img>a>ul>li>p{ width: 180px; height: 35px; }
    .visual_img>a>ul>li>p>span{ font-size: 18px; line-height: 33px; }
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 10px !important; }
}
@media all and (max-width:740px){
    .visual_slide{ height: 320px; }
    .visual_img>a>div>h4{ font-size: 22px; }
    .visual_img>a>div>h5{ font-size: 22px; }
    .visual_img>a>div>p{ width: 160px; height: 30px; }
    .visual_img>a>div>p>span{ font-size: 16px; line-height: 28px; }
    .visual_img>a>ul>li>h4{ font-size: 22px; }
    .visual_img>a>ul>li>p{ width: 160px; height: 30px; }
    .visual_img>a>ul>li>p>span{ font-size: 16px; line-height: 28px; }
}
@media all and (max-width:600px){
    .visual_slide{ height: 240px; }
    .visual_img>a>div>h4{ font-size: 16px; }
    .visual_img>a>div>h5{ font-size: 16px; }
    .visual_img>a>div>p{ width: 120px; height: 26px; }
    .visual_img>a>div>p>span{ font-size: 14px; line-height: 24px; }
    .visual_img>a>ul>li>h4{ font-size: 16px; }
    .visual_img>a>ul>li>p{ width: 120px; height: 26px; }
    .visual_img>a>ul>li>p>span{ font-size: 14px; line-height: 24px; }
}
@media all and (max-width:480px){
    .visual_slide{ height: 180px; }
    .visual_img>a>div{ align-items: center; }
    .visual_img>a>div>h4{ font-size: 14px; text-align: center; }
    .visual_img>a>div>h4>span{ display: none; }
    .visual_img>a>div>h5{ font-size: 14px; text-align: center; }
    .visual_img>a>div>h5>span{ display: none; }
    .visual_img>a>div>p{ width: 80px; height: 22px; }
    .visual_img>a>div>p>span{ font-size: 12px; line-height: 20px; }
    .visual_img>a>ul>li>h4{ font-size: 14px; }
    .visual_img>a>ul>li>p{ width: 100px; height: 22px; }
    .visual_img>a>ul>li>p>span{ font-size: 12px; line-height: 20px; }
    /*.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ display: none; }*/
}
@media all and (max-width:400px){
    .visual_slide{ height: 180px; }
    .visual_img>a>div>h4{ font-size: 14px; }
    .visual_img>a>div>h5{ font-size: 14px; }
    .visual_img>a>div>p{ width: 80px; height: 22px; }
    .visual_img>a>div>p>span{ font-size: 12px; line-height: 20px; }
    .visual_img>a>ul>li>h4{ font-size: 14px; }
    .visual_img>a>ul>li>p{ width: 100px; height: 22px; }
    .visual_img>a>ul>li>p>span{ font-size: 12px; line-height: 20px; }
}

.visual_slide .swiper-button-prev{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E"); transition: all 0.2s ease-in-out; }
.visual_slide .swiper-button-prev:hover{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23BBBBBB'%2F%3E%3C%2Fsvg%3E"); }
.visual_slide .swiper-button-next{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E"); transition: all 0.2s ease-in-out; }
.visual_slide .swiper-button-next:hover{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23BBBBBB'%2F%3E%3C%2Fsvg%3E"); }







/* 메인 슬라이드 */
.main_slide{ width: 100%; height: 520px; }
.main_slide div{ overflow: hidden; }
.bx-wrapper img{ max-width: none !important; height: 520px; transition: all 0.2s ease-in-out; cursor: pointer; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { width: 100% !important; display: flex; justify-content: center; bottom: 10px; }
.bx-controls-auto{ bottom: 10px !important; }
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: rgb(255,255,255) !important; }
.bx-wrapper{ margin-bottom: 0 !important; border: 0 !important; }
.bx-controls-direction{ display: none; }

@media (max-width:960px){

    /* 슬라이더 */
    .bx-wrapper img{ max-width: none !important; height: 300px; }

}


@media (max-width:480px){

    /* 슬라이더 */
    .bx-wrapper img{ max-width: none !important; height: 200px; }

}






/* 메인 컨텐츠 */
.content01{ width: 100%; margin: 0 auto; padding: 100px 20px; max-width: 1200px; display: flex; flex-flow: row wrap; }
.main_title{ width: 100%; text-align: center; margin-bottom: 20px; }
.main_title span{ font-size: 35px; border-bottom: 2px solid rgb(0,0,0); margin: auto; }
.content_area01{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-around; }
.content_area01 li{ width: 30%; height: 210px; border: 1px solid rgb(230,230,230); }
.content_area01 li h4{ margin: 30px 0 40px; text-align: center; font-size: 20px; }
.subcontent_01_01{ display: flex; flex-flow: row nowrap; justify-content: space-around; }
.subcontent_01_01 div{ width: 20%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.subcontent_01_01 div img{ height: 50px; margin-bottom: 10px; }
.subcontent_01_01 div p{ font-size: 13px; word-break: keep-all; text-align: center; }
.subcontent_01_02{ padding: 0 2%; display: flex; flex-flow: row nowrap; justify-content: space-around; }
.subcontent_01_02 div{ width: 30%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.subcontent_01_02 img{ height: 80px; transition: all 0.2s ease-in-out; }
.subcontent_01_03{ padding: 0 2%; display: flex; flex-flow: row nowrap; justify-content: space-around; }
.subcontent_01_03 div{ width: 20%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.content02_bg{ width: 100%; background-position: center; background-repeat: repeat; background-size: 100% auto; background-attachment: fixed; }
.content02{ width: 100%; margin: 0 auto; padding: 60px 20px; max-width: 1200px; display: flex; flex-flow: row wrap; }
.content_area02{ width: 100%; margin-top: 40px; display: flex; flex-flow: row nowrap; justify-content: space-around; }
.content_area02 li{ width: 30%; display: flex; flex-flow: row wrap; justify-content: center; }
.content_area02 li p{ width: 100%; background-color: rgb(51,51,51); color: rgb(255,255,255); text-align: center; font-size: 25px; padding: 5px 0; }
ul[class^="subcontent_02_"]{ width: 100%; display: flex; margin: 10px 0 30px; flex-flow: row nowrap; justify-content: space-around; align-items: center; }
ul[class^="subcontent_02_"] li{ width: 30%; border-radius: 200px; padding: 5px; background-color: rgb(255,255,255); display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; }


.content03_area{ width: 100%; position: relative; }
.content03_bg{ width: 100%; height: 40%; background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; bottom: 0; left:0; }
.content03{ width: 100%; margin: 0 auto; padding: 60px 20px; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; overflow: hidden; }
.co_video{ width: 100%; max-width: 1200px; margin-top: 40px; background: rgb(0,0,0); position: relative; z-index: 10; }

.content04{ width: 100%; margin: 0 auto; padding: 60px 20px; max-width: 980px; display: flex; flex-flow: row wrap; justify-content: center; overflow: hidden; }
#map{ width: 100%; height: 400px; margin-top: 50px; }
.content04 .content_area04{ width: 100%; margin-top: 40px; display: flex; flex-flow: row nowrap; justify-content: space-between; }
.content04 .content_area04 li:nth-of-type(1){ width: 50%; }
.content04 .content_area04 li:nth-of-type(2){ width: 45%; display: flex; flex-flow: row wrap; justify-content: center; }
.content04 .co_info{ min-width: 470px; font-size: 18px; background-position: 90% 60%; background-repeat: no-repeat; background-size: auto 40%; }
.content04 .co_info div{ display: flex; flex-flow: row wrap; margin: 5px 0; }
.content04 .co_info div:nth-of-type(2), .content04 .co_info div:nth-of-type(5){ margin-bottom: 30px; }
.content04 .co_info_01{ width: 50px; font-weight: bold; }
.content04 .co_info_02{ width: 130px; font-weight: bold; }
.content04 .contect{ width: 100%; }
.content04 .contect input{ width: 100%; border: 1px solid rgb(220,220,200); font-size: 14px; margin: 5px 0; padding: 10px; }
.content04 .contect textarea{ width: 100%; height: 130px; border: 1px solid rgb(220,220,200); font-size: 14px; margin: 5px 0; padding: 10px; }
.content04 .submit_btn{ width: 100%; background-color: rgb(0,72,145); color: rgb(255,255,255); font-size: 16px !important; font-weight: bold; border: 0 !important; }

.content05_bg{ width: 100%; background-color: rgb(225,225,225); }
.content05{ width: 100%; margin: 0 auto; padding: 60px 20px 100px; max-width: 1200px; display: flex; flex-flow: row wrap; overflow: hidden; }
.subcontent_05{ width: 100%; margin-top: 40px; padding: 0 2%; display: flex; flex-flow: row nowrap; justify-content: space-around; }
.subcontent_05 div{ display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.subcontent_05 figure{ display: none; }


@media (max-width:960px){

    /* 메인 컨텐츠 */
    .content01{ padding: 50px 20px; }
    .main_title span{ font-size: 30px; }
    .content_area01{ width: 100%; flex-flow: row wrap; }
    .content_area01 li{ width: 100%; max-width: 450px; margin-top: 20px; }
    .content_area02{ margin-top: 0; flex-flow: row wrap; }
    .content_area02 li{ width: 100%; display: flex; flex-flow: row wrap; justify-content: center; margin-top: 40px; }
    .content_area02 li p{ width: 100%; background-color: rgb(51,51,51); color: rgb(255,255,255); text-align: center; font-size: 25px; padding: 5px 0; }
    ul[class^="subcontent_02_"]{ width: 100%; display: flex; margin: 10px 0 30px; flex-flow: row nowrap; justify-content: space-around; align-items: center; padding: 0 10%; }
    ul[class^="subcontent_02_"] li{ max-width: 130px; }

    .content04 .content_area04{ flex-flow: row wrap; margin-top: 20px; }
    .content04 .content_area04 li:nth-of-type(1){ width: 100%; }
    .content04 .content_area04 li:nth-of-type(2){ width: 100%; margin-top: 20px;}
    .content04 .co_info{ min-width: 0; font-size: 15px; }
    .content04 .co_info div:nth-of-type(2), .content04 .co_info div:nth-of-type(5){ margin-bottom: 15px; }
    #map{ width: 100%; height: 300px; }
    .content04 .co_info_02{ width: 100px; }

    .content05_bg{ width: 100%; background-color: rgb(225,225,225); }
    .content05{ width: 100%; margin: 0 auto; padding: 60px 20px 100px; max-width: 1200px; display: flex; flex-flow: row wrap; }
    .subcontent_05{ flex-flow: row wrap; margin-top: 0; }
    .subcontent_05 div{ margin: 40px 20px 0 20px; }
    .subcontent_05 figure:nth-of-type(1){ width: 100%; height: 0; display: block; }

}


@media (max-width:480px){

    /* 메인 컨텐츠 */
    .content01{ padding: 50px 20px; }
    .main_title span{ font-size: 24px; }
    .content_area01{ width: 100%; flex-flow: row wrap; }
    .content_area01 li{ width: 100%; max-width: 450px; margin-top: 20px; }
    .subcontent_01_02 img{ height: 60px; }
    .content_area02{ margin-top: 0; flex-flow: row wrap; }
    .content_area02 li{ width: 100%; display: flex; flex-flow: row wrap; justify-content: center; margin-top: 40px; }
    .content_area02 li p{ width: 100%; background-color: rgb(51,51,51); color: rgb(255,255,255); text-align: center; font-size: 25px; padding: 5px 0; }
    ul[class^="subcontent_02_"]{ width: 100%; display: flex; margin: 10px 0 30px; flex-flow: row nowrap; justify-content: space-around; align-items: center; padding: 0 10%; }
    ul[class^="subcontent_02_"] li{ max-width: 130px; font-size: 14px; }

    .co_video{ margin-top: 20px; }

    #map{ width: 100%; height: 250px; margin-top: 20px; }
    .content04 .content_area04{ flex-flow: row wrap; margin-top: 20px; }
    .content04 .content_area04 li:nth-of-type(1){ width: 100%; }
    .content04 .content_area04 li:nth-of-type(2){ width: 100%; margin-top: 20px;}
    .content04 .co_info{ min-width: 0; font-size: 15px; }
    .content04 .co_info div:nth-of-type(2), .content04 .co_info div:nth-of-type(5){ margin-bottom: 15px; }

    .content05_bg{ width: 100%; background-color: rgb(225,225,225); }
    .content05{ width: 100%; margin: 0 auto; padding: 60px 20px 100px; max-width: 1200px; display: flex; flex-flow: row wrap; }
    .subcontent_05{ flex-flow: row wrap; margin-top: 0; }
    .subcontent_05 div{ margin: 40px 20px 0 20px; }
    .subcontent_05 figure:nth-of-type(2){ width: 100%; height: 0; display: block; }

}