:root {
	/*Fonts main*/
	--font-extra-light: IEL;
	--font-light: IL;
	--font-regular: IR;
	--font-italic: II;
	--font-medium: IM;
	--font-semi-bold: ISB;
	--font-bold: IB;
	--font-extra-bold: IEB;
}

html, body {
    background:#191f2b;
    margin:0;
}

header {
    display:block;
    position: fixed;
    z-index:9999;
    top:-2px;
}
header > .mobile {
    display:block;
    width:100%;
    background:#000000;
    height:51px;
}
header > .mobile > .container {
    height:100%;
}
header > .mobile .wrap {
    width:100%;
    height:100%;
    display: flex;
    align-items:center;
}
header > .mobile .wrap > .logo {
    width:76px;
    height:28px;
    flex:none;
}
header > .mobile .wrap > .logo > img {
    width:100%;
    height:100%;
}
header > .mobile .wrap > .place {
    color:#FFFFFF;
    font-family:var(--font-regular);
    font-weight: 400;
    display:flex;
    align-items: center;
    flex:none;
    margin-left:calc((100% / 2) - 152px);
}
header > .mobile .wrap > .place > i {
    width:10px;
    height:14px;
    &::after {
        width:10px;
        height:14px;
        background:#FFF;
    }
}
header > .mobile .wrap > .place > span {
    margin-left:6px;
    font-size:10px;
}
header > .mobile .wrap > .phone {
    display:inline-block;
    flex:none;
    width:23px;
    height: 23px;
    margin-left:calc((100% / 2) - 135px);
}
header > .mobile .wrap > .phone > i {
    width:23px;
    height: 23px;
    display:inline-block;
    &::after {
        background:#ECA900;
        width:23px;
        height:23px;
    }
}
header > .mobile .wrap > .lk {
    width:28px;
    height:28px;
    display:inline-block;
    flex:none;
    margin-left:10px;
}
header > .mobile .wrap > .lk > img {
    width:28px;
    height:28px;
}
@media (min-width:100px){
    header > .pc {
        display:none;
    }
}
@media (min-width:1024px){
    header > .mobile {
        display:none;
    }
    header > .pc {
        display:block;
    }
}

