/* roboto http://www.google.com/fonts/earlyaccess */

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 100;
  src: url('../font/roboto-v27-latin-100.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 300;
  src: url('../font/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 400;
  src: url('../font/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 500;
  src: url('../font/roboto-v27-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 700;
  src: url('../font/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  /*font-style: normal;*/
  font-weight: 900;
  src: url('../font/roboto-v27-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../font/roboto-v27-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/roboto-v27-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/roboto-v27-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../font/roboto-v27-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/roboto-v27-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}






/*------------
reset
------------*/

* {font-family: 'Roboto', Arial, Verdana, MS P Gothic, sans-serif;}
*, ::after, ::before{box-sizing: border-box; scroll-behavior: smooth;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, p, span, i, input, select{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    font-weight:normal;
    font-family: 'Roboto', Arial, Verdana, MS P Gothic, sans-serif;
    /* font-family:-apple-system, BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','NanumGothic','나눔고딕','Dotum','돋움',sans-serif; */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body, html {
    height: 100%;
    padding:0;
    margin:0;
    font-size: 17px;
  line-height:25px;
  text-size-adjust : 100%;
  overflow-y:auto;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
  width:100%
}

a, a:hover, a:active{
    text-decoration: none;
   color:#000;
}

b{
    font-weight:bold;
}

i{
    font-size:1.1em
}

strong{
    font-weight:bold
}

table caption, .hidden{
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
  overflow: hidden;
}

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border: 0;
}

/*
img {
   image-rendering: -webkit-optimize-contrast;
}
*/




/*------------------------
input
------------------------*/

input{
  appearance: none;
  border:0;
    border-radius: 0;
    border:1px solid #dde2e6;
    height:44px;
    padding-left:8px;
    font-weight:normal;
    background:#fff;
  padding:0px 10px;
  font-size:15px;
  display:inline-block;
  vertical-align:middle;
  border-radius:4px
}

input::placeholder{color:#c2c7ce; font-weight:300; opacity: 1}
/*input[readonly] {background:#f1f3f8; color:#5d5d5d}*/
input:focus {outline:none;}
input:focus {border:1px solid #0191f5}
input[type=button]{padding:0}

input[type="checkbox"][disabled], input[type="checkbox"][readonly]{
  background:#edf6fc;
  color:#5d5d5d
}
/*캘린더, 인원*/
.cal-input{
    width:140px;
    background: #fff url(../images/calendar_icon.png) no-repeat;
    background-position:92% center;
    cursor: pointer;
}
.en-cal-input{
    background: #fff url(../images/calendar_icon.png) no-repeat;
    background-position:92% center;
    cursor: pointer;
}
.time-input{
    background: #fff url(../images/time_icon.png) no-repeat;
    background-position:90% center;
    cursor: pointer;
}



/*------------------------
select
------------------------*/

select {
   appearance: none;
   background: #fff url(../images/select_arrow.png) no-repeat;
   background-position:93% center;
   height:44px;
   width:100px;
   padding:0px 10px;
   border: 1px solid #dde2e6;
   font-size:15px;
   display:inline-block;
   vertical-align:middle;
   border-radius:4px
}

select::-ms-expand {
    display: none;
}

select[readonly] {background:#f5f5f5; color:#5d5d5d}
select:focus {outline:none;}
select:focus {border:1px solid #0191f5}






/*------------------------
check box
------------------------*/

.ckdbox {
    position: relative;
    display:inline;
}

.ckdbox input[type="checkbox"] {
  display: none;
}

.ckdbox input[type="checkbox"] + label {
    cursor: pointer;
    display:inline-block;
}

.ckdbox input[type="checkbox"] + label:before {
     content: ' ';
     display: inline-block;
   width: 14px;
   height: 14px;
   text-align: center;
   border: 1px solid #dde2e6;
   background: #fff;
     vertical-align:middle;
    }

.ckdbox input[type="checkbox"]:checked + label:before {
     background:#0070ff url(../images/ico_ckd.png) no-repeat center center;
   background-size:9px;
     border: 1px solid #0070ff;
     width: 14px;
   height: 14px;
}



/*------------------------
check box
------------------------*/

.filebox input{
   font-size:12px
}

.filebox input[type="file"] {
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
  overflow: hidden;
  border: 0;
}

.filebox label {
   display: inline-block;
   color: #000;
   vertical-align: top;
   background-color: #fff;
   border: 1px solid #dde2e6;
   height: 30px;
   line-height: 30px;
   cursor: pointer;
   padding:0px 10px;
   font-size:12px;
   box-shadow: -2px 2px 4px rgb(0 0 0 / 6%);
} /* named upload */

.filebox .upload-name {
   display: inline-block;
   line-height: normal;
   vertical-align: middle;
   background-color: #f1f3f8;
   border: 1px solid #eff3f7;
   appearance: none;
 }




 /*------------------------
 radio
 ------------------------*/

 .i-radio {
    position: relative;
    height: 16px;
    line-height: 16px;
    cursor: pointer;
    display: inline-block;
    padding-left:20px
 }

 .i-radio input {
   position: absolute;
   z-index:-1;
   width: 1px;
   height: 1px;
   margin: -1px;
   clip: rect(1px, 1px, 1px, 1px);
   clip-path:inset(50%);
   overflow: hidden;
     opacity:0;
 }

 .i-radio .ico {
    position:absolute;
    left:0px;
    top:0px;
    width:16px;
    height:16px;
    /*background:url(../images/ico_radio_before.png) no-repeat 0 0;*/
   background:#fff;
   border:1px solid #dde2e6;
   border-radius:15px
 }

 .i-radio input:checked + .ico {
    background-position:0 -40px;
    /*background:url(../images/ico_radio_after.png) no-repeat 0 0;*/
   background:#fff;
   border:5px solid #0191f5;
   border-radius:15px
 }




/*------------------------
드래그색상
------------------------*/

::selection {
    background:#0191f5;
    color: #fff;
    text-shadow: none;
}




/*------------------------
common
------------------------*/

#wrap{
   width:100%;
   min-width:320px;
   height:100%;
   margin:auto;
   background: #fff;
}

#container{
   position: relative;
   width: 100%;
   /*height:100%;*/
   padding-top:86px
}

/*#container .title{
   font-weight:600;
   letter-spacing:-2px
}
*/
.content{
  width:100%;
  margin:auto;
  position:relative;
}

.section-area{
  max-width:1480px;
  text-align: center;
  margin:auto;
  position:relative;
}





/*** header ***/
#header{
    width: 100%;
    min-width: 320px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(150,150,150,.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
}

#header.active{
   background:rgba(255,255,255,1);
   border-bottom:1px solid #e6e8ec;
   box-shadow: -2px 2px 4px rgba(0,0,0,0.04);
   transition-duration: 0.5s;
   transition-timing-function: ease;
}

#header.deactive{
   /*background-color: transparent;*/
   transition-duration: 0.5s;
   transition-timing-function: ease;
}

#header.active #gnb .menu{
  border-top:1px solid #e6e8ec;
}

#header.active:hover #gnb .menu{
  border-top:1px solid #e6e8ec;
}

#header.active #gnb .menu li a{
   color:#000
}

#header.active #gnb .menu li a:hover{
   font-weight:bold
}

#header.active #gnb .menu li.on a{

}




/*** gnb ***/
#gnb{
   position:relative;
   margin:auto;
}

#gnb .top-head{
  height: 86px;
  line-height: 86px;
  display:flow-root;
  background: #fff;
  position: relative;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}

