@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap');
#sheetsheet_box{
	 position: relative; padding: 5vw 0; background: no-repeat 50% / cover;
}
#sheetsheet_box * {
    color: #0a0a0b;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
}
#sheetsheet_box .tuan{
    width: 30px;
}
#sheetsheet_box .inpuu{max-width: 100%;width: 400px;}
#sheetsheet_box .item{
    display: flex;
    align-items: center;
    background: #ffffffd4;
    padding: 0 20px;
    border-radius: 5px;
    margin: 20px 0;
}
#sheetsheet_box .item input{
    padding: 20px 0;
    width: 100%;
    background: unset;
}
#sheetsheet_box .item label{
    padding: 0 20px 0px 10px;
    border-right: #8e8e8ead 1px solid;
    margin-right: 20px;
}
#sheetsheet_box .item b.rred {
    margin: 0 3px;
    color: #c49e6d;
}
#sheetsheet_box .item select {
	padding: 29px 14px;
	width: 100%;
	background: url(/images/35/selectbutton.png) rgb(245 245 245 / 0%) no-repeat 100% 50% / 7px;
	border: none;
	box-shadow: none;
	-webkit-appearance: none;
	font-size: 16px;
	color: #5c5c5c;
}
#sheetsheet_box .page_area {
    margin: 0 auto;
    padding: 40px;
    width: 95vw;
    background: #fffffff5;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    border-radius: 8px;
}
#sheetsheet_box .etain{
    padding: 25px 50px;
    border-radius: 13px;
    width: 100%;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 3px 8px 1px rgb(0 0 0 / 4%), -3px 1px 7px 0px rgb(0 0 0 / 2%), 0 4px 1px 0 rgb(0 0 0 / 1%);
}
#sheetsheet_box .etain .topbar{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 15px;
    position: relative;
    background: #4f4f4f;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
#sheetsheet_box .etain .topbar h2{
    color: #f3f3f3;
    font-size: 25px;
    font-weight: 700;
}

#sheetsheet_box .tongan{
    padding-top: 70px;
}

/*box01*/
#sheetsheet_box .box01{
    width: 100%;
    background: #e7c495;
    background-image: url(/images/35/ufo-BG-01.png);
}

#sheetsheet_box .box01 .item{
    width: 600px;
    max-width: 100%;
    margin-top: 70px;
}
#sheetsheet_box .box01 .jwan{
    display: flex;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 60px;
}
#sheetsheet_box .box01 .jwan .address{
    display: flex;
    align-items: center;
    margin-left: 20px;
}
#sheetsheet_box .box01 .jwan .address .icheck-material-custom label:before{
    border: 2px solid #505050;
    top: 4px;
}
#sheetsheet_box .box01 .jwan .address .icheck-material-custom label{
    font-size: 16px;
}
#sheetsheet_box .box01 .jwan .address input{display: flex;flex-direction: column;align-items: center;justify-content: center;}
#sheetsheet_box .box01 .tirtle{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#sheetsheet_box .box01 .tirtle h2{
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-size: 62px;
	font-weight: 800;
	color: #292929;
}

/*box02*/
#sheetsheet_box .box02{
    background: #f4f4f4;
	background-image: url(/images/35/ufo-BG-02.png);
}


.onebox , .onebox label{
    display: flex;
    width: 150px;
}
.twobox{
    display: flex;
    width: calc(100% - 150px);
    justify-content: space-between;
}
.twobox p{
    display: flex;
    margin: 0;
    width: 45%;
}

