@charset "utf-8";

.fa-solid:before{
        display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 800;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

body{
     background: #f2f2f2;
}
#wrapper{
    margin-top: 90px;
    padding-top: 50px;
}
#hd_wrapper #hd_menu li a,#hd_wrapper #hd_login a {
    color: #8956a6
}
#hd_wrapper #hd_login li::before{
    background: #8956a6;
}

#joinWrap .joinTitle {
    font-size: 32px;
    color: #333;
    text-align: center;
    font-weight: bold;
}

.mbskin {
    border: 1px solid #dde7e9;
    background: #fff;
    padding: 45px 0 85px;
    position: relative;
    margin: 55px auto 0;
    max-width: 1164px;
    text-align: center;
}

#joinWrap h1 {
    font-size: 34.67px;
    color: #666;
    font-weight: normal;
    margin: 0;
}
#joinWrap .smallText{
    font-size: 21.33px;
    margin-top: 45px;
    color: #666
}
#joinWrap .smallText span{
    font-weight: 900;
}

#joinWrap .links {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
#joinWrap.mbJoin .links{
    margin-top: 20px;
}

#joinWrap .links > div {
/*    padding: 100px 80px;*/
    width: 400px;
    height: 300px;
    border: 1px solid #afafaf;
    display: flex;
    justify-content: center;
    align-items: center
}

#joinWrap .links > div a {
   
    display: block;
}
#joinWrap .links > div a i{
    font-size: 60px;
    color: #8956a6;
}

#joinWrap .links > div.link01 {
    margin-right: 30px;
}

#joinWrap .links > div p {
    margin-top: 17px;
    font-size: 21.33px;
    color: #666;
    font-weight: 900;
    line-height: 130%;
    letter-spacing: -0.03em;
}

#joinWrap .links > div p span {
    color: #8956a6
}

#joinWrap .links.joinOrder {
    align-items: center;
}

#joinWrap .links.joinOrder > div {
    padding: 50px 0;
    width: 243px;
    height: 243px;
    position: relative;
}

#joinWrap .links.joinOrder .arrow {
    width: 55px;
    border: none;
    height: 100%;
}

#joinWrap a.joinbtn {
    font-size: 26.67px;
    color: #fff;
    padding: 19px 38px;
    background: #8956a6;
    border-radius: 3em;
    display: inline-block;
    margin-top: 55px;
}

#joinWrap .absol {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

#joinWrap .membershipInfo {
    margin: 100px 0 20px;
}

#joinWrap .membershipInfo h2 {
    font-size: 34.67px;
    color: #666;
    font-weight: normal;
    margin: 0 0 45px;
}

#joinWrap .membershipInfo p {
    font-size: 21.33px;
    color: #666;
    letter-spacing: -0.03em;
    margin-bottom: 15px;
}
#joinWrap .membershipInfo p span{
    font-weight: 900;
}
#joinWrap .btnWrap{
    display: flex;
    justify-content: center;
}
#joinWrap a.membershipBtn{
    background: #434343;
    margin-left: 18px;
}

#joinWrap .checkWrap{
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
    padding: 27px 0;
    border: 1px solid #d7d7d7;
    max-width: 866px;
}
#joinWrap .checkWrap .selectWrap{
    margin-right: 33px;
}

/* ------------------------------------------------------- */
/* IE */
select::-ms-expand { 
  display: none;
}

select {
-o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
  width: 208px;
  padding: 10px 0;
  background: url('/img/select_arrow.png') calc(100% - 3px) center no-repeat;
  background-size: 20px;
  outline: 0 none;
    font-size: 18.67px;
    color: #666;
    border: none;
    border-bottom: 1px solid #b4b4b4;
    font-family: 'GmarketSans';
    font-weight: 900;
}
select option {
  background: #fff;
  color: 1px solid #b4b4b4;
  padding: 10px 0;
}
select option:hover {
  background: red;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{
    border-bottom: 1px solid #b4b4b4 !important
}

#joinWrap input{
   border: 1px solid #b4b4b4;
    font-size: 18.67px;
    padding: 10px ;
    width: 126px;
}

#joinWrap .checkWrap .inputWrap span{
    width: 33px;
    display: inline-block;
    position: relative
}
#joinWrap .checkWrap .inputWrap span::before{
        content: '';
    width: 12px;
    height: 1px;
    background: #434343;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#joinWrap input.width220{
    width: 220px;
}
#joinWrap input.widthbig{
    width: 250px;
}
#joinWrap .checkWrap .inputWrap > div{
    display: flex;
}


