/* start : sub_visual*/ .clearfix { display:block; clear:both; } .mo_br { display:block; } p { letter-spacing:-0.6px; word-break: keep-all; } span { letter-spacing:-0.6px; } .sub .visual { width:100%; height:350px; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat; } .sub .visual::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); } .sub .visual { background-image:url(../img/sub_visual_01.jpg); } .sub02 .visual { background-image:url(../img/sub_visual_01.jpg); } .sub03 .visual { background-image:url(../img/sub_visual_01.jpg); } .sub04 .visual { background-image:url(../img/sub_visual_01.jpg); } #product01 .visual { background-image:url(../img/sub_visual_01.jpg); } #product03 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_list01 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_list02 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_webzine01 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_webzine02 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_gallery01 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_gallery02 .visual { background-image:url(../img/sub_visual_01.jpg); } #board_gallery03 .visual { background-image:url(../img/sub_visual_01.jpg); } .visual .text_box { position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:9; } .visual .text_box h2 { font-size:3em; font-weight:bold; color:#333; color:#fff; } .visual .text_box p { font-size:1em; font-weight:400; color:#333; padding-top:5%; color:#f6f6f6; } /*end:sub_visual*/ .sec { width:100%; } .sec .inner { width:1240px; padding:0 20px; margin:0 auto; position:relative; } .sub .title { font-size:3em; font-weight:bold; color:#333; text-align:center; padding:5% 0; } /* sec01 : start */ #company .sec {width:100%} #company .sec01 {border-bottom:1px solid #eee;} #company .sec01 article { margin:0 auto; padding:100px 0 0 0; } #company .sec01 .wrap {} #company .sec01 .txt_box {text-align:center;} #company .sec01 .txt_box p {font-size:14px;color: rgb(158, 131, 90);font-weight:400;} #company .sec01 .txt_box h2 {padding-top:10px;font-size:32px;} #company .sec01 .txt_box h2 .mo_br {display:block;} #company .sec01 .txt_box strong { padding:20px 0 50px 0; display:block; font-size:14px; color:#6f6f6f; font-weight:400; word-break: keep-all; } #company .sec01 .txt_box .mo_br {display:block;} #company .sec01 .img_box {text-align:center; width:100%;} #company .sec01 .img_box img {max-width:100%; padding: 5px; margin-bottom: 50px;} /* sec01 : end */ /* sec02 : start */ #company .sec02 {} #company .sec02 .wrap {padding:100px 0 350px 0;width:1200px;margin:0 auto;} #company .sec02 .wrap .txt_box {text-align:center;} #company .sec02 .wrap .txt_box p {font-size:14px;color: rgb(158, 131, 90);font-weight:400;} #company .sec02 .wrap .txt_box h2 {padding-top:10px;font-size:32px;word-break: keep-all;} #company .sec02 .wrap .icon_box {padding-top:77px;} #company .sec02 .wrap .icon_box ul { display: flex; flex-wrap: wrap; justify-content: space-between; } #company .sec02 .wrap .icon_box ul>li { width: calc(33.333% - 10px ); display:block; position:relative; height:160px; } #company .sec02 .wrap .icon_box i {font-size:54px;position:absolute;top:0;left:0;color:#444444f2;} #company .sec02 .wrap .icon_txt {padding-left:75px;} #company .sec02 .wrap .icon_box strong {font-size:15px;color:#000;font-weight:600;} #company .sec02 .wrap .icon_box p { word-break: keep-all; padding-top:7px;font-size:15px;color:#6f6f6f;font-weight:400;line-height:25px;} #company .sec02 .wrap .icon_box .mo_br {display:block;} /* sec02 : end */ /* sec03 : start */ #company .sec03 {} #company .sec03 article {width:1240px;margin:0 auto;padding:100px 0;} #company .sec03 .content3_wrap { width:100%; overflow:hidden; display: flex; justify-content: space-between; flex-wrap: wrap; } #company .sec03 .content3_wrap .img_box {width:50%;} #company .sec03 .content3_wrap .img_box img {width:100%;height:100%;} #company .sec03 .content3_wrap .txt_box {position:relative;;width:50%;padding-left:100px;} #company .sec03 .content3_wrap .txt_box h2 {font-size:32px;font-weight:600;margin-bottom:30px;padding-top:40px;line-height:40px;} #company .sec03 .content3_wrap .txt_box i {font-size:25px;padding-right:10px;} #company .sec03 .content3_wrap .txt_box ul {} #company .sec03 .content3_wrap .txt_box ul li {font-size:14px;position: relative;padding:0 0 10px 0;margin: 0 0 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);line-height:24px;color:#6f6f6f;font-weight:400;} #company .sec03 a{display:inline-block;border:1px solid #000;margin-top:25px;border-radius:5px;padding:5px 25px 5px 20px;font-size:11px;letter-spacing:1px;background:#000;color:#fff;font-weight:300;vertical-align:middle;transition:0.6s;transition-timing-function: ease-in-out;} #company .sec03 a:before {content:"\ea3f";;display:inline-block;font-family: xeicon;font-size:25px;vertical-align:middle;padding-right:10px;} #company .sec03 a:hover {background:#fff;color:#000} /* sec03 : end */ /* sec04 : start */ /* #company .sec04 {padding:0 150px 0;} #company .sec04 article {width:1300px;margin:0 auto;} #company .sec04 ul { width: 100%; color: #fff; text-align: center; margin-top: 0; } #company .sec04 li { float: left; width: 25%; list-style: none; color:#000; position:relative; } #company .sec04 .counter_txt {} #company .sec04 h2 {font-size:32px;position:relative;} #company .sec04 p {display:block;} #company .sec04 .icon {font-size:52px;display:inline;position:absolute;top:5px;left:50px;color:#939393} */ /* sec04 : end */ /* sec04 : start */ #company .sec04 {overflow:hidden;} #company .sec04 article {} #company .sec04 .wrap { display: flex; } #company .sec04 .tab_wrap {background-color:#eee} #company .sec04 .left {float:left;width:50%;} #company .sec04 .tab_inner {padding:120px 60px;height:700px;} #company .sec04 .tab_inner .tab_txt {} #company .sec04 .tab_inner .tab_txt h2{font-size:38px;font-weight:200;} #company .sec04 .tab_inner .tab_txt .mo_br{display:block;} #company .sec04 .tab_inner .tab_txt strong {display:block;padding-bottom:30px;} #company .answer { display: none; font-size:16px; font-weight:500; color:#333; padding-bottom: 30px; word-break: keep-all; } #company .answer.on { display:block; } #company #faq-title { font-size: 25px; } #company .faq-content { border-bottom: 1px solid #e0e0e0; } #company .question { font-size: 19px; padding: 30px 0; cursor: pointer; border: none; outline: none; background: none; width: 100%; text-align: left; } #company .question:hover { color: rgb(158, 131, 90); } [id$="-toggle"] { margin-right: 15px; } #company .sec04 .right {width: 70%;} #company .sec04 .right img {width:100%;height: 100%;} /* sec04 : end */ /* sec05 : start */ #company .sec05 {background-color:#fff;padding:100px 0 500px 0;} #company .sec05 article {text-align:center;width:1200px;margin:0 auto;} #company .sec05 article h2 {font-size:35px;font-weight:800;} #company .sec05 article p {padding-top:20px;font-size:15px;font-weight:200;} #company .sec05 article .mo_br {display:block;} #company .sec05 .wrap {} #company .sec05 .box_wrap {padding-top:100px;} #company .sec05 .box_wrap .row {} #company .sec05 .box_wrap ul {} #company .sec05 .box_wrap ul>li {display:block;float:left;width:23%;margin:0 10px;cursor:pointer;} #company .sec05 .icon_wrap {background-color:#f6f6f6;height: 100% !important;position:relative;padding:18% 0; } #company .sec05 .box_wrap i {font-size:50px;border:1px solid #333;background-color:#333;border-radius:50%;padding:20px;color:#fff;} #company .sec05 .box_wrap .txt_box {padding-top:30px;} #company .sec05 .box_wrap .txt_box strong {font-size:15px;} #company .sec05 .box_wrap .txt_box p {color:#6f6f6f;line-height:24px;font-size:14px;font-weight:200;} #company .sec05 .deep {bottom:0;left:0;right:0;width:100%;height:30px;position:absolute;transition:0.3s;background-color:#333;} #company .sec05 .deep p {padding-top:5px;color:#fff;} #company .sec05 .deep strong {opacity:0;padding-top:5px;color:#fff;} #company .sec05 .box_wrap ul>li:hover .deep p, #company .sec05 .box_wrap ul>li:hover .deep strong {padding-top:150px;} #company .sec05 .box_wrap ul>li:hover .deep strong {opacity:1;transition:0.3s;} #company .sec05 .box_wrap ul>li:hover .deep {height:100%;color:#fff;z-index:999999;} /* sec05 : end */ /* sec06 : start */ .sec06 {padding:0;width:1800px;margin:0 auto;} .sec06 .content7_wrap{width:100%;text-align:left;} .sec06 .content7_wrap .ul_box {} .sec06 .content7_wrap .ul_box ul { display: grid; grid-template-columns: repeat(3,1fr); } .sec06 .content7_wrap .ul_box ul li { width:auto; padding:70px 50px; height:423px; } .sec06 .content7_wrap .ul_box ul li:nth-child(1), .sec06 .content7_wrap .ul_box ul li:nth-child(3) { background-color:#000; color:#6f6f6f; } .sec06 .content7_wrap .ul_box ul li:nth-child(2) {background-color:#333;} .sec06 .content7_wrap img {width:100%;height:100%;} .sec06 .content7_wrap .ul_box ul li span {line-height:40px;color:#939393;} .sec06 .content7_wrap .ul_box ul li h2 {font-size:22px;color:#d6d5d5;line-height:30px;} .sec06 .content7_wrap .ul_box ul li p {padding-top:10px;color:#939393;} .sec06 .content7_wrap a {color:#fff;font-size:14px;border:2px solid #fff;border-radius:5px;padding:8px 20px;display: inline-block;margin-top:20px;transition:0.6s;transition-timing-function: ease-in-out;} .sec06.content7_wrap i {padding-right:5px;} .sec06 .content7_wrap a:hover {background-color:#fff;color:#000;} /* sec06 : end */ /* sec07 : start */ #company .sec07 {padding:100px 0 100px 0;border-top:1px solid #888;} #company .sec07 article {text-align:center;} #company .sec07 .pj {} #company .sec07 h2 {font-size:32px;font-weight:800;} #company .sec07 p {padding-top:5px;font-size:14px;font-weight:400;color:#464646} #company .sec07 a {display:inline-block;border:2px solid #464646;padding:10px 15px;margin-top:30px;font-size:13px;transition:0.4s;border-radius:5px} #company .sec07 a:hover {color:#fff;background:#464646;} /* sec07 : end */ @media (max-width:1200px) { #company .sec02 .wrap{ width: 90%; margin: 0 auto; } #company .sec04 .tab_inner{ padding: 150px 50px; } #company .sec04 .tab_inner .tab_txt h2{ font-size: 32px; } #company .sec02 .wrap .icon_box ul{ width: 80%; margin: 0 auto; } #company .sec02 .wrap .icon_box ul>li{ width: calc(50% - 10px); } } @media (max-width:1080px) { #company .sec02 .wrap{ padding: 120px 0; } #company .sec03 .content3_wrap .img_box {width:55%;} #company .sec03 .content3_wrap .txt_box {width:100%;padding:0 40px;} .sec06 .content7_wrap .ul_box ul li{ padding: 50px 20px; } #company .sec04 .tab_inner .tab_txt h2{ font-size: 28px; } .sec06 .content7_wrap .ul_box ul li h2{ font-size: 20px; } } /* [media 900px] */ @media screen and (max-width:900px) { /* sec01 : start */ #company .sec01 article {width:100%;padding:100px 0 0;} #company .sec01 .txt_box {padding:0 35px;} #company .sec01 .txt_box p {font-size:12px;color:#ddd;font-weight:400;} #company .sec01 .txt_box h2 {padding-top:10px;font-size:20px;} #company .sec01 .txt_box strong {font-size:12px;} #company .sec01 .txt_box .mo_br {display:inline;} #company .sec01 .img_box {width:100%;} #company .sec01 .img_box img {width:100%;} /* sec01 : end */ /* sec02 : start */ #company .sec02 .wrap {width:100%;padding:50px 0;} #company .sec02 .wrap .txt_box p {font-size:11px;color:#ddd;} #company .sec02 .wrap .txt_box h2 {padding-top:10px;font-size:20px;} #company .sec02 .wrap .icon_box {padding-top:60px;} #company .sec02 .wrap .icon_box i {position:relative;width:100%;margin:0 auto;text-align:center;padding-bottom:20px;} #company .sec02 .wrap .icon_txt {text-align:center;padding-left:0;} #company .sec02 .wrap .icon_box strong {font-size:12px;} #company .sec02 .wrap .icon_box p {font-size:12px;} /* sec02 : end */ /* sec03 : start */ #company .sec03 {} #company .sec03 article {width:100%;padding:50px 0;} #company .sec03 .content3_wrap .txt_box h2 {font-size:20px;line-height:30px;} #company .sec03 .content3_wrap .txt_box ul li {font-size:13px} #company .sec03 a {font-size:10px;padding:5px 12px 5px 10px;margin-top:15px;} /* sec03 : end */ /* sec04 : start */ #company .sec04 article {width:100%;} #company .sec04 ul {width:100%} #company .sec04 li {float:none;width:100%;padding:40px 0;position:relative;} #company .sec04 li:after {content:"";display:block;width:1px;margin:0 auto;height:30px;background:#333;margin-top:10px;} #company .sec04 .icon {position:static;} #company .sec04 h2 {font-size:30px;} /* sec04 : end */ /* sec04 : start */ #company .sec04 {} #company .sec04 .left {float:none;width:100%;} #company .sec04 .tab_inner {padding:50px 50px;height: auto;} #company .sec04 .tab_inner .tab_txt h2{font-size:25px;font-weight:200;} #company .question {font-size:14px;padding:23px 0;} #company .sec04 .right {float:none;width:100%;margin:0 auto;display:block;} /* sec04 : end */ /* sec05 : start */ #company .sec05 {padding:100px 0;} #company .sec05 article {width:100%;} #company .sec05 .box_wrap {padding-top:20px;} #company .sec05 article h2 {font-size:30px;} #company .sec05 article p {font-size:12px;} #company .sec05 .box_wrap ul>li {float:none;width:75%;margin:0 auto;padding-top:50px;} #company .sec05 .box_wrap .txt_box strong {font-size:15px;} #company .sec05 .box_wrap .txt_box p {font-size:12px;line-height:20px;} #company .sec05 .icon_wrap {padding:13% 26px;} #company .sec05 .box_wrap i {font-size:30px;padding:15px;} /* sec05 : end */ /* sec06 : start */ #company .sec06 {padding:0;width:100%;margin:0 auto;} #company .sec06 .content7_wrap{width:100%;text-align:center;} #company .sec06 .content7_wrap .ul_box {} #company .sec06 .content7_wrap .ul_box ul {} #company .sec06 .content7_wrap .ul_box ul li {width:100%;height:auto;overflow:hidden;} #company .sec06 .content7_wrap .ul_box ul li span {line-height:40px;font-size:12px;} #company .sec06.content7_wrap .ul_box ul li h2 {font-size:17px;line-height:23px;} #company .sec06 .content7_wrap .ul_box ul li p {padding-top:10px;font-size:10px;} #company .sec06 .content7_wrap a {font-size:14px;border:2px solid #fff;border-radius:5px;padding:8px 20px;display: inline-block;margin-top:20px;transition:0.6s;transition-timing-function: ease-in-out;} #company .sec06 .content7_wrap i {padding-right:5px;} /* sec06 : end */ /* sec07 : start */ #company .sec07 h2 {font-size:25px;} /* sec07 : end */ #company .sec04 .wrap{ flex-wrap: wrap; } } @media screen and (max-width:768px) { #company .sec06 .content7_wrap .ul_box ul{ grid-template-columns: repeat(1,1fr); } } @media screen and (max-width:500px) { #company .sec03 .content3_wrap .img_box { width: 100%; } #company .sec02 .wrap .icon_box ul{ width: 90%; row-gap: 20px; } #company .sec02 .wrap .icon_box ul > li{ margin-bottom: 10px; } #company .sec01 .txt_box h2{ font-size: 18px; } #company .sec02 .wrap .icon_box strong { font-size: 16px; word-break: keep-all; } } @media screen and (max-width:375px) { #company .sec01 .txt_box{ padding: 0 20px; } } @media screen and (max-width:350px) { #company .sec02 .wrap .icon_box ul{ width: 100%; row-gap: 50px; } } @media screen and (max-width:320px) { #company .sec01 .txt_box h2{ font-size: 16px; } } /* */ #history .sec { height: auto; } #history .sec .sec1 { position: relative; } #history .sec1 .inner { width:1240px; margin:0 auto; padding:8% 20px; position: relative; } /* */ .sec .sec1 .history_wrap { width: 100%; height: auto; padding:0px; } .sec1 .historyBox { width: 100%; height: auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding-bottom: 190px; } .history_wrap .historyBox .history_left { width:50%; height: auto; } .history_wrap .historyBox .history_left .desc { display: block; margin: 5px 0 10px; font-size: 13px; color: grey; font-weight: 300; } .history_wrap .historyBox .history_left>p { font-size: 20px; font-weight: 600; color: #8c8c8c; margin:5px 0 10px; } .history_wrap .historyBox .history_left img { width:100%; } .history_wrap .historyBox .history_left>h3 { font-size:56px; font-weight: 900 } .history_wrap .historyBox .history_right { width:46%; height: auto; padding-left:4%; } .history_wrap .historyBox .history_right .list { width: 100%; height: auto; position: relative; } .history_wrap .historyBox .history_right .list .history_00 { width: 100%; height: auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbx; display: flex; } .history_wrap .historyBox .history_right .list .history_css { padding-bottom: 0; } .history_wrap .historyBox .history_right .history_00 .year { width: 20%; height: auto; line-height: 32px; position: relative; } .history_wrap .historyBox .history_right .history_00 .year::after { content: ""; position: absolute; right: 27.5%; top:10px; width: 10px; height: 10px; border-radius: 50%; background-color: #e3dee3; display: block; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .history_wrap .historyBox .history_right .history_00.on .year:after { background-color:#c71526; } .history_wrap .historyBox .history_right .history_00 .year>span { font-size: 20px; font-weight: 600; } .history_wrap .historyBox .history_right .history_00 .info { font-size: 20px; font-weight: 300; width: 80%; height: auto; } .history_wrap .historyBox .history_right .history_00 .info>p { font-size: 18px; font-weight: 200; color: #686868; line-height: 30px; letter-spacing: -0.05em; padding-bottom: 46px; } .history_wrap .historyBox .history_right .line { overflow: hidden; position: absolute; left: 14.5%; top: 0; z-index: 1; margin-left: -6px; margin-top: 10px; width: 2px; height: 95%; background-color: #e3dee3; } .history_wrap .historyBox .history_right .line .bar { display: block; width: 2px; height: 0; background-color:#c71526; -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .history_wrap .history_03 .history_right .line { height: 88%; } .history_wrap .history_05 { padding: 0 !important; } /*history : end */ /* s:vision */ #vision .sec1 { background-color:#f6f6f6; } #vision .sec1 .inner{ width:1240px; padding:3% 20px; margin:0 auto; position:relative; } #vision .sec1 .visionBox { height:600px; position:relative; background-color:#fff; } #vision .sec1 .circle { width:270px; height:270px; border-radius:50%; background-color:rgba(237,27,35,0.5); position:absolute; top:50%; left:50%; transform:translate(-50%,-65%); } #vision .sec1 .text_box:hover .list1 { left:10%; transition:all 0.6s; } #vision .sec1 .text_box:hover .list2 { right:10%; transition:all 0.6s; } #vision .sec1 .text_box:hover .list3 { bottom:-3%; transition:all 0.6s; } @keyframes circle { 100% { transform: rotate(360deg); } } #vision .sec1 .visionBox .circle::after { content:''; width:350px; height:350px; position:absolute; top:-38px; left:-40px; background-image:url(../img/vision_img01.png); background-size:cover; background-position:center; background-repeat:no-repeat; animation:circle 6s linear infinite; transform-origin:50% 50%; opacity:0.5; } #vision .sec1 .circle p { display:block; width:240px; height:240px; border-radius:50%; background-color:#ed1b23; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); cursor: pointer; } #vision .sec1 .circle span { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; justify-items:center; align-items:center; text-align:center; font-size:2.2em; font-weight:bold; color:#fff; position:relative; } #vision .sec1 .text_box li { position:absolute; z-index:9; cursor: pointer; } #vision .sec1 .text_box .list1 { display:flex; top:15%; left:12.5%; } #vision .sec1 .text_box .list2 { display:flex; top:15%; right:12.5%; } #vision .sec1 .text_box .list3 { left:50%; transform:translateX(-50%); bottom:3%; } #vision .sec1 .list1 .txtBox { height:130px; display:flex; flex-direction:column; justify-content:center; justify-items:center; text-align:right; padding-right:20px; } #vision .sec1 .list2 .txtBox { height:130px; display:flex; flex-direction:column; justify-content:center; justify-items:center; text-align:left; padding-left:20px; } #vision .sec1 .list3 .txtBox { padding-top:20px; text-align:center; } #vision .sec1 .titBox div { border:2px solid #ed1b23; box-sizing:border-box; width:130px; height:130px; border-radius:50%; background-color:#fff; margin:0 auto; } #vision .sec1 .titBox p{ height:130px; display:flex; flex-direction:column; justify-items:center; justify-content:center; text-align:center; } #vision .sec1 .titBox strong { display:block; font-size:18px; font-weight:bold; color:#f22830; } #vision .sec1 .titBox span { display:block; font-size:12px; font-weight:400; color:#848484; } #vision .sec1 .txtBox p { font-size:16px; font-weight:500; color:#333; letter-spacing:-0.6px; line-height:1.4; } #vision .sec2 .tit { font-size:2.5em; font-weight:bold; color:#333; text-align:left; padding:5% 0 2% 0; display:block; } #vision .sec2 .txt { font-size:18px; font-weight:400; color:#333; text-align:left; display:block; } #vision .sec2 ul { display:flex; justify-content:center; justify-content: space-between; padding:4% 0; } /* e:vision */ /* s:map */ #map .sec1 { width:100%; } #map .sec1 .inner { width:1240px; height:100%; padding:5% 20px; margin:0 auto; position: relative; overflow: hidden; } #map .sec1 .root_daum_roughmap { width:100%; height:400px; } .root_daum_roughmap .wrap_map { height:100%; } .root_daum_roughmap .wrap_controllers { display:none; } #map .sec1 .map_info { width:100%; padding:4% 2%; background: #f5f5f5; position: relative; border-top: 1px solid #ccc; word-break: keep-all; display:flex; } #map .sec1 .map_info .lf_box { height:143px; display:flex; flex-direction:column; justify-content:center; justify-items:center; margin-right:50px; cursor: pointer; } #map .sec1 .map_info .lf_box:hover span{ background-color:#333; border:none; } #map .sec1 .map_info .lf_box span { width:100px; height:100px; text-align:center; border-radius:50%; border:2px solid #333; box-sizing:border-box; } #map .sec1 .map_info .lf_box:hover i { color:#fff; } #map .sec1 .map_info .lf_box i { line-height:100px; font-size:4em; color:#333; } #map .sec1 .map_info .rt_box { height:100%; } #map .sec1 .map_info strong { font-size:1.8em; font-weight:bold; color:#333; display:block; padding-bottom:10px; } #map .sec1 .map_info p { font-size:18px; margin-bottom:8px; } #map .sec1 .map_info span { display:inline-block; } #map .sec1 .map_info p span:nth-child(1) { font-weight:bold; color:#333; width:100px; position: relative; } #map .sec1 .map_info p span:nth-child(1)::after { content:''; position:absolute; top:5px; right:0; width:1px; height:20px; background-color:#6a6a6a; } #map .sec1 .map_info p span:nth-child(2) { font-weight:400; color:#6a6a6a; padding-left:10px; } #map .timapBox { border:1px solid red; position:absolute; top:-10%; right:10%; z-index:1; } #map .topBox { height:100%; display:flex; justify-content: space-between; } #map .topBox > div { width:49%; } #map .infoBox .titBox { padding:40px 0 20px 0; display:flex; } #map .infoBox .titBox p { display:flex; flex-direction:column; justify-content:center; } #map .infoBox .titBox i { font-size:4em; color:#333; } #map .infoBox .titBox .text { font-size:16px; font-weight:500; color:#333; padding-left:10px; } #map .infoBox ul { width:100%; height:330px; border:1px solid #ccc; box-sizing:border-box; padding:20px; } #map .infoBox1 ul li { display:flex; margin-bottom:10px; } #map .infoBox1 ul li .line { display:inline-block; border-radius:50%; width:32px; height:32px; text-align:center; } #map .infoBox1 ul li .line span { display:inline-block; line-height:22px; font-size:14px; font-weight:bold; color:#16a381; } #map .infoBox1 ul li .line2 { border:4px solid #16a381; } #map .infoBox1 ul li .line2 span{ color:#16a381; } #map .infoBox1 ul li .line3 { border:4px solid #f69c11; } #map .infoBox1 ul li .line3 span{ color:#f69c11; } #map .infoBox1 ul li .line1 { border:4px solid #1a3cea; } #map .infoBox1 ul li .line1 span{ color:#1a3cea; } #map .infoBox1 ul li .tit { height:32px; line-height:32px; font-size:14px; font-weight:400; color:#333; width:120px; padding-left:10px; } #map .infoBox1 ul li .txt { height:32px; line-height:32px; font-size:14px; font-weight:400; color:#333; } #map .infoBox2 ul li { padding-bottom:30px; } #map .infoBox2 dt { font-size:1.3em; font-weight:bold; color:#333; padding-bottom:20px; } #map .infoBox2 dd { font-size:1.1em; font-weight:400; color:#333; padding-bottom:5px; } /* e:map */ /* s:bussiness1 */ #business01 { overflow: hidden; } #business01 .sec1 ul{ display:flex; width:100%; padding:5% 0; } #business01 .sec1 ul li { width:30%; margin-right:5%; } #business01 .sec1 ul li:last-child { margin-right:0; } #business01 .sec1 dl { cursor: pointer; padding:5%; word-break: keep-all; } #business01 .sec1 dl dt { font-size:21px; font-weight:bold; color:#333; padding-bottom:10px; position: relative; } #business01 .sec1 dl:hover dt::after{ /* opacity:1; transition:0.6s; */ } #business01 .sec1 dl dt::after { content:''; position:absolute; left:0; bottom:5px; width:150px; height:2px; background-color:#c71526; z-index:1; opacity:0; } #business01 .sec1 dl dd { font-size:16px; font-weight:400; color:#333; line-height:1.6; letter-spacing:-0.6px; } #business01 .sec2 { background-color:#f6f6f6; padding:5% 0; } #business01 .sec2 .inner { /*min-height:500px;*/ } #business01 .sec2 .text_box { padding-bottom:4%; } #business01 .sec2 .text_box h2 { font-size:3em; font-weight:bold; color:#333; text-align:center; padding-bottom:5px; } #business01 .sec2 .text_box p { font-size:1.3em; font-weight:600; color:#333; text-align:center; } #business01 .sec2 ul { display: flex; flex-direction:row; justify-content: space-around; flex-wrap: wrap; } #business01 .sec2 ul li { /*float:left;*/ width:30%; /*margin-right:5%;*/ /*height:120px;*/ display:flex; flex-direction:column; cursor: pointer; } #business01 .sec2 ul li img { width:100%; } /* #business01 .sec2 ul li:hover { margin-top:-10px; transition:all 0.6s; } */ #business01 .sec2 ul li:nth-child(3n){ margin-right:0; } /* #business01 .sec2 ul li .icon { width:20%; } #business01 .sec2 ul li .icon i { font-size:4em; color:#333; } */ #business01 .sec2 ul li dl { width:80%; } #business01 .sec2 ul li dl dt { font-size:18px; font-weight:bold; color:#333; padding-bottom:8px; } #business01 .sec2 ul li dl dd { font-size:14px; font-weight:400; color:#656565; line-height:1.2; } #business01 .sec3 { width:100%; padding:50px 0; } #business01 .sec3 .inner { height:100%; } #business01 .sec3 .text_box { } #business01 .sec3 .text_box h3{ font-size:3em; font-weight:400; color:#333; text-align:center; padding-bottom:40px; } #business01 .sec3 .text_box h3 strong { font-weight:bold; display:block; position:relative; z-index:2; } #business01 .sec3 .text_box h3 strong::after { content:''; position:absolute; left:50%; margin-left:-75px; bottom:5px; width:150px; height:10px; background-color:rgba(199,21,38,0.5); z-index:-1; } #business01 .sec3 .text_box p { font-size:16px; font-weight:400; color:#939393; text-align:center; line-height:1.3; } #business01 .sec3 .inner a { width:150px; height:40px; line-height:40px; border:1px solid #939393; box-sizing:border-box; display:block; margin:40px auto; } #business01 .sec3 .inner a:hover { border:none; background-color:#d32f2f } #business01 .sec3 .inner a:hover span { font-weight:bold; color:#fff; } #business01 .sec3 .inner a span { font-size:1.2em; font-weight:400; color:#939393; text-align:center; display:block; } #business01 .sec4 { width:100%; height:500; overflow: hidden; } #business01 .sec4 .inner { display:flex; padding:0 !important; } #business01 .sec4 .lfBox { width:50%; height:500px; } #business01 .sec4 .rtBox { width:50%; height:500px; background-color:rgb(36, 36, 36); } #business01 .sec4 .text_box { display:flex; flex-direction:column; height:100%; justify-content:center; justify-items:center; } #business01 .sec4 .inner h4 { font-size:3em; font-weight:bold; color:#333; padding-bottom:30px; text-align:center; } #business01 .sec4 .inner p { font-size:16px; font-weight:300; color:#939393; text-align:center; } #business01 .sec4 .inner a { width:150px; height:40px; line-height:40px; border:1px solid #939393; box-sizing:border-box; display:block; margin:40px auto; } #business01 .sec4 .inner a:hover { border:none; background-color:#d32f2f } #business01 .sec4 .inner a:hover span { font-weight:bold; color:#fff; } #business01 .sec4 .inner a span { font-size:1.2em; font-weight:400; color:#939393; text-align:center; display:block; } #business01 .sec5 { width:100%; padding:5% 0; background-color:#f6f6f6; } #business01 .sec5 .text_box { text-align:center; padding-bottom:50px; } #business01 .sec5 .text_box h5 { font-size:3em; font-weight:400; color:#333; padding-bottom:30px; } #business01 .sec5 .text_box h5 strong { display:block; font-weight:bold; position:relative; z-index:2; } #business01 .sec5 .text_box h5 strong::after { content:''; position:absolute; left:50%; margin-left:-75px; bottom:5px; width:150px; height:10px; background-color:rgba(199,21,38,0.5); z-index:-1; } #business01 .sec5 .text_box p { font-size:16px; font-weight:400; color:#333; text-align:center; } /* li 둥근 테두리 만들고 삼각형으로 방향 만들기 */ #business01 .sec5 ul { display: flex; flex-direction: row; /* 가로 정렬 */ justify-content: center; align-items: center; gap: 5%; /* 요소 간 간격 (가변 %) */ list-style: none; padding: 0; } #business01 .sec5 ul li { position: relative; width: 23%; /* 4개 배치 시 적당한 너비 */ aspect-ratio: 1 / 1; /* 가로세로 1:1 유지 */ border: 1px solid #939393; border-radius: 50%; /* 원형 유지 */ display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; text-align: center; padding: 35px; box-sizing: border-box; background: #fff; font-size: 15px; font-weight: 400; word-break: keep-all; overflow-wrap: break-word; } /* 아이콘 이미지 css */ #business01 .sec5 ul li img { max-width: 55px; margin-bottom: 10px; } /* 우측 방향 삼각형 (기본) */ #business01 .sec5 ul li:not(:last-child)::after { content: ''; position: absolute; right: -15%; /* gap 공간 중앙에 배치 */ top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #939393; } /* e:bussiness1 */ /* s:bussiness2 */ #business02 { width:100%; overflow: hidden; } #business02 .sec1 .inner { width:1240px; padding:5% 20px 0 20px; margin:0 auto; position: relative; overflow: hidden; } #business02 .sec1 .inner:last-child { padding-bottom: 5%; } #business02 .sec1 .lf_box { width:40%; float:left; } #business02 .sec1 .lf_box h1 { font-size:2.3em; font-weight:bold; color:#333; padding-bottom:40px; } #business02 .sec1 .lf_box ul li { display:flex; padding:8px 0; } /* #business02 .sec1 .lf_box ul li:hover { background-color:#f6f6f6; padding:8px 0 8px 20px; transition:all 0.6s; } */ #business02 .sec1 .lf_box strong { font-size:18px; font-weight:bold; color:#333; width:120px; } #business02 .sec1 .lf_box p { font-size:18px; font-weight:400; color:#333; } #business02 .sec1 .rt_box { width:60%; float:right; } #business02 .sec1 .rt_box h1 { font-size:2.3em; font-weight:bold; color:#333; padding-bottom:40px; } #business02 .sec1 .rt_box h2 { font-size:2em; font-weight:bold; color:#333; padding-bottom:20px; } #business02 .sec1 .rt_box table { width: 100%; font-size: 18px; color: #333; margin-bottom: 40px; border-top: 2px solid #333; border-bottom: 2px solid #333; border-collapse: collapse; } #business02 .sec1 .rt_box table .num { text-align: right; padding-right: 10px; } #business02 .sec1 .rt_box table tr { } #business02 .sec1 .rt_box table tr th, #business02 .sec1 .rt_box table tr td { width: 25%; padding: 5px 0; border-bottom: 1px solid #333; } #business02 .sec1 .rt_box table tr:last-child th, #business02 .sec1 .rt_box table tr:last-child td { border-bottom: none; } #business02 .sec1 .rt_box table tr th { font-weight: bold; } #business02 .sec1 .rt_box table tr th span { font-weight: normal; font-size: 14px; } #business02 .sec1 .rt_box table tr td { text-align: center; } #business02 .sec1 .rt_box table tr td .pay { text-align: right; } #business02 .sec1 .rt_box table tr td .cline { text-decoration: line-through; margin-right: 5px; } #business02 .sec1 .rt_box ul { display: flex; flex-direction: row; } #business02 .sec1 .rt_box ul li { display: flex; flex-direction: column; padding: 8px 0; width: 25%; } #business02 .sec1 .rt_box strong { font-size:18px; font-weight:bold; color:#333; /* width:120px; */ } #business02 .sec1 .rt_box p { font-size:18px; font-weight:400; color:#333; } #business02 .sec2 { width:100%; height:600px; background-color: #333; background-size:cover; background-position:center; background-repeat:no-repeat; } #business02 .sec2 .inner { width:1240px; height:100%; padding:0 20px; margin:0 auto; position: relative; overflow: hidden; display:flex; } #business02 .sec2 .text_box { width:42%; margin-right:8%; flex-direction: column; height: 100%; display: flex; justify-content: center; } #business02 .sec2 .text_box .tit { font-size:2.2em; font-weight:bold; color:#fff; padding-bottom:8%; } #business02 .sec2 .text_box p { font-size:1.2em; font-weight:400; color:#ddd; } #business02 .sec2 .border { border:3px solid #fff; box-sizing:border-box; padding:10% 7%; cursor: pointer; } #business02 .sec2 .text_box:hover .border { border:3px solid transparent; background-color:rgba(0,0,0,0.3); transition:all 0.6s; } #business02 .sec2 .icon_box { width:50%; flex-direction: column; display:flex; height: 100%; justify-content: center; padding-top:20px; } #business02 .sec2 .icon_box .tit { font-size:2.2em; font-weight:bold; color:#fff; padding-bottom:5%; } #business02 .sec2 .icon_box .tit strong { display:inline-block; color:#c71526; } #business02 .sec2 .icon_box ul { overflow: hidden; width:100%; } #business02 .sec2 .icon_box ul li { float:left; width:46%; margin-right:8%; height:160px; } #business02 .sec2 .icon_box ul li:nth-child(2n) { margin-right:0; } #business02 .sec2 .icon_box span { display:block; } #business02 .sec2 .icon_box span i { font-size:3.5em; color:#fff; } #business02 .sec2 .icon_box ul li strong { font-size:16px; font-weight:bold; display:block; padding:5px 0 10px 0; color:#f6f6f6; } #business02 .sec2 .icon_box ul li p { font-size:14px; font-weight:400; display:block; color:#ddd; } #business02 .sec2 .img_box { width:50%; } #business02 .sec3 .inner { width:1240px; padding:5% 20px; margin:0 auto; position: relative; overflow: hidden; } #business02 .sec3 .tit{ font-size:3em; font-weight:bold; color:#333; padding-bottom:6%; text-align:center; } #business02 .sec3 ul { display:flex; } #business02 .sec3 ul li { width:33.333%; text-align:center; } #business02 .sec3 ul .icon_box { width:200px; height:200px; border-radius:50%; background-color:#f6f6f6; position:relative; margin:0 auto; cursor: pointer; } #business02 .sec3 ul .icon_box:hover { width:180px; height:180px; transition:all 0.6s; } #business02 .sec3 ul .icon_box span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } #business02 .sec3 ul .icon_box span i { font-size:5em; } #business02 .sec3 dl dt { font-size:2em; font-weight:bold; color:#333; padding:20px 0; } #business02 .sec3 dl dd { font-size:16px; font-weight:400; color:#333; } #business02 .sec4 { width:100%; background-color:#f6f6f6; } #business02 .sec4 .inner { width:1240px; padding:5% 20px; margin:0 auto; position: relative; overflow: hidden; } #business02 .sec4 .text_box { padding-bottom:6%; } #business02 .sec4 .text_box .tit{ font-size:3em; font-weight:bold; color:#333; text-align:center; padding-bottom:10px; } #business02 .sec4 .text_box p { font-size:18px; font-weight:400; color:#333; text-align:center; } #business02 .sec4 ul { display:flex; justify-content:center; justify-content: space-between; } #business02 .sec4 ul li { width:23%; margin-right:2%; } #business02 .sec4 ul li:last-child { margin-right:0; } #business02 .sec4 dl { padding-top:20px; cursor: pointer; } #business02 .sec4 dl dt { font-size:1.8em; font-weight:bold; color:#333; padding-bottom:20px; position: relative; z-index:2; cursor: pointer; } #business02 .sec4 dl:hover dt::after { width:100%; transition:all 0.3s; } #business02 .sec4 dl dt::after { content:''; position:absolute; left:0; bottom:10px; width:55%; height:2px; background-color:#c71526; z-index:1; } #business02 .sec4 dl dd { font-size:16px; font-weight:400; color:#333; } /* e:bussiness2 */ /* s:ceo */ #ceo .sec1 { position:relative; overflow: hidden; } /* ceo 페이지 하단 텍스트 출력 부분 #ceo .sec::after { content: "GREETINGS"; position: absolute; bottom: -60px; left: -33px; display: block; color: #000; font-size: 20rem; font-weight: 700; opacity: 0.05; z-index:-1; } */ #ceo .sec1 .inner{ width:1240px; padding:8% 20px; position:relative; margin:0 auto; overflow: hidden; } #ceo .sec1 .lf_box { width:50%; float:left; } #ceo .sec1 .lf_box img { width:100%; } #ceo .sec1 .rt_box { padding-left:2%; width:48%; float:right; } #ceo .sec1 .text_box { display:flex; height:100%; flex-direction:column; vertical-align:middle; justify-content:center; justify-items:center; } #ceo .sec1 .rt_box .tit { font-size:3em; font-weight:400; color:#000; padding-bottom:40px; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-0.6px; line-height:1.5; word-break: keep-all; } #ceo .sec1 .rt_box dl dt strong { font-size:2em; font-weight:bold; color:#333; font-family: 'Noto Sans KR', sans-serif; padding-bottom:30px; display:block; } #ceo .sec1 .rt_box dl .txt p{ font-size: 18px; font-weight: 300; line-height: 30px; letter-spacing:-0.6px; line-height:1.5; word-break: keep-all; color:#000; padding-bottom:20px; } #ceo .sec1 .rt_box dl .txt strong { font-weight:500; } #ceo .sec1 .rt_box dl .sign { height:50px; display:flex; margin-top:20px; } #ceo .sec1 .rt_box dl .sign p:nth-child(1) { height:100%; display:flex; flex-direction:column; justify-content:center; font-size:18px; font-weight:400; color:#333; padding-right:40px; } /* e:ceo */ /* s:organizations */ #organizations .sec1 .inner{ width:1240px; padding:8% 20px; position:relative; } #organizations .sec1 .inner::after { content:''; width:1px; height:500px; background-color:#959595; position:absolute; top:20%; left:50%; transform:translate(-50%); z-index:-1; } #organizations .sec1 .inner::before { content:''; width:1200px; height:153px; background-image:url(../img/ora_border.png); background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; top:39.5%; z-index:-1; } #organizations .sec1 .head { width:200px; height:200px; border-radius:50%; background: linear-gradient(to right bottom, #e75260, #db3c4b 40%, #c71526); box-sizing:border-box; margin:0 auto; } #organizations .sec1 .head span { width:100%; height:100%; line-height:200px; display:block; text-align:center; font-size:3em; font-weight:bold; color:#fff; } #organizations .sec1 .org_list { margin-top:150px; overflow: hidden; } #organizations .sec1 .org_list li { float:left; width:18%; margin-right:2.5%; box-sizing:border-box; } #organizations .sec1 .org_list li:last-child { margin-right:0; } #organizations .sec1 .org_list li .tit { background-color:#d32334; color:#fff; } #organizations .sec1 .org_list li p { width:100%; font-size:18px; padding:15px 4px; font-weight:400; text-align:center; background-color:#fff; border-bottom:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; box-sizing:border-box; } #organizations .sec1 .org_list li p:last-child { border-bottom:1px solid #ccc; } /* e:organizations */ .pc_img { display:block; } .mo_img { display:none; } .mo_br { display:block; } .visionBox { display:block; } .mo_visionBox { display:none; } @media screen and (max-width:1400px){ #business01 .sec4 .inner p br{ display:none; } #business01 .sec4 .text_box { padding-left:40px; padding-right:20px; } } @media screen and (max-width:1200px){ .sec .inner { width:98%; padding:8% 1%; } #history .sec1 .inner { width:98%; padding:8% 1%; } .sec1 .historyBox { padding-bottom:100px; } .history_wrap .historyBox .history_left>h3 { font-size:36px; } .history_wrap .historyBox .history_right .line { left:17%; } .history_wrap .historyBox .history_right .history_00 .year::after { right:15%; } .history_wrap .historyBox .history_right .history_00 .info { padding-left:20px; } #vision .sec1 .inner { width:980px; padding:5% 0; } #vision .sec1 .circle { transform: translate(-50%,-67%); } #vision .sec1 .visionBox { height:650px; } #vision .sec1 .text_box .list1 { left:70px; } #vision .sec1 .text_box .list2 { right:70px; } #vision .sec1 .text_box .list3 { bottom:70px; } #vision .sec1 .text_box:hover .list1 { left:40px; transition:all 0.6s; } #vision .sec1 .text_box:hover .list2 { right:40px; transition:all 0.6s; } #vision .sec1 .text_box:hover .list3 { bottom:50px; transition:all 0.6s; } #vision .sec1 .titBox div { width:120px; height:120px; } #vision .sec1 .titBox p { height:120px; } #vision .sec1 .txtBox p { font-size:14px; } #vision .sec1 .list2 .txtBox { padding-left:7px; } #vision .sec1 .list1 .txtBox { padding-right:7px; } #vision .sec1 .list3 .txtBox { padding-top:7px; } #vision .sec2 ul { width:100%; } #vision .sec2 ul li { width:32%; margin-right:2%; } #vision .sec2 ul li:last-child { margin-right:0; } #vision .sec2 ul li img { width:100%; } #organizations .sec1 .inner { width:980px; padding:8% 0; } #organizations .sec1 .inner::before { width:980px; height:120px; left:50%; transform:translateX(-50%); } #map .sec1 .title { font-size:21px; padding-bottom:5%; } #map .sec1 .inner { width:98%; padding:8% 1%; } #map .topBox { display:block; } #map .topBox > div { width:100%; } #map .infoBox ul { height:auto; } #map .infoBox1 ul li { display:block; } #map .infoBox1 ul li .tit { width:70%; display:inline-block; } #map .infoBox1 ul li .txt { height:auto; width:100%; padding-top:10px; } #business01 .sec1 img { width:100%; } #business01 .sec2 ul li { width:28%; margin-right:6%; } #business01 .sec3 .text_box { /*width:570px;*/ } #business01 .sec4 .text_box { padding-right:10%; } #business02 .sec1 .inner { width:98%; padding:8% 1%; } #business02 .sec1 .lf_box h1 { padding-bottom:20px; } #business02 .sec1 .rt_box img { width:100%; } #business02 .sec2 { height:auto; } #business02 .sec2 .text_box { width:100%; margin-bottom:5%; padding:0 10%; } #business02 .sec2 .border { padding:5%; } #business02 .sec2 .inner { width:98%; display:block; padding:8% 1%; } #business02 .sec2 .icon_box { width:100%; } #business02 .sec2 .icon_box ul { width:100%; } #business02 .sec2 .icon_box ul li { width:50%; margin-right: 0; height: 160px; padding: 0 10px; text-align: center; } #business02 .sec2 .icon_box ul li p { width:70%; text-align:center; margin:0 auto; } #business02 .sec2 .icon_box .tit { text-align:center; } #business02 .sec3 .inner { width:98%; padding:8% 1%; } #business02 .sec3 ul li { width:300px; } #business02 .sec4 ul li img { width:auto; } #ceo .sec1 .inner { width:98%; padding:8% 1%; } #ceo .sec1 .rt_box { width:50%; padding-left:20px; } #ceo .sec1 .rt_box .tit { font-size:26px; } #ceo .sec1 .rt_box dl dt strong { font-size:21px; } #ceo .sec1 .rt_box dl .txt p { font-size:16px; } } @media screen and (max-width:1000px) { #business01 .sec3 .inner a { margin:20px auto; } #business01 .sec4 { height:auto; } #business01 .sec4 .inner { display:block; } #business01 .sec4 .lfBox { width:100%; float:none; } #business01 .sec4 .rtBox { width:100%; float:none; padding:5% 0; text-align:center; } #business01 .sec4 .text_box { padding-left:0; padding-right:0; text-align:center; } #business01 .sec4 .rt_box h4 { text-align:center; } #business01 .sec4 .rtBox p { text-align:left; padding:0 20px; } #business01 .sec4 .inner a { margin:20px auto; } } @media screen and (max-width:980px){ .sub .title { padding:8% 0; } .pc_img { display:none; } .mo_img { display:block; } .mo_br { display:inline-block; } .mo_br2 { display:block; } .sub .title { font-size:21px; } #vision .sec1 .inner { width:98%; padding:5% 1%; } #vision .sec1 .text_box .list1 { left:5px; } #vision .sec1 .text_box .list2 { right:5px; } #vision .sec1 .text_box .list3 { bottom:40px; } #vision .sec2 .txt { font-size:14px; } .visionBox { display:block; } .mo_visionBox { display:none; } #vision .sec2 { width: 98%; padding:8% 1%; } #vision .sec2 ul { width: 100%; display:block; } #vision .sec2 ul li { width:100%; margin-right:0; margin-bottom:20px; } #organizations .sec1 .head { width:150px; height:150px; } #organizations .sec1 .head span { line-height:150px; } #organizations .sec1 .inner { width:750px; padding:8% 0; } #organizations .sec1 .inner::after { height:350px; } #organizations .sec1 .inner::before { width:750px; height:50px; top:40%; left:50%; transform:translateX(-50%); } #organizations .sec1 .org_list { margin-top:90px; } #organizations .sec1 .org_list li .tit { font-size:16px; } #organizations .sec1 .org_list li p { font-size:14px; } .sec1 .historyBox { display:block; } .history_wrap .historyBox .history_left { width: 100%; } .history_wrap .historyBox .history_left>h3 { padding-bottom:20px; } .history_wrap .historyBox .history_right { width:100%; padding-left:0; } .history_wrap .historyBox .history_right .line { top:-10px; left:20%; } .history_wrap .historyBox .history_right .history_00 .year::after { right:0%; } .history_wrap .historyBox .history_right .history_00 .year { width:20%; } #map .sec1 .root_daum_roughmap { width:100%; height:250px; } #map .sec1 .map_info { padding:4% 2%; } #map .sec1 .map_info .lf_box { position: absolute; top:-40px; left:50%; transform:translateX(-50%); z-index:9; opacity:0.2; } #map .sec1 .map_info .rt_box { width:100%; position:relative; z-index:10; } #map .sec1 .map_info strong { font-size:18px; text-align:center; } #map .sec1 .map_info p { font-size:16px; text-align:center; padding:20px 10px 10px 10px; } #map .sec1 .map_info .lf_box span { border:none; width:auto; } #map .sec1 .map_info span { display:block; } #map .sec1 .map_info p span:nth-child(1) { width:100%; text-align:center; padding-bottom:10px; z-index:2; } #map .sec1 .map_info p span:nth-child(1)::after { top:13px; right: 0; width:70px; height:10px; background-color: rgba(199,21,38,0.5); left: 50%; transform: translateX(-50%); z-index:1; } #map #timap .btnBox { width:100%; border: 1px solid #ccc; box-sizing: border-box; padding: 20px; } #map #timap .btnBox a { width:100%; height:50px; background-color:#333; display:block; } #map #timap .btnBox a span { display:block; text-align:center; line-height:50px; font-size:16px; color:#fff; } #business01 .sec1 ul { display:block; } #business01 .sec1 ul li { width:100%; margin:0px auto 20px auto; text-align:center; padding:20px; background-color:#f6f6f6; box-shadow:3px 3px 8px rgba(0,0,0,0.3); } #business01 .sec1 ul li:last-child { margin-right:auto; } /* #business01 .sec1 dl:hover { border:none; padding:0; } */ #business01 .sec1 dl dt { font-size:18px; } #business01 .sec2 { padding:8% 0; } #business01 .sec2 .text_box { padding-bottom:6%; } #business01 .sec2 .text_box h2 { font-size:21px; } #business01 .sec2 .text_box p { font-size:18px; } #business01 .sec2 ul li { display:block; width:100%; margin-right:0; height:auto; text-align: center; padding:0 20px; padding-bottom:40px; } /* #business01 .sec2 ul li:hover { margin:0; } */ #business01 .sec2 ul li:nth-child(3n) { margin-right:0; } #business01 .sec2 ul li .icon { width:100%; } #business01 .sec2 ul li dl { width:100%; } #business01 .sec2 ul li dl dt { padding-bottom:10px; } #business01 .sec3 { /*background-image:url(../img/bussiness01_img02_mo.jpg);*/ } #business01 .sec3 .text_box { width:100%; padding:0 20px; } #business01 .sec3 .text_box h3 { font-size:21px; } #business01 .sec3 .text_box p { font-size:16px; } #business01 .sec3 .text_box h3 strong::after { bottom:2px; width:100px; height:8px; margin-left:-50px; } #business01 .sec4 .rt_box { padding:8% 0; } #business01 .sec4 .rt_box .text_box { width:100%; padding:0 20px; } #business01 .sec4 .rt_box h4 { font-size:21px; } #business01 .sec4 .rt_box p { font-size:16px; } #business01 .sec5 { padding:8% 0; } #business01 .sec5 ul { display: flex; flex-direction: column; align-items: center; /* 자식 요소들을 가로축 기준으로 중앙 정렬 */ justify-content: center; gap: 60px; /*padding: 0; /* 불필요한 패딩 제거 */ } #business01 .sec5 ul li { aspect-ratio: auto; /* 1:1 고정 해제 */ width: 80%; /*max-width: 400px; /* 너무 퍼지지 않게 적절한 최대 너비 설정 */ height: auto; /* 원형이 아닐 경우 높이를 유동적으로 변경 */ min-height: 80px; /* 최소 높이 확보 */ padding: 10px 10px 10px 10%; border-radius: 0; flex-direction: row; justify-content: flex-start; margin: 0; /* flex 정렬을 사용하므로 margin auto는 제거해도 무방 */ position: relative; box-sizing: border-box; } #business01 .sec5 ul li img { margin-bottom: 0; margin-right: 30px; } /* 화살표 위치 및 모양 수정 */ #business01 .sec5 ul li:not(:last-child)::after { content: ''; position: absolute; top: auto !important; /* 박스 중앙 고정 해제 */ left: 50%; /* 기준점을 50%로 설정 */ bottom: -40px; /* 요소 아래쪽으로 배치 */ transform: translateX(-50%); /* 자신의 너비 절반만큼 왼쪽으로 밀어 완벽한 중앙 정렬 */ /* 아래 방향 삼각형 */ border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #939393; border-bottom: 0; width: 0; height: 0; display: block; } #business01 .sec5 .text_box h5 { font-size:21px; } #business01 .sec5 .text_box h5 strong::after { bottom:2px; width:100px; height:8px; margin-left:-50px; } #business01 .sec5 .text_box p { font-size:14px; } #business02 .sec1 .lf_box { width:100%; float:none; padding-bottom:40px; } #business02 .sec1 .lf_box ul li { padding:4px 0; } #business02 .sec1 .lf_box h1 { font-size:21px; } #business02 .sec1 .lf_box strong { font-size:16px; } #business02 .sec1 .lf_box p { font-size:16px; } #business02 .sec1 .rt_box { width:100%; float:none; } #business02 .sec2 .icon_box .tit { font-size:21px; } #business02 .sec2 .icon_box ul li { width:100%; float:none; } #business02 .sec2 .text_box { padding:0; } #business02 .sec2 .text_box .tit { font-size:21px; } #business02 .sec2 .text_box p { font-size:14px; } #business02 .sec3 ul { display:block; } #business02 .sec3 ul li { margin:0 auto; text-align:center; padding-bottom:40px; } #business02 .sec3 ul .icon_box { width:130px; height:130px; } #business02 .sec4 .inner { width:98%; padding:8% 1%; } #business02 .sec4 ul { display:block; } #business02 .sec4 ul li { width:100%; text-align:center; margin:0 auto; padding-bottom:40px; } #business02 .sec4 dl { width:310px; margin:0 auto; } #business02 .sec4 dl dt { font-size:18px; } #business02 .sec4 dl dd { font-size:16px; } #business02 .sec4 dl dt::after { display:none; } #business02 .sec4 .text_box .tit { font-size:21px; } #business02 .sec4 .text_box p { font-size:14px; } #ceo .sec1 .lf_box { width:100%; float:none; } #ceo .sec1 .rt_box { width:100%; float:none; padding-top:40px; padding-left:0; } #ceo .sec1 .rt_box .tit { font-size:21px; padding-bottom:20px; } #ceo .sec1 .rt_box dl dt strong { position:relative; } #ceo .sec1 .rt_box dl dt strong::after { content:''; width:75%; height:20px; background-color:rgba(0,0,0,0.2); position:absolute; left:0; bottom:25px; } } @media screen and (max-width:780px){ .visionBox { display:none; } .mo_visionBox { display:block; height:500px; } .mo_visionBox .circleBox { position:relative; } .mo_visionBox .circleBox li{ width:130px; height:130px; border-radius:50%; } .mo_visionBox .circleBox li:nth-child(1) { position:absolute; top:0; left:0; background-color:rgba(1,172,166,0.9); } .mo_visionBox .circleBox li:nth-child(2) { position:absolute; top:0; left:50%; transform:translateX(-50%); background-color:rgba(13,153,214,0.9); z-index:2; } .mo_visionBox .circleBox li:nth-child(3) { position:absolute; top:0; right:0; background-color:rgba(6,73,116,0.9); } .mo_visionBox .circleBox li div { height:130px; display:flex; flex-direction:column; justify-content:center; justify-items:center; } .mo_visionBox .circleBox li strong { display:block; font-size:18px; font-weight:bold; text-align:center; color:#f6f6f6; } .mo_visionBox .circleBox li p { display:block; font-size:12px; font-weight:500; text-align:center; color:#ddd; word-break: break-all; } .mo_visionBox .infoBox { position:relative; top:200px; } .mo_visionBox .infoBox li { display:flex; justify-content:center; padding-bottom:30px; } .mo_visionBox .infoBox strong { font-size:28px; font-weight:bold; padding-right:16px; display:inline-block; position:relative; color:#333; } .mo_visionBox .infoBox strong::after { content:''; position:absolute; left:0; bottom:20px; width:35px; height:2px; background-color:#c71526; opacity:0.5; } .mo_visionBox .infoBox p { font-size:14px; font-weight:400; letter-spacing:-0.6px; line-height:1.4; } #organizations .sec1 .inner { width:100%; } #organizations .sec1 .org_list li { float:none; width:96%; margin-left:2%; margin-right:2%; margin-bottom:2%; } #organizations .sec1 .inner::after { top:10%; } #business01 .sec5 ul li { padding-left: 5%; padding-right: 5px; } #business01 .sec5 ul li img{ margin-right: 5px; } }