/*공통css*/
.con1300 { width: 100%; max-width: 1300px; margin: 0 auto;}
.s_title {text-align: center;}
.s_title h2 {font-size: 17px;font-family: 'NanumSquare',sans-serif; color:#ffa800; margin-bottom: 10px; font-weight: 600; }
.s_title h1 {font-size: 36px;font-family: 'NanumSquare',sans-serif; color:#333; font-weight: 600; }




/*Content CSS*/
#joinus {padding: 40px 0 100px;}
#joinus .article {width:900px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); margin: 40px auto 0; padding: 80px;}
#joinus .article .box {display: flex; align-items: center; margin-bottom: 50px;}
#joinus .article .box .icon {width: 140px; height: 140px;border-radius: 50%; background: #f7f7f7; text-align: center; line-height: 140px; font-size: 0;}
#joinus .article .box .icon img {transition: all 0.5s;}
#joinus .article .box .txt {width: calc(100% - 140px); padding-left: 70px;}
#joinus .article .box .txt h1 {font-family: 'NanumSquare',sans-serif; color:#333; font-size: 20px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #ddd; position: relative; padding-left: 130px; font-weight: 600; }
#joinus .article .box .txt h1::after {display: block; content: ""; width: 100px; height: 2px; background: #ffa800; position: absolute; bottom: -1px; z-index: 2; left: 0;}
#joinus .article .box .txt h1 span {display: block; position: absolute; top: 0; left: 0; font-size: 14px; width: 100px; padding: 5px; color: #fff; background: #ffa800; text-align: center;}
#joinus .article .box .txt ul li {position: relative; padding-left: 15px; font-size: 14px; word-break: keep-all; font-weight: 300; color:#666; margin-bottom: 7px; line-height: 24px;}
#joinus .article .box .txt ul li::before {display: block; content: ""; width: 5px; height: 5px; position: absolute; left: 0; top: 8px; transform: rotate(45deg); background: #ffa800}
#joinus .article .box .txt ul li:last-child {margin-right: 0;}
#joinus .article .box .icon:hover img {transform: rotateY(180deg);}





@media screen and (max-width:1600px) {
    #joinus {padding: 40px 30px 100px;}


}

@media screen and (max-width:1300px) {

}


@media screen and (max-width:1200px) {
    #joinus {padding: 30px 80px 80px;}
    #joinus .article {width: 100%;}


}

@media screen and (max-width: 960px) {
    #joinus {padding: 30px 30px 50px;}
    .s_title h1 { font-size: 25px; line-height: 40px;}
    #joinus .article {box-shadow: none; padding: 0;}
    #joinus .article .box .txt {padding-left: 50px}



}

@media screen and (max-width: 640px) {
    #joinus {padding: 20px 20px 50px;}
    #joinus .article .box{display: block;}
    #joinus .article .box .icon {display: none;}
    #joinus .article .box .txt {padding-left: 0; width: 100%;}

    .s_title h2 {font-size: 14px;  margin-bottom: 5px;}
    .s_title h1 {font-size: 30px;}

}