@charset "utf-8";

/*공통바디부분 시작*/
body * {box-sizing: border-box; font-family: "Noto Sans KR", sans-serif;}
#wrap { width:1000px; margin:0 auto; _text-align:left }

/* header top banner */
#top-banner {position: relative; top: 0; left: 0; width: 100%; height: 110px; overflow: hidden;}
#mo-top-banner {display: none;}
#top-banner.fixed, #mo-top-banner.fixed {position: fixed; top: 0; left: 0; width: 100%; z-index: 99; height: 110px;}

/* #top-banner .swiper-slide {width: 100% !important;} */
#top-banner .b-slide1 {background-color: #F8F8F8; cursor: pointer;}
#top-banner .b-slide2 {background-color: #326AEA; cursor: pointer;}
/* #top-banner i {display: flex; align-items: center; justify-content: center; width: 100%;} */

#top-banner i img {display: block; top: 0; height: 110px; position: relative; left: 50%; transform: translateX(-50%); width: auto !important;}
#top-banner .t-swiper-pagination {position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 999; width: fit-content;}

#top-banner .banner-close a {position: absolute;top: 50%; right: 24px; width: 26px; height: 26px; z-index: 999; transform: translateY(-50%); display: block;}
#top-banner .banner-close a::after {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background-color: #333; transform: translate(-50%, -50%) rotate(-45deg);}
#top-banner .banner-close a::before {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 2px; background-color: #333; transform: translate(-50%, -50%) rotate(45deg);}

#header {position: fixed; top: 0; left: 0;  max-width: 1280px; width:100%; height:95px; padding: 0 40px;}
#header.fixed {position: fixed; top: 110px; left: 0; width: 100%; z-index: 999; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05); background-color: #fff;}
#header > .wrapper > #logoMobile { display:none; }
#header > .wrapper > .homeArea { display:none; }
#header > .wrapper > #topBtnMobile { display:none; }

#header > .wrapper { max-width:1440px; margin:0 auto; position:relative; height: 100%;}
#header > .wrapper > #logo { position:absolute; top:50%; left:-20px; transform: translateY(-50%); }
#header > .wrapper > .tel { position:absolute; top:0; left:250px; }
#header > .wrapper > #topBtn { position:absolute; overflow:hidden; right:0px; padding:0 5px; top:10px; height:21px; display: none;}
#header > .wrapper > #topBtn li { float:left; margin-right:2px; margin-top:4px; border-left:1px #CCC solid; line-height:9px; padding:0 7px; }
#header > .wrapper > #topBtn li:first-child { border-left:0; }
#header > .wrapper > #topBtn li a {  font-size:12px; line-height:9px; color:#313131; }

#header > .wrapper > #menu > .homeArea { display:none; }
#header > .wrapper > #menu { position:absolute; top:50%; z-index:999; width:auto; right:240px; transform: translateY(-50%); }
#header > .wrapper > #menu .all { position:absolute; top:40px; left:0px; visibility:hidden; z-index:999; }
#header .contact {position: absolute; top: 50%; right: 0px; transform: translateY(-50%);}
#header .contact a {display: flex; align-items: center; gap: 6px; padding: 8px 24px; border: 1.5px solid #40aede; border-radius: 6px;}
#header .contact a i {display: flex; align-items: center; width: 24px; height: 24px;}
#header .contact a i img {display: block; width: 100%;}
#header .contact a strong {font-size: 22px; font-weight: 600; color: #40aede;}

#header > .wrapper > #mo-menu {display: none;}

#sendSMS {display: none !important;}


/* remove the list style */
#nav { margin:0; padding:0; list-style:none; }
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav > li { float:left; display:block; position:relative; z-index:500; margin:0 1px; }
/* this is the parent menu */
#nav li a { display:block; padding:10px 16px 0 16px; font-weight:700; height:46px; text-decoration:none; font-weight:bold; font-size:15px; color:#333333; text-align:center; letter-spacing:-1px; }
#nav li a:hover { color:#37aadd; }
/* you can make a different style for default selected value */
#nav a.selected { color:#37aadd; }
/* submenu, it's hidden by default */
#nav ul { position:absolute; left:0; display:none; margin:0 0 0 20px; padding:0; list-style:none; }
#nav ul > li { width:130px; border-top:1px solid #fff; background-color:#f4faff; }
#nav ul li > a { display:block; padding:0 0 0 10px; ; width:128px; line-height:35px; height:35px; text-decoration:none; color:#333; text-align:left; font-size:12px; }
#nav ul li > a:hover { color:#25425d; }
#container {display:inline-block;  width: 100%; overflow:hidden; margin: 90px auto 0;  }
#container:after { display:block; clear:both; content:'' }
#content {max-width: 1000px; margin: 0 auto; padding: 0 40px;}
#footer { width:100%; background:#333; border-top:0px #333 solid; margin-top:50px; padding: 24px 0 40px; }
#footer >.wrapper { max-width: 1440px; margin:0 auto ; position:relative; padding: 0 40px; }
#footer >.wrapper >.address { font-family: '돋움'; font-size:12px; line-height:2; color:#e8e8e8; }
#footer >.wrapper .copy {display: block; width: 100%; margin-top: 40px;}
#footer >.wrapper >.logo { display: flex; align-items: center; width: 160px; }
#footer >.wrapper >.logo img {display: block; width: 100%;} 
#footer .telMobile { display:none; }


