@charset utf-8;

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

body {
    position:relative;
    min-width:1200px;
    font-family:Nanum Gothic;
    color:#333;
    background:#FFF;
}


.posNum {762px
    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 {
    top: 0;
    width: 100%;
    height: 107px;
    background: url(../img/gnb_trans.png);
    position: fixed;
    z-index: 999999;
    transition: all 0.35s;
}
#header:hover{
    background: url(../img/gnb_w.jpg);
}
#header.on{
    background: url(../img/gnb_w.jpg);
}


#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_w.png);
    transition: all 0.35s;
}
.mainlogo.on {
    background:url(../img/logo2.png);
}
#header:hover .mainlogo{
    background:url(../img/logo2.png);
}

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

.gnb1 {
    width:197px;
    height:106px;
    position:absolute;
    right:591px;
    top:0px;
    background:url(../img/gnb1_w.png);
    transition: all 0.35s;
}
.gnb1.on {
    background:url(../img/gnb1_hover.png);
}
#header:hover .gnb1{
    background:url(../img/gnb1_hover.png);
}
#header:hover .gnb1:hover{
    background:url(../img/gnb1.png);
}


.gnb1 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:url(../img/sub1_back.png);
    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:0;
    background:url(../img/gnb2_w.png);
    transition: all 0.35s;
}
.gnb2.on {
    background:url(../img/gnb2_hover.png);
}
#header:hover .gnb2{
    background:url(../img/gnb2_hover.png);
}
#header:hover .gnb2:hover{
    background:url(../img/gnb2.png);
}


.gnb2 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:url(../img/sub2_back.jpg);
    z-index: 9999;
    overflow: hidden;
}

.gnb2 .hover > div{
    width:110px;
    height:18px;
    margin-top: 30px;
    margin-left: 42px;
}

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







.gnb3 {
    width:197px;
    height:106px;
    position:absolute;
    right:197px;
    top:0;
    background:url(../img/gnb3_w_1.png);
    transition: all 0.35s;
}
.gnb3.on {
    background:url(../img/gnb3_b_1.png);
}
#header:hover .gnb3{
    background:url(../img/gnb3_b_1.png);
}
#header:hover .gnb3:hover{
    background:url(../img/gnb3_g_1.png);
}

.gnb3 .hover{
    width:197px;
    height:0px;
    position:absolute;
    right:0px;
    top:106px;
    background:url(../img/sub2_back.jpg);
    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_w.png);
    transition: all 0.35s;
}
.gnb4.on {
    background: url(../img/gnb4_hover.png);
}
#header:hover .gnb4{
    background:url(../img/gnb4_hover.png);
}
#header:hover .gnb4:hover{
    background:url(../img/gnb4_4.png);
}

.gnb4 .hover{
    width:197px;
    height:0;
    position:absolute;
    right:0px;
    top:106px;
    background:url(../img/sub4_back.jpg);
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
}

.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%;
}




#scene00 {
position: relative;
    height:1080px;
    overflow:hidden;
}

#visual {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

#scene00 #visual #inner {
    /*top:106px;*/
    width:1920px;
    height:650px;
    left:50%;
    margin-left:-960px;
    position:relative;
}

#slides {
    width:1920px;
    height:980px;
}
#slides > div  {
bottom: 50px;
}

#slides .slidesjs-pagination {
    width:300px;
    height:2px;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom: -250px;
    z-index:100;
    text-indent:-9999px;
}

#slides .slidesjs-pagination .slidesjs-pagination-item {
    float:left;
    margin-right:10px;
}

#slides .slidesjs-pagination .slidesjs-pagination-item a {
    display:block;
    width:70px;
    height:4px;
    opacity:1;
    background:lightgrey;
}

#slides .slidesjs-pagination .slidesjs-pagination-item a.active {
    background: #56c271;
    opacity:1;
}



#scene1 {
    height:870px;
    position:relative;

}


#scene1 .back1 {
    width:321px;
    height:396px;
    position:absolute;
    left:50%;
    margin-left:-960px;
    top:530px;
    background:url(../img/back1.png);
    opacity:0;
    transition:all 1.5s;
}
#scene1 .back1.on
{
    opacity:0.7;
}


#scene1 .wrap {
    width:1426px;
    height:870px;
    left:50%;
    margin-left:-713px;
    position:relative;
}



