@import url('/css/community.css');

/* sbanner */
#sbanner { position: relative; z-index: 1; }
#sbanner a { position: relative; z-index: 1; }
#sbanner:after {position: absolute;width: 100%;height: 100%;/* background: rgb(4 4 4 / 7%); */display: block;top: 0;left: 0;z-index: 2;content: "";}

/* wrap */
.wrap  {position: relative;margin-top: 0px;z-index: 2;}
.wrap h1 { line-height: 150%; }
.wrap .bbhhk{
    width: 65%;
    margin: 0 auto;
    padding-top: 150px;
}
    .wrap .bbhhk h1{vertical-align: middle;line-height: 180%;font-size: 28px;display: inline-block;}
    .wrap .bbhhk b{vertical-align: middle;line-height: 180%;display: inline-block;margin-left: 10px;font-size: 28px;font-weight: 500;}
	.wrap .bbhhk h1:before{
	position: relative;
	display: inline-block;
	content: "";
	width: 10px;
	height: 30px;
	margin-bottom: 7px;
	vertical-align: middle;
	margin-right: 10px;
	line-height: 180%;
	background: #000000;
}
#community{
	display:none;
}
.wrapBox-ar{width:100%;}
.wrapBox-ar #community{
    width: 90%;
    margin: 0 auto;
}
.wrapBox-ar .waylink ol{
    width: 95%;
}
/* waylink */
.waylink ol {margin-bottom: 20px;font-size: 0;text-align: right;margin-top: 50px;}
.waylink ol li { display: inline-block; color: #222; }
.waylink ol li a { color: #737373; }
.waylink ol li a:after {margin: 0 5px;display: inline-block;color: #000;content: "/";}
.waylink ol li:last-child a { color: #222; }
.waylink ol li:last-child a:after { content: ""; }

/* contact998 */
.contact998 .contentMain article{
    width: 50%;
    display: inline-block;
}
.contact998 .contentMain article a{
	color:black;
}
.contact998 .contentMain #g-map{
    width: 49%;
    display: inline-block;
}
.contact998 .contentMain #g-map iframe{
	width:100%;
	height:300px;
}
/* contentMain */
.contentMain {position: relative;padding: 50px 0;min-height: 300px;}
.contact998 .contentMain{padding-top: 200px;}
.contentMain .bgTxt{margin-left: -150px;}
/* sideNav */
#sideNav { position: relative; margin: 0 0 50px; text-align: right; z-index: 2; }
#sideNav #sideBtn { position: relative; overflow: hidden; padding: 10px 20px; width: 260px; background: #fff; border: 1px #000 solid; display: inline-block; color: #000; z-index: 2; }
#sideNav #sideBtn:before { position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: ""; }
#sideNav #sideBtn font { position: relative; z-index: 1; }
#sideNav #sideBtn i { position: absolute; top: calc((100% - 8px) / 2); right: 20px; z-index: 2; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: rotate(0); transform: rotate(0); }
#sideNav #sideBtn[data-type="2"]:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); }
#sideNav #sideBtn[data-type="2"] font { color: #fff; }
#sideNav #sideBtn[data-type="2"] i { color: #fff; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
#sideNav >ul { overflow: hidden; position: absolute; width: 300px; height: 0; background: #222; border: 1px #4d4d4d solid; top: 0; right: 0; z-index: 1; }
#sideNav >ul.open { padding: 5px 0; height: auto; top: 52px; }
#sideNav >ul >li { position: relative; overflow: hidden; opacity: .4; }
#sideNav >ul >li h3 { position: relative; background: #222; z-index: 2; }
#sideNav ul li b[data-action="sideOpen"] { position: absolute; padding: 5px 20px; display: block; color: #fff; right: 0; top: 0; cursor: pointer; }
#sideNav ul li b[data-action="sideOpen"] i:before { content: "\f067"; }
#sideNav ul a { padding: 7px 53px 7px 20px; display: block; color: #fff; }
#sideNav >ul >li >ul.subUL { position: absolute; background: #3d3d3d; border: #454545 solid; border-width: 1px 0; bottom: 100px; -webkit-transition-duration: .2s; transition-duration: .2s; opacity: 0; z-index: 1; }
#sideNav ul .subULHead b[data-action="sideOpen"] { display: none; }
#sideNav ul .subULHead a { padding: 7px 20px; }
#sideNav ul .sub2ULHead a { padding: 2px 37px; color: #7184ac; }
#sideNav >ul >li.action { opacity: 1; }
#sideNav >ul >li.openlist { border-bottom: 1px #0c0c0c solid; opacity: 1; }
#sideNav >ul >li.openlist h3 a { border-bottom: 1px #251e1e solid; }
#sideNav >ul >li.openlist h3 b i:before { content: "\f068"; }
#sideNav >ul >li.openlist >ul.subUL { position: relative; bottom: 0; opacity: 1; }

/* NewsBox */
#NewsBox .webframe{width:1440px;margin:0 auto;text-align:center}
#NewsBox .index-title{position:relative;}
#NewsBox .index-title h2{text-align:center;color:#413f3f;font-weight:400;font-size: 20px;line-height:120%;letter-spacing: .35em;}
#NewsBox .index-title h3{text-align:center;color: #101010;font-size: 50px;line-height:100%;font-weight: 500;margin-top:5px;font-family: 'Frank Ruhl Libre', serif;letter-spacing: 1.2px;}
#NewsBox .more{text-align:center;margin-top:45px}

#NewsBox p a b{font-weight:400;margin-right:10px}

#NewsBox {position: relative;padding: 30px 0 0;}
#NewsBox .bgTxt.stitle{
    top: 6vw;
}
#NewsBox #news{
    padding: 0px 0;
}
#NewsBox ul{padding: 0vw 0 0;margin-top: -2vw;}
#NewsBox .bg {position: absolute;width: 100%;height: calc(100% - 300px);/* background: #f4f4f4; */top: 200px;left: 0;}
#NewsBox .leftPhoto { position: absolute; width: calc((55% - 50px) / 2); bottom: 15%; left: 0; z-index: 2; }
#NewsBox .leftPhoto a { position: relative; }

