@charset "utf-8";



/* 메뉴 */
header .gnb .gnb_left li.lang_wrap{display:none;}
header .gnb .gnb_left li:after{display: none;}
header .gnb .gnb_left li:nth-of-type(1):after,header .gnb .gnb_left li:nth-of-type(2):after{display: inline-block;}
header .head h1 a{width: 164px;background: url(/images/30_together/main/logo.png) no-repeat;}
.depth_boxcon>li{margin:0 0 10px;}
.depth_boxcon>li>a{padding:10px;}

@media all and (min-width:768px) {
    
.menu>div>ul{overflow:hidden;}
.menu>div>ul>li{width: 20%;}
.menu>div>ul>li>a{box-sizing:border-box;height: 90px;padding: 33px 5px !important;}
.menu .depth_box{top: 153px;height: auto;bottom: auto; padding:30px 0;}
.depth_boxcon>li{margin:0 1%;}
.menu>div>ul>li.on>a::after{width:100%;}
}
@media all and (min-width:1023px) {
.head{margin:0 auto;height: auto;}
header .gnb .gnb_left{top: 28px;}
header .head h1 a{box-sizing: border-box;margin: 19px 0;}
.menu, .menu.on{float: left;width: 700px;margin-left: 130px;padding: 0;}
.menu>div>ul>li{width: auto;margin: 0 60px 0 0;padding:0;}
.menu>div>ul>li:last-of-type{margin:0;}
.menu .depth_box{top: 90px;}

.sub_container{background-position:0 0;}
.s_title{padding-bottom: 141px;}
}
/* Mobile */
.section {background: url('/images/30_together/main/main_img.jpg') no-repeat center top; background-size: 1300px;}

