*{margin:0; padding:0; box-sizing:border-box} html{ overflow-x: hidden; } .main_visual{width:100%;position: relative;z-index: 3; height: 100%;background: #f2f4f5;} .main_visual .main_slider{ height:100%;overflow: hidden; position: relative;} .main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; background-color: #fff; } .main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden; width: 100%; height: 100%; opacity:0; } .main_visual .main_slider .slide_box > div{ -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .main_visual .main_slider .slide_box .main_img{ position: absolute;left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; -moz-transition: all 8s ; -webkit-transition: all 8s; -o-transition: all 8s; -ms-transition: all 8s ; transition: all 8s ; transform: scale(1.2); } .main_visual .main_slider .slide_box .main_img img{ display: block; min-width: 100%; max-width: auto;height: 100%} .main_visual .main_slider .slide_box > div.on .main_img{ transform: scale(1.0); transform:perspective(500px) rotate(.001deg);} .main_visual .main_slider .slide_box .box1{background:url('/img/main/main_visual01.jpg') center center no-repeat; background-size:cover;} /* padding-top:360px; */ .main_visual .main_slider .slide_box .in_obj{text-align: left; position: absolute; top:50%;margin-top: -157px;width: 1200px;left: 50%;margin-left: -600px;} .main_visual .main_slider .slide_box .in_obj .wrap_t{margin-bottom: 25px;} .main_visual .main_slider .slide_box div strong{ display: block; position: relative;left:30px; opacity:0; font-weight: 500; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transition: left 1s; -webkit-transition: left 1s; -o-transition: left 1s; -ms-transition: left 1s; transition: left 1s; transition-delay: 0.6s; } .main_visual .main_slider .slide_box div div.wrap_tit{display: block; opacity:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; transition-delay: 0.6s;} .main_visual .main_slider .slide_box div.on div.wrap_tit{ opacity: 1 } .main_visual .main_slider .slide_box div span{ display: block; position: relative;opacity:0; left:30px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; transition-delay: 0.7s; } .main_visual .main_slider .slide_box div span em{font-style: normal;font-weight: 600} .main_visual .main_slider .slide_box div p{ margin-top: 20px; display: block; position: relative;opacity:0; left:30px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; color: #ffffff; font-size: 18px; line-height: 34px; font-weight: 400; transition-delay: 1.5s; } .main_visual .main_slider .slide_box div p em{font-weight: 600;font-style: normal} .main_visual .main_slider .slide_box div.on p {position:relative;;opacity:1; left:0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; transition-delay: 1s } .main_visual .main_slider .slide_box > div.on strong { left:0;opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } /*.main_visual .main_slider .slide_box div.on em{position:absolute;right:100%;display:block;width:915px;height:1000px;background:url(../img/dd.png)}*/ .main_visual .main_slider .slide_box div.on em{ /*transition-delay:0.2s */} .main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .main_visual .main_slider .slide_box > div.on em, .main_visual .main_slider .slide_box > div.on span, .main_visual .main_slider .slide_box > div.on strong { left:0;opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } .main_visual .main_slider .slide_box > div .wrap_tit > em{color: #fff; font-size: 22px; letter-spacing: -0.25px; font-style: normal; position: relative; left: 30px;transition: 0.8s; transition-delay: 0.3s; position: relative; margin-bottom: 20px; } .main_visual .main_slider .slide_box > div.on .wrap_tit > em{left: 0;transition-delay: 0.3s} .main_visual .main_slider .slide_box > div strong{ display: block;color: #fff;font-size: 48px;line-height:68px; font-weight:600; margin-bottom:25px;margin-top: 20px;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .main_visual .main_slider .slide_box > div strong{margin-bottom: 10px} } .main_visual .main_slider .slide_box > div strong em{font-style: normal; color: #ffc809} .main_visual .main_slider .slide_box > div.box3 strong{text-shadow: 0 0 0 #000} .main_visual .main_slider .slide_box > div span { font-size:16px;letter-spacing: -0.25px;line-height:34px;display: block;color: #e6e5e5; font-weight: 300} .thum_wrap{ font-size: 0;line-height:0;position: absolute; right: 46px; top: 50%; transform: translate(0,-50%); z-index: 99; } .thum{ display: block; } .thum li{ transition: all 0.0s; width:46px;height:46px; cursor:pointer; display: block; border-radius: 50%; border: 2px solid rgba(230,233,236,0.5); position:relative; margin-bottom: 24px; } .thum li:last-child{ margin-bottom: 0; } .thum li:nth-child(3){ margin-bottom: 0; } .thum li:nth-child(1):before{ content: "01"; display: block; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; font-size: 16px; color :#fff ;font-weight: 700; letter-spacing: -0.25px; text-align: center; } .thum li:nth-child(2):before{ content: "02"; display: block; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; font-size: 16px; color :#fff ;font-weight: 700; letter-spacing: -0.25px; text-align: center; } .thum li:nth-child(3):before{ content: "03"; display: block; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; font-size: 16px; color :#fff ;font-weight: 700; letter-spacing: -0.25px; text-align: center; } .thum li.on{transition: all 0.5s; border: 2px solid rgba(230,233,236,1); } .thum li.on:after{content: '';position: absolute;width: 62px;height: 62px;background: url('/asset/img/main/thum_on.png'); display: block; left: -10px;top:-10px; animation: rotate 5.5s infinite linear; } #main .main_visual .main_text{ position: absolute; left: 0; top: 50%; width: 100%; z-index: 10; transform: translate(0,-50%); } #main .main_visual .main_text .inner{ width: 1200px; margin: 0 auto; } #main .main_visual .main_text .inner > strong{ font-family: 'Roboto', 'Noto Sans KR', sans-serif; font-weight: 700; color: #fff; font-size: 70px; line-height: 90px; display: block; text-shadow: 10px 10px 10px rgba(4,0,0,0.3); position: relative; left: 40px; opacity: 0; } #main .main_visual .main_text .inner > p{ font-size: 26px; line-height: 46px; color: #fff; font-weight: 300; letter-spacing: -1px; margin-top: 30px; position: relative; left: 40px; opacity: 0; } #main .main_visual .main_text .inner > p > span{ font-weight: 600; } #main .main_visual .main_text .inner > ul{ margin-top: 60px ;} #main .main_visual .main_text .inner > ul:after{ content: ""; display: table; clear: both; } #main .main_visual .main_text .inner > ul > li{ float: left; width: 180px; height: 180px; margin-right: 20px; text-align: center; position: relative; left: 40px; opacity: 0; } #main .main_visual .main_text .inner > ul li a{ display: block; width: 100%; height: 100%; background: url('/img/main/btn_de.png') center center no-repeat; box-shadow: 10px 10px 16px rgba(7,8,32,0.3); padding-top: 40px; transition: 0.4s; } #main .main_visual .main_text .inner > ul li a p{ font-size: 18px; font-weight: 400; color :#ffffff; letter-spacing: -0.5px; margin-top: 20px; } #main .main_visual .main_text .inner > ul li:last-child{ margin-right: 0; } #main .main_visual .main_text .inner > ul li:last-child a{ padding-top: 27px; } #main .main_visual .main_text .inner > ul li:last-child i{ position: relative; top: 7px; } #main .main_visual .main_text .inner > ul li a:hover{ background: url('/img/main/btn_bg.jpg') center center no-repeat; } #main .main_visual .main_text.on .inner > strong{ left: 0; opacity: 1; transition: 1s; } #main .main_visual .main_text.on .inner > p{ left: 0; opacity: 1; transition: 1s; transition-delay: 0.2s; } #main .main_visual .main_text.on .inner > ul li{ left: 0; opacity: 1; transition: 1s; } #main .main_visual .main_text.on .inner > ul li:nth-child(1){ transition-delay: 0.8s; } #main .main_visual .main_text.on .inner > ul li:nth-child(2){ transition-delay: 1.0s; } #main .main_visual .main_text.on .inner > ul li:nth-child(3){ transition-delay: 1.2s; } #m_footer{ position: absolute; left: 0; bottom: 90px; width: 100%; z-index: 9; } .inner{ width: 1200px; margin: 0 auto; } #m_footer ul:after{ content: ""; display: table; clear: both; } #m_footer ul li{ float: left; font-weight: 300; color: rgba(255,255,255,0.8); font-size: 16px; line-height: 30px; letter-spacing: -0.2px; } #m_footer ul li a{ color: rgba(255,255,255,0.8); } #m_footer ul li:after{ content: ""; width: 1px; height: 11px; display: inline-block; background-color: rgba(255,255,255,0.5); margin: 0 7px; } #m_footer ul li:last-child:after{ display: none; } #m_footer .copy{ font-size: 16px; line-height: 30px; display: block; color: rgba(255,255,255,0.8); font-weight: 300; letter-spacing: -0.2px; } /* 서브공통 */ .web_img{ display: block; } .mo_img{ display: none; } #sub .sub_visual{ height: 685px; overflow: hidden; position: relative; } #sub .sub_visual .img_box img{ position: absolute; left: 0; top: 0; height: 100%; transform: scale(1.1); } #sub .sub_visual.on .img_box img{ transition: 5s; transform: scale(1); } #sub .sub_visual .text_box{ z-index: 1; position: relative; } #sub .sub_visual .text_box strong{ font-size: 64px; color :#ffffff; font-weight: 700; letter-spacing: -1px; text-shadow: 5px 5px 6px rgba(4,0,0,0.25); display: block; margin-bottom: 90px; left: 30px; opacity: 0; transition: 1s; position: relative; } #sub .sub_visual .inner{ position: absolute; left: 0; right: 0; bottom: 0; } #sub .sub_visual .sub_nav ul:after{ content: ""; display: table; clear: both; } #sub .sub_visual .sub_nav ul li{ float: left; border-top: 1px solid rgba(250,250,250,0.6); position: relative; height: 100px; display: table; } #sub .sub_visual .sub_nav ul li.on:before{ content: ""; width: 100%; height: 3px; background-color: #00cf5c; display: block; position: absolute; left: 0; top: -2px; } #sub .sub_visual .sub_nav ul li a{ width: 100%; text-align: center; display: table-cell; vertical-align: middle; font-size: 19px; color: #ffffff; font-weight: 300; letter-spacing: -1px; } #sub .sub_visual .sub_nav ul li.on a:after{ content: ""; display: block; margin: 0 auto; width: 8px; height: 4px; background: url('/img/sub/sub_nav_on.png') center center no-repeat; margin-top: 22px; } #sub .sub_visual .sub_nav ul li.on{ background-color: rgba(0,0,18,0.8); } #sub .sub_visual.on .text_box strong{ transition-delay: 0.5s; left: 0; opacity: 1; } #sub .sub_visual .sub_nav ul li:hover{ background-color: rgba(0,0,18,0.5); transition: 0.3s; } #sub .sub_con{ padding-top: 110px; } #sub .sub_con .sub_title{ margin-bottom: 70px; } #sub .sub_con .sub_title strong{ font-size: 36px; color :#333333; font-weight: 500; letter-spacing: -1px; display: block; text-align: center; } #sub.company .sub_nav ul li{ width: 16.6666666%; } #sub.products .sub_nav ul li{ width: 33.3333333%; } #sub.recruiting .sub_nav ul li{ width: 33.3333333%; } #sub.ir .sub_nav ul li{ width: 25%; } #sub.contact .sub_nav ul li{ width: 50%; } #footer{ position: relative; background: url('/img/sub/footer_bg.png') center center no-repeat; background-color: #262930; padding: 50px 0; text-align: center; } #footer h1{ margin: 0 auto; display: block; margin-bottom: 25px; } #footer ul:after{ content: ""; display: table; clear: both; } #footer ul li{ display: inline-block; font-size: 14px; color :#a8a9ac; font-weight: 300; letter-spacing: -0.25px; line-height: 30px; } #footer .copy{ font-size: 14px; color :#a8a9ac; font-weight: 300; letter-spacing: -0.25px; line-height: 30px; } #footer .scroll{ position: fixed; right: 46px; bottom: 50px; opacity: 0; transition: 0.4s; z-index: 10; } #footer .scroll.on{ opacity: 1; } #footer .scroll button{ background-color: transparent; outline: 0; } /* 회사소개 */ #sub.company .intro{ padding-bottom: 160px; position: relative; } #sub.company .intro:before{ content: ""; display: block; width: 100%; height: 470px; background-color: #f8f8f9; position: absolute; left: 0; bottom: 0; z-index: -1; } #sub.company .intro .con_wrap:after{ content: ""; display: table; clear: both; } #sub.company .intro .con_wrap .img_box{ float: left; width: 50%; } #sub.company .intro .con_wrap .img_box img{ display: block; box-shadow: 34px 34px 40px rgba(4,0,0,0.1); } #sub.company .intro .con_wrap .text_box{ float: left; width: 50%; padding-left: 55px; padding-top: 62px; } #sub.company .intro .con_wrap .text_box strong{ display: block; font-size: 28px; line-height: 52px; color: #333333; letter-spacing: -1.5px; word-break: keep-all; font-weight: 400; margin-bottom: 50px; } #sub.company .intro .con_wrap .text_box strong span{ font-weight: 500; color: #008cdc; } #sub.company .intro .con_wrap .text_box p{ font-size: 16px; line-height: 36px; color :#555555; letter-spacing: -0.5px; margin-bottom: 35px; } #sub.company .intro .con_wrap .text_box p.no_mar{ margin-bottom: 0; } /* CEO인사말 */ #sub.company .ceo{ background: url('/img/sub/ceo_bg.jpg') center bottom no-repeat; background-color: #f5f6f8; text-align: center; padding-bottom: 300px; } #sub.company .ceo .text_box > strong{ display: block; font-size: 28px; line-height: 52px; color: #333333; letter-spacing: -1.5px; word-break: keep-all; font-weight: 400; margin-bottom: 30px; } #sub.company .ceo .text_box > strong span{ font-weight: 500; color: #008cdc; } #sub.company .ceo .text_box > p{ font-size: 16px; line-height: 36px; color :#555555; letter-spacing: -0.5px; margin-bottom: 15px; } #sub.company .ceo .text_box > p.no_mar{ margin-bottom: 0; } #sub.company .ceo .text_box .ceo_name p{ font-size: 16px; color :#555555; letter-spacing: -0.5px; margin-top: 40px; } #sub.company .ceo .text_box .ceo_name p span{ font-family: 'Noto Serif', serif; font-size: 32px; color: #222222; letter-spacing: -1px; font-weight: bold; font-style: italic; } /* VISION */ #sub.company .vision { padding-bottom: 130px; } #sub.company .vision .con_wrap img{ width: 100%; } /* 연혁 */ #sub.company .history { padding-bottom: 130px; position: relative; } #sub.company .history:before{ content: ""; width: 100%; height: 62%; background-color: #f5f7f9; display: block; position: absolute; left: 0; bottom: 0; z-index: -2; } #sub.company .history .con_wrap > p{ margin-bottom: 60px ;font-size: 24px; color :#333333; font-weight: 400; letter-spacing: -1px; line-height: 38px; text-align: center; } #sub.company .history .con_wrap > ul:before{ content: ""; width: 150%; height: 92px; position: absolute; left: -47%; top: 50px; background-color: #1096e4; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); z-index: -1; } #sub.company .history .con_wrap > ul{ position: relative; } #sub.company .history .con_wrap > ul:after{ content: ""; display: table; clear: both; } #sub.company .history .con_wrap > ul > li{ float: left; width: 31.3333333%; margin-right: 3%; } #sub.company .history .con_wrap > ul > li:last-child{ margin-right: 0; } #sub.company .history .con_wrap > ul > li .title_box{ width: 90%; margin: 0 auto; height: 102px; box-shadow: 12px 12px 16px rgba(5,33,74,0.26); -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); position: relative; margin-bottom: 88px; } #sub.company .history .con_wrap > ul > li .title_box .wrap{ text-align: center; position: absolute; left: -2.5%; top: 50%; width: 100%; -webkit-transform: skew(-20deg) translate(0,-50%); -moz-transform: skew(-20deg) translate(0,-50%); -o-transform: skew(-20deg) translate(0,-50%); } #sub.company .history .con_wrap > ul > li .title_box .wrap strong{ font-size: 22px; color: #ffffff; font-weight: 500; display:block; letter-spacing: -1px; margin-bottom: 2px; } #sub.company .history .con_wrap > ul > li .title_box .wrap p{ font-size: 17px; color: #c8d4e2; font-weight: 300; letter-spacing: -0.5px; } #sub.company .history .con_wrap > ul > li:nth-child(1) .title_box{ background-color: #0060b1; } #sub.company .history .con_wrap > ul > li:nth-child(2) .title_box{ background-color: #024c9f; } #sub.company .history .con_wrap > ul > li:nth-child(3) .title_box{ background-color: #0b3986; } #sub.company .history .con_wrap > ul > li .year{ padding-left: 35px; } #sub.company .history .con_wrap > ul > li .year dl:after{ content: ""; display: table; clear: both; } #sub.company .history .con_wrap > ul > li .year dl dt{ float: left; width: 65px; font-size: 16px; line-height: 36px; color :#0060b1; font-weight: 500; letter-spacing: -0.25px; position: relative; margin-right: 10px; } #sub.company .history .con_wrap > ul > li .year dl dt:after{ content: ""; display: block; width: 2px; height: 12px; background-color: #dcdcdc; position: absolute; right: 0; top: 12px; } #sub.company .history .con_wrap > ul > li .year dl dd{ float: left; font-size: 16px; line-height: 36px; color :#666666; font-weight: 300; } #sub.company .history .con_wrap > ul > li .year dl dd span{ display: block; padding-left: 10px; color: #888888; } /* 사업장소개 */ #sub.company .b_intro .con_01{ position: relative; z-index: 1; } #sub.company .b_intro .con_01:after{ content: ""; display: table; clear: both; } #sub.company .b_intro .con_01 .img_box{ float: right; width: 49%; position: relative; box-shadow: 18px 18px 25px rgba(0,0,0,0.12); } #sub.company .b_intro .con_01 .img_box:before{ box-sizing: border-box; content:""; z-index: -1; display: block; border: 7px solid #dddfe2; width: 100%; height: 100%; position: absolute; top: 20px; right: -20px; } #sub.company .b_intro .con_01 .img_box img{ display: block; width: 100%; } #sub.company .b_intro .con_01 .text_box{ float: left; width: 50%; padding-top: 40px; } #sub.company .b_intro .con_01 .text_box h1{ margin-bottom: 20px; } #sub.company .b_intro .con_01 .text_box ul{ padding-left: 100px; } #sub.company .b_intro .con_01 .text_box ul li{ font-size: 18px; font-weight: 300; coloR: #777777; letter-spacing: -1px; line-height: 38px; } #sub.company .b_intro .con_01 .text_box ul li strong{ display: inline-block; width: 100px; font-size: 18px; font-weight: 400; color: #333333; letter-spacing: -1px; line-height: 38px; position: relative; margin-right: 20px; } #sub.company .b_intro .con_01 .text_box ul li strong:before{ content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #97b4c3; margin-right: 10px; position: relative; top: -3px; } #sub.company .b_intro .con_01 .text_box ul li strong:after{ content: ""; width: 1px; height: 15px; background-color: #cfd4dd; display: block; position: absolute; right: 0; top: 12px; } #sub.company .b_intro .con_02{ padding-bottom: 158px; background: url('/img/sub/b_bg.jpg') left bottom no-repeat; padding-top: 107px; margin-top: -37px; } #sub.company .b_intro .con_02 .inner > strong{ font-size: 30px; display: block; font-weight: 400; letter-spacing: -1px; color: #222222; margin-bottom: 35px; } #sub.company .b_intro .con_02 .map_img{ box-shadow: 18px 18px 25px rgba(0,0,0,0.12); } #sub.company .b_intro .con_02 .map_img img{ display: block; width: 100%; } /* 재무정보 */ #sub.ir .finance{ padding-bottom: 80px; } #sub.ir .finance .table_wrap{ margin-bottom: 90px; } #sub.ir .finance .table_wrap > strong{ font-size: 26px; line-height: 36px; color :#333333; font-weight: 500; letter-spacing: -1px; display: block; } #sub.ir .finance .table_wrap > span{ font-size: 15px; font-weight: 300; letter-spacing: -1px; color: #888888; display: block; text-align: right; margin-bottom: 8px; } #sub.ir .finance .table_wrap table{ width: 100%; } #sub.ir .finance .table_wrap table tr th:nth-child(1){ width: 22%; } #sub.ir .finance .table_wrap table tr th{ height:58px; font-size: 18px; font-weight: 700; color: #ffffff; vertical-align: middle; background-color: #98a6b2; border-right: 1px solid #c9d4dd; } #sub.ir .finance .table_wrap table tr th:last-child{ margin-right: none; } #sub.ir .finance .table_wrap table tr td{ font-size: 17px; color: #444444; letter-spacing: -1px; height: 58px; border-bottom: 1px solid #c9d4dd; text-align: center; vertical-align: middle; border-right: 1px solid #c9d4dd; } #sub.ir .finance .table_wrap table tr td:last-child{ border-right: none; } #sub.ir .finance .table_wrap table tr td.right_t{ text-align: right; padding-right: 18px; } #sub.ir .finance .table_wrap table tr td.right_t.red_c{ color: #ff2247; } #sub.ir .finance .table_wrap table tr.color2{ background-color: #f2f5f7;} #sub.ir .finance .table_wrap > p{ font-size: 16px; font-weight: 400; color: #666; margin-top: 12px; letter-spacing: -0.5px; } /* 주가정보 */ #sub.stock .graph_wrap{ border: 1px solid #c9d4dd; min-height: 342px; } #sub.stock .stock_wrap{ width: 700px; margin: 0 auto; margin-bottom: 30px; margin-top: 30px; } #sub.stock .stock_wrap:after{ content: ""; display: table; clear: both; } #sub.stock .stock_wrap .company{ float: left; width: 48%; margin-right: 4%; } #sub.stock .stock_wrap .price{ float: left; width: 48%; } #sub.stock .stock_wrap .company .s_top{ background-color: rgba(12,16,43,0.9); text-align: center; } #sub.stock .stock_wrap .company .s_top strong{ display: block; font-size: 18px; font-weight: 500; letter-spacing: -1px; color:#fff; padding: 8px 0; } #sub.stock .stock_wrap .company .s_bottom{ border: 1px solid #ddd; border-top: none; position: relative; padding: 12px; text-align: right; font-size: 24px; color: #333; } #sub.stock .stock_wrap .company .s_bottom span{ display: block; background-color: #ff2247; color: #fff; font-weight: 400; font-size: 16px; position: absolute; left: 0; top: 0px; width: 60px; height: 60px; text-align: center; line-height: 55px; } #sub.stock .stock_wrap .price ul li dl:after{ content: ""; display: table; clear: both; } #sub.stock .stock_wrap .price ul li dt{ float: left; width: 90px; font-size: 16px; font-weight: 500; color: #fff; background-color: #98a6b2; padding: 3px; margin-bottom:7px; } #sub.stock .stock_wrap .price ul li dd{ float: right; font-size: 16px; color:#666;} #sub.stock .stock_wrap .price ul li dd.up_wrap{ color:#ff2247; } #sub.stock .stock_wrap .price ul li dd.down_wrap{ color:#2478FF; } #sub.stock .stock_wrap .price ul li dl:last-child dt{ margin-bottom: 0; } #sub.stock .table_wrap2:after{ content: ""; display: table; clear: both; } #sub.stock .table_wrap2 table{ float: left; width: 50% !important; } #sub.stock .table_wrap2 table tr:first-child td{ border-top: 1px solid #c9d4dd; } #sub.stock .table_wrap2 table tr td{ text-align: right !important; padding-right: 20px; } #sub.stock .table_wrap2 table.two_t tr th{ width: 40% !important; } #sub.stock .table_wrap2 table tr th{ border-bottom: 1px solid #c9d4dd; } #sub.stock .table_wrap > strong{ margin-bottom: 30px !important; } #sub.stock .table_wrap3 table tr th{ width: auto !important; } #sub.stock .table_wrap3 table tr td span.up{ color:#ff2247; } #sub.stock .table_wrap3 table tr td span.down{ color:#2478FF; } /* 채용정보 */ #sub.recruiting .con_wrap{ margin-bottom: 90px; } #sub.recruiting .con_wrap > strong{ display: block; font-size: 26px; font-weight: 400; letter-spacing: -1px; color: #333333; margin-bottom: 35px; } #sub.recruiting .con_wrap > strong:before{ content: ""; display: inline-block; width: 20px; height: 20px; background: url('/img/sub/recruit_dot.gif') center center no-repeat; margin-right: 5px; } #sub.recruiting .con_wrap > img{ max-width: 100%; width: 100%; } #sub.recruiting .con_wrap > p{ font-size: 16px; line-height: 30px; color: #777777; letter-spacing: -0.5px; margin-top: 40px; } #sub.recruiting .con_wrap ul { margin-left: 25px; } #sub.recruiting .con_wrap ul li{ font-size: 18px; line-height: 36px; color :#666666; letter-spacing: -0.5px; } /* 인사제도 */ #sub.recruiting .personnel{ padding-bottom: 140px; } #sub.recruiting .personnel .inner > ul:after{ content: ""; display: table; clear: both; } #sub.recruiting .personnel .inner > ul > li{ float: left; width: 31.3333333%; margin-right: 3%; } #sub.recruiting .personnel .inner > ul > li:last-child{ margin-right: 0; } #sub.recruiting .personnel .inner > ul > li:nth-child(2){ margin-top: 90px; } #sub.recruiting .personnel .inner > ul > li .img_box img{ display: block; width: 100%; max-width: 380px; box-shadow: 14px 14px 16px rgba(0,0,0,0.16); } #sub.recruiting .personnel .inner > ul > li .text_box{ margin-top: 40px; padding-left: 30px; } #sub.recruiting .personnel .inner > ul > li .text_box strong{ display: block; margin-bottom: 20px; font-size: 26px; color :#333333; font-weight: 500; letter-spacing: -0.5px; } #sub.recruiting .personnel .inner > ul > li .text_box ul li{ margin-bottom: 10px; font-size: 17px; color: #666666; line-height: 32px; letter-spacing: -0.5px; font-weight: 300; } #sub.recruiting .personnel .inner > ul > li .text_box ul li:before{ content: ""; width: 4px; height: 4px; border-radius: 50%; display: inline-block; margin-right: 2px; position: relative; top: -5px; background-color: #008cdc; } /* 공지사항 */ #sub.contact .notice{ padding-bottom: 140px; } /* 상담문의 */ #sub.contact .inquiry{ padding-bottom: 140px; } #sub.contact .inquiry .bo_form:after{ content: ""; display: table; clear: both; } #sub.contact .inquiry .bo_form .form_wrap{ float: left; width: 48%; margin-right: 4%; margin-bottom: 35px; } #sub.contact .inquiry .bo_form .form_wrap:nth-child(2n+0){ margin-right: 0; } #sub.contact .inquiry .bo_form .con_wrap label{ display: block; font-size: 15px; color :#0a5da3; font-weight: 400; letter-spacing: -0.5px; margin-bottom: 10px; } #sub.contact .inquiry .bo_form .con_wrap input[type="text"]{ width: 100%; height: 54px; background-color: #f9f9f9; border: 1px solid #dcdcdc; font-size: 17px; font-weight: 300; color: #777777; letter-spacing: -0.5px; padding-left: 22px; } #sub.contact .inquiry .bo_form .con_wrap textarea{ font-family:'Noto Sans KR', sans-serif; background-color: #f9f9f9; border: 1px solid #dcdcdc; font-size: 17px; font-weight: 300; color: #777777; letter-spacing: -0.5px; padding: 15px 22px; height: 250px; } #sub.contact .inquiry .bo_form .chk_box{ text-align: right; margin-top: 20px; } #sub.contact .inquiry .bo_form .chk_box label{ color: #717987; letter-spacing: -0.5px; font-size: 16px; font-weight: 300; } #sub.contact .inquiry .bo_form .chk_box label a{ background-color: transparent; font-size: 16px; color: #008cdc; font-weight: 400; letter-spacing: -0.5px;} #sub.contact .inquiry .bo_form .send_b{ text-align: center; margin-top: 50px; } #sub.contact .inquiry .bo_form .send_b a{ transition:0.4s; display: block; width: 225px; height: 64px; color: #fff; background-color: #008cd6; border-bottom: 4px solid #0052af; font-size: 18px; font-weight: 400; letter-spacing: -1px; line-height: 62px; margin: 0 auto; box-shadow: 10px 10px 12px rgba(0,56,148,0.2); } #sub.contact .inquiry .bo_form .send_b a i{ display: inline-block; margin-left: 20px; position: relative; top: 1px; } #sub.contact .inquiry .bo_form .send_b a:hover{ background-color: #0052af; box-shadow: 3px 3px 5px rgba(0,56,148,0.2); } #sub.contact #per{background: rgba(0,0,0,0.3); width: 100%;height: 100%;position: fixed;top:0;z-index: 9999;display: none} #sub.contact #per.on{display: block;} #sub.contact #per p{margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 30px;word-break: keep-all;} #sub.contact #per div div{background: #fff;width: 1200px;box-sizing: border-box;margin: 0 auto;margin-top: 250px;padding: 45px 60px;height: 500px;overflow: scroll;position: relative;padding-top: 80px} #sub.contact #per div button{position: absolute;right: 30px;top:30px;} /* 리스트게시판 공통 */ #sub .bo_list{ width: 100%; border-top: 2px solid #22559a; border-spacing: 0; margin-bottom: 27px; } #sub .bo_list table{ width: 100%; } #sub .bo_list th{ height: 60px; font-size: 16px; color: #22559a; font-weight: 600; border-bottom: 1px solid #eee; vertical-align: middle; } #sub .bo_list td{ height: 60px; border-bottom: 1px solid #ddd; font-size: 16px; font-weight: 400; color: #494949;vertical-align: middle; text-align: center; font-weight: 300} #sub .bo_list th.th_title{ width: 70%; } #sub .bo_list td.td_title{ text-align: left; position: relative; padding-left: 20px; } #sub .bo_list td.td_title a{ display: inline-block; width: 100%; position: relative; overflow: hidden; } #sub .bo_list td.td_title span{display: inline-block;margin-left: 5px;} #sub .bo_list td.td_title a strong{ max-width: 90%; display: block; float: left;text-overflow:ellipsis;overflow: hidden;white-space: nowrap; font-weight: 400; letter-spacing: -0.5px;} #sub .bo_list tr:last-child th{ border-bottom: 1px solid #313131; } #sub .bo_list tr:last-child td{ border-bottom: 1px solid #313131; } #sub .bo_list tr.notice_c{ background-color: #f6f7f9; } #sub .bo_list td.td_title span{ color: #0a5da3; font-weight: 500; letter-spacing: -0.5px; } #sub .bo_list tr.notice_c td.td_title a{ color: #0a5da3; font-weight: 300; } /* 갤러리게시판 공통 */ #sub .gallery { padding-bottom: 130px; } #sub .gallery .bo_gall ul:after{ content: ""; display: table; clear: both; } #sub .gallery .bo_gall ul li{ float: left; width: 23%; margin-right: 2.6666666666%; margin-bottom: 50px ;} #sub .gallery .bo_gall ul li:nth-child(4n+0){ margin-right: 0; } #sub .gallery .bo_gall ul li .img_box{ box-shadow: 20px 20px 20px rgba(15,17,54,0.1); background-color: #0060b1; overflow: hidden; } #sub .gallery .bo_gall ul li .img_box img{ width: 100%; display: block; transition: 0.7s; opacity: 1; } #sub .gallery .bo_gall ul li a:hover .img_box img{ opacity: 0.8; transform: scale(1.05); } #sub .gallery .bo_gall ul li .text_box{ padding-top: 30px; text-align: center; } #sub .gallery .bo_gall ul li .text_box strong{ display: block; font-size: 20px; font-weight: 400; line-height: 38px; letter-spacing: -1px; color: #333333; height: 76px; overflow: hidden; } #sub .page ul{ text-align: center; } #sub .page ul li{ display: inline-block; width: 34px; height: 34px; margin-right: 3px; } #sub .page ul li a{ display: block; width: 100%; height: 100%; font-size: 15px; color: #555555; font-weight: 300; line-height: 34px; } #sub .page ul li.on a{ color :#fff; background-color: #009ef2; box-shadow: 5px 5px 10px rgba(5,33,74,0.2); font-weight: 400; } #sub .page ul li:last-child{ margin-right: 0; } #sub .page ul li.prev, #sub .page ul li.next{ position: relative; top: 11px; } #sub .page ul li.prev button{ width: 100%; height: 100%; background: url('/img/sub/prev.jpg') center center no-repeat; } #sub .page ul li.next button{ width: 100%; height: 100%; background: url('/img/sub/next.jpg') center center no-repeat; } #sub .bo_con{ border-top: 2px solid #0a8ae3; border-bottom: 1px solid #ddd; padding: 40px 0; } #sub .bo_con img{ max-width: 1200px; width: 100%; } #sub .bo_btn { margin-top: 50px; } #sub .bo_btn a{ width: 180px; margin: 0 auto; height: 62px; background-color: #0a8ae3; box-shadow: 20px 20px 20px rgba(15,17,54,0.1); line-height: 62px; text-align: center; font-size: 18px; color: #fff; font-weight: 500; letter-spacing: -1px; display: block; transition: 0.4s; } #sub .bo_btn a:hover{ background-color: #0b3986; } #sub .list_con .sub_title{ width: 1200px; margin: 0 auto; margin-bottom: 40px; } #sub .list_con .sub_title strong{ text-align: left; font-size: 24px; line-height: 42px; } #sub .list_con .sub_title span{ font-size: 16px; color :#888; font-weight: 300; margin-right: 15px; display: inline-block; } #sub.certification .gallery .bo_gall ul li a{ cursor: default; } #sub.certification .gallery .bo_gall ul li .img_box{ background-color: #fff; } #sub.certification .gallery .bo_gall ul li a:hover .img_box img{ opacity: 1; transform: none; } @keyframes rotate { 0 { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .thum li.last{display: none;} @media (max-height: 800px){ #main .main_visual .main_text .inner > p{ font-size: 18px; line-height: 30px; } #main .main_visual .main_text .inner > strong{ font-size: 48px; line-height: 60px; } #m_footer{ bottom: 2vh; } } @media (max-height: 500px){ #main .main_visual .main_text .inner > p{ font-size: 18px; line-height: 30px; } #main .main_visual .main_text .inner > strong{ font-size: 30px; line-height: 30px; } #main .main_visual .main_text.on .inner > strong br{ display: none; } #m_footer{ bottom: 2vh; } #main .main_visual .main_text.on .inner > p br{ display: none; } #main .main_visual .main_text .inner > ul > li{ width: 100px; height: 100px; } #main .main_visual .main_text .inner > ul li a{ padding-top: 25px; } #main .main_visual .main_text .inner > ul li a i img{ height: 33px; } #main .main_visual .main_text .inner > ul li:last-child a{ padding-top: 25px; } #main .main_visual .main_text .inner > ul li a p{ font-size: 14px; margin-top: 5px; } #main .main_visual .main_text .inner > ul li:last-child i{ top: -2px; } #header .wrap{ padding: 0 20px; padding-top: 20px; } #header .logo img{ width: 130px; } #header .all_btn{ top: 23px; right: 20px;} .thum li{ width: 25px; height: 25px; } .thum li:before{ font-size: 12px !important;} .thum li.on:after{ width:35px; height: 35px; top: -7px; left: -7px; background-size: 100% 100%; } #m_footer ul li{ font-size: 12px; line-height: 23px; } #m_footer .copy{ font-size: 12px; line-height: 23px; } #main .main_visual .main_text{ top: 45%; } #header .all_menu { overflow-y: scroll; } } @media (max-width: 1416px){ #main .main_visual .main_text .inner > strong{ font-size: 50px; line-height: 70px; } #main .main_visual .main_text .inner > p{ font-size: 20px; line-height: 40px; margin-top: 15px; } #main .main_visual .main_text .inner > ul{ margin-top: 30px; } #m_footer{ bottom: 5vh; } #main .main_visual .main_text .inner > p{ font-size: 18px; line-height: 30px; } #main .main_visual .main_text .inner > strong{ font-size: 48px; line-height: 60px; } } /** 추가 시작 **/ @media screen and (max-width:1400px){ #main .main_visual .main_text .inner{width:100%; padding:0 30px} } @media screen and (max-width:1200px){ #main .main_visual .main_text .inner{width:100%; padding:0 15px !important} } /** 추가 끝 **/ @media (max-width: 1216px){ /** .inner{ width: 100%; padding: 0 40px; } **/ /** #main .main_visual .main_text .inner{ width: 100%; padding: 0 40px; } **/ #header .gnb > ul > li > a{ font-size: 18px; } #header .gnb > ul > li{ padding: 13px 25px; } #header .gnb .sub_menu li a{ font-size: 16px; } #header .all_menu .wrap{ width: 100%; padding: 0 40px; } #sub .list_con .sub_title{ width: 100%; padding: 0 40px; } #sub.company .intro .con_wrap .img_box img{ width: 100%; max-width: 588px; } #sub.company .history .con_wrap > ul > li .year dl dt{ float:none; } #sub.company .history .con_wrap > ul > li .year dl dd{ float: none; width: 100%; } #sub.company .history:before{ display: none; } } @media (max-width: 1150px){ #sub.company .intro .con_wrap .img_box{ float: none; width: 100%; } #sub.company .intro .con_wrap .img_box img{ margin: 0 auto; } #sub.company .intro .con_wrap .text_box{ float:none; width: 100%; } #sub.recruiting .personnel .inner > ul > li .text_box ul li{ font-size: 15px; line-height: 30px; } #sub.contact #per div div{ width: 90%; margin: 0 auto; margin-top: 150px; } } @media (max-width: 1050px){ #header .gnb{ display: none; } #header .all_menu .box_wrap{ padding-left: 25px; padding-right: 25px; } #sub.company .history .con_wrap > ul > li .year dl dd{ font-size: 14px; line-height: 30px; } #sub.company .b_intro .con_01 .img_box{ float: none; width: 100%; max-width: 588px; margin: 0 auto; } #sub.company .b_intro .con_01 .img_box img{ max-width: 588px; margin: 0 auto; } #sub.company .b_intro .con_01 .text_box{ float: none; width: 100%; max-width: 588px; margin: 0 auto; } #sub.company .b_intro .con_02{ margin-top: 50px; padding-top: 50px; } #sub.company .b_intro .con_02 .map_img{ height: 400px; position: relative; overflow: hidden; } #sub.company .b_intro .con_02 .map_img img{ width: auto; height: 100%; position: absolute; top:0; left: 50%; transform: translate(-50%, 0); } #sub.recruiting .personnel .inner > ul > li .text_box ul li{ word-break: keep-all; } #sub.recruiting .personnel .inner > ul > li .text_box ul li br{ display: none; } } @media (max-width: 900px){ #sub.company .history .con_wrap > p{ font-size: 18px; line-height: 30px; word-break: keep-all; } #sub.company .history .con_wrap > ul > li .title_box .wrap strong{ font-size: 18px; } #sub.company .history .con_wrap > ul > li .title_box .wrap p{ font-size: 15px; } #sub.company .history .con_wrap > ul:before{ display: none; } #sub.company .history .con_wrap > ul > li .year dl dt{ display: inline-block; width: auto; padding-right: 15px; } #sub.company .history .con_wrap > ul > li .year dl dt br{ display: none; } #sub.company .history .con_wrap > ul > li{ width: 100%; position: relative; margin-right: 0; margin-bottom: 50px ;} #sub.company .history{ padding-bottom: 50px ;} #sub.company .history .con_wrap > ul > li .title_box{ z-index: 1; margin-bottom: 50px; height: 80px; } #sub.company .history .con_wrap > ul > li:before{ content: ""; width: 120%; height: 72px; position: absolute; left: -18%; top: 40px; background-color: #1096e4; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); z-index: -10; } #sub.ir .finance .table_wrap table tr th{ font-size: 14px; font-weight: 500; } #sub.ir .finance .table_wrap table tr td{ font-size: 13px; } #sub.ir .finance{ padding-bottom: 30px; } #sub .bo_list th.th_title{ width: 55%; } #sub.recruiting .personnel .inner > ul > li{ float: left; width: 100%; margin-bottom: 50px; } #sub.recruiting .personnel .inner > ul > li:nth-child(2){ margin-top: 0; float: right; text-align: right;} #sub.recruiting .personnel .inner > ul > li:nth-child(2) .img_box{ display: inline-block; } #sub.recruiting .personnel .inner > ul > li:nth-child(2) .text_box{ } } @media (max-width: 850px){ #header .all_menu{ background-color:#0c102b; border-top: 3px solid #00c256; width: 70%; left: auto; right: 0; } #header .all_menu .wrap{ transform: translate(0,0); position: static; } #header .all_menu strong{ display: none; } #header .all_menu .box_wrap{ border-top: none; background-color: transparent; } #header .all_menu .close_btn{ right: 5px; top: 40px; } #header .all_menu .box_wrap > ul > li{ float: none; width: 100%; text-align: left; margin-bottom: 30px; } #header .all_menu .box_wrap > ul > li > a{ margin-bottom: 15px; } #header .all_menu .box_wrap .sub_menu{ display: none; } #header .all_menu .box_wrap .sub_menu.on{ display: block; } #header .all_menu .box_wrap > ul > li > a:after{ width: 23px; height: 24px; background-size: 100% 100%; top: -17px; right: -22px; } } @media (max-width: 800px){ #sub .gallery .bo_gall ul li{ width: 48%; margin-right: 4%; } #sub .gallery .bo_gall ul li:nth-child(4n+0){ margin-right: 4%; } #sub .gallery .bo_gall ul li:nth-child(2n+0){ margin-right: 0; } #sub .bo_list th{ font-size: 14px; height: 48px; } #sub .bo_list td{ height: 48px; font-size: 14px;} #sub.contact #per div div{ margin-top: 100px; padding: 40px; } #sub.contact #per p{ font-size: 14px; line-height: 28px; } #sub.stock .stock_wrap .company{ float: none; width: 100%; margin-bottom: 20px; margin-right: 0; } #sub.stock .stock_wrap .price{ float: none; width: 100%; } #sub.stock .stock_wrap{ width: 100%; } } @media (max-width: 750px){ #sub .sub_con{ padding-top: 60px; } #sub .sub_con .sub_title{ margin-bottom: 40px; } #sub .sub_con .sub_title strong{ font-size: 24px; } #sub .sub_visual .sub_nav ul li{ height: 90px; } #sub .sub_visual .sub_nav ul li a{ font-size: 16px; } #sub .sub_visual{ height: 550px; } #sub .sub_visual .img_box img{ left: 50%; transform: translate(-50%, 0) scale(1.1); } #sub .sub_visual.on .img_box img{ transform: translate(-50%, 0) scale(1); } #sub .sub_visual .text_box strong{ font-size: 40px; margin-bottom: 60px; } #header .wrap{ padding: 0 20px; padding-top: 20px;} #header .logo img{ width: 130px; } #header .all_btn{ right: 20px; top: 25px; } #header .all_menu .close_btn{ right: -17px; top: 20px; width: 20px; height: 20px; background-size: 100% 100%; } .main_visual .main_slider .slide_box .main_img img{ position: absolute; left: 50%; top: 0; transform: translate(-50%,0);} .thum li{ width: 25px; height: 25px; } .thum li:before{ font-size: 12px !important;} .thum li.on:after{ width:35px; height: 35px; top: -7px; left: -7px; background-size: 100% 100%; } .thum_wrap{ right: 20px; } #main .main_visual .main_text .inner > ul > li{ width: 31.333333%; margin-right: 3%; } #main .main_visual .main_text .inner > ul > li:last-child{ margin-right: 0; } #main .main_visual .main_text .inner > ul > li a{ background-size: 100% 100% !important;} #main .main_visual .main_text .inner > ul{ width: 90%; margin: 0 auto; margin-top: 30px; } #sub.company .ceo .text_box > strong{ font-size: 20px; line-height: 32px; } #sub.company .ceo .text_box > p{ font-size: 14px; line-height: 28px; word-break: keep-all; } #sub.company .ceo .text_box .ceo_name p span{ font-size: 26px; } #sub.company .ceo{ padding-bottom: 150px; } #sub .gallery .bo_gall ul li .text_box{ padding-top: 15px; } #sub .gallery .bo_gall ul li .text_box strong{ font-size: 16px; line-height: 30px; height: 60px; } #sub.ir .finance .table_wrap > strong{ font-size: 18px; line-height: 28px; } #sub.ir .finance .table_wrap > span{ font-size: 13px; } #sub.contact .inquiry .bo_form .con_wrap label{ font-size: 14px; } #sub.contact .inquiry .bo_form .con_wrap input[type="text"]{ font-size: 13px; height: 48px; padding-left: 12px; } #sub.contact .inquiry .bo_form .con_wrap textarea{ font-size: 13px; line-height: 25px; } #sub.contact .inquiry .bo_form .chk_box label{ font-size: 14px; } #sub.contact .inquiry .bo_form .chk_box label button{ font-size: 14px; } #sub.contact #per div div{ padding: 40px 20px; } #sub.contact #per p{ font-size: 13px; line-height: 25px; } } @media (max-width: 640px){ #sub.ir .finance .table_wrap > p{ font-size: 13px; } #sub .bo_btn a{ width: 130px; height: 48px; line-height: 48px; font-size: 16px; } .web_img{ display: none; } .mo_img{ display: block; } #main .main_visual .main_text .inner > ul li:last-child a{ padding-top: 8px; } #main .main_visual .main_text .inner > ul > li a{ padding-top: 20px; } #main .main_visual .main_text .inner > ul > li{ height: 125px; } #main .main_visual .main_text .inner > ul > li a i img{ transform: scale(0.8);} #main .main_visual .main_text .inner > ul li a p{ font-size: 16px; margin-top: 5px; } #m_footer ul li{ font-size: 12px; line-height: 22px; } #m_footer .copy{ font-size: 12px; line-height: 22px; } #sub.company .intro .con_wrap .text_box{ padding-left: 0; padding-top: 30px; } #sub.company .intro .con_wrap .text_box strong{ font-size: 20px; line-height: 32px; } #sub.company .intro .con_wrap .text_box p{ font-size: 14px; line-height: 30px; } #sub.company .intro:before{ height: 300px; } #sub.company .vision { padding-bottom: 50px; } #sub.company .b_intro .con_02 .map_img{ height: 280px; } #sub.company .b_intro .con_02 .inner > strong{ font-size: 18px; margin-bottom: 15px; } #sub.company .b_intro .con_01 .text_box ul{ padding-left: 0; } #sub.company .b_intro .con_01 .text_box ul li strong{ font-size: 16px; line-height: 34px; } #sub.company .b_intro .con_01 .text_box ul li{ font-size: 16px; line-height: 34px; } #sub.company .b_intro .con_02{ background-size: contain; background-color: #f3f3f3; padding-bottom: 80px; } .inner{ padding: 0 20px; } #sub.ir .finance{ padding-bottom: 60px; } #sub.recruiting .con_wrap > strong{ font-size: 18px; margin-bottom: 15px; } #sub.recruiting .con_wrap > strong:before{ position: relative; top: 3px; } #sub.recruiting .con_wrap > p{ font-size: 13px; margin-top: 20px; } #sub.recruiting .con_wrap ul li{ font-size: 14px; line-height: 30px; } #sub.recruiting .con_wrap{ margin-bottom: 60px; } #sub.contact .notice{ padding-bottom: 70px; } #sub .bo_list td.td_title{ padding-left: 0; } #sub.public .table_wrap table tr th:nth-child(1){ width: 40px !important; } #sub.public .table_wrap table tr th:nth-child(2){ width: 80px !important; } #sub.public .table_wrap table tr th:nth-child(4){ width: 80px !important; } } @media (max-width: 540px){ #sub.company .intro{ padding-bottom: 100px; } #sub.company .intro .con_wrap .text_box p br{ display: none; } #sub.company .sub_nav ul li{ width: 33.33333%; background-color: rgba(0,0,18,0.4); height: 70px; } #sub .sub_visual .sub_nav ul li.on a:after{ margin-top: 10px; } #footer{ padding:30px 0; } #footer h1 { margin-bottom: 10px;} #footer h1 img{ width: 130px; } #footer ul li{ font-size: 12px; line-height: 22px; } #footer .copy{ font-size: 12px; line-height: 22px; } #footer .scroll{ right: 15px; bottom: 15px; } #footer .scroll button img{ width: 42px; } #sub.company .history .con_wrap > p{ font-size: 14px; line-height: 30px; margin-bottom: 30px; } #sub.company .history .con_wrap > ul > li .title_box{ width: 70%; } #sub.company .history .con_wrap > ul > li .title_box .wrap{ left: -4%; } #sub.ir .finance .table_wrap table tr td.right_t.red_c{ padding-right: 0; text-align: center; } #sub.ir .finance .table_wrap table tr td{ font-size: 11px; } #sub.ir .finance .table_wrap table tr th{ font-size: 12px; } #sub.ir .finance .table_wrap table tr td.right_t{ text-align: center; padding-right: 0; } #sub .list_con .sub_title strong{ font-size: 18px; line-height: 32px; margin-bottom: 10px; } #sub .list_con .sub_title{ margin-bottom: 20px; } #sub .list_con .sub_title span{ font-size: 13px; } #sub.recruiting .personnel .inner > ul > li .text_box{ margin-top: 20px; } #sub.recruiting .personnel .inner > ul > li .text_box ul li{ font-size: 14px; line-height: 28px; } #sub.recruiting .personnel .inner > ul > li .text_box strong{ font-size: 18px; } #sub.recruiting .personnel .inner > ul > li{ margin-right: 0; } #sub.recruiting .personnel{ padding-bottom: 60px; } #sub.contact .inquiry .bo_form .form_wrap{ float: none; width: 100%; margin-right: 0; } #sub.contact .inquiry .bo_form .send_b a{ width: 100%; height: 50px; line-height: 46px; font-size: 16px; } #sub.contact .inquiry .bo_form .send_b a i{ top: 2px; } #sub.contact .inquiry .bo_form .send_b{ margin-top: 40px; } #sub.contact .inquiry{ padding-bottom: 60px; } #sub.contact .inquiry .bo_form .form_wrap{ margin-bottom: 20px; } } @media (max-width: 414px){ #main .main_visual .main_text .inner > strong{ font-size: 38px; line-height: 52px; } #main .main_visual .main_text .inner > p{ font-size: 16px; line-height: 30px; word-break: keep-all; } #main .main_visual .main_text .inner{ padding: 0 20px; } #main .main_visual .main_text .inner > ul{ margin: 0; margin-top: 30px; } #main .main_visual .main_text{ top: 45%; } .thum_wrap{ right: 10px; } #main .main_visual .main_text .inner > ul > li a i img{ transform: scale(0.6);} #main .main_visual .main_text .inner > ul li a p{ font-size: 14px; } #header .all_menu .box_wrap > ul > li > a{ font-size: 16px; } #header .all_menu .wrap{ padding: 0; } #header .all_menu .box_wrap .sub_menu li a{ font-size: 14px; } #header .all_menu .box_wrap .sub_menu li{ line-height: 30px; } #header .all_menu .close_btn{ right: 20px; } .inner{ padding: 0 20px; } #sub.company .b_intro .con_01 .text_box h1 img{ width: 220px; } #sub .sub_visual .img_box{ overflow: hidden; height: 100%; } #sub .sub_visual{ height: 390px; } #sub .sub_visual .text_box strong{ font-size: 32px; margin-bottom: 40px; } #sub.company .intro .con_wrap .text_box strong{ margin-bottom: 25px ;} #sub.company .intro .con_wrap .text_box p{ margin-bottom: 20px; } #sub.company .b_intro .con_01 .img_box:before{ display: none; } #footer{ background-size: 100%; } #sub .bo_list td{ font-size: 12px;} #sub .bo_list th.th_title{ width: 50%; } #sub.recruiting .personnel .inner > ul > li:nth-child(2){ margin-top: 0; float: left; text-align: left;} #sub.recruiting .personnel .inner > ul > li:nth-child(2) .img_box{ display: block; } #sub.recruiting .personnel .inner > ul > li .text_box{ padding-left: 0; } #sub.company .sub_nav ul li{ height: 58px; } #sub .sub_visual .sub_nav ul li{ height: 58px; } } @media (max-width: 375px){ #sub .bo_btn a{ font-size: 14px; width:110px; height: 40px; line-height: 40px; } #main .main_visual .main_text .inner > p{ font-size: 14px; line-height: 28px; } #sub.company .b_intro .con_01 .text_box ul li strong{ font-size: 14px; width: 80px; } #sub.company .b_intro .con_01 .text_box ul li{ font-size: 14px; } #sub.company .b_intro .con_02 .map_img{ height: 220px; } }