/*** Created by finalStar on 03/10/2020 ***/
@charset "utf-8";
/* CSS Document */
/*--------------------------------------------- font ----------------------------*/
@font-face {
    font-family: 'textFont';
    src: url('includes/font/Roboto-Regular-webfont.ttf');
}
@font-face {
    font-family: 'titleFont';
    src: url('includes/font/Roboto-Bold-webfont.ttf');
}
@font-face {
    font-family: 'enTextFont';
    src: url('includes/font/Roboto-Regular-webfont.ttf');
}
@font-face {
    font-family: 'enTitleFont';
    src: url('includes/font/Roboto-Bold-webfont.ttf');
}

/*--------------------------------------------- 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,button,textarea{ padding: 0; font-family: textFont; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

html,body{ width: 100%; height: 100%; }
*{ box-sizing: border-box; }

.mainBox{ width: 100%; padding: 0 25px; margin: auto; position: relative; }
.mainBox2{ width: 100%; padding: 0 120px; margin: auto; position: relative; }
.mainBox3{ width: 100%; max-width: 1050px; padding: 0 25px; margin: auto; position: relative; }

.marginTop{ margin-top: 80px; }
.marginTop2{ margin-top: 40px; }
.marginTop3{ margin-top: 20px; }
.marginTop4{ margin-top: 10px; }

.paddingTop{ padding-top: 80px; }
.paddingTop2{ padding-top: 40px; }
.paddingTop3{ padding-top: 20px; }
.paddingTop4{ padding-top: 10px; }

.paddingBoth{ padding: 80px 0; }
.paddingBoth2{ padding: 40px 0; }
.paddingBoth3{ padding: 20px 0; }
.paddingBoth4{ padding: 10px 0; }

::-webkit-input-placeholder{ opacity: 1; font-family: textFont; text-align: left; }
:-moz-placeholder{ opacity: 1; font-family: textFont; text-align: left; }
::-moz-placeholder{ opacity: 1; font-family: textFont; text-align: left; }
:-ms-input-placeholder{ opacity: 1; font-family: textFont; text-align: left; }
input[type="tel"],input[type="email"],input[type="password"]{ direction: ltr; }
input[type="email"]{ font-family: enTitleFont; }
input,textarea{ font-size: 12px; }

::-moz-selection { background: #54227e; color: #ffffff; }
::selection { background: #54227e; color: #ffffff; }
input::-moz-selection { background: #54227e; color: #ffffff; }
input::selection { background: #54227e; color: #ffffff; }

iframe{ max-width: 100%; display: block; }

.afterClear:after{ content: ""; display: block; clear: both; }
.ltext{ direction: ltr; display: inline-block; }
.enFont{ font-family: enTextFont !important; direction: ltr!important; }
a{ text-decoration: none; transition: all .3s linear; }

.likeIcon{ cursor: pointer; }
.likeIcon.active{ opacity: .2; }

.noResult{ line-height: 28px; margin: 30px 0; color: #ff4000; font-family: titleFont; font-size: 17px; text-align: center; }
.okResult{ line-height: 28px; margin: 30px 0; color: #00a800; font-family: titleFont; font-size: 17px; text-align: center; }

.CTACodeLeft{ text-align: right; }
.CTACode{ line-height: 34px; padding: 0 15px; border: none; font-family: titleFont; font-size: 13px; color: #ffffff !important; background: #54227e; display: inline-block; cursor: pointer; transition: all .3s linear; }
.CTACode:hover{ background: #00175f; }

/* comma */
.infoComma span:after{ content: "، "; display: inline-block; }
.infoComma span:last-child:after{ display: none; }

