@charset "utf-8";
/*
TITLE : KT서브마린 (index)
WORKER : HSG
DATE : 2023.08.07
VERSION : Ver 1.0
- Ver 1.0 : start.
*/
/* COMMON (Index & Sub) */
.outline { position: relative; margin: 0 auto; width: 100%; max-width: 1480px; }
.coverBg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #000; opacity: 1; visibility: visible; transition: all 0.5s cubic-bezier(.24,.48,.66,.56); z-index: 30000; }
.coverBg.load { opacity: 0; visibility: hidden; }
/* index */
#headWrap { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; }
#headWrap::after { position: absolute; content: ''; top: 130px; left: 0; width: 100%; height: 1px; background-color: #ddd; opacity: 0; visibility: hidden; transition: 0.15s ease-in-out; z-index: 10; }
#headWrap.hover::after { opacity: 1; visibility: visible; }
#headWrap #header { position: relative; }
#headWrap #header .headBg { position: absolute; top: 0; left: 0; width: 100%; height: 660px; background-color: #fff; opacity: 0; visibility: hidden; transition: 0.15s ease-in-out; }
#headWrap.hover #header .headBg { opacity: 1; visibility: visible; }
#headWrap #header .headBg .outline { position: relative; height: 100%; }
#headWrap #header .headBg .outline .headeBg1 { position: absolute; top: 0; right: 0; }
#headWrap #header .headBg .outline .headeBg2 { position: absolute; bottom: 0; right: 0; }
#headWrap #header .outline { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; height: 130px; }
#headWrap #header .outline .indexLink { position: relative; display: inline-block; line-height: 130px; }
#headWrap #header .outline .indexLink img { /* width: 194px; */ width: auto; height: 36px; }
#headWrap #header #nav { position: relative; display: flex; flex-flow: row nowrap; margin-left: auto; margin-right: 9.167vw; }
#headWrap #header #nav > li { position: relative; transition: background-color 0.1s ease-in-out; }
#headWrap #header #nav > li::after { position: absolute; content: ''; left: 50%; transform: translateX(-50%); bottom: -3px; width: 127px; height: 6px; background: url(../../img/common/headBg3.jpg) no-repeat; background-size: cover; transition: all 0.2s ease-in-out; opacity: 0; visibility: hidden; z-index: 20000; }
#headWrap #header #nav > li:hover { background-color: #f6f6f6; z-index: 10000; }
#headWrap #header #nav > li:hover::after { opacity: 1; visibility: visible; }
#headWrap #header #nav > li > a { position: relative; display: flex; justify-content: center; align-items: center; width: 180px; line-height: 130px; }
#headWrap #header #nav > li > a span { position: relative; font-size: 1rem; font-family: 'Pretendard-ExtraBold'; color: #fff; transition: color 0.2s ease-in-out; }
#headWrap.hover #header #nav > li > a span { color: #000; }
#headWrap #header #nav > li .sub { position: absolute; top: 130px; left: 0; padding-top: 30px; width: 100%; height: calc(660px - 130px); opacity: 0; visibility: hidden; transition: background-color 0.2s ease-in-out, opacity 0.2s ease, visibility 0.1s ease; }
#headWrap.hover #header #nav > li .sub { opacity: 1; visibility: visible; }
#headWrap #header #nav > li:hover .sub { background-color: #f6f6f6; z-index: 10000; }
#headWrap #header #nav > li .sub > li { position: relative; }
#headWrap #header #nav > li .sub > li a { position: relative; display: block; padding: 15px 0; line-height: 1; }
#headWrap #header #nav > li .sub > li a span { position: relative; display: block; text-align: center; font-size: 1rem; color: #828282; font-family: 'Pretendard-SemiBold'; transition: color 0.3s ease-in-out; line-height: 1; }
#headWrap #header #nav > li:hover .sub > li a span { font-size: 18px; color: #222; font-family: 'Pretendard-SemiBold'; }
#headWrap #header #nav > li .sub > li a:hover span { color: var(--themeRed); }
/* lng & hamburger BTN */
#headWrap #header #btnWrap { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; }
#headWrap #header #btnWrap #lng { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; cursor: pointer; }
#headWrap #header #btnWrap #lng dt { position: relative; display: flex; width: 23px; height: 23px; background: url(../../img/common/lngBtn_white.png); }
#headWrap #header #btnWrap #lng dt img { position: relative; width: 23px; height: auto; z-index: 10; }
#headWrap #header #btnWrap #lng dt img.white { display: inline; }
#headWrap #header #btnWrap #lng dt img.black { display: none; }
#headWrap #header #btnWrap #lng.active dt img.white { display: inline !important; }
#headWrap #header #btnWrap #lng.active dt img.black { display: none !important; }
#headWrap.hover #header #btnWrap #lng dt img.white { display: none; }
#headWrap.hover #header #btnWrap #lng dt img.black { display: inline; }
#headWrap #header #btnWrap #lng dt::after { position: absolute; content: ''; top: calc(50% + 1px); right: -8px; width: 40px; height: 40px; background-color: #000; border-radius: 20px; transform: translateY(-50%); z-index: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
#headWrap #header #btnWrap #lng.active dt::after { width: 135px; opacity: 1; visibility: visible; }
#headWrap #header #btnWrap #lng dd { position: absolute; top: calc(50% + 1px); right: 30px; transform: translateY(-50%); display: flex; flex-flow: row nowrap; align-items: center; height: 40px; z-index: 0; opacity: 0; visibility: hidden; }
#headWrap #header #btnWrap #lng.active dd { opacity: 1; visibility: visible; }
#headWrap #header #btnWrap #lng dd a { position: relative; display: inline-block; font-size: 14px; color: #ccc; font-family: 'Pretendard-Bold'; text-align: center; width: 40px; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, color 0.3s ease-in-out; transition-delay: 0.3s, 0.3s, 0s; }
#headWrap #header #btnWrap #lng dd a:last-child { margin-right: 10px; }
#headWrap #header #btnWrap #lng dd a.on { color: var(--themeRed); }
#headWrap #header #btnWrap #lng.active dd a { opacity: 1; visibility: visible; }
#headWrap #header #btnWrap #hamburger { position: relative; display: none; }
#headWrap #header #btnWrap #hamburger img { width: 23px; height: auto; }
.fp-viewing-2 #headWrap #header #nav > li > a span { color: #000; }
.fp-viewing-2 #headWrap #header #btnWrap #lng dt img.white { display: none; }
.fp-viewing-2 #headWrap #header #btnWrap #lng dt img.black { display: inline; }
#headWrap #header #siteMap { position: fixed; display: none; top: 0; left: 0; padding: 120px 50px 50px; width: 100%; height: 100vh; background-color: rgba(51,51,51,.9); z-index: 0; }
#headWrap #header #siteMap.active { display: block; }
#headWrap #header #siteMap .menuWrap { position: relative; }
#headWrap #header #siteMap .menuWrap #moGnb { position: relative; }
#headWrap #header #siteMap .menuWrap #moGnb > li { position: relative; padding-top: 15px; cursor: pointer; }
#headWrap #header #siteMap .menuWrap #moGnb > li::after { position: absolute; content: "\e914"; font-family: xeicon !important; color: #fff; top: 12px; right: 0; }
#headWrap #header #siteMap .menuWrap #moGnb > li.active::after { content: "\e91b"; }
#headWrap #header #siteMap .menuWrap #moGnb > li:last-child { margin-bottom: 0px; }
#headWrap #header #siteMap .menuWrap #moGnb > li span { position: relative; display: block; text-align: left; font-size: 20px; color: #fff; font-family: 'Pretendard-Bold'; line-height: 1.2; }
#headWrap #header #siteMap .menuWrap #moGnb .listitem > .depth2 { display: none; }
#headWrap #header #siteMap .menuWrap #moGnb .listitem.active > .depth2 { display: block; }
#headWrap #header #siteMap .menuWrap #moGnb .depth2 { position: relative; margin-bottom: 17px; padding-top: 6px; padding-left: 100px; }
#headWrap #header #siteMap .menuWrap #moGnb .depth2 > li { margin-bottom: 5px; }
#headWrap #header #siteMap .menuWrap #moGnb .depth2 > li a { position: relative; display: block; width: 100%; z-index: 30; }
#headWrap #header #siteMap .menuWrap #moGnb .depth2 > li em { position: relative; font-size: 18px; color: #fff; font-family: 'Pretendard-Regular'; line-height: 1.2; }
@media all and (max-width: 1480px){
#headWrap #header .outline { padding-left: 25px; padding-right: 25px; }
#headWrap #header #nav { margin-right: 9vw; }
#headWrap #header #nav > li > a { width: 170px; }
#headWrap #header .outline .indexLink img { /* width: 180px; */ height: 33px; }
#headWrap #header .headBg .outline .headeBg1 { right: 25px; }
#headWrap #header .headBg .outline .headeBg2 { right: 25px; }
}
@media all and (max-width: 1279px){
#headWrap:hover::after { display: none; }
#headWrap #header #nav { display: none; }
#headWrap #header .headBg { display: none; }
#headWrap #header .outline { height: 100px; }
#headWrap #header .outline .indexLink { line-height: 100px; }
#headWrap #header #btnWrap #hamburger { position: relative; display: block; margin-left: 25px; transform: translateY(-1px); cursor: pointer; overflow: hidden; }
#headWrap #header #btnWrap #hamburger::before { position: absolute; content: ''; top: 13px; left: -110%; width: 23px; height: 3px; background-color: #fff; animation: hamBar01_nonAc 0.8s forwards; }
#headWrap #header #btnWrap #hamburger::after { position: absolute; content: ''; top: 13px; right: -110%; width: 23px; height: 3px; background-color: #fff; animation: hamBar02_nonAc 0.8s forwards; }
#headWrap #header #btnWrap #hamburger.active::before { position: absolute; content: ''; animation: hamBar01_Ac 0.8s forwards; transform-origin: center; }
#headWrap #header #btnWrap #hamburger.active::after { position: absolute; content: ''; animation: hamBar02_Ac 0.8s forwards; transform-origin: center; }
@keyframes hamBar01_nonAc {
0% { left: 1px; transform: rotate(45deg); }
45% { left: 1px; transform: rotate(0deg); }
55% { left: 1px; transform: rotate(0deg); }
100% { left: -110%; transform: rotate(0deg); }
}
@keyframes hamBar01_Ac {
0% { left: -110%; transform: rotate(0deg); }
45% { left: 1px; transform: rotate(0deg); }
55% { left: 1px; transform: rotate(0deg); }
100% { left: 1px; transform: rotate(45deg); }
}
@keyframes hamBar02_nonAc {
0% { right: 0px; transform: rotate(-45deg); }
45% { right: 0px; transform: rotate(0deg); }
55% { right: 0px; transform: rotate(0deg); }
100% { right: -110%; transform: rotate(0deg); }
}
@keyframes hamBar02_Ac {
0% { right: -110%; transform: rotate(0deg); }
45% { right: 0px; transform: rotate(0deg); }
55% { right: 0px; transform: rotate(0deg); }
100% { right: 0px; transform: rotate(-45deg); }
}
#headWrap #header #btnWrap #hamburger { position: relative; display: block; margin-left: 25px; transform: translateY(-1px); cursor: pointer; }
#headWrap #header #btnWrap #hamburger img { width: 23px; height: 23px; opacity: 1; visibility: visible; transition: all 0.2s ease-in-out; transition-delay: 0.8s; }
#headWrap #header #btnWrap #hamburger img.white { display: inline; }
#headWrap #header #btnWrap #hamburger img.black { display: none; }
#headWrap #header #btnWrap #hamburger.active img { opacity: 0; visibility: hidden; transition-delay: 0s; }
.fp-viewing-2 #headWrap #header #btnWrap #hamburger img.white { display: none; }
.fp-viewing-2 #headWrap #header #btnWrap #hamburger img.black { display: inline; }
.fp-viewing-4 #headWrap #header #btnWrap #hamburger img.white { display: none; }
.fp-viewing-4 #headWrap #header #btnWrap #hamburger img.black { display: inline; }
}
@media all and (max-width: 480px) {
#headWrap #header .outline { padding-left: 20px; }
#headWrap #header .outline .indexLink img { /* width: 150px; */ height: 28px; }
#headWrap #header #btnWrap #lng dd { right: 38px; }
#headWrap #header #btnWrap #lng dd a { width: 36px; }
#headWrap #header #siteMap { padding: 120px 25px 50px; }
#headWrap #header #siteMap .menuWrap #moGnb .depth2 { padding-left: 60px; }
}
/* footer */
#footer { position: relative; padding: 100px 0 75px; background: #252525 url(../../img/common/footerDeco.png) no-repeat; background-position: left top; background-size: 602px auto; }
#footer .outline { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; padding-right: 125px; }
#footer .left { position: relative; }
#footer .left img { position: relative; width: 306px; height: auto; }
#footer .left select { position: relative; display: block; margin-top: 30px; padding: 0 24px 0 24px; font-size: 17px; font-family: 'Pretendard-Bold'; color: #fff; height: 50px; width: 100%; background-color: transparent; background: transparent url(../../img/common/footerSelectBg.png) no-repeat; background-position: 96% center; background-size: 18px auto; border: 1px solid #bebebe; border-radius: 3px; appearance: none; -moz-appearance: none; cursor: pointer; }
#footer .left select option { font-size: 17px; color: #303030; font-family: 'Pretendard-Medium'; background-color: #fff; }
#footer .right { position: relative; width: 100%; max-width: 734px; }
#footer .right .moreInfo { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,0.2); }
#footer .right .moreInfo li { margin-bottom: 15px; margin-right: 45px; }
#footer .right .moreInfo li:last-child { margin-right: 0; }
#footer .right .moreInfo li a { position: relative; padding-bottom: 15px; font-size: 16px; color: #fff; font-family: 'Pretendard-SemiBold'; line-height: 1.2; }
#footer .right .comInfo { position: relative; padding-top: 35px; }
#footer .right .comInfo h2 { position: relative; font-size: 20px; color: #fff; font-family: 'Pretendard-Bold'; line-height: 1; }
#footer .right .comInfo address { position: relative; margin-top: 20px; font-size: 16px; color: #8c8c8c; font-family: 'Pretendard-Regular'; }
#footer .right .comInfo h6 { position: relative; margin-top: 35px; font-size: 14px; color: #fff; font-family: 'Pretendard-SemiBold'; text-transform: uppercase; }
#footer #topMove { position: absolute; top: 0; right: 0; text-align: right; }
#footer #topMove i { font-size: 28px; line-height: 1; color: #fff; }
#footer #topMove span { display: block; padding-right: 10px; font-size: 18px; color: #8c8c8c; text-align: right; line-height: 1; }
@media all and (max-width: 1480px){
#footer { padding: 100px 25px 75px; }
}
@media all and (max-width: 1280px){
#footer .left img { width: 290px; }
#footer .right { max-width: 720px; }
}
@media all and (max-width: 1279px){
#footer { padding: 50px 25px 45px; }
#footer .outline { padding-right: 95px; }
#footer .left img { width: 230px; }
#footer .left select { font-size: 15px; height: 40px; }
#footer .left select option { font-size: 15px; }
#footer .right { max-width: 640px; }
#footer #topMove span { font-size: 16px; }
}
@media all and (max-width: 1024px){
#footer { background-size: 400px auto; }
#footer .outline { flex-flow: column; gap: 60px; padding-right: 0; }
#footer .left { max-width: 230px; }
#footer .right { max-width: 100%; }
#footer .right .comInfo h6 { text-align: center; }
}
@media all and (max-width: 480px){
#footer { padding-top: 70px; }
#footer .outline { gap: 50px; }
#footer .left select { font-size: 13px; background-size: 15px auto; }
#footer .left select option { font-size: 13px; }
#footer .right .comInfo address { font-size: 14px; }
#footer #topMove { right: -15px; top: -40px; }
}
/* SUBPAGE ONLY */
/* common */
body.fix { overflow: hidden; }
#subpage select { font-size: initial; }
@media all and (max-width: 1200px){
#subpage select { font-size: 20px; }
}
@media all and (max-width: 599px){
#subpage select { font-size: 18px; }
}
/* header */
#headWrap { transition: 0.4s ease-in-out; }
#headWrap.scroll { background-color: #fff; box-shadow: 0 15px 15px rgba(0,0,0,0.1); }
#headWrap.scroll #header #nav > li > a span { color: #000; }
#headWrap.scroll #header #btnWrap #lng dt img.white { display: none; }
#headWrap.scroll #header #btnWrap #lng dt img.black { display: inline; }
body.fix #headWrap.scroll #header #btnWrap #lng dt img.white { display: inline; }
body.fix #headWrap.scroll #header #btnWrap #lng dt img.black { display: none; }
#headWrap.scroll #header #btnWrap #hamburger img.white { display: none; }
#headWrap.scroll #header #btnWrap #hamburger img.black { display: inline; }
/* subpage visual */
#subpage .subVisual { position: relative; height: 450px; overflow: hidden; }
#subpage .subVisual picture { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; width: 100%; height: 100%; }
#subpage .subVisual.load picture { animation: visual 6.5s forwards; transition: none; }
@keyframes visual {
0% { transform: scale(1.1); }
100% { transform: scale(1.0); }
}
#subpage .subVisual picture img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#subpage .subVisual .outline { position: relative; padding: 170px 0 0; z-index: 20; }
#subpage .subVisual h2 { position: relative; margin-bottom: 15px; font-size: 20px; color: var(--themeRed); font-family: 'Pretendard-ExtraBold'; font-weight: 800; text-transform: uppercase; transform: translateY(20px); opacity: 0; transition: 0.5s ease-in-out; line-height: 1; letter-spacing: -1px; z-index: 20; }
#subpage .subVisual h3 { position: relative; margin-bottom: 25px; font-size: 60px; color: #fff; font-family: 'Pretendard-ExtraBold'; text-transform: uppercase; transform: translateY(20px); opacity: 0; transition: 0.5s ease-in-out; line-height: 0.8; letter-spacing: -2px; z-index: 20; }
#subpage .subVisual h4 { position: relative; font-size: 20px; color: #d1d1d1; font-family: 'Pretendard-SemiBold'; transform: translateY(40px); opacity: 0; transition: 1s ease-in-out; line-height: 1.15; z-index: 20; }
#subpage .subVisual.load h2 { transform: translateY(0); opacity: 1; transition-delay: 0.1s; }
#subpage .subVisual.load h3 { transform: translateY(0); opacity: 1; transition-delay: 0.6s; }
#subpage .subVisual.load h4 { transform: translateY(0); opacity: 1; transition-delay: 0.8s; }
@media all and (max-width: 1480px){
#subpage .subVisual .outline { padding: 170px 25px 0; }
#subpage .subVisual h2 { font-size: 20px; }
#subpage .subVisual h3 { font-size: 60px; }
#subpage .subVisual h4 { font-size: 20px; }
}
@media all and (max-width: 1280px){
#subpage .subVisual h2 { font-size: 19px; }
#subpage .subVisual h3 { font-size: 55px; }
#subpage .subVisual h4 { font-size: 19px; }
}
@media all and (max-width: 1024px){
#subpage .subVisual h2 { font-size: 18px; }
#subpage .subVisual h3 { font-size: 50px; }
#subpage .subVisual h4 { font-size: 18px; }
}
@media all and (max-width: 599px){
#subpage .subVisual { height: 500px; }
#subpage .subVisual .outline { padding: 280px 25px 0; }
#subpage .subVisual h3 { font-size: 45px; }
}
@media all and (max-width: 375px){
#subpage .subVisual h3 { font-size: 11.2vw; }
}
@media all and (max-width: 320px){
#subpage .subVisual h3 { font-size: 35px; }
}
/* dropDownMenu */
#subpage #dropDownMenu { position: relative; height: 60px; background-color: #fff; border-bottom: 1px solid #d9d9d9; }
#subpage #dropDownMenu .outline { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; height: inherit; }
#subpage #dropDownMenu .home { position: relative; display: flex; justify-content: center; align-items: center; font-size: 30px; width: 70px; border-right: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; }
#subpage #dropDownMenu dl { position: relative; width: 320px; border-right: 1px solid #d9d9d9; }
#subpage #dropDownMenu dl dt { position: relative; height: inherit; padding-left: 20px; line-height: 60px; cursor: pointer; }
#subpage #dropDownMenu dl dt::after { position: absolute; content: '\e941'; font-family: xeicon !important; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; }
#subpage #dropDownMenu dl dt span { height: inherit; font-size: 18px; color: #222; font-family: 'Pretendard-Medium'; line-height: 1.1; }
#subpage #dropDownMenu dl dd { position: absolute; left: -1px; top: 60px; padding: 15px 0; width: 321px; background-color: #fff; opacity: 0; visibility: hidden; max-height: 0; transition: all 0.2s ease-in-out; border: 1px solid #d9d9d9; border-top: none; z-index: 100; }
#subpage #dropDownMenu dl:hover dd { opacity: 1; visibility: visible; max-height: 450px; }
#subpage #dropDownMenu dl dd ul { position: relative; }
#subpage #dropDownMenu dl dd ul li { position: relative; padding-left: 20px; line-height: 40px; transition: 0.2s ease-in-out; }
#subpage #dropDownMenu dl dd ul li a { position: relative; display: block; }
#subpage #dropDownMenu dl dd ul li:hover,
#subpage #dropDownMenu dl dd ul li.on { background-color: var(--themeRed); }
#subpage #dropDownMenu dl dd ul li span { font-size: 18px; color: #222; font-family: 'Pretendard-SemiBold'; transition: 0.2s ease-in-out; }
#subpage #dropDownMenu dl dd ul li.on span,
#subpage #dropDownMenu dl dd ul li:hover span { color: #fff; }
@media all and (max-width: 1480px){
#subpage #dropDownMenu .outline { padding-left: 25px; padding-right: 25px; }
}
@media all and (max-width: 1279px){
#subpage #dropDownMenu { display: none; }
}
/* sub content */
#subpage #content { position: relative; }
#subpage #content .outline { position: relative; padding: 110px 0 120px; overflow-x: hidden; }
#subpage #content .pageTit { margin-bottom: 100px; text-transform: uppercase; }
#subpage .tit04 { position: relative; }
#subpage #content p { position: relative; }
@media all and (max-width: 1480px){
#subpage #content .outline { padding: 110px 25px 120px; }
}
@media all and (max-width: 1024px){
#subpage #content .pageTit { margin-bottom: 90px; }
}
@media all and (max-width: 599px){
#subpage #content .outline { padding: 80px 25px 100px; }
#subpage #content .pageTit { margin-bottom: 80px; }
}
/* 01. company */
/* ceo message */
.ceo #content .pageTitCol { margin-bottom: 60px; text-align: center; }
.ceo #content #outWrap { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-around; gap: 0; }
.ceo #content #outWrap .inBx { position: relative; padding: 0 30px; width: calc(50% - 200px / 2); }
.ceo #content .ceoPicWrap { position: relative; text-align: center; width: 100%; overflow: hidden; }
.ceo #content .ceoPicWrap img { position: relative; width: 100%; height: auto; max-width: 350px; border-radius: 20px; }
.ceo #content .ceoPicWrap .tit04 { display: none; }
.ceo #content .flexWrap { position: relative; display: flex; flex-flow: row wrap; align-items: flex-start; margin-top: 50px; width: 100%; }
.ceo #content .flexWrap .left { position: relative; width: 100%; }
.ceo #content .flexWrap .left .tit04 { padding: 0 0 35px 0; text-align: center; }
.ceo #content .tit04 strong em { color: var(--themeRed); text-transform: uppercase; }
.ceo #content .flexWrap .right { position: relative; width: 100%; }
.ceo #content .flexWrap .right .sign { position: relative; margin-top: 30px; }
.ceo #content .flexWrap .right .sign h6 { position: relative; font-size: 18px; color: #000; text-align: right; font-family: 'Pretendard-Black'; line-height: 50px; }
.ceo #content .flexWrap .right .sign h6 em { display: inline-block; font-size: 24px; font-weight: 400; font-family: inherit; line-height: 50px;/* transform: translateY(4px); */ }
#subpage.ceo #content p em { color: var(--themeRed); }
@media all and (max-width: 1280px){
/* .ceo #content .ceoPicWrap img { position: absolute; top: 0; left: auto; right: auto; bottom: auto; width: 100%; height: 100%; object-fit: cover; } */
}
@media all and (max-width: 1024px){
.ceo #content .flexWrap .left .tit04 { padding: 0 0 30px 0; }
.ceo #content .flexWrap { margin-top: 20px; }
}
@media all and (max-width: 1023px){
.ceo #content #outWrap { flex-flow: row wrap; gap: 160px; }
.ceo #content #outWrap .inBx { /* padding: 0 30px; */ width: 100%; }
/* .ceo #content #outWrap { flex-flow: row wrap; } */
.ceo #content .ceoPicWrap { width: 100%; }
.ceo #content .flexWrap { width: 100%; }
/* .ceo #content .ceoPicWrap img { position: relative; top: 0; left: auto; right: auto; bottom: auto; width: 100%; height: 100%; object-fit: cover; } */
}
@media all and (max-width: 768px){
.ceo #content .ceoPicWrap { height: auto; border-radius: 15px; }
.ceo #content .flexWrap { margin-top: 20px; flex-flow: row wrap; }
.ceo #content .flexWrap .left { width: 100%; }
/* .ceo #content .flexWrap .left .tit04 br { display: none; } */
.ceo #content .flexWrap .left .tit04 br.all { display: inline; }
.ceo #content .flexWrap .right { width: 100%; }
.ceo #content .flexWrap .right .sign h6 { line-height: 1.5; }
.ceo #content .flexWrap .right .sign h6 em { line-height: 1; }
}
@media all and (max-width: 480px){
.ceo #content #outWrap .inBx { padding-left: 0; padding-right: 0; }
.ceo #content .ceoPicWrap img { max-width: 250px; }
.ceo #content .flexWrap .right .sign h6 em { display: block; padding-right: 12px; text-align: right; }
}
/* info */
#subpage.info { overflow-x: hidden; }
#subpage.info #content .outline:nth-child(1) { padding-bottom: 100px; overflow: visible; }
.info #content h3 { position: relative; margin-bottom: 40px; text-align: center; font-family: 'Pretendard-Light'; font-weight: 300; color: #000; line-height: 1.4; }
.info #content h3 strong { display: block; font-family: 'Pretendard-ExtraBold', sans-serif !important; font-weight: 800; text-transform: uppercase; text-align: center; letter-spacing: -2px; }
.info #content .no1 .infoPicWrap { position: relative; margin-bottom: 120px; }
.info #content .no1 .infoPicWrap picture { position: relative; display: block; border-top-left-radius: 20px; border-bottom-left-radius: 20px; height: 350px; }
.info #content .no1 .infoPicWrap picture img { position: absolute; top: 0; left: 0; width: auto; height: 350px; }
.info #content .flexWrap { position: relative; display: flex; flex-flow: row nowrap; }
.info #content .flexWrap .left { position: relative; width: 42%; }
.info #content .flexWrap .left .col1 { position: relative; font-family: 'Pretendard-Bold' !important; font-weight: 700; line-height: 1.4; color: #000; letter-spacing: -0.7px; }
.info #content .flexWrap .right { position: relative; padding-left: 50px; width: 58%; }
.info #content .no2 { position: relative; background-color: #f8f8f8; }
#subpage.info #content .no2 .outline { padding-top: 96px; padding-bottom: 96px; }
.info #content .no2 .vision { position: relative; }
.info #content h2 { position: relative; margin-bottom: 60px; font-family: 'Pretendard-Bold' !important; color: var(--themeRed); text-align: center; line-height: 1; }
.info #content h6 { position: relative; text-align: center; font-family: 'Pretendard-Light'; font-weight: 300; color: #000; }
.info #content h6 strong { display: block; text-align: center; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #000; line-height: 1.1; }
.info #content .no2 .vision .infoPicWrap picture { display: block; text-align: center; }
.info #content .no2 .vision .infoPicWrap picture img { position: relative; width: 100%; max-width: 1480px; }
.info #content h2 + h6 { margin-top: 30px; }
.info #content h2 + h4 { margin-top: 15px; }
.info #content .no2 h6 + .infoPicWrap { margin-top: 70px; }
.info #content .organization h4 + .infoPicWrap { margin-top: 70px; }
.info #content .organization h4 { text-align: center; font-family: 'Pretendard-Regular' !important; font-weight: 400; }
.info #content .organization .infoPicWrap picture { display: block; text-align: center; }
.info #content .organization .infoPicWrap picture img { position: relative; width: 100%; max-width: 1042px; }
@media all and (max-width: 1024px){
.info #content .no1 .infoPicWrap { position: relative; margin-bottom: 100px; }
.info #content .no1 .infoPicWrap picture { border-top-left-radius: 0; border-bottom-left-radius: 0; height: 350px; }
.info #content .no1 .infoPicWrap picture img { left: -300px; }
}
@media all and (max-width: 768px){
.info #content h3 br { display: none; }
.info #content h3 strong { margin-bottom: 20px; line-height: 1.1; }
.info #content .flexWrap { flex-flow: row wrap; }
.info #content .flexWrap .left { width: 100%; }
.info #content .flexWrap .right { margin-top: 50px; padding-left: 0; width: 100%; }
.info #content .no1 .infoPicWrap picture img { left: -400px; }
}
@media all and (max-width: 599px){
.info #content .no1 .infoPicWrap { margin-bottom: 50px; }
.info #content .no1 .infoPicWrap picture { height: auto; text-align: center; }
.info #content .no1 .infoPicWrap picture img { position: relative; height: auto; width: calc(100% + 50px); top: auto; left: -25px; }
.info #content .flexWrap .right { margin-top: 30px; }
#subpage.info #content .no2 .outline { padding-top: 80px; padding-bottom: 80px; }
.info #content .no2 .vision .infoPicWrap picture img { max-width: 80%; }
.info #content .organization .infoPicWrap picture img { max-width: 65%; }
.info #content h3 strong { font-size: 34px; word-break: keep-all; }
.info #content h6 strong { font-size: 26px; }
.info #content .organization h4 { font-size: 26px; }
}
@media all and (max-width: 375px){
.info #content .no2 .vision .infoPicWrap picture img { max-width: 100%; }
.info #content .organization .infoPicWrap picture img { max-width: 80%; }
}
/* history */
.history #content .contentWrap { position: relative; display: flex; flex-flow: row nowrap; }
.history #content .contentWrap .left { width: 42%; }
.history #content .contentWrap .left h3 { position: relative; font-size: 50px; font-family: 'Pretendard-Thin'; font-weight: 100; color: #000; line-height: 0.95; letter-spacing: -2.5px; }
.history #content .contentWrap .left h3 strong { position: relative; display: block; font-family: 'Pretendard-Bold'; font-weight: 700; text-transform: uppercase; }
.history #content .contentWrap .left .historyBtn { position: relative; margin-top: 60px; background-color: #fff; }
.history #content .contentWrap .left .historyBtn li { position: relative; cursor: pointer; }
.history #content .contentWrap .left .historyBtn li + li { margin-top: 20px; }
.history #content .contentWrap .left .historyBtn li span { display: inline-block; font-size: 26px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #d7d7d7; letter-spacing: -2.5px; line-height: 0.9; }
.history #content .contentWrap .left .historyBtn li.on span { position: relative; color: var(--themeRed); }
.history #content .contentWrap .left .historyBtn li.on span::after { position: absolute; content: ''; top: -8px; right: -8px; width: 6px; height: 6px; border-radius: 6px; background-color: var(--themeRed); }
.history #content .contentWrap .right { position: relative; width: 58%; padding-top: 60px; }
.history #content .contentWrap .right .bx { position: relative; padding-bottom: 50px; border-bottom: 1px solid #d9d9d9; }
.history #content .contentWrap .right .bx + .bx { margin-top: 50px; }
.history #content .contentWrap .right .bx h6 { position: absolute; top: 0; left: 0; font-size: 30px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: var(--themeRed); letter-spacing: -2.4px; line-height: 1; }
.history #content .contentWrap .right .bx ul { position: relative; padding-left: 110px; }
.history #content .contentWrap .right .bx ul li { position: relative; padding-left: 60px; line-height: 1.8; text-align: left; word-break: keep-all; }
.history #content .contentWrap .right .bx ul li br { display: none; }
.history #content .contentWrap .right .bx ul li span { position: absolute; top: 0; left: 0; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #000; letter-spacing: -1px; }
.history #content .contentWrap .right .bx ul + figure { margin-top: 30px; }
.history #content .contentWrap .right .bx figure { position: relative; }
.history #content .contentWrap .right .bx figure img { position: relative; width: 100%; }
@media all and (max-width: 1024px){
.history #content .contentWrap { gap: 30px; }
.history #content .contentWrap .right { width: calc(58% - 30px); }
.history #content .contentWrap .left h3 { font-size: 42px; }
}
@media all and (max-width: 1023px){
.history #content .contentWrap { gap: 0; }
.history #content .contentWrap { flex-wrap: wrap; }
.history #content .contentWrap .left { width: 100%; }
.history #content .contentWrap .right { width: 100%; }
.history #content .contentWrap .left .historyBtn { display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 10px 0; margin-top: 35px; }
.history #content .contentWrap .left .historyBtn li { display: flex; justify-content: center; align-items: center; padding: 10px 0; width: 33.3333%; }
.history #content .contentWrap .left .historyBtn li + li { margin-top: 0; }
}
@media all and (max-width: 768px){
.history #content .contentWrap .right .bx + .bx { margin-top: 35px; }
.history #content .contentWrap .right .bx { padding-bottom: 40px; }
.history #content .contentWrap .right .bx ul + figure { margin-top: 25px; }
}
@media all and (max-width: 767px){
.history #content .contentWrap .left .historyBtn li { width: 50%; }
}
@media all and (max-width: 599px){
.history #content .contentWrap .right .bx h6 { position: relative; display: block; margin-bottom: 20px; }
.history #content .contentWrap .right .bx ul { padding-left: 0; }
.history #content .contentWrap .right .bx + .bx { margin-top: 30px; }
.history #content .contentWrap .right .bx { padding-bottom: 30px; }
}
@media all and (max-width: 480px){
.history #content .contentWrap .left h3 { font-size: 40px; }
.history #content .contentWrap .left .historyBtn li span { font-size: 22px; letter-spacing: -1px; }
}
@media all and (max-width: 375px){
.history #content .contentWrap .left h3 { font-size: 34px; }
.history #content .contentWrap .left .historyBtn { gap: 0; }
.history #content .contentWrap .left .historyBtn li span { font-size: 20px; }
.history #content .contentWrap .right .bx ul li { line-height: 1.6; }
.history #content .contentWrap .right .bx ul li br { display: inline; }
.history #content .contentWrap .right .bx ul li + li { margin-top: 10px; }
}
/* 윤리경영 */
.ethics #content .widthAll { position: relative; padding: 50px 25px; }
.ethics #content .widthAll p { position: relative; width: 100%; margin: 0 auto; max-width: 1480px; font-size: 24px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #000; text-align: center; line-height: 1.4; }
.ethics #content .widthAll p strong { position: relative; display: block; margin-bottom: 20px; font-size: 1.2em; font-family: 'Pretendard-Bold'; font-weight: 700; line-height: 1.3; }
.ethics #content .contentWrap { padding-top: 60px; }
.ethics #content .contentWrap .inBx { position: relative; display: flex; flex-flow: row nowrap; align-items: flex-start; }
.ethics #content .contentWrap .inBx + .inBx { margin-top: 100px; }
.ethics #content .contentWrap .inBx dt { position: relative; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; width: 300px; line-height: 1.1; }
.ethics #content .contentWrap .inBx dd { position: relative; padding-top: 30px; width: calc(100% - 300px); }
.ethics #content .contentWrap .inBx dd p { position: relative; }
.ethics #content .contentWrap .inBx dd p strong { position: relative; display: block; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; width: 100%; line-height: 1.2; }
.ethics #content .contentWrap .inBx dd ul { position: relative; }
.ethics #content .contentWrap .inBx dd ul li { position: relative; margin-top: 6px; }
.ethics #content .contentWrap .inBx dd ul li::before { font-size: 0.7em; top: 4px; }
.ethics #content .contentWrap .inBx dd ul + p { margin-top: 60px; }
.ethics.ethicsActivity #content .contentWrap { display: flex; flex-flow: row wrap; gap: 20px; padding-top: 0; }
.ethics.ethicsActivity #content .contentWrap .inBx { display: block; margin-top: 0; padding: 50px 60px; width: calc(50% - 20px / 2); min-height: 330px; background-color: #fcfcfc; border-radius: 25px; border: 1px solid #d7d7d7; }
.ethics.ethicsActivity #content .contentWrap .inBx.first { display: flex; align-items: flex-end; border-color: var(--themeRed); background-color: var(--themeRed); }
.ethics.ethicsActivity #content .contentWrap .inBx.first h4 { position: relative; font-size: 40px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: -1.5px; line-height: 1.1; }
.ethics.ethicsActivity #content .contentWrap .inBx.first h4 span { position: relative; display: block; font-size: 0.8em; font-family: 'Pretendard-Thin'; font-weight: 100; color: inherit; }
.ethics.ethicsActivity #content .contentWrap .inBx h5 { position: relative; font-size: 36px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: var(--themeRed); letter-spacing: -2px; line-height: 1; }
.ethics.ethicsActivity #content .contentWrap .inBx ul { position: relative; margin-top: 30px; }
.ethics.ethicsActivity #content .contentWrap .inBx ul li { position: relative; padding-left: 60px; line-height: 1.6; }
.ethics.ethicsActivity #content .contentWrap .inBx ul li + li { margin-top: 4px; }
.ethics.ethicsActivity #content .contentWrap .inBx ul li span { position: absolute; top: 0; left: 0; font-size: inherit; font-family: 'Pretendard-ExtraBold'; font-weight: 800; line-height: inherit; color: #000; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap { position: relative; display: flex; flex-flow: row nowrap; padding: 40px 0; border: 1px solid #d7d7d7; border-radius: 30px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx { position: relative; padding: 20px 70px; width: 50%; border-right: 1px solid #d7d7d7; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx:last-child{ border-right: 0px solid #d7d7d7; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx figure { position: relative; margin-bottom: 10px; height: 58px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx figure img { position: relative; height: auto; vertical-align: top; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx.left figure img { width: 48px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx.right figure img { width: 36px; transform: translateY(-13px); }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx h4 { position: relative; margin-bottom: 10px; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; letter-spacing: -1.5px; line-height: 1; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx ul li a { color: inherit; }
.ethics.ethicsApply_b #content .contentWrap { padding-top: 0; }
.ethics.ethicsApply_b #content .contentWrap h4 { position: relative; margin-bottom: 6px; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -1px; line-height: 1; }
.ethics.ethicsApply_b #content .contentWrap p + h4 { margin-top: 50px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap { position: relative; margin-top: 45px; border-radius: 25px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first { display: flex; flex-flow: row wrap; padding: 50px 70px; background-color: #f8f8f8; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx { position: relative; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(1) { width: 200px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(2) { flex: 1; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx figure { margin-bottom: 15px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx figure img { max-width: 42px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx h3 { position: relative; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; line-height: 1; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dt { position: relative; margin-bottom: 6px; font-size: 18px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; line-height: 1; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dd { position: relative; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dd + dt { margin-top: 30px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second { position: relative; border: 1px solid #dfdfdf; background-color: #f8f8f8; overflow: hidden; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top { position: relative; padding: 40px 70px 30px 70px; background-color: #fff; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top h4 { margin-bottom: 0; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top .inputBx { position: absolute; top: 50%; right: 70px; transform: translateY(-50%); }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top .inputBx input { width: 16px; height: 16px; border-radius: 0; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top .inputBx label { font-size: 18px; font-weight: 500; font-family: 'Pretendard-Medium'; color: #000; letter-spacing: -1px; line-height: 1; cursor: pointer; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.bottom { padding: 30px 70px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx h4 { position: relative; }
.ethics.ethicsApply_c #content .widthAll .dot { display: block; padding: 0; margin: 0 auto; max-width: 670px; }
.ethics.ethicsApply_c #content .widthAll .dot li { position: relative; font-size: 18px; color: #666; line-height: 1.4; }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 { position: relative; margin-bottom: 20px; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; line-height: 1; }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 span { position: absolute; right: 0; bottom: 0; font-size: 17px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #666; line-height: 1; z-index: 10; }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 span i { color: var(--themeRed); }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 em { position: relative; display: block; margin-top: 8px; font-size: 17px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #222; line-height: 1; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table { position: relative; border-top: 2px solid #3a3a3a; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table .no1 { width: 223px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table .no2 { width: auto; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td { position: relative; padding: 15px 5px; box-sizing: border-box; vertical-align: middle; border-bottom: 1px solid #c1c1c1; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td:last-child { padding-right: 15px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.name { font-size: 18px; font-family: 'Pretendard-Medium'; font-weight: 500; color: #585858; text-align: center; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx { position: relative; display: flex; flex-flow: row nowrap; gap: 40px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx > div { position: relative; width: 50%; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx div.rightBx { width: calc(50% - 40px); }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td i { display: inline-block; font-size: inherit; color: var(--themeRed); transform: translateY(-2px); }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input { position: relative; padding: 0 10px; font-size: 18px; font-family: 'Pretendard-Light'; font-weight: 300; color: #777; height: 60px; line-height: 60px; cursor: pointer; border-color: #ddd; border-radius: 5px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td label { font-family: 'Pretendard-Medium'; font-weight: 500; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input + label { display: inline-block; margin-left: 4px; width: 90px; text-align: left; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.phone .leftBx { display: flex; flex-flow: row nowrap; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.phone .leftBx em { position: relative; margin: 0 4px; line-height: 60px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .info { margin-top: 5px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .info li { font-size: 16px; font-family: 'Pretendard-Light'; font-weight: 300; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td textarea { position: relative; display: block; padding: 10px; font-size: 18px; font-family: 'Pretendard-Light'; font-weight: 300; color: #777; line-height: 1.5; width: 100%; min-height: 150px; resize: none; border-color: #ddd; border-radius: 5px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx { position: relative; display: flex; flex-flow: row nowrap; gap: 10px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] { flex: 1; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"]::file-selector-button { display: none; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] + label { position: relative; margin-left: 0; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #fff; text-align: center; background-color: #959595; width: 160px; height: 60px; line-height: 60px; border-radius: 5px; cursor: pointer; }
.ethics.ethicsApply_c #content .contentWrap .inputBx.bx2 { margin-top: 90px; }
.ethics.ethicsGuide #content .contentWrap { position: relative; display: flex; flex-flow: row nowrap; align-items: flex-start; padding-top: 0; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx { position: sticky; top: 140px; display: flex; flex-flow: column; gap: 10px; width: 310px; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li { position: relative; text-align: center; width: 100%; line-height: 60px; border: 1px solid #959595; border-radius: 15px; transition: all 0.2s ease-in-out; cursor: pointer; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li span { position: relative; display: inline-block; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; letter-spacing: -1px; line-height: 1.1; transition: color 0.2s ease-in-out; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li span br { display: none; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li.on { background-color: var(--themeRed); border-color: var(--themeRed); }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li.on span { color: #fff; }
#subpage.ethics.ethicsGuide #content .outline { overflow-x: initial; }
.ethics.ethicsGuide #content .contentWrap .guideConBx { position: relative; padding-left: 50px; flex: 1; }
.ethics.ethicsGuide #content .contentWrap .guideConBx .circle { padding-left: 10px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 { position: relative; font-size: 30px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -1px; line-height: 1; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h6 { position: relative; margin-bottom: 5px; font-size: 18px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #666; letter-spacing: -0.5px; line-height: 1.2; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul li { position: relative; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #666; }
.ethics.ethicsGuide #content .contentWrap .guideConBx ul li + li { margin-top: 3px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx ul.dash { margin-top: 3px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 + h6 { margin-top: 40px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 + p { margin-top: 10px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p + h6,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul + h6 { margin-top: 40px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx ul + p { margin-top: 20px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p strong { position: relative; display: inline-block; margin-left: 10px; margin-bottom: 5px; font-size: 18px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #666; letter-spacing: -0.5px; line-height: 1; }
@media all and (max-width: 1279px){
.ethics.ethicsGuide #content .contentWrap .leftBtnBx { top: 110px; }
}
@media all and (max-width: 1100px){
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 span { position: relative; display: block; margin-top: 10px; }
.ethics.ethicsGuide #content .contentWrap { flex-flow: row wrap; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx { position: sticky; top: 100px; margin-bottom: 30px; padding: 10px 0 16px; display: flex; flex-flow: row wrap; gap: 10px; width: 100%; background-color: #fff; z-index: 20; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li { display: flex; justify-content: center; align-items: center; width: calc(33.3333% - 20px / 3); line-height: 70px; height: 70px; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li span br { display: inline; }
.ethics.ethicsGuide #content .contentWrap .guideConBx { padding-left: 0; }
}
@media all and (max-width: 1024px){
.ethics.ethicsActivity #content .contentWrap .inBx { padding: 30px 25px; width: calc(50% - 20px / 2); min-height: 280px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(1) { width: 140px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dd + dt { margin-top: 20px; }
.ethics #content .widthAll p strong br { display: none; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input { height: 50px; line-height: 50px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input[name="inputName"] { height: 30px; line-height: 30px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx.attachment > div { width: 100%; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx div.rightBx { width: 100%; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] + label { height: 50px; line-height: 50px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.phone .leftBx em { line-height: 50px; }
}
@media all and (max-width: 1000px){
.ethics #content .midLinkBtn li { padding: 0 20px; }
.ethics #content .midLinkBtn li a { font-size: 20px; }
}
@media all and (max-width: 900px){
.ethics.ethicsApply_c #content .contentWrap .inputBx table .no1 { width: 140px; }
}
@media all and (max-width: 768px){
.ethics #content .widthAll p { font-size: 21px; }
.ethics #content .widthAll p br { display: none; }
.ethics #content .widthAll p strong { font-size: 1.1em; }
.ethics #content .widthAll p strong br { display: none; }
.ethics #content .contentWrap .inBx { flex-flow: row wrap; }
.ethics #content .contentWrap .inBx + .inBx { margin-top: 70px; }
.ethics #content .contentWrap .inBx dt { font-size: 22px; width: 100%; }
.ethics #content .contentWrap .inBx dd { padding-top: 20px; width: 100%; }
.ethics #content .contentWrap .inBx dd p strong { font-size: 19px; }
.ethics #content .contentWrap .inBx dd ul + p { margin-top: 30px; }
.ethics.ethicsActivity #content .contentWrap .inBx { margin-top: 0; width: 100%; min-height: auto; }
.ethics.ethicsActivity #content .contentWrap .inBx.first { min-height: 52.083vw; }
.ethics.ethicsActivity #content .contentWrap .inBx.first h4 { font-size: 7vw; }
.ethics.ethicsActivity #content .contentWrap .inBx ul { margin-top: 20px; }
.ethics.ethicsActivity #content .contentWrap .inBx h5 { font-size: 34px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap { flex-flow: row wrap; padding: 5px 30px; border-radius: 15px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx { padding: 25px 0; width: 100%; border-right: 0px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx:last-child{ border-bottom: 0px solid #d7d7d7; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx h4 { font-size: 22px; }
.ethics.ethicsApply_a #content .contentWrap .bxWrap .bx p br { display: none; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(1) { width: 100px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 { font-size: 20px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx h4 span { font-size: 15px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table .no1 { width: 100px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.name { font-size: 17px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td:last-child { padding-right: 5px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx { flex-flow: row wrap; align-items: flex-start; gap: 5px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.inBx > div { width: 100%; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input { font-size: 16px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input + label { font-size: 17px; width: 80px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .info li { font-size: 14px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] + label { font-size: 16px; width: 90px; }
.ethics.ethicsApply_c #content .contentWrap .btnBx .btn { max-width: 140px; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li { width: calc(50% - 10px / 2); border-radius: 10px; }
}
@media all and (max-width: 767px){
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first { padding: 35px 50px; gap: 30px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(1) { width: 100%; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first .bx:nth-child(2) { width: 100%; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top { padding: 35px 50px 20px 50px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top .inputBx { position: relative; right: initial; top: inherit; transform: translateY(0); margin-top: 6px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.bottom { padding: 30px 50px; }
}
@media all and (max-width: 599px){
.ethics.ethicsApply_b #content .contentWrap h4 { font-size: 21px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.first { padding: 35px 25px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.top { padding: 35px 25px 20px 25px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap.second .bx.bottom { padding: 30px 25px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dt { font-size: 17px; }
.ethics.ethicsApply_b #content .contentWrap .bxWrap .bx dl dd { font-size: 17px; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li span { font-size: 19px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 { font-size: 26px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h6 { font-size: 17px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul li { font-size: 17px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 + h6 { margin-top: 30px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p + h6,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul + h6 { margin-top: 30px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p strong { font-size: 17px; }
}
@media all and (max-width: 480px){
.ethics.ethicsActivity #content .contentWrap .inBx ul li { padding-left: 50px; }
.ethics.ethicsApply_c #content .widthAll .dot li { font-size: 17px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table .no1 { width: 80px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.name { font-size: 15px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input { font-size: 15px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input + label { font-size: 15px; width: 70px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] + label { font-size: 15px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input { height: 40px; line-height: 40px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td .leftBx .inBx input[type="file"] + label { height: 40px; line-height: 40px; }
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td.phone .leftBx em { line-height: 40px; }
.ethics.ethicsApply_c #content .contentWrap .btnBx.doubleBtn { gap: 10px; }
.ethics.ethicsApply_c #content .contentWrap .btnBx .btn { width: 130px; }
.ethics.ethicsGuide #content .contentWrap .leftBtnBx li span { font-size: 18px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 { font-size: 24px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h6 { font-size: 16px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul li { font-size: 16px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx h3 + h6 { margin-top: 25px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p + h6,
.ethics.ethicsGuide #content .contentWrap .guideConBx ul + h6 { margin-top: 25px; }
.ethics.ethicsGuide #content .contentWrap .guideConBx p strong { font-size: 16px; }
.ethics #content .moSelectBx select { padding-left: 14px; padding-right: 14px; background-position: 96% center; }
}
@media all and (max-width: 375px){
.ethics.ethicsActivity #content .contentWrap .inBx { padding: 20px 15px; border-radius: 15px; }
.ethics.ethicsActivity #content .contentWrap .inBx h5 { font-size: 26px; }
.ethics.ethicsActivity #content .contentWrap .inBx ul { margin-top: 15px; }
.ethics.ethicsActivity #content .contentWrap .inBx ul li { padding-left: 40px; font-size: 16px; }
}
@media all and (max-width: 374px){
.ethics.ethicsApply_c #content .contentWrap .inputBx table tr td input + label { margin-left: 0; width: 56px; }
}
@media all and (max-width: 320px){
.ethics.ethicsActivity #content .contentWrap .inBx.first { min-height: 170px; }
.ethics.ethicsActivity #content .contentWrap .inBx.first h4 { font-size: 24px; }
}
/* esg경영 */
#subpage.esg #content.allWidth .outline.first { padding-top: 110px; padding-bottom: 0; overflow: hidden; }
#subpage.esg #content.allWidth .outline.last { padding-top: 90px; }
.esg #content .widthAll { padding: 0; }
.esg.esga #content .widthAll ul { gap: 10px 0; margin: 0 auto; max-width: 1200px; }
.esg.esga #content .widthAll ul > li { width: 200px; }
.esg.esgb #content .widthAll ul { justify-content: center; gap: 10px 0; }
.esg.esgb #content .widthAll ul > li { width: 25%; max-width: 200px; }
.esg.esgc #content .widthAll ul { justify-content: center; gap: 10px 0; margin: 0 auto; max-width: 700px; }
.esg.esgc #content .widthAll ul > li { width: 33.33%; max-width: 200px; }
.esg #content .esgCon h4 { position: relative; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -1px; line-height: 1.1; }
.esg #content .esgCon p,
.esg #content .esgCon ul li { position: relative; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #222; }
.esg #content .esgCon h4 + p { margin-top: 5px; }
.esg #content .esgCon p + h4,
.esg #content .esgCon ul + h4 { margin-top: 35px; }
.esg #content .esgCon ul + p { margin-top: 35px; }
.esg #content .esgCon ul.circleNum > li::before { top: 3px; font-size: 0.75em; }
.esg #content .esgCon .circleNum li { margin-top: 4px; }
.esg #content .esgCon .circleNum li .normalNum li { margin-top: 4px; }
.esg #content .esgCon .normalNum > li { margin-top: 4px; }
.esg #content .esgCon .bracketNum > li { margin-top: 4px; }
.esgd #content .esgCon { position: relative; display: flex; flex-flow: row nowrap; align-items: flex-start; }
.esgd #content .esgCon h2 { position: relative; padding-right: 20px; font-size: 36px; color: #000; font-family: 'Pretendard-ExtraBold'; font-weight: 800; width: 310px; letter-spacing: -1px; line-height: 1; }
.esgd #content .esgCon .rightBx { position: relative; width: calc(100% - 310px); }
.esgd #content .esgCon .rightBx h4 { position: relative; font-size: 30px; color: #222; font-family: 'Pretendard-ExtraBold'; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.esgd #content .esgCon .rightBx h4 br { display: none; }
.esgd #content .esgCon .rightBx .bx { position: relative; display: flex; flex-flow: row nowrap; align-items: flex-start; margin-top: 35px; padding: 50px 60px; background-color: #fcfcfc; border: 1px solid #e1e1e1; border-radius: 25px; }
.esgd #content .esgCon .rightBx .bx + h4 { margin-top: 100px; }
.esgd #content .esgCon .rightBx .bx h5 { position: relative; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -1px; width: 185px; line-height: 1; }
.esgd #content .esgCon .rightBx .bx h5 span { position: relative; display: block; margin-top: 10px; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #666; }
.esgd #content .esgCon .rightBx .bx .inBx { position: relative; display: flex; flex-flow: row nowrap; width: calc(100% - 185px); }
.esgd #content .esgCon .rightBx .bx .inBx ul { position: relative; width: 50%; }
.esgd #content .esgCon .rightBx .bx .inBx ul:first-child { padding-right: 20px; }
.esgd #content .esgCon .rightBx .bx .inBx ul li { position: relative; padding-left: 85px; font-size: 18px; color: #666; font-family: 'Pretendard-Medium'; font-weight: 500; line-height: 1.6; }
.esgd #content .esgCon .rightBx .bx .inBx ul li span { position: absolute; top: 0; left: 0; font-size: inherit; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; line-height: inherit; letter-spacing: -1; }
.esge #content .esgCon { position: relative; }
.esge #content .esgCon picture { position: relative; display: block; margin-bottom: 50px; }
.esge #content .esgCon picture img { position: relative; width: 100%; }
.esge #content .esgCon .tableWrap { position: relative; border-top: 2px solid #666; border-bottom: 1px solid #ddd; overflow: hidden; }
.esge #content .esgCon .tableWrap table { position: relative; }
.esge #content .esgCon .tableWrap table .no1,
.esge #content .esgCon .tableWrap table .no2,
.esge #content .esgCon .tableWrap table .no3,
.esge #content .esgCon .tableWrap table .no4,
.esge #content .esgCon .tableWrap table .no5,
.esge #content .esgCon .tableWrap table .no6 { width: auto; }
.esge #content .esgCon .tableWrap table tr th { position: relative; padding: 20px 5px; font-size: 18px; font-family: 'Pretendard-Medium'; font-weight: 500; color: #222; text-align: center; letter-spacing: -1px; border-right: 1px solid #ddd; }
.esge #content .esgCon .tableWrap table tr th:last-child { border-right: 0px solid #ddd; }
.esge #content .esgCon .tableWrap table tr td { position: relative; padding: 20px 5px; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #444; text-align: center; letter-spacing: -1px; border-top: 1px solid #ddd; border-right: 1px solid #ddd; }
.esge #content .esgCon .tableWrap table tr td:last-child { border-right: 0px solid #ddd; }
.esge #content .esgCon .tableWrap table tr td:first-child { font-family: 'Pretendard-Medium'; font-weight: 500; color: #222; }
@media all and (max-width: 1480px){
.esgd #content .esgCon .rightBx .bx .inBx { flex-flow: row wrap; }
.esgd #content .esgCon .rightBx .bx .inBx ul { width: 100%; }
}
@media all and (max-width: 1279px){
.esg #content .midLinkBtn li a { font-size: 22px; }
}
@media all and (max-width: 1200px){
.esg #content .midLinkBtn { display: none; }
.esg #content .moSelectBx { display: block; }
.esg #content .moSelectBx select { font-size: 20px; background-position: 96% center; }
}
@media all and (max-width: 1024px){
.esg.esga #content .widthAll ul > li { width: 33.33%; max-width: 250px; }
.esg.esgb #content .widthAll ul { gap: 10px 0; padding-left: 25px; padding-right: 25px; }
.esgd #content .esgCon h2 { font-size: 34px; width: 260px; }
.esgd #content .esgCon .rightBx { width: calc(100% - 260px); }
.esgd #content .esgCon .rightBx h4 { font-size: 28px; }
.esge #content .esgCon .tableWrap { overflow-x: auto; }
.esge #content .esgCon .tableWrap table { width: 1024px; }
.esge #content .esgCon .tableWrap table tr th { padding: 20px 5px; font-size: 17px; }
.esge #content .esgCon .tableWrap table tr td { padding: 20px 5px; font-size: 17px; }
}
@media all and (max-width: 1023px){
.esgd #content .esgCon { flex-flow: row wrap; }
.esgd #content .esgCon h2 { padding-right: 0; margin-bottom: 40px; font-size: 32px; width: 100%; }
.esgd #content .esgCon .rightBx { width: 100%; }
.esgd #content .esgCon .rightBx .bx { margin-top: 25px; padding: 25px 30px; border-radius: 15px; }
.esgd #content .esgCon .rightBx .bx + h4 { margin-top: 70px; }
}
@media all and (max-width: 768px){
#subpage.esg #content.allWidth .outline.last { padding-top: 70px; }
.esg.esga #content .widthAll ul { justify-content: space-between; gap: 10px 10px; padding-left: 25px; padding-right: 25px; margin: 0 auto; max-width: 480px; }
.esg.esga #content .widthAll ul li { width: 40%; min-width: 170px; }
.esg.esgb #content .widthAll ul { justify-content: space-between; gap: 10px 10px; margin: 0 auto; max-width: 480px; }
.esg.esgb #content .widthAll ul > li { width: 40%; max-width: 170px; min-width: 170px; }
.esgd #content .esgCon .rightBx .bx h5 { font-size: 22px; width: 150px; }
.esgd #content .esgCon .rightBx .bx .inBx { width: calc(100% - 150px); }
.esgd #content .esgCon .rightBx .bx h5 span { font-size: 17px; }
.esgd #content .esgCon .rightBx .bx .inBx ul li { font-size: 17px; }
}
@media all and (max-width: 599px){
.esg #content .moSelectBx select { font-size: 18px; }
#subpage.esg #content.allWidth .outline.last { padding-top: 60px; }
.esg #content .esgCon h4 { font-size: 22px; }
.esg #content .esgCon p,
.esg #content .esgCon ul li { font-size: 17px; }
.esg #content .esgCon p + h4,
.esg #content .esgCon ul + h4 { margin-top: 30px; }
.esg #content .esgCon ul + p { margin-top: 30px; }
.esg.esgc #content .widthAll ul { gap: 10px; padding-left: 15px; padding-right: 15px; }
.esg.esgc #content .widthAll ul > li { font-size: 16px; width: calc(50% - 10px / 2); min-width: auto; }
.esgd #content .esgCon .rightBx .bx { flex-flow: row wrap; }
.esgd #content .esgCon .rightBx .bx .inBx { margin-top: 30px; width: 100%; }
.esge #content .esgCon .tableWrap { overflow-x: auto; }
.esge #content .esgCon .tableWrap table { width: 1000px; }
.esge #content .esgCon .tableWrap table tr th { padding: 15px 5px; font-size: 16px; }
.esge #content .esgCon .tableWrap table tr td { padding: 15px 5px; font-size: 16px; }
}
@media all and (max-width: 480px){
.esg #content .esgCon h4 { font-size: 20px; }
.esg #content .esgCon p,
.esg #content .esgCon ul li { font-size: 16px; }
.esg.esga #content .widthAll ul { gap: 10px; padding-left: 15px; padding-right: 15px; }
.esg.esga #content .widthAll ul li { font-size: 16px; width: calc(50% - 10px / 2); min-width: auto; }
.esg.esgb #content .widthAll ul { gap: 10px; padding-left: 15px; padding-right: 15px; }
.esg.esgb #content .widthAll ul li { font-size: 16px; width: calc(50% - 10px / 2); min-width: auto; }
.esgd #content .esgCon .rightBx h4 { font-size: 24px; }
.esgd #content .esgCon .rightBx h4 br { display: inline; }
.esgd #content .esgCon .rightBx .bx { margin-top: 20px; padding: 20px 10px; }
.esgd #content .esgCon .rightBx .bx h5 { font-size: 20px; }
.esgd #content .esgCon .rightBx .bx .inBx ul li { font-size: 16px; }
}
@media all and (max-width: 374px){
.esg #content .widthAll ul li { font-size: 15px; }
}
/* 02. business */
/* business */
.business #content .bizBx { position: relative; overflow: hidden; }
.business #content .bizBx + .bizBx { margin-top: 180px; z-index: 5; }
.business #content .bizBx + .bizBx.bizBx05 { margin-top: 80px; z-index: 5; }
.business #content .bizBx h3 { margin-bottom: 30px; }
.business #content .bizBx .col1 { margin-bottom: 60px; }
.business #content .bizBx .bxWrap { position: relative; padding-left: 135px; }
.business #content .bizBx .bxWrap p { position: relative; margin-bottom: 30px; }
.business #content .bizBx .bxWrap p::before { position: absolute; content: ''; top: 12px; left: -134px; width: 0; height: 1px; background-color: #828282; transition: 0.6s ease-in-out; }
.business #content .bizBx .bxWrap p.ani.visible::before { width: 117px; transition-delay: 0.6s; }
.business #content .bizBx .bxWrap .figureSet2by2 { position: relative; display: flex; flex-flow: row nowrap; gap: 25px; }
.business #content .bizBx .bxWrap .figureSet2by2 > figure { position: relative; width: calc(50% - 25px / 2); }
.business #content .bizBx .bxWrap .figureSet2by2 > figure img { position: relative; width: 100%; }
.business #content .bizBx.bizBx04 { position: relative; padding-top: 100px; overflow: visible; }
.business #content .bizBx.bizBx04::before { position: absolute; content: ''; top: 0; right: 0; width: 150%; height: 350px; background: url(../../img/sub/business/bg_pattern_01.jpg) repeat; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.business #content .bizBx.bizBx04 h3 { padding-left: 20px; }
.business #content .bizBx04 .sliderBxWrap { position: relative; display: flex; flex-flow: row nowrap; z-index: 10; }
.business #content .bizBx04 .sliderBxWrap .slideBtn { position: relative; padding-right: 20px; width: 360px; }
.business #content .bizBx04 .sliderBxWrap .slideBtn li { position: relative; margin-bottom: 1px; padding: 10px 20px; background: transparent; /* line-height: 40px; */ border-radius: 20px; transition: 0.2s ease-in-out; cursor: pointer; }
.business #content .bizBx04 .sliderBxWrap .slideBtn li::after { position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 310px; width: 0; height: 1px; background-color: #828282; transition: width 0.2s ease-in-out; z-index: 100; }
.business #content .bizBx04 .sliderBxWrap .slideBtn li.active::after { width: 160px; }
.business #content .bizBx04 .sliderBxWrap .slideBtn li span { display: inline-block; font-size: 20px; color: #9c9c9c; font-family: 'Pretendard-Bold'; line-height: 1; }
.business #content .bizBx04 .sliderBxWrap .slideBtn li.active { background-color: var(--themeRed); }
.business #content .bizBx04 .sliderBxWrap .slideBtn li.active span { color: #fff; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap { position: relative; padding: 0 30px; width: calc(100% - 360px); transform: translateY(-80px); }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx { position: relative; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx figure { position: relative; margin-bottom: 40px; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx figure img { width: 100%; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx h4 { margin-bottom: 15px;; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx p { margin-bottom: 30px; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap .conBx p strong { color: #000; }
.business #content .bizBx04 .sliderBxWrap .slider { display: none; }
@media all and (max-width: 1024px){
.business #content .bizBx h3 { margin-bottom: 20px; }
.business #content .bizBx .col1 { margin-bottom: 40px; }
.business #content .bizBx + .bizBx { margin-top: 160px; }
.business #content .bizBx.bizBx04 { padding-top: 80px; }
.business #content .bizBx.bizBx04::before { height: 300px; }
.business #content .bizBx + .bizBx.bizBx05 { margin-top: 40px; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap { transform: translateY(-60px); }
}
@media all and (max-width: 1023px){
.business #content .bizBx .bxWrap { padding-left: 0; }
.business #content .bizBx .bxWrap p { padding-top: 25px; }
.business #content .bizBx .bxWrap p::before { top: 5px; left: 0; }
.business #content .bizBx.bizBx04 { padding-top: 0; }
.business #content .bizBx.bizBx04::before { top: 20px; right: -50px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.business #content .bizBx.bizBx04 h3 { padding-left: 40px; margin-bottom: 20px; }
.business #content .bizBx04 .sliderBxWrap { padding: 0 40px; }
.business #content .bizBx04 .sliderBxWrap .slideBtn { display: none; }
.business #content .bizBx04 .sliderBxWrap .conBxWrap { display: none; }
.business #content .bizBx04 .sliderBxWrap .slider { position: relative; display: block; width: 100%; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide { opacity: 0.3; transition: opacity 0.5s ease-in-out; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide.swiper-slide-active { opacity: 1; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide figure { position: relative; margin-bottom: 20px; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide figure img { width: 100%; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide h4 { margin-bottom: 15px; }
.business #content .bizBx04 .sliderBxWrap .slider .swiper-wrapper .swiper-slide p { margin-bottom: 20px; }
.business #content .bizBx04 .sliderBxWrap .slider .btnWrap { position: absolute; right: 0; top: -70px; display: flex; flex-flow: row nowrap; gap: 20px; }
.business #content .bizBx04 .sliderBxWrap .slider .btnWrap div { position: relative; display: flex; margin: 0; padding: 0; top: auto; left: auto; right: auto; bottom: auto; width: 50px; height: 50px; justify-content: center; align-items: center; background-image: none; border-radius: 50%; background-color: #f0f0f0; border: 1px solid #ddd; }
}
@media all and (max-width: 768px){
.business #content .bizBx .col1 { margin-bottom: 30px; }
.business #content .bizBx + .bizBx { margin-top: 140px; }
}
@media all and (max-width: 599px){
.business #content .bizBx + .bizBx { margin-top: 120px; }
.business #content .bizBx .bxWrap .figureSet2by2 { overflow: hidden; overflow-x: scroll; }
.business #content .bizBx .bxWrap .figureSet2by2 > figure { width: auto; }
.business #content .bizBx .bxWrap .figureSet2by2 > figure img { width: 75.125vw; }
.business #content .bizBx.bizBx04 h3 { padding-left: 0; }
.business #content .bizBx04 .sliderBxWrap { padding: 0; }
.business #content .bizBx04 .sliderBxWrap .slider .btnWrap { top: -60px; gap: 14px; }
.business #content .bizBx04 .sliderBxWrap .slider .btnWrap div { width: 40px; height: 40px; }
.business #content .bizBx + .bizBx.bizBx05 { margin-top: 80px; }
}
/* 사업실적 */
#content .midLinkBtn { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; margin-bottom: 80px; }
#content .midLinkBtn li { position: relative; padding: 0 30px; }
#content .midLinkBtn li a { position: relative; display: block; padding: 5px 0; font-size: 24px; color: #131313; font-family: 'Pretendard-Bold'; font-weight: 700; line-height: 1; letter-spacing: -1px; }
#content .midLinkBtn li.on a { color: var(--themeRed); }
#content .midLinkBtn li.on a::after { position: absolute; content: ''; bottom: -2px; left: 0; width: 100%; height: 3px; background-color: var(--themeRed); }
#content .moSelectBx { position: relative; display: none; }
#content .moSelectBx select { position: relative; padding: 0 24px; margin-bottom: 50px; font-family: 'Pretendard-SemiBold'; font-weight: 600; height: auto; line-height: 58px; height: 58px; width: 100%; background: url(../../img/sub/business/bg_arrowDown.png) no-repeat; background-position: 90% center; border-radius: 5px; border: 1px solid #e6e6e6; cursor: pointer; outline: none; appearance: none; }
.performance #content .moSelectBx select option { position: relative; }
.performance #content .moSelectBx select,
.performance #content .moSelectBx select option { font-size: 18px; font-family: 'Pretendard-SemiBold'; font-weight: 600; color: #333; }
.performance #content .conWrap { position: relative; padding-top: 10px; }
.performance #content .conWrap select { position: absolute; top: 0; right: 0; padding: 0 30px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #333; width: 300px; height: auto; background: url(../../img/sub/business/bg_arrowDown.png) no-repeat; background-position: 90% center; line-height: 58px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; outline: none; appearance: none; z-index: 100; }
.performance #content .conWrap select option { position: absolute; top: 0; right: 0; }
.performance #content .conWrap .detailWrap { position: relative; }
.performance #content .conWrap .detailWrap .year { position: relative; margin-bottom: 45px; font-size: 42px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #000; line-height: 1; letter-spacing: -4px; }
.performance #content .conWrap .detailWrap .itemBx { position: relative; padding: 50px; border: 1px solid #d7d7d7; border-radius: 30px; background-color: #fcfcfc; }
.performance #content .conWrap .detailWrap .itemBx + .itemBx { margin-top: 40px; }
.performance #content .conWrap .detailWrap .itemBx .itemTit { position: relative; margin-bottom: 50px; font-size: 30px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: var(--themeRed); letter-spacing: -1px; line-height: 1; }
.performance #content .conWrap .detailWrap .itemBx .itemTit::after { position: absolute; content: ''; left: 0; bottom: -19px; width: 60px; height: 1px; background-color: #000; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap { position: relative; display: flex; flex-flow: row nowrap; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx { position: relative; width: 50%; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx h6 { position: relative; display: inline-block; padding: 0 25px; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #fff; background-color: #000; border-radius: 20px; line-height: 35px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul { position: relative; padding-left: 10px; margin-top: 20px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li { position: relative; /* padding-left: 10px; */ padding-left: 140px; line-height: 1; letter-spacing: 0; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li::before { position: absolute; content: '·'; left: 0; top: 0; line-height: inherit; font-size: inherit; color: inherit; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li + li { position: relative; margin-top: 15px; }
/* .performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { position: relative; display: inline-block; width: 120px; text-align: left; } */
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { position: absolute; top: 0; left: 10px; display: inline-block; width: 120px; text-align: left; line-height: inherit; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li { padding-left: 150px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li span { width: 140px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 190px; line-height: 1.2; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { width: 180px; letter-spacing: -0.5px; }
.performance #content.assembly .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 180px; }
.performance #content.assembly .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { width: 160px; }
/* 유지보수 */
.performance #content .conWrap .detailWrap.layout02 .itemBx { display: flex; flex-flow: row nowrap; align-items: flex-start; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .itemTit { margin-bottom: 0; width: 334px; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap { flex: 1; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul { margin-top: 10px; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul li.coc::before { display: none; }
/* 해양구조물 설치 */
.performance #content .conWrap .detailWrap.layout02.alone .itemBx .bxWrap .bx { width: 100%; }
@media all and (max-width: 1480px){
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap { flex-flow: row wrap; gap: 0; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul { margin-top: 0; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul li + li { margin-top: 0; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul li { margin-top: 10px !important; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx { width: 100%; }
}
@media all and (max-width: 1024px){
#content .midLinkBtn { margin-bottom: 70px; }
.performance #content .conWrap .detailWrap .year { margin-bottom: 35px; font-size: 40px; }
.performance #content .conWrap .detailWrap .itemBx { padding: 30px; }
.performance #content .conWrap .detailWrap .itemBx .itemTit { margin-bottom: 40px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap { flex-flow: row wrap; gap: 30px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx { width: 100%; }
}
@media all and (max-width: 999px){
.performance #content .conWrap .detailWrap.layout02 .itemBx { flex-flow: row wrap; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .itemTit { margin-bottom: 40px; width: 100%; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap { flex: auto; width: 100%; }
}
@media all and (max-width: 768px){
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li { font-size: 17px; }
.performance #content .conWrap .detailWrap.layout02 .itemBx .bxWrap .bx ul { padding-left: 0; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 170px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { width: 160px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li { padding-left: 170px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li span { width: 160px; }
}
@media all and (max-width: 767px){
#content .midLinkBtn { display: none; }
#content .moSelectBx { display: block; }
}
@media all and (max-width: 600px){
.performance #content .moSelectBx select { margin-bottom: 20px; background-position: 94.5% center; }
.performance #content .conWrap select { position: relative; margin-bottom: 30px; padding: 0 24px; width: 100%; background-position: 94.5% center; }
.performance #content .conWrap .detailWrap .itemBx { border-radius: 20px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { margin-bottom: 6px; }
}
@media all and (max-width: 599px){
.performance #content .conWrap .detailWrap .year { font-size: 36px; }
.performance #content .conWrap .detailWrap .itemBx .itemTit { font-size: 28px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx h6 { font-size: 18px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul { padding-left: 0; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 100px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { width: 90px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li { padding-left: 120px; }
.performance #content .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li span { width: 110px; letter-spacing: -0.5px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 10px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li::before { color: #000; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { position: relative; left: 0; display: block; width: 100%; text-align: left; color: #000; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li { padding-left: 10px; }
.performance #content.performance .conWrap .detailWrap .itemBx .bxWrap .bx:nth-child(2) ul li span { position: relative; left: 0; display: block; width: 100%; text-align: left; color: #000; }
.performance #content.assembly .conWrap .detailWrap .itemBx .bxWrap .bx ul li { padding-left: 10px; }
.performance #content.assembly .conWrap .detailWrap .itemBx .bxWrap .bx ul li span { position: relative; display: block; left: 0; width: 100%; color: #000; }
}
@media all and (max-width: 375px){
.performance #content .conWrap .detailWrap .itemBx { padding: 30px 15px; }
.performance #content .conWrap .detailWrap .year { font-size: 32px; }
.performance #content .conWrap .detailWrap .itemBx .itemTit { font-size: 26px; }
}
/* 03. infra */
.ship #content .outline { overflow-x: visible !important; }
.ship #content h3 { margin-bottom: 35px; }
.ship #content h3 + p { margin-bottom: 60px; }
.ship #content .conWrap { position: relative; padding-left: 135px; }
.ship #content .conWrap .bx { position: relative; }
.ship #content .conWrap .bx + .bx { margin-top: 80px; }
.ship #content .conWrap .bx ul li { position: relative; }
.ship #content .conWrap .bx.bx1 ul li:nth-child(1) { color: #fff; background-color: var(--themeRed); border-color: var(--themeRed); }
.ship #content .conWrap .bx ul li .icon { position: absolute; bottom: 20px; right: 20px; }
.ship #content .conWrap .bx ul li:nth-child(1) h4 { color: #fff; }
.ship #content .conWrap .bx ul li h5 { margin-bottom: 10px; color: #222; }
.ship #content .conWrap .bx.bx2 .slideBxWrap { position: relative; }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx { padding: 0; height: auto; border: none; background-color: transparent; border-radius: 20px; box-shadow: 20px 20px 30px rgba(176,176,176,0.3); overflow: hidden; }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no1 { transform: translateY(-12px); }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no2 { transform: translateY(40px); }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no3 { transform: translateY(15px); }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx img { width: 100%; background-color: transparent; }
.ship #content .conWrap .bx h4 + p { margin-top: 11px; }
.ship #content .conWrap .bx.bx4 .tableWrap { margin-top: 25px; }
.ship.segero #content .conWrap .bx .tableWrap,
.ship.segero.miraero #content .conWrap .bx .tableWrap { margin-top: 20px; }
.ship #content .conWrap .bx.bx4 .tableWrap + ul { margin-top: 70px; }
.ship #content .conWrap .bx p + ul { margin-top: 20px; }
/* segero */
.ship.segero #content .conWrap .bx.bx3 { margin-top: 120px; }
.ship.segero #content .conWrap .bx .table01 .no1 { width: 350px; }
.ship.segero #content .conWrap .bx .table01 .no2 { width: auto; }
.ship.segero #content .conWrap .bx .table01 tr th { border-right: 1px solid #ddd; }
.ship.segero #content .conWrap .bx .table01 tr th:last-child { border-right: 0px solid #ddd; }
.ship.segero #content .conWrap .bx .table01 tr td { line-height: 1.4; }
.ship.segero #content .conWrap .bx .table01 tr td:last-child { padding-left: 25px; padding-right: 25px; text-align: left; }
.ship.segero #content .conWrap .btnBx { display: flex; flex-flow: row nowrap; justify-content: center; width: 100%; }
.ship.segero #content .conWrap .btnBx .btn { max-width: 300px; }
.ship.segero #content .conWrap .btnBx .btn i { display: inline-block; margin-right: 0.5rem; }
.ship.assets #content .conWrap .bx h6 { position: relative; margin-top: 30px; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; }
.ship.assets #content .conWrap .bx ul li { color: #666; }
.ship.assets #content .conWrap .btnBx .btn { max-width: 300px; }
.ship.assets #content .conWrap .btnBx .btn i { display: inline-block; margin-right: 0.5rem; }
@media all and (max-width: 1280px){
.ship #content .conWrap .bx ul li .icon { width: 50px; height: auto; }
.ship.segero #content .conWrap .bx .table01 .no1 { width: 300px; }
}
@media all and (max-width: 1024px){
.ship #content .conWrap .bx.bx1 .flexSet3by3 .flbx { width: calc(50% - 20px / 2); height: 200px; }
.ship #content .conWrap .bx.bx4 .flexSet3by3 .flbx { width: calc(50% - 20px / 2); height: auto; min-height: 200px; }
.ship.segero #content .conWrap .bx .table01 .no1 { width: 250px; }
.ship.segero #content .conWrap .bx .table01 tr td { font-size: 17px; }
.ship.segero #content .conWrap .bx .tableWrap,
.ship.segero.miraero #content .conWrap .bx .tableWrap { margin-top: 15px; }
}
@media all and (max-width: 1023px){
.ship #content .conWrap { padding-left: 0; }
.ship #content .conWrap .bx ul li .icon { width: 44px; }
}
@media all and (max-width: 768px){
/* .ship #content .outline { overflow-x: hidden !important; } */
.ship #content .conWrap .bx .tableWrap { overflow: hidden; overflow-x: auto; }
.ship #content .conWrap .bx .tableWrap .table01 { width: 768px; }
}
@media all and (max-width: 767px){
.ship #content .conWrap .bx.bx2 > img { width: 100%; }
}
@media all and (max-width: 600px){
.ship #content .conWrap .bx.bx4 .flexSet3by3 .flbx { padding: 20px; }
.ship #content .conWrap .bx .tableWrap .table01 { width: 670px; }
}
@media all and (max-width: 599px){
.ship #content .conWrap .bx.bx2 .flexSet3by3 { flex-flow: column; }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no1 { transform: translateY(0); width: 100%; }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no2 { transform: translateY(0); width: 100%; }
.ship #content .conWrap .bx.bx2 .slideBxWrap .flexSet3by3 .flbx.no3 { transform: translateY(0); width: 100%; }
.ship.segero #content .conWrap .bx .table01 .no1 { width: 200px; }
.ship.segero #content .conWrap .bx .table01 tr td { font-size: 16px; }
}
@media all and (max-width: 480px){
.ship #content .conWrap .bx.bx1 .flexSet3by3 .flbx { padding-bottom: 80px; width: 100%; height: auto; }
.ship #content .conWrap .bx.bx4 .flexSet3by3 .flbx { padding-bottom: 80px; width: 100%; height: auto; }
}
/* 04. invester */
.invest #content .tableWrap { position: relative; }
.invest #content .tableWrap table .no1 { width: 190px; }
.invest #content .tableWrap table .no3 { width: 225px; }
.dividend #content .tableWrap { position: relative; }
.dividend #content .tableWrap .tableType02 col { width: auto; }
.dividend #content .tableWrap .tableType02 .no1 { width: 200px; }
.dividend #content .tableWrap tr td { text-align: right; }
.dividend #content .tableWrap tr td.tc { text-align: center; }
.dividend #content .tableWrap tr td[colspan] { font-family: 'Pretendard-Medium'; font-weight: 500; color: #222; text-align: left; }
.dividend #content .tableWrap tr td[rowspan] { text-align: left; }
.library #content .tableWrap table tr td.link { position: relative; display: block; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; height: 100%; line-height: 115px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#subpage.rule #content.allWidth .outline.first { padding-top: 110px; padding-bottom: 0; }
#subpage.rule #content.allWidth .outline.last { padding-top: 0; padding-bottom: 120px; }
#subpage.ethics #content.allWidth .outline.first { padding-top: 110px; padding-bottom: 0; overflow: hidden; }
#subpage.ethics #content.allWidth .outline.last { padding-top: 0; padding-bottom: 120px; }
.rule #content.allWidth .widthAll ul { gap: 150px; }
.rule #content.allWidth .ruleCon { padding-top: 50px; }
.rule #content.allWidth .ruleCon h3 { position: relative; font-size: 30px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -2px; line-height: 1; }
.rule #content.allWidth .ruleCon h4 { position: relative; font-size: 24px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; letter-spacing: -1.5px; line-height: 1; }
.rule #content.allWidth .ruleCon h3 + h4 { margin-top: 30px; }
.rule #content.allWidth .ruleCon p + h4,
.rule #content.allWidth .ruleCon ul + h4 { margin-top: 30px; }
.rule #content.allWidth .ruleCon p,
.rule #content.allWidth .ruleCon h4 + ul { margin-top: 5px; }
.rule #content.allWidth .ruleCon p + h3,
.rule #content.allWidth .ruleCon ul + h3 { margin-top: 80px; }
.rule #content.allWidth .ruleCon ul.circleNum li .normalNum { margin-top: 5px; }
.rule #content.allWidth .ruleCon p + .normalNum { padding-left: 26px; }
.rule #content.allWidth .ruleCon p + dl,
.rule #content.allWidth .ruleCon dl + dl { margin-top: 30px; }
.rule #content .ruleCon ul.circleNum > li::before { top: 4px; font-size: 0.75em; }
.rule #content.allWidth .btnBx .btn { width: 100%; max-width: 300px; }
.rule #content.allWidth .btnBx .btn i { position: relative; display: inline-block; margin-right: 0.5rem; transform: translateY(1px); }
@media all and (max-width: 1024px){
.library #content .tableWrap table tr td.link { order: 1; padding-top: 30px; padding-bottom: 5px; padding-right: 90px; line-height: initial; }
.rule #content.allWidth .ruleCon h3 { font-size: 28px; }
.rule #content.allWidth .ruleCon h4 { font-size: 22px; }
.rule #content.allWidth .ruleCon ul li, .rule #content.allWidth .ruleCon p { font-size: 17px; }
}
@media all and (max-width: 900px){
.invest #content .tableWrap table .no1 { width: auto; }
.invest #content .tableWrap table .no2 { width: auto; }
.invest #content .tableWrap table .no3 { width: auto; }
}
@media all and (max-width: 768px){
.dividend #content .tableWrap .tableType02 .no1 { width: 170px; }
.dividend #content .tableWrap .inWrap .tableType02 { width: 900px; }
.rule #content.allWidth .widthAll ul { gap: 6px 50px; }
}
@media all and (max-width: 599px){
.library #content .tableWrap table tr td.link { font-size: 18px; }
.rule #content.allWidth .ruleCon h3 { font-size: 26px; }
.rule #content.allWidth .ruleCon h4 { font-size: 20px; }
}
/* 05. customer */
.news #content .tableWrap table col.no1 { width: 190px; }
.news #content .tableWrap table col.no2 { width: auto; }
.news #content .tableWrap table col.no3 { width: 225px; }
.news #content .tableWrap table.tableType01 tr td.count { width: 225px; }
.news.eng #content .boardWrap .inWrap .attachment dt { margin-right: 10px; font-size: 17px; }
.media #content .conWrap { position: relative; }
.media #content .conWrap .topBx { position: relative; display: flex; flex-flow: row nowrap; padding: 90px 50px 40px 90px; margin-bottom: 100px; border-radius: 15px; background: url(../../img/sub/customer/media_bg.png) repeat; }
.media #content .conWrap .topBx .txtBx { position: relative; width: 340px; }
.media #content .conWrap .topBx .txtBx p { position: relative; font-size: 24px; color: #686767; font-family: 'Pretendard-Regular'; font-weight: 400; line-height: 1.2; }
.media #content .conWrap .topBx .txtBx h3 { position: relative; margin-top: 6px; font-size: 48px; color: #131313; font-family: 'Pretendard-Bold'; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.media #content .conWrap .topBx .movBx { position: relative; width: calc(100% - 340px); }
.media #content .conWrap .topBx .movBx .inBx { position: relative; }
.media #content .conWrap .topBx .movBx .inBx .videoCon { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.media #content .conWrap .topBx .movBx .inBx .videoCon iframe,
.media #content .conWrap .topBx .movBx .inBx .videoCon object,
.media #content .conWrap .topBx .movBx .inBx .videoCon video,
.media #content .conWrap .topBx .movBx .inBx .videoCon embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.media #content .conWrap .topBx .movBx .inBx strong { position: relative; display: block; margin-top: 10px; font-size: 20px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #131313; }
.media #content .conWrap .bottomBx .button_wrap li { cursor: pointer; }
.media #content .conWrap .bottomBx .button_wrap li figure { display: block; }
.media #content .conWrap .bottomBx .button_wrap li figure img { width: 100%; }
.media #content .conWrap .bottomBx .button_wrap li h6 { position: relative; margin-top: 10px; font-size: 20px; font-family: 'Pretendard-SemiBold'; font-weight: 600; color: #131313; line-height: 1; letter-spacing: -1px; }
.media #content .conWrap .bottomBx { position: relative; }
.media #content .conWrap .bottomBx .swiper-button-prev { top: 50%; transform: translateY(-50%); }
.media #content .conWrap .bottomBx .swiper-button-next { top: 50%; transform: translateY(-50%); }
.media #content .conWrap .bottomBx .swiper-button-next,
.media #content .conWrap .bottomBx .swiper-button-prev { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border-radius: 50%; background-color: #dfdfdf; }
.media #content .conWrap .bottomBx .swiper-button-next i,
.media #content .conWrap .bottomBx .swiper-button-prev i { color: #000; }
.brochure #content .tableWrap table .no1 { width: 190px }
.brochure #content .tableWrap table .no2 { width: auto; }
.brochure #content .tableWrap table .no3 { width: 225px; }
.recruit #content .tableWrap { position: relative; }
.recruit #content .tableWrap .tableType01 .no1 { width: 150px; }
.recruit #content .tableWrap .tableType01 .no2 { width: 74px; }
.recruit #content .tableWrap .tableType01 .no3 { width: auto; }
.recruit #content .tableWrap .tableType01 .no4 { width: 220px }
.recruit #content .tableWrap .tableType01 .no5 { width: 74px; }
.recruit #content .tableWrap .tableType01 tr td { padding: 0 20px; }
.recruit #content .tableWrap .tableType01 tr td em { display: inline-block; font-size: 18px; color: #fff; font-family: 'Pretendard-Medium'; font-weight: 500; text-align: center; line-height: 30px; letter-spacing: -1px; background-color: #888; width: 60px; border-radius: 15px; }
.recruit #content .tableWrap .tableType01 tr td em.hrinfo { background-color: var(--themeRed); }
.recruit #content .tableWrap .tableType01 tr td em.newcomer { background-color: var(--themeBlue); }
.recruit #content .tableWrap .tableType01 tr td em.experienced { background-color: green; }
.recruit #content .tableWrap .tableType01 tr td em.progress { background-color: blue; }
.recruit #content .tableWrap .tableType01 tr td .linkTit { font-size: 18px; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(1) { text-align: center; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(2),
.recruit #content .tableWrap .tableType01 tr td:nth-child(4) { text-align: center; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(5) { padding: 0 5px; text-align: center; }
.recruitdetail #content .boardWrap .trackingProgress { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; }
.recruitdetail #content .boardWrap .trackingProgress li { position: relative; display: inline-block; font-size: 18px; color: #fff; font-family: 'Pretendard-Medium'; font-weight: 500; text-align: center; line-height: 30px; letter-spacing: -1px; background-color: #888; width: 60px; border-radius: 15px; }
.recruitdetail #content .boardWrap .trackingProgress li.hrinfo { background-color: var(--themeRed); }
.recruitdetail #content .boardWrap .trackingProgress li.newcomer { background-color: var(--themeBlue); }
.recruitdetail #content .boardWrap .trackingProgress li.experienced { background-color: rgb(0,128,0); }
.recruitdetail #content .boardWrap .trackingProgress li.progress { background-color: rgb(0,0,255); }
.recruitdetail #content .boardWrap .inWrap .titWrap { padding-bottom: 15px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo { display: flex; flex-flow: row nowrap; gap: 6px 100px; margin-top: 20px; padding: 30px 10px; background-color: #f7f7f7; border-radius: 10px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo span { display: inline-block; font-size: 18px; font-family: 'Pretendard-Bold'; font-weight: 700; color: #222; line-height: 1; }
.recruitdetail #content .boardWrap .inWrap .moreInfo em { display: inline-block; margin-left: 10px; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #444; line-height: 1; }
.email #content .conWrap p { position: relative; margin-top: 70px; font-size: 24px; font-family: 'Pretendard-Medium'; font-weight: 500; color: #111; line-height: 1.3; letter-spacing: -0.5px; text-align: center; }
.email #content .conWrap p strong { position: relative; display: block; margin-top: 50px; font-size: 18px; font-family: 'Pretendard-Regular'; font-weight: 400; color: #000; width: 100%; text-align: center; }
.contact #content .conWrap { position: relative; }
.contact #content .oneQuater { position: relative; display: flex; flex-flow: row nowrap; align-items: flex-start; }
.contact #content .oneQuater h4 { position: relative; padding-right: 20px; font-size: 36px; color: #000; font-family: 'Pretendard-ExtraBold'; font-weight: 800; width: 310px; letter-spacing: -2px; line-height: 1; }
.contact #content .oneQuater .rightSide { position: relative; width: calc(100% - 310px); }
.contact #content .oneQuater .rightSide h5 { position: relative; font-size: 30px; font-family: 'Pretendard-ExtraBold'; font-weight: 800; color: #222; line-height: 1; letter-spacing: -1px; }
.contact #content .oneQuater .rightSide h5 + .flexTripleBx { margin-top: 40px; padding-left: 4px; }
.contact #content .oneQuater .rightSide .flexTripleBx + h5 { margin-top: 90px; }
.contact #content .oneQuater .rightSide .flexTripleBx { position: relative; display: flex; flex-flow: row nowrap; gap: 60px; }
.contact #content .oneQuater .rightSide .flexTripleBx > .bx { position: relative; width: calc(33.3333% - 120px / 3); }
.contact #content .oneQuater .rightSide .flexTripleBx .bx h6 { position: relative; padding-bottom: 20px; margin-bottom: 30px; font-size: 22px; font-weight: 700; font-family: 'Pretendard-Bold'; color: #222; border-bottom: 1px solid #e6e6e6; line-height: 1; letter-spacing: -1px; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx ul { position: relative; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx ul li { position: relative; padding-left: 100px; font-size: 18px; font-family: 'Pretendard-Medium'; font-weight: 500; color: #666; line-height: 1.5; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx ul li span { position: absolute; top: 0; left: 0; display: inline-block; font-size: inherit; font-family: 'Pretendard-Bold'; font-weight: 700; color: #000; line-height: inherit; width: 100px; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx ul li a { position: relative; display: inline-block; font-size: inherit; font-family: inherit; font-weight: inherit; color: inherit; line-height: inherit; }
.contact #content .outline { overflow: visible !important; }
.contact #content .mapArea { position: relative; margin-top: 60px; }
.contact #content .mapArea .mapWrap { position: relative; margin-bottom: 200px; }
.contact #content .mapArea .mapWrap + .mapWrap { margin-bottom: 100px; }
.contact #content .mapArea .mapWrap div { position: relative; height: 600px; border-radius: 30px; box-shadow: 15px 15px 20px rgba(0,0,0,.15); }
.contact #content .mapArea .mapWrap div > div { box-shadow: none; }
.contact #content .mapArea .mapWrap div figure { position: relative; display: block; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; }
.contact #content .mapArea .mapWrap div figure img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
.contact #content .mapArea .mapWrap dl { position: absolute; left: 0; bottom: 0; transform: translateY(50%); padding: 60px 45px; width: 550px; background-color: #4c4c4c; border-radius: 25px; z-index: 10; }
.contact #content .mapArea .mapWrap dl dt { position: relative; margin-bottom: 5px; font-size: 30px; color: #fff; font-family: 'Pretendard-ExtraBold'; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.contact #content .mapArea .mapWrap dl dt em { font-size: 0.8em; font-family: 'Pretendard-Bold'; font-weight: 700; }
.contact #content .mapArea .mapWrap dl dd { position: relative; font-size: 20px; color: #fff; font-family: 'Pretendard-Medium'; font-weight: 500; line-height: 1.2; }
@media all and (max-width: 1480px){
.media #content .conWrap .topBx { margin-bottom: 80px; }
}
@media all and (max-width: 1280px){
.contact #content .oneQuater .rightSide .flexTripleBx { flex-flow: row wrap; gap: 40px; }
.contact #content .oneQuater .rightSide .flexTripleBx > .bx { width: calc(33.3333% - 80px / 3); }
}
@media all and (max-width: 1279px){
.contact #content .oneQuater .rightSide .flexTripleBx { flex-flow: row wrap; gap: 60px 40px; }
.contact #content .oneQuater .rightSide .flexTripleBx > .bx { width: calc(50% - 40px / 2); }
}
@media all and (max-width: 1024px){
.media #content .conWrap .topBx { padding: 70px 30px 20px 50px; margin-bottom: 60px; }
.media #content .conWrap .topBx .txtBx { width: 300px; }
.media #content .conWrap .topBx .txtBx p { font-size: 20px; }
.media #content .conWrap .topBx .txtBx h3 { font-size: 40px; }
.media #content .conWrap .topBx .movBx { width: calc(100% - 300px); }
.media #content .conWrap .bottomBx .button_wrap li h6 { font-size: 18px; }
.contact #content .oneQuater h4 { font-size: 34px; width: 260px; }
.contact #content .oneQuater .rightSide { width: calc(100% - 260px); }
.contact #content .oneQuater .rightSide h5 { font-size: 28px; }
.contact #content .oneQuater .rightSide .flexTripleBx + h5 { margin-top: 80px; }
.contact #content .mapArea .mapWrap { margin-bottom: 150px; }
.contact #content .mapArea .mapWrap div { height: 500px; border-radius: 20px; }
.contact #content .mapArea .mapWrap dl { padding: 40px 30px; width: 420px; }
.contact #content .mapArea .mapWrap dl dt { font-size: 28px; }
.contact #content .mapArea .mapWrap dl dd { font-size: 18px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo { gap: 6px 50px; }
}
@media all and (max-width: 1023px){
.media #content .conWrap .topBx { flex-flow: row wrap; padding: 60px 30px 20px 30px; margin-bottom: 50px; }
.media #content .conWrap .topBx .txtBx { margin-bottom: 30px; width: 100%; }
.media #content .conWrap .topBx .movBx { width: 100%; }
.email #content .conWrap p { font-size: 22px; }
.email #content .conWrap p br { display: none; }
.contact #content .oneQuater { flex-flow: row wrap; }
.contact #content .oneQuater h4 { padding-right: 0; margin-bottom: 40px; font-size: 32px; width: 100%; }
.contact #content .oneQuater .rightSide { width: 100%; }
}
@media all and (max-width: 900px){
.news #content .tableWrap table.tableType01 tr { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; }
.news #content .tableWrap table.tableType01 tr td.date { position: relative; order: 5; padding-bottom: 0; padding-right: 15px; margin-bottom: 15px; width: auto; }
.news #content .tableWrap table.tableType01 tr td.date::after { position: absolute; content: ''; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 14px; background-color: #999; }
.news #content .tableWrap table.tableType01 tr td.link { order: 1; padding-top: 20px; padding-right: 15px; width: 100%; }
.news #content .tableWrap table.tableType01 tr td.link .linkTit { line-height: 1.2; overflow: hidden; text-overflow: initial; white-space: initial; }
.news #content .tableWrap table.tableType01 tr td.count{ order: 6; margin-bottom: 15px; color: #999; width: auto; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(1) { display: none; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(2) { order: 1; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(3) { order: 3; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(4) { order: 4; }
.recruit #content .tableWrap .tableType01 tr td:nth-child(5) { order: 2; }
.recruit #content .tableWrap .tableType01 tr { justify-content: flex-start; align-items: flex-start; }
.recruit #content .tableWrap .tableType01 tr td { width: auto; }
.recruit #content .tableWrap .tableType01 tr td em { font-size: 16px; }
.recruit #content .tableWrap .tableType01 tr td.guide { display: inline-block; padding-top: 20px; padding-bottom: 10px; padding-left: 0; }
.recruit #content .tableWrap .tableType01 tr td.deadline { position: absolute; top: 20px; left: 64px; }
.recruit #content .tableWrap .tableType01 tr td.link { padding: 0 5px; margin-bottom: 10px; width: 100%; }
.recruit #content .tableWrap .tableType01 tr td.limit { padding: 0 5px; margin-bottom: 15px; }
.recruitdetail #content .boardWrap .trackingProgress li { font-size: 16px; }
}
@media all and (max-width: 768px){
.contact #content .oneQuater .rightSide h5 + .flexTripleBx { margin-top: 30px; }
}
@media all and (max-width: 767px){
.recruitdetail #content .boardWrap .trackingProgress li { font-size: 16px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo { flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; /* gap: 6px 50px; */ }
.recruitdetail #content .boardWrap .inWrap .moreInfo li { width: 100%; }
.recruitdetail #content .boardWrap .inWrap .moreInfo span { font-size: 17px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo em { font-size: 17px; }
}
@media all and (max-width: 600px){
.news #content .tableWrap table.tableType01 tr td.link { padding-right: 11px; }
.email #content .conWrap p { font-size: 20px; }
}
@media all and (max-width: 599px){
.media #content .conWrap .topBx .txtBx p { font-size: 18px; }
.media #content .conWrap .topBx .txtBx h3 { font-size: 32px; }
.media #content .conWrap .topBx .movBx .inBx strong { font-size: 18px; }
.media #content .conWrap .bottomBx { overflow: hidden; }
.contact #content .oneQuater .rightSide h5 { font-size: 24px; }
.contact #content .oneQuater .rightSide .flexTripleBx { gap: 50px; }
.contact #content .oneQuater .rightSide .flexTripleBx > .bx { width: 100%; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx h6 { padding-bottom: 15px; margin-bottom: 15px; }
.contact #content .oneQuater .rightSide .flexTripleBx + h5 { margin-top: 70px; }
.contact #content .oneQuater .rightSide .flexTripleBx .bx ul li { font-size: 17px; }
.contact #content .mapArea .mapWrap div { height: 400px; }
.contact #content .mapArea .mapWrap dl { padding: 25px; left: 25px; right: 25px; width: calc(100% - 50px); border-radius: 15px; }
.contact #content .mapArea .mapWrap dl dt { font-size: 24px; }
.contact #content .mapArea .mapWrap dl dd { font-size: 17px; }
.contact #content .mapArea .mapWrap div figure { border-radius: 15px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo { padding: 20px 10px }
.recruitdetail #content .boardWrap .inWrap .moreInfo span { font-size: 16px; }
.recruitdetail #content .boardWrap .inWrap .moreInfo em { font-size: 16px; }
}
/* ani */
.ani { transform: translateY(50px); opacity: 0; transition: all 0.7s ease-in-out; }
.ani.visible { transform: translateY(0); opacity: 1; }
.ani.ani2.visible { transition-delay: 0.2s; }
.ani.ani3.visible { transition-delay: 0.4s; }
.ani.ani4.visible { transition-delay: 0.6s; }
.ani.ani5.visible { transition-delay: 0.8s; }