@charset "utf-8";
@import url('./font.css');

#container { position: relative; }
#container .contents_wrap .backCont_box { position: relative; background-color: #DCC0A4; padding-bottom: 50px; padding-top: 0; margin-top: -57px; }
#container .contents_wrap .backCont_box:before { position: absolute; content: ''; display: block; background: url("/resources/main/user/img/front/ellipse.png")no-repeat center; width: 200px; height: 135px; background-size: 100% 100%; bottom:0; left:175px; }
#container .contents_wrap .cont_inner{ width: 100%; padding: 0 15px; max-width: 1220px; margin: auto; }
/*#container .contents_wrap .bg-box01 { position:fixed; width: 50%; right: 0; bottom: 0; height: 100%; overflow: hidden; z-index: -1; }
#container .contents_wrap .bg-box01:last-child { width: 17%; left:0; }
#container .contents_wrap .bg-box01 img { position: absolute; left:0; top:0; }
#container .contents_wrap .bg-box01:last-child img { top:auto; left: auto; right: 0; bottom: 0; }*/
.bg_line { position: absolute;  z-index: 2; top: -225px; width: 100%; }
.banner { position: relative; z-index: 3; }
.banner:after { position: absolute; display: block; content:''; background: url("/resources/main/user/img/front/ban_people.png")no-repeat center; width: 403px; height: 438px; bottom:0; left:75%; transform: translateX(-75%); z-index: 20; }
/*.banner:before { position: absolute;  display: block; content:''; background: url("/resources/main/user/img/front/line.png")no-repeat center; width: 1920px; height: 1024px; z-index: 1; top:50%; left:50%; transform: translate(-50%, -50%); }*/
.pc_banner { display: block; width: 100%; }
.m_banner, .m_banner2 { display: none; }
#container .contents_wrap .bg-box01 { position:relative;  height: 100%; z-index: 1; }
#container .contents_wrap .bg-box01:last-child { width: 100%; right:0; }
#container .contents_wrap .bg-box01 img { position: absolute; left:0; top:0; }
#container .contents_wrap .bg-box01:last-child img { left: auto; right: 0; width: 27%; top:0; }

