@charset utf-8;

html,body {
    height:100%;
    overflow-y:hidden;
}

/*폰트*/
body {
    position:relative;
    min-width:1200px;
    font-family: 'NanumSquare', sans-serif;
    color:#333;
    background:#FFF;
}
/*폰트*/



.posNum {
    position:fixed;
    left:50%;
    top:50%;
    width:300px;
    height:50px;
    background:#111;
    color:#fff;
    font-size:20px;
    font-weight:700;
    text-align:center;
    line-height:50px;
    z-index:9999;
    margin:-25px 0 0 -150px;
}

.scrollBox {
    min-width:1200px;
    height:100%;
    position:relative;
}

.scrollBox .wrap {
    min-width:1200px;
    position:relative;
    overflow:hidden;
}

.scrollBox .wrap>div {
    position:relative;
}

.scrollBox .wrap .objs>li {
    position:absolute;
    left:50%;
}

#header {
    height:106px;
    position:relative;
    /*background: #56c271;*/

}

#header .inner {
    width:1426px;
    height:106px;
    left:50%;
    margin-left:-713px;
    position:relative;
    /*background: gainsboro;*/
}

.mainlogo {
    width:302px;
    height:105px;
    position:absolute;
    left:0;
    top:-2px;
    background:url(../img/logo2.png);
    transition: all 0.35s;
}


.mainlogo a{
    display:block;
    width:100%;
    height:100%;
}


.gnb1 {
    width:197px;
    height:106px;
    position:absolute;
    right:591px;
    top:0px;
    background:url(../img/gnb1_hover.jpg);
}
.gnb1:hover {
    background:url(../img/gnb1.jpg);
}

.gnb1 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb1 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 42px;
}
.gnb1 .hover .sub01{
    background:url(../img/gnb1_1.png);
}
.gnb1 .hover .sub01:hover {
    background:url(../img/gnb1_1_cover.png);
}

.gnb1 .hover .sub02{
    background:url(../img/gnb1_2.png);
}
.gnb1 .hover .sub02:hover {
    background:url(../img/gnb1_2_cover.png);
}


.gnb1 .hover .sub03{
    background:url(../img/gnb1_3.png);
}
.gnb1 .hover .sub03:hover {
    background:url(../img/gnb1_3_cover.png);
}

.gnb1 .hover .sub04{
    background:url(../img/gnb1_4.png);
}

.gnb1 .hover .sub04:hover {
    background:url(../img/gnb1_4_cover.png);
}
#header .inner .gnb1 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb1 div > a{
    display:block;
    width:100%;
    height:100%;
}



.gnb2 {
    width:197px;
    height:106px;
    position:absolute;
    right:394px;
    top:0px;
    background:url(../img/gnb2_hover.png);
}
.gnb2:hover {
    background:url(../img/gnb2.png);
}


.gnb2 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

#header .inner .gnb2 > a{
    display:block;
    width:100%;
    height:100%;
}






.gnb3 {
    width:197px;
    height:106px;
    position:absolute;
    right:197px;
    top:0px;
    background:url(../img/gnb3_b_1.png);
}
.gnb3:hover {
    background:url(../img/gnb3_g_1.png);
}

.gnb3 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb3 .hover > div{
    width:120px;
    height:18px;
    margin-top: 30px;
    margin-left: 40px;
}
.gnb3 .hover .sub01{
    background:url(../img/gnb3_1.png);
}
.gnb3 .hover .sub01:hover {
    background:url(../img/gnb3_1_hover.png);
}

.gnb3 .hover .sub02{
    background:url(../img/gnb3_2.png);
    margin-left: 38px;
}
.gnb3 .hover .sub02:hover {
    background:url(../img/gnb3_2_hover.png);
}

.gnb3 .hover .sub03{
    background:url(../img/gnb3_3.png);
}
.gnb3 .hover .sub03:hover {
    background:url(../img/gnb3_3_hover.png);
}