#NewsBox .leftPhoto a.photo img { width: 100%; }
#NewsBox .leftPhoto a font { position: absolute; padding: 15px 20px; width: calc(100% - 40px); background: rgba(0, 0, 0, 0.7); font-size: 16px; color: #fff; left: 0; bottom: 0; }
#NewsBox ul li {position: relative;text-align: center;width: 49%;display: inline-block;margin-bottom: 50px;}
#NewsBox ul li .newImg {box-shadow: 0 0 10px rgba(79, 69, 62, 0.65);float: left;width: calc(50% - 10px);margin-left: 50px;}
#artlsit #NewsBox ul li .info {float: right;width: calc(42% - 70px);margin-top: 0px;}
#NewsBox ul li .info h3 {padding: 15px 0 20px 0px;height: 54px;line-height: 160%;color: #363636;-webkit-line-clamp: 2;border-top: solid 1px #d3d3d3;display: none;}
#NewsBox ul li .info h3 a {font-size: 16px;color: #6a6a6a;font-weight: 400;letter-spacing: 1.2px;}
#NewsBox ul li .info p {color: #767676;}
#NewsBox ul li .info .rightbox{
    overflow: hidden;
    padding-bottom: 20px;
}
#NewsBox ul li .info .rightbox .date{
    float: left;
    font-size: 45px;
    color: #3f3f3f;
    font-family: 'Playfair Display SC', serif;
    width: 60px;
    vertical-align: top;
    margin: -12px 10px 0 0px;
    text-align: center;
}
#NewsBox ul li .info .rightbox .date2{
	font-family: 'Playfair Display SC', serif;
}    
#NewsBox ul li .info p.describe {height: 50px;-webkit-line-clamp: 4;/* display: none; */border-top: solid 1px #d3d3d3;padding: 10px 0;}
#NewsBox ul li .info p.more {margin-top: 0px;text-align: left;overflow: hidden;padding: 10px 10px;padding-top: 50px;}
#NewsBox ul li .info p.more a {color: #868686;transition: .4s cubic-bezier(.23,1,.32,1);padding: 10px 30px;position: relative;border: #0000001f 1px solid;font-size: 14px;letter-spacing: 0.12em;}
#NewsBox ul li .info p.more a:after , #NewsBox ul li .info p.more a font.dote span { background: #fafafa; }
#NewsBox ul li .info p.more a:after{display:none;}