#gnb .top-head .area{
  max-width:1680px;
  margin:auto;
}

#gnb .top-head .logo{
  float:left;
  line-height:normal;
  margin-top:20px
}

#gnb .top-head .r-cont{
  float:right
}

#gnb .top-head .r-cont li{
  float:left;
  margin-left:30px
}

#gnb .top-head .r-cont li.nav{
  display:none
}

#gnb .top-head .r-cont li:first-child{
  margin-right:0
}

#gnb .top-head .language a{
  color:#b7c8d6;
  font-size:14px;
  margin-right:5px
}

#gnb .top-head .language a:last-child{
  margin-right:0
}

#gnb .top-head .language a.on{
  color:#000;
  font-weight:bold;
}

#gnb .top-head .wz-btn a{
  background:url(../images/wz_icon.png) no-repeat left center;
  padding-left:27px;
  line-height:0;
  font-weight:bold
}

#gnb .top-head .smap-btn a{
  background:url(../images/smap_icon.png) no-repeat left center;
  padding-left:25px;
  line-height:0;
  font-weight:bold
}

#gnb .top-head .search-bar{
  width:360px;
  position:relative;
}

#gnb .top-head .search-bar input{
  border:3px solid #0191f5;
  background:#fff;
  height:60px;
  width:100%;
  border-radius:60px;
  padding-left:20px
}

