@charset "utf-8";

/* common */
body:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(180deg, #E6F4FF 0%, #F5F7FC 100%);}

@media screen and (max-width: 1024px){
    #wrap{padding-bottom: 0 !important;}
}

/*-------------------------------------------------------------------
    header
-------------------------------------------------------------------*/
#header{width:100%; height:auto; background: url(../../images/mecsearch/common/visual.png) no-repeat center center / cover;}
#header.fixed{position:fixed; left:0; z-index:101;}


#header .search_box{width: 100%; max-width: calc(1600px + 4rem); margin: 0 auto; padding: 0 2rem;}
#header .global{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; padding: 8rem 0;}
#header .global .logo{
    display: block; position: absolute; top: 8rem/*50%*/; left: 0;
    /*-webkit-transform: translateY(-50%); transform: translateY(-50%);*/
}
#header .global .logo img{display:block; width: 18rem; height: 4.7rem;}
#header .hd_sc{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 2rem; position: relative; width: 100%; max-width: 772px;}
#header .hd_sc .l{width: 100%;}
#header .hd_sc .l .input_box{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1.2rem; width: 100%}
#header .hd_sc .l .input_box .select{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
#header .hd_sc .l .input_box .select label{display: block; position: absolute; top: -9999px; left: -9999px;}
#header .hd_sc .l .input_box .select select{display: block; width: 16rem; height: 5.8rem; padding: 0 4.5rem 0 2rem; background-color: transparent; font-size: 1.7rem; color: #fff; font-weight: 400; line-height: 1.6; letter-spacing: -0.016rem; background: transparent url(../../images/mecsearch/common/hd_img01.svg) no-repeat right 2rem center / 2rem auto; border: 1px solid #fff; border-radius: 1rem; -webkit-appearance: none; -moz-appearance: none; outline: none;}
#header .hd_sc .l .input_box .select select option{color: #222;}
#header .hd_sc .l .input_box .text_input{display: block; width: calc(100% - 16rem - 1.2rem); border-radius: 1rem; border: 1px solid #fff;}
#header .hd_sc .l .input_box .text_input input{width: 100%; height: 5.8rem; padding: 0 6rem 0 2rem; background-color: transparent; color: #FFF; font-size: 1.7rem; font-weight: 300; line-height: 1.6; letter-spacing: -0.016rem; border: none; outline: none;}
#header .hd_sc .l .input_box .text_input input::placeholder{color: #fff;}
#header .hd_sc .l .input_box .search_btn{position: absolute; top: 50%; right: 2rem; width: 2.4rem; height: 2.4rem; background: url(../../images/mecsearch/common/hd_img02.svg) no-repeat center center / 100% auto; text-indent: -9999px; border: none; transform: translateY(-50%);}


#header .nav_box{}
#header .nav_box .al_box{position:relative; width: 100%; max-width: calc(1600px + 4rem); margin:0 auto; padding: 0 2rem;}
#header .nav_box .al_box .tab_link{position: relative; background-color: rgba(0, 23, 64, 0.60);}
#header .nav_box .al_box .tab_link >ul{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}
#header .nav_box .al_box .tab_link >ul >li{display: flex; width: 100%; height: 5.7rem;}
#header .nav_box .al_box .tab_link >ul >li >a{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; padding: .7rem; font-size: 1.8rem; font-weight: 500; line-height: 1; letter-spacing: -0.018rem; color: rgba(255, 255, 255, 0.70);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;text-align:center;
}
#header .nav_box .al_box .tab_link >ul >li.fs_small >a{font-size:1.4rem;line-height:1}
#header .nav_box .al_box .tab_link >ul >li >a:hover,
#header .nav_box .al_box .tab_link >ul >li >a.active{color: #fff;}
#header .nav_box .al_box .tab_link .bt_line{display:none !important;}

