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; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type=search] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --main-color: #FFCD05; --main-color60: #FFCD0560; --default-color: #FFFFFF; --default-color50: #FFFFFF50; --default-color70: #FFFFFF70; --background-color-body: #000; --background-color: #272727; --max-width-size: 1328px; --background-color2: #FFFFFF; } @font-face { font-family: 'cabin'; font-style: normal; font-weight: 400; src: url(/font/Cabin-Regular.ttf); } @font-face { font-family: 'Farhang'; font-style: normal; font-weight: 400; src: url(/font/farhang.woff); src: url(/font/farhang.woff) format('woff'), url(/font/farhang.eot?#iefix) format('embedded-opentype'), url(/font/farhang.ttf) format('truetype') } ::selection { background: var(--main-color); color: var(--background-color-body); text-shadow: none; } html { scroll-behavior: smooth; scroll-padding-top: 80px; direction: ltr; font-size: 14px; } @media only screen and (min-width:0px) and (max-width:959px) { html { font-size: 14px; } } @media only screen and (min-width:959px) and (max-width:1300px) { html { font-size: 12px; } } body { background: var(--background-color); font-family: 'cabin'; background-color: var(--background-color); position: relative; } body.color2 { background-color: var(--background-color); } img { background: transparent; } strong { font-weight: bold; } .youttubeEmbedFrame{ width: 100%; } footer.pageFooter { display: flex; flex-direction: row; width: 100%; padding: 2rem calc(((100% - min(100%, var(--max-width-size))) / 2) + 5rem); box-sizing: border-box; z-index: -2; background-color: #353535; border-top: 1px solid var(--main-color); } footer.pageFooter.color2 { background-color: var(--background-color); } @media only screen and (min-width:0px) and (max-width:500px) { footer.pageFooter { left: 0; } } footer.pageFooter>* { display: flex; flex-direction: column; } footer.pageFooter>.left { width: 50%; } footer.pageFooter>.right { width: 50%; } footer.pageFooter h3 { display: flex; flex-direction: column; font-size: 1.5625rem; line-height: normal; color: var(--default-color); margin-bottom: 1.9rem; } footer.pageFooter h3>em { font-size: 1.25rem; line-height: normal; color: var(--main-color); font-style: italic; } footer.pageFooter>.left>a { text-decoration: none; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; width: 100%; color: var(--default-color); font-size: 1.125rem; padding-top: 1rem; line-height: normal; } footer.pageFooter>.left>a::before { content: ''; width: 1.5rem; height: 2rem; background-repeat: no-repeat; background-position: center; background-size: 1.5rem auto; display: inline-block; margin-right: 0.5rem; } footer.pageFooter>.left>a.addressLogo::before { background-image: url(/image/location.svg); background-size: 1.2rem auto; } footer.pageFooter>.left>a.emailLogo::before { background-image: url(/image/Email.svg); } footer.pageFooter>.left>a.telLogo::before { background-image: url(/image/phone.svg); } footer .socialPart { width: 100%; margin: 1rem 0 1.5rem; display: flex; } footer .socialPart>* { padding-right: 1.5rem; text-align: center; text-decoration: none; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; } footer .socialPart>*:before { text-align: center; font-family: 'Farhang'; font-size: 2rem; color: var(--default-color); } footer .socialPart>.instagramLogo:before { content: '\f16d'; } footer .socialPart>.facebookLogo:before { content: '\f082'; } footer>.right>p { font-size: 1.125rem; color: var(--default-color); line-height: normal; } footer>.right>h4 { padding-top: 0.875rem; font-size: 1rem; color: var(--default-color); } footer>.right>h4>a { text-decoration: none; font-size: 0.9rem; color: var(--main-color); font-style: italic; } @media only screen and (min-width:0px) and (max-width:959px) { footer.pageFooter { flex-direction: column; padding: 2rem 2rem; box-sizing: border-box; } footer.pageFooter>.left { width: 100%; margin-bottom: 1rem; } footer.pageFooter>.right { width: 100%; } footer>.right>h4 { font-size: 1rem; font-style: italic; } } main>button { width: 40px; height: 40px; border-radius: 50%; background-color: white; position: absolute; top: 80vh; left: calc(50% - 20px); border: 0; background-image: url(/image/buttomArrow.svg); background-repeat: no-repeat; background-size: 20px 20px; background-position: 10px 10px; animation-name: bannerClick; animation-duration: 1s; animation-delay: 0; animation-iteration-count: 1; opacity: 0.5; transform: translateY(20px); } @keyframes bannerClick { from { opacity: 0; transform: translateY(-20px); } to { opacity: 0.5; transform: translateY(20px); } } h1 { width: 100%; padding: 4.5rem; box-sizing: border-box; font-size: 3.125rem; line-height: 4rem; color: var(--default-color); text-align: center; position: absolute; top: calc((100vh - 17rem) / 2); left: 0; text-shadow: 0 0 1rem black; display: flex; flex-direction: column; justify-content: center; } h1>em { color: #FFCD05; font-size: 2.5rem; } main>ul { position: absolute; display: flex; flex-direction: row; justify-content: space-around; align-items: center; top: calc(100vh - 6rem); left: 0; width: 80%; margin: 0 10%; color: #FFF; text-align: center; font-family: Cabin; font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 3rem; } main>ul>li { display: flex; flex-direction: row; justify-content: center; align-items: center; text-shadow: 0 0 1rem black; } main>ul>li.start { width: 0.9375rem; height: 0.9375rem; rotate: 45deg; background: #FFCD05; display: block; } article { background-color: var(--background-color2); z-index: 0; position: relative; width: 100%; padding: 6rem calc(((100% - min(100%, var(--max-width-size))) / 2) + 4.2rem) 7.5rem; box-sizing: border-box; } article>p { width: 100%; padding: 0 10rem 2rem 4.5rem; box-sizing: border-box; font-size: 1.5rem; line-height: 2.5rem; color: var(--background-color-body); } article>div { width: 100%; padding: 4rem 0 0 4.5rem; box-sizing: border-box; font-size: 1rem; line-height: 1.2rem; color: var(--background-color-body); display: flex; flex-direction: row; } article>div>a { text-decoration: none; color: var(--background-color-body); margin-right: 10rem; position: relative; display: flex; justify-content: center; align-content: center; font-size: 1.5rem;; } article>div>a::before { content: ''; background-color: var(--background-color-body); height: 1px; width: 0; position: absolute; bottom: -0.5rem; right: 0; left: unset; -webkit-transition: all 0.5s ease 0.15s; -moz-transition: all 0.5s ease 0.15s; -o-transition: all 0.5s ease 0.15s; transition: all 0.5s ease 0.15s; } article>div>a:hover::before { width: 100%; left: 0; right: unset; -webkit-transition: all 0.5s ease 0.15s; -moz-transition: all 0.5s ease 0.15s; -o-transition: all 0.5s ease 0.15s; transition: all 0.5s ease 0.15s; } article>div>a::after { content: ''; background-image: url(/image/rightArrow.svg); background-size: 3.7rem auto; background-repeat: no-repeat; width: 3.7rem; display: inline-block; height: 2rem; margin-left: 2rem; position: absolute; top: 0; right: -5rem; } main>img { height: 100vh; font-size: 10vmin; box-sizing: border-box; color: hsla(0, 0%, 100%, .1); cursor: default; width: 100%; z-index: 0; object-fit: cover; position: relative; background-color: var(--background-color); } @media only screen and (min-width:0px) and (max-width:959px) { article { padding: 0; } main>h1 { top: calc((100vh - 20rem) / 2); font-size: 1.875rem; padding-left: 1rem; padding-right: 1rem; line-height: 2.5rem; } main>h1>em { font-size: 1.5625rem; } main>ul { flex-direction: column; margin: 0; width: 100%; padding: 0 2rem; font-size: 1.25rem; box-sizing: border-box; top: calc(100svh - 11rem); } main>ul>li.start { display: none; } main>ul::before, main>ul::after{ content: ''; width: 0.45931rem; height: 0.45931rem; rotate: 45deg; background: #FFCD05; display: block; position: absolute; top: -0.5rem; } main>ul::after{ top: unset; bottom: -0.75rem; } article>p { padding: 5rem 1.5rem 4rem; } article>div { padding: 0 1.5rem 4rem; flex-direction: column; align-items: flex-start; } article>div>a { padding: 1rem 0; min-width: 12rem; justify-content: flex-start; } article>div>a::after { height: 3.2rem; background-size: 2rem 3.2rem; } article>div>a:hover::before { width: 0; } } body.disable { overflow: hidden; margin-right: 17px; } .menu { background-color: transparent; position: fixed; top: 0; left: 0; padding: 0.6rem calc((100% - (min(100%, var(--max-width-size)) - 9.2rem)) / 2) 0; width: calc(min(100%, var(--max-width-size)) - 9.2rem); height: 4.1rem; z-index: 3; background: #353535; /* backdrop-filter: blur(20px); */ -webkit-backdrop-filter: blur(20px); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; overflow: hidden; } .menu.big { height: 5.6rem; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu.active { height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: backBlur 1s ease-in 0s 1; } @keyframes backBlur { 0% { height: 100vh; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } 1% { height: 100vh; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } 100% { height: 100vh; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } } .menu>section { display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-sizing: border-box; z-index: 1; width: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu.active>section { opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu>section>a { color: var(--default-color); text-decoration: none; padding: 1rem 0 1rem 1rem; margin-right: 2rem; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: normal; } .menu>section>span { position: absolute; width: calc(min(100%, var(--max-width-size)) - 9.2rem); height: 1px; bottom: 0; background-color: rgba(255, 255, 255, 0.3); } .menu>section>div { display: flex; flex-direction: row; margin-left: 2rem; align-items: center; width: 8rem; justify-content: space-between; } .menu>section>div>a { width: 3.5rem; height: 3.5rem; display: flex; flex-direction: column; justify-content: center; /* margin-right: 2rem; */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; padding-left: 0.75rem; } .menu.big>section>div>a { width: 5rem; height: 5rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; padding-left: 0; } .menu .hamburger { position: relative; height: 1.4rem; width: 1.8rem; max-width: 70px; display: flex; cursor: pointer; border-radius: 2px; padding: 0.2rem; box-sizing: border-box; } .menu .hamburger::before, .menu .hamburger::after { content: ''; background-color: var(--default-color); width: 1rem; height: 0.2rem; position: absolute; z-index: -1; border-radius: 0.2rem; -webkit-transition: all 0.2s ease 0.1s; -moz-transition: all 0.2s ease 0.1s; -o-transition: all 0.2s ease 0.1s; transition: all 0.2s ease 0.1s; } .menu .hamburger::before { top: 0.1rem; left: 0; } .menu .hamburger::after { bottom: 0.1rem; right: 0; } .menu .hamburger>.hamburgerLine, .menu .hamburger>.hamburgerLine::before, .menu .hamburger>.hamburgerLine::after { content: ''; background-color: var(--default-color); width: 1.8rem; height: 0.2rem; position: absolute; top: 0.6rem; right: 0; border-radius: 0.2rem; -webkit-transition: all 0.2s ease 0.1s; -moz-transition: all 0.2s ease 0.1s; -o-transition: all 0.2s ease 0.1s; transition: all 0.2s ease 0.1s; } .menu .hamburger>.hamburgerLine::before { width: 0.2rem; height: 0.2rem; top: 0.5rem; right: 0; } .menu .hamburger>.hamburgerLine::after { top: 0; right: 0; } .menu .hamburger:hover::before { left: 0.8rem; } .menu .hamburger:hover::after { right: 0.8rem; } .menu .hamburger:hover>.hamburgerLine::before { transform: rotate(45deg); background-color: var(--main-color); animation-name: flashPoint; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: forward; } @keyframes flashPoint { 0% { box-shadow: none; opacity: 1; } 100% { box-shadow: 0 0 2px 4px var(--main-color); opacity: 0; } } .menu .hamburger.active::before { transform-origin: 100% 100%; transform: rotate(-45deg) translateX(0.6rem) translateY(0.6rem); opacity: 0; } .menu .hamburger.active::after { transform-origin: 0% 0%; transform: rotate(-45deg) translateX(-0.6rem) translateY(-0.6rem); opacity: 0; } .menu .hamburger.active>.hamburgerLine { transform: rotate(45deg); } .menu .hamburger.active>.hamburgerLine:after { transform: rotate(-90deg); } .menu .hamburger.active>.hamburgerLine::before { top: 0; right: 0.8rem; z-index: 5; } .menuItem .hSpan2 { z-index: 3; position: absolute; left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + 13.5rem); top: 2.5rem; } @media only screen and (min-width:0px) and (max-width:959px) { .menuItem .hSpan2 { left: 2.5rem; } } /* .menu.small .menu, .menu.smallWithLine>div { padding: 0 max(calc((100% - var(--max-width-size)) / 2), 5%); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); -webkit-transition: all 0.3s ease 0.1s; -moz-transition: all 0.3s ease 0.1s; -o-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s; z-index: 1; position: fixed; box-sizing: border-box; } .menu.color2 .menu.small, .menu.color2 .menu.smallWithLine { background: rgba(0, 0, 0, 0); } */ .menu.small>div.headerLine { height: 0; } .menu .menuItem { position: absolute; opacity: 0; width: 100%; left: -100%; top: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; /* background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); */ z-index: 2; animation: hideMenu 0.5s ease-in-out 0s 1; } @keyframes hideMenu { 0% { opacity: 1; left: 0; } 99% { opacity: 0; left: 0; } 100% { opacity: 0; left: -100%; } } .menu .menuItem>* { opacity: 0; -webkit-transition: all 1.5s ease 0.1s; -moz-transition: all 1.5s ease 0.1s; -o-transition: all 1.5s ease 0.1s; transition: all 1.5s ease 0.1s; } .menu .menuItem.active { animation: showMenu 0.5s ease-in-out 0s 1; opacity: 1; left: 0; } @keyframes showMenu { 0% { opacity: 0; left: -100%; } 1% { opacity: 0; left: 0; } 100% { opacity: 1; left: 0; } } .menu .menuItem.active>* { opacity: 1; -webkit-transition: all 1.5s ease 0.1s; -moz-transition: all 1.5s ease 0.1s; -o-transition: all 1.5s ease 0.1s; transition: all 1.5s ease 0.1s; } .menu .menuItem ul { padding: 5rem calc(((100vw - min(100vw, var(--max-width-size))) / 2) + 2rem); display: flex; flex-direction: column; justify-content: center; align-items: center; } .menu .menuItem ul a { text-decoration: none; color: var(--default-color); display: inline-block; padding: 1.5rem 1.5rem; } .menu .menuItem>ul>li { font-size: 2rem; line-height: 2rem; position: relative; box-sizing: border-box; transform: translateX(-100vw); opacity: 0; -webkit-transition: all 1.2s ease 0.5s; -moz-transition: all 1.2s ease 0.5s; -o-transition: all 1.2s ease 0.5s; transition: all 1.2s ease 0.5s; } .menu .menuItem.active>ul>li:nth-child(1) { --time-need: 0.1s; } .menu .menuItem.active>ul>li:nth-child(2) { --time-need: 0.2s; } .menu .menuItem.active>ul>li:nth-child(3) { --time-need: 0.3s; } .menu .menuItem.active>ul>li:nth-child(4) { --time-need: 0.4s; } .menu .menuItem.active>ul>li:nth-child(5) { --time-need: 0.5s; } .menu .menuItem.active>ul>li:nth-child(n) { opacity: 1; transform: translateX(0); -webkit-transition: all 1.2s ease var(--time-need); -moz-transition: all 1.2s ease var(--time-need); -o-transition: all 1.2s ease var(--time-need); transition: all 1.2s ease var(--time-need); } .menu .menuItem>ul>li>ul>li { font-size: 1.2rem; line-height: 1.6rem; padding: 1.5rem; position: relative; width: 1rem; box-sizing: border-box; white-space: nowrap; display: inline-table; } .menu .menuItem>ul>li::after { content: ''; width: 0; height: 1px; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; border-radius: 1px; background-color: var(--main-color); position: absolute; left: unset; right: 0; bottom: 0; } .menu .menuItem>ul>li:hover::after { width: 100%; left: 0; right: unset; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu .menuItem ul>li>ul { opacity: 0; position: absolute; left: 9.05rem; padding-top: 0; -webkit-transition: all 0.8s ease 0.1s; -moz-transition: all 0.8s ease 0.1s; -o-transition: all 0.8s ease 0.1s; transition: all 0.8s ease 0.1s; top: 0px; padding-left: 0; } .menu .menuItem ul>li:hover>ul { opacity: 1; } .menu .menuItem ul>li>ul::before { content: ''; width: 1px; height: 0; position: absolute; left: -0.35rem; top: -0.35rem; background-color: var(--main-color); opacity: 0; border-radius: 1px; -webkit-transition: all 0.8s ease 0.1s; -moz-transition: all 0.8s ease 0.1s; -o-transition: all 0.8s ease 0.1s; transition: all 0.8s ease 0.1s; } .menu .menuItem ul>li:hover>ul::before { height: 100%; opacity: 1; } .menu .menuItem>ul>li>ul>li::after { content: ''; width: 0; height: 1px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; border-radius: 1px; background-color: var(--main-color); position: absolute; left: -0.35rem; bottom: 0.45rem; opacity: 0; } .menu .menuItem>ul>li>ul>li:hover::after { width: 100%; opacity: 1; -webkit-transition: all 0.3s ease 0.15s; -moz-transition: all 0.3s ease 0.15s; -o-transition: all 0.3s ease 0.15s; transition: all 0.3s ease 0.15s; } .menu .menuItem>ul>li>ul>li:nth-child(n+2)::before { content: ' '; width: 0.5rem; height: 0.5rem; border-radius: 1px; background-color: var(--main-color); position: absolute; left: -0.55rem; bottom: 0.20rem; transform: rotate(45deg) scale(0); opacity: 0; -webkit-transition: all 0.1s ease 0.15s; -moz-transition: all 0.1s ease 0.15s; -o-transition: all 0.1s ease 0.15s; transition: all 0.1s ease 0.15s; } .menu .menuItem>ul>li>ul>li:nth-child(n+2):hover::before { opacity: 1; transform: rotate(45deg) scale(1); -webkit-transition: all 0.1s ease 0.1s; -moz-transition: all 0.1s ease 0.1s; -o-transition: all 0.1s ease 0.1s; transition: all 0.1s ease 0.1s; } .menu .menuItem>.infoSite { font-size: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; bottom: 0; margin: 1rem calc(((100vw - min(100vw, var(--max-width-size))) / 2) + 2rem + 15%); box-sizing: border-box; border-top: 1px solid #fff; padding: 3rem 2rem 2rem; } .infoSite>a { text-decoration: none; color: var(--default-color); font-size: 0.8rem; line-height: 1.2rem; } .infoSite>a { width: 60%; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; } .infoSite>a:nth-child(2) { width: 40%; } .infoSite>a:before { content: ''; width: 2.5rem; height: 3rem; color: var(--main-color); background-repeat: no-repeat; background-size: 2rem auto; background-position: center; margin-right: 0.5rem; } .infoSite>.addressLogo:before { background-size: 1.5rem auto; background-image: url(/image/location.svg); } .infoSite>.telLogo:before { background-image: url(/image/phone.svg); } .infoSite>.emailLogo:before { background-image: url(/image/Email.svg); } .infoSite>.socialPart { width: 40%; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .infoSite>.socialPart>* { text-align: center; padding: 0 1rem 0 0; text-decoration: none; } .infoSite>.socialPart>*:before { text-align: center; font-family: 'Farhang'; font-size: 2rem; color: var(--default-color); } .infoSite>.socialPart>.facebookLogo:before { content: '\f082'; } .infoSite>.socialPart>.instagramLogo:before { content: '\f16d'; } @media only screen and (min-width:0px) and (max-width:959px) { body.disable { margin-right: 0; } .menu { height: 4.7rem; padding: 0.6rem; width: 100%; box-sizing: border-box; } .menu.big { height: 4.7rem; } .menu.active.big { height: 100dvh; overflow: visible; } .menu.big>section>div>a { width: 3.5rem; height: 3.5rem; } .menu>section>span { width: calc(100% - 1.2rem); } .menu>section>div { margin-left: 1rem; justify-content: left; } .menu>section>div>a { padding-left: 0; margin-right: 1rem; } .menu>section>a { margin-right: 1rem; } .menu .menuItem ul { padding: 3rem 0 1rem; } .menu .menuItem>ul>li:hover::after { width: 0; } .menu .menuItem>ul>li:has(ul):after { width: 100%; opacity: 1; -webkit-transition: all 0.3s ease 0.15s; -moz-transition: all 0.3s ease 0.15s; -o-transition: all 0.3s ease 0.15s; transition: all 0.3s ease 0.15s; } .menu .menuItem>ul>li:has(ul)::before { opacity: 1; transform: rotate(45deg) scale(1); -webkit-transition: all 0.1s ease 0.1s; -moz-transition: all 0.1s ease 0.1s; -o-transition: all 0.1s ease 0.1s; transition: all 0.1s ease 0.1s; } .menu .menuItem ul>li>ul { opacity: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .menu .menuItem.active ul>li>ul { opacity: 1; -webkit-transition: all 1s ease 1s; -moz-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; } .menu .menuItem ul>li>ul::before { height: 100%; opacity: 1; -webkit-transition: all 1s ease 0.2s; -moz-transition: all 1s ease 0.2s; -o-transition: all 1s ease 0.2s; transition: all 1s ease 0.2s; } .menu .menuItem.active { width: 100%; justify-content: space-between; } .menu .menuItem>.infoSite { margin: 1rem 0; flex-direction: row; right: unset; position: relative; width: 100%; flex-wrap: wrap; padding: 0 2.5rem; border: 0; } .infoSite>a, .infoSite>a:nth-child(2) { width: 100%; padding: 0.5rem 1rem; margin-left: 0; } .infoSite>a:nth-child(2), .infoSite>a:nth-child(3) { width: 50%; } .infoSite>a:before { background-size: 1.5rem auto; } .infoSite>.addressLogo:before { background-size: 1.3rem auto; } .infoSite>.socialPart { width: calc(100% - 1rem); padding: 0.5rem 1rem; margin: 1rem 0 1rem; justify-content: center; } .infoSite>.socialPart>* { margin-right: 1rem; text-align: center; } .infoSite>.socialPart>*:nth-last-child(1) { margin-right: 0; padding-right: 0; } }