@charset "euc-kr";
/* CSS Document */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}

@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
}

.godo * {
 font-family: 'Godo', sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
/*font-family: 'Nanum Myeongjo', serif;*/
/*font-family: 'Cookie', cursive;*/
/*font-family: 'GmarketSansLight';*/
/*font-family: 'GmarketSansMedium';*/
/*font-family: 'GmarketSansBold';*/
*{margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; box-sizing:border-box;}
/**{margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; box-sizing:border-box;}*/
select {

   -webkit-appearance:none; /* for chrome */

   -moz-appearance:none; /*for firefox*/

   appearance:none;

}

select::-ms-expand{

   display:none;/*for IE10,11*/

}
h1 {letter-spacing: -2px;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a:visited{text-decoration:none;}
.clearfix:before,
.clearfix:after{display:table; content:"";}
.clearfix:after{clear:both;}
ul,li{list-style:none;}
body{max-width: 800px; width: 100%; margin: 0 auto !important;}
table {border-collapse: collapse;}
p {letter-spacing: -1px;}
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
/* top */

.top{ position: fixed; left: 0; top: 0px; height: 60px; z-index: 999999; width: 100%; text-align: center; background: #fff; transition:.3s; overflow: hidden; border-bottom: 1px solid #ddd; transition: .5s;}

.top .logobox {float: left;}
.top .logobox a img {width: 68px; margin-top: 12px; margin-left: 14px;}
.top .menubtn {position: absolute; right: 17px; top: 20px; width: 30px; height: 22px;}
.top .menubtn div {position: absolute; height: 2px; width: 100%; background: #666; transition: .3s;}
.top .menubtn div:nth-child(1) {top: 0;}
.top .menubtn div:nth-child(2) {top: 50%; transform: translateY(-50%);}
.top .menubtn div:nth-child(3) {bottom: 0;}
.top .menubtn div.on div:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(-45deg);}
.top .menubtn div.on div:nth-child(3) {bottom: 50%; transform: translateY(50%) rotate(45deg);}

.top .menubtn.on div:nth-child(1) {}
.top .menubox {position: fixed; width: 100%; height: 100%; z-index: 99999; text-align: center; display: none; background: #fff;}
.top .menubox ul li {border-bottom: 2px solid #222; margin-bottom: 8px; padding-bottom: 8px; margin-top: 15px; display: block;}
.top .menubox ul li a {color: #222; font-size: 24px; display: block; width: 100%; height: 100%;}
.top .menubox ul {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 0 70px; width: 100%; text-align: center;}


.top .menubox .closebtn {width: 30px; height: 22px; position: absolute; right: 15px; top: 20px;}
.top .menubox .closebtn div {background: #222; height: 2px; width: 100%; position: absolute; transform-origin: center; top: 50%; transition: .3s;}
.top .menubox .closebtn div:nth-child(1) {transform: translateY(-50%) rotate(-45deg);}
.top .menubox .closebtn div:nth-child(2) {transform: translateY(-50%) rotate(45deg);}
.top .menubox .closebtn.on div:nth-child(1) {top: 0;}
.top .menubox .closebtn.on div:nth-child(2) {bottom: 0;}


.topbtn {position: fixed; bottom: 25px; right: 25px; display: block; width: 40px; height:40px; background: #fff; z-index: 999999999; border: 2px solid #444; text-align: center; display: none; border-radius: 50%;}
.topbtn:before {position: absolute; content: ''; width:6px; height: 6px; border-top: 3px solid #444; border-right: 3px solid #444;); display: inline-block; transform: translate(-50%,-50%) rotate(-45deg); position: absolute; top: 50%; left: 50%; transition: .3s;}
.topbtn:hover:before {top: 50%;}
.topbtn a {display: block; height: 100%; position: relative;}


.smenu {color: #333; width: 1200px; margin: 30px auto; border: 1px solid  #ddd;}
.smenu .ssmenu {display:flex; justify-content: space-around;}
.smenu .ssmenu p { width: 100%; text-align: center;}
.smenu .ssmenu p a{text-align: center; color: #999; font-size: 17px; display: block; width: 100%; height: 100%; border-right: 1px solid #ddd; padding: 20px 40px;}
.smenu .ssmenu p:last-child a{border-right: none;}
.sub1 .smenu .ssmenu p:nth-child(1) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
.sub2 .smenu .ssmenu p:nth-child(2) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
.sub3 .smenu .ssmenu p:nth-child(3) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
.sub4 .smenu .ssmenu p:nth-child(4) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
.sub5 .smenu .ssmenu p:nth-child(5) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
.sub6 .smenu .ssmenu p:nth-child(6) a{background: #333; color: #fff; display: block; width: 100%; height: 100%;}
/* sidemenu */

/* slidetext */ 
/*
.slidetxt{position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index:999; text-align: center; width: 1200px;}
.slidetxt h3 {color: #777; font-size: 28px;}
.slidetxt h1 {color: #000; font-size: 50px; font-family: 'GmarketSansBold';}
.slidetxt p {color: #777; font-family: 'GmarketSansLight'; font-size: 22px;}
*/

.downbtn {position: absolute; content: ''; width: 35px; height: 35px; border-top: 2px solid #fff; border-right: 2px solid #fff; display: inline-block; transform: rotate(135deg) translateX(-50%); transform-origin: 0; left:50%; opacity: .7; bottom: 30px; z-index: 99999;}
/* footer */
.mapbox {margin-bottom: 40px;}
.mapbox .root_daum_roughmap {width: 100%; margin: 0 auto;}


.copy {background: #222; padding-top: 50px; padding-bottom: 30px; text-align: center; color: #b8b8b8; font-size: 12px; line-height: 1.8em; margin-bottom: 50px;}
.copy span {color: #b8b8b8;}
.copy img {display: inline-block; margin-bottom: 15px;}
.copynav {position: fixed; height: 50px; text-align: center; bottom: 0; left: 0; width: 100%; z-index: 999;}
.copynav a {display: block; float: left; width: 50%; text-align: center; height: 100%; font-size: 16px;}
.copynav a:first-child {background: #333; color: #fff; padding: 9px 20px; letter-spacing: 1px; font-size: 18px;}
.copynav a:last-child {background: #999; color: #333; padding: 9px 20px; letter-spacing: 1px;  font-size:18px;}
.copynav a span { line-height: 30px;}
.mySwiper {
			 position: relative;
			overflow: hidden; 
            margin-top: 60px;
      }
.mySwiper .swiper-slide {position: relative; overflow: hidden;}
.mySwiper .swiper-slide .simg {width: 100vw;}

.mySwiper .swiper-wrapper {position: relative; }

.mySwiper1 {position: relative;}
.mySwiper1 img {width: 100%;}
.mySwiper2 {padding-bottom: 30px; position: relative;}
.mySwiper2:before {position: absolute; content: ''; height: 1px; width: 100%; background: #999; left: 50%; bottom: 18px; transform: translateX(-50%);}
.mySwiper2 .swiper-slide span { font-family: 'Godo', sans-serif; position: relative; font-size: 18px;}
.mySwiper2 .swiper-slide span:before {position: absolute; content: ''; width: 16px; height: 16px; background: #999; border-radius: 50%; left: 50%; bottom: -20px;}
.mySwiper2 span:after {position: absolute; content: ''; width: 10px; height: 10px; background: #ddd; border-radius: 50%; left: 56%; bottom: -17px;}
.mySwiper2 .swiper-slide-active span {color: #cb2127; font-weight: 900;}

/*section*/

.main_slide {position: relative;}

section .wrap {padding: 0 15px;}
.port_main .wrap .port_title {text-align: center; margin: 30px 0;}
.port_main .wrap .port_title p {color: #666; letter-spacing: 1px; font-size: 14px;}
.port_main .wrap .port_title h3 {color: #000; letter-spacing: 2px; font-weight: 700;}
.port_main .wrap ul li {float: left; width: 49%; margin-right: 2%;}
.port_main .wrap ul li:nth-child(even) {margin-right: 0;}
.port_main .wrap ul li img {width: 100%;}

.motto_main {margin: 30px 0;}
.motto_main .wrap ul {border: 1px solid  #ddd; padding: 0 50px;}
.motto_main .wrap ul li {border-bottom: 1px solid #ddd; padding: 30px 0; text-align: center;}
.motto_main .wrap ul li:last-child {border-bottom: none;}
.motto_main .wrap ul li img {width: 60%;}

/*sub*/
.sub {margin-top: 60px; padding: 0 15px;}
.sub01_01 {text-align: center;}

.sub .big_title {margin-bottom: 40px; text-align: center;}
.sub .big_title h1 {font-size: 32px; font-weight: 900;}
.sub .big_title p {font-size: 14px; letter-spacing: 3px; font-weight: 300;}

/*
.sub .small_title {margin-top: 30px; margin-bottom: 20px;}
.sub .small_title h3 {font-size: 24px; font-weight: 900;}
.sub .small_title p {font-size: 14px; letter-spacing: 3px; font-weight: 300;}
*/


.sub01_01 .intro {margin-top: 110px;}
.sub01_01 .intro > h1 {font-weight: 300; margin-bottom: 30px;}
.sub01_01 .intro > h1 span {color: #cb2127; font-weight: 500;}
.sub01_01 .intro > p {font-size: 14px; font-weight: 300; margin: 20px 0;}

.sub01_01 .vision ul li {border: 1px solid  #ddd; padding: 25px; margin-bottom: 20px;}
.sub01_01 .vision ul li p {font-size: 14px; margin: 15px 0;}
.sub01_01 .vision ul li img {display: inline-block;}
.sub01_02 {text-align: center;}
.sub01_02 .motto {width: 100%;}

.sub02_01 .big_title {margin-top: 80px; position: relative;}
.sub02_01 .big_title:before {position: absolute; content: ''; height: 1px; width: 50px; background: #333; left: 50%; transform: translateX(-50%); bottom: -20px;}
.sub02_01 .board .consult_cont table th {padding-left: 0;}
.sub02_01 .board {margin-bottom: 30px;}