.section01 > div{display: flex;align-items: center;}
.section01 .sec01_left{height:450px;width: 60%;border-radius: 20px; margin-right:30px;;position: relative;}
.section01 .text_box{position: absolute;left:30px;top:30px;color:#fff;}
.section01 .text_box p:first-child{opacity: 0.8;font-size: 0.9rem;;}
.section01 .text_box p:nth-child(2){margin:15px 0 7px; font-family: 'TmonMonsori';font-size: 2.5rem;;}

.section01 .sec01_right{width: 40%;;}


.section01 .search_box{border:2px solid #3d98d9;padding:10px;display: flex;border-radius: 15px;;}
.section01 .search_box input{width: 90%;border:none !important;}
.section01 .search_box button{width:10%;}
.section01 .search_box button img{width: 80%;}

.section01 .loginbox{padding:40px 20px;border-radius: 15px;border:1px solid #ddd;margin-top:30px;}
.section01 .loginbox input{border:1px solid #ddd;;width: 100%;padding:15px;;margin-bottom:15px;border-radius: 10px;;}
.section01 .loginbox button{width: 100%;padding:20px ;border-radius: 10px;margin-top:30px;}
.section01 .loginbox .d-block{font-sizE:0.9rem;color:#666;}
.section01 .loginbox > ul{display: flex;font-size: 0.9rem;color:#666;margin-top:20px;justify-content: center;}
.section01 .loginbox > ul li{position: relative;padding-right:10px;margin-right:10px;cursor: pointer;}
.section01 .loginbox > ul li::before{content:'';display:block;width: 2px;height: 10px;background: #ddd;position: absolute;right:0;top:50%;transform: translateY(-50%);}
.section01 .loginbox > ul li:last-child{padding-right:0px;margin-right:0px;}
.section01 .loginbox > ul li:last-child::before{content:'';display:none;}

.section01 .loginbox .tabSet ul.tabs {overflow:hidden;width: 100%;display: flex;margin-bottom:20px;}
.section01 .loginbox .tabSet ul.tabs li{width: calc(100% / 2);text-align: center;}
.section01 .loginbox .tabSet ul.tabs li:first-child{margin-right:10px;}
.section01 .loginbox .tabSet ul.tabs li a{color:#666;border:1px solid #ddd;;padding:15px;width: 100%;;display:block;border-radius:10px;font-weight:bold;font-size:14px;text-decoration:none;}
.section01 .loginbox .tabSet ul.tabs li a.on{background:#3d98d9;color:#fff;border-color:#3d98d9}
.section01 .loginbox .panels{background:#fff;min-height:180px;}
.section01 .loginbox .panel{color:#4d4d4d; display:none;}

.section01 .loginbox .panel i{display: block;width: 25%;margin-right:15px;    padding-bottom: 16%;}
.section01 .loginbox .panel ul li > div{width: 85%;}
.section01 .loginbox .panel ul li{display: flex;    align-items: center;border:1px solid #ddd;padding:30px 15px;border-radius: 10px;;margin-bottom:15px;}
.section01 .loginbox .panel ul li:last-child{margin-bottom:0;}
.section01 .loginbox .panel ul li .tit{color:#3d98d9;font-weight: 600;margin-bottom:5px;display: flex;}
.section01 .loginbox .panel ul li .txt{display: flex;    align-items: center;}
.section01 .loginbox .panel ul li .txt span{font-size: 1rem;border:1px solid #3d98d9;padding:4px 5px;border-radius: 4px;margin-right:5px;color: #3d98d9;}




/*section02*/
.section02{background: #f5f5f5;position: relative;}
.section02::before{content:'';display: block;background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/YA9MATE/163390706415435.png)no-repeat center/cover;width: 100%;height: 100%;position: absolute;bottom:-23%;left:50%;transform: translateX(-50%);opacity: 0.2;    background-size: 100%;}
.section02 ul li > div{box-shadow: 0 0 10px rgba(0,0,0,0.1);padding:15px;border-radius: 20px;;padding:30px 10px;background: #fff;cursor: pointer;}

.section02 ul {margin:0 -15px;display: flex;flex-wrap: wrap;    justify-content: center;}
.section02 ul li{margin:0 15px;width:calc((100% - 158px) / 5);text-align: center;margin-bottom:30px;}
.section02 ul li i{padding-bottom:45%;display: block;width: 50%;margin:0 auto 15px;;}
.section02 ul li .tit{color:#3d98d9;font-weight: 600;margin-bottom:10px;}
.section02 ul li .txt{font-size: 1.125rem;display: flex;align-items: center; justify-content: center;}



/*section03*/
.section03{background: linear-gradient( #f5f5f5, #fff);position: relative;padding-top:0px ;;z-index: -1;
}
.section03 > div > div{padding-bottom:20%;border-radius: 20px;position: relative;;}
.section03 .text_box{position: absolute;left:50%;;top:50%;transform: translate(-50%,-50%);color:#fff;width: 90%;}
.section03 .text_box p:first-child{font-size:1.8rem;font-family: 'TmonMonsori';letter-spacing:2px;font-weight: 100;margin-bottom:10px}
.section03 .text_box p{font-size:1rem; }


/*section04*/
.section04 .tab_ul{display: flex;margin:0 -10px;    justify-content: center;margin-bottom:30px;}
.section04 .tab_ul li{border:1px solid #ddd;color:#666;padding:8px 30px;border-radius: 20px;margin:0 10px;;cursor: pointer;}
.section04 .tab_ul li.on{background: #3d98d9;border-color:#3d98d9;color:#fff;}

.section04 .notice_ul li{border-bottom:1px solid #ddd;padding:30px;;transition-duration: 0.3s;cursor: pointer;}
.section04 .notice_ul li:hover{border-color:#fff;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 20px;}
.section04 .notice_ul li p.tit{color:#666}
.section04 .notice_ul li p.txt{margin:10px 0;}
.section04 .notice_ul li p.day{color:#666;text-align: right;}

.community_view .tit{font-size: 18px;;}
.community_view .txt{font-size: 28px;}
.community_view .cummu_info{display: flex;justify-content: space-between;align-items: center;background: #f5f5f5;border:1px solid #eee;padding:16px 20px;margin:20px 0;font-size: 15px;}
.community_view .cummu_info .right p,
.community_view .cummu_info .com_name p,
.community_view .cummu_info .com_name,
.community_view .cummu_info .time_name,
.community_view .cummu_info > div{display: flex;align-items: center;}
.comment .com_name .profile,
.community_view .cummu_info .profile,
.community_view .cummu_info .img{display: block;width: 30px;height: 30px;border-radius: 4px;margin-right:6px}
.community_view .cummu_info .profile{border-radius: 40px;}
.community_view .cummu_info p + p,
.community_view .cummu_info div+p,
.community_view .cummu_info div + div,
.community_view .cummu_info p + div{margin-left: 20px;;}
.community_view .cummu_info .time_name{color: #333;}

.community_view .cummu_info .right p{color: #333;}
.community_view .cummu_info .right p span{margin-left: 6px;;;}
.community_view .cummu_info .delet_but{margin-top: 0;;}
.community_view .cummu_info .delet_but button {padding: 8px 12px;  width: auto;border:1px solid #ddd;}


.community_view .notice_ul li{cursor: auto;}

.community_view .file_sec {color: #666;font-size: 14px;}
.community_view .file_sec  p + p{margin-top: 6px;}

.community_view .comment .com_name{display: flex;align-items: center;}
.community_view .comment .com_name i{border-radius: 40px;}

.community_view .comments_sec {margin-top: 20px;background: #f9f9f9;border:1px solid #eee;padding:20px;}
.community_view .comments_sec .top{display: flex;}
.community_view .comments_sec .top textarea{width: calc(100% - 120px);margin-right: 20px;    height: 120px;}
.community_view .comments_sec .top button{background: #3d98d9;color: #fff;padding:0 ;width: 100px;border-radius: 4px;}


.commu_filebox input[type="file"] { position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip:rect(0,0,0,0);  border: 0;}
.commu_filebox label {  display: inline-block; color: #666;  font-size: inherit;  line-height: normal;  vertical-align: middle;  cursor: pointer;font-weight: 600;font-size: 14px;;margin-top: 10px;;display: flex;align-items: center; }
  /* named upload */
.commu_filebox .upload-name { display: inline-block;  padding: .5em .75em;  font-size: inherit;  font-family: inherit;  line-height: normal;  vertical-align: middle;  background-color: #f5f5f5;  border: 1px solid #ebebeb;  border-bottom-color: #e2e2e2;  border-radius: .25em;  -webkit-appearance: none;-moz-appearance: none;  appearance: none; display: none; }
.commu_filebox .upload-display {margin-bottom: 5px; }

.commu_filebox .upload_file li,
.commu_filebox .upload-thumb-wrap {  display: inline-block;  width:150px;height: 150px;;margin-top: 10px;
padding: 2px;  vertical-align: middle;  border: 1px solid #ddd;  border-radius: 5px;  background-color: #fff;}
.commu_filebox .upload-thumb-wrap img{width: 100%;;}
  .commu_filebox .upload-display img {  /* 추가될 이미지 */  display: block;  max-width: 100%; height: auto; }
  .commu_filebox label img{width: 18px;margin-right: 6px;;;}
  .commu_filebox{    flex-direction: column-reverse;display: flex;}
  .commu_filebox .upload_file{padding:0;}
  
.commu_filebox .upload_file i{display: block;width: 100%;height: 100%;border-radius: 4px;}
  
  
  /* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

 
}

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

  
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

  
}

/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .sec {padding: 80px 0;}
    .section01 {padding-top: 120px;}
     .main_sub #secWrap .sec{padding-top:150px;}
     h4 {font-size: 2rem !important;}


    .section01 .loginbox{display: none;}
    .section01 > div{flex-direction: column-reverse;}
    .section01 .sec01_left {height: auto;padding-bottom: 45%;}
    .section01 .sec01_right{width: 100%;margin:0;}
    .section01 .sec01_left{width: 100%;margin:0;border-radius: 10px;margin-top:20px;}
    .section01 .search_box{border-radius: 10px;}
    .section01 .search_box button img {width: 40%;}
    .section01 .search_box button{text-align: right;}


    .section02 ul li .tit {margin-bottom: 5px;}
    .section02 ul  {margin: 0 -10px;}
    .section02 ul li {margin: 0 10px;margin-bottom:20px;width: calc((100% - 80px) / 4);}


    .sec.section03  {padding: 50px 0;}


    .section02 ul li .txt{font-size: 1rem;}

}

/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){

 

}

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




    
    .section04 .notice_ul li:hover {box-shadow: none;border-radius: 0px; border-bottom:1px solid #f5f5f5;   }
    .section04 .notice_ul li { padding: 20px 0;}

    .section02 ul li{width:calc((100% - 20px) / 2);    margin: 0 5px;margin-bottom: 10px;}
    .section02 ul li > div{display: flex;align-items: center;}
    .section02 ul li i {padding-bottom: 0; width: 90px;margin: 0;    height: 90px;}
    .section02 ul li > div > div{width: calc(100% - 90px);    text-align: left;  padding-left: 15px;}
    .section02 ul li > div {  border-radius: 10px; padding:  15px;}
    .section02 ul li .txt{    justify-content: flex-start;}
    .commu_filebox .upload-display {display: inline-block;    margin-right: 5px; margin-bottom: 0;}

}

/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    h4 {font-size: 1.8rem; margin-bottom: 20px;}
    .txt {font-size: 1.125rem;}

    .sec {padding: 60px 0;}
    .section01 {padding-top:100px;}

    .section01 .text_box p:nth-child(2) {font-size: 2rem;}
    .section01 .search_box button img {width: 90%;}
    .section01 .search_box {padding: 8px 0 8px 8px;}
    .section01 .search_box input{width: calc(100% - 50px);padding:0;}
    .section01 .search_box button {width: 50px;display: flex; justify-content: center;align-items: center;}


    .sec.section03 {padding: 20px 0;}
    .section03 > div > div {padding-bottom: 25%;border-radius: 10px;}




/*community_writing*/
.community_writing .check_box_category .check-label .checkmark {padding: 10px 10px;}
.community_writing .check_box_category ul li{width: 50%;}
.community_writing .check_box_category ul li:last-child{margin-right:0;;}
.community_writing textarea { padding: 10px;    font-size: 1rem;    min-height: 300px;}



.section02 ul li{width:calc((100% ));margin:0;margin-bottom: 10px;}




}

/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    h4 {font-size: 1.4rem;}
    .txt {font-size: 1rem;}
    .tit {font-size: 0.9rem;}

    .section01 {padding-top:100px !important;}
    .section01 .search_box {border-radius: 5px;}

    .section01 .sec01_left {padding-bottom: 100%;     border-radius: 5px;margin-top: 10px;   }
    .sec.section01 {padding: 50px 0;}

    .section02 ul  {margin: 0 -8px;}

    .section03 .text_box p {font-size: 0.8rem;}


    .section03 > div > div {padding-bottom: 35%;}

    .section03 .text_box p:first-child {font-size: 1rem; margin-bottom: 5px;}
    .section04 .tab_ul li { width: calc(100% / 3);text-align: center;padding:6px 0px;margin: 0 5px;}
    .section04 .tab_ul {width: 80%; margin:0 auto 20px;}
    .section04 .notice_ul li p.day {font-size: 0.9rem;opacity: 0.8;}
    

.main_sub #secWrap .sec{padding-top:100px;}
h4 {font-size: 1.5rem !important;}

.section03 > div > div {border-radius: 5px;}


.section02 ul li .txt{ font-size: 0.9rem;}
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
.section01 {padding-top:70px !important;}


/*community_writing*/
.community_writing .check_box_category .check-label .checkmark {padding: 6px 8px;}
.community_writing .check_box_category ul li span{font-size: 0.8rem;}
.community_writing textarea {  border-radius: 2px;padding: 8px;    font-size: 0.9rem;    min-height: 250px;}

.community_writing .check-label .checkmark{border-radius: 2px;;}
.community_writing input { border-radius: 2px;padding: 8px; }

.section01 .text_box { left: 20px; top: 20px;}
.section01 .text_box p:nth-child(2) {font-size: 1.5rem;}

.section01 .search_box button {width: 40px;}

    
.section02 ul li{width: 100%;margin:0;margin-bottom: 15px;}
    .section02 ul li i {padding-bottom:0; width: 80px;margin: 0;    height: 80px;}
    .section02 ul li > div > div{width: calc(100% - 80px);    text-align: left;  padding-left: 10px;}
    .section02 ul li > div {  border-radius:5px; padding: 10px;}
}
/* ********************************************* *
* 300px
* ********************************************* */
@media screen and (max-width: 300px){
    .tit {font-size: 0.8rem;}

    .section02 ul li i {padding-bottom:0; width: 50px;margin: 0;    height: 50px;}
    .section02 ul li > div > div{width: calc(100% - 50px);    text-align: left;  padding-left: 8px;}
    .section02 ul li > div {  border-radius:5px; padding: 10px;}
}