@charset "UTF-8";

.newsletter-bx .sub-explain-bx {margin-bottom: 45px;}
.newsletter-bx .sub-expalin-inner .sub-explain-info.middle {vertical-align: middle; padding-top: 0;}

.newsletter-bx h3 {font-size: 26px; font-family: "Noto Medium"; letter-spacing: -0.5px; color: #151515;}
.newsletter-bx h3 span {color: #eb0000;}

.newsletter-bx .newsletter-privacy {padding: 10px; background: url("../images/repeat_bg.png"); margin-top: 15px;}
.newsletter-bx .newsletter-privacy ul {background: #fff; padding: 20px 2%;}
.newsletter-bx .newsletter-privacy ul li {position: relative; font-size: 18px; line-height: 28px; letter-spacing: -0.5px; color: #333333; font-family: "Noto Regular"; padding: 5px 0; padding-left: 40px;}
.newsletter-bx .newsletter-privacy ul li span {position: absolute; font-family: "Roboto"; font-weight: 400; width: 30px; height: 30px; border-radius: 50%; left: 0; top: 5px; background: #9FACB4; text-align: center; line-height: 30px; font-size: 14px; color: #fff;}

.newsletter-bx .newsletter-input-custom {margin-top: 20px;}
.newsletter-bx .newsletter-input-custom input {display: none;}
.newsletter-bx .newsletter-input-custom label {font-size: 18px; line-height: 28px; letter-spacing: -0.5px; color: #666666; padding-left: 30px; background: url("../images/custom_checkbox.jpg") no-repeat left center;}
.newsletter-bx .newsletter-input-custom input:checked + label {background: url("../images/custom_checkbox_on.jpg") no-repeat left center;}


.newsletter-line {padding: 45px 0; border-top: 1px solid #D1D4DA; border-bottom: 1px solid #D1D4DA; margin-top: 50px;}
.newsletter-line .newsletter-email {margin-top: 10px;}
.newsletter-line input[type="text"] {border: 1px solid #C3C3C3; padding: 0 15px; height: 52px; width: 200px; font-size: 16px; letter-spacing: -0.5px; vertical-align: middle;}
.newsletter-line input[type="text"]::placeholder {color: #9d9d9d;}
.newsletter-line input[type="text"].long {width: 300px;}
.newsletter-line .email-at {display: inline-block; font-size: 22px; font-family: "Noto Regular"; letter-spacing: -0.5px; color: #333333; margin: 0 15px;}
.newsletter-line select {padding: 0 15px; height: 52px; border: 1px solid #C3C3C3; font-size: 16px; letter-spacing: -0.5px; color: #9d9d9d; appearance: none; vertical-align: middle; width: 200px; background: url("../images/ic_search_arrow.png") no-repeat 93% center;}

.newsletter-btn {text-align: center; margin-top: 50px;}
.newsletter-btn button {display: inline-block; width: 190px; height: 70px; border-radius: 35px; background: #006CC7; font-size: 18px; line-height: 70px; letter-spacing: -0.5px; font-family: "Noto Medium"; color: #fff; border: 2px solid #fff; transition: all 0.3s;}
.newsletter-btn button:hover {border-color: #006CC7; background: #fff; color: #006CC7;}

@media all and (max-width: 820px){
  .newsletter-line input[type="text"] {width: 24%;}
  .newsletter-line input[type="text"].long {width: 37%;}
  .newsletter-line select {width: 24%;}
}

@media all and (max-width: 500px){
  .newsletter-line {padding: 25px 0px; margin-top: 30px;}
  .newsletter-line .newsletter-email li {overflow: hidden;}
  .newsletter-line input[type="text"] {float: left; width: calc(100% - 50px); margin-bottom: 10px;}
  .newsletter-line input[type="text"].long {width: calc(50% - 5px); margin-bottom: 0;}
  .newsletter-line .email-at {float: left; width: 20px;}
  .newsletter-line select {float: left; width: 50%; margin-left: 5px;}
}
