@charset "utf-8";


/********************************************************

    공통

********************************************************/


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

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

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

@media screen and (max-width: 480px) { 
    /* .main {padding-top:80px;} */
}








/********************************************************

    메인 버튼

********************************************************/

.main .m_box {display:grid; grid-template-columns: repeat(3, 1fr); gap:15px;}
.main .m_box .mb_btn {background:#fff; border-radius:10px; width:100%;}
.main .m_box .mb_btn a {display:block; text-align:left; padding:25px; min-height:165px; height:100%;}
.main .m_box .mb_btn a p {font-size:16px; font-weight:400; color:#888; text-transform:uppercase; margin-bottom:5px;}

.main .m_box .mb_btn a h3 {font-size:25px; font-weight:700; color:#000; display:flex; align-items:center;}
.main .m_box .mb_btn a h3 span.week {}
.main .m_box .mb_btn a h3 span.number {background:#FF6665; color:#fff; margin-left:5px; width:30px; height:30px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center;}

.main .m_box .mb_btn a div {display:flex; justify-content:flex-end; align-items:flex-end; margin-top:15px;}
.main .m_box .mb_btn a div img {width:fit-content;}

.main .m_box .mb_btn:nth-child(3) a div {margin-top:105px;}
.main .m_box .mb_btn a div.weather_img {}
.main .m_box .mb_btn a div.weather_img img {width:75px;}
.main .m_box .mb_btn a div.weather_txt {flex-direction:column; margin-top:10px;}
.main .m_box .mb_btn a div.weather_txt h4 {color:#000; font-size:26px; font-weight:700; display:flex; align-items:flex-start;}
.main .m_box .mb_btn a div.weather_txt h4 span {color:#000; font-size:14px; font-weight:500; margin-left:5px;}
.main .m_box .mb_btn a div.weather_txt h5 {color:#333; font-weight:400; font-size:14px; margin-top:5px;}

.main .m_box .mb_btn:nth-child(1) {grid-column: 1 / 2; grid-row: 1 / 2;}
.main .m_box .mb_btn:nth-child(2) {grid-column: 2 / 3; grid-row: 1 / 2;}
.main .m_box .mb_btn:nth-child(3) {grid-column: 3 / 4; grid-row: 1 / 3;}
.main .m_box .mb_btn:nth-child(4) {grid-column: 1 / 3; grid-row: 2 / 3; background:#0064C9;}
.main .m_box .mb_btn:nth-child(5) {grid-column: 1 / 3; grid-row: 3 / 4;}
.main .m_box .mb_btn:nth-child(6) {grid-column: 3 / 4; grid-row: 3 / 4;}
.main .m_box .mb_btn:nth-child(7) {grid-column: 1 / 2; grid-row: 4 / 5;}
.main .m_box .mb_btn:nth-child(8) {grid-column: 2 / 4; grid-row: 4 / 5; background:#004386;}

.main .m_box .mb_btn:nth-child(4) p, .main .m_box .mb_btn:nth-child(8) p {color:#ccc;}
.main .m_box .mb_btn:nth-child(4) h3, .main .m_box .mb_btn:nth-child(8) h3 {color:#fff;}



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

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

@media screen and (max-width: 768px) {
    .main .m_box {gap:10px;}

    .main .m_box .mb_btn a p {font-size:14px;}
    .main .m_box .mb_btn a h3 {font-size:22px}

    .main .m_box .mb_btn a h3 span.number {width:25px; height:25px; font-size:16px; }

    .main .m_box .mb_btn a div {margin-top:30px; margin-right:-5px;}
    .main .m_box .mb_btn:nth-child(3) a div {margin-top:140px;}
    .main .m_box .mb_btn a div img {width:47px;}
    .main .m_box .mb_btn a div.weather_img img {width:60px;}
    .main .m_box .mb_btn a div.weather_txt {margin-top:10px;}
    
    .main .m_box .mb_btn a div.weather_txt h4 {font-size:22px;}
    .main .m_box .mb_btn a div.weather_txt h4 span {font-size:12px;}
    .main .m_box .mb_btn a div.weather_txt h5 {font-size:12px;}
}

@media screen and (max-width: 640px) { 
    .main .m_box .mb_btn a {padding:20px}

    /* .main .m_box .mb_btn a h3 {display:block;} */
    /* .main .m_box .mb_btn a h3 span.number {margin-left:0; margin-top:5px;} */
}

@media screen and (max-width: 480px) { 
    /* .main .m_box {grid-template-columns: repeat(2, 1fr);}

    .main .m_box .mb_btn:nth-child(1) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(2) {grid-column: 2 / 3;}
    .main .m_box .mb_btn:nth-child(3) {grid-column: 2 / 3; grid-row: 2 / 3;}
    .main .m_box .mb_btn:nth-child(4) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(5) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(6) {grid-column: 2 / 3;}
    .main .m_box .mb_btn:nth-child(7) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(8) {grid-column: 2 / 3;} */

    .main .m_box .mb_btn a {min-height:auto; padding:15px;}
    .main .m_box .mb_btn a div {margin-top:25px;}
    .main .m_box .mb_btn a div img {width:37px;}

    /* .main .m_box .mb_btn:nth-child(4) a div {margin-top:50px;} */
    .main .m_box .mb_btn:nth-child(3) a div {margin-top:100px;}
    .main .m_box .mb_btn a div.weather_img img {width:47px;}
    .main .m_box .mb_btn a div.weather_txt {margin-top:10px; margin-right:5px;}

    .main .m_box .mb_btn a p {font-size:12px;}
    .main .m_box .mb_btn a h3 {font-size:16px}

    .main .m_box .mb_btn a h3 span.number {font-size:14px; width:20px; height:20px;}
    
    .main .m_box .mb_btn a div.weather_txt h4 {font-size:18px;}
}

@media screen and (max-width: 360px) { 
    .main .m_box {gap:6px;}
    .main .m_box .mb_btn {border-radius:5px;}
    .main .m_box .mb_btn a {padding:10px}
    .main .m_box .mb_btn a p {font-size:10px;}
    .main .m_box .mb_btn a h3 {font-size:14px}

    .main .m_box .mb_btn a h3 span.number {font-size:12px;}

    .main .m_box .mb_btn:nth-child(4) a div {margin-top:20px;} 
    .main .m_box .mb_btn:nth-child(3) a div {margin-top:80px;}
    .main .m_box .mb_btn a div.weather_txt {margin-top:10px; margin-right:5px;}

    .main .m_box .mb_btn a div img {width:30px;}
    .main .m_box .mb_btn a div.weather_img img {width:37px;}

    .main .m_box .mb_btn a div.weather_txt h4 {font-size:16px;}
    .main .m_box .mb_btn a div.weather_txt h4 span {font-size:10px;}
    .main .m_box .mb_btn a div.weather_txt h5 {font-size:10px;}
}

@media screen and (max-width: 320px) { 
    .main .m_box {grid-template-columns: repeat(2, 1fr);}

    .main .m_box .mb_btn:nth-child(1) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(2) {grid-column: 2 / 3;}
    .main .m_box .mb_btn:nth-child(3) {grid-column: 2 / 3; grid-row: 2 / 3;}
    .main .m_box .mb_btn:nth-child(4) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(5) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(6) {grid-column: 2 / 3;}
    .main .m_box .mb_btn:nth-child(7) {grid-column: 1 / 2;}
    .main .m_box .mb_btn:nth-child(8) {grid-column: 2 / 3;}

    .main .m_box .mb_btn:nth-child(4) a div {margin-top:70px;} 
    .main .m_box .mb_btn:nth-child(3) a div {margin-top:20px;}
    .main .m_box .mb_btn a div.weather_txt {margin-top:10px; margin-right:5px;}
}








/********************************************************

    배너

********************************************************/

.main_banner {margin-top:30px; position:relative; z-index:0;}
.main_banner .swiper {display:block; width: 100%; height: 100%;}
.main_banner.swiper-wrapper {position : inherit;}
.main_banner .swiper-slide {text-align: center; display: flex; justify-content: center; align-items: center; height:170px;}
.main_banner .swiper-slide img {display: block; width: 100%; object-fit: cover;}
.main_banner .swiper-pagination {position : inherit; margin-top:30px;}

.main_banner .swiper-button-prev, .main_banner .swiper-button-next {width:34px !important;}
.main_banner .swiper-button-next:after, .main_banner .swiper-button-prev:after {content:""; background:url(/resources/user/mobile/img/icon/banner_arrow.png) no-repeat; width:34px; height:34px;}
.main_banner .swiper-button-next:after {}
.main_banner .swiper-button-prev:after {transform: rotate(180deg);}


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

@media screen and (max-width: 1000px) { 
    .main_banner .swiper-slide {height:250px;}
    .main_banner .swiper-pagination {margin-top:10px;}
}

@media screen and (max-width: 768px) {
    .main_banner .swiper-slide {height:190px;}
}

@media screen and (max-width: 640px) { 
    .main_banner .swiper-slide {height:155px;}
}

@media screen and (max-width: 480px) { 
    .main_banner .swiper-slide {height:auto;}
    .main_banner .swiper-slide img {height:100%;}

    .main_banner .swiper-button-prev, .main_banner .swiper-button-next {width:24px !important;}
    .main_banner .swiper-button-next:after, .main_banner .swiper-button-prev:after {content:""; background:url(/resources/user/mobile/img/icon/banner_arrow.png) no-repeat; width:24px; height:24px; background-size:24px;}
}

@media screen and (max-width: 360px) { 
    .main_banner {margin-top:15px;}
}








/********************************************************

    하단버튼

********************************************************/

.ft_btn {margin-top:20px;}
.ft_btn ul {background:#374A61; display:flex; align-items:flex-start; justify-content:center; width:100%; padding:20px 0;}
.ft_btn ul li {border-left:1px solid #738191; max-width:320px; width:100%;}
.ft_btn ul li:first-child {border-left:none;}
.ft_btn ul li a {display:block; padding:30px 0;}
.ft_btn ul li a:hover {background:#1b2838;}
.ft_btn ul li a span {color:#fff; font-weight:700; font-size:18px;}
.ft_btn ul li a span img {margin:auto; text-align:center; margin-bottom:15px;}


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

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

@media screen and (max-width: 768px) {
    .ft_btn ul li a span {font-size:16px;}
}

@media screen and (max-width: 480px) {
    /* .ft_btn ul {display:grid; grid-template-columns: repeat(auto-fill, minmax(50%, auto)); padding:10px;}  */
    /* .ft_btn ul li:nth-child(3), .ft_btn ul li:nth-child(4) {border-top:1px solid #738191;} */
    /* .ft_btn ul li:nth-child(3) {border-left:none;} */

    .ft_btn ul li a {padding:15px 0;}
    .ft_btn ul li a span {font-size:14px; font-weight:600;}
    .ft_btn ul li a span img {margin-bottom:10px; width:28px;}
}

@media screen and (max-width: 360px) {
    .ft_btn {margin-top:10px;}

    .ft_btn ul li a {padding:10px 0;}
    .ft_btn ul li a span {font-size:12px;}
    .ft_btn ul li a span img {width:22px; margin-bottom:5px;}
}








/********************************************************

    sns

********************************************************/

.ft_sns {margin:30px 0;}
.ft_sns ul {display:flex; justify-content:center;}
.ft_sns ul li {margin-left:40px;}
.ft_sns ul li:first-child {margin-left:0;}
.ft_sns ul li a {display:flex; align-items:center; color:#374A61; font-weight:700; font-size:20px;}
.ft_sns ul li a img {margin-right:10px;}


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

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

@media screen and (max-width: 768px) {
    .ft_sns ul li a {font-size:18px;}
}

@media screen and (max-width: 480px) { 
    .ft_sns ul li {margin-left:20px;}
    .ft_sns ul li a {font-size:14px;}
}

@media screen and (max-width: 320px) {
    .ft_sns {margin:15px 0;}
    .ft_sns ul li {margin-left:40px;}
    .ft_sns ul li a {display:block; font-size:12px;}
    .ft_sns ul li a img {margin:0 auto; text-align:center; margin-bottom:5px;}
}























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

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

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

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