#scene1 .wrap .num {
    width:32px;
    height:32px;
    position:absolute;
    left:0;
    top:175px;
    background:url(../img/icon1.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene1 .wrap .title {
    width:396px;
    height:126px;
    position:absolute;
    left:0;
    top:270px;
    background:url(../img/title1.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene1 .wrap .title_kor {
    width:196px;
    height:29px;
    position:absolute;
    left:0;
    top:435px;
    background:url(../img/title_kor1.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene1 .wrap .sub {
    width:298px;
    height:43px;
    position:absolute;
    left:0;
    top:525px;
    background:url(../img/sub1.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene1 .wrap .more {
    width:128px;
    height:57px;
    position:absolute;
    left:0;
    top:680px;
    background:url(../img/more_b.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene1 .wrap .more:hover {
    background:url(../img/more_b_hover.png);
}
#scene1 .more a{
    display:block;
    width:100%;
    height:100%;
}


#scene1 .wrap .pic {
    width: 791px;
    height: 760px;
    position:absolute;
    right:-30px;
    top:140px;
    background:url(../img/pic1.png);
    opacity:0;
    transform:translate(0px,60px);
    transition:all 1s;
}

/*width: 791px;*/
/*height: 760px;*/

/*width: 762px;*/
/*height: 703px;*/


#scene1 .wrap .num.on,
#scene1 .wrap .title.on,
#scene1 .wrap .title_kor.on,
#scene1 .wrap .sub.on,
#scene1 .wrap .more.on,
#scene1 .wrap .pic.on
{
    opacity:1;
    transform:translate(0,0);
}








#scene2 {
    height:920px;
    position:relative;
}

#scene2 .back2 {
    width:862px;
    height:601px;
    position:absolute;
    right:50%;
    margin-right:-960px;
    bottom:0;
    background:url(../img/back2.png);
    opacity:0;
    transition:all 1.5s;
}
#scene2 .back2.on
{
    opacity:1;
}


#scene2 .wrap {
    width:1426px;
    height:870px;
    left:50%;
    margin-left:-713px;
    position:relative;
}

#scene2 .wrap .num {
    width:32px;
    height:32px;
    position:absolute;
    left:900px;
    top:175px;
    background:url(../img/icon2.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene2 .wrap .title {
    width:398px;
    height:126px;
    position:absolute;
    left:900px;
    top:270px;
    background:url(../img/title2.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene2 .wrap .title_kor {
    width:197px;
    height:29px;
    position:absolute;
    left:900px;
    top:435px;
    background:url(../img/title_kor2.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene2 .wrap .sub {
    width:333px;
    height:43px;
    position:absolute;
    left:900px;
    top:525px;
    background:url(../img/sub2.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene2 .wrap .more {
    width:128px;
    height:57px;
    position:absolute;
    left:900px;
    top:680px;
    background:url(../img/more_b.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene2 .wrap .more:hover {
    background:url(../img/more_b_hover.png);
}

#scene2 .more a{
    display:block;
    width:100%;
    height:100%;
}


#scene2 .wrap .pic {
    width:496px;
    height:788px;
    position:absolute;
    left:20px;
    top:80px;
    background:url(../img/pic2.png);
    opacity:0;
    transform:translate(0px,60px);
    transition:all 1s;
}


#scene2 .wrap .num.on,
#scene2 .wrap .title.on,
#scene2 .wrap .title_kor.on,
#scene2 .wrap .sub.on,
#scene2 .wrap .more.on,
#scene2 .wrap .pic.on
{
    opacity:1;
    transform:translate(0,0);
}




#scene3 {

    height:1000px;
    background: #f1f1f1;

}

#scene3 .wrap {
    width:1426px;
    height:1000px;
    left:50%;
    margin-left:-713px;
    position:relative;
}

#scene3 .wrap .title {
    width:663px;
    height:70px;
    position:absolute;
    right:0;
    top:165px;
    background:url(../img/title3.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene3 .wrap .title_kor {
    width:139px;
    height:29px;
    position:absolute;
    right:0;
    top:255px;
    background:url(../img/title_kor3.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene3 .wrap .sub {
    width:299px;
    height:43px;
    position:absolute;
    right:0;
    top:355px;
    background:url(../img/sub3.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene3 .wrap .more {
    width:128px;
    height:57px;
    position:absolute;
    right:0;
    top:511px;
    background:url(../img/more_b.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene3 .wrap .more:hover {
    background:url(../img/more_b_hover.png);
}

#scene3 .more a{
    display:block;
    width:100%;
    height:100%;
}


#scene3 .wrap .pic {
    width:1197px;
    height:508px;
    position:absolute;
    left:0;
    bottom:150px;
    background:url(../img/pic3.png);
    opacity:0;
    transform:translate(0px,60px);
    transition:all 1s;
}


#scene3 .wrap .num.on,
#scene3 .wrap .title.on,
#scene3 .wrap .title_kor.on,
#scene3 .wrap .sub.on,
#scene3 .wrap .more.on,
#scene3 .wrap .pic.on
{
    opacity:1;
    transform:translate(0,0);
}












#scene4 {
    height:900px;
}

#scene4 .wrap {
    width:1426px;
    height:870px;
    left:50%;
    margin-left:-713px;
    position:relative;
    overflow: visible;
}

#scene4 .wrap .num {
    width:32px;
    height:32px;
    position:absolute;
    left:0;
    top:155px;
    background:url(../img/icon4.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene4 .wrap .title {
    width:366px;
    height:126px;
    position:absolute;
    left:0;
    top:250px;
    background:url(../img/title4.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene4 .wrap .title_kor {
    width:224px;
    height:29px;
    position:absolute;
    left:0;
    top:415px;
    background:url(../img/title_kor4.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene4 .wrap .sub {
    width:327px;
    height:43px;
    position:absolute;
    left:0;
    top:505px;
    background:url(../img/sub4.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene4 .wrap .more {
    width:128px;
    height:57px;
    position:absolute;
    left:0;
    top:660px;
    background:url(../img/more_b.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene4 .wrap .more:hover {
    background:url(../img/more_b_hover.png);
}
#scene4 .more a{
    display:block;
    width:100%;
    height:100%;
}


#scene4 .wrap .pic {
    width:841px;
    height:575px;
    position:absolute;
    right:-130px;
    top:180px;
    background:url(../img/pic4.png);
    opacity:0;
    transform:translate(0px,80px);
    transition:all 1s;
}


#scene4 .wrap .num.on,
#scene4 .wrap .title.on,
#scene4 .wrap .title_kor.on,
#scene4 .wrap .sub.on,
#scene4 .wrap .more.on,
#scene4 .wrap .pic.on
{
    opacity:1;
    transform:translate(0,0);
}







#scene5 {
    height:930px;
    position:relative;

}

#scene5 .back5 {
    width:1920px;
    height:593px;
    left:50%;
    bottom:0;
    margin-left:-960px;
    position:absolute;
    background:url(../img/back5.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .back5.on
{
    opacity:1;
    transform:translate(0,0);
}


#scene5 .wrap {
    width:1426px;
    height:870px;
    left:50%;
    margin-left:-713px;
    position:relative;
    overflow: visible;
}

#scene5 .wrap .num {
    width:32px;
    height:32px;
    position:absolute;
    right:0;
    top:158px;
    background:url(../img/icon5.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .wrap .title {
    width:335px;
    height:141px;
    position:absolute;
    right:0;
    top:260px;
    background:url(../img/title5.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .wrap .title_kor {
    width:203px;
    height:29px;
    position:absolute;
    right:0;
    top:425px;
    background:url(../img/title_kor5.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .wrap .sub {
    width:273px;
    height:43px;
    position:absolute;
    right:0;
    top:520px;
    background:url(../img/sub5.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .wrap .more {
    width:128px;
    height:57px;
    position:absolute;
    right:0;
    top:665px;
    background:url(../img/more_b.png);
    opacity:0;
    transform:translate(0px,40px);
    transition:all 1s;
}
#scene5 .wrap .more:hover {
    background:url(../img/more_b_hover.png);
}
#scene5 .more a{
    display:block;
    width:100%;
    height:100%;
}


#scene5 .wrap .pic {
    width:1080px;
    height:695px;
    position:absolute;
    left:50%;
    margin-left: -960px;
    top:75px;
    background:url(../img/pic5.png);
    opacity:0;
    transform:translate(0px,80px);
    transition:all 1s;
}


#scene5 .wrap .num.on,
#scene5 .wrap .title.on,
#scene5 .wrap .title_kor.on,
#scene5 .wrap .sub.on,
#scene5 .wrap .more.on,
#scene5 .wrap .pic.on
{
    opacity:1;
    transform:translate(0,0);
}



#top_button > a {
        display:block;
        width:100%;
        height:100%;
}




#footer {
    width:100%;
    height:345px;
}

#footer .contents {
    width:1920px;
    height:345px;
    background:url(../img/footer.jpg);
    left:50%;
    margin-left:-960px;
    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%;
}