.condiv { position: relative; max-width: 1900px; margin: 0 auto; } .con { position: relative; } .clear_div:after { clear: both; display: block; content:''; } .mobile_view { display: none; } a:hover { text-decoration: none; } .slide_bg_blue { overflow: hidden; background: url('/theme/bs4_v2.8/img/main/slide_bg_blue.jpg') no-repeat center; } .main_slide_div {background: url('/theme/bs4_v2.8/img/main/slide_bg_blue.jpg') center top repeat-x;*margin-top:15px; background-size:100% 100%;} .main_slide_div .owl-carousel .owl-item {position:relative;} .main_slide_div .owl-carousel .owl-item .icon {position:absolute;transform:translateY(-50%)} .main_slide_div .owl-carousel .owl-item.owl-item-01 .icon {top:55%;right:13%;width:40%;} .main_slide_div .owl-carousel .owl-item.owl-item-02 .icon {top:58%;right:12%;width:35%;} .main_slide_div .owl-carousel .owl-item.owl-item-03 .icon {top:45%;right:21%;width:25%;} .pc_view{display:block} .m_view{display:none;} /*메인 슬라이드*/ .carousel .carousel-item {height: 70vh; background-size: cover;} .carousel .carousel-item:first-of-type {width:100%; background-image: url("/theme/bs4_v2.8/img/main/main_01.png"); background-position:center center; background-size: 80%} .carousel .carousel-item:nth-of-type(2) {width:100%; background-image: url("/theme/bs4_v2.8/img/main/main_02.png"); background-position:center center; background-size: 80%} .carousel .carousel-item:last-of-type {width:100%; background-image: url("/theme/bs4_v2.8/img/main/main_03.png"); background-position:center center;background-size: 80%} .carousel-control-prev-icon, .carousel-control-next-icon {width: 50px; height: 50px;} .carousel-indicators li {height:6px; background-color:#fff;} .d-md-block {top:20%} .carousel-indicators .active {background-color:#ec1d54 !important;} .carousel-indicators {bottom:35px;} .carousel {margin-bottom:0;} .owl-theme .owl-dots {padding-bottom:30px;} .owl-theme .owl-dots .owl-dot span {height:6px; width:30px; background:#fff; border-radius:0;} .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #ea1e53} .owl-carousel {list-style: none; padding: 0; margin:0;} .owl-item img {display: block; width: 100%; max-width:1540px; height: auto; margin:2em auto;} .owl-theme .owl-nav [class*=owl-] {margin: 5px; padding: 4px 7px; display: inline-block; cursor: pointer; background:none; z-index:99999999999;} .owl-theme .owl-nav [class*=owl-]:hover {background:none;} .owl-prev {position:absolute; left:0; float:left; top:45%} .owl-next {position:absolute; right:0; float:right;top:45%} @media screen and (max-width: 640px) { .wrapper { width: 100%; } .owl-nav {display:none;} } @media all and (max-width: 1400px) { .main_slide_div .owl-carousel .owl-item.owl-item-01 .icon {top:55%;right:3%;width:47%;} .main_slide_div .owl-carousel .owl-item.owl-item-02 .icon {top:58%;right:2%;width:42%;} .main_slide_div .owl-carousel .owl-item.owl-item-03 .icon {top:45%;right:15%;width:30%;} } @media all and (max-width: 767.98px) { .pc_view{display:none} .m_view{display:block;} .main_slide_div .owl-item img {margin:2.5em auto 2em;} .main_slide_div .owl-carousel .owl-item.owl-item-01 .icon {top:50%;right:-10%;width:60%;} .main_slide_div .owl-carousel .owl-item.owl-item-02 .icon {top:56%;right:-1%;width:48%;} .main_slide_div .owl-carousel .owl-item.owl-item-03 .icon {top:47%;right:0%;width:40%;} .main_slide_div .owl-theme .owl-dots {padding-bottom:15px;} } .main_portfolio {padding:4em 1em;} /* 컨텐츠 */ .slide_bg_pattern {background: url('/theme/bs4_v2.8/img/main/bg_pattern_black.gif') center top repeat-x;} .main_bottom {padding-bottom:4em;} .developArea {margin-top:60px;} .developArea h2 {font-size:30px; color:#000; font-weight:800;} .developArea ul {left:0;margin-left:-40px;} .developArea li {float:left; width:488px; margin-bottom:10px; margin-right:1%;} .developArea li .main_thum {float:left; margin-right:10px; width:50%;} .developArea li .main_thum img {width:100%;} .developArea li dt a{font-size:16px; color:#000; margin-bottom:10px;} .developArea li dd {color:#6a6a6a;} .btnArea {padding-bottom:4em;} .btnArea {margin-top:60px;} .btnArea h2 {font-size:30px; color:#000; font-weight:800;} .btnArea ul {margin-left:-150px;} .btnArea li {float:left; width:488px; margin-bottom:10px; margin-right:1%;} .btnArea li .main_thum {float:left; margin-right:10px; width:50%;} .btnArea li .main_thum img {width:100%;} .btnArea li dt a{font-size:16px; color:#000; margin-bottom:10px;} .btnArea li dd {color:#6a6a6a;} /* .btnArea {margin-top:80px; padding-left:0;} .btnArea ul {left:0;margin-left:-25px;} .btnArea li:first-child a {width:400px; display:block; border:3px solid #e0e0e0; background:#403d39; text-align:center; padding:15px 0; color:#73716e; margin-bottom:10px;} .btnArea li:first-child a:hover {background:#2c2926; transition-duration: .3s;} .btnArea li:first-child p {color:#fff; font-size:30px; font-weight:800; margin:0;} .btnArea li:last-child a {width:400px; display:block; border:3px solid #e0e0e0; background:#22201d; text-align:center; padding:15px 0; color:#615f4d} .btnArea li:last-child a:hover {background:#0a0a09; transition-duration: .3s;} .btnArea li:last-child p {color:#fff; font-size:30px; font-weight:800; margin:0;} */ .li_style {margin-top: -55px; margin-left: 20px;font-size:30px; color:#000; font-weight:800;} @media all and (max-width: 1605px){ .li_style {margin-top: 10px;} .developArea li {width:750px;} .btnArea ul {margin-left:-50px;} } @media all and (max-width: 1450px){ .developArea li {width:650px;} .btnArea ul {margin-left:-50px;} } @media all and (max-width: 1300px){ .developArea li {width:500px;} .btnArea ul {margin-left:-50px;} } @media all and (max-width: 1050px){ .developArea li {width:500px;} .btnArea ul {margin-left:-50px;} } @media all and (max-width: 900px){ .btnArea ul {margin-left:-50px;} } @media all and (max-width: 768px) { .main_portfolio {padding:2em 1em;} .slider button {display:none !important;} .slide .slide__content {padding:0 10px;} .developArea li {float:left; width:100%;} .btnArea ul {margin-left:-50px;} .carousel .carousel-item:first-of-type {width:100%; background-image: url("/theme/bs4_v2.8/img/main/m_main_01.png"); background-size: 100%} .carousel .carousel-item:nth-of-type(2) {width:100%;background-image: url("/theme/bs4_v2.8/img/main/m_main_02.png"); background-size: 100%} .carousel .carousel-item:last-of-type {width:100%; background-image: url("/theme/bs4_v2.8/img/main/m_main_03.png"); background-size: 100%} .carousel-control-prev {display:none;} .carousel-control-next {display:none;} .carousel-indicators {bottom:10px;} .li_style {margin-left: 0px;} .btnArea li:first-child a {width:100%;margin-left: 0px;margin-top:0px;height: auto} .btnArea li:last-child a {width:100%;margin-left: 0px;height: auto} } /* 230917 추가 시작 { */ /* 하단 회사개요 등 */ #companny_info {background:url('../img/main/company_info/bg.png') no-repeat; background-size:cover; padding:100px 0;} #companny_info .companny_info_wrap {max-width:1400px; margin:0 auto;} #companny_info .companny_info_wrap:after {display:block; content:''; clear:both;} #companny_info ul {padding:0; margin:0;} #companny_info ul:after {content:''; display:block; visibility:hidden; opacity:0; clear:both;} #companny_info .left {float:left; width:50%; height:375px; border:1px solid rgba(255,255,255,.15); transition:.5s all ease; background:url('../img/main/company_info/main_i_01_01.png') no-repeat 95% 80%;} #companny_info .left:hover {background:#555 url('../img/main/company_info/main_i_01_02.png') no-repeat 95% 80%; border:1px solid #555; transition:.5s all ease;} #companny_info .left a {display:block; width:100%; height:100%; padding:30px;} #companny_info .left a .tit {font-size:1.5em; font-weight:400; color:#fff; margin-top:10px;} #companny_info .left a .tit:after {display:block; content:""; width:10%; height:1px; background:#ccc; margin:18px 0 20px;} #companny_info .left a p {color:#ccc; line-height:1.6; transition:.6s; font-size:0.95em;} #companny_info .left:hover a p {color:#fff; transition:.6s;} #companny_info .left a .btn_detail {display:inline-block; width:150px; height:40px; line-height:38px; margin-top:50px; border:1px solid #aaa; border-radius:5px; text-align:center; color:#fff; background-position:0 50%; transition:.5s;} #companny_info .left:hover a .btn_detail {border:1px solid #fff; transition:.5s; background:url('../img/main/company_info/btn_arrow_on.png') no-repeat 85% 50%;} #companny_info .right {float:right; width:calc(50% - 25px);} #companny_info .right ul li {float:left; position:relative; width:calc(50% - 25px); margin-right:25px; margin-top:25px; border:1px solid rgba(255,255,255,.15); height:175px;} #companny_info .right ul li:hover {border:1px solid #555; background:#f7f7f7; transition: .6s;} #companny_info .right ul li:nth-child(1), #companny_info .right ul li:nth-child(2) {margin-top:0;} #companny_info .right ul li:nth-child(2n) {margin-right:0;} #companny_info .right ul li a {display:block; width:100%; height:100%; padding:15px; transition: .5s all ease;} #companny_info .right ul li:hover a {background:#555; transition: .5s all ease;} #companny_info .right ul li a .tit {font-size:1.5em; font-weight:400; color:#fff; margin-top:5px;} #companny_info .right ul li a p {color:#ccc; margin-top:8px; line-height:1.6; transition:.6s; font-size:0.95em;} #companny_info .right ul li a p br.hide_pc {display:none;} #companny_info .right ul li a .btn_more {position:absolute; bottom:15px; left:15px; color:#fff;} #companny_info .right ul li a i {position:absolute; bottom:15px; right:15px; /*width:64px; height:64px;*/} #companny_info .right ul li a i.companny_info_icon_1 {background:url('../img/main/company_info/main_i_02_01.png') no-repeat;width:66px; height:64px;} #companny_info .right ul li a i.companny_info_icon_2 {background:url('../img/main/company_info/main_i_03_01.png') no-repeat; width:44px; height:67px;} #companny_info .right ul li a i.companny_info_icon_3 {background:url('../img/main/company_info/main_i_04_01.png') no-repeat; width:69px; height:67px;} #companny_info .right ul li a i.companny_info_icon_4 {background:url('../img/main/company_info/main_i_05_01.png') no-repeat; width:62px; height:65px;} #companny_info .right ul li:hover a i.companny_info_icon_1 {background:url('../img/main/company_info/main_i_02_02.png') no-repeat; animation:icon_spin .5s forwards;} #companny_info .right ul li:hover a i.companny_info_icon_2 {background:url('../img/main/company_info/main_i_03_02.png') no-repeat; animation:icon_spin .5s forwards;} #companny_info .right ul li:hover a i.companny_info_icon_3 {background:url('../img/main/company_info/main_i_04_02.png') no-repeat; animation:icon_spin .5s forwards;} #companny_info .right ul li:hover a i.companny_info_icon_4 {background:url('../img/main/company_info/main_i_05_02.png') no-repeat; animation:icon_spin .5s forwards;} @keyframes icon_spin { from { transform:rotateY(0deg); } to { transform:rotateY(180deg); } } @media (max-width:1100px) { #companny_info {padding-left:1%; padding-right:1%;} #companny_info .left {width:100%; background-size:20%; background-position:95% 90%;} #companny_info .left:hover {background-size:20%; background-position:95% 90%;} #companny_info .right {width:100%;} #companny_info .right ul li {margin-top:30px !important; margin-bottom:0 !important;} #companny_info .right ul li:nth-child(1n) {width:calc(50% - 15px); margin-left:0; margin-right:15px;} #companny_info .right ul li:nth-child(2n) {width:calc(50% - 15px); margin-left:15px; margin-right:0;} } @media (max-width:767.98px) { #companny_info {padding:60px 0;} #companny_info .companny_info_wrap {max-width:92%;} #companny_info .left {height:auto; background-size:20%;} #companny_info .left a {*padding:20px;} #companny_info .left a .tit {margin-top:0;} #companny_info .left a .btn_detail {width:118px; margin-top:20px;} #companny_info .left:hover {background-size:20%;} #companny_info .right ul li {width:100% !important; height:auto !important; margin:0 !important; border:0; border-bottom:1px solid rgba(255,255,255,.15);} #companny_info .right ul li:hover {border:0; border-bottom:1px solid #555;} #companny_info .right ul li:first-child {margin-top:20px !important;} #companny_info .right ul li:last-child {border-bottom:0 !important;} #companny_info .right ul li a .btn_more {position:unset; display:inline-block; margin-top:10px;} #companny_info .right ul li a p br.hide_pc {display:inline;} #companny_info .right ul li a p br.hide_m {display:none;} #companny_info .right ul li a i {width:50px; height:50px; background-size:cover !important;} #companny_info .right ul li a i.companny_info_icon_1 {width:50px; height:48px;} #companny_info .right ul li a i.companny_info_icon_2 {width:44px; height:67px;} #companny_info .right ul li a i.companny_info_icon_3 {width:52px; height:50px;} #companny_info .right ul li a i.companny_info_icon_4 {width:54px; height:56px;} } @media (max-width:575.98px) { #companny_info .left a p br {display:none;} } /* } 230917 추가 끝 */