/*------------ SMS--------------*/
#sendSMS { width:230px; border-radius:5px; overflow:hidden; position:fixed; bottom:10px; left:10px; z-index:10; box-shadow:3px 3px 0 rgba(0, 0, 0, 0.2); }
#sendSMS * {box-sizing: initial;}
#sendSMS .title {background:#50acd7; text-align:center; padding-top:10px; height:32px; font-weight:bold; }
#sendSMS .contents { background:#fff; border:1px #dee3f1 solid; border-top:none; padding:15px 13px; }
#sendSMS .contents textarea[name=messagebox] {background:#f8fafb; border:1px #dee3f1 solid; width:170px; height:52px; padding:15px;font-family: "돋움€"; font-size:12px; color:#333; line-height:19px;overflow:hidden;border-radius:5px;}
#sendSMS .inputText .textNum {font-family: "돋움€"; font-size:11px; color:#333; text-align:right; line-height:13px; margin-top:3px;}

#sendSMS .inputNumber {overflow:hidden; margin-top:7px;}
#sendSMS .inputNumber .telNum { float:left;font-family: "돋움€"; font-size:12px; color:#333; line-height:27px;}
#sendSMS .inputNumber input { float:left; width:36px; padding:5px; height:13px;background:#f8fafb; border:1px #dee3f1 solid;font-family: "돋움€" !important; font-size:12px; color:#333; border-radius:3px; margin-left:4px;}
#sendSMS .checkPrivacy {margin-top:5px; display:block;}
#sendSMS input[name=btnSMS] {background:#3b3b3b; border:1px #3b3b3b solid; width:200px; height:35px; padding:5px;font-family: "맑은 고딕€"; font-size:12px; color:#fff; overflow:hidden;border-radius:3px; margin-top:13px;}



@media all and (max-width:950px) {
    #header{padding: 0 20px;}
    #header > .wrapper > #logo img {height: 42px;}
    #header > .wrapper > #menu {width: max-content; left: 180px;}
    #header .contact a i{width: 16px; height: 16px;}
    #header .contact a strong{font-size: 16px;}

}