.gnb3 .hover .sub04{
    background:url(../img/gnb3_4.png);
}

.gnb3 .hover .sub04:hover {
    background:url(../img/gnb3_4_hover.png);
}

.gnb3 .hover .sub05{
    background:url(../img/gnb3_5.png);
}

.gnb3 .hover .sub05:hover {
    background:url(../img/gnb3_5_hover.png);
}


#header .inner .gnb3 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb3 div > a{
    display:block;
    width:100%;
    height:100%;
}





.gnb4 {
    width:197px;
    height:106px;
    position:absolute;
    right:0px;
    top:0px;
    background:url(../img/gnb4_hover.jpg);

}
.gnb4:hover {
    background:url(../img/gnb4.jpg);
}

.gnb4 .hover{
    width:197px;
    height:0;
    position:absolute;
    right:0px;
    top:106px;
    background:white;
    z-index: 9999;
    overflow: hidden;
}

.gnb4 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 39px;
}
.gnb4 .hover .sub01{
    background:url(../img/gnb4_1.png);
}
.gnb4 .hover .sub01:hover {
    background:url(../img/gnb4_1_hover.png);
}

.gnb4 .hover .sub02{
    background:url(../img/gnb4_2.png);
}
.gnb4 .hover .sub02:hover {
    background:url(../img/gnb4_2_hover.png);
}

#header .inner .gnb4 > a{
    display:block;
    width:100%;
    height:100%;
}
#header .inner .gnb4 div > a{
    display:block;
    width:100%;
    height:100%;
}







#scene1 {
    height:405px;
}

#scene1 .wrap {
    width:1920px;
    height:405px;
    left:50%;
    margin-left:-969px;
    position:relative;
    background:url(../img/sub3_banner7.jpg);
}

/*#scene1 .wrap div {*/
/*    background:url(../img/sub3_banner2.jpg);*/
/*    height:405px;*/
/*}*/


#t1 {
    position:absolute;
    width:1425px;
    height:100px;
    left: 50%;
    margin-left: -712px;
    /*background: darkkhaki;*/
    top:145px;
}

#scene1 .wrap #t1 .subtitle1 {
    font-weight: 600;
    z-index: 333;
    font-family: 'NanumSquare', sans-serif;
    text-align: center;
    font-size:46px;
    color: white;
}

#t2 {
    position:absolute;
    width:1425px;
    height:50px;
    left: 50%;
    margin-left: -712px;
    /*background: #56c271;*/
    top:230px;
}
#scene1 .wrap #t2 .subtitle2 {
    font-weight: 300;
    z-index: 333;
    font-family: 'NanumSquare', sans-serif;
    text-align: center;
    font-size:36px;
    color: white;
}




/*폰트*/
#scene1 .wrap .font {
    z-index: 999999;
    /*margin-top: 360px;*/
    right:240px;
    bottom:23px;
    position:absolute;
    font-family: "Nanum Gothic";
}
/*폰트*/



/*서브메뉴*/
#menu {
    top: 511px;
    width: 100%;
    height:76px;
    background:url(../img/sub_2_menu.jpg);
    z-index: 999;
    transition: all 0s;
    position:absolute;
}
#menu.on{
    position:fixed;
    top: 0px;
}



#menu .wrap {
    width:1425px;
    height:76px;
    left:50%;
    margin-left:-712px;
    position:relative;
}

#menu .wrap > div{
    width:285px;
    height:76px;
}

#menu .wrap .sub1 {
    background:url(../img/sub_2_menu_2.jpg);
    height:76px;
    left: 1px;
}
#menu .wrap .sub1:hover{
    background:url(../img/sub_2_menu_2_hover.jpg);
}
#menu .wrap .sub2 {
    background:url(../img/sub_2_menu_3.jpg);
    width: 289px;
    position: absolute;
    top:0;
    left: 0;
    margin-left:284px;
}
#menu .wrap .sub2:hover{
    background:url(../img/sub_2_menu_3_hover.jpg);
}