#gnb .top-head .search-bar .schbtn{
  display:inline-block;
  position: absolute;
  right: 20px;
  line-height: 29px;
  width:29px;
  height: 29px;
  top: 29px;
  background:url(../images/sch_icon.png) no-repeat center center;
}

#gnb .top-head .search-box{
  width:100%;
  display:none;
  background:#edf6fc;
  padding:20px;
  position:absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top:0;
}

#gnb .top-head .search-box input.sch{
  display:block;
  height:50px;
  font-size:15px
}

#gnb .top-head .search-box .sbtn{
  position:absolute;
  right: 35px;
  top: 35px;
  width:22px;
  height:22px;
  background:url(../images/sch_icon.png) no-repeat center center;
  background-size:22px
}

#gnb .top-head .search-box .close{
  background:#0191f5 url(../images/close_btn_w.png) no-repeat center center;
  background-size:13px;
  width:35px;
  height:35px;
  border-radius:0 0 5px 5px;
  position:absolute;
  right:0;
  bottom:-35px;
}


/* menu */
#gnb .menu{
  height: 90px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.0);
}

#gnb .menu ul{
  display:table;
  width:1200px;
  margin:auto;
  padding-top:33px;
  table-layout: fixed;
}

#gnb .menu li{
    display: inline-block;
    vertical-align: middle;
    padding: 0 5%
}

#gnb .menu li a{
   display:block;
   height:100%;
   font-size:25px;
   position:relative;
   z-index:200;
   color:#fff;
   font-weight:normal;
}

#gnb .menu li.on a::after, #gnb .menu li a:hover::after{
  display: none;
  width:8px;
  height:8px;
  background:#0191f5;
  border-radius:8px;
  position:absolute;
  bottom:-12px;
  left:50%;
  transform:translate(-50%);
  font-weight:600
}


#gnb .menu li .submenu{
  position:absolute;
  top:175px;
  left:0;
  background:#0191f5;
  width:100%;
  height:auto;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 5%);
  border-top:1px solid #0191f5;
  /*border-bottom:1px solid #e2e7eb;*/
  display:none
}

#gnb .menu li .submenu.none{
  display:none
}

#gnb .menu li .submenu::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:100%;
  width:100%;
  background-color:#0191f5;
  background-position: bottom left;
  background-repeat:no-repeat;
  background-image:url(../images/submenu_bg.png);
}

#gnb .menu li .submenu::after{
  content:"";
  background:#edf6fc;
  position:absolute;
  right:0;
  bottom:0;
  width:50%;
  height:100%;
  z-index:1
}

#gnb .menu li .submenu .submenu-area{
  max-width:1680px;
  height:100%;
  margin:auto;
  position:relative;
  z-index:2
}

#gnb .menu li .submenu .submenu-title{
  float:left;
  width:20%;
  text-align:left;
  font-size:35px;
  font-weight:900;
  padding-top:50px;
  position:relative;
  color:#fff
}

#gnb .menu li .submenu .submenu-title span{
  font-size:15px;
  line-height:22px;
  display:block;
  word-break: keep-all;
  margin-top:20px;
}

#gnb .menu li .submenu ul{
  width:80%;
  background: #fff;
  float:right;
  padding:0;
  height:100%;
  table-layout:inherit;
}

#gnb .menu li .submenu li{
  width:100%;
  display: flow-root;
  padding:25px;
  border-bottom:1px solid #e2e7eb;
  position:relative;
  text-align:left;
}

#gnb .menu li .submenu li::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  background:#edf6fc;
  height:100%;
  width:20%;
}

#gnb .menu li .submenu li:last-child{
  border-bottom:0
}

#gnb .menu li .submenu li a{
  position:relative;
  transition: all 0.4s;
  font-weight:normal;
  color:#000;
  word-break: break-all;
}

#gnb .menu li .submenu li:nth-child(5n){
  margin-right:0
}

#gnb .menu li .submenu li .st{
  display: inline-block;
  vertical-align:middle;
  text-align:left;
  width:17%;
}

#gnb .menu li .submenu li .st a{
  font-weight:500;
  font-size:19px;
  width:100%;
  word-break:keep-all;
}

#gnb .menu li .submenu li .st a:hover::after{
  content:none
}

#gnb .menu li .submenu li > ul{
  padding:0;
  width:80%;
  padding-left:3%;
  float:none;
  display: inline-block;
  vertical-align:middle;
  background:none;
}

#gnb .menu li .submenu li > ul li{
  padding:5px 2% 5px 1%;
  float:left;
  width:auto;
  border:0;
  position:relative;
}

