@charset "utf-8";

.click { /*클릭 시 적용되는 style 속성.JS*/
    background: #fff;
    color: #000;
}


/*콘텐츠 영역*/
#contentwrap {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

/*-------------커피캡슐----------------*/
/*커피페이지 영역*/
#coffeewrap {
    width: 100%;
    margin: 0 auto;
}
#coffeewrap > div {
}
.link li {
    letter-spacing: -1px;
}
/*커피페이지 인트로 영역*/
#coffee_intro {
    min-width: 1024px;
    height: 200px;
    margin: 0 auto;
}

#coffee_intro > div {
    width: 100%;
    height: 200px;
    background: url(../images/01_background_img_1-1.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: top;
}

#coffee_intro > div > h3 {
    font: 600 35px/1 'Noto Sans KR';
    color: #fff;
    padding: 60px 0 40px 0;
}

#coffeelink {
    width: 680px;
    height: 23px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);
}

#coffeelink > li {
    float: left;
    font: 400 12px/21px 'Noto Sans KR';
}

#coffeelink > li > a {
    display: block;
    width: 226.6px;
    height: 23px;
    transition: all 0.5s ease-in-out;
}

#coffeelink > li:last-child {}

#coffeelink > li > a:hover {
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.5s ease-in-out;
}

/*상품 공통 설정 영역*/
/*전체 타이틀 자간 조정*/
#contentwrap h3 {
    letter-spacing: -1px;
}

#vertuocoffeewrap{
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#origincoffeewrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#coffeestorywrap {
    width: 100%;
    height: 2070px;
    
}


#vertuocoffeewrap > div {
    width: 1024px;
    margin: 0 auto;
}
#origincoffeewrap > div {
    width: 1024px;
    margin: 0 auto;
}
#coffeestorywrap > div {
    width: 1024px;
    margin: 0 auto;
}

#title {
    width: 1024px;
    height: 30px;
    text-align: left;
    float: left;
    font: 400 25px/1.5 'Noto Sans KR';
    margin: 30px 0 20px 0;
}

#capsule_banner {
    width: 1024px;
    margin-bottom: 20px;
}


#product {
    width: 1024px;
    height: 400px;
    display: flex;
    justify-content: space-between;
}

#product > li {
    width: 250px;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
}

#product > li a {
    display: block;
    width: 250px;
    height: 300px;
    background-color: #ddd;
}

#text {
    padding-top: 10px;
}

#text > li {
    width: 250px;
    text-align: center;
}

#text span {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

#text > li:nth-child(1) {
    font: 400 14px/1.5 'Noto Sans KR';
}

#text > li:nth-child(2) {
    font: 400 18px/1.5 'Noto Sans KR';
    letter-spacing: -1px;
}

#text > li:nth-child(3) {
    font: 600 18px/1.5 'Noto Sans KR';
    color: #92ab23;
}


/*버츄오캡슐 상품 사진*/
#master_cap_1 a {
    background: url(../images/01_masterorigin_capsule_1.jpg);
}
#master_cap_2 a {
    background: url(../images/01_masterorigin_capsule_2.jpg);
}
/*오리진캡슐 상품 사진*/
#espresso_cap_1 a {
    background: url(../images/01_espressolungo_capsule_1.jpg);
}
#espresso_cap_2 a {
    background: url(../images/01_espressolungo_capsule_2.jpg);
}
/*상품 이미지 마우스 오버 효과*/
#product > li > a {
    transition: all 0.5s ease-in-out;
}
#product > li > a:hover {
    transform: scale(1.1);
    transition: all 0.5s ease-in-out;
}
/*
    그린
    background-color: #92ab23;
    브라운
    background-color: #5a3822;
*/




/*-------------커피머신----------------*/

/*커피페이지 영역*/
#machinewrap {
    width: 100%;
    margin: 0 auto;
}

#machinewrap > div {
}

/*커피페이지 인트로 영역*/
#machine_intro {
    min-width: 1024px;
    height: 200px;
    margin: 0 auto;
}

#machine_intro > div {
    width: 100%;
    height: 200px;
    background: url(../images/01_background_img_2-1.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: top;

}

