
.main-contact{ margin:0px; padding:50px 0px; }
.contact-wrap{width: 100%;  margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between;   position: relative; }
 .contact{width: 100%; max-width: 100%;margin: auto; padding: 30px ; border-radius:0px; box-shadow: none;  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;position: relative;  }
/*----------------------------------------/
form
----------------------------------------*/
.contact-form{width:60%; margin: auto; padding:40px 20px 80px 20px; position: relative; z-index: 9;}
.contact-box{ width:calc(100% - 40%);   }
.contact-map{width: 40%; margin:0;padding:60px 30px 0px 30px;  overflow: hidden }
.contact-map iframe{width: 100%; min-height:40vh;margin: auto; border-radius:0px 50px 0px 50px; }
  
.contact-detail{width:40%; margin:0px auto;}
.contact-box{ width:calc(100% - 40% - 50px);padding-left: 50px }
 @media (max-width: 1024px) {
 .contact{ padding: 30px 0px; }
}
 @media (max-width: 840px) {
.contact-form{width:100%;  padding:0px 0px 80px 0px; order: 2 }
.contact-map{width: 100%; padding:0px 30px 40px 40px; order: 1  } 	 
.contact-box{ width:100%; }
	
.contact-detail{width:100%;  padding: 20px;  }
.contact-box{ width:100%;padding-left:20px  }
}

 @media (max-width: 767.98px) {
.contact{padding: 30px 0px 0px 0px;}
.contact-map{  padding:0px 30px 40px 10px;  } 	 	 
.contact-detail{padding: 10px;}
.contact-box{ width:100%;padding-left:10px  }
 }
