@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap');
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");
@import url('style.css');




/*Reset*/
* {margin: 0; padding: 0;}
body {letter-spacing: -0.05em; font-family: '나눔바른고딕', 'NanumBarunGothic', sans-serif; background: #f5f5f5;}
li {list-style: none}
a {text-decoration: none; color:#333}
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
img, fieldset {border: 0;}
img {vertical-align: middle;}
button, input, textarea {outline: 0}
legend {font-size: 0; width: 0; height: 0; overflow: hidden; text-indent: -9999px; color:transparent}
::selection {background-color: #136b8d; color: yellow;}



/*pc*/

@media screen and (min-width:813px){
    


/*Layout*/
#header {width: 100%; min-width: 1200px; height: 150px; }
#visual_main {width: 100%; min-width: 1200px;}
    #visual_sub {width: 100%; min-width: 1200px; height: 160px; background: url('../images/visual_sub01.jpg') center top;  }
    
    #section1 {width: 1200px; height: 1110px; margin: 0 auto; }
#section2 {width: 100%; min-width: 1200px; height: 520px; background:  url(../images/section02_bg.jpg) center top no-repeat}
#section3 {width: 1200px; height: 270px; margin: 0 auto;  overflow: hidden;}
    
#footer {width: 100%; min-width: 1200px; height: 230px; background: #043143; float: left; }

/* swiper slider */

.swiper-container {width: 100%; height: 100%; text-align: center; }
.swiper-container img {width: 100%;}
.swiper-container img.visual_mo {display: none;}

/*header*/

#header .topset {width: 1200px; height: 180px; position: absolute; z-index: 2; left: 50%; margin-left: -600px;;;;}
#header .topset h1 {width: 400px; height: 80px;margin: 0 auto; ;}

#header .topset .topmenu {width: 500px; height: 21px; float: right; margin-top: 23px; font-size: 14px; text-align: right; margin-right: 5px;}
#header .topset .topmenu ul li {display:inline-block;;}
#header .topset .topmenu a {padding: 3px 17px; background: #999; border-radius: 30px; font-size: 14px; color: #fff;; }
#header .topset .topmenu a.bt { background: transparent; color: #333; background: url(../images/topmenu_bullet.png) no-repeat 0 7px;}


#header .topset .gnb {width: 1200px; height: 60px;; background: #2c97c0 url(../images/circle.png) no-repeat 1082px -38px; border-radius: 0 0 30px 30px; float: left; box-shadow: 0 5px 10px rgba(0,0,0,0.15); text-align: center; font-size: 0;;}

#header .topset .gnb > ul > li {display: inline-block; height: 60px; line-height: 60px; font-size: 20px; position: relative; transition: all 0.5s; }
#header .topset .gnb > ul > li:hover {background: #43a8cf; border-radius: 5px;}
#header .topset .gnb > ul > li > a {color: #fff; display: block; padding: 0 50px;}

#header .topset .gnb .lnb {position: absolute; width: 100%; background: #1e83aa; font-size: 18px; border-radius: 0 0 20px 20px; padding: 12px 0 18px 0; text-align: left; text-indent: 20px; z-index: -1; overflow:hidden; display:none;}

#header .topset .gnb .lnb li {line-height: 35px;}
#header .topset .gnb .lnb li a {color: #fff; display: block; transition: all 0.5s ;}
#header .topset .gnb .lnb li a:hover {background-color: #106d91;}

    .gnb_mobile_wrap {display: none;}
    .btn_hamberg {display: none;}
    .btn_sns {display: none;}
    .sns_box {display: none;}
    
    .xe-widget-wrapper {overflow: visible !important; }
    /*quick*/

.quick_box {width: 100%; min-width: 1200px; position: absolute; top: 0; }
#quick {width: 80px;  background: #2c97c0; position: absolute; right: 0; top: 200px; z-index: 7; padding-top: 5px; border-radius: 0 0 0 20px; overflow: hidden; }
#quick li { text-align: center; font-size: 16px; margin-top: 10px; padding: 5px 0; border-radius: 20px;}
#quick li a {color: #f5f5f5; }
    #quick li:hover {background: #1d81a7; }
#quick li a span {display: block; margin-top: 5px;}
#quick li.gotop {height: 44px; line-height: 44px; text-align: center; background: #1d81a7; color: #f5f5f5; font-size: 16px; cursor: pointer; border-radius: 0; }


    
    
    
    
    
}














/*tablet*/
/*
@media screen and (min-width:813px) and (max-width:1024px){
    
    
}
*/





















/*★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/


/*mobile*/
@media screen and (max-width:812px){
    /*Layout*/
    #header {width: 100%; height: 100px; }
    #visual_main {width: 100%; }
    #visual_sub {width: 100%; height: 104px; background: url('../images/visual_sub01_mo.jpg') center top  no-repeat; }
    #snb_wrap {width: 100%;  text-align: center; margin: 0 auto;;}
    #section1 {width: 94%;  margin: 0 auto; }
    #section2 {width: 100%; background: url(../images/section02_bg.jpg) center top no-repeat}
    #section2:after {content: ""; clear: both; display: block;}
    #section3 {width: 100%; margin: 0 auto;  text-align: center; }
    #footer {width: 100%;  background: #043143; float: left; }

    /* swiper slider */

    .swiper-container {width: 100%; height: 100%; text-align: center; }
    .swiper-container  img {width: 100%;}
    .swiper-container img.visual_pc {display: none;}
    
    
    
    /*header*/
    #header {height: 86px; }
    #header .topset {width: 100%; height: 86px; }

    #header .topset > h1 {width: 240px; height: 75px; margin: 0 auto; }
    #header .topset > h1 img {width: 100%}
    #header .topset .topmenu {width: 180px; height: 11px; float: right; margin-top: 9px; text-align: right; display: none}

    #header .topset .gnb {width: 100%; height: 11px; background:#2c97c0 url('../images/gnb_gnb.png') 500px no-repeat; }
    #header .topset .gnb ul {display: none}
    
    .btn_sns {width: 30px; height: 30px;  position: absolute; right: 10px; top: 15px; z-index: 10; }
    .btn_sns img {width: 100%;}
    
    .btn_sns.fly {animation: fly 0.3s infinite alternate;}
    @keyframes fly {
        0% { margin-top: -2px;}
        100% {margin-top: 2px;}
    }
    
    .btn_hamberg {width: 25px; height: 20px; border: 0px solid red;  position: absolute; left: 15px; top: 17px; z-index: 10}
    .btn_hamberg span { display: block; width: 18px; height: 2px; background: #106b8e; position: absolute; top: 10px; transition: 0.5s}
    .btn_hamberg span:before,
    .btn_hamberg span:after {content: ""; width: 25px; height: 2px; background: #106b8e; position: absolute; transition: .3s;}
    .btn_hamberg span:before {top: -9px;}
    .btn_hamberg span:after {bottom: -9px;}
    
    .btn_hamberg.close span {background: transparent;}
    .btn_hamberg.close span:before {top: 0; transform: rotate(765deg);}
    .btn_hamberg.close span:after {top: 0; transform: rotate(675deg);}
    
    .dontmove {position: fixed;}
    
    
    
    .gnb_mobile_wrap {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 7; display: none;;}
    
    
    .gnb_mobile_wrap .overlay {width: 100%; height: 100%; background: rgba(0,0,0,0.7);}
    .gnb_mobile_wrap .gnb_mobile {width: 270px; height: 100%; background: #f5f5f5; position: fixed; left: -100%; top: 0; box-shadow: 5px 0 20px rgba(0,0,0,0.5); overflow: auto; transition: 0.3s; }
    
    
    .gnb_mobile_wrap .gnb_mobile.slide_left {left: 0; }
    
    .gnb_mobile > h1 {width: 100%; height: 75px; text-align: center; line-height: 75px; ;}
    .gnb_mobile > h1 img {height: 80%; }
    .gnb_mobile .link_box {width: 100%; height: 40px; }
    .gnb_mobile .link_box a {width: 50%; float: left; line-height: 40px; text-align: center; background: #2c97c0; color: #fff; font-size: 14px;}
    .gnb_mobile .link_box a:last-child {background: #0a5f80;}
    
    
    .gnb_mobile .gnb_mo {width: 90%; margin: 0 auto; }
    .gnb_mobile .gnb_mo > ul > li { line-height: 50px; font-size: 18px; text-indent: 25px; color: #202020; border-bottom: 2px solid #fff;;}
    .gnb_mobile .gnb_mo > ul > li .lnb  {width: 100%; background: #2c97c0; padding: 10px 0 ; display: none;}
    .gnb_mobile .gnb_mo > ul > li:hover .lnb {}
    
    .gnb_mobile .gnb_mo > ul > li .lnb li { width: 100%; height: 27px; line-height: 27px; font-size: 16px; text-indent: 35px }
    .gnb_mobile .gnb_mo > ul > li .lnb li a {color: #fff;}
    
    
    
   
    .sns_box {width: 100%; height: 100%; position: fixed; left: 0; top: -100%; z-index: 7; background: rgba(27,140,128,0.9); transition: 0.3s; }
    .sns_box.motion {top: 0; }
    
    .sns_box ul { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 70%;}
    
    .sns_box ul li {float: left;  width: 49%; text-align: center; padding: 20px 0;  }
    .sns_box ul li a {color: #f5f5f5; }
    .sns_box ul li a span {display: block; margin-top: 12px;;}
    
    .quick_box {display: none; }
    
    
}