@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; font-size:1rem; }
.inner {	width:1480px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1479px) {	
    .inner {width:94%;}
}

/* header */
#header{width: 100%; position: fixed; z-index: 1000; top: 0; left: 0; background-color: #fff; height: 100px; display: flex; justify-content: space-between; align-items: center;}
#header #logo{padding-left: 60px;}
#header #logo a{width: 501px; height: 54px; display: block; background: url(/images/common/logo.webp) no-repeat center center / cover;}
#header .r_menu{display: flex; align-items: center; gap:60px;}
#header .r_menu .pcGnb{}
#header .r_menu .pcGnb .gnb_dp1_wrap{display: flex; gap:70px;}
#header .r_menu .pcGnb .gnb_dp1{position: relative;}
#header .r_menu .pcGnb .gnb_dp1 > div > span > a{font-size: 18px; font-weight: 600; color:#000000; display: block; line-height: 100px;}
#header .r_menu .pcGnb .gnb_dp1 .smenu{display: none; position: absolute; background-color: #fff; width: max-content; padding: 30px 40px; text-align: center; left: 50%; transform: translateX(-50%); border-top: 1px solid #dbdbdb; box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
#header .r_menu .pcGnb .gnb_dp1 .smenu::after{content: ''; height: 2px; width: 50%; background: var(--color1); top: 0px; left: 50%; transform: translateX(-50%); display: block; position: absolute;}
#header .r_menu .pcGnb .gnb_dp1 .smenu > li + li{margin-top: 20px;}
#header .r_menu .pcGnb .gnb_dp1 .smenu > li > a{font-size: 18px; font-weight: 600; color:#444444; white-space: nowrap;}
#header .r_menu .pcGnb .gnb_dp1:hover > div > span > a{color: var(--color1);}
#header .r_menu .pcGnb .gnb_dp1:hover .smenu{display: block;}
#header .r_menu .pcGnb .gnb_dp1 .smenu > li:hover > a{color:var(--color1);}
#header .r_menu .call{text-align: center; background-color: var(--color1); height: 100px;}
#header .r_menu .call a{color:#fff; padding: 0 35px; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%;}
#header .r_menu .call a p{font-size: 15px;}
#header .r_menu .call a p img{}
#header .r_menu .call a h3{font-size: 22px;}
.menuToggle{display: none;}
.moGnb{display: none;}