@media screen and (max-width: 1480px){
    #header .hd_sc{max-width: 640px;}
    #header .nav_box .al_box .tab_link >ul >li >a{min-width: 11.5rem;}
}
@media screen and (max-width: 1300px){
    #header .nav_box .al_box .tab_link >ul >li >a{min-width: 10.5rem;}
}
@media screen and (max-width: 1230px){
    #header .global{align-items: flex-start; gap: 2rem; padding: 5rem 0}
    #header .global .logo{position: relative; top: auto; left: auto; width: 100%;}
    #header .global .logo img{margin: 0 auto; }
}
@media screen and (max-width: 1200px){
    #header .nav_box .al_box .tab_link >ul{padding-right: 0;}
}
@media screen and (max-width: 1024px){
    #header .hd_sc{width: 100%; max-width: 600px;}
    #header .hd_sc .l .input_box{gap: 1rem;}
    #header .hd_sc .l .input_box .text_input{width: calc(100% - 16rem - 1rem);}
}
@media screen and (max-width: 840px){
    #header{top: auto !important;}
    #header.fixed{position: relative; }
    #header .nav_box .al_box{padding: 0;}
    #header .nav_box .al_box .tab_link >ul{overflow: hidden; flex-wrap: wrap; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa;}
    #header .nav_box .al_box .tab_link >ul >li{position: relative; width: calc(100% / 4); height: 5.334rem;}
    #header .nav_box .al_box .tab_link >ul >li:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100vw; height: 1px; background-color: #aaa;}
    #header .nav_box .al_box .tab_link >ul >li:nth-child(1):before,
    #header .nav_box .al_box .tab_link >ul >li:nth-child(2):before,
    #header .nav_box .al_box .tab_link >ul >li:nth-child(3):before,
    #header .nav_box .al_box .tab_link >ul >li:nth-child(4):before{display: none;}
    #header .nav_box .al_box .tab_link >ul >li:after{content: ""; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100vh; background-color: #aaa;}
    #header .nav_box .al_box .tab_link >ul >li:nth-child(4n-3):after{display: none;}
    #header .nav_box .al_box .tab_link >ul >li >a{min-width: 0; width: 100%; font-size: 1.6rem;}
    #header .nav_box .al_box .tab_link >ul >li >a.active{background-color: #0073B1; color: #fff; font-weight: 400;}
    #header .nav_box .al_box .tab_link .bt_line{display: none !important;}
}
@media screen and (max-width: 740px){
    #header .global{padding: 3.2rem 0 2.8rem;}
    #header .hd_sc{position: relative; gap: 0;}
}
@media screen and (max-width: 640px){
    #header .hd_sc .l .input_box{gap: 0.8rem;}
    #header .hd_sc .l .input_box .select select{width: 14rem; height: 5.2rem; padding: 0 4rem 0 1.6rem; background-position: right 1.4rem center;}
    #header .hd_sc .l .input_box .text_input{width: calc(100% - 14rem - 0.8rem);}
    #header .hd_sc .l .input_box .text_input input{height: 5.2rem; padding: 0 5rem 0 1.6rem;}
    #header .nav_box .al_box .tab_link >ul >li{width: calc(100% / 3);}
    #header .nav_box .al_box .tab_link >ul >li:nth-child(4):before{display: block;}
    #header .nav_box .al_box .tab_link >ul >li:nth-child(4n-3):after{display: block;}
    #header .nav_box .al_box .tab_link >ul >li:nth-child(3n-2):after{display: none;}
}

/*-------------------------------------------------------------------
    container
-------------------------------------------------------------------*/
#container{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 4.5rem; position: relative; width: 100%; max-width: calc(1600px + 4rem); margin: 4rem auto 0; padding: 0 2rem;}
#container #contents{width: 100%; margin-bottom: 16.4rem; font-size: 1.6rem;}
#container #contents .heads{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 3rem;}
#container #contents .heads .result_counter{order: 1; color: #222; font-size: 2.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.024rem;}
#container #contents .heads .result_counter strong,
#container #contents .heads .result_counter span{color: #214687;}

@media screen and (max-width: 1200px){
    #container #contents{width: 100%;}
}
@media screen and (max-width: 1024px){
    #container{top: auto !important; margin: 4rem auto 0;}
    #container #contents{margin-bottom: 8rem;}
    #container #contents .heads{margin-bottom: 2rem;}
}
@media screen and (max-width: 840px){
    #container{top: auto !important;}
}
@media screen and (max-width: 640px){
    #container{margin: 3rem auto 0;}
    #container #contents{margin-bottom: 7rem;}

}