.cont_box .backL { /*width: 630px;*/ margin: 0; position: relative; margin-top: 15px; }
.cont_box .backL p { font-size: 18px; color: #07114c; }
.cont_box .logoTit h1 img { width: 300px; }
.cont_box .logoTit h1 { padding:20px 0 30px; }
.cont_box .backL .info { display: flex; flex-wrap: nowrap; position: absolute; top:60px; }
.cont_box .backL .info a { display: flex; align-items: center; justify-content: center; background-color:#B1202B!important; font-size: 13px; font-weight: 300; z-index: 5;  }
.cont_box .backL .info a:last-child { margin-right: 0; margin-bottom:0; background-color: #C23017!important; }
.cont_box .backL .info a span { display: block; position: relative; padding-left: 40px; letter-spacing: 0.03em; }
.cont_box .backL .info a span:before { position: absolute; content: ''; width:17px; height:22px; top:50%; transform: translateY(-50%); left: 0; background: url("../img/icon/loginiCon.png")no-repeat center; background-size: 100% 100%; }
.cont_box .backL .info a:nth-child(2) span:before { background: url("../img/icon/joiniCon.png")no-repeat center; background-size: 100% 100%;  }
.cont_box .backL .titxt { padding:50px 0; }
.cont_box .backL .titxt span { display: block; color:#07114c; font-size: 27px; line-height: 1.3em; }
.cont_box .backL .blogBtn li { float: left; width: 58%; margin-bottom: 30px; margin-right: 2%; }
.cont_box .backL .blogBtn li:nth-child(2), .cont_box .backL .blogBtn li:nth-child(4), .cont_box .backL .blogBtn li:nth-child(5) { margin-right: 0; width: 40%; }
.cont_box .backL .blogBtn li:last-child { margin-bottom: 0; }
.cont_box .backL .blogBtn li a { display: flex; align-items: center; }
.cont_box .backL .blogBtn li a img { width:55px; }
.cont_box .backL .blogBtn li a span { padding-left:10px; font-size: 18px; color:#07114c; }

/* containR */
.containR { position: relative;  }
.containR .contents_wrap div.backCont_box { padding-top:0!important; padding-bottom: 50px!important; margin-top: -57px; }
.containR .contents_wrap .bg-box01 { height: calc(100% - 86px)!important; }
.containR .cont_box .cont_inner .backL .logoTit { display: none; }
.containR .cont_box .cont_inner .backL .titxt { padding:15px 0 50px; }
.containR .cont_box .cont_inner .backL .info { display: none; }


@media (max-width:1024px) {
    /*.containR { padding-top: 71px; }*/
    #container .contents_wrap .backCont_box { padding-top: 10px; padding-bottom: 40px!important; }
    .containR .contents_wrap .bg-box01 { height: calc(100% - 71px)!important; }
    #container .contents_wrap .cont_inner{ /*max-width: 767px; */}
    #container .contents_wrap .bg-box01 img { width: 80%; right: 0; left: auto; }
    #container .contents_wrap .bg-box01:last-child img { display: none; width: 30%; left:0; right: auto; }
    .pc_banner, .m_banner2 { display:none; }
    .m_banner { display: block; width: 100%; }
    .banner { z-index:0; }
    .banner:after { display: none; width: 260px; height: 282px; background-size: 100%; }
    .main:after { display:  none; bottom:-40px; width: 130px; height: 154px; background-size: 100%; }
    #container .contents_wrap .backCont_box:before { display: none; }
    .cont_box .backL { width: auto; text-align: center; margin:0; margin-top: 23px; }
    .cont_box .backL p { font-size: 14px; }
    .cont_box .backL h1 { padding: 10px 0 15px; }
    .cont_box .logoTit h1 img { width: 150px; }
    .cont_box .backL .info { justify-content: center; position: initial; margin-bottom: 15px; }
    .cont_box .backL .info a span { padding-left:26px; }
    .cont_box .backL .info a span:before { width: 14px; height: 19px; }
    .cont_box .backL .titxt { padding:30px 0; }
    .cont_box .backL .titxt span { font-size: 19px; }
    .cont_box .backL .blogBtn { max-width: 330px; margin: auto; }
    .cont_box .backL .blogBtn li a img { width:45px; }
    .cont_box .backL .blogBtn li a span { font-size: 14px; line-height: 1.2em; }

    /* containR */
    .containR .cont_box .cont_inner .backL .titxt { padding:15px 0 30px; }
}
@media (max-width:580px) {
    .m_banner { display: none; }
    .m_banner2 { display: block; width: 100%;  }
    .contents_wrap .m_banner2 { min-height: 175px; }

}
@media (max-width:390px) {
    .cont_box .cont_inner .backL .info { flex-wrap: wrap; }
    .cont_box .cont_inner .backL .info a { margin-bottom:5px; }
    .cont_box .cont_inner .backL .info a:nth-child(2) { margin-right:0; }
    .cont_box .cont_inner .backL .titxt span { display: inline; }
}

/* 메인 내용 */
/*.main_menu { display: flex; margin-bottom: 20px; }
.main_menu a { display:flex; width: 33.333%; align-items: center; justify-content:center; margin-right: 15px; border:1px solid #e4e5ed; border-radius: 7px; padding:6px 10px; background-color: #FFFFFF; }
.main_menu a:last-child { margin-right: 0; }
.main_menu a:hover { border:1px solid #dd5555; }
.main_menu a img { width: 26px; }
.main_menu a span { margin-left: 10px; font-weight: 400; }*/
.main_menu { float: left; width: 30%; }
.right_menu { float:right; width: 68%; }
.backL .main_menu a.notice_tit { background-color: #97202B; }
.backL .main_menu li:before { display: none; }
.backL .main_menu ul { display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding:0 15px; margin: 14px 0; }
.backL .main_menu ul li { padding:0; width: 33.3333%; display: flex; justify-content: center; margin:20px 0; border-bottom: 0; }
.backL .main_menu ul li a { font-size: 14px; text-align: center; }
.backL .main_menu ul li a span { margin-top: 15px; }
.main_notice { position: relative; /*border:1px solid #e4e5ed;*/ /*padding:25px 20px;*/ border-radius: 7px; background-color: #FFFFFF; margin-bottom: 30px; overflow: hidden; z-index: 25; }
.main_notice a { font-size: 15px; text-align: left; }
.main_notice a.notice_tit { font-size: 16px; padding:13px 20px; background-color:#272727; color:#fff; font-weight: 400; }
.main_notice ul { padding-right: 15px; }
.main_notice li { position: relative; padding:0 88px 0 25px; font-weight: 300; margin-top: 15px; }
.main_notice li:before { position: absolute; left: 10px; top: 50%;  content: ''; display: block; width: 3px; height: 3px; background-color: #D9404E; transform: translateY(-50%); }
.main_notice .noticeBox { display: flex; justify-content: space-between;}
.main_notice .notice_left { width: 45%; }
.main_notice .notice_right { width: 55%; }
.main_notice .notice_left ul { border-right:1px solid #e1e1e1; margin: 15px; margin-left: 20px; }
.main_notice .notice_left li { padding: 23px 0; padding-left: 100px;  margin-top: 0; }
.main_notice .notice_right ul { margin: 15px; margin-left: 0; padding-left: 10px; }
.main_notice .notice_left li:before { display: none; }
.main_notice li a span { display: block; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100%;}
.main_notice li .notice_tit { margin-bottom: 5px; font-weight: 400; font-size: 16px; }
.main_notice li .notice_txt { color:#686868; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  white-space: normal; height: 35px; line-height:1.2em; font-size: 14px; margin-top:10px; }
.main_notice li .notice_date { position: absolute; top:50%; transform: translateY(-50%); left:0; display: block; width: 75px; height: 75px; padding-top: 50px; border-radius: 10px; border: 2px solid #eaeaea; text-align: center; font-size: 12px; font-weight: 300;}
.main_notice li .notice_date i { display: block; position: absolute; top: 10px; left: 0; width: 100%; font-size: 28px; font-weight: 500; color: #2a2a2a; }
.main_notice li .board_date { display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 13px; color: #a9a9a9; }
.main_notice .notice_btn { position: absolute; top:25px; right: 20px; }


.blog { display: flex; }
.blog a.blog_tit { display: flex; align-items: center; border-right: 1px solid #e1e1e1; margin: 13px 0; padding:0 20px; }
.blog a.blog_tit ul li img { margin-right: 5px;  border-bottom: 1px solid #e4e5ed; }
.blog a span { font-size: 18px; }
.blog ul { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; width: 100%; padding:20px; }
.blog li { padding:0; /*margin-top: 20px;*/ background: #FFFFFF; border: 1px solid #DEDEDE; border-radius: 5px; width: 18%; margin-right: 1%; margin-top: 0; height: 43px; line-height: 43px; }
.blog li:first-child { /*padding:0;*/ /* margin-top: 20px;*/ }
.blog li:last-child { margin-right: 0; }
.blog li:before {display: none; }
.blog li:first-child:before { display: none; }
.blog li a { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: space-around; }
.blog li a span { font-size: 13px; }
/*.blog li a:after { position: absolute; content: '';  display: block; top:50%; transform: translateY(-50%); width: 23px; height: 19px; background: url("/resources/main/user/img/icon/blogIcon01.png")no-repeat center; }
.blog li:nth-child(2) a:after { width: 23px; height: 23px; background: url("/resources/main/user/img/icon/blogIcon02.png")no-repeat center; }
.blog li:nth-child(3) a:after { width: 19px; height: 20px; background: url("/resources/main/user/img/icon/blogIcon03.png")no-repeat center; }
.blog li:nth-child(4) a:after { width: 23px; height: 23px; background: url("/resources/main/user/img/icon/blogIcon04.png")no-repeat center; }
.blog li:nth-child(5) a:after { width: 18px; height: 18px; background: url("/resources/main/user/img/icon/blogIcon05.png")no-repeat center; }*/
.blog li a:hover { font-weight: 400; }
@media (max-width: 1024px) {
   /* .main_menu a { margin-right: 5px; padding:8px 0; }
    .main_menu a img { width: 19px; }
    .main_menu a span { margin-left: 5px; font-weight: 400; font-size: 13px; }*/
    .backL .main_menu ul { padding:0; margin: 5px 0; }
    .backL .main_menu ul li { margin: 17px 0; }
    .backL .main_menu ul li a span { margin-top: 7px; }
    .backL .main_menu ul li:nth-child(1) a img { width: 24px; }
    .backL .main_menu ul li:nth-child(2) a img { width: 27px; }
    .backL .main_menu ul li:nth-child(3) a img { width: 29px; }
    /*.main_menu { margin-top: 23px!important; }*/
    /*.main_notice { margin-top: 13px; }*/
    .main_notice .notice_left ul { margin-left: 15px; }
    .main_notice .notice_left li { padding:15px 0; padding-left: 80px; }
    .main_notice a.notice_tit { font-size: 14px; padding: 10px 15px; }
    .main_notice ul { padding-right: 22px; }
    .main_notice li { margin-top:13px; padding:0 70px 0 20px; }
    .main_notice li .notice_tit { font-size: 15px; }
    /*.main_notice li:first-child { padding: 20px 0; padding-left: 90px; }*/
    .main_notice li .notice_txt { height: 30px; font-size: 13px; margin-top: 10px; }
    .main_notice li:before { left:7px; }
    .main_notice li a span { font-size: 12px; }
    .main_notice li .notice_date { width: 65px; height: 65px; padding-top: 44px; font-size: 12px; }
    .main_notice li .notice_date i { font-size: 26px; }
    .main_notice li .board_tt { font-size: 14px; }
    .main_notice li .board_date { font-size: 12px; }
    .main_notice .notice_right ul { margin: 10px; margin-left: 0; padding-left: 0; padding-right: 10px; }

    .blog { display: block; }
    .blog a.blog_tit { padding: 10px 15px; margin:0; border:0; border-bottom: 1px solid #e1e1e1; }
    .blog a.blog_tit img { width: 57px; }
    .blog ul { padding:10px 15px; }
    .blog li { padding:0; margin-top: 0; padding:0 25px; width: 19%; }
    .blog li a { font-size: 14px; justify-content: space-between; }
    .blog li:nth-child(1) a img { width: 21px; }
    .blog li:nth-child(2) a img { width: 21px; }
    .blog li:nth-child(3) a img { width: 19px; }
    .blog li:nth-child(4) a img { width: 21px; }
    .blog li:nth-child(5) a img { width: 18px; }
    .main_menu { position: absolute;  top: -34px; }
    .right_menu { padding-top: 112px; }
    .main_menu, .right_menu { float: none; clear: both; width: 100%; }
    .main_notice .noticeBox { display: block; }
    .main_notice .notice_left, .main_notice .notice_right { width: 100%; }
    .main_notice ul { padding-right: 10px; }
    .main_notice .notice_left ul { margin-right: 10px; margin-top: 5px; border: 0; border-bottom:1px solid #e1e1e1;  }
    .main_notice .notice_left li { padding-left: 74px; }
    .main_notice .notice_right ul { margin: 15px; }

    .cont_box .backL .info a { width: calc(50% - 7.5px); }
}
@media (max-width: 767px) {
    .main_menu, .right_menu { float: none; clear: both; width: 100%; }
    .main_notice .noticeBox { display: block; }
    .main_notice .notice_left, .main_notice .notice_right { width: 100%; }
    .main_notice ul { padding-right: 10px; }
    .main_notice .notice_left ul { margin-right: 10px;  border: 0; border-bottom:1px solid #e1e1e1;  }
    .main_notice .notice_left li { padding-left: 74px; }
    .main_notice .notice_right ul { margin: 15px; }
    .blog li { width: 49%; margin-bottom: 3px; }


}