@charset "utf-8";

/* main visual 영역 */

.main_visual{
    width: 100%;
    height: 284px;
    position: relative;
    margin-top: 50px;
}

.vis_slide_wr{
    width: 100%;
    height: 284px;
}

.slide_bg{
    width: 100%;
    height: 284px;
    border-radius: 15px;
    overflow: hidden;
}

.slide_bg.bg01{
    background: url("../img/main/main_visual01.jpg") no-repeat;
    background-size: cover;
}

.txt_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.txt_box .vis_sub_tit{
    font-size: 20px;
    color: #ffffff50;
}

.txt_box .vis_tit{
    font-size: 32px;
    color: #fff;
    font-weight: 600;
}

.txt_box .vis_desc{
    font-size: 18px;
    color: #fff;
}

.txt_box button{
    width: 190px;
    height: 40px;
    border-radius: 360px;
    background: #ffffff20;
    margin-top: 27px;
}

.txt_box button a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    
}

.txt_box button p{
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 40px;
}

.vis_slide .swiper-button-prev{
    width: 40px;
    height: 40px;
    background: url("../img/main/main_visual_prev_btn.png") no-repeat;
    margin-left: 50px;
}

.vis_slide .swiper-button-next{
    width: 40px;
    height: 40px;
    background: url("../img/main/main_visual_next_btn.png") no-repeat;
    margin-right: 50px;
}

.vis_slide .swiper-button-prev::after,
.vis_slide .swiper-button-next::after{
    display: none;
}

/* main visual 영역 */

/* ------contents------ */

/* 메인 타이틀 - 공통 */

.main_txt_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main_txt_box .main_tit{
    display: flex;
    align-items: baseline;
}

.main_txt_box h2{
    font-size: 32px;
    font-weight: 600;
    color: #222;
    margin-right: 15px;
    
}

.main_txt_box h6{
    font-size: 18px;
    color: #555;
    font-weight: 400;
}