@media screen and (min-width: 1281px) {
	p.more a:hover {border-color: #000;}
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	#NewsBox ul li .info p.more:hover a{color:white;z-index: 999999;}
	p.more a:hover:after { background: #000; }
	p.more a:hover font { color: #fff; }
	p.more a:hover span { background: #fff; transform: scale(1.1); }
	p.more a:hover span:after { border-color: transparent transparent transparent #fff; }
	#productBox .wall-column .article:hover .imgBox article { bottom: 0; }
	p.more a:before {position: absolute;width: 100%;height: 100%;background: #000;top: 0;left: 0;transform: translateX(-140%) skewX(63deg);transition: .4s cubic-bezier(.23,1,.32,1);content: "";z-index: -9;padding: 10px 10px;}
}

.bgTxt{margin-left: -150px;}
.bbde .bgTxt{margin-top: 75px;position: absolute;}
.conne .bgTxt{margin-top: 50px;position: absolute;}
.BT02  .bgTxt{margin-left: 0;margin-top: 110px;position: absolute;margin-left: 50px;}
@media screen and (max-width: 1600px)
{
	.bgTxt{margin-left: -50px;}
}
@media screen and (max-width: 1420px)
{
	.bgTxt{margin-left: 0px;}
}

/* artlsit */
#artlsit ul li {overflow: hidden;}
#artlsit ul li:last-child { border-bottom-color: transparent; }
#artlsit ul li >div { float: right; width: 350px; }
#artlsit ul li .img { overflow: hidden; }
#artlsit ul li .img a.photo { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
#artlsit ul li .info {padding: 30px;width: calc(100% - 410px);}
#artlsit ul li .info .cate a , #artlsit ul li .info .cate font , #content .articlebar font {padding: 2px 0px;display: inline-block;font-size: 19px;color: #5e5e5e;}
#content .articlebar font p {
    font-family: 'Noto Serif TC';
}
#artlsit ul li .info h3 { margin: 25px 0 10px; }
#artlsit ul li .info h3 a {height: 47px;font-weight: 100;font-size: 30px;color: #000;-webkit-line-clamp: 1;}
#artlsit ul li .info article a { height: 60px; font-weight: 100; color: #484848; -webkit-line-clamp: 2; }

/* content */
#content .articlebar { margin: -50px 0 30px ; }

/* faqList */
#faqList li { margin-bottom: 10px; }
#faqList li .title { position: relative; padding: 10px 65px 10px 25px; background: #e8e8e8; display: block; }
#faqList li .title font { color: #181818; }
#faqList li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
#faqList li .title span:before , #faqList li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info { padding: 15px 25px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
#faqList li.current .title { background: #181818; }
#faqList li.current .title font { color: #fff; }
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* pagenav */
#pagenav { overflow: hidden; margin: 30px 0 0; text-align: center; }
#pagenav a , #pagenav strong {width: 30px;height: 30px;display: inline-block;text-align: center;line-height: 26px;font-size: 18px;color: #111;vertical-align: middle;}
#pagenav strong.number_hit{
    background-color: #121212;
    color: #f9f9f9;
    border-radius: 50%;
}
#pagenav a { opacity: .5; }
#pagenav p[class^="page-"] { float: left; width: 50%; }
#pagenav p[class^="page-"] a {padding: 0 10px;width: auto;height: auto;display: block;text-align: left;vertical-align: middle;line-height: 180%;font-size: 16px;}
#pagenav p[class^="page-"] a b{line-height:180%;vertical-align: bottom;margin: 0 5px;font-size: initial;}
#pagenav p[class^="page-"] a i {margin: 0 0px 0 0;background-color: black;color: white;padding: 4px 5px;padding-left: 6px;border-radius: 9px;font-size: 15px;line-height: 8px;vertical-align: initial;}
#pagenav p.page-next { float: right; }
#pagenav p.page-next a {text-align: right;font-size: 16px;vertical-align: middle;}
#pagenav p.page-next a i {margin: 0 0 0 4px;}

/* pictureBox */
#pictureBox { margin-bottom: 0; }
#pictureBox .item { position: relative; }
#pictureBox .item a.photo { margin-right: 1px; }
#pictureBox .item h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#pictureBox .item h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

/* form1 */



/*form*/

input[type="text"],input[type="button"], input[type="submit"], input[type="reset"] {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
border-radius: 0; 
}
   
textarea{-webkit-appearance: none;appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-radius: 0; }

#Cgmap iframe{

	width:100%;
	height: 250px;
}
.main-article{
	width: 95%;
}
.contactInfo{
	margin-top: 56px;
	position: relative;

	padding-left: 32px;
	line-height: 30px;
	padding-bottom: 62px;
	font-size: 16px;
}
.contactInfo::before{
	position: absolute;
	content: "";
	display: block;
	border-left: 3px solid #dab866;
	height: 82px;
	top: 5px;
	left: 10px;
}


.checkboxItem{
	display: flex;
}
.checkboxItem .checkitem{
	width: 20%;
}
.checkboxItem .checkitem span{
	padding: 0 5px;
	font-size: 14px;
	letter-spacing: 0px;
	color: unset;
	padding-bottom: 0px;
	margin-top: 0px;
}
.checkboxItem .checkitem:nth-child(5){
	width: 60px;
}
.checkboxItem #checkOther{
	border-bottom: 1px solid #898989;
}



/*打勾樣式*/
.checkitem{
	position: relative;
}

.myCheck span.checks {

    width: 13px;
    height: 13px;
    display: block;
    background: url("/images/34/checkbox.png");
    background-size: contain;
     background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 8px;
}
.myCheck input{
	opacity: 0;
}
.myCheck input + span.checks::after{
	content: "";
	width: 16px;
	height: 16px;
	top: -5px;
	left: 1px;
	position: absolute;
	transition: all ease .5s;
	opacity: 0;
	
	background-image: url('/images/34/checked.png');
	background-size: contain;
     background-repeat: no-repeat;
}
.myCheck input:checked + span.checks::after {

	
	opacity: 1;
	


}





article{
	position: relative;
	padding-bottom: 96px;
	line-height: 34px;
	display: flex;
	border-bottom: 1px solid #dcdcdc;
}
article #gmap{
	position: absolute;
	right: 0px;
	width: 55%;
	
}
.contact-set{
	text-align:center;
}
.contact-set .inside{
    font-family: 'Candal', sans-serif;
    line-height: 150%;
    text-align: center;
    color: #6ee6a8;
    font-weight: normal;
    font-size: 40px;
	margin-top: 70px;
}
.contact-set article{
	text-align: center;
    line-height: 150%;
    font-size: 16px;
	padding: 30px;
}

.step{
	margin: 0 0 120px;
	text-align: center;
}
.step ul{
	text-align:center;
	padding:20px 0;
}
.step ul li{
    display: inline-block;
    position: relative;
    padding: 0 50px;
    margin-right: -4px;
    color: #23a05f;
    font-size: 16px;
}
.step ul li:after{
    content: '';
    width: calc(40% - 2em);
    background: #7beeb2;
    height: 1px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
}
.step ul li:before{
    content: '';
    width: calc(40% - 2em);
    background: #7beeb2;
    height: 1px;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}
.step ul li:first-child:before,
.step ul li:last-child:after{
	display:none;
}
.contact-form,
#order{
	width: 900px;
    margin: 0 auto;
}
.contact-form [data-doorman]{
	width:100%;
}
form,
fieldset{
	border:0;
	margin:0;
	padding:0;
	overflow:hidden;
}
form .list{
	/*padding: 40px;*/
	position: relative;
	padding-bottom: 46px;
	padding-left: 32px;
}
form .dash{
	position: relative;
}
form .dash::before{
	content: "";
	position: absolute;
	top: 50px;
	left: 5px;
	width: 12px;
	height: 6px;
	background-color: #16316c;
}
form .dashfind::before{
	content: "";
	position: absolute;
	top: 65px;
	left: 5px;
	width: 12px;
	height: 6px;
	background-color: #16316c;
}
form .col-8{
	width: 52%;
	display: inline-block;
}
form .col-4{
	width: 41%;
	display: inline-block;

}

