@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);



.noto {
    font-family: 'Noto Sans Korean', sans-serif;
}
.opensans {
	font-family: 'Open Sans', sans-serif;
}

*{margin: 0; padding: 0; -webkit-text-size-adjust:none; box-sizing: border-box; line-height:1.6; letter-spacing: -.04em;}
body{font-size: 20px; /*height:100%;*/ width:100%;  min-width:360px; background-color: #ededed;  }
body.main {background-image: url(../images/section3/55.jpg) ; background-size: cover;}
li{list-style: none;}
a{text-decoration: none; color: #333434; cursor:pointer;}
a:active{text-decoration: none; color: #333434;}
img{border: none;}
textarea{resize:none;}
.cf:after{content: ""; display: block; clear: both;}
.ellipsis{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
table { padding: 0; border: 0; border-collapse: collapse;}
h1 {font-size: 19px;font-weight:600;  letter-spacing: -.05em;}
.dn {opacity: 0;}
.en { font-family: 'Open Sans', sans-serif;}
.en h4, .en p, .en i {letter-spacing: -.02em;}
.kren a {position:fixed; right:2.5%; top:3%; cursor: pointer; font-size:30px; color: #347389; z-index: 100; }
.kren.hkr a {color:#fff;}

/* 메인 */
#wrap {  width: 100%; }
#wrap.mainBg {}
#wrap #mainTitle {position: absolute; right: 3%; top: 15%; width: 70%; padding: 32px 24px; background-color: rgba(255,255,255,0.75); color: #000;margin-bottom:8%; z-index:22;}
#wrap #mainTitle h1{font-size: 60px; line-height: 1.2; padding-bottom:32px;}
#wrap #mainTitle h1 span{font-size: 22px; display: block;}
#wrap #mainTitle h2{font-size: 20px; padding-bottom:16px; font-weight:500;}
#wrap #mainTitle p{font-size: 18px; color: #111;}
#wrap #mainTitle p span{font-size: 15px; display: block; text-align: right;color: #347389; font-weight:600;}
#menuPc {position:fixed; top:3%; left:2.5%; width:25%;}
#menuPc li {padding-bottom:10px; }
#menuPc li a {color: #fff;font-size:36px; padding:0 8px 4px; transition: all 0.3s; text-decoration:underline; letter-spacing: 0; font-weight:600;}
#menuPc li a:hover {color: #111; background: #fff;}
#menuPc li.on >a {color: #111; background: #fff;}
#menuPc li .nav2 {padding-left:16px; margin-top:24px;}
#menuPc li .nav2 a {font-size:20px;}
#menuPc li .nav2 li {padding-bottom:1.3rem;}
body.sub #menuPc li a  {color:#000;}
body.sub #menuPc li a:hover, body.sub #menuPc .nav2 li.bl a:hover {color:#fff;  background: #111;}
body.sub #menuPc li.on >a {color:#fff;  background: #111;}
body.sub #menuPc .nav2 li.on1 >a {color:#fff;  background: #347389;}
body.sub #menuPc .nav2 li.bl >a {color:#347389; }
.hwImg {position:fixed; left:2.5%; top:92%; }
body.sub .hwImg {position:fixed; left:2.5%; top:92%; }
.mCate {position: fixed; top:1.5%; right:4%; z-index:30; display:none;}
.mCate i.fas {color: #fff; font-size:30px;padding:10px;}
body.sub .mCate i.fas {color: #000; }
#menuM {position: fixed; display:none;top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); padding:5%; z-index:102;}
#menuM ul {margin-top:3rem;}
#menuM li {padding-bottom:10px; }
#menuM li a {color: #fff;font-size:36px; padding:0 8px 4px; transition: all 0.3s; text-decoration:underline; letter-spacing: 0; font-weight:600;}
#menuM li.on >a {color: #111; background: #fff;}
#menuM li .nav2 {padding-left:8px; margin:20px 0 15px;}
#menuM li .nav2 a {font-size:20px;}
#menuM li .nav2 li {padding-bottom:1.3rem;}
#menuM .nav2 li.on1 >a {color:#fff;  background: #347389;}
#menuM .nav2 li.bl >a {color:#347389;  }
.leftnavClose {position: fixed; top:1.5%; right:4%; z-index:41;}
.leftnavClose i.fas {color: #fff; font-size:30px;padding:10px;}
.jsdate {position:fixed; left:2.5%; top:75%; font-size: 28px; color: #fff; font-weight:600; }
.jsdate p {line-height:1.4; letter-spacing: 0;}
#footer {  position:fixed; bottom:3%; right:3%; font-size: 12px; color: #aaa; }
#footer span {letter-spacing: 0;}

/*서브*/
#subContent {position: absolute; right: 3%; top: 10%; width: 70%; padding: 32px 24px;color: #000;margin-bottom:5%; }
#subContent h3 {font-size: 20px; font-weight:400; width: 100%; padding: 0 8%;}
#subContent h3 b{font-size: 28px; text-align:center; display:block; padding-bottom:2rem;}
.photoArea {width: 100%; margin-top:32px;}
.photoArea .photoBox {border-top: 1px solid #444; padding-top:32px; margin-top:3rem;}
.photoArea .photoBox:first-child {margin-top:7rem; border-top:0;}
.photoArea .photoBox >img {width: 100%;margin-bottom:24px;  }
.photoArea .photoBox h4 {font-size:18px; font-weight:700;margin-bottom:4px; }
.photoArea .photoBox p {font-size:16px; margin-bottom:4px; letter-spacing: -.02em;}
.photoArea .photoBox i {font-size:12px; color: #444; font-style: normal;}
.photoArea .photoBox span  {font-size:10px; color: #666; display:block; margin: 10px 0 30px; line-height: 1;}
#subContent .arrow {width: 100%;margin-top:4rem;}
#subContent .arrow >div {width: 50%; float:left;}
#subContent .arrow >div a {font-size:40px;  }
#subContent .arrow >div a i {color: #347389;}
#subContent .arrow .prev a {float: left;}
#subContent .arrow .next a {float: right;}
.map .mapBox {width: 100%; padding:0 1.5rem; margin-bottom:4rem;}
.map .mapBox img {width: 100%;max-width: 1050px; display:block;}
.map .mapBox>b {font-size:20px; color: #e4007f; text-decoration: underline; font-weight: 600; padding-bottom:1.5rem;display: block;}
.map h5 {font-size:17px; font-weight:400;margin-bottom:1rem; text-decoration: underline;}
.makingPeople {width: 100%; padding: 1.5rem; background-color: #f7f7f7;}
.makingPeople .mpBox {font-size:14px;}
.makingPeople .mpBox b {font-weight:400;}
.makingPeople .mpBox ul {margin:.5rem 0 1rem;}
.makingPeople .mpBox ul li {color: #444;}
.gogomap {width: 100%; padding: 2.5rem 1.5rem; background-color: #222; margin-top:2rem; color: #fff; }
.gogomap li {font-size:15px; padding-bottom:.5rem;}
.mapimg {width: 100%; background-color: #fff; margin: 1.5rem 0 2rem;}
.mapimg img {width: 100%;display: block; max-width: 720px; margin: 0 auto;}
.shadow {width: 100%; height:100%; background-color: rgba(0,0,0,0.9);position: fixed; z-index: 101;top: 0; left: 0;display:none; }
.ccPhotoBox {z-index:102; position:fixed; top:3rem; left:0; width:100%; height:100%; display:none;}
.swiper-button-next{right:2rem !important;color:#347389 !important; z-index:103 !important; display: block !important; }
.swiper-button-prev{left:2rem !important; color: #347389 !important; z-index:103 !important;display: block !important; }
.swiper-slide img{width: 65%; max-width: 1500px;margin: 0 auto;  display:block; }
.cpbClose {position: fixed; display:block; top:1rem; cursor:pointer; right:2rem; z-index:200; display:none;}
.cpbClose i.fas {color: #fff; font-size:40px;padding:10px;}
.ynaLink {margin-top:4rem; font-size:30px; text-decoration: underline; font-weight:bold;}
.ynaLink a {color: #347389;  }

 @media screen and (max-width:980px) {
  .mCate {position: fixed; top:1.5%; right:4%; z-index:101; display:block;}
  #wrap #mainTitle h1{font-size: 40px; padding-bottom:28px;}
	#wrap #mainTitle {left:5%; top: 10%; width: 90%; padding: 8% 5%; margin-bottom:32%;}
  #menuPc {display:none;}
  .hwImg {left:5%; top:auto; bottom:3%;}
  body.sub .hwImg {display:none;}
  #footer {display:none;}
  .ccPhoto {top:10rem;}
  #subContent {position: absolute; left:2.5%;  width: 95%; padding: 32px 24px;color: #000;margin-bottom:5%; }
  .kren a {position:fixed; left:5%; top:2.5% !important; cursor: pointer; font-size:26px; color: #347389; }
  .photoArea .photoBox:first-child {margin-top:5rem;}
  .jsdate {position:fixed; left:5%;top:auto; bottom:12%;  color: #fff; font-weight:600; }
  .swiper-slide img{width: 80%;}
  .swiper-button-next{right:1rem !important; color:#347389 !important;}
  .swiper-button-prev{left:1rem !important; color: #347389 !important;}
}

@media screen and (max-width:768px) {
  #wrap #mainTitle {margin-bottom:50%;}
  .photoArea .photoBox:first-child {margin-top:3rem;}
  .map .mapBox {margin-bottom:3rem;}
  .cpbClose i.fas {font-size:30px;}
  .ccPhotoBox {margin-top:4rem;}
}

@media screen and (max-width:375px) {
  .jsdate {font-size:24px; }
  #wrap #mainTitle h1{font-size: 32px; padding-bottom:20px;}
  #subContent h3 {font-size:18px;}
  .photoArea .photoBox >img {margin-bottom:16px;}
  .photoArea .photoBox h4 {font-size:16px;}
  .photoArea .photoBox p {font-size:14px;}
  .hwImg img {width: 90%;}
  .map .mapBox {margin-bottom:2rem;}
  .swiper-slide img{width: 90%;}
  .swiper-button-next{display:none !important;}
  .swiper-button-prev{display:none !important;}
}