@media all and (max-width:760px) {
    #header > .wrapper > #logo img {height: 38px;}

    #header .contact{display: none;}
    #header > .wrapper > #menu {left: auto; right: 0; transform: translateY(-50%);}
}

   

 @media all and (max-width:640px) {
#sendSMS {display:none;}	
#mo-top-banner {display: block; position: relative;}
#top-banner.pc {display: none;}

#mo-top-banner.fixed {position: fixed; top: 0; left: 0; width: 100%; z-index: 99; height: 100px;}
#mo-top-banner .b-slide1 {background-color: #F8F8F8;}
#mo-top-banner .b-slide2 {background-color: #326AEA;}

#mo-top-banner .swiper-slide {height: fit-content !important;}

#mo-top-banner i img {display: block; width: 100%; position: relative; left: 50%; transform: translateX(-50%);}
#mo-top-banner .t-swiper-pagination {position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 999; width: fit-content;}

#header { height: 55px; padding:0px 0px 0px 0px; display: flex; align-items: center; background-color: #fff; }
#header.fixed {top: 20.78vw;}
#header > .wrapper { width:100%; margin:0 auto; position: inherit; display: flex; align-items: center; justify-content: space-between; height: 100%;}
#header > .wrapper > #logo { display:none; }
#header > .wrapper > .tel { display:none; }
#header > .wrapper > #logoMobile { display:block; float:left; margin-left:10px; line-height:0; display: flex; align-items: center; justify-content: center; }
#header > .wrapper > #logoMobile a{display: flex; align-items: center; justify-content: flex-start; width: 140px;}
#header > .wrapper > #logoMobile img { display: block; width: 100%; margin-left: -20px;}
#header > .wrapper > #topBtnMobile { display:block; float:right; margin-right:10px; display: flex; align-content: center; justify-content: center; width: 22px;  height: 22px;}
#header > .wrapper > #topBtnMobile img { display: block; width: 100%; }
#header > .wrapper > #menu { display:none !important;position:absolute; top:0; left:0; z-index:999; width:200px;  background:#252525;}
#header .contact {display: none;}
#nav > li { float:none; display:block;  position:relative; z-index:500; margin:0; width:200px;}
#nav li a { display:block; padding:0 0px 0 25px; font-weight:bold; height:40px; line-height:40px; text-decoration:none; font-family: sans-serif;;  font-size:1em; color:#f6f6f6; text-align:left; background-repeat:no-repeat; background-image:url(../images/icon_plus.png) ; background-size:8px 8px; background-position:10px 15px; border-bottom:1px #444444 solid; }
#nav li a:hover { color:#fff; }
#nav li a + ul {position: relative; width: 100%; margin: 0;}
#nav li a + ul li {width: 100%;}
#nav li a + ul li a {width: 100%; box-sizing: border-box; padding-left: 24px; background: none;}


#header > .wrapper > #mo-menu {display: block; position: relative; top: 0; left: 0; width: 100%; height: 100vh; display: none;}
#header > .wrapper > #mo-menu .inner {display: block; position: fixed; top: 0; right: 0; width: 60%; height: 100vh; padding: 60px 0; box-sizing: border-box; background-color: #40aede;z-index: 999;}
#header > .wrapper > #mo-menu .close-btn{position: absolute; top: 24px; right: 24px; height: 20px; width: 20px; }
#header > .wrapper > #mo-menu .close-btn::after, #header > .wrapper > #mo-menu .close-btn::before{content:''; position: absolute;
top: 50%; left: 50%;transform: translate(-50%, -50%); width: 20px; height: 2px; background-color: #fff;}
#header > .wrapper > #mo-menu .close-btn::after {transform: translate(-50%, -50%) rotate(-45deg);}
#header > .wrapper > #mo-menu .close-btn::before {transform: translate(-50%, -50%) rotate(45deg);}


#header > .wrapper > #mo-menu .dim {position: fixed; top: 0; left: 0;  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2;}

#header > .wrapper > #mo-menu .inner > ul > li > a {font-size: 14px; font-weight: bold; color: #fff; display: block; width: 100%; padding-left: 26px; margin: 14px 0; padding-right: 26px; box-sizing: border-box;}
#header > .wrapper > #mo-menu .inner > ul > li:nth-child(1) a, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2) a {
    position: relative;
}
#header > .wrapper > #mo-menu .inner > ul > li:nth-child(1) > a::after, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2) > a::after, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(1) > a::before, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2) > a::before{content: '';position: absolute;top:50%; right: 24px; transform: translateY(-50%); width: 10px; height: 2px; background-color: #fff;}
#header > .wrapper > #mo-menu .inner > ul > li:nth-child(1) > a::before, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2) > a::before {transform: translateY(-50%) rotate(90deg); transition: 0.5s;}

#header > .wrapper > #mo-menu .sub-nav { width: 100%; display: block; background-color: rgba(255,255,255,0.8); height: 100%; display: none;}
#header > .wrapper > #mo-menu .sub-nav li {display: block;width: 100%;height: 100%;}
#header > .wrapper > #mo-menu .sub-nav li:not(:last-child) a{border-bottom: 1px solid #fafafa;}
#header > .wrapper > #mo-menu .sub-nav li a {font-size: 12px; padding: 8px 26px; display: block;}
#header > .wrapper > #mo-menu .inner > ul > li:nth-child(1).active > a::before, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2).active > a::before{transform: translateY(-50%) rotate(0deg);}
#header > .wrapper > #mo-menu .inner > ul > li:nth-child(1).active > ul, #header > .wrapper > #mo-menu .inner > ul > li:nth-child(2).active > ul {display: block;}

#header > .wrapper > #menu > .homeArea { display:block; height:50px;background:#111;}
#header > .wrapper > #menu > .homeArea > .btnHome{ position:absolute; top:15px; left:15px; }
#header > .wrapper > #menu > .homeArea > #mobileNavClose{ position:absolute; top:12px; right:15px; }
#header > .wrapper > #topBtn { display:none; }
#footer .telMobile { display:block; text-align:center; background:#FFF; line-height:0; display: none !important;}

#footer >.wrapper { width:100%; margin:0 auto; position:relative; padding: 0 24px;}
#footer >.wrapper >.address { float: none; margin :10px 0; text-align:center; font-family:sans-serif; font-size:0.8em; line-height:1.3em; color:#eeeeee; }
#footer >.wrapper >.logo { display:none; }
#footer >.wrapper .copy{margin-top: 24px;}

#container {margin: 60px auto 0; }
#content {padding: 0 12px;}
}