* {margin: 0; padding: 0; box-sizing: border-box;}
body {background: #f0f0f0; font-family: Helvetica, sans-serif; display: flow-root;}
p {line-height: 1.4rem; letter-spacing: 0.03rem;}
a {text-decoration: none;}
html {font-size: 16px;}

@supports (-moz-appearance: none) {
	html {font-size: 13px;}
}

.main {min-height: 1200px; margin: 3.125rem auto 100px; display: flow-root;}
.cont {background: #fff; margin: 0 auto 15px; border-radius: 10px;}
.cont-center {width: 100%; max-width: 600px; margin: 0 auto;}

.bl-center-user {width: 100%; max-width: 600px; margin: 0 auto;}

.flex-center {display: flex; justify-content: center; align-items: center;}
.flex-between {display: flex; justify-content: space-between; align-items: center;}
.bl {padding: 20px;}
.bl-between {display: flex; justify-content: space-between; align-items: center;}
.bl-header {height: 50px; padding: 0 0 0 20px; display: flex; justify-content: space-between; align-items: center;}
.bl-footer {height: 50px; padding: 0 20px; display: flex; justify-content: flex-end; align-items: center;}

.img-bl {width: 100%; height: 70px;}
.img-100-bl {width: 100%; height: 100px;}
.img {width: 70px; height: 70px;}
.img-profile-bl {width: 100%; height: 250px;}
.img-profile {width: 250px; height: 250px; border-radius: 50%;}
.img-radius {width: 80px; height: 80px; border-radius: 50%;}
.img-circle {background: #E8E8E8; width: 80px; height: 80px; border-radius: 50%;}

.form-option {background: #f2f3f4; color: #000; width: 80%; padding: 0 10px; border: 2px solid #E8E8E8;}
.form-textrea {background: #f2f3f4; width: 70%; height: 120px; padding: 0 10px; font-size: 20px; margin-bottom: 10px; border-radius: 10px; border: 2px solid #E8E8E8;}

.bl-form {width: 100%; margin-bottom: 10px; display: flex; justify-content: space-between;}
.bl-form label {width: 20%; height: 40px; font-size: 18px; display: flex; align-items: center;}
.bl-form input {background: #f2f3f4; width: 80%; height: 40px; padding: 0 10px; font-size: 18px; border-radius: 20px; border: 2px solid #E8E8E8;}
.bl-form select {height: 40px; font-size: 18px; border-radius: 20px;}

.bl-menu {width: 60px; height: 50px; border-radius: 10px 10px 0 0; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.bl-menu-bl {background: #FF8C00; width: 200px; padding: 20px 0; right: 0; top: 50px; border-radius: 10px 0 10px 10px; position: absolute; z-index: 1; display: none;}
.bl-menu:hover .bl-menu-bl {display: block;}
.bl-menu:hover {background: #FF8C00;}
.bl-menu img {width: 37px; height: 37px;}
.bl-menu a {color: #000; padding: 15px; display: block;}
.bl-menu a:hover {background: #fff;}
.bl-menu button {background: #FF8C00; color: #000; width: 100%; padding: 15px; font-size: 16px; border: 0 solid #000; cursor: pointer; text-decoration: none; display: flex; align-items: center;}
.bl-menu button:hover {background: #fff;}
.bl-mess {background: #FF4500; color: #fff; margin-bottom: 15px; padding: 10px; font-size: 24px; border-radius: 10px; text-align: center;}
.button {background: #0071e3; color: #fff; padding: 7px 18px; font-size: 16px; font-weight: 600; border: 0 solid #000; border-radius: 20px; cursor: pointer;}
.button:hover {background: #FF8C00;}

.list {height: 100px; padding: 10px 0 10px 10px; border: 0 solid #E8E8E8;}
.list:hover {border: 0 solid #CFCFCF;}
.list-img-bl {background: #CFCFCF; width: 100px; height: 80px; border-radius: 10px; overflow: hidden;}
.list-prod-img {width: 100%; height: 80px;}
.list-cat-img {width: 50px; height: 50px;}
.list-info-bl {margin: 0 10px; flex: 1;}
.list-info-bl h3 {font-size: 18px; font-weight: 500;}
.list-info-bl a{color: #000;}
.list-info-bl a:hover {color: #FF8C00;}
.list-info-bl span {font-size: 18px; display: block;}
.list-control-bl {width: 60px;}
.list-control-bl button {background: #0071e3; color: #fff; width: 30px; height: 30px; border-radius: 50%; border: 0 solid #000; cursor: pointer;}
.list-control-bl button:hover {background: #FF8C00;}


.header {background: #f0f0f0; width: 100%; border-bottom: 1px solid #CFCFCF; position: fixed; z-index: 3; opacity: 0.96;}
.header-center {max-width: 1200px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between;}
.header-icon-cont {display: flex; justify-content: space-between;}

.header-logo {color: #000; font-size: 1.6rem; font-weight: 600;}
.header-logo:hover {background: #FF8C00; color: #fff;}

.header-icon-bl {width: 6.25rem; height: 3.125rem; border-radius: 10px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.header-icon-bl:hover {background: #FF8C00;}
.header-icon-bl img {width: 1.25rem; height: 1.25rem;}
.header-icon-img-circle {width: 1.375rem; height: 1.375rem; border-radius: 50%;}
.header-icon-bl span {color: #000; font-size: 0.875rem;}

.header-menu-mini {background: #FF8C00; width: 13.75rem; padding: 1.25rem 0; top: 3.125rem; border-radius: 10px; position: absolute; z-index: 3; display: none;}
.header-menu-mini a {color: #000; padding: 1rem; font-size: 1rem; display: block;}
.header-menu-mini a:hover {background: #fff;}

.header-icon-bl:hover .header-menu-mini {display: block;}
.header-icon-bl:hover .header-menu-mini-right {display: block;}
.header-cart {background: #FF4500; color: #fff; width: 1.375rem; height: 1.375rem; border-radius: 50%; position: absolute; top: 0.4rem; left: 55%; display: flex; flex-direction: column; align-items: center; justify-content: center;}

.header-menu {background: #363636; width: 100%; top: 3.125rem; left: 0; position: absolute; z-index: 2; display: none;}
.header-menu-center {max-width: 1000px; width: 100%; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap;}
.header-menu-cat {width: 14.0%; border-radius: 20px; display: flex; flex-direction: column; align-items: center;}
.header-menu-cat:hover {background: #FF8C00;}
.header-menu-cat img {width: 2.5rem; height: 2.5rem; margin: 20px 0 0;}
.header-menu-cat span {color: #fff; margin: 10px 10px 20px;  font-size: 16px; text-align: center;}

.home-banner-part {width: 98.6%; margin: 0 auto 0.3125rem; border-radius: 20px; display: flex; align-items: center;}
.home-banner-part img {width: 100%; height: 400px; object-fit: fill; border-radius: 20px;}
.home-h1 {font-size: 1rem; padding-bottom: 5px;}

.cat {max-width: 1000px;}
.cat-banner-part {background: linear-gradient(200deg, #EE82EE, #87CEFA); width: 98.6%; height: 100px; margin: 0 auto 15px; border-radius: 16px; display: flex; align-items: center;}
.cat-banner-img {width: 10%; display: flex; justify-content: center;}
.cat-banner-img img {background: #000; width: 4.0rem; height: 4.0rem; padding: 0.625rem; object-fit: contain; border-radius: 10px;}
.cat-banner-text {width: 400px;}

.cat-list-part {display: flex; flex-wrap: wrap; flex-direction: row;}
.cat-list-cont {background: #fff; width: 20%; border-radius: 28px; border: 5px solid #f1f1f1; display: flex; flex-direction: column;}
.cat-list-cont:hover {border: 5px solid #fff;}
.cat-list-img {display: flex; justify-content: center; align-items: center;}
.cat-list-img img {width: 100%; height: 190px; object-fit: contain; border-radius: 20px 20px 0 0; overflow: hidden;}
.cat-list-info {padding: 10px;}
.cat-list-info a {color: #000;}
.cat-list-info a:hover {color: #FF8C00; text-decoration: underline;}
.cat-list-bl {height: 20px; display: flex; align-items: center; justify-content: space-between;}

.cat-text-part {max-width: 96%; margin: 50px auto 0;}
.cat h1 {font-size: 22px; line-height: 1.625rem;}
.cat h2 {color: #363636; font-size: 20px; padding-bottom: 5px;}
.cat h3 {color: #363636; height: 60px; margin: 10px 0 5px; font-size: 18px; overflow: hidden;}
.cat p {color: #363636; font-size: 19px; line-height: 1.625rem; padding-bottom: 50px; font-weight: 500;}
.cat span {font-size: 18px;}
.cat-div {width: 98%; height: 100px; margin: 0 auto; font-size: 20px; font-weight: 600; display: flex; justify-content: center; align-items: center;}

.prod {max-width: 1000px; border-radius: 20px 20px 0 0; overflow: hidden;}
.prod-top-part {margin-bottom: 13px; display: flex; flex-direction: row-reverse; justify-content: space-between;}
.prod-bottom-part {background: #fff; padding-bottom: 30px; border-radius: 0 0 20px 20px;}
.prod-info-cont {background: #fff; width: 32.7%; padding-top: 100px;}
.prod-img-cont {background: #fff; width: 66%;}
.prod-bl {width: 90%; min-height: 50px; margin: 0 auto;}
.prod-link {color: #0071e3; font-size: 18px;}
.prod-link:hover {color: #FF8C00;}
.prod-status {font-size: 18px;}
.prod-price {font-size: 20px;}
 
.prod-bottom-part p,
.prod-bottom-part h3, 
.prod-bottom-part li {width: 55%; margin: 0 auto;}
.prod h1 {font-size: 1.375rem;}
.prod h2 {width: 96%; margin: 0 auto; padding: 20px 0 0; font-size: 20px;}
.prod h3 {font-size: 19px; padding-bottom: 5px;}
.prod p {color: #363636; font-size: 18px; padding-bottom: 30px;}
.prod li {color: #363636; padding-bottom: 10px; font-size: 18px; list-style-type: none;}
.prod hr {background-color: #E8E8E8; width: 96%; height: 1px; margin: 0 auto; border: none;}

.slider {margin: 0 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.slides {height: 660px; display: flex; transition: transform 0.5s;}
.slides img {width: 100%; border-radius: 20px; overflow: hidden; object-fit: contain; flex: 0 0 100%; display: flex; align-items: center; justify-content: center;}
.nav {width: 99%; position: absolute; display: flex; justify-content: space-between;}
.nav button {border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;}
.nav button span {font-size: 24px; color: #000; text-align: center;}
.nav button:hover {background: #FF8C00;}
.nav-dots {position: absolute;bottom: 20px; width: 100%; text-align: center;}
.nav-dots span {height: 10px; width: 10px; margin: 0 9px; background: #E8E8E8; border-radius: 50%; display: inline-block; cursor: pointer;}
.nav-dots .active {background: #FF8C00;}

.info {max-width: 1000px;}
.info-cont {padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.info-form-img {background: #E8E8E8; width: 100px; height: 100px; margin-right: 10px; border-radius: 10px; border: 2px solid #E8E8E8; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;}
.info-form-img img {width: 100px; height: 100px;}
.info-form-img:hover {background: #FF8C00; border: 2px solid #FF8C00;}
input[type="file"] {display: none;}
.info-form-img button {background: #9C9C9C; color: #fff; position: absolute; top: 0; border: none; width: 100%; padding: 3px 0; cursor: pointer; border-radius: 3px; font-size: 12px;}
.info-form-img button:hover {background: #FF4500;}
.info h1 {font-size: 22px;}
.info h2 {font-size: 20px;}
.info h3 {}
.info p {color: #1C1C1C; font-size: 1.1rem;}
.info span {color: #1C1C1C; width: 100%; font-size: 18px; display: block; overflow: hidden; text-overflow: ellipsis;}

.user-center {width: 70%; margin: 0 auto; padding: 0 0 10px;}
.user-form {width: 100%; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
.user-form label {width: 20%; height: 40px; font-size: 18px; display: flex; align-items: center;}
.user-form input {background: #f2f3f4; width: 80%; height: 40px; padding: 0 10px; font-size: 18px; border-radius: 20px; border: 2px solid #E8E8E8;}
.user-form select {height: 40px; font-size: 18px; border-radius: 20px;}
.user-option {background: #f2f3f4; color: #000; width: 80%; padding: 0 10px; border: 2px solid #E8E8E8;}

.user-img-cont {padding: 0 10px 10px 20px; display: flex; flex-wrap: wrap; justify-content: center;}
.user-img {background: #E8E8E8; margin-right: 10px; border-radius: 10px; border: 1px solid #E8E8E8; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative;}
.user-img:hover {background: #FF8C00; border: 1px solid #FF8C00;}
.user-img img {width: 125px; height: 105px;}
.user-img button {background: #9C9C9C; color: #fff; width: 100%; padding: 2px 0; position: absolute; bottom: 0; border: none; cursor: pointer; border-radius: 3px; font-size: 12px;}
.user-img button:hover {background: #FF4500;}
input[type="file"] {display: none;}

.user-editor {width: 80%; border: 1px solid #f2f3f4; border-radius: 10px;}
.user-bar {font-size: 16px; display: flex;}
.user-bar button {background: #fff; width: 50%; height: 40px; border: 0; border-radius: 10px 10px 0 0; cursor: pointer;}
.user-bar button:hover {background: #FF8C00;}
.user-bar button.active {background: #9C9C9C; color: #fff;}
.user-textrea {background: #f2f3f4; width: 100%; height: 200px; padding: 0 20px; font-size: 20px; border: 0;}

.footer {background: #363636; font-size: 1rem;}
.footer p {padding-top: 10px;}
.footer span {color: #fff;}
.footer ul {list-style-type: none;}
.footer li {padding-top: 15px;}
.footer a {color: #E8E8E8;}
.footer a:hover {color: #FF8C00; text-decoration: underline;}
.footer-bl {max-width: 1000px; width: 90%; margin: 0 auto; padding: 30px 0;}
.footer-copy-bl {background: #363636; width: 100%; height: 50px; margin: 0 auto; border-top: 2px solid #fff; display: flex; justify-content: center; align-items: center;}

@media screen and (max-width: 768px) {
body {background: #CFCFCF}
.main {}
.bl-menu a {font-size: 1.2rem;}

.header {background: #CFCFCF;}
.header-center {width: 90%; margin: 0 auto; display: flex; justify-content: space-around;}
.header-logo {}
.header-icon-cont {width: 200%; display: flex-inline; justify-content: justify-content: space-around;}
.header-icon-bl {width: 100%;}
.header-menu-mini a {font-size: 1.2rem;}
.header-menu-center {height: 300px; padding-bottom: 900px; overflow: auto;}
.header-menu-cat {width: 25%;}

.home-banner-part {width: 98.6%; margin: 0 auto 0.3125rem; border-radius: 20px; display: flex; align-items: center;}
.home-banner-part img {width: 100%; height: 120px; border-radius: 20px;}

.cat-banner-part {width: 100%; height: 120px; margin: 0 auto 15px;}
.cat-banner-img {width: 140px;}
.cat-banner-img img {width: 4.0rem; height: 4.0rem; padding: 0.625rem;}
.cat-banner-text {width: 200px; margin: 0 0.625rem 0 0;}
.cat-list-part {display: flex; flex-wrap: wrap; flex-direction: column;}
.cat-list-cont {width: 100%; margin-bottom: 15px; border-radius: 10px; border: 0 solid #E8E8E8; display: flex; flex-direction: row;}
.cat-list-cont:hover {border: 0 solid #fff;}
.cat-list-img {width: 120px; padding: 10px;}
.cat-list-img img {background: #E8E8E8; width: 120px; height: 100px; border-radius: 20px;}
.cat-list-info {flex: 1; padding: 10px 10px 10px 0; display: flex; flex-direction: column; justify-content: space-between;}

.form-bl {flex-direction: column;}
.user-form {flex-direction: column;}
.form-bl label {width: 100%;}
.user-form label {width: 100%;}
.user-form input {width: 100%;}
.user-textrea {width: 100%;}
.form-bl input {width: 100%;}
.form-bl select {width: 100%;}
.form-textrea {width: 100%;}
.button {padding: 6px 15px; font-size: 16px;}

.bl-form {flex-direction: column;}
.bl-form label {width: 100%;}
.bl-form input {width: 100%;}
.bl-form select {width: 100%;}
.bl-form-textrea {width: 100%;}
.list-info-bl h3 {font-size: 18px; height: 40px; font-weight: 500; overflow: hidden;}

.main {width: 90%;}
.cat-text-part {margin: 40px auto 0;}

.cat h1 {font-size: 1.4rem; line-height: 1.375rem;}
.cat h2 {font-size: 1.25rem;}
.cat h3 {height: 3,75rem; font-size: 1.125rem; line-height: 1,125rem;}
.cat p {color: #363636; font-size: 19px; line-height: 1.625rem; padding-bottom: 50px; font-weight: 500;}
.cat span {font-size: 1.2rem;}

.prod-top-part {margin: 0; display: flex; flex-direction: column-reverse;}
.prod-info-cont {width: 100%; padding: 0;}
.prod-img-cont {width: 100%; border-right: 0 solid #E8E8E8;}
.prod-bl {width: 90%; min-height: 35px;}
.prod h1 {font-size: 21px;}
.prod h2 {width: 90%; padding: 30px 0 5px; font-size: 17px;}
.prod h3 {width: 90%; padding-bottom: 5px; font-size: 16px;}
.prod p {color: #1C1C1C; width: 90%; padding-bottom: 40px; font-size: 1rem;}
.prod li {color: #1C1C1C; width: 90%; padding-bottom: 5px; font-size: 1rem;}
.prod hr {color: #000; width: 90%; height: 0.8px;}
.slides {height: 350px;}
.slides img {width: 100%; height: 350px;}

.user-center {width: 90%; max-width: 100%; margin: 0 auto; word-break: break-all;}
.user-editor {width: 100%;}
}

@media screen and (max-width: 500px) {
.header-center {width: 100%; margin: 0 auto; display: flex; justify-content: space-around;}
.header-menu-cat {width: 50%;}
.main {margin: 50px auto 20px;}
.cat {width: 90%;}
.prod {width: 100%;}
.prod-bl {width: 90%;}
.slides {height: 20rem;}
.slides img {width: 100%; height: 20rem;}
.nav button {border: none; width: 0; height: 0;}
.nav button span {font-size: 0; color: #000; text-align: center;}
.info {width: 90%;}
}