#menu .wrap .sub3 {
    background:url(../img/sub_2_menu_22.jpg);
    width: 285px;
    height:76px;
    position: absolute;
    top:0;
    right: 0;
    margin-right:568px;
}
#menu .wrap .sub3:hover{
    background:url(../img/sub_2_menu_22_hover.jpg);
}

#menu .wrap .sub4 {
    background:url(../img/sub_2_menu_4.jpg);
    height:76px;
    position: absolute;
    top:0;
    right:0;
    margin-right:284px;
}
#menu .wrap .sub4:hover{
    background:url(../img/sub_2_menu_4_hover.jpg);
}

#menu .wrap .sub5 {
    background:url(../img/sub_2_menu_5_hover.jpg);
    height:76px;
    position: absolute;
    top:0;
    right:0;
}
#menu .wrap .sub5:hover{
    background:url(../img/sub_2_menu_5_hover.jpg);
}
#menu .wrap > div > a{
    display:block;
    width:100%;
    height:100%;
}







#scene2 {
    height:825px;
    margin-top:76px;
}

#scene2 .wrap {
    width: 1920px;
    height: 900px;
    left: 50%;
    margin-left: -969px;
    position: relative;
    background: #efefef;
}

#scene2 .wrap .subtitle1 {
    background: url(../img/sub2_contents5.jpg)no-repeat;
    width: 1920px;
    height: 825px;
    left: 10px;
    top: 0;
    position: absolute;
}

.go1 {
    background:url(../img/go1.jpg);
    width:195px;
    height:61px;
    position: absolute;
    top:630px;
    left: 247px;
}




#scene2 .wrap .subtitle1 section > a{
    display:block;
    width:100%;
    height:100%;
}









#scene3{
    position: relative;
    background: #e4e4e4;
    height: 485px;
}



.slidecontainer {
    margin-top: 65px;
    height: 24px;
    width: 1426px;
    left: 50%;
    position: absolute;
    margin-left: -713px;
}
.pictitle {
    background:url(../img/pic_title.png) no-repeat;
    width: 182px;
    height: 24px;
}




#slides {
    /*display: none*/
}

.container {
    width: 1425px;
    left: 50%;
    margin-left: -717px;
    position: relative;
    height: 380px;
}


/*@media (min-width: 1425px) {*/
/*    .container {*/
/*        width: 1425px*/
/*    }*/
/*}*/


.contents1{
    margin-top: 35px;
}
.contents2{
    margin-top: 35px;
}

ul > li{
    float: left;
    margin-left: 20px;
}

ul > li:nth-child(1){
    margin-left: 62px;
    float: left;
}

ul li > div {
    width: 310px;
    height: 310px;
    overflow: hidden;
    position: relative;
    /*background: #f3f3f3;*/
    cursor: pointer;
}

.w div > img{
    max-height:310px;
    display: block;
    right: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.h div > img{
    max-width:310px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}




.popup_container{
    z-index:9999999999999;
    display: none;

}


#popup {
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    overflow:hidden;
    position:fixed;
    left:0;
    top:0;
    z-index:999999999999999;
}

#center{
    position:absolute;
    height: 1000px;
    width: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top:50%;
    margin-top: -500px;
    left: 50%;
    margin-left: -500px;
}

#center img {
    max-width: 1000px;
    max-height: 1000px;
    margin: 0 auto;
    /*display: block;*/
    position: relative;
    display: none;
}



#bigpic1.on{
    display: block;
}
#bigpic2.on{
    display: block;
}
#bigpic3.on{
    display: block;
}
#bigpic4.on{
    display: block;
}
#bigpic5.on{
    display: block;
}
#bigpic6.on{
    display: block;
}
#bigpic7.on{
    display: block;
}
#bigpic8.on{
    display: block;
}