#gnb .menu li .submenu li > ul li::after,
#gnb .menu li .submenu li > ul li:last-child::before,
#gnb .menu li .submenu li > ul li a:hover::after{
  content:none
}

#gnb .menu li .submenu li > ul li a{
  display:inline-block;
  width:100%;
  font-size:19px;
  text-align:left;
  position:relative;
}

#gnb .menu li .submenu.emt4{height:231px;}

/*예보속보 메뉴*/
#gnb .menu li .submenu ul.forecast{
  background:#fff;
  display:table;
  table-layout: fixed;
  padding:7px 45px;
}

#gnb .menu li .submenu ul.forecast li{
  float:none;
  border-bottom:0;
  display: table-cell;
}

#gnb .menu li .submenu ul.forecast li::after{
  content:none
}

#gnb .menu li .submenu ul.forecast li a{
  font-size:17px;
  padding-top:90px;
  height:130px;
  background-color:#fff;
  border: 1px solid #e2e7eb;
  border-radius:20px;
  position:relative;
  text-align:center;
  transition: box-shadow 0.1s linear;
}

#gnb .menu li .submenu ul.forecast li a:hover{
  background-color:#fff;
  box-shadow: 1px 1px 12px 1px rgb(0 0 0 / 7%);
}

#gnb .menu li .submenu ul.forecast li a::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:8px;
  width:80px;
  height:80px;
  background-position:center center;
  background-repeat: no-repeat
}
#gnb ul.forecast li.fc1 a::before{
  background-image: url(../images/forecast_icon01.png);
}
#gnb ul.forecast li.fc2 a::before{
  background-image: url(../images/forecast_icon02.png);
}
#gnb ul.forecast li.fc3 a::before{
  background-image: url(../images/forecast_icon03.png);
}
#gnb ul.forecast li.fc4 a::before{
  background-image: url(../images/forecast_icon04.png);
}
#gnb ul.forecast li.fc5 a::before{
  background-image: url(../images/forecast_icon05.png);
}
#gnb ul.forecast li.fc6 a::before{
  background-image: url(../images/forecast_icon06.png);
}
#gnb ul.forecast li.fc7 a::before{
  background-image: url(../images/forecast_icon07.png);
}

#gnb .navbtn, #gnb .close-btn,
#gnb .menu .nav-tabs, #gnb .menu .nav-head{
  display:none
}





/*** top-btn ***/

#scroll-top{
   position: fixed;
   right: 2%;
   bottom: 50px;
   z-index: 999;
   display:inline-block;
   width:60px;
   height:60px;
   line-height:50px;
   border-radius:60px;
   text-align:center;
   font-style: italic;
   font-size:12px;
   background:#0191f5 /*url(../images/scroll_top_icon.png) no-repeat center 12px*/;
   border:7px solid #8cd0ff;
   color:#fff;
   box-shadow: -2px 2px 4px rgb(0 0 0 / 6%);
}






/*** service-site ***/

.service-site{
   overflow:hidden;
   width:100%;
   background:#f5fafe;
   position:relative;
   padding:35px 0 35px 0;
   border-top:1px solid #e5f2f6;
   border-bottom:1px solid #e5f2f6;
}

.main .service-site{
  background:#fff;
  border-top:1px solid #e2e7eb;
  border-bottom:1px solid #e2e7eb
}


.service-site li{
  display: inline-block;
   width: auto;
   position:relative;
   margin-right:0 !important;
}

/*.service-site li::after{
  content: "";
  height:10px;
  width:1px;
  background:#D0D3D8;
  position:absolute;
  right:0
}
*/
.service-site li a{
   display:block;
   /*background:url(../images/link_icon.png) no-repeat 10px center;
   background-size:15px;*/
   padding:0 15px;
   line-height:normal;
   text-align:center;
}

.service-site li .link{
  height:13px;
  display:inline-block;
  margin-right:5px
}

.service-site .swiper2{
  overflow:hidden;
  float:right;
  width:85%;
  margin-top:5px
}

.service-site .swiper-button{
  float:left;
  width:110px;
}

.service-site .swiper-button-prev,
.service-site .swiper-button-next{
   background:#fff;
   width:32px;
   height:32px;
   text-align:center;
   /*box-shadow: -2px 2px 4px rgb(0 0 0 / 4%);
   border:1px solid #e2e7eb;*/
   position:inherit;
   left: auto;
   top:auto;
   right:auto;
   display:inline-block;
   margin-top:auto;
   border-radius:7px
}

