@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
body		{ font-family: 'NanumSquare', sans-serif; }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }



/*reset css*/
* {margin:0; padding:0; box-sizing: border-box;}
ol,ul,li { list-style:none;}
a { text-decoration:none; color: black;}
img { vertical-align:top; border:none;}
table { border-collapse:collapse;}
.clear:after { content:""; display:block; clear:both;}


/*header*/
#header{width: 100%; height:110px; position: absolute; top:0; left: 0; z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.4);}
#header .center{position: relative; width: 1400px; margin: 0 auto; height: 100%;}
/*.logo{width: 60px; height: 60px; margin-top: 50px; float: left; }*/
.logo{width: 170px; height: 29px; margin-top: 50px; position: absolute; z-index: 12;}
.logo a{width: 100%; height: 100%;}
.logo a img{width: 100%; height: 100%;}
.header h1{margin-top:50px;}

/*gnb*/
.gnb{float: right; padding-top: 50px;}
.gnb li{float: left; width: 180px;}
.gnb li a{color: #fff; font-weight: 600; font-size: 17px;}

/*visual 1차*/
/*
#visual{width: 100%; height: auto;}
#visual .slider{width: 100%; height: 100%; z-index: 9; position: relative;}
#visual .slider ul li .panel-text{position: absolute; z-index: 11; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#visual .slider ul li .panel-text h2{font-size: 56px; padding-bottom: 30px; font-weight: 800;}
#visual .slider ul li .panel-text p{font-size: 28px;}


.visual-menu{position: absolute; bottom: 50px; color: #fff; width: 100%;}
.visual-menu ul li{float: left; width: 33.333333%; text-align: center; position: relative;}
.visual-menu .visual-menu-icon{position: absolute; left: 50px; width: 50px; height: 50px; background-size: cover; background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon01-wh.png); background-repeat: no-repeat; display: inline-block;}
.visual-menu .visual-menu-icon:hover{background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon01.png);}
.visual-menu .visual-des h3{font-size: 22px; line-height: 35px;}
.visual-menu .visual-des p{font-size: 18px; line-height: 29px;}
.visual-menu .visual-des:hover{font-weight: 900;}

*/

/*bxslider*/
.bxslider li{height: 100%;}
.bx-wrapper{margin-top: 0px; margin-bottom: 0;}
.bx-wrapper .bx-prev {left: 20px; background: url(/_upload/img/main/prev.png); width: 32px; height: 50px;}
.bx-wrapper .bx-next {right: 20px; background: url(/_upload/img/main/next.png); width: 32px; height: 50px;}

.bx-wrapper .bx-controls-auto{bottom:0;}

.bx-wrapper .bx-pager{bottom: 30px;}
.bx-wrapper .bx-pager.bx-default-pager a.active{background: #fff;}
.bx-wrapper .bx-pager.bx-default-pager a:hover{background: #fff;}
.bx-wrapper .bx-next:hover{background-position: 0;}
.bx-wrapper .bx-next:focus{background-position: 0;}

.bx-wrapper .bx-pager.bx-default-pager a {
    color:#fff;
    border: 2px solid #fff;
border-radius: 50%;
    background: transparent;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
    outline: 0;
}

.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -25px;
outline: 0;
width: 32px;
height: 50px;
text-indent: -9999px;
z-index: 9999;}

.bx-wrapper{box-shadow: none; border: none;}
/*bxslider*/


/*visual 2차*/
#visual{width: 100%; height: auto;}
#visual .swiper-container{width: 100%; height: 100%; z-index: 9; position: relative;}
#visual .swiper-container .panel-text{position: absolute; z-index: 11; color: #fff; top: 40%; left: 50%; transform: translate(-50%, -50%);}
#visual .swiper-container .panel-text h2{font-size: 56px; padding-bottom: 30px; font-weight: 800; text-shadow: 1px 1px 5px rgba(0,0,0,0.5);}
#visual .swiper-container .panel-text p{font-size: 28px; line-height: 43px;}
#visual{position: relative;}
.visual-menu{position: absolute; right: 350px; color: #fff; width: 300px; z-index: 10; top: 50%; margin-top: -285px;}
.visual-menu ul{width: 100%; margin: 0 auto;}
.visual-menu ul li{float: none; width: 100%; text-align: center; position: relative; margin: 20px 0; background-repeat: no-repeat; background-size: cover; background-position: center center; border-radius: 0px; height: 130px; box-shadow: 3px 3px 5px rgba(0,0,0,0.7);}
.visual-menu ul li:nth-child(1){background-image: url(/_upload/haesung.km114.kr/common/img/g01.png);}
.visual-menu ul li:nth-child(2){background-image: url(/_upload/haesung.km114.kr/common/img/g02.png);}
.visual-menu ul li:nth-child(3){background-image: url(/_upload/haesung.km114.kr/common/img/g03.png);}
.visual-menu ul li:nth-child(4){background-image: url(/_upload/haesung.km114.kr/common/img/g04.png);}

.visual-menu ul li .visual-menu-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: all 0.5s;}
.visual-menu ul li:hover .visual-menu-bg{background-color: rgba(255,255,255,0.3);}
.visual-menu .visual-menu-icon{position: absolute; left: 55px; top: 45px; width: 40px; height: 40px; background-repeat: no-repeat; display: inline-block;}
.visual-menu .visual-menu-icon01{background-size: cover; background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon01-wh.png);}
.visual-menu .visual-menu-icon02{background-size: cover; background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon02-wh.png);}
.visual-menu .visual-menu-icon03{background-size: cover; background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon03-wh.png);}
.visual-menu .visual-menu-icon01:hover{background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon01.png);}
.visual-menu .visual-menu-icon02:hover{background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon02.png);}
.visual-menu .visual-menu-icon03:hover{background-image: url(/_upload/haesung.km114.kr/common/img/visual-menu-icon03.png);}
.visual-menu .visual-des{height: auto; padding: 30px 0 0 20px}
.visual-menu .visual-des h3{font-size: 20px; line-height: 35px;}
.visual-menu .visual-des p{font-size: 17px; line-height: 29px;}
.visual-menu .visual-des:hover{font-weight: 900; color: #f6aa00;}
.swiper-scrollbar{background-color:rgba(90,90,90,0.8); border-radius: 0; width: 1400px;}
.swiper-scrollbar-drag{background-color: #f6aa00; border-radius: 0;}
.swiper-container-horizontal>.swiper-scrollbar{height:5px; bottom:20px;}
.more-btn{color: #fff; font-weight: 800; font-size: 16px; display: block; margin-top: 0px; position: relative;
/*    margin-left: -20px;*/
}
.more-btn img{position: absolute; top: 4px; right: 50px;}

/*swiper*/
 html,
      body {
        position: relative;
        height: 100%;
      }


      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* 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;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
/*swiper*/


/*container*/
.cont-center{width: 1400px; margin: 0 auto; position: relative;}

/*cont01*/
.cont01{height: 900px;}
.cont01 .cont-center{width: 1200px; height: 100%;}
.cont01 > div > div{float: left;}
.cont01 .cont01-des{padding-top: 250px;}
.cont01 .cont01-des h3{font-size: 27px; font-weight: 800; line-height: 30px; line-height: 40px;}
.cont01 .cont01-des p{font-size: 22px; line-height: 35px; margin-top: 30px;}
.cont01 .cont01-img{width: 600px; position: absolute; bottom: -50px; right: 0px;}
.cont01 .cont01-img img{width: 100%;}
.cont01 .more-btn{color: #000; border: 1px solid #000; width: 200px; height: 50px; line-height: 50px; padding-left: 15px; position:relative;}
.cont01 .more-btn img{top: 18px; left: 140px;}

/*cont02*/
.cont02{background-image: url(/_upload/haesung.km114.kr/common/img/cont02-bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; height: 1000px; text-align: center; color: #fff;}
.cont02 h3{font-size: 30px; font-weight: 900; padding-top: 200px; letter-spacing: 3px;}
.cont02 .cont-center> p{font-size: 18px; padding: 20px 0 50px; color: #ccc; letter-spacing: 5px;}
.cont02-menu ul li{float: left; width: 31.333333%; margin: 0 1%; text-align: left;}
.cont02-menu-des{margin-top: 20px; height: 95px;}
.cont02-menu-des h4{padding: 10px 0; font-size: 20px; font-weight: 900;}
.cont02-menu-des p{line-height: 25px; margin-bottom: 30px; font-size:16px;}

/*cont02 popup*/
.button {
color: #fff; font-weight: 800; font-size: 16px; display: block; margin-top: 20px; position: relative;
}
.button img{position: absolute; top: 2px; left: 110px;}
.popup {
display: flex; 
align-items:center;
justify-content: center;
position: fixed;
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.877);
z-index:2;
visibility: hidden;
overflow: hidden;
opacity: 0;
transition: 0.7s ease-in-out;
}

.popup-inner {
position: relative;
justify-content: space-between;
bottom: -200em;
display: flex;
align-items: center;
max-width: 800px;
max-height: 600px;
width: 80%;
height: 90%;
background-color: white;
transform: rotate(45deg);
transition: 1s ease-in-out;

}
.popup-photo {
display: flex;
background-size: cover;
background-position: center;
width: 40%;
height: 100%;
overflow: hidden;
}

.popup-photo01{background-image: url(/_upload/haesung.km114.kr/common/img/cont02-menu-img01.jpg);}
.popup-photo02{background-image: url(/_upload/haesung.km114.kr/common/img/cont02-menu-img02.jpg);}
.popup-photo03{background-image: url(/_upload/haesung.km114.kr/common/img/cont02-menu-img03.jpg);}

.popup-text {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100%;
text-align: center;
padding: 4rem;
}
.popup-text h1 {
font-size: 2rem;
font-weight: 600;
margin-bottom: 2rem;
text-transform: uppercase;
color: #0a0a0a;

}
.popup-text p {
font-size: 0.9rem;  
color: black;
line-height: 1.5;
}
.popup:target{
visibility: visible;
opacity: 1;
}
.popup:target .popup-inner{
bottom: 0;
right: 0;
transform: rotate(0);
}
.popup-close{
position: absolute;
right: -3px;
top: 0;
width: 3rem;
height: 3rem;
font-size: 0.8rem;
font-weight: 400;
border-radius: 100%;
z-index: 4;
line-height: 3rem;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.popup-close i {
color: rgba(0,0,0,0.5);
font-size: 3em;
}


@media screen and (max-width:800px){
.popup-text{
padding: 0;
overflow: hidden;
}
.popup-text h1 {
font-size: 1.2em;
}

}

/*cont02 popup*/


/*cont03*/
.cont03{height: 900px;}
.cont03-box{background-color: #e9e9e9; width: 900px; height: 400px; margin-top: 100px; padding: 60px 0 0 80px;}
.cont03-box h3{font-weight: 900; margin-bottom: 20px; font-size: 22px;}
.cont03-box p{line-height: 25px; font-size:16px;}
.cont03-img{position: absolute; top: 200px; right: 0px; width:1200px;}
.cont03-img img{width: 100%; height: 100%;}


/*footer*/
#footer{background-color: #1a1a1a; width: 100%; height:  150px; color: #ccc;}
#footer .center{width: 1400px; margin: 0 auto;}
.footer-left{float: left;}
.footer-logo{margin-top: 40px;}

.footer-right{float: right;}
.footer-right p{margin-top: 40px; line-height: 30px;}
.footer-right p img{margin: 6px 10px; width: 20px;}





/*sidebar*/
.mains {margin-top: 0;}
.mains .container{width: 100%!important; background-color: rgba(0,0,0,0);}

.nav-tabs.nav-justified{width: 50%; margin: 0 auto; font-size: 12px; font-weight: bold;}
.nav-tabs{height: 60px;}
.nav li{height: 60px; background-color: #ad7f51;}
.nav-tabs > li > a {border-radius: 0; height: 61px; line-height: 40px; color: #fff; font-size: 15px;}
.nav-tabs.nav-justified > li > a{border-radius: 0;}
.nav-tabs.nav-justified > li{ border-left: 1px solid rgba(255,255,255,0.3); height: 60px;}
.nav-tabs.nav-justified > li:last-child{border-right: 1px solid rgba(255,255,255,0.3);}
.nav-tabs > li > a:hover{color: #000;}
.sidebar_bg{width: 100%; height: 60px; background-color:#ad7f51; border-top: rgba(0,0,0,1); border-bottom: rgba(0,0,0,1);}


.sidebarCs_logo{width: 220px; border-radius: 10px; text-align:center;}
.sidebarCs_logo a{display: block; height: 100%;}
.sidebarCs_logo a img{width: 60%;}
.sidebarCs .sidebarCs_call{padding: 0; height: 150px;}
.sidebarCs_call img{width: 100%; height: 100%;}
.sidebarCs{width: 220px;float: left; position: absolute;}
.sidebarCs>div{border: 1px solid #bbb;padding: 15px; margin: 15px auto;}
.sidebarCs h3{margin: 0;}
.sidebarCs h4{margin-top: 20px;}
.sidebarCs p{font-size: 13px;}
.call_btn{text-align: center; border-radius: 10px;}
.call_btn a{color: #333;}
.call_btn a h5{margin: 0; font-size: 18px; line-height: 30px;}
.cs_btn{text-align: center; border-radius: 10px;}
.cs_btn h5{margin: 0; font-size: 18px; line-height: 30px;}


/*page-header*/
.page-header {
    padding-bottom: 30px;
    margin: 45px 0 30px;
    color: #000;
    border-bottom: 3px solid #e4e4e4; 
    text-align: center;}

/*pagination*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #9c9c9c;
    border-color: #9c9c9c; }

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #666;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd; }


#page-wrapper{margin: 0 100px; padding: 0 100px; border-left: none;}