@media(max-width: 500px) {
    #wrapper{
/*       min-height:  calc(100% - 19.23vw - 30vw);*/
        background: #f2f2f2;
        padding: 0;
    }
 #joinWrap{
        padding: 5.38vw 0 6.15vw;

    }
    #joinWrap .joinTitle{
        font-size: 3.85vw;
    }
    .mbskin{
         margin: 4.62vw auto 0;
        max-width:inherit;
        width: 90%;
         padding: 8.92vw 0 ;
    }
    #joinWrap h1{
        font-size: 4.1vw;
    }
    #joinWrap .links{
        margin: 7.38vw auto 0;
        display: block;
        width: 77%;
    }
    #joinWrap .links > div.link01{
        margin-right: 0;
        margin-bottom: 5vw;
    }
    #joinWrap .links > div{
        padding: 0;
        width: 100%;
        height: inherit;

    }
    #joinWrap .links > div a i{
        font-size: 11vw;
        
    }
   
    #joinWrap .links > div p{
        font-size: 3.28vw;
        margin-top: 0;
    }
    #joinWrap .links > div a{
        display: flex;
        justify-content: center;
        align-items: center;
            flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 7vw 0;
    }
     #joinWrap .links a div {
        width: 16.46vw;
        text-align: center;
         margin-right: 2.31vw;
    }
    #joinWrap .links .link01 img{
        width: 12.62vw;
    }
    #joinWrap .links .link02 img{
        width: 100%;
    }
    
    #joinWrap .links.joinOrder > div{
        width: 100%;
        height: auto;
        padding: 0;
    }
    #joinWrap .absol{
        position: relative;
        top: auto;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 17.69vw;
    }
    #joinWrap .absol  img{
        height: 7.38vw;
        margin-right: 2.62vw;
    }
    #joinWrap .absol p{
        font-size: 3.28vw;
        line-height: inherit
    }
    #joinWrap .absol p br{
        display: none;
    }
    #joinWrap .links.joinOrder .arrow{
        width: auto;
        height: auto;
        padding: 4.15vw 0;
        text-align: center;
    }
    #joinWrap .links.joinOrder .arrow img{
            width: 2.92vw;
    transform: rotate(90deg);
    }
    #joinWrap a.joinbtn{
          display: inline-block;
        font-size: 4.1vw;
        padding: 3.08vw 5.69vw;
        margin-top: 9.23vw;
    }
    
    #joinWrap .smallText{
        font-size: 3.28vw;
        margin-top: 7.54vw;
    }
    #joinWrap.mbJoin .links.joinOrder > div:nth-of-type(3) img{
        height: 4.77vw;   
    }
    #joinWrap .membershipInfo{
        margin: 10.77vw 0 0;
    }
    #joinWrap .membershipInfo h2{
        font-size: 4.1vw;
        margin: 0 0 3.08vw;
    }
    #joinWrap .membershipInfo p{
        font-size: 3.28vw;
        margin-bottom: 2.31vw;
        line-height: 130%;
    }
    #joinWrap a.membershipBtn{
        margin-left: 2.62vw;
    }
    #joinWrap .checkWrap{
        max-width: inherit;
        width: 87%;
        flex-flow: column;
        padding: 0;
        margin: 13.38vw auto 0;
        border: none;
        align-items: baseline;
    }
    #joinWrap .checkWrap .selectWrap{
        margin: 0 0 4.62vw; 
    }
    #joinWrap .checkWrap .selectWrap select{
        width: 32.31vw;
        font-size: 3.28vw;
        padding: 2.31vw 0;
        background-size: 2.31vw;
    }
    #joinWrap .inputWrap{
        width: 100%;
    }
    #joinWrap .companyNum input{
        font-size: 3.28vw;
        padding: 2.31vw ;
    }
    #joinWrap .companyNum input:first-of-type{
        width: 23.5%
    }
    #joinWrap .companyNum input:nth-of-type(2){
        width: 23.5%
    }
    #joinWrap .companyNum input:nth-of-type(3){
        width: 41%
    }
    #joinWrap .companyNum span{
        width: 6%;
    }
    #joinWrap input.widthbig{
        width: 47%;
    }
    #joinWrap .checkWrap .inputWrap span{
        width: 6%
    }
    #joinWrap .checkWrap .inputWrap span::before{
        width: 1.69vw
    }
    
}