.main .service-site .swiper-button-prev,
.main .service-site .swiper-button-next{
   background-color:#edf6fc
}

.service-site .swiper-button-prev{
   background:#fff url(../images/site_arrow_left.png) no-repeat center center
}

.service-site .swiper-button-next{
   background:#fff url(../images/site_arrow_right.png) no-repeat center center
}

.service-site .swiper-button-next:after, .service-site .swiper-button-prev:after{
  content: none
}

.swiper-slide {
  /* 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;
}







/*** sitemap ***/

.modal{
  display:none
}

#sitemap{
  position:fixed;
  transform: none;
  z-index:2000;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient(90deg, #e9eff4, #f8fcff, #e9eff4);
  /*background: url(../images/sitemap_bg.png) no-repeat top left;*/
  background-size: cover;
  overflow-y:auto;
}

#sitemap .sitemap-wrap{
  max-width:1680px;
  margin:auto;
  padding:100px 0
}

#sitemap .copy{
  font-weight:300;
  font-size:30px;
  text-align:center;
  margin-bottom:70px
}

#sitemap h1{
  font-size:30px;
  font-weight:bold;
  float:left;
  position:relative;
  width:15%;
  padding-top:40px
}

#sitemap h1::after{
  content:"";
  width:50px;
  height:5px;
  background:#0191f5;
  position:absolute;
  top:0;
  left:0
}

#sitemap section{
  width:100%;
  display: flow-root;
  margin-bottom:70px
}

#sitemap section:last-child{
  margin-bottom:0
}

#sitemap .menu{
  float:right;
  width:85%;
  padding:50px;
  background:#fff;
  border:1px solid #e5f2f6;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 2%);
  border-radius:5px
}

#sitemap .menu article{
  width:100%;
  display: flow-root;
  padding:25px 0;
  border-bottom:1px solid #e5f2f6
}

#sitemap .menu article:first-child{
  padding-top:0
}

#sitemap .menu article:last-child{
  margin-bottom:0
}

#sitemap .menu h2{
  font-size:21px;
  font-weight:500;
  line-height:30px;
  word-break: keep-all;
  display: inline-block;
  vertical-align:top;
  width:15%;
  float:left;
}

#sitemap .menu ul{
  float:right;
  width:83%
}

#sitemap .menu li{
  float:left;
  position:relative;
  padding-left:15px;
  margin:7px 30px 7px 0;
}

#sitemap .menu li::after{
  content:"";
  width:5px;
  height:5px;
  background:#c8cbd0;
  border-radius:2px;
  position:absolute;
  left:0;
  top:5px
}

#sitemap .menu li.window{
  padding-right:18px;
  background:url(../images/window_icon.png) no-repeat right 48%
}

#sitemap .menu ul.single{
  width:100%
}

#sitemap .menu ul.single li{
  padding:0;
  margin-right:50px
}

#sitemap .menu ul.single li::after{
  content:none
}

#sitemap .menu ul.single li a{
  font-size:21px;
  font-weight:500;
}

#sitemap .menu ul .depth{
  float:none;
  width:100%;
  display:flow-root;
}

#sitemap .menu ul .depth ul{
  float:none;
  width:100%;
  background:#edf6fc;
  display:flow-root;
  padding:15px 20px;
  margin:15px 0
}

#sitemap .menu ul .depth ul li{
  padding-left:8px
}

#sitemap .menu ul .depth ul li::after{
  width:2px;
  height:2px;
  background:#000;
  top:7px
}

#sitemap .menu ul .depth ul li a{
  font-size:15px;
}

#sitemap .close{
  display: inline-block;
  width:50px;
  height:50px;
  line-height:50px;
  background:#053863 url(../images/close_btn_w.png) no-repeat center center;
  background-size:23px;
  border-radius:10px;
  position:absolute;
  right:20px;
  top:20px
}






/*** footer ***/

#footer{
   width:100%;
   display:inline-block;
   font-size:15px;
   width:100%;
   background:#fff;
   position:relative;
}

.main #footer{
  margin-top:55px
}

.footer-wrap{
   max-width:1680px;
   margin:auto;
   overflow:hidden;
   line-height:20px;
   position:relative;
   padding:55px 0;
}

.footer-wrap .menu-wrap{
   display:inline-table;
   width:100%;
   text-align:center;
   margin-bottom:25px
}

.main .footer-wrap .menu-wrap{
   text-align:center;
}

.footer-wrap .menu li{
   display: inline-block;
   position:relative;
   padding:0 10px
}

.footer-wrap .menu li a{
  font-size:17px
}

