/*font*/
@font-face {
  font-family: KrungthaiFastWeb;
  src: url('../fonts/KrungthaiFastWeb-Regular.eot');
  src: url('../fonts/KrungthaiFastWeb-Regular.eot?') format('embedded-opentype'),
       url('../fonts/KrungthaiFastWeb-Regular.woff') format('woff'),
       url('../fonts/KrungthaiFastWeb-Regular.ttf') format('truetype');
}
@font-face {
  font-family: KrungthaiFastWeb_bold;
  src: url('../fonts/KrungthaiFastWeb-Bold.eot');
  src: url('../fonts/KrungthaiFastWeb-Bold.eot?') format('embedded-opentype'),
       url('../fonts/KrungthaiFastWeb-Bold.woff') format('woff'),
       url('../fonts/KrungthaiFastWeb-Bold.ttf') format('truetype');
}
@font-face {
  font-family: KrungthaiFastWeb_exbold;
  src: url('../fonts/KrungthaiFastWeb-ExtraBold.eot');
  src: url('../fonts/KrungthaiFastWeb-ExtraBold.eot?') format('embedded-opentype'),
       url('../fonts/KrungthaiFastWeb-ExtraBold.woff') format('woff'),
       url('../fonts/KrungthaiFastWeb-ExtraBold.ttf') format('truetype');
}
@font-face {
font-family: OpenSans;
src: url('../fonts/OpenSans-Regular.eot');
src: url('../fonts/OpenSans-Regular.eot?') format('embedded-opentype'),
     url('../fonts/OpenSans-Regular.woff') format('woff'),
     url('../fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: OpenSans_bold;
src: url('../fonts/OpenSans-Bold.eot');
src: url('../fonts/OpenSans-Bold.eot?') format('embedded-opentype'),
     url('../fonts/OpenSans-Bold.woff') format('woff'),
     url('../fonts/OpenSans-Bold.ttf') format('truetype');
}
/*font*/

html,body {
height: 100%;
}
body {
font-family: KrungthaiFastWeb;
font-size:0.875rem;
}
a {
color: #00b3f0;
transition: .2s;
}
a:hover {
color: rgba(0,0,0,.5);
text-decoration: none
}

h1{
  font-size: 32px;
}
.testboj {
border: 1px solid red;
}

.bg-page-change-domain { 
/* background:url(../images/bg-changedomain_x2.png); */
background:url(../images/bg-changedomain.png);
background-size: cover;
display: block;
min-height: 768px;
background-position: center;
width: 100%;
height: 100%;
background-repeat: no-repeat;

}

.main-changdomain {
background-color: #f5f5f5;
height: 100%;
}

.content-change-domain {
padding: 150px 0px;
}

.content-change-domain .head-title {
font-family: KrungthaiFastWeb_exbold;
color:#00b0eb;
margin-top:50px;
margin-bottom: -6px;
}
.head-title::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
transform: translateY(2px);
border-radius: 3px;
background-color: #00b0eb;
margin-right: 5px;
}

.content-change-domain .text-detail {
font-family: KrungthaiFastWeb_exbold;
color: #0b1c49;
font-size: 28px;
}
.content-change-domain .text-detail span{
font-size: 36px;
text-decoration:underline;
}

.content-change-domain .text-detail-link-1 {
color: #8e9cc1;
text-decoration: line-through;
font-size: 19px;
}
.text-detail-link-1::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
transform: translateY(2px);
border-radius: 3px;
background-color: #8e9cc1;
margin-right: 5px;
}

.content-change-domain .control-arrow {
position: relative;
height: 42px;
}

.content-change-domain .control-arrow  .line-arrow {
width: 1px;
height: 45px;
display: block;
background: #e5e8f3;
position: absolute;
left: 7px;
}

.content-change-domain .style-arrow-down {
top: 15px;
left: -6px;
position: relative;
z-index: 10;
background: rgb(43,194,241);
display: inline-flex;
justify-content: center;
align-items: center;
width: 27px;
height: 27px;
background: linear-gradient(312deg, rgba(43,194,241,1) 46%, rgba(10,140,194,1) 100%);
box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-webkit-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-moz-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
border-radius: 50px;
}
.content-change-domain .style-arrow-down i {
color: white;
font-size: 1rem;
}