/* 비주얼 */
.visual *{box-sizing: border-box;}
.visual{padding-top: 100px; margin-bottom: 30px;}
.visual h2{font-family:Cafe24Shiningstar; font-size: 34px; color: #fff; word-break: keep-all;}
.visual h2 strong{color: #fdd118;}

/* 자주찾는서비스 */
.visual .btn{padding-top: 70px;}
.visual .btn h3{display: none;}
.visual .btn p{display: flex; flex-wrap: wrap; justify-content: space-between; }
.visual .btn a{position: relative; display: block; width: calc(100%/2 - 5px); margin: 0 0 10px; padding: 40px 0 10px;  background-color: #FFDA8F; border-radius: 7px; color: #685F4D; font-size: 14px; text-align: center; transition: .3s all; }
.visual .btn a::before{content: '';  top: 10px; left: 0; right: 0; margin: 0 auto; background: url('/images/30_together/main/m_ico.png') no-repeat; padding: 15px; position: absolute;}
.visual .btn a.s_01::before{background-position: 50% 0 !important;}
.visual .btn a.s_02::before{background-position: 50% -56px !important;}
.visual .btn a.s_03::before{background-position: 50% -111px !important;}
.visual .btn a.s_04::before{background-position: 50% -169px !important;}
.visual .btn a:hover, .visual .btn a:active, .visual .btn a:focus{color: #000; font-weight: 500; background: #F3AE20;}
.visual .btn a:hover::before, 
.visual .btn a:active::before, 
.visual .btn a:focus::before{background: url('/images/30_together/main/m_ico_on.png') no-repeat;}

.main_tit {display: block; font-size: 20px; font-weight: 500;}
.main_tit::after {content: ''; width: 100%; display: block; height: 1px; background-color: #E8E8E8;margin-top: 10px;}

/* 최근제안 */
.main_wrap *{box-sizing:border-box;}
.main_wrap{padding-bottom: 40px;}
.con_box{position: relative; margin: 10px 0;}
.con_box a{position: relative; text-align: center;display: block; padding: 30px 10px; background: #F8F8F8; border: 1px solid #E5E5E5; border-radius: 10px; }
.con_box a span,.con_box a strong{display: block;}
.con_box a .like{position: relative; display: block; width: 120px; height: 40px; margin: 5px auto; padding: 10px 0; background: #fff; border-radius: 30px; transition: .3s all;}
.con_box a .like i{display: inline-block; font-weight: 600; font-style: normal; vertical-align: top;}
.con_box a .like::before{content: ''; position: absolute; top: -15px; left: 0; right: 0; display: block; width: 24px; height: 24px; margin: 0 auto; background: url('/images/30_together/main/m_good.png') no-repeat; background-position: 50% -9px;}
.con_box a .tit{margin: 15px 0; font-size: 20px; font-weight: 400; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.con_box a .date{margin-bottom: 16px; color: #B4B4B4; font-size: 14px;}
.con_box a .day{color: #075FAE;}
.con_box  a .day i{display: inline-block; padding: 3px 12px; color: #fff; border-radius: 5px; font-style: normal; background: #666;}
.con_box  a i.step1{background: #666;}
.con_box  a i.step2{background: #075fae;}
.con_box  a i.step3{background: #2f2e34;}
.con_box  a i.step4{background: #c35416;}

.con_box a:hover .like,.con_box a:focus .like,.con_box a:active .like{background: #075fae; color: #fff;}
.con_box a:hover .like::before,.con_box a:focus .like::before,.con_box a:active .like::before{background-position: 50% -45px;}

.main_wrap .more {display: block; width: 150px; margin: 0 auto 60px; padding: 10px; text-align: center; background: #403F3E; color: #fff; border-radius: 15px;}
.main_wrap .more:hover, .main_wrap .more:active, .main_wrap .more:focus {background-color: #000;}



/* Tablet */
@media all and (min-width:768px) {
.visual h2 {font-size: 60px;}
.visual .btn{height: 120px; padding-top: 0; display: block; background-color: #FFDA8F; border-radius: 10px; width: 100%; margin-top: 135px;overflow: hidden;}
.visual .btn h3{display: block; float: left; padding-top: 35px; margin-right: 10px; position: relative; width: calc(100%/5 - 5px); text-align: center; font-size: 20px; font-weight: 500; color: #000;}
.visual .btn h3::after {content: ''; width: 1px; height: 25px; background-color: #E5CD9D; position: absolute;top: 55%; right: 0;}
.visual .btn p{min-width: 79%; float: right; padding-right: 8px;}
.visual .btn a{width: calc(100%/4 - 5px); height: 105px; margin: 8px 0; padding: 55px 0 0;}
.visual .btn a::before{top: 20px;}

.main_tit{margin-bottom: 30px; font-size: 30px;}

.main_wrap{position: relative;}
.main_con{display: flex; flex-wrap: wrap;}
.con_box{display: inline-block; width: 46%; margin: 0 2% 2%;}
.con_box a {min-height: 320px; padding: 45px 30px 50px; border-radius: 20px;}
.con_box a .tit{margin: 20px 0;}
.con_box a .date {font-size: 16px;}

.main_wrap .more{display: inline-block;position: absolute; top: -80px;right: 0;width: auto;margin: 0;padding: 10px 40px 10px 0;color: #403F3E;font-size: 20px;background: url('/images/30_together/main/more.png') no-repeat top -2px right -14px;}
.main_wrap .more:hover, .main_wrap .more:active, .main_wrap .more:focus {text-decoration: underline; background-color: #fff;}
 
}

/* Desktop */
@media all and (min-width:1023px) {
.wrap {width: 1400px;margin: 0 auto;overflow: hidden;}
.section {background-size: 2000px;min-width: 1400px; margin: 0 auto;}
.visual {padding-top: 180px;margin-top: 0;margin-bottom: 100px;}
.visual h2{position: relative; font-size: 75px;}
.visual h2 strong{display: inline-block;padding-left: 20px;font-size: 80px;}
.visual h2::before{content: '';position: absolute;left: 0px;top: -57px;display: block;width: 290px;height: 189px;background: url('/images/30_together/main/h2_bg.png') no-repeat;}
.visual .btn{margin-top: 220px;border-radius: 20px;}
.visual .btn h3{padding-top: 25px; font-size: 25px;}
.visual .btn a span {font-size: 20px;}

.con_box{width: 25%; margin: 0 0 30px 0; padding:0 30px 0 0;}
.con_box:nth-of-type(4n){padding: 0;}
.con_box a .tit{font-size: 24px;}


}
                                                                                                                                                                                  