/*** Created by finalstar on 1/19/2021. */
@charset "utf-8";
/* CSS Document */
/*--------------------------------------------- font ----------------------------*/
@font-face {
    font-family: 'textFont';
    font-style: normal;
    font-weight: normal;
    src: url('siteFile/includes/font/AnjomanRegular.woff');
}
@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: normal;
    src: url('siteFile/includes/font/AnjomanSemiBold.woff');
}
@font-face {
    font-family: 'enTextFont';
    src: url('siteFile/includes/font/Panton-Regular.otf');
}
@font-face {
    font-family: 'enTitleFont';
    src: url('siteFile/includes/font/Panton-Bold.otf');
}

/*--------------------------------------------- reset ----------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body{ line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }
input,textarea{ padding: 0; font-family: textFont; font-size: 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="radio"]{ -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; }

html,body{ width: 100%; height: 100%; scroll-behavior: smooth; direction: rtl; }
body.noScroll{ overflow: hidden; }
*{ box-sizing: border-box; }

.mainBox{ padding: 0 2rem; position: relative; z-index: 2; }
.mainBox2{ padding: 0 7rem; position: relative; z-index: 2; }
.mainBox3{ max-width: 60rem; padding: 0 2rem; margin: auto; position: relative; z-index: 2; }
@media only screen and (max-width: 1150px){
    .mainBox2{ padding: 0 2rem; }
}

.marginTop{ margin-top: 5rem !important; }
.marginTop2{ margin-top: 3rem !important; }
.marginTop3{ margin-top: 1.5rem !important; }
.marginTop4{ margin-top: .7rem !important; }

.paddingTop{ padding-top: 5rem !important; }
.paddingTop2{ padding-top: 3rem !important; }
.paddingTop3{ padding-top: 1.5rem !important; }
.paddingTop4{ padding-top: .7rem !important; }

.paddingBoth{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
.paddingBoth2{ padding-top: 3rem !important; padding-bottom: 3rem !important; }
.paddingBoth3{ padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.paddingBoth4{ padding-top: .7rem !important; padding-bottom: .7rem !important; }

.paddingSide{ padding-left: 5rem !important; padding-right: 5rem !important; }
.paddingSide2{ padding-left: 3rem !important; padding-right: 3rem !important; }
.paddingSide3{ padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.paddingSide4{ padding-left: .7rem !important; padding-right: .7rem !important; }
@media only screen and (max-width: 1250px){
    .marginTop{ margin-top: 50rem; }

    .paddingTop{ padding-top: 5rem; }

    .paddingBoth{ padding: 5rem 0; }
}

::-webkit-input-placeholder{ font-family: textFont !important; opacity: .75; text-align: right; }
:-moz-placeholder{ font-family: textFont !important; opacity: .75; text-align: right; }
::-moz-placeholder{ font-family: textFont !important; opacity: .75; text-align: right; }
:-ms-input-placeholder{ font-family: textFont !important; opacity: .75; text-align: right; }
input[type="tel"],input[type="email"],input[type="password"]{ direction: ltr; }
input[type="email"]{ font-family: enTextFont; }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { appearance: none; margin: 0; }
input[type=number] { appearance: textfield; }

::-moz-selection { background: #cd163f; color: #FFFFFF; }
::selection { background: #cd163f; color: #FFFFFF; }
input::-moz-selection { background: #f1f1f1; color: #000000; }
input::selection { background: #f1f1f1; color: #000000; }

.ltext{ direction: ltr; display: inline-block; }
.enFont{ font-family: enTextFont !important; direction: ltr!important; }
.centerText{ text-align: center !important; }
.disable{ text-align: center !important; pointer-events: none !important; }
.overflowAutoData{ overflow: auto; }
a{ text-decoration: none; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }

.likeIcon{ cursor: pointer; }
.likeIcon.active{ cursor: auto; opacity: .2; }
.boldFont{ font-family: titleFont; font-weight: bold; }

.noResult{ line-height: 1.3em; color: #af0000; font-family: titleFont; font-size: .95rem; }
.okResult{ line-height: 1.3em; color: #1cbe00; font-family: titleFont; font-size: .95rem; }

/* A color */
.Ared{ color: #AF0000 !important; }
.Agreen{ color: #08800c !important; }
.Awhite{ color: #FFFFFF !important; }
.companyColor{ color: #cd163f !important; }

/* bg */
.bgWhite{ background: #FFFFFF; }
.bgGray{ background: #f6f6f6; }
.bgGold{ background: #BB9439; }
.bgPink{ background: #cd163f; }
.bgCream{ background: #f3ece6; }

/* call to action */
.callToActionType1{ max-width: 15rem; line-height: 2.4em; padding: 0 1.5em; font-family: textFont; font-size: 1.05rem; color: #FFFFFF !important; background: #b4b4b4; border: 1px solid transparent; display: inline-block; text-align: center; cursor: pointer; transition: all .3s linear; }
.callToActionType1:hover{ background: #cd163f; border-color: #FFFFFF; }

.callToActionType2{ max-width: 15rem; line-height: 2.4em; padding: 0 1.5em; font-family: textFont; font-size: 1.05rem; color: #FFFFFF !important; background: transparent; border: 1px solid #FFFFFF; display: inline-block; text-align: center; cursor: pointer; transition: all .3s linear; }
.callToActionType2:hover{ background: #cd163f; }

.iconCallToActionType1{ display: grid; grid-template-columns: 1.5rem auto; align-items: center; justify-content: space-between; }
.iconCallToActionType2{ display: grid; grid-template-columns: auto 1.5rem; align-items: center; justify-content: space-between; }

/* page title 1 */
.pageTitle1{ line-height: 1.7em; color: #353237; font-family: titleFont; font-size: 2.1rem; }
.enPageTitle1{ line-height: 1.7em; color: #353237; font-family: enTitleFont; font-size: 1.7rem; }

/* page title 2 */
.pageTitle2{ line-height: 1.7em; font-family: titleFont; font-size: 1.6rem; color: #353237; }

/* page title 2 */
.pageTitle3{ line-height: 1.7em; font-family: titleFont; font-size: 1.3rem; color: #353237; }

/* header *//* before border */
.beforeBorder{ padding-right: 35px; position: relative; }
.beforeBorder:before{ content: ""; width: 30px; height: 1px; margin: auto; background: #cd163f; position: absolute; top: 0; bottom: 0; right: 0; display: block; }
.beforeBorder.color2:before{ background: #4d4d4d; }
.beforeBorder.Awhite:before{ background: #FFFFFF; }

/* all Container */
#allContainer{ position: relative; overflow: hidden; }

/* header */
/* #headerSpace{ height: 112px; } */
header{ width: 100%; background: #FFFFFF; }
#headerGridBox{ display: grid; grid-template-columns: auto 10rem; grid-gap: 1rem 0; align-items: center; }

#menuBtn{ display: none; }
#menuBtn img{ width: 100%; display: block; }

#headerNav{ display: flex; align-items: center; }
#headerNav a{ line-height: 1.5em; margin-left: 1rem; font-family: titleFont; font-size: 1.05rem; color: #353238; display: block; cursor: pointer; }
#headerNav a:hover{ color: #cd163f; }

#headerLogo{ width: 100%; display: block; }
#headerLogo img{ width: 100%; display: block; }
@media only screen and (max-width: 850px) {
    #headerGridBox{ grid-template-columns: 2rem 10rem; justify-content: space-between; }
    #menuBtn{ display: block; }
    #headerNav{ padding: .5rem; background: #f1f1f1; display: none; grid-column: 2 span; order: 1; }
    #headerNav a{ margin: .5rem 0 0 0; padding: .5rem; border: 1px solid #FFFFFF; text-align: center; }
    #headerNav a:first-child{ margin: 0; }

}

/* fixed social link */
#fixedSocialLink{ position: fixed; bottom: 25px; left: 25px; z-index: 11; transition: left .3s linear; }
#fixedSocialLink a{ width: 30px; margin-bottom: 2px; border: 1px solid #353237; border-radius: 50%; display: block; opacity: .5; }
#fixedSocialLink a:last-child{ margin-bottom: 0; }
#fixedSocialLink a:hover{ opacity: 1; }
#fixedSocialLink a img{ width: 100%; display: block; }
#fixedSocialLink.white a img{ filter: brightness(0) invert(1); }
@media only screen and (max-width: 850px) {
    #fixedSocialLink{ left: -100px; }
    #fixedSocialLink.show{ left: 25px; }
}

/* index banner */
.indexBannerBox{ height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; }
.indexBannerImg img{ width: 100%; display: block; }
.indexBannerInfo{ padding: 0 7rem; }
.indexBannerTitle1{ line-height: 1.7; font-family: titleFont; font-size: 2.3rem; color: #cd163f; }
.indexBannerTitle2{ line-height: 1.7; font-family: enTextFont; font-size: 1.9rem; color: #4d4d4d; }
.indexBannerTxt{ line-height: 1.7; font-family: textFont; font-size: 1.05rem; color: #4d4d4d; }

#indexBanner .owl-dots { width: 1rem; height: 100%; position: absolute; top: 0; right: 3rem; display: grid; grid-template-columns: 100%; grid-gap: .3rem; align-content: center; }
#indexBanner .owl-dot{ width: 1rem; height: 1rem; border-radius: 50%; border: none; background: #FFFFFF; position: relative; opacity: .3; }
#indexBanner .owl-dot.active{ opacity: 1; }
@media only screen and (max-width: 850px) {
}

/* product list */
.productList{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px 40px; }

.productListImg{ position: relative; display: block; }
.productListImg img{ width: 100%; display: block; }
.productListImg:hover{ opacity: .5; }
.productListTitle{ line-height: 1.7em; font-family: titleFont; font-size: 1.5rem; color: #353237; display: block; }
.productListTitle:hover{ color: #cd163f; }
@media only screen and (max-width: 1180px) {
    .productList{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 650px) {
    .productList{ grid-template-columns: 100%; }
}

/* post list */
.postList{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px 40px; }

.postListImg{ position: relative; display: block; }
.postListImg img{ width: 100%; display: block; }
.postListImg:hover{ opacity: .5; }
.postListTitle{ line-height: 1.7em; font-family: titleFont; font-size: 1.5rem; color: #353237; display: block; }
.postListTitle:hover{ color: #cd163f; }

/* footer's up socialLinkBox */
#socialLinkBox{ display: grid; grid-template-columns: 20rem auto; grid-gap: 1rem 2rem; align-items: center; justify-content: space-between; }
#socialLinkBoxTxt{ display: grid; grid-template-columns: auto 7rem; align-items: center; text-align: left; }
#socialLinkBoxTxt img{ width: 100%; filter: brightness(0) invert(1);  display: block; }
@media only screen and (max-width: 650px) {
    #socialLinkBox{ grid-template-columns: 100%; }
    #socialLinkBox a{ width: 100%; max-width: unset; order: 1; }
    #socialLinkBoxTxt{ grid-template-columns: 100%; text-align: center; }
    #socialLinkBoxTxt figure{ display: none; }
}

/* footer */
footer{ line-height: 1.7em; font-family: textFont; font-size: 1.10rem; color: #FFFFFF; background: #cd163f; position: relative; overflow: hidden; }
#footerBgLogo{ width: 250px; position: absolute; bottom: -60px; right: -60px; }
#footerGrid{ display: grid; grid-template-columns: 1fr 2fr; grid-gap: 2rem 3rem; }
#footerGrid > section{ display: grid; align-content: space-between; }
#footerGrid iframe{ width: 100%; height: 20rem; }
footer a{ color: #FFFFFF; display: inline-block; }
footer a:hover{ color: #c1b4ae; }
.contactInlineLink a:before{ content: "|"; margin: 0 .2rem; color: #FFFFFF; display: inline-block; }
.contactInlineLink a:last-child:before{ display: none; }

.footerInfoGrid{ display: grid; grid-gap: .5rem 0; }

.footerBtnLink{ line-height: 2.7em; height: 2.7em; padding: 0 25px; margin-top: 30px; font-family: titleFont; font-size: .9rem; background: #4d4d4d; color: #FFFFFF; border: none; display: block; justify-self: start; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.footerBtnLink:hover{ background: #353237; }
@media only screen and (max-width: 950px) {
    #footerGrid{ grid-template-columns: 100%; }
}

/* page grid */
.pageGridType1{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem 4rem; align-items: flex-start; }
.pageGridType1 img{ max-width: 100%; display: block; }
@media only screen and (max-width: 950px) {
    .pageGridType1{ grid-template-columns: 100%; }
}

/* index Page Logo */
@keyframes fixedLogoAnimate {
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(-360deg); }
}
#pageFixedLogo{ width: 110px; position: fixed; left: 3rem; bottom: 110px; display: block; animation: fixedLogoAnimate 10s linear infinite; opacity: .8; z-index: -1; }
#pageFixedLogo img{ width: 100%; display: block; }

/* modal box */
.modalFixedBox{ width: 100vw; height: calc(100vh - 85px); backdrop-filter: blur(4px); position: fixed; top: 85px; right: 0; display: grid; align-items: center; z-index: 9; }
.modalGridBox{ width: 100%; max-width: 750px; padding: 30px 30px; margin: auto; backdrop-filter: blur(8px); border: 1px solid #353237; border-radius: 20px; display: grid; grid-template-columns: 200px auto; grid-gap: 30px 0; align-items: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.modalImg{ width: 100%; display: block; }
.modalBoxTxt{ padding: 30px 30px; border: 1px solid #f6f6f6; border-radius: 20px; position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.modalBoxCloseBtn{ width: 40px; padding: 10px; border: 1px solid #f6f6f6; border-radius: 50%; background: #FFFFFF; position: absolute; bottom: -20px; left: 20px; cursor: pointer; z-index: 1; transition: all .3s linear; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.modalBoxCloseBtn img{ width: 100%; filter: grayscale(100%); display: block; -webkit-filter: grayscale(100%); transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.modalBoxCloseBtn:hover{ background: #353237; }
.modalBoxCloseBtn:hover img{ filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); }
@media only screen and (max-width: 800px) {
    .modalFixedBox{ overflow: auto; }
    .modalGridBox{ grid-template-columns: 100%; }
    .modalImg{ display: none !important; }
}

/* end view text */
.readText{ line-height: 1.7em; font-family: textFont; font-size: 1.05rem; color: #4d4d4d; text-align: justify; text-justify: auto; }
.readText h2,.readText h3,.readText h4,.readText h5,.readText h6{ line-height: 1.5em; margin: 30px auto 10px auto; font-family: titleFont; font-size: 1.25rem; color: #cd163f; }
.readText h2:first-child,.readText h3:first-child,.readText h4:first-child,.readText h5:first-child,.readText h6:first-child{ margin-top: 0; }

.readText em{ font-style: italic; }
.readText strong{ font-family: titleFont; }

ol, ul{ padding-right: 30px; }
.readText img{ max-width: 100%; margin: auto; display: block; }
.readText figure:first-child img{ margin-top: 0; }
.readText a{ color: #cd163f; }
.readText a:hover{ color: #706f6f; }

/* rating */
.rating { unicode-bidi: bidi-override; direction: rtl; color: #777777; font-size: 22px; display: flex; justify-content: flex-start; }
.rating>span{ display: block; cursor: pointer; }
.rating>span:hover:before, .rating>span:hover~span:before,.rating>span.active:before, .rating>span.active~span:before{ content: "\2605"; position: absolute; color: #f59c00; }
.ratingAns{ line-height: 24px; font-family: textFont; font-size: 14px; direction: ltr; color: #777777; }

/* check box */
.checkedBox { width: 20px; height: 20px; display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; }
.checkedBox input { position: absolute; top: -100%; opacity: 0; cursor: pointer; }
.checkedBox .checkmark { width: 20px; height: 20px; position: absolute; top: 0; left: 0; border: 1px solid #bcbec0; transition: all .3s linear; }
.checkedBox:hover input ~ .checkmark { background-color: #ccc; }
.checkedBox input:checked ~ .checkmark { background-color: #353237; border-color: #353237; }
.checkedBox .checkmark:after { content: ""; width: 3px; height: 8px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 3px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: none; }
.checkedBox input:checked ~ .checkmark:after { display: block; }