/*-------------------------------------------------------------------
    top
-------------------------------------------------------------------*/
#btntop{display: block; position: fixed; bottom: 2rem; right: 2rem; z-index: 2; width: 6rem; height: 6rem; border: 1px solid #0073B1; background: #0073B1; text-indent: -9999px; box-shadow: 0 0.4rem 2rem 0 #CCE3FF; transition: background 0.2s linear;}
#btntop:hover{background: #fff;}
#btntop:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../images/mecsearch/common/btntop_img01.svg) no-repeat center center / 100% auto; transition: all 0.2s linear;}
#btntop:hover:before{background-image: url(../../images/mecsearch/common/btntop_img02.svg);}
#btntop.on{
    -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
    -webkit-transform: translateY(50%); transform: translateY(50%);
}


/*-------------------------------------------------------------------
    footer
-------------------------------------------------------------------*/
#footer {position: relative; padding:2.4rem 0 8rem; background-color: #fff; border-top: 1px solid #ddd;}
#footer .inner{width: 100%; max-width: calc(1600px + 4rem); margin: 0 auto; padding: 0 2rem;}
#footer .foot_logo:before{content: ""; display: block; width:16.8em; height:4.3em; background: url(../../images/mecsearch/common/logo_footer.svg) no-repeat center center / 100% auto;filter:grayscale(1);opacity:.3}
#footer .foot_top{position:relative;display:flex;align-items:center;gap:0 8.6rem;width:100%}
#footer .foot_top .tit_wrap{padding-right:11.2rem}
#footer .foot_top .tit{font-size:1.6rem;font-weight:700;color:#151515}
#footer .foot_top .foot_banner{width:calc(100% - 25.4rem);line-height:0}
#footer .foot_top .foot_banner .swiper-slide a{display:block;text-align:center}
#footer .foot_top .foot_banner .swiper-slide a img{display:inline-block;}
#footer .foot_top .foot_banner .controls{display:flex;gap:0 .8rem;position:absolute;left:8rem;top:50%;transform:translateY(-50%)}
#footer .foot_top .foot_banner .controls .btn{position:relative;width:4rem;height:4rem;border:1px solid #ddd;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;transition:all .3s}
#footer .foot_top .foot_banner .controls .btn:hover{border-color:#0073B1}
#footer .foot_top .foot_banner .controls .prev{background-image:url(../../images/mecsearch/common/icon_footbanner_prev.svg)}
#footer .foot_top .foot_banner .controls .next{background-image:url(../../images/mecsearch/common/icon_footbanner_next.svg)}
#footer .foot_bottom{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: stretch; gap:0 8.6rem;margin-top:2rem;padding-top:2rem;border-top:1px solid #eee;font-size: 10px;}
#footer .inner .inner_l{display: block;}
#footer .inner .inner_l .menu_link{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem 3.2rem;}
#footer .inner .inner_l .menu_link li a{display: block; font-size: 1.9rem; color: #353535; font-weight: 600;}
#footer .inner .inner_l .menu_link li a:hover{text-decoration: underline; text-underline-position: under;}
#footer .inner .inner_l .menu_link li:first-child a{color: #0073B1;}
#footer .inner .inner_l .info{display:flex;flex-wrap:wrap;}
#footer .inner .inner_l .info li{position:relative;margin-right:.8rem;padding-right:.9rem;color: #555; font-size: 1.6rem; font-weight: 500;}
#footer .inner .inner_l .info li::before{content:"";position:absolute;right:0;top:.5rem;width:1px;height:1.5rem;background:#ccc}
#footer .inner .inner_l .info li:last-child{margin-right:0;padding-right:0}
#footer .inner .inner_l .info li:last-child::before{display:none}
#footer .inner .inner_l .copy{margin-top:1rem;line-height:1.8rem;font-size: 1.5rem; font-weight: 400; color: #919191;}
#footer .inner .inner_r{margin-left: auto;}
#footer .inner .inner_r .family_site{position: relative; width: 30rem;}
#footer .inner .inner_r .family_site >a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; position: relative; width: 100%; padding: 1.6rem 5rem 1.6rem 2rem; font-size: 1.6rem; font-weight: 500; color: #000; background-color: #F5F7FC; border-radius: 0.8rem;}
#footer .inner .inner_r .family_site >a:after{content: ""; display: block; position: absolute; top: 50%; right: 2rem; width: 1.6rem; height: 1.6rem; background: url(../../images/mecsearch/common/footer_img02.svg) no-repeat center center / 100% auto; transform: translateY(-50%) rotate(0); transition: all 0.2s linear;}
#footer .inner .inner_r .family_site >a.active:after{transform: translateY(-50%) rotate(-180deg);}
#footer .inner .inner_r .family_site >ul{
    opacity: 0; visibility: hidden; overflow-y: auto; position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: auto; max-height: 16rem; padding: 1rem 0; background-color: #fff; border: 1px solid #000;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#footer .inner .inner_r .family_site >a.active + ul{opacity: 1; visibility: visible;}
