/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */ /*---------- Wrapper & Basic Layout & Boxed Layout ----------*/ * { position:relative; margin:0; padding:0; font-family: 'NanumGothic', 'Sans-serif'; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .wrapper { top:0; bottom:0; left:0; right:0; overflow:hidden; display:block; background:#FFF; } .wrapper.indexPage { padding-top:0; } .mainContainer { float:none; clear:both; width:100%; max-width:1440px; height:auto; margin:0 auto; padding:0 20px; text-align:center; display:table; } #contentBody { float:none; clear:both; width:100%; height:auto; padding-top:80px; display:table; } .contentsBox { float:left; clear:both; width:100%; height:auto; display:table; } #InqueryBtn { position:fixed; bottom:50px; left:20px; width:auto; height:46px; margin:0; padding:0 30px; font-family: 'NanumGothic', 'Sans-serif'; font-size:16px; font-weight:400; color:#FFF; line-height:46px; display:block; z-index:990; background:#003f51; border-radius:23px !important; box-shadow:2px 2px 5px rgba(0,0,0,0.3); } #InqueryBtn:hover { color:#f6ffde; } .page-title-wrap { position:relative; width:100%; margin-bottom:20px; padding:30px 20px 20px !important; border-bottom:1px solid #EEE; } .page-title-wrap h2 { float:left; margin:0;padding:0;font-size:22px;color:#454545;font-weight:bold} .page-title-wrap .breadcrumb {margin:3px 0 0;padding:0;background:none;font-size:12px;color:#656565} .page-title-wrap .breadcrumb li {color:#656565} .page-title-wrap .breadcrumb li a {color:#656565} .tab-scroll-category #tab-category .category-list span a { color: #444 !important; } .tab-scroll-category #tab-category .category-list span.active a { color: #000 !important; } @media (min-width:992px) { #InqueryBtn { display:none; } } @media (max-width:767px){ /* 모바일 스타일*/ .mainContainer { padding:0 10px; text-align:center; display:table; } #contentBody { padding-top:60px; } #InqueryBtn { display:none; } .page-title-wrap { position:relative; width:100%; margin-bottom:20px; padding:25px 20px 15px !important; border-bottom:1px solid #EEE; } .page-title-wrap h2 { font-size:18px; } } /*---------- Header ----------*/ #header { position:fixed; top:0; left:0; clear:both; width:100%; height:80px; margin:0; padding:15px 0; display:block; background:#FFF; box-shadow:0 1px 3px rgba(0,0,0,0.2); z-index:990; } #header .header_logo { float:left; width:auto; height:50px; display:block; } #header .header_logo img { width:auto; height:100%; margin:0 auto; display:block; } #header .mobile_list { float:right; width:40px; height:40px; padding-top:5px; text-align:center; line-height:35px; font-size:32px; cursor:pointer; display:none; } ul#header_nav { float:right; width:auto; height:40px; padding:5px; display:block; } ul#header_nav li { float:left; width:auto; height:40px; margin:0; padding:10px; opacity:1; text-align:center; font-size:16px; line-height:20px; font-weight:600; color:#666; display:inline-block; } ul#header_nav li:hover { color:#b99c4b; } ul#header_nav li.active, ul#header_nav ul.dropdown-menu > li.active > a { color:#000; font-weight:600 !important; } ul#header_nav li a { color:inherit; } ul#header_nav ul.dropdown-menu { left:50%; padding:5px 0 15px; transform:translateX(-45%); -webkit-transform:translateX(-45%); -ms-transform:translateX(-45%); } ul#header_nav ul.dropdown-menu li , ul#header_nav ul.dropdown-menu li a { width:100%; display:inline-block; } ul#header_nav ul.dropdown-menu li a { background:transparent !important; } #mobileMenu { position:fixed; top:0; left:0; clear:both; width:100%; height:100%; display:none; z-index:980; } #mobileMenu.visible { display:block; } #mobileMenu .mNav { position:absolute; top:0; right:0; width:240px; height:100%; margin:0; padding:60px 0 0; display:block; background:#FFF; box-shadow:0 1px 3px rgba(0,0,0,0.2); z-index:+1; } ul#mNavList { float:left; width:100%; height:auto; display:block; } ul#mNavList > li { float:left; width:100%; height:auto; display:block; border-bottom:1px solid #CCC; } ul#mNavList > li > a { float:left; width:100%; height:auto; text-align:left; text-indent:20px; font-size:16px; line-height:55px; font-weight:400; color:#666; display:inline-block; } ul#mNavList ul.submenu { float:left; width:100%; height:auto; padding:0; display:block; } ul#mNavList ul.submenu > li { float:left; width:100%; height:auto; margin:0; padding:0; display:block; border-top:1px solid #EEE; } ul#mNavList ul.submenu > li > a { float:left; width:100%; height:auto; text-align:left; text-indent:30px; font-size:14px; line-height:45px; font-weight:400; color:#666; display:inline-block; } #mobileMenu .blackBG { width:100%; height:100%; margin:0; padding:0; display:block; background:rgba(0,0,0,0.7); } @media (max-width:991px){ } @media (max-width:767px){ #header { height:60px; padding:10px 0; } #header .header_logo { height:40px; } #header .mobile_list { display:block; } ul#header_nav { display:none; } } /*---------- Footer ----------*/ #footer { clear:both; width:100%; height:auto; font-size:16px; display:table; background:#ecebe7; } #footer .mainContainer { padding:20px; } #footer .xs-guide { clear:both; width:100%; height:auto; margin-bottom:20px; text-align:center; display:none; border-bottom:1px solid #CCC; } #footer .footLogo { float:left; width:250px; height:160px; padding:15px; display:block; } #footer .footLogo img { width:auto; height:100%; margin:0 auto; display:block; } #footer .footInfo { float:left; width:calc(100% - 260px); height:auto; display:table; } #footer ul.siteGuide { clear:both; float:right; width:auto; height:auto; margin:0 auto 15px; padding:10px 5px; display:block; border-bottom:1px solid #CCC; } #footer ul.siteGuide li { float:left; width:auto; height:20px; padding:0 20px; font-size:1.0em; line-height:20px; font-weight:400; color:#666; display:inline-block; border-right:1px solid #CCC; } #footer ul.siteGuide li:last-child { border-right:none; } #footer ul.siteGuide li a { color:inherit; } #footer .footInfo .footTxt { clear:both; float:right; width:100%; height:auto; padding:10px; text-align:right; font-size:1.0em; line-height:1.8em; color:#666; display:inline-block; } #footer .footInfo .footTxt span { word-break: keep-all; white-space: nowrap; } #footer .footInfo .footTxt span.info-divider { padding:0 5px; } #footer .footInfo .footTxt a { color:#777; } #footer .copyright { clear:both; width:100%; height:auto; text-align:center; font-size:13px; color:#666; line-height:40px; display:block; background:#cdcbc5; } #footer .copyright a { color:inherit; font-weight:inherit; cursor:default; } @media (max-width:1152px){ #footer { font-size:14px; } #footer .mainContainer { padding:15px 20px; } #footer .footLogo { height:145px; } } @media (max-width:991px){ #footer { font-size:12px; } } @media (max-width:767px){ #footer { font-size:14px; } #footer .xs-guide { display:table; } #footer ul.siteGuide { float:none; margin:0 auto; border-bottom:none; display:inline-block; } #footer ul.siteGuide li { padding:0 15px; font-size:12px; } #footer .footLogo { width:100%; } #footer .footInfo { width:100%; } #footer .footInfo .footTxt { text-align:center; color:#888; line-height:1.6em; } } #mouseScrollDown { position:absolute; bottom:20px; left:50%; width:60px; height:65px; margin:0; padding:0; cursor:pointer; opacity:0.6; display:block; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); z-index:99; } #mouseScrollDown:hover { opacity:1; } #mainInfo { width:100%; height:auto; padding:80px 0; display:block; background:#FFF; } #mainStyle { width:100%; height:auto; padding:80px 0; display:block; background:#ecebe7; } #mainCustomCenter { width:100%; height:auto; padding:100px 70px; display:block; background:#FFF; } #mainSlogan { width:100%; height:540px; display:block; background:#FFF; } #mainSlider { width:100%; height:auto; display:block; background:#FFF; } @media (max-width:1152px){ #mainSlogan { height:480px; } } @media (max-width:991px){ #mainSlogan { height:440px; } } @media (max-width:767px){ #mainSlogan { height:400px; } #mainCustomCenter { padding:20px 30px; display:block; } #mouseScrollDown { display:none; } #mainStyle .mainContainer { padding:0 20px; } } /*---------- 모달 시작 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #inqueryForm { position:absolute; top:50%; left:50%; clear:both; width:80%; max-width:900px; height:auto; margin:0; padding:20px; display:block; background:#FFF; z-index:+1; box-shadow:3px 3px 5px rgba(0,0,0,0.3); transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } @media (max-width:767px){ #inqueryForm { width:90%; padding:10px; } } /* waypoints 애니메이션 */ @media (min-width:992px){ /* 위로 가는 애니메이션 */ .waypoints-up {opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out;-webkit-transform:translate3d(0,30px,0);-moz-transform:translate3d(0,30px,0);-o-transform:translate3d(0,30px,0);-ms-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)} .w-active .waypoints-up {opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} /* 아래로 가는 애니메이션 */ .waypoints-down {opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out;-webkit-transform:translate3d(0,-30px,0);-moz-transform:translate3d(0,-30px,0);-o-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)} .w-active .waypoints-down {opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} /* 오른쪽으로 가는 애니메이션 */ .waypoints-right {opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out;-webkit-transform:translate3d(-30px,0,0);-moz-transform:translate3d(-30px,0,0);-o-transform:translate3d(-30px,0,0);-ms-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)} .w-active .waypoints-right {opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} /* 왼쪽으로 가는 애니메이션 */ .waypoints-left {opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out;-webkit-transform:translate3d(30px,0,0);-moz-transform:translate3d(30px,0,0);-o-transform:translate3d(30px,0,0);-ms-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)} .w-active .waypoints-left {opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} /* 가운데 출력 애니메이션 */ .waypoints-center {opacity:0;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;transition:all 1s ease-in-out} .w-active .waypoints-center {opacity:1} /* 딜레이 */ .delay-01 {-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s} .delay-02 {-webkit-transition-delay:.2s;-moz-transition-delay:.2s;-o-transition-delay:.2s;-ms-transition-delay:.2s;transition-delay:.2s} .delay-03 {-webkit-transition-delay:.3s;-moz-transition-delay:.3s;-o-transition-delay:.3s;-ms-transition-delay:.2s;transition-delay:.3s} .delay-05 {-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-o-transition-delay:.5s;-ms-transition-delay:.5s;transition-delay:.5s} .delay-06 {-webkit-transition-delay:.6s;-moz-transition-delay:.6s;-o-transition-delay:.6s;-ms-transition-delay:.6s;transition-delay:.6s} .delay-07 {-webkit-transition-delay:.7s;-moz-transition-delay:.7s;-o-transition-delay:.7s;-ms-transition-delay:.7s;transition-delay:.7s} .delay-08 {-webkit-transition-delay:.8s;-moz-transition-delay:.8s;-o-transition-delay:.8s;-ms-transition-delay:.8s;transition-delay:.8s} .delay-09 {-webkit-transition-delay:.9s;-moz-transition-delay:.9s;-o-transition-delay:.9s;-ms-transition-delay:.9s;transition-delay:.9s} .delay-10 {-webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s} .delay-15 {-webkit-transition-delay:1.5s;-moz-transition-delay:1.5s;-o-transition-delay:1.5s;-ms-transition-delay:1.5s;transition-delay:1.5s} .delay-20 {-webkit-transition-delay:2s;-moz-transition-delay:2s;-o-transition-delay:2s;-ms-transition-delay:2s;transition-delay:2s} .delay-25 {-webkit-transition-delay:2.5s;-moz-transition-delay:2.5s;-o-transition-delay:2.5s;-ms-transition-delay:2.5s;transition-delay:2.5s} .delay-30 {-webkit-transition-delay:3s;-moz-transition-delay:3s;-o-transition-delay:3s;-ms-transition-delay:3s;transition-delay:3s} }