#center #close{
    /*background: darkkhaki;*/
    width: 30px;
    right:0;
    z-index: 9999;
    position: absolute;
    left: 50%;
}
#close .btn{
    background:url(../img/close_w2.png);
    width: 40px;
    height: 40px;
    z-index: 9999;
    right: 0;
    cursor: pointer;
    margin-top: 10px;
}









#slides{
    display: none;
}

.slidesjs-navigation {
    z-index: 100;
}

.slidesjs-previous {
    width: 40px;
    height: 80px;
    background:url(../img/pre.png);
    position: absolute;
    left:0;
    top:50%;
    margin-top: -40px;
}

.slidesjs-next {
    margin-left: 1100px;
    width: 40px;
    height: 80px;
    background:url(../img/next.png);
    position: absolute;
    right:0;
    top:50%;
    margin-top: -40px;
}
















#scene4 {
    width: 100%;
    position:relative;
}

#scene4 .wrap {
    height: 1340px;
    width:1920px;
    left:50%;
    margin-left:-969px;
    /*background: lightyellow;*/
}


#scene4 .wrap #s4subtitle_box{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:132px;
    position: absolute;
}
#scene4 .wrap #s4subtitle_box .subtitle1{
    font-family: 'NanumSquare', sans-serif;
    font-size: 28pt;
    font-weight: 800;
    text-align: center;
    color: #292929;
}
#scene4 .wrap #s4subtitle_box2{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:220px;
    position: absolute;
}
#scene4 .wrap #s4subtitle_box2 .subtitle2{
    font-family: 'NanumSquare', sans-serif;
    font-size: 13pt;
    font-weight: 500;
    text-align: center;
    color: #3d3d3d;
}


#scene4 .wrap .claenroom_pic1 > img{
    max-width: 1200px;
    top: 350px;
    position:absolute;
    z-index: 888;
    left: 50%;
    margin-left: -600px;
}




#scene5 {
    width: 100%;
    position:relative;
}

#scene5 .wrap {
    width:1425px;
    height:3880px;
    left:50%;
    margin-left:-712px;
}

#scene5 .wrap #s5subtitle_box{
    left:50%;
    margin-left:-700px;
    width:1400px;
    height: 40px;
    top:132px;
    position: absolute;
}
#scene5 .wrap #s5subtitle_box .subtitle1{
    font-family: 'NanumSquare', sans-serif;
    font-size: 28pt;
    font-weight: 800;
    text-align: center;
    color: #292929;
}

#scene5 .wrap .pic{
    background:lavender;
    height: 800px;
    width:1425px;
    left:0%;
    top:250px;
    position: absolute;
}




#scene5 #table {
    position: absolute;
    top:1140px;
}


#scene5 .font_subtitle {
    font-size: 15pt;
    font-weight: 600;
    z-index: 333;
}
#scene5 .bold {
    font-size: 13pt;
    font-weight: 600;
}




#top_button {
    background: url(../img/top_button2.png);
    width: 70px;
    height: 70px;
    position: fixed;
    right: 300px;
    bottom: 80px;
    z-index:9999;
    opacity: 0;
}
#top_button.on {
    opacity: 1;
    transition: 1s;
}




#footer {
    width:100%;
    height:348px;
    position:relative;
}

#footer .contents {
    width:1920px;
    height:348px;
    background:url(../img/footer.jpg);
    left:50%;
    margin-left:-969px;
    position:absolute;
}

/*제품상담*/
#footer .contents .footer_icon1{
    width:58px;
    height:90px;
    background:url(../img/footer_logo2.jpg);
    right: 247px;
    top:30px;
    position:absolute;
}

/*공지사항*/
#footer .contents .footer_icon2{
    width:58px;
    height:90px;
    background:url(../img/footer_logo1.jpg);
    right: 357px;
    top:30px;
    position:absolute;
}

.footer_icon1 a{
    display:block;
    width:100%;
    height:100%;
}

.footer_icon2 a{
    display:block;
    width:100%;
    height:100%;
}