@charset "UTF-8";
/*中間混合*/
/*手機版*/
/*非手機版*/
/*某值(包含)以上*/
/*某值(不包含)以下*/
/*計算比例值*/
/*header高度變數*/
/*footer高度變數*/
/*md跟lg一樣*/
/*外框設定*/
.social-frame {
  background: #f2f2f2;
  /*大標題*/
  /*小標*/
  /*確認*/ }
  @media screen and (min-width: 1520px) {
    .social-frame {
      padding-top: 76px;
      padding-bottom: 43px;
      min-height: calc(100% - 35px); } }
  @media screen and (min-width: 1200px) and (max-width: 1519px) {
    .social-frame {
      padding-top: 60.25714px;
      padding-bottom: 34.09286px;
      min-height: calc(100% - 27.75px); } }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .social-frame {
      padding-top: 50.48571px;
      padding-bottom: 28.56429px;
      min-height: calc(100% - 27.75px); } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .social-frame {
      padding-top: 37.45714px;
      padding-bottom: 21.19286px;
      min-height: calc(100% - 77px); } }
  @media screen and (max-width: 767px) {
    .social-frame {
      padding-top: 30px;
      padding-bottom: 30px;
      min-height: calc(100% - 92px); } }
  @media screen and (max-width: 768px) {
    .social-frame .container {
      max-width: none !important; } }
  @media screen and (min-width: 1520px) {
    .social-frame .main-title {
      font-size: 22px;
      padding-bottom: 2px;
      border-bottom: 1px solid #222222; } }
  @media screen and (min-width: 1200px) and (max-width: 1519px) {
    .social-frame .main-title {
      font-size: 20px;
      padding-bottom: 1.58571px;
      border-bottom: 0.79286px solid #222222; } }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .social-frame .main-title {
      font-size: 15px;
      padding-bottom: 1.32857px;
      border-bottom: 0.66429px solid #222222; } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .social-frame .main-title {
      font-size: 15px;
      padding-bottom: 1.32857px;
      border-bottom: 0.66429px solid #222222; } }
  @media screen and (max-width: 767px) {
    .social-frame .main-title {
      font-size: 22px;
      padding-bottom: 2px;
      border-bottom: 1px solid #222222; } }
  @media screen and (min-width: 1520px) {
    .social-frame .sub-title {
      font-size: 14px;
      margin-bottom: 3px; } }
  @media screen and (min-width: 1200px) and (max-width: 1519px) {
    .social-frame .sub-title {
      font-size: 14px;
      margin-bottom: 2.37857px; } }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .social-frame .sub-title {
      font-size: 13px;
      margin-bottom: 1.99286px; } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .social-frame .sub-title {
      font-size: 13px;
      margin-bottom: 1.99286px; } }
  @media screen and (max-width: 767px) {
    .social-frame .sub-title {
      font-size: 14px;
      margin-bottom: 3px; } }
  @media screen and (min-width: 1520px) {
    .social-frame .mycol {
      margin-top: 15px; } }
  @media screen and (min-width: 1200px) and (max-width: 1519px) {
    .social-frame .mycol {
      margin-top: 11.89286px; } }
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .social-frame .mycol {
      margin-top: 9.96429px; } }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .social-frame .mycol {
      margin-top: 9.96429px; } }
  @media screen and (max-width: 767px) {
    .social-frame .mycol {
      margin-top: 15px; } }
  .social-frame .my-input {
    width: 100%;
    /*for phone ios input*/
    border-radius: 0px; }
    @media screen and (min-width: 1520px) {
      .social-frame .my-input {
        height: 48px;
        padding-left: 14px;
        font-size: 14px;
        border: 1px solid #222222; } }
    @media screen and (min-width: 1200px) and (max-width: 1519px) {
      .social-frame .my-input {
        height: 38.05714px;
        padding-left: 11.1px;
        font-size: 12px;
        border: 0.79286px solid #222222; } }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      .social-frame .my-input {
        height: 31.88571px;
        padding-left: 9.3px;
        font-size: 12px;
        border: 0.66429px solid #222222; } }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      .social-frame .my-input {
        height: 31.88571px;
        padding-left: 9.3px;
        font-size: 12px;
        border: 0.66429px solid #222222; } }
    @media screen and (max-width: 767px) {
      .social-frame .my-input {
        height: 48px;
        padding-left: 14px;
        font-size: 14px;
        border: 1px solid #222222; } }
  .social-frame .submit_btn {
    background: #0683B0;
    color: #ffffff;
    border-radius: 20px;
    cursor: pointer;
    border: none; }
    @media screen and (min-width: 1520px) {
      .social-frame .submit_btn {
        width: 142px;
        height: 39px;
        font-size: 20px;
        margin-top: 43px;
        letter-spacing: 10px;
        text-indent: 10px; } }
    @media screen and (min-width: 1200px) and (max-width: 1519px) {
      .social-frame .submit_btn {
        width: 112.58571px;
        height: 30.92143px;
        font-size: 15.85714px;
        margin-top: 34.09286px;
        letter-spacing: 7.92857px;
        text-indent: 7.92857px; } }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      .social-frame .submit_btn {
        margin-top: 19.92857px;
        width: 99.4px;
        height: 27.3px;
        font-size: 14px;
        letter-spacing: 7px;
        text-indent: 7px; } }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      .social-frame .submit_btn {
        margin-top: 19.92857px;
        width: 99.4px;
        height: 27.3px;
        font-size: 14px;
        letter-spacing: 7px;
        text-indent: 7px; } }
    @media screen and (max-width: 767px) {
      .social-frame .submit_btn {
        width: 142px;
        height: 39px;
        font-size: 20px;
        margin-top: 43px;
        letter-spacing: 10px;
        text-indent: 10px; } }