/* The Modal (background) */
   .modal {
       position: relative;
       width: 100%;
       height: 100%;
       z-index: 1;
       /*       color: white;*/
       display: flex;
       display: -webkit-box;
       display: -ms-flexbox;
       overflow: hidden;
       -webkit-box-align: center;
       -ms-flex-align: center;
       align-items: center;
       -webkit-box-pack: center;
       -ms-flex-pack: center;
       justify-content: center;
       pointer-events: none;

   }

   .modal-hidden {
       visibility: hidden;
   }

   .modal-content {

       pointer-events: all;
       background-color: #fff;
       border: 1px solid rgba(0, 0, 0, .125);
       position: relative;
       box-sizing: border-box;
       background: #F9F9F9;

       height: 100%;
       width: 100%;
       max-width: 500px;
       max-height: 570px;
       overflow-y: scroll;
   }

   .modal-content .label {
       width: 50px;
       color: black;
       display: inline-block;
       font-family: 'HMHMedium', "sans-serif";
       vertical-align: top;
       margin-right: 13px;
       margin-top: 5px;
       font-size: 75%;
   }

   .modal-content::-webkit-scrollbar {
       /* Chrome, Safari, Opera*/
       display: none;
   }



   .modal-content .h2,
   .modal-content h2 {
       margin: 20px;
       margin-bottom: 0;
       color: dimgrey;
       font-weight: 500;
   }



   /* The Close Button */
   .close {
       color: #aaa;
       float: right;
       font-size: 28px;
       font-weight: bold;
       position: relative;
       padding-right: 5px;
   }

   .close:hover,
   .close:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
   }

   /* Add a background color and some padding around the form */
   .container {
       display: flex;
       padding: 20px;
       flex-direction: row;
       justify-content: space-between;
   }

   /*
   .container label {
       font-family: Roboto;
   }
*/

   /* Style inputs with type="text", select elements and textareas */
   input[type=text],
   select,
   textarea {
       background-color: 4CAF50;
       /*       max-width: 200px;*/
       padding: 5px;
       border: 1px solid #ccc;
       box-sizing: border-box;
       margin-top: 2px;
       /*       margin-left: 15px;*/
       resize: none;
       color: black;
       font-family: 'HMHMedium', "sans-serif";
   }

   .modal-content textarea {
       /*       max-width: 500px;*/
       width: 100%;
       display: block;
       height: 100px;
   }

   input[type=checkbox]#policyCheckbox {
       
       margin-top: 8px;
/*       margin-left: 45px*/
/*       display: inline-block;*/
       
/*       right: 50px;*/
   }

   /* Style the submit button with a specific background color etc */
   input[type=submit] {

       color: white;
       width: 100%;
       height: 40px;
       margin-bottom: 10px;
       text-align: center;
       font-family: 'HMHMedium', "sans-serif";
       border: none;
       cursor: pointer;
   }

   #contactSubmit.disable {
       background-color: darkgray;
   }


   #contactSubmit.enable {
       background-color: #4CAF50;
   }


   /* When moving the mouse over the submit button, add a darker green color */
   input[type=submit]:hover {
       /*       background-color: #45a049;*/
   }

   .card {
       border-radius: .25rem;
       background-color: #fff;
       border: 1px solid rgba(0, 0, 0, .125);
       position: relative;
       box-sizing: border-box;
   }

   .card .h2,
   .card h2 {
       margin-top: 0;
       margin-bottom: 40px;
   }

   .card .card-block {
       padding: 4rem;
   }

   .flex-element {
       min-width: 250px;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       margin-bottom: 10px;

   }

   .form-group {

       margin-top: 10px;
       box-sizing: border-box;
       overflow-y: visible;
   }

   .form-warning {
       color: red;
       font-size: 2px;
       padding-left: 70px;
   }

   form {
       display: block;
       margin-top: 0em;
   }

   .form-control {
       width: 100%;
       height: 43px;
       padding: 8px 16px;
       background-color: #eee;
       background-image: none;
       border: 1px solid transparent;
       border-radius: 4px;
       -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
       -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
       transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
   }


   .form-control,
   output {
       display: block;
       font-size: 16px;
       line-height: 1.58;
       color: #555;
   }


   .form-control:focus {
       border-color: transparent;
       outline: 0;
       box-shadow: none
   }

   .btn {
       -webkit-transition: all .2s linear;
       -o-transition: all .2s linear;
       transition: all .2s linear;
       line-height: 1.428571429;
       border: none;
       -webkit-transition: all .1s linear;
       -o-transition: all .1s linear;
       transition: all .1s linear display: inline-block;
       margin-bottom: 0;
       font-weight: 400;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;
       background-image: none;
       border: 1px solid transparent;
       white-space: nowrap;
       padding: 8px 16px;
       font-size: 16px;
       line-height: 1.58;
       border-radius: 50px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none
   }

   input {
       -webkit-writing-mode: horizontal-tb !important;
       text-rendering: auto;
       color: -internal-light-dark(black, white);
       letter-spacing: normal;
       word-spacing: normal;
       text-transform: none;
       text-indent: 0px;
       text-shadow: none;
       display: inline-block;
       text-align: start;
       appearance: textfield;
       background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
       -webkit-rtl-ordering: logical;
       cursor: text;
       margin: 0em;
       /*    font: 400 13.3333px Arial;*/
       padding: 1px 2px;
       border-width: 2px;
       border-style: inset;
       border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
       border-image: initial;
   }

   .btn-primary {
       color: #fff;
       background-color: #ff0060;
       border-color: #ff0060
   }

   .btn-primary,
   .btn-primary:hover {
       background-image: -webkit-linear-gradient(left, #ff6975, #ff0060);
       background-image: -o-linear-gradient(left, #ff6975 0, #ff0060 100%);
       background-image: linear-gradient(90deg, #ff6975 0, #ff0060);
       background-repeat: repeat-x;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFF6975", endColorstr="#FFFF0060", GradientType=1)
   }

   .btn-primary:hover {
       background-position: 50%
   }

   /* 모바일 Device : 0 ~ 640 */
   @media screen and (max-width: 765px) {

       .container {
           display: flex;
           padding: 20px;
           flex-direction: column;
           justify-content: space-between;
       }
   }

   /* Tablet Device : 641 ~ 768 */
   @media screen and (min-width:766px) {

       .container {
           display: flex;
           padding: 20px;
           flex-direction: row;
           justify-content: space-between;
       }

       .modal-content {

           height: 100%;
           width: 90%;
           max-width: 600px;
           max-height: 350px;
           overflow-y: visible;
       }

   }



   /* Desktop Device : 1024 이상 */
   @media screen and (min-width:1024px) {
       .container {
           display: flex;
           padding: 20px;
           flex-direction: row;
           justify-content: space-between;
       }


       .card .card-block {
           padding: 6rem
       }
   }