/*box03*/
#sheetsheet_box .box03{
    background: #f4f4f4;
	background-image: url(/images/35/ufo-BG-03.png);
}
#sheetsheet_box .box03 .bottomm{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
#sheetsheet_box .box03 .bottomm .in_group{
    padding: 25px 20px;
    background: #363636;
    margin: 0 20px;
    border-radius: 5px;
}
#sheetsheet_box .box03 .bottomm .in_group a{
    color: #f0f0f0;
}
#sheetsheet_box .box03 .bottomm a{
    font-weight: 600;
}
#sheetsheet_box .box03 .bottomm .send{
    border-radius: 5px;
}
#sheetsheet_box .box03 .bottomm .send{
    padding: 25px 20px;
    background: #dba964;
}
#sheetsheet_box .box03 .bottomm .send a{
    color: white;
}
#sheetsheet_box .box03 .bottomm .send a .fa{
    color: white;
}
/*box04*/
#sheetsheet_box .box04{
    position: relative;
    padding: 20px 20px 0;
}
#sheetsheet_box .box04 label[for=Privacy]{
    font-size: 23px;
    font-weight: 700;
    color: #4f4f4f;
    padding-left: 27px;
    margin-left: 10px;
    line-height: 120%;
}
#sheetsheet_box .box04 label[for=Privacy]:before{
    width: 20px;
    height: 20px;
    top: 0;
}
#sheetsheet_box .box04 li{
    list-style: auto;
    line-height: 200%;
    font-size: 15px;
    color: #6e6e6e;
}
#sheetsheet_box .box04 .icheck-material-custom{
    display: flex;
    align-items: center;
}
/* show_detal */
#show_detal {position: fixed;padding-top: calc(50vh - 342px);width: 100%;height: 100%;background: rgb(0 0 0 / 60%);display: none;justify-content: center;align-items: center;top: 0;left: 0;z-index: 1000;}
#show_detal .end_box {padding: 30px;width: 450px;background: #fff;margin: 0 auto;max-height: calc(100vh - 0px);overflow-y: scroll;}

#show_detal .end_box::selection { background: #339fc9; text-shadow: none; color: #fff; }
#show_detal .end_box::-webkit-scrollbar { width: 5px; }
#show_detal .end_box::-webkit-scrollbar-track { background: rgba(255, 255, 255, .75); }
#show_detal .end_box::-webkit-scrollbar-thumb { background: rgb(226 173 104); border-radius: 50px; }


#show_detal .end_box h4 {text-align: center;letter-spacing: 10px;margin-left: 10px;line-height: 1.5;font-size: 39px;font-weight: 700;color: #b38e5e;}
#show_detal .end_box h5 { margin: 20px 0 10px; text-align: center; font-size: 20px; }
#show_detal .end_box p {display: flex;justify-content: center;}
#show_detal .end_box .middle p{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#show_detal .end_box p b {line-height: 1;font-size: 23px;margin-top: 7px;color: #767676;}
#show_detal .end_box p b#total {margin-right: 0;font-size: 89px;color: #824a35;font-family: 'Roboto', sans-serif;font-weight: 600;margin-top: 0;}
#show_detal .end_box ul { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); }
#show_detal .end_box ul li { margin: 9px 5px 5px; display: flex; justify-content: center; align-items: center; }
#show_detal .end_box ul li label { font-size: 17px; font-weight: bold; }
#show_detal .end_box ul li font { font-size: 17px; }
#show_detal .end_box .bottom_btns { margin-top: 30px; }
#show_detal .end_box .bottom_btns a { padding: 7px 20px; border: 1px #b38e5e solid; border-radius: 6px; display: inline-block; font-weight: 800; font-size: 15px; color: #b38e5e; }
#show_detal .end_box .bottom_btns a#closeBtn { margin: 0 10px; background: #b38e5e; color: #fff; }
#show_detal .end_box .end_txt {margin-top: 32px;font-size: 15px;color: #905f4d;}

#show_detal .end_box .tel_txx{display: flex;flex-direction: column;align-items: center;font-size: 24px;color: #824a35;font-family: 'Roboto', sans-serif;line-height: 125%;font-weight: 600;}
.wrapperrr {
	margin: 35px auto;
	width: 340px;
	height: 340px;
	overflow: hidden;
	position:relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.right {
	border: #e2ad68 solid 15px;
	height: 340px;
	width: 340px;
	border-radius: 340px;
	border-top-color: transparent;
	border-left-color: transparent;
	position: absolute;
	transform: rotate(-45deg);
	animation: rota2 1000ms linear;
	-moz-animation: rota2 1000ms linear;
	-o-animation: rota2 1000ms linear;
	-webkit-animation: rota2 1000ms linear;
}

@keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-o-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-moz-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}
@-webkit-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

.left {
	border: #e2ad68 solid 15px;
	height: 340px;
	width: 340px;
	border-radius: 340px;
	border-bottom-color: transparent;
	border-right-color: transparent;
	position: absolute;
	transform: rotate(315deg);
	animation: rota 2000ms linear;
	-o-animation: rota 2000ms linear;
	-moz-animation: rota 2000ms linear;
	-webkit-animation: rota 2000ms linear;
}
@keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-o-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@moz-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-webkit-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}