#machine_intro > div > h3 {
    font: 600 35px/1 'Noto Sans KR';
    color: #fff;
    padding: 60px 0 40px 0;
}

#machinelink {
    width: 680px;
    height: 23px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);
}

#machinelink > li {
    float: left;
    font: 400 12px/21px 'Noto Sans KR';
}

#machinelink > li > a {
    display: block;
    width: 226.6px;
    height: 23px;
    transition: all 0.5s ease-in-out;
}

#machinelink > li:last-child {}

#machinelink > li > a:hover {
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.5s ease-in-out;
}


/*상품 공통 설정 영역*/
#vertuomachinewrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#originmachinewrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#verormachinewrap {
    width: 100%;
    height: 2080px;
    border-bottom: solid 1px #000;
}

#vertuomachinewrap > div {
    width: 1024px;
    margin: 0 auto;
}

#originmachinewrap > div {
    width: 1024px;
    margin: 0 auto;
}

#verormachinewrap > div {
    width: 1024px;
    margin: 0 auto;
}

#title {
    width: 1024px;
    height: 30px;
    text-align: left;
    float: left;
    font: 400 25px/1.5 'Noto Sans KR';
    margin: 30px 0 20px 0;
}

#machine_banner {
    width: 1024px;
    margin-bottom: 20px;
}

#vertuomachinewrap > div:nth-child(3) {
    width: 1024px;
}

#product {
    width: 1024px;
    height: 400px;
    display: flex;
    justify-content: space-between;
}

#product > li {
    width: 250px;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
}

#product > li a {
    display: block;
    width: 250px;
    height: 300px;
    background-color: #ddd;
}

#text {
    padding-top: 10px;
}

#text > li {
    width: 250px;
    text-align: center;
}

#text span {
    margin-right: 5px;
    position: relative;
    top: 2px;
}

#text > li:nth-child(1) {
    font: 400 14px/1.5 'Noto Sans KR';
}

#text > li:nth-child(2) {
    font: 400 18px/1.5 'Noto Sans KR';
}

#text > li:nth-child(3) {
    font: 600 18px/1.5 'Noto Sans KR';
    color: #92ab23;
}

/*버츄오머신 상품 사진*/
#vertuo_machine_1 a {
    background: url(../images/01_vertuomachine_1.jpg);
}
/*오리진머신 상품 사진*/
#origin_machine_1 a {
    background: url(../images/01_originalmachine_1.jpg);
}
/*상품 이미지 마우스 오버 효과*/
#product > li > a {
    transition: all 0.5s ease-in-out;
}
#product > li > a:hover {
    transform: scale(1.1);
    transition: all 0.5s ease-in-out;
}




/*-------------악세사리----------------*/

/*악세사리 페이지 영역*/
#accwrap {
    width: 100%;
    margin: 0 auto;
}
/*악세사리 페이지 인트로 영역*/
#acc_intro {
    min-width: 1024px;
    height: 200px;
    margin: 0 auto;
}
#acc_intro > div {
    width: 100%;
    height: 200px;
    background: url(../images/01_accessory_banner_1.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: top;
}
#acc_intro > div > h3 {
    font: 600 35px/1 'Noto Sans KR';
    color: #fff;
    padding: 60px 0 40px 0;
}
#acclink {
    width: 680px;
    height: 23px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);
}
#acclink > li {
    float: left;
    font: 400 12px/21px 'Noto Sans KR';
}
#acclink > li > a {
    display: block;
    width: 170px;
    height: 23px;
    transition: all 0.5s ease-in-out;
}
#acclink > li > a:hover {
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.5s ease-in-out;
}

/*상품 공통 설정 영역*/
#acc1wrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#acc1wrap > div {
    width: 1024px;
    margin: 0 auto;
}
/*------------------------------------*/
#acc2wrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#acc2wrap > div {
    width: 1024px;
    margin: 0 auto;
}
/*------------------------------------*/
#acc3wrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#acc3wrap > div {
    width: 1024px;
    margin: 0 auto;
}
/*------------------------------------*/
#acc4wrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#acc4wrap > div {
    width: 1024px;
    margin: 0 auto;
}




