@charset 'utf-8';
html {font-size: 20px;}
body {padding: 0; margin: 0; line-height:1.3; color: #333; background-color:#fff}
h1, h2, h3, h4, h5, h6 {font-size:1rem;}
h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, ul, ol, li, form, fieldset, blockquote, address, table, thead, tbody, tfoot, tr, td, caption {margin:0; padding:0;}
ul, ol {list-style:none;}
img {border:0;}
a {text-decoration:none; font-size: 1rem; font-weight: 300; color: #333;}
i, address, small, em {text-decoration: none; font-weight: 300; font-style: normal; color: #fff; }
table {border-collapse: collapse; border-spacing: 0;}
figure {margin: 0; }
strong, b {font-weight: normal}


/* 공통사항  */
.clearfix::after{content: ''; display: block; clear: both;}


/* wrap */
.wrap {position: relative; padding-left: 21.8%; word-break: keep-all}

/* header */
header {position: fixed; top: 0; left: 0; bottom: 0; z-index: 900; width: 21.9%;/*420px;*/ background-color: #541329}
header .header_wrap h1 {position: relative;}
header .header_wrap h1::after {content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -20.2015225%; /*164/406;*/ width: 40.403045%;/*164/406;*/ height: 2px; background-color: #fff;}
header .header_wrap h1 a {display: block;}
header .header_wrap h1 a img{display: block; width: 100%; height: 100%;}
header .header_wrap .gnb ul {margin-top: 83px;}
header .header_wrap .gnb ul li {margin-bottom: 30px; padding-left: 11.4285714%; /*48px*/}
header .header_wrap .gnb ul li:last-child{margin-bottom: 9px}
header .header_wrap .gnb ul li a {font-family: 'Bitter'; font-weight: 700; color: #fff}
header .header_wrap .gnb ul li a {position: relative}
header .header_wrap .gnb ul li.on a::after {content: ''; position: absolute; bottom: -5px; left: 0; width: 217%; /*127/406;*/ height: 1px; background-color: #fff}
header .header_wrap .gnb ul li:nth-child(2).on a::after {width: 120%;}
header .mobile_menu {display: none;}


/* main */
main {padding-bottom: 6%; background-color: #ededed;}
main h3 { font-size: 1.9rem; text-align: center; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3)}

.visual {position: relative; width: 100%; height: 100vh; background: url('../images/darich_main_banner.png') 0 0; background-size: cover;}
.visual .visual_txt {padding-top: 20.999%; font-family: 'NanumMyeongjo'; font-size: 3.6rem; color: #fff; text-align: center; line-height: 4.6rem; }
.visual_sub li {float: left; width: 33.3%;}
.visual_sub li img {display: block; width:100%;}


/*.darich_teaser {position: relative; padding: 9% 0 6%; background: url('../images/darich_main_background1.png')0 0; font-family: Lora;}
.darich_teaser::before {content: ''; position: absolute; top: 5%; left: 50%; width: 1px; height: 15%; background-color: #d2d2d2}
.darich_teaser::after {content: ''; position: absolute; bottom: 5%; left: 50%; width: 1px; height: 15%; background-color: #d2d2d2}
.darich_teaser li {position: relative; margin: 0 auto; width: 980px; 66% margin: 50px auto; font-family: 'NanumMyeongjo'; font-size: 1.3rem; font-weight: 700; line-height: 2rem;}
.darich_teaser li:first-child::after {content:'1.'; position: absolute; top: -1%; left: -3%;}
.darich_teaser li:nth-child(2):after {content:'2.'; position: absolute; top: -1%; left: -3%;}
.darich_teaser li:nth-child(3)::after {content:'3.'; position: absolute; top: -1%; left: -3%;}
.darich_teaser li > span {display: inline-block; padding-right: 29px}*/


.darich_msg {margin: 0 0 8%; /*191223 수정*/
    padding: 5% 0; background-image: url('../images/main_bg_6.jpg'); background-attachment: fixed}
.darich_msg h2 {margin:0 auto; padding: 8%; width: 75%; border-radius: 15px; background-color: rgba(0,0,0,0.5); text-align: center; font-family: 'NanumGothic'; font-size: 1.5rem; font-weight: normal; color:#e1e1e1; line-height: 3.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.8);}
.darich_msg h2 b {font-weight: 800; color: #fff}

.brochure {text-align: center}
.brochure img {width: 50%;}


.darich_members {padding: 15% 7% 4%; text-align: center}
.darich_members b {font-size: 1rem; line-height: 1.5rem; }
.darich_members h3 {margin: 0 auto; font-family: 'Lora';}
.darich_members h4 {font-size: 1.2rem; margin-bottom: 5%}
.darich_members .member_list {padding-top: 58px; font-family: 'NanumMyeongjo'; font-size: 0.7rem;}
.darich_members .member_list > li {float: left; padding: 29px 40px 0; width: 48.2%; height: 500px; background-color: #471023; color: #fff}
.darich_members .member_list > li + li {margin-left: 3.6%}
.darich_members .member_list > li > ul > li {margin-bottom: 10px}
.darich_members .member_list > li > ul > li strong {display: block}
.darich_members .member_list > li > ul > li em {display: block}
.darich_members .member_list > li > ul.qc {padding-top: 106px}
.darich_members .member_list > li > ul.qc strong {font-size: 0.8rem}

.darich_lab {margin: 0 7% 7%; padding: 3% 0; background-color: #471023; text-align: center; font-family: 'NanumMyeongjo'; font-size: 0.75rem; color: #fff}
.darich_lab h3 {font-size: 1.5rem}
.darich_lab ul {padding-top: 30px}
.darich_lab em {font-size: 1.3rem; line-height: 1.75rem}

.brochure_wrap .brochure_btn {display: block; margin: 0 auto; width: 238px; border:1px solid #541329; text-align: center; font-family:'Lora';font-size: 1.5rem; line-height: 2.5rem; font-weight: 700; color: #541329}
.modal-content {width: 68vw; margin: 0 auto;}
.modal-dialog {background: transparent}
.modal-content {background: transparent;}
.modal-content .contents ul {overflow: hidden; height: 911px;}
.modal-content .contents li img {display: block; width: 100%; object-fit: cover}
.modal-footer {padding: 0}
.modal-footer .btn {position: absolute; top: 0; right: -5%; padding: 0; width: 5%; height: 5%; border: none; background: transparent; box-shadow: none}
.modal-footer .btn img {width: 100%; height: 100%;}
.modal-footer .btn:hover {background: transparent}

.modal-footer .pager_num {font-size: 1.5rem; text-align: left; }
.modal-footer .pager_num .num {display: none}
.modal-footer .pager_num .num.on {display: inline-block;} 
.modal-footer .pager_num i {vertical-align: text-bottom}

.modal-footer a {display: inline-block; width: 32px; height: 33px;  background: url('../images/icon/-e-next_arrow(2).png') 0 0; background-size: cover}
.modal-footer a.next {background: url('../images/icon/-e-next_arrow(1).png') 0 0;  background-size: cover}
.brochure_pager {position: absolute; left: -12%; bottom: 0%}
.modal-backdrop {bottom: 0}

/* sns 바로가기 */
.darich_sns {font-family:'NanumGothic'; padding:0 7%; margin:0 auto;}
.hidden {width:0; height:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden;}
.wrap_sns li {max-width:672px; position:relative; background-size:100%; background-repeat:no-repeat;}
.wrap_sns li.insta {margin:0 auto;  background-image: url('../images/sns_bg1.jpg');}

.wrap_sns a {display:inline-block; width:100%; height:100%;}
.wrap_sns img {max-width:100%; max-height:100%;}

/* 서브 WHOLE SALE 페이지  */
.sub_wrap.active .sub_header {display: block}

.sub_wrap .sub_header {display: none; width: 100%; padding: 10% 0; background: url('../images/sub_background(1).png')0  0; background-size: cover; text-align: center} 
.sub_header h5 {font-family: Lora; font-size: 3.6rem; font-weight: normal; color: #fff;}

.sub_content {text-align: center}
.sub_content .whole_sale {position: relative; padding: 5%; background: url('../images/sub_background(3).png')0 0; background-size: cover;}
.sub_content .whole_sale::before {content: ''; position: absolute; top: 1%; left: 50%; width: 1px; height: 5%; background-color: #d2d2d2}

.sub_content .whole_sale h4 {margin-bottom: 5%; font-family: Lora; font-size: 1.9rem; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); font-weight: normal;}
.sub_content .whole_sale ul {margin: 0 auto;}
.sub_content .whole_sale li {float: left; width: 33.3%}
.sub_content .whole_sale li .blend {display: block; margin: 0 auto; padding-top: 12%; width:300px; height: 300px; border-radius: 50%; background-color: #471023; font-family: 'NanumMyeongjoBold';}
.sub_content .whole_sale li .blend strong {display: block; margin-bottom: 3%; font-size: 1.5rem; color: #fff}
.sub_content .whole_sale li .blend em {display: block; font-size: 0.9rem}
.sub_content .whole_sale li .blend_info {display: block; margin: 15% auto 0; width: 90%;}
.sub_content .whole_sale li .blend_info p {font-family: 'NanumMyeongjo'; font-weight: bold; font-size: 0.9rem; line-height: 1.5rem}
.sub_content .whole_sale li .blend_info b {display: block; margin-bottom: 5%; font-family: 'NanumMyeongjo'; font-size: 0.9rem; font-weight: bold; color: #471023}

.sub_content .darich_roast {position: relative;}
.sub_content .darich_roast::before {content: ''; position: absolute; top: 0%; left: 50%; width: 1px; height: 12%; background-color: #d2d2d2}
.sub_content .darich_roast {padding-top: 6%}
.sub_content .darich_roast h4 {font-family: Lora; font-size: 1.9rem; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);}

.sub_content .darich_roast ul {padding-top: 3%; font-family: 'NanumMyeongjo'; font-size: 1.2rem; font-weight: bold; line-height: 2.5rem}
.sub_content .darich_roast ul li {position: relative; margin: 2% auto; width: 77%; text-align: left}
.sub_content .darich_roast ul li:first-child::after {content:'1.'; position: absolute; top: -1%; left: -3%;}
.sub_content .darich_roast ul li:nth-child(2):after {content:'2.'; position: absolute; top: -1%; left: -3%;}
.sub_content .darich_roast ul li:nth-child(3)::after {content:'3.'; position: absolute; top: -1%; left: -3%;}



/* 서브 MAP 페이지  */
.office .sub_content {background: #ededed;}
.sub_content .map {position: relative; padding: 10% 5% 5% 5%;}
.sub_content .map::before {content: ''; position: absolute; top: 4%; left: 50%; width: 1px; height: 12%; background-color: #d2d2d2}
.sub_content .map h4 {margin-bottom: 5%; font-family: Lora; font-size: 1.9rem; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3); font-weight: normal;}

.sub_content .map .map_info {padding-top: 5%}
.sub_content .map .map_info .addr {text-align: left}
.sub_content .map .map_info .addr li {margin-bottom: 2%}
.sub_content .map .map_info .addr i {display: inline-block; margin-right: 1%; vertical-align: top}
.sub_content .map .map_info .addr i img{display: block; width: 27px}
.sub_content .map .map_info .addr em {display: inline-block; font-family: 'NotoSansKRbold'; font-size: 0.9rem;  font-weight: 700; color: #333}
.sub_content .map .map_info .addr address {display: inline-block; font-family: 'NotoSansKRbold'; font-size: 0.9rem; font-weight: 700; color: #333}



/* footer */
footer {padding:2% 0 2% 0; background-color: #471023; font-family: Lora; color: #fff; text-align: center}
.company_addr b {display: inline-block; font-size: 0.9rem; color: #fff;}
.company_addr address {display: inline-block;}
.company_addr a {display: inline-block; font-size: 0.7rem;}
.company_addr a.mail {margin-left: 100px;} 



/* ------------------------ media ------------------------ */
@media (max-width: 1853px){
.darich_msg {padding: 4% 0}
.modal.in .modal-dialog {width: 100%}
.modal-content {margin: 0 auto; width: 72vw} 
.sub_content .whole_sale {padding: 5% 0}
.sub_content .whole_sale li .blend_info p {font-size: 0.8rem}

.sub_content .map::before {height: 9%;}

.darich_sns {font-size:19px;}
}

@media (max-width: 1700px){
.modal-content {width:78vw}  
}



@media (max-width: 1600px){
.brochure img {width: 70%;}
.brochure_pager {left: 45%; bottom: -6%}
}



@media (max-width: 1400px){
html {font-size: 18px;}
.visual .visual_txt {padding-top: 33%; font-size: 3rem}
/*.darich_teaser li {width: 889px;}
.darich_teaser::before {top: 4%; height: 14%;}
.darich_teaser::after {bottom: 4%; height: 14%;}*/
.brochure img {width: 80%;}
.modal-content {margin-top: 2%; width: 85vw}  
.modal-dialog {width: 100%}
.modal-footer a {width: 25px; height: 25px}
.sub_content .whole_sale::before {height: 4%;}
.sub_content .whole_sale li .blend {width: 270px; height: 270px}

}

@media (max-width: 1200px){
html {font-size: 16px;}
.darich_teaser li {width: 786px;}
.sub_content .whole_sale li .blend {width: 230px; height: 230px}
.modal-footer a {width: 20px; height: 20px}

}


@media (max-width: 1080px){
.wrap {padding-left: 23.08%}
header {width: 23.08%}
header .header_wrap h1::after {margin-left: -20.2015225%; width: 40.403045%;/*51.5;*/ height: 2px; background-color: #fff;}


main h3 {font-size: 1.25rem}

/*.darich_teaser li {margin: 18px auto; width: 608px; font-size: 1rem}*/
.darich_msg h2 {font-size: 1rem}
.brochure img {width: 90%;}
.darich_lab h3 {font-size: 1.1rem}
.darich_lab em {font-size: 1rem}
.brochure_wrap .brochure_btn {width: 134px; font-size: 1rem; line-height: 1.5rem}
.modal-content {width: 93vw}
.modal-footer .btn {top: 2%}

.darich_members .member_list > li {float: none; padding: 5%; width: 100%; height: auto;}
.darich_members .member_list > li + li {margin: 5% 0;}
.darich_members .member_list > li > ul.qc {padding: 0}

.sub_content .whole_sale::before {height: 3%;}
.sub_content .map::before {height: 7%;}
}




@media (max-width: 999px){
.visual .visual_txt {padding-top: 37%}
.darich_teaser li {width: 581px;}
.darich_teaser li > span {padding-right: 0}
.darich_msg h2 {width: 79%;}

.sub_content .whole_sale li .blend {width: 200px; height: 200px}
.sub_content .whole_sale li .blend strong  {font-size: 1.2rem}
.sub_content .whole_sale li:first-child .blend strong {margin-bottom: 0;}

.sub_content .darich_roast ul li {width: 82%}
}


@media (max-width: 810px){
.darich_teaser li {width: 527px }
.darich_teaser li > span {padding-right: 5px}
}
    

@media (max-width: 780px){
html {font-size: 16px;}
.wrap {padding: 0}
header {right: 0; width: 100%; bottom: auto; background-color: transparent;transition: all 1s ease}
header .header_wrap {visibility: hidden; opacity: 0; height: 0;}
header .header_wrap h1 a img {display: none}  
header.fix {height: 50px; background-color: #541329}
header.active {background-color: #541329}
header.active .header_wrap {visibility: visible; opacity: 1; height: auto; margin-top: -12px; text-align: center;}
header.active .header_wrap h1 {display: none}
header.active .mobile_menu .menu_btn i:first-child {visibility: hidden;}
header.active .mobile_menu .menu_btn i:nth-child(2) { transform: rotate(45deg); transition: all 0.1s ease;position: absolute;}
header.active .mobile_menu .menu_btn i:last-child {transform: rotate(-45deg); transition: all 0.1s ease;position: absolute;}
header.active .header_wrap .gnb {opacity: 1;}

header .header_wrap h1::after {display: none}
header .header_wrap .gnb {opacity: 0; margin: 0 auto; width: 61.6%}
header .header_wrap .gnb ul li {position: relative; padding-left: 0;}
header .header_wrap .gnb ul li::after {content: ''; position: absolute; left: 50%; bottom: -7px; width: 0; height: 1px; background-color: rgba(255, 255, 255, 0.5); transition: 0.5s all ease}
header .header_wrap .gnb ul li:hover::after {left: 0; right: 0; width: 100%} 
header .header_wrap .gnb ul li.on a::after {bottom: 0; left: 0; right: 0; width: 100%}

header .mobile_menu {display: block;}
header .mobile_menu .menu_btn {overflow: hidden; position: absolute; top: 15px; left: 21.15384615384615%; display: block; width: 30px; height: 23px;}
header .mobile_menu .menu_btn i {display: block; margin-bottom: 6px; width: 100%; height: 3px; background-color: #fff; border-radius: 3px}
header .mobile_menu h2 {position: absolute; top: 20px; left: 50%; margin-left: -84px; width: 168px; height: 15px;}
header .mobile_menu h2 img {display: block; width: 100%; height: 100%;}

main {padding: 0 0 5% 0}
.visual {height: auto;}
.visual .visual_txt {padding: 25% 0; font-size: 2rem; line-height: 3rem;}

/*.darich_teaser::before {height: 11%;}
.darich_teaser::after {height: 11%;}
.darich_teaser li {width: 74%; font-size: 0.9rem}
.darich_teaser li:first-child::after {left: -4%;}
.darich_teaser li:nth-child(2):after {left: -4%;}
.darich_teaser li:nth-child(3)::after {left: -4%;}*/

.brochure img {width: 100%;}

.darich_members .member_list {font-size: 0.9rem}


.sub_wrap .sub_header {padding: 12.5% 0}
.sub_header h5 {font-size: 2.5rem}

.sub_content .whole_sale {padding: 12% 0;}
.sub_content .whole_sale h4 {font-size: 1.5rem}

.sub_content .whole_sale li .blend {width: 180px; height: 180px;}
.sub_content .whole_sale li .blend strong {font-size: 1rem}
.sub_content .whole_sale li .blend em {font-size: 0.8rem}

.sub_content .whole_sale li .blend_info {width: 100%; text-align: center}
.sub_content .whole_sale li .blend_info p {font-size: 0.8rem; line-height: 2rem}

.sub_content .darich_roast {padding-top: 11%}
.sub_content .darich_roast h4 {font-size: 1.3rem}
.sub_content .darich_roast ul {font-size: 1rem}

.sub_content .darich_roast ul li:first-child::after {left: -4%;}
.sub_content .darich_roast ul li:nth-child(2):after {left: -4%;}
.sub_content .darich_roast ul li:nth-child(3)::after {left: -4%;}


.sub_content .map {padding: 9% 0 0 2%}
.sub_content .map::before {left: 51.4%; height: 7%;}
.modal.in .modal-dialog {margin: 0}
.modal-content {margin: 5% 0 0 0; width: 100vw }
.modal-footer a {width: 20px; height: 20px;}
.modal-footer .btn {top: -7%; right: 0; height: 6%}
.brochure_pager {left: 43%; bottom: -7%}
footer {padding: 3%}
}

@media (max-width: 659px){ 
.sub_content .whole_sale li:first-child .blend {padding-top: 8%}
.sub_content .whole_sale li .blend {width: 130px; height: 130px;}
.sub_content .whole_sale li .blend strong {font-size: 0.8rem}
.sub_content .whole_sale li .blend em {font-size: 0.5rem}
.sub_content .whole_sale li .blend_info p {font-size: 0.5rem; line-height: 1.5rem}
.modal-content {margin-left: 0.5%; margin-top: 6%}
}




@media (max-width: 480px){ 
html {font-size: 13px;}
header .mobile_menu .menu_btn {left: 16px;}

/*.darich_teaser::before {height: 5%}
.darich_teaser li {width: 79%}
.darich_teaser li:first-child::after {left: -4.5%;}
.darich_teaser li:nth-child(2):after {left: -4.5%;}
.darich_teaser li:nth-child(3)::after {left: -4.5%;}*/

.darich_msg h2 {font-size: 1.2rem; font-weight: 900; line-height: 2.8rem; text-shadow: 1px 1px 2px rgba(0,0,0,1);}

.brochure_pager {bottom: -10%; left: 40%}
.company_addr a.mail {margin-left: 5%}
.sub_wrap .sub_header {padding: 22% 0}

.sub_content .whole_sale {padding: 12% 0; background-position-x: 47%}
.sub_content .whole_sale::before {top: 0.5%; height: 4%;}
.sub_content .whole_sale li .blend {padding-top: 8%; width: 200px; height: 200px;}
.sub_content .whole_sale li .blend strong {font-size: 1.3rem}
.sub_content .whole_sale li .blend em {font-size: 1rem; line-height: 1.4rem}
.sub_content .whole_sale li .blend_info {margin: 5% auto 0; width: 64%}
.sub_content .whole_sale li .blend_info p {font-size: 1rem; line-height: 2rem}
.sub_content .whole_sale .bx-wrapper .bx-prev {background: url('../images/icon/left-arrow.png')0 0; background-size: cover}
.sub_content .whole_sale .bx-wrapper .bx-next {background: url('../images/icon/right-arrow.png')0 0; background-size: cover}

.sub_content .darich_roast ul {font-size: 1rem; line-height: 2rem}
.sub_content .darich_roast ul li {width: 87%; margin-bottom: 3%}
.sub_content .darich_roast ul li:first-child::after {left: -4.5%;}
.sub_content .darich_roast ul li:nth-child(2):after {left: -4.5%;}
.sub_content .darich_roast ul li:nth-child(3)::after {left: -4.5%;}


.sub_content .map::before {top: 2%; height: 4%;}
.sub_content .map .map_info .addr ul li {margin-bottom: 2.5%}
.sub_content .map .map_info .addr ul li i {vertical-align: middle}
.sub_content .map .map_info .addr  ul li address {display: block; padding-left: 8%}
.company_addr address {font-size: 0.9rem}

}