* {
box-sizing: border-box;
}
:root {
--primary-color: #03401E;
--btn-color: #00A549;
--secondary-color: #1C1D1F;
--menu-color: #120500;
--menu-btn-color: #292D32;
--white: #fff;
--input-bg: #F1F1F1;
--black: #000;
--gray: #CACDD2;
--black02: #181818;
--black03: #444;
--font1: "Besley", serif;
--font2: "Roboto", sans-serif;
--font3: "Fira Sans", sans-serif;
--font4: "Sandi Sans", sans-serif;
--gradient1: rgba(0, 0, 0, 0.75);
--black-gray: #666;
--menu-hover: #DDC170;
--stock-color: #23BB0B;
}
@font-face {
font-family: "Besley", serif;
src: url(//sumonthazinpann.com/assets/fonts/Besley-Medium.ttf);
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Besley", serif;
src: url(//sumonthazinpann.com/assets/fonts/Besley-Regular.ttf);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Roboto", sans-serif;
src: url(//sumonthazinpann.com/assets/fonts/Roboto-Medium.ttf);
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Roboto", sans-serif;
src: url(//sumonthazinpann.com/assets/fonts/Roboto-Regular.ttf);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Fira Sans", sans-serif;
src: url(//sumonthazinpann.com/assets/fonts/FiraSans-Medium.ttf);
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Fira Sans", sans-serif;
src: url(//sumonthazinpann.com/assets/fonts/FiraSans-Regular.ttf);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Sandi Sans", sans-serif;
src: url(//sumonthazinpann.com/assets/fonts/SadiSans-Regular.ttf);
font-weight: 400;
font-style: normal;
}
ul,
li {
list-style-type: none;
}
a {
text-decoration: none;
color: var(--primary-color);
;
}
body {
font-size: 16px;
margin: 0 auto;
font-family: var(--font3);
font-weight: 500;
max-width: 1920px;
color: var(--primary-color);
line-height: 1.2;
letter-spacing: 1px;
position: relative;
}
.container {
margin: 0 auto;
width: 83.5%;
}
.pc {
display: block;
}
.sp {
display: none;
}
img {
max-width: 100%;
width: 100%;
margin: 0 auto;
vertical-align: middle;
}
.header-contact {
display: block;
position: sticky;
top: 0;
z-index: 111;
background-color: var(--white);
}
.header-contact .container {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font3);
font-weight: 400;
padding: 10px 0;
position: relative;
z-index: 10;
}
.header-contact .header-nav {
border-bottom: 1px solid #e5e5e5;
opacity: 1;
height: auto;
transition: opacity 0.3s ease, height 0.3s ease;
} .header-contact .contact-info {
display: flex;
align-items: center;
}
.header-contact .phno {
letter-spacing: -0.6px;
margin-right: 41px;
}
.header-contact .appointment {
display: flex;
cursor: pointer;
align-items: center;
letter-spacing: 0.3px;
}
.header-contact .appointment img {
margin-right: 10px;
width: 24px;
}
.header-contact .social-blk {
display: flex;
justify-content: space-between;
}
.header-contact .social-list {
display: flex;
}
.header-contact .social-list li img {
width: 24px;
}
.header-contact .social-list li a {
display: block;
margin-right: 19px;
}
.header-contact .social-list li:last-child a {
margin-right: 0;
}
.header-contact .custom-dropdown {
color: var(--secondary-color);
position: relative;
font-size: 18px;
font-family: var(--font4);
font-weight: 400;
cursor: pointer;
margin-left: 45px;
}
.header-contact .custom-dropdown .options {
position: absolute;
z-index: 1;
display: none;
top: 35px;
background-color: var(--white);
border-radius: 8px;
font-family: var(--font4);
font-size: 18px;
color: #000;
padding: 10px;
width: 90px;
right: 0;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.header-contact .custom-dropdown .selected {
display: flex;
align-items: center;
position: relative;
padding-right: 23px;
}
.header-contact .custom-dropdown .selected::after {
content: "";
position: absolute;
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_dropdown.svg) no-repeat center/cover;
width: 16px;
height: 16px;
top: 50%;
transform: translateY(-50%);
right: 6px;
}
.header-contact .custom-dropdown img,
.header-contact .custom-dropdown .options .option-value img {
margin-right: 1px;
width: 33px;
height: 24px;
}
.header-contact .custom-dropdown .options .option-value {
padding-bottom: 5px;
}
.header-contact .header-menu .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-contact .header-menu {
padding: 6px 0;
position: sticky;
top: 20px;
width: 100%;
left: 0;
right: 0;
border-bottom: 1px solid #e5e5e5;
}
.header-contact .header-menu .logo a {
display: block;
}
.header-contact .header-menu .logo img {
max-width: 250px;
}
.header-contact .nav {
display: flex;
width: 100%;
margin-left: 20px;
align-items: center;
}
.header-contact .nav-detail {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.header-contact .nav-list {
display: flex;
}
.header-contact .nav-list li {
margin-right: 20px;
}
.header-contact .nav-list li a {
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
color: var(--menu-color);
letter-spacing: -0.5px;
border-bottom: 1px solid transparent;
}
.header-contact .nav-list li a.active {
border-bottom: 1px solid var(--menu-color);
}
.header-contact .nav-list li a:hover {
border-bottom: 1px solid var(--btn-color); color: var(--btn-color);
}
.header-contact .shop-btn {
font-size: 16px;
}
.overlay {
width: 100%;
position: fixed;
opacity: 0;
z-index: 99;
background-color: var(--gradient1);
height: 100%;
display: none;
top: 0;
z-index: 1000;
left: 0;
}
.appointment-form,
.inquiry-form {
width: 666px;
position: fixed;
max-height: 690px;
height: 100%;
overflow-y: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--white);
border-radius: 4px;
padding: 24px;
display: none;
z-index: 1001;
}
.lightbox-container { position: fixed;
overflow-y: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--white);
border-radius: 4px;
padding: 24px;
display: none;
z-index: 1001;
}
#nf-field-13-wrap .nf-field-element,
#nf-field-26-container .nf-field-element,
#nf-field-4-wrap .nf-field-element {
width: auto !important;
margin-left: auto !important;
cursor: pointer;
}
#nf-field-20-wrap {
display: none;
}
.nf-response-msg p {
color: #333333;
font-family: var(--font-3);
}
#ninja_forms_required_items,
.nf-field-container {
margin-bottom: 0px !important;
}
.nf-form-content textarea.ninja-forms-field {
height: 75px !important;
}
.page-id-23 .nf-form-content textarea.ninja-forms-field {
height: 150px !important;
}
#nf-field-20-container {
margin-bottom: 0 !important;
}
.lightbox-container iframe {
height: 400px;
width: fit-content;
}
.appointment-form .form-ttl,
.inquiry-form .form-ttl {
font-size: 31px;
font-family: var(--font1);
color: var(--black);
font-weight: 500;
letter-spacing: 0.2px;
}
.appointment-form .appointment-ttl,
.inquiry-form .appointment-ttl {
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #D1D1D1;
padding-bottom: 24px;
}
.appointment-form .appointment-form-gp,
.inquiry-form .contact-form {
padding-top: 20px;
}
.appointment-form .appointment-ttl img,
.lightbox-container .close-btn img {
width: 36px;
}
.lightbox-container .close-btn {
text-align: right;
display: block;
cursor: pointer;
}
.close-btn {
cursor: pointer !important;
}
input[type="submit"] {
cursor: pointer;
}
.appointment-form .form-gp,
.contact-form .form-gp {
display: block;
padding: 17px 0;
}
.appointment-form .date-time {
display: flex;
justify-content: space-between;
padding: 17px 0 20px;
}
.appointment-form .date-time .form-input {
width: 48.5%;
position: relative;
}
.appointment-form .form-input {
width: 100%;
}
.appointment-form .form-input label,
.contact-form .form-input label,
.nf-form-content label {
display: block;
color: #333333 !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0.2px;
font-family: var(--font3) !important;
}
.nf-form-fields-required {
display: none !important;
}
#nf-field-3 {
height: 100px;
}
.nf-form-content .label-above .nf-field-label,
.nf-form-content .label-below .nf-field-label,
.nf-form-content .label-hidden .nf-field-label {
margin-bottom: 5px !important;
}
.appointment-form .form-input .input,
.contact-form .form-input .input,
.contact-form .form-input select,
.nf-form-content input:not([type=button]),
.nf-form-content input:not([type=button]):focus,
.nf-field-element textarea,
.nf-field-element .hour,
.nf-field-element .ampm,
.nf-field-element .minute {
padding: 12px 24px 13px !important;
background-color: var(--input-bg) !important;
border-radius: 4px !important;
font-family: var(--font3);
color: #333333 !important;
font-size: 16px;
font-weight: 400;
border: 1px solid transparent !important;
letter-spacing: -0.4px;
outline: none;
position: relative;
width: 100%;
resize: none;
}
.nf-error.field-wrap .nf-field-element:after {
top: 9px !important;
height: 49px !important;
}
.nf-pass.field-wrap .nf-field-element:after {
top: 55% !important;
transform: translateY(-50%);
}
.appointment-form .form-input .input::placeholder,
.contact-form .form-input select::placeholder,
.nf-form-content input:not([type=button])::placeholder,
.nf-field-element textarea::placeholder {
font-family: var(--font3);
color: var(--black-gray);
font-size: 16px;
vertical-align: middle;
letter-spacing: 0.2px;
}
.nf-error.field-wrap .nf-field-element:after {
display: none;
}
.nf-form-content input.ninja-forms-field {
height: unset !important;
}
.appointment-form .date {
display: block;
position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_calendar.svg) no-repeat center/cover;
color: rgba(0, 0, 0, 0);
opacity: 1;
width: 20px;
height: 20px;
}
.appointment-form .contact label,
.contact-form .contact label {
font-size: 14px;
}
.appointment-form .contact .form-input,
.contact-form .form-input {
margin-bottom: 20px;
}
.btn-gp {
text-align: right;
}
.btn {
padding: 12px 24px;
background-color: var(--btn-color);
font-size: 18px;
border-radius: 4px;
display: inline-block;
color: var(--white);
letter-spacing: 0.3px;
font-family: var(--font3);
cursor: pointer;
border: none;
}
.nf-form-content input[type=submit] {
padding: 12px 24px !important;
background-color: var(--btn-color) !important;
font-size: 18px !important;
border-radius: 4px !important;
display: inline-block !important;
color: var(--white) !important;
letter-spacing: 0.3px !important;
font-family: var(--font3) !important;
}
.common-ttl {
font-size: 31px;
font-weight: 500;
font-family: var(--font1);
text-align: center;
color: var(--black);
letter-spacing: 0.5px;
}
.explore-sec {
margin: 84px 0 58px;
}
.diamond-list {
display: flex;
padding: 59px 0 14px;
flex-wrap: wrap;
}
.diamond-list li {
margin-right: 18px;
margin-bottom: 44px;
width: 23.8%;
border-radius: 4px;
border: 1px solid #CACDD2;
}
.diamond-list li:nth-child(4n+0) {
margin-right: 0;
}
.diamond-list li .img-blk {
position: relative;
}  .diamond-list li .selected-blk .shape {
background-color: var(--white);
border-radius: 4px;
padding: 6px;
cursor: pointer;
}
.diamond-list li .selected-blk .shape.selected {
background-color: var(--btn-color);
}
.diamond-list li .selected-blk .shape.selected img {
filter: invert(1) brightness(2);
}
.diamond-list li .selected-blk {
position: absolute;
display: flex;
width: 88%;
margin: 0 auto;
top: 16px;
left: 0;
right: 0;
justify-content: space-between;
align-items: flex-start;
}
.diamond-list li .selected-blk .status {
font-size: 13px;
font-family: var(--font3);
font-weight: 400;
color: var(--white);
padding: 2px 5px;
letter-spacing: 0.2px;
border-radius: 4px;
}
.diamond-list li .selected-blk .stock {
background-color: var(--stock-color);
}
.diamond-list li .selected-blk .order {
background-color: var(--menu-hover);
}
.diamond-list li .discount {
position: absolute;
width: 100%;
background-color: var(--btn-color);
font-size: 16px;
font-weight: 500;
font-family: var(--font1);
text-align: center;
padding: 5px 0;
color: var(--white);
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.diamond-list li .diamond-price {
display: flex;
padding: 13px 11px;
color: var(--secondary-color);
}
.diamond-list li .carat {
font-size: 18px;
font-weight: 500;
font-family: var(--font3);
letter-spacing: -0.5px;
width: 63%;
}
.diamond-list li .id {
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
letter-spacing: -0.8px;
}
.diamond-list li .quality {
display: flex;
color: var(--secondary-color);
align-items: center;
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
border-top: 1px solid #CACDD2;
border-bottom: 1px solid #CACDD2;
}
.diamond-list li .quality-list {
padding: 10px 8px 10px 7px;
letter-spacing: 0.2px;
border-right: 1px solid #CACDD2;
}
.diamond-list li .color {
padding: 10px 24px;
}
.diamond-list li .quality-list:last-child {
border-right: 0;
}
.diamond-list li .certificate {
display: flex;
font-size: 16px;
color: var(--secondary-color);
font-family: var(--font-3);
font-weight: 400;
background-color: #F7F8FA;
}
.diamond-list li .price {
width: 60%;
border-right: 1px solid #CACDD2;
}
.diamond-list li .certified {
width: 40%;
}
.diamond-list li .certificate-list {
padding: 14px 0;
letter-spacing: -0.2px;
text-align: center;
}
.diamon-btn {
text-align: center;
}
.diamon-btn .btn {
padding: 15px 24px;
color: var(--btn-color);
background-color: transparent;
border: 1px solid var(--btn-color);
border-radius: 4px;
}
.sec-customer {
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/img_feedback.png) no-repeat center/cover;
}
.sec-customer .container {
display: flex;
justify-content: space-between;
padding: 93px 0 0;
width: 84.5%;
max-height: 575px;
}
.sec-customer .text-blk {
width: 39%;
color: var(--white);
padding: 18px 0;
}
.sec-customer .text-blk .feedback-ttl {
font-size: 39px;
font-weight: 500;
letter-spacing: 0.5px;
font-family: var(--font1);
}
.sec-customer .text-blk .feedback-txt {
font-size: 18px;
font-weight: 400;
font-family: var(--font3);
padding: 23px 0;
line-height: 1.4;
letter-spacing: 0.1px;
}
.sec-customer .feedback-list-content {
width: 57.5%;
overflow-y: scroll;
max-height: 400px;
}
.sec-customer .feedback-list-content::-webkit-scrollbar {
width: 2px;
border-radius: 3px;
}
.sec-customer .feedback-list-content::-webkit-scrollbar-track {
background: transparent;
}
.sec-customer .feedback-list-content::-webkit-scrollbar-thumb {
background: #888;
} .sec-customer .feedback-list-content::-webkit-scrollbar-thumb:hover {
background: #555;
}
.sec-customer .feedback-list {
column-count: 2;
}
.sec-customer .feedback-list li {
background-color: var(--white);
padding: 28px 24px 17px;
width: 98%;
margin-right: 18px;
box-sizing: border-box;
margin-bottom: 18px;
}
.sec-customer .feedback-list li:nth-child(2n+0) {
margin-right: 0;
}
.sec-customer .feedback-list .feedback-ttl {
font-size: 20px;
font-weight: 500;
font-family: var(--font1);
color: var(--black02);
letter-spacing: 0.2px;
line-height: 1;
}
.sec-customer .feedback-list .feedback-ttl span {
font-weight: 400;
font-size: 12px;
font-family: var(--font2);
letter-spacing: 0.2px;
}
.sec-customer .feedback-list .txt-detail {
font-size: 16px;
font-weight: 400;
font-family: var(--font2);
letter-spacing: 0px;
padding: 14px 0;
line-height: 1.7;
}
.sec-empire {
padding: 93px 0 17px;
background-color: #F7F8FA;
}
.com-sub-ttl {
display: block;
text-align: center;
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
width: 59.5%;
padding: 20px 0;
margin: 0 auto;
line-height: 1.5;
letter-spacing: 0.2px;
}
.sec-empire .empire-list {
display: flex;
padding: 41px 0;
}
.sec-empire .empire-list li {
display: flex;
width: 24%;
flex-wrap: wrap;
margin-right: 17px;
gap: 20px;
}
.sec-empire .empire-list li:nth-child(4n+0) {
margin-right: 0;
}
.sec-empire .empire-list li .txt-blk {
padding: 25px 27px;
flex-grow: 1;
height: 330px;
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.sec-empire .empire-list li .txt-blk p {
padding: 16px 0;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.2px;
color: var(--black);
line-height: 1.5;
font-family: var(--font3);
}
.sec-empire .content-ttl {
font-size: 25px;
font-weight: 500;
font-family: var(--font1);
letter-spacing: 0.2px;
}
.sec-empire .empire-list li:nth-child(2n+0) {
flex-direction: column-reverse;
}
.sec-empire .empire-list li .img-blk img {
max-width: 100%;
object-fit: cover;
height: 330px;
}
.sec-faq {
margin-top: 72px;
}
.faq-list {
padding: 13px 101px;
}
.faq-list li {
border-bottom: 1px solid #BDC0CD;
padding: 30px 0 26px;
}
.faq-ttl {
position: relative;
font-size: 22px;
font-weight: 500;
font-family: var(--font1);
cursor: pointer;
}
.faq-ttl::after,
.faq-ttl::before {
content: "";
position: absolute;
background-color: var(--black);
}
.faq-ttl::before {
top: 0;
right: 12px;
width: 3px;
height: 77%;
}
.faq-ttl::after {
top: 37%;
right: 4px;
width: 2%;
height: 3px;
}
.faq-ttl.active::before {
background-color: transparent;
}
.faq-tab {
display: none;
padding: 12px 0 0;
width: 95%;
line-height: 1.5;
letter-spacing: 0.2px;
font-size: 18px;
font-family: var(--font3);
font-weight: 400;
color: var(--black03);
} .course-table {
overflow-x: auto;
padding: 5px;
scrollbar-width: none;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 0 1px #ddd;
margin: 20px 0;
}
thead {
background-color: var(--white);
}
th {
text-align: left;
padding: 12px;
font-weight: 600;
font-size: 14px;
color: var(--black);
border-bottom: 1px solid #e5e7eb;
}
td {
text-align: left;
padding: 10px 12px;
font-size: 14px;
color: #4b5563;
border-bottom: 1px solid #e5e7eb;
}
tbody tr:nth-child(odd) {
background-color: #F6F6F6;
} #post-3 {
padding: 50px 200px;
}
#post-3 .textwidget h2 {
font-size: 30px;
padding-top: 20px;
}
#post-3 .textwidget h3 {
font-size: 26px;
padding-top: 20px;
}
#post-3 .textwidget p {
font-size: 18px;
padding-left: 20px;
padding-top: 20px;
}
.footer {
margin-top: 57px;
background-color: var(--primary-color);
}
.footer .container {
padding: 63px 0;
width: 84.5%;
}
.footer .contact-banner {
display: flex;
justify-content: space-between;
padding-bottom: 98px;
border-bottom: 2px solid #fff;
}
.footer .logo {
width: 36%;
}
.footer .logo img {
max-width: 392px;
width: 100%;
}
.footer .contact-list {
display: flex;
color: var(--white);
width: 54%;
}
.footer .contact-detail {
color: var(--white);
columns: 2;
width: 100%;
padding: 4px 0;
}
.footer .contact-detail li {
margin-bottom: 14px;
}
.footer .contact-detail li a {
color: var(--white);
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
letter-spacing: 0.2px;
}
.footer .contact-detail li a:hover {
text-decoration: underline;
color: var(--btn-color);
}
.footer .contact-us {
width: 100%;
padding: 5px 0;
}
.footer .contact-ttl {
font-size: 25px;
font-family: var(--font1);
font-weight: 500;
padding-left: 37px;
letter-spacing: 0px;
}
.footer .contact-us a {
color: var(--white);
padding: 13px 0 0px 37px;
letter-spacing: -0.1px;
font-size: 16px;
font-family: var(--font3);
display: block;
}
.footer .copyright-blk {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 0;
}
.footer .copyright-blk p {
font-size: 12px;
font-weight: 400;
font-family: var(--font2);
color: var(--white);
letter-spacing: -0.1px;
}
.footer .social-list {
display: flex;
}
.footer .social-list li {
margin-right: 15px;
}
.footer .social-list li a {
display: block;
}
.footer .social-list li a img {
max-width: 36px;
width: 100%;
}
.footer .social-list li:last-child {
margin-right: 0;
}
.light-box {
background-color: var(--primary-color);
padding: 15px 0;
position: fixed;
bottom: 0;
width: 100%;
font-weight: 400;
color: var(--white);
font-family: var(--font-3);
display: none;
font-size: 18px;
}
.light-box .btn-gp {
display: flex;
}
.light-box .btn-gp a {
border: 1px solid var(--white);
border-radius: 4px;
color: var(--white);
padding: 10px 15px;
font-family: var(--font-3);
}
.light-box .btn-gp a+a {
margin-left: 20px;
}
.light-box .container {
padding: 0;
width: 83.5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.light-box .btn-gp a.compare-btn {
background-color: var(--white);
color: var(--primary-color)
}
.pages {
margin-top: 86px;
margin-bottom: 185px;
}
.sub-ttl {
font-size: 25px;
font-weight: 500;
font-family: var(--font1);
}
.page-ttl {
font-size: 49px;
letter-spacing: 0.5px;
text-align: center;
font-weight: 500;
font-family: var(--font1);
color: var(--black);
}
.article-list {
display: flex;
flex-wrap: wrap;
margin-top: 74px;
}
.article-list li {
width: 32.3%;
border-radius: 4px;
margin-right: 17px;
margin-bottom: 60px;
}
.article-list li:nth-child(3n+0) {
margin-right: 0;
}
.article-list li a {
display: block;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}
.article-list li a:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.article-list li .img-blk {
overflow: hidden;
}
.article-list li .img-blk img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 387px;
object-fit: cover;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.article-list li a:hover .img-blk img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.article-list li .txt-blk {
padding: 20px;
background-color: #F7F8FA;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.article-list li .txt-blk h3 {
font-size: 25px;
font-weight: 500;
font-family: var(--font1);
letter-spacing: 0.5px;
color: var(--black);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-list li .txt-blk .article-date {
font-size: 18px;
font-weight: 400;
padding: 14px 0;
display: block;
font-family: var(--font3);
color: var(--primary-color);
letter-spacing: -0.3px
}
.article-list li .txt-blk p {
font-size: 18px;
line-height: 1.5;
letter-spacing: 0.2px;
font-weight: 400;
font-family: var(--font3);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #27282C;
margin-bottom: 12px;
}
.article-list li .txt-blk .btn {
width: 100%;
}
.recommended-page {
background-color: #EAEBED;
padding: 64px 0 5px;
}
.recommended-page .recommended-ttl {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--black);
}
.recommended-page .recommended-ttl .sub-ttl {
letter-spacing: 3.4px;
}
.recommended-page .article-list {
margin-top: 21px;
}
.see-all {
color: #120500;
}
.see-all:hover {
text-decoration: underline;
color: var(--primary-color);
}
.search-ttl-gp {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #BDC0CD;
padding-bottom: 20px;
}
.search-ttl {
font-size: 28px;
font-weight: 500;
font-family: var(--font1);
color: var(--black);
letter-spacing: 0.5px;
}
.search-ttl span {
font-size: 20px;
font-family: var(--font3);
font-weight: 400;
padding-left: 10px;
letter-spacing: 0px
}
.search-ttl span.searchNo {
padding-left: 0;
}
.drop-down {
position: relative;
}
.drop-down .selected a {
display: block;
border: 1px solid var(--primary-color);
font-size: 16px;
color: var(--primary-color);
font-family: var(--font3);
letter-spacing: 0.2px;
position: relative;
border-radius: 4px;
padding: 7px 49px 7px 18px;
}
.drop-down .selected a::after {
position: absolute;
content: "";
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_down.png) no-repeat center/cover;
top: 50%;
width: 21px;
height: 20px;
right: 20px;
transform: translateY(-50%);
}
.drop-down .options {
position: absolute;
background-color: var(--white);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
width: 175px;
left: 0;
top: 48px;
border-radius: 4px;
display: none;
padding: 0px 12px 20px 12px;
z-index: 99;
}
.drop-down .options li a {
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
margin-bottom: 8px;
color: var(--primary-color);
display: block;
}
.drop-down .options li a.option-detail {
font-size: 13px;
margin-bottom: 20px;
margin-top: 20px;
color: #474C52;
}
.cmn-pagination,
.pagination-container {
display: flex;
justify-content: center;
align-items: center; }
.cmn-pagination .cmn-pager-num+.cmn-pager-num {
margin-left: 6px;
}
.cmn-pagination li a:hover,
.cmn-pagination li a.active,
.paginationjs .paginationjs-pages li.active>a {
border: 1px solid var(--primary-color);
color: var(--primary-color);
background: none;
border-radius: 4px;
}
.cmn-pagination .cmn-pager-num a:active {
background-color: #919EAB;
color: #fff;
}
.cmn-pagination li {
width: 33px;
}
.cmn-pagination li a {
display: flex;
justify-content: center;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
font-family: var(--font3);
color: #212B36;
border: 1px solid #DFE3E8;
border-radius: 4px;
padding: 6.3px 0;
}
.paginationjs .paginationjs-pages li>a {
border: none;
font-size: 14px;
font-weight: 500;
font-family: var(--font3);
color: #212B36;
cursor: pointer;
background: none;
}
.paginationjs .paginationjs-pages li {
margin: 0 5px;
border-right: 1px solid #DFE3E8;
border: 1px solid #DFE3E8;
border-radius: 4px;
}
.paginationjs .paginationjs-prev.disabled,
.paginationjs .paginationjs-next.disabled {
background-color: #919EAB;
color: #fff;
}
.paginationjs .paginationjs-prev.disabled a,
.paginationjs .paginationjs-next.disabled a {
color: #fff;
}
.cmn-pagination .cmn-pager a {
padding: 9.3px 0;
border: 1px solid #DFE3E8;
background-color: #fff;
}
.cmn-pagination .cmn-pager-first a {
background-color: #919EAB;
}
.cmn-pagination .cmn-pager-first {
width: 35px;
margin-right: 6px;
}
.cmn-pagination .cmn-pager-last {
margin-left: 6px;
width: 35px;
}
.cmn-pagination .cmn-pager-first a img,
.cmn-pagination .cmn-pager-last a img {
width: 9px;
}
.cmn-pagination .cmn-pager-prev {
margin-right: 20px;
}
.cmn-pagination .cmn-pager-next {
margin-left: 20px;
}
@media only screen and (min-width:1281px) and (max-width:1384px) {
.container {
width: 90%;
}
}
@media only screen and (min-width:768px) and (max-width:1280px) {
.container {
width: 90%;
}
.header-contact .container {
padding: 0.781vw 0;
}
.header-contact .phno {
letter-spacing: -0.047vw;
margin-right: 3.203vw;
}
.header-contact .appointment {
letter-spacing: 0.023vw;
}
.header-contact .appointment img {
margin-right: 0.781vw;
}
.header-contact .social-list li img {
width: 1.875vw;
}
.header-contact .social-list li a {
margin-right: 1.484vw;
}
.header-contact .custom-dropdown {
font-size: 1.406vw;
margin-left: 3.516vw;
}
.header-contact .custom-dropdown .options {
top: 2.734vw;
border-radius: 0.625vw;
font-size: 1.406vw;
padding: 0.781vw;
width: 7.031vw;
}
.header-contact .custom-dropdown .selected {
padding-right: 1.797vw;
}
.header-contact .custom-dropdown .selected::after {
width: 1.25vw;
height: 1.25vw;
right: 0.469vw;
}
.header-contact .custom-dropdown img,
.header-contact .custom-dropdown .options .option-value img {
margin-right: 0.078vw;
width: 2.578vw;
height: 1.875vw;
}
.header-contact .custom-dropdown .options .option-value {
padding-bottom: 0.391vw;
}
.header-contact .header-menu {
padding: 0.469vw 0;
top: 1.563vw;
width: 100%;
border-bottom: 0.078vw solid #EAEBED;
}
.header-contact .header-menu .logo img {
max-width: 22.781vw;
}
.header-contact .nav {
width: 87.2%;
}
.header-contact .nav-list li {
margin-right: 1.094vw;
}
.header-contact .nav-list li a {
font-size: 1.25vw;
font-weight: 400;
letter-spacing: -0.039vw;
}
.header-contact .shop-btn {
font-size: 1.25vw;
}
.appointment-form,
.inquiry-form {
width: 90%;
border-radius: 0.313vw;
padding: 1.875vw;
}
.appointment-form .form-ttl,
.inquiry-form .form-ttl {
font-size: 2.422vw;
letter-spacing: 0.016vw;
}
.appointment-form .appointment-ttl,
.inquiry-form .appointment-ttl {
letter-spacing: 0.039vw;
padding-bottom: 1.875vw;
}
.appointment-form .appointment-form-gp {
padding-top: 1.563vw;
}
.appointment-form .appointment-ttl img,
.inquiry-form .appointment-ttl img,
.appointment-form .appointment-ttl img,
.lightbox-container .close-btn img {
width: 2.813vw;
}
.appointment-form .form-gp {
padding: 1.328vw 0;
}
.appointment-form .date-time {
padding: 1.328vw 0 1.563vw;
}
.appointment-form .form-input label,
.contact-form .form-input label {
font-size: 1.016vw;
letter-spacing: 0.016vw;
padding-bottom: 0.625vw;
}
.appointment-form .form-input .input,
.contact-form .form-input .input,
.contact-form .form-input select,
.nf-form-content input:not([type=button]),
.nf-form-content input:not([type=button]):focus,
.nf-field-element textarea,
.nf-field-element .hour,
.nf-field-element .ampm,
.nf-field-element .minute {
padding: 1.25vw 1.875vw 1.172vw !important;
border-radius: 0.313vw !important;
font-size: 1.25vw;
letter-spacing: -0.031vw;
}
.nf-field-element>div {
width: 33%;
}
.appointment-form .form-input .input::placeholder,
.contact-form .form-input select::placeholder,
.nf-form-content input:not([type=button])::placeholder,
.nf-field-element textarea::placeholder {
font-size: 1.25vw;
letter-spacing: 0.016vw;
}
input[type="date"]::-webkit-calendar-picker-indicator {
width: 1.563vw;
height: 1.563vw;
}
.appointment-form .contact label,
.contact-form label {
font-size: 1.094vw;
}
.appointment-form .contact .form-input,
.contact-form .form-input {
margin-bottom: 1.563vw;
}
.btn {
padding: 0.938vw 1.875vw;
font-size: 1.406vw;
border-radius: 0.313vw;
letter-spacing: 0.023vw;
}
.nf-form-content input[type=submit] {
padding: 0.938vw 1.875vw !important;
font-size: 1.406vw !important;
border-radius: 0.313vw !important;
letter-spacing: 0.023vw !important;
}
.common-ttl {
font-size: 2.422vw;
letter-spacing: 0.039vw;
}
.explore-sec {
margin: 6.563vw 0;
}
.diamond-list {
padding: 4.609vw 0 1.094vw;
}
.diamond-list li {
margin-right: 1.406vw;
margin-bottom: 3.438vw;
border-radius: 0.313vw;
}
.diamond-list li .selected-blk .shape {
border-radius: 0.313vw;
padding: 0.469vw;
}
.diamond-list li .selected-blk {
top: 1.25vw;
}
.diamond-list li .selected-blk .status {
font-size: 1.016vw;
padding: 0.156vw 0.391vw;
letter-spacing: 0.016vw;
border-radius: 0.313vw;
}
.diamond-list li .selected-blk .order {
background-color: var(--menu-hover);
}
.diamond-list li .discount {
font-size: 1.25vw;
padding: 0.391vw 0;
}
.diamond-list li .diamond-price {
padding: 1.016vw 0.859vw;
}
.diamond-list li .carat {
font-size: 1.406vw;
width: 61%;
letter-spacing: -0.039vw;
}
.diamond-list li .id {
font-size: 1.25vw;
letter-spacing: -0.063vw;
}
.diamond-list li .quality {
font-size: 1.25vw;
}
.diamond-list li .quality-list {
padding: 0.781vw 0.625vw 0.781vw 0.547vw;
letter-spacing: 0.016vw;
}
.diamond-list li .color {
padding: 0.781vw 1.875vw;
}
.diamond-list li .certificate {
font-size: 1.25vw;
}
.diamond-list li .certificate-list {
padding: 1.094vw 0;
letter-spacing: -0.016vw;
}
.diamon-btn .btn {
padding: 1.172vw 1.875vw;
}
.sec-customer .container {
padding: 7.266vw 0 0;
max-height: 44.922vw;
}
.sec-customer .text-blk {
width: 39%;
padding: 1.406vw 0;
}
.sec-customer .text-blk .feedback-ttl {
font-size: 3.047vw;
letter-spacing: 0.039vw;
}
.sec-customer .text-blk .feedback-txt {
font-size: 1.406vw;
padding: 1.797vw 0;
letter-spacing: 0.008vw;
}
.sec-customer .feedback-list-content {
max-height: 31.25vw;
}
.sec-customer .feedback-list li {
padding: 2.188vw 1.875vw 1.328vw;
margin-right: 1.406vw;
margin-bottom: 1.406vw;
}
.sec-customer .feedback-list .feedback-ttl {
font-size: 1.563vw;
letter-spacing: 0vw;
}
.sec-customer .feedback-list .feedback-ttl span {
font-size: 0.938vw;
letter-spacing: 0.016vw;
}
.sec-customer .feedback-list .txt-detail {
font-size: 1.25vw;
padding: 1.094vw 0;
}
.sec-empire {
padding: 7.266vw 0 1.328vw;
}
.com-sub-ttl {
font-size: 1.25vw;
padding: 1.563vw 0;
letter-spacing: 0.016vw;
}
.sec-empire .empire-list {
padding: 3.203vw 0;
}
.sec-empire .empire-list li {
width: 24%;
margin-right: 1.328vw;
gap: 1.563vw;
}
.sec-empire .empire-list li:nth-child(4n+0) {
margin-right: 0;
}
.sec-empire .empire-list li .txt-blk {
padding: 1.953vw 2.109vw;
height: 25.781vw;
}
.sec-empire .empire-list li .txt-blk p {
padding: 1.25vw 0;
font-size: 1.25vw;
letter-spacing: 0.016vw;
}
.sec-empire .content-ttl {
font-size: 1.953vw;
}
.sec-empire .empire-list li .img-blk img {
max-width: 22.266vw;
height: 25.781vw;
}
.sec-faq {
margin-top: 5.625vw;
}
.faq-list {
padding: 1.016vw 7.891vw;
}
.faq-list li {
padding: 2.344vw 0 2.031vw;
}
.faq-ttl {
font-size: 1.719vw;
}
.faq-ttl::before {
right: 0.938vw;
width: 0.234vw;
}
.faq-ttl::after {
right: 0.313vw;
height: 0.234vw;
}
.faq-tab {
padding: 0.938vw 0 0;
letter-spacing: 0.016vw;
font-size: 1.406vw;
} #post-3 {
padding: 3.906vw 15.625vw;
}
#post-3 .textwidget h2 {
font-size: 2.344vw;
padding-top: 1.563vw;
}
#post-3 .textwidget h3 {
font-size: 2.031vw;
padding-top: 1.563vw;
}
#post-3 .textwidget p {
font-size: 1.406vw;
padding-left: 1.563vw;
padding-top: 1.563vw;
}
.footer {
margin-top: 4.453vw;
}
.footer .container {
padding: 4.922vw 0;
}
.footer .contact-banner {
padding-bottom: 7.656vw;
} .footer .logo img {
max-width: 35vw;
}
.footer .contact-list {
width: 54%;
}
.footer .contact-detail {
padding: 0.313vw 0;
}
.footer .contact-detail li {
margin-bottom: 1.094vw;
}
.footer .contact-detail li a {
font-size: 1.25vw;
letter-spacing: 0.016vw;
}
.footer .contact-us {
padding: 0.391vw 0;
}
.footer .contact-ttl {
font-size: 1.953vw;
padding-left: 2.891vw;
}
.footer .contact-us a {
padding: 1.016vw 0 0vw 2.891vw;
letter-spacing: -0.008vw;
font-size: 1.25vw;
}
.footer .copyright-blk {
padding: 1.016vw 0;
}
.footer .copyright-blk p {
font-size: 0.938vw;
letter-spacing: -0.008vw;
}
.footer .social-list li {
margin-right: 1.172vw;
}
.footer .social-list li a img {
max-width: 2.813vw;
}
.light-box {
padding: 1.172vw 0;
font-size: 1.406vw;
}
.light-box .btn-gp a {
border-radius: 0.313vw;
padding: 0.781vw 1.172vw;
}
.light-box .btn-gp a+a {
margin-left: 1.563vw;
}
.light-box .container {
padding: 0;
width: 83.5%;
}
.pages {
margin-top: 6.719vw;
margin-bottom: 14.453vw;
}
.sub-ttl {
font-size: 1.953vw;
}
.page-ttl {
font-size: 3.828vw;
letter-spacing: 0.039vw;
}
.article-list {
margin-top: 5.781vw;
}
.article-list li {
border-radius: 0.313vw;
margin-right: 1.328vw;
margin-bottom: 4.688vw;
}
.article-list li a {
display: block;
box-shadow: rgba(0, 0, 0, 0.1) 0vw 0.391vw 1.172vw;
}
.article-list li a:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0vw 0.391vw 1.172vw;
}
.article-list li .img-blk img {
height: 30.234vw;
}
.article-list li .txt-blk {
padding: 1.563vw;
}
.article-list li .txt-blk h3 {
font-size: 1.953vw;
letter-spacing: 0.039vw;
letter-spacing: 0.234vw;
}
.article-list li .txt-blk .article-date {
font-size: 1.406vw;
padding: 1.094vw 0;
letter-spacing: -0.023vw;
}
.article-list li .txt-blk p {
font-size: 1.406vw;
letter-spacing: 0.016vw;
margin-bottom: 0.938vw;
}
.recommended-page {
padding: 5vw 0 0.391vw;
}
.recommended-page .recommended-ttl .sub-ttl {
letter-spacing: 0.266vw;
}
.recommended-page .article-list {
margin-top: 1.641vw;
}
.search-ttl-gp {
padding-bottom: 1.563vw;
}
.search-ttl {
font-size: 2.188vw;
letter-spacing: 0.039vw;
}
.search-ttl span {
font-size: 1.563vw;
padding-left: 0.781vw;
}
.drop-down .selected a {
font-size: 1.25vw;
border-radius: 0.313vw;
padding: 0.547vw 3.828vw 0.547vw 1.406vw;
}
.drop-down .selected a::after {
width: 1.641vw;
height: 1.563vw;
right: 1.563vw;
}
.drop-down .options {
width: 13.672vw;
top: 3.75vw;
border-radius: 0.313vw;
padding: 0vw 0.938vw 1.563vw 0.938vw;
z-index: 99;
}
.drop-down .options li a {
font-size: 1.25vw;
margin-bottom: 0.625vw;
}
.drop-down .options li a.option-detail {
font-size: 1.016vw;
margin-bottom: 1.563vw;
margin-top: 1.563vw;
}
.cmn-pagination .cmn-pager-num+.cmn-pager-num {
margin-left: 0.469vw;
}
.cmn-pagination li {
width: 2.578vw;
}
.cmn-pagination li a {
border-radius: 0.313vw;
font-size: 1.094vw;
border-radius: 0.313vw;
padding: 0.492vw 0;
}
.cmn-pagination .cmn-pager a {
padding: 0.727vw 0;
border: 0.078vw solid #DFE3E8;
background-color: #fff;
}
.cmn-pagination .cmn-pager-first a {
background-color: #919EAB;
}
.cmn-pagination .cmn-pager-first {
width: 2.734vw;
margin-right: 0.469vw;
}
.cmn-pagination .cmn-pager-last {
margin-left: 0.469vw;
width: 2.734vw;
}
.cmn-pagination .cmn-pager-first a img,
.cmn-pagination .cmn-pager-last a img {
width: 0.703vw;
}
.cmn-pagination .cmn-pager-prev {
margin-right: 1.563vw;
}
.cmn-pagination .cmn-pager-next {
margin-left: 1.563vw;
}
.lightbox-container { padding: 1.875vw;
}
.field-wrap .date-wrap {
width: 50% !important;
}
}
@media all and (max-width:767.9px) {
.pc {
display: none;
}
.sp {
display: block;
}
.container {
width: 91%;
}
.header-contact .container {
padding: 1.333vw 0;
}
.menu {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
width: 6.133vw;
height: 6.133vw;
background-color: var(--white);
}
.menu span {
display: inline-block;
transition: all .4s;
position: absolute;
left: 0.8vw;
height: 0.533vw;
border-radius: 0.533vw;
background: var(--menu-btn-color);
width: 76%;
border: 0.267vw solid transparent;
}
.menu span:nth-of-type(1) {
top: 1.6vw;
}
.menu span:nth-of-type(2) {
top: 2.933vw;
}
.menu span:nth-of-type(3) {
top: 4.533vw;
}
.menu.active {
border: 0.267vw solid var(--menu-btn-color);
border-radius: 50%;
right: -0.267vw;
}
.menu.active span:nth-of-type(1) {
top: 1.067vw;
left: 1.333vw;
transform: translateY(1.6vw) rotate(-45deg);
width: 53%;
}
.menu.active span:nth-of-type(2) {
opacity: 0;
}
.menu.active span:nth-of-type(3) {
top: 4.267vw;
left: 1.333vw;
transform: translateY(-1.6vw) rotate(45deg);
width: 53%;
}
.header-contact .header-nav {
border-bottom: 0.267vw solid transparent;
width: 100%;
margin: 12vw 0;
}
.header-contact .contact-info {
display: block;
}
.header-contact .phno {
letter-spacing: -0.16vw;
margin-right: 0;
display: block;
text-align: center;
padding: 2.667vw 0;
border: 0.267vw solid #501602;
border-radius: 1.067vw;
}
.header-contact .appointment {
display: block;
padding: 2.133vw 0;
border: 0.267vw solid #501602;
letter-spacing: 0.08vw;
margin-top: 4vw;
text-align: center;
}
.header-contact .appointment img {
margin: 0 auto;
}
.header-contact .social-blk {
margin-top: 12.8vw;
}
.header-contact .social-list {
display: flex;
}
.header-contact .social-list li img {
width: 8.533vw;
}
.header-contact .social-list li a {
display: block;
margin-right: 5.067vw;
}
.header-contact .social-list li:last-child a {
margin-right: 0;
}
.header-contact .custom-dropdown {
color: var(--secondary-color);
position: relative;
font-size: 4.267vw;
font-family: var(--font4);
font-weight: 400;
cursor: pointer;
margin-left: 0;
display: flex;
justify-content: space-between;
}
.header-contact .custom-dropdown .selected {
display: flex;
align-items: center;
position: relative;
padding-right: 0;
}
.header-contact .custom-dropdown .selected:first-child {
padding-right: 4.533vw;
margin: 0vw 1.867vw;
border-right: 0.267vw solid #000;
}
.header-contact .custom-dropdown .selected::after {
background: unset;
width: 0;
}
.header-contact .custom-dropdown img {
margin-right: 0.267vw;
width: 8vw;
height: 5.867vw;
}
.header-contact .custom-dropdown .options .option-value {
padding-bottom: 1.333vw;
}
.header-contact .header-menu .container {
display: block;
}
.header-contact .header-menu {
padding: 1.6vw 0;
position: sticky;
top: 5.333vw;
z-index: 99;
width: 100%;
left: 0;
right: 0;
border-bottom: 0.267vw solid #EAEBED;
}
.header-contact .header-menu .logo {
position: relative;
}
.header-contact .header-menu .logo a {
display: block;
}
.header-contact .header-menu .logo img {
max-width: 52.8vw;
}
.header-contact .nav {
display: flex;
width: 100%;
justify-content: space-between;
margin-left: 0;
align-items: center;
display: none;
opacity: 0;
position: fixed;
height: 100vh;
overflow-y: scroll;
left: 0;
right: 0;
top: 19.733vw;
padding: 19.999px 4.267vw 80vw;
background-color: var(--white);
}
.header-contact .nav.visible {
opacity: 1;
display: flex;
flex-direction: column;
}
.header-contact .nav-detail {
flex-direction: column-reverse;
width: 100%;
}
.header-contact .nav-list {
display: block;
width: 100%;
margin-top: 1.867vw;
}
.header-contact .nav-list li {
margin-right: 0;
padding: 5.6vw 0 4.533vw;
border-bottom: 0.267vw solid #EAEBED;
}
.header-contact .nav-list li a {
font-size: 4.267vw;
letter-spacing: 0vw;
}
.header-contact .shop-btn {
font-size: 4.267vw;
width: 100%;
text-align: center;
}
.appointment-form,
.inquiry-form {
width: 100%;
border-radius: 1.067vw;
padding: 6.4vw;
height: 100vh;
}
.appointment-form .form-ttl {
font-size: 5.333vw;
letter-spacing: 0.053vw;
}
.appointment-form .appointment-ttl,
.inquiry-form .appointment-ttl {
letter-spacing: 0.053vw;
padding-bottom: 4vw;
}
.appointment-form .appointment-form-gp,
.inquiry-form .appointment-form-gp {
padding-top: 5.333vw;
}
.appointment-form .appointment-ttl img,
.appointment-form .appointment-ttl img,
.lightbox-container .close-btn img {
width: 9.6vw;
}
.appointment-form .form-gp,
.contact-form .form-gp,
.inquiry-form .contact-form {
padding: 4.533vw 0;
}
.appointment-form .date-time {
padding: 4.533vw 0 5.333vw;
display: block;
}
.appointment-form .date-time .form-input {
width: 100%;
margin-bottom: 5.333vw;
}
.appointment-form .date-time .form-input:last-child {
margin-bottom: 0;
}
.appointment-form .form-input {
width: 100%;
}
.appointment-form .form-input label,
.contact-form .form-input label {
font-size: 3.467vw;
letter-spacing: 0.053vw;
}
.appointment-form .form-input .input,
.contact-form .form-input .input,
.contact-form .form-input select,
.nf-form-content input:not([type=button]),
.nf-form-content input:not([type=button]):focus,
.nf-field-element textarea,
.nf-field-element .hour,
.nf-field-element .ampm,
.nf-field-element .minute {
padding: 4.267vw 4.267vw 4vw !important;
border-radius: 1.067vw !important;
font-size: 4.267vw;
letter-spacing: -0.107vw;
margin-top: 2.133vw;
}
.nf-field-element>div {
width: 33%;
}
.appointment-form .form-input .input::placeholder,
.contact-form .form-input .input::placeholder,
.contact-form .form-input select::placeholder,
.nf-form-content input:not([type=button])::placeholder,
.nf-field-element textarea::placeholder {
font-size: 4.267vw;
letter-spacing: 0.053vw;
}
input[type="date"]::-webkit-calendar-picker-indicator {
width: 5.333vw;
height: 5.333vw;
}
.appointment-form .contact label {
font-size: 3.733vw;
}
.appointment-form .contact .form-input,
.contact-form .form-input {
margin-bottom: 5.333vw;
}
.btn {
padding: 3.2vw 6.4vw;
font-size: 4.8vw;
border-radius: 1.067vw;
letter-spacing: 0.08vw;
}
.nf-form-content input[type=submit] {
padding: 3.2vw 6.4vw !important;
font-size: 4.8vw !important;
border-radius: 1.067vw !important;
letter-spacing: 0.08vw !important;
}
.common-ttl {
font-size: 6.667vw;
letter-spacing: 0.135vw;
}
.explore-sec {
margin: 15.733vw 0 19vw;
}
.diamond-list {
padding: 6.133vw 0 3.733vw;
}
.diamond-list li {
margin-right: 0;
margin-bottom: 6.667vw;
width: 100%;
border-radius: 1.067vw;
}
.diamond-list li:nth-child(2n+0) {
margin-right: 0;
}
.diamond-list li .selected-blk .shape {
border-radius: 0.533vw;
padding: 1.067vw 0.8vw;
display: flex;
align-items: center;
}
.diamond-list li .selected-blk .shape img {
width: 2.933vw;
height: 2.933vw;
}
.diamond-list li .selected-blk {
top: 2.4vw;
}
.diamond-list li .selected-blk .status {
font-size: 3.467vw;
padding: 0.533vw 0.533vw;
letter-spacing: 0.053vw;
border-radius: 1.067vw;
}
.diamond-list li .discount {
position: absolute;
width: 100%;
font-size: 3.2vw;
font-weight: 500;
padding: 1.333vw 0;
}
.diamond-list li .diamond-price {
display: block;
padding: 2.667vw 1.333vw 0vw;
}
.diamond-list li .carat {
font-size: 3.2vw;
letter-spacing: -0.027vw;
width: 100%;
}
.diamond-list li .id {
font-size: 2.667vw;
letter-spacing: -0.08vw;
padding: 1.6vw 0;
}
.diamond-list li .quality {
font-size: 2.667vw;
}
.diamond-list li .quality-list {
padding: 2.667vw 2.133vw 1.067vw 1.867vw;
letter-spacing: -0.08vw;
width: 30%;
}
.diamond-list li .color {
padding: 2.667vw 2.133vw 1.067vw 2.133vw;
}
.diamond-list li .quality-list:last-child {
border-right: 0;
}
.diamond-list li .certificate {
font-size: 2.667vw;
}
.diamond-list li .certificate-list {
padding: 2.4vw 0 1.6vw;
letter-spacing: -0.053vw;
}
.diamon-btn .btn {
padding: 2.133vw 6.4vw;
font-size: 4.267vw;
border-radius: 1.067vw;
display: block;
}
.sec-customer .container {
flex-wrap: wrap;
padding: 9.333vw 0 9.6vw;
max-height: 153.333vw;
width: 86%;
max-height: unset;
}
.sec-customer .text-blk {
width: 100%;
padding: 4.8vw 0;
}
.sec-customer .text-blk .feedback-ttl {
font-size: 6.667vw;
letter-spacing: 0.135vw;
}
.sec-customer .text-blk .feedback-txt {
font-size: 3.467vw;
padding: 4vw 0;
letter-spacing: 0.027vw;
}
.sec-customer .feedback-list-content {
width: 100%;
overflow-y: unset;
max-height: unset;
}
.sec-customer .feedback-list {
column-count: unset;
width: 100%;
max-height: 100%;
overflow-y: unset;
display: flex;
flex-direction: row;
white-space: nowrap;
margin-top: 7.467vw;
overflow-x: auto;
}
.sec-customer .feedback-list::-webkit-scrollbar {
width: 10px;
height: 1px;
border-radius: 2px;
}
.sec-customer .feedback-list li {
background-color: var(--white);
padding: 7.467vw 6.4vw 4.533vw;
width: 98%;
margin-right: 4.8vw;
margin-bottom: 4.8vw;
word-break: break-all;
min-width: 80vw;
white-space: normal;
}
.sec-customer .feedback-list li:nth-child(2n+0) {
margin-right: 4.8vw;
}
.sec-customer .feedback-list .feedback-ttl {
font-size: 5.333vw;
font-weight: 500;
letter-spacing: 0.125vw;
}
.sec-customer .feedback-list .feedback-ttl span {
font-size: 3.2vw;
letter-spacing: 0.053vw;
}
.sec-customer .feedback-list .txt-detail {
font-size: 4.267vw;
padding: 3.733vw 0;
}
.sec-empire {
padding: 14.667vw 0 8vw;
}
.com-sub-ttl {
font-size: 3.467vw;
width: 90%;
padding: 4vw 0;
letter-spacing: 0.053vw;
}
.sec-empire .empire-list {
flex-wrap: wrap;
padding: 10.933vw 0;
}
.sec-empire .empire-list li {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-right: 0;
gap: 4.8vw;
overflow: hidden;
margin-bottom: 4.8vw;
}
.sec-empire .empire-list li:nth-child(4n+0) {
margin-right: 0;
}
.sec-empire .empire-list li .txt-blk {
padding: 5.867vw 8vw 5.867vw 5.867vw;
height: auto;
box-shadow: rgba(0, 0, 0, 0.1) 0vw 5.333vw 6.667vw -1.333vw, rgba(0, 0, 0, 0.04) 0vw 2.667vw 2.667vw -1.333vw;
}
.sec-empire .empire-list li .txt-blk p {
padding: 2.667vw 0;
font-size: 4.267vw;
font-weight: 400;
letter-spacing: 0.053vw;
line-height: 1.5;
font-family: var(--font3);
}
.sec-empire .content-ttl {
font-size: 5.333vw;
font-weight: 500;
font-family: var(--font1);
}
.sec-empire .empire-list li:nth-child(2n+0) {
flex-direction: column;
}
.sec-empire .empire-list li .img-blk {
width: 100%;
}
.sec-empire .empire-list li .img-blk img {
max-width: 91.467vw;
height: 77.067vw;
object-fit: cover;
}
.sec-faq {
margin-top: 13.067vw;
}
.faq-list {
padding: 2.933vw 0;
}
.faq-list li {
padding: 8vw 0 6.667vw;
}
.faq-ttl {
font-size: 4.267vw;
line-height: 1.5;
padding-right: 10.133vw;
}
.faq-ttl::before {
top: 0vw;
right: 2.133vw;
width: 0.8vw;
height: 4.533vw;
}
.faq-ttl::after {
top: 2.133vw;
right: 0.267vw;
width: 5%;
height: 0.533vw;
}
.faq-ttl.active::after {
top: 2.667vw;
}
.faq-tab {
padding: 3.2vw 0 0;
width: 100%;
line-height: 1.5;
letter-spacing: 0.133vw;
font-size: 4.267vw;
} #post-3 {
padding: 8vw;
}
#post-3 .textwidget h2 {
font-size: 6.933vw;
padding-top: 2.667vw;
}
#post-3 .textwidget h3 {
font-size: 5.867vw;
padding-top: 2.667vw;
}
#post-3 .textwidget p {
font-size: 3.733vw;
padding-left: 2.667vw;
padding-top: 2.667vw;
}
.footer {
margin-top: 17.333vw;
}
.footer .container {
padding: 15.467vw 0;
width: 90%;
}
.footer .contact-banner {
flex-wrap: wrap;
padding-bottom: 5.333vw;
border-bottom: 0.533vw solid #fff;
}
.footer .logo {
width: 100%;
text-align: center;
}
.footer .logo img {
max-width: 71.2vw;
width: 100%;
}
.footer .contact-list {
flex-wrap: wrap;
width: 100%;
}
.footer .contact-detail {
columns: 1;
padding: 10.133vw 0 5.6vw;
text-align: center;
}
.footer .contact-detail li {
margin-bottom: 6.133vw;
}
.footer .contact-detail li a {
font-size: 4.267vw;
letter-spacing: 0.053vw;
}
.footer .contact-us {
width: 100%;
padding: 1.333vw 0;
text-align: center;
}
.footer .contact-ttl {
font-size: 4.267vw;
padding-left: 0;
}
.footer .contact-us a {
padding: 3.467vw 0 0vw 0;
letter-spacing: -0.027vw;
font-size: 4.267vw;
}
.footer .copyright-blk {
justify-content: center;
flex-wrap: wrap;
padding: 3.467vw 0;
}
.footer .copyright-blk p {
font-size: 3.2vw;
letter-spacing: -0.027vw;
text-align: center;
}
.footer .social-list li {
margin-right: 4vw;
margin-top: 6.4vw;
}
.footer .social-list li a img {
max-width: 9.6vw;
}
.light-box {
padding: 4vw 0;
display: none;
font-size: 3.967vw;
}
.light-box .btn-gp {
margin-top: 5.333vw;
display: flex;
flex-direction: column-reverse;
}
.light-box .btn-gp a {
border: 0.267vw solid var(--white);
border-radius: 1.067vw;
width: 100%;
padding: 2.667vw 4vw;
font-size: 4.8vw;
text-align: center;
}
.light-box .btn-gp a+a {
margin-left: 0;
margin-bottom: 5.333vw;
}
.light-box .container {
padding: 0;
width: 91%;
display: block;
}
.pages {
margin-top: 15.2vw;
margin-bottom: 26.4vw;
}
.sub-ttl {
font-size: 5.333vw;
}
.page-ttl {
font-size: 6.667vw;
letter-spacing: 0.139vw;
line-height: 1.3;
}
.article-list {
display: flex;
flex-wrap: wrap;
margin-top: 4.8vw;
}
.article-list li {
width: 48%;
border-radius: 1.067vw;
margin-right: 3.467vw;
margin-bottom: 3.467vw;
}
.article-list li:nth-child(2n+0) {
margin-right: 0;
}
.article-list li:nth-child(3n+0) {
margin-right: 3.467vw;
}
.article-list li:nth-child(6n+0) {
margin-right: 0;
}
.article-list li .img-blk img {
height: 34.133vw;
}
.article-list li .txt-blk {
padding: 4vw 1.6vw;
}
.article-list li .txt-blk h3 {
font-size: 3.733vw;
line-height: 1.5;
letter-spacing: 0.133vw;
letter-spacing: 0.24vw;
}
.article-list li .txt-blk .article-date {
font-size: 3.2vw;
padding: 1.067vw 0;
letter-spacing: -0.08vw
}
.article-list li .txt-blk p {
display: none;
}
.article-list li .txt-blk .btn {
font-size: 4.267vw;
margin-top: 1.867vw;
}
.recommended-page {
padding: 21.6vw 0 20.533vw;
}
.recommended-page .recommended-ttl .sub-ttl {
letter-spacing: 0.125vw;
}
.recommended-page .article-list {
margin-top: 5.6vw;
flex-wrap: nowrap;
display: -webkit-box;
width: 100%;
overflow-x: scroll;
}
.recommended-page .article-list li {
width: 47%;
margin-right: 2.667vw;
}
.recommended-page .article-list li:nth-child(3n+0) {
margin-right: 2.667vw;
}
.recommended-page .article-list::-webkit-scrollbar {
width: 2px;
height: 3px;
border-radius: 3px;
}
.recommended-page .article-list::-webkit-scrollbar-track {
background: transparent;
}
.recommended-page .article-list::-webkit-scrollbar-thumb {
background: #888;
} .recommended-page .article-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
.lightbox-container {
width: 93%;
padding: 6.4vw;
}
.lightbox-container iframe {
height: 500px;
width: 100%;
margin: 0 auto
}
.search-ttl-gp {
display: block;
padding-bottom: 5.867vw;
}
.search-ttl {
font-size: 6.667vw;
letter-spacing: 0.139vw;
}
.search-ttl span {
font-size: 4.267vw;
padding-left: 1.333vw;
}
.drop-down {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 6.933vw;
}
.drop-down .selected a,
.filter-option a {
font-size: 3.467vw;
letter-spacing: 0.053vw;
border: 0.267vw solid var(--primary-color);
border-radius: 0.533vw;
padding: 1.333vw 12.533vw 1.6vw 4.8vw;
}
.filter-option a {
padding: 1.333vw 14.133vw 1.333vw 6.667vw;
font-weight: 400;
font-family: var(--font3);
position: relative;
font-size: 3.467vw;
}
.filter-option a:after {
position: absolute;
content: "";
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_filter.svg) no-repeat center/cover;
top: 46%;
width: 4.333vw;
height: 4.333vw;
right: 7.333vw;
transform: translateY(-50%);
}
.dropdown-gp .filter-ttl {
font-size: 5.333vw;
display: flex;
justify-content: space-between;
font-weight: 500;
font-family: var(--font1);
letter-spacing: 0.667vw;
position: relative;
}
.dropdown-gp .filter-ttl::before {
position: absolute;
content: "";
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_filter.svg) no-repeat center/cover;
top: 55%;
width: 4.333vw;
height: 4.333vw;
left: 20.8vw;
transform: translateY(-50%);
}
.filter-option .dropdown-gp li {
margin-right: 0;
}
.filter-option .dropdown-gp li a {
padding: 7.733vw 4.533vw 5.867vw 4.8vw;
border-top: 0.267vw solid #EAEBED;
}
.filter-option .dropdown-gp li:first-child a {
border-top: 0.267vw solid transparent;
}
.filter-option .dropdown-gp li:nth-child(4n+0) {
border-bottom: 0.267vw solid #EAEBED;
}
.filter-ttl img {
max-width: 6.4vw;
margin: 0;
}
.drop-down .selected a::after {
width: 5.6vw;
height: 5.333vw;
right: 5.333vw;
}
.drop-down .options {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
border-radius: unset;
display: none;
padding: 7.467vw 4vw 5.067vw 4.8vw;
z-index: 111;
}
.drop-down .options li a.sort {
font-size: 5.333vw;
font-weight: 500;
font-family: var(--font1);
color: var(--black);
letter-spacing: 0.8vw;
display: flex;
justify-content: space-between;
}
.drop-down .options li a.sort img {
max-width: 6.4vw;
margin: 0;
}
.drop-down .options li a {
font-size: 4.267vw;
margin-bottom: 7.2vw;
color: #474C52;
display: block;
letter-spacing: 0.133vw;
}
.drop-down .options li a.option-detail {
font-size: 4.8vw;
color: var(--primary-color);
padding-bottom: 4.533vw;
margin-bottom: 0;
margin-top: 0;
padding-top: 6.4vw;
border-top: 0.267vw solid #EAEBED;
}
.filter-option .dropdown-gp {
display: none;
position: fixed;
width: 100%;
overflow-y: scroll;
height: 100vh;
top: 0;
left: 0;
background-color: #fff;
z-index: 999;
}
.filter-option li.btn-gp {
margin: 6.667vw 4.533vw;
}
.filter-option li.btn-gp a {
padding: 2.133vw 6.4vw;
text-align: center;
margin-bottom: 5.333vw;
border-radius: 1.067vw;
}
.filter-option li.btn-gp a.reset-btn {
background-color: transparent;
color: var(--btn-color);
border: 1px solid var(--btn-color);
}
.cmn-pagination .cmn-pager-num+.cmn-pager-num {
margin-left: 1.6vw;
}
.cmn-pagination li a:hover,
.cmn-pagination li a.active {
border: 0.267vw solid var(--primary-color);
color: var(--primary-color);
}
.cmn-pagination .cmn-pager-num a:active {
background-color: #919EAB;
color: #fff;
}
.cmn-pagination li {
width: 8.8vw;
}
.cmn-pagination li a {
display: flex;
justify-content: center;
border-radius: 1.067vw;
font-size: 3.733vw;
font-weight: 500;
font-family: var(--font3);
color: #212B36;
border: 0.267vw solid #DFE3E8;
border-radius: 1.067vw;
padding: 1.68vw 0;
}
.cmn-pagination .cmn-pager a {
padding: 2.48vw 0;
border: 0.267vw solid #DFE3E8;
background-color: #fff;
}
.cmn-pagination .cmn-pager-first a {
background-color: #919EAB;
}
.cmn-pagination .cmn-pager-first {
width: 9.333vw;
margin-right: 1.6vw;
}
.cmn-pagination .cmn-pager-last {
margin-left: 1.6vw;
width: 9.333vw;
}
.cmn-pagination .cmn-pager-first a img,
.cmn-pagination .cmn-pager-last a img {
width: 2.4vw;
}
.cmn-pagination .cmn-pager-prev {
margin-right: 5.333vw;
}
.cmn-pagination .cmn-pager-next {
margin-left: 5.333vw;
}
} .messenger-chat-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background-color: #0084ff;
padding: 10px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}
.messenger-chat-button a {
display: flex;
align-items: center;
justify-content: center;
}
.messenger-icon {
width: 30px;
height: 30px;
}
.messenger-chat-button:hover {
background-color: #006bbd;
}