.footer-wrap .menu li::after{
   content: "";
   width:2px;
   height:2px;
   border-radius:2px;
   background:#000;
   position:absolute;
   right:-2px;
   top:7px
}

.footer-wrap .menu li:last-child::after{
   content: none
}

.footer-wrap .menu li strong{
   color:#0191f5
}

.footer-wrap .text{
   text-align: center;
   text-align: center;
   font-size: 17px;
   line-height: 27px;
}

.footer-wrap .copy{
   display:block;
   color:#5d6166;
   font-weight:300;
   font-size:14px;
   margin-top:5px
}

.footer-wrap .logo{
  text-align:center;
  margin-top:30px
}

.footer-wrap .logo img{
  height:35px
}

.footer-wrap .certify{
  position:absolute;
  right:0;
  top:45px
}

.swiper-button .swiper-button-prev span,
.swiper-button .swiper-button-next span{
  position: absolute;
  z-index:-1;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
  overflow: hidden;
}


/*** etc ***/
.mt0{margin-top:0 !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt50{margin-top:50px !important}
.mt70{margin-top:70px !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb20{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}
.mb50{margin-bottom:50px !important}
.mb70{margin-bottom:70px !important}
.mb0{margin-bottom:0 !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.mr10{margin-right:10px !important}
.mg0{margin:0 !important}
.mg5{margin:5px 0 !important}
.mg10{margin:10px 0 !important}
.mg20{margin:20px 0 !important}
.mg30{margin:30px 0 !important}
.mg50{margin:50px 0 !important}
.ma{margin:auto !important;}
.pt0{padding-top:0 !important}
.pt10{padding-top:10px !important}
.pt20{padding-top:20px !important}
.pt30{padding-top:30px !important}
.pt50{padding-top:50px !important}
.pb0{padding-bottom:0 !important}
.pd0{padding:0 !important}

.l-cont{float:left;}
.r-cont{float:right;}

.t-left{text-align:left}
.t-center{text-align:center;}
.t-right{text-align:right}
.md{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:90%; text-align:center}

.block{display:block !important;}
.inline{display:inline-block !important; vertical-align: middle;}
.auto{text-align:center;}
.auto img{width:auto !important; height:auto !important}
.new{display:inline-block; margin-left:7px; vertical-align:middle; padding:0; height:15px; width:15px; line-height:17px; color:#fff;
text-align:center; background:#0191f5; font-family: 'GmarketSans'; font-weight: 700; border-radius:3px; font-size:8px}

.t-sky{color:#0191f5}
.t-green{color:#00d0ce}
.t-olive{color:#d6d6b7}
.t-red{color:#e71835}
.t-org{color:#e73e18 !important;}

.b-sky{background:#c0fcff}
.b-org{background:#ffd1c0}
.b-gray{background:#a4afb7}


@media screen and (max-width:1680px){
  #gnb .menu li .submenu .submenu-title{padding-left:30px}
  #gnb .top-head .area{padding:0px 30px}
  .service-site{padding:30px}
  .footer-wrap .certify{right:30px}
  .service-site .swiper2{width:79%}
}


@media screen and (max-width:1199px){
  #gnb .menu ul{width:100%;}
  #gnb .menu li .submenu .submenu-title{font-size: 25px;}
  .service-site h1{width:auto; font-size:19px; margin-right:2%}
  .service-site .swiper2{width:73%}
  .footer-wrap .certify{position:relative; margin:auto; text-align:center; right: auto; top:auto;}
  .footer-wrap .menu li a{font-size:15px}
  .footer-wrap .text{font-size:15px; line-height:24px}
  .footer-wrap .copy{font-size:14px}

}

@media screen and (max-width:999px){
  #header{position:fixed; box-shadow: -2px 2px 4px rgba(0,0,0,0.04)}
  body, html{font-size:16px; line-height:24px}
  #container{padding-top:70px}
    #gnb .top-head .logo{margin-top: 10px}
  .main #gnb .menu li a{color:#000}
  #gnb .menu li a{color:#000}
  #gnb .menu .nav-tabs{display:block; float:left; width:28%; height:100%; background:#fff; border-right:1px solid #e0e3e9}
  #gnb .menu .nav-tabs li a{font-size:17px; background:#fff;}
  #gnb .menu .nav-tabs li.on a{/*padding-bottom:15px; */background:#0191f5; font-weight:bold; color:#fff}
  #gnb .menu .nav-tabs li.on a::after{display: none; content:""; bottom:22px; font-weight:bold; background:#fff}
  #gnb .menu .nav-menu{float:left; width:72%; padding:20px;}
  #gnb .menu .nav-menu li{border-bottom:0}

  #gnb .menu ul{padding:0; width:100%}
  #gnb .menu li{display:block; width:100%; line-height:70px; border-bottom:1px solid #e2e7eb; padding: 0}
  #gnb .menu li:nth-child(4n){line-height: 1.2; padding: 20px 0; }
  #gnb .menu .nav-tabs li:nth-child(4n).on a{padding: 20px 0;}
  #gnb .menu li:nth-child(4n).on{padding: 0}
  #gnb .menu li .item{display:none}
  #gnb .menu li .submenu{top:0; position:relative; border:0; background:none; box-shadow:none; display:block;}
  #gnb .menu li .submenu.emt4{background:none}
  #gnb .menu li .submenu .submenu-title{width:100%; margin-bottom:20px; background-color:#f5fafe; height:130px !important; line-height:130px; float:none; border-right:0; padding:0; font-size:23px; display:none}
  #gnb .menu li .submenu .submenu-title span{display:none}
  #gnb .menu li .submenu::before, #gnb .menu li .submenu::after{content:none}
  #gnb .menu li .submenu .submenu-area{height:auto;}
  #gnb .menu li .submenu ul{width:100%; padding:0; float:none; background:none;}
  #gnb .menu li .submenu li{width:100%; line-height:normal; float:none; border-bottom:0; padding:0; margin-bottom:5px; border-radius:8px 8px 0 0; background: #fff; border: 1px solid #e0e3e9;}
  #gnb .menu li .submenu li:last-child{border-bottom: 1px solid #e0e3e9;}
  #gnb .menu li .submenu li .st{border:0; float:none; width:100%; text-align: left; }
  #gnb .menu li .submenu li .st a{width: 100%; background: url(../images/arrow_bottom_sky.png) no-repeat 95% center; display: block;
    font-size: 15px; line-height: 1.2; padding: 10px 30px 10px 20px;}

  #gnb .menu li .submenu li.on .st a{background: url(../images/arrow_top_sky.png) no-repeat 95% center;}
  #gnb .menu li .submenu li .st.up a{color:#000; width:10px; height:10px}
  #gnb .menu li .submenu li::after{content:none}
  #gnb .menu li.on a::after, #gnb .menu li a:hover::after{content:none}
  #gnb .menu li .submenu li > ul{display:none; width:100%; float:none; margin:0; padding:20px; background:#fff; border-top:2px solid #0191f5}
  #gnb .menu li .submenu li > ul li{border:0; background:none; padding:0; float:none; margin-bottom:10px; width:100%}
  #gnb .menu li .submenu li > ul li:last-child{margin-bottom:0; border:0}

  #gnb .menu li .submenu li > ul li a{font-size:14px;}
  #gnb .menu li .submenu li > ul li.on a{color:#0191f5; font-weight:500}
  #gnb .menu li .submenu li > ul li.on a::after{border-color:#8d98ab}
  #gnb .menu li .submenu li > ul li::before{content:none}
  

  #gnb .menu li .submenu ul.forecast{background:none; text-align:left; padding:0}
  #gnb .menu li .submenu ul.forecast li{border:0; background:0; display:inline-block; width:31.1%; padding:0; margin:1%}
 

  #gnb .top-head{height:70px; line-height:70px}
  #gnb .top-head .area{padding:0px 20px}
  #gnb .top-head .r-cont{margin-top:23px}
  #gnb .top-head .r-cont li{line-height:normal; margin-left:15px}
  #gnb .top-head .r-cont li.nav{display:block;}
  #gnb .top-head .r-cont li img{height:21px}
  #gnb .top-head .search-bar{width:auto; position:inherit;}
  #gnb .top-head .search-bar input{display:none}
  #gnb .top-head .search-bar .schbtn{position:inherit; right:auto; top:auto; height:22px; background-size:22px}
  #gnb .top-head .r-cont li.language{line-height:21px}
  #gnb .top-head .wz-btn a{font-weight:500; background-size:18px; padding-left:23px}
  #gnb .top-head .smap-btn a{background-size:15px; padding-left:20px}
  #gnb .top-head .language a{color:#000; font-weight:normal; background:#edf6fc; color:#5d5d5d; display:block; line-height:22px; padding:0px 12px; border-radius:4px}
  #gnb .top-head .language a.on{display:none}
  #gnb #nav{display: block; position: fixed; top:0; right: -200%; width:100%; height: 100%; padding:0; background:#f5fafe; z-index: 900;    overflow-y: auto;}
  #gnb #nav .nav-head{display: table; width:100%; line-height:70px; height: 70px; background:#fff; border-bottom:1px solid #e2e7eb; position:relative; padding:0px 20px}
  #gnb #nav .nav-head .l-cont{font-size:13px; color:#5d5d5d; text-align: right; width:100%}
  #gnb #nav .nav-head .close-btn{line-height:normal; top:25px; background: url(../images/close_btn.png) no-repeat center center; width:20px; height:20px; background-size:20px}
  #gnb .navbtn{display:block; background: url(../images/hbg_icon.png) no-repeat center center; background-size:21px; width:21px; height:21px}
  #gnb .close-btn{display:inline-block; position:absolute; left:20px; top:20px;}
  .nav-background{display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 2000}
  .section-area .more-view img{height:18px}
  .service-site{padding:20px}
  .service-site li a{font-size:14px;}
  .service-site .swiper2{width:70%}
  .footer-wrap{padding:0}
  .footer-wrap .menu-wrap{padding:20px; background:#f5fafe; border-radius:8px}
  .footer-wrap .menu li a{font-size:14px}
  .footer-wrap .text{font-size:14px; line-height:22px}
  .footer-wrap .copy{font-size:13px; line-height:15px}
  .main #footer{}
  .footer-wrap .menu-wrap{margin-bottom: -10px}
}

@media screen and (max-width:767px){
  body, html{font-size:14px}
  #gnb .top-head .wz-btn a{font-size:14px}
  #gnb .top-head .r-cont li{margin-left:8px}
  #gnb .top-head .r-cont li.language{line-height:20px}
  #gnb .top-head .language a{font-size:13px}
  #gnb .top-head .logo{margin-top: 20px}
  #gnb .top-head .logo img{height:30px}
  #gnb .top-head .wz-btn, #gnb .top-head .smap-btn{display:none}
  #gnb #nav .wz-btn{background: url(../images/wz_icon.png) no-repeat left center; background-size: 17px; padding-left: 24px; font-weight: 500; font-size:15px}
  #gnb #nav .smap-btn{background: url(../images/smap_icon.png) no-repeat left center; background-size: 15px; padding-left: 20px; font-weight: 500; font-size:15px; margin-left:15px}
  #gnb .menu .nav-tabs li a{font-size:16px}
  #gnb .menu li .submenu ul.forecast li{width:48%;}
  #gnb .menu li .submenu ul.forecast li a{height:110px; padding-top:70px; font-size:13px}
  #gnb .menu li .submenu ul.forecast li a::before{background-size:55px; width:55px; height:55px; top:12px}
  .service-site{padding:15px 20px}
  .service-site h1{display:none}
  .service-site li a{font-size:13px; background-size:12px}
  .service-site .swiper2{width:68%}
  .service-site .swiper-button{width:100px}
  .service-site .swiper-button-prev,
  .service-site .swiper-button-next,
  .wrap-autoplay-control button{width:28px; height:28px; background-size:11px !important}
  .wrap-autoplay-control button[aria-pressed="false"]:before{width:6px;}
  .main-section article.info-link h1 span{display:none}
  .footer-wrap .menu li a{font-size:13px; line-height:24px}
  .footer-wrap .text{font-size:13px; line-height:20px}
  .footer-wrap .copy{font-size:12px}
}

@media screen and (max-width:365px){
  #gnb .menu li .submenu ul.forecast li a{height:95px; padding-top:60px; font-size:12px;}
  #gnb .menu li .submenu ul.forecast li a::before{background-size:50px; top:8px}
  .service-site .swiper2{width:60%}
}


/*

@media screen and (max-width:1636px){ #gnb .menu li .submenu.emt2 {height: 187px;}}
@media screen and (max-width:1574px){ #gnb .menu li .submenu.emt1 {height: 597px;}}
@media screen and (max-width:1479px){ #gnb .menu li .submenu ul.forecast li{padding:10px}}
@media screen and (max-width:1358px){ #gnb .menu li .submenu.emt4 {height: 243px;}}
@media screen and (max-width:1152px){ #gnb .menu li .submenu.emt4 { height: 258px;}}
@media screen and (max-width:1113px){ #gnb .menu li .submenu.emt1 {height: 632px;}}
@media screen and (max-width:1033px){ #gnb .menu li .submenu.emt1 {height: 667px;} #gnb .menu li .submenu.emt2 {height: 202px;}}
*/