@charset 'utf-8';

html,body {margin:0; padding:0; font-size:20px;}
.clearfix::after{content: ''; display: block; clear: both;}

/* header */
.sub_wrap .sub_header {display: block; width: 100%; padding: 10% 0; background: url('http://www.darich.co.kr/images/sample_bg.jpg')0  0; background-size: cover; text-align: center} 
.sub_header h5 {font-family: Lora; font-size: 3.6rem; font-weight: normal; color: #fff;}

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*/ font-size:20px; line-height:0.91em;}
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; position:relative; font-size:1em; line-height:26px;}
header .header_wrap .gnb ul li.on a::after {content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background-color: #fff; box-sizing:border-box;}
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; padding-left:21.9%;}
main h3 { font-size: 1.9rem; text-align: center; text-shadow: 0 0 8px rgba(0, 0, 0, 0.3)}

/* 샘플 납품 문의 페이지 */
.form_cssample {font-family:'NanumGothic'; line-height:1; background-color: #fff;}
.form_cssample .sub_header h2 {color:#fff; font-size:3.6rem; font-weight: normal; letter-spacing: -3.6px;}
.form_cssample .sub_content h2 {font-family: Lora; font-weight: normal; font-size:1.6rem; color: #000; padding-top:8.4%; color: #333333; line-height:2em; background-color:#fff; padding-bottom:3.8%; text-align: center;}
.sample_wrap hgroup h3 {line-height:1.5em; font-size:1.5rem; letter-spacing:-1.5px; padding-top:5.28%; text-shadow:none;}
.sample_wrap hgroup h4 {font-family:'BitterBold'; font-size:1.5rem; letter-spacing:-0.6px; line-height:1.5em; color:#b9617f; margin-top:0.6%; margin-bottom:3.1%;}
.sample_wrap  {text-align:center; background-image:linear-gradient(to bottom, rgba(0,0,0,0.1), rgb(255, 255, 255));}
.sample_wrap dl {display:inline-block; font-size:0; padding-top:22px; padding-bottom:19px;}
.sample_wrap > dl:last-of-type {margin-left:150px;}
.sample_wrap > dl img {display:inline-block; margin-right:35px;}
.sample_wrap > dl dt, .sample_wrap dl dd {display:inline-block; text-align:center;}
.sample_wrap > dl dd {font-size:0.75rem; color:#989898; letter-spacing: 0.3px; vertical-align: top;}
.sample_wrap > dl b {font-size:0.95rem; letter-spacing: 0.95px; color:#000; font-weight:bold; display:block; padding-bottom:9px;}
.sample_wrap > p {clear:both; padding-top:5.3%; font-size:0.75rem; line-height:1.5em;}
.sample_wrap > p strong {line-height:1.75em; font-size:1rem; letter-spacing: -1px; color:#000; padding-bottom:2%; display:block;}
.sample_wrap > p .enter {display:inline-block; padding-top:1.13%; content:'';}

.sample_wrap form {background:transparent url('http://www.darich.co.kr/images/bg_samplewrap.png') center right no-repeat;}
.sample_wrap form legend {padding-top:6.4%; letter-spacing:-1.5px; font-weight: bold; font-size:1.5rem; line-height:1.5em; color:#000;}
.sample_wrap .form_wrap {box-sizing: border-box; border:1px solid #ddd; box-shadow:0 0 5.3px 4.7px rgba(0,0,0,0.03); border-radius: 10px; width:100%; max-width:980px; margin:1.625rem auto 0; text-align:left; background-color:rgba(255,255,255,0.03);} 
.sample_wrap .form_wrap ul {margin:49px 87px 15%; }
.sample_wrap .form_wrap ul li {margin-bottom:1.5rem;}
.sample_wrap .form_wrap ul li.left {width:45%; margin-right:9%; display: inline-block;}
.sample_wrap .form_wrap ul li.right {width:45%; display: inline-block;}
.sample_wrap .form_wrap ul li label {font-size:0.8rem; line-height:1.5em; letter-spacing:-0.8px; display: block; margin-bottom:16px;}
.sample_wrap .form_wrap ul li > input {width:100%; border-radius:10px; border:solid 1px #ddd; background-color: #fff; height:50px; padding:10px; box-sizing:border-box; font-size:0.7rem;}
.sample_wrap .form_wrap ul li input[data="file"] {padding:12px; height:auto; font-size:0.7rem;}
.sample_wrap .form_wrap ul li.samplebean {position:relative; font-size:0;}
.sample_wrap .form_wrap ul li.samplebean label {margin-bottom:20px;}
.sample_wrap .form_wrap ul .comment {font-size:0.65rem; line-height:1.5em; letter-spacing:-0.65px; color:#a21414; position: absolute; right:0; top:6px;}
.sample_wrap .form_wrap dl {border-radius:10px; box-shadow: 2.5px 4.3px 4.9px 1.1px rgba(0, 0, 0, 0.18); border: 1px solid #ddd; padding-top:42px; padding-bottom:37px; width:32%; box-sizing:border-box; color:#fff; text-align: center;}
.sample_wrap .form_wrap .red {background-color: #e88600; margin-right:2%;}
.sample_wrap .form_wrap .darich {background-color: #8d163c; margin-right:2%;}
.sample_wrap .form_wrap .gold {background-color: #a21d22;}
.sample_wrap .form_wrap .gold dd .goldmedal {background:  url('http://www.darich.co.kr/images/bean_gold.jpg') center center no-repeat; width:80px; height:80px; position: absolute; bottom:20px; left:50%; margin-left:-40px;}
.sample_wrap .form_wrap dl dt p {font-weight:bold; font-size:1rem; line-height:1.5em; letter-spacing: -1px; }
.sample_wrap .form_wrap dl dd {padding-top:22px;}
.sample_wrap .form_wrap dl dd p {font-size:0.7rem; line-height:1; letter-spacing: -0.7px; padding-bottom:123px; position: relative;}
.sample_wrap .form_wrap dl p .enter2 {display:inline-block; width:100%; content:'';}
.sample_wrap .form_wrap dl dd button {background-color: #fff; border-radius: 10px; padding: 11px 40px; letter-spacing: -0.65px; font-size:0.65rem; color:#000; border:none;}
.sample_wrap .form_wrap .check_wrap {width:32%; box-sizing:border-box; font-size:0; display: inline-block; margin-top:15px;}
.sample_wrap .form_wrap .box_red,
.sample_wrap .form_wrap .box_darich {margin-right:2%;}

/* 체크박스 디자인 커스텀*/
.sample_wrap .check_wrap .checkbox {position: relative; border-radius: 10px; border:1px solid #ddd; background-color:#fff; padding:0.85rem 0 0.75rem 0.95rem; color:#000; font-size:0.7rem; font-weight:bold; line-height: 1.5em; letter-spacing: -0.7px; cursor:pointer;}
.sample_wrap .check_wrap .checkbox:first-child {margin-bottom:10px;}
.sample_wrap .checkbox input {position: absolute; width:0; height:0; cursor:pointer; opacity:0;}
.sample_wrap .checkbox .checkmark {position: absolute; top:50%; right:15px; width:17px; height:17px; background-color:#b5b5b5; margin-top:-8px; border-radius:50%;}
.checkmark:after {content: ""; position: absolute; display: none;}
.checkbox input:checked ~ .checkmark {background-color:#6abf1f;}
.checkbox .checkmark:after {display:block; right:5px; top:1px; width:5px; height:8px; border: solid white; border-width:0 3px 3px 0;  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.sample_wrap .form_wrap .notice textarea {height:171px; width:100%; display: block; background-color: #fff; border:1px solid #ddd; border-radius:10px; padding: 23px 19px; box-sizing: border-box; font-family:'NanumGothic'; font-size:0.7rem;}
.sample_wrap .goto_cs input {color:#fff; font-size:0.95rem; line-height:1.5em; letter-spacing: -0.95px; padding: 22px 100px; background-color:#541329; border-radius: 10px; border:none; margin: 0 auto; display: block; margin-bottom:61px;}
.sample_wrap .form_wrap .delivery {border-radius:10px; border:solid 1px #ddd; background-color: #f1f1f1; padding-top:36px; padding-bottom:34px; text-align: center;}
.sample_wrap .form_wrap .delivery p {font-weight: bold; color:#000; letter-spacing: -0.9px; font-size:0.9rem; line-height: 1.5em; position: relative;}
.sample_wrap .form_wrap .delivery .freeD .icon {display:inline-block; position:relative; margin-right:0.25rem; background: url('http://www.darich.co.kr//images/icon_delivery.png') no-repeat; background-size:cover; background-position:center center; width:1.35rem; height:0.95rem; content:'';}
.sample_wrap .form_wrap .delivery .bank {margin-top:0.75rem; letter-spacing: -0.7px; line-height:1.5em; font-size:0.7rem; font-weight: normal;}
.icon {top:4px;}
.sample_wrap .form_wrap .delivery .bank b {letter-spacing: -0.8px; font-size:0.8rem; font-weight: bold; padding-right:0.25rem; position: relative;}
.sample_wrap .form_wrap .delivery .bank span {display: inline-block;}
.sample_wrap .form_wrap .delivery .bank span.bank_name {padding-right:0.35rem; padding-left:0.5rem; font-size:0;}
.sample_wrap .form_wrap .delivery .bank span:last-of-type {padding-left:0.6rem;}
.sample_wrap .form_wrap .delivery .bank span.icon {display:inline-block; position:relative; background: url('http://www.darich.co.kr//images/icon_bank.png') no-repeat; background-size:cover; width:1rem; height:1rem; content:''; padding:0; margin-right:0.325rem;}


/* footer */
footer {padding:2% 0 2% 0; background-color: #471023; font-family: Lora; color: #fff; text-align: center; margin-left:21.9%;}
.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 (max-width:1400px) {
  html,body {font-size:19px;}  
  header .header_wrap .gnb ul li {font-size:18px;}
  header .header_wrap .gnb ul li a {line-height:23.4px;}
}

@media (max-width:1300px) {
  html,body {font-size:17px;}
 .sample_wrap {padding:0 15px;}
 .form_cssample .sub_content h2 {letter-spacing: -2px;} 
 .sample_wrap .form_wrap ul {margin-left:40px; margin-right:40px;}
 .form_cssample .sub_content h2 .enter3 {display:block;} 
}
@media (max-width:1200px) {
    header .header_wrap .gnb ul li {font-size:16px;}    
    header .header_wrap .gnb ul li a {line-height:20.8px;}
}
@media (max-width:1150px) {
  html,body {font-size:16px;}
}

@media (max-width: 1080px){
html,body {font-size:15px;} 
main {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;}
.sample_wrap .form_wrap ul {margin-left:20px; margin-right:20px;}
}

@media (max-width:780px) {
 html,body {font-size:20px;} 
 header .header_wrap .gnb ul {margin-bottom:0;}
 header .header_wrap .gnb ul li {font-size:16px;}
 main {padding-left:0; padding-bottom:41px;}
.form_cssample, header, footer {min-width:360px;}

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

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}
.sub_wrap.active .sub_header {display: block}
header.active {background-color: #541329}
header.active .header_wrap {opacity: 1; height: auto; margin-top: -12px; text-align: center; display:block; visibility: visible}
header.active .header_wrap h1 {display: none}

header .mobile_menu .menu_btn {overflow: hidden; position: absolute; top: 15px; left: 18%; display: block; width: 30px; height: 23px; visibility: visible;}
header .mobile_menu .menu_btn i {display: block; margin-bottom: 6px; width: 100%; height: 3px; background-color: #fff; border-radius: 3px}
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 .header_wrap .gnb {opacity: 0; margin: 0 auto; width: 61.6%}
header.active .header_wrap .gnb {opacity: 1;}
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%}

.sample_wrap .form_wrap ul li.samplebean {text-align:center;}
.sample_wrap .form_wrap ul li label{text-align:left;}
.sample_wrap .form_wrap .red {margin-right:1px;}
.sample_wrap .form_wrap .darich {margin-right:1px;}

.form_cssample .sub_header h2 {font-size:40px; letter-spacing:0;}
.form_cssample .sub_content h2 {padding-top:47px; padding-bottom:35px; font-size:0.75rem; letter-spacing: 0;}
.form_cssample .sub_content h2 .enter3 {display:block; width:100%;} 
.sample_wrap hgroup h4 {font-size:0.875rem;}
.sample_wrap .form_wrap dl {padding-top:0; padding-bottom:15px;}
.sample_wrap .form_wrap dl dd p {padding-bottom:56px; font-size:0.5rem; line-height:0.65rem;}

.sample_wrap > dl img {margin-right:17px; width:auto; max-width:42px; max-height:40px;}
.sample_wrap > dl:last-of-type {margin-left:0;}
.sample_wrap > dl dt, .sample_wrap dl dd {display:tabel-cell; vertical-align: middle;}
.sample_wrap > p {font-size:0.625rem; margin:0 23px 35px;}
.sample_wrap > p strong {font-size:0.687rem;}
.sample_wrap form {background-color:#fff;}
.sample_wrap form legend {font-size:1.093rem;}
.sample_wrap .form_wrap ul {margin-bottom:0px}
.sample_wrap .form_wrap ul li.left {margin-right:8%;}
.sample_wrap .form_wrap {box-shadow: none; border:none; background: none;}
.sample_wrap .form_wrap .delivery { padding:1.05rem 0.1rem; margin:0 15px;}
.sample_wrap .form_wrap dl dt p {padding-top:0.9rem; font-size:0.875rem;}
.sample_wrap .form_wrap .gold dd .goldmedal{width:40px; height:40px; background-size: 100%; margin-left:-20px; bottom:7px}
.sample_wrap .form_wrap dl dd button {width:90%; margin:0; padding-right:0; padding-left:0; }
.sample_wrap .form_wrap dl p .enter2 {display: none;}
.sample_wrap .form_wrap dl p .m_enter2 {display: block; width:100%;}

.m_hidden {display:none;}
    
.sample_wrap .goto_cs input {padding:15px 69px; margin-bottom:30px}

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

footer {margin-left:0;}
.company_addr a.mail {margin-left:32px;}

.sample_wrap .form_wrap .box_red, .sample_wrap .form_wrap .box_darich {margin-right:1px;}
}


@media (max-width:500px) {
html,body {font-size:17px;} 
.sample_wrap {padding:0;}
.sample_wrap form {padding:0 15px;}
.sub_wrap .sub_header {padding: 20% 0}
.sample_wrap .form_wrap ul {margin-left:10px; margin-right:10px;}
.sample_wrap .form_wrap .box_red, .sample_wrap .form_wrap .box_darich {margin-right:1px;}
}
@media (max-width:500px) {
 header .header_wrap .gnb ul li {font-size:13px;}   
}
@media (max-width:380px) {    
    .sample_wrap .form_wrap ul {margin:0;}
    .sample_wrap .form_wrap .delivery {margin:0;}    
}