/* header start */
/* top */
.top{position:fixed; top:0px; left:50%; z-index:997; width:100%; height:80px; background-color: #fff; max-width:800px; transform: translateX(-50%);}
.top.on{background:#fff; border-bottom:1px solid #ccc;}
.top .menubtn{position:relative; float:right; width:63px; margin-top:16px;}
.top .menubtn ul{position:absolute; top:0; left:0; width:63px; height:50px; padding:4px 16px;}
.top .menubtn ul li{height:1px; margin:10px 0; background:#333; transition:all 0.5s; transform-origin: left center;}
.top .menubtn ul li:nth-child(2){width:50%;}
.top .menubtn.on ul .bar_t{transform:rotate(45deg);}
.top .menubtn.on ul .bar_m{width:0;}
.top .menubtn.on ul .bar_b{transform:rotate(-45deg);}
.top .logo{padding-left:15px; padding-top:20px;}
.top .logo img{height:40px;}

/* sidemenu */
.menubox{position:fixed; top:0; left:-100%; z-index:998; width:100%; height:100%; transition:all 0.3s; background:#fff; overflow:auto;}
.menubox .logo{position: absolute; padding-left:15px; padding-top:20px; z-index: 999;}
.menubox .logo a{display: block; width:100%;}
.menubox .logo img{height:40px;}
.menubox.on{left:0;}
.sidemenu_head{position:relative; padding:40px 16px 40px; margin-bottom:10px; background-color: #3a54a5;}
.sidemenu_head ul{position:absolute; top:15px; right:0; width:63px; height:50px; padding:4px 16px;}
.sidemenu_head ul li{height:1px; margin:10px 0; background:#fff; transition:all 0.5s; transform-origin: left center;}
.sidemenu_head ul .bar_t{transform:rotate(45deg);}
.sidemenu_head ul .bar_m{width:0;}
.sidemenu_head ul .bar_b{transform:rotate(-45deg);}
.sidemenu_head p:nth-of-type(1){font-size:30px; color:#000;}
.sidemenu_head p:nth-of-type(2){margin-top:10px; font-size:16px; color:#000;}
.sidemenu_body{padding:0 10px;}
.sidemenu_body .sidemenu{margin-bottom:5px;}
.sidemenu_body .sidemenu p{position:relative; padding:20px; font-size:16px; font-weight:700; color:#fff; background:#fff; border-bottom:1px solid #ccc;transition:all 0.5s;}
.sidemenu_body .sidemenu p:hover{opacity:1;}
.sidemenu_body .sidemenu p .arrow{position:absolute; top:19px; right:15px; width:15px; height:15px; background:url('../img/mplus.png') no-repeat center; transition:all 0.3s;}
.sidemenu_body .sidemenu p.open .arrow{transform:rotate(135deg);}
.sidemenu_body .sidemenu p a{color:#3a54a5; display: block;}
.sidemenu_body .sidemenu ul{display:none; padding:5px 0 20px; background:#fff;}
.sidemenu_body .sidemenu ul li{margin-bottom:5px;}
.sidemenu_body .sidemenu ul li a{display:block; padding:15px 35px; font-size:14px; font-weight:400; color:#333; border-bottom:1px solid #ddd;}
/* header end */



.visual{margin-top:80px;}
.visual img{width:100%;}

/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
/* image_show_wrap 공통 */


/* image 확대 공통 */
.clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
    @keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */
/************************************************************** section **************************************************************/
/* main_banner */
.main_banner{margin-top:30px;}
.main_banner ul{
    width:100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap:5px;
}
.main_banner ul li{
    width:33.333%;
    border-radius: 200px;
    font-size:13px;
    font-weight: 600;
    color:#fff;
    text-align: center;
    padding:10px 0;
    animation: blinkBg 2s infinite;
}
@keyframes blinkBg {
    0% { background-color: #e91c23; }
    50% { background-color: #3a54a5; }
    100% { background-color: #e91c23; }
}

/* sec1 */
.sec1{padding:30px 0;}
.sec1 ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:10px;
}
.sec1 ul li{width:100%; position: relative;}

.sec1 ul li .icon{
    position: absolute;
    top:-40px;
    left:50%;
    transform: translateX(-50%);
    width:80px;
    height:80px;
    line-height:80px;
    border-radius: 50%;
    background-color: #fff;
    border:1px solid #ccc;
    text-align: center;
    padding:5px;
    z-index: 99;
}


.sec1 ul li a{display: block;}

/* sec1 */



/* sec2 */
.sec2{padding:30px 0; background-color: #f7f7f7;}
.sec2 ul li{position: relative;}
.sec2 ul li a{
    display: block;
    position: relative;
}
.sec2 ul li a h4{
    font-size:20px;
    color:#000;
    text-align: left;
    padding-left:10px;
}
.sec2 ul li a > span{
    display: block;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:5px;
    font-size:20px;
    color:#333;
    border:1px solid #ccc;
}
.sec2 ul li .free{margin-top:30px;}
.sec2 ul li .board{
    padding:10px;
    border:1px solid #ccc;
    margin-top:10px;
    border-radius: 10px;
    background-color: #fff;
}

.sec2 ul li .board a{
    display: block;
    padding:10px 0;
    border-bottom:1px solid #ccc;
    position: relative;
}
.sec2 ul li .board a:last-child{border-bottom:0;}
.sec2 ul li .board a .tit{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.sec2 ul li .board a .tit span{display: none;}



.sec2 ul li .board a .new{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:90px;
}
.sec2 ul li .board a .new img{animation: blink 1.5s infinite; /* 1초마다 반복 */}
@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}



.sec3{padding:30px 0;}
.sec3 .gallery .board > a{
    display: block;
    position: relative;
}
.sec3 .gallery .board > a > h4{
    font-size:20px;
    color:#000;
    text-align: left;
    padding-left:10px;
}
.sec3 .gallery .board > a > span{
    display: block;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:5px;
    font-size:20px;
    color:#333;
    border:1px solid #ccc;
}

.sec3 .gallery .board ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:10px;
    margin-top:10px;
}
.sec3 .gallery .board ul li{width:48.5%;}
.sec3 .gallery .board ul li .img{
    position: relative;
    width:100%;
    height:0;
    padding-top:60%;
    overflow: hidden;
}
.sec3 .gallery .board ul li .img img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}
.sec3 .gallery .board ul li .tit p{
    font-size:16px;
    color:#333;
    text-align: center;
    padding:10px 0;
}
.sec3 .gallery .board ul li .tit span{display: none;}
/* sec2 */




/* footer */
.footer .footer_slide .swiper-wrapper {transition-timing-function: linear;}
.footer .footer_slide .swiper-slide {
    width:100%;
    text-align: center;
    font-size: 18px;
    background: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer .footer_slide  .swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border:1px solid #ccc;
}
/* footer_slide  swiper end */

.footer .footer_tit{
    background-color: #5f5f5f;
    padding:20px 0;
    margin-top:20px;
}
.footer .footer_tit .img{text-align: center;}
.footer .footer_tit .img img{width:200px;}
.footer .footer_tit .tit{margin-top:20px;}
.footer .footer_tit .tit p{
    font-size:13px;
    color:#ccc;
    text-align: center;
    line-height:20px;
}
.footer .footer_tit .tit span{
    display: block;
    font-size: 12px;
    color:#fff;
    text-align: center;
    margin-top:10px;
}
/* footer */

/************************************************************** section **************************************************************/


/* top_btn */
.topbtn{
    position: fixed;
    bottom:30px;
    right:20px;
    z-index:9999999;
    width:30px;
    height:30px;
    border-radius: 40px;
    background-color:  #e91c23;
    transition: all 0.5s ease;
    opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:20px;
}

.topbtn:active,
.topbtn:hover
{color:#fff; transition:all 0.5s ease; background-color: #151515;}
/* top_btn */

/* m_phone */
.m_phone{
    width:100%;
    max-width:800px;
    min-width:300px;
    position: fixed;
    bottom:0;
    z-index: 99999999999999999;
    text-align: center;
}