@charset "UTF-8";

body {
    background: #221C1C;
}

/*COMMON*/
section {
    width: 1920px;
    height: 964px;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -960px;
}
.section {
    display: block !important;
    overflow: hidden;
    z-index: 4;
    position: relative;
}
.main_image {
    top: -50%;
}
.main_text {
    top: 150%;
}
.sub_object {
    opacity: 0;
}
.sub_object.left_to_right {
    transform: translate(-150px, 0);
}
.sub_object.right_to_left {
    transform: translate(150px, 0);
}


/*HEADER*/
.header {
    width: 100%;
    position: fixed;
    top: 30px;
    left: 0;
    z-index: 300;
}
.header .inner {
    display: table;
    margin: 0 auto;
}
.header .logo {
    float: left;
    margin-right: 50px;
    cursor: pointer;
}
.header .menu {
    float: left;
    margin-right: 50px;
}
.header .menu li {
    float: left;
    display: block;
    height: 60px;
    text-indent: -9999px;
    cursor: pointer;
}
.header .menu li:nth-child(1) {
    background: url("../img/navi01_off.png");
    width: 140px;
}
.header .menu li:nth-child(2) {
    background: url("../img/navi02_off.png");
    width: 170px;
}
.header .menu li:nth-child(3) {
    background: url("../img/navi03_off.png");
    width: 137px;
}
.header .menu li:nth-child(4) {
    background: url("../img/navi04_off.png");
    width: 184px;
}
.header .menu li:nth-child(1):hover { background: url("../img/navi01_on.png"); }
.header .menu li:nth-child(2):hover { background: url("../img/navi02_on.png"); }
.header .menu li:nth-child(3):hover { background: url("../img/navi03_on.png"); }
.header .menu li:nth-child(4):hover { background: url("../img/navi04_on.png"); }

.header .menu li:nth-child(1).active { background: url("../img/navi01_on.png"); }
.header .menu li:nth-child(2).active { background: url("../img/navi02_on.png"); }
.header .menu li:nth-child(3).active { background: url("../img/navi03_on.png"); }
.header .menu li:nth-child(4).active { background: url("../img/navi04_on.png"); }

.header .shop {
    display: block;
    background: url("../img/shopingmall_btn_off.png");
    width: 154px;
    height: 60px;
    float: left;
    transition: all .3s;
}
.header .shop:hover {
    background: url("../img/shopingmall_btn_on.png");
}


/*NAVIGATION*/
nav {
    position: fixed;
    top: 50%;
    right: 50px;
    margin-top: -150px;
    z-index: 300;
}
nav ul {
    background: url("../img/btn_line.png") no-repeat;
    height:202px;
   }
nav ul li {
    background: url("../img/btn_section_off.png") no-repeat;
    width:16px;
    margin-bottom: 28px;
    display: block;
    text-indent: -9999px;
    cursor: pointer;
}
nav ul li.active,
nav ul li:hover {
    background: url("../img/btn_section_on.png") no-repeat;
    width:16px;
}
nav .top {
    display: block;
    text-indent: -9999px;
    background: url("../img/btn_section01_top.png") no-repeat;
    margin-top: 20px;
    width:19px;
    height:19px;
    cursor: pointer;
}


/*SEC 1*/
.sec1 {
    background: url("../img/section01_bg.jpg");
    background-size: cover;
}
.sec1 .coffee_left {
    position: absolute;
    /*top: 358px;*/
    /*left: 400px;*/
    top: 50%;
    left: 50%;
    margin-top: -125px;
    margin-left: -569px;
}
.sec1 .coffee_mid01 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -44px;
    margin-left: -221px;
    z-index: 99;
}
.sec1 .coffee_mid02 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 95px;
    margin-left: 231px;
    z-index: 98;
}
.sec1 .coffee_right {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -232px;
    margin-left: 494px;

}

.sec1 .coffee_bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 82px;
    margin-left: -377px;
}

.sec1 .mtxt {
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    margin-top: -324px;
    margin-left: -380px;
}

.sec1 .stxt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 358px;
    margin-left: -309px;

}

.sec1 .coffee_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -74px;
    margin-left: -232px;
    z-index: 1;
}

/*SEC 2*/
.sec2 {
    background: url("../img/section02_bg.jpg") no-repeat;
    background-size: cover;
}

.sec2 .mtxt {
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    margin-top: -262px;
    margin-left: -354px;
    z-index: 1;
}

.sec2 .cap {
    position: absolute;
    left: 50%;
    margin-top: -73px;
    margin-left: -530px;
    z-index: 2;
}

.sec2 .text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 204px;
    margin-left: -131px;
}

.sec2 .text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 234px;
    margin-left: -273px;
}
/*SEC 3*/

.sec3 {
    background: url("../img/section03_bg.jpg") no-repeat;
    background-size: cover;
}

.sec3 .mtxt {
    position: absolute;
    /*top: 53%;*/
    left: 50%;
    margin-top: -378px;
    margin-left: -493px;
    z-index: 2;
}

.sec3 .main_img {
    position: absolute;
    left: 50%;
    margin-top: -287px;
    margin-left: -163px;
    z-index: 3;
}

.sec3 .left_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: -492px;
}

.sec3 .right_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: 135px;
    z-index: 1;
}

.sec3 .text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 329px;
    margin-left: -309px;
}

.sec3 .text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 367px;
    margin-left: -354px;
}

/*SEC 4*/

.sec4 {
    background: url("../img/section04_bg.jpg") no-repeat;
    background-size: cover;
}

.sec4 .mtxt {
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    margin-top: -392px;
    margin-left: -461px;
    z-index: 2;
}

.sec4 .main_img {
    position: absolute;
    left: 50%;
    margin-top: -292px;
    margin-left: -164px;
    z-index: 3;
}

.sec4 .left_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 17px;
    margin-left: -500px;
}

.sec4 .right_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: 197px;
    z-index: 1;
}

.sec4 .text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 326px;
    margin-left: -141px;
}

.sec4 .text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 358px;
    margin-left: -349px;
}

/*SEC 5*/

.sec5 {
    background: url("../img/section05_bg.jpg") no-repeat;
    background-size: cover;
}

.sec5 .mtxt {
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    margin-top: -328px;
    margin-left: -409px;
    z-index: 1;
}

.sec5 .text1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -218px;
    margin-left: -197px;

}

.sec5 .main_coffee {
    position: absolute;
    left: 50%;
    margin-top: -49px;
    margin-left: -223px;
    z-index: 3;
}

.sec5 .main_table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 214px;
    margin-left: -760px;
    z-index: 2;
}

.footer {
    display: table !important;
}
footer {
    background: url("../img/footerbg.jpg") repeat-x;
    width: 100%;
    height: 370px;
    position: relative;
    z-index: 5;
}
footer .inner {
    width: 1027px;
    height: 370px;
    margin: 0 auto;
    position: relative;
}

footer .link_btn {
    margin: 0 auto;
}

footer .link_btn li {
    float: left;

}

footer .copyright {
    position: absolute;
    top: 260px;
    left: 0;
}

footer .copyright li {
    float: left;
}