/** Filename : commonn.css color **/ /* ================================== Font ================================== */ .rbtThin { font-family: 'Roboto', sans-serif; font-weight: 100; } .rbtLight { font-family: 'Roboto', sans-serif; font-weight: 300; } .rbtRegular { font-family: 'Roboto', sans-serif; font-weight: 400; } .rbtMedium { font-family: 'Roboto', sans-serif; font-weight: 500; } .rbtBold { font-family: 'Roboto', sans-serif; font-weight: 700; } .nskThin { font-family: 'Noto Sans KR', sans-serif; font-weight: 100; } .nskLight { font-family: 'Noto Sans KR', sans-serif; font-weight: 300; } .nskRegular { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } .nskMedium { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .nskBold { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; } .nskBlack { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; } /* ================================== Reset ================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, article, aside, canvas, details, embed, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img, fieldset, form, label, legend, figure, figcaption, input, button { margin: 0; padding: 0; border: 0; vertical-align: middle; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } button::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner { padding: 0; border: 0; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; } img { line-height: 0; font-size: 0; } a { text-decoration: none; color: inherit; } table { border-collapse: collapse; padding: 0; margin: 0; width: 100%; border: 0; } /* ================================== Common ================================== */ a, a:hover, a:focus, a:active { text-decoration: none; } #skipNav { position: absolute; left: 0; top: 0; width: 100%; z-index: 99999; } #skipNav a { overflow: hidden; display: block; width: 1px; height: 1px; margin-bottom: -1px; color: #444; font-size: 0; text-decoration: none; } #skipNav a:hover, #skipNav a:active, #skipNav a:focus { width: 100%; height: auto; padding: 5px 0; background: #303030; font-size: 14px; text-align: center; color: #fff; } caption, .hidden { position: absolute; top: -9999; left: -9999; font-size: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; } caption { font-size: 0; height: 0; visibility: hidden; overflow: hidden; } .hidden, legend { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } input[placeholder]::-webkit-input-placeholder { color: #777; } input[placeholder]:-moz-placeholder { color: #777; } input[placeholder]::-moz-placeholder { color: #777; } input[placeholder]:-ms-input-placeholder { color: #777; } input[placeholder].placeholder { color: #777; } html { font-size: 62.5%; /* Sets up the Base 10 stuff */ position: relative; min-height: 100%; overflow-y: auto; } body { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 16px; font-size: 1.5rem; line-height: 1.5; letter-spacing: -0.02em; color: #333; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-y: hidden; } html, body { overflow-x: hidden; } .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .webOnly { display: inline-block; } .mobOnly { display: none; } button { cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } table { width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .f72 { font-size: 72px; font-size: 7.2rem; } .f22 { font-size: 22px; font-size: 2.2rem; } /** Arrows **/ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: block; padding: 0; cursor: pointer; color: transparent; outline: none; background: transparent; z-index: 999; } .slick-disabled { opacity: 0; } /** Dot **/ .slick-dots { position: absolute; top: 50%; left: 50%; display: block; padding: 0; margin: 0; list-style: none; text-align: center; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 999; } .slick-dots li { position: relative; display: block; padding: 0; cursor: pointer; } .slick-dots li button { position: relative; display: block; cursor: pointer; color: transparent; font-size: 0; line-height: 0; border: 0; outline: none; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 50%; left: 50%; content: ''; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .conLineBox { padding: 30px; word-break: keep-all; border: 1px solid #dbdcdc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btnWrap { margin: 25px 0 45px; } .btnWrap:before, .btnWrap:after { content: ""; display: table; } .btnWrap:after { clear: both; } .btnWrap.alL > .inner, .btnWrap.alR > .inner { float: left; } .btnWrap.alL > .inner .nkBtn, .btnWrap.alR > .inner .nkBtn { float: left; margin-left: 20px; } .btnWrap.alL > .inner .nkBtn:first-child, .btnWrap.alR > .inner .nkBtn:first-child { margin-left: 0; } .btnWrap.alR > .inner { float: right; } .btnWrap.alLR > .innerL, .btnWrap.alLR > .innerR { float: left; } .btnWrap.alLR > .innerL .nkBtn, .btnWrap.alLR > .innerR .nkBtn { float: left; margin-left: 20px; } .btnWrap.alLR > .innerL .nkBtn:first-child, .btnWrap.alLR > .innerR .nkBtn:first-child { margin-left: 0; } .btnWrap.alLR > .innerR { float: right; } .btnWrap.alC { text-align: center; } .btnWrap.alC .nkBtn { margin-left: 20px; } .btnWrap.alC .nkBtn:first-child { margin-left: 0; } .nkBtn { display: inline-block; vertical-align: top; cursor: pointer; } .nkBtn > * { min-width: 160px; display: inline-block; margin: 5px 0; padding: 0 20px; text-align: center; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; height: 50px; line-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #1f99df; border: 1px solid #1f99df; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .nkBtn:hover > * { background: #0b86cd; border: 1px solid #0b86cd; } .nkBtn.line > * { color: #1f99df; background: #fff; border: 1px solid #1f99df; } .nkBtn.line:hover > * { color: #0b86cd; background: #fff; border: 1px solid #0b86cd; } .nkBtn.gray > * { color: #666; background: #fff; border: 1px solid #999; } .nkBtn.gray:hover > * { color: #333; background: #fff; border: 1px solid #333; } .nkBtn.goSite > * { min-width: 260px; font-size: 16px; font-size: 1.6rem; } input[type="text"], input[type="password"], textarea { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; font-family: inherit; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="text"], input[type="password"] { padding: 0 10px; height: 39px; line-height: 39px; } textarea { height: auto; padding: 10px; } select { height: 39px; padding: 4px 5px 4px 5px; font-family: inherit; vertical-align: middle; border: 1px solid #ccc; border-radius: 0px; } /* ================================== Common media query ================================== */ @media only screen and (max-width: 640px) { html { font-size: 43.75%; } .webOnly { display: none; } .mobOnly { display: inline-block; } .btnWrap { margin: 15px 0 30px; } .btnWrap.alL > .inner .nkBtn, .btnWrap.alR > .inner .nkBtn { margin-left: 14px; } .btnWrap.alLR > .innerL .nkBtn, .btnWrap.alLR > .innerR .nkBtn { margin-left: 14px; } .btnWrap.alC .nkBtn { margin-left: 14px; } .nkBtn > * { min-width: auto; padding: 0 14px; font-size: 18px; font-size: 1.8rem; height: 35px; line-height: 35px; } .nkBtn.goSite > * { font-size: 18px; font-size: 1.8rem; } input[type="text"], input[type="password"], textarea, select { font-size: 18px; font-size: 1.8rem; } input[type="text"], input[type="password"] { padding: 0 7px; height: 30px; line-height: 30px; } textarea { height: auto; padding: 7px; } select { height: 30px; } } /* ================================== Layout ================================== */ #wrap { position: relative; } #container { float: none; padding: 0; width: auto; min-height: 600px; border-right: none; -ms-word-break: keep-all; word-break: keep-all; } .contentTop { text-align: center; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 60px; font-size: 6rem; letter-spacing: 0; text-transform: uppercase; text-shadow: 0 0 4px rgba(73, 88, 156, 0.5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 169px 0; background-size: cover !important;} .contentTop.company { background: url("../img/company/w_visual_company.jpg") no-repeat center center; } .contentTop.technology { background: url("../img/technology/w_visual_technology.jpg") no-repeat center center; } .contentTop.business { background: url("../img/business/w_visual_business.jpg") no-repeat center center; } .contentTop.investor { background: url("../img/investor/w_visual_investor.jpg") no-repeat center center; } .contentTop.enquiry { background: url("../img/enquiry/w_visual_enquiry.jpg") no-repeat center center; } .contentTop.media { background: url("../img/company/w_visual_company.jpg") no-repeat center center; } .contentTop.careers { background: url("../img/careers/w_visual_careers.jpg") no-repeat center center; } #lnb { border-bottom: 1px solid #ddd; position: relative; z-index: 5; } #lnb .lnbInner { max-width: 1200px; width: 100%; height: 59px; margin: 0 auto; } #lnb .lnbInner:before, #lnb .lnbInner:after { content: ""; display: table; } #lnb .lnbInner:after { clear: both; } #lnb .lnbInner > * { position: relative; float: left; min-width: 255px; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: url("../img/common/icon_lnb_select.png") no-repeat right center; } #lnb .lnbInner > * a { display: block; width: 100%; padding: 0 28px; padding-right: 40px; height: 59px; line-height: 59px; color: #666; font-family: 'Roboto', sans-serif; font-weight: 300; letter-spacing: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #lnb .lnbInner > * a:hover { color: #018cdb; text-decoration: underline; } #lnb .lnbInner > *.current > a { color: #018cdb; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } #lnb .lnbInner > *:after { content: ''; position: absolute; right: 0; top: 50%; display: block; width: 1px; height: 14px; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: #e6e6e6; } #lnb .lnbInner > *:first-child:before { content: ''; position: absolute; left: 0; top: 50%; display: block; width: 1px; height: 14px; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: #e6e6e6; } #lnb .lnbInner .lnbDepth1 ul, #lnb .lnbInner .lnbDepth2 ul, #lnb .lnbInner .lnbDepth3 ul { visibility: hidden; opacity: 0; } #lnb .lnbInner .lnbDepth1:hover ul, #lnb .lnbInner .lnbDepth2:hover ul, #lnb .lnbInner .lnbDepth3:hover ul { visibility: visible; opacity: 1; } #lnb .lnbInner .lnbHome { display: block; min-width: 86px; width: 86px; height: 59px; padding: 0; background: url("../img/common/icon_home.png") no-repeat center center; } #lnb .lnbInner ul { padding-bottom: 14px; border: 1px solid #ddd; border-top: 0; background: #fff; } #lnb .lnbInner ul li a { height: 44px; line-height: 44px; } .btnTop { position: absolute; right: 30px; bottom: auto; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; z-index: 80; } .btnTop a { display: block; opacity: .5; } .btnTop a:after { content: ''; display: block; width: 50px; height: 50px; border: 1px solid #959698; background: url("../img/common/icon_go_top.png") no-repeat 0 -50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .btnTop.btnTopFixed { position: fixed; } .btnTop.btnTopFixed a:after { border: 1px solid #666; background-position: 0 0; } /* ================================== Layout media query ================================== */ @media only screen and (min-width: 2000px) { .contentTop { background-size: 100% 490px; } } @media only screen and (max-width: 960px) { #lnb { display: none; } #lnb .lnbInner > * { min-width: auto; } } @media only screen and (max-width: 640px) { /* .contentTop { height: 245px; padding-top: 128px; }*/ .contentTop {padding: 117px 0 100px;} .contentTop p {word-break: keep-all; font-size: 12px !important;} .contentTop.company { background-size: cover; } .contentTop.technology { background-size: cover; } .contentTop.business { background-size: cover; } .contentTop.investor { background-size: cover; } .contentTop.enquiry { background-size: cover; } .contentWrap { padding: 25px 4.6875% 50px; } .contentWrap .contentTitle { margin-bottom: 25px; padding: 3px 0 6px; } .contentWrap .contentTitle:after { width: 15px; height: 1px; } #lnb .lnbInner { height: 41px; } #lnb .lnbInner > * { width: auto; background-size: 21px auto; } #lnb .lnbInner > * a { padding: 0 6.25%; padding-right: 28px; height: 41px; line-height: 41px; font-size: 18px; font-size: 1.8rem; } #lnb .lnbInner > *:first-child:before { display: none; } #lnb .lnbInner > *:last-child:after { display: none; } #lnb .lnbInner .lnbHome { min-width: auto; width: 9.375%; height: 41px; background-size: 14px auto; } #lnb .lnbInner ul { padding-bottom: 10px; } #lnb .lnbInner ul li a { height: 30px; line-height: 30px; } .btnTop { right: 4.6875%; } .btnTop a:after { width: 25px; height: 25px; background-position: 0 -25px; background-size: 25px auto; } } /* ================================== Header ================================== */ #header { position: fixed; left: 0; right: 0; background: rgba(49, 111, 169, 0.7); z-index: 9998; } #header.gnbFixed { background: rgba(49, 111, 169, 0.98); box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); -moz-box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); } #header:after { content: ''; position: absolute; top: 113px; left: 0; right: 0; height: 0; background: #ccc; } #header .headerInner { position: relative; max-width: 1440px; width: 100%; margin: 0 auto; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 9999; } #header .headerInner .headerLogo { position: absolute; top: 16px; left: 30px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; z-index: 82; } #header .headerInner .headerLogo a { display: block; width: 112px; height: 80px; font-size: 0; background: url("../img/common/header_logo.png") no-repeat 0 -100px; } #header .headerInner #gnb { overflow: hidden; height: 112px; margin: 0; padding-top: 36px; border-top: none; border-bottom: none; background: transparent; text-align: left; z-index: 81; } #header .headerInner #gnb .depth1 { display: table; width: 60%; margin: 0 auto; margin-left: 15%; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; } #header .headerInner #gnb .depth1 > li { position: relative; display: table-cell; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;width: 16.6667%; padding: 0 15px} #header .headerInner #gnb .depth1 > li > a { position: relative; display: block; padding: 0 18px; height: 76px; line-height: 76px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 20px; font-size: 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; } #header .headerInner #gnb .depth1 > li > a:after { content: ''; position: absolute; left: 50%; bottom: -2px; display: block; width: 0; height: 3px; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); background: #019bdb; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; } #header .headerInner #gnb .depth1 > li > a:hover { color: #019bdb; } #header .headerInner #gnb .depth1 > li:hover > a { color: #019bdb; } #header .headerInner #gnb .depth1 > li:hover > a:after { width: 100%; } #header .headerInner #gnb .depth1 > li.isActive > a { color: #019bdb; } #header .headerInner #gnb .depth1 > li .gnbMobileTouch { display: none; } #header .headerInner #gnb .depth2 { padding: 18px 0; } #header .headerInner #gnb .depth2 > li > a { display: block; width: 100%; padding: 8px 0; color: #fff; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; letter-spacing: -1px; } #header .headerInner #gnb .depth2 > li > a:hover { color: #019bdb; text-decoration: underline; } #header .headerInner #gnb .depth3 { margin-top: -0.5rem; } /*#header .headerInner #gnb .depth3 a { font-size: 1.3rem; color: #777; letter-spacing: -1px; text-indent: -1rem; padding-left: 1rem; }*/ #header .headerInner #gnb .depth3 a { font-size: 1.3rem; color: #777; letter-spacing: -1px; text-indent: -1rem; } #header .headerInner .utilMenu { position: absolute; right: 150px; top: 50px; display: block; width: auto; height: auto; zoom: 1; z-index: 81; } #header .headerInner .utilMenu:before, #header .headerInner .utilMenu:after { content: ""; display: table; } #header .headerInner .utilMenu:after { clear: both; } #header .headerInner .utilMenu > li { float: left; margin-left: 20px; } #header .headerInner .utilMenu > li:first-child { margin-left: 0; } #header .headerInner .utilMenu > li > a { display: block; padding: 0; height: 46px; line-height: 46px; color: #fff; } #header .headerInner #tnb { float: none; position: absolute; right: 30px; top: 0; display: block; width: auto; height: auto; z-index: 81; } #header .headerInner #tnb > li { position: relative; margin: 0; margin-left: 26px; } #header .headerInner #tnb > li:before { content: ''; position: absolute; left: -13px; top: 50%; display: block; width: 1px; height: 13px; background: #ccc; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); } #header .headerInner #tnb > li:first-child { margin-left: 0; } #header .headerInner #tnb > li:first-child:before { display: none; } #header .headerInner #tnb > li > a { padding: 0; height: 46px; line-height: 46px; color: #fff; font-size: 15px; font-size: 1.5rem; letter-spacing: -0.02em; } #header .headerInner #allMenu { position: absolute; top: 120px; left: 50%; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); display: none; text-align: left; z-index: 99; } #header .headerInner #allMenu li { position: relative; } #header .headerInner #allMenu a { color: #fff; display: block; } #header .headerInner #allMenu .depth1 { display: table; margin: 0 auto; } #header .headerInner #allMenu .depth1 > li { display: table-cell; min-width: 172px; padding-left: 24px; } #header .headerInner #allMenu .depth1 > li:before { content: ''; position: absolute; left: 0; top: 45px; display: block; width: 14px; height: 3px; background: #fff; } #header .headerInner #allMenu .depth1 > li > a { padding: 22px 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 32px; font-size: 3.2rem; } #header .headerInner #allMenu .depth1 > li .gnbMobileTouch { display: none; } #header .headerInner #allMenu .depth2 > li > a { padding: 6px 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 18px; font-size: 1.8rem; } #header .headerInner #allMenu .depth2 > li > a:hover { text-decoration: underline; } #header .headerInner #allMenu .depth3 { margin: 4px 0 9px 9px; } #header .headerInner #allMenu .depth3 > li { padding-left: 9px; } #header .headerInner #allMenu .depth3 > li:before { content: ''; position: absolute; left: 0; top: 16px; display: block; width: 5px; height: 1px; background: #fff; } #header .headerInner #allMenu .depth3 > li > a { padding: 3px 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; } #header .headerInner #allMenu .depth3 > li > a:hover { text-decoration: underline; } #header .headerInner .langBtn { position: absolute; right: 74px; top: 52px; display: block; width: auto; height: auto; z-index: 81; } #header .headerInner .langBtn > a { position: relative; display: block; width: 58px; height: 46px; padding: 2px 0 0 26px; text-align: left; color: #fff; font-size: 15px; font-size: 1.5rem; letter-spacing: -0.02em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #header .headerInner .langBtn > a:before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 40px; height: 46px; background: url("../img/common/icon_lang_btn.png") no-repeat 0 -50px; } #header .headerInner .langBtn .langList { position: absolute; left: 50%; top: 46px; display: block; width: auto; height: auto; display: none; margin-left: -43px; background: #316fa9; z-index: 82; } #header .headerInner .langBtn .langList:before, #header .headerInner .langBtn .langList:after { content: ""; display: table; } #header .headerInner .langBtn .langList:after { clear: both; } #header .headerInner .langBtn .langList li { border: solid #ccc; border-width: 0 1px 1px; } #header .headerInner .langBtn .langList li:first-child { border-width: 1px; } #header .headerInner .langBtn .langList li a { display: block; width: 100%; padding: 6px 10px; text-align: center; color: #fff; font-size: 15px; font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; word-break: keep-all; } #header .headerInner .langBtn .langList li a:hover { color: #fff; } #header .headerInner .allMenuBtn { position: absolute; right: 30px; top: 51px; display: block; width: auto; height: auto; z-index: 99; } #header .headerInner .allMenuBtn .hamburger { cursor: pointer; position: relative; display: inline-block; vertical-align: middle; width: 46px; height: 46px; } #header .headerInner .allMenuBtn .hamburger > i { background: #fff; position: absolute; right: 0; top: 50%; display: block; width: 36px; height: 2px; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); } #header .headerInner .allMenuBtn .hamburger > i.line1 { margin-top: -12px; } #header .headerInner .allMenuBtn .hamburger > i.line2 { width: 28px; } #header .headerInner .allMenuBtn .hamburger > i.line3 { margin-top: 12px; } #header.gnbOpen { background: white; box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); -moz-box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.35); } #header.gnbOpen:after { height: 1px; } #header.gnbOpen .headerInner .headerLogo a { background-position: 0 0; } #header.gnbOpen .headerInner #tnb > li > a { color: #666; } #header.gnbOpen .headerInner #tnb > li > a:hover { color: #019bdb; } #header.gnbOpen .headerInner #gnb .depth1 > li > a { color: #333; } #header.gnbOpen .headerInner #gnb .depth1 > li > a:hover, #header.gnbOpen .headerInner #gnb .depth1 > li > a:focus { color: #019bdb; } #header.gnbOpen .headerInner #gnb .depth1 > li:hover > a { color: #019bdb; } #header.gnbOpen .headerInner #gnb .depth1 > li:hover > a:hover { color: #019bdb; } #header.gnbOpen .headerInner #gnb .depth2 > li > a { color: #666; } #header.gnbOpen .headerInner #gnb .depth2 > li > a:hover { color: #019bdb; } #header.gnbOpen .headerInner .utilMenu > li > a { color: #666; } #header.gnbOpen .headerInner .utilMenu > li > a:hover { color: #019bdb; } #header.gnbOpen .headerInner .langBtn > a { color: #666; } #header.gnbOpen .headerInner .langBtn > a:before { background-position: 0 0; } #header.gnbOpen .headerInner .langBtn .langList { background: #fff; } #header.gnbOpen .headerInner .langBtn .langList li { border-color: #ccc; } #header.gnbOpen .headerInner .langBtn .langList li a { color: #666; } #header.gnbOpen .headerInner .langBtn .langList li a:hover { color: #019bdb; } #header.gnbOpen .headerInner .allMenuBtn .hamburger > i { background: #999; } #header.mobileWrap .headerInner #gnb { padding-top: 101px; } #header.mobileWrap .headerInner #gnb .depth1 { display: block; width: auto; margin: 0; margin-left: 0; padding: 0 30px; } #header.mobileWrap .headerInner #gnb .depth1 > li { position: relative; display: block; width: auto; padding: 0; text-align: left; border-bottom: 1px solid #c6c6c6; } #header.mobileWrap .headerInner #gnb .depth1 > li > a { position: relative; display: block; padding: 0 10px; height: 60px; line-height: 60px; } #header.mobileWrap .headerInner #gnb .depth1 > li > a:after { display: none; } #header.mobileWrap .headerInner #gnb .depth1 > li:hover > a:after { width: 100%; } #header.mobileWrap .headerInner #gnb .depth1 > li:after { content: ''; position: absolute; right: 20px; top: 26px; display: block; width: 18px; height: 10px; background: url("../img/common/icon_gnb_open.png") no-repeat 0 0; } #header.mobileWrap .headerInner #gnb .depth1 > li.isOpen:after { background-position: 0 -20px; } #header.mobileWrap .headerInner #gnb .depth1 > li .gnbMobileTouch { display: block; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 60px; cursor: pointer; z-index: 1; } #header.mobileWrap .headerInner #gnb .depth2 { border-top: 2px solid #1f99df; padding: 10px 30px; } #header.mobileWrap .headerInner #gnb .depth2 > li > a { padding: 5px 0; font-size: 18px; font-size: 1.8rem; } #header.mobileWrap .headerInner #gnb .depth3 { display: block; margin: 0 0 6px 9px; } #header.mobileWrap .headerInner #gnb .depth3 > li { position: relative; padding: 3px 0; padding-left: 9px; } /*#header.mobileWrap .headerInner #gnb .depth3 > li:before { content: ''; position: absolute; left: 0; top: 15px; display: block; width: 5px; height: 1px; background: #999; }*/ #header.mobileWrap .headerInner #gnb .depth3 > li > a { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 16px; font-size: 1.6rem; } #header.mobileWrap .headerInner #gnb .depth3 > li > a:hover { text-decoration: underline; } #header.mobileWrap .headerInner .utilMenu { display: none; margin: 30px 0 15px; position: relative; top: auto; right: auto; } #header.mobileWrap .headerInner .utilMenu > li { float: none; display: inline-block; } #header.mobileWrap .headerInner .utilMenu > li > a { min-width: 170px; padding: 0 20px; height: 54px; line-height: 54px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; border: 1px solid #999; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; } #header.mobileWrap .headerInner #tnb { display: none; margin-bottom: 50px; position: relative; top: auto; right: auto; } #header.mobileWrap .headerInner #tnb > li { float: none; display: inline-block; } #header.mobileWrap .headerInner #tnb > li > a { padding: 0 4px; font-size: 18px; font-size: 1.8rem; } #header.mobileWrap .headerInner .langBtn .langList li a { font-size: 18px; font-size: 1.8rem; } #header.mobileWrap.gnbOpen .utilMenu, #header.mobileWrap.gnbOpen #tnb { display: block; } .modalOverlay { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; opacity: 0; } .modalOverlay.allMenuCover { background: #316fa9; z-index: 98; } .modalOverlay.gnbCover { background: #222; z-index: 80; } .clearfix:after{clear: both; display: block; content: ''} .color-blue{color: #0982d1} .com_pb{padding-bottom: 50px;} img{max-width:100%} .tit-c{font-size: 1.375em; position: relative; padding-left: 20px; color: #333; font-weight: 500; margin-bottom: 1.35em;} .tit-c:before{position: absolute; left: 0; top:50%; width: 10px; height: 4px; background: #1f99df; content: ''; margin-top: -2px;} .career_steps{position: relative; font-size: 1.25em; text-align: center; padding: 0 20px; line-height: 1.15;} .career_steps:before{position: absolute; left: 0; bottom: 27%; width: 100%; height: 1px; background: #9f9f9f; content: ''} .career_steps > li{float: left; width:25%; position: relative;} .career_steps > li:before{position: absolute; left: 0; bottom:calc(27% - 4px); width: 5px; height: 9px; background: url('../img/careers/arrow.png') center center no-repeat; content: ''; z-index: 1} .career_steps > li:first-child:before{background: none} .career_steps .txt > *{display: block;} .career_steps .t1{} .career_steps .t2{margin-top: 10px;} .career_steps .ico{margin-top: 30px; display: inline-block; position: relative; background: #fff; padding: 0 1em; z-index: 1; z-index: 1} .career_steps img{display: block; margin: 0 auto;} .career_steps .group{} .allmenu_bg{position: fixed; left: 0; top:0; background: rgba(0,0,0,.4); overflow-y: auto; width: 100%; height: 100%; z-index: 10000} .allmenu_bg .pop-c{position: relative; width: 750px; left: 50%; top:50%; transform: translate(-50%,-50%); max-width: 97%; max-height: 97%; background: #fff; padding: 50px;display: block;} .allmenu_bg .top{position: relative; padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #ccc; font-size: 1.375em; font-weight: 500;} .allmenu_bg .top > *{display: inline-block; vertical-align: middle;} .allmenu_bg .top .txt{margin-left: .5em;} .allmenu_bg .top .ico{width: 56px} .allmenu_bg .close-pop{position: absolute; right: 0; top:50%; margin-top:-20px;} .allmenu_bg .close-pop img{display: block;} .allmenu_bg .bul-dash{font-size: 1.125em;} .pop-c{display: none;} .career_info .group{margin-top: 70px;} .career_info .group:first-child{margin-top: 0;} .career_dev{margin: 0 0 -10px -10px; text-align: center; display: flex; flex-wrap:wrap} .career_dev > li{float: left; width: calc(25% - 10px); margin: 0 0 10px 10px; border:1px solid #ccc; padding: 40px 10px} .career_dev .txt{font-size: 1.375em; margin-top: 1.364em; color: #333; line-height: 1.15; font-weight: 500;} .career_dev img{max-width: 50%} .career_benefit{color: #333; display: flex; flex-wrap:wrap; margin: 0 0 -110px -1.5em;} .career_benefit .t{display: block; font-weight: 500; line-height: 1.15; font-size: 1.375em; margin-bottom: .8em;} .career_benefit .c{font-size: 1.125em;} .career_benefit > li{display: flex; float: left; width: calc(50% - 1.5em); margin-bottom: 110px; margin-left: 1.5em;} .career_benefit .ico{width: 130px; padding-right: 30px;} .career_benefit .cont{flex:1} /* ================================== Header media query ================================== */ @media (max-width:1450px){ #header .headerInner #gnb .depth1{margin-left: 13%;} #header .headerInner #gnb .depth1 > li{padding: 0 5px} } @media (max-width:1280px){ #header .headerInner .langBtn{right: 67px} #header .headerInner .utilMenu{right: 485px; font-size: 15px; top: 0} #header .headerInner .utilMenu > li{margin-left: 10px;} } @media only screen and (max-width: 1260px) { #header .headerInner #gnb .depth1 { margin-left: 15%; } #header .headerInner #gnb .depth1 > li { padding: 0 5px; } #header .headerInner #allMenu .depth1 > li { min-width: 172px; } } @media only screen and (max-width: 1024px) { #header:after { top: 101px; } #header .headerInner #allMenu { display: none; } #header .headerInner .headerLogo { top: 10px; } #header .headerInner #gnb { height: 100px; padding-top: 101px; } #header .headerInner .utilMenu, #header .headerInner #tnb { display: none; } #header .headerInner .langBtn { top: 28px; } #header .headerInner .allMenuBtn { top: 27px; } #header.mobileWrap .headerInner { height: auto; } #header.mobileWrap .headerInner #gnb .depth2 { display: none; } #header.mobileWrap .headerInner #gnb .depth3 { display: block; } .career_steps{padding: 0} .career_steps .ico{padding: 0 10px; max-width: 67%} .career_steps{margin-top: -50px;} .career_steps > li{width: 50%; margin-top: 50px;} .career_steps:before{background: none} .career_steps li:after{position: absolute; left: 0; bottom: 27%; width: 100%; height: 1px; background: #ccc; content: ''} .career_steps > li:nth-child(3):before{background: none} .career_dev > li{padding: 30px 10px} .career_benefit .ico{width: 100px} } @media (max-width:720px){ .allmenu_bg .pop-c{padding: 30px} .career_dev > li{width: calc(50% - 10px); padding: 20px 5px} .career_benefit{margin-bottom: -50px;} .career_benefit > li{width: calc(100% - 1.5em); margin-bottom: 50px;} } @media only screen and (max-width: 640px) { #header:after { top: 71px; } #header .headerInner .headerLogo { top: 7px; left: 15px; } #header .headerInner .headerLogo a { width: 79px; height: 56px; background-position: 0 -70px; background-size: auto 140px; } #header .headerInner #gnb { height: 70px; padding-top: 71px; } #header .headerInner .langBtn { top: 0; right: 50px; } #header .headerInner .langBtn > a { width: 42px; height: 70px; padding: 20px 0 0 19px; } #header .headerInner .langBtn > a:before { position: absolute; left: 0; top: 17px; display: block; width: 32px; height: 32px; background-position: 0 -40px; background-size: 32px auto; } #header .headerInner .langBtn .langList { top: 58px; margin-left: -35px; } #header .headerInner .allMenuBtn { top: 0; right: 15px; } #header .headerInner .allMenuBtn .hamburger { width: 40px; height: 70px; } #header .headerInner .allMenuBtn .hamburger > i { width: 26px; } #header .headerInner .allMenuBtn .hamburger > i.line1 { margin-top: -9px; } #header .headerInner .allMenuBtn .hamburger > i.line2 { width: 20px; } #header .headerInner .allMenuBtn .hamburger > i.line3 { margin-top: 9px; } #header.mobileWrap .headerInner #gnb { padding-top: 71px; } #header.mobileWrap .headerInner #gnb .depth1 { padding: 0 4.6875%; } #header.mobileWrap .headerInner #gnb .depth1 > li > a { height: 42px; line-height: 42px; font-size: 23px; font-size: 2.3rem; } #header.mobileWrap .headerInner #gnb .depth1 > li:after { position: absolute; right: 10px; top: 19px; display: block; width: 9px; height: 5px; background-size: 9px auto; } #header.mobileWrap .headerInner #gnb .depth1 > li.isOpen:after { background-position: 0 -10px; } #header.mobileWrap .headerInner #gnb .depth1 > li .gnbMobileTouch { height: 42px; } #header.mobileWrap .headerInner #gnb .depth2 { border-top: 1px solid #1f99df; padding: 10px 20px; } #header.mobileWrap .headerInner #gnb .depth2 > li > a { font-size: 20px; font-size: 2rem; } #header.mobileWrap .headerInner #gnb .depth3 { margin: 0 0 4px 6px; } #header.mobileWrap .headerInner #gnb .depth3 > li { padding-left: 7px; } /*#header.mobileWrap .headerInner #gnb .depth3 > li:before { position: absolute; left: 0; top: 12px; display: block; width: 4px; height: 1px; }*/ #header.mobileWrap .headerInner #gnb .depth3 > li > a { font-size: 18px; font-size: 1.8rem; } #header.mobileWrap .headerInner .utilMenu { margin: 15px 0 8px; } #header.mobileWrap .headerInner .utilMenu > li > a { min-width: 100px; padding: 0 10px; height: 32px; line-height: 32px; } #header.mobileWrap .headerInner #tnb { margin-bottom: 25px; } } /* ================================== Footer ================================== */ #footer { position: relative; border-top: 1px solid #acb1b3; background: #2b2c30; } #footer .inner { overflow: hidden; position: relative; max-width: 1260px; margin: 0 auto; padding: 43px 30px 67px; } #footer .footerLink { padding-bottom: 30px; } #footer .footerLink:before, #footer .footerLink:after { content: ""; display: table; } #footer .footerLink:after { clear: both; } #footer .footerLink li { float: left; padding-left: 44px; } #footer .footerLink li a { display: inline-block; color: #fff; font-size: 16px; font-size: 1.6rem; } #footer .footerLink li:first-child { padding-left: 0; } #footer .footerLink li:first-child a { color: #2fb8f1; } #footer .footerText { max-width: 1200px; width: 100%; padding: 22px 0 20px; border-top: 1px solid #404145; } #footer .footerText:before, #footer .footerText:after { content: ""; display: table; } #footer .footerText:after { clear: both; } #footer .footerText > p { float: left; padding: 4px 0; padding-left: 36px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.02; line-height: 1.4; } #footer .footerText > p:first-child { padding-left: 0; } #footer .footerText > p a { color: #fff; } #footer .footerText > p.address { width: 100%; } #footer .footerText > p.address + p { padding-left: 0; } #footer .footerCopy { color: rgba(255, 255, 255, 0.4); font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.02; } #footer .familySite { position: relative; float: right; margin-top: -96px; } #footer .familySite .familyBtn { overflow: hidden; position: relative; display: inline-block; width: 160px; padding-left: 15px; height: 38px; line-height: 38px; color: rgba(232, 232, 232, 0.8); font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 11px; font-size: 1.1rem; letter-spacing: 0.1em; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #footer .familySite .familyBtn:before { content: ''; position: absolute; right: 16px; top: 50%; display: block; width: 6px; height: 4px; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: url("../img/common/icon_family_select.png") repeat 0 0; } #footer .familySite .familyList { padding: 10px 15px; position: absolute; left: 0; bottom: 42px; display: block; width: 160px; height: auto; display: none; border: 1px solid rgba(255, 255, 255, 0.2); background: #2b2c30; } #footer .familySite .familyList li a { display: inline-block; width: 100%; padding: 5px 0; color: rgba(232, 232, 232, 0.8); font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 14px; font-size: 1.4rem; } #footer .familySite.familyOpen .familyBtn:before { background-position: 0 -5px; } /* ================================== Footer media query ================================== */ @media only screen and (max-width: 960px) { #footer .familySite { float: none; margin-top: 20px; } } @media only screen and (max-width: 640px) { #footer .inner { padding: 22px 4.6875% 34px; } #footer .footerLink { padding-bottom: 15px; } #footer .footerLink li { padding-left: 2.8125%; } #footer .footerText { padding: 11px 0 10px; } #footer .footerText > p { padding: 2px 0; padding-left: 0; padding-right: 5.625%; } #footer .familySite { margin-top: 15px; } #footer .familySite .familyList { bottom: 40px; } .allmenu_bg .pop-c{padding: 15px} .allmenu_bg .top{padding-bottom: 15px; margin-bottom: 20px;} .allmenu_bg .close-pop{margin-top: -19px;} .career_benefit .ico{width: 80px} } /* ================================== Main ================================== */ .mainVisual { width: 100%; overflow: hidden; position: relative; height: 1092px; } .mainVisual .visualSlide { width: 100%; overflow: hidden; position: relative; } .mainVisual .txtBox { max-width: 1380px; padding-left: 90px; position: absolute; left: 50%; top: 37.5%; display: block; width: 100%; height: auto; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1; } .mainVisual .txtBox > * { font-size: 22px; font-size: 2.2rem; letter-spacing: -0.02em; } .mainVisual .txtBox h3 > span { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 72px; font-size: 7.2rem; letter-spacing: 0.08em; } .mainVisual .txtBox h3 > span > span { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 65px; font-size: 6.5rem; letter-spacing: 0; } .mainVisual .txtBox p span { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 23px; font-size: 2.3rem; } .mainVisual .txtBox p.slogan { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; } .mainVisual .txtBox h3, .mainVisual .txtBox p { margin-left: 25%; opacity: 0; } .mainVisual .txtBox.fcWhite { color: #fff; } .mainVisual .txtBox.fcBlack { color: #333; } .mainVisual img { position: relative; left: 50%; margin-left: -1000px; } .mainVisual .slideItem:before { content: ""; display: block; width: 100%; height: 1092px; } .mainVisual .slideItem.visual1 { background: url("../img/main/w_visual_slide01.jpg") no-repeat center center; } .mainVisual .slideItem.visual2 { background: url("../img/main/w_visual_slide02.jpg") no-repeat center center; } .mainVisual .slideItem.visual3 { background: url("../img/main/w_visual_slide03_new.jpg") no-repeat center center; } .mainVisual .slick-dots { margin-left: 725px; } .mainVisual .slick-dots li { padding: 0 10px; } .mainVisual .slick-dots li button { width: 22px; height: 22px; padding: 5px; background: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mainVisual .slick-dots li button:before { width: 13px; height: 2px; border: 1px solid #b5b5b5; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mainVisual .slick-dots li.slick-active button:before { height: 13px; border: 2px solid #019bdb; } .mainVisual .scrollGuide { position: absolute; left: 50%; bottom: 68px; display: block; width: 38px; height: 74px; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); background: url("../img/main/scroll_bg.png") no-repeat center center; } .mainVisual .scrollGuide > span { position: absolute; left: 50%; bottom: 32px; display: block; width: 20px; height: 26px; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); background: url("../img/main/scroll_arrow.png") no-repeat center center; } .moreBtn a { overflow: hidden; position: relative; display: inline-block; min-width: 120px; height: 40px; line-height: 40px; text-align: center; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 11px; font-size: 1.1rem; letter-spacing: 0.1em; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .moreBtn a span { position: absolute; left: 50%; top: 50%; display: block; width: 100%; height: 100%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 1; } .moreBtn a:before { content: ''; position: absolute; left: -100%; top: 0; display: block; width: 100%; height: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; background: #019bdb; } .moreBtn a:hover:before { left: 0; } .inrCont:before, .inrCont:after { content: ""; display: table; } .inrCont:after { clear: both; } .inrCont .txtBox, .inrCont .imgBox { width: 50%; } .inrCont .txtBox .titWrap { overflow: hidden; position: relative; width: 100%; height: 174px; } .inrCont .txtBox .titWrap .bracket { transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: #019bdb; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; z-index: 1; } .inrCont .txtBox .titWrap .bracket:before { content: ''; background: #019bdb; } .inrCont .txtBox .titWrap .bracket:after { content: ''; background: #019bdb; } .inrCont .txtBox .titWrap h3 { transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 72px; font-size: 7.2rem; letter-spacing: 0.08em; line-height: 1.2; color: #fff; transition: all 0.6s ease; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } .inrCont .txtBox .titWrap h3 > span { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 65px; font-size: 6.5rem; letter-spacing: 0; } .inrCont .txtBox .titWrap h3 > i { display: block; margin-top: -10px; font-style: normal; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 40px; font-size: 4rem; letter-spacing: 0; } .inrCont .txtBox .titWrap .bracket, .inrCont .txtBox .titWrap h3 { opacity: 0; } .inrCont .txtBox .titWrap.titTween .bracket, .inrCont .txtBox .titWrap.titTween h3 { opacity: 1; } .inrCont .txtBox .txtWrap { color: #e1e1e1; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 18px; font-size: 1.8rem; line-height: 1.7; word-break: keep-all; } .inrCont .txtBox .txtWrap dt { color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 20px; font-size: 2rem; } .inrCont .txtBox .txtWrap dd { margin-top: 5px; } .inrCont .txtBox.white .titWrap h3 { color: #fff; } .inrCont .txtBox.white .txtWrap { color: #e1e1e1; } .inrCont .txtBox.white .txtWrap dt { color: #fff; } .inrCont .txtBox.white .moreBtn a { color: #fff; border: 1px solid #fff; } .inrCont .txtBox.white .moreBtn a:hover { border: 0; } .inrCont .txtBox.black .titWrap h3 { color: #111; } .inrCont .txtBox.black .txtWrap { color: #474747; } .inrCont .txtBox.black .txtWrap dt { color: #474747; } .inrCont .txtBox.black .moreBtn a { color: #474747; border: 1px solid #474747; } .inrCont .txtBox.black .moreBtn a:hover { color: #fff; border: 0; } .inrCont .imgBox { position: relative; padding-top: 36px; } .inrCont .imgBox .imgWrap { position: relative; overflow: hidden; width: 100%; z-index: 2; } .inrCont .imgBox .imgWrap:before { content: ""; display: block; } .inrCont .imgBox .imgWrap img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; } .inrCont .imgBox .pattern { background: url("../img/main/w_bg_cross.png") repeat 0 0; z-index: 1; } .inrCont.alLeft .txtBox { float: left; text-align: left; } .inrCont.alLeft .txtBox .titWrap { text-align: left; } .inrCont.alLeft .txtBox .titWrap .bracket { position: absolute; left: 0; top: 50%; display: block; width: 13px; height: 0; } .inrCont.alLeft .txtBox .titWrap .bracket:before { position: absolute; left: 0; top: 0; display: block; width: 27px; height: 13px; } .inrCont.alLeft .txtBox .titWrap .bracket:after { position: absolute; left: 0; bottom: 0; display: block; width: 27px; height: 13px; } .inrCont.alLeft .txtBox .titWrap h3 { position: absolute; left: -150px; top: 50%; display: block; width: auto; height: auto; } .inrCont.alLeft .txtBox .titWrap.titTween .bracket { height: 100%; } .inrCont.alLeft .txtBox .titWrap.titTween h3 { left: 50px; } .inrCont.alLeft .txtBox .txtWrap { margin: 22px 0 0 56px; } .inrCont.alLeft .txtBox .moreBtn { margin: 25px 0 0 56px; } .inrCont.alLeft .imgBox { float: right; padding-right: 36px; text-align: right; } .inrCont.alLeft .imgBox .pattern { position: absolute; right: -4px; top: -4px; display: block; width: auto; height: auto; } .inrCont.alRight .txtBox { float: right; text-align: right; } .inrCont.alRight .txtBox .titWrap { text-align: right; } .inrCont.alRight .txtBox .titWrap .bracket { position: absolute; right: 0; top: 50%; display: block; width: 13px; height: 0; } .inrCont.alRight .txtBox .titWrap .bracket:before { position: absolute; right: 0; top: 0; display: block; width: 27px; height: 13px; } .inrCont.alRight .txtBox .titWrap .bracket:after { position: absolute; right: 0; bottom: 0; display: block; width: 27px; height: 13px; } .inrCont.alRight .txtBox .titWrap h3 { position: absolute; right: -150px; top: 50%; display: block; width: auto; height: auto; } .inrCont.alRight .txtBox .titWrap.titTween .bracket { height: 100%; } .inrCont.alRight .txtBox .titWrap.titTween h3 { right: 50px; } .inrCont.alRight .txtBox .txtWrap { margin: 22px 56px 0 0; } .inrCont.alRight .txtBox .moreBtn { margin: 25px 56px 0 0; } .inrCont.alRight .imgBox { float: left; padding-left: 36px; text-align: left; } .inrCont.alRight .imgBox .pattern { position: absolute; left: -4px; top: -4px; display: block; width: auto; height: auto; } .mainTechnology { min-height: 980px; } .mainTechnology .inrCont { position: relative; max-width: 1440px; margin: 0 auto; } .mainTechnology .inrCont .txtBox { width: 38.84%; } .mainTechnology.nkCell { background: url("../img/main/w_bg_nkcell.jpg") no-repeat center center; } .mainTechnology.nkCell .inrCont { padding: 300px 30px 0; } .mainTechnology.nkCell .inrCont .txtBox { width: 640px; } .mainTechnology.superNk { background: url("../img/main/w_bg_supernk.jpg") no-repeat center center; } .mainTechnology.superNk .inrCont { padding: 250px 30px 0; } .mainTechnology.superNk .inrCont .imgBox { padding: 0; } .mainTechnology .slideWrap { width: 650px; height: 480px; margin-left: auto; box-shadow: 7px 0 23px rgba(41, 54, 66, 0.6); -moz-box-shadow: 7px 0 23px rgba(41, 54, 66, 0.6); -webkit-box-shadow: 7px 0 23px rgba(41, 54, 66, 0.6); } .mainTechnology .photoSlide, .mainTechnology .photoSlide img { width: 100%; height: 100%; } .mainTechnology .slideItem:before { content: ""; display: block; width: 100%; height: 480px; } .mainTechnology .slideItem.photo1 { background: url("../img/main/w_supernk_slide01.jpg") no-repeat center center; } .mainTechnology .slideItem.photo2 { background: url("../img/main/w_supernk_slide02.jpg") no-repeat center center; } .mainTechnology .slick-prev, .mainTechnology .slick-next { top: auto; left: auto; transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); bottom: 0; width: 130px; height: 100px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .mainTechnology .slick-prev:after, .mainTechnology .slick-next:after { content: ''; background: #222; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .mainTechnology .slick-prev:hover:after, .mainTechnology .slick-next:hover:after { width: 78px; } .mainTechnology .slick-prev { right: 130px; background: #fff url("../img/main/w_supernk_prev.png") no-repeat right 34px; } .mainTechnology .slick-prev:after { position: absolute; right: 0; top: 66px; display: block; width: 0; height: 2px; } .mainTechnology .slick-next { right: 0; background: #fff url("../img/main/w_supernk_next.png") no-repeat left 34px; } .mainTechnology .slick-next:after { position: absolute; left: 0; top: 66px; display: block; width: 0; height: 2px; } .mainProduct { padding: 65px 0; } .mainProduct .inrCont { max-width: 1260px; margin: 0 auto; padding: 35px 30px; } .mainProduct .inrCont .txtBox, .mainProduct .inrCont .imgBox { width: 44.67%; } .mainProduct .inrCont .imgBox .imgWrap:before { height: 600px; } .mainProduct .inrCont .imgBox .pattern { width: 88.75%; height: 520px; } .mainProduct .inrCont.nkvuekit .txtBox, .mainProduct .inrCont.nk365 .txtBox, .mainProduct .inrCont.reagent .txtBox { margin-top: 80px; } .mainProduct .inrCont.nkvuekit .imgBox .imgWrap { background: url("../img/main/w_product_nkvuekit.jpg") no-repeat center center; } .mainProduct .inrCont.nk365 .txtBox { float: right; } .mainProduct .inrCont.nk365 .imgBox { float: left; padding-left: 36px; padding-right: 0; text-align: left; } .mainProduct .inrCont.nk365 .imgBox .imgWrap { background: url("../img/main/w_product_nk365.jpg") no-repeat center center; } .mainProduct .inrCont.nk365 .imgBox .pattern { position: absolute; left: -4px; top: -4px; display: block; width: 88.75%; height: 520px; } .mainProduct .inrCont.reagent .imgBox .imgWrap { background: url("../img/main/w_product_reagent.jpg") no-repeat center center; } .mainNews { min-height: 650px; background: url("../img/main/w_bg_news.jpg") no-repeat center center; } .mainNews .inrCont { position: relative; max-width: 1260px; margin: 0 auto; padding: 96px 30px 0; text-align: center; } .mainNews .tag { color: #019bdb; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.2em; line-height: 1.1; } .mainNews h3 { padding: 10px 0; color: #111; font-size: 40px; font-size: 4rem; letter-spacing: -0.04em; line-height: 1.1; } .mainNews h3 > span { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 44px; font-size: 4.4rem; } .mainNews .slideWrap { position: relative; width: 100%; margin-top: 46px; padding: 40px 14px; background: #fff; } .mainNews .slideWrap:before { content: ''; position: absolute; left: 14px; top: 0; display: block; width: 1px; height: 100%; background: #fff; z-index: 1; } .mainNews .slideWrap .contentSlide .slideItem { position: relative; padding: 0 26px 0 27px; } .mainNews .slideWrap .contentSlide .slideItem:before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 1px; height: 100%; background: #f3f3f3; } .mainNews .slideWrap .contentSlide .slideItem .imgBox { position: relative; width: 100%; padding-top: 66.6666666667%; margin-bottom: 25px; } .mainNews .slideWrap .contentSlide .slideItem .imgBox img { position: absolute; top: 0; width: 100%; height: 100%; max-width: 240px; max-height: 160px; } .mainNews .slideWrap .contentSlide .slideItem dl { text-align: left; } .mainNews .slideWrap .contentSlide .slideItem dl dt { margin-bottom: 10px; color: #474747; font-size: 20px; font-size: 2rem; letter-spacing: -0.04em; line-height: 1.4; overflow: hidden; max-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: -o-ellipsis-lastline; } .mainNews .slideWrap .contentSlide .slideItem dl dt a { color: #474747; } .mainNews .slideWrap .contentSlide .slideItem dl dd { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; letter-spacing: -0.04em; line-height: 1.5; } .mainNews .slideWrap .contentSlide .slideItem dl dd a { color: #666; } .mainNews .slideWrap .contentSlide .slideItem dl dd p { overflow: hidden; max-height: 4.5em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: -o-ellipsis-lastline; } .mainNews .slideWrap .contentSlide .slideItem dl dd .date { position: relative; margin-top: 10px; padding-left: 20px; display: block; color: #999; } .mainNews .slideWrap .contentSlide .slideItem dl dd .date:before { content: ''; position: absolute; left: 0; top: 6px; display: block; width: 14px; height: 14px; background: url("../img/main/w_icon_time.png") no-repeat center center; } .mainNews .slideWrap .contentSlide .slideItem .moreBtn { margin-top: 30px; } .mainNews .slideWrap .contentSlide .slideItem .moreBtn a { color: #b6b6b6; border: 1px solid #dadada; } .mainNews .slideWrap .contentSlide .slideItem .moreBtn a:before { display: none; } .mainNews .slideWrap .contentSlide .slideItem .moreBtn a:hover { color: #019bdb; border: 1px solid #019bdb; } .mainNews .slideWrap .contentSlide .slideItem:hover dl dt a, .mainNews .slideWrap .contentSlide .slideItem:hover dl dd a { text-decoration: underline; } .mainNews .slideWrap .contentSlide .slideItem.justText dl dt { margin-bottom: 14px; overflow: hidden; max-height: 4.2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: -o-ellipsis-lastline; } .mainNews .slideWrap .contentSlide .slideItem.justText dl dd { line-height: 1.6; } .mainNews .slideWrap .contentSlide .slideItem.justText dl dd p { overflow: hidden; max-height: 14.4em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; text-overflow: -o-ellipsis-lastline; } .mainNews .slick-prev, .mainNews .slick-next { top: -100px; left: auto; transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); width: 40px; height: 40px; border: 2px solid #e6e6e6; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mainNews .slick-prev { left: -14px; background: #fff url("../img/main/w_news_prev.png") no-repeat center center; } .mainNews .slick-next { left: 32px; background: #fff url("../img/main/w_news_next.png") no-repeat center center; } .mainNews .moveBtn { position: absolute; right: 0; top: -60px; display: block; width: auto; height: auto; } .mainNews .moveBtn a { position: relative; display: block; width: 40px; height: 40px; border: 1px solid #e6e6e6; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mainNews .moveBtn a:before, .mainNews .moveBtn a:after { content: ''; background: #222; } .mainNews .moveBtn a:before { position: absolute; left: 19px; top: 11px; display: block; width: 1px; height: 17px; } .mainNews .moveBtn a:after { position: absolute; left: 11px; top: 19px; display: block; width: 17px; height: 1px; } .mainNews .moveBtn a:hover:before, .mainNews .moveBtn a:hover:after { background: #019bdb; } /* ================================== Main media query ================================== */ @media only screen and (min-width: 2000px) { .mainVisual .slideItem.visual1 { background-size: 100% 1092px; } .mainVisual .slideItem.visual2 { background-size: 100% 1092px; } .mainVisual .slideItem.visual3 { background-size: 100% 1092px; } .mainTechnology.nkCell { background-size: 100% 980px; } .mainTechnology.superNk { background-size: 100% 980px; } .mainNews { background-size: 100% 842px; } } @media only screen and (max-width: 1540px) { .mainVisual .slick-dots { left: auto; right: 15px; margin-left: 0; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); } } @media only screen and (max-width: 1260px) { .mainTechnology .inrCont .txtBox { width: 46%; } .mainTechnology .slideWrap { width: 100%; } .mainProduct .inrCont .txtBox { width: 46%; } .mainProduct .inrCont .imgBox { width: 50%; } } @media only screen and (max-width: 1024px) { .mainProduct .inrCont.nkvuekit .txtBox, .mainProduct .inrCont.nk365 .txtBox, .mainProduct .inrCont.reagent .txtBox { margin-top: 6%; } .mainProduct .inrCont.nk365 .txtBox { float: right; } .mainProduct .inrCont.nk365 .imgBox .pattern { height: 82%; } .mainProduct .inrCont .imgBox .imgWrap:before { height: auto; padding-bottom: 135%; } .mainProduct .inrCont .imgBox .pattern { width: 88.75%; height: 82%; } } @media only screen and (max-width: 960px) { .mainVisual .txtBox { padding-left: 30px; } .mainTechnology .inrCont .txtBox { float: none; width: 100%; } .mainTechnology .inrCont .imgBox { float: none; width: 580px; margin: 25px auto 0; } .mainTechnology.nkCell .inrCont .txtBox { float: none; width: 100%; } .mainTechnology.superNk .inrCont { padding: 125px 30px 0; } .mainTechnology .slideWrap { height: auto; } .mainTechnology .slideItem:before { height: auto; padding-bottom: 63%; } .mainProduct .inrCont.nkvuekit .txtBox, .mainProduct .inrCont.nk365 .txtBox, .mainProduct .inrCont.reagent .txtBox { float: none; width: 100%; margin-top: 0; } .mainProduct .inrCont .imgBox { float: none !important; width: 540px; margin: 35px auto 0; } .mainProduct .inrCont .imgBox .imgWrap:before { padding-bottom: 119%; } .mainNews .slideWrap { margin-top: 60px; } } @media only screen and (max-width: 640px) { .mainVisual { height: auto; } .mainVisual .txtBox { top: 37.5%; } .mainVisual .txtBox > * { font-size: 18px; font-size: 1.8rem; } .mainVisual .txtBox h3 > span { font-size: 50px; font-size: 5rem; } .mainVisual .txtBox h3 > span > span { font-size: 45px; font-size: 4.5rem; } .mainVisual .txtBox p span { font-size: 17px; font-size: 1.7rem; } .mainVisual .slideItem:before { height: auto; padding-bottom: 153.125%; } .mainVisual .slideItem.visual1 { background: url("../img/main/m_visual_slide01.jpg") no-repeat center center; background-size: cover; } .mainVisual .slideItem.visual2 { background: url("../img/main/m_visual_slide02.jpg") no-repeat center center; background-size: cover; } .mainVisual .slideItem.visual3 { background: url("../img/main/m_visual_slide03.jpg") no-repeat center center; background-size: cover; } .inrCont .txtBox .titWrap { height: 87px; } .inrCont .txtBox .titWrap h3 { font-size: 54px; font-size: 5.4rem; } .inrCont .txtBox .titWrap h3 > span { font-size: 48px; font-size: 4.8rem; } .inrCont .txtBox .titWrap h3 > i { margin-top: 0; font-size: 30px; font-size: 3rem; } .inrCont .imgBox { padding-top: 18px; } .inrCont .imgBox .pattern { background-size: 6.5px 6.5px; } .inrCont.alLeft .txtBox .titWrap .bracket { width: 7px; } .inrCont.alLeft .txtBox .titWrap .bracket:before { width: 14px; height: 7px; } .inrCont.alLeft .txtBox .titWrap .bracket:after { width: 14px; height: 7px; } .inrCont.alLeft .txtBox .titWrap h3 { left: -25px; } .inrCont.alLeft .txtBox .titWrap.titTween h3 { left: 25px; } .inrCont.alLeft .txtBox .txtWrap { margin: 11px 0 0 28px; } .inrCont.alLeft .txtBox .moreBtn { margin: 13px 0 0 28px; } .inrCont.alLeft .imgBox { padding-right: 18px; } .inrCont.alLeft .imgBox .pattern { right: -2px; top: -2px; } .inrCont.alRight .txtBox .titWrap .bracket { width: 7px; } .inrCont.alRight .txtBox .titWrap .bracket:before { width: 14px; height: 7px; } .inrCont.alRight .txtBox .titWrap .bracket:after { width: 14px; height: 7px; } .inrCont.alRight .txtBox .titWrap h3 { right: 25px; } .inrCont.alRight .txtBox .titWrap.titTween h3 { right: 25px; } .inrCont.alRight .txtBox .txtWrap { margin: 11px 28px 0 0; } .inrCont.alRight .txtBox .moreBtn { margin: 13px 28px 0 0; } .inrCont.alRight .imgBox { padding-left: 18px; } .inrCont.alRight .imgBox .pattern { left: -2px; top: -2px; } .mainTechnology { min-height: 490px; } .mainTechnology .inrCont .imgBox { width: 100%; } .mainTechnology.nkCell { background-size: cover; } .mainTechnology.nkCell .inrCont { padding: 150px 4.6875% 100px; } .mainTechnology.superNk { background-size: cover; } .mainTechnology.superNk .inrCont { padding: 50px 4.6875% 50px; } .mainTechnology .slideItem.photo1 { background-size: cover; } .mainTechnology .slick-prev, .mainTechnology .slick-next { width: 65px; height: 50px; } .mainTechnology .slick-prev:hover:after, .mainTechnology .slick-next:hover:after { width: 39px; } .mainTechnology .slick-prev { right: 65px; background-size: 39px auto; background-position: right 17px; } .mainTechnology .slick-prev:after { top: 33px; height: 1px; } .mainTechnology .slick-next { background-size: 39px auto; background-position: left 17px; } .mainTechnology .slick-next:after { top: 33px; height: 1px; } .mainProduct { padding: 25px 0; } .mainProduct .inrCont { padding: 25px 4.6875%; } .mainProduct .inrCont .imgBox { width: 100%; margin-top: 18px; } .mainProduct .inrCont .imgBox .imgWrap:before { padding-bottom: 96%; } .mainProduct .inrCont.nkvuekit .imgBox .imgWrap { background: url("../img/main/m_product_nkvuekit.jpg") no-repeat center center; background-size: cover; } .mainProduct .inrCont.nk365 .imgBox { padding-left: 18px; } .mainProduct .inrCont.nk365 .imgBox .imgWrap { background: url("../img/main/m_product_nk365.jpg") no-repeat center center; background-size: cover; } .mainProduct .inrCont.reagent .imgBox .imgWrap { background: url("../img/main/m_product_reagent.jpg") no-repeat center center; background-size: cover; } .mainNews { min-height: auto; } .mainNews .inrCont { padding: 50px 4.6875%; } .mainNews h3 { padding: 5px 0; } .mainNews .slideWrap { width: 100%; margin-top: 40px; padding: 20px 10px; } .mainNews .slideWrap:before { display: none; } .mainNews .slideWrap .contentSlide .slideItem { padding: 0 10px; } .mainNews .slideWrap .contentSlide .slideItem:before { display: none; } .mainNews .slideWrap .contentSlide .slideItem .imgBox { margin-bottom: 13px; } .mainNews .slideWrap .contentSlide .slideItem dl dt { margin-bottom: 5px; } .mainNews .slideWrap .contentSlide .slideItem dl dd { font-size: 18px; font-size: 1.8rem; } .mainNews .slideWrap .contentSlide .slideItem dl dd .date { margin-top: 5px; padding-left: 10px; } .mainNews .slideWrap .contentSlide .slideItem dl dd .date:before { position: absolute; left: 0; top: 6px; display: block; width: 7px; height: 7px; background-size: 7px auto; } .mainNews .slideWrap .contentSlide .slideItem .moreBtn { margin-top: 15px; } .mainNews .slideWrap .contentSlide .slideItem.justText dl dt { margin-bottom: 7px; } .mainNews .slick-prev, .mainNews .slick-next { top: -60px; width: 29px; height: 29px; border: 1px solid #e6e6e6; } .mainNews .slick-prev { left: -14px; background: #fff url("../img/main/w_news_prev.png") no-repeat center center; } .mainNews .slick-next { left: 25px; background: #fff url("../img/main/w_news_next.png") no-repeat center center; } .mainNews .moveBtn { top: -40px; } .mainNews .moveBtn a { width: 29px; height: 29px; } .mainNews .moveBtn a:before { position: absolute; left: 13px; top: 7px; display: block; width: 1px; height: 13px; } .mainNews .moveBtn a:after { position: absolute; left: 7px; top: 13px; display: block; width: 13px; height: 1px; } } /* ================================== Contents ================================== */ .contentWrap { max-width: 1260px; margin: 0 auto; padding: 50px 30px; } .contentWrap.wide { max-width: 100%; margin: 0; padding: 50px 0 0 0; } .contentWrap.wide .wideBg { background: #f7f7f7; } .contentWrap.wide .contentInner { max-width: 1260px; margin: 0 auto; padding: 50px 30px; } .contentWrap.wide .contentInner .contentTitle { padding-bottom: 0; } .contentWrap.wide .contentInner .contentTitle:after { display: none; } .contentWrap .contentTitle { position: relative; margin-bottom: 50px; padding: 14px 0 19px; text-align: center; color: #111; font-size: 45px; font-size: 4.5rem; line-height: 1.1; } .contentWrap .contentTitle span { display: block; padding: 1px 0 5px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 30px; font-size: 3rem; } .contentWrap .contentTitle:after { content: ''; position: absolute; left: 50%; bottom: 0; display: block; width: 30px; height: 2px; transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); background: #333; } .contentWrap .contentTitle + .contentInner { padding-top: 0; } .contentWrap .headline { position: relative; margin-bottom: 50px; padding: 40px; text-align: center; } .contentWrap .headline > .bracket { transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: #ebebeb; z-index: 1; } .contentWrap .headline > .bracket:before { content: ''; background: #ebebeb; } .contentWrap .headline > .bracket:after { content: ''; background: #ebebeb; } .contentWrap .headline > .bracket.left { position: absolute; left: 0; top: 50%; display: block; width: 10px; height: 100%; } .contentWrap .headline > .bracket.left:before { position: absolute; left: 0; top: 0; display: block; width: 40px; height: 10px; } .contentWrap .headline > .bracket.left:after { position: absolute; left: 0; bottom: 0; display: block; width: 40px; height: 10px; } .contentWrap .headline > .bracket.right { position: absolute; right: 0; top: 50%; display: block; width: 10px; height: 100%; } .contentWrap .headline > .bracket.right:before { position: absolute; right: 0; top: 0; display: block; width: 40px; height: 10px; } .contentWrap .headline > .bracket.right:after { position: absolute; right: 0; bottom: 0; display: block; width: 40px; height: 10px; } .contentWrap .headline .mainText { color: #0b86cd; font-size: 26px; font-size: 2.6rem; line-height: 1.2; word-break: keep-all; letter-spacing: -0.03em;} .contentWrap .headline .mainText + .subText { margin-top: 9px; } .contentWrap .headline .subText { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; } .contentWrap .headline .subText strong { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap h3 { margin-bottom: 40px; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 26px; font-size: 2.6rem; line-height: 1.2; } .contentWrap h3.mgbSm { margin-bottom: 25px; } .contentWrap h3 + .conWrap { margin-top: -20px; } .contentWrap h4 { position: relative; padding-left: 20px; margin-bottom: 10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 22px; font-size: 2.2rem; line-height: 1.2; } .contentWrap h4:before { content: ''; position: absolute; left: 0; top: 13px; display: block; width: 10px; height: 2px; background: #1f99df; } .contentWrap h4 + .conWrap { margin-left: 20px; } .contentWrap .conWrap { margin-bottom: 50px; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; } .contentWrap .conWrap p + p { margin-top: 26px; } .contentWrap .conWrap p strong { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .conWrap.center { text-align: center; } .contentWrap .gridWrap:before, .contentWrap .gridWrap:after { content: ""; display: table; } .contentWrap .gridWrap:after { clear: both; } .contentWrap .gridWrap > * { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentWrap .gridWrap.col2 > * { width: 50%; } .contentWrap .gridWrap.col3 > * { width: 33.3333333333%; } .contentWrap .gridWrap.col4 > * { width: 25%; } .contentWrap .gridWrap2 { overflow: hidden; } .contentWrap .gridWrap2 .gridInner { margin: 0; } .contentWrap .gridWrap2 .gridInner:before, .contentWrap .gridWrap2 .gridInner:after { content: ""; display: table; } .contentWrap .gridWrap2 .gridInner:after { clear: both; } .contentWrap .gridWrap2 .gridInner .gridUnit { width: 100%; padding: 0; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentWrap .gridWrap2.col2 .gridInner .gridUnit { width: 50%; } .contentWrap .gridWrap2.col3 .gridInner .gridUnit { width: 33.3333333333%; } .contentWrap .gridWrap2.col4 .gridInner .gridUnit { width: 25%; } .contentWrap .gridWrap2.gap20 .gridInner { margin: -20px 0 0 -20px; } .contentWrap .gridWrap2.gap20 .gridInner .gridUnit { padding: 20px 0 0 20px; } .contentWrap .gridWrap2.gap30 .gridInner { margin: -30px 0 0 -30px; } .contentWrap .gridWrap2.gap30 .gridInner .gridUnit { padding: 30px 0 0 30px; } .contentWrap .gridWrap2.gap40 .gridInner { margin: -40px 0 0 -40px; } .contentWrap .gridWrap2.gap40 .gridInner .gridUnit { padding: 40px 0 0 40px; } .contentWrap .conBoxList { overflow: hidden; margin: -30px 0 0 -30px; } .contentWrap .conBoxList:before, .contentWrap .conBoxList:after { content: ""; display: table; } .contentWrap .conBoxList:after { clear: both; } .contentWrap .conBoxList > li { float: left; width: 100%; padding: 30px 0 0 30px; } .contentWrap .conBoxList.col2 > li { width: 50%; } .contentWrap .conBoxList.col3 > li { width: 33.3333333333%; } .contentWrap .conBox { position: relative; height: 100%; padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentWrap .conBox.line { border: 1px solid #cdcdcd; } .contentWrap .conBox.gray { background: #f7f7f7; } .contentWrap .conBox .conTit { margin-bottom: 6px; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; } .contentWrap .imgBox { text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .contentWrap .imgBox.line { padding: 30px; border: 1px solid #cdcdcd; } .contentWrap .imgBox.gray { padding: 30px; background: #f7f7f7; } .contentWrap .imgBox.gray2 { padding: 30px; background: #f3f3f4; } .contentWrap .imgBox img { max-width: 100%; } .contentWrap .imgBox .imgTit { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; } .contentWrap .imgBox.before { border: 2px solid #f7f7f7; } .contentWrap .imgBox.after { border: 2px solid #1f99df; } .contentWrap .imgBox.after .imgTit { color: #0b86cd; } .contentWrap .imgBox.alL { text-align: left; } .contentWrap .ulList > li { position: relative; padding-top: 1px; padding-left: 10px; } .contentWrap .ulList > li strong { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .ulList > li:before { content: ''; position: absolute; left: 0; top: 13px; display: block; width: 3px; height: 3px; background: #333; } .contentWrap .ulList > li:first-child { padding-top: 0; } .contentWrap .ulList > li:first-child:before { top: 12px; } .contentWrap .ulList > li > ul > li { position: relative; padding-top: 1px; padding-left: 10px; } .contentWrap .ulList > li > ul > li:before { content: '-'; position: absolute; left: 0; top: 1px; display: block; width: auto; height: auto; background: none; } .contentWrap .ulList > li > ul > li:first-child { padding-top: 0; } .contentWrap .ulList > li > ul > li:first-child:before { top: 0; } .contentWrap .ulList.wide > li { padding-top: 20px; } .contentWrap .ulList.wide > li:before { top: 32px; } .contentWrap .ulList.wide > li:first-child { padding-top: 0; } .contentWrap .ulList.wide > li:first-child:before { top: 12px; } .contentWrap .ulList.bulHyphen > li { padding-top: 3px; padding-bottom: 2px; } .contentWrap .ulList.bulHyphen > li:before { content: '-'; position: absolute; left: 0; top: 1px; display: block; width: auto; height: auto; background: none; } .contentWrap .ulList.bulHyphen > li:first-child:before { top: 0; } .contentWrap .tableWrap { border-top: 2px solid #46474c; } .contentWrap .tableWrap th, .contentWrap .tableWrap td { padding: 13px 13px; border-bottom: 1px solid #ccc; } .contentWrap .tableWrap th.em, .contentWrap .tableWrap td.em { font-style: normal; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .tableWrap th { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .tableWrap td { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; } .contentWrap .tableWrap tfoot th, .contentWrap .tableWrap tfoot td { background: #cde8f7; } .contentWrap .tableWrap .ulTbl li { position: relative; padding-left: 10px; } .contentWrap .tableWrap .ulTbl li:before { content: '-'; position: absolute; left: 0; top: -1px; display: block; width: auto; height: auto; } .contentWrap .tableWrap .ulTbl li:first-child { padding-top: 0; } .contentWrap .tableWrap .dlTbl dt { margin-bottom: 2px; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .tableWrap.typeA tbody th { padding: 13px 28px; text-align: left; } .contentWrap .tableWrap.typeB tbody th { color: #666; } .contentWrap .tableWrap.typeB td { text-align: center; } .contentWrap .tableWrap.typeC tbody th { background: #f7f7f7; } .contentWrap .tableWrap.typeC td { text-align: center; } .contentWrap .tableWrap.typeD th, .contentWrap .tableWrap.typeD td { border-left: 1px solid #ccc; } .contentWrap .tableWrap.typeD thead th:first-child, .contentWrap .tableWrap.typeD tbody th:first-child, .contentWrap .tableWrap.typeD tbody td:first-child { border-left: 0; } .contentWrap .tableWrap.typeD thead tr.theadSub th { text-align: left; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } .contentWrap .tableWrap.typeD thead tr.theadSub th.em { color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } .contentWrap .tableWrap.typeD tbody th { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; background: #f7f7f7; } .contentWrap .tableWrap.typeD tbody td { vertical-align: top; } .contentWrap .tableWrap.typeD tbody td:first-child { border-left: 0; } .contentWrap .tableWrap.typeD tbody td.em { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } .contentWrap .tableWrap.tdCenter tbody td { text-align: center; } .contentWrap .tableWrap.tdRight tbody td { text-align: right; } .contentWrap .tableWrap.tdRight tbody td.alC { text-align: center; } .contentWrap .tableWrap.tblScroll { overflow-x: auto; } .contentWrap .tableWrap.tblScroll table { table-layout: auto; min-width: 700px; } .contentWrap .tblNote { position: relative; margin-top: 15px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; } .contentWrap .tblNote .noteTit { position: absolute; left: 0; top: 0; display: block; width: auto; height: auto; } .contentWrap .em { color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .contentWrap .bgGray { background: #f7f7f7; } .contentWrap .mgtXs { margin-top: 10px; } .contentWrap .mgtSm { margin-top: 20px; } .contentWrap .mgtMd { margin-top: 30px; } .contentWrap .mgtLg { margin-top: 50px; } .contentWrap .tabs { text-align: center; margin-top: -8px; margin-bottom: 50px; } .contentWrap .tabs li { position: relative; display: inline-block; padding: 0 26px 0 34px; } .contentWrap .tabs li:before { content: ''; position: absolute; left: 0; top: 16px; display: block; width: 6px; height: 6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ccc; } .contentWrap .tabs li:first-child { padding-left: 26px; } .contentWrap .tabs li:first-child:before { display: none; } .contentWrap .tabs li a { display: block; padding: 1px 0 3px; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 22px; font-size: 2.2rem; } .contentWrap .tabs li.active a { color: #1f99df; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; border-bottom: 2px solid #229adf; } .contentWrap .conNote { position: relative; padding-left: 20px; } .contentWrap .conNote > span { position: absolute; left: 0; top: 0; display: block; width: auto; height: auto; } /* ================================== Contents media query ================================== */ @media only screen and (max-width: 960px) { .contentWrap .gridWrap.col4 > * { width: 50%; } .contentWrap .gridWrap2.col4 .gridInner .gridUnit { width: 50%; } .contentWrap .conBoxList.col2 > li { float: none; width: 100%; } .contentWrap .conBoxList.col3 > li { width: 50%; } } @media only screen and (max-width: 640px) { .contentWrap { padding: 35px 4.6875%; } .contentWrap.wide { padding: 35px 0 0 0; } .contentWrap.wide .contentInner { padding: 35px 4.6875%; } .contentWrap .contentTitle { margin-bottom: 35px; padding: 10px 0 14px; } .contentWrap .contentTitle span { padding: 1px 0 3px; } .contentWrap .contentTitle:after { width: 21px; height: 1px; } .contentWrap .contentTitle + .contentInner { padding-top: 0; } .contentWrap .headline { margin-bottom: 35px; padding: 28px; } .contentWrap .headline > .bracket.left { width: 7px; } .contentWrap .headline > .bracket.left:before, .contentWrap .headline > .bracket.left:after { width: 28px; height: 7px; } .contentWrap .headline > .bracket.right { width: 7px; } .contentWrap .headline > .bracket.right:before, .contentWrap .headline > .bracket.right:after { width: 28px; height: 7px; } .contentWrap .headline .mainText + .subText { margin-top: 7px; } .contentWrap .headline .mainText br { display: none; } .contentWrap .headline .subText { font-size: 18px; font-size: 1.8rem; } .contentWrap h3 { margin-bottom: 28px; } .contentWrap h3.mgbSm { margin-bottom: 18px; } .contentWrap h3 + .conWrap { margin-top: -14px; } .contentWrap h4 { padding-left: 14px; margin-bottom: 7px; } .contentWrap h4:before { top: 8px; width: 7px; } .contentWrap h4 + .conWrap { margin-left: 14px; } .contentWrap .conWrap { margin-bottom: 35px; font-size: 18px; font-size: 1.8rem; } .contentWrap .conWrap p + p { margin-top: 18px; } .contentWrap .gridWrap.col2 > * { width: 100%; } .contentWrap .gridWrap.col3 > * { width: 100%; } .contentWrap .gridWrap.col4 > * { width: 100%; } .contentWrap .gridWrap2.col2 .gridInner .gridUnit { width: 100%; } .contentWrap .gridWrap2.col3 .gridInner .gridUnit { width: 100%; } .contentWrap .gridWrap2.col4 .gridInner .gridUnit { width: 100%; } .contentWrap .gridWrap2.gap20 .gridInner { margin: -14px 0 0 -14px; } .contentWrap .gridWrap2.gap20 .gridInner .gridUnit { padding: 14x 0 0 14px; } .contentWrap .gridWrap2.gap30 .gridInner { margin: -21px 0 0 -21px; } .contentWrap .gridWrap2.gap30 .gridInner .gridUnit { padding: 21px 0 0 21px; } .contentWrap .gridWrap2.gap40 .gridInner { margin: -28px 0 0 -28px; } .contentWrap .gridWrap2.gap40 .gridInner .gridUnit { padding: 28px 0 0 28px; } .contentWrap .conBoxList { margin: -21px 0 0 -21px; } .contentWrap .conBoxList > li { padding: 21px 0 0 21px; } .contentWrap .conBoxList.col3 > li { float: none; width: 100%; } .contentWrap .conBox { padding: 18px; } .contentWrap .imgBox.line { padding: 21px; } .contentWrap .imgBox.gray { padding: 21px; } .contentWrap .imgBox.gray2 { padding: 21px; } .contentWrap .ulList > li { padding-left: 7px; } .contentWrap .ulList > li:before { position: absolute; left: 0; top: 9px; display: block; width: 2px; height: 2px; } .contentWrap .ulList > li:first-child:before { top: 8px; } .contentWrap .ulList > li > ul > li { padding-left: 7px; } .contentWrap .ulList > li > ul > li:before { content: '-'; position: absolute; left: 0; top: 1px; display: block; width: auto; height: auto; background: none; } .contentWrap .ulList > li > ul > li:first-child:before { top: 0; } .contentWrap .ulList.wide > li { padding-top: 14px; } .contentWrap .ulList.wide > li:before { top: 22px; } .contentWrap .ulList.wide > li:first-child:before { top: 8px; } .contentWrap .ulList.bulHyphen > li { padding-top: 2px; padding-bottom: 1px; } .contentWrap .ulList.bulHyphen > li:before { position: absolute; left: 0; top: 1px; display: block; width: auto; height: auto; } .contentWrap .ulList.bulHyphen > li:first-child:before { top: 0; } .contentWrap .tableWrap table { table-layout: fixed; word-break: break-all; } .contentWrap .tableWrap th, .contentWrap .tableWrap td { padding: 10px 10px; } .contentWrap .tableWrap .ulTbl li { padding-left: 7px; } .contentWrap .tableWrap.typeA tbody th { padding: 10px 20px; } .contentWrap .tableWrap.typeA tbody tr > *:first-child { padding: 10px 5px 10px 1px; } .contentWrap .mgtXs { margin-top: 7px; } .contentWrap .mgtSm { margin-top: 14px; } .contentWrap .mgtMd { margin-top: 21px; } .contentWrap .mgtLg { margin-top: 35px; } .contentWrap .tblNote { margin-top: 10px; } .contentWrap .tabs { margin-top: -5px; margin-bottom: 35px; } .contentWrap .tabs li { padding: 0 18px 0 24px; } .contentWrap .tabs li:before { position: absolute; left: 0; top: 12px; display: block; width: 4px; height: 4px; } .contentWrap .tabs li:first-child { padding-left: 18px; } .contentWrap .tabs li a { padding: 1px 0 2px; } .contentWrap .tabs li.active a { border-bottom: 1px solid #229adf; } .contentWrap .conNote { padding-left: 15px; } } /* ================================== Company ================================== */ .overviewCont1 .inrCont .txtBox { width: 55%; padding-right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .overviewCont1 .inrCont .txtBox .slogan { color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 26px; font-size: 2.6rem; line-height: 1.2; } .overviewCont1 .inrCont .txtBox .slogan strong { display: block; color: #004f9f; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 55px; font-size: 5.5rem; } .overviewCont1 .inrCont .txtBox .slogan strong span { color: #4eb5e6; } .overviewCont1 .inrCont .imgBox { width: 45%; } .overviewCont1 .inrCont .imgBox .imgWrap { background: url("../img/company/photo_overview.jpg") no-repeat center center; } .overviewCont1 .inrCont .imgBox .imgWrap:before { height: 530px; } .overviewCont1 .inrCont .imgBox .pattern { width: 79.5%; height: 512px; } .overviewCont2 .photo { position: absolute; left: 19px; top: 22px; display: block; width: 150px; height: 172px; background: #fff; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .overviewCont2 .photo img { width: 100%; } .overviewCont2 .position { color: #0b86cd; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 14px; font-size: 1.4rem; } .overviewCont2 .name { margin-bottom: 10px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; } .overviewCont2 .name span { padding-right: 5px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 22px; font-size: 2.2rem; } .overviewCont2 .profile li { position: relative; padding-top: 2px; padding-left: 10px; } .overviewCont2 .profile li:before { content: '-'; position: absolute; left: 0; top: 1px; display: block; width: auto; height: auto; } .overviewCont2 .profile li:first-child { padding-top: 0; } .overviewCont2 .profile li:first-child:before { top: -1px; } .overviewCont2 .ceoProfile { position: relative; padding: 33px 25px; padding-left: 39.5%; min-height: 318px; border: 1px solid #249be0; background: #fff url("../img/company/bg_ceo_pc.jpg") no-repeat left bottom; } .overviewCont2 .ceoProfile:after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 570px; height: 56px; background: url("../img/company/deco_ceo_pc.png") no-repeat right top; background-size: 100%; } .overviewCont2 .ceoProfile .colWrap:before, .overviewCont2 .ceoProfile .colWrap:after { content: ""; display: table; } .overviewCont2 .ceoProfile .colWrap:after { clear: both; } .overviewCont2 .ceoProfile .colWrap > * { float: left; } .overviewCont2 .ceoProfile .ceoMessage { margin-top: 60px; margin-bottom: 30px; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 22px; font-size: 2.2rem; } .overviewCont2 .ceoProfile .position { color: #666; font-size: 16px; font-size: 1.6rem; } .overviewCont2 .ceoProfile .name { width: 38%; margin-top: 5px; font-size: 18px; font-size: 1.8rem; } .overviewCont2 .ceoProfile .name span { font-size: 24px; font-size: 2.4rem; } .overviewCont2 .ceoProfile .profile { margin-top: 7px; } .overviewCont2 .ceoProfile .profile li { font-size: 18px; font-size: 1.8rem; } .overviewCont2 .ceoProfile p + p { margin-top: auto; } .overviewCont2 .ceoProfile + .conBoxList { margin-top: 0; } .overviewCont2 .conBox { padding: 33px 25px; padding-left: 194px; min-height: 218px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .overviewCont2 .conBox p + p { margin-top: auto; } .historyWrap { padding-bottom: 12px; background: url("../img/company/bg_history.jpg") no-repeat right 340px; } .historyWrap .periodWrap:before, .historyWrap .periodWrap:after { content: ""; display: table; } .historyWrap .periodWrap:after { clear: both; } .historyWrap .periodWrap h4 { float: left; width: 338px; } .historyWrap .periodWrap h4 span { font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 18px; font-size: 1.8rem; } .historyWrap .periodWrap .conWrap { float: left; margin-bottom: 38px; } .historyWrap .yearBox { margin-top: 18px; } .historyWrap .yearBox:before, .historyWrap .yearBox:after { content: ""; display: table; } .historyWrap .yearBox:after { clear: both; } .historyWrap .yearBox:first-child { margin-top: 0; } .historyWrap .yearBox dt { float: left; width: 84px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; } .historyWrap .yearBox dd { float: left; } .networkCont { text-align: center; } .networkCont img {display: block;margin: 0 auto;} .networkCont .legend { display: inline-block; margin: 0 auto; padding: 2px 0; padding-left: 40px; color: #666; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .networkCont .legend:first-child { padding-left: 0; } .networkCont .legend i { display: inline-block; margin-bottom: -6px; } .networkCont .legend i:before { content: ''; display: block; width: 30px; height: 24px; background: url("../img/company/icon_legend.png") no-repeat 0 0; } .networkCont .legend.foreign i:before { background-position: 0 0px; } .networkCont .legend.licensing i:before { background-position: 0 -30px; } .networkCont .legend.contract i:before { background-position: 0 -60px; } .networkCont .legend.clinical i:before { background-position: 0 -90px; } .networkCont .conBox { text-align: left; } .networkCont .conBox h3 { margin-bottom: 15px; color: #333; font-size: 22px; font-size: 2.2rem; } .networkCont .conBox dl { position: relative; margin-top: 3px; padding-left: 35px; } .networkCont .conBox dl:first-child { margin-top: 0; } .networkCont .conBox dl dt { position: absolute; top: 0; left: 0; padding-right: 5px; } .networkCont .conBox dl dt i { margin-bottom: -5px; } .networkCont .conBox li { position: relative; padding-left: 10px; } .networkCont .conBox li:before { content: '-'; position: absolute; left: 0; top: -1px; display: block; width: auto; height: auto; } .mapApiArea { width: 100%; height: 400px; } .contactCont2 h4 { color: #333; } .contactCont2 .conBox { padding: 0; padding-right: 20px; } .contactCont2 .conBox + .conBox { padding: 0; padding-left: 20px; } /* ================================== Company media query ================================== */ @media only screen and (max-width: 1024px) { .overviewCont2 .ceoProfile { background-position: -60px bottom; } .historyWrap .periodWrap h4 { float: none; margin-bottom: 20px; } .historyWrap .periodWrap .conWrap { float: none; } } @media only screen and (max-width: 960px) { .overviewCont1 .inrCont .txtBox { float: none; width: 100%; } .overviewCont1 .inrCont .txtBox .slogan br { display: none; } .overviewCont1 .inrCont .imgBox { float: none; width: 500px; margin: 25px auto 0; } .overviewCont2 .ceoProfile { padding-left: 310px; background-position: -90px bottom; } .overviewCont2 .ceoProfile .colWrap:before, .overviewCont2 .ceoProfile .colWrap:after { content: ""; display: table; } .overviewCont2 .ceoProfile .colWrap:after { clear: both; } .overviewCont2 .ceoProfile .colWrap > * { float: none; } .overviewCont2 .ceoProfile .ceoMessage { margin-top: 10px; } .overviewCont2 .ceoProfile .name { width: 100%; } .overviewCont2 .ceoProfile .profile { margin-top: 17px; } .contactCont2 .gridWrap.col2 > * { float: none; width: 100%; } .contactCont2 .conBox { padding-right: 0; } .contactCont2 .conBox + .conBox { margin-top: 50px; padding-left: 0; } } @media only screen and (max-width: 640px) { .overviewCont1 .inrCont .imgBox { width: 100%; margin-top: 18px; } .overviewCont1 .inrCont .imgBox .imgWrap:before { height: auto; padding-bottom: 98%; } .overviewCont1 .inrCont .imgBox .pattern { height: 88%; } .overviewCont1 .imgBox.line { padding: 21px 0; } .overviewCont2 .photo { position: absolute; left: 14px; top: 16px; display: block; width: 105px; height: 120px; } .overviewCont2 .position { font-size: 16px; font-size: 1.6rem; } .overviewCont2 .name { margin-bottom: 7px; font-size: 18px; font-size: 1.8rem; } .overviewCont2 .name span { padding-right: 3px; font-size: 24px; font-size: 2.4rem; } .overviewCont2 .profile li { padding-left: 7px; } .overviewCont2 .conBox { padding: 24px 18px; padding-left: 140px; min-height: 152px; } .overviewCont2 .ceoProfile { padding: 24px 18px; padding-left: 50%; min-height: 200px; background: #fff url("../img/company/bg_ceo_mo.jpg") no-repeat left bottom; background-size: auto 190px; } .overviewCont2 .ceoProfile:after { position: absolute; right: 0; top: 0; display: block; width: 234px; height: 24px; background: url("../img/company/deco_ceo_mo.png") no-repeat right top; background-size: 100%; } .overviewCont2 .ceoProfile .ceoMessage { margin-top: 7px; margin-bottom: 21px; } .overviewCont2 .ceoProfile .name { margin-top: 3px; } .overviewCont2 .ceoProfile .profile { margin-top: 10px; } .historyWrap { background-size: 200px auto; background-position: right bottom; } .historyWrap .periodWrap h4 { margin-bottom: 14px; } .historyWrap .periodWrap .conWrap { margin-bottom: 26px; } .historyWrap .yearBox { margin-top: 12px; } .historyWrap .yearBox dt { width: 15%; } .historyWrap .yearBox dd { width: 85%; } .networkCont .legend { padding-left: 28px; } .networkCont .legend i { margin-bottom: -4px; } .networkCont .legend i:before { width: 21px; height: 18px; background-size: 21px auto; } .networkCont .legend.foreign i:before { background-position: 0 0px; } .networkCont .legend.licensing i:before { background-position: 0 -21px; } .networkCont .legend.contract i:before { background-position: 0 -42px; } .networkCont .legend.clinical i:before { background-position: 0 -63px; } .networkCont .conBox h3 { margin-bottom: 10px; } .networkCont .conBox dl { margin-top: 2px; } .networkCont .conBox dl dt i { margin-bottom: -4px; } .networkCont .conBox li { padding-left: 7px; } .contactCont2 .conBox + .conBox { margin-top: 30px; } } /* ================================== Technology ================================== */ .nkcellCont1 ul { display: table; } .nkcellCont1 li { display: table-cell; width: 33.3333333333%; padding: 0 20px; border-left: 1px solid #ccc; text-align: center; } .nkcellCont1 li:first-child { border-left: 0; } .nkcellCont1 li:before { content: ''; display: block; width: 80px; height: 60px; margin: 0 auto 20px; background: url("../img/technology/icon_nkcell_cont1.png") no-repeat 0 0; } .nkcellCont1 li.con1:before { background-position: 0 0; } .nkcellCont1 li.con2:before { background-position: 0 -60px; } .nkcellCont1 li.con3:before { background-position: 0 -120px; } .nkcellCont1 li dt { min-height: 46px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; line-height: 1.3; } .nkcellCont1 li dd { margin-top: 10px; } .supernkCont21.col2 .imgBox { width: 48.72%; } .supernkCont21.col2 .imgBox + .imgBox { float: right; } .supernkCont21.col2 .imgBox img { margin-top: 30px; } .supernkCont22 .col2 span { text-align: right; } .supernkCont22 .col2 span + span { text-align: left; } .nkvuekitCont4 .conBox { padding-left: 193px; } .nkvuekitCont4 .conBox p { position: absolute; left: 50px; top: 48px; display: block; width: 100px; height: auto; text-align: center; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .nkvuekitCont4 .conBox p:before { content: ''; display: block; width: 70px; height: 70px; margin: 0 auto 7px; background: url("../img/technology/icon_nkvuekit_cont4.png") no-repeat 0 0; } .nkvuekitCont4 .conBox p.contit1:before { background-position: 0 0; } .nkvuekitCont4 .conBox p.contit2:before { background-position: 0 -100px; } .nkvuekitCont4 .conBox p.contit3:before { background-position: 0 -200px; } .nkvuekitCont4 .conBox p.contit4:before { background-position: 0 -300px; } .rndCont2 .conBox { padding: 0; padding-right: 20px; } .rndCont2 .imgBox { padding-left: 20px; } .rndCont2 .tblNote { padding-left: 104px; } /* ================================== Technology media query ================================== */ @media only screen and (max-width: 960px) { .supernkCont21.col2 .imgBox { float: none; width: 100%; } .supernkCont21.col2 .imgBox + .imgBox { margin-top: 30px; } .supernkCont22 .col2 span { float: none; width: 100%; text-align: center; } .nkvuekitCont4 .conBox p { top: 30px; } .nkvuekitCont4 .conBox p:before { margin-bottom: 2px; } .rndCont2 .gridWrap.col2 > * { float: none; width: 100%; } .rndCont2 .conBox { padding-right: 0; } .rndCont2 .imgBox { margin-top: 30px; padding-left: 0; } } @media only screen and (max-width: 640px) { .nkcellCont1 li { display: block; width: 100%; padding: 21px 4.6875%; border-left: 0; border-bottom: 1px solid #ccc; } .nkcellCont1 li:first-child { padding-top: 0; } .nkcellCont1 li:before { width: 80px; height: 60px; margin-bottom: 14px; } .nkcellCont1 li.con1:before { background-position: 0 0; } .nkcellCont1 li.con2:before { background-position: 0 -60px; } .nkcellCont1 li.con3:before { background-position: 0 -120px; } .nkcellCont1 li dt { min-height: auto; } .nkcellCont1 li dd { margin-top: 7px; } .supernkCont21.col2 .imgBox + .imgBox { margin-top: 21px; } .supernkCont21.col2 .imgBox img { margin-top: 21px; } .nkvuekitCont2 .imgBox.gray { padding: 0; } .nkvuekitCont4 .conBox { padding-left: 130px; } .nkvuekitCont4 .conBox p { left: 15px; top: 20px; font-size: 18px; font-size: 1.8rem; } .nkvuekitCont4 .conBox p:before { width: 49px; height: 49px; background-size: 49px auto; } .nkvuekitCont4 .conBox p.contit1:before { background-position: 0 0; } .nkvuekitCont4 .conBox p.contit2:before { background-position: 0 -70px; } .nkvuekitCont4 .conBox p.contit3:before { background-position: 0 -140px; } .nkvuekitCont4 .conBox p.contit4:before { background-position: 0 -210px; } .rndCont2 .imgBox { margin-top: 21px; } .rndCont2 .tblNote { padding-left: 82px; } } /* ================================== Business ================================== */ .cellcarcinoCont2 .imgBox.gray { padding-left: 13px; padding-right: 27px; } .cellcarcinoCont5 .col2 span { text-align: right; } .cellcarcinoCont5 .col2 span + span { text-align: left; } .cellcarcinoCont6 .imgBox.gray { padding-left: 15px; padding-right: 15px; } .cellcarcinoCont6 .gridWrap2.col2 .gridInner .gridUnit { width: 49.13%; } .cellcarcinoCont6 .gridWrap2.col2 .gridInner .gridUnit + .gridUnit { width: 50.86%; } .cellcarcinoCont8 .gridWrap2 { margin: 0 2.5% 0 4.5%; } .linkBtn { margin-left: 10px; } .linkBtn > * { color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 15px; font-size: 1.5rem; } .linkBtn:after { content: ''; display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin: -2px 0 0 7px; background: url("../img/business/icon_go_link.png") no-repeat 0 0; } .pipeline { border-top: 1px solid #ccc; } .pipeline ul { padding: 0 40px; } .pipeline ul:before, .pipeline ul:after { content: ""; display: table; } .pipeline ul:after { clear: both; } .pipeline ul li { width: 25%; float: left; height: 49px; line-height: 49px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; } .pipeline .barGraph { position: relative; padding: 14px 40px; border-top: 1px solid #dadade; border-bottom: 1px solid #dadade; } .pipeline .barGraph span { display: block; width: 100%; height: 40px; background: url("../img/business/bg_pipeline.jpg") no-repeat 0 0; background-size: 100% 40px; -webkit-border-radius: 0 20px 20px 0; -moz-border-radius: 0 20px 20px 0; -ms-border-radius: 0 20px 20px 0; border-radius: 0 20px 20px 0; } .pipeline .barGraph span:before { content: ''; position: absolute; left: 0; top: 50%; display: block; width: 40px; height: 40px; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); background: #5bc5ff; } .pipeline .barGraph.eng span { width: 75%; } .pipeline .barGraph.eng2 span { width: 58%; } .pipeline .barGraph.eng3 span { width: 42%; } .pipeline .barGraph.kor span { width: 74%; } .pipeline .barGraph.mex span { width: 74%; } .pipeline .barGraph.mex2 span { width: 58%; } .pipeline .barGraph.same span { width: 56%; } .pipeline .barGraph.car span { width: 41.5%; } .kitnkcellCont1 .gridWrap2 { margin: 0 3.5%; } .kitnkcellCont1 .gridWrap2 img { margin-top: 10px; margin-bottom: 15px; } .kitnkcellCont2 .imgBox { padding: 25px; } .kitnkcellCont3 .gridWrap.col2 > * { padding: 0 5px; } .kitnkvuekitCont4 .gridWrap.col2 > * { padding: 0 5px; } .kitnkvuekitCont1 .imgBox { padding: 0 30px; } .interpretUnit { display: table; margin-bottom: 20px; } .interpretUnit > * { display: table-cell; vertical-align: middle; } .interpretUnit p { width: 180px; } .interpretUnit p span { display: table-cell; width: 144px; height: 144px; text-align: center; vertical-align: middle; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 18px; font-size: 1.8rem; border: 1px solid #ddd; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .interpretUnit p span i { display: block; font-style: normal; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; } .interpretUnit.sec1 p span { color: #0b86cd; border-color: #1f99df; } .interpretUnit.sec2 p span { color: #0c9322; border-color: #32b16c; } .interpretUnit.sec3 p span { color: #ed6d00; border-color: #ed6d00; } .interpretUnit.sec4 p span { color: #d51827; border-color: #e55353; } .interpretUnit li { position: relative; padding-left: 42px; line-height: 1.6; } .interpretUnit li span { position: absolute; top: 0; left: 0; } .interpretUnit li span strong { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; } .interpretUnit dt { color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; line-height: 1.6; } .interpretUnit dd { line-height: 1.6; } .interpretUnit dd .certiChk { display: inline-block; color: #018bdb; margin-top: 5px; margin-right: 20px; } .interpretUnit dd .certiChk:before { content: ''; display: inline-block; vertical-align: middle; margin-top: -6px; margin-right: 4px; width: 22px; height: 22px; background: url("../img/business/icon_check.png") no-repeat 0 0; background-size: cover; } .nk365Cont .gridWrap2 .imgBox img { margin-top: 15px; } /* 20200630 */ .outlineCont { padding: 30px; background: #f7f7f7; } .outlineCont .conBox { padding-top: 60px; padding-left: 60px; } .outlineCont .conBox h3 { margin-bottom: 30px; color: #005bab; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 74px; font-size: 7.4rem; line-height: 1.1; } .outlineCont .conBox h3 .light { color: #009fdb; } .outlineCont .conBox h3 small { display: block; font-size: 38px; font-size: 3.8rem; } .outlineCont .conBox p { margin-bottom: 5px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 22px; font-size: 2.2rem; } .outlineCont .imgBox img { margin: 0 auto; } .nkpuppyCont1 .conBox { width: 42% !important; } .nkpuppyCont1 .imgBox { width: 58% !important; } .nkpuppyCont3 .interpretUnit li { padding-left: 0; } .nkpuppyCont3 .interpretUnit p span:before { content: ''; content: ''; display: block; width: 60px; height: 56px; margin: 0 auto; } .nkpuppyCont3 .interpretUnit.sec1 p span { color: #8dc63f; border-color: #8dc63f; } .nkpuppyCont3 .interpretUnit.sec1 p span:before { background: url("../img/business/icon_nkpuppy1.png") no-repeat 0 0; background-size: cover; } .nkpuppyCont3 .interpretUnit.sec2 p span { color: #ffcb08; border-color: #ffcb08; } .nkpuppyCont3 .interpretUnit.sec2 p span:before { background: url("../img/business/icon_nkpuppy2.png") no-repeat 0 0; background-size: cover; } .nkpuppyCont3 .interpretUnit.sec3 p span { color: #ed145b; border-color: #ed145b; } .nkpuppyCont3 .interpretUnit.sec3 p span:before { background: url("../img/business/icon_nkpuppy3.png") no-repeat 0 0; background-size: cover; } .nkpuppyCont4 dl { margin-top: 30px; } .nkpuppyCont4 dl + .imgBox { margin-top: 20px; } .nkpuppyCont4 dt { color: #34a3e2; font-weight: 500; } .nkpuppyCont4 .gridWrap2 { max-width: 778px; margin: 0 auto; } .nkpuppyCont4 .ex { margin-top: 12px; } .nk365petCont1 .conBox { width: 48% !important; } .nk365petCont1 .imgBox { width: 52% !important; } .nk365petCont3 .interpretUnit p span:before { content: ''; content: ''; display: inline-block; vertical-align: middle; width: 60px; height: 60px; } .nk365petCont3 .interpretUnit.sec1 p span { color: #018adb; border-color: #ddd; } .nk365petCont3 .interpretUnit.sec1 p span:before { background: url("../img/business/icon_nk365pet1.png") no-repeat 0 0; background-size: cover; } .nk365petCont3 .interpretUnit.sec2 p span { color: #018adb; border-color: #ddd; } .nk365petCont3 .interpretUnit.sec2 p span:before { background: url("../img/business/icon_nk365pet2.png") no-repeat 0 0; background-size: cover; } .nk365petCont3 .interpretUnit.sec3 p span { color: #018adb; border-color: #ddd; } .nk365petCont3 .interpretUnit.sec3 p span:before { background: url("../img/business/icon_nk365pet3.png") no-repeat 0 0; background-size: cover; } .nk365_wrap_new .nk365petCont3 .interpretUnit p span:before { content: ''; content: ''; display: inline-block; vertical-align: middle; width: 50px; height: 50px; } .nk365_wrap_new .nk365petCont3 .interpretUnit.sec1 p span { color: #018adb; border-color: #ddd; } .nk365_wrap_new .nk365petCont3 .interpretUnit.sec1 p span:before { background: url("../img/business/icon_nk365_new_01.png") no-repeat 0 0;} .nk365_wrap_new .nk365petCont3 .interpretUnit.sec2 p span { color: #018adb; border-color: #ddd; } .nk365_wrap_new .nk365petCont3 .interpretUnit.sec2 p span:before { background: url("../img/business/icon_nk365_new_02.png") no-repeat 0 0;} .nk365_wrap_new .nk365petCont3 .interpretUnit.sec3 p span { color: #018adb; border-color: #ddd; } .nk365_wrap_new .nk365petCont3 .interpretUnit.sec3 p span:before { background: url("../img/business/icon_nk365_new_03.png") no-repeat 0 0;} /* ================================== Business media query ================================== */ @media only screen and (max-width: 960px) { .outlineCont .conBox { padding-top: 25px; padding-left: 25px; } .nkpuppyCont1 .conBox, .nk365petCont1 .conBox { width: 100% !important; } .nkpuppyCont1 .imgBox, .nk365petCont1 .imgBox { width: 100% !important; } } @media only screen and (max-width: 640px) { .cellcarcinoCont2 .imgBox.gray { padding: 21px; padding-right: 21px; } .cellcarcinoCont5 .col2 span { float: none; width: 100%; text-align: center; } .cellcarcinoCont6 .imgBox.gray { padding: 21px; padding-right: 21px; } .cellcarcinoCont6 .gridWrap2.col2 .gridInner .gridUnit { float: none; width: 100%; } .cellcarcinoCont6 .gridWrap2.col2 .gridInner .gridUnit + .gridUnit { float: none; width: 100%; } .cellcarcinoCont8 .gridWrap2 { margin: 0; } .linkBtn { margin-left: 7px; } .linkBtn > * { font-size: 18px; font-size: 1.8rem; } .pipeline ul { padding: 0; } .pipeline ul li { height: 35px; line-height: 35px; } .pipeline .barGraph { padding: 10px 0; } .pipeline .barGraph span { height: 30px; background-size: 100% 30px; -webkit-border-radius: 0 15px 15px 0; -moz-border-radius: 0 15px 15px 0; -ms-border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0; } .pipeline .barGraph span:before { display: none; } .kitnkcellCont1 .gridWrap2 { margin: 0; } .kitnkcellCont1 .gridWrap2 img { margin-top: 7px; margin-bottom: 10px; } .kitnkcellCont2 .imgBox { padding: 0; } .kitnkcellCont3 .gridWrap.col2 > * { float: none; width: 100%; padding: 0 3px; } .kitnkcellCont3 .gridWrap > div + div { margin-top: 21px; } .kitnkvuekitCont4 .gridWrap.col2 > * { float: none; width: 100%; padding: 0 3px; } .kitnkvuekitCont4 .gridWrap > div + div { margin-top: 21px; } .kitnkvuekitCont1 .imgBox { padding: 0 30px; } .interpretUnit { margin-bottom: 14px; } .interpretUnit p { width: 126px; } .interpretUnit p span { width: 106px; height: 106px; font-size: 20px; font-size: 2rem; } .interpretUnit p span i { font-size: 18px; font-size: 1.8rem; } .interpretUnit li { padding-left: 32px; } .interpretUnit dd .certiChk { margin-top: 3px; margin-right: 12px; } .interpretUnit dd .certiChk:before { margin-top: -4px; margin-right: 2px; width: 14px; height: 14px; } .nk365Cont .gridWrap2 .imgBox img { margin-top: 10px; } /* 20200630 */ .outlineCont { padding: 21px; } .outlineCont .conBox p { margin-bottom: 3px; } .nkpuppyCont3 .interpretUnit p span:before { width: 48px; height: 45px; } .nkpuppyCont4 dl { margin-top: 18px; } .nkpuppyCont4 dl + .imgBox { margin-top: 12px; } .nkpuppyCont4 .ex { margin-top: 8px; } .nk365petCont3 .interpretUnit p span:before { width: 48px; height: 48px; } } /* ================================== Investor ================================== */ .stockInfo .conBox { padding: 0; padding-right: 20px; } .stockInfo .conBox + .conBox { padding: 0; padding-left: 20px; } .stockNow { height: 100%; } .stockNow dt { padding: 10px; text-align: center; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 20px; font-size: 2rem; background: #0b86cd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .stockNow dd { position: relative; padding: 20px 50px; text-align: right; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 48px; font-size: 4.8rem; border: 1px solid #cdcdcd; border-top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .stockNow dd span { position: absolute; left: 20px; top: 50%; display: block; width: auto; height: auto; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); padding: 2px 10px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; background: #4eb5e6; } .stockPrices.up { color: #ff4848; } .stockPrices.down { color: #2478ff; } /* ================================== Investor media query ================================== */ @media only screen and (max-width: 960px) { .stockInfo .gridWrap.col2 > * { float: none; width: 100%; } .stockInfo .conBox { padding-right: 0; } .stockInfo .conBox + .conBox { margin-top: 30px; padding-left: 0; } } @media only screen and (max-width: 640px) { .stockInfo .conBox + .conBox { margin-top: 21px; } } /* ================================== Enquiry ================================== */ .enquiryCont .conBoxList.col3 > li { float: left; width: 33.3333333333%; } .enquiryCont .conBox { padding: 0; } .enquiryCont .conBox.enquiry1 a { background: url("../img/enquiry/bg_enquiry1.jpg") no-repeat right bottom; } .enquiryCont .conBox.enquiry2 a { background: url("../img/enquiry/bg_enquiry2.jpg") no-repeat right bottom; } .enquiryCont .conBox.enquiry3 a { background: url("") no-repeat right bottom; } .enquiryCont .conBox.enquiry4 a { background: url("../img/enquiry/bg_enquiry4.gif") no-repeat right bottom; } .enquiryCont .conBox.enquiry5 a { background: url("../img/enquiry/bg_enquiry5.gif") no-repeat right bottom; } .enquiryCont .conBox.enquiry6 a { background: url("../img/enquiry/bg_enquiry6.gif") no-repeat right bottom; } .enquiryCont a { position: relative; display: block; min-height: 240px; padding: 34px 37px; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 24px; font-size: 2.4rem; border: 3px solid #f7f7f7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .enquiryCont a:before { content: ''; position: absolute; left: 37px; bottom: 34px; display: block; width: 40px; height: 20px; background: url("../img/enquiry/icon_enquiry_arrow.png") no-repeat 0 0; } .enquiryCont a span { display: block; } .enquiryCont a span.fsSm { margin-top: -3px; font-size: 16px; font-size: 1.6rem; } .enquiryCont a.on { border: 3px solid #1f99df; } .enquiryCont a.on:before { background-position: 0 -30px; } .enquiryTime { margin-left: 0 !important; } .enquiryTime p { margin-left: 20px; } .enquiryTime .conBoxList { margin-top: 0; display: -webkit-flex; display: -ms-flex; display: flex; flex-wrap:wrap} .enquiryTime .conBoxList.col2 > li { float: left; width: 50%; } .enquiryTime .conBoxList.col3 > li{width: 33.33333333333333333333%} .enquiryTime .conBox { padding: 30px 30px 27px; text-align: center; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 18px; font-size: 1.8rem; } .enquiryTime .conBox em { margin-top: 2px; display: block; color: #0b86cd; font-style: normal; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 22px; font-size: 2.2rem; } .enquiryAgree { margin-left: 0 !important; } .agree { overflow-y: scroll; height: 200px; } .agree p { margin-top: 10px; } .agree p:first-child { margin-top: 0; } .agreeCheck { margin-top: 15px; text-align: right; } /* ================================== Enquiry media query ================================== */ @media only screen and (max-width: 960px) { .enquiryCont .conBoxList.col3 > li { width: 50%; } .enquiryTime .conBoxList.col2 > li { width: 50%; } .enquiryTime .conBoxList.col3 > li{width: 100%} } @media only screen and (max-width: 640px) { .enquiryCont .conBoxList.col3 > li { width: 50%; } .enquiryCont .conBox { padding: 0; } .enquiryCont .conBox.enquiry1 a { background-size: 120px auto; } .enquiryCont .conBox.enquiry2 a { background-size: 144px auto; } .enquiryCont .conBox.enquiry3 a { background-size: 120px auto; } .enquiryCont .conBox.enquiry4 a { background-size: 96px auto; } .enquiryCont .conBox.enquiry5 a { background-size: 96px auto; } .enquiryCont .conBox.enquiry6 a { background-size: 96px auto; } .enquiryCont a { min-height: 168px; padding: 24px 26px; font-size: 24px; font-size: 2.4rem; border: 2px solid #f7f7f7; } .enquiryCont a:before { content: ''; position: absolute; left: 26px; bottom: 24px; display: block; width: 28px; height: 14px; background-size: 28px auto; } .enquiryCont a.on { border: 2px solid #1f99df; } .enquiryCont a.on:before { background-position: 0 -21px; } .enquiryTime p { margin-left: 14px; } .enquiryTime .conBoxList.col2 > li { float: none; width: 100%; } .enquiryTime .conBox { padding: 21px; } } /* ================================== FAQ ================================== */ #bo_cate { display: none; } #bo_cate h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; } #bo_cate ul { margin-bottom: 10px; padding-left: 1px; zoom: 1; } #bo_cate ul:after { display: block; visibility: hidden; clear: both; content: ""; } #bo_cate li { float: left; margin-bottom: -1px; } #bo_cate a { display: block; position: relative; margin-left: -1px; padding: 6px 0 5px; width: 90px; border: 1px solid #ddd; background: #f7f7f7; color: #888; text-align: center; letter-spacing: -0.1em; line-height: 1.2em; cursor: pointer; } #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active { text-decoration: none; } #bo_cate #bo_cate_on { z-index: 2; border: 1px solid #565e60; background: #fff; color: #565e60; font-weight: bold; } #faq_wrap { margin-bottom: 50px; border-top: 2px solid #46474c; } #faq_wrap h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; } .faq_admin { text-align: right; margin-bottom: 10px; } #faq_wrap ol { margin: 0; padding: 0; list-style: none; } #faq_con h3 { margin-bottom: 0; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } #faq_con h3 a { position: relative; display: block; padding: 22px 62px; color: #333; border-bottom: 1px solid #d1d1d1; text-decoration: none; } #faq_con h3 a:before { content: 'Q.'; position: absolute; left: 26px; top: 20px; display: block; width: auto; height: auto; color: #0b86cd; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; } #faq_con h3 a:after { content: ''; position: absolute; right: 26px; top: 29px; display: block; width: 20px; height: 10px; background: url("../img/faq/icon_toggle_open.png") no-repeat 0 -20px; } #faq_con h3 a.isOpen:after { background-position: 0 0; } #faq_con .con_inner { display: none; position: relative; padding: 22px 62px; border-bottom: 1px solid #d1d1d1; background: #f6f6f6; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; line-height: 1.8; } #faq_con .con_inner:before { content: 'A.'; position: absolute; left: 26px; top: 20px; display: block; width: auto; height: auto; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 18px; font-size: 1.8rem; } #faq_con .con_closer { margin: 10px 0 0; text-align: right; } #faq_con .closer_btn { margin: 0; padding: 0; border: 0; background: transparent; } .faq_tolist { padding: 0 10px; text-align: right; } .faq_img { text-align: center; } #faq_sch { text-align: center; } @media only screen and (max-width: 640px) { #faq_con h3, #faq_con .con_inner { font-size: 18px; font-size: 1.8rem; } #faq_con h3 a { padding: 16px 44px; } #faq_con h3 a:before { position: absolute; left: 18px; top: 14px; display: block; width: auto; height: auto; font-size: 20px; font-size: 2rem; } #faq_con h3 a:after { position: absolute; right: 18px; top: 21px; display: block; width: 14px; height: 7px; background-size: 14px auto; background-position: 0 -14px; } #faq_con .con_inner { padding: 16px 44px; } #faq_con .con_inner:before { position: absolute; left: 18px; top: 14px; display: block; width: auto; height: auto; font-size: 20px; font-size: 2rem; } } /* ================================== Board ================================== */ .boardTop { margin: 5px 0 40px; } .boardTop:before, .boardTop:after { content: ""; display: table; } .boardTop:after { clear: both; } .boardTop .innerL { float: left; text-align: left; } .boardTop .innerR { float: right; text-align: right; } .boardTop .totlaNum { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; height: 32px; line-height: 32px; font-size: 15px; font-size: 1.5rem; } .boardTop .totlaNum em { color: #0b86cd; font-style: normal; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 17px; font-size: 1.7rem; } .boardTop .updateTime { color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 15px; font-size: 1.5rem; } .boardTop .updateTime span:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin: -1px 6px 0; background: url("../img/board/icon_clock.png") no-repeat 0 0; } .boardSearch .srchSel { display: inline-block; margin-right: 20px; border-bottom: 1px solid #999; } .boardSearch .srchSel select { padding: 4px 0; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; height: 32px; border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url("../img/board/icon_select.png") no-repeat right center; } .boardSearch .srchSel select::-ms-expand { display: none; } .boardSearch .srchInp { display: inline-block; border-bottom: 1px solid #999; } .boardSearch .srchInp input[type="text"] { width: auto; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; height: 32px; line-height: 32px; border: 0; background: transparent !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .boardSearch .srchInp button { font-size: 0 !important; } .boardSearch .srchInp button:before { content: ''; display: inline-block; width: 32px; height: 32px; background: #fff url("../img/board/icon_search.png") no-repeat center center; } .boardList { border-top: 2px solid #46474c; border-bottom: 1px solid #46474c; } .boardList table { width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .boardList th { font-family: 'Noto Sans KR', sans-serif; font-weight: 700; padding: 13px 10px; text-align: center; color: #333; border-bottom: 1px solid #46474c; } .boardList td { padding: 13px 10px 12px; text-align: center; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; border-top: 1px solid #dadade; } .boardList td.subject { text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .boardList td.subject a { color: #666; display: inline-block; } .boardList td.subject a:hover { text-decoration: underline; } .boardList td.data { text-align: right; min-width: 115px; } .boardList td.data a { margin-left: 10px; } .boardList td.data a:first-child { margin-left: 0; } .boardList tr:first-child td { border-top: 0; } .boardList + .pagination { margin: 40px 0 50px; } .boardList .empty_list { width: 100%; text-align: center; padding: 80px 0 !important; } .boardDetail { border-top: 1px solid #46474c; } .boardDetail .detailTop { border-bottom: 1px solid #dadade; } .boardDetail .detailTop .subject { padding: 13px 10px; color: #333; font-size: 20px; font-size: 2rem; line-height: 1.4; border-bottom: 1px solid #dadade; } .boardDetail .detailTop .postInfo { padding: 13px 10px; font-size: 16px; font-size: 1.6rem; } .boardDetail .detailTop .postInfo li { display: inline-block; padding-left: 30px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; color: #666; } .boardDetail .detailTop .postInfo li:first-child { padding-left: 0; } .boardDetail .detailContent { padding: 40px 10px; border-bottom: 1px solid #dadade; } .boardWrite { border-top: 2px solid #46474c; } .boardWrite table { width: 100%; border: 0; padding: 0; margin: 0; border-collapse: collapse; } .boardWrite th { position: relative; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; padding: 24px 18px; text-align: left; vertical-align: top; color: #111; font-size: 16px; font-size: 1.6rem; border-bottom: 1px solid #dedede; } .boardWrite td { padding: 18px 18px; text-align: left; border-bottom: 1px solid #dedede; } .boardWrite td.textarea { padding: 18px 18; } .boardWrite .inpName { max-width: 200px; width: 100%; } .boardWrite .inpEmail { max-width: 180px; width: 32%; } .boardWrite .selEmail { max-width: 120px; width: 32%; } .pagination { overflow: hidden; margin: 10px 0; text-align: center; } .pagination a { overflow: hidden; display: inline-block; vertical-align: middle; width: 30px; height: 29px; line-height: 27px; color: #666; background: #fff; font-size: 15px; font-size: 1.5rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pagination a.first, .pagination a.prev, .pagination a.next, .pagination a.last { border: 1px solid #ccc; background: url("../img/board/icon_pagination.png") no-repeat 0 0; } .pagination a.first { background-position: 0 0; } .pagination a.prev { margin: 0 5px 0 -1px; background-position: 0 -30px; } .pagination a.next { margin: 0 -1px 0 5px; background-position: 0 -60px; } .pagination a.last { background-position: 0 -90px; } .pagination a.isActive { color: #fff; background: #1f99df; } .bbsPrevNext { margin: 50px 0; border-top: 1px solid rgba(70, 71, 76, 0.5); } .bbsPrevNext li { position: relative; padding: 13px 10px; padding-left: 100px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; border-bottom: 1px solid rgba(70, 71, 76, 0.5); } .bbsPrevNext li:first-child { border-bottom: 1px solid #dadade; } .bbsPrevNext li span { font-family: 'Noto Sans KR', sans-serif; font-weight: 500; position: absolute; left: 10px; top: 50%; display: block; width: auto; height: auto; transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); } .bbsPrevNext li a { display: block; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bbsPrevNext li a:hover { text-decoration: underline; } input[type="checkbox"].custom { opacity: 0; position: absolute; } input[type="checkbox"].custom + label:before { content: ''; display: inline-block; width: 22px; height: 22px; margin: -1px 8px 0 0; vertical-align: middle; background: url("../img/board/check_sheet.png") no-repeat left top; cursor: pointer; } input[type="checkbox"].custom:checked + label:before { background-position: -24px top; } .btnFrmline { position: absolute; top: 0; right: 0; display: inline-block; padding: 0 5px; color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 16px; font-size: 1.6rem; height: 39px; line-height: 39px; background: #666; } .btn_cke_sc { font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 15px; font-size: 1.5rem; height: 30px; line-height: 30px; } .frm_file { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; height: auto; line-height: 1.5; border: 0; color: #333; background: transparent; } /* ================================== Contents media query ================================== */ @media only screen and (max-width: 640px) { .mobHide { display: none; } .boardTop { margin: 3px 0 28px; } .boardTop .totlaNum { margin-top: 3px; font-size: 16px; font-size: 1.6rem; } .boardTop .totlaNum em { font-size: 18px; font-size: 1.8rem; } .boardTop .updateTime { font-size: 18px; font-size: 1.8rem; } .boardTop .updateTime span:before { width: 15px; height: 15px; margin: -1px 4px 0; background-size: 15px auto; } .boardSearch .srchSel { margin-right: 14px; } .boardSearch .srchSel select { font-size: 18px; font-size: 1.8rem; background-size: auto 22px; } .boardSearch .srchInp input[type="text"] { max-width: 120px; font-size: 18px; font-size: 1.8rem; } .boardSearch .srchInp button:before { width: 22px; height: 22px; background-size: auto 22px; } .boardList th { padding: 9px 7px; font-size: 18px; font-size: 1.8rem; } .boardList td { padding: 9px 7px 8px; font-size: 18px; font-size: 1.8rem; } .boardList + .pagination { margin: 28px 0 35px; } .pagination a { font-size: 18px; font-size: 1.8rem; } .boardDetail .detailTop .subject { padding: 10px 10px; font-size: 22px; font-size: 2.2rem; } .boardDetail .detailTop .postInfo { padding: 10px 10px; font-size: 18px; font-size: 1.8rem; } .boardDetail .detailTop .postInfo li { padding-left: 21px; } .boardDetail .detailContent { padding: 28px 10px; } .bbsPrevNext { margin: 35px 0; } .bbsPrevNext li { padding: 10px 10px; padding-left: 70px; font-size: 18px; font-size: 1.8rem; } .boardWrite th { padding: 16px 12px; font-size: 18px; font-size: 1.8rem; } .boardWrite td { padding: 12px 12px; font-size: 18px; font-size: 1.8rem; } .boardWrite td.textarea { padding: 12px 12; } .boardWrite .inpName { max-width: 100%; width: 100%; } .boardWrite .inpEmail { max-width: 46%; width: 46%; } .boardWrite .selEmail { max-width: 98%; width: 98%; margin-top: 4px; } input[type="checkbox"].custom { opacity: 0; position: absolute; } input[type="checkbox"].custom + label:before { content: ''; display: inline-block; width: 15px; height: 15px; margin: -1px 5px 0 0; vertical-align: middle; background: url("../img/board/check_sheet.png") no-repeat left top; background-size: auto 15px; cursor: pointer; } input[type="checkbox"].custom:checked + label:before { background-position: -16px top; } .btnFrmline { font-size: 18px; font-size: 1.8rem; height: 30px; line-height: 30px; } } /* ================================== Board ================================== */ .galleryList { overflow: hidden; margin-top: 40px; text-align: center; } .galleryList ul { margin: -40px 0 0 -40px; } .galleryList ul:before, .galleryList ul:after { content: ""; display: table; } .galleryList ul:after { clear: both; } .galleryList ul li { width: 33.3333333333%; padding: 40px 0 0 40px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .galleryList ul li .unit { position: relative; width: 100%; height: 100%; text-align: center; border-bottom: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .galleryList ul li .unit input[type="checkbox"] { position: absolute; left: 5px; top: 5px; z-index: 4; } .galleryList ul li .photo img { max-width: 100%; } .galleryList ul li .subject { margin: 15px 0 5px; min-height: 2.8em; color: #333; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; line-height: 1.4; overflow: hidden; max-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: -o-ellipsis-lastline; } .galleryList ul li .date { margin-bottom: 15px; color: #666; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; } .galleryList + .pagination { margin: 40px 0 50px; } .galleryList .empty_list { width: 100%; text-align: center; padding: 80px 0 !important; } .reagent_qr p{position: relative; padding-right: 130px; word-break: keep-all;} .reagent_qr p img{position: absolute; right: 0;bottom: 0; display: block;} /* ================================== Contents media query ================================== */ @media only screen and (max-width: 960px) { .galleryList ul li { width: 50%; } br.m{display: none;} } @media only screen and (max-width: 640px) { .galleryList { margin-top: 28px; } .galleryList ul { margin: -28px 0 0 -28px; } .galleryList ul li { padding: 28px 0 0 28px; } .galleryList ul li .subject { margin: 10px 0 3px; min-height: auto; font-size: 18px; font-size: 1.8rem; overflow: hidden; max-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: -o-ellipsis-lastline; } .galleryList ul li .date { margin-bottom: 7px; } .galleryList + .pagination { margin: 28px 0 35px; } .reagent_qr p{padding-right: 0;} .reagent_qr p img{position: static; margin: 30px auto 0; width: 75px} } /* Slider */ .slick-slider { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*# sourceMappingURL=nkmax_style.css.map */ .bg-box{background: #f8f8f8; font-size: 14px; padding: 10px; margin-top: 15px;} .bg-box .ttt{display: block; margin-bottom: 5px; font-weight: 500;} .bul-dash > li{margin-top: .3em; position: relative; padding-left: 1em;} .bul-dash > li:before{position: absolute;left: 0;top:0;content: '-'} .bul-dash > li:first-child{margin-top: 0;}