.main_txt_box .more_btn{
    width: 100px;
    height: 35px;
    border-radius: 360px;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.main_txt_box .more_btn p{
    font-size: 16px;
    color: #888;
}

.main_txt_box .more_btn span{
    font-size: 21px;
    color: #888;
    font-weight: 300;
}

/* 메인 타이틀 - 공통 */

/* sec01 : 임대분양, 로그인, 닥스방 영역 */

.sec01{
    width: 100%;
    height: auto;
    padding-top: 30px;
    padding-bottom: 20px;
    display: flex;
    gap: 20px;
}

/* 임대분양 정보 영역 */

.lease_box{
    width: 900px;
    height: auto;
    padding: 32px 30px;
    border: 1px solid #DCDCDC;
    border-radius: 15px;
}

.lease_box .lease_prim h4{
    font-size: 20px;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 15px;
}

.lease_box .lease_prim .lease_prim_pick_list{
    border-bottom: 1px solid #eeee;
    margin-bottom: 25px;
}

.lease_box .lease_prim .lease_prim_pick_list ul{
    display: flex;
    gap: 15px;
}

.lease_box .lease_prim .lease_prim_pick_list li{
    width: 270px;
    height: auto;
    margin-bottom: 25px;
}

.lease_box .lease_prim .lease_prim_pick_list .lease_pick_img{
    width: 270px;
    height: 180px;
    box-shadow: 4px 4px 10px #00000001;
}

.lease_box .lease_prim .lease_prim_pick_list .lease_pick_img.active::before{
    content: url('../img/main/pick_symbol.png');
    width: 48px;
    height: 75px;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 10px;
}

.lease_box .lease_prim .lease_prim_pick_list .lease_type,
.lease_box .lease_prim .lease_prim_list .lease_type{
    width: 52px;
    height: 27px;
    border-radius: 360px;
    background: #eee;
    font-size: 16px;
    letter-spacing: 0%;
    text-align: center;
    line-height: 27px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.lease_box .lease_prim .lease_prim_list .lease_type{
    margin-top: 9px;
}

.lease_box .lease_prim .lease_prim_pick_list .lease_tit,
.lease_box .lease_prim .lease_prim_list .lease_tit{
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.lease_box .lease_prim .lease_prim_pick_list .lease_add,
.lease_box .lease_prim .lease_prim_list .lease_add{
    font-size: 16px;
    color: #8888;
}

.lease_box .lease_prim .lease_prim_list .lease_img{
    width: 140px;
    height: 100px;
}

.lease_box .lease_prim .lease_prim_list .lease_img img{
    width: 100%;
}

.lease_box .lease_prim .lease_prim_list ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 38px;
}

.lease_box .lease_prim .lease_prim_list li{
    width: 400px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.lease_box .lease_prim .lease_prim_list li.sample .lease_img{
    position: relative;
    overflow: hidden;
}
.lease_box .lease_prim .lease_prim_list li.sample .lease_img::after{
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.lease_box .lease_prim .lease_prim_list .lease_txt_group{
    width: 232px;
}

/* 임대분양 정보 영역 */

/* 로그인 영역 */

.login_box{
    width: 400px;
    height: 200px;
    border: 1px solid #DCDCDC;
    border-radius: 15px;
    padding: 30px;
}

.login_box .login_con{
    display: flex;
    gap: 10px;
}

.login_box .login_con .id,
.login_box .login_con .pw{
    width: 210px;
    height: 45px;
    background: #f7f7f7;
    padding: 13px;
    font-size: 16px;
    color: #8888;
}

.login_box .login_con .pw{
    margin-top: 5px;
}

.login_box .login_con .login{
    width: 120px;
    height: 95px;
    background: #694F3E;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 95px;
}

.login_box .login_find{
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login_box .login_find .find_id{
    display: flex;
    align-items: center;
    gap: 5px;
}

.login_box .login_find .find_id .find_id_icon{
    width: 20px;
    height: 20px;
}

.login_box .login_find .find_id .find_id_icon img{
    width: 100%;
}

.login_box .login_find .find_id p{
    font-size: 18px;
    color: #444;
}

.login_box .login_find > p{
    font-size: 18px;
    font-weight: 600;
}

/* 로그인 영역 */

/* 닥스방 영역 */

.docts_box{
    width: 400px;
    height: auto;
    border: 1px solid #DCDCDC;
    border-radius: 15px;
    margin-top: 20px;
    padding: 40px 30px 30px 30px;
}

.docts_box .docts_chat{
    margin-top: 25px;
}

.docts_box .docts_chat ul{
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 28px;
}

.docts_box .docts_chat ul:nth-of-type(3){
    margin-bottom: 0px;
    border-bottom: none;
}

.docts_box .docts_chat ul li h4{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.docts_box .docts_chat ul li p{
    font-size: 16px;
    line-height: 20px;
    color: #888;
}

.docts_box .docts_chat ul li .docts_txt_con{
    margin: 15px 0 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.docts_box .docts_chat ul:nth-of-type(3) li .docts_txt_con{
    margin: 15px 0 0 0;
}

.docts_box .docts_chat ul li .docts_txt_con .docts_type{
    width: 74px;
    height: 25px;
    border-radius: 360px;
    border: 1px solid #976a4d;
    font-size: 16px;
    color: #976a4d;
    text-align: center;
    line-height: 25px;
}

.docts_box .docts_chat ul li .docts_comment,
.docts_box .docts_chat ul li .docts_emoji{
    display: flex;
    gap: 3px;
}

.docts_box .docts_chat ul li .docts_comment .commnet_icon,
.docts_box .docts_chat ul li .docts_emoji .emoji_icon{
    width: 20px;
    height: 20px;
}

.docts_box .docts_chat ul li .docts_comment .commnet_icon img,
.docts_box .docts_chat ul li .docts_emoji .emoji_icon img{
    width: 100%;
}

.docts_box .docts_chat ul li .docts_comment .commnet_icon p,
.docts_box .docts_chat ul li .docts_emoji .emoji_icon p{
    font-size: 16px;
    font-weight: 500;
    color: #969696;
}

/* 닥스방 영역 */

/* sec01 : 임대분양, 로그인, 닥스방 영역 */

/* sec02 : 닥터스 Q&A, 숏폼, 웹배너 영역 */

.sec02{
    display: flex;
    gap: 20px;
}

.docts_con_02{
    width: 900px;
    height: auto;
    border: 1px solid #dcdcdc;
    border-radius: 15px;
    padding: 40px 30px 30px 30px;
}

/* 닥터스 Q&A */

.docts_qa_list {
    margin-top: 30px;
}

.docts_qa_list ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin-bottom: 30px;
}

.docts_qa_list ul li{
    display: flex;
    align-items: center;
    gap: 15px;
}

.docts_qa_list ul li .qa_type{
    font-size: 18px;
    color: #bbb;
}

.docts_qa_list ul li .qa_type.active{
    color: #976A4D;
    font-weight: 500;
}

.docts_qa_list ul li p{
    width: 332px;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.docts_qa .docts_qa_list{
    border-bottom: 1px solid #eeee;
    margin-bottom: 20px;
}

/* 닥터스 Q&A */

/* 닥터스 숏폼 */

.docts_short .docts_short_list{
    margin-top: 3rem;
}

.docts_short .docts_short_list ul{
    display: flex;
    gap: 10px;
}

.docts_short .docts_short_list ul li{
    width: 160px;
    height: 245px;
}

.docts_short .docts_short_list ul li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.docts_short .docts_short_list ul li{overflow:hidden;border-radius:8px}
.docts_short .docts_short_list ul li a{display:block;width:100%;height:100%;cursor:pointer}

/* 닥터스 숏폼 */

/* 닥터스 웹배너 */

.web_bn .web_bn01{
    width: 400px;
    height: 200px;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.web_bn .web_bn01 img{
    width: 100%;
}

.web_bn .web_bn02{
    width: 400px;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
}

.web_bn .web_bn02 img{
    width: 100%;
}

/* 닥터스 웹배너 */

/* sec02 : 닥터스 Q&A, 숏폼, 웹배너 영역 */


/* sec03 : 세미나 현황, 초빙정보 영역 */

/* 세미나 현황 */

.sec03{
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    gap: 20px;
}

.seminar{
    width: 650px;
    height: auto;
    border: 1px solid #DCDCDC;
    border-radius: 15px;
    padding: 40px 30px;
}

.seminar .seminar_list{
    margin-top: 45px;
}

.seminar .seminar_list ul span{
    display: block;
    width: 100%;
    height: 1px;
    background: #EBEBEB;
    margin: 30px 0;
}

.seminar .seminar_list ul li{
    display: flex;
    align-items: center;
    gap: 25px;
}

.seminar .seminar_list ul li .seminar_type{
    width: 100px;
    height: 80px;
    background: #bbb;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
}

.seminar .seminar_list ul li .seminar_type.active{
    background: #976A4D;
}

.seminar .seminar_list ul li .seminar_txt .seminar_tit{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
}

.seminar .seminar_list ul li .seminar_txt .seminar_date,
.seminar .seminar_list ul li .seminar_txt .seminar_presen{
    font-size: 16px;
    color: #888;
}

/* 세미나 현황 */

/* 초빙정보 */

.invitaion{
    width: 650px;
    height: auto;
    border: 1px solid #DCDCDC;
    border-radius: 15px;
    padding: 40px 30px;
}

.invitaion > span{
    display: block;
    width: 100%;
    height: 1px;
    background: #EBEBEB;
    margin: 30px 0;
}

.invitaion .invitation_intro{
    margin-top: 42px;
    display: flex;
    align-items: center;
    gap: 47px;
}

.invitaion .invitation_intro .invitation_intro_txt{
    width: 504px;
}

.invitaion .invitation_intro .invitation_intro_txt .invi_tit{
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
}

.invitaion .invitation_intro .invitation_intro_txt .invi_desc{
    font-size: 18px;
    color: #555;
}

.invitaion .invitation_intro .invitation_intro_txt .invi_desc strong{
    font-size: 18px;
    font-weight: 500;
    color: #976A4D;
}

.invitaion .invitation_intro .invitation_intro_txt .invi_desc span{
    font-size: 18px;
    color: #ddd;
}

.invitaion .invitation_intro .invitation_intro_txt .invi_date{
    font-size: 18px;
    color: #555;
}

.invitaion .invitation_intro .invi_arrow_btn span{
    font-size: 22px;
    color: #888;
    font-weight: 200;
}

.invitaion .invitation_list ul li {
    width: 480px;
    font-size: 18px;
    color: #888;
    position: relative;
    padding-left: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 25px;
}

.invitaion .invitation_list ul li::before {
    content: "•";
    color: #D9D9D9;
    position: absolute;
    left: 0;
    top: 0;
}

.invitaion .invitation_list ul li:last-child{
    margin-bottom: 0px;
}

/* 초빙정보 */

/* sec03 : 세미나 현황, 초빙정보 영역 */

/* ------contents------ */