.middle {
  color: #0987bc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 269px;
  height: 130px;
  left: 0;
  top: 0;
  border-radius: 150px;
  position: relative;
  z-index: 4;
}

.popover {
	background: white;
	width: 180px;
	height: 358px;
	position:absolute;
	top: -5px;
	left: -10px;
	opacity:0;
	z-index:2;
	animation: popover 1000ms linear;
	-moz-animation: popover 1000ms linear;
	-o-animation: popover 1000ms linear;
	-webkit-animation: popover 1000ms linear;
}

@keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-moz-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}



@media screen and (min-width: 1281px){
	#sheetsheet_box .page_area {
	    width: 1200px;
	}
}

@media screen and (max-width:1440px){
	#show_detal{
    padding-top: calc(50vh - 333px);
}
	.wrapperrr{
    margin: 12px auto;
}
}

@media screen and (max-width:1160px){
	#sheetsheet_box .box01 .tirtle h2{
	    font-size: 50px;
	}
	#sheetsheet_box .box01 .tirtle svg{
	    width: 250px;
	}
}
@media screen and (max-width:980px){
	#sheetsheet_box .box01 .tirtle h2{
	    font-size: 30px;
	}
	#sheetsheet_box .box01 .tirtle svg{
	    width: 213px;
	    height: 95px;
	}
	#sheetsheet_box .box01 .item{
	    margin-top: 30px;
	}
	#sheetsheet_box .etain{
	    padding: 25px 25px;
	    border-radius: 8px;
	}
	#sheetsheet_box .tongan{
	    padding-top: 70px;
	}
	#sheetsheet_box .box01 .jwan{
    margin-bottom: 30px;
}
}
@media screen and (max-width:800px) {
	#sheetsheet_box .box03 .bottomm .check_box{
	    margin-bottom: 15px;
	    width: 100%;
	    display: flex;
	    justify-content: flex-end;
	}
	#sheetsheet_box .box03 .bottomm .in_group{
    margin: 0 10px;
    padding: 15px 25px;
}
	#sheetsheet_box .box03 .bottomm .send{
    padding: 15px 25px;
}
	#sheetsheet_box .box03 .bottomm{margin-top: 35px;}
}

@media screen and (max-width:640px){
	#sheetsheet_box .page_area{
	    width: 100%;
	    padding: 10px;
	}
	#sheetsheet_box .etain{
	    padding: 25px 5px;
	}
	#sheetsheet_box .tongan{
	    padding-top: 60px;
	}
	#sheetsheet_box .inpuu{
	    width: 170px;
	}
	#sheetsheet_box *{
	    font-size: 16px;
	}
	#sheetsheet_box .etain .topbar h2{
	    font-size: 20px;
	}
	#sheetsheet_box .etain .topbar{
    padding: 10px 0 11px;
}
	#sheetsheet_box .box01 .jwan .address .icheck-material-custom label:before{
	    top: 2px;
	}
	#sheetsheet_box .box01 .tirtle{
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    margin-left: 10px;
	}
	#sheetsheet_box .item select{
	    padding: 18px 0px;
	}
	.onebox, .onebox label{
	    width: 136px;
	}
	#sheetsheet_box .item{
	    padding: 0 7px;
	    margin: 10px 0;
	}
	#sheetsheet_box .item input{
		padding: 14px 0;
	}
	#sheetsheet_box .box01 .jwan{
	    margin-bottom: 10px;
	}
	#sheetsheet_box .box04{
	    padding: 20px 1px 0;
	}
	#sheetsheet_box .box04 label[for=Privacy]{
	    font-size: 17px;
	}
	#sheetsheet_box .box04 li{
	    font-size: 14px;
	}
	#sheetsheet_box .box04 ol{
    padding-inline-start: 21px;
}
}
@media screen and (max-width:480px){
	#show_detal .end_box{
	    width: calc(100% - 15px);
	}
	.right{
    width: 310px;
    height: 310px;
}
	.left{
    width: 310px;
    height: 310px;
}
	#show_detal .end_box p b#total{
	    font-size: 50px;
	}
	.wrapperrr{
	    width: 320px;
	}
	#show_detal .end_box p b{
	    font-size: 20px;
	}
	.popover{
    left: -20px;
}
}