/*공통 */
.sub_con {width: 1300px; margin:0 auto; position: relative; }
.s_title {text-align: center; }
.s_title h1 {font-size:48px; font-weight: 600; color:#000; line-height: 48px; margin-top:25px; text-transform: uppercase;}
.s_title.wh h1 {color:#fff; }
.sub_p {font-size:15px; font-weight: 300; color:#666; line-height: 30px; word-break: keep-all;}
.sub_p b {font-weight: 500; color:#000 ;}

#sup_list_top {display: flex; justify-content: space-between; align-items: center; padding: 20px 0 60px;}
#sup_list_top .img {width: 300px;}
#sup_list_top .img img {max-width: 100%;}

#sup_list_top .left {border-right: 1px solid #d3e0ef; padding-right: 100px; margin-right: 100px;}
#sup_list_top .left a {width: 550px; text-align: center; background-color: #fff; position: relative; transition: all .3s ease; border-radius: 15px; box-shadow: 2.2px 2px 15px 0 rgb(0 136 239 / 20%); padding: 40px 50px; display: block;}
#sup_list_top .left a .icon {margin-bottom: 2px;}
#sup_list_top .left a h1 {color:#333; font-size: 30px; font-weight: 700; transition: all .3s ease; }
#sup_list_top .left a p {color:#666; font-size: 15px; font-weight: 300; transition: all .3s ease;  word-break: keep-all; line-height: 26px; margin-top: 15px}
#sup_list_top .left a:hover  {background-color: #197cfa; }
#sup_list_top .left a:hover p { color:#fff; }
#sup_list_top .left a:hover h1 { color:#fff; }

#sup_input { }
#sup_input #login_fs > input {height:45px;background-color: #fff;border-radius: 5px;border: 0;padding: 0 15px;font-size: 15px;font-weight: 300;color: #333;margin-bottom: 10px;
border:1px solid #d3e0ef; display: block; width: 550px; }
#login_info {display: flex; justify-content: space-between; margin-top: 30px;}
#login_info .btn_submit {width: 160px; height: 50px;background-color: #197cfa; color:#fff; font-size:15px; font-weight: 400; transition: all .3s ease; }
#login_info .btn_submit:hover {background-color:#186ad2; }
#login_info #login_password_lost {display: inline-block;border: 1px solid #d3e0ef;color: #197cfa;border-radius: 2px; padding: 2px 5px; line-height: 20px; margin-right: 10px;}
#login_info .right {display: flex;}
.chk_box input[type="checkbox"] + label span {margin-right: 5px; position: relative; top:4px;}

#sup_input .txt {font-size: 30px; font-weight: 700; margin-bottom: 20px; }

/* 유저정보 */
#user_info {text-align: center; padding:30px ; width: 550px; box-shadow: 2.2px 2px 24px 0 rgb(0 0 0 / 9%); border-top: 3px solid #197cfa; position: relative;}
#user_info .top {display: flex; align-items: center; justify-content: space-between;}
#user_info a.profile {display: flex; align-items: center; }
#user_info a.profile div {width: 60px; height: 60px; border-radius: 50%; overflow: hidden;}
#user_info a.profile span {Font-size:22px; font-weight:600; color:#000; display: block; margin-left:25px;}
#user_info .top .info_btn a {font-size: 14px; color:#888; border: 1px solid #ddd; border-radius: 50px; padding: 8px!important; width: 110px; display: block; transition: all 0.3s;}
#user_info .top .info_btn a:hover {background: #197cfa; color:#fff; border: 1px solid #197cfa}

#user_info .txt {text-align: left; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px}
#user_info .txt p {color:#666; font-size: 15px; font-weight: 300; transition: all .3s ease;  word-break: keep-all; margin-top: 7px; width: 50%}

.user_btn {display: flex; width: 100%;}
.user_btn a {width: 50%; height: 50px; line-height: 50px; background: #333; color:#fff; font-size:15px; font-weight: 400; transition: all .3s ease; border-radius: 5px;}
.user_btn a:first-child {margin-right: 10px; background: #197cfa; }


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

}

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

}

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

}

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

}