header .container {
    height:100%;
}
header > .pc .top {
    height:46px;
    width:100%;
    align-items:center;
    background:#202134;
}
header > .pc .top .wrap {
    height:100%;
    display:flex;
    width:100%;
    justify-content: right;
    align-items:center;
}
header > .pc .top .wrap > .link {
    display:flex;
    flex:none;
    text-decoration: none;
    align-items:center;
}
header > .pc .top .wrap > .link > .icon {
    &::after {
        background-color:#FFF;
    }
}
header > .pc .top .wrap > .link > .icon-place {
    width:14px;
    height:20px;
    &::after {
        width:14px;
        height:20px;
    }
}
header > .pc .top .wrap > .link > .icon-phone {
    width:18px;
    height:18px;
    &::after {
        width:18px;
        height:18px;
    }
}
header > .pc .top .wrap > .link > .icon-mail {
    width:20px;
    height:16px;
    &::after {
        width:20px;
        height:16px;
    }
}
header > .pc .top .wrap > .link > .icon-whatsapp {
    width:18px;
    height:18px;
    &::after {
        width:18px;
        height:18px;
    }
}
header > .pc .top .wrap > .link > .icon-telegram {
    width:20px;
    height:16px;
    &::after {
        width:20px;
        height:16px;
    }
}
header > .pc .top .wrap > .link > span {
    color:#FFF;
    font-family: var(--font-regular);
    font-weight:400;
    margin-left:10px;
}
header > .pc .bottom {
    width:100%;
    background:#000;
    height:63px;
}
header > .pc .bottom .wrap {
    display:flex;
    width:100%;
    height:100%;
}
header > .pc .bottom .wrap > .left {
    display:flex;
    align-items:center;
    width:30%;
    height:100%;
}
header > .pc .bottom .wrap > .right {
    display:flex;
    align-items:center;
    justify-content: right;
    width:70%;
    height:100%;
}
header > .pc .bottom .wrap > .left > a {
    width:137px;
    height:50px;
}
header > .pc .bottom .wrap > .left > a > img {
    width:100%;
    height:100%;
}
header > .pc .bottom .wrap > .right > .link {
    color:#FFF;
    font-family: var(--font-regular);
    font-weight:400;
    display:flex;
    align-items:center;
    background:rgba(0,0,0, 0);
    cursor:pointer;
    border:0;
}
header > .pc .bottom .wrap > .right > .link.order {
    font-family: var(--font-bold);
    font-weight: 700;
    text-transform: uppercase;
    color:#000;
    padding:11px 22px;
    box-sizing:border-box;
    border-radius:6px;
    background:#ECA900;
    white-space: nowrap;
}
header > .pc .bottom .wrap > .right > .link.lk > img {
    width:34px;
    height:34px;
}
header > .pc .bottom .wrap > .right > .link.lk > span {
    margin-left:5px;
    white-space: nowrap;
}
@media (min-width:1024px){
    header > .pc .top .wrap > .link {
        margin-right:35px;
        &:last-child {
            margin-right:0px;
        }
    }
    header > .pc .top .wrap > .link.mail {
        margin-right:30px;
    }
    header > .pc .top .wrap > .link.tg {
        margin-right:10px;
    }
    header > .pc .top .wrap > .link.whatsapp {
        margin-right:10px;
    }
    header > .pc .top .wrap > .link:last-child > span {
        margin-left:0px;
    }
    header > .pc .top .wrap > .link > span {
        font-size:14px;
    }
    header > .pc .bottom .wrap > .right > .link {
        font-size:14px;
        margin-right:30px;
        &:last-child {
            margin-right:0px;
        }
    }
}
@media (min-width:1200px){
    header > .pc .top .wrap > .link {
        transition: 0.2s;
        &:hover {
            transition: 0.2s;
            opacity:0.8;
        }
    }
    header > .pc .bottom .wrap > .right > .link.order {
        transition:0.2s;
    }
    header > .pc .bottom .wrap > .right > .link {
        transition:0.2s;
        font-size:16px;
        margin-right:50px;
        &:last-child {
            margin-right:0px;
        }
    }
    header > .pc .bottom .wrap > .right > .link:hover {
        color:#ECA900;
    }
    header > .pc .bottom .wrap > .right > .link.order:hover {
        background:#ffc700;
        transition:0.2s;
        color:#000;
    }
    header > .pc .top .wrap > .link > span {
        font-size:16px;
    }
}

main {
    overflow:hidden;
    width:100%;
}
main > section.container-section {
    display:block;
}
@media (min-width:100px){
    main > section.container-section {
        margin-top:60px;
    }
    main > section.first-section {
        margin-top:81px;
    }
    main > section.last-section {
        margin-bottom:40px;
    }
}
@media (min-width:1024px){
    main > section.container-section {
        margin-top:100px;
    }
    main > section.first-section {
        margin-top:140px;
    }
    main > section.last-section {
        margin-bottom:70px;
    }
}

.container > .nav {
	margin:0 auto;
	display:flex;
	align-items:center;
	list-style:none;
	padding:0;
	margin:0;
}
.container > .nav > li {
	display:flex;
	align-items:center;
}
.container > .nav > li > a, .container > .nav > li > span {
	color:#FFFFFF;
	font-family:var(--font-regular);
	font-weight:400;
	font-size:14px;
	line-height:0.93em;
	margin-left:12px;
	display:flex;
	align-items:center;
}
.container > .nav > li:first-child > a {
	margin-left:0;
}
@media (min-width:100px){
	.container > .nav.pc {
		display:none;
	}
}
@media (min-width:1024px){
	.container > .nav.pc {
		display:flex;
		margin-bottom:60px;
	}
}

.container > .container-head {
    width:100%;
    display: block;
}
.container > .container-head > .title {
    font-family: var(--font-bold);
    font-weight: 700;
    color:#FFFFFF;
}
@media (min-width:100px){
    .container > .container-head {
        margin-bottom:16px;
    }
    .container > .container-head > .title {
        font-size:32px;
    }
}
@media (min-width:1024px){
    .container > .container-head {
        margin-bottom:24px;
    }
    .container > .container-head > .title {
        font-size:40px;
    }
}
@media (min-width:1200px){
    .container > .container-head > .title {
        font-size:48px;
    }
}
@media (min-width:1400px){
    .container > .container-head > .title {
        font-size:56px;
    }
}

