/* °øÅëÀû¿ë */
html {scroll-behavior:smooth;}
body {overflow-x: hidden;}
img {max-width: 100%;}
.inner {width: 90%; max-width: 1600px; margin: 0 auto; }
.bold {font-weight: 700;}
.colorBlue {color: var(--mainColor);}


/* ºñ¸Þ¿À, À¯Æ©ºê */
.video_container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video_container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* popup */
/* .pop_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); z-index: 999; display: none;}
.pop_wrap.on {display: block;}
.pop_wrap .pop_inner {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.pop_wrap .btn_wrap {display: flex; gap: 10px; justify-content: center;}
.pop_wrap .btn_wrap a {width: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
.pop_wrap .btn_wrap .cancel {border: 1px solid var(--border);  color: #555; background: #fff;}
.pop_wrap .btn_wrap .confirm {background: var(--mainColor); color: #fff;}
.pop_wrap .layer {width: 90%; max-height: calc(100vh - 80px); height: auto; background: #111; position: relative; display: flex; flex-direction: column;}
.pop_wrap .layer > .close {
    display: block; width: 24px; height: 24px; background: url('/base/img/mf/img/icon_close_w.png') no-repeat center center / cover;
    position: absolute; right: 0; top: -30px; cursor: pointer;
}
.pop_wrap .layer .contents {padding: 0 30px 0; overflow-x: hidden; overflow-y: auto; word-break: break-all;}
.pop_wrap .layer .btn_wrap {padding-top: 30px;}
.pop_wrap .layer .btn_wrap a {height: 50px; max-width: 250px;} */



/* padding */
.p_tb {padding: 120px 0;}
.p_t {padding-top: 120px;}
.p_b {padding-bottom: 120px;}


/* btn */
/* .btn {display: flex; align-items: center; justify-content: center; padding: 10px 15px; width: max-content; height: 50px; border-radius: 5px; transition: all .3s;}
.btn.st2 {border: 1px solid #fff;}
.btn.st2:hover {background: #fff; color: #000;} */



/* swiper */
/* .swiper_prev,
.swiper_next {width: 50px; height: 50px; background-repeat: no-repeat; background-position: center center; background-size: contain; cursor: pointer;}
.swiper_prev {background-image: url('/base/img/mf/img/icon_swiper_arr_prev.png');}
.swiper_next {background-image: url('/base/img/mf/img/icon_swiper_arr_next.png');} */




/* footer */
#footer {padding: 60px 0; background: #000; color: #fff;}
#footer .inner {display: flex; flex-direction: column; gap: 10px;}
#footer .top {display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; justify-content: space-between; padding-bottom: 100px;}
#footer .bot {display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; justify-content: space-between;}
#footer .name {font-size: 6.25rem; font-weight: 700; line-height: 1;}
#footer .menu {display: flex; gap: 20px;}
#footer .menu > li.link > a {display: flex; gap: 3px; align-items: center; font-size:1rem}
#footer .menu > li.link > a::after {display: block; content: ""; background: url('/base/img/mf/img/icon_link_w.png') no-repeat center center / contain; width: 20px; aspect-ratio: 1/1;}
#footer .info {display: flex; font-size: 0.875rem; display: flex; gap: 10px 15px; flex-wrap: wrap;}
#footer .info li {display: flex; gap: 5px;}
#footer .info .gu {color: #aaa;}
#footer .copy {font-size: 0.8125rem; color: #aaa;}


/* header */

