@import url(reset.css);
@import url(../fonts/font-awesome/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@font-face {
    font-family: 'notokr-regular';
    src: url('../fonts/notokr-regular.eot');
    src: url('../fonts/notokr-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-regular.woff2') format('woff2'),
    url('../fonts/notokr-regular.woff') format('woff'),
    url('../fonts/notokr-regular.ttf') format('truetype'),
    url('../fonts/notokr-regular.svg#notokr-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'notokr-bold';
    src: url('../fonts/notokr-bold.eot');
    src: url('../fonts/notokr-bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/notokr-bold.woff2') format('woff2'),
    url('../fonts/notokr-bold.woff') format('woff'),
    url('../fonts/notokr-bold.ttf') format('truetype'),
    url('../fonts/notokr-bold.svg#notokr-bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DalseoHealing';
    font-style: normal;
    font-weight: 400;
    src: local("DalseoHealingMedium"),
    url('../fonts/DalseoHealingMedium.otf') format('opentype');
url('../fonts/DalseoHealingMedium.ttf') format('truetype'),
}

@font-face {
    font-family: 'DalseoHealing';
    font-style: normal;
    font-weight: 700;
    src:  local("DalseoHealingBold"),
    url('../fonts/DalseoHealingBold.otf') format('opentype');
url('../fonts/DalseoHealingBold.ttf') format('truetype'),
}

/* form */
select{border: 1px solid #d9d9d9; height:44px; padding-left: 10px; padding-right: 10px; color: #666666; font-family:'Nanum Gothic'; /*-webkit-appearance: none; -moz-appearance: none; appearance: none;*/ position: relative; z-index: 10; background: none; font-size: 15px; background-color: #fff; /*background: url(../img/bg_appearance.png) no-repeat right center;*/ vertical-align: middle;}
select::-ms-expand {display: none;}
.select{position: relative; background-color: #fff;}
.select select{width: 100%;}
.select:after{content: "\f0d7"; display: block; font-family:'FontAwesome'; color: #999; position: absolute; right:15px; top: 10px;}
.clearfix:after{content: ""; display: block; clear: both;}
button{background: none; padding: 0; line-height: 100%;  cursor: pointer; border: none;}
input[type=text],input[type=number],input[type=password]{border: 1px solid #d9d9d9; height: 44px; box-sizing: border-box; padding-left: 10px; font-weight: normal;font-family:'Nanum Gothic'; font-size: 16px; padding-right: 10px; vertical-align: middle;}
textarea{border: 1px solid #d9d9d9; padding: 10px; box-sizing: border-box; font-size: 16px;font-family:'Nanum Gothic'}
input:focus, select:focus,textarea:focus{outline-width: 0; border: 1px solid #568db8;}
input.checkbox{width: 16px; height: 16px; border: 1px solid #e5e6ea;border-radius: 3px; vertical-align: middle;background-color: #fff; position: absolute; top: -9999px;}
input.checkbox:checked{background-color: #573fb1; border: 1px solid #573fb1;}
input.checkbox+label{display: inline-block; border: 1px solid #e5e6ea; width: 16px; height: 16px; box-sizing: border-box; background-color: #fff; vertical-align: middle; border-radius: 3px; position: relative;}
input.checkbox:checked+label{background-color: #573fb1; border: 1px solid #573fb1;}
input.checkbox:checked+label:after{content: "\f00c"; color: #fff; position: absolute; left: 0; top:0 ; font-family: "FontAwesome"; font-size: 10px; display: block; width: 14px; height: 14px;line-height: 14px; text-align: center;}

/* custom form */
input[type=radio]{vertical-align: middle; width: 24px; height: 24px; margin-right: 5px; background-color: #fff; border: 1px solid #c0c0c0;}
.form-radio{position: absolute; top: -9999px; width: 0; height: 0; visibility: hidden;}
.form-radio+label{line-height: 24px; display: inline-block; vertical-align: middle; cursor: pointer;}
.form-radio+label:before{display: inline-block; width: 24px; height: 24px; background: url(../img/bg_radio.png) no-repeat 0 0; content: ""; vertical-align: middle; margin-right: 7px; cursor: pointer;}
.form-radio:checked+label:before{background-position: 0 -24px;}
.form-radio:disabled+label:before{background-position: 0 -48px;}
.form-select{min-width: 120px;}
.form-select dt{}
.form-select dt a{display: block; border: 1px solid #e4e4e4; height: 40px; line-height: 40px; box-sizing: border-box; padding-left: 15px; color: #888;}
.form-select dt a i{position: absolute; right: 12px; top: 15px; transition: all 0.2s ease;}
.form-select dd{position: absolute; width: 100%; left: 0; top:39px; background-color: #fff; display: none;}
.form-select dd ul{border: 1px solid #ea002c;}
.form-select dd ul li{}
.form-select dd ul li a{display: block; padding-left: 15px; height: 40px; line-height: 40px;}
.form-select.active dt a{border: 1px solid #ea002c;}
.form-select.active dt a i{transform: rotateZ(180deg);color: #ea002c;}
.form-select dd ul li a:hover{text-decoration: underline; color: #ea002c;}
input.full,textarea.full{ width: 100%;}
/* link */
a{color:#666;text-decoration:none;}
a:link, a:visited, a:active{text-decoration: none;}
a:hover{color:#666;}

/* color */
.f_blue{color: #3477ac;}
.f_red{color: #f01414;}
.f_dark{color: #212121;}

.f18{font-size: 18px;}

/* btn */
.btn{display: inline-block; text-align: center;  font-size: 16px; box-sizing: border-box; font-weight: 700; vertical-align: middle;}
.btn-m{height: 44px; line-height: 44px; padding: 0 20px; min-width: 100px;}
.btn-s{height: 34px; line-height: 36px; padding: 0 12px; border-radius:3px;}
.btn-ms{height: 34px; line-height: 36px; padding: 0 12px; border-radius:3px; min-width: 68px;}
.btn-xs{height: 32px; line-height: 32px; padding: 0 10px; border-radius:3px;}
.btn-xxs{height: 24px; line-height: 24px; padding: 0 10px; border-radius:3px; font-size: 13px;}
.btn-gray{background-color: #e6eaee; border: 1px solid #cecece; color: #222; border: 1px solid #d9d9d9;}
.btn-blue{background-color: #3477ac; color: #fff; }
.btn-dark{background-color: #5e5e65; color: #fff !important; }
.btn-pupple{background-color: #413eaa !important; color: #fff; }
.btn-white{background-color:none !important; color: #222; border:1px solid #c9c9c9; }
.btn-square{display: inline-block; width: 34px; height: 34px; background-color: #f7f7f7; border-radius:3px; border: 1px solid #dbdee1; color: #888888; text-align: center;}
.btn:disabled{color: #fff; background-color: #cdcdcd;}
.btnLine{}
.btnLine:after{content:""; display: block; clear: both;}
.btnLine .btnCenter{text-align: center;}
.btnLine .btnCenter .btn{margin: 0 2px;}
.btnLine .btnLeft{float: left;}
.btnLine .btnLeft .btn{margin-right: 5px;}
.btnLine .btnRight{float: right;}
.btnLine .btnRight .btn{margin-left: 5px;}

.contents_box{position: relative;}
.contents_box:after{content: ""; display: block; clear: both;}

/* layout */
html{height: 100%; overflow: auto;}
body{font-family:'Nanum Gothic','Malgun Gothic', 'notokr-regular','dotum',Arial,Verdana, Helvetica, sans-serif; font-size: 14px; color: #4d4d4d; height: 100%; font-weight: 700;}

#wrapper{}
#topUtil{ background-color: #1b6fa6; height: 35px;}
#topUtil .topMenu{float: right;}
#topUtil .topMenu li{float: left; margin-left: 10px; padding-left: 10px; position: relative;}
#topUtil .topMenu li:after{content: ""; display: block; float: left; width: 1px; height: 12px; background-color: #609ac1; left:0; position: absolute; top: 12px;}
#topUtil .topMenu li:first-child:after{display: none;}
#topUtil .topMenu li a{display: block; color: #fff; line-height: 35px; float: left;}
#header{ height: 47px; position: relative; border-bottom: 1px solid #b4c5da;}
#header h1{text-align: center; padding-top: 12px;}
#header .gnb{float: right; margin-top: 30px;}
#header .gnb li{float: left; padding:0 30px;}
#header .gnb li a{color:#222; font-size: 16px; display: block;}
#header .gnb li a:hover{color: #0072bc}
#header .gnb li.active a{color: #0072bc}
#header .m_menu{ position: absolute; width: 47px; height: 47px; right: 0; top: 0; background: url(../img/btn_menu.png) no-repeat 50% 50%; background-size: auto 16px; text-indent: -9999px; overflow: hidden;}
/*
.indexBanner{margin: auto; position: relative; width: 1300px; margin: auto;} 
.indexBanner .bannerTxt{position: absolute; left: 0; top:50%; width: 100%; text-align: center; margin-top: -45px;}
.indexBanner ul li img{}
*/

.indexBanner{margin: auto; position: relative;} 
.indexBanner .bannerTxt{position: absolute; left: 0; top:50%; width: 100%; text-align: center; margin-top: -45px;}
.indexBanner .bannerTxt p,.indexBanner .bannerTxt span {color: #FFFFFF; font-family: 'DalseoHealing',sans-serif;}
.indexBanner .bannerTxt p {font-weight: 700; font-size: 24px;}
.indexBanner .bannerTxt span {font-weight: 400; font-size: 14px;}
.indexBanner ul li img{ width: 100%;}

.bx-controls{}
.bx-controls .bx-pager{text-align: center;position: absolute; bottom: 25px; width: 100%;}
.bx-controls .bx-pager .bx-pager-item {display: inline-block; margin: 0 5px;}
.bx-controls .bx-pager .bx-pager-item a{display: inline-block; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 100%; text-indent: -9999px; overflow: hidden;}
.bx-controls .bx-pager .bx-pager-item a.active{background-color: #fff;}
.bx-controls .bx-controls-direction a{display: block; width:28px; height: 49px; position: absolute; top: 50%; margin-top: -25px; z-index: 20;}
.bx-controls .bx-controls-direction a.bx-prev{display: block; background: url(../img/btn_banner_left.png) no-repeat; left: 40px;}
.bx-controls .bx-controls-direction a.bx-next{display: block; background: url(../img/btn_banner_right.png) no-repeat;right: 40px;}

.noticeArea{ background-color: #1d2331; color: #fff; height: 60px;}
.noticeArea h2{ line-height: 60px; font-size: 18px; width: 90px; float: left;}
.noticeArea .noticeScroll{float: left; width: 955px; height: 60px;}
.noticeArea .noticeScroll ul li {line-height: 60px; position: relative;}
.noticeArea .noticeScroll ul li a{ color: #fff; font-size: 16px; font-weight: normal;}
.noticeArea .noticeScroll ul li a:hover{text-decoration: underline;}
.noticeArea .noticeScroll ul li span.date{position: absolute; right: 0; top: 0; line-height: 60px; font-size: 16px; font-weight: normal;}
.noticeArea .btn_more{position: absolute; right: 0; top: 14px;}

.indexMenu{ background-color: #f6f6f6; box-sizing: border-box; text-align: center;}
.indexMenu li{display: inline-block; text-align: center; width: 33.333%; float: left; border-left: 1px solid #ddd; box-sizing: border-box;}
.indexMenu li:first-child{border: none;}

.indexMenu li a{display:block; line-height: 50px; color: #212121; font-size: 13px;}
.indexMenu li a img{margin-right:5px;}

.photoAlbum{color: #222; padding-top: 20px; padding-bottom: 25px;}
.photoAlbum h2{text-align: center; font-size: 21px; font-weight: 900;}
.photoAlbum  p{text-align: center; font-size: 12px;}
.albumList{position: relative; margin: auto; padding-top: 20px;}
.albumList li img{width: 100%;}
.albumList .bx-controls .bx-controls-direction a.bx-prev{left: 10px; background-size: 14px auto; background-position: left center;}
.albumList .bx-controls .bx-controls-direction a.bx-next{right: 10px; background-size: 14px auto; background-position: right center;}

.notice {color: #222; background-color: #f8f9f9;padding-top: 20px; padding-bottom: 25px; padding-left: 15px; padding-right: 15px;}
.notice h2{text-align: center; font-size: 21px; font-weight: 900;}
.notice ul{padding-top: 12px;}
.notice li {margin-bottom: 15px;}
.notice li a{display: block; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.3); padding: 12px 60px 12px 15px; position: relative;}
.notice li a:after{content: "\f105"; display: block; font-family: "fontAwesome"; font-size: 30px; font-weight: 400; position: absolute; right: 12px; top: 50%; margin-top: -11px; color: #999;}
.notice li a dt{ color: #222; font-size: 14px;}
.notice li a dd{font-size: 12px; font-weight: 400;}

#footer .footerLine{ border-top: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;}
#footer .footNav ul li{float: left; line-height: 35px; position: relative; text-align: center; width: 20%;}
#footer .footNav ul li:after{content: ""; display: block; float: left; width: 1px; height: 12px; background-color: #dedede; left:0; position: absolute; top: 13px;}
#footer .footNav ul li:first-child{padding-left: 0px;}
#footer .footNav ul li:first-child a{color: #0072bc;}
#footer .footNav ul li:first-child:after{display: none;}
#footer .footNav ul li a{font-size: 11px; line-height: 35px; text-align: center; display: block;}
#footer .footNav ul li a:hover{color: #0072bc;}
#footer .footNav ul li:nth-child(1){width: 30%;}
#footer .footNav ul li:nth-child(2){width: 30%;}
#footer .footNav ul li:nth-child(3){width: 25%;}
#footer .footNav ul li:nth-child(4){width: 15%;}
#footer .siteInfo{ padding: 10px 0;}
#footer .siteInfo p{ line-height: 160%; font-size: 11px; text-align: center; color: #4d4d4d;}
#footer .siteInfo .copyright{text-align: center; font-size: 11px; color: #c5c5c5; margin-left: 0; font-weight: 400; margin-top: 10px;}

.topVisual{background-size: contain;}
.topVisual .contents_box{height: 240px; overflow: hidden; color: #fff; text-align: center;}
.topVisual.visual-01{background: url(../img/bg_cate01.png) no-repeat 50% 50%;}
.topVisual.visual-02{background: url(../img/bg_cate02.png) no-repeat 50% 50%;}
.topVisual.visual-03{background: url(../img/bg_cate03.png) no-repeat 50% 50%;}
.topVisual.visual-04{background: url(../img/bg_cate04.png) no-repeat 50% 50%;}
.topVisual.visual-05{background: url(../img/bg_cate05.png) no-repeat 50% 50%;}
.topVisual.visual-06{background: url(../img/bg_cate06.png) no-repeat 50% 50%;}
.topVisual.visual-07{background: url(../img/bg_cate07.png) no-repeat 50% 50%;}
.topVisual h2{font-size: 21px; padding-top: 70px;}
.topVisual p{font-size: 12px; margin-top: 10px; font-weight: 400;}
.topVisual ul{position: absolute; left: 0; right: 0; bottom: 0; height:37px; background-color: rgba(55,57,69,0.85)}
.topVisual ul>li{float: left; width: 25%;}
.topVisual ul>li>a{display: block; color: #fff; text-align: center; line-height: 37px; font-size: 12px;}
.topVisual ul>li a:hover{color: #0072bc;}
.topVisual ul>li.active a{color: #0072bc; background-color: #fff;}

#contents{padding: 28px 10px 40px 10px; font-size: 12px; color: #212121;}
.contitle{font-size: 14px; color: #0a6199; text-align: center; font-weight: 700; height: 80px;}
.contitle b{font-size: 18px; color: #212121; display: block; font-weight: 800; margin-bottom:0;}
/*.contitle:after{content: ""; display: block; width: 1px; height: 30px; background-color: #a0a0a0; display: block; margin: auto; margin-top:8px;}*/
.table-default {border-top: 2px solid #222; color: #222;}
.table-default th{font-size: 17px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #bfc3c6; background-color: #e3e8ec;}
.table-default thead th{border-left: 1px solid #bfc3c6; font-weight: 800; line-height: 120%;}
.table-default thead th.white{background: none;}
.table-default.small-head thead th{padding-top: 10px; padding-bottom: 10px;}
.table-default thead tr:first-child th:first-child{border-left: none;}
.table-default tbody th{}
.table-default td{font-size: 16px;padding-top: 20px; padding-bottom: 20px; padding-left: 30px;border-bottom: 1px solid #d6d6d6; border-left: 1px solid #d6d6d6; padding-right: 30px;}
.table-default tbody tr td:first-child{border-left: none;}
.table-default.text-center tbody td{padding-left: 0; text-align: center;}

.table-default.color-red{border-top: 2px solid #a14d4c;}
.table-default.color-red th{background-color: #f6ebeb;}


.table-vertical {border-top: 1px solid #222; color: #222;}
.table-vertical th{font-size: 17px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #bfc3c6; background-color: #e3e8ec; text-align: left; padding-left: 40px; height: 44px;}
.table-vertical td{font-size: 16px; padding-top: 10px; padding-bottom: 10px; padding-left: 15px;border-bottom: 1px solid #d6d6d6; height: 44px; padding-right: 15px;}

.mapArea{ border: 1px solid #d2d2d2; height: 530px; overflow:hidden;}
.traffic {margin-top: 25px;}
.traffic .address{ border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; text-align: center; line-height: 55px; font-weight: 800; padding-top: 15px; padding-bottom: 15px;}
.traffic dl{ margin-top: 30px; width: 535px; height: 110px;}
.traffic dt{ padding-left: 20px; background-color: #e4e8eb; padding-top:8px; padding-bottom:8px; margin-bottom: 10px;}
.traffic dd{font-size: 15px;}
.traffic dd p{padding-left: 10px; background: url(../img/bullit-traffic.png) no-repeat left center;}

.bulit_blue{padding-left: 10px; background: url(../img/bullit-traffic.png) no-repeat left 10px;}
.caravane{}
.caravane .caravaneGallery{float: left;}
.caravane .reservation{float: right; width: 440px; height: 510px; border: 1px solid #cfcfcf; padding: 60px 23px 0 23px; box-sizing: border-box; position: relative;}
.caravane .reservation dl{padding: 0 7px}
.caravane .reservation dt{font-size: 20px; color: #000; margin-bottom: 20px;}
.caravane .reservation dd{position: relative; padding-left: 90px; margin-bottom: 10px;}
.caravane .reservation dd b{position: absolute; left: 0; top: 0; color: #111;}
.caravane .reservation .btn_reser{text-align: center; padding-top: 20px; border-top: 1px dotted #ddd; position: absolute; bottom: 20px;}
.caravaneGallery{float: left;}
.caravaneGallery .galleryBox { width: 640px; height: 423px; overflow: hidden; background-color: #ccc; margin-bottom: 10px;}
.caravaneGallery .galleryBox img{width: 100%;}
.caravaneGallery .galleryView li{float: left; width: 120px; height: 75px; overflow: hidden; margin-right: 10px;}
.caravaneGallery .galleryView li img{width: 120px; cursor: pointer;}

#contents .blockTitle{font-size: 21px;}
#contents .caution{ font-size: 20px; text-align: center; background-color: #e3e8ec; line-height: 140%; padding-top: 20px; padding-bottom: 20px;}

.cautionList { border: 1px solid #ddd; margin-top: 30px; padding:20px 50px;}
.cautionList li{ padding:20px 0; border-top: 1px dashed #ddd;}
.cautionList li:first-child{border: none;}
.cautionList dl{}
.cautionList dt{font-size: 18px; color: #0072bc; font-weight: 800; margin-bottom: 3px;}
.cautionList dd{margin-bottom: 3px;}

.guideMap{position: relative; background: url(/img/img_guide-01.png) no-repeat; background-size: 340px 340px; width: 340px; height: 340px;}
.guideMap ul li{position: absolute;}
.guideMap ul li span.num{display: block; color: #fff; font-size: 15px; width: 37px; line-height: 37px; text-align: center; font-weight: 900;background: url(../img/bg_num.png) no-repeat;} 
.guideMap ul li a{display: block; position: relative;}
.guideMap ul li a:hover .img{display: block; z-index: 10;}
.guideMap ul li .img{background: url(/img/bg_bloon.png) no-repeat; width: 223px; height: 174px; display: block; padding: 3px; position: absolute; left: 50%; margin-left: -111px;bottom:35px ;display: none;}
.guideMap ul li .img.bot{}
.guideMap ul li .img img{border-radius: 5px;}
.guideMap ul li.map01{ left:207px; top:24px;}
.guideMap ul li.map02{ left:120px; top:214px;}
.guideMap ul li.map03{ left:228px; top:365px;}
.guideMap ul li.map04{ left:537px; top:170px;}
.guideMap ul li.map05{ left:143px; top:397px;}
.guideMap ul li.map06{ left:382px; top:492px;}
.guideMap ul li.map07{ left:492px; top:274px;}
.guideMap ul li.map08{ left:103px; top:98px;}
.guideMap ul li.map09{ left:475px; top:357px;}
.guideImage{ border-top: 1px solid #ddd; padding-top: 30px; margin-top: 30px;}

.bulitList>li{padding-left: 12px; background: url(../img/bullit-traffic.png) no-repeat left 10px; margin-top: 10px;}
.bulitList>li>ul{padding-left: 12px;}
.bulitList>li>ul>li{line-height: 25px; margin-top: 3px;}

.reservationInfo{margin-top: 40px; border-top: 1px dashed #ddd; padding-top: 40px;}

.tourList{margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #ddd;}
.tourList.last{margin-bottom:0px; padding-bottom:0px; border-bottom:none;}
.tourList>li{width: 535px; float: left;}
.tourList>li:nth-child(2n+2){float: right;}
.tourList>li img{}
.tourList>li .info{ border: 1px solid #ddd; padding: 20px;}
.tourList>li .info dt{font-size: 22px; font-weight: 800; margin-bottom: 10px;}
.tourList>li .info dd{font-size: 15px; color: #666; line-height: 27px;}
.tourList>li .info .bulitList {font-size: 15px; border-top: 1px solid #ddd; padding-top: 20px;}
.tourList>li .info .bulitList li{ margin-top: 0; line-height: 180%;}

.root_daum_roughmap .wrap_controllers {overflow: hidden; padding: 7px 11px; border: 1px solid #dfdfdf; border-color: rgba(0,0,0,.1); border-radius: 0 0 2px 2px; background-color: #f9f9f9;}
.root_daum_roughmap .wrap_controllers .tit_controllers {float: left;}
.root_daum_roughmap .wrap_controllers .wrap_btn_roadview {float: right; position: relative; top: 1px; font-size: 11px;}
.root_daum_roughmap .wrap_controllers .wrap_btn_roadview .txt {height: 15px; padding-top: 1px; line-height: 15px; color: #000;}
.root_daum_roughmap .wrap_controllers .wrap_btn_roadview .txt_bar {width: 1px;padding: 0;margin: 0 8px 0 9px;height: 11px;vertical-align: top;position: relative;top: 2px;border-left: 1px solid #d0d0d0;}




.searchArea{background-color: #e3e8ec; text-align: center; padding: 25px 0;}
.paging{text-align: center;}
.paging a{display: inline-block; text-align: center; width: 26px; height: 26px; line-height: 26px;}
.paging a.active{color: #0a6199; font-weight: 900;}
.paging a:hover{color: #0a6199;}

.table-bbsList{border-top: 1px solid #000;}
.table-bbsList thead th{border-bottom: 1px solid #d6d6d6; font-size: 17px; font-weight: 700; padding-top: 15px; padding-bottom: 15px;}
.table-bbsList tbody td{text-align: center; border-bottom: 1px solid #d6d6d6; padding-top: 15px; padding-bottom: 15px;}
.table-bbsList tbody td a{color: #212121;}
.table-bbsList tbody td a.re{margin-left: 20px;}
.table-bbsList tbody td a:hover{color: #0a6199;}
.table-bbsList .left{text-align: left; padding-left: 10px;}

.bbsViewArea {}
.bbsViewArea .bbsInfo{ border-top: 1px solid #000; border-bottom: 1px solid #ddd;}
.bbsViewArea .bbsInfo .title{float: left; line-height: 60px; padding-left: 20px; font-size:18px; font-weight: 800; color: #222;}
.bbsViewArea .bbsInfo .info{float: right; margin-right: 20px;}
.bbsViewArea .bbsInfo .info li{ margin-left: 40px; float:left; line-height: 60px; opacity: 0.9;}
.bbsViewArea .bbsInfo .info li span{margin-right: 5px;}
.bbsViewArea .bbsContents{border-bottom: 1px solid #ddd; padding: 40px 10px;}
.bbsViewArea .bbsContents img{display: block; width: 100%; margin-bottom:30px;}

.galleryList{border-bottom: 1px solid #ddd; margin-top: 40px; margin-left: -20px;}
.galleryList li{margin-bottom: 40px; float: left; margin-left: 20px;}
.galleryList li a{width: 260px; height: 290px; border: 1px solid #ddd; overflow: hidden; display: block; box-sizing: border-box;}
.galleryList li a .img{height: 190px; overflow: hidden;}
.galleryList li a .img img{ width: 100%;}
.galleryList li dl{padding:20px 25px; padding-bottom: 0;}
.galleryList li dl dt{font-size: 17px; color: #222; font-weight: 900; margin-bottom: 8px;}
.galleryList li dl dd{float: left; font-size: 14px;}
.galleryList li dl dd.hit{float: right; text-align: right;}
.pwinputArea{ border-top: 1px solid #000; border-bottom: 1px solid #ddd; padding-top: 40px; padding-bottom: 40px; padding-left: 360px;}
.pwinputArea h4{font-size: 18px; color: #000; font-weight: 700;}
.pwinputArea p{color: #666;}

.policyArea .slogan{font-size: 16px; background-color: #f4f5f8; border-top: 1px solid #000; color: #393939; padding: 25px 55px 25px 55px; line-height: 25px;}
.policyArea dl{margin-top: 50px;}
.policyArea dl dt{color: #212121; font-size: 17px; line-height: 25px; font-weight: 700}
.policyArea dl dd{color: #393939; font-size: 16px; line-height: 25px; font-weight: 400;}

.sitemap{border-top: 1px solid #000;}
.sitemap li{float: left; width: 183px; border-left: 1px solid #cfcfcf; height: 340px; box-sizing: border-box; text-align: center;}
.sitemap li:first-child{border: none;}
.sitemap li dl{padding-top: 35px;}
.sitemap li dl dt{font-weight: 800; font-size: 20px; color: #0072bc; background: url(../img/bg_sitemap.png) no-repeat center bottom; padding-bottom: 20px; margin-bottom: 20px;}
.sitemap li dl dd{line-height: 200%; }
.sitemap li dl dd a{color: #555;}

.stepInfo{margin-top: 10px; background-color: #e3e8ec; border-top: 2px solid #000; padding: 40px 0 0 40px;}
.stepInfo li{ width: 501px; float: left; margin-right: 20px; padding-bottom: 40px;}
.stepInfo li dl{ padding-top: 20px;}
.stepInfo li dt{font-size: 17px; margin-bottom: 5px;}
.stepInfo li dt b{font-weight: 800; color: #0072bc;}
.stepInfo li dd{font-size: 15px; margin-bottom: 5px;}

.mailLayer {display: none;}
.mailLayer .overay{position: fixed; left: 0; top:0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100;}
.mailLayer .layerPop{position: fixed; background-color: #fff; z-index: 101; width: 530px; height: 280px; left: 50%; top: 50%; margin-top: -140px; margin-left: -265px;}
.mailLayer .layerPop h2{color: #fff; font-size: 19px; font-weight: 800; background-color: #0072bc; height: 56px; line-height: 56px; padding-left: 20px;}
.mailLayer .layerPop .popContents{padding: 25px 20px; font-size: 16px; color: #212121;}
.mailLayer .layerPop .close{position: absolute; right: 20px; top: 15px;}

.mobMenuArea{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 100; overflow: hidden;  transition: all 0.2s ease; transform: translateX(100%)}
.mobMenuArea .menuArea{position: fixed; top: 0; right: 0; bottom: 0; width:230px; background-color: #fff; overflow-y: auto; transition: all 0.4s ease; transform: translateX(230px)}
.mobMenuArea .menuArea .tit{text-align: center; height: 55px; line-height: 55px;}
.mobMenuArea .menuArea .gnb{border-top: 1px solid #ddd;}
.mobMenuArea .menuArea .gnb>li{border-bottom: 1px solid #ddd;}
.mobMenuArea .menuArea .gnb>li>a{display: block; padding-left: 20px; height: 40px; line-height: 40px; font-size: 14px; color: #222;position: relative;}
.mobMenuArea .menuArea .gnb>li>a:after{position: absolute; content: "\f067"; display: block;color: #1b6fa6;font-family:'FontAwesome'; right: 12px; top: 0; font-weight: 400;}
.mobMenuArea .menuArea .gnb>li.active>a{background-color: #1b6fa6; color: #fff;}
.mobMenuArea .menuArea .gnb>li.active>a:after{content: "\f068"; color: #fff;}
.mobMenuArea .menuArea .gnb>li>ul{ padding-top: 10px; padding-bottom: 10px; display: none;}
.mobMenuArea .menuArea .gnb>li>ul>li{line-height: 24px;}
.mobMenuArea .menuArea .gnb>li>ul>li>a{padding-left: 20px; color: #222; font-size: 12px;}
.mobMenuArea .close{position: absolute; left:0px; top: 0;  transition: all 0.2s ease; transform: translateX(-40px)}
.mobMenuArea .close button{ width: 40px; height: 40px; text-align: center; float: left; color: #fff; z-index: 120; font-size: 20px;}
.mobMenuArea.active {transition: all 0.4s ease; transform: translateX(0)}
.mobMenuArea.active .menuArea{transform: translateX(0px)}
.mobMenuArea.active .close{transform: translateX(0px)}