@media all and (max-width:1480px) {
    #header #logo{padding-left: 3%;}
    #header #logo a{width: 258px; height: 54px; background: url(/images/common/logo.gif) no-repeat left center / contain;}
}
@media all and (max-width:1280px) {
    #header{height: 80px;}
    #header #logo a{height: 46px;}
    #header .r_menu{gap:40px;}
    #header .r_menu .pcGnb .gnb_dp1_wrap{gap:40px;}
    #header .r_menu .pcGnb .gnb_dp1 > div > span > a{line-height: 80px;}
    #header .r_menu .call{height: 80px;}
}
@media all and (max-width:1024px) {
    #header{height: 60px;}
    #header #logo a{height: 42px;}
    #header .r_menu{display: none;}
    
    .menuToggle{display: flex; flex-direction: column; gap:6px; cursor: pointer; padding-right: 3%;}
    .menuToggle span{display: block; width: 30px; height: 2px; background-color: #000; transition: .3s;}
    .menuToggle.on .t{transform: translateY(8px) rotate(45deg);}
    .menuToggle.on .m{opacity: 0;}
    .menuToggle.on .b{transform: translateY(-8px) rotate(-45deg);}

    .mo_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; display: none;}
    .mo_bg.on{display: block;}

    .moGnb{position: fixed; top: 60px; right: -100%; width: 100%; height: calc(100vh - 60px); background-color: #fff; z-index: 999; transition: .4s; overflow-y: auto; padding: 40px 30px; display: block;}
    .moGnb.on{right: 0;}
    .moGnb .gnb_dp1_wrap{}
    .moGnb .gnb_dp1{border-bottom: 1px solid #eee;}
    .moGnb .gnb_dp1 > div > span > a{display: block; font-size: 18px; font-weight: 600; padding: 20px 0; color:#000; display: flex; justify-content: space-between; align-items: center;}
    .moGnb .gnb_dp1 > div > span > a::after{content: ''; display: block; width: 8px; height: 8px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; transform: rotate(-45deg); transition: .3s;}
    .moGnb .gnb_dp1.on > div > span > a::after{transform: rotate(45deg); border-color: var(--color1);}
    .moGnb .smenu{display: none; background-color: #f9f9f9; padding: 15px 20px;}
    .moGnb .smenu > li{}
    .moGnb .smenu > li + li{margin-top: 15px;}
    .moGnb .smenu > li > a{font-size: 16px; color:#666; display: block;}
}
@media all and (max-width:768px) {
    
}
@media all and (max-width:500px) {
    
}


/* footer */
#footer{background-color: #111; padding: 80px 0 130px;}
#footer .inner{}
#footer .inner .top{display: flex; justify-content: space-between; align-items: flex-end;}
#footer .inner .top .l_cont{display: flex; gap:60px;}
#footer .inner .top .l_cont .f_logo{}
#footer .inner .top .l_cont .f_logo img{height: 40px;}
#footer .inner .top .l_cont .info{}
#footer .inner .top .l_cont .info p{display: inline-block; font-size: 16px; color:#fff; margin-right: 25px; line-height: 2.1em;}
#footer .inner .top .l_cont .info p b{margin-right: 10px; font-weight: 600;}
#footer .inner .top .l_cont .info p span{opacity: .7;}
#footer .inner .top .r_cont{}
#footer .inner .top .r_cont ul{text-align: right;}
#footer .inner .top .r_cont ul li{}
#footer .inner .top .r_cont ul li + li{margin-top: 10px;}
#footer .inner .top .r_cont ul li a{font-size: 16px; color:#fff;}
#footer .inner .top .r_cont ul li a b{}
#footer .inner .bottom{margin-top: 50px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 16px; color:#fff; opacity: 0.3; display: flex; align-items: center; justify-content: space-between; font-weight: 300;}
#footer .inner .bottom .copy{}
#footer .inner .bottom .design{}
#footer .inner .bottom .design a{color:#fff;}


@media all and (max-width:1280px) {
    #footer{padding: 70px 0 120px;}
    #footer .inner .top .l_cont{gap:45px;}
    #footer .inner .top .l_cont .f_logo img{height: 36px; object-fit: contain;}
    #footer .inner .top .l_cont .info p{font-size: 15px; line-height: 2em;}
}
@media all and (max-width:1024px) {
    #footer{padding: 65px 0 110px;}
    #footer .inner .top{flex-direction: column-reverse; gap:40px}
    #footer .inner .top .l_cont{width: 100%; flex-direction: column; gap:30px;}
    #footer .inner .top .l_cont .f_logo img{height: 33px; }
    #footer .inner .top .r_cont{width: 100%;}
    #footer .inner .top .r_cont ul{display: flex; justify-content: flex-start; text-align: center;}
    #footer .inner .top .r_cont ul li + li{margin-top: 0; margin-left: 10px;}
    #footer .inner .bottom{margin-top: 35px; font-size: 15px; flex-direction: column; align-items: flex-start;}
    #footer .inner .bottom .design{margin-top: 10px;}
}
@media all and (max-width:768px) {
    #footer{padding: 60px 0 100px;}
    #footer .inner .top{gap:30px;}
    #footer .inner .top .r_cont ul li a{font-size: 15px;}
    #footer .inner .top .l_cont .f_logo img{height: 30px;}
}
@media all and (max-width:500px) {
    #footer{padding: 50px 0 90px;}
    #footer .inner .top .l_cont .f_logo img{height: 27px;}
    #footer .inner .bottom{font-size: 14px;}
}


.quick{position: fixed; bottom: 40px; right: 30px; z-index: 9;}
.quick .list{}
.quick .list .call{}
.quick .list > li{position: relative;}
.quick .list > li + li{margin-top: 10px;}
.quick .list > li .txt{position: absolute; top: 50%; transform: translateY(-50%); left: -145px; font-size: 14px; font-weight: 500; color:#000; background-color: #fff; padding: 10px; border-radius: 5px;}
.quick .list > li .txt span{color:var(--color1); font-weight: 700;}
.quick .list > li .icon{width: 60px; height: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center;}
.quick .list > li.call .icon{background: var(--color1);}
.quick .list > li.go_top .icon{background-color: #000;}
.quick .list > li .icon img{}
.quick .list > li a{display: block;}

@media all and (max-width:768px) {
    .quick{bottom: 3%; right: 3%;}
    .quick .list > li + li{margin-top: 5px;}
    .quick .list > li .txt{display: none;}
    .quick .list > li .icon{width: 52px; height: 52px;}
    .quick .list > li .icon img{width: 17px;}
}