/* tag reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
html { width:100%; height:100%; }
body,code { font-family: "Lato", "Noto Sans KR", sans-serif; font-size:15px; color:#1b1b1b; background:#fff; }
body {width:100%; min-width: 1400px;}
body#popup { min-width:0; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:middle !important;}
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; }
hr.layout { display:none; }
a { text-decoration:none; color:#1b1b1b; }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
#content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; }
#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }
table.nneditor-table { width:auto !important; }
strong {font-weight:500 !important;}
.wa-top-banner{background: url(//ecimg.cafe24img.com/pg681b08922763066/arounzcafe/web/wa/wa-top-background.jpg) no-repeat bottom; height:820px}
.wa-top-banner .image {width:1000px; margin:0 auto;position:relative;}
.wa-top-banner .image img {width:900px; }
.wa-top-banner .txt-bx { padding-top:120px}
.wa-top-banner .txt-bx .stit {color:#222; font-size:60px ; font-weight:700}
.wa-top-banner .txt-bx .stxt {color:#222; font-size:30px ;font-weight:500}
.ditail-cost {width:1200px; margin:0 auto; clear:both; font-size:30px;}
.wa-last-seciton {
position: relative;
max-width: 100%;
margin: 0;
padding: 120px 0 90px 0;
display: block;
background: url("//ecimg.cafe24img.com/pg681b08922763066/arounzcafe/web/wa/arounz-background-img.jpeg") center/cover no-repeat;
}
.wa-last-seciton::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3); /* 반투명한 검은 배경 색상 */
}
.wa-last-seciton .stit {color:#fff;font-size: 40px;font-weight:600; }
.wa-last-seciton .stxt {color:#fff;font-size: 20px;line-height:1.6; font-weight: 400;margin:20px 0 50px;}
.wa-service {max-width:100%; margin:0; padding:50px 0 80px 0; height:970px; background-color:#f7f7f7 }
.wa-serivce-box-wrap {width:1200px; margin:0 auto; height:460px }
.wa-serivce-box {width:33.3%; float:left; }
.wa-serivce-box-line {background-color:#fff; ; border:2px solid #f6c52e; border-radius:15px; width:350px; height:450px}
.wa-serivce-box-line img {margin-top:50px}
.wa-serivce-box .txt-bx {margin-top:30px}
.wa-serivce-box .txt-bx strong {font-weight:600; font-size:30px; color:#222; text-align:center; }
.wa-serivce-box .txt-bx p {font-weight:400; font-size:20px; line-height:1.6; color:#666; text-align:center; margin-top:20px;}
.wa-company { margin:0; padding:120px 0; }
.wa-company-box-wrap {width:1200px; margin:0 auto; height:460px }
.wa-company-box {width:50%; float:left; }
.wa-company-box img {max-width:575px; border-radius:15px}
.wa-company-box .txt-bx { padding:30px 30px ; text-align:center }
.wa-company-box .txt-bx strong {font-weight:500; font-size:30px; line-height:1.6; color:#222; text-align:center }
.wa-company-box .txt-bx p {font-weight:400; font-size:20px; line-height:1.6; color:#666; text-align:center; margin-top:20px; margin-bottom:30px; text-align:center }
.wa-detail-wrap {max-width:100%; margin-top:70px; padding:120px 0; background-color:#222}
.wa-detail-wrap .strTitle {color:#fff !important}
.wa-detail-wrap .strSub {color:#ccc !important}
.wa-detail-wrap .strTitle2 {color:#fff !important}
.wa-detail-wrap .strSub2 {color:#ccc !important}
.wa-detail-wrap img {border-radius:15px}
.wa-detail-box {max-width:1200px; margin:0 auto}
.wa-detail-box li {float:left; width:50%}
.wa-bean-wrap {max-width:100%; padding:120px 0; height:1650px; background-color:#f7f7f7}
.wa-bean-wrap .story {margin-top:160px}
.wa-bean-wrap .strTitle {color:#222 !important}
.wa-bean-wrap .strSub {color:#666 !important}
.wa-bean-wrap img {border-radius:15px}
.wa-bean-box {float:left; width:49%}
.wa-bean-box-wrap {max-width:1200px; margin:0 auto}
.wa-bean-box {background-color:#fff; border-radius:15px; padding:40px}
.wa-bean-box:last-child {margin-left:2%}
.wa-bean-box img {float:left; width:30%}
.wa-bean-box .txt-bx { padding:22px 20px; text-align:left ; float:left;width:70%}
.wa-bean-box .txt-bx strong {font-weight:500; font-size:24px; line-height:1.6; color:#222; text-align:left }
.wa-bean-box .txt-bx p {font-weight:300; font-size:18px; line-height:1.8; color:#666; text-align:left; margin-top:20px;}
.wa-bean-box .p-txt {font-weight:500; margin-right:10px; color:#666}
.wa-machine-box-wrap {width:1100px !important}
.grinder-wrap .image{flex: 0 0 40% !important}
.wa-grinder-detail-cell-wrap {display:inline-block; margin-top: 30px !important; }
.wa-machine-wrap {max-width:100%; padding:120px 0; display:block; background-color:#f7f7f7}
.wa-machine-wrap .story {margin-top:160px}
.wa-machine-wrap .strTitle {color:#222 !important}
.wa-machine-wrap .strSub {color:#666 !important}
.wa-machine-wrap .image img {border-radius:15px}
.wa-machine-wrap .subtext img {width:120px; margin-right:50px}
.wa-machine-box-wrap {width:1200px; margin:0 auto}
.wa-machine-box { display: flex; justify-content: space-between;}
.wa-machine-box .box {
background-color: #ccc;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.wa-machine-box .image {
flex: 0 0 50%; /* 이미지 영역이 50%의 너비를 차지하도록 설정 */
margin-right: 20px; /* 이미지와 텍스트 사이의 간격 설정 */
}
.wa-machine-box .image img {
max-width: 100%; /* 이미지가 부모 요소를 벗어나지 않도록 최대 너비 설정 */
display: block; /* 이미지가 인라인 요소로 표시되는 것을 방지 */
}
.wa-machine-box .text {
flex: 1; /* 텍스트 영역이 나머지 공간을 모두 차지하도록 설정 */
text-align:left; margin-top:40px;
}
.wa-machine-box .text .stxt {font-weight:500; font-size:20px; line-height:1.6; color:#f6c52e; }
.wa-machine-box .text .stit {font-weight:600; font-size:30px; line-height:1.8; color:#222; margin-top:5px; margin-bottom:20px; }
.wa-machine-box .text .pointed-text-wrap {max-width:100%; }
.wa-machine-box .text .pointed-text {padding:7px 0; float:left; width:50%}
.wa-machine-box .pointed-text::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: #f6c52e;
border-radius: 50%; /* 동그란 모양으로 만들기 위해 반지름 설정 */
margin-right: 10px; /* 텍스트와 점 사이의 간격 조절 */
}
.grinder-wrap {margin-top:80px}
.wa-grinder-detail-cell-wrap { width:100%; margin:0 auto; }
.wa-grinder-detail-cell-wrap .row-top {font-weight:600; border-bottom:1px solid #bbb}
.wa-grinder-detail-cell-wrap .row { display: flex; }
.wa-grinder-detail-cell-wrap .cell { flex: 1; padding: 10px; border-bottom: 1px solid #bbb; color:#666 }
.wa-grinder-detail-cell-wrap .cell-1 { text-align:left; }
.wa-grinder-detail-cell-wrap .cell-2 { text-align:right; }
.wa-machine-detail-cell-wrap {width:1100px; margin:0 auto; }
.wa-machine-detail-cell-wrap .row-top {font-weight:600; border-bottom:1px solid #bbb}
.wa-machine-detail-cell-wrap .row { display: flex; }
.wa-machine-detail-cell-wrap .cell { flex: 1; padding: 10px; border-bottom: 1px solid #bbb; color:#666 }
.wa-machine-detail-cell-wrap .cell-1 { text-align:left; }
.wa-machine-detail-cell-wrap .cell-2 { text-align:right; }
.wa-machine-detail-cell-wrap .cell-3 { text-align:right;}
.wa-detail-wrap .ditail-cost {margin-top:80px; margin-bottom:20px; display:inline-block; }
.wa-detail-wrap .ditail-cost .stit {font-size:30px; font-weight:600; color:#fff; text-align:left; width:60%; float:left}
.wa-detail-wrap .ditail-cost .stxt {font-size:18px; padding-top:20px; line-height:1.4; font-weight:400; color:#fff; text-align:right; width:40%; float:left}
.wa-cost-detail-cell-wrap { width:1200px; margin:0 auto; }
.wa-cost-detail-cell-wrap .row-top {font-weight:600; background-color:#bbb;}
.wa-cost-detail-cell-wrap .row-bottom {font-weight:600; background-color:#FFC501;}
.wa-cost-detail-cell-wrap .row { display: flex; }
.wa-cost-detail-cell-wrap .cell {font-size:20px; flex: 1; color:#fff ;border-right:1px solid #bbb}
.wa-cost-detail-cell-wrap .cell-1 { flex: 1 25%; padding: 15px; border-bottom: 1px solid #bbb; text-align:center; width:30%; margin:0 ;display: flex; justify-content: center; align-items: center; }
.wa-cost-detail-cell-wrap .cell-2 { flex: 1 43%; text-align:left;}
.wa-cost-detail-cell-wrap .cell-3 { flex: 1 32%; text-align:right; border-right:0; }
.wa-cost-detail-cell-wrap .cell p {padding: 20px 40px; border-bottom:1px solid #bbb}
.wa-cost-detail-cell-wrap .cell-3 span {color:FFC501;font-weight:600; margin-left:10px; }
.wa-cost-detail-cell-wrap .cell-2 span {font-size:14px; font-style: italic;}
.wa-cost-detail-cell-wrap .row-top .cell-2{ padding: 20px 40px;}
.wa-cost-detail-cell-wrap .row-top .cell-3{ padding: 20px 40px;}
.wa-cost-detail-cell-wrap .row-bottom .cell-1 { border:0; ;color:#222}
.wa-cost-detail-cell-wrap .row-bottom .cell-2{ border:0; ;padding:20px 40px; color:#222; font-size:30px; }
.wa-cost-detail-cell-wrap .row-bottom .cell-3{ border:0; padding:20px 40px; color:#222; font-size:30px; }
.row-warranty {padding:25px 40px; }
.row-warranty .cell-warranty {font-size:26px; color:#FFC501; font-weight:600;border:0; margin:0 auto }
.wa-container { display: flex; align-items: center; max-width:1200px; margin:0 auto }
.wa-container .image { flex: 1; text-align: right; }
.wa-container .text { flex: 1; padding: 50px; }
.wa-container .text .name {text-align:left; font-size:30px; font-weight:500; padding:10px 0}
.wa-container .text h3 {font-size: 50px;font-weight:600;color:#222;margin:0px; text-align:left}
.wa-container .text .subtext {color: #666;font-size: 20px;line-height:1.8; font-weight: 400; text-align:left; padding-top:50px}
.wa-container .text .subtext strong {font-weight:600; color:#222}
.wa-container .text .subtext p {padding-top:10px; font-weight:400; color:#666}
.wa-package-wrap { margin:0; padding:120px 0; }
.wa-package-box-wrap {width:1200px; margin:0 auto; height:460px }
.wa-package-box {width:49%; float:left; background-color:#f6c52e ;border-radius:15px; padding:40px 40px 50px 40px;}
.wa-package-box:last-child {margin-left:2%}
.wa-package-box img {max-width:575px; border-radius:15px}
.wa-package-box .txt-bx { padding-top:10px ; text-align:center }
.wa-package-box .txt-bx strong {font-weight:500; font-size:30px; line-height:1.6; color:#222; text-align:center }
.wa-package-box .txt-bx p {font-weight:500; font-size:23px; line-height:1.6; color:#222; text-align:center; margin-top:10px; margin-bottom:50px; text-align:center }
.wa-package-box .txt-bx h3 {font-size:40px}
.stxt-bx-wrap {background-color:#fff3cc; padding:30px 20px 0 30px; border-radius:10px; height:210px; margin-top:20px; }
.stxt-bx-wrap img {float:left; width:20% }
.wa-package-box .stxt-bx { float:left; width:70%; margin:10px 20px; }
.wa-package-box .stxt-bx p {font-weight:400; font-size:16px; line-height:1.6; color:#222; text-align:center; margin-top:5px; margin-bottom:10px; text-align:left }
.wa-package-box .stxt-bx .sub {opacity:0.7}
.wa-package-box .stxt-bx .bean-cost {text-align:right; font-size:34px; font-weight:600}
.wa-package-box .stxt-bx h3 {font-size:23px; text-align:left; padding-top:5px; font-weight:500}
.wa-package-box .txt-bx .cost-before { text-decoration: line-through; font-size:20px}
.wa-package-box .txt-bx .cost {font-size:40px; font-weight:600}
.package-list {
display: flex;
flex-wrap: wrap; padding:10px; margin-top:10px;
}
.package-list > div {
flex: 1 0 50% ; /* 2개의 열을 만들기 위해 각 요소의 너비를 50%로 설정 */
line-height:1.8; font-size:16px; text-align:right; font-weight:500; opacity:0.5;margin-top:10px
}
.package-list > div i {margin-right:5px}
.package-list-wrap {
width:1200px; margin:0 auto; padding:150px 0;
}
.package-list-wrap span {font-size:30px !important; line-height:2.0; font-weight:500}
.package-list-box { justify-content: center;
display: flex; margin-top:20px;
flex-wrap: wrap;
}
.package-list-wrap .package-list-box > div {
flex: 0 0 calc(50% - 20px); /* 2개의 열을 만들기 위해 각 요소의 너비를 50%로 설정 */ margin:10px; height:500px
line-height:2.4; font-size:18px; text-align:left; font-weight:500; border:2px solid #f6c52e ; border-radius:15px; padding:60px;
}
.package-list-wrap > div i {margin-right:5px}
.package-list-wrap .package-list-box .item { display: flex; /* 내부 요소를 가로로 정렬하기 위해 flex를 적용 */
flex: 0 0 calc(50% - 20px); /* 2열을 만들기 위해 각 요소의 너비를 50%로 설정하고, 여백을 고려하여 계산 */
margin: 10px; /* 각 요소들 사이의 여백 */}
.package-list-wrap .package-list-box .text {
flex: 70%; /* 텍스트 영역이 남은 공간을 모두 차지하도록 설정 */
padding-right: 20px; /* 텍스트와 이미지 사이의 간격을 설정 */
}
.package-list-wrap .package-list-box .text .stit {font-size:26px; padding-top:10px; font-weight:600}
.package-list-wrap .package-list-box .text .stxt {font-size:18px; padding-top:20px; line-height:1.8; font-weight:400}
.package-list-wrap .package-list-box .image {
flex: 30%; /* 이미지 영역이 남은 공간을 모두 차지하도록 설정 */
text-align: right; /* 이미지를 오른쪽에 정렬 */
}
.about-company-logos{
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
background-color: white;
-webkit-box-align: center;
align-items: center;
width: 100%;
height: 160px;
overflow: hidden;
z-index: 10; }
.about-company-logos div { background: url("//ecimg.cafe24img.com/pg681b08922763066/arounzcafe/web/wa/company-logos.png") 0px center / cover repeat-x;
animation: 300s linear 0s infinite normal none running ani;}
@-webkit-keyframes ani{0%{background-position:20000px 0;}100%{background-position:0 0;}}/*!sc*/
@keyframes ani{0%{background-position:20000px 0;}100%{background-position:0 0;}}/*!sc*/
.upper_blank {
height: 300px;
background: yellowgreen;
text-align: center;
padding-top: 200px;
}
.num-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 2%;
width:1280px;
}
.num-item {
text-align: center;
padding: 10px;
margin-bottom: 50px;
flex: 0 0 calc(33.333% - 20px); /* 33.333% - 20px 간격으로 요소 크기 설정 */
}
.in-title {
font: 26px/1 'arial';
color: #222;
font-weight: 600;
margin-bottom: 20px;
}
.sub-title {
font: 14px/1 'arial';
color: #222;
}
.nums {
font: bold 80px/1 'arial';
color: #222;
}
#num-unit {
font: bold 34px/1 'arial';
color: #222;
}
.p-txt {color:#f6c52e}
.storyTitle {}
.storyTitle span {color: #999;font-size: 15px;font-weight: 400;}
.storyTitle .brandTitle {color: #222;text-align: center;font-size: 65px;font-weight: 500;letter-spacing: -0.5px;margin-bottom:10px;margin-top:10px;}
.storyTitle .brandSubtit {color: #888;font-size: 16px;font-weight: 300;}
.storyTitle::after {content: "";width:1px;height:100px;background-color:#ebebeb;display:block;margin:50px auto;}
.story {margin-bottom:90px;}
.story:last-child {margin-bottom:0;}
.story .strTitle {font-size: 50px;font-weight:600;color:#222;}
.story .strSub {color: #666;font-size: 20px;line-height:1.6; font-weight: 400;margin:20px 0 50px;}
.story .strTitle2 {font-size: 50px;font-weight:600;color:#222;margin:20px 0 50px;}
.story .strSub2 {color: #666;font-size: 20px;line-height:1.6; font-weight: 400;}
.story .img {}
.link-btn-wrap {display:inline-block; margin:0 auto; width:200px; text-align:left}
.link-btn {display: inline-block; margin-top:30px; }
.link-btn span {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9375rem;
line-height: 2.875rem;
height: 2.875rem;
transition: all 0.3s;
min-width: 7rem;
padding: 0 2rem;
border: 1px solid #7c7573;
border-radius:5px;
}
.link-btn span:after {
content: "";
display: inline-block;
width: 1.5625rem;
height: 0.5625rem;
background-image: url(//ecimg.cafe24img.com/pg681b08922763066/arounzcafe/web/upload/btn-arrrow-right.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center
}
.link-btn2 {display: inline-block; margin-top:80px; }
.link-btn2 span {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9375rem;
line-height: 2.875rem;
height: 2.875rem;
transition: all 0.3s;
min-width: 9rem;
padding: 0 2rem;
background-color:#333;
color:#fff
}
.link-btn2 span:after {
content: "";
display: inline-block;
width: 1.5625rem;
height: 0.5625rem;
background-image: url(//ecimg.cafe24img.com/pg681b08922763066/arounzcafe/web/upload/arrow-right-w.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center
}