/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ #skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skipToContent a:focus, #skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px} .contain {width:100%; padding-left:30px; padding-right:30px; margin:0 auto; max-width:1460px;} .contain.type01 {max-width:1780px;} #sub .contain {max-width:1260px;} .contain:after {content:""; display:block; clear:both;} /* header */ #header {position:relative; top:0; left:0; color:#fff; padding:0 4%; width:100%; z-index:100;} #header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; padding:0; max-width:100%; height:100px; z-index:2;} .sitelogo a {display:block; width:228px; height:35px; background:url("../images/common/logo.png") 0 50% no-repeat; background-size:contain;} /* .fancybox-overlay-fixed {pointer-events:none;} */ #gnb {flex:1 1 auto; min-width:0; widht:1%;} #gnb > ul {display:flex; justify-content:center;} #gnb > ul > li {position:relative; padding:0 35px;} #gnb > ul > li.active > a {color:#005381;} #gnb > ul > li > a {display:block; color:#2c2c2c; font-size:18px; font-weight:600; line-height:100px; letter-spacing:0em;} #gnb .submenu {display:none; position:absolute; left:0px; text-align:center;} #gnb .submenu.m5 {right:-100%; left:auto;} #gnb .submenu > ul {display:flex; padding:22px 32px 22px 0px;} #gnb .submenu > ul > li {padding:0 20px;} #gnb .submenu:hover .sbmenu {display:block;} #gnb .submenu:hover .submenu-bg {height:150px !important;} #gnb .submenu ul > li .sbmenu {display:none; margin-top:5px; background:#fff; width:100%; height:100%;} #gnb .submenu ul > li .sbmenu > ul {display:block; text-align:left; padding-left:0.5em; text-indent:-0.5em; padding:0;} #gnb .submenu ul > li .sbmenu > ul > li {padding-left:0; padding-top:15px;} #gnb .submenu ul > li .sbmenu > ul > li > a {font-size:15px; color:#878787; letter-spacing:0em; line-height:1.73em; font-weight:400;} #gnb .submenu ul > li .sbmenu > ul > li > a:hover {color:#005381; text-decoration:underline;} #gnb .submenu ul > li > a {display:block; color:#2c2c2c; font-size:16px; line-height:1.45em; font-weight:600; letter-spacing:0em; white-space:nowrap; text-align:left;} #gnb .submenu ul > li > a:hover {text-decoration:underline;} #gnb .submenu ul > li.active > a {color:#005381;} #gnb .depthmenu {margin-top:20px;} #gnb .depthmenu > ul {margin-bottom:-12px;} #gnb .depthmenu > ul > li {margin-bottom:12px;} #gnb .depthmenu > ul > li:hover > a, #gnb .depthmenu > ul > li.active > a {color:#005381 !important; text-decoration:underline !important;} #gnb .depthmenu > ul > li > a {font-size:15px !important; color:#878787 !important; font-weight:400 !important; letter-spacing:0em; line-height:1.73em !important; padding-left:0.5em; text-indent:-0.5em;} #gnb .depthmenu.menu02 {margin-top:5px; margin-left:10px;} #gnb .depthmenu.menu02 ul {} #gnb .depthmenu.menu02 ul > li {margin-bottom:0;} #gnb .depthmenu.menu02 ul > li > a {font-size:14px !important; letter-spacing:0em; color:#878787; line-height:1.71em;} #gnb .depthmenu.menu02 ul > li:hover > a {color:#005381;} .submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff; border-top:1px solid #ddd;} .pull-right {display:flex; align-items:center; order:2;} .pull-right .contact-go {font-size:16px; color:#005381; font-weight:500; letter-spacing:0em; margin-right:25px;} .language {display:flex; align-items:center; border:1px solid #505050; border-radius:25px;} .language a {display:block; position:relative; padding:10px 12px; color:#505050; font-size:16px; font-weight:500; line-height:1.3em; letter-spacing:0; opacity:.8;} .language a span img {margin-right:15px;} .language a.active {opacity:1;} .util {position:relative; margin-left:25px;} .util i {display:block; width:32px; height:32px; background-position:50% 50%; background-repeat:no-repeat;} .util .ico-user {background-image:url("../images/common/icon_user_w.png");} .util ul {display:none; position:absolute; left:50%; margin-top:13px; text-align:center; width:110px; margin-left:-55px; padding:20px 0; background:#fff; border:1px solid #000;} .util ul li a {display:block; padding:4px; color:#2c2c2c; font-weight:500; line-height:1.5em; letter-spacing:0em;} .util ul li a:hover {color:#d12127 !important;} .util.active ul {display:block;} .btn-all-menu {display:block; margin-left:20px; width:33px; height:33px; background:url("../images/common/icon_menu_w.png") 50% 50% no-repeat;} /* 전체메뉴 */ .all-menu {position:fixed; top:0; left:0; width:100%; background:#fff; -ms-transform:translateY(-100%); -webkit-transform:translateY(-100%); transform:translateY(-100%); transition:.4s cubic-bezier(.04,.62,0,.96); z-index:101;} .all-menu-header {padding:0 5%;} .all-menu-header .contain {position:relative; display:flex; align-items:center; justify-content:space-between; max-width:100%; padding:0; height:115px; max-width:100% !important;} .all-menu-header .close {position:absolute; top:50%; margin-top:-17.5px; right:0; width:35px; height:35px; background:#2c2c2c url("../images/common/close.png") 50% 50% no-repeat; background-size:21px;} .all-menu-content {border-top:1px solid #ddd; text-align:center;} .all-menu-content .inner {max-width:1780px; margin:0 auto; padding-left:30px; padding-right:30px;} .all-menu-content .menu > ul {display:flex;} .all-menu-content .menu > ul > li {flex:1; text-align:left; padding:35px 20px 0 30px; border-left:1px solid #ddd;} .all-menu-content .menu > ul > li:last-child {border-right:1px solid #ddd;} .all-menu-content .menu > ul > li > a {display:block; color:#002a42; font-size:22px; font-weight:600; line-height:1.3em; letter-spacing:0em;} .all-menu-content .menu > ul > li > a:hover {text-decoration:underline;} .all-menu-content .menu > ul > li .submenu {padding-top:30px;} .all-menu-content .menu > ul > li .submenu ul > li {margin-bottom:12px;} .all-menu-content .menu > ul > li .submenu ul > li > a {display:block; color:#2c2c2c; font-size:16px; font-weight:600; line-height:1.5em; letter-spacing:0em; margin-bottom:35px;} .all-menu-content .menu > ul > li .submenu .depthmenu {margin-bottom:35px; margin-top:-10px;} .all-menu-content .menu > ul > li .submenu .depthmenu ul {} .all-menu-content .menu > ul > li .submenu .depthmenu ul > li {margin-bottom:15px;} .all-menu-content .menu > ul > li .submenu .depthmenu ul > li:hover > a {color:#005381;} .all-menu-content .menu > ul > li .submenu .depthmenu ul > li > a {font-size:15px; color:#878787; letter-spacing:0em; line-height:1.73em; font-weight:400; padding-left:0.5em; text-indent:-0.5em; margin-bottom:0;} .all-menu-content .menu > ul > li .submenu .depthmenu.menu02 {margin-top:15px; margin-left:10px;} .all-menu-content .menu > ul > li .submenu .depthmenu.menu02 ul {} .all-menu-content .menu > ul > li .submenu .depthmenu.menu02 ul > li {margin-bottom:0;} .all-menu-content .menu > ul > li .submenu .depthmenu.menu02 ul > li > a {font-size:14px; letter-spacing:0em; color:#878787; line-height:1.71em;} .all-menu-content .menu > ul > li .submenu .depthmenu.menu02 ul > li:hover > a {color:#005381;} .all-menu-content .menu > ul > li .submenu ul li a:hover {color:#d12127; text-decoration:underline;} .all-menu-content .sns {margin-top:60px;} .all-menu-content .sns p {color:#2c2c2c; font-size:18px; font-weight:600; line-height:1.4em; margin-bottom:18px;} .all-menu-content .sns ul {display:flex; justify-content:center;} .all-menu-content .sns ul li {padding:0 7px;} .all-menu-content .sns ul li a {display:block; border-radius:100%; background:#eeeeee;} .all-menu-content .sns ul li i {display:block; width:58px; height:58px; background-position:50% 50%; background-repeat:no-repeat;} .all-menu-content .sns ul li .i-facebook {background-image:url("../images/common/sns_facebook.png");} .all-menu-content .sns ul li .i-instagram {background-image:url("../images/common/sns_instagram.png");} .all-menu-content .sns ul li .i-linkedin {background-image:url("../images/common/sns_linkedin.png");} .all-menu-content .sns ul li .i-twitter {background-image:url("../images/common/sns_twitter.png");} .all-menu-content .sns ul li .i-youtube {background-image:url("../images/common/sns_youtube.png");} .all-menu-content .sns ul li a:hover {background:#d12127} .all-menu-content .sns ul li a:hover .i-facebook {background-image:url("../images/common/sns_facebook_on.png");} .all-menu-content .sns ul li a:hover .i-instagram {background-image:url("../images/common/sns_instagram_on.png");} .all-menu-content .sns ul li a:hover .i-linkedin {background-image:url("../images/common/sns_linkedin_on.png");} .all-menu-content .sns ul li a:hover .i-twitter {background-image:url("../images/common/sns_twitter_on.png");} .all-menu-content .sns ul li a:hover .i-youtube {background-image:url("../images/common/sns_youtube_on.png");} .all-menu-opened .all-menu {-ms-transform:translateY(0); -webkit-transform:translateY(0); transform:translateY(0); border-bottom:1px solid #dfdfdf;} /* for mobile */ .btn-m-menu {display:none; margin-left:20px; width:33px; height:33px; background:url("../images/common/icon_menu_w.png") 50% 50% no-repeat; background-size:contain;} .mobile-navigation {display:none; position:fixed; top:0; right:0; width:300px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;} .mobile-navigation .home {height:80px; padding:0 20px; display:flex; align-items:center;} .mobile-navigation .home a {display:block;} .mobile-navigation .nav-menu>ul {border-top:1px solid #dfdfdf;} .mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;} .mobile-navigation .nav-menu>ul>li>a {position:relative; padding:13px 20px; display:block; color:#242424; font-size:18px; font-weight:700; line-height:1.5em;} .mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-75%) rotate(45deg); width:12px; height:12px; border-right:2px solid #242424; border-bottom:2px solid #242424;} .mobile-navigation .nav-menu>ul>li.active>a {color:#005381;} .mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg);} .mobile-navigation .nav-menu .submenu {display:none; padding:10px 20px; background:#005381; color:#fff; font-size:16px; line-height:1.5em;} .mobile-navigation .nav-menu .submenu > ul > li > a {display:block; padding:6px 0;} .mobile-navigation .close {position:absolute; top:27px; right:13px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;} .mobile-navigation .close:before, .mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#121212;} .mobile-navigation .close:before {transform:rotate(45deg);} .mobile-navigation .close:after {transform:rotate(-45deg);} .mobile-navigation .sns {padding:35px 20px;} .mobile-navigation .sns p {color:#2c2c2c; font-size:15px; font-weight:600; line-height:1.4em; margin-bottom:15px;} .mobile-navigation .sns ul {display:flex; margin:0 -4px;} .mobile-navigation .sns ul li {padding:0 4px;} .mobile-navigation .sns ul li a {display:block; border-radius:100%; background:#eeeeee;} .mobile-navigation .sns ul li i {display:block; width:44px; height:44px; background-position:50% 50%; background-repeat:no-repeat; background-size:32px;} .mobile-navigation .sns ul li .i-facebook {background-image:url("../images/common/sns_facebook.png");} .mobile-navigation .sns ul li .i-instagram {background-image:url("../images/common/sns_instagram.png");} .mobile-navigation .sns ul li .i-linkedin {background-image:url("../images/common/sns_linkedin.png");} .mobile-navigation .sns ul li .i-twitter {background-image:url("../images/common/sns_twitter.png");} .mobile-navigation .sns ul li .i-youtube {background-image:url("../images/common/sns_youtube.png");} .mobile-navigation .sns ul li a:hover {background:#d12127} .mobile-navigation .sns ul li a:hover .i-facebook {background-image:url("../images/common/sns_facebook_on.png");} .mobile-navigation .sns ul li a:hover .i-instagram {background-image:url("../images/common/sns_instagram_on.png");} .mobile-navigation .sns ul li a:hover .i-linkedin {background-image:url("../images/common/sns_linkedin_on.png");} .mobile-navigation .sns ul li a:hover .i-twitter {background-image:url("../images/common/sns_twitter_on.png");} .mobile-navigation .sns ul li a:hover .i-youtube {background-image:url("../images/common/sns_youtube_on.png");} .mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;} html.menu-opened {overflow:hidden;} html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);} html.menu-opened .mobile-overlay {display:block;} /* main */ .main-slider {line-height:0;} .main-visual {position:relative; overflow:hidden;} .main-visual .item {position:relative; height:880px;} .main-visual .item .img {width:100%; height:880px;} .main-visual .item img {width:100%; height:880px;} .main-visual .item-wrap {position:relative; height:100vh; overflow:hidden;} .main-visual .video-area video {position:absolute; top:0; left:0; width:100%; height:100vh; background-color: black; background-position: center center; background-size: contain; object-fit: cover;} .main-visual .caption {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; color:#fff; text-align:left; z-index:40;} .main-visual .caption h3 {font-size:58px; color:#fff; font-weight:700; letter-spacing:0; line-height:1.3em; margin-bottom:30px;} .main-visual .caption span {font-size:54px;} .main-visual .caption p {font-size:28px; font-weight:700; letter-spacing:0; line-height:1.71em; margin-bottom:20px;} .main-visual .caption .tt {font-size:18px; color:#fff; letter-spacing:0; line-height:1.778em; margin-bottom:50px;} .main-visual .slick-arrow {} .main-visual .btn {display:block; width:100%; max-width:180px; text-align:center; font-size:20px; font-weight:400; letter-spacing:0em; height:64px; line-height:64px; border:1px solid rgba(255, 255, 255, 0.5); border-radius:35px;} .main-visual .btn:hover {background:#005381; color:#fff; border:1px solid #005381;} .main-visual .slick-dots {position:absolute; bottom:40px; left:0; width:100%; text-align:center; z-index:50; line-height:0;} .main-visual .slick-dots li {position:relative; display:inline-block; padding:0 8px;} .main-visual .slick-dots li button {position:relative; display:block; background:#fff; width:15px; height:15px; border:0; border-radius:100%; overflow:hidden; text-indent:-9999px;} .main-visual .slick-dots li.slick-active button {background:#0378b5; border-color:transparent; } .main-visual .slick-arrow {position:absolute; top:50%; margin-top:-24px; z-index:50; width:25px; height:48px; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border:0; overflow:hidden; text-indent:-9999em; transition:.2s; background-size:contain;} .main-visual .slick-prev {left:100px; background-image:url("../images/main/slide_prev.png"); opacity:0.5;} .main-visual .slick-prev:hover {background-image:url("../images/main/slide_prev_w.png"); opacity:1;} .main-visual .slick-next {right:100px; background-image:url("../images/main/slide_next.png");} .main-visual .slick-next:hover {background-image:url("../images/main/slide_next_w.png");} .main-visual .slick-dots {position:absolute; bottom:80px; left:0; width:100%; text-align:center; z-index:50; line-height:0;} .main-visual .slick-dots li {position:relative; display:inline-block; padding:0 5px;} .main-visual .slick-dots li button {position:relative; display:block; background:rgba(255, 255, 255, 0.5); width:11px; height:11px; border:0; border-radius:100%; overflow:hidden; text-indent:-9999px;} .main-visual .slick-dots li.slick-active button {background:#fff; border-color:transparent;} /* 메인비주얼 모션 */ .main-visual .text-wrap {margin:0 auto; width:100%; max-width:1460px; text-align:left; padding-left:30px; padding-right:30px;} .main-visual .slick-current .text-wrap p {opacity:1; transform:translateX(0);} .main-visual .slick-current .text-wrap .inline:before {opacity:1; transform:translateX(0);} @keyframes proBar{ 0%{width:0;} 100%{width:140px;} } @keyframes m_proBar{ 0%{width:0;} 100%{width:100px;} } .scroll {position:absolute; width:98px; bottom:55px; left:50%; margin-left:-49px; text-align:center; z-index:50; animation:move_up_down 2s linear infinite; cursor:pointer;} @keyframes move_up_down { 0%,100%{ transform:translateY(15px); } 50% { transform:translateY(0); } } .main-tit {} .main-tit h3 {font-size:58px; color:#2c2c2c; letter-spacing:0em; line-height:1.0em;} /* main-service */ .main-service {margin:140px 0;} .sec1 { position: relative; } .sec1:after { content: ""; position: absolute; top: 0; right: 260px; width: 470px; height: 321px; background: url(../images/main/bg-business.jpg) no-repeat 100%/cover; z-index: -1; } .sec1 .business-list { margin-top: 93px; } .sec1 .business-list ul { display: flex; } .sec1 .business-list ul li { width: 25%; } .sec1 .business-list .link { display: block; position: relative; width: 100%; height: 500px; color: #fff; overflow: hidden; transition: .4s; } .sec1 .business-list .link:hover { transform: translateY(-50px);} .sec1 .business-list .link:hover:before {display:none;} .sec1 .business-list .link:hover strong {display:block;} .sec1 .business-list .link:hover .bg { filter: grayscale(0%); } .sec1 .business-list .link .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; filter: grayscale(100%); } .sec1 .business-list .link:before {position:absolute; content:""; top:0; left:0; background:rgba(255, 255, 255, 0.2); width:100%; height:100%; z-index:99;} .sec1 .business-list .link .bg1 { background-image: url(../images/main/business1.jpg); } .sec1 .business-list .link .bg2 { background-image: url(../images/main/business3.jpg); } .sec1 .business-list .link .bg3 { background-image: url(../images/main/business2.jpg); } .sec1 .business-list .link .bg4 { background-image: url(../images/main/business4.jpg); } .sec1 .business-list .link .bg5 { background-image: url(../images/main/business5.jpg); } .sec1 .link .inner {position: absolute; bottom: 0; left: 0; transition: .4s; display: flex; flex-direction: column; width: 100%; height: 100%; padding:0 30px;} .sec1 .link .inner .eng {padding-top:50px; font-size:24px; font-weight:700; line-height:1.58em; margin-bottom:20px;} .sec1 .link .inner strong {font-size:16px; font-weight:400; line-height: 1.63em; display:none;} .sec1 .link .arrow {position: absolute; right: 0; bottom: 0; width: 60px; height: 60px; background: url(../images/main/box-arrow.jpg) no-repeat 100%; opacity: 0; } .sec1 .link:hover .arrow {opacity:1;} /* main-about */ .main-about {background-size:cover; background-repeat:no-repeat; background-position:50% 50%; padding:200px 0;} .main-about .main-tit {} .main-about .main-tit h3 {color:#fff;} .main-about .txt {font-size:18px; color:#fff; letter-spacing:0em; line-height:1.56em; padding:25px 0 60px;} .main-about .btn {height:65px; line-height:65px; border-radius:35px; font-size:18px; letter-spacing:0em; display:block; width:100%; max-width:185px; background:#005381; color:#fff; padding:0 25px;} .main-about .btn span {margin-left:15px;} .more-btn {display:flex; flex-direction:column; justify-content:center; position:fixed; right:0; background:#005381; bottom:80px; color:#fff; width:50px; height:120px; align-items:center; z-index:99;} .more-btn p {white-space:nowrap; transform: rotate(270deg);} .modal {max-width:740px !important;} .mv-form .item {margin-bottom:20px; min-height:50px; display:flex; border:1px solid #ddd; background-color:#fff; align-items:center;} .mv-form .item:last-child {margin-bottom:0;} .mv-form .item .col-l {padding-left:20px; flex:1 140px; max-width:140px; font-size:16px; color:#505050;} .mv-form .item .col-r {flex:1;} .mv-form .item .col-r .input {border:none;} .mv-form .item .col-r .group {margin-right:20px; font-size:15px;} .mv-form .item .col-r .group:last-child {margin-right:0;} .mv-form .form-agree {display:flex; justify-content:space-between; margin-bottom:0;} .mv-form .btn-pack {background:#005381; color:#fff; letter-spacing:0em; border:1px solid #005381; border-radius:35px;} .mv-form .btn-pack.xlarge {max-width:160px; min-width:160px; line-height:65px; height:65px;} .mv-form .checkbox label:before {width:24px; height:24px; border-radius:50%;} .mv-form .checkbox input:checked + label:before {border-radius:50%; border:1px solid #121212;} .mv-form .form-agree .check a {font-size:16px; color:#a8a8a8; border:0; margin-left:0; padding:0;} .modal a.close-modal {width:26px !important; height:26px !important; top:60px !important; right:60px !important;} .someClass .fancybox-close {width:26px; height:26px; top:30px; right:30px; background-size: cover !important; background-repeat:no-repeat;} .someClass .fancybox-close {background-image: url('../images/sub/fancy-close.png');} .prd-wrap {padding:60px; background:#fff;} .prd-wrap h2 {font-size:48px; color:#2c2c2c; letter-spacing:0em; font-weight:700; line-height:1.17em; margin-bottom:55px;} /* main-solution */ .main-solution {background:#f4f4f4; padding:140px 0; background-size:cover; background-repeat:no-repeat; background-position:50% 50%;} .main-solution-list {display:flex; margin-left:-30px; margin-top:90px;} .main-solution-list li {width:calc(20% - 30px); margin-left:30px; background:#fff;} .main-solution-list li a {display:block; padding:33px 30px;} .main-solution-list li a .s-tit {font-size:14px; font-weight:700; color:#005381; letter-spacing:0em; line-height:1.3em;} .main-solution-list li a .lg-tit {font-size:28px; color:#2c2c2c; letter-spacing:0em; line-height:1.3em; font-weight:700; margin:25px 0 15px;} .main-solution-list li a .txt {font-size:14px; color:#505050; letter-spacing:0em; line-height:1.71em; margin-bottom:40px; min-height:95px;} .main-solution-list li a p {font-size:16px; color:#2c2c2c; letter-spacing:0em; font-weight:700; line-height:1.50em;} /* sub */ .sub-visual {position:relative; display:table; table-layout:fixed; width:100%; height:540px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;} .sub-visual.bg1 {background-image:url("../images/common/sv1.jpg");} .sub-visual.bg2 {background-image:url("../images/common/sv2.jpg");} .sub-visual.bg2_1 {background-image:url("../images/common/sv2-1.jpg");} .sub-visual.bg2_2 {background-image:url("../images/common/sv2-2.jpg");} .sub-visual.bg2_3 {background-image:url("../images/common/sv2-3.jpg");} .sub-visual.bg2_4 {background-image:url("../images/common/sv2-4.jpg");} .sub-visual.bg2_5 {background-image:url("../images/common/sv2-5.jpg");} .sub-visual.bg3 {background-image:url("../images/common/sv3.jpg");} .sub-visual.bg3_2 {background-image:url("../images/common/sv3_2.jpg");} .sub-visual.bg4 {background-image:url("../images/common/sv4.jpg");} .sub-visual.bg5 {background-image:url("../images/common/sv5.jpg");} .sub-visual.bg6 {background-image:url("../images/common/sv6.jpg");} .sub-visual.bg7 {background-image:url("../images/common/sv7.jpg");} .sub-visual .cell {display:table-cell; vertical-align:middle; width:100%; height:100%;} .sub-visual .in {text-align:left; width: 100%; max-width:1200px; margin: 0 auto;} .sub-visual h3 {position:relative; text-align:center; font-size:48px; line-height:1.3em; color:#fff; font-weight:700; letter-spacing:0em; margin-bottom:25px;} .sub-visual p {font-size:20px; font-weight:500; letter-spacing:0em; line-height:1.3em; color:#fff; text-align:center;} .sub-title.center {text-align:center;} .sub-title.mgb {margin-bottom:90px;} .real-cont {padding-bottom:100px;} .real-cont.none {padding-bottom:0;} #sub #container {display:flex; width:100%; max-width:1460px; padding-left:30px; padding-right:30px; margin:0 auto; margin-top:120px;} #lnb {width:260px; margin-right:60px; margin-bottom:50px;} .lnb h2 {display:flex; flex-direction:column; justify-content:center; align-items:center; height:110px; padding:10px; text-align:center; color:#fff; font-size:28px; font-weight:700; line-height:1.33em; background:#005381;} .lnb > ul > li {border-bottom:1px solid #dfdfdf;} .lnb > ul > li > a {display:flex; justify-content:space-between; align-items:center; min-height:75px; padding:10px 10px 10px 20px; color:#242424; background:#fafafa; font-size:17px; font-weight:500; line-height:1.33em;} .lnb > ul > li > a:after {content:""; width:8px; height:14px; margin-left:20px; background:url("../images/common/lnb_off.svg") 50% 50% no-repeat; background-size:contain; transition:.2s;} .lnb > ul > li > a:hover {color:#005381;} .lnb > ul > li > a:hover::after {transform:translateX(5px); background-image:url("../images/common/lnb_on.svg");} .lnb > ul > li.active > a {color:#005381; font-weight:700;} .lnb > ul > li.active > a:after {background-image:url("../images/common/lnb_on.svg");} .lnb .submenu {padding:20px; border-top:1px solid #ddd; padding-right:10px;} .lnb .submenu > ul > li {padding:8px 0;} .lnb .submenu > ul > li > a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:15px; line-height:1.33em;} .lnb .submenu > ul > li > a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;} .lnb .submenu > ul > li > a:hover, .lnb .submenu > ul > li.active > a {color:#005381; font-weight:500;} .lnb .submenu > ul > li > a:hover:before, .lnb .submenu > ul > li.active > a:before {background:#005381;} .lnb .submenu .depthmenu {padding-left:15px; padding-top:12px;} .lnb .submenu .depthmenu ul {} .lnb .submenu .depthmenu ul li {} .lnb .submenu .depthmenu ul li a {font-size:14px; color:#878787; letter-spacing:0em; margin-bottom:15px;} /* .lnb .submenu .depthmenu ul li.active a {color:#2c2c2c !important;} */ .lnb .submenu .depthmenu.menu02 {margin-left:10px; margin-top:15px;} .lnb .submenu .depthmenu.menu02 ul {} .lnb .submenu .depthmenu.menu02 ul > li {} .lnb .submenu .depthmenu.menu02 ul > li > a {font-size:14px; color:#878787; letter-spacing:0em; line-height:1.71em;} #lnb .go-menu {margin-top:20px;} #lnb .go-menu a {display:flex; font-size:18px; letter-spacing:0; background:#005381; height:65px; line-height:65px; color:#fff; padding:0 20px; border-radius:35px;} #lnb .go-menu a span {display:inline-block; padding-left:15px;} .lnb-m {display:none;} .lnb-m .depth1 ul {display:flex;} .lnb-m .depth1 ul li {flex:1; text-align:center; border:1px solid #ddd; border-left:0;} .lnb-m .depth1 ul li:last-child {border-right:0;} .lnb-m .depth1 ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50px; padding:0 15px; color:#242424; font-size:16px; font-weight:500; line-height:1.2em; letter-spacing:-.03em;} .lnb-m .depth1 ul li.active {background:#005381; border-color:#005381;} .lnb-m .depth1 ul li.active a {color:#fff;} .lnb-m .depth2 {padding:15px 5px; background:#fafafa; border-bottom:1px solid #ddd;} .lnb-m .depth2 ul {display:flex;} .lnb-m .depth2 > ul > li {width:auto; padding:0 15px;} .lnb-m .depth2 > ul > li > a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:14px; line-height:1.33em;} .lnb-m .depth2 > ul > li > a br {display:none;} .lnb-m .depth2 > ul > li > a:before {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; background:#ccc;} .lnb-m .depth2 > ul > li.active > a {color:#005381;} .depthmenu {} .depthmenu > ul {} .depthmenu > ul > li {width:auto; padding:0 !important; padding-right:5px !important;} .depthmenu > ul > li a {font-size:13px !important; color:#505050 !important;} .depthmenu > ul > li.active a {color:#005381 !important;} #contArea {flex:1 1 auto; min-width:0; width:1%;} .sub-title {margin-bottom:50px;} .sub-title h2 {color:#2c2c2c; font-size:36px; font-weight:700; line-height:1.3em; letter-spacing:0em;} @media (max-width: 1024px) { #sub #container {display:block; padding:0; margin-top:0;} #lnb {width:auto; margin:0;} .lnb {display:none;} .lnb-m {display:block;} #contArea {width:auto; padding:0 30px;} .sub-title {padding:40px 0 15px; margin-bottom:10px;} .sub-title h2 {font-size:30px;} } @media (max-width: 640px) { .lnb-m .depth1 ul li a {height:40px; font-size:14px; white-space:nowrap;} .lnb-m .depth2 {padding:13px 5px;} .lnb-m .depth2 ul li {width:auto; padding:0 10px;} .lnb-m .depth2 ul li a {position:relative; display:block; padding:0 0 0 12px; color:#505050; font-size:14px; line-height:1.33em; white-space:nowrap;} #contArea {padding:0 16px;} .sub-title {padding:30px 0 12px; margin-bottom:0;} .sub-title h2 {font-size:22px;} } /* form */ .checkbox input:checked + label:before {background:#005381 url(/images/bbs/checkbox.png) 50% 50% no-repeat; border-radius:3px;} @-webkit-keyframes pulse { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes pulse { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /* footer */ #footer {padding:75px 0; position:relative; width:100%; color:#fff; background:#333; font-weight:500; font-size:16px; line-height:2.0em;} #footer .contain {width:100%; max-width:1780px;} #footer .foot-info {} #footer .foot-info .company {font-size:20px; font-weight:700; letter-spacing:0em; color:#fff; line-height:1.6em; margin-bottom:10px;} #footer .foot-info address {font-style:normal;} #footer .foot-info span {position:relative; display:inline-block; padding-right:20px; letter-spacing:0em; font-size:14px;} #footer .foot-info span.mgt {margin-top:25px; font-size:14px; color:#878787; letter-spacing:0em;} #footer .foot-info span.pd {font-weight:600;} #footer .foot-info span.s-txt {color:#898989; font-size:13px;} #footer .foot-info span.none:before {display:none;} #footer .foot-info span.top {display:inline-block; margin-top:15px;} #footer .f-ico {padding-right:5px; padding-top:5px;} #footer .f-ico img {display:inline-block; padding-top:3px;} #footer .foot-info .bar {margin:0 8px;} #footer .foot-links .mgt {font-size:14px; color:rgba(255, 255, 255, 0.5); font-weight:400; margin-top:12px;} #footer .foot-links ul {display:flex; margin-top:40px;} #footer .foot-links ul li {position:relative; font-size:14px; color:#fff; padding-left:15px; font-weight:400; letter-spacing:0em; margin-right:22px;} #footer .foot-links ul li:before {position:absolute; content:""; width:5px; height:5px; background:#fff; top:50%; margin-top:-2.5px; left:0; border-radius:50%;} #footer .foot-link-wrap .img {text-align:right;} #footer .copyright {font-size:12px; font-weight:300; letter-spacing:0em; padding-top:10px;} .white {font-size:16px; color:#feffff; font-weight:700; letter-spacing:0em; line-height:1.875em; margin-bottom:10px; padding-top:10px;} a.go-top {position:fixed; bottom:40px; right:20px; z-index:50;} .foot-border {padding-bottom:20px; border-bottom:1px solid rgba(255, 255, 255, 0.3); margin-bottom:30px;} .link-flex {display:flex;} .link-flex .img {padding:0 15px;} .foot-wrap {background:#686868; color:#fff; padding:40px 0;} .foot-wrap .foot-list-menu {display:flex; text-align:center;} .foot-wrap .foot-list-menu .foot-list {position:relative; flex:1} .foot-wrap .foot-list-menu .foot-list:before {position:absolute; content:""; width:1px; height:100%; background:rgba(255, 255, 255, 0.4); top:0; right:0;} .foot-wrap .foot-list-menu .foot-list:first-child:after {position:absolute; content:""; width:1px; height:100%; background:rgba(255, 255, 255, 0.4); top:0; left:0;} .foot-wrap .foot-list-menu .foot-list h3 {font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.5em;} .foot-wrap .foot-list-menu .foot-list ul li {margin-top:15px;} .footer-flex {display:flex; justify-content:space-between;} .foot-lnb {display:flex; margin-right:-30px;} .foot-lnb .foot-lnb-box {text-align:right; margin-right:20px;} .foot-lnb .foot-lnb-box p {font-size:18px; color:#fff; font-weight:600; letter-spacing:0em; line-height:1.667em; margin-bottom:25px;} .foot-lnb .foot-lnb-box ul {} .foot-lnb .foot-lnb-box ul li {} .foot-lnb .foot-lnb-box ul li a {font-size:15px; font-weight:600; color:rgba(255, 255, 255, 0.5); letter-spacing:0em; margin-bottom:10px;} .prod-tab-menu {position:relative; margin-top:-30px; margin-bottom:60px;} /* .prod-tab-menu:after {content:"";position:absolute; bottom:0; left:0; width:100%; height:1px; background:#ddd; z-index:0} */ .prod-tab-menu ul {display:flex; border-radius:30px; background:#959595; max-width:1200px; margin:0 auto;} .prod-tab-menu ul:after {content:"";display:block;clear:both;} .prod-tab-menu ul li {flex:1; position:relative; width:auto; border-bottom:none;} .prod-tab-menu ul li a {position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:60px; line-height:1.222em; font-size:20px; letter-spacing:-.03em; transition:none; color:#fff; font-weight:500;} .prod-tab-menu ul li:last-child:after {display:none;} .prod-tab-menu ul li.active a {color:#fff; background:#adcc05; border-radius:30px;} .sub-tab-fixed .sub-tab-menu {position:fixed; top:30px; left:0; width:100%; z-index:50} .sub-tab-fixed .prod-head {margin-bottom:60px;} /* quick */ .quick {position:fixed; bottom:30px; right:30px; z-index:90;} .quick ul {} .quick ul li {margin-bottom:10px;} .quick ul li img {} .quick ul li a {}