@charset "UTF-8";
@import url(html5_reset.css);

html, body {  position: relative;  height: 100%;}
html {background: url(../images/common/body_bg.gif) center ;}
body {  background: #787878;  font-family:'Montserrat','Noto Sans KR','PlayfairDisplay',Sans-serif;
  font-size: 14px;    margin: 0;  padding: 0;  max-width: 800px;  margin:0 auto; min-width: 320px; color:#888888;}
img {max-width: 100%;  height: auto !important;}


input[type="text"], input[type="password"], input[type="number"], input[type="tel"], textarea {padding: 5px 10px;border-radius:3px;border:1px solid #d3d3d3;color: #888;font-size: 1.3em;}
select {padding: 5px 10px;border-radius:3px;border:1px solid #d3d3d3;color: #888;}


textarea {min-height: 80px; font-family:'Montserrat','Noto Sans KR','PlayfairDisplay',Sans-serif;}
/*FontAwesome checkbox*/
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {font-family: FontAwesome;display: inline-block;font-size: 1.3em;vertical-align: middle;}
input[type=checkbox] + label:before { content: "\f096"; width: 20px; } /* unchecked icon */
input[type=checkbox]:checked + label:before { content: "\f046"; width: 20px;     color: #5c73b8;} /* checked icon */


.select {
    border-radius:3px;
    border:1px solid #d3d3d3;
    color: #888;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
   /* padding-right: 10px; */
}

select{
    border: 0;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select:after {
    content:"\f0d7";
    font-family: FontAwesome;
    color: #000;
    padding: 9px 15px;
    position: absolute;
    right: 5px;
    top: 0;
    background: #fff;
    z-index: 1;
    text-align: center;
    width: 10%;
    height: 100%;
    pointer-events: none;
    box-sizing: border-box;
}


.fLeft   { float: left !important;}
.fRight  { float: right !important;}
.TextL {text-align: left !important;}
.TextC {text-align: center !important;}
.TextR {text-align: right !important;}

.mb0 {margin-bottom: 0 !important;}



#container { overflow: hidden; width: 100%; max-width: 1000px; position: relative; min-height: 100%; background: #fff;/* min-height: 1000px; */}
/*popup*/

.pop-layer {
  position: absolute;
  top: 130px;
  left: 50%;
  width: 400px;
  margin-left:-200px;
  height: auto;
  z-index: 10;
}

.pop_close_but {
    position: absolute;
    top: -13px;
    right: -14px;
}
#popdim {position:fixed;left:0;top:0;right:0;bottom:0;z-index:9;width: 100%;background: rgba(0, 0, 0, .6);  cursor: pointer;}


/*.header*/
.header {padding: 10px 90px;background: #fff;position: relative;}
.header h1 {text-align: center;}
.header h1 img {max-width: 235px; width: 100%;}
.header > span {position: absolute;top: 50%;display: block;min-width: 31px;text-align: center; color: #5d5d5d; }
.header > span > span {font-size: 20px;vertical-align: top;margin-top: 14px;display: inline-block;font-weight: 700;display: none;}
.header span a{color:#5d5d5d;}
.header span#menu_but {left:15px;font-size:36px;margin-top: -18px;}
.header span.call {right: 15px;font-size: 46px; margin-top: -25px;}
/*.header > span.call > a {display: none;}*/



/*main_nav*/
.main_nav {background: #5c73b8;padding:10px 0 ;}
.main_nav ul {overflow: hidden; }
.main_nav ul.more {padding-bottom: 10px; margin-bottom: 10px; border-bottom:1px solid #8298da;  }
.main_nav ul li {width: 25%; font-weight: 700; float: left; text-align: center;font-size:1.3em;}
.main_nav.one ul li {width: 100%}
.main_nav.two ul li {width: 50%;}
.main_nav.three ul li {width: 33.333333333333%;}
.main_nav.four ul li {width: 25%;}
.main_nav.five ul li {width: 20%;}


.main_nav ul li a {color:#fff;display:block;border-right:1px solid #435792;border-left:1px solid #8298da;padding:5px 0;font-weight: 400;}
.main_nav ul li:first-child a{border-left: 0;}
.main_nav ul li:last-child a {border-right: 0; }

.dim_bg {width:100%;max-width: 1000px;height:100%;position: absolute;top: 0;
  background:rgb(0,0,0);background: transparent\5;background: rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);zoom: 1;display: none;z-index: 10;}

/*sub_nav*/
.sub_nav > ul {text-align: right; background: #ebeef1; padding:10px 20px;  border-top: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4;  }
.sub_nav > ul > li {display: inline-block;}
.sub_nav > ul > li:first-child::before {content: none;}
.sub_nav > ul > li::before {content:"\f105";font-family: FontAwesome;margin: 0 8px; font-size: 1em}


/*main_rolling*/
#main_rolling img {width: 100%; display: block;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 15px;text-align: right;left: -15px;}
.swiper-pagination-bullet {width: 15px; height: 15px;}
.swiper-pagination-bullet-active {background:#5c73b8}

/*banner*/
.main_banner_wrap {overflow: hidden;}
.main_banner_wrap a {display: block;}
.PCwidth100 {width: 100%; padding-top: 2px; }
.width100 {width: 100%; padding-top: 2px; }
.width50 {width: 50%; float: left; margin-top: 2px;}
.width100 img, .width50 img, .PCwidth100 img {width: 100%; display: block;}
.width50.right {float: right}
.width50.left a  {border-right:1px solid #fff;}
.width50.right a  {border-left:1px solid #fff;}

.sub_contents {overflow: hidden; font-size: 0.90em;}
.sub_contents.inwrap {padding:20px 15px;border-bottom: 1px solid #ddd;}
.sub_contents img {display: block;}

.sub_contents .swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }
.sub_contents .swiper-slide {
        background-size: cover;
        background-position: center;
    }
.sub_contents .gallery-top {
        height: 80%;
        width: 100%;
    }
.sub_contents .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
.sub_contents .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
.sub_contents .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }



/* //////////////////// Board  //////////////////// */

/*agree*/
.agree {line-height: 1.5em;}
.agree h4 {font-size: 1.2em;margin-bottom: 8px;color: #444;margin-top:25px;}
.agree > p {margin-bottom: 10px;}
.agree ul {padding-left: 15px;margin-bottom: 10px;}
.agree ul li {list-style-type: square;}

/*board_list*/
.board_list {width:100%;table-layout:fixed;overflow:hidden; margin-bottom: 15px; }
.board_list thead tr th {border-top:3px solid #5c73b8;background:#f4f4f5;padding:15px 0;color:#666; text-align:center;border-bottom: 1px solid #d3d3d3;}
.board_list tbody tr td { padding:15px 0; text-align: center; border-bottom: 1px solid #d3d3d3; vertical-align: middle;}
.board_list tbody tr td a { display: block; text-overflow: ellipsis; overflow:hidden;white-space: nowrap; color:#797979}
.board_list tbody tr td.lock a::before {content:"\f023";font-family: FontAwesome;margin: 0  8px 0 0;}
.board_list tbody tr td.subject { text-align: left; }
.board_list tbody tr td span {padding: 2px 4px;border-radius: 3px;letter-spacing: -1px;min-width: 32px;display: inline-block;}
.board_list tbody tr td span.ing {background: #a9a9a9;color: #fff;border: 1px solid #8e8e8e;}
.board_list tbody tr td span.ok {background: #e76a98;border: 1px solid #c86388;color: #fff;}
.board_list tbody tr.notice { background: #fffde5 }
.board_list tbody tr.notice td a::before {content:"\f0a1";font-family: FontAwesome;margin: 0  8px 0 15px;}

.board_list.blog{border-top: 1px solid #d3d3d3;}
.board_list.blog tbody tr td > a {text-overflow: unset; overflow:initial;white-space: inherit; }
.board_list.blog tbody tr td > a > span {display: block;padding: .6em 1em 0  0;font-size: .8em;line-height:  1.4em;color: #aaa;}

/*board_button*/
.board_button {padding-bottom:15px ; text-align: right;}
.board_button p {float: left;text-align: left;/* margin-top: 4px; */line-height: 2em; letter-spacing: -1px;}
.board_button p a {font-weight: bold;}
.board_button > div {float:right;}

.btn {padding: 6px 10px;border-radius: 3px;letter-spacing: -1px;min-width: 30px;display: inline-block;color: #fff; text-align: center; margin:0 2px;}
.btn i {font-size: 1.3em;margin-right: 5px;vertical-align: middle;}
.blue {background: #5c73b8;border-color: #404e78;}
.red {background:#e76a98;border-color:#c86388}
.gray {background:#797979;border-color:#797979}

.charge{width: 100%; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.charge table {border: 1px solid #ccc; width: 100%;}
.charge table th, .charge table td {border: 1px solid #ccc; padding:10px;vertical-align: middle; line-height:1.4em; text-align: center;}
.charge table th {background: #5c73b8;color:  #fff;text-align: center;font-weight: 400;font-size: 18px;}
.charge table td {border: 1px solid #ccc;}



/*board_page*/
.board_page{padding: 10px 0;text-align: center;background: #f4f4f4; border-radius: 4px;}
.board_page ul li {display: inline-block;vertical-align:  middle;}
.board_page ul li a {display: block;background: #fff;border-radius:3px;border:1px solid #dedede;padding: 5px;min-width: 14px;line-height: 1.2em;}
.board_page ul li a:hover , .board_page ul li.active a  {background: #a9a9a9; border-color: #8e8e8e; color:  #fff; }
.board_page ul li:first-child, .board_page ul li:last-child {margin: 0 10px;}
.board_page ul li:first-child a::before {content:"\f100"; font-family: FontAwesome; }
.board_page ul li:last-child a::after {content:"\f101"; font-family: FontAwesome;}


/*board_write*/
.board_write {border-top: 3px solid #5c73b8; width:100%;table-layout:fixed;overflow:hidden; margin-bottom: 15px;}

.board_write tr th {background:#f4f4f5;padding:15px 0;color:#666; text-align:center;border-bottom: 1px solid #d3d3d3; vertical-align: middle;}
.board_write tbody tr td {padding: 10px 15px;border-bottom: 1px solid #d3d3d3; }
.board_write tbody tr td.full {padding: 10px 25px;}
.board_write tbody tr td.full input, .board_write tbody tr td.full textarea { margin-left:-10px; margin-right: -10px; width: 100%; }
.board_write tbody tr td.full textarea {height: 50px;}
.board_write tbody tr td.phone input[type="text"] {width: 17%;}
.board_write tbody tr td.phone input[type="tel"] {width: 17%;}
.board_write tbody tr td.e-mail input[type="text"] {width: 34%;}
.board_write tbody tr td p {margin-top: 10px;}
.board_write select  {height: 31px}
.board_write input[type="text"] {height: 19px}


/*board_view*/
.board_view {line-height: 1.5em;}
.board_view h4 {padding: 6px 10px;text-align: center;background: #f4f4f4;/* font-size: 1.2em; */border-top: 3px solid #5c73b8;border-bottom: 1px solid #ccc;color: #555;}
.board_view h4 select {font-size: 1em; margin-left: 10px;}
.board_view h4 .select:after {padding:0 15px; top:5px;}
.board_view > div > div {z-index: 10;position: relative;padding: 0 15px;}
.board_view .Q {border: 1px solid  #9db2f2;border-radius: 4px;margin-top: 20px;padding: 0 0 15px;position: relative;overflow: hidden;min-height: 110px;}
.board_view .Q h5 {font-size: 1.2em;margin-bottom: 10px;background: #f2f5ff;padding: 10px 15px;}
.board_view .A {border: 1px solid  #f5c0d4;border-radius: 4px;margin-top: 10px;padding: 15px 0;position: relative;overflow: hidden;margin-bottom: 20px;min-height: 50px;}
.board_view > div > span {position: absolute;font-size: 100px;bottom: 35px;right: 0;color: #f2f5ff;font-family: tahoma;font-weight: 900;}
.board_view > .A > span {bottom: 30px;color: #fff5f9;}
.board_view > .board_button {text-align: center;}

/*gallery_view*/
.gallery_view {margin-bottom: 20px; padding-bottom:20px; border-bottom: 1px solid #ccc; margin-top: 20px; }
.gallery_view img {display: inline-block;}
.gallery_view .thumb { position: relative; border:2px solid #878787; border-radius: 6px; margin-bottom: 20px; padding: 0 }
.gallery_view .thumb > span {position: absolute;top:0;left:0;background: rgba(68,68,68,0.7);color: #fff;padding:5px 10px;border-radius: 4px 0;line-height: 1em;}
.gallery_view .thumb img {border-radius: 4px;width: 100%;display:  block;}
.gallery_view .thumb.after{border: 2px solid #5c73b8;}
.gallery_view .thumb.after  > span {background: rgba(92, 115, 184, 0.78);}


/*password*/
.password {font-size: 1.3em;text-align: center;border: 8px solid #f4f4f4;padding: 20px;border-radius: 15px;position: relative;z-index:0}
.password form {position: relative; z-index: 10}
.password p {line-height: 1.5em; z-index:2 }
.password input {margin:20px 0; max-width: 60%; z-index:2  }
.password a {line-height:1.6em; padding:6px 30px  ;vertical-align: middle;}
.password i {position: absolute;font-size: 200px;color: #f4f4f4;right: 0;bottom: -30px;z-index: -1;}

.gallery_pass {line-height: 1.3em;}
.gallery_pass h5 {color: #e76a98; margin-bottom: 1.5em;}
.gallery_pass h5 span {display: block;}
.gallery_pass p {font-size: 0.8em; margin-bottom: 1.5em}
.gallery_pass p > span {display: block;}
.gallery_pass p > em {padding: 1px 6px; margin:1px 0;}
.gallery_pass p > a.btn {padding:5px 10px;}
.gallery_pass p > input[type=text] {text-align: center;}

/*gallery_list*/
.gallery_list {margin-bottom: 15px ; text-align: center;}
.gallery_list li {border-bottom:1px solid #ccc;padding: 15px 0;}
.gallery_list > li > a {display: block; position: relative;  overflow: hidden;}
.gallery_list > li > a > div {display: inline-block;}
.gallery_list .thumb {width: 44%; position: relative; border:2px solid #878787; border-radius: 6px }
.gallery_list .thumb > span {position: absolute;top:0;left:0;background: rgba(68,68,68,0.7);color: #fff;padding:5px 10px;border-radius: 4px 0;line-height: 1em;}
.gallery_list .thumb img {border-radius: 4px; width: 100%;}
.gallery_list .thumb.fRight{border: 2px solid #5c73b8;}
.gallery_list .thumb.fRight  > span {background: rgba(92, 115, 184, 0.78);}
.gallery_list .arrow {position:absolute;font-size: 60px;left:50%;top: 50%;color: #ccc;margin-top: -30px;margin-left: -9px;}
.gallery_list .arrow i { }
.gallery_list .title {margin-top: 10px;}
.gallery_list .title span {color: #e76a98; font-weight: bold;}


/*reviews_list*/
.reviews_list {margin:15px 0;}
.reviews_list td img {border-radius: 4px;}

/* //////////////////// footer  //////////////////// */
footer .icon {overflow: hidden; }
footer .icon ul li {width: 25%; float: left; text-align: center;background: #f4f4f4;padding:20px 0;}
footer .icon ul li a {display: block;border-right: 2px solid #ccc; border-left:2px solid #fff; padding:10px 0; }
footer .icon ul li a img {max-width: 140px; width: 100%;}
footer .icon ul li:first-child a {border-left:0;}
footer .icon ul li:last-child a {border-right:0;}
footer .foot_link {background: #303030; font-size: 1em; text-align: center;}
footer .foot_link ul li {display: inline-block; padding:10px 0; text-align: center;}
footer .foot_link ul li a {display: block; padding:2px 15px; border-left: 1px solid #888; color: #aaa;}
footer .foot_link ul li:first-child a {border:0;}
footer address{background: #505050;color: #ccc;font-style: normal;padding: 15px 10px;text-align: center;font-size: 0.8em;line-height: 1.4em;}
footer address p , footer address span {display: block;}
footer address a {color:#ccc;  }



#back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #f5f5f5;
    color: #888;
    cursor: pointer;
    border: 2px solid #888;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    font-size: 2em;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 0.7;
}



/*mobile*/
@media screen and (max-width: 600px) {
    .main_nav ul li {font-size:0.9em;}
    .pop-layer {
      width: 300px;
      margin-left:-150px;

    }
    footer .icon ul li {padding:5px 0;}
    footer .icon ul li a {padding:3px 0; border-right: 1px solid #ccc; border-left:1px solid #fff}
    footer .foot_link ul li a {font-size: 0.8em;padding: 2px 5px;}
    .pc {display: none !important;}
}


/*mobile + tablet*/
@media screen and (max-width: 768px) {

    /*side nav*/
    nav {background: #6d6d6d;position: fixed;min-height: 100%;width: 220px;top: 0;z-index: 1001;margin-left: -220px;color:#fff;overflow: hidden;}
    nav > ul {overflow-y: scroll;position:absolute;top: 0;bottom:0;width: 220px;}
    nav > ul > li {font-size:1.3em;padding-bottom:10px;line-height:1.6em;border-bottom: 1px solid #3b3b3b;}
    nav > ul > li h2 {background: #515151;padding: 5px 15px;color: #9db2f2;border-top: 1px solid #6b6b6b;font-weight: 400;border-bottom: 1px solid #5e5e5e;}
    nav > ul > li h2 a {color: #9db2f2}
    nav > ul > li h2::after{content:"\f103"; font-family: FontAwesome; float:right;}
    nav > ul > li a {color:#fff}
    nav > ul > li > ul {padding-top: 10px;border-top: 1px solid #3d3d3d;}
    nav > ul > li > ul > li {font-size:0.8em; line-height:1.6em; padding:0 15px; }
    nav > ul > li > ul > li::before {content:"\f068";font-size: 0.6em; font-family: FontAwesome; margin-right: 8px; }
    .header span#menu_but {font-size: 26px; margin-top: -14px;}
    .header span.call {font-size:34px; margin-top: -18px;}
    .swiper-pagination-bullet {width: 10px; height: 10px;}
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 3px;}
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 10px;left: -10px;}

.charge {font-size: .8em}
.charge table th, .charge table td {border: 1px solid #ccc;padding: 4px 3px;vertical-align: middle;line-height:1.4em;font-size: 11px;}
.charge table th {font-size: 12px;}
}

/*PC ver.*/

@media screen and (min-width: 769px) {
    input[type="text"], input[type="password"], textarea {font-size: 1em; height: auto; padding:10px ;}
    input[type=checkbox] + label:before { width: 30px; } /* unchecked icon */
    input[type=checkbox]:checked + label:before {width: 30px; } /* checked icon */
    input[type=file] {font-size: 1em}
    .select:after {right: 10px}
    .header {padding-left:50px;}
    .header h1 {text-align: left}
    .header > span > span {display: inline-block;}
    .width100 {width: 50%; float: left}
    .width100 img {width: 100%}
    .width100.left a  {border-right:1px solid #fff;}
    .width100.right a  {border-left:1px solid #fff;}
    footer address {font-size: 1em;}
    footer address span {display: inline-block; margin: 0 5px;}
    .header span#menu_but {left:50px;}
    .header span.call {right: 50px;}


    .main_nav, #menu_but {display:none}
    nav.pc { width: 100%;   }
    nav.pc > ul {overflow: hidden; height: auto; background: #5c73b8;   }
    nav.pc > ul > li {font-size:1.3em; line-height:1.6em;float: left;width:16.666666666666667%; text-align: center;}
    nav.pc > ul > li h2 {background: #5c73b8; padding: 5px 0; text-align: center;}
    nav.pc > ul > li h2 > a{display: block;border-right: 1px solid #435792;border-left: 1px solid #8298da;font-weight: 400;}
    nav.pc > ul > li:first-child h2 > a {border-left: 0}
    nav.pc > ul > li:last-child h2 > a {border-right:0}

    nav.pc > ul > li h2 > a > span {display: none;}
    nav.pc > ul > li a {color:#fff; letter-spacing: -1px;}
    nav.pc > ul > li > ul {display: none;padding: 10px 0;background: rgb(92, 115, 184);background: transparent\5;background: rgba(92,115,184,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);zoom: 1;position: absolute;z-index: 100;width: 16.666666666666667%;border-radius: 0 0 8px 8px;}
    nav.pc > ul > li:last-child > ul {right: 0;}
    nav.pc > ul > li > ul > li {font-size:0.75em; /*letter-spacing: -1px;*/ line-height:1.6em; padding:0 15px; }

    .sub_contents {font-size: 1.2em;}
    .sub_contents.inwrap {padding:50px;}

    .board_list tbody tr td span {min-width: 60px;padding: 6px 10px 2px;}
    .board_button {padding:0 15px 15px;}
    .board_button .btn {padding: 10px 30px; font-size: 1.3em;}

    .board_page ul li a {min-width: 20px;}

    .board_write input[type="text"] {height: auto}
    .board_write select {padding: 8px 10px;font-size: 1em;height: auto;}
    .board_write tbody tr td.full textarea {height: 120px;}
    .board_view .Q {min-height: 170px}
    .board_view .A {min-height: 150px;}

    .board_view > div > span {position: absolute;font-size: 150px;bottom: 60px;right: 0;color: #f2f5ff;font-family: tahoma;font-weight: 900;}
    .board_view > .A > span {bottom: 40px;color: #fff5f9;}
    .password {padding: 50px;}
    .gallery_list li {padding:30px;}
    .gallery_list .title {margin-top: 30px;font-size: 1.3em;}
    .gallery_pass h5 {font-size: 1.1em;}
    .gallery_pass h5 span {display: inline-block;}
    .gallery_pass p {font-size: 1em; }

    .gallery_pass p > span {display: inline-block;}

}