.contact-detail-txt { width: 100%; padding: 0px;  margin: auto 0px;}
.contact-pic{ width: 100%; margin: auto 0px;} 
.contact-line{ width: 100%;  margin: 1% auto; padding:5px 10px 10px 0px;font-size: 1rem; display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.contact-title{ width: 30px; font-size: 1rem; font-weight: 700; color: #000;  }
.contact-name{ width:calc(100% - 30px - 20px);padding-left: 20px; font-size: min(max(3.5vw, .9rem), 1rem); font-weight: 500; line-height: 1.75rem;   }
.contact-name a{color: #000;}
.contact-name a:hover{color:#29b2e1;}
 
.contact-box h3{margin:0px 0px 20px 0px; font-size: min(max(3.5vw, 1rem), 1.275rem); font-weight:700; line-height: 1.75rem;color:#083078; }
.contact-box-txt{margin: 20px 0px;}
.contact-box-txt h4{margin: 10px 0px; font-size: min(max(3.5vw, 1rem), 1.15rem); font-weight: 600; line-height: 1.75rem;color:#083078; }
.contact-box-txt ul{margin: 10px 0px 10px 20px; padding: 0px 0px 0px 20px;  }
.contact-box-txt ul li{margin: 10px 0px; font-size: min(max(3.5vw, 0.9rem), 1rem); font-weight: 400; line-height: 1.75rem;   }
.contact-box-txt ul li strong{ display: block; font-weight:700;   }

@media (max-width: 640px) {
.contact-box-txt ul{ padding: 0px;  }	
}
ul.detal { list-style: none; margin: auto; padding: 0px 0px 0px 10px; }
ul.detal li{ margin-bottom:8px; font-size:0.95rem;  font-size: min(max(3.5vw, .875rem), 0.95rem); line-height: 1.5rem; font-weight: 400;  position: relative } 
ul.detal  li:before{content: "";  width: 10px;  height: 10px;  background: url(/images/theme-b67/index/dot-circle.png) no-repeat left top;background-size: cover;   position: absolute;  left: -15px;  top:7px; } 



.title-h2-sub{ width: 100%; margin: auto; padding: 0px; }
.title-h2-sub h2{ margin: 10px 0px;  font-size: min(max(3.5vw, 1.25rem), 1.75rem);  line-height: 130%;font-weight: 700; letter-spacing: 3px;  text-transform:uppercase}
.title-h2-sub p{ margin-top: 0px; font-size:1.125rem;  font-size: min(max(3.5vw, 1rem), 1.125rem); line-height:1.375rem; font-weight:400;  }
 
@media (max-width: 998px) {
.title-h2-sub{text-align: left; padding-left: 20px;} 
}
@media (max-width: 840px) {
.title-h2-sub{ width: 100%;  padding: 0px 20px; }	 
}
@media (max-width: 640px) {
.title-h2-sub{  padding: 0px; }	 
.title-h2-sub p{ line-height:1.375rem; }
}

.linkBtnBox { width: 120px; height: 120px; border-radius: 50%; position: relative; display: -webkit-box; display: -ms-flexbox;  display: flex;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  margin:25px 10px;}
.linkBtnBox::before { content: ""; position: absolute; width: 100%;  height: 100%;  border-radius: 50%; border: 1px dashed #0d67bd; top: 0; left: 0; right: 0; bottom: 0; margin: auto; pointer-events: none;  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite;}

 
.linkBtnBox .linkBtn {  width: 100px;  height: 100px; border-radius: 50%;  display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 3px solid rgba(255, 189, 74, 0);  background-color:#0d67bd; color: #fff; position: relative; overflow: hidden;}
.linkBtnBox .linkBtn::after { content: ""; position: absolute; width: 100px;  height: 100%; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%); top: 0; left: -100px; opacity: 0.6; -webkit-animation: shine 1.5s ease-out infinite; animation: shine 1.5s ease-out infinite; pointer-events: none; -webkit-user-select: none;-moz-user-select: none;  -ms-user-select: none; user-select: none;}

 
.linkBtnBox.line::before { border: 1px dashed #06c755;}
.linkBtnBox.line .linkBtn { background-color: #06c755;  color: #fff;}
.linkBtnBox.line .linkBtn::after {  -webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
 .linkBtnBox.schedule::before { border: 1px dashed #04a3db;}
.linkBtnBox.schedule .linkBtn { background-color: #04a3db;  color: #fff;}
.linkBtnBox.schedule .linkBtn::after {  -webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}

.linkBtnBox i { width: 36px; height:36px; display: block; margin: 0 auto;}
.linkBtnBox .btnText{ font-size: 0.85rem; font-weight: 500; text-align: center}





@media (min-width: 1201px) {
.linkBtnBox:hover::before {  border: 1px dashed #0d67bd; }
.linkBtnBox:hover .linkBtn { border: 3px solid #0d67bd; background-color: #fff;  color: #0d67bd;  }
.linkBtnBox:hover i img {  stroke: #0d67bd;  }
.linkBtnBox.line:hover::before { border: 1px dashed #06c755; }
.linkBtnBox.line:hover .linkBtn {  border: 3px solid #06c755;  background-color: #fff; color: #06c755;  }
.linkBtnBox.line:hover .linkBtn i {  color: #06c755;  }
.linkBtnBox.schedule:hover::before { border: 1px dashed #04a3db; }
.linkBtnBox.schedule:hover .linkBtn {  border: 3px solid #04a3db;  background-color: #fff; color: #04a3db;  }
.linkBtnBox.schedule:hover .linkBtn i {  color:#04a3db;  }
 }
@media (max-width: 640px) {
.linkBtnBox { width: 100px; height:100px; }	
.linkBtnBox .linkBtn {  width:80px;  height:80px; }
}
	
@-webkit-keyframes rotate {
  to {  -webkit-transform: rotate(360deg);  transform: rotate(360deg); }
}
@keyframes rotate {
  to {  -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes shine {
   0% { left: -100px; }
  60% { left: 100%; }
  to { left: 100%;  }
}
@keyframes shine {
  0% { left: -100px; }
  60% { left: 100%; }
  to { left: 100%;  }
}




