@charset "utf-8";

/* CSS Document */



.mainArea{

 padding:50px 0;

 background:#fff;

 font-style:normal;

}



.bannerArea {padding-top:-50px;}

.bannerArea .bannerTxtBox {

  position: absolute;

  top: 40%;

  left: 0;

  right: 0;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  height: calc(100% - 125px);

  z-index: 1;

}



.bannerArea .bannerTxt {

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  font-style:normal;

  max-width: 1160px;

  color: #FFF;

}



.bannerArea .bannerTxt > .userMainTitle {

  font-size: 54px;

  font-weight:600;

    text-align:center;

  line-height: 64px;

  color: #FFF;

}



.bannerArea .bannerTxt > .subContent {

	 font-size: 20px;

	 letter-spacing:0.07em;

	   text-align:center;

	 line-height:1.8;

}



.bannerArea .bannerTxt > .productTitle {

	 font-size: 42px;

	 font-weight:900;

	 line-height:1.5;

	 color:#EFD700;

}



.bannerArea .bannerTxt > .comment{

	font-size:16px;

	color:#fff;}

		

.productList{padding:50px 0}	

.messageBox{ padding:50px 20px;}

.messageBox  .btn{ margin-top:30px;}

.gbox{ background:#ABB8C3; padding:10px; color:#CF2E59; font-size:18px; margin:30px 0; text-align:center}

	



.comment a:{color:#fff;}

.comment a:link{ color:#fff}	

.comment a:visited{color:#fff}	



.share{border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc;; margin:20px 0}



.shareBox{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-top:15px;margin-bottom:15px}

.shareBox::before{content:'Share';margin-right:10px;color:#000}

.shareBox a{display:block;width:26px;height:26px;line-height:26px;margin-left:5px;text-align:center;color:#fff}

.shareBox a.line{background-color:#4dcc00}

.shareBox a.line:hover{background-color:#3a9900}

.shareBox a.line svg{width:18px;height:17px;margin-top:4px;fill:#fff}

.shareBox a.fb{background-color:#3b5999}

.shareBox a.fb:hover{background-color:#2d4474}

.shareBox a.twitter{background-color:#2baae1}

.shareBox a.twitter:hover{background-color:#1b8dbe}

.shareBox a.weibo{background-color:#df2029}

.shareBox a.weibo:hover{background-color:#b21a21}







.faqList li, .quBox, .ansBox, .ansBox .textEditor {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



.faqList {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  width: 100%;

}



.faqList li {

  width: 100%;

}



.faqList li.open .toggleOpen:before {

  -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

          transform: rotate(45deg);

}



.faqList li.open .toggleOpen:after {

  -webkit-transform: rotate(-45deg);

      -ms-transform: rotate(-45deg);

          transform: rotate(-45deg);

}



.faqList .item {

  position: relative;

}



.faqList .icon {

  display: inline-block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  font-style: normal;

  font-size: 18px;

  color: #fff;

  text-align: center;

  background-color: #edbc48;

}



.faqList .toggleOpen {

  position: absolute;

  left: 15px;

  top: 15px;

  width: 40px;

  height: 40px;

  border-radius: 0px;

  background-color: #edbc48;

}



.faqList .toggleOpen:before, .faqList .toggleOpen:after {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  margin-top: -0.5px;

  margin-left: -4px;

  width: 8px;

  height: 1px;

  background-color: #fff;

  -webkit-transition: all .5s;

  -o-transition: all .5s;

  transition: all .5s;

}



.faqList .toggleOpen:before {

  -webkit-transform: rotate(90deg);

      -ms-transform: rotate(90deg);

          transform: rotate(90deg);

}



.quBox, .ansBox {

  padding: 15px;

}



.quBox {

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  cursor: pointer;

}



.quBox .icon:before {

  content: '+';

}



.quBox h3 {

  width: calc(100% - 100px);

  margin-top: 7px;

  padding-left: 45px;

  font-weight: 600;

  font-size: 16px;

  line-height: 30px;

  color: #000;

  font-style:normal;

  letter-spacing: .05em;

}



.ansBox {

  display: none;

  width: 100%;

  z-index: 1;

  background-color: none;

}



.ansBox .icon {

  float: left;

  color: #edbc48;

  background-color: #fff;

}



.ansBox .icon:before {

  content: 'A';

}



.ansBox .textEditor {

  clear: none;

  float: left;

  width: calc(100% - 40px);

  padding-left: 45px;

  color: #333;

  font-size:15px;

}


.searchList {
  position: relative;
  margin: 30px 0 !important; }
  .searchList .item {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto; }
  .searchList .Img {
    overflow: hidden; }
    .searchList .Img:hover img {
      -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05); }
  .searchList img {
    display: block;
    width: 100%;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s; }
  .searchList .Txt {
    padding-top: 20px;
    padding-bottom: 20px; }
  
  .searchList h3 {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding-bottom: 10px; }
    .searchList h3 a {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.05em; }
  .searchList .ellipsis {
    height: 90px;
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
    color: #616060; }



@media(max-width:1024px){

.bannerArea .bannerTxtBox {

  position: absolute;

  top: 0;

  left: 10px;

  right: 0;

  margin-top: 80px;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  height: calc(100% - 80px);

  z-index: 1;

}

	

.mainArea{padding:50px 0;background:#fff;}



	}

	

	

@media (max-width: 960px) {	

.mainArea{padding:50px 0;background:#fff;}	

.bannerArea .bannerBox img{

display:block;

width:100%;

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

min-height:180px;

object-fit:cover}



.bannerArea .bannerTxt {

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  font-size: 17px;

  font-weight: 300;

  letter-spacing: 0;

  line-height: 30px;

  color: #FFF;

}



.bannerArea .bannerTxt > .userMainTitle {

  font-size: 36px;

  font-weight:600;

  text-align:center;

  line-height: 36px;

  color: #FFF;

}



.bannerArea .bannerTxt > .subContent {

	 font-size: 20px;

}



.messageBox{ padding:0 0 50px 0;}

.searchList .ellipsis {
    height: 45px;
 }

}



@media(max-width:640px){



.bannerArea .bannerTxt > .userMainTitle {

  font-size: 30px;

  font-weight:600;

  text-align:center;

  line-height: 36px;

  color: #FFF;

}

	

.bannerArea .bannerTxt > .productTitle {

	 font-size: 30px;

	 font-weight:600;

	 line-height:1.5;

	 color:#EFD700;

}



}



@media(max-width:480px){



.bannerArea .bannerTxtBox {

  position: absolute;

  top: 80px;

  left: 10px;

  right: 0;

  margin-top: 0px;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  height: calc(100% - 80px);

  z-index: 1;

}



.bannerArea .bannerTxt {

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  font-size: 15px;

  font-weight: 300;

  letter-spacing: 0;

  line-height: 30px;

  color: #FFF;

}



.bannerArea .bannerTxt > .userMainTitle {

  font-size: 25px;

  font-weight:600;

  text-align:center;

  line-height: 36px;

  color: #FFF;

}



.bannerArea .bannerTxt > .productTitle {

	 font-size: 25px;

	 font-weight:600;

	 line-height:1.5;

	 color:#EFD700;

}



.bannerArea .bannerTxt > .subContent {

	 font-size: 16px;

}



}	

	

@media(max-width:360px){


.bannerArea .bannerBox img{

display:block;

width:100%;

-webkit-backface-visibility:hidden;

backface-visibility:hidden;

min-height:150px;

object-fit:cover}





.bannerArea .bannerTxt {

 display:none;

}



}