#title {
    width: 1024px;
    height: 30px;
    text-align: left;
    float: left;
    font: 400 25px/1.5 'Noto Sans KR';
    margin: 30px 0 20px 0;
}

#accollection_banner {
    width: 1024px;
    margin-bottom: 20px;
}

#product {
    width: 1024px;
    height: 400px;
    display: flex;
    justify-content: space-between;
}

#product > li {
    width: 250px;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
}

#product > li a {
    display: block;
    width: 250px;
    height: 300px;
    background-color: #ddd;
}

#text {
    padding-top: 10px;
}

#text > li {
    width: 250px;
    text-align: center;
}

#text > li:nth-child(1) {
    font: 400 14px/1.5 'Noto Sans KR';
}

#text > li:nth-child(2) {
    font: 400 18px/1.5 'Noto Sans KR';
}

#text > li:nth-child(3) {
    font: 600 18px/1.5 'Noto Sans KR';
    color: #92ab23;
}

/*상품 사진*/
#acc_1 a {
    background: url(../images/01_accessory_view_1-1.jpg);
}
#acc_2 a {
    background: url(../images/01_accessory_2.jpg);
}
#acc_3 a {
    background: url(../images/01_accessory_3.jpg);
}
#acc_4 a {
    background: url(../images/01_accessory_4.jpg);
}




/*-------------재활용----------------*/

/*재활용 페이지 영역*/
#recyclewrap {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}



/*재활용 페이지 인트로 영역*/
#recycle_intro {
    min-width: 1024px;
    height: 200px;
    margin: 0 auto;
}

#recycle_intro > div {
    width: 100%;
    height: 200px;
    background: url(../images/01_recycle_banner_1.jpg) center no-repeat;
    background-attachment: fixed;
    background-position: top;

}

#recycle_intro > div > h3 {
    font: 600 35px/1 'Noto Sans KR';
    color: #fff;
    padding: 60px 0 40px 0;
}

#recyclelink {
    width: 680px;
    height: 23px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.5);
}

#recyclelink > li {
    float: left;
    font: 400 12px/21px 'Noto Sans KR';
}

#recyclelink > li > a {
    display: block;
    width: 340px;
    height: 23px;
    transition: all 0.5s ease-in-out;
}

#recyclelink > li > a:hover {
    background-color: rgba(255, 255, 255, 1);
    transition: all 0.5s ease-in-out;
}


/*상품 공통 설정 영역*/
#recyclecapwrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#recycleorderwrap {
    width: 100%;
    height: 700px;
    border-bottom: solid 1px #000;
}
#recyclecapwrap > div {
    width: 1024px;
    margin: 0 auto;
}
#recycleorderwrap > div {
    width: 1024px;
    margin: 0 auto;
}



#title {
    width: 1024px;
    height: 30px;
    text-align: left;
    float: left;
    font: 400 25px/1.5 'Noto Sans KR';
    margin: 30px 0 20px 0;
}

#recyclecap_banner {
    width: 1024px;
    margin-bottom: 20px;
}
#recycleorder_banner {
    width: 1024px;
    margin-bottom: 20px;
}


#product {
    width: 1024px;
    height: 400px;
    display: flex;
    justify-content: space-between;
}

#product > li {
    width: 250px;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
}

#product > li a {
    display: block;
    width: 250px;
    height: 300px;
    background-color: #ddd;
}

#text {
    padding-top: 10px;
}

#text > li {
    width: 250px;
    text-align: center;
}

#text > li:nth-child(1) {
    font: 400 14px/1.5 'Noto Sans KR';
}

#text > li:nth-child(2) {
    font: 400 18px/1.5 'Noto Sans KR';
}

#text > li:nth-child(3) {
    font: 600 18px/1.5 'Noto Sans KR';
    color: #92ab23;
}

/*상품 사진*/
#recycle_1 a {
    background: url(../images/01_recycle_1-1.jpg);
}
#recycleorder_1 a {
    background: url(../images/01_recycle_2-1.jpg);
}