form .list p{
	position: relative;
	overflow:hidden;
	font-size: 16px;
}
form .list p label{
	letter-spacing: 2px;
	font-size: 17px;
	color: #16316c;
	
    display: block;
    width: 200px;
    
	margin-top: 10px;
}
form .list label span{
	letter-spacing: 2px;
	font-size: 17px;
	color: #16316c;
	padding-bottom: 20px;
    display: inline-block;

    
	margin-top: 10px;
}
form .list label span.checkboxTitle{
	color: #b4b4b4;
}
form .list p label strong{
    color: #F00;
    margin-left: 5px;
    font-size: 12px;
    vertical-align: bottom;
}

form textarea{

    /*width: calc(100% - 220px - 2px);*/
    width: 97%;
    border: 1px #d2d2d2 solid;
    padding: 10px 10px;
}
form .list p input{
	position: relative;
	width: 98%;
    border-bottom: 1px #898989 solid;
    padding: 10px 10px;
}
form .col-8 p input{
	width: 80%;

}
form .list p input::before{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 13px;
	height: 6px;
	content: "";
	background-color: #16316c;
	display: inline-block;
}
form .list p input#Checknum{
	border: 1px solid #bfc0c0;
	width:164px;
	margin-right:10px;
}
form .list.last{
    border-bottom: none;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
	text-align:center;

}
form .list.last p{
	display: inline-block;
}
form .list.last p input{
    width: 140px;
    text-align: center;
    background:#16316c;
    border: none;
    float: none;
    padding: 10px 0;
    display: inline-block;
    color: #ffffff;
    cursor:pointer;
    position:relative;
}
form .list.last p:after{
	position:absolute;

	content:'';
	left:calc(50% - 125px);
	bottom:0;
	width:250px;
	height:37px;
	background: #848484;
	z-index: -2;
	transition:all ease-in-out 0.3s;
}
form .list.last p:before{
	position:absolute;
	content:'';



	left:calc(50% - 125px);
	bottom:0;
	width:0;
	height:37px;
	background: #026fbf;
	z-index: -1;
	transition:all ease-in-out 0.3s;
}
form .list.last p:hover:before{
	width:250px;
}
form .list.last p:hover:after{
	width:0;
}
form .list.code img{
	margin-top: 8px;
}
form .contactTextarea,form .code{
	padding-left: 45px;
}