/* company color */
.companyColor{ color: #54227e; }
.companyHoverColor{ color: #ff7400 !important; }

/* page title 1 */
.pageTitle1{ line-height: 40px; font-family: titleFont; font-size: 31px; color: #333333; }
.pageTitle1.black{ color: #00175f; }
.pageTitle1.white{ color: #FFFFFF; }
.pageTitle1.center{ text-align: center; }

/* page title 2 */
.pageTitle2{ line-height: 40px; font-family: titleFont; font-size: 21px; color: #333333; }
.pageTitle2.white{ color: #FFFFFF; }
.pageTitle2.center{ text-align: center; }

/* page subtitle 1 */
.pageSubTitle1{ line-height: 24px; font-family: textFont; font-size: 14px; color: #333333; }
.pageSubTitle1.white{ color: #ffffff; }
.pageSubTitle1.center{ text-align: center; }

/* before border */
.beforeBorder{ padding-left: 35px; position: relative; }
.beforeBorder:before{ content: ""; width: 30px; height: 1px; margin: auto; background: #54227e; position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.beforeBorder.color2:before{ background: #8aa8c0; }
.beforeBorder.white:before{ background: #ffffff; }

/* after border */
.afterBorder:after{ content: ""; width: 70px; height: 2px; margin-top: 20px; background: #ff7400; display: block; }
.afterBorder.center:after{ margin: 20px auto 0 auto; }
.afterBorder.white:after{ background: #ffffff; }

/* after Duble Border */
.afterDubleBorder{ width: 120px; height: 15px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; }
.afterDubleBorder:before{ content: ""; width: 50%; height: 1px; margin: auto; background: #cccccc; position: absolute; top: 0; bottom: 0; right: -6px; }
.afterDubleBorder:after{ content: ""; width: 50%; height: 1px; margin: auto; background: #cccccc; position: absolute; top: 0; bottom: 0; left: -6px; }
.afterDubleBorder>section:before{ content: ""; width: 1px; height: 100%; margin: auto; background: #cccccc; position: absolute; top: 0; bottom: 0; right: 0; left: 3px; }
.afterDubleBorder>section:after{ content: ""; width: 1px; height: 100%; margin: auto; background: #cccccc; position: absolute; top: 0; bottom: 0; right: 3px; left: 0; }

/* header */
header{ width: 100%; padding: 30px 0 30px 0; position: fixed; top: 0; left: 0; z-index: 9; transition: all .3s linear; }
header.bg{ background: #54227e; }
header .mainBox3{ display: grid; grid-template-columns: 140px auto 48px 40px 40px 40px; grid-gap: 10px 0; align-items: center; direction: ltr; }

#headerLogo a{ max-width: 140px; display: block; }
#headerLogo a img{ width: 100%; display: block; transition: all .3s linear; }

nav{ display: flex; align-items: center; opacity: 0; visibility: hidden; transition: all .3s linear; direction: rtl; }
nav.open{ opacity: 1; visibility: visible; }
nav a{ line-height: 24px; padding: 0 10px; font-family: titleFont; font-size: 14px; color: #ffffff; display: block; direction: ltr; }
nav a:hover{ color: #ff7400; }

#menuBtn { width: 41px; padding: 0 10px; display: block; cursor: pointer; }
#menuBtn:before, #menuBtn:after { content: ''; height: 2px; background: #ffffff; transition: all 200ms ease-in-out; display: block; }
#menuBtn:before { margin-bottom: 12px; box-shadow: 0 7px 0 #ffffff; }
#menuBtn:hover:before { background: #ff7400; box-shadow: 0 7px 0 #ff7400; }
#menuBtn:hover:after{ background: #ff7400; }
#menuBtn.active:before { background: #ff4000; box-shadow: 0 0 0 #fff; transform: translateY(7px) rotate(45deg); }
#menuBtn.active:after{ background: #ff4000; transform: translateY(-7px) rotate(-45deg); }

#headerSearchBtn{ padding: 3px 10px; border: solid #ffffff; border-width: 0 1px 0 1px; position: relative; cursor: pointer; }
#headerSearchBtn img{ width: 100%; filter: brightness(0) invert(1); display: block; transition: all .3s linear; }
#headerSearchBtn:hover>img,#headerSearchBtn.open>img{ filter: none; }
#headerSearchForm{ width: 220px; height: 34px; position: absolute; top: calc(100% + 5px); right: 0; display: none; direction: ltr; }
#headerSearchForm form{ width: 100%; height: 100%; display: grid; grid-template-columns: auto 34px; align-items: center; }
#headerSearchForm input{ width: 100%; height: 100%; padding: 0 5px; border: none; background: #ffffff; color: #54227e; font-size: 14px; }
#headerSearchForm button{ width: 100%; height: 100%; padding: 5px; border: none; background: #ffffff; cursor: pointer; }
#headerSearchForm button img{ filter: brightness(.5) invert(.5); }
#headerSearchForm button:hover img{ filter: none; }

#headerShopBtn{ padding: 0 10px; border: solid #ffffff; border-width: 0 1px 0 0; position: relative; cursor: pointer; }
#headerShopBtn img{ width: 100%; filter: brightness(0) invert(1); display: block; transition: all .3s linear; }
#headerShopBtn span{ width: 20px; height: 20px; line-height: 18px; color: #ffffff; font-family: textFont; font-size: 13px; border: 1px solid #ffffff; border-radius: 50%; background: #ff7400; position: absolute; bottom: -10px; left: 0; display: block; text-align: center; }
#headerShopBtn:hover img{ filter: none; }

#headerOtherSite{ line-height: 24px; padding: 0 10px; font-family: titleFont; font-size: 14px; color: #ffffff; display: block; }
#headerOtherSite:hover{ color: #ff7400; }
@media only screen and (max-width: 700px){
    header .mainBox3{ grid-template-columns: auto 48px 40px 40px 40px; }
    header.openMenu{ background: #54227e; }
    nav{ width: 100%; height: calc(100vh - 109px); padding: 10px 25px; background: #54227e; position: absolute; top: 79px; right: 100%; display: block; }
    nav.open{ right: 0; }
    nav>section{ margin-top: 10px; }
    nav>section:first-child{ margin-top: 0; }
    nav a{ padding: 5px 10px; border: 1px solid #7930b4; text-align: center; }
}
@media only screen and (max-width: 500px){
    header{ padding: 10px 0 10px 0; }
    header .mainBox3{ grid-template-columns: 48px 40px 40px 40px; justify-content: center; }
    nav{ top: 99px; }
    #headerLogo{ grid-column: 4 span; }
}

/* index slider */
#indexSlider{ height: 100vh; min-height: 650px; position: relative; overflow: hidden; z-index: 1; direction: rtl; }
.indexSliderBox{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; opacity: .2; z-index: 1; transition: all .3s linear; }
.indexSliderBg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; }
.indexSliderBg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.1); display: block; transition: all 6s linear; }
.bigSliderInfo{ height: 100%; padding: 120px 0; }
.bigSliderInfo .mainBox3{ height: 100%; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 100%; grid-gap: 0 50px; align-items: center; }
.bigSliderImg{ width: 100%; height: 100%; text-align: left; }
.bigSliderImg img{ max-width: 100%; max-height: 100%; object-fit: cover !important; display: inline-block; }
.bigSliderTextInfo{ direction: ltr; }
.bigSliderTitle span{ line-height: 65px; padding: 20px 30px; font-family: titleFont; font-size: 47px; color: transparent; position: relative; display: inline-block; }
.bigSliderTitle span:before{ content: ""; width: 20px; height: 20px; margin: auto; border: solid #ffffff; border-width: 1px 0 0 1px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.bigSliderTitle span:after{ content: ""; width: 20px; height: 20px; margin: auto; border: solid #ff7400; border-width: 0 1px 1px 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.bigSliderText{ line-height: 24px; margin-top: 5px; font-family: textFont; font-size: 15px; color: #ffffff; opacity: 0; visibility: hidden; transition: all .3s linear; }
.bigSliderLink{ line-height: 34px; padding: 0 25px; margin-top: 15px; font-family: titleFont; font-size: 15px; color: #ffffff; border: 1px solid #FFFFFF; opacity: 0; visibility: hidden; display: inline-block; }
.bigSliderLink:hover{ background: #FFFFFF; color: #54227E; }

.indexSliderBox.active{ opacity: 1; z-index: 2; }
.indexSliderBox.active .indexSliderBg img{ transform: scale(1); }
.indexSliderBox.active .bigSliderTitle span{ color: #ffffff; transition: all .3s linear; transition-delay: .3s; }
.indexSliderBox.active .bigSliderTitle span:before{ top: 0; bottom: calc(100% - 20px); right: calc(100% - 20px); left: 0; }
.indexSliderBox.active .bigSliderTitle span:after{ top: calc(100% - 20px); bottom: 0; right: 0; left: calc(100% - 20px); }
.indexSliderBox.active .bigSliderText{ opacity: 1; visibility: visible; }
.indexSliderBox.active .bigSliderLink{ opacity: 1; visibility: visible; }

.indexSlideArrow{ width: 25px; height: 25px; padding: 4px; margin: auto; background: #ffffff; border-radius: 50%; position: absolute; top: 0; bottom: 0; display: none; z-index: 3; cursor: pointer; opacity: .25; transition: all .3s linear; }
#nextSlideArrow{ right: calc(50% - 545px); }
#preSlideArrow{ left: calc(50% - 545px); }
.indexSlideArrow img{ width: 100%; display: block; transition: all .3s linear; }
.indexSlideArrow:hover{ background: #ff7400; opacity: 1; }
.indexSlideArrow:hover img{ filter: brightness(0) invert(1); }

#indexSlideBottom{ width: 100%; line-height: 24px; font-family: titleFont; font-size: 12px; color: #ffffff; position: absolute; bottom: 25px; right: 0; z-index: 3; }
#indexSlideBottom .mainBox3{ display: grid; grid-template-columns: auto 200px; grid-gap: 0 10px; align-items: center; }
#indexSlideBtn{ margin-left: 10px; display: flex; align-items: center; }
#indexSlideBtn span{ width: 15px; height: 5px; margin-right: 3px; background: #ffffff; position: relative; display: block; overflow: hidden; }
#indexSlideBtn span:first-child{ margin-right: 0; }
#indexSlideBtn span:before{ content: ""; width: 100%; height: 100%; background: #ff7400; position: absolute; top: 0; right: 100%; display: block; z-index: 1; }
#indexSlideBtn span.active:before{ right: 0; transition: all 6s linear; }

#indexSlideNumBtn{ display: flex; align-items: center; }
#indexSlideBottomLink{ display: flex; justify-content: flex-end; }
#indexSlideBottomLink a{ margin-left: 5px; color: #ffffff; }
#indexSlideBottomLink a:last-child{ margin-left: 0; }

@keyframes downArrowAnimat{
    0%{ border-color: #ffffff; }
    50%{ border-color: transparent; }
    100%{ border-color: #ffffff; }
}
@keyframes downArrowAnimatImg{
    0%{ opacity: 0; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}
#indexSlideDownArrow{ width: 25px; height: 25px; padding: 5px; margin: auto; border: 1px solid #ffffff; border-radius: 50%; position: absolute; bottom: 80px; right: 0; left: 0; animation: downArrowAnimat 2s infinite linear; display: block; z-index: 3; -webkit-animation: downArrowAnimat 2s infinite linear; }
#indexSlideDownArrow img{ width: 100%; filter: brightness(0) invert(1); animation: downArrowAnimatImg 2s infinite linear; display: block; }
@media only screen and (max-width: 650px){
    .bigSliderInfo .mainBox3{ grid-template-columns: 100%; }
    .bigSliderTextInfo{ width: 100%; height: 100%; padding: 120px 0; margin: auto; position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 100%; align-items: center; text-align: center; }
    .bigSliderTextInfo>section{ padding: 10px 25px; background: rgba(84,34,126,.5); }
    .bigSliderImg{ display: grid; grid-template-columns: 100%; align-items: center; }
    .bigSliderImg img{ width: 100%; max-width: 300px; margin: auto; }
}

/* index about */
#indexAbout{ display: grid; grid-template-columns: 400px auto; grid-gap: 40px 80px; }
#indexAboutImg{ display: block; }
#indexAboutImg img{ width: 100%; display: block; }
#indexAboutMoreLink{ text-align: right; }
#indexAboutMoreLink a{ line-height: 34px; padding: 0 20px; font-family: titleFont; font-size: 15px; color: #ffffff; background: #54227e; display: inline-block; }
#indexAboutMoreLink a:hover{ background: #ff7400; }
@media only screen and (max-width: 850px){
    #indexAbout{ grid-template-columns: 100%; }
}

/* Product Filter Button */
#productFilterBtnBox{ display: flex; align-items: center; justify-content: flex-end; }
#productFilterBtnBox.center{ justify-content: center; }
.productFilterBtn{ line-height: 24px; padding: 0 10px; font-family: titleFont; font-size: 14px; color: #333333; position: relative; display: block; transition: all .3s linear; cursor: pointer; }
.productFilterBtn:hover{ color: #ff7400; }
.productFilterBtn.active{ background: #f8f8f8; z-index: 2; }
.productFilterBtn.active:before{ content: ""; width: 5px; height: 5px; border: solid #666666; border-width: 2px 0 0 2px; position: absolute; top: -2px; left: -2px; display: block; }
.productFilterBtn.active:after{ content: ""; width: 5px; height: 5px; border: solid #666666; border-width: 2px 2px 0 0; position: absolute; top: -2px; right: -2px; display: block; }
.productFilterBtn.active>section:before{ content: ""; width: 5px; height: 5px; border: solid #666666; border-width: 0 0 2px 2px; position: absolute; bottom: -2px; left: -2px; display: block; }
.productFilterBtn.active>section:after{ content: ""; width: 5px; height: 5px; border: solid #666666; border-width: 0 2px 2px 0; position: absolute; bottom: -2px; right: -2px; display: block; }
#productFilterAfterBorder{ width: 300px; max-width: 75%; padding: 1px 0; margin-left: auto; margin-right: auto; background: #f8f8f8; border-radius: 5px; position: relative; }
#productFilterAfterBorder:before{ content: ""; width: 70px; max-width: 40%; height: 100%; margin: auto; background: #aaaaaa; border-radius: 5px; position: absolute; top: 0; right: 0; left: 0; display: block; }
#productFilterAfterBorder img{ margin: auto; position: relative; display: block; z-index: 2; }
@media only screen and (max-width: 900px){
    #productFilterBtnBox{ justify-content: center; }
}
@media only screen and (max-width: 680px){
    #productFilterBtnBox{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5px 5px; }
    .productFilterBtn{ padding: 5px; border: 1px solid #f8f8f8; text-align: center; }
}
@media only screen and (max-width: 680px){
    #productFilterBtnBox{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 450px){
    #productFilterBtnBox{ grid-template-columns: 100%; }
}

/* index Product Filter */
#indexProductFilter{ background: #eeeeee; }
#indexProductFilterTitleGrid{ display: grid; grid-template-columns: 200px auto; grid-gap: 10px 10px; align-items: center; }
.wideProductList{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 25px 25px; }
@media only screen and (max-width: 1100px){
    .wideProductList{ grid-template-columns: repeat(4,1fr); }
}
@media only screen and (max-width: 880px){
    .wideProductList{ grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width: 900px){
    #indexProductFilterTitleGrid{ grid-template-columns: 100%; }
    .indexProductFilterTitle{ text-align: center; }
    .wideProductList{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 500px){
    .wideProductList{ grid-template-columns: 100%; }
}

/* newsletter */
#newsletterBox{ background: url("../images/newsletterBg.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#newsletterBox .mainBox3{ display: grid; grid-template-columns: 120px 270px auto; grid-gap: 20px 20px; align-items: center; }
#newsletterTitle{ position: relative; text-align: center; }
#newsletterTitle:before{ content: ""; width: 5px; height: 5px; border: solid #ffffff; border-width: 2px 0 0 2px; position: absolute; top: -2px; left: -2px; display: block; }
#newsletterTitle:after{ content: ""; width: 5px; height: 5px; border: solid #ffffff; border-width: 2px 2px 0 0; position: absolute; top: -2px; right: -2px; display: block; }
#newsletterTitle>section:before{ content: ""; width: 5px; height: 5px; border: solid #ffffff; border-width: 0 0 2px 2px; position: absolute; bottom: -2px; left: -2px; display: block; }
#newsletterTitle>section:after{ content: ""; width: 5px; height: 5px; border: solid #ffffff; border-width: 0 2px 2px 0; position: absolute; bottom: -2px; right: -2px; display: block; }
#newsletterForm{ display: grid; grid-template-columns: auto 110px; grid-gap: 5px 10px; align-items: center; }
#newsletterForm input{ height: 40px; padding: 0 5px; background: #ffffff; border: none; color: #333333; font-size: 15px; }
#newsletterForm button{ height: 40px; background: #ffffff; border: none; color: #333333; font-family: titleFont; font-size: 15px; text-align: center; cursor: pointer; transition: all .3s linear; }
#newsletterForm button:hover{ background: #ff7400; color: #ffffff; }
@media only screen and (max-width: 840px){
    #newsletterBox .mainBox3{ grid-template-columns: 100%; }
    #newsletterTitle{ width: 200px; margin: auto; }
    #newsletterBox .readText{ text-align: center; }
}
@media only screen and (max-width: 420px){
    #newsletterForm{ grid-template-columns: 100%; }
}

/* index last news */
#indexLastNewsTitle{ text-align: center; }
#indexLastNewsTitle .readText{ text-align: center; }

/* footer */
footer{ background: #54227e; line-height: 24px; font-family: textFont; font-size: 14px; color: #cccccc; text-align: justify; text-justify: auto; }
#footerGrid{ display: grid; grid-template-columns: 1fr 1fr 140px 250px; grid-gap: 30px 40px; }

#footerLogo{ width: 120px; display: block; }
#footerLogo img{ width: 100%; display: block; transition: all .3s linear; }

.footerContactInfo{ line-height: 24px; margin-bottom: 15px; display: grid; grid-template-columns: 22px auto; grid-gap: 0 5px; align-items: flex-start; }
.footerContactInfo:last-child{ margin-bottom: 0; }
.footerContactInfo figure{ padding: 2px 5px 2px 0; border-right: 1px solid rgba(255,255,255,.5); }
.footerContactInfo figure img{ width: 100%; filter: brightness(0) invert(1); display: block; -webkit-filter: brightness(0) invert(1); }
.footerContactInfo a{ color: #cccccc; }
.footerContactInfo a:hover{ color: #ff7400; }

.footerHead{ line-height: 24px; font-family: titleFont; font-size: 17px; color: #ffffff; }
.footerHead:after{ content: ""; width: 30px; height: 2px; margin-top: 10px; background: #ff7400; display: block; }

.footerNewsList a{ color: #f6ae00; }
.footerNewsList a:hover{ color: #CCCCCC; }

.footerLinkBox{ display: grid; grid-gap: 2px 2px; }
.footerLinkBox a{ color: #cccccc; display: block; }
.footerLinkBox a:hover{ color: #ff7400; }

#footerLastProduct{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5px 5px; }
#footerLastProduct a{ position: relative; display: block; }
#footerLastProduct a:before{ content: ""; width: 100%; height: 100%; background: rgba(84,34,126,.7); position: absolute; top: 0; left: 0; opacity: 0; display: block; transition: all .3s linear; z-index: 1; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
#footerLastProduct a img{ width: 100%; display: block; }
.newsListImg img{ width: 100%; display: block; }
#footerLastProduct a:hover:before{ opacity: 1; }
#footerLastProduct a:hover img{ filter: grayscale(100%); }

#footerStrip{ line-height: 24px; font-family: enTextFont; font-size: 12px; color: #777777; background: #222222; }
#footerStrip .mainBox3{ display: grid; grid-template-columns: 220px auto; align-items: center; }
#footerStripSocial{ display: flex; align-items: center; justify-content: flex-end; }
#footerStripSocial a{ width: 20px; margin-left: 3px; display: block; }
#footerStripSocial a:last-child{ margin-left: 0; }
#footerStripSocial a img{ width: 100%; filter: brightness(0) invert(1); display: block; transition: all .3s linear; }
#footerStripSocial a:hover img{ filter: none; }
#footerStrip a{ color: #ffffff; }
#footerStrip a:hover{ color: #ff7400; }
@media only screen and (max-width: 1000px){
    #footerGrid{ grid-template-columns: 100%; grid-gap: 30px 40px; }
    .footerLinkBox{ grid-template-columns: repeat(4,1fr); }
    .footerLinkBox a{ padding: 0 5px; border: 1px solid #CCCCCC; text-align: center; }
}
@media only screen and (max-width: 700px){
    .footerLinkBox{ grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width: 540px){
    .footerLinkBox{ grid-template-columns: repeat(2,1fr); }
    #footerLastProduct{ grid-template-columns: repeat(2,1fr); }
}

/* page Banner */
#pageBanner{ padding: 140px 0; position: relative; text-align: center; }
#pageBanner:before{ content: ""; width: 100%; height: 100%; background: rgba(84,34,126,.85); position: absolute; top: 0; left: 0; display: block; z-index: 1; }
#pageBanner .mainBox3{ z-index: 2; }
#pageNavigation{ line-height: 24px; font-family: textFont; font-size: 13px; color: #ffffff; }
#pageNavigation a{ color: #ffffff; }
#pageNavigation a:after{ content: "/"; margin: 0 3px; color: #ffffff; display: inline-block; }
#pageNavigation a:hover{ color: #ff7400; }

/* page Grid */
.pageGrid{ display: grid; grid-template-columns: auto 230px; grid-gap: 80px 80px; align-items: flex-start; }
@media only screen and (max-width: 840px){
    .pageGrid{ grid-template-columns: 100%; }
}

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

.productListInfo{ position: relative; }
.productListInfo:before{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 2px 0 0 2px; position: absolute; top: -2px; left: -2px; display: block; opacity: 0; transition: all .3s linear; }
.productListInfo:after{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 2px 2px 0 0; position: absolute; top: -2px; right: -2px; display: block; opacity: 0; transition: all .3s linear; }
.productListInfo>section:before{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 0 0 2px 2px; position: absolute; bottom: -2px; left: -2px; display: block; opacity: 0; transition: all .3s linear; }
.productListInfo>section:after{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 0 2px 2px 0; position: absolute; bottom: -2px; right: -2px; display: block; opacity: 0; transition: all .3s linear; }
.productListInfo:hover:before,.productListInfo:hover:after,.productListInfo:hover>section:before,.productListInfo:hover>section:after{ opacity: 1; }
.productListImg{ position: relative; display: block; }
.productListImg:before{ content: ""; width: 100%; height: 100%; background: rgba(84,34,126,.7); position: absolute; top: 0; left: 0; opacity: 0; display: block; transition: all .3s linear; z-index: 1; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.productListImg img{ width: 100%; display: block; }
.productListImg:hover:before{ opacity: 1; }
.productListImg:hover img{ filter: grayscale(100%); }
.productListTxtGrid{ padding: 5px 10px; background: #ffffff; display: grid; grid-template-columns: auto 70px; grid-gap: 0 5px; align-items: center; }
.productListTitle{ line-height: 24px; font-family: titleFont; font-size: 15px; color: #333333; }
.productListTitle:hover{ color: #ff7400; }
.productListLikeInfo{ line-height: 24px; font-family: titleFont; font-size: 13px; display: grid; grid-template-columns: auto 17px; grid-gap: 0 5px; align-items: center; justify-content: flex-end; }
.productListLikeInfo img{ width: 100%; display: block; }
@media only screen and (max-width: 720px){
    .productListGrid{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 500px){
    .productListGrid{ grid-template-columns: 100%; }
}

/* news list */
.newsListImg{ position: relative; display: block; }
.newsListImg:before{ content: ""; width: 100%; height: 100%; background: rgba(84,34,126,.7); position: absolute; top: 0; left: 0; opacity: 0; display: block; transition: all .3s linear; z-index: 1; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.newsListImg img{ width: 100%; display: block; }
.newsListImg:hover:before{ opacity: 1; }
.newsListImg:hover img{ filter: grayscale(100%); }
.newsListTitle{ line-height: 24px; padding: 5px 10px; background: #eeeeee; font-family: titleFont; font-size: 15px; color: #333333; display: block; }
.newsListTitle:hover{ color: #ff7400; }

.newsListDetail{ line-height: 24px; padding: 5px 10px; font-family: titleFont; font-size: 14px; background: #444444; color: #ffffff; display: grid; grid-template-columns: auto 70px; grid-gap: 0 5px; align-items: center; }

.NewsListLikeInfo{ display: grid; grid-template-columns: auto 17px; grid-gap: 0 5px; align-items: center; justify-content: flex-end; }
.NewsListLikeInfo img{ width: 100%; filter: brightness(0) invert(1); display: block; }

/* news column list */
#newsColListGrid{ display: grid; grid-template-columns: 100%; grid-gap: 40px 0; }
.newsColListImg{ position: relative; display: block; }
.newsColListImg:before{ content: ""; width: 100%; height: 100%; background: rgba(84,34,126,.7); position: absolute; top: 0; left: 0; opacity: 0; display: block; transition: all .3s linear; z-index: 1; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
.newsColListImg img{ width: 100%; display: block; }
.newsColListImg:hover:before{ opacity: 1; }
.newsColListImg:hover img{ filter: grayscale(100%); }

.newsColListDetail{ width: 100%; line-height: 24px; font-family: textFont; font-size: 13px; color: #ffffff; background: #444444; display: flex; align-items: center; }
.newsColListDetail>section{ padding: 5px 10px; display: grid; grid-template-columns: 15px auto; grid-gap: 0 5px; align-items: center; }
.newsColListDetail>section:nth-child(1){ background: #ff7f00; }
.newsColListDetail>section:nth-child(3){ background: #555555; }
.newsColListDetail>section img{ width: 100%; filter: brightness(0) invert(1); display: block; -webkit-filter: brightness(0) invert(1); }

.newsColListTitle{ line-height: 28px; margin-top: 20px; font-family: titleFont; font-size: 17px; color: #333333; display: block; }
.newsColListTitle:hover{ color: #ff7400; }
.newsColListBy{ line-height: 24px; font-family: textFont; font-size: 13px; color: #333333; }

.newsColListTxt{ padding-top: 20px; margin-top: 20px; border-top: 1px solid #dddddd; }

.newsColListBtn{ margin-top: 20px; text-align: right; }
.newsColListBtn a{ line-height: 24px; padding: 3px 20px; font-family: titleFont; font-size: 15px; color: #333333; border: 1px solid #d5d5d5; display: inline-block; }
.newsColListBtn a:hover{ border-color: #ff7400; background: #ff7400; color: #ffffff; }
@media only screen and (max-width: 400px){
    .newsColListDetail{ display: block; }
    .newsColListDetail>section{ justify-content: space-between; }
}

/* paging */
#pagingBox{ margin-top: 40px; display: flex; align-items: center; justify-content: center; direction: ltr; }
#pagingBox a{ width: 30px; height: 30px; line-height: 30px; margin-right: 3px; font-family: titleFont; font-size: 15px; color: #ff7400; background: #e6e7e8; border-radius: 50%; text-align: center; display: block; }
#pagingBox a:last-child{ margin-right: 0; }
#pagingBox a:hover{ background: #ff7400; color: #ffffff; }
#pagingBox a.active{ background: #54227e; color: #ffffff; }

/* column Info */
#newsSearchForm{ border: 1px solid #d5d5d5; display: grid; grid-template-columns: auto 34px; align-items: center; }
#newsSearchForm input{ width: 100%; height: 34px; padding: 0 5px; border: none; background: none; color: #cccccc; display: block; }
#newsSearchForm button{ width: 100%; height: 34px; padding: 5px; border: none; background: none; display: block; cursor: pointer; }
#newsSearchForm button img{ filter: brightness(.5) invert(.5); opacity: .5; transition: all .3s linear; }
#newsSearchForm button:hover img{ filter: none; }

#newsListCat a{ line-height: 24px; padding: 5px 0; font-family: titleFont; font-size: 15px; color: #666666; border-bottom: 1px solid #dcdcdc; display: grid; grid-template-columns: auto 40px; grid-gap: 0 5px; align-items: center; }
#newsListCat a:first-child{ border-top: 1px solid #dcdcdc; }
#newsListCat a span{ color: #cccccc; text-align: right; }
#newsListCat a:hover{ color: #ff7400; }

.columnLastNewsInfo{ margin-top: 15px; display: grid; grid-template-columns: 80px auto; grid-gap: 0 5px; align-items: center; }
.columnLastNewsInfo:first-child{ margin-top: 0; }
.columnLastNewsImg{ display: block; }
.columnLastNewsImg img{ width: 100%; display: block; }
.columnLastNewsTitle{ line-height: 24px; font-family: titleFont; font-size: 15px; color: #1f1f1f; display: block; }
.columnLastNewsTitle:hover{ color: #ff7400; }
.columnLastNewsDate{ line-height: 18px; margin-top: 5px; font-family: textFont; font-size: 13px; color: #999999; display: inline-block; }

#columnTagList{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5px 5px; align-items: flex-start; }
#columnTagList a{ line-height: 24px; padding: 3px 5px; font-family: titleFont; font-size: 13px; color: #666666; border: 1px solid #dcdcdc; text-align: center; }
#columnTagList a:hover,#columnTagList a.active{ border-color: #ff7400; background: #ff7400; color: #ffffff; }
@media only screen and (max-width: 840px){
    #columnLastNewsGrid{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 15px 15px; align-items: center; }
    .columnLastNewsInfo{ margin-top: 0; }
}
@media only screen and (max-width: 650px){
    #columnLastNewsGrid{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 500px){
    #columnLastNewsGrid{ grid-template-columns: 100%; }
}

/* news view */
.newsImg{ position: relative; display: block; }
.newsImg img{ width: 100%; display: block; }

.newsDetail{ width: 100%; line-height: 24px; font-family: textFont; font-size: 13px; color: #ffffff; background: #444444; display: flex; align-items: center; }
.newsDetail>section{ padding: 5px 10px; display: grid; grid-template-columns: 15px auto; grid-gap: 0 5px; align-items: center; }
.newsDetail>section:nth-child(1){ background: #ff7f00; }
.newsDetail>section:nth-child(3){ background: #555555; }
.newsDetail>section img{ width: 100%; filter: brightness(0) invert(1); display: block; }

.newsTitle{ margin-top: 20px; }
.newsBy{ line-height: 24px; font-family: textFont; font-size: 14px; color: #333333; }

.newsTxt{ padding-top: 20px; margin-top: 20px; border-top: 1px solid #dddddd; }
@media only screen and (max-width: 400px){
    .newsDetail{ display: block; }
    .newsDetail>section{ justify-content: space-between; }
}

/* news share */
#newsBottomBtn{ border: solid #dcdcdc; border-width: 1px 0 1px 0; display: grid; grid-template-columns: auto 110px; grid-gap: 10px 10px; align-items: center; }
#newsShareViewPage{ line-height: 24px; font-family: titleFont; font-size: 15px; display: grid; grid-template-columns: 50px auto; align-items: center; }
#newsShareViewPageLink{ display: flex; align-items: center; }
#newsShareViewPageLink a{ width: 25px; margin-left: 3px; border: 1px solid #000000; border-radius: 50%; opacity: .3; display: block; }
#newsShareViewPageLink a:first-child{ margin-left: 0; }
#newsShareViewPageLink a:hover{ opacity: 1; }
#newsShareViewPageLink a img{ width: 100%; margin: 0 !important; display: block; }
#newslike{ line-height: 32px; font-family: titleFont; font-size: 15px; color: #ffffff; background: #ee0000; text-align: center; transition: all .3s linear; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; }
#newslike:hover{ background: #ff7400; }
#newslike.active{ background: none; color: #000000; cursor: auto; }
@media only screen and (max-width: 500px){
    #newsBottomBtn{ grid-template-columns: 100%; }
    #newsShareViewPage{ justify-content: center; }
}

/* comment */
.commentInfoGrid{ display: grid; grid-template-columns: 60px auto; grid-gap: 0 10px; align-items: flex-start; }
.commentInfoGrid img{ width: 100%; display: block; }
.commentInfoName{ line-height: 24px; font-family: titleFont; font-size: 15px; color: #333333; }
.commentInfoName span{ font-family: textFont; font-size: 13px; color: #bebebe; }

#commentFormInput{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 10px 10px; align-items: center; }
#commentFormInput input{ height: 34px; padding: 0 5px; border: 1px solid #dcdcdc; color: #cccccc; }
#commentForm textarea{ width: 100%; height: 220px; padding: 5px 5px; margin-top: 10px; border: 1px solid #dcdcdc; color: #cccccc; resize: none; }
#commentForm button{ height: 36px; padding: 0 30px; margin-top: 20px; font-family: titleFont; font-size: 15px; border: none; background: #ff7400; display: grid; grid-template-columns: 20px auto; grid-gap: 0 5px; align-items: center; color: #ffffff; cursor: pointer; transition: all .3s linear; }
#commentForm button img{ width: 100%; filter: brightness(0) invert(1); display: block; }
#commentForm button:hover{ background: #54227e; }
@media only screen and (max-width: 930px){
    #commentFormInput{ grid-template-columns: 100%; }
}
@media only screen and (max-width: 420px){
    .commentInfoGrid{ grid-template-columns: 40px auto; }
}

/* product view */
#productView{ background: #e9e9e9; }
#productView .mainBox3{ display: grid; grid-template-columns: 350px auto; grid-gap: 40px 30px; align-items: flex-start; }
#productViewImg{ display: block; }
#productViewImg img{ width: 100%; display: block; }
#productViewShopGrid{ display: grid; grid-template-columns: auto 130px; align-items: center; }
#productViewPrice{ line-height: 24px; font-family: titleFont; }
#productViewPrice>span:nth-child(1){ font-size: 17px; }
#productViewPrice>span:nth-child(2){ font-size: 13px; }
#productViewAddToShop{ line-height: 34px; font-family: titleFont; font-size: 15px; color: #ffffff; background: #ff7400; border-radius: 17px; cursor: pointer; text-align: center; transition: all .3s linear; }
#productViewAddToShop:hover{ background: #54227e; }
#productViewStock{ line-height: 34px; font-family: titleFont; font-size: 15px; color: #ffffff; background: #ee0000; border-radius: 17px; text-align: center; }
#productViewTxt{ border-top: 1px solid #dddddd; }
#productStarRatingGrid{ color: #999999; display: grid; grid-template-columns: 90px auto; grid-gap: 0 5px; align-items: center; }
@media only screen and (max-width: 800px){
    #productView .mainBox3{ grid-template-columns: 100%; }
}

/* product share */
#productBottomBtn{ border: solid #dcdcdc; border-width: 1px 0 1px 0; display: grid; grid-template-columns: auto 110px; grid-gap: 10px 10px; align-items: center; }
#productShareViewPage{ line-height: 24px; font-family: titleFont; font-size: 15px; color: #999999; display: grid; grid-template-columns: 50px auto; align-items: center; }
#productShareViewPageLink{ display: flex; align-items: center; }
#productShareViewPageLink a{ width: 25px; margin-left: 3px; background: #cccccc; display: block; }
#productShareViewPageLink a:first-child{ margin-left: 0; }
#productShareViewPageLink a:hover{ background: #ff7400; }
#productShareViewPageLink a img{ width: 100%; margin: 0 !important; filter: brightness(0) invert(1); display: block; }
@media only screen and (max-width: 500px){
    #productBottomBtn{ grid-template-columns: 100%; }
    #productShareViewPage{ justify-content: center; }
}

/* related product */
#relatedProductList{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px 40px; align-items: flex-start; }
@media only screen and (max-width: 720px){
    #relatedProductList{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 500px){
    #relatedProductList{ grid-template-columns: 100%; }
}

/* about */
#sidebar{ position: relative; }
@media only screen and (max-width: 800px){
    #sidebar{ position: static; }
}

/* about */
#aboutTeam{ background: #e9e9e9; }
#aboutTeamGrid{ display: grid; grid-template-columns: repeat(5,1fr); align-items: flex-start; }
.aboutTeamInfo{ position: relative; }
.aboutTeamInfo:before{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 2px 0 0 2px; position: absolute; top: -2px; left: -2px; display: block; opacity: 0; }
.aboutTeamInfo:after{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 2px 2px 0 0; position: absolute; top: -2px; right: -2px; display: block; opacity: 0; }
.aboutTeamInfo>section:before{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 0 0 2px 2px; position: absolute; bottom: -2px; left: -2px; display: block; opacity: 0; }
.aboutTeamInfo>section:after{ content: ""; width: 9px; height: 9px; border: solid #858585; border-width: 0 2px 2px 0; position: absolute; bottom: -2px; right: -2px; display: block; opacity: 0; }
.aboutTeamInfo:hover{ z-index: 2; }
.aboutTeamInfo:hover:before,.aboutTeamInfo:hover:after,.aboutTeamInfo:hover>section:before,.aboutTeamInfo:hover>section:after{ opacity: 1; transition: all .3s linear; }

.aboutTeamInfo img{ width: 100%; display: block; }
.aboutTeamText{ width: 100%; height: 100%; background: rgba(255,255,255,.95); position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 100%; align-items: center; text-align: center; opacity: 0; visibility: hidden; transition: all .3s linear; }
.aboutTeamLogo{ padding: 5px 10px; background: #ffffff; }
.aboutTeamLogo img{ max-width: 90px; margin: auto; }
.aboutTeamName{ line-height: 24px; margin-top: 10px; font-family: titleFont; font-size: 15px; color: #333333; }
.aboutTeamPosition{ line-height: 24px; font-family: textFont; font-size: 14px; color: #999999; }
.aboutTeamInfo:hover .aboutTeamText{ opacity: 1; visibility: visible; }
@media only screen and (max-width: 950px){
    #aboutTeamGrid{ grid-template-columns: repeat(4,1fr); }
}
@media only screen and (max-width: 750px){
    #aboutTeamGrid{ grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width: 650px){
    #aboutTeamGrid{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 400px){
    #aboutTeamGrid{ grid-template-columns: 100%; }
}

/* contact */
#contactView{ display: grid; grid-template-columns: auto 450px; grid-gap: 30px 40px; align-items: flex-start; }
#contactForm input{ width: 100%; height: 34px; padding: 0 5px; margin-bottom: 10px; border: 1px solid #dcdcdc; color: #cccccc; display: block; }
#contactForm textarea{ width: 100%; height: 180px; padding: 5px 5px; border: 1px solid #dcdcdc; color: #cccccc; resize: none; }

#contactBtn{ text-align: right; }
#contactBtn button{ line-height: 24px; padding: 3px 30px; font-family: titleFont; font-size: 15px; color: #ffffff; border: none; background: #ff7400; display: inline-block; cursor: pointer; transition: all .3s linear; }
#contactBtn button:hover{ background: #54227e; color: #ffffff; }

#contactView iframe{ height: 440px; }

#contactSocial{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; direction: ltr; }
#contactSocial a{ line-height: 24px; font-family: enTitleFont; font-size: 14px; color: #666666; display: block; }
#contactSocial a:after{ content: "|"; margin: 0 10px; color: #666666; display: inline-block; }
#contactSocial a:last-child:after{ display: none; }
#contactSocial a:hover{ color: #ff7400; }
@media only screen and (max-width: 800px){
    #contactView{ grid-template-columns: 100%; }
}
@media only screen and (max-width: 300px){
    #contactSocial{ display: block; }
    #contactSocial a{ padding: 5px 5px; margin-top: 5px; border: 1px solid #666666; text-align: center; }
    #contactSocial a:after{ display: none; }
    #contactSocial a:first-child{ margin-top: 0; }
}

/* end view text */
.readText{ line-height: 24px; font-family: textFont; font-size: 15px; color: #4c4c4c; text-align: justify; text-justify: auto; }
.readText.white{ color: #ffffff; }
.readText.center{ text-align: center; }
.readText h2,.readText h3,.readText h4,.readText h5,.readText h6{ line-height: 34px; margin: 30px auto 10px auto; font-family: titleFont; font-size: 17px; color: #4c4c4c; }
.readText.white h2,.readText.white h3,.readText.white h4,.readText.white h5,.readText.white h6{ color: #ffffff; }
.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; }
.readText iframe{ width: 100%; display: block; }
.readText video{ width: 100%; display: block; }

.readText ol,.readText ul{ padding-right: 15px; }
.readText img{ max-width: 100%; margin: 20px auto; display: block; }
.readText img:first-child{ margin: 0 auto 30px auto; }
.readText a{ color: #ff7400; display: inline-block; }
.readText a:hover{ color: #54227e; }
.readText.white a{ color: #ff7400; }
.readText.white a:hover{ color: #ffffff; }

/* check box */
.checkedBox { width: 24px; height: 24px; 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: 24px; height: 24px; position: absolute; top: 0; left: 0; border: 1px solid #bcbec0; transition: all .2s linear; }
.checkedBox:hover input ~ .checkmark { background-color: #ccc; }
.checkedBox input:checked ~ .checkmark { background-color: #54227e; border-color: #54227e; }
.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; }

/* star */
.starRating{ position: relative; top: -2px; }
.starRating:after{ content: ""; display: block; clear: both; }
.starRating:not(old){ width: 90px; height: 18px; overflow: hidden; vertical-align : bottom; display: inline-block; }
.starRating:not(old)>input{ margin-right: -100%; opacity: 0; }
.starRating:not(old)>label{ background: url('../images/icon/starOff.svg'); background-size: contain; position: relative; display: block; float: right; }
.starRating:not(old)>label:before{ content: ''; width: 18px; height: 18px; background: url('../images/icon/starOn.svg'); background-size: contain; opacity: 0; display: block; transition: opacity 0.2s linear; cursor: pointer; }
.starRating:not(old)>label:hover:before,.starRating:not(old)>label:hover~label:before,.starRating:not(:hover) > :checked~label:before{ opacity : 1; }