#header {width: 100%; height: 90px; display: flex; align-items: center; position: fixed; z-index: 998; background: rgba(255,255,255,.95);}
#header .inner {display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header .logo {font-size: 0;}
#header .logo img {height: 45px;}
#header .nav {height: 100%;}
#header .menu {display: flex; gap: 60px; align-items: center; height: 100%;}
#header .menu > li {position: relative; height: 100%;}
#header .menu > li > a {height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
#header .menu > li:hover > a {color: var(--mainColor);}
#header .menu > li.link > a {display: flex; gap: 2px; align-items: center;}
#header .menu > li.link > a::after {display: block; content: ""; background: url('/base/img/mf/img/icon_link_b.png') no-repeat center center / contain; width: 20px; aspect-ratio: 1/1;}
#header .menu > li.link > a:hover::after {filter: invert(45%) sepia(17%) saturate(1752%) hue-rotate(156deg) brightness(101%) contrast(96%);}
#header .menu > li:hover .submenu {visibility: visible; opacity: 1;}
#header .submenu {
    position: absolute; top: 80%; left: 50%; transform: translateX(-50%); background: var(--mainColor); padding: 15px; width: 200px; gap: 10px; border-radius: 20px;
    visibility: hidden; opacity: 0; transition: all .5s;
}
#header .submenu > a {font-size: 0.875rem; color: #ceeeff; display: block; margin-bottom: 10px; text-align: center;}
#header .submenu > a:last-child {margin-bottom: 0;}
#header .submenu > a:hover {color: #fff;}


#header .hamberg {display: none;}
#header.active {background: rgba(255,255,255,.95);}



/* sub */
.sub_top {padding: 200px 0 80px; text-align: center;}
.sub_top .big {font-weight: 800; font-size: 5rem;}
.sub_top .small {font-size: 1.25rem; color: #767676; margin-top: 20px;}
.sub_tit {text-align: center; margin-bottom: 80px;}
.sub_tit .big {font-weight: 800; font-size: 5rem;}




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


    
    .inner {width: 100%; padding:0 20px;}


    /* sub */
    .sub_tit {margin-bottom: 60px;}
    .sub_tit .big {font-size: 4rem;}



}


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


    /* padding */
    .p_tb {padding: 70px 0;}
    .p_t {padding-top: 70px;}
    .p_b {padding-bottom: 70px;}


    /* footer */
    #footer {padding: 40px 0;}
    
    /* header */
    #header {height: 60px;}
    #header .logo img {height: 30px;}
    
    #header .hamberg {width: 24px; height: 24px; font-size: 0; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 2;}
    #header .hamberg span {width: 100%; height: 2px; background: #000; display: block; position: relative; transition: all .3s;}
    #header .hamberg span::before,
    #header .hamberg span::after {display: block; content: ""; width: 100%; height: 2px; background: #000; position: absolute; transition: all .3s;}
    #header .hamberg span::before {top: -8px;}
    #header .hamberg span::after {top: 8px;}
    #header .hamberg span.on {background: rgba(255,255,255,0);}
    #header .hamberg span.on::before {top: 0; transform: rotate(-45deg);}
    #header .hamberg span.on::after {top: 0; transform: rotate(45deg);}
    
    #header .nav {position: fixed; top: 0; left: -500px; background: #fff; width: 500px; height: 100vh; transition: all .3s;}
    #header .nav.on {left: 0; border-right: 1px solid var(--border);}


    #header .menu {flex-direction: column; justify-content: center; gap: 10px; }
    #header .menu > li {height: auto; width: 100%;}
    #header .menu > li > a {height: auto; padding: 15px;}


    #header .submenu {position: unset; opacity: 1; visibility: visible; transform: unset; transition: unset; width: 100%; border-radius: 0;}


    /* sub */    
    .sub_top {padding: 150px 0 60px;}
    .sub_top .big {font-size: 4rem;}
    .sub_top .small {font-size: 1.125rem; margin-top: 15px;}
    .sub_tit {margin-bottom: 40px;}
    .sub_tit .big {font-size: 3rem;}



}


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


    /* footer */
    #footer .top {padding-bottom: 60px;}


    /* hedaer */
    #header .nav {width: 80%;}


    /* sub */
    .sub_top {padding: 100px 0 40px;}
    .sub_top .big {font-size: 2.5rem;}
    .sub_top .small {font-size: 0.94rem; margin-top: 10px;}
    .sub_tit .big {font-size: 1.75rem;}



}