/* + order
*----------------------------------------------------------------------------*/
.orderStyle{
	padding:20px;
}
#order .orderWrap {
	margin-bottom: 15px;
}

#order .orderWrap .orderList {
	overflow: hidden;
	position: relative;
	padding: 10px 0;
	border-bottom: 1px #8e8e8e dashed;
}

#order .orderWrap .orderList p {
	width: 15%;
	float: left;
}

#order .orderWrap .orderList p:first-child {
	width: 40%;
}

#order .orderWrap .orderList p label {
	padding-bottom: 5px;
    border-bottom: 2px #005f5e solid;
	text-align: center;
	display: none;
}

#order .orderWrap .orderList:first-child p label {
	display: block;
}

#order .orderWrap .orderList p b {
	margin: 5px 20px;
	display: block;
	line-height: 100px;
	text-align: center;
}

#order .orderWrap .orderList p:first-child b {
	text-align: left;
}
#order .orderWrap .orderList p b a{
	color:#000;
}
#order .orderWrap .orderList p b img {
	margin-right: 15px;
	height: 100px;
}

#order .orderWrap .orderList p input[type="text"] {
	padding: 0 10px;
	width: 30px;
	border: 1px #ddd solid;
	font-size: 16px;
}

#order .orderWrap .orderList p input[type="button"] {
	margin-left: 0;
	padding: 5px 10px;
	background: #ec3939;
	border-color: #901c1c;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
}