footer.footer {
    background:#000000;
}
footer.footer > .container {
    color:#B8B8B8;
    font-family: var(--font-regular);
    font-weight: 400;
    box-sizing: border-box;
}
footer.footer > .container > a {
    text-decoration: underline;
    font-size:16px;
    color:#B8B8B8;
}
@media (min-width:100px){
    footer.footer > .container {
        padding:20px 0;
        font-size:14px;
        line-height:1.2em;
    }
}
@media (min-width:1200px){
    footer.footer > .container {
        font-size:16px;
        line-height:1.25em;
        padding:40px 0;
    }
}

.menu_footer {
    display:none;
    position: fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:51px;
    background:#000;
    z-index:9999;
}
.menu_footer > .container {
    height:100%;
}
.menu_footer > .container > .wrap {
    height:100%;
    display: flex;
    align-items:center;
    justify-content: space-between;
}
.menu_footer > .container > .wrap > a {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.menu_footer > .container > .wrap > a > .icon {
    width:20px;
    height:20px;
    display: inline-block;
    &::after {
        background-color:#FFF;
        width:20px;
        height:20px;
    }
}
.menu_footer > .container > .wrap > a > span {
    font-family: var(--font-regular);
    font-weight: 400;
    font-size:10px;
    color:#FFF;
    margin-top:8px;
    width:100%;
    text-align:center;
}
.menu_footer > .container > .wrap > a.active > .icon {
    &::after {
        background-color:#ECA900;
    }
}
.menu_footer > .container > .wrap > a.active > span {
    color:#ECA900;
}
@media (max-width:1024px){
    .menu_footer {
        display:block;
    }
}

/*Detail*/
.flex {
    display:flex;
    flex-wrap:wrap;
}
.flex > div {
    display:inline-block;
}
.form-control {
    font-family: var(--font-regular);
    font-weight: 400;
    font-size:16px !important;
    border-radius:6px;
    box-sizing: border-box;
    padding:15px 12px;
}
.btn {
    cursor:pointer;
    border:0;
    font-family: var(--font-bold);
    font-weight: 700;
    background:#ECA900;
    color:#000;
    font-size:20px;
    text-transform: uppercase;
    transition:0.2s;
    box-sizing: border-box;
    padding:18px 38px;
    border-radius: 6px;
}
@media (min-width:1200px){
    .btn:hover {
        transition:0.2s;
        background:#bb8703;
    }
}

.btn-text {
    background:rgba(0,0,0, 0);
    border:0;
    font-family: var(--font-regular);
    font-weight: 400;
    color:#ECA900;
    font-size:14px;
    display:inline-block;
    padding:0;
    cursor: pointer;
}

.checkbox {
    display:flex;
    align-items:center;
    cursor: pointer;
    height:25px;
}
.checkbox > .checkbox-item {
    position: relative;
    width:20px;
    height:20px;
    border-radius:3px;
    border:1px solid #F5F5F5;
}
.checkbox > .checkbox-item > input {
    pointer-events: none;
    opacity:0;
}
.checkbox > .checkbox-item.active::after {
    content:"";
    width:12px;
    height:12px;
    background: #ECA900;
    border-radius:3px;
    position: absolute;
    top:4px;
    left:4px;
}
.checkbox > span {
	font-family:var(--font-regular);
	font-weight:400;
	font-size:14px;
	color:#FFFFFF;
	opacity:0.8;
    margin-left:7px;
}
.checkbox > span > a {
	color:#FFF;
	text-decoration:underline;
}
@media (min-width:1024px){
    .checkbox > span {
        font-size:16px;
    }
}
/*Detail*/

/*Modal*/
.modal-shadow {
    position: fixed;
    display:flex;
    align-items:center;
    justify-content: center;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index: 10000;
    opacity:0;
    pointer-events: none;
    cursor:pointer;
    background:rgba(0,0,0, 0.5);
    transition: 0.4s;
}
.modal-shadow.show {
    opacity:1;
    pointer-events: auto;
    transition: 0.4s;
}
.modal {
    position: fixed;
    display:flex;
    align-items:center;
    justify-content: center;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index: 11000;
    opacity:0;
    pointer-events: none;
    transition: 0.4s;
}
.modal.show {
    transition: 0.4s;
    opacity:1;
    pointer-events: auto;
}
.modal > .modal-content {
    background: #FFF;
    display:inline-block;
    border-radius:12px;
    box-sizing: border-box;
    position: relative;
}
.modal > .modal-content > .modal-title {
    font-family: var(--font-bold);
    font-weight: 700;
    color:#000;
    display: block;
    width:100%;
}
.modal > .modal-content > .close {
    padding:0px;
    margin:0px;
    position: absolute;
    background:rgba(0,0,0, 0);
    border:0;
    cursor:pointer;
}
.modal > .modal-content > .close > .icon {
    width:18px;
    height:18px;
    display:block;
    &::after {
        background-color:#78909C;
        width:18px;
        height:18px;
    }
}
@media (min-width:100px){
    .modal > .modal-content {
        width:calc(100% - 40px);
        padding:38px 16px 16px 16px;
    }
    .modal > .modal-content > .close {
        top:10px;
        right:10px;
    }
    .modal > .modal-content > .modal-title {
        font-size:18px;
        text-align:center;
        margin-bottom:20px;
    }
}
@media (min-width:576px){
    .modal > .modal-content {
        width:436px;
    }
}
@media (min-width:1024px){
    .modal > .modal-content {
        padding:30px 25px;
    }
    .modal > .modal-content > .modal-title {
        font-size:28px;
        text-align:left;
        margin-bottom:30px;
    }
}
@media (min-width:1200px){
    .modal > .modal-content > .close {
        transition:0.2s;
        &:hover {
            opacity:0.6;
            transition: 0.2s;
        }
    }
}
/*Modal*/

/*Alert Modal*/
.alert-modal {
    position: fixed;
    display: flex;
    align-items:center;
    justify-content: center;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:15000;
    transition:0.4s;
    background: rgba(0,0,0, 0.5);
    opacity:0;
}
.alert-modal > .box {
    background:#FFFFFF;
    border-radius:12px;
    display:inline-block;
    transform:scale(0);
    transition: 0.4s;
    width:250px;
    box-sizing: border-box;
    padding:50px 20px;
}
.alert-modal.show {
    opacity:1;
    transition:0.4s;
}
.alert-modal.show > .box {
    transform:scale(1);
    transition: 0.4s;
}
.alert-modal > .box > .content {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content: center;
}
.alert-modal > .box > .content > .wrap {
    display:inline-block;
    width:210px;
}
.alert-modal > .box > .content > .wrap > .image {
    width:50px;
    height:50px;
    border-radius: 50%;
    display:inline-block;
    margin-left:80px;
}
.alert-modal > .box > .content > .wrap > .image > .icon {
    width:30px;
    margin-top:10px;
    margin-left:10px;
    height:30px;
    display:inline-block;
    &::after {
        width:30px;
        height:30px;
        background-color: #FFF;
    }
}
.alert-modal > .box > .content > .wrap > .image.success {
    background:#c9f29b;
}
.alert-modal > .box > .content > .wrap > .image.warning {
    background:#ff9470;
}
.alert-modal > .box > .content > .wrap > .image.danger {
    background:#ff4c30;
}
.alert-modal > .box > .content > .wrap > .title {
    font-family: var(--font-bold);
    font-weight: 700;
    color:#000;
    width:100%;
    text-align:center;
    font-size:22px;
    margin-top:30px;
}
.alert-modal > .box > .content > .wrap > .message {
    width:100%;
    display: block;
    text-align:center;
    margin-top:30px;
    color:#7c7c7c;
    font-family: var(--font-regular);
    font-weight: 400;
    font-size:16px;
}
.alert-modal > .box > .content > .wrap > .btn {
    width:100%;
    margin-top:20px;
    padding:10px;
}
/*Alert Modal*/

/*Loader*/
.loader {
    background:#191f2b;
    position: fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content: center;
    opacity:1;
    transition: 0.2s;
    pointer-events: auto;
}
.loader.hide {
    opacity:0;
    pointer-events: none;
    transition: 0.2s;
}
.loader > .icon {
    display: inline-block;
}
/*Loader*/