/*-------------------------------------- eyoom (이윰빌더) --------------------------------------*/ @font-face { font-family: 'OTWelcomeRA'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/OTWelcomeRA.woff2') format('woff2'); font-weight: normal; font-style: normal; } .pc {display:block !important} .m0b {display:none !important} @media (max-width: 992px) { .pc {display:none !important} .m0b {display:block !important} } /*---------- Wrapper & Basic Layout & Boxed Layout ----------*/ .wrapper {/*background-image:url("../image/bg_boxed.png")*/} .basic-layout {background:#fff} .boxed-layout {padding:0;box-shadow:0 0 5px #bbb;margin-left:auto !important;margin-right:auto !important;background:#fff} @media (min-width: 992px) { .boxed-layout .header-nav > .navbar > .container {padding-right:0;padding-left:0} .boxed-layout .header-nav > .navbar > .container li.menu-icons i.menu-icons-style {margin-right:15px} } /*---------- Header Top Bar ----------*/ @media(min-width: 992px){ header{ z-index: 100; position: fixed; left: 0; top: 0; width: 100%; height: 65px; background: #fff;} header div.inner_wrap{ display: flex; justify-content: space-between; align-items: center;} header div.inner_wrap h2{ width: 292px;} header div.inner_wrap h2 img{ display: block; width: 100%;} header div.inner_wrap nav{ width: 575px;} header div.inner_wrap nav ul{ display: flex; justify-content: space-between;} header div.inner_wrap nav ul li a{ height: 65px; line-height: 65px; font-weight: 500;} header div.inner_wrap nav ul li a img{} header nav ul{ display: flex;} header nav ul li a{ display: block; width: 100%; height: 100%; font-size: 20px; line-height: 65px;} } @media(max-width: 991px){ header{ z-index: 100; position: fixed; left: 0; top: 0; width: 100%; height: 68px; background: #fff;} header div.inner_wrap h2{ width: 90%; max-width: 240px; margin: 0 auto; padding: 21px 0;} header div.inner_wrap h2 img{ display: block; width: 100%;} header div.inner_wrap nav ul{ display: flex; justify-content: space-between;} header div.inner_wrap nav ul li a{ height: 60px; padding: 0 8px; line-height: 60px; font-weight: 500; font-size: 16px;} header nav ul{ display: flex;} header nav ul li a{ display: block; width: 100%; height: 100%; font-size: 20px; line-height: 90px;} } .header-topbar {position:relative;background:#212227} .header-topbar ul {margin:0} .header-topbar .topbar-left li {color:#333;padding:5px 0;font-size:12px;margin-right:15px;display:inline-block} .header-topbar .topbar-left li:last-child {margin-right:0} .header-topbar .topbar-right {text-align:right} .header-topbar .topbar-right li {padding:5px 12px;display:inline-block} .header-topbar .topbar-right li a {font-size:12px;color:#ddd} .header-topbar .topbar-right li a:hover {text-decoration:none;color:#fff} .header-topbar .topbar-right li i {color:#777} .header-topbar .topbar-right li a:hover i {color:#ff2a00} .header-topbar .topbar-right li.dropdown-extended li {border-left:0;border-right:0;top:0;margin-left:0;position:relative;border:0;text-align:left} .header-topbar .dropdown-extended .dropdown-menu {float:right;left:inherit;right:0px;margin:0;margin-right:9px;border:1px solid #ccc;background-color:#fafafa;width:275px;z-index:9999} .header-topbar .dropdown-extended .dropdown-menu:before {position:absolute;top:-7px;right:30px;display:inline-block !important;border-right:7px solid transparent;border-bottom:7px solid #fafafa;border-left:7px solid transparent;border-bottom-color:#ccc;content:""} .header-topbar .dropdown-extended .dropdown-menu:after {position: absolute;top:-6px;right:31px;display:inline-block !important;border-right:6px solid transparent;border-bottom:6px solid #fafafa;border-left:6px solid transparent;content:""} .header-topbar .dropdown-extended .dropdown-menu > li.external {display:block;overflow:hidden;padding:10px;letter-spacing:0.5px} .header-topbar .dropdown-extended .dropdown-menu > li.external > h5 {margin:0;padding:0;float:left;font-size:12px;display:inline-block} .header-topbar .dropdown-extended .dropdown-menu > li.external > a {display:inline-block;padding:0;background:none;clear:inherit;font-size:12px;font-weight:300;position:absolute;right:10px;border:0;margin-top:-1px} .header-topbar .dropdown-extended .dropdown-menu > li.external > a:hover {text-decoration:underline;color:#ff2a00} .header-topbar .dropdown-extended .dropdown-menu .dropdown-menu-list {padding:0;margin:0;list-style:none;border:1px solid #eee} .header-topbar .dropdown-extended .dropdown-menu .dropdown-menu-list > li > a {display:block;clear:both;white-space:normal;padding:8px 0 0;text-shadow:none} @media (max-width: 991px){ .header-topbar ul {text-align:center !important} .header-topbar .topbar-left {margin:10px 0} .header-topbar .topbar-right li {top:1px;padding:5px 12px;margin-left:-5px;position:relative} } @media (max-width: 767px){ .header-topbar .dropdown-extended .dropdown-menu {right:-60px} .header-topbar .dropdown-extended .dropdown-menu:before {right:88px} .header-topbar .dropdown-extended .dropdown-menu:after {right:89px} } /*---------- Header Title ----------*/ .header-logo {position:absolute; z-index:1000; margin-top:15px;} .header-logo a {display:block;height:70px;line-height:70px;font-size:32px;text-indent:15px} .header-logo a img {/*height:32px;*/width:260px} @media (min-width: 992px) { .header-logo a {height:80px;line-height:80px;text-indent:45px; display:block;} .header-logo a img {/*height:40px*/} } @media (max-width: 1200px) { .header-logo a {line-height:80px; text-indent:30px} .header-logo a img {width:110px;} } @media (max-width: 991px) { .header-logo{margin-top:0px;} .header-logo a {line-height:55px;text-indent:20px;} } /*---------- Header Nav ----------*/ .header-nav {z-index:99;position:relative} @media (min-width: 768px) and (max-width: 991px) { .header-nav .menu-container {width:750px} } @media (max-width: 991px) { .header-nav .navbar {min-height:0px} .header-nav {position:static;border-bottom:1px solid #e5e5e5} .header-nav .menu-container:before, .header-nav .menu-container:after {content:" ";display:table} .header-nav .menu-container:after {clear:both} .header-nav .menu-container {margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px} .header-nav > .navbar > .container {width:inherit;margin-left:0;margin-right:0;padding-left:0;padding-right:0} .header-nav > .navbar > .container > .navbar-header, .header-nav > .navbar > .container > .navbar-collapse {margin-left:0;margin-right:0} } .header-nav .navbar {border:none;margin-bottom:0} .header-nav .navbar-toggle {border:none;margin:15px 0 5px 10px;font-size:16px} .header-nav .navbar-toggle .icon-bar:last-child {margin-bottom:0} .header-nav .navbar-toggle, .header-nav .navbar-toggle:hover, .header-nav .navbar-toggle:focus {/*background:inherit*/background:#8ed621; color:#fff; padding:9px 15px;} .header-nav .navbar-collapse {position:relative} .header-nav .navbar-nav > li > a {color:#fff;font-size:20px;font-weight:bold;padding:0px 15px;letter-spacing:0px} .header-nav .nav > li > a:hover, .header-nav .nav > li > a:focus {background:inherit} .header-nav .navbar-nav .dropdown > a:after {display:none;top:12px;right:12px;font-size:11px;position:absolute;font-weight:normal;color:#bbb;display:inline-block;font-family:FontAwesome;content:"\f0d7"} @media (min-width: 992px) { .navbar {border-radius:0} .header-nav .navbar-nav {display:flex;justify-content:center;width:100%;} } @media (max-width: 1200px) { .header-nav .navbar-nav > li > a {font-size:18px; padding:0px 8px;} } /*Nav In Right*/ .header-nav .nav-in-right {float:right;z-index:999;margin-left:-20px;position:relative} @media (max-width: 350px) { .header-nav .nav-in-right {display:none} } .header-nav .menu-icons-list {margin:0;list-style:none} .header-nav li.menu-icons {position:relative;display:inline-block} .header-nav li.menu-icons i.menu-icons-style {color:#fff;width:25px;cursor:pointer;font-size:16px;line-height:100px;text-align:center;display:inline-block} .header-nav .search-open {top:0;right:0;height:100px;width:100%;z-index:99;display:none;padding:35px 15px 0;position:absolute;background:#fff} .header-nav .search-open .form-control {color:#333;border:none;height:26px;font-size:13px;font-weight:400;box-shadow:none;background:#fff;padding:0 20px} @media (max-width: 991px) { .header-nav .search-open {height:70px;padding-top:20px} .header-nav .search-open .form-control {padding:0;background:#f4f4f4;padding:0 10px;margin-top:3px} .header-nav li.menu-icons i.menu-icons-style {line-height:70px} } @media (min-width: 768px) and (max-width: 991px) { .header-nav .search-open .form-control {position:relative;overflow:hidden;width:500px;margin:3px auto} } .header-nav .search-open .form-control::-moz-placeholder {color:#555} .header-nav .search-open .form-control:-ms-input-placeholder {color:#555} .header-nav .search-open .form-control::-webkit-input-placeholder {color:#555} .header-nav .search-open .form-control:hover, .header-nav .search-open .form-control:active, .header-nav .search-open .form-control:focus {border:none;box-shadow:none} .header-nav .search-close {z-index:999;position:relative} .header-nav li.menu-icons i.search-btn {color:#fff} .header-nav li.menu-icons i.fa-times {color:#444} /*Responsive*/ @media (max-width: 991px) { .header-nav .navbar-header {float:none} .header-nav .navbar-toggle {display:block} .header-nav .navbar-collapse {border-color:#eee} .header-nav .navbar-collapse.collapse {display:none !important} .header-nav .navbar-collapse.collapse.in {display:block !important;overflow-y:auto !important} .header-nav .navbar-nav {margin: 0;float:none !important} .header-nav .navbar-nav > li {float:none} .header-nav .navbar-nav > li > a {padding-top:30px;padding-bottom:40px} .header-nav .navbar-nav > li > a {color:#444} .header-nav .dropdown-menu.pull-right {float:none !important} .header-nav .navbar-nav .open .dropdown-menu {border:0;float:none;width:auto;margin-top:0;position:static;box-shadow:none;background-color:transparent} .header-nav .navbar-nav .open .dropdown-menu > li > a, .header-nav .navbar-nav .open .dropdown-menu .dropdown-header {padding:5px 15px 5px 25px} .header-nav .navbar-nav .open .dropdown-menu > li > a {line-height:20px} .header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {background-image:none} .header-nav .navbar-nav .open .dropdown-menu > li > a {color:#777;} .header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {color:#ff2a00;background-color:transparent} .header-nav .navbar-nav .open .dropdown-menu > .active > a, .header-nav .navbar-nav .open .dropdown-menu > .active > a:hover, .header-nav .navbar-nav .open .dropdown-menu > .active > a:focus {color:#ff2a00;background-color:transparent} .header-nav .navbar-nav .open .dropdown-menu > .disabled > a, .header-nav .navbar-nav .open .dropdown-menu > .disabled > a:hover, .header-nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {color:#ff2a00;background-color:transparent} .header-nav .dropdown-menu.no-bottom-space {padding-bottom:0} .header-nav .navbar-collapse, .header-nav .navbar-collapse .container {padding-left:0 !important;padding-right:0 !important} .header-nav .navbar-nav > li > a {font-size:13px;padding:12px 5px} .header-nav .navbar-nav > li a {border-bottom:none;border-top:1px solid #eee} .header-nav .navbar-nav > li:first-child > a {border-top:1px solid transparent} .header-nav .navbar-nav > li > a:hover {color:#ff2a00;border-top:1px solid #ff2a00} .header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#555;background:inherit} .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {background:inherit;color:#ff2a00 !important} .header-nav .dropdown .dropdown-submenu > a {font-size:12px;color:#555 !important} } @media (min-width: 992px) { .header-nav .navbar-collapse {padding:0} .header-nav .navbar {min-height:0px !important} .header-nav .container > .navbar-header, .header-nav .container-fluid > .navbar-header, .header-nav .container > .navbar-collapse, .header-nav .container-fluid > .navbar-collapse {margin-bottom:-10px} .header-nav .navbar-nav {position:relative;} .header-nav .navbar-nav > li > a {line-height:80px} .header-nav .navbar-nav > li.dropdown > a {/*padding-right:30px*/} .header-nav .navbar-nav > li > a, .header-nav .navbar-nav > li > a:hover, .header-nav .navbar-nav > li > a:focus, .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {color:#fff;font-weight:bold;background:none} .header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#fff} .header-nav .navbar-nav .dropdown > a:after {display:none;top:32px;right:15px;font-size:11px;position:absolute;font-weight:normal;color:#888;/*display:inline-block;*/font-family:FontAwesome;content:"\f107"} .header-nav .dropdown-menu {border:none;padding:0;border-radius:0;z-index:9999 !important;border:5px solid transparent;border-left:0 none;box-shadow:0 0 0 #fff} .header-nav .dropdown-menu li a { color:#fff;font-weight:bold; font-size:14px; font-weight:normal; padding:12px 20px;background:#223d66} .header-nav .dropdown-menu .active > a, .header-nav .dropdown-menu li > a:hover {color:#fff;background:inherit;filter:none !important;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out} .header-nav .dropdown-menu li > a:focus {background:none;filter:none !important} .header-nav .navbar-nav > li.dropdown:hover > .dropdown-menu {display:block} .header-nav .open > .dropdown-menu {display:none} /*.header-nav .mega-menu .dropdown-menu > li a:hover {background:#2aa393; color:#fff;}*/ } /*헤더 우측메뉴*/ .utility-menu-title { color: #555; background:url(/images/down_ico.png) no-repeat;} .utility-menu-title.down { padding-right: 13px; background:url(/images/down_ico.png) no-repeat; background-position: right;} .utility-menu-title.down-none { background:none;} .utility {position: absolute; float: right; min-width:250px; right:60px; top: 0px;} .utility-menu, .login-off {padding:0;} .utility-menu li { float: left; position: relative; margin: 0 10px;} .utility-menu li.m-first { padding-left:0; margin-left:0; } .utility-menu li.m-last { padding-left:0; margin-left:0; } .utility-menu li:hover { background: white; } .utility-menu li:hover .utility-menu-title::after { content:""; display:block; width:100%; height:3px; background-color:#3980ec; position:absolute; bottom:0px; z-index: 3; } .utility-menu-title { color: #000; font-size: 14px; display: inline; letter-spacing: -0.06em; float: left; line-height: 80px;} .utility-menu-txt img {display: inline-block; padding-left: 7px; margin-top: 31px;} .utility-menu ul { background: #fff; display: none; padding: 0; position: absolute; left: 50%; margin-left: -90px; top: 100%; width: 180px; border: 1px solid #dddddd; } .utility-menu ul li { float: none; } .utility-bar { display: block; float: left; margin-top: 27px;} .utility-menu-txt ul li a { color: #888; letter-spacing: -0.06em; font-size: 14px;} .utility-menu-txt ul li a:hover { text-decoration: underline; color: #333; } .utility-menu-txt ul li {padding: 10px 10px; text-align: center;} .utility-menu-txt ul li:first-child {padding-top: 20px;} .utility-menu-txt ul li:last-child {padding-bottom: 20px;} @media (max-width: 1200px) { .utility {right: 30px;} } @media (max-width: 991px) { .utility {display:none;} } /*Dropdown Submenu*/ .header-nav .dropdown-submenu {position:relative} .header-nav .dropdown-submenu > a > .sub-caret {top:5px;left:8px !important;float:right;font-size:11px;font-weight:normal;display:inline-block} @media (min-width: 991px) { .header-nav .dropdown-submenu > a > .sub-caret {position:absolute !important;left:inherit !important;right:8px;top:13px} } .header-nav .dropdown-submenu > .dropdown-menu {top:-15px;left:100%;margin-left:0px} .header-nav .dropdown-submenu > .dropdown-menu.submenu-left {left:-100%} .header-nav .dropdown-submenu:hover > .dropdown-menu {display:block} @media (max-width: 991px) { .header-nav .dropdown-submenu > .dropdown-menu {display:block;margin-left:15px} } .header-nav .dropdown-submenu.pull-left {float:none} .header-nav .dropdown-submenu.pull-left > .dropdown-menu {left:-100%;margin-left:10px} .header-nav .dropdown-menu li [class^="fa-"], .header-nav .dropdown-menu li [class*=" fa-"] {left:-3px;width:1.25em;margin-right:1px;position:relative;text-align:center;display:inline-block} .header-nav .dropdown-menu li [class^="fa-"].fa-lg, .header-nav .dropdown-menu li [class*=" fa-"].fa-lg {width:1.5625em} /*Mega Menu*/ .header-nav .mega-menu .nav, .header-nav .mega-menu .dropup, .header-nav .mega-menu .dropdown, .header-nav .mega-menu .collapse {position:static} .header-nav .mega-menu .navbar-inner, .header-nav .mega-menu .container {position:relative} .header-nav .mega-menu .dropdown-menu {left:auto} .header-nav .mega-menu .dropdown-menu > li {display:block; background:#0f3979;} @media (max-width: 992px) { .header-nav .mega-menu .dropdown-menu > li {background:#fff;} } .header-nav .mega-menu .dropdown-submenu .dropdown-menu {left:100%;margin:0;border:0 none;border-left:5px solid transparent;top:0} .header-nav .mega-menu .nav.pull-right .dropdown-menu {right:0} .header-nav .mega-menu .mega-menu-content {*zoom:1;padding:0} .header-nav .mega-menu .mega-menu-content:before, .header-nav .mega-menu .mega-menu-content:after {content:"";display:table;line-height:0} .header-nav .mega-menu .mega-menu-content:after {clear:both} .header-nav .mega-menu.navbar .nav > li > .dropdown-menu:after, .header-nav .mega-menu.navbar .nav > li > .dropdown-menu:before {display:none} .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu {left:0;right:0;overflow:hidden} .header-nav .mega-menu .mega-height-list h3 {color:#000;font-size:14px;font-weight:bold;padding:0 10px} @media (max-width: 1200px) { .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu .container {width:1140px} } @media (min-width: 992px) and (max-width: 1199px) { .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu .container {width:940px} } @media (min-width: 992px) { .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu {margin-left:15px;margin-right:15px} .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu .container {background:#f9f9f9} .header-nav .mega-menu .mega-height {display:-webkit-flex;display:-ms-flexbox;display:flex} .header-nav .mega-menu .mega-height-in {display:-webkit-flex;display:-ms-flexbox;display:flex} .header-nav .mega-menu .big-screen-space {margin-bottom:20px} .header-nav .mega-menu .mega-height-in {padding:5px 0 10px;border-left:1px solid #e5e5e5} .header-nav .mega-menu .mega-height-in:first-child {border-left:none;margin-left:-1px} .header-nav .mega-menu .mega-height-list {width:100%} .header-nav .mega-menu .mega-height-list li a {display:block;position:relative;border-bottom:none;padding:5px 10px 5px 15px} .header-nav .mega-menu .mega-height-list a:hover {text-decoration:none} .header-nav .mega-menu .mega-menu-area li a {padding:5px 10px 5px 30px} .header-nav .mega-menu .mega-menu-area li a:after {top:7px;left:15px;font-size:11px;content:"\f105";position:absolute;font-weight:normal;display:inline-block;font-family:FontAwesome} .header-nav .mega-menu .mega-menu-area .disable-icons li a {padding:5px 10px 5px 15px;background:#fff;color:#6a6a6a} .header-nav .mega-menu .mega-menu-area .disable-icons li a:after {display:none} } @media (min-width: 737px) and (max-width: 991px) { .header-nav .mega-menu .mega-menu-content .container {width:690px !important} .header-nav .mega-menu .mega-height {margin-right:0;} .header-nav .mega-menu .mega-height-in {padding-right:0;margin-right:-15px} } @media (max-width: 991px) { .header-nav .mega-menu .mega-height {margin-right:0} .header-nav .mega-menu .mega-height-in {padding-right:0;padding-left:5px} .header-nav .mega-menu .dropdown.mega-menu-area .dropdown-menu {width:auto} .header-nav .mega-menu .mega-height-in, .header-nav .mega-menu .mega-height-list {display:block} .header-nav .mega-menu .mega-menu-area .dropdown-menu > li > ul {display:block} .header-nav .mega-menu .mega-height-list h3 { color:#555; margin:0 0 5px;font-size:13px; font-weight:400; padding:6px 15px 5px} .header-nav .mega-menu .mega-height-list li a {color:#777;display:block;font-size:12px; font-weight:400; margin-left:15px;padding:6px 25px} .header-nav .mega-menu .mega-height-list > h3.active, .header-nav .mega-menu .mega-height-list > .active > a, .header-nav .mega-menu .mega-height-list > .active > a:hover, .header-nav .mega-menu .mega-height-list > .active > a:focus {color:#ff2a00;background-color:transparent} .header-nav .mega-menu .mega-height-list li a:hover {color:#ff2a00;text-decoration:none} } /*Header Nav Fixed*/ @media (min-width: 992px) { .header-fixed .header-nav.header-sticky {width:100%;height:auto;z-index:999;position:relative} .header-fixed .header-nav.header-fixed-trans {border-bottom:none;box-shadow:0 0 3px #bbb;z-index:10000000000;position:fixed;top:0;left:0} .header-fixed .header-nav.header-fixed-trans .navbar {background:#fff;border:0} .header-fixed .header-nav.header-fixed-trans .navbar-nav > li > a {color:#555} .header-fixed .header-nav.header-fixed-trans .navbar-nav .active > a, .header-fixed .header-nav.header-fixed-trans .navbar-nav li > a:hover {color:#3980ec;} .header-fixed .header-nav.header-fixed-trans li.menu-icons i.menu-icons-style {color:#555} .header-fixed .header-nav.header-fixed-trans .navbar-brand, .header-fixed .header-nav.header-fixed-trans .navbar-nav > li > a, .header-fixed .header-nav.header-fixed-trans li.menu-icons i.menu-icons-style, .header-fixed .header-nav.header-fixed-trans .search-open .form-control {-webkit-transition:all 0.4s cubic-bezier(0.7, 1, 0.7, 1);transition:all 0.4s cubic-bezier(0.7, 1, 0.7, 1)} .header-fixed .header-nav.header-fixed-trans .navbar-brand {height:70px;max-height:70px;line-height:39px} .header-fixed .header-nav.header-fixed-trans .navbar-nav > li > a {line-height:80px} .header-fixed .header-nav.header-fixed-trans li.menu-icons i.menu-icons-style {line-height:100px} .header-fixed .header-nav.header-fixed-trans li.menu-icons span.badge {top:5px} .header-fixed .header-nav.header-fixed-trans .shopping-cart .shopping-cart-open {top:70px} .header-fixed .header-nav.header-fixed-trans .search-open {border-bottom:1px solid #eee} .header-fixed .header-nav.header-fixed-trans .search-open .form-control {height:26px;font-size:13px} .header-fixed .header-sticky-space.header-fixed-space-trans {clear:both;margin-bottom:100px} } @media (max-width: 991px) { .header-fixed .header-nav, .header-fixed .header-nav.header-fixed-trans {height:inherit;position:relative} .header-fixed .header-nav.header-fixed-trans .nav-in-right {margin-left:0;margin-right:20px} .header-nav li.menu-icons i.menu-icons-style {color:#555} } /*Fixed Boxed*/ .boxed-layout.header-fixed .header-nav.header-sticky {left:inherit;width:inherit} /*Header Nav Background Light*/ @media (min-width: 992px) { .header-nav.nav-background-light .navbar {background:transparent;} .header-fixed .header-nav.nav-background-light .navbar-nav > li > a {color:#000;font-weight:700;} .header-fixed .header-nav.nav-background-light .navbar-nav > li > a > span { display: inline-block; position:relative; } .header-fixed .header-nav.nav-background-light .navbar-nav > li:hover a > span:after { content:""; display:block; width:100%; height:3px; background-color:#3980ec; position:absolute; bottom:0px; z-index: 3; } .header-fixed .header-nav.nav-background-light .navbar-nav .active > a {color:#3980ec;/*background:#333 !important*/} /*.header-fixed .header-nav.nav-background-light .navbar-nav li > a:hover, .header-fixed .header-nav.nav-background-light .navbar-nav li.open {background:#555}*/ .header-fixed .header-nav.nav-background-light .navbar-nav .active ul.dropdown-menu li > a {color:#fff;} .header-fixed .header-nav.nav-background-light li.menu-icons i.menu-icons-style {color:#555} .header-nav.nav-background-light .search-open .form-control {background:#f4f4f4} } /*---------- Header Slider ----------*/ .header-slider {position:relative;} .slider-info {position:relative} .slider-info > ul {width:100%;margin:0 auto} .slider-info > ul > li {padding:5px 10px;border-bottom:1px dashed #eee;width:50%;float:left;height:45px} .slider-info > ul > li:nth-child(3), .slider-info > ul > li:nth-child(4) {border-bottom:0 none} .slider-info > ul > li > h5 i {font-size:28px;position:absolute;left:0;top:5px} .slider-info > ul > li > h5 {font-size:12px;color:#888;padding-left:40px;position:relative;margin:0} .slider-info > ul > li > h5 small, .slider-info > ul > li > h5 small a {display:block;font-size:12px;color:#ccc;font-weight:bold;margin-top:-2px} .slider-info > ul > li > h5 small a:hover {color:#f4b65a} .slider-info > ul > .slider-info-sns ul {padding-top:5px;text-align:left} .slider-info > ul > .slider-info-sns i {color:#9a9a9a;font-size:28px;display:block} @media (min-width:992px){ .header-slider { padding-top: 65px;} } @media (max-width:991px){ .header-slider { padding-top: 90px; background: url("/images/visual_bg_m.jpg") no-repeat 50% 100%; background-size: cover;} } @media (min-width:992px){ .slider-info {position:absolute;z-index:10;width:100%;bottom:0;background-color:rgba(0,0,0,0.3);border-top:1px solid #555} .slider-info > ul {width:970px;margin:0 auto} .slider-info > ul > li {width:25%;border:0 none;border-left:1px solid #555;padding:15px 15px 15px 35px;height:65px} .slider-info > ul > li:last-child {border-right:1px solid #555} .slider-info > ul > .slider-info-sns {padding:15px} .slider-info > ul > .slider-info-sns ul {text-align:center} .slider-info > ul > .slider-info-sns ul a:hover i {color:#fff} } @media (min-width:1200px){ .slider-info > ul {width:1170px} .slider-info > ul > li {padding-left:65px} } .header-slider-bg {z-index:1;padding:15px 0 0;position:relative;/*overflow:hidden;height:auto;*/} .header-slider-bg:after {/*position:absolute;top:0;left:0;width:100%;height:100%;content:" ";background:rgba(0,0,0,0.5)*/} .header-slider-bg > img {/*position:absolute;top:0;left:0*/} .header-slider-bg > .txt_wrap {/*position: absolute;z-index:3;max-width:1200px;top: 25%;left: 50%;transform: translate(-50%, 0%);text-align: right;*/ position: absolute; top: 150px; left: 15%; } .header-slider-bg > .img_wrap{ } .header-slider-bg > .txt_wrap a{ display: block; padding: 10px 0; color: #fff; text-align: center; width: 150px; border: 2px solid #fff; border-radius: 15px;} .header-slider-bg h1{ font-size:58px;line-height:1;color:#111;font-weight:400; margin-bottom: 30px;font-family: "OTWelcomeRA"; letter-spacing:-1px; color: #fff;} .header-slider-btn {margin-top:20px} @media (min-width: 768px) and (max-width: 991px) { .header-slider-bg {padding:100px 0 0} } @media (max-width: 991px) { .header-slider-bg > .container {max-width:750px;padding-top:50px;} .header-slider-bg h1 {font-size:46px;line-height:1;} .header-slider-bg h2 {font-size:40px;line-height:1.2; margin-bottom:10px;} .header-slider-bg p {font-size:22px;margin-bottom: 5px;} } @media (max-width: 767px) { .header-slider-bg {padding:70px 0 0;} .header-slider-bg > .container {max-width:100%;padding-top:30px;} .header-slider-bg h1 {font-size:36px;line-height:1;} .header-slider-bg h2 {font-size:30px;line-height:1.2; margin-bottom:5px;} .header-slider-bg p {font-size:18px;margin-bottom: 0px;} } @media (max-width: 430px) { .header-slider-bg {padding:40px 0 0;} .header-slider-bg > .container {padding-top:15px;} .header-slider-bg h1 {font-size:30px;line-height:1;} .header-slider-bg h2 {font-size:22px;line-height:1.2; margin-bottom:5px;margin-top:0;} .header-slider-bg p {font-size:14px;margin-bottom: 0px;} } /*메인 슬라이드 베너*/ .header-slider-bg.bg1 { overflow: hidden; padding: 0px 0 0; position: relative; } @media (min-width: 992px){ .header-slider-bg.bg1{ width: 100%;} } @media (max-width: 991px){ .header-slider-bg.bg1{ width: 100%; border-bottom-right-radius: 0;} .header-slider-bg > .txt_wrap{ } .header-slider-bg > .img_wrap{ display: none;} .header-slider-bg > .img_wrap img{ display: block; width: 100%;} } /* .header-slider-bg.bg2 { z-index: 1; padding: 30px 0 0; position: relative; background-image: url("/images/visual_bg2.jpg"); background-size: cover; background-position: center center; height: 570px; } @media (max-width: 1200px) { .header-slider-bg.bg1 { height: 490px; } .header-slider-bg.bg2 { height: 490px; } } */ /*owl control*/ .header-slider .owl-pagination {position:absolute;bottom:10px;text-align:center;z-index:100;margin-left:-32px;left:50%;} .header-slider .owl-pagination .owl-page {background:#fff;width:15px;height:15px;border-radius:999px !important;display:inline-block;margin:0 5px;transition:all 0.3s ease-in-out} .header-slider .owl-pagination .owl-page.active {background:#3877e2;width:15px} .header-slider .owl-buttons > div {display:none;position:absolute;height:36px;width:50px;line-height:36px;text-align:center;background:rgba(255, 255, 255, 0.5);color:#fff;top:50%;margin-top:-18px} .header-slider .owl-buttons .owl-prev {left:0} .header-slider .owl-buttons .owl-next {right:0} @media (max-width: 767px) { .header-slider .owl-buttons {display:none} } /*---------- Basic Body ----------*/ .basic-body.main-page {width:100%} .basic-body .basic-body-main {padding-top:0px;padding-bottom:0;/*min-height:800px*/} .basic-body.main-page .basic-body-main{padding:0} .basic-body .basic-body-main.left-main {border-right:1px solid #e5e5e5} .basic-body .basic-body-main.right-main {border-left:1px solid #e5e5e5} .basic-body .basic-body-side {padding-top:25px;padding-bottom:25px} .basic-body .basic-body-side.left-side {margin-right:-1px;border-right:1px solid #e5e5e5} .basic-body .basic-body-side.right-side {margin-left:-1px;border-left:1px solid #e5e5e5} @media (max-width: 991px){ .basic-body .basic-body-main.left-main {border-right:0} .basic-body .basic-body-main.right-main {border-left:0} .basic-body.main-page .basic-body-main{} .basic-body .basic-body-side.left-side {margin-right:0;border-right:0} .basic-body .basic-body-side.right-side {margin-left:0;border-left:0} } /*---------- Board Title ----------*/ .board-title {position:relative;overflow:hidden;padding:82px 0;background-repeat:no-repeat;background-size:cover} .board-title:after {display:block;content:"";width:100%;height:100%;/*background:rgba(0,0,0,0.3);*/top:0;left:0;position:absolute;z-index:1} .board-title > .container {z-index:10;position:relative} .board-title h3 {margin:0;padding:0;line-height:30px;font-size:17px;color:#ddd;font-weight:bold} .board-title .breadcrumb {padding:0;margin:0;list-style:none;background-color:inherit;border-radius:0;line-height:30px} .board-title .breadcrumb li, .board-title .breadcrumb li a {color:#ccc} .board-title .breadcrumb li a:hover {color:#fff} .board-title .prev-conetents { position:absolute; top: 0; left: 0; line-height: 77px;} .board-title .prev-conetents a span { display:inline-block; vertical-align:middle; color:#fcfcfc; font-size: 16px; margin-left: 15px;} .board-title .prev-conetents a img {vertical-align:middle;} .board-title .prev-conetents p { display: inline-block;} .board-title .next-conetents { position:absolute; top: 0; right: 0; line-height: 77px;} .board-title .next-conetents a span {display:inline-block; vertical-align:middle; color:#fcfcfc; font-size: 16px; margin-right: 15px;} .board-title .next-conetents a img {vertical-align:middle;} .board-title .visual-title { text-align: center; width: 100%;} .board-title .visual-title .visual-main-title { color: #fff; font-size: 34px; font-weight: 600; padding-bottom: 5px;} .board-title .visual-title .visual-sub-title { color: #fff; font-size: 18px; letter-spacing: -0.8px;} @media (max-width: 991px){ .board-title {display:none;} } /*---------- Footer ----------*/ .footer {position:relative;z-index:1} /*Footer Background Dark*/ .footer.footer-dark {clear:both;padding:45px 0;background:#333;font-size:12px} .footer.footer-dark p {color:#888} .footer.footer-dark .heading-footer {text-align:left;position:relative;margin-bottom:20px;padding-bottom:2px} .footer.footer-dark .heading-footer:after {left:0;bottom:0;height:1px;width:40px;content:" ";background:#aaa;position:absolute} .footer.footer-dark .heading-footer h4 {color:#e5e5e5;font-size:15px;font-weight:normal} .footer.footer-dark .footer-logo {margin-bottom:20px} .footer.footer-dark .footer-logo a {color:#ccc;font-size:28px} .footer.footer-dark .footer-logo img {height:32px} .footer-social-icons, .footer-link-list, .footer-contactus {margin-bottom:0} .footer.footer-dark .footer-social-icons li, .footer.footer-dark .footer-link-list li, .footer.footer-dark .footer-contactus li {margin-bottom:5px} .footer.footer-dark .footer-social-icons li a, .footer.footer-dark .footer-link-list li a, .footer.footer-dark .footer-contactus li, .footer.footer-dark .footer-contactus li a {color:#aaa;line-height:24px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .footer.footer-dark .footer-social-icons li a i, .footer.footer-dark .footer-link-list li a i, .footer.footer-dark .footer-contactus li i {font-size:24px;color:#aaa;margin-right:10px} .footer.footer-dark .footer-social-icons li a:hover, .footer.footer-dark .footer-link-list li a:hover, .footer.footer-dark .footer-contactus li a:hover {color:#eee} .family-site {position:relative} .family-site dt {display:block;width:100%;border:1px solid #aaa;color:#aaa;padding:5px 10px;background:#212227;cursor:pointer} .family-site dd {} .family-site ul {background:#212227;position:absolute;width:100%;border:1px solid #aaa;border-bottom:0 none;margin-bottom:0;bottom:100%;display:none} .family-site ul li {border-bottom:1px solid #aaa} .family-site ul li:last-child {border-bottom:0 none} .family-site ul li a {display:block;color:#aaa;padding:5px 10px} .family-site ul li a:hover {color:#eee} .footer.footer-dark .copyright {margin-top:10px;padding:15px 0;background:#000} .footer.footer-dark .copyright p {font-size:12px;margin:0;color:#777} @media (max-width: 991px){ .footer.footer-dark {padding: 40px 0 20px;} .footer.footer-dark .col-md-10, .footer.footer-dark .col-md-2 {margin: 0 15px;} } .footer.footer-dark .kakao {float:right;} .footer.footer-dark .sns {clear:both; float:right; margin-right:15px;} .footer.footer-dark .sns li {display:inline-block; margin-left:7px;} @media (max-width: 991px){ .footer.footer-dark .kakao {float:left;} .footer.footer-dark .sns {float:left;} } /**/ .footer.footer-white {clear:both;padding:55px 0 185px;background:#373737;font-size:12px;} .footer.footer-white p {color:#888} .footer.footer-white .heading-footer {text-align:left;position:relative;margin-bottom:20px;padding-bottom:2px} .footer.footer-white .heading-footer:after {left:0;bottom:0;height:1px;width:40px;content:" ";background:#aaa;position:absolute} .footer.footer-white .heading-footer h4 {color:#e5e5e5;font-size:15px;font-weight:normal} .footer.footer-white .footer-logo {margin-bottom:20px} .footer.footer-white .footer-logo a {color:#ccc;font-size:28px} .footer.footer-white .footer-logo img {height:32px} .footer-social-icons, .footer-link-list, .footer-contactus {margin-bottom:0} .footer.footer-white .footer-social-icons li, .footer.footer-white .footer-link-list li, .footer.footer-white .footer-contactus li {margin-bottom:5px} .footer.footer-white .footer-social-icons li a, .footer.footer-white .footer-link-list li a, .footer.footer-white .footer-contactus li, .footer.footer-white .footer-contactus li a {color:#aaa;line-height:24px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .footer.footer-white .footer-social-icons li a i, .footer.footer-white .footer-link-list li a i, .footer.footer-white .footer-contactus li i {font-size:24px;color:#aaa;margin-right:10px} .footer.footer-white .footer-social-icons li a:hover, .footer.footer-white .footer-link-list li a:hover, .footer-white.footer-dark .footer-contactus li a:hover {color:#eee} .footer.footer-white .copyright {margin-top:10px;padding:15px 0;background:#000} .footer.footer-white .copyright p {font-size:12px;margin:0;color:#777} @media (max-width: 991px){ .footer.footer-white {padding: 40px 0 165px;} .footer.footer-white .col-md-10, .footer.footer-dark .col-md-2 {margin: 0 15px;} } .footer.footer-white .kakao {float:right;} .footer.footer-white .sns {clear:both; float:right; margin-right:15px;} .footer.footer-white .sns li {display:inline-block; margin-left:7px;} /*----- Back To Top -----*/ .eb-top {z-index:9999;width:60px;height:60px;text-align:center;line-height:80px;color:#fff;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:50% !important;-moz-border-radius:50% !important;border-radius:50% !important} /*----- Perfect Scrollbar -----*/ .contentHolder{padding:0;height:320px;margin:0 auto;overflow:hidden;position:relative;background:#fff} @media (max-width: 767px){ .contentHolder{height:auto} } @media (max-width: 991px){ .footer.footer-white .kakao {float:left;} .footer.footer-white .sns {float:left;} .eb-top{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px;} .eb-top img{ display: block; width: 24px; height: 36.66px;} } /*----- Table List eb -----*/ .table-list-eb {font-size:12px} .table-list-eb .btn-e.dropdown-toggle {border-left:none} .table-list-eb .btn-group .btn-e {top:4px;padding:0 6px;position:relative} .table-list-eb .table tbody > tr > td {border-top:1px solid #e5e5e5} .table-list-eb .table thead > tr > th {text-align:center} .table-list-eb .table thead > tr > th.left {text-align:left} .table-list-eb thead {border-top:1px solid #e5e5e5;background:#f8f8f8} .table-list-eb tbody {border-bottom:1px solid #e5e5e5} .table-list-eb tfoot {border-bottom:1px solid #e5e5e5;background:#f8f8f8} .table-list-eb td {vertical-align:middle !important} .table-list-eb .user-names span,.table-list-eb .user-names small {display:block;text-align:center} .table-list-eb .user-names span {color:#555;font-size:16px;position:relative} .table-list-eb .user-names small {color:#999;font-size:12px} .table-list-eb td h3 {font-size:14px;margin:0 0 2px;color:#000} .table-list-eb td a {color:#000} .table-list-eb td a:hover {color:#ff2a00} .table-list-eb td p {margin-bottom:0;color:#555} .table-list-eb .s-icons {margin-bottom:0} .table-list-eb .s-icons li {padding:2px} .table-list-eb .table-button s{margin:0} .table-list-eb .table-buttons li {padding:0} .table-list-eb .table-buttons .btn-e-sm {padding:3px 6px} .table-list-eb .td-width {width:40%} .table-list-eb .td-width-60 {width:60%} .table-list-eb .td-width-50 {width:50%} .table-list-eb .td-width-40 {width:40%} .table-list-eb .td-width-30 {width:30%} .table-list-eb .td-width-20 {width:20%} .table-list-eb .td-width-10 {width:10%} @media (max-width: 767px){ .table-responsive {border-top:0;border-bottom:0} } /*----- Modal -----*/ .modal-header, .modal-body, .modal-footer {padding:10px} /*----- G5 Captcha -----*/ .vc-captcha {padding:15px 10px 10px;border:1px solid #ddd} .vc-captcha fieldset {padding:0} #captcha #captcha_img {height:62px;border:1px solid #eee;width:158px} #captcha #captcha_key {width:130px;height:62px;border:1px solid #ddd;font-size:24px;line-height:14px;margin-left:34px} #captcha .required,#captcha textarea.required {background:#fff !important} /*----- 회원 레이어팝업 -----*/ .sv_wrap .sv {z-index:998;border:1px solid #ccc;min-width:110px;padding:4px 0;background:#fff} .sv_wrap .sv a{background:#fff;color:#000 !important;padding:3px 12px;font-size:12px;border-bottom:0;display:block;width:110px} .sv_wrap .sv a:hover{background:#f4f4f4} /*----- EXIF INFO -----*/ .exif_info {position:relative;overflow:hidden;border:1px dotted #ddd;padding:5px 10px;background:#fafafa;margin:10px 0} .exif_info ul {list-style:none;margin-bottom:0;-webkit-padding-start:0} .exif_info ul li {display:inline-block;padding:0 8px;font-size:11px;color:#888} .exif_info ul li:before {content:"-";margin-right:5px} /*----- Etc -----*/ fieldset legend{border-bottom:0} .sch_word{color:crimson} /*----- company h1 style css -----*/ /* 레이아웃 */ .main-page > .container {width:100%} .section-gray {background:#F2F2F2} /* 메인 콘텐츠 타이틀 */ .hte-title {position:relative;margin:0 0 20px} .hte-title:before {content:" ";width:100%;position:absolute;height:1px;background:#ddd;display:block;top:50%;z-index:1} .hte-title span, .hte-title span a {display:inline-block;background:#fff;padding:0 10px;z-index:2;color:#bbb;position:relative;margin-left:30px;font-size:18px;;font-weight:600} .hte-title.hte-title-gray span, .hte-title.hte-title-gray span a {background:#F2F2F2;color:#9a9a9a} .hte-title span a {margin-left:0;padding:0} .hte-title span a:hover {color:#6a6a6a} @media (min-width:992px){ .hte-title {margin-bottom:40px} } /* 메인 콘텐츠 */ .tab-h1-type01 {padding:0 15px} .tab-h1-type01 .nav-tabs {border:0 none;margin-top:10px;padding-bottom:10px;border-bottom:1px solid #ddd} .tab-h1-type01 .nav-tabs li a {border:1px solid #9a9a9a;color:#9a9a9a} .tab-h1-type01 .nav-tabs li.active a {font-weight:bold;border-color:#333;color:#333} .tab-h1-type01 .tab-content .img {display:inline-block;width:100%;padding:0 10px 0px 0} .tab-h1-type01 .tab-content .img img {width:100%;height:auto} .tab-h1-type01 .tab-content .content-text h3 {font-size:14px;font-weight:bold} .tab-h1-type01 .tab-content .content-text p {font-size:12px;color:#6a6a6a;margin:0} .tab-h1-type01 .tab-content .content-text p span {display:none} .tab-h1-type01 .tab-content .content-text p a {font-weight:bold;display:inline-block;padding:1px 5px;border-radius:5px !important;background:#eee;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .tab-h1-type01 .tab-content .content-text p a:hover {background:#333} @media (min-width:992px){ .tab-h1-type01 .tab-content {width:80%;float:left;overflow:hidden} .tab-h1-type01 .tab-content .img {width:35%;float:left;text-align:right} .tab-h1-type01 .tab-content .content-text {width:60%;float:right;padding:0 20px} .tab-h1-type01 .tab-content .content-text h3 {font-size:18px} .tab-h1-type01 .tab-content .content-text p span {display:inline} .tab-h1-type01 .nav-tabs {width:20%;height:150px;float:right;padding:0 0 0 40px;margin:0;border-bottom:0 none} .tab-h1-type01 .nav-tabs li {display:block;width:100%;margin-bottom:5px} .tab-h1-type01 .nav-tabs li a:hover {color:#6a6a6a;border-color:#6a6a6a;background:none} } @media (min-width:1200px){ .tab-h1-type01 .tab-content .img img {width:auto;height:190px} .tab-h1-type01 .nav-tabs {padding-left:70px} } .section-02-box {margin:10px 0} .section-02 h2 {font-size:16px;font-weight:bold} .section-02 h2 span {display:block;font-size:30px;line-height:30px;font-weight:100;color:#bbb} .section-02 .img {border-bottom:5px solid #bbb} .section-02 h4 {font-size:12px;font-weight:bold;margin-bottom:5px} .section-02 p {font-size:12px;color:#6a6a6a} @media (min-width:992px){ .section-02-box {margin:0} } .btn-tab-h1 {display:none} .tab-h1 {padding:0 15px;position:relative} .tab-h1 .nav {border-bottom:1px solid #6a6a6a} .tab-h1 .nav li a {border:0 none;color:#9a9a9a} .tab-h1 .nav li a:hover {background:none;border:0 none} .tab-h1 .nav li.active a {background:none;border:0 none;color:#333} @media(max-width:767px){ .btn-tab-h1 {display:block} .btn-tab-h1 a {display:block;border:1px solid #ddd;color:#6a6a6a;padding:5px;background:#fff;position:relative} .btn-tab-h1 a i {position:absolute;right:10px;top:5px} .tab-h1 .nav {position:relative;border:1px solid #ddd;z-index:10;width:100%;background:#fff;margin-top:-1px;display:none} .tab-h1 .nav li {width:100%;float:inherit;display:block} } .service-box-h2 {margin-bottom:20px} .service-box-h2 i {display:block;width:100px;height:100px;line-height:98px;text-align:center;margin:0 auto;border-radius:50% !important;border:5px solid #ddd;color:#ddd;font-size:50px;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} .service-box-h2:hover i {border-color:#6a6a6a;color:#6a6a6a} .service-box-h2 h4, .service-box-h2 p {text-align:center} .service-box-h2 h4 span {font-size:14px;font-weight:bold;margin:10px 0;position:relative} .service-box-h2 h4 span:after {content:"";display:block;width:0;height:5px;background:#6a6a6a;position:absolute;left:0;top:100%;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} .service-box-h2:hover h4 span:after {width:100%} .service-box-h2 p {font-size:12px;color:#9a9a9a} @media (max-width:767px){ .section-04 .col-sm-4:last-child .service-box-h2 {margin-bottom:0} .service-box-h2 i {border-color:#6a6a6a;color:#6a6a6a;width:60px;height:60px;line-height:58px;font-size:30px;border-width:3px} .service-box-h2 h4 span:after {width:100%;height:3px} } /* side layout */ .basic-body-side h3.side-title {margin:0 0 5px;background:#333;color:#eee;text-align:center;padding:15px 0} .sidebar-nav-e1 > li.active, .sidebar-nav-e1 > li.active:hover {border-color:#999} .side-menu-bottom li {margin-bottom:5px} .side-menu-bottom li a {display:block;border:1px solid #828282;padding:5px 10px;color:#828282;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out} .side-menu-bottom li a i{margin-right:5px} .side-menu-bottom li a:hover {background-color:#828282;color:#fff} /* sidebar-nav-e1 */ .list-toggle:after {color:#bbb} .list-toggle.active:after {color:#333} /* pages */ .sub-title {margin:0 0 30px;padding:30px 0 30px;text-align:center;font-weight:bold;font-size:30px;border-bottom:1px solid #ddd} /* --- color set : 컬러셋의 색은 #5a7bf4 이며 컬러셋의 색상 교체를 원하면 컬러셋 영역 안의 #5a7bf4 를 원하는 컬러로 변경 --- */ .hte-font-color {color:#5a7bf4 !important} .hte-border-color {border-color:#5a7bf4 !important} .hte-bg-color {background-color:#5a7bf4 !important} a:hover {color: #2cd04f;} /* 메뉴 - 모바일 */ @media (max-width: 991px) { .header-nav .navbar-nav > li > a:hover, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {border-top:1px solid #3980ec;color:#f4b65a} .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {color:#3980ec !important} .header-nav .mega-menu .mega-height-list li a:hover {color:#3980ec} } /* 메뉴 - pc */ @media (min-width: 992px) { /*.header-fixed .header-nav.nav-background-light .navbar-nav .active > a, .header-fixed .header-nav.nav-background-light .navbar-nav li > a:hover, .header-fixed .header-nav.nav-background-light .navbar-nav li.open > a {color:#3980ec}*/ } /* 헤더 슬라이더 아이콘 */ @media (min-width: 992px) { .slider-info > ul > .slider-info-sns ul a:hover i {color:#f4b65a} } /* 메인 section-02 이미지 밑 라인 및 버튼 */ .btn-section a {display:inline-block;font-weight:bold;border:2px solid #f4b65a;color:#f4b65a;font-size:12px;padding:5px 10px;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} .btn-section a:hover {background:#f4b65a;color:#fff} .section-02 .img {border-bottom:5px solid #F4B65A} /* section-05 아이콘 */ .service-box-h2:hover i {border-color:#f4b65a;color:#f4b65a} .service-box-h2 h4 span:after {background:#f4b65a} @media (max-width:767px){ .service-box-h2 i {border-color:#f4b65a;color:#f4b65a} } /* breadcrumb */ .board-title .breadcrumb li a:hover {color:#f4b65a} /* sidebar-nav-e1 */ .sidebar-nav-e1 ul li:hover a, .sidebar-nav-e1 ul li.active a {color:#f4b65a;font-weight:bold} /* footer */ .footer.footer-dark .footer-social-icons li a i, .footer.footer-dark .footer-social-icons li a:hover, .footer.footer-dark .footer-link-list li a i, .footer.footer-dark .footer-link-list li a:hover, .footer.footer-dark .footer-contactus li i, .footer.footer-dark .footer-contactus li a:hover {color:#f4b65a} /* --- end of color set --- */ .top_contents {width:100%; height:625px; padding:86px 0; box-sizing:border-box;background-size:cover; background:url('/images/top_contentsbg.jpg');} @media (max-width: 992px) { .top_contents { padding:40px 0; width:100%; height: 1220px; } } /* --- 상단배너 --- */ .bd_banner {margin-top:10px; width:100%; height:180px; background:url('/images/top_dbBG.jpg');} .bd_banner img.db_img {margin-top:-10px;} @media (max-width: 992px) { .bd_banner { margin-top: 0px; height: auto; } } /* --- 공통타이틀 --- */ .lease_title {font-size:26px; margin-top: 25px; margin-bottom: 25px; font-weight:bold;} .lease_title span {color:#3980ec;} @media (max-width: 992px) { .lease_title {font-size:20px; margin-top: 15px; margin-bottom:15px;} } /* --- 메인페이지 공통! --- */ .list_car2 {} .list_car2 .car-item {background: #fff; position: relative; padding:0 0 15px; margin-bottom:20px;box-shadow: 1px 1px 5px rgba(0,0,0,0.3);border-radius: 10px;overflow: hidden;} .list_car2 .car-item .item-img { width:100%; overflow:hidden; position: relative;} .list_car2 .car-item .item-img img { max-width:100%; width:90%; height:175px;margin:15px auto 0;} .list_car2 .car-item .item-img p.item-txt { position:absolute; bottom:0; width:100%; height:40px; font-weight:500; line-height:40px; background:rgba(0,0,0,0.5);text-align:center;} .list_car2 .car-item .item-name { font-size:16px; font-weight:500; color:#111; margin:15px 0 0 0; padding: 0 15px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .list_car2 .car-item .item-name, .list_car2 .car-item .item-price {padding:0 15px;} .list_car2 .car-item .item-txt { font-size:14px; font-weight:200; color:#fff; text-align: left; display: block;} .list_car2 .car-item .item-price { font-size:18px; font-weight:600; color:#111; vertical-align: middle; margin:3px 0 15px; text-align: left;} .list_car2 .car-item .item-btn { width:100%; opacity:1; text-align: center; padding:0px 15px; margin: 10px 0;} .list_car2 .car-item .item-btn a { width:50%; height:35px; line-height:35px; display:block; float:left; color:#fff; font-weight:100; font-size:13px; background:#22245e; border: none;} .list_car2 .car-item .item-btn a.item-consulting {background:#fff955; color:#000;} .list_car2 .car-item .item-btn a img { display:inline-block;} .list_car2 .car-item .item-btn a span {padding-left:3px; font-weight:600;} .list_car2 .car-item .item-btn .item-consulting {box-sizing: border-box;} @media (max-width: 1200px) { .list_car2 .car-item {padding:0 0 50px;} .list_car2 .car-item .item-img img { max-width:100%; width:100%; height:160px;} .list_car2 .car-item .item-img p.item-txt {font-size: 11px;} .list_car2 .car-item2 {padding:0 0 50px;} .list_car2 .car-item2 .item-img p.item-txt {font-size: 11px;} } @media (max-width: 991px) { .list_car2 .car-item {padding:0 0 15px;} .list_car2 .car-item .item-img img { max-width:100%; width:100%; height:125px;} .list_car2 .car-item.mob-margin-0, .list_car2 .car-item.mob-margin-0 {margin-bottom:0;} .list_car2 .car-item .item-img p.item-txt {font-size: 9px; height:30px; line-height:30px;} .list_car2 .car-item .item-name {font-size: 14px; margin:7px 0 0;} .list_car2 .car-item .item-price {font-size: 13px; margin:0 0 5px;} .list_car2 .car-item .item-btn {margin: 5px 0;} .list_car2 .car-item .item-btn a {height:28px; line-height:26px;} .list_car2 .car-item .item-btn a img {width:10px;} .list_car2 .car-item .item-btn a span {font-size:9px;} .list_car2 .car-item2 {padding:0 0 45px;} .list_car2 .car-item2.mob-margin-0, .list_car2 .car-item2.mob-margin-0 {margin-bottom:0;} .list_car2 .car-item2 .item-img p.item-txt {font-size: 9px; height:30px; line-height:30px;} .list_car2 .car-item2 .item-name {font-size: 14px; margin:7px 0 0;} .list_car2 .car-item2 .item-price {font-size: 13px; margin:0 0 5px;} .list_car2 .car-item2 .item-btn {margin: 5px 0;} .list_car2 .car-item2 .item-btn a {height:28px; line-height:26px;} .list_car2 .car-item2 .item-btn a img {width:10px;} .list_car2 .car-item2 .item-btn a span {font-size:9px;} } /* list_roll */ .list_roll { float: right; width: 100%; /*margin: 0 auto;*/ position: relative; } .list_roll ul { position: absolute; margin: 0px; padding: 0px; width: 100%; /*top: -55.1285px;*/ } .list_roll li { cursor: pointer; margin: 0px; padding: 0px; height: 52px; margin-bottom:11px; } .list_roll dl { width: 100%; height: 52px; position: relative; display: block; text-align: left; padding: 11px 20px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0px 1px 5px rgba(28,35,69,0.14); background-color: rgba(255,255,255,0.1); transition: box-shadow 0.1s ease, background-color 0.1s ease; -webkit-transition: box-shadow 0.1s ease, background-color 0.1s ease; } .list_roll dl dt, .list_roll dl dd { font-size: 16px; line-height: 18px; color: #666; display: inline-block; } .list_roll dl dt { max-width: 245px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 400; } .list_roll dl dt span.icon { width: 38px; height: 20px; display: inline-block; text-indent: -99999999em; overflow: hidden; margin-right:8px; background: url("/images/ico_new.png") no-repeat 0 0; -webkit-background-size: 38px 20px; background-size: 38px 20px; position: relative; top: 3px; } .list_roll dl dd { float: right; text-align: right; position: relative; top: 5px; font-weight: 500; color: #000; } @media (max-width: 1200px) { .list_roll {width: 100%;} .list_roll dl dt { max-width: 190px; } } @media (max-width: 992px) { .list_roll {margin-bottom:30px;} .list_roll li {margin-bottom:9px;} .list_roll dl dt { max-width: 230px; } .list_roll dl dt, .list_roll dl dd { font-size: 14px; } .list_roll li { margin-bottom: 7px; } } /* -------------------------------------------- * main_count /* ------------------------------------------ */ .sell { position:relative; /*margin-top: -115px;*/ clear: both; } .main_count { clear: both; padding: 30px 0; height: 240px; } .main_count ul { padding: 0; } .main_count li { /*width: 33.333333%; float: left;*/ text-align: center; } .main_count .mc_total .col-md-4 { border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .main_count li .tit { font-size: 18px; line-height: 1; font-weight: 500; letter-spacing: 0.5px; color: #000; } .main_count li .count { color: #333; font-size: 60px; line-height: 1; letter-spacing: -0.05em; font-weight: 300; margin: 25px 0 18px; } .main_count li.mc_total .count { color: #3980ec; font-weight: bold; } .main_count li .desc { font-size: 18px; line-height: 26px; color: #666; letter-spacing: -0.05em; } @media (max-width: 1600px) { .sell { margin-top: -290px; } } @media (max-width: 992px) { .sell { margin-top: 0px; } .main_count .mc_total .col-md-4 { border-left: 0; border-right: 0; } .main_count { height: auto; padding: 50px 0 0; } .main_count li .count { font-size: 40px; font-weight: 400; } .main_count li { margin-bottom: 40px; } .main_count li .desc {font-size: 14px; line-height:24px;} } /*신규추가*/ .car_search {margin:30px 0 30px;} .car_search .home-tap {width:100%; height:50px; cursor:pointer; margin:0;} .car_search .home-tap li { float:left; width:33.33%; text-align:center; line-height:60px; height:55px; background:#f1f1f1; border-left:1px solid #ddd;border-radius:10px 10px 0 0;} .car_search .home-tap li a {font-size: 18px; display:block;} .car_search .home-tap li.active {background:#20c1bb;} .car_search .home-tap li.active a {color:#fff;} .car_search .home-tap li:first-child {border-left:0;} .car_search .home-tap_con {clear:both; width:100%; height:170px; box-sizing:border-box; border: 2px solid #20c1bb; padding: 20px 50px; border-radius: 0 0 10px 10px;} .car_search h3 {font-size: 16px; font-weight: bold; color: #181819; margin-top: 10px; float:left; font-weight:500;} .car_search h3 span {color:#386fc2;font-weight:700;} .car_search .title {clear:both; float:left; padding-top:10px;} .car_search .title span {font-size: 18px; font-weight:bold; margin-left: 7px;} .car_search .btns {clear:both; padding-top:10px;} .car_search .btns a {text-align: center; width: 75px; height: 50px; border: 1px #ddd solid; font-size: 13px; color: #181819; display:block; float:left; line-height: 50px; margin-left:3px;} .car_search .btns a.on {background:#111; color:#fff; text-align: center; width: 75px; height: 50px; display:block; float:left; line-height: 50px;} .car_search .home-tap_con:after{content:''; display:block;clear:both;} .car_search .cate_select {width:875px;float:right;} .car_search .select_box1 select {width:180px; float:left; height:50px; line-height:50px; margin-left:5px; margin-right:5px; border:1px solid #ccc; padding:0 10px; border-radius:10px;} .car_search .select_box2 select {width:310px; float:left; height:50px; line-height:50px; margin-right:20px; border:1px solid #ccc; padding:0 10px; border-radius:10px;} select{-webkit-appearance:none; background: url('/images/select_arrow.png') no-repeat 95% 50% #fff;} .car_search .car {} .car_search .car li {float:left; display:inline-block; margin: 0 10px;} .car_search .car li img {width:60px;} .car_search #mini_btn input {width:145px; font-size:18px; float:right; height:50px; line-height:50px; text-align:center; background:#3877e2; font-weight:600; color:#fff; border:0;border-radius:10px;} .cate_select span.btnl a:hover, .cate_select .btnl a.on, .cate_select .btnl a.on:hover { background: #2d2d38; color: #fff; } .cate_select span.btnl a { text-align: center; width: 75px; height: 43px; display: inline-block; line-height: 42px; border: 2px #2d2d38 solid; font-size: 13px; color: #181819; border-radius:7px; background:#fff; box-sizing: border-box; } #spanMakeType1{float: left; margin-top:4px;} @media (max-width: 1200px) { .car_search .cate_select {width:715px; float:right;} .car_search .select_box1 select {margin-right: 10px; width:168px;} .car_search .select_box2 select {margin-right: 10px; width:257px;} .car_search .car li {margin:0 3px;} } @media (max-width: 992px) { .car_search .home-tap {height: 40px;} .car_search .home-tap li {height:40px; line-height:40px;} .car_search .home-tap li a {font-size: 14px;} .car_search h3 {font-size: 14px;} .car_search .home-tap_con {height:auto; padding:20px 20px;} .car_search .home-tap_con:after{content:''; display:block;clear:both;} .car_search .title span {font-size: 14px;} .car_search .title img {width: 25px;} .car_search .btns a, .car_search .btns a.on {width:50%;} .car_search .btns a {margin-left:0; height:40px; line-height:40px;} .car_search .btns a.on {height:40px; line-height:40px;} .car_search .cate_select {width:100%; margin-top:10px;} .car_search .select_box1 select, .car_search .select_box2 select, .car_search #mini_btn input {width:100%; margin-top: 10px; height:40px; line-height:35px;} .car_search .car {margin-top: 20px;} .car_search .car li {width:25%; margin:0 0 10px; text-align: center;} .car_search .car li img {width:40%; margin:0 auto;} .cate_select span.btnl a { width: 50%; float:left; } #spanMakeType1{float:none;} #spanMakeType1:after{content:''; display:block; clear:both;} } /*서브 국산,수입차 목록*/ .car_pagination{display:inline-block; padding-left:0;margin:20px 0;border-radius:4px} .car_pagination>li{display:inline} .car_pagination>li>a, .car_pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#333;text-decoration:none;background:#fff;border:1px solid #ddd} .car_pagination>li:first-child>a, .car_pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px} .car_pagination>li:last-child>a, .car_pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px} .car_pagination>li>.active, .car_pagination>.active>a, .car_pagination>.active>a:focus, .car_pagination>.active>a:hover, .car_pagination>.active>span, .car_pagination>.active>span:focus, .car_pagination>.active>span:hover{z-index:2;color:#fff;cursor:default;background:#666;border-color:#666} .car_pagination>.disabled>a, .car_pagination>.disabled>a:focus, .car_pagination>.disabled>a:hover, .car_pagination>.disabled>span, .car_pagination>.disabled>span:focus, .car_pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background:#fff;border-color:#ddd} .car_pagination-lg>li>a, .car_pagination-lg>li>span{padding:10px 16px;font-size:18px} .car_pagination-lg>li:first-child>a, .car_pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px} .car_pagination-lg>li:last-child>a, .car_pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px} .car_pagination-sm>li>a, .car_pagination-sm>li>span{padding:5px 10px;font-size:12px} .car_pagination-sm>li:first-child>a, .car_pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px} .car_pagination-sm>li:last-child>a, .car_pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px} /*하단 컨텐츠*/ .bottom_contents {width:100%; height: 265px; background:#eee; box-sizing:border-box; padding: 68px 0;} @media (max-width: 992px) { .bottom_contents {height:auto; padding: 40px 0;} } .go_appW {position:relative; box-sizing:border-box; height:140px;} /* 2018-08-16 KSM */ .go_appW .tit {font-size:15px; height:20px; line-height:22px; font-weight: bold; box-sizing:border-box; padding-left:0; /*padding-left:50px;*/ color:#fe630f; margin-bottom:22px;/* background:url(../image/capital_bl.png) no-repeat left top;*/} .go_appW .txt {font-size:13px;} .ap_dw {clear:both; box-sizing:border-box; margin-top:34px;} .ap_dw .ga_btn:first-child {margin:0px;} .ap_dw .ga_btn {display:inline-block; width:auto; height:36px; line-height:36px; margin:0 5px; padding:0px 11px 0px 30px; background: url('../image/ico_mem_app.png') no-repeat 13px 10px;} .ap_dw .ga_btn.ios {background-position: 13px -18px;} .link_arr {display:inline-block;padding-right:10px;background:url(/images/bul_link_arr.png) no-repeat right 1px ; font-size:13px;line-height:20px;vertical-align:middle;}/*17.08.23 modify */ /* 서비스 배너 영역 QR */ .area_qr01 {position:absolute; top:75px; right:0; width:95px; height:72px;} .area_qr02 {position:absolute; top:75px; right:0; width:95px; height:72px;} .area_qr03 {position:absolute; top:75px; right:0; width:65px; height:72px;} @media (max-width: 1200px) { .area_qr01 {top:95px;} .area_qr02 {top:100px;} .area_qr03 {top:95px;} } @media (max-width: 992px) { .go_appW {height:auto;} .go_appW .tit {height:35px; margin-bottom:15px;} } /*카고소개*/ .content_et .section {padding:50px 0 50px; border-bottom:1px solid #ebebeb;} .content_et .section:last-child {border-bottom:none;} .content_et .tit { text-align:center; font-size:26px; line-height:28px; color:#333;} .content_et p {margin-top:26px; text-align:center; font-size:15px; line-height:20px; color:#666; word-break:keep-all;} .content_et .box {text-align:center; color:#333;margin-top:50px;} .content_et .box_in {} .content_et .box_in:after {display:block; clear:both; height:0; content:'';} .content_et .box_in .item {float:left; width:100%; height:240px; margin-left:20px; margin-bottom: 20px; background-color:#fafafa; border: 1px solid #e9e9e9; box-sizing: border-box;} .content_et .box_in .item:first-child {margin-left:0;} .content_et .box_in .tit {display:block; font-size:18px; line-height:23px;margin:57px 0 31px;} .content_et .box_tbl {border-top:1px solid #666;} .content_et .tbl_credit {text-align:center; font-size:14px; border-bottom:1px solid #f0f0f0;} .content_et .tbl_credit .left {text-align:left; padding-left: 50px; box-sizing: border-box; } .content_et .tbl_credit thead th {border-top:1px solid #666; font-weight:normal; color:#333; background:#f1f1f1;} .content_et .tbl_credit tbody td {border-top:1px solid #f0f0f0; border-right:1px solid #f0f0f0; color:#666;} .content_et .tbl_credit tbody td:last-child {border-right:none;} .content_et .tbl_credit th, .content_et .tbl_credit td {padding:16px 0 15px;} .content_et .desc_tbl {display:block; margin-top:16px; text-align:right; font-size:15px; color:#888;} /*이용안내*/ .content_et2 .section {padding:30px 0 30px; border-bottom:1px solid #ebebeb;} .content_et2 .section:last-child {border-bottom:none;} .content_et2 .tit { text-align:center; font-size:26px; line-height:28px; color:#333;} @media (max-width: 992px) { .content_et2 .tit {font-size:20px;} } .content_et2 p {margin-top:26px; text-align:center; font-size:15px; line-height:20px; color:#666; word-break:keep-all;} .content_et2 .box {text-align:center; color:#333;margin-top:20px;} .content_et2 .box_in {} .content_et2 .box_in:after {display:block; clear:both; height:0; content:'';} .content_et2 .box_in .item {float:left; width:100%; height:205px; padding-top:45px; color:#ff5a00; margin-left:20px; margin-bottom: 20px; letter-spacing:-1px; font-size:14px; font-weight:bold; background-color:#fafafa; border: 1px solid #e9e9e9; box-sizing: border-box;} .content_et2 .box_in .item:first-child {margin-left:0;} .content_et2 .box_in .tit {display:block; font-weight:lighter; font-size:13px; line-height:23px;margin:10px 0 0px;} .content_et2 .box_tbl {border-top:1px solid #666;} .content_et2 .tbl_credit {text-align:center; font-size:15px;} .content_et2 .tbl_credit .left {text-align:left; padding-left: 50px; box-sizing: border-box; } .content_et2 .tbl_credit thead th {border-bottom:1px solid #666; font-weight:normal; color:#333;} .content_et2 .tbl_credit tbody td {border-bottom:1px solid #f0f0f0; border-right:1px solid #f0f0f0; color:#666;} .content_et2 .tbl_credit tbody td:last-child {border-right:none;} .content_et2 .tbl_credit th, .content_et2 .tbl_credit td {padding:16px 0 15px;} .content_et2 .desc_tbl {display:block; margin-top:16px; text-align:right; font-size:15px; color:#888;} /* 좌측 상단 이미지 */ .car_detail_cont { position: relative; /* 동급매물 - 공통 */ } .car_detail_cont .wrapper { width: 1180px; margin: 0 auto; position: relative; } .car_detail_cont .view_bg { padding: 10px 0 30px; /*background-color: #e7e8ee;*/ } .car_detail_cont .view_bg .wrapper:before, .car_detail_cont .view_bg .wrapper:after { content: ""; display: table; } .car_detail_cont .view_bg .wrapper:after { clear: both; } .car_detail_cont .carImg_imgArea { width: 100%; position: relative;} .car_detail_cont .carImg_imgArea .attr { height: 30px; line-height: 30px; border-top: 1px solid #ddd; text-align: center; font-size: 13px; letter-spacing: 0; background-color: #fff; } .car_detail_cont .carImg_imgArea .visual_wrap { height: 100%; height:400px; position: relative; margin-bottom: 1px; } .car_detail_cont .carImg_imgArea .visual_wrap .visual_area {/*position:absolute;*/} .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual { display: none; } .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual img { width: 100%; max-width: 100%; height:400px;} .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual:first-child { display: block; } .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual .assure { width: 60px; height: 35px; line-height: 35px; position: absolute; top: 0; left: 0; text-align: center; font-size: 16px; letter-spacing: -0.07em; color: #fff; background-color: #fa0022; } .car_detail_cont .carImg_imgArea .visual_wrap .arrows span { display: inline-block; width: 30px; height: 49px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer; text-indent: -9999px; background: url("/images/car_detail_arrow.png") no-repeat 0 0; } .car_detail_cont .carImg_imgArea .visual_wrap .arrows span.prev { left: 10px; } .car_detail_cont .carImg_imgArea .visual_wrap .arrows span.next { right: 10px; background-position: -30px 0; } .car_detail_cont .carImg_imgArea .visual_wrap .pageNum { width: 60px; height: 31px; line-height: 31px; position: absolute; bottom: 10px; left: 50%; margin-left: -30px; text-align: center; -webkit-border-radius: 30px; border-radius: 30px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; letter-spacing: -0.01em; } .car_detail_cont .carImg_imgArea .thumb_area { width: 781px; display: none;} .car_detail_cont .carImg_imgArea .thumb_area:before, .car_detail_cont .carImg_imgArea .thumb_area:after { content: ""; display: table; } .car_detail_cont .carImg_imgArea .thumb_area:after { clear: both; } .car_detail_cont .carImg_imgArea .thumb_area li { float: left; width: 70px; height: 47px; margin-right: 1px; margin-bottom: 1px; background-color: #000; position: relative; cursor: pointer; } .car_detail_cont .carImg_imgArea .thumb_area li img { width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); position: relative; z-index: 1; } .car_detail_cont .carImg_imgArea .thumb_area li.on img, .car_detail_cont .carImg_imgArea .thumb_area li.empty img { opacity: 1; filter: alpha(opacity=100); } .car_detail_cont .carImg_imgArea .thumb_area li.empty { cursor: auto; } .car_detail_cont .carImg_imgArea .thumb_area li.more { background-color: #6f6f71; } .car_detail_cont .carImg_imgArea .thumb_area li.more span { display: block; line-height: 47px; text-align: center; font-size: 12px; z-index: 5; color: #fff; text-decoration: underline; } .car_detail_cont .small_imgArea { width: 100%; position: relative; margin-top:10px;} .car_detail_cont .small_imgArea .row {margin: 0 -5px;} .car_detail_cont .small_imgArea .row .col-md-3 {padding:0 5px 10px 5px;} /* 우측 상단 정보 */ .car_detail_cont .prd_name { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: #333; margin:0 0 10px; line-height:40px;} .car_detail_cont h4.viewTitle {clear:both; padding:15px 0 7px; margin:0; font-weight:500; color:#666;} .car_detail_cont .price_box {width:100%; height:110px; background:#f4f4f4; border-radius: 10px; text-align:center;margin-bottom:15px;} .car_detail_cont .price_box2{ display: flex; align-items: center; justify-content: center;} .car_detail_cont .price_box .col-md-6 {margin:30px 0;} .car_detail_cont .price_box .col-md-6:first-child {border-right:1px solid #bebebe;} .car_detail_cont .price_box span {padding: 3px 8px; border-radius: 5px; background:#3980ec; color:#fff;} .car_detail_cont .price_box h5 {font-size: 24px; color:#000; font-weight:500; padding-top:10px; margin:0; font-family: 'GmarketSans';font-weight: 700; } .car_detail_cont .price_box h5.blue {color:#3980ec;} .car_detail_cont .deal_box .deal_info {width:100%; border-top:1px solid #000;} .car_detail_cont .deal_box .deal_info th {width:30%; background:#eff4fb; font-size: 16px; font-weight:500; color:#000; border-bottom:1px solid #ccc; text-align:center; padding:10px 0 10px 0;} .car_detail_cont .deal_box .deal_info td {width:70%; padding:10px 0; font-size: 16px; padding-left:20px; color:#666; border-bottom:1px solid #ccc;} .car_detail_cont .deal_box .deal_info td button {font-size: 14px;} .car_detail_cont .counsel_btn {margin:20px 0; text-align:center;} .car_detail_cont .counsel_btn button {padding:12px 60px; font-size:20px; font-weight:500;} /* 우측 하단 정보 - 빠른 상담신청 */ .requestEntry { height: auto; overflow: hidden; margin: 0 auto; background: #fff; padding-top: 35px; } .requestEntry p { /*background: url('http://img.sihyunrentcar.com/Site/Carvillage_ucl/PC/ico_request.png') no-repeat 0 0;*/ line-height:1.3; font-size: 38px; color: #000; font-weight: bold; letter-spacing: -2.5px; text-align:center; font-family: 'GmarketSans';font-weight: 700; } .requestEntry ul { margin-top: 10px; } .requestEntry ul li { height: 55px; clear: both; } .requestEntry ul li:last-child { margin-top: 15px; } .requestEntry ul li input { display: block; background: #fff; border: 1px solid #c8c8c8; height: 55px; line-height: 55px; font-size: 20px; border-radius:10px; } .requestEntry ul li input.name { width: 100%; padding: 0 20px; } .requestEntry ul li input.phone { width: 32%; height: 55px; line-height: 55px; float: left; margin-left: 11px; text-align: center; } .requestEntry ul li select { float: left; display: block; width: 32%; height: 55px; line-height: 55px; border: 1px solid #c8c8c8; padding-left: 20px; font-size: 20px; background: #fff; color: #000; border-radius:10px; } .requestEntry span.agree { clear: both; display: block; line-height: 30px; padding: 15px 0 12px; } .requestEntry span.agree label { color: #070707; font-size: 17px; } .requestEntry span.agree a { display: inline-block; background: #8f8f8f; width: 75px; height: 30px; line-height: 30px; font-weight: 400; color: #fff; text-align: center; font-size: 12px; margin-left: 10px; text-decoration: none; } .requestEntry span.btn_request { display: block; width: 100%; height: 80px; float: left; background: #22245e; border-radius:10px; } .requestEntry span.btn_request a { display: block; height: 80px; text-align: center; font-size: 30px; color: #fff; line-height: 85px; text-decoration: none; font-family: 'GmarketSans';font-weight: 700; } @media (max-width: 992px) { .car_detail_cont .view_bg {padding:0 0 0;} .car_detail_cont h4.viewTitle {font-size:14px;} .car_detail_cont .prd_name {font-size: 20px; line-height:28px; margin:15px 0 15px;} .car_detail_cont .price_box .col-md-6 {margin: 15px 0;} .car_detail_cont .price_box {height:82px;} .car_detail_cont .price_box span {font-size: 11px;} .car_detail_cont .price_box h5 {font-size: 18px;} .car_detail_cont .deal_box h4 {padding-top:7px; font-weight:500; font-weight:18px; color:#666;} .car_detail_cont .deal_box .deal_info th, .car_detail_cont .deal_box .deal_info td {font-size: 12px;} .car_detail_cont .deal_box .deal_info td button, .car_detail_cont .counsel_btn button {font-size: 12px;} .car_detail_cont .counsel_btn button {padding: 12px 40px} } @media (max-width: 991px) { .car_detail_cont .view_bg {height: auto;} .car_detail_cont .wrapper { width: 100%;} .car_detail_cont .carImg_imgArea { width: 100%; } .car_detail_cont .carImg_imgArea .visual_wrap { width: 100%; height:auto; } .car_detail_cont .carImg_imgArea .visual_wrap .arrows span.prev {top:150px;} .car_detail_cont .carImg_imgArea .visual_wrap .arrows span.next {top:150px;} } @media (max-width: 767px) { .car_detail_cont .carImg_imgArea .visual_wrap {height:300px;} .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual img {height:300px;} .requestEntry p{font-size:28px;} .requestEntry ul li input{font-size:16px;} .requestEntry ul li select{font-size:16px;} .requestEntry span.agree label{font-size:14px;} .requestEntry span.btn_request { display: block; width: 100%; height: 65px; float: left; background: #22245e; border-radius:10px; } .requestEntry span.btn_request a { display: block; height: 65px; text-align: center; font-size: 24px; color: #fff; line-height: 70px; text-decoration: none; font-family: 'GmarketSans'; font-weight: 700; } } @media (max-width:600px) { .requestEntry ul li input.phone{width:31%;} } @media (max-width: 430px) { .car_detail_cont .carImg_imgArea .visual_wrap {height:250px;} .car_detail_cont .carImg_imgArea .visual_wrap .visual_area .visual img {height:250px;} .requestEntry ul li input.phone{width:30%;} } /* 차량 정보 테이블 */ .car_detail_cont .viewTable1 {width:100%; border-top:1px solid #000; margin-bottom: 30px;} .car_detail_cont .viewTable1 li {display:inline; float:left; /*padding:10px 0;*/ font-size:16px; border-bottom:1px solid #ccc; height:46px; line-height:46px;} .car_detail_cont .viewTable1 li.tit {width:10%; text-align:center; background:#eff4fb; font-weight:500;} .car_detail_cont .viewTable1 li.con {width:40%; background:#fff; padding-left:20px; color:#666;} @media (max-width: 991px) { .car_detail_cont .viewTable1 li {font-size:12px; height:40px; line-height:40px;} .car_detail_cont .viewTable1 li.tit {width:30%;} .car_detail_cont .viewTable1 li.con {width:70%;} } /* 옵션 정보 테이블 */ .car_detail_cont .viewTable2 {width:100%; border-top:1px solid #000; border-bottom:1px solid #ccc;} .car_detail_cont .viewTable2 .box {float:left;} .car_detail_cont .viewTable2 .box:nth-child(1) {width:24%;} .car_detail_cont .viewTable2 .box:nth-child(2) {width:50%; border-left:1px solid #ccc; border-right:1px solid #ccc;} .car_detail_cont .viewTable2 .box:nth-child(3) {width:26%;} .car_detail_cont .viewTable2 .box li {display:inline; float:left; padding:10px 0; font-size:16px; border-bottom:1px solid #ccc;} .car_detail_cont .viewTable2 .box li.tit {width:100%; text-align:center; background:#f2f2f2; font-weight:500;} .car_detail_cont .viewTable2 .box li.con {width:100%; min-height:150px; background:#fff; color:#666;} .car_detail_cont .viewTable2 .box li.con ul.option {width:100%; padding:0 25px;} .car_detail_cont .viewTable2 .box li.con ul.option li {border-bottom:0; padding:2px 0 0 0; float:left;} .car_detail_cont .viewTable2 .box li.con ul.option li.on {color:#3980ec;} .car_detail_cont .viewTable2 .box:nth-child(1) li.con ul.option li {width:50%;} .car_detail_cont .viewTable2 .box:nth-child(2) li.con ul.option li {width:33.33%;} .car_detail_cont .viewTable2 .box:nth-child(3) li.con ul.option li {width:50%;} @media (max-width: 991px) { .car_detail_cont .viewTable2 .box {} .car_detail_cont .viewTable2 .box li {font-size:12px;} .car_detail_cont .viewTable2 .box li.con {min-height: auto;} .car_detail_cont .viewTable2 .box:nth-child(1), .car_detail_cont .viewTable2 .box:nth-child(2), .car_detail_cont .viewTable2 .box:nth-child(3) {width:100%;} .car_detail_cont .viewTable2 .box:nth-child(2) {border:0;} .car_detail_cont .viewTable2 .box:nth-child(1) li.con ul.option li, .car_detail_cont .viewTable2 .box:nth-child(2) li.con ul.option li, .car_detail_cont .viewTable2 .box:nth-child(3) li.con ul.option li {width:50%;} } /* 차량 설명 */ .car_detail_cont .viewInfo {min-height:300px; padding:20px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-bottom:50px;} .car_detail_cont .viewInfo img {width: auto;} .car_detail_cont .viewInfo p {word-break:break-all;} @media (max-width: 991px) { .car_detail_cont .viewInfo img {width: 100%;} } .sub_top {position: relative; width:100%; height:380px; padding-top:150px; background:url('/images/sub_topBg.jpg'); background-size:cover; background-position: center center;} .sub_top p, .sub_top h3 {color:#fff; text-shadow:1px 0 2px #000;} .sub_top p {font-size:16px; margin:0 0 5px;} .sub_top h3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 30px)); font-weight:bold; font-size: 45px;} @media (max-width: 992px) { .sub_top {width:100%; height:250px; padding-top:80px; background-position: 62% 50%; } .sub_top p {font-size:10px; margin:0; letter-spacing:-1px;} .sub_top h3 {font-weight:bold; font-size:24px; margin:0;} } /*메인페이지 코로나 팝업*/ .covid {background:#3980ec; position:relative;} .covid .container {overflow:hidden;} .covid .container .safe_ico {padding:40px 30px;} .covid .container .safe_tx {float:left;} .covid .container .safe_tx h3 {margin-top:45px;width:302px;background:url('/images/bg_ti_safe.png') left center no-repeat;font-size:26px;color:#ffeb00;font-weight:700;line-height:34px;text-align:center;} .covid .container .safe_tx ul {margin-top:10px;} .covid .container .safe_tx ul li {padding-left:12px;font-size:20px;color:#fff;font-weight:500;line-height:28px;text-indent:-12px;} @media (max-width: 992px) { .covid {padding:30px 0;} .covid .container .safe_ico {float:left;width:20%; margin-right:5%; padding:0;} .covid .container .safe_tx {float:left;width:75%;} .covid .container .safe_tx h3 {width:200px;font-size:17px;line-height:22px;margin-top:0;} .covid .container .safe_tx ul {margin-top:14px;} .covid .container .safe_tx ul li {padding:0 18px 0 21px;font-size:14px;line-height:21px;text-indent:-7px;} }