#order .orderWrap .orderList p input[type="button"]:hover {
	background: #901c1c;
}

#order #orderTotal p {
	margin: 10px 0;
	text-align: right;
}

#order .button {
	margin: 15px 0 30px;
	text-align: center;
}

#order .button p.link {
	text-align: right;
}

#order .button p {
	width: 49%;
	display: inline-block;
}

#order .button p a {
	padding: 10px 20px;
	background: #8c7d68;
	display: inline-block;
	font-weight: normal;
	color: #fff;
}

#order .button p.link a {
	background: #e17b60;
}

#order .button p a i {
	vertical-align: initial;
}

#order .button p a:hover {
	opacity: 0.7;
}
.contact-center,
.contact-center p{
	text-align:center;
}
@media screen and (max-width:1723px){
	form .col-8{
		width: 50%;
	}
}
@media screen and (max-width:1440px){
	.inside{
    width: 90%;
    margin: 0 auto;
 }

	article #gmap{
		width: 45%;
	}
}
@media screen and (max-width:1330px){
	form .col-8{
		width: 48%;
	}
	form textarea{
		width: 95%;
	}
}
@media screen and (max-width:1280px){
	.contact-form,
	#order{
		width: 100%;
	}
	#NewsBox ul li{
		width:100%;
        margin-top:20px
		}

}
@media screen and (max-width:1180px){
	.main-article .pagetitle{
		margin-bottom: 75px;
	}
	form .col-8{
		width: 50%;
	}
}
@media screen and (max-width:880px){
	form .col-8,form .col-4,form .col-8 p input{
		width: 100%;
	}
}
@media screen and (max-width:841px){
	.checkboxItem{
		flex-wrap: wrap;
	}
	.checkboxItem .checkitem{
		width: 50%;
		padding-bottom: 20px;
	}
	.checkboxItem .checkitem:nth-child(5){
		padding-bottom: 0px;
	}
}
@media screen and (max-width:768px){
		.contact998 .contentMain article{
		width: 100%;
    }
    .contact998 .contentMain #g-map{
    	width:100%;
    }
	form .dash::before{
		top: 60px;
	}
	form .list p input, form textarea{
		width: calc(100% - 20px - 2px);	
		margin-top: 10px;
	}
	form .list p label{
		width:100%;
	}
	.step ul li{
	    padding: 0 30px;	
	}
	
	#order .orderWrap .orderList {
		border-bottom: 0;
	}
	#order .orderWrap .orderList p ,
	#order .orderWrap .orderList p:first-child {
		float: none;
		width: 100%;
		border-bottom: 1px #8e8e8e dashed;
	}
	#order .orderWrap .orderList p label ,
	#order .orderWrap .orderList:first-child p label ,
	#order .orderWrap .orderList p b {
		margin: 0;
		padding: 10px 0;
		width: 49%;
		display: inline-block;
		line-height: 33px;
		border-bottom: 0;
	}
	#order .orderWrap .orderList p:first-child label ,
	#order .orderWrap .orderList p:first-child b {
		width: 100%;
		text-align: center;

	}
	#order .orderList p b a{
		height: auto;	
	}
	#order .orderWrap .orderList p:first-child label {
		border-bottom: 2px #0c6b69 solid;
	}

	#order .orderWrap .orderList p b img {
		margin: 0 auto 10px;
		max-width: 100%;
		height: auto !important;
		display: block;
	}	
	.orderStyle{
		padding: 0;	
	}
	
}
@media screen and (max-width:640px){
	.BT02 .bgTxt{margin-left:0;}
	article{
		flex-wrap: wrap;

	}
	article .contactSet{
		width: 100%;
		padding-bottom: 15px;
	}
	article #gmap{
		position: unset;
		width: 100%;
		padding-left: 0px;
	}
	.wrapBox-ar{width:90%;}
	.wrap .bbhhk{
    width: 85%;
    }
    .contact998 .contentMain{
    	padding-top:100px;
    }

}