.content-change-domain .text-detail-link-2 {
color: #00b0eb;
font-family: KrungthaiFastWeb_exbold;
font-size: 22px;
}
.content-change-domain .text-detail-link-2 span {
color: #0b1c49; 
font-family: KrungthaiFastWeb;
display: block;
font-size: 18px;
margin-top: 7px;
padding-left: 22px;
}
.text-detail-link-2::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
transform: translateY(0px);
border-radius: 3px;
background-color: #00b0eb;
margin-right: 5px;
}
.content-change-domain .text-noti {
color: #0b1c49;
font-size: 14px;
}

.btn-change-domain {
background: linear-gradient(312deg, rgba(43,194,241,1) 46%, rgba(10,140,194,1) 100%);
box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-webkit-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-moz-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
border: none;
width: 170px;
padding: 8px 8px;
}
.btn-change-domain:hover , .btn-change-domain:focus , .btn-change-domain:active {
background: linear-gradient(312deg, rgba(43,194,241,1) 46%, rgba(10,140,194,1) 100%) !important;
box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-webkit-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
-moz-box-shadow: 0px 0px 24px 6px rgba(38,187,234,0.25);
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
border: none;
width: 170px;
padding: 8px 8px;
}
.btn-change-domain span.radius-circle {
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-radius: 50px;
text-align: right;
}
.btn-change-domain span i {
color: #00b0eb;
font-weight: 600;
font-size: 1rem;
}

/* Bob */
@-webkit-keyframes hvr-bob {
0% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
50% {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

}
@keyframes hvr-bob {
0% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
50% {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
@-webkit-keyframes hvr-bob-float {
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
@keyframes hvr-bob-float {
100% {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
}
.hvr-bob {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {

}
/* Bob */


/* Icon Wobble Horizontal */
@-webkit-keyframes hvr-icon-wobble-horizontal {
16.65% {
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
}
33.3% {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}
49.95% {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
66.6% {
  -webkit-transform: translateX(-2px);
  transform: translateX(-2px);
}
83.25% {
  -webkit-transform: translateX(1px);
  transform: translateX(1px);
}
100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
}
@keyframes hvr-icon-wobble-horizontal {
16.65% {
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
}
33.3% {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}
49.95% {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
66.6% {
  -webkit-transform: translateX(-2px);
  transform: translateX(-2px);
}
83.25% {
  -webkit-transform: translateX(1px);
  transform: translateX(1px);
}
100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
}
.hvr-icon-wobble-horizontal {
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-icon-wobble-horizontal .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon {
-webkit-animation-name: hvr-icon-wobble-horizontal;
animation-name: hvr-icon-wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

@media (min-width: 992px) and (max-width: 1199px) {


}

@media (min-width: 768px) and (max-width: 991px) { 
.d-none-changdomain {
  display: none;
}
.content-change-domain button {
  margin: 0 auto;
}
.content-change-domain {
  height: 100%;
  padding: 150px 100px;
  background:url(../images/bg-changedomain_md.jpg) center;
  background-size: cover;
  text-align: center;
}
.content-change-domain .head-title{
  text-align: left;
  padding-left: 160px;
}
}


@media (max-width: 767px) {
.d-none-changdomain {
  display: none;
}
.content-change-domain button {
  margin: 0 auto;
}

.content-change-domain {
  height: 100%;
  padding: 150px 30px;
  background:url(../images/bg-changedomain_md.jpg) center;
  background-size: cover;
  text-align: center;
}
.content-change-domain .head-title{
  text-align: center;
}
.text-detail-link-1::before {
  display: none;
}
.text-detail-link-2::before {
  display: none;
}
}

@media (max-width: 480px) {
.d-none-changdomain {
  display: none;
}
.content-change-domain button {
  margin: 0 auto;
}
.content-change-domain {
  padding: 150px 30px;
}
.content-change-domain {
  height: 100%;
  padding: 100px 20px;
  background:url(../images/bg-changedomain_md.jpg) center;
  background-size: cover;
  text-align: center;
}
.content-change-domain .head-title{
  text-align: left;
  padding-left: 0px;
}
.content-change-domain .text-detail span {
  font-size:30px
}
.content-change-domain .text-detail {
  font-size:22px
}
.text-detail-link-1::before {
  display: none;
}
.text-detail-link-2::before {
  display: none;
}
.content-change-domain .text-detail-link-1 {
  font-size: 16px;
}
.content-change-domain .text-detail-link-2 {
  font-size: 18px;
}
}