/* common */ figure{margin: 0;} #subVisual { width:100%; height:660px; background:url(/img/sub/subVisual.png) no-repeat center; background-size:cover; position:relative; } #subVisual .inner { height:100%; display:table; font-family: 'Nunito Sans', sans-serif; } #subVisual .subTit { display:table-cell; vertical-align:middle;} #subVisual .subTit h2 { font-weight:700; font-size:48px; color:#fff; text-transform:uppercase; text-align: center; } #subVisual .subTit .cate { margin-top:50px; text-align: left;} #subVisual .subTit .cate li { color:#c2c2c2; } #subVisual .subTit .cate li:not(:first-child):before { border-left: 3px solid #fff; } #subVisual.community{ background: none !important; height: 410px;} #subVisual.community .inner{ max-width: 1500px; display: flex; flex-direction: column; justify-content: flex-end;} #subVisual.community .subTit h2{ color:#111;} #subVisual.community .subTit .cate{ margin: 0 0 112px 0;} #subVisual.community .subTit .cate li{ color:rgba(17,17,17,0.4);} #subVisual.community .subTit .cate li:not(:first-child):before{ border-left: 3px solid rgba(17,17,17,0.4); } #banner{ text-align: center; width: 80%; margin: 100px auto 0;} .cate { overflow:hidden; font-size:16px; } .cate li { display:inline-block; vertical-align:top; position:relative; font-family: 'Nunito Sans', 'Pretendard', sans-serif; color:#333; text-transform:uppercase; } .cate li:not(:first-child):before { content:""; display:inline-block; vertical-align:top; margin:7px 10px 0; width: 0; height: 0; border-left: 3px solid #333; border-top: 3px solid transparent; border-bottom: 3px solid transparent; } .cate li sup { font-size:10px; } /*하단 공통 폼 영역*/ .formBox { background:#fff; } .formBox .leftS { float:left; /* margin-top:2vw; */ margin-top:3vw; } .formBox .leftS dt { font-weight:700; color:#111; font-family: 'Nunito Sans', sans-serif; font-size:55px; text-transform:uppercase; } .formBox .leftS dd { /* margin-top:25px; */ margin-top:15px; font-size:20px; font-weight:300; } .formBox .leftS form { margin-top:65px; } .formBox .formDefault li select { border:1px solid #e5e5e5; background:url(/img/main/bullet_arrow2.png) no-repeat 95% center; } .formBox .formDefault input[type='text'] { border:1px solid #e5e5e5; } .formBox .formDefault textarea { border:1px solid #e5e5e5; } .formBox .formDefault .agree { color:#111; } .formBox .formDefault .agree span { border:1px solid #414141; } .formBox .formDefault .agree span:before { color:#074ea2; } .formBox .formDefault .agree a { border-bottom:1px solid #999; color:#999; opacity:1; } .formBox .formDefault .link button:before { border:1px solid #dbdbdb; } .formBox .formDefault .link button span { background:#fff; /*background:rgba(255,255,255,.5);*/ color:#111; } .formBox .rightS { position:absolute !important; top:0; right:0; min-width:40%; width:40%; height:100%; z-index:-1; position:relative; background:url(/img/sub/bg_form.png) no-repeat; background-size:cover; } /*공통 버튼*/ .btn_common a { display:block; width:180px; height:65px; line-height:63px; box-sizing:border-box; text-align:center; border:1px solid #d6d6d6; color:#333; font-size:16px; font-family: 'Nunito Sans'; position:relative; overflow:hidden; } .btn_common a:before { content:""; display:block; width:5%; height:120%; background:#fff; position:absolute; top:-10%; left:0; transform:rotate(45deg); transition:all .3s; } .btn_common a:hover:before { left:80%; } @media (max-width:1600px) { } @media (max-width:1200px) { /*common*/ #subVisual { height:50vw; min-height:300px; } #subVisual .subTit h2 { font-size:45px; } #subVisual .subTit .cate { margin-top:25px; } #banner{ width: 100%; margin: 0;} .cate { font-size:14px; } /*하단 공통 폼 영역*/ .formBox .leftS { float:none; margin-top:0; } .formBox .leftS dt { font-size:55px; } .formBox .leftS dd { margin-top:1vw; font-size:16px; } .formBox .leftS form { margin-top:5vw; } /*CONTACT US*/ .formBox .leftS .formDefault { margin-top:5vw; } .formBox .rightS { width:100%; min-width:100%; opacity:.2; } .formBox .formDefault .link button span { /* background:#d0d6d8; */ background:transparent; } } @media (max-width:650px) { /*common*/ #subVisual .subTit h2 { font-size:35px; } #subVisual .subTit .cate { margin-top:10px; } .cate { font-size:12px; } .cate li:not(:first-child):before { margin:4px 8px 0; } /*하단 공통 폼 영역*/ .formBox .leftS dt { font-size:7vw; } .formBox .leftS dd { /*font-size:3.3vw;*/ font-size:14px; } .formBox .leftS form { margin-top:5vw; } /*공통 버튼*/ .btn_common a { width:150px; height:45px; line-height:43px; font-size:14px; } } @media (max-width:400px) { } /*******************************************************************************************************************************************************/ /*회사소개*/ .mtfull { margin-top:100vw; } .infoWrap { background:#000; overflow:hidden; } #subBtn { position:fixed; top:120px; left:2%; z-index:11; font-size:16px; } #subBtn li { margin-bottom:10px; } #subBtn li a { display:table; width:120px; height:30px; box-sizing:border-box; border:1px solid transparent; font-family: 'Nunito Sans', 'Pretendard', sans-serif; color:#c8c8c8; text-transform:uppercase; } #subBtn li a span { display:table-cell; vertical-align:middle; text-indent:10px; } #subBtn li.on a { border:1px solid #006cc3; border-radius:13px; color:#c8c8c8; color:#006cc3; } #subCpn1 { background:#000; opacity:.999; width:100%; position:fixed; } .subVs { display:table; width:100%; height:100%; text-align:center; opacity:.9999; } .subVs h2 { display:none; } .subVs .textBox { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; display:block; text-align:center; z-index:5; background:rgba(0,0,0,.8); transition:all 1s; } .subVs .textBox > div { display:table; width:100%; height:100%; } .subVs .textBox h2 { display:table-cell; vertical-align:middle; color:#fff; } .subVs .textBox h2 span, .subVs .textBox h2 span b { line-height:140%; /* font-size:30px; */ font-size:40px; } .subVs .infoBox { display:table-cell; vertical-align:middle; } .subVs .box { display:table; margin:auto; width:375px; height:375px; position: relative; background:url(/img/sub/box_line.png) no-repeat center; position:relative; } .subVs .box h2 { display:table-cell; vertical-align:middle; text-align:center; transition:all 1s; } .subVs .box:before { content:""; display:block; width:638px; height:622px; background:url(/img/sub/bg_about.png) no-repeat center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:-1; animation:bgMain 2s infinite alternate; } /* .subVs .btn_bottom { position:absolute; bottom:5%; right:5%; z-index:11; } .subVs .btn_bottom li { margin-bottom:5px; } .subVs .btn_bottom li a { display:block; width:57px; height:57px; background:#0071e3; border-radius:50%; position:relative; box-sizing:border-box; border:1px solid #0071e3; } .subVs .btn_bottom li:last-child a { background:none; border-color:#323232; } .subVs .btn_bottom li a img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } */ .subVs .goPage { position:absolute; bottom:0; left:50%; transform:translateX(-50%); padding-bottom:70px; z-index:11; } .subVs .goPage span { display:block; margin:auto; width:100%; text-align:Center; color:#fff; font-family: 'Nunito Sans', 'Pretendard', sans-serif; font-size:12px; } .subVs .goPage i { display:block; margin:auto; width:1px; height:64px; background:#333; position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:0; } .subVs .goPage i:before { content:""; display:block; width:5px; height:5px; background:#0071e3; position:absolute; top:0; left:50%; margin-left:-2.5px; animation:scroll 1s alternate infinite; } .subVs.on .textBox { opacity:1; } .subVs.on .box h2 { opacity:0; } @keyframes scroll { 0% { top:0; } 100% { top:90%; } } @keyframes bgMain { 0% { transform:translate(-50%, -50%) scale(.7); } 100% { transform:translate(-50%, -50%) scale(1.1); } } #subCpn2 { background:#000 url(/img/sub/img_about.png) no-repeat center; background-size:cover; } .subCpn { width:100%; height:100%; } .subCpn .inner2 { width:100%; height:100%; display:table; position:relative; } .subCpn .cate { position:absolute; top:120px; right:0; } .subCpn .cate li { color:#fff; } .subCpn .cate li:not(:first-child):before { border-left-color: #fff; } .subCpn .inner2 dl { display:table-cell; vertical-align:middle; color:#fff; } .subCpn .inner2 dt { font-family: 'Nunito Sans', 'Pretendard', sans-serif; font-size:45px; font-weight:700; line-height:120%; } .subCpn .inner2 dd { margin-top:35px; color:#fff; /* font-size:18px; */ font-size:20px; line-height:180%; } /*비전/미션*/ .vcBox { position:relative; background:#fff; } .vcBox .tit { width:100%; /*height:400px;*/ height:40%; background:url(/img/sub/bg_vc.png) no-repeat center; background-size:cover; position:relative; display:table; } .vcBox .tit h3 { text-align:center; display:table-cell; vertical-align:middle; color:#fff; font-size:45px; font-weight:900; font-family: 'Nunito Sans'; } .vcBox .vcList { height:60%; width:100%; display:table; } .vcBox ul { overflow:hidden; display:table-cell; vertical-align:middle; } .vcBox ul li { float:left; width:33.333%; text-align:center; position:relative; box-sizing:border-box; padding:0 1vw;} .vcBox ul li:not(:first-child):before { content:""; display:block; width:1px; height:90%; background:#ececec; position:absolute; top:5%; left:0; } .vcBox ul li dl { margin-top:40px; } .vcBox ul li dt { /* font-size:30px; */ font-size:34px; color:#111; font-weight:700; font-family: 'Nunito Sans'; } .vcBox ul li dd { margin-top:25px; color:#333; font-weight:300; line-height:150%; /* font-size:18px; */ font-size:20px; } /*글로벌네트워크*/ .gnBox { background:url(/img/sub/bg_global.png) no-repeat center; background-size:cover; display:table; width:100%; position:relative; } .gnBox .box { display:table-cell; vertical-align:middle; } .gnBox h3 { float:left; font-size:92px; line-height:110%; color:#fff; font-weight:900; font-family: 'Nunito Sans'; text-transform:uppercase; } .gnBox ul { float:right; /*max-width:950px;*/ width:65%; overflow:hidden; } .gnBox ul li { float:left; width:18.4%; margin:0 2% 2% 0; background:rgba(255,255,255,.75); } .gnBox ul li:nth-child(5n) { margin-right:0; } .gnBox ul li a { display:table; width:100%; height:100px; box-sizing:border-box; padding:15px 10px; } .gnBox ul li dl { display:table-cell; vertical-align:middle; color:#000f1e; } .gnBox ul li dt { font-size:19px; font-weight:700; } .gnBox ul li dd { margin-top:10px; /* font-size:14px; */ font-size:1.3rem; } .gnBox ul li dd img { display:inline-block; vertical-align:middle; margin-right:5px; } #subCpn4 { position:relative; } #subCpn4 .popup { position:absolute; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:10; } #subCpn4 .popup .cont { max-width:1020px; width:90%; height:420px; background:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #subCpn4 .popup .cont > a { position:absolute; top:0; right:-26px; width:26px; height:26px; background:#fff url(/img/sub/icon_close.png) no-repeat center; font-size:0; } #subCpn4 .popup .txt { float:left; width:50%; height:100%; display:table; } #subCpn4 .popup .txt dl { display:table-cell; vertical-align:middle; box-sizing:border-box; padding:0 50px; } #subCpn4 .popup .txt dt { color:#000f1e; font-size:30px; font-weight:700; margin-bottom:40px; } #subCpn4 .popup .txt dd { margin-top:20px; color:#333; font-weight:300; font-size:18px; line-height:130%; padding-left:25px; } #subCpn4 .popup .txt dt+dd { margin-top:0; } #subCpn4 .popup .txt dd.location { background:url(/img/sub/icon_map.png) no-repeat left 5px; } #subCpn4 .popup .txt dd.tel { background:url(/img/sub/icon_tel.png) no-repeat left 5px; } #subCpn4 .popup .txt dd.mail { background:url(/img/sub/icon_mail.png) no-repeat left 5px; } #subCpn4 .popup .map { float:right; width:50%; height:100%; } #subCpn4 .popup .map iframe { width:100%; height:100%; } /*LEADERSHIP*/ #subCpn5 { display:table; width:100%; position:relative; background:#fff; } .leadBox { display:table-cell; vertical-align:middle; } .leadBox .tit { overflow:hidden; } .leadBox .tit h3 { color:#111; font-size:45px; line-height:120%; font-family: 'Nunito Sans'; font-weight:900; float:left; } .leadBox .tit .btn { float:right; } .leadBox .tit .btn li { float:left; cursor:pointer; margin-left:8px; width:58px; height:58px; border:1px solid #d1d1d1; border-radius:50%; box-sizing:border-box; text-align:center; line-height:56px; font-size:16px; color:#333; } .leadBox .tit .btn li:hover { background:#0071e3; border-color:#0071e3; color:#fff; } .sliderLd { margin-top:80px; width:100%; position:relative; height:470px; } .sliderLd .itemBox { position:absolute; top:0; left:0; width:calc(100% + 20%); } .sliderLd .item { width:100%; } .sliderLd .item > div { width:90%; height:470px; background:#f5f5f5; position:relative; opacity:.9999; } .sliderLd .item dl { position:absolute; top:50px; left:5%; } .sliderLd .item dt { color:#111; font-size:30px; font-weight:700; } .sliderLd .item dt span { color:#111; font-size:18px; font-family: 'Nunito Sans'; font-weight:700; margin-left:10px; } .sliderLd .item dd { margin-top:10px; color:#333; line-height:170%; font-size:18px; width:100%; } .sliderLd .item p { position:absolute; bottom:0; right:0; z-index:-1; } @media (max-width:1600px) { /*회사소개*/ #subBtn { display:none; opacity:0; z-index:-5; } /*어바웃*/ .subCpn .inner2 { box-sizing:border-box; padding:0 2%; } .subCpn .cate { top:120px; right:2%; } /*글로벌네트워크*/ .gnBox h3 { float:none; font-size:92px; width:100%; } .gnBox h3 br { display:none; } .gnBox ul { float:none; max-width:auto; width:100%; overflow:hidden; margin:5vw auto 0; } } @media (max-width:1400px) { .sliderLd .item p img { width:14vw; } } @media (max-width:1200px) { /* .mtfull { margin-top:80vw; } */ /*회사소개*/ #subCpn1 { height:auto; padding:25vw 0; } .subVs .textBox h2 span, .subVs .textBox h2 span b { font-size:25px; } .subVs .box { width:30vw; height:30vw; min-height:250px; min-width:250px; background-size:100%; } .subVs .box:before { width:60vw; height:60vw; min-height:380px; min-width:380px; background-size:100%; } .subVs .box h2 img { width:80%; } /*어바웃*/ #subCpn2 { background-position:right 20% bottom; padding:20vw 0; } .subCpn .cate { top:-15vw; } .subCpn .inner2 dt { font-size:40px; } .subCpn .inner2 dd { margin-top:25px; font-size:15px; } /*비전/미션*/ .vcBox { position:relative; } .vcBox .tit { min-height:270px; height:30vw; } .vcBox .tit h3 { font-size:40px; } .vcBox .vcList { height:auto; padding:12vw 0; } .vcBox ul li i img { height:10vw; } .vcBox ul li dl { margin-top:20px; } .vcBox ul li dt { font-size:25px; } .vcBox ul li dd { margin-top:10px; font-size:15px; } /*글로벌네트워크*/ .gnBox { padding:15vw 0; } .gnBox h3 { font-size:40px; } .gnBox ul li { width:24%; margin:0 1% 2% 0 !important; } .gnBox ul li:nth-child(4n) { margin-right:0; } .gnBox ul li a { padding:10px; } .gnBox ul li dt { font-size:19px; } .gnBox ul li dd { margin-top:5px; min-height:40px; } .gnBox ul li dd img { display:inline-block; vertical-align:middle; margin-right:5px; } .gnBox ul li dd span { display:inline-block; vertical-align:middle; width:calc(100% - 50px); word-break:keep-all; } #subCpn4 .popup .txt { box-sizing:border-box; padding:0 3%; } #subCpn4 .popup .txt dl { box-sizing:border-box; padding:0; } /*LEADERSHIP*/ #subCpn5 { padding:10vw 0; } .leadBox .tit h3 { font-size:40px; } .sliderLd { margin-top:3vw; height:35vw; } .sliderLd .itemBox { position:absolute; top:0; left:0; width:calc(100% + 20%); } .sliderLd .item > div { width:90%; height:35vw; } .sliderLd .item dl { top:5%; left:5%; } .sliderLd .item dt { font-size:25px; } .sliderLd .item dt span { font-size:15px; margin-left:5px; } .sliderLd .item dd { margin-top:5px; /* font-size:15px;*/ font-size:1.6rem; width:100%; line-height:130%; } .sliderLd .item p img { /* width:16vw; */ width:17vw; } } @media (max-width:650px) { .mtfull { margin-top:150vw; } /*회사소개*/ #subCpn1 { /*padding:35vw 0;*/ padding:40vw 0; height:120vw; } .subVs .textBox h2 span, .subVs .textBox h2 span b { font-size:16px; } .subVs .box { width:25vw; height:25vw; min-height:200px; min-width:200px; } .subVs .box:before { width:60vw; height:60vw; min-height:380px; min-width:380px; background-size:100%; } .subVs .box h2 img { width:80%; } /* .subVs .btn_bottom li a { width:35px; height:35px; } */ .subVs .goPage { padding-bottom:45px; } .subVs .goPage i { height:40px; } /*어바웃*/ #subCpn2 { background-position:right 10% bottom; padding:30vw 0; background-size:180%; } .subCpn .inner2 dd { margin-top:15px; font-size:14px; } /*비전/미션*/ .vcBox .tit { min-height:180px; } .vcBox .tit h3 { font-size:30px; } .vcBox ul li dl { margin-top:10px; } .vcBox ul li dt { font-size:20px; } .vcBox ul li dd { margin-top:5px; font-size:14px; } /*글로벌네트워크*/ .gnBox h3 { font-size:30px; } .gnBox ul li { width:49%; margin:0 2% 2% 0 !important; } .gnBox ul li:nth-child(2n) { margin-right:0 !important; } .gnBox ul li dt { font-size:15px; } #subCpn4 .popup .cont { height:auto; } #subCpn4 .popup .cont > a { position:absolute; top:-26px; right:0; } #subCpn4 .popup .txt { float:none; width:100%; padding:5%; } #subCpn4 .popup .txt dt { font-size:25px; margin-bottom:15px; } #subCpn4 .popup .txt dd {font-size:15px; padding-left:20px; margin-top:5px; } #subCpn4 .popup .map { float:none; width:100%; height:250px; } /*LEADERSHIP*/ #subCpn5 { padding:10vw 0; } .leadBox .tit h3 { font-size:30px; } .leadBox .tit .btn li { margin-left:5px; width:42px; height:42px; line-height:41px; font-size:14px; } .sliderLd { margin-top:3vw; /* height:35vw; */ height:48vw; } .sliderLd .item > div { width:90%; /* height:35vw; */ height:47vw; } .sliderLd .item dl { top: 15%; left: 5%; } .sliderLd .item dt { font-size:20px; } .sliderLd .item dt span { font-size:14px; } .sliderLd .item dd { font-size:12px; width:100%; } .sliderLd .item p img { /* width:16vw; */ width:25vw; } } @media (max-width:400px) { /*어바웃*/ .subCpn .inner2 dd { margin-top:15px; font-size:12px; } /*비전/미션*/ .vcBox ul li dt { font-size:15px; } .vcBox ul li dd { font-size:12px; } /*LEADERSHIP*/ .leadBox .tit h3 { overflow:hidden; width:100%; } .leadBox .tit .btn { clear:both; float:right; } .sliderLd { height:50vw; } .sliderLd .item > div { height:50vw; } .sliderLd .item dt span { /* font-size:13px; */ font-size:16px; display:block; margin-left:0; } .sliderLd .item p img { /* width:20vw; */ width:25vw; } } /*******************************************************************************************************************************************************/ /*회사연혁*/ .hisCon .inner2 { padding-bottom:150px; } .hisCon .tit { padding:200px 0; text-align:center; } .hisCon .tit dt { color:#111; font-size:50px; line-height:120%; font-weight:700; } .hisCon .tit dd { margin-top:20px; color:#666; font-size:20px; } .hisCon article { overflow:hidden; margin-top:0; position:relative; } .hisCon article h3 { background: #FFF; color:#0071e3; font-size:200px; line-height:120%; font-weight:700; position:absolute; top:0; left:0; width:100%; transition:all .3s; } .hisCon article h3 span { display:block; margin:auto; width:100% !important; transform: translateY(0); transition: transform 0.3s; } .hisCon article h3.ani { position:fixed; } .hisCon article h3.ani span{ transform: translateY(80px); } .hisCon .list { float:right; width:calc(100% - 550px); border-top:1px solid #e2e2e2; } .hisCon .list ul { border-bottom:1px solid #e2e2e2; padding:75px 0; font-size:16px;} .hisCon .list li { margin-top:40px; color:#333; padding-left:12px; position:relative; } .hisCon .list li:first-child { margin-top:0; } .hisCon .list li:before { content:""; display:block; width:3px; height:3px; background:#0071e3; position:absolute; top:8px; left:0; } .hisCon article i { display:block; clear:both; font-size:0; width:100%; height:100px; position:absolute; bottom:0; left:0; } @media (max-width:1500px) { .hisCon article h3 span { width:96% !important; } } @media (max-width:1200px) { /*회사연혁*/ .hisCon .inner2 { padding-bottom:15vw; } .hisCon .tit { padding:15vw 0 5vw; } .hisCon .tit dt { font-size:40px; } .hisCon .tit dd { margin-top:10px; font-size:18px; } .hisCon article h3 { font-size:70px; overflow:hidden; text-align:center; } .hisCon article h3.ani { opacity:.3 !important; } .hisCon .list { float:none; width:100%; margin-top:80px; } .hisCon .list ul { padding:8vw 0; font-size:14px;} .hisCon .list li { margin-top:10px; } .hisCon article i { height:1px; } } @media (max-width:650px) { /*회사연혁*/ .hisCon .tit dt { font-size:30px; } .hisCon .tit dd { font-size:15px; } .hisCon article h3 { font-size:50px; } } @media (max-width:400px) { } /*******************************************************************************************************************************************************/ /*제품메인*/ #pd_main { width:100%; height:940px; background:#0a0c12; opacity:.9999; } .pdMenu { width:100%; height:100%; } .pdMenu > li { float:left; width:33.3%; height:100%; transition:all .3s; position:relative; overflow:hidden; } .pdMenu > li > p { position:absolute; bottom:0; right:-20%; width:510px; height:614px; transition:all .3s; z-index:-1; } .pdMenu > li > p img { position:absolute; bottom:0; right:0; height:614px; } .pdMenu > li.pd1 { background:url(/img/sub/bg_pd1.png) no-repeat center; background-size:cover; opacity:.9999;} .pdMenu > li.pd2 { background:url(/img/sub/bg_pd2.png) no-repeat center; background-size:cover; opacity:.9999; } .pdMenu > li.pd3 { background:url(/img/sub/bg_pd3.png) no-repeat center; background-size:cover; opacity:.9999; } .pdMenu > li h2 { position:absolute; top:170px; left:0; width:100%; box-sizing:border-box; padding-left:10%; color:#fff; font-size:45px; font-weight:700; font-family: 'Nunito Sans', sans-serif; transition:all .3s; } .pdMenu > li .menu { /* width:50%; */ width: 90%; margin:330px auto 0; text-align:center; /*opacity:0; transition:opacity .3s;*/ display:none; } .pdMenu .menu { overflow:hidden; text-align:center; } .pdMenu .menu li { width:32%; height:130px; margin:0 2% 2% 0; float:left; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); border-radius:5px; transition:all .3s; } .pdMenu .menu li:nth-child(3n) { margin-right:0; } .pdMenu .menu li:hover { background:rgba(0,113,227,.5); border:1px solid rgba(0,113,227,.5); } .pdMenu .menu li a { display:table; width:100%; height:100%; text-align:center; } .pdMenu .menu li a dl { display:table-cell; vertical-align:middle; text-align:center; color:#fff; } .pdMenu .menu li dt { font-family: 'Nunito Sans', 'Pretendard', sans-serif; font-weight:700; font-size:26px; line-height:120%; } .pdMenu .menu li dd { margin-top:5px; font-size:16px; } .pdMenu > li > p { opacity: .4; } .pdMenu li.comming{ width: 100%; pointer-events:none; } /* .pdMenu > li.pd2 .menu { width:90%; } .pdMenu > li.pd3 .menu{ width: 90%; } */ .pdMenu > li.pd3 .menu li { height:170px; } .pdMenu > li.on { width:50%; } .pdMenu > li.off { width:25%; } .pdMenu > li.on > p { right:0; opacity:0.3; filter: blur(3px); -webkit-filter: blur(3px); } /* .pdMenu > li.on.pd3 > p { opacity:.4; } */ .pdMenu > li.on h2 { text-align:center; padding-left:0; } .pdMenu > li.on .menu {/* opacity:1; */ display:block; } /*제품메인 (2024-09-05)*/ .pdMenu.pdMenu2 > li{ width: calc(100% / 3); } /* .pdMenu.pdMenu2 > li > p { right:0; opacity:0.3; filter: blur(3px); -webkit-filter: blur(3px); } */ .pdMenu.pdMenu2 > li h2 { text-align: center; padding-left:0; } .pdMenu.pdMenu2 > li .menu { display:block; opacity: 0; pointer-events: none; transition: opacity 0.5s; } .pdMenu.pdMenu2 > li.on .menu{ opacity: 1; pointer-events: auto; } @media (max-width:1600px) { /*제품메인*/ .pdMenu > li .menu { width:60%; } .pdMenu > li > p img { height:40vw; } } @media (max-width:1200px) { /*제품메인*/ #pd_main { height:auto; } .pdMenu > li { float:none; width:100%; height:55vw; min-height:420px; } .pdMenu > li > p {right:-10%; width:50%; height:40vw; } .pdMenu > li > p img { height:100%; } .pdMenu > li h2 { top:10vw; padding-left:5%; font-size:35px; } .pdMenu > li h2 br { display:none; } .pdMenu > li .menu { margin:20vw auto 0; width:80%; } .pdMenu .menu li { height:110px; } .pdMenu .menu li dt { font-size:20px; } .pdMenu .menu li dd { font-size:14px; } /* .pdMenu > li.pd2 .menu { width:70%; } */ .pdMenu > li.pd3 .menu li { height:130px; } .pdMenu > li.on { width:100%; } .pdMenu > li.off { width:100%; } /*제품메인 (2024-09-05)*/ .pdMenu.pdMenu2 > li{ width: 100%; } } @media (max-width:650px) { /*제품메인*/ #pd_main { height:auto; } .pdMenu > li { float:none; width:100%; height:55vw; min-height:420px; } .pdMenu > li > p {right:-10%; width:50%; height:50vw; } .pdMenu > li h2 { top:15vw; font-size:30px; } .pdMenu > li .menu { margin:25vw auto 0; width:90%; } .pdMenu .menu li dt { font-size:15px; word-break:keep-all; } .pdMenu .menu li dd { font-size:12px; } .pdMenu > li.pd2 .menu { width:90%; } .pdMenu > li.on { width:100%; } .pdMenu > li.off { width:100%; } /*제품메인 (2024-09-05)*/ .pdMenu.pdMenu2 > li .menu{ opacity: 1; } } @media (max-width:400px) { /*제품메인*/ .pdMenu > li h2 { top:25vw; font-size:20px; } .pdMenu > li .menu { margin:38vw auto 0; width:80%; } .pdMenu .menu li img { max-height:15vw; } .pdMenu .menu li dt { font-size:14px; } .pdMenu .menu li dd { font-size:11px; } } /*******************************************************************************************************************************************************/ /*제품목록*/ .pdlistCon > .inner2 { padding-bottom:200px; } .pdlistCon h3 { margin-top:180px; text-align:center; color:#111; font-size:45px; font-weight:700; font-family: 'Pretendard', sans-serif; } .pdlistCon h3 span { display:block; margin-top:5px; color:#064a9b; font-weight:900; font-size:45px; line-height:120%; font-family: 'Noto Sans', 'Nunito Sans'; } /*.pdlistCon .list { margin-top:70px; width: 100%; display: grid; overflow:hidden; grid-template-columns: repeat(4, 1fr); gap:2%; }*/ .pdlistCon .list { margin-top:70px; width: 100%; display: flex; justify-content: flex-start; gap:30px; flex-wrap:wrap; } /*.pdlistCon .list li { float:left; border:1px solid #e2e2e2; box-sizing:border-box; } */ .pdlistCon .list li { /* border:1px solid #e2e2e2; */ box-sizing:border-box; width: calc((100% - 90px) / 4);} .pdlistCon .list li:first-child { margin-left:0; } .pdlistCon .list li:nth-child(5) { margin-left:0; margin-top:30px;} .pdlistCon .list li a { display:table; width:100%; height:265px; /* border-bottom:1px solid #e2e2e2; */ text-align:center; } .pdlistCon .list li a p { display:table-cell; vertical-align:middle; } .pdlistCon .list li a p img { max-width:75%; /* max-width:60%; */ } .pdlistCon .list dl { text-align:center; margin:35px 10px; } .pdlistCon .list dt { color:#111; font-weight:700; font-family: 'Nunito Sans', sans-serif; font-size:25px; } .pdlistCon .list dd { margin-top:20px; height:auto; } .pdlistCon .list dd.has { height:70px; } .pdlistCon .list dd p { display:inline-block; vertical-align:top; margin:0 3px; } .pdlistCon .list dd p span { display: block; /* padding-top:5px; font-size:18px; */ padding-top:5px 10px; font-size:15px; color: #333; letter-spacing: -0.1px; line-height: 1.3; font-weight: 300;} @media (max-width:1200px) { /*제품목록*/ .pdlistCon > .inner2 { padding-bottom:15vw; } .pdlistCon h3 { margin-top:10vw; font-size:30px; } .pdlistCon h3 span { font-size:35px; } .pdlistCon .list { margin-top:3vw; gap:30px 20px} .pdlistCon .list li{ width: calc((100% - 20px) / 2);} .pdlistCon .list li a {height:20vw; } /* .pdlistCon .list li a p img { max-width:80%; }*/ .pdlistCon .list dl { margin:15px 5px; } .pdlistCon .list dt { font-size:18px; letter-spacing:-1.5px; } .pdlistCon .list dd { margin-top:10px; } .pdlistCon .list dd.has { height:auto; } .pdlistCon .list dd p { margin:0 1px; width:25%; } .pdlistCon .list dd p img { width:100%; } } @media (max-width:650px) { /*제품목록*/ .pdlistCon h3 { font-size:18px; } .pdlistCon h3 span { font-size:25px; } .pdlistCon .list { grid-template-columns: repeat(2, 1fr); } /* .pdlistCon .list li { width:49%; margin:0 0 2% 2% !important; } .pdlistCon .list li:nth-child(odd) { margin-left:0 !important; } */ .pdlistCon .list dt { font-size:16px; } .pdlistCon .list dd { margin-top:10px; } .pdlistCon .list dd.has { height:11vw; } } @media (max-width:400px) { /*제품목록*/ .pdlistCon .list dt { font-size:14px; } } /*******************************************************************************************************************************************************/ /*제품목록 - 전체 (2024-02-15)*/ .pdlistAll{ padding: 180px 0; } .pdlistAll .inner{ max-width: 1500px; width: 96%; margin: 0 auto; } .pdlistAll .table-box th , .pdlistAll .table-box td{ padding: 25px 10px; border: 1px solid #CCC; text-align: center; letter-spacing: -0.038em; font-family: 'Nunito Sans', 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', "Pretendard", sans-serif; } .pdlistAll .table-box tr > *:first-child{ border-left: none; } .pdlistAll .table-box tr > *:last-child{ border-right: none; } .pdlistAll .table-box th{ font-size: 18px; } .pdlistAll .table-box td{ font-size: 16px; font-weight: 400; color: #666; } .pdlistAll .table-box thead{ background: #E5E5E5; position: relative; } .pdlistAll .table-box thead::before{ content: ""; width: 100%; height: 2px; background: #2E2E2E; position: absolute; top: 0; left: 0; } .pdlistAll .table-box thead th{ font-weight: 700; color: #111; } .pdlistAll .table-box tbody th{ font-weight: 600; color: #333; position: relative; } .pdlistAll .table-box tbody th a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; } .pdlistAll .table-box tbody th:hover{ color: #064B99; } @media screen and (max-width: 1200px){ .pdlistAll{ padding: 10vw 0 15vw; } .pdlistAll .table-box{ overflow-x: scroll; } .pdlistAll .table-box table{ width: 1200px; } .pdlistAll .table-box th , .pdlistAll .table-box td{ padding: 20px 10px; } .pdlistAll .table-box th{ font-size: 17px; } .pdlistAll .table-box td{ font-size: 15px; } } @media screen and (max-width: 650px){ .pdlistAll .table-box table{ width: 1000px; } .pdlistAll .table-box th , .pdlistAll .table-box td{ padding: 15px 10px; } .pdlistAll .table-box th{ font-size: 16px; } .pdlistAll .table-box td{ font-size: 14px; } } /*******************************************************************************************************************************************************/ /*제품상세 - 공통*/ .pdView { padding-top:180px; overflow: hidden;} .pdView .pdInfo {margin:100px auto; /* display:table; */ display:flex; gap:50px; } .pdView .pdInfo .img { float:left; width:90%; /* max-width:750px; */ max-width:720px; height:515px; /* border:1px solid #e2e2e2; */ box-sizing:border-box; position:relative; } .pdView .pdInfo .img img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); /* max-width:500px; */ max-width:90%; max-height:90%; } .pdView .pdInfo .txtBox { display:table-cell; vertical-align:middle; width:50%; max-width:615px; overflow:hidden; } .pdView .pdInfo .txtBox dl {} .pdView .pdInfo .txtBox dt { margin-bottom:50px; } .pdView .pdInfo .txtBox dt > p { display:block; font-weight:300; color:#333; font-size:18px; } .pdView .pdInfo .txtBox dt > p > span { /* display:inline; */ display:block; color:#064a9b; text-transform:uppercase; font-weight:700;} .pdView .pdInfo .txtBox dt b { color:#111; font-weight:900; font-size:60px; line-height:120%; font-family: 'Noto Sans', 'Nunito Sans', 'Pretendard', sans-serif; } .pdView .pdInfo .txtBox dd { color:#333; position:relative; padding-left:10px; /* font-size:18px; */ font-size:2.2rem; line-height:150%; font-weight:300; margin-bottom:15px; } .pdView .pdInfo .txtBox dd:before { content:"·"; color:#064a9b; position:absolute; top:0; left:0; } .pdView .pdInfo .txtBox .icon { margin-top: 65px; width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: (1fr); grid-template-columns: repeat(3, 1fr); gap: 20px; } .pdView .pdInfo .txtBox .icon li { float:left; margin-right:0; /* max-width:68px; width:100%; */ /* max-width:108px; */ text-align: center; } .pdView .pdInfo .txtBox .icon li img { width:60%; } .pdView h3 { color:#111; /* font-size:35px; */ font-size:5rem; font-weight:700; font-family: 'Noto Sans', 'Nunito Sans', 'Pretendard', sans-serif; text-align:center; margin-bottom: 20px; } .pdView .basicBox h4 { margin-top: 20px; color:#111; /* font-size:20px; */ font-size: 2.5rem; font-weight:700; font-family: 'Noto Sans', 'Nunito Sans', 'Pretendard', sans-serif; text-align:center; } .pdView .basicBox p { margin-top: 20px;color: #333; line-height: 160%;/* font-size: 17px; */ font-size: 2rem; font-weight: 400; text-align:center;} /*상단타이틀*/ .pdView .tit_top { margin-top:100px; font-family: 'Noto Sans', 'Nunito Sans', 'Pretendard', sans-serif; text-align:center; } .pdView .tit_top dt { font-size:60px; font-weight:900; color:#111; } .pdView .tit_top dt sup { vertical-align:top; display:inline-block; margin-top:10px; } .pdView .tit_top dd { margin-top:15px; color:#333; font-weight:500; font-size:18px; line-height:120%; } /*상단 타이틀 및 이미지 1개 / 3개 / 4개*/ .pdView .basicBox { padding:100px 0; overflow:hidden; } .pdView .basicBox .cont { margin-top:80px; overflow:hidden; text-align: center; /* display: grid; width: 100%; gap: 40px; grid-template-columns: repeat(3, 1fr); */} .pdView .basicBox .cont li {gap:20px;} .pdView .basicBox .cont.flexbox {width:100%; text-align: center; display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pdView .basicBox .txt_h3 { margin-top:30px; color:#333; font-size:18px; font-weight:300; line-height:150%; text-align:center; } .pdView .basicBox .cont.v3 li { float:left; margin-left:3%; width:31.3333%; } .pdView .basicBox .cont.v3 li:first-child { margin-left:0; } .pdView .basicBox .cont.v4 li { float:left; margin-left:2%; width:23.5%; } .pdView .basicBox .cont.v4 li:first-child { margin-left:0; } /*회색배경 텍스트 및 이미지2 리스트 */ .pdView .basicBox .grayList { overflow:hidden; display:flex; justify-content: space-between; align-items: stretch; } .pdView .basicBox .grayList li { float:left; width:48%; background:#f7f7f7; box-sizing:border-box; padding:70px 50px; } .pdView .basicBox .grayList li:last-child { float:right; } .pdView .basicBox .grayList h3 { margin-top:0; } .pdView .basicBox .grayList div { margin-top:30px; text-align: center; } .pdView .basicBox .grayList p { margin-top:50px; color:#333; font-size:18px; line-height:150%; text-align:center; } /*회색배경 제품 목록 4개 리스트*/ .pdView .basicBox .itemList ul { width:100%; margin-top:30px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; } .pdView .basicBox .itemList ul:first-child { margin-top:0; } .pdView .basicBox .itemList li { max-width:730px; width:49%; background:#f7f7f7; position:relative; } .pdView .basicBox .itemList li:nth-of-type(odd){ margin-right: 2%; } .pdView .basicBox .itemList li figure { max-width: 300px; margin: 0 auto; } /* .pdView .basicBox .itemList li:first-child img { position:absolute; bottom:0; } */ .pdView .basicBox .itemList dl { padding:30px; } .pdView .basicBox .itemList dt { color:#111; font-weight:700; /* font-size:35px; */ font-size: 24px; line-height:120%; margin-bottom:15px; } .pdView .basicBox .itemList dd { margin-top:15px; position:relative; padding-left:10px; color:#333; font-size:18px; line-height:140%; font-weight:400; } .pdView .basicBox .itemList dd:before { content:"·"; color:#0071e3; position:absolute; top:0; left:0; } .pdView .basicBox .itemList dd span { color:#0071e3; } .pdView .basicBox .itemList dt+dd { margin-top:0; } /* 좌우 이미지 + 텍스트, 반대방향*/ .pdView .lr_imgBox { padding:100px 0; } .pdView .lr_imgBox h3 { margin-bottom:100px; } .pdView .lr_imgBox .box { overflow:hidden; display:table; width:100%; } .pdView .lr_imgBox .box > div { display:table-cell; vertical-align:middle; max-width:710px; /* width:40%; */ width:50%; } .pdView .lr_imgBox .box dl { display:table-cell; vertical-align:middle; /* width:60%; */ width:50%; box-sizing:border-box; padding:0 0 0 5%; } .pdView .lr_imgBox .box dt img { display:block; } .pdView .lr_imgBox .box dt span { display:block; margin-top:20px; color:#111; /* font-size:32px; */ font-size:35px; font-weight:700; } .pdView .lr_imgBox .box dd { margin-top:20px; color:#333; line-height:160%; /* font-size:18px; */ font-size:22px; font-weight:400; /* font-weight:300; */ } .pdView .lr_imgBox.reverse .box > div { text-align:right; } .pdView .lr_imgBox.reverse .box dl { padding:0 5% 0 0; } /*좌우 영상 + 텍스트 , 반대방향*/ .pdView .videoBox { padding:100px 0; } .pdView .videoBox h3 { margin-bottom:100px; } .pdView .videoBox .box { overflow:hidden; display:table; width:100%; } .pdView .videoBox .box > div { display:table-cell; vertical-align:middle; max-width:710px; /* width:40%; */ width:50%; } .pdView .videoBox .box dl { display:table-cell; vertical-align:middle; /* width:60%; */ width:50%; box-sizing:border-box; padding:0 5% 0 0; } .pdView .videoBox .box dt { color:#111;font-size:35px; font-weight:700; } .pdView .videoBox .box dd { margin-top:20px; color:#333; line-height:160%; font-size:18px; font-weight:400; /* font-weight:300; */ } .pdView .videoBox.reverse .box > div { text-align:right; } .pdView .videoBox.reverse .box dl { padding-left:5%; } /*이미지+ 텍스트 상세 폼*/ .pdView .thumbBox { padding:100px 0; } .pdView .thumbBox .box { overflow:hidden; display:table; width:100%; } .pdView .thumbBox .box .left { display:table-cell; vertical-align:top; max-width:560px; /* width:40%; */ width:50%; padding-left:100px; } .pdView .thumbBox .box .right { display:table-cell; vertical-align:middle; /* width:60%; */ width:50%; box-sizing:border-box; padding:0 3% 0 0; } .pdView .thumbBox .box .right dt { color:#111; font-size:35px; font-weight:700; } .pdView .thumbBox .box .right dd { margin-top:40px; color:#333; line-height:160%; font-size:18px; } .pdView .thumbBox .box .right img { margin-top:40px; } .pdView .thumbBox .box .right .btn_common a { margin-top:30px; } /*배경색 그레이/흰색 선택 이미지 텍스트, 반대방향 */ .pdView .lr_bgBox { padding:100px 0; overflow:hidden; } .pdView .lr_bgBox.gray { background:#f7f7f7; } .pdView .lr_bgBox > div { display:table; width:100%; height:100%; } .pdView .lr_bgBox p { display:table-cell; vertical-align:middle; width:53%; } .pdView .lr_bgBox dl { display:table-cell; vertical-align:middle; box-sizing:border-box; } .pdView .lr_bgBox dt img { display:block; margin-bottom:15px; } .pdView .lr_bgBox dt span { color:#000001; font-weight:700; font-size:35px; line-height:120%; } .pdView .lr_bgBox dd { margin-top:30px; font-size:18px; line-height:160%; color:#333; font-weight:300; } .pdView .lr_bgBox .leftImg dl { padding-left:5%; } .pdView .lr_bgBox .rightImg dl { /* padding-right:5%; */ padding-left: 5%; } /*동영상 전체 영역*/ .pdView .videoWideBox { overflow:hidden; text-align:center } /*동영상 롤링배너 영역*/ .pdView .videoBn { width:100%; background:#ebebeb; } .pdView .videoBn .inner2 { padding:100px 0; position:relative; } .pdView .videoBn h3 { margin-top:0; } .pdView .videoBn .videoSlider { margin-top:60px; } .pdView .videoBn .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:11px; height:24px; font-size:0; } .pdView .videoBn .slick-arrow.slick-prev { left:-5%; background:url(/img/sub/btn_prev.png) no-repeat; } .pdView .videoBn .slick-arrow.slick-next { right:-5%; background:url(/img/sub/btn_next.png) no-repeat; } /*이미지 롤링배너 영역*/ .pdView .imgBn { background:#f7f7f7; padding:100px 0; overflow:hidden; position:relative; } .pdView .imgBn .inner2 { position:relative; } .pdView .imgBn .imgSlider { margin-top:50px; text-align:center; } .pdView .imgBn .imgSlider img { display:block; margin:auto; } .pdView .imgBn .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:11px; height:24px; font-size:0; } .pdView .imgBn .slick-arrow.slick-prev { left:-5%; background:url(/img/sub/btn_prev.png) no-repeat; } .pdView .imgBn .slick-arrow.slick-next { right:-5%; background:url(/img/sub/btn_next.png) no-repeat; } /*이미지+타이틀 롤링배너 영역*/ .pdView .imgTitBn { padding:100px 0; background:#1e1e1e; } .pdView .imgTitBn h3 { margin-top:0; text-align:center; color:#fff; } .pdView .imgTitBn .sliderBox { margin-top:60px; background:#0a0a0a; text-align:center; padding:55px 0; } .pdView .imgTitBn .sliderBox .menu { width:auto; margin:auto; display:inline-block; } .pdView .imgTitBn .sliderBox .menu li { display:inline-block; cursor:pointer; opacity:.5; width:auto; padding:0 25px; margin:0 15px; border-radius:25px; height:48px; line-height:48px; text-align:center; color:#fff; font-size:18px; font-family: 'Nunito Sans', 'Pretendard', sans-serif; } .pdView .imgTitBn .sliderBox .menu li.on { background:#0071e3; opacity:1; } .pdView .imgTitBn .sliderBox .slide { margin-top:40px; color:#fff; } .pdView .imgTitBn .sliderBox .slide .slick-slide img { text-align:center; display:inline-block; } .pdView .imgTitBn .sliderBox .slide dt { margin-top:50px; font-weight:700; font-size:28px; line-height:120%; } .pdView .imgTitBn .sliderBox .slide dd { margin-top:15px; font-weight:300; font-size:18px; line-height:120%; opacity:.7; } /*이미지 링크2개 영역*/ .pdView .linkBox { width:100%; background:#1e1e1e; } .pdView .linkBox .inner2 { padding:150px 0; } .pdView .linkBox h3 { margin-top:0; color:#fff; } .pdView .linkBox ul { margin-top:80px; overflow:hidden; } .pdView .linkBox li { float:left; position:relative; width:49%; } .pdView .linkBox li:last-child { float:right; } .pdView .linkBox li > img { width:100%; } .pdView .linkBox li a { position:absolute; bottom:40px; right:40px; } /*에디터 유형 > 기본테이블 / 기본리스트 */ .pdView .editBox { padding:100px 0; } .pdView .editBox .txt_h3 { margin-top:30px; color:#333; font-size:18px; font-weight:300; line-height:150%; text-align:center; } .pdView .editBox .basic_tbl { margin-top:50px; border-top:1px solid #333; width:100%; } .pdView .editBox .basic_tbl th { border-bottom:1px solid #dfdfdf; background:#f5f5f5; padding:25px 0 25px 45px; color:#111; text-align:left; font-size:18px; line-height:120%; font-weight:700; font-family: 'Nunito Sans', 'Pretendard', sans-serif; } .pdView .editBox .basic_tbl td { border-bottom:1px solid #dfdfdf; padding:25px 0 25px 35px; color:#333; font-size:18px; line-height:120%; text-align:left; } .pdView .editBox .listTbl { margin-top:50px; overflow:hidden; } .pdView .editBox .listTbl table { width:48%; margin:0 1%; float:left; } .pdView .editBox .listTbl th { height:70px; background:#eee; color:#111; font-size:18px; } .pdView .editBox .listTbl td { border-bottom:1px solid #dedede; color:#333; font-size:18px; padding:15px 40px; } .pdView .editBox .listTbl p { padding-left:25px; background:url(/img/sub/icon_check_gray.png) no-repeat left 5px; } .pdView .editBox .listTbl .color th { background:#0071e3; color:#fff; } .pdView .editBox .listTbl .color p { background:url(/img/sub/icon_check_blue.png) no-repeat left 5px; } .pdView .bg-w{position:relative;} .pdView .bg-w::before{content:""; width: 100vw; height: 100%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background-color:#fff; z-index: -1;} .pdView .bg-g{position:relative; } .pdView .bg-g::before{content:""; width: 100vw; height: 100%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background-color:#f4f4f4; z-index: -1;} .pdView .bg-l{position:relative;} .pdView .bg-l::before{content:""; width: 100vw; height: 100%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background-color:#e9f3f9; z-index: -1;} .pdView .bg-b{position:relative;} .pdView .bg-b::before{content:""; width: 100vw; height: 100%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background-color:#222; z-index: -1;} @media (max-width:1670px) { /*이미지 롤링배너 영역*/ .pdView .imgBn .slick-arrow.slick-prev { left:-1.5%; } .pdView .imgBn .slick-arrow.slick-next { right:-1.5%; } } @media (max-width:1200px) { /*제품상세 - 공통*/ .pdView { padding-top:100px; } .pdView .pdInfo { margin:8vw auto; } .pdView .pdInfo .img { width:40vw; height:40vw; } .pdView .pdInfo .img img { max-width:95%; max-height:95%; } .pdView .pdInfo .txtBox { width:60vw; box-sizing:border-box; padding-left:3vw; } .pdView .pdInfo .txtBox dt { margin-bottom:15px; } .pdView .pdInfo .txtBox dt > p { font-size:15px; } .pdView .pdInfo .txtBox dt b { font-size:45px; } .pdView .pdInfo .txtBox dd { font-size:15px; margin-bottom:10px; } .pdView .pdInfo .txtBox .icon { margin-top:35px; } .pdView h3 { font-size:25px; line-height:130%; } /*상단타이틀*/ .pdView .tit_top { margin-top:8vw; } .pdView .tit_top dt { font-size:40px; } .pdView .tit_top dt sup { margin-top:5px; } .pdView .tit_top dd { margin-top:10px; font-size:15px; } /*상단 타이틀 및 이미지 1개 / 3개 / 4개*/ .pdView .basicBox { padding:8vw 0; } .pdView .basicBox .txt_h3 { margin-top:1vw; font-size:14px; } .pdView .basicBox .cont { margin-top:5vw; } /*회색배경 텍스트 및 이미지2 리스트 */ .pdView .basicBox .grayList li { padding:3vw; } .pdView .basicBox .grayList li h3 { line-height:120%; } .pdView .basicBox .grayList div { margin-top:2vw; } .pdView .basicBox .grayList p { margin-top:2vw; font-size:14px; } /*회색배경 제품 목록 4개 리스트*/ .pdView .basicBox .itemList ul { margin-top:2%; } .pdView .basicBox .itemList dl { padding:5vw 2vw; } .pdView .basicBox .itemList dt { font-size:25px; margin-bottom:2vw; } .pdView .basicBox .itemList dd { margin-top:1vw; padding-left:10px; font-size:14px; } /* 좌우 이미지 + 텍스트, 반대방향*/ .pdView .lr_imgBox { padding:8vw 0; } .pdView .lr_imgBox h3 { margin-bottom:5vw; } .pdView .lr_imgBox .box > div { width:40%; } .pdView .lr_imgBox .box dl { width:60%; padding:0 0 0 3%; } .pdView .lr_imgBox .box dt img { height:5vw; min-height:30px; } .pdView .lr_imgBox .box dt span { margin-top:1vw; font-size:25px; line-height:120%; } .pdView .lr_imgBox .box dd { margin-top:1vw; line-height:130%; font-size:14px; } .pdView .lr_imgBox.reverse .box dl { padding:0 3% 0 0; } /*좌우 영상 + 텍스트 , 반대방향*/ .pdView .videoBox { padding:8vw 0; } .pdView .videoBox h3 { margin-bottom:5vw; } .pdView .videoBox .box > div { width:45%; } .pdView .videoBox .box > div iframe { height:300px; } .pdView .videoBox .box dl { width:55%; padding:0 3% 0 0; } .pdView .videoBox .box dt { font-size:25px; line-height:120%; } .pdView .videoBox .box dd { margin-top:1vw; line-height:130%; font-size:14px; } .pdView .videoBox.reverse .box dl { padding:0 0 0 3%; } /*이미지+ 텍스트 상세 폼*/ .pdView .thumbBox { padding:8vw 0; } .pdView .thumbBox .box .left { width:45%; } .pdView .thumbBox .box .right { width:55%; padding:0 0 0 3%; } .pdView .thumbBox .box .right dt { font-size:25px; line-height:120%; } .pdView .thumbBox .box .right dd { margin-top:1vw; line-height:130%; font-size:14px; } .pdView .thumbBox .box .right img { margin-top:3vw; } .pdView .thumbBox .box .right .btn_common a { margin-top:3vw; } /*배경색 그레이/흰색 선택 이미지 텍스트, 반대방향 */ .pdView .lr_bgBox { padding:8vw 2%; } .pdView .lr_bgBox dt img { margin-bottom:1vw; height:5vw; min-height:30px; } .pdView .lr_bgBox dt span { font-size:25px; } .pdView .lr_bgBox dd { margin-top:1vw; line-height:130%; font-size:14px; } .pdView .lr_bgBox .leftImg dl { padding-left:3%; } .pdView .lr_bgBox .rightImg dl { padding-right:3%; } /*동영상 롤링배너 영역*/ .pdView .videoBn .inner2 { padding:5vw 0; } .pdView .videoBn .videoSlider { margin-top:2vw; } .pdView .videoBn .videoSlider .item { text-align:center; } .pdView .videoBn iframe { height:50vw; width:90%; } .pdView .videoBn .slick-arrow.slick-prev { left:0; } .pdView .videoBn .slick-arrow.slick-next { right:0; } /*이미지 롤링배너 영역*/ .pdView .imgBn { padding:8vw 0; } .pdView .imgBn .imgSlider { margin:4vw auto 0; width:95%; } .pdView .imgBn .imgSlider img { display:block; margin:auto; } .pdView .imgBn .slick-arrow.slick-prev { left:-3.5%; } .pdView .imgBn .slick-arrow.slick-next { right:-3.5%; } /*이미지+타이틀 롤링배너 영역*/ .pdView .imgTitBn { padding:8vw 0; } .pdView .imgTitBn .sliderBox { margin-top:5vw; padding:5vw 0; } .pdView .imgTitBn .sliderBox .menu li { padding:0 15px; margin:0 5px; border-radius:25px; height:35px; line-height:35px; font-size:14px; } .pdView .imgTitBn .sliderBox .slide { margin-top:3vw; } .pdView .imgTitBn .sliderBox .slide .slick-slide img { max-width:80%; } .pdView .imgTitBn .sliderBox .slide dt { margin-top:3vw; font-size:20px; } .pdView .imgTitBn .sliderBox .slide dd { margin-top:1vw; font-size:14px; } /*이미지 링크2개 영역*/ .pdView .linkBox .inner2 { padding:8vw 0; } .pdView .linkBox ul { margin-top:2vw; } .pdView .linkBox li a { bottom:2vw; right:2vw; width:20%; } /*에디터 유형 > 기본테이블 / 기본리스트 */ .pdView .editBox { padding:8vw 0; } .pdView .editBox .txt_h3 { margin-top:1vw; font-size:14px; } .pdView .editBox .basic_tbl { margin-top:3vw; } .pdView .editBox .basic_tbl th { padding:15px; font-size:14px; } .pdView .editBox .basic_tbl td { padding:15px; font-size:14px; } .pdView .editBox .listTbl { margin-top:3vw; } .pdView .editBox .listTbl table { width:100%; margin:0 0 20px; float:none; } .pdView .editBox .listTbl th { height:auto; padding:15px; font-size:14px; } .pdView .editBox .listTbl td { font-size:14px; padding:15px; } .pdView .editBox .listTbl p { padding-left:20px; } } @media (max-width:650px) { /*제품상세 - 공통*/ .pdView { padding-top:70px; } .pdView .pdInfo { display:block; box-sizing:border-box; } .pdView .pdInfo .img { width:100%; height:50vw; float:none; } .pdView .pdInfo .txtBox { display:block; margin-top:5vw; width:100%; padding-left:0; } .pdView .pdInfo .txtBox dt { margin-bottom:10px; } .pdView .pdInfo .txtBox dt > p { font-size:12px; } .pdView .pdInfo .txtBox dt b { font-size:35px; } .pdView .pdInfo .txtBox dd { font-size:14px; margin-bottom:5px; line-height:120%; } .pdView.pd3 .pdInfo .txtBox dt{margin-bottom:10px;} .pdView.pd3 .pdInfo .txtBox dl dd{font-size:16px;} .pdView .pdInfo .txtBox .icon { margin-top:5vw; } /* .pdView .pdInfo .txtBox .icon li { max-width:20%; } */ .pdView h3 { font-size:18px; } /*상단 타이틀*/ .pdView .tit_top { margin-top:8vw; } .pdView .tit_top dt { font-size:30px; } .pdView .tit_top dt sup { margin-top:2px; } .pdView .tit_top dd { margin-top:1vw; font-size:12px; } /*상단 타이틀 및 이미지 1개 / 3개 / 4개*/ .pdView .basicBox .txt_h3 { font-size:12px; } /*회색배경 텍스트 및 이미지2 리스트 */ .pdView .basicBox .grayList li h3 { font-size:18px; } .pdView .basicBox .grayList p { font-size:12px; } /*회색배경 제품 목록 4개 리스트*/ .pdView .basicBox .itemList dt { font-size:18px; } .pdView .basicBox .itemList dd { font-size:12px; } /* 좌우 이미지 + 텍스트, 반대방향*/ .pdView .lr_imgBox .box dt span { font-size:18px; } .pdView .lr_imgBox .box dd { font-size:12px; } /*좌우 영상 + 텍스트 , 반대방향*/ .pdView .videoBox .box dt { font-size:18px; } .pdView .videoBox .box dd { font-size:12px; } .pdView .videoBox .box > div iframe { height:150px; } /*이미지+ 텍스트 상세 폼*/ .pdView .thumbBox .box .right dt { font-size:25px; margin-bottom:20px;} .pdView .thumbBox .box .right dd { font-size:17px; } /*배경색 그레이/흰색 선택 이미지 텍스트, 반대방향 */ .pdView .lr_bgBox dt span { font-size:18px; } .pdView .lr_bgBox dd { font-size:12px; } /*이미지+타이틀 롤링배너 영역*/ .pdView .imgTitBn .sliderBox .menu li { padding:0 10px; border-radius:10px; height:20px; line-height:20px; font-size:12px; } .pdView .imgTitBn .sliderBox .slide dt { font-size:15px; } .pdView .imgTitBn .sliderBox .slide dd { font-size:12px; } /*에디터 유형 > 기본테이블 / 기본리스트 */ .pdView .editBox .txt_h3 { font-size:12px; } .pdView .editBox .basic_tbl { width:100%; } .pdView .editBox .basic_tbl colgroup { display:none !important; } .pdView .editBox .basic_tbl th { display:block; width:100%; padding:10px; font-size:12px; } .pdView .editBox .basic_tbl td { display:block; width:100%; padding:10px; font-size:12px; } .pdView .editBox .listTbl th { padding:10px; font-size:12px; } .pdView .editBox .listTbl td { padding:10px; font-size:12px; } .pdView .editBox .listTbl p { background-position:left 3px !important; } } /*******************************************************************************************************************************************************/ /*뉴스&투자정보*/ .newsCon > article:not(.formBox) { padding:180px 0; } .newsCon > article.investBox { padding-top:90px;} .newsCon .tit { overflow:hidden; } .newsCon .tit h3 { color:#111; font-size:45px; line-height:120%; font-family: 'Nunito Sans'; font-weight:700; float:left; } .newsCon .tit .btn { float:right; } .newsCon .tit .btn li { float:left; cursor:pointer; margin-left:8px; width:58px; height:58px; border:1px solid #d1d1d1; border-radius:50%; box-sizing:border-box; text-align:center; line-height:56px; font-size:16px; color:#333; } .newsCon .tit .btn li:hover { background:#0071e3; border-color:#0071e3; color:#fff; } .newsCon .tit .rightS { float:right; } .newsCon .tit form { float:left; margin-top:10px; } .newsCon .tit select { float:left; display:block; font-size:15px; width:60px; height:40px; margin-right:20px; border:none; background:url(/img/main/bullet_arrow2.png) no-repeat 95% center; } .newsCon .tit .rightS input { float:left; display:block; /* width:190px; */ width:210px; height:40px; border:none; color:#8c8c8c; font-size:18px; } .newsCon .tit .rightS input::placeholder, .newsCon .tit .rightS input::-webkit-input-placeholder, .newsCon .tit .rightS input:-ms-input-placeholder, .newsCon .tit .rightS input:-mos-input-placeholder { color:#8c8c8c; } .newsCon .tit .rightS button { float:right; display:block; width:20px; height:20px; overflow:hidden; position:relative; margin:10px; } .newsCon .tit .rightS button img { position:absolute; top:-20px; left:0; } .newsCon .btn_common a { margin:40px auto 0; } .newsCon .tit form + .btn { margin-left:50px; } /*video*/ .vsBox { background:#f5f5f5; overflow:hidden; } .vsBn { margin-top:45px; width:calc(100% + 750px); } .vsBn .item { margin-right:40px; } .vsBn .item .img { width:1042px; /* height:598px; */ height:581px; position:relative; overflow:hidden; } .vsBn .item .img:before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/img/sub/icon_youtube.png) no-repeat center; z-index:10; } .vsBn .item .img img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-height:100%; min-width:100%; } .vsBn .item dl { /* margin-top:50px; */ margin-top:15px; } .vsBn .item dt { font-size:25px; color:#111; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;} .vsBn .item dd.txt { margin-top:15px; color:#111; font-size:18px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; } .vsBn .item dd.tag { /* margin-top:45px; */ margin-top:20px; color:#064a9b; font-size:14px; } /*NEWS*/ .boardBn { margin-top:40px; overflow:hidden; width:100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; } .boardBn .item { float:left; /* width:23.5%; margin:0 2% 4% 0; */} .boardBn .item:nth-child(4n) { margin-right:0; } .boardBn .item .img { width:100%; /*height:15vw;*/ height:258px; overflow:hidden; position:relative; } .boardBn .item .img img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-height:258px; min-width:100%; } .boardBn .item dl { margin-top:30px; } .boardBn .item dt { font-weight:700; color:#111; font-size:25px; overflow:hidden; text-overflow: ellipsis; line-height:120%; } .boardBn .item .date { color:#969696; font-size:14px; } .boardBn .item .txt { color:#333; line-height:150%; height:50px; color:#333; font-size:18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .exBn .item dt { white-space: nowrap; } .exBn .item .date { margin-top:15px; } .exBn .item .txt { margin-top:30px; } .nsBn .item dt { height:60px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nsBn .item .txt { margin-top:20px; } .nsBn .item .date { margin-top:35px; } /*투자정보*/ .newsCon .ifBox { margin-top:60px; width:100%; } .newsCon .ifBox ul { overflow:hidden; } .newsCon .ifBox li { float:left; width:25%; height:75px; text-align:center; border:1px solid #d6d6d6; } .newsCon .ifBox li:not(:first-child) { border-left:none; } .newsCon .ifBox li a { display:table; width:100%; height:100%; } .newsCon .ifBox li a span { display:table-cell; vertical-align:middle; color:#333; font-size:18px; } .newsCon .ifBox li.on { background:#064a9b; } .newsCon .ifBox li.on a span { display:table-cell; vertical-align:middle; color:#fff; } .newsCon .ifCon { margin-top:85px; } /*popup*/ .popupWrap { position:fixed; top:0; left:0; width:100%; height:100%; z-index:20; display:none; } .popupWrap > i { display:block; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:18; } .popupWrap > div { max-width:1020px; width:90%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .popupWrap > div > article { width:995px; float:left; overflow:hidden; background:#fff; padding:40px; } .popupWrap dt { font-weight:700; color:#111; font-size:30px; text-align:center; margin-bottom:20px; } .popupWrap dd { margin-top:10px; /* font-size:14px; */ font-size:16px; overflow:hidden; } .popupWrap dd p { float:left; width:90px; color:#111; font-size:18px; } .popupWrap dd div { float:left; width:calc(100% - 90px); color:#333; font-size:18px; } .popupWrap .cont { margin-top:20px; } .popupBn { width:100%; } .popupBn .item { width:100%; height:500px; position:relative; } .popupBn .item img { min-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .popupWrap .slick-arrow { position:absolute; top:50%; transform:translateY(-50%); width:11px; height:24px; z-index:5; font-size:0; } .popupWrap .slick-prev { left:-25px; background:url(/img/sub/btn_prev_pop.png) no-repeat; } .popupWrap .slick-next { right:-25px; background:url(/img/sub/btn_next_pop.png) no-repeat; } .popupWrap button.close { float:right; width:25px; height:25px; background:#fff url(/img/sub/icon_close.png) no-repeat center; font-size:0; } /*게시판 상세*/ .viewCon { padding: 150px 0; } .viewCon h3 { text-align:center; color:#111; font-size:45px; line-height:120%; font-family: 'Nunito Sans'; font-weight:700; } .board_default { margin-top:50px; } .board_default .tit { border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; background:#f8f8f8; padding:40px 10px; text-align:center; } .board_default .tit dt { color:#111; font-size:22px; line-height:120%; font-weight:700; } .board_default .tit dd { margin-top:25px; color:#777; /* font-size:14px; */ font-size:16px; } .board_default .tit dd i { display:inline-block; font-style:normal; color:#d6d6d6; margin:0 15px; } .board_default .content { padding:50px 0; } .board_default .boardTbl { border-top:1px solid #ddd; } .board_default .boardTbl th { color:#666; font-size:16px; padding:20px; border-bottom:1px solid #e2e2e2; width:120px; font-weight:400; } .board_default .boardTbl td { color:#d2d2d2; padding:20px; border-bottom:1px solid #e2e2e2; font-size:15px; } .board_default .boardTbl td a { display:inline-block; width:90%; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; color:#d2d2d2; margin-top:5px; } .board_default .boardTbl td a:hover { color:#111; } .board_default .btn { margin:30px auto 80px; max-width:190px; display:table; width:100%; height:70px; background:#064a9b; color:#fff; } .board_default .btn span { display:table-cell; vertical-align:middle; font-size:15px; text-align:center; font-weight:500; } @media (max-width:1400px) { .boardBn { margin-top:3vw; grid-template-columns: repeat(3, 1fr);} } @media (max-width:1200px) { /*뉴스&투자정보*/ .newsCon > article:not(.formBox) { padding:10vw 0; } .newsCon > article.investBox { padding-top:5vw;} .newsCon .tit h3 { font-size:40px; } .newsCon .btn_common a { margin:3vw auto 0; } .newsCon .tit form + .btn { margin-left:20px; } /*video*/ .vsBn { margin-top:3vw; width:100%; } .vsBn .item { margin-right:0; } .vsBn .item .img { width:100%; height:50vw; } .vsBn .item dl { margin-top:3vw; } .vsBn .item dt { font-size:20px; } .vsBn .item dd.txt { margin-top:2vw; font-size:14px; } .vsBn .item dd.tag { margin-top:5vw; font-size:12px; } /*NEWS*/ .boardBn { margin-top:3vw; } .boardBn .item .img { height:20vw; } .boardBn .item .img img { min-height:100%; } .boardBn .item dl { margin-top:3vw; } .boardBn .item dt { font-size:18px; } .boardBn .item .date { font-size:12px; } .boardBn .item .txt { height:45px; font-size:14px; } .exBn .item .date { margin-top:1vw; } .exBn .item .txt { margin-top:2vw; } .nsBn .item dt { height:43px; } .nsBn .item .txt { margin-top:2vw; } .nsBn .item .date { margin-top:1vw; } /*투자정보*/ .newsCon .ifBox { margin-top:3vw; } .newsCon .ifBox li { height:60px; } .newsCon .ifBox li a span { font-size:15px; } .newsCon .ifCon { margin-top:3vw; } /*popup*/ .popupWrap > div { width:95%; } .popupWrap > div > article { width:100%; float:none; box-sizing:border-box; padding:20px; } .popupWrap dt { font-size:25px; margin-bottom:3vw; } .popupWrap dd { margin-top:1vw; } .popupWrap dd p { width:60px; font-size:14px; } .popupWrap dd div { width:calc(100% - 60px); font-size:14px; } .popupWrap .cont { margin-top:3vw; } .popupBn .item { height:50vw; } .popupWrap .slick-prev { left:-15px; } .popupWrap .slick-next { right:-15px; } .popupWrap .cont iframe { height:50vw; } /*게시판 상세*/ .viewCon { padding: 10vw 0; } .viewCon h3 { font-size:40px; } .board_default { margin-top:3vw; } .board_default .tit { padding:3vw 2vw; } .board_default .tit dt { font-size:20px; } .board_default .tit dd { margin-top:3vw; font-size:14px; } .board_default .tit dd i { margin:0 10px; } .board_default .boardTbl { border-top:1px solid #ddd; } .board_default .boardTbl th { font-size:14px; padding:10px; width:80px; } .board_default .boardTbl td { padding:10px; font-size:14px; } .board_default .boardTbl td a { margin-top:6px; } .board_default .btn { margin:5vw auto 0; max-width:120px; height:50px; } .board_default .btn span { font-size:14px; } } @media (max-width:860px) { .boardBn { margin-top:3vw; grid-template-columns: repeat(3, 1fr);} } @media (max-width:650px) { /*뉴스&투자정보*/ .newsCon .tit h3 { font-size:30px; overflow:hidden; } .newsCon .tit .btn li { margin-left:5px; width:42px; height:42px; line-height:41px; font-size:14px; } .newsCon .tit .rightS.search { width:100%; } .newsCon .tit form { float:none; margin-top:8vw; width:100%; overflow:hidden; } .newsCon .tit select { font-size:14px; width:60px; margin-right:10px; } .newsCon .tit .rightS input { width:calc(100% - 110px); font-size:14px; } /*video*/ .vsBn .item dt { font-size:18px; } .vsBn .item dd.tag { font-size:11px; } /*NEWS*/ .boardBn{display:flex; flex-wrap:wrap; gap:0} .boardBn .item { width:calc(50% - 10px); margin-right: 20px; margin-bottom:40px;} .boardBn .item:nth-of-type(2n) { margin-right:0; } .boardBn .item .img { height:auto; padding-bottom:53%; } .boardBn .item .img img{min-height: auto; min-width: auto; max-width: inherit; height: 100%;} .boardBn .item dt { font-size:15px; } .boardBn .item .date { font-size:11px; } .boardBn .item .txt { height:38px; font-size:14px;line-height:130%; } .nsBn .item dt { height:37px; } /*투자정보*/ .newsCon .ifBox li { height:46px; } .newsCon .ifBox li a span { font-size:14px; } /*popup*/ .popupWrap dt { font-size:20px; } /*게시판 상세*/ .viewCon h3 { font-size:30px; } .board_default { margin-top:3vw; } .board_default .tit dt { font-size:18px; } .board_default .tit dd { font-size:11px; } .board_default .tit dd i { margin:0 10px; } .board_default .boardTbl th { padding:5px; width:50px; } .board_default .boardTbl td { padding:5px; } } @media (max-width:480px) { .boardBn .item { width:100%; margin-right: 0; margin-bottom:40px;} } /*******************************************************************************************************************************************************/ /*고객문의 / 회원가입 */ .inqCon > div { margin:175px auto 200px; } .inqCon h3 { color:#111; font-size:45px; line-height:120%; font-weight:700; text-align:center; } .inqCon form { margin-top:90px; } .inqCon .txt { text-align:right; color:#111; font-size:14px; margin-bottom:5px; } .inqCon .txt i { color:#064a9b; font-style:normal; } .inqCon table { border-top:1px solid #333; width:100%; } .inqCon th { border-bottom:1px solid #dfdfdf; background:#f5f5f5; font-size:18px; color:#111; font-weight:700; padding:25px 0 25px 25px; text-align:left; } .inqCon th i { color:#064a9b; font-style:normal; } .inqCon td { border-bottom:1px solid #dfdfdf; padding:15px 20px; font-size:18px; color:#333; } .inqCon td span { margin:0 5px; } .inqCon select { height:45px; box-sizing:border-box; padding:5px; font-size:18px; border:1px solid transparent; background:url(/img/main/bullet_arrow2.png) no-repeat 98% center; } .inqCon textarea { width:100%; height:170px; border:1px solid #e6e6e6; box-sizing:border-box; /* padding:5px; */ padding:25px; font-size:18px; } .inqCon input { height:45px; box-sizing:border-box; padding:5px; font-size:18px; border:1px solid transparent; } .inqCon input.wid100, .inqCon select.wid100 { width:100%; } .inqCon input.tel { width:10%; min-width:50px; } .inqCon select.tel { width:5%; min-width:45px; } .inqCon input.mail1 { width:15%; min-width:80px; } .inqCon input.mail2 { width:35%; min-width:160px;} .prvBox { height:150px; overflow-y:scroll; border:1px solid #e6e6e6; padding:15px; } .prvBox dt { margin-top:10px; } .prvBox dd { position:relative; padding-left:10px; font-size:14px; } .prvBox dd:before { content:"-"; position:absolute; top:0; left:0; } .inqCon .btn { margin-top:40px; text-align:center; } .inqCon .btn p { display:inline-block; vertical-align:middle; color:#333; font-size:18px; font-weight:400; margin:10px 50px 10px 0; } .inqCon .btn p label { position:relative; display:inline-block; cursor:pointer; } .inqCon .btn p label input { position:absolute; top:0; left:0; z-index:-5; visibility:hidden; } .inqCon .btn p label span { display:inline-block; width:13px; height:13px; border-radius:50%; box-sizing:border-box; border:1px solid #d7d7d7; position:relative; margin-right:3px; } .inqCon .btn p label span:before { content:""; display:none; width:5px; height:5px; border-radius:50%; background:#064a9b; position:absolute; top:3px; left:3px; } .inqCon .btn p label input:checked + span:before { display:block; } .inqCon .btn button { display:inline-block; vertical-align:middle; width:180px; height:60px; background:#064a9b; color:#fff; font-weight:700; font-size:18px; font-family: 'Nunito Sans'; } /* 로그인 */ .loginCon { padding:200px 0; } .loginCon form { text-align:Center; } .loginBox { display:inline-block; vertical-align:top; width:500px; min-height:470px; box-shadow:0 0 15px rgba(0,0,0,.2); overflow:hidden; margin:auto; text-align:center; box-sizing:border-box; padding:65px 60px; margin:0 20px; } .loginBox h3 { height:29px; overflow:hidden; } .loginBox h3 img { margin-top:-29px; } .loginBox h3.tit { height:auto; font-weight:700; color:#111; font-size:35px; } .loginBox .inputTxt { margin-top:60px; } .loginBox .inputTxt li:not(:first-child) { margin-top:10px; } .loginBox .inputTxt li input { border:1px solid #ccc; border-radius:3px; height:49px; width:100%; text-indent:10px; font-size:16px; color:#999; } .loginBox .inputTxt li button { width:100%; height:50px; background:#064a9b; border-radius:3px; color:#fff; font-family: 'Nunito Sans'; font-size:20px; } .loginBox .link { margin-top:20px; } .loginBox .link li { display:inline-block; vertical-align:top; font-size:15px; color:#666; } .loginBox .link li:not(:first-child):before { content:"|"; display:inline-block; vertical-align:top; margin:0 8px; } .loginBox .alert { margin-top:20px; text-align:left; font-size:14px; color:#666; position:relative; padding-left:10px; } .loginBox .alert:before { content:"-"; position:absolute; top:0; left:0; } @media (max-width:1200px) { /*고객문의 / 회원가입 */ .inqCon > div { margin:10vw auto; } .inqCon h3 { font-size:35px; } .inqCon form { margin-top:5vw; } .inqCon .txt {font-size:14px; } .inqCon th { font-size:18px; padding:2vw 0 2vw 2vw; width:20%; box-sizing:border-box; } .inqCon td { padding:1.5vw 2vw; font-size:18px; width:30%; } .inqCon select { height:45px; padding:5px; font-size:18px; } .inqCon textarea { height:170px; padding:5px; font-size:18px; } .inqCon input { height:45px;padding:5px; font-size:18px; } .inqCon .btn { margin-top:5vw; } .inqCon .btn p { font-size:18px; margin-right:3vw; } .inqCon .btn button { width:180px; height:60px; font-size:18px; } /* 로그인 */ .loginCon { padding:20vw 0; } .loginBox { max-width:500px; width:90%; min-height:auto; padding:8vw 5vw; margin:0 auto; } .loginBox .inputTxt { margin-top:5vw; } } @media (max-width:650px) { /*고객문의 / 회원가입 */ .inqCon h3 { font-size:25px; } .inqCon .txt {font-size:11px; } .inqCon colgroup { display:none; } .inqCon th { font-size:14px; padding:2vw 0 2vw 2vw; /*width:30%;*/ width:100%; display:block; } .inqCon td { padding:1.5vw 2vw; font-size:14px; /* width:70%; */ width:100%; display:block; } .inqCon textarea { height:120px; } .inqCon select, .inqCon textarea , .inqCon input { font-size:14px; } .inqCon .btn { margin-top:5vw; } .inqCon .btn p { margin-right:3vw; } /* 로그인 */ .loginCon { padding:30vw 0; } .loginBox h3.tit { font-size:30px; } } @media (max-width:400px) { /*고객문의 / 회원가입 */ .inqCon h3 { font-size:7vw; } .inqCon colgroup { display:none; } .inqCon th { width:100%; display:block; } .inqCon td { width:100%; display:block; } .inqCon .btn p { font-size:14px; margin-right:0; overflow:hidden; } .inqCon .btn button { display:block; margin:3vw auto 0; width:110px; height:40px; font-size:14px; } } /*******************************************************************************************************************************************************/ /* 다운로드 */ .downCon > .inner2 { padding-bottom:180px; overflow:hidden; } .downCon h3 { margin-top:180px; color:#111; font-size:45px; font-weight:700; line-height:120%; text-transform:uppercase; } .downCon .list { margin-top:50px; border-top:1px solid #333; } .downCon .list li { display:table; width:100%; padding:30px; border-bottom:1px solid #e2e2e2; } .downCon .list li p { display:table-cell; vertical-align:middle; color:#333; font-size:18px; font-weight:300; width:70%; } .downCon .list li a { display:inline-block; float:right; width:115px; height:48px; line-height:48px; color:#333; font-size:14px; font-family: 'Nunito Sans'; text-indent:18px; background:#e5e5e5 url(/img/sub/icon_download.png) no-repeat 85% center; border-radius:23px; } @media (max-width:1200px) { /* 다운로드 */ .downCon > .inner2 { padding-bottom:10vw; } .downCon h3 { margin-top:10vw; font-size:35px; } .downCon .list { margin-top:3vw; } .downCon .list li { padding:2vw; } .downCon .list li p { font-size:15px; } .downCon .list li a { width:115px; height:35px; line-height:35px; font-size:14px; text-indent:18px; background:#e5e5e5 url(/img/sub/icon_download.png) no-repeat 85% center; border-radius:23px; } } @media (max-width:650px) { /* 다운로드 */ .downCon > .inner2 { padding-bottom:10vw; } .downCon h3 { margin-top:10vw; font-size:7vw; } .downCon .list li { padding:4vw 1vw; } .downCon .list li p { font-size:14px; } .downCon .list li a { width:90px; height:25px; line-height:25px; font-size:11px; text-indent:10px; border-radius:15px; } } /*******************************************************************************************************************************************************/ .pdView .basicBox.basictxt h4 { width:50%; margin-left: auto; margin-right: auto;} .pdView.pd3 .pdInfo .txtBox {padding-top:100px;} .pdView.pd3 .pdInfo .txtBox dt > p { font-size: 20px; width: 90%; word-break: break-word; padding-bottom:15px;} .pdView.pd3 .pdInfo .txtBox dt b {font-family: 'Roboto', sans-serif;} .pdView.pd3 .pdInfo .txtBox dl dd { /* width: 500px; */ width: 90%; font-weight: 400; font-size:2.2rem; line-height: 1.58; letter-spacing: -.3px; } .pdView.pd3 .pdInfo .txtBox dl { width: 100%; } /* common */ @media (max-width:1024px) { .pdView .basicBox.basictxt h3 { font-size:3.0rem; } .pdView .basicBox.basictxt h4 { width: 100%; margin-left: auto; margin-right: auto; } } /*pd3*/ .pdView.pd3 .pdInfo .txtBox dt { margin-bottom:40px; } @media (max-width:1400px) { .pdView .pdInfo .txtBox dt b { font-size: 5.2rem } } @media (max-width:1024px) { .pdView.pd3 .pdInfo { display: block; } .pdView.pd3 .pdInfo .img { width: 100%; } .pdView.pd3 .pdInfo .txtBox { padding-top: 20px; } } @media (max-width:650px) { .pdView.pd3 .pdInfo .txtBox dt > p { width:100%; font-size: 1.5rem; } } @media (max-width:580px) { .pdView.pd3 .basicBox .itemList dl { padding: 8vw 1vw; } } /* 수정 221123 ------------------------------------------------------ */ .inqCon h3.mod{text-align: left; color: #666;} .leadBox .tit .btn li{font-size:20px;} .hisCon {overflow: hidden;} .hisCon .list ul{font-size:18px;} .hisCon .list li:before{top: 10px; background: #064b99;} .pdView .basicBox{overflow: visible;} .pdView .pdInfo .txtBox .icon li p{font-size:15px;} .pdView *{word-break:keep-all} .hisCon article h3{color: #064b99;} .hisCon .top{height: 100vh; text-align: center;} .hisCon .top h2{font-size:104px; line-height: 100vh; color: #111; font-weight:bold; animation:fadeUp 1s 0.2s both} .hisCon .tit{height: auto; padding: 36vh 0;} .hisCon .tit dt{font-size:70px;} .hisCon .tit dt span{display:inline-block; vertical-align: top; opacity: 0;} .hisCon .tit dt span{transform:translateX(-100vw);} .hisCon .tit dt span:last-of-type{transform:translateX(100vw);} .hisCon .tit dd{transform:translateY(50vh); opacity: 0;} /* .formBox .formDefault .link button span{background: transparent;} */ @keyframes fadeUp{ 0%{transform:translateY(120px); opacity: 0;} 100%{transform:translateY(0); opacity: 1;} } @media (max-width:1700px) { .pdView .videoBn .slick-arrow.slick-prev{left: -22px; z-index: 10;} .pdView .videoBn .slick-arrow.slick-next{right: -22px; z-index: 10;} .hisCon .tit dt{font-size:50px;} } @media (max-width:1400px) { .pdView .pdInfo .img{width: 50%; height: auto;} .pdView .pdInfo .txtBox{width: 50%;} .pdView .basicBox .itemList dd br{display:none; } .pdView .lr_bgBox dd br{display:none; } } @media (max-width:1200px) { .pdView{overflow: hidden;} .pdView .pdInfo .txtBox{padding-left: 0;} .pdView .pdInfo .txtBox dd{font-size:16px;} .pdView .lr_imgBox .box dd{font-size:18px;} .pdView .editBox .basic_tbl th, .pdView .editBox .basic_tbl td{font-size:18px;} .pdView h3{font-size:30px;} .pdView .editBox .txt_h3{font-size:16px;} .pdView .editBox .listTbl th{font-size:16px;} .pdView .editBox .listTbl td{font-size:16px;} .pdView .basicBox .itemList dd{font-size:16px;} .pdView .lr_bgBox dd{font-size:18px;} .pdView .lr_bgBox dt span{font-size:23px;} .pdView.pd3 .pdInfo .txtBox dl dd{width: 100%;} .hisCon .top h2{font-size:10vw} .hisCon .tit{padding: 28vw 0;} .hisCon .tit dt{font-size:4.5vw; } } @media (max-width:1000px) { .pdView .pdInfo{flex-wrap:wrap; gap:0} .pdView .pdInfo .img{width: 100%; padding-bottom:45%; max-width: none;} .pdView .pdInfo .txtBox{width: 100%; max-width: none; margin-top: 20px;} .pdView .lr_imgBox{padding: 4vw 0;} .pdView .lr_imgBox .box{display:flex; flex-wrap:wrap} .pdView .lr_imgBox .box > div{width: 100%; max-width: none; order:-1} .pdView .lr_imgBox .box dl{width: 100%; padding: 0;} .pdView .lr_imgBox.reverse .box dl{text-align: right; padding: 0;} .pdView .basicBox .cont.flexbox{grid-template-columns:repeat(2, 1fr)} .pdView .basicBox .itemList ul{flex-wrap:wrap;} .pdView .basicBox .itemList li{width: 100%; max-width: none; margin-bottom:20px;} .pdView .basicBox .itemList li:last-of-type{margin-bottom:0;} .pdView .basicBox .itemList li:first-child img{position:static; } .pdView .basicBox .itemList li > div{display:flex;} .pdView .basicBox .itemList dl{width: 50%;} .pdView .basicBox .itemList li > div > img{width: 50%;} .pdView .lr_bgBox > div{display:flex; flex-wrap:wrap} .pdView .lr_bgBox > div > p{width: 100%; display:block; order:-2} .pdView .lr_bgBox .leftImg dl{padding: 0; width: 100%; margin-top: 20px;} .pdView .lr_bgBox .rightImg dl{padding: 0; width: 100%; margin-top: 20px;} } @media (max-width: 800px){ .pdView .editBox .basic_tbl { width:100%; } .pdView .editBox .basic_tbl colgroup { display:none !important; } .pdView .editBox .basic_tbl th { display:block; width:100%; padding:10px; } .pdView .editBox .basic_tbl td { display:block; width:100%; padding:10px;} .hisCon .tit dt{font-size:5vw; } } @media (max-width: 650px){ .pdView .basicBox .cont.flexbox{grid-template-columns:repeat(1, 1fr)} .pdView .basicBox .itemList li > div{flex-wrap:wrap;} .pdView .basicBox .itemList dl{width: 100%; order:3} .pdView .basicBox .itemList li > div > img{width: auto; height: auto;} .pdView .lr_imgBox .box dt span, .pdView .basicBox .itemList dt{font-size:20px;} } /*제무제표*/ .fnCon > article { float: left; width: 49%; margin-left: 2%; } .fnCon > article:first-child { margin-left: 0; } .fnCon .tit { overflow: hidden; } .fnCon .tit h3 { float: left; color: #222; font-size:22px; font-weight: 700; line-height: 100%; } .fnCon .tit p { float: right; color: #777; font-size:15px; font-weight: 300; margin-top: 3px; } .fnCon table { margin-top: 20px; } .fnCon th { height: 55px; font-weight: 500; } .fnCon td { font-weight: 300; height: 50px; } .fnCon tr.height td { height: 101px; } .fnCon th:first-child, .fnCon td:first-child { border-left:0; } .fnCon td:first-child { color: #333; } .fnCon tr.total td { color: #333; background: #f9f9f9; } .tbl1 { border-top:1px solid #000; font-size:15px; text-align: center; } .tbl1 th { border-bottom:1px solid #d7d7d7; border-left:1px solid #d7d7d7; color: #040934; background: #f7f7f8; } .tbl1 td { border-bottom:1px solid #d7d7d7; border-left:1px solid #d7d7d7; } .tbl1 th:first-child, .tbl1 td:first-child { border-left:none; } /* 1129수정 */ .subVs .textBox h2 span b br.br{display:none; } .pdView .basicBox .grayList h3{font-size:35px;} .pdView .pdInfo .txtBox dt b{font-size:50px;} .pdView .videoWideBox iframe {/* width: 100%; height:50vw; */ width: 80%; height:43vw; } .pdView .lr_imgBox .box > div img{width: 100%;} /* .sliderLd .item{margin-right: 40px;} .sliderLd .item:last-of-type{margin-right: 0;} .sliderLd .item > div{width: 100%;} */ .sliderLd .item > div{margin: 0 auto;} .sliderLd .itemBox{width: auto;} .pdView.pd3 .pdInfo .txtBox dt b{font-family: 'Noto Sans'; font-weight: bold;} .pdlistCon h3{text-align: left; font-family: 'Noto Sans', 'Nunito Sans'; border-bottom: 1px solid #ddd; padding-bottom:20px;} /* 뉴스게시판 */ .fnCon{display:flex;} .fnCon .tit{display:flex; justify-content:space-between;} .fnCon .tit h4{font-size:20px; color: #000; font-weight:700;} .fnCon > article{float: none;} .board_default .content{font-size:16px; word-break: break-all; font-family: 'Noto Sans' sans-serif !important;} @media (max-width: 1000px){ .fnCon{flex-wrap:wrap;} .fnCon > article{width: 100%; margin-right: 0; margin-bottom:40px;} .fnCon > article:last-of-type{margin-bottom:0;} } @media (max-width: 650px){ .sliderLd .itemBox{width: 100%;} .sliderLd .item > div{width: 100%;} .sliderLd .item p{right: 0;} .sliderLd .item dt{font-size:24px;} .sliderLd .item dd{font-size:18px;} .pdMenu > li .menu{display:block; } .pdMenu > li h2{text-align: center;} .boardBn .item dt{font-size:18px; height: 45px;} .boardBn .item .txt{font-size:16px;} .boardBn .item .date{font-size:14px;} .pdlistCon .list li a{height: auto;} .pdlistCon .list li a p{position: relative;overflow: hidden; padding-bottom:66%;} .pdlistCon .list li a p img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); max-width: inherit; height: 100%;} } @media (max-width: 500px){ #subCpn2{height: 100vh;} .subCpn .inner2 dd{font-size:16px;} .subCpn .inner2 dd br{display:none; } .subCpn .inner2 dd br.br{display:block; } .vcBox .vcList{padding: 13vw 0;} .vcBox ul li{width: 100%; margin-bottom:20px;} .vcBox ul li:last-of-type{margin-bottom:0;} .vcBox ul li dt{font-size:18px;} .vcBox ul li dd{font-size:16px;} .subVs .textBox h2 span b br.br{display:block; } .pdView .pdInfo .txtBox dt b{font-size:34px;} .pdView h3, .pdView .basicBox.basictxt h3{font-size:25px;} .pdView .basicBox p{font-size:17px;} .pdView .basicBox h4{font-size:20px;} .pdView .basicBox.basictxt h4{font-size:20px; margin-top: 10px;} .pdView .pdInfo .img{padding-bottom:63%;} .pdView .thumbBox .box{display:block; } .pdView .thumbBox .box .left{display:block; width: 100%; padding-left: 0;} } /* 수정 230609 */ #subVisual.community .subTit h5{ font-size: 20px; font-weight: 300; color:#333; margin-top: 20px;} .recruit{ margin: 70px 0 200px;} .recruit .topBox{ display:flex; justify-content:space-between; } .recruit .topBox .tabBox{ display:flex; margin-bottom: 3px;} .recruit .topBox .tabBox li button{ font-size: 18px; font-weight: 600; width: 105px; height: 50px; border-radius:100px; border:1px solid rgba(34,34,34,0.14); cursor:pointer; } .recruit .topBox .tabBox li.on button{ border:none; background: #064A9B; color:#fff; } .recruit .topBox .tabBox li:not(:last-child){ margin-right: 10px;} .recruit .topBox .searchBox{ display:flex; align-items:center; } .recruit .topBox .searchBox .selectBox{ position: relative;} .recruit .topBox .searchBox .selectBox select{ width: 130px; height: 50px; border:1px solid rgba(37,37,37,0.1); border-top-left-radius:100px; border-bottom-left-radius:100px; font-size: 16px; color:#222; padding: 0 30px;} .recruit .topBox .searchBox .selectBox img{ position: absolute; transform:translateY(-50%); top: 50%; right:25px; } .recruit .topBox .searchBox .inputBox{ width: 330px; height: 50px; border:1px solid rgba(37,37,37,0.1); border-top-right-radius:100px; border-bottom-right-radius:100px; margin-left: -1px; display:flex; align-items: center; padding: 0 30px; justify-content: space-between;} .recruit .topBox .searchBox .inputBox input{ border:none; outline:none; font-size:16px; color:#aaa; height: 100%;} .recruit .topBox .searchBox .inputBox input::placeholder{ color:#aaa; font-weight: 300;} .recruit .tableBox{ margin-top: 30px; border-top:1px solid #064A9B; } .recruit .tableBox tr{ border-bottom:1px solid rgba(34,34,34,0.2);} .recruit .tableBox th{ font-size:18px; font-weight: 500; color:#333; height: 60px;} .recruit .tableBox td{ text-align: center; font-size:16px; height: 60px;} .recruit .tableBox td a{ color:#969696;} .recruit .tableBox tbody tr{ background: #F9F9F9;} .recruit .tableBox tbody tr.on{ background: #fff;} .recruit .tableBox tbody tr.on td a{ color:#666; } .recruit .tableBox tbody td:nth-child(2n-1) a{ color:#222; } .recruit .tableBox tbody td span{ color:#064a9b;} .recruit .tableBox tbody td:nth-child(2){ text-align: left; padding: 0 30px;} .recruit .tableBox tbody tr button{ font-size:16px; width: 120px; height: 43px; border: 1px solid #ddd; border-radius:100px; color:#aaa; pointer-events: none; } .recruit .tableBox tbody tr.on button{ border:1px solid #064a9b; color:#064a9b; } .recruit_view .titleBox{ background: #F9F9F9; text-align: center; padding: 40px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .recruit_view .titleBox .title{ font-size: 22px; font-weight: 500; color:#222; margin-bottom: 20px; } .recruit_view .titleBox .title span{ color:#064a9b; } .recruit_view .titleBox .day{ font-size: 16px; color:#aaa; } .recruit_view div.txt{ padding: 50px 10px; font-size: 16px; color:#aaa; text-align: center;} .recruit_view .viewBox{ font-size: 16px; border-top: 1px solid rgba(34,34,34,0.2); } .recruit_view .viewBox .itemBox{ display:flex; height: 60px; border-bottom:1px solid #E0E0E0; } .recruit_view .viewBox .itemBox p{ display:flex; justify-content:center; align-items:center; padding: 0 30px;} .recruit_view .viewBox .itemBox .title{ width: 140px; color:#222; } .recruit_view .viewBox .itemBox.file .title{ background: #F9F9F9;} .recruit_view .viewBox .itemBox.file .inputBox{ padding: 0 30px; display: flex; justify-content: center; align-items: center;} .recruit_view .viewBox .itemBox.file .txt{ margin-left: 10px;} .recruit_view .viewBox .itemBox.file input[type="file"]{ display:none; } .recruit_view .viewBox .itemBox.file label {} .recruit_view .viewBox .itemBox .txt{ color:#aaa ;} .recruit_view button.listBox{ width: 250px; height: 75px; font-size:18px; font-weight: 500; background: #eee; color:#aaa; margin: 80px auto 0; display: flex; justify-content: center; align-items: center; transition:all 0.5s; } .recruit_view button.listBox:hover{ background: #064a9b; color:#fff; } .job, .talent, .ethics,.Ereport{ margin: 80px 0 200px;} .job .tabBox{ display:flex; border-top:1px solid #222; border-bottom:1px solid rgba(0,0,0,0.2);} .job .tabBox li{ text-align: center; font-size:20px; font-weight: 500; color:#222; padding: 30px 10px; width: calc(100% / 5); height: 145px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; cursor:pointer; } .job .tabBox li.on{ background: #064A9B; color:#fff; font-weight: bold;} .job .tabBox li.on img{ filter: invert(1); } .job .ctnBox section{ margin-top: 120px; display:none; } .job .ctnBox section.on{ display:block; } .job .ctnBox section p.title{ font-size: 30px; color:#222; font-weight: bold; margin-bottom: 20px; } .job .ctnBox section .wrapBox{ display:flex; border-top:1px solid rgba(6,74,155,0.7); border-bottom:1px solid #ddd;} .job .ctnBox section .wrapBox .tableBox{} .job .ctnBox section .wrapBox .tableBox th{ font-size: 18px; color:#222; font-weight: 700; width: 130px;} .job .ctnBox section .wrapBox .tableBox td{ font-size: 16px; color:#222;} .job .ctnBox section .wrapBox .tableBox td.title{ text-align: center; width: 160px; font-weight: 700;} .job .ctnBox section .wrapBox .tableBox td.list{ padding: 15px 30px; color:#555; } .job .ctnBox section .wrapBox .tableBox td.list li{ line-height: 1.8; text-indent: -15px; margin-left: 15px;} .job .ctnBox section .wrapBox .tableBox td.list li::before{ content:'·'; margin-right: 7px; font-weight: 800;} .job .ctnBox section .wrapBox .tableBox tr:not(:last-child) td{ border-bottom:1px solid #ddd; } .job .ctnBox section .wrapBox .tableBox1 th{ background: #F9F9F9;} .job .ctnBox section .wrapBox .tableBox1 td.title{ border-right: 1px solid #ddd; } .job .ctnBox section .wrapBox .tableBox1 td.list{ width: 585px;} .job .ctnBox section .wrapBox .tableBox2 th{ background: rgba(6,74,155,0.05); border-left:1px solid #ddd; border-right:1px solid #ddd;} .job .ctnBox section .wrapBox .tableBox2 table{ height: 100%; } .talent .ctnBox{ border-top:1px solid #000; } .talent .ctnBox .itemBox{ display:flex; } .talent .ctnBox .itemBox div{ overflow: hidden ;} .talent .ctnBox .itemBox div,.talent .ctnBox .itemBox figure{ width: 50%; height: 400px;} .talent .ctnBox .itemBox .txtBox{ display:flex; flex-direction:column; justify-content:center; align-items:center; position: relative;} .talent .ctnBox .itemBox .txtBox .title{ font-size: 40px; font-weight: bold; color:#064a9b; margin-bottom: 20px; } .talent .ctnBox .itemBox .txtBox .txt{ font-size:18px; font-weight: 300; color:#555; text-align: center; line-height: 1.8;} .talent .ctnBox .itemBox .txtBox img{ position: absolute; right: 0;} .talent .ctnBox .itemBox .imgBox{ background: #eee;} .talent .ctnBox .itemBox:nth-child(2n) img{ right: auto; left: 0;} .talent .ctnBox .itemBox figure{ overflow: hidden;} .talent .ctnBox .itemBox figure img{ } .ethics .titleBox h3{ font-size: 54px; color:#aaa; font-weight: bold; line-height: 1.5;} .ethics .titleBox h3 span{ color:#064a9b; } .ethics .titleBox p { font-size: 21px; font-weight: 300; color:#555; letter-spacing: -1.5px; margin: 30px 0 80px;} .ethics .wrapBox{ border-top:1px solid #000;} .ethics .wrapBox .itemBox{ display:flex; } .ethics .wrapBox .itemBox figure{ width: 21%; text-align: center; display: flex; justify-content: center; align-items: center;} .ethics .wrapBox .itemBox .txtBox{ display:flex; gap:30px; font-size:24px; padding: 80px 0; border-bottom: 1px solid #ddd; width: 79%;} .ethics .wrapBox .itemBox .txtBox .num{ color:#222; font-weight: 500; font-family: "Pretendard", sans-serif; } .ethics .wrapBox .itemBox .txtBox .txt{ font-family: "Pretendard", sans-serif;} .ethics .wrapBox .itemBox .txtBox .txt .title{ color:#222; font-weight: 500; margin-bottom: 30px;} .ethics .wrapBox .itemBox .txtBox .txt p:not(.title){ font-size:20px; font-weight: 300; color:#555; } .Ereport .ctnBox{ padding: 80px 0; border-top: 1px solid #000; border-bottom:1px solid #ddd;} .Ereport .ctnBox > div{ display:flex; align-items: center; overflow: hidden;} .Ereport .ctnBox > div .title{ font-size: 20px; font-weight: 600; color:#111; width: 120px; margin-right: 50px;} .Ereport .ctnBox > div input:not(input[type="file"]),.Ereport .ctnBox > div select,.Ereport .ctnBox > div.file label.txt{ width: calc(50% - 170px) ; height: 65px; background: #F8F8F8; font-size:18px; padding: 0 20px;} .Ereport .ctnBox > div select{ background: url("/img/sub/Ereport_select_arrow.png") no-repeat 95% 50% #F8F8F8; } .Ereport .ctnBox > div select{ color:#666; } .Ereport .ctnBox > div input{ border:none; outline:none; } .Ereport .ctnBox > div textarea{ width: calc(100% - 170px); height: 180px; background: #f8f8f8; border:none; font-size:18px; padding: 20px;} .Ereport .ctnBox > div:not(:last-child){ margin-bottom: 20px;} .Ereport .ctnBox > div.content{ align-items: flex-start; } .Ereport .ctnBox > div.content .title{ margin-top: 20px;} .Ereport .ctnBox > div.file .inputBox{ display: flex; width: calc(50% + 25px);} .Ereport .ctnBox > div.file input{ display:none; } .Ereport .ctnBox > div.file label.txt{ display:flex; align-items:center; width: 100%; } .Ereport .ctnBox > div.file label.button{ font-size: 18px; width: 250px; height: 65px; background: #000; color:#fff; font-weight: bold; margin-left: 10px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .Ereport .ctnBox > div.name p:not(.title){ color:#555; font-weight: 300; font-size:17px; margin-left: 30px;} .Ereport .agreeBox{ margin-top: 80px;} .Ereport .agreeBox .title{ font-size: 20px; font-weight: bold; color:#111; } .Ereport .agreeBox .txt{ font-size: 18px; color:#666; font-weight: 300; width: 100%; height: 180px; padding: 20px; overflow: hidden; border:1px solid #ddd; margin: 20px 0;} .Ereport .agreeBox .txt .innerT{ overflow-y: scroll; height: 100%;} .Ereport .agreeBox .txt .innerT::-webkit-scrollbar { height: 100%; width: 3px; background: #ddd; border-radius:50px; overflow: hidden;} .Ereport .agreeBox .txt .innerT::-webkit-scrollbar-thumb{ background: #aaa;} .Ereport .agreeBox .agreeBtn{ display:flex; align-items:center; font-size: 17px; color:#222; font-weight: 300; } .Ereport .agreeBox .agreeBtn label{ cursor:pointer; } .Ereport .agreeBox .agreeBtn input[type="checkbox"]{ appearance: auto; width: 18px;height: 18px; border:1px solid #ddd; margin-right: 15px; } .Ereport .agreeBox .agreeBtn input[type="checkbox"]:checked{ background: url("/img/sub/Ereport_agree_btn.png") no-repeat 50% 50%;} /*.Ereport .agreeBox .agreeBtn input[type="checkbox"] + label.btn{ width: 20px;height: 20px; border:1px solid #ddd; margin-right: 15px;}*/ /*.Ereport .agreeBox .agreeBtn input[type="checkbox"]:checked + label{ background: url("/img/sub/Ereport_agree_btn.png") no-repeat 50% 50%);}*/ .Ereport .btnBox{ margin-top: 80px; display:flex; align-items:center; justify-content:center;} .Ereport .btnBox button{ width: 250px; height: 75px; font-size: 18px; font-weight: 500; } .Ereport .btnBox button.cancle{ background: #eee; color:#aaa; margin-right: 10px;} .Ereport .btnBox button.enter{ background: #064A9B; color:#fff;} @media( max-width: 1300px){ .job .ctnBox section .wrapBox .tableBox1 td.list{ width: 300px;} .Ereport .ctnBox > div .title{ flex-shrink:0; width: 100px;} .Ereport .ctnBox > div input:not(input[type="file"]), .Ereport .ctnBox > div select{ flex-shrink:0; width: calc(50% + 20px);} } @media( max-width: 1000px){ #subVisual.community{ height: 300px;} #subVisual.community .subTit .cate{ margin: 0 0 50px 0;} #subVisual.community .subTit h2{ font-size:45px; } #subVisual.community .subTit h5{ font-size:18px; } .recruit .tableBox colgroup .colSubject{ width: 40%; } .recruit .topBox .tabBox li button{ font-size:16px; width: 80px; height: 40px;} .recruit .topBox .searchBox .selectBox select{ width: 100px; height: 45px;} .recruit .topBox .searchBox .inputBox{ width: 290px; height: 45px; padding: 0 10px;} .recruit_view .titleBox .title{ font-size: 20px; } .job,.talent,.ethics,.Ereport{ margin: 60px 0 100px;} .job .ctnBox section{ margin-top: 100px;} .job .tabBox li{ font-size:18px; height: 120px; padding: 20px 10px;} .job .ctnBox section p.title{ font-size:25px; } .job .ctnBox section .wrapBox{ overflow-x: scroll;} .job .ctnBox section .wrapBox .tableBox th{ font-size:16px; width: 100px;} .job .ctnBox section .wrapBox .tableBox td{ font-size:15px; } .job .ctnBox section .wrapBox .tableBox td.list{ padding: 15px 20px;} .job .ctnBox section .wrapBox .tableBox1 table{ width: 400px;} .job .ctnBox section .wrapBox .tableBox2 table{ width: 400px;} .talent .ctnBox .itemBox .txtBox .title{ font-size:30px; } .talent .ctnBox .itemBox .txtBox .txt{ font-size:16px; } .talent .ctnBox .itemBox .txtBox img{ width: 10%;} .talent .ctnBox .itemBox div, .talent .ctnBox .itemBox figure{ height: 300px; } .ethics .titleBox h3{ font-size:44px; } .ethics .titleBox p{ font-size:20px; } .ethics .wrapBox .itemBox .txtBox{ gap:20px; padding: 50px 0; font-size:22px; } .ethics .wrapBox .itemBox .txtBox .txt p:not(.title){ font-size:18px; } .Ereport .ctnBox > div .title,.Ereport .agreeBox .title{ font-size:18px; } .Ereport .ctnBox > div input:not(input[type="file"]), .Ereport .ctnBox > div select, .Ereport .ctnBox > div.file label.txt,.Ereport .ctnBox > div textarea,.Ereport .ctnBox > div.file label.button,.Ereport .agreeBox .txt{ font-size:16px; } .Ereport .ctnBox > div .title{ flex-shrink:0; width: 80px;} .Ereport .ctnBox > div textarea{ width: 100%;} .Ereport .ctnBox > div input:not(input[type="file"]), .Ereport .ctnBox > div select, .Ereport .ctnBox > div.file label.txt{ width: 50%; height: 55px;} .Ereport .ctnBox > div.file label.button{ width: 180px; height: 55px;} .Ereport .ctnBox > div.name p:not(.title),.Ereport .agreeBox .agreeBtn{ font-size:15px; } .Ereport .ctnBox > div.name p:not(.title){ margin-left: 10px;} .Ereport .btnBox button{ width: 200px; height: 65px;} .Ereport .btnBox button.enter{ font-size:16px; } } @media (max-width: 768px){ #subVisual.community{ min-height: 250px; height: 250px;} #subVisual.community .subTit h2{ font-size:35px; } #subVisual.community .subTit h5{ font-size:16px; } .recruit .topBox{ flex-direction:column; gap: 30px; } .recruit .topBox .tabBox,.recruit .topBox .searchBox{ justify-content: center;} .recruit .tableBox{ overflow-x: scroll; } .recruit .tableBox table{ width:768px; } .recruit .tableBox th{ font-size:16px;} .recruit .tableBox td{ font-size:15px; } .recruit .tableBox tbody tr button{ width: 100px; height: 38px;} .recruit_view .titleBox .title{ font-size: 19px; } .recruit_view div.txt{ font-size:15px; } .recruit_view .viewBox{ font-size:15px; } .recruit_view .viewBox .itemBox{ height: 55px;} .recruit_view .viewBox .itemBox .title{ width: 100px;} .recruit_view .viewBox .itemBox p,.recruit_view .viewBox .itemBox.file .inputBox{ padding: 0 20px;} .job .tabBox{ flex-wrap:wrap; } .job .tabBox li{ width: calc(100% / 3); font-size:14px; height: 80px; padding: 15px 10px;} .job .tabBox li img{ width: 25%;} .job .ctnBox section{ margin-top: 80px;} .job .ctnBox section p.title{ font-size:20px; } .talent .ctnBox .itemBox{ flex-direction:column; } .talent .ctnBox .itemBox div, .talent .ctnBox .itemBox figure{ width: 100%; } .talent .ctnBox .itemBox div{ height: 250px;} .talent .ctnBox .itemBox figure{ order:-1; height: 200px;} .ethics .titleBox h3{ font-size:25px; } .ethics .titleBox h3 br{ display:none; } .ethics .titleBox p{ font-size:18px; margin: 30px 0 60px;} .ethics .wrapBox .itemBox .txtBox{ padding: 40px 0; font-size:19px; } .ethics .wrapBox .itemBox .txtBox .txt .title{ margin-bottom: 20px; font-size:17px; } .ethics .wrapBox .itemBox{ flex-direction:column; } .ethics .wrapBox .itemBox figure{ padding: 30px 0;} .ethics .wrapBox .itemBox figure img{ width: 15%;} .ethics .wrapBox .itemBox figure, .ethics .wrapBox .itemBox .txtBox{ width: 100%;} .Ereport .ctnBox{ padding: 60px 0;} .Ereport .ctnBox > div{ flex-direction: column; align-items: flex-start; gap:15px} .Ereport .ctnBox > div.content .title{ margin: 0;} .Ereport .ctnBox > div input:not(input[type="file"]), .Ereport .ctnBox > div select, .Ereport .ctnBox > div.file label.txt,.Ereport .ctnBox > div.file .inputBox{ width: 100%;} .Ereport .ctnBox > div:not(:last-child){ margin-bottom: 30px;} .Ereport .agreeBox,.Ereport .btnBox{ margin-top: 60px;} .Ereport .btnBox button{ width: 120px; height: 50px;} }