#footer .inner .inner_r .family_site >ul >li:not(:first-child){margin-top: 0.4rem;}
#footer .inner .inner_r .family_site >ul >li >a{display: inline-block;; font-size: 1.5rem; padding: 0.5rem 2rem;color:#151515}
#footer .inner .inner_r .family_site >ul >li >a:hover{text-decoration: underline; text-underline-position: under;}
#footer .inner .inner_r .sns{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 0.8rem;}
#footer .inner .inner_r .sns li{}
#footer .inner .inner_r .sns li a{display: block; position: relative; width: 4rem; height: 4rem; text-indent: -9999px; background-color: #EEEFF3; border-radius: 50%; transition: all 0.2s linear;}
#footer .inner .inner_r .sns li a:before{content: ""; display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; transition: all 0.2s linear;}
#footer .inner .inner_r .sns li a:hover{background-color: #A9B3B9;}
#footer .inner .inner_r .sns li a:hover:before{filter: brightness(1000%);}
#footer .inner .inner_r .sns li a[data-icon="1"]:before{background-image: url(../../images/mecsearch/common/footer_img03.svg);}
#footer .inner .inner_r .sns li a[data-icon="2"]:before{background-image: url(../../images/mecsearch/common/footer_img04.svg);}
#footer .inner .inner_r .sns li a[data-icon="3"]:before{background-image: url(../../images/mecsearch/common/footer_img05.svg);}
#footer .inner .inner_r .sns li a[data-icon="4"]:before{background-image: url(../../images/mecsearch/common/footer_img06.svg);}
#footer .inner .inner_r .sns li a[data-icon="5"]:before{background-image: url(../../images/mecsearch/common/footer_img07.svg);}
#footer .inner .inner_r .sns li a[data-icon="6"]:before{background-image: url(../../images/mecsearch/common/footer_img08.svg);}

@media screen and (max-width: 1440px){
    #footer .inner{gap:0 3rem; font-size: 9px;}
    #footer .foot_top,
    #footer .foot_bottom{gap:0 4rem}
}
@media screen and (max-width: 1200px){
    #footer{top: auto !important; padding-bottom:4rem;}
    #footer .foot_top .foot_banner{width:calc(100% - 21.8rem)}
    #footer .inner .inner_r{width:100%;margin-left:0}
    #footer .inner .inner_r .sns{justify-content:flex-start;margin-top:2rem}
}
@media screen and (max-width: 1024px){
    #btntop{width: 5rem; height: 5rem;}
    #footer .inner .inner_r .family_site{width: 28rem;}
    #footer .inner .inner_r .sns li a{width: 3.8rem; height: 3.8rem;}
}
@media screen and (max-width: 840px){
    #footer{padding-top:1rem}
    #footer .inner .inner_l{width: 100%;}
    #footer .foot_top, #footer .foot_bottom{gap:2rem 0}
    #footer .foot_bottom{margin-top:1rem;padding-top:2rem}
    #footer .inner .inner_r{width: 100%;}
    #footer .inner .inner_r .family_site{position: absolute; top: 4rem; right: 2rem;}
    #footer .inner .inner_r .sns{justify-content: flex-start; margin-top: 0;}
}
@media screen and (max-width: 640px){
    #btntop{width: 4.5rem; height: 4.5rem;}
    #footer .foot_top{gap:0 3rem}
    #footer .inner{font-size: 5px;}
    #footer .inner .inner_l .menu_link{gap: 0.6rem 2rem;}
    #footer .inner .inner_r .family_site{top: 4rem; width: 24rem;}
    #footer .inner .inner_r .sns li a{width: 3.6rem; height: 3.6rem;}
}
@media screen and (max-width:540px){
    #footer .inner .inner_l .info{flex-direction:column}
    #footer .inner .inner_l .info li{margin-right:0;padding-right:0}
    #footer .inner .inner_l .info li::before{display:none}
}
@media screen and (max-width: 420px){
    #header #logo{font-size: 6.5px;}
    #footer .inner{font-size: 4px;}
    #footer .inner .inner_r .family_site{top: 3.4rem; width: 20rem;}
}