@media screen and (max-width: 1600px)
{
	.contentMain .bgTxt{margin-left: -50px;}
}
@media screen and (min-width: 1281px) {
	#sideNav #sideBtn:hover:before { -webkit-transform: translateX(0) skewX(0); transform: translateX(0) skewX(0); }
	#sideNav #sideBtn:hover font , #sideNav #sideBtn:hover i { color: #fff; }
	#sideNav >ul >li:hover { opacity: 1; }
	#artlsit ul li:hover .img a.photo { -webkit-transform: translate(0) scale(1.2); transform: translate(0) scale(1.2); }
	#artlsit ul li:hover .img a.photo img { background: rgba(71, 70, 70, .6); }
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover { opacity: .6; }
	#faqList li:hover .title { background: #181818; }
	#faqList li:hover .title font { color: #fff; }
	#pagenav a:hover { opacity: 1; }
}
@media screen and (max-width: 1420px)
{
	.contentMain .bgTxt{margin-left: 0px;}
}
@media screen and (max-width: 980px) {
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
}
@media screen and (max-width: 768px) {
	#sbanner a img{
		height:500px;
	}
	#artlsit ul li >div { width: 250px; }
	#artlsit ul li .info { padding: 20px; width: calc(100% - 290px); }
	#artlsit ul li .info h3 { margin: 10px 0; }
	#artlsit ul li .info h3 a { height: 40px; font-size: 22px; }
	#artlsit ul li .info article a { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 640px) {
	#NewsBox ul{
    margin-top: 1vw;
}
	#artlsit ul li { padding: 10px 0; }
	#artlsit #NewsBox ul li .info , #NewsBox ul li .newImg{width:100%;}
	#artlsit #NewsBox ul li .info{margin-top:20px;}
	#NewsBox ul li .newImg{margin:0 10px;}
	#artlsit ul li >div , #artlsit ul li .info { position: relative; margin: 15px auto; float: none; padding: 0; width: 80%; }
	#artlsit ul li .info .cate { position: absolute; top: -43px; left: 0; }
	#artlsit ul li .info .cate a { background: #424242; }
	#form1 p.col-4 { width: calc(100% - 40px); }
	.gotop{
    right: 5px;
}
}
@media screen and (max-width:480px){
	#sbanner a img{
		height:300px;
	}
	form .list{
		padding: 20px 0;	
	}
	.step{
	    display: none;	
	}
	.contact-set .inside{
		font-size:30px;
	}
	.contact-set article{

		font-size: 14px;	
	}
	.contact-set .inside{
		margin-top: 50px;	
	}
	#Cgmap iframe{
		height: 150px;
	}

	form .dash::before,form .dashfind::before{
		display: none;
	}
}
@media screen and (max-width: 450px) {
	#artlsit ul li >div , #artlsit ul li .info { width: 90%; }
}