/*ALL CSS-----------------------------------------------------*/ body {background: #fff;} .d_section {position: relative; padding-top: 150px;} .d_hd_inner {max-width: 1460px;width: 92%;margin: 0 auto;position: relative;} .d_1820_inner {max-width: 1820px;width: 92%;margin: 0 auto;position: relative;} .d_inner {max-width: 1460px;width: 92%;margin: 0 auto;position: relative;} /* BTN */ .d_btn {display: inline-block;position: relative;background-color: #fc0000;border-radius: 50px;} .d_btn a{padding: 15px 40px; display:block; font-size: 1.063rem; font-weight: bold; color: #fff;} .d_tit_area h2 {float: left;font-size: 3.25rem;color: #333;} .d_tit_area h2 span {position: relative;text-shadow: 3px 3px #ccc;} .d_tit_area h2 span::before {content: '';position: absolute;width: 100%;height: 2px;background-color: #000;bottom: -15px;display:none;} .d_tit_area h3 {display: block;float: right;font-size: 1.5rem;line-height: 35px;} .d_tit_area h3 a {color: #bfbfbf; transition: .4s;} .d_tit_area h3 b {font-weight: bold;} .fw_b {font-weight: bold;} .fw_l {font-weight: 300;} .br_520_on {display: none;} @media (max-width: 760px) { .d_section {padding-top: 70px;} } /*HEADER-----------------------------------------------------*/ #d_header {position: fixed; top: 0; left: 0; width: 100%; z-index: 20; background: #fff;} #d_header .d_logo .b_b-logo{display:none;} #d_header.on {background: #fff;} #d_header .d_hd_inner {height: 100px; display:flex; justify-content: space-between;align-items: center;} #d_header .d_hd_inner > div{display:flex; align-items: center;} #d_header .b_num_txt{font-size:2.5rem; font-weight:700; letter-spacing:1px; margin-left:25px; color:#fcbc00; -webkit-text-stroke: 0.5px #111; text-shadow: 2px 3px #333; font-style:italic;} #d_header .d_logo {position: relative;float: left;z-index: 9;} #d_header .d_logo p{font-weight:bold; font-size:2rem; color:#000; } #d_header .d_logo img {display: block;} #hbg_btn {position: relative; display: flex; flex-direction: column; justify-content: center; row-gap: 5px; width: 28px; height: 28px; cursor: pointer; margin-left: 30px; display:none;} #hbg_btn span {width: 100%;display: block;height: 2px;background-color: #333;cursor: pointer;} #d_close {display: block;width: 28px;height: 28px;cursor: pointer;position: absolute;top: 38px;right: 9%;transition: .4s;} #d_close span {position: absolute;top: 50%;left: 50%;width: 100%;height: 2px;transform: translate(-50%, -50%);background: #fff;} #d_close span:nth-child(1) {transform: translate(-50%, -50%) rotate(45deg);transition: .4s;} #d_close span:nth-child(2) {transform: translate(-50%, -50%) rotate(-45deg);transition: .4s;} #d_close:hover span:nth-child(1) {transform: translate(-50%, -50%) rotate(90deg);} #d_close:hover span:nth-child(2) {transform: translate(-50%, -50%) rotate(0deg);} #d_header .d_right_btns {position: fixed;bottom: 150px;right: 10px;width: 80px; right:-100px; transition:opacity .2s, right .3s; opacity:0; } #d_header .d_right_btns.show{right: 10px; opacity:1; transition:opacity .2s, right .5s;} #d_header .d_right_btns li {border-bottom:1px solid rgba(0,0,0,.2); border-radius: 8px; overflow: hidden; margin-bottom: 8px; background-color: #fc0000; border:3px solid #fff; } #d_header .d_right_btns li:last-child {margin-bottom:0; } #d_header .d_right_btns li a{display:flex; flex-direction:column; align-items:center; width:100%; height:80px; justify-content:center; } #d_header .d_right_btns li span{display:block; margin-top:6px; font-weight:bold; font-size:0.938rem; color: #fff;} #d_header .d_right_btns li img{width:24px; } #d_header .d_right_btns li:nth-child(2) img{width:27px; } .d_right_btns .d_top_btn {width: 80px;height: 80px; background-color: #222; color: #fff;display: flex;justify-content: center;align-items: center;} .d_right_btns .d_top_btn a {color: #fff;font-weight: bold;display: block; padding: 26px; font-size: 16px;} #d_header .d_right_btns.on {bottom: 350px;} #d_header .d_right_btns.on .d_mv_banner {bottom: 420px;} /* nav */ #d_header #d_gnb > ul {display: flex; align-items: center; justify-content: center; height: 100%; column-gap: 30px;} #d_header #d_gnb > ul > li{position:relative; } #d_header #d_gnb > ul > li > a {color: #333; display: block; padding: 8px; font-size: 1.25rem; transition: .4s; font-weight: 600; text-align:center; } #d_header #d_gnb > ul > li > a span{display:block; font-weight: 500; font-family: 'Pretendard', sans-serif; color:#999; font-size:1rem; margin-top:3px; font-weight: 600;} #d_header #d_gnb > ul > li:hover > a {color: #fc0000;} #d_header #d_gnb .b_sub_list{position:absolute; left:50%; top:103%; width:180px; background-color:#fff; border-radius:10px; transform:translateX(-50%); padding:14px 20px; box-shadow:0 3px 20px rgba(0,0,0,.1); z-index:3; display:none; } #d_header #d_gnb .b_sub_list li{margin-bottom:5px; } #d_header #d_gnb .b_sub_list li:last-child{margin-bottom:0; } #d_header #d_gnb .b_sub_list li a{font-size:1rem; font-weight:500; display:block; padding:2px 0; text-align:center; color:#888; } #d_header #d_gnb .b_sub_list li a:hover{color:#fc0000; transition: color .2s; } #tog_menu {position: fixed;top: 0;right: -200%;z-index: 999;width: 760px;height: 100vh;background:#111;text-align: center; } #tog_menu .d_logo {position: absolute;top: 0;left: 5%; } #tog_menu nav > ul {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 300px;} #tog_menu nav > ul > li > a {display: block;width: 100%;height: 100%;font-size: 2rem;font-weight: bold;padding: 20px 0 10px;transition: .4s ease;color: #fff; } #tog_menu nav > ul > li > a span{display:block; font-size:1.25rem; } #tog_menu nav > ul > li:hover > a {color: #999; transform: skew(-15deg); } #tog_menu .b_sub_list{display:none; } #tog_menu .b_sub_list:after{content:''; display:block; clear:both; } #tog_menu .b_sub_list li{margin-bottom:7px; float: left; width: 50%;} #tog_menu .b_sub_list li a{color:#fff; font-size:1.125rem; } @media (max-width: 1600px) { nav > ul > li > a {padding: 40px 28px;} } @media (max-width: 1480px) { #d_header .d_hd_inner {height: 80px;} #d_header .b_num_txt {font-size: 2.4rem;} #d_header .d_logo img{height: 50px;} #d_header #d_gnb > ul{column-gap: 20px;} } @media (max-width: 1280px) { #d_header #d_gnb {display: none;} #hbg_btn {display:flex;} #tog_menu ul {display: block; } #tog_menu {width: 500px;} } @media (max-width: 760px) { /* #d_header .d_right_btns {display: none;}*/ #d_header .b_num_txt{display: none;} #tog_menu { width: 375px;} #d_header .d_hd_inner {height: 60px;} #d_header .d_logo img {height: 40px;} #d_header .d_icon_menu {padding-top: 0; height: 60px; align-items: center;} #d_header .d_icon_menu .d_icons li {margin-left: 15px;} #d_header .d_icon_menu .d_icons li img {height: 15px;} #d_header .d_right_btns{width: 60px; bottom:140px; } #d_header .d_right_btns li{margin-bottom: 5px; border: 1px solid #fff;} #d_header .d_right_btns li a{height: 60px;} #d_header .d_right_btns li img {width: 18px;} #d_header .d_right_btns li:nth-child(2) img {width: 21px;} } @media (max-width: 520px) { #hbg_btn {margin-left: 30px;} } /*MV-----------------------------------------------------*/ .d_mv_sec {padding-top: 0;overflow: hidden;} .d_slide_mv .swiper-slide{height: 100vh;overflow: hidden;} .d_slide_mv .swiper-slide figure{height: inherit;background-position: center center;background-repeat: no-repeat;background-size: cover;transform: scale(1.1);transition: transform 10s linear;} .d_slide_mv .swiper-slide.swiper-slide01 figure{background-image: url("/img/index/b_mv01.jpg");} .d_slide_mv .swiper-slide.swiper-slide02 figure{background-image: url("/img/index/b_mv02.jpg");} .d_slide_mv .swiper-slide.swiper-slide03 figure{background-image: url("/img/index/b_mv03.jpg");} .d_slide_mv .swiper-slide.swiper-slide04 figure{background-image: url("/img/index/b_mv04.jpg");} .d_slide_mv .swiper-slide.swiper-slide05 figure{background-image: url("/img/index/b_mv05.jpg");} .d_slide_mv .swiper-slide.swiper-slide06 figure{background-image: url("/img/index/b_mv06.jpg");} .d_slide_mv .swiper-slide.swiper-slide07 figure{background-image: url("/img/index/b_mv07.jpg");} .d_slide_mv .swiper-slide.swiper-slide-active figure{transform: scale(1);} .d_mv_sec .d_text_area {position: absolute;top: 33%;left: 50%;transform: translateX(-50%);color: #fff;z-index: 9;max-width: 1460px;width: 92%;} .d_mv_sec .d_text_area h2 {font-size: 4.0625rem;margin-bottom: 40px;line-height: 1.2;} .d_mv_sec .d_text_area h2 b {position: relative;} .d_mv_sec .d_text_area h2 b::before {content: '';position: absolute;width: 100%;height: 4px;/*background-color: #fc0000;*/bottom: 3px; left:0; z-index:2; background: linear-gradient(to bottom, #ff9393 30%, rgba(0, 0, 0, 0) 100%);} .d_mv_sec .d_text_area h2 b::after {content: '';position: absolute;width: 100%;height: 4px;background-color: #fc0000;bottom: 3px; left:0; } .d_mv_sec .d_text_area h2 span{display:block; margin-bottom:5px;} .d_mv_sec .d_text_area h3 {font-size: 1.5rem;letter-spacing: -0.045em;margin-bottom: 60px;line-height: 1.5;} .d_mv_sec .d_text_area h3 i{display:block; margin-bottom:20px; } .d_mv_sec .d_text_area h3 i:last-child{margin-bottom:0px; } .d_mv_sec .d_text_area h3 i b{font-size: 1.625rem; position:relative;} .d_mv_sec .d_text_area h3 i b:before{content: '';position: absolute;width: 100%;height: 4px;/*background-color: #fc0000;*/bottom: -3px; left:0; z-index:2; background: linear-gradient(to bottom, #ff9393 30%, rgba(0, 0, 0, 0) 100%);} .d_mv_sec .d_text_area h3 i b:after{content: '';position: absolute;width: 100%;height: 4px;background-color: #fc0000;bottom: -3px; left:0; } .d_mv_sec .swiper-pagination {bottom: 6%;} .d_mv_sec .swiper-pagination-bullet{width: 12px;height: 12px; background: #ccc; opacity: .5;} .d_mv_sec .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #fff; opacity: 1; } .d_mv_sec .d_btn:hover{color: #FFF;} .d_mv_sec .d_btn:hover::before{background-color: #FFF;} .d_mv_sec .swiper-pagination span{width: 10px;height: 10px;margin: 0 13px !important;} .d_mv_sec .b_btn_wrap{display:flex; aling-items:center; column-gap:10px; } .d_mv_sec .b_btn_wrap .b_btn{display:flex; align-items:center; justify-content:center; background-color:#fc0000; height:70px; font-size:1.5rem; border-radius:5px; border: 1px solid #fff;} .d_mv_sec .b_btn_wrap .b_btn i{font-weight:500; font-size:1.25rem; padding: 0 30px; position:relative; } .d_mv_sec .b_btn_wrap .b_btn i:after{content:''; width:1px; height:100%; background-color:#fff; position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:.7; } .d_mv_sec .b_btn_wrap .b_btn span{padding: 0 30px;} .d_mv_sec .b_btn_wrap .b_btn img{width:20px; } .swiper-button-next:after, .swiper-button-prev:after{display:none;} .swiper-button-next, .swiper-button-prev{margin:0; } .d_mv_sec .swiper-button-next img, .d_mv_sec .swiper-button-prev img{width:25px; opacity:.4; transition:opacity .2s; } .d_mv_sec .swiper-button-prev img{transform:rotate(180deg); } .d_mv_sec .swiper-button-next {right:3%;} .d_mv_sec .swiper-button-prev {left:3%;} .d_mv_sec .swiper-button-next:hover img, .d_mv_sec .swiper-button-prev:hover img{opacity:1; transition:opacity .2s; } @media screen and (max-width:1480px){ .d_mv_sec .d_text_area h2{font-size: 50px; margin-bottom: 30px;} .d_mv_sec .d_text_area h3 i{margin-bottom: 10px;} .d_mv_sec .swiper-button-next {right:1%;} .d_mv_sec .swiper-button-prev {left:1%;} } @media screen and (max-width:1080px){ .d_slide_mv .swiper-slide{height: 80vh;} .d_mv_sec .d_text_area{top: 25%;} .d_mv_sec .d_text_area h3{margin-bottom: 40px;} .d_mv_sec .b_btn_wrap .b_btn{height: 50px;} .d_mv_sec .b_btn_wrap .b_btn i{padding: 0 15px;} .d_mv_sec .b_btn_wrap .b_btn span {padding: 0 15px;} .d_mv_sec .swiper-button-next {display:none;} .d_mv_sec .swiper-button-prev {display:none;} } @media screen and (max-width:760px){ .d_slide_mv .swiper-slide{height: 650px;} .d_mv_sec .d_text_area {top: 30%;} .d_mv_sec .d_text_area h2 {font-size: 28px; margin-bottom: 20px; word-break:keep-all; } .d_mv_sec .d_text_area h2 span{font-size: 33px; } .d_mv_sec .d_text_area h3 {margin-bottom: 20px;} .d_mv_sec .swiper-pagination span {width: 8px; height: 8px; margin: 0 6px !important;} .d_slide_mv .swiper-slide.swiper-slide01 figure{background-position: 94% center;} .d_slide_mv .swiper-slide.swiper-slide02 figure{background-position: 36% center;} .d_slide_mv .swiper-slide.swiper-slide03 figure{background-position: 70% center;} .d_mv_sec .d_text_area h2 b::before {bottom: -1px;} .d_mv_sec .d_text_area h2 b::after {bottom: -1px;} } @media screen and (max-width:400px){ .d_mv_sec .d_text_area h2 {font-size: 25px;} } /*PROCESS-----------------------------------------------------*/ .d_process {margin: 150px 0;} .d_process .d_tit_area {margin-bottom: 60px;text-align:center; } .d_process .d_tit_area h2 {display: block;float:unset; } .d_process .d_tit_area h2 span::before {background-color: #111;} .d_process .d_tit_area p {font-size: 1.4rem;font-weight: 500; line-height: 1.5;word-break: keep-all; margin-top:20px; } .d_process .d_tit_area h3 {display: block;font-size: 1.5rem;font-weight: lighter;line-height: 35px;} .d_process .d_cont_area ul {display:flex; align-items:flex-start; flex-wrap: wrap;} .d_process .d_cont_area ul li {width: 20%; position:relative; } .d_process .d_cont_area ul li:after{content:''; width:1px; height:240px; background-color:#ddd; position:absolute; right:0; top:50%; transform:translateY(-50%);} .d_process .d_cont_area ul li:last-child:after{display:none; } .d_process .d_cont_area li .d_cont_box {width: 100%;text-align: center;} .d_process .d_cont_area li .d_cont_box .d_text_box {width: 100%;margin: 0 auto;padding:0 20px; } .d_process .d_cont_area li .d_cont_box p {display: block;color: #333;font-size: 1.13rem;padding-top: 5px;word-break:keep-all;font-weight:500;line-height:1.4;} .d_process .d_cont_area .d_tit_box{font-size: 1.25rem; margin-bottom:10px; display:block; } .d_process .d_cont_area figure{background-color:#fc0000; border-radius: 50%; aspect-ratio:1/1; width:100px; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-bottom:20px; } .d_process .d_cont_area figure img{filter:brightness(0) invert(1); width:55px; } @media (max-width: 1280px) { } @media (max-width: 1080px) { .d_process .d_cont_area ul {justify-content:center; row-gap:60px; } .d_process .d_cont_area ul li {width: 33.333%; } .d_process .d_cont_area ul li:nth-child(3):after{display:none; } } @media (max-width: 760px) { .d_process {margin: 70px 0;} .d_process .d_cont_area ul {justify-content:flex-start; row-gap:40px; } .d_process .d_cont_area ul li {width: 50%; } .d_process .d_cont_area ul li:after{height: 200px;} .d_process .d_cont_area ul li:nth-child(2n):after{display:none; } .d_process .d_cont_area ul li:nth-child(3):after{display:block; } .d_process .d_tit_area{margin-bottom: 40px;} } @media (max-width: 520px) { .br_520_off {display: none;} } /*PORTFOLIO-----------------------------------------------------*/ .d_portfolio .d_1820_inner {} .d_portfolio .d_tit_area {margin-bottom: 120px;} .d_portfolio .d_tit_area h2 {width: 100%;} .d_portfolio .d_cont_area li {float: left;width: calc((100% - 24px) / 3);margin-right: 8px;margin-bottom: 8px;overflow:hidden;border-radius: 10px;aspect-ratio:1/1; } .d_portfolio .d_cont_area li span {display: block;font-size: 1.125rem;padding: 20px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-weight: 600;} .d_portfolio .d_cont_area li a {position: relative;display: block;width: 100%;height: 100%;} .d_portfolio .d_cont_area li .d_hover_text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;width: 100%;text-align: center;opacity: 0;transition: .4s;word-break: keep-all;} .d_portfolio .d_cont_area li:hover .d_hover_text {opacity: 1;} .d_portfolio .d_cont_area li .d_hover_text p {font-size: 2.5rem;margin-bottom: 15px;font-weight:bold; } .d_portfolio .d_cont_area li .d_hover_text b {display: block;} .d_portfolio .d_cont_area li figure{width:100%; height: 100%;} .d_portfolio .d_cont_area li figure img {display: block;width: 100%;height: 100%;object-fit: cover;} .d_portfolio .d_cont_area li figure::before {content: "";position: absolute;width: 100%;height: 100%;left: 0;right: 0; background-color:rgba(0,0,0,0.7);transition: .4s;opacity: 0;} .d_portfolio .d_cont_area li:hover figure::before {opacity: .8;} .d_portfolio .d_cont_area li:nth-child(3n) {margin-right: 0;} .d_portfolio .d_cont_area li:nth-child(3n+1) {clear:both;} .d_section.d_portfolio .b_tit_box{margin-bottom: 60px; text-align:center; } .d_section.d_portfolio .b_tit_box h2{float:unset; } .d_section.d_portfolio .b_tit_box p{font-size: 1.4rem; font-weight: 500; line-height: 1.5; margin-top: 20px;} .d_section.d_portfolio .d_btn__black{margin:0 auto; margin-top:40px; width:fit-content; display:block; } .d_section.d_portfolio .d_btn__black a{display:flex; align-items:center; } .d_section.d_portfolio .d_btn__black i{width:12px; height:2px; background-color:#fff; display:block; margin-right:10px; position:relative; } .d_section.d_portfolio .d_btn__black i:after{content:''; width:2px; height:12px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } @media (max-width: 1280px) { } @media (max-width: 1024px) { .d_portfolio .d_cont_area li {width: calc((100% - 40px) / 3);margin-right: 20px;} .d_portfolio .d_cont_area li:nth-child(4n) {margin-right: 20px;} .d_portfolio .d_cont_area li:nth-child(3n) {margin-right: 0;} .d_portfolio .d_cont_area li:nth-child(4n+1) {clear:none} .d_portfolio .d_cont_area li:nth-child(3n+1) {clear:both;} } @media (max-width: 760px) { .d_portfolio {margin-bottom: 70px;} .d_portfolio .d_tit_area {margin-bottom: 60px;} .d_portfolio .d_cont_area li{aspect-ratio: 1 / 1;} .d_portfolio .d_cont_area li:nth-child(3n+1) {clear:none;} .d_portfolio .d_cont_area li:nth-child(2n+1) {clear:both;} .d_section.d_portfolio .b_tit_box{margin-bottom: 40px;} .d_portfolio .d_cont_area li .d_hover_text p {font-size: 20px;} } @media (max-width: 520px) { .d_portfolio .d_cont_area li {width: calc((100% - 20px) / 2);margin-right: 20px;} .d_portfolio .d_cont_area li:nth-child(3n) {margin-right: 20px;} .d_portfolio .d_cont_area li:nth-child(2n) {margin-right: 0;} .d_portfolio .d_cont_area li span {font-size: 1rem;} .d_portfolio .d_tit_area h3 {margin-top: 10%;} } /*CONTACT-----------------------------------------------------*/ .d_contact {background:url(/img/process/b_pro_bg.jpg) no-repeat center / cover; padding: 120px 0;} .d_contact .d_tit_area {float:left;} .d_contact .d_tit_area h2 {float: unset; margin-bottom: 75px; color:#fff;} .d_contact .d_tit_area h2 span::before{background-color:#fff;} .d_contact .d_tit_area p {font-size: 1.5rem;margin-bottom: 100px;line-height: 35px;color:#fff;} .d_contact .d_tit_area .d_tel_mail span {display: block;font-size: 1rem;font-weight: 600;margin-bottom: 10px;color:#fff;} .d_contact .d_tit_area .d_tel_mail span i {margin-right: 10px;} .d_contact .d_cont_area {float: right;width: 60%;text-align: center;} .d_contact .d_cont_area img {display: block;width: 100%;} #d_form_btn input {width: 230px;height: 60px;background-color: #111;color: #fff;text-align: center;font-size: 1.5rem;line-height: 60px;border:1px solid #e7e7e7;cursor: pointer;transition:all .3s;} #d_form_btn input:hover {background-color: #fff;color: #111;border:1px solid #111;transition:all .3s;border-radius:50px;} /* d_contact form */ .d_contact .d_radio_box {text-align: left; margin-bottom: 50px;} .d_contact .d_radio_box .d_checkbox {position: relative; display: inline-block;} .d_contact .d_radio_box h2 {font-size: 1.125rem; margin-bottom: 20px;} .d_contact .d_radio_box label { font-size: 1rem; color: #acacac; margin-right: 20px;} .d_contact .d_cont_area form ul {text-align: left;} .d_contact .d_cont_area form ul li {float: left;width: 50%; } .d_contact .d_cont_area form ul li.d_w_100 {width: 100%;} .d_contact .d_cont_area form ul li label {display: block; font-size: 1.125rem;margin-bottom: 20px; color:#fff;} .d_contact .d_cont_area form ul li label .d_red {color: #ff0000;} .d_contact .d_cont_area form ul li input {border: none; border-bottom: 1px solid #aeaeae; outline: none;font-size: 1rem;color: #aeaeae; padding: 10px;margin-bottom: 60px;width: 90%; border-radius:5px;} .d_contact .d_cont_area form ul li.d_mb_0 input {margin-bottom: 0; height: 130px; width: 95%;} .d_contact .d_cont_area form ul li .form_check {display: flex;margin-top: 30px; margin-bottom: calc(30px);} .d_contact .d_cont_area form ul li .form_check input {width: auto;} .form_radio input[type='radio'], .form_check input[type='checkbox'], .d_checkbox input[type='checkbox']{position: fixed;top: 0;left: 0;width: 0;height: 0;opacity: 0;outline: 0;z-index: -1;overflow: hidden;} .form_radio label span, .form_check label span, .d_checkbox label span{display: inline-flex;width: 16px;height: 16px;border: 1px solid #222;cursor: pointer;margin-top: -1px;background-color:#fff; vertical-align: middle;} .d_checkbox label span {border-radius: 0; margin-right: 8px;vertical-align: middle;} .d_checkbox input[type='checkbox']:checked + label {color: #000;} .form_radio input[type='radio']:checked + label span, .form_check input[type='checkbox']:checked + label span{background:url(/img/icon/chk.png) no-repeat 50% 50% #fc0000;border-color: #fc0000;} .d_checkbox input[type='checkbox']:checked + label span {background:url(/img/icon/b_chk.png) no-repeat 50% 50% #fff;border-color: #000;} @media (max-width: 1360px) { .d_contact .d_tit_area {width: 100%;} .d_contact .d_tit_area p {float: left;} .d_contact .d_tit_area .d_tel_mail {float: right;} .d_contact .d_cont_area {float: unset;width: 60%;text-align: center; margin: auto;} } @media (max-width: 760px) { .d_client {padding-bottom: 70px;} .d_contact .d_tit_area p {width: 100%;margin-bottom: 0;text-align: center;} .d_contact .d_tit_area .d_tel_mail {float: left;width: 100%;margin-top: 30px;margin-bottom: 50px;text-align: center;} .d_contact .d_cont_area {width: 100%;} } /* BANNER */ .d_banner {background: url("/img/index/banner_bg.jpg") center center / cover no-repeat;padding:150px 0; } .d_banner .d_inner {max-width: 1920px;height:100%;display:flex; align-items:center;justify-content:center; flex-direction: column;} .d_banner .b_tit_box{margin-bottom:20px; } .d_banner .b_tit_box h2{font-size: 3.25rem; color: #fff;} .d_banner .b_txt_box h3{text-align:center; word-break:keep-all; color:#fff; font-size:1.875rem; line-height:1.5; } .d_banner .b_more_btn{display:flex; align-items:center; justify-content:center; border-radius:50px; height:60px; width:200px; background-color:#fff; font-size:1.5rem; margin:0 auto; margin-top:40px; } @media (max-width: 1080px) { .d_banner {padding:70px 0; } .d_banner .b_txt_box h3{font-size: 1.5rem;} } @media (max-width: 760px) { .d_banner .b_more_btn{padding: 15px 40px; width: fit-content; margin-top: 30px;} } /* Q&A */ .b_qna_sec {padding:150px 0; } .b_qna_sec .b_tit_box {text-align:center; } .b_qna_sec .b_tit_box h2{font-size: 2.25rem; color: #fcbc00; text-shadow: 3px 3px #b78e15} .b_qna_sec .b_tit_box h2 span{position: relative;} .b_qna_sec .b_tit_box p{font-weight: bold; line-height: 1.3; margin-top:20px; font-size: 2.5rem; letter-spacing:-1px; } .b_qna_sec .b_cont_box{margin-top:60px; } .b_qna_sec .b_qna_list {max-width:1000px; width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; row-gap:30px; } .b_qna_sec .b_qna_list li{width:100%; border-radius: 15px; overflow: hidden;} .b_qna_sec .b_qna_list .b_top_box {display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:20px 30px; background-color:#f9f9f9; transition:background-color .1s; } .b_qna_sec .b_qna_list .b_top_box p{font-size: 1.4rem; font-weight: 600; word-break:keep-all; display:flex; align-items:baseline; } .b_qna_sec .b_qna_list .b_top_box b{width: 40px; opacity:.3; font-size: 1.563rem; } .b_qna_sec .b_qna_list .b_top_box img{filter:invert(1); transform:rotate(90deg); width:10px; transition:transform .2s;} .b_qna_sec .b_qna_list .b_bot_box {padding:20px 30px; background-color:#f9f9f9; display:none; } .b_qna_sec .b_qna_list .b_bot_box p{font-size: 1.2rem; font-weight: 400; word-break:keep-all; line-height:1.5; display:flex; align-items:baseline; } .b_qna_sec .b_qna_list .b_bot_box p i{width: calc(100% - 40px);} .b_qna_sec .b_qna_list .b_bot_box b{width: 40px; opacity:.3; font-size: 1.563rem; } .b_qna_sec .b_qna_list li.on .b_top_box {background-color:#fc0000; transition:background-color .2s; } .b_qna_sec .b_qna_list li.on .b_top_box p{color:#fff;} .b_qna_sec .b_qna_list li.on .b_top_box b{opacity:1; } .b_qna_sec .b_qna_list li.on .b_top_box img{filter:unset; transform:rotate(-90deg); transition:transform .2s;} .b_qna_sec .b_qna_list li:first-child .b_bot_box {display:block; } @media (max-width: 760px) { .b_qna_sec {padding: 70px 0;} .b_qna_sec .b_cont_box {margin-top: 40px;} .b_qna_sec .b_qna_list{row-gap: 15px;} .b_qna_sec .b_qna_list li{border-radius: 8px;} .b_qna_sec .b_qna_list .b_top_box{padding: 15px;} .b_qna_sec .b_qna_list .b_bot_box{padding: 15px;} .b_qna_sec .b_qna_list .b_top_box b {width: 27px;} .b_qna_sec .b_qna_list .b_bot_box b {width: 27px;} .b_qna_sec .b_qna_list .b_bot_box p i {width: calc(100% - 27px);} .b_qna_sec .b_qna_list .b_top_box img{width: 7px;} } /* 하단 고정폼 */ #b_quick_form{position:fixed; width:100%; height:80px; background-color:#fcbc00; left:0; bottom:-100px; z-index:10; transition:bottom .3s; } #b_quick_form.show{bottom:0; transition:bottom .5s;} #b_quick_form .d_inner{display:flex; align-items:center; justify-content:space-between; height:100%; } #b_quick_form .b_tit_box{display:flex; align-items:center; column-gap:15px; margin-right:20px; } #b_quick_form .b_tit_box h4{width:fit-content; } #b_quick_form .b_num_box{display:flex; align-items:center; column-gap:13px; } #b_quick_form .b_num_box figure{width:48px;aspect-ratio: 1 / 1;border-radius:50%; background-color:#fc0000; display:flex; align-items:center; justify-content:center;} #b_quick_form form{display:flex; align-items:center; width:57%; } #b_quick_form .b_form_list{display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap;} #b_quick_form .b_form_list li{width:24.3%; } #b_quick_form .b_input{height:48px; border-radius:3px; background-color:#fff; padding:0 12px; border:0; width: 100%; font-size:0.938rem; } #b_quick_form .b_form_list li:last-child .form_check {font-size:0.874rem; font-weight:500; } #b_quick_form .b_form_list li:last-child .form_check label{display: flex; align-items: flex-start;} #b_quick_form .b_form_list li:last-child .form_check span{margin-right:3px; aspect-ratio: 1 / 1;} #b_quick_form .b_form_list li:last-child .form_check label b{word-break:keep-all; } #b_quick_form .b_form_list li:last-child .form_check .k_pp_text{font-weight:bold; } #b_quick_form .form_btn #btn_submit{width:150px; height:48px; background-color:#000; color:#fff; border-radius:3px; border:0; font-size:1.125rem; } @media screen and (max-width: 1480px){ #b_quick_form .b_tit_box img{display:block; max-width:100%; } #b_quick_form .b_num_box figure img{width:22px; } #b_quick_form form{column-gap: 8px;} #b_quick_form .b_form_list{row-gap: 5px;} #b_quick_form .b_form_list li {width: 32.3%;} #b_quick_form .b_form_list li:last-child{width:100%; } #b_quick_form .form_btn{margin-top: -22px;} } @media screen and (max-width: 1280px){ #b_quick_form .form_btn #btn_submit{width:120px; } } @media screen and (max-width: 960px){ #b_quick_form{height:unset; padding:10px 0; } #b_quick_form .d_inner{flex-direction: column; align-items: flex-start; row-gap:6px; } #b_quick_form .b_tit_box{column-gap: 5px; margin-right: 0px;} #b_quick_form .b_tit_box h4 img{height:30px; } #b_quick_form .b_num_box figure {width: 30px;} #b_quick_form .b_num_box figure img{width:16px; } #b_quick_form .b_num_box p img{height:30px; } #b_quick_form form{width: 100%; align-items: flex-start;} #b_quick_form .b_input{height: 40px; border-radius: 2px; padding: 0 8px;} #b_quick_form .b_form_list li {width: 32.5%;} #b_quick_form .form_btn{margin-top: 0; } #b_quick_form .form_btn #btn_submit{height:40px; border-radius: 2px !important; line-height: 40px;} #b_quick_form .b_num_box{column-gap: 5px;} } @media screen and (max-width: 960px){ #b_quick_form{bottom:-105%; } } @media screen and (max-width: 460px){ #b_quick_form form {column-gap: 4px;} } /* FOOTER */ .d_footer {background-color: #515151;color: #fff;padding: 50px 0 130px;} .d_footer .d_hd_inner {position: relative;} .d_footer .d_hd_inner > div{display:flex; justify-content:space-between; align-items:center; } .d_footer .d_hd_inner .b_ft_bot{align-items:flex-end; } .d_footer .d_logo a{display:block; font-weight: bold; font-size: 2rem;} .d_footer .d_info {margin-top: 30px; width: 68%;} .d_footer .d_info span {display: inline-block;font-size: 1rem;line-height:1.8;margin-right:20px; } .d_footer .d_info span b{font-weight:bold; color:#fc8e00; margin-right: 5px;} .d_footer .b_ft_top ul{display:flex; align-items:center; justify-content:flex-end; column-gap:15px; } .d_footer .b_ft_top ul li a{display:block; } .d_footer .d_copy {font-size: 0.875rem;color: #fff;margin-top: 30px; line-height: 1.8;text-align: right;width: 32%;} .d_footer .d_copy a{display:block; padding:1px 8px; background-color:rgba(255,255,255,.2); width:fit-content; margin-left:auto; border-radius:3px; margin-bottom:7px; } @media screen and (max-width: 1080px){ .d_footer .d_logo img{width:200px; } .d_footer .b_ft_top ul li img{width:40px; } .d_footer .d_hd_inner .b_ft_bot{flex-direction:column; align-items:flex-start;} .d_footer .d_info{width:100%; } .d_footer .d_copy {width:100%; } .d_footer .d_info br{display:none;} .d_footer .d_info span{display: block; margin-right:0; font-size:15px; } .d_footer .d_copy{font-size:15px; margin-top: 10px;text-align: left;} .d_footer .d_copy a{margin-left: 0;} } @media (max-width: 960px) { .d_footer {padding: 50px 0 150px;} } @media (max-width: 760px) { .d_footer {padding: 30px 0 140px;} .d_footer .b_ft_top ul{column-gap:7px; } .d_footer .d_info {margin-top: 20px;} } @media (max-width: 500px) { .d_footer .d_logo img{width:160px; } .d_footer .d_info span{font-size:13px; } .d_footer .d_copy{font-size:13px; } } .d_sec_bo_table {margin-bottom: 150px;} /* 개인정보처리방침, 이용약관 팝업 */ .add_pop_wrap{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.7);z-index: 9999;display: none;} .add_pop_inner{position: absolute;top: 50%;left: 50%;width: 94%;max-width: 800px;height: 600px;border-radius: 15px;overflow: hidden;transform: translate(-50%,-50%) scale(.9);transition: transform .3s ease;} .add_pop_wrap.active .add_pop_inner{transform: translate(-50%,-50%) scale(1);} .add_pop_tit{background: #fc0000;color: #FFF;display: flex;flex-direction: row;align-items: center;justify-content: space-between;padding: 0 25px;} .add_pop_close{width: 20px;height: 60px;position: relative;} .add_pop_close span{position: absolute;top: 29px;left: 0;width: 20px;height: 2px;background: #FFF;z-index: 1;transition: transform .3s ease;} .add_pop_close span:nth-child(1){transform: rotate(45deg);} .add_pop_close span:nth-child(2){transform: rotate(-45deg);} .add_pop_close:hover span{transform: rotate(0);} .add_pop_con{background: #FFF;padding: 22px 25px;overflow-y: scroll;height: calc( 100% - 60px );} .add_pop_con h5{font-size: 1rem;font-weight: bold;margin-bottom: 10px;} .add_pop_con p{font-size: 14px;line-height: 160%;margin-bottom: 25px;} @media screen and (max-width: 760px){ .add_pop_con p{font-size: 12px;} } /*form*/ #k_form_content{display: block;width: 100%;resize: none;min-height: 150px;border: none;border-bottom: 1px solid #aeaeae;outline: none;color: #000;padding: 10px; border-radius: 5px;} #k_form_content::placeholder{color: #777;} .d_contact .d_cont_area form ul li input{color: #000;} .d_contact .d_cont_area form ul li input::placeholder{color: #777;} .d_contact .d_cont_area form ul li.form_chk{display: block;width: 100%;float: none;} .form_chk{margin-bottom: 40px;} .chk_txt{margin-right: 30px;} .chk_txt b{font-size: 1rem;color: #b1b1b1;} .form_radio label span, .form_check label span, .d_checkbox label span{border-color: #b1b1b1;} .d_checkbox input[type='checkbox']:checked + label span{border: 2px solid #000;} .d_checkbox input[type='checkbox']:checked + label b{color: #fff;} @media (max-width: 720px) { .form_check{flex-wrap: wrap;} .form_check .d_checkbox{width: 50%;} .d_contact .d_cont_area form ul li label{margin-bottom: 15px;} .k_last_li{display: block;width: 100% !important;} .k_last_li label{margin-bottom: 0 !important;} .k_last_li label a{display: inline-block;margin-left: 5px;} } /*---new---*/ .k_input{display: block;width: 100%;padding: 0 10px;height: 45px;outline: none;} .k_label_txt{font-size: 1rem;-webkit-text-stroke: 0.02em;} .k_port{-webkit-text-stroke: 0.005em;} .tbl_frm01 th{text-align: center;font-size: 1rem;width: 150px;-webkit-text-stroke: 0.02em;background: #f9f9f9;} #ca_name{width: 180px;padding: 10px 5px;} #ca_name.required, textarea.required{background-image: none !important;} .cke_sc{display: none;} .k_alert{display: block;font-size: 0.9rem;padding-top: 3px;-webkit-text-stroke: 0.01em;color: #777;} .k_required{color: #F00;} #btn_submit, .btn_cancel{margin: 0;width: 120px;line-height: 40px;} .d_portfolio .d_cont_area li{position: relative;} .chk{position: absolute;top: 8px;left: 13px;z-index: 1;} /*pointer*/ #cursor{position: fixed;top: 0;left: 0;z-index: 9999;transform-origin: center;} #cursor .blob{position: absolute;top: 50%;left: 50%;margin: -7.5px 0 0 -7.5px;width: 15px;height: 15px;border-radius: 100%;background: transparent;pointer-events: none;transition: width 0.3s, height 0.3s, margin 0.3s, background-color 0.3s, color 0.3s;} #cursor .blob span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);color: transparent;width: 100%;transition: color 0.3s;text-align: center;font-weight: 500;white-space: nowrap;background-repeat: no-repeat;background-position: center center;} #cursor.active .blob{width: 164px;height: 164px;margin: -82px 0 0 -82px;background: rgba(137,202,225,0.9);color: #FFF;} #cursor.active .blob span{color: #FFF;} #cursor.active.on_video span{background-image: url(../img/icon/play_btn.png);color: transparent;} @media (max-width: 760px) { .k_inner{padding-top: 100px;} .k_inner .d_port_sub_sec .d_tit_area h4{font-size: 1.5rem !important;} .d_port_sub_sec .d_tit_area p{font-size: 1.1rem !important;} .d_port_sub_sec .d_tit_area{margin-bottom: 30px !important;} .d_video_box{margin-bottom: 30px !important;} #k_new_txt_area .d_explan{} #k_new_txt_area .d_info_text h2, #k_new_txt_area .d_info_text h2 span, #k_new_txt_area .d_planing_text h2{display: block;width: 100%;margin-bottom: 20px !important;font-size: 1.5rem;} .d_port_sub_sec .d_text_area .d_explan span b{width: 80px !important;} .d_port_sub_sec .d_text_area{margin-bottom: 50px !important;} .d_project_list_area li a{padding: 15px 0 !important;font-size: 11px !important;} .d_port_sub_sec .d_project_list_area li span{display: none;} .d_port_sub_sec .d_project_list_area li h3{width: 25% !important;font-size: 12px !important;} .d_port_sub_sec .d_project_list_area li p{width: 75% !important;} #new_port h4{font-size: 2rem;margin-bottom: 10px;} #new_port p{font-size: 1.4rem;line-height: 160% !important;} #new_port p br{display: none;} #new_port p, #new_port b{display: inline-block;width: 100%;} .d_portfolio_sub .d_tit_area{margin-bottom: 30px !important;} .d_portfolio_sub .tit_list{display: block !important;flex: none;margin-bottom: 20px !important;} .tit_list li{display: inline-block !important;margin-bottom: 0 !important;} .tit_list li a{padding-right: 14px !important;padding-left: 0 !important;} .d_portfolio .d_cont_area li{width: calc((100% - 6px) / 2);margin-right: 6px;margin-bottom: 6px;} .d_portfolio .d_cont_area li:nth-child(3n), .d_portfolio .d_cont_area li:nth-child(4n){margin-right: 5px !important;} .d_portfolio .d_cont_area li:nth-child(2n){margin-right: 0 !important;} .d_portfolio .d_cont_area li a h4 .d_hover_text{width: 85% !important;} .d_portfolio .d_cont_area li a h4 .d_hover_text p{font-size: 1rem !important;} .tbl_frm01 th{width: 70px;} .tbl_frm01 td{width: calc(100% - 70px);} } .admin_btn{left: 10px; bottom: 150px; z-index:10; position:fixed; } .admin_btn ul{flex-direction:column; } .admin_btn ul li{margin-right:0; } .admin_btn ul li:first-child{margin-bottom:7px; } .admin_btn ul li a{font-size:1rem; width: 100px; height:40px; text-align: center; padding: 0; display:flex; align-items:center; justify-content:center; line-height:1.4; border-radius: 5px; color:#fff; font-weight:bold; border:1px solid #fff; } .admin_btn ul li:first-child a{background-color:#222;} .admin_btn ul li:last-child a{background-color:#fc0000;} @media (max-width: 760px) { .admin_btn{left: 10px; bottom:140px; } } .br_760o{display:none; } @media (max-width: 760px) { .br_760o{display:block; } } .br_500o{display:none; } @media (max-width: 500px) { .br_500o{display:block; } } .br_400o{display:none; } @media (max-width: 400px) { .br_400o{display:block; } }