@charset "utf-8"; /* main css */ label, input, select{vertical-align:middle;} /* ========== layout ========== */ body{overflow-x:hidden;} em { font-style: normal; } .clear_fix::after{content: ""; display: block; clear: both;} #wrap{width:100%; overflow:hidden;} #container{width:100%;} .inner { max-width: 1300px; margin: 0 auto; } #header {position: fixed; width: 100%; height:100px; top: 0px; left: 0px; z-index: 10; transition: all 0.3s; background-color: rgba(255,255,255,0.3); box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1); } #header .header_box {max-width: 1300px; margin: 0 auto; width: 100%; box-sizing: border-box; position: relative; transition: all 0.3s;} #header .logo {position: absolute; top: 16px; z-index: 1; transition: all 0.3s;} #header .logo a { display: block; width: 100%; } #header .logo a img { width: 100%; vertical-align: middle;} #header.scroll { background-color: #fff; } #quick_box{width:86px; height:100%; position:fixed; top:0; right:-86px; z-index:10; display:flex; justify-content:center; align-items:center; table-layout:fixed; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease;} #quick_box.on{opacity:1; right:0; visibility:visible;} #quick_box h1{width:86px; height:86px; background:url('../img/common/quick_logo.png') 0 0 no-repeat; font-size:0; text-indent:-999999; overflow:hidden;} #quick_box ul{width:100%; border:1px solid #dcdcdc; border-top:0; font-size:0;} #quick_box ul li{border-top:1px solid #dcdcdc;} #quick_box ul li a{display:block; height:98px; background-color:white; font-size:13px; color:#222; line-height:16px; text-align:center; position:relative; padding-top:54px;} #quick_box ul li a:before{content:''; position:absolute; top:14px; left:50%; margin-left:-17px; width:35px; height:32px;} #quick_box ul li a span{display:block; letter-spacing:-0.5px; color:#2558ff;} #quick_box ul li.box01 a:before{background:url('../img/common/quick_icon01.jpg') 0 0 no-repeat;} #quick_box ul li.box02 a:before{background:url('../img/common/quick_icon02.jpg') 0 0 no-repeat;} #quick_box ul li.box03 a:before{background:url('../img/common/quick_icon03.jpg') 0 0 no-repeat;} #quick_box ul li.box04 a:before{background:url('../img/common/quick_icon04.jpg') 0 0 no-repeat;} #quick_box a.top_btn{display:block; width:100%; height:30px; background:#3a3a3a url('../img/common/top_btn_arr.png') 50% 50% no-repeat;} #footer { width:100%; background-color: #464646; color: #fff; } #footer .foot_info { width: 100%; max-width: 1300px; margin: 0 auto; padding: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between; } #footer .foot_info > div { align-self: center; } #footer .foot_info > div:first-child p { font-size: 14px; } #footer .foot_info > div:first-child p:not(:last-child) { padding-bottom: 5px; } #footer .foot_info > div:last-child { display: flex; justify-content: flex-end; } #footer .foot_info > div:last-child ul { display: flex; margin-right: 30px; align-self: center; } #footer .foot_info > div:last-child ul li { display: flex; line-height: 19px; } #footer .foot_info > div:last-child ul li a { color: #fff; } #footer .foot_info > div:last-child ul li:not(:first-child)::before { content: ""; display: block; width: 1px; height: 12px; background-color: #fff; align-self: center; margin: 0 10px; } #footer .foot_info > div:last-child img { height: 60px; } /* PC */ @media all and (min-width:1101px){ .pc_show{ display:block !important;} .pc_i_show{ display:inline-block !important;} .m_show{ display:none !important;} .m_i_show{ display:none !important;} #header .menu_box {max-width:980px; display: block !important; text-align:center; float:right;} #header .menu_box .dep1_wrap { display: flex; margin: 0 auto; width: 100%; gap: 40px; } #header .menu_box .dep1 { position: relative; box-sizing: border-box;} /* #header .menu_box .dep1:not(:last-child)::after { content: ""; display: block; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 1px; height: 12px; background-color: #3a3a3a; } */ #header .menu_box .dep1:hover .dep2_wrap{background-color:#f9f9f9;} #header .menu_box .dep1:first-child .dep2_wrap{position: absolute; width: 150px; left: 50%; transform: translateX(-50%);} #header .menu_box .dep1 span {display: block; min-width: 90px; width: 100%; text-align: center;} #header .menu_box .dep1 span::before {content: ''; width: 0px; height: 3px; background-color: #fff; position: absolute; bottom:-1px; right: 50%; transition: all 0.3s;} #header.on .menu_box .dep1 span::before{background-color: #222;} #header .menu_box .dep1 span::after {content: ''; width: 0px; height: 3px; background-color: #fff; position: absolute; bottom:-1px; left: 50%; transition: all 0.3s;} #header.on .menu_box .dep1 span::after{background-color: #222;} #header .menu_box .dep1.active span::before {width:50%;} #header .menu_box .dep1.active span::after {width:50%;} #header .menu_box .dep1:hover span::before {width:50%;} #header .menu_box .dep1:hover span::after {width:50%;} #header .menu_box .dep1 > a {font-size:18px; color:#222; line-height:100px; transition: color 0.3s; display: block; transition: all 0.3s; position:relative;} #header.on .menu_box .dep1 > a {color: #222;} #header .menu_box .dep2_wrap {width:100%; text-align: center; padding:24px 0 !important; display:none;} #header .menu_box .dep2_wrap:hover{background:#f9f9f9;} #header .menu_box .dep2_wrap li {margin-bottom: 14px;} #header .menu_box .dep2_wrap li:last-child {margin-bottom: 0px;} #header .menu_box .dep2_wrap li a {font-size:15px; color:#666; transition: all 0.3s;} #header .menu_box .dep2_wrap li a:hover{text-decoration:underline;} #header .menu_box .dep2_wrap li.on a {color: #222;} #header .menu_box .dep2_wrap li a:hover {color: #222;} } @media (max-width:1100px){ .pc_show{ display:none !important;} .pc_i_show{ display:none !important;} .m_show{ display:block !important;} .m_i_show{ display:inline-block !important;} #header{height:60px;} #header .header_box {max-width:100%; padding:0 15px; text-align: left; height: 60px; } #header .logo {position: relative; top: 10px; left: auto; display: inline-block; width: 80px; background-size:100%;} #header .menu_box {text-align:left; position:fixed; width:100%; height: calc(100% - 60px); background-color: #fff; left: 0px; top:60px; display: none; opacity: 0; transition: all 0.3s; overflow-y:auto; } #header .header_box .menu_box.on {opacity: 1; display:block;} #header .menu_box .dep1 {display:block; position: relative; padding:0px;} #header .menu_box .dep1_wrap {padding:24px 25px;} #header .menu_box .dep1 > a {font-size:20px; color: #222; font-weight:700; display:block; border-bottom:1px solid #eaeaea; padding:14px 0; position:relative;} #header .menu_box .dep1 > a:before{content:''; position:absolute; top:50%; right:0; margin-top:-4px; width:14px; height:9px; background: url('../img/common/m_menu_arrow.png') no-repeat right center; transition: all 0.2s;} #header .menu_box .dep1 > a.on:before {background: url('../img/common/m_menu_arrow_on.png') no-repeat right center; transform: rotate(180deg);} #header .menu_box .dep2_wrap {display:none; border-bottom:1px solid #eaeaea;} #header .menu_box .dep2_wrap li {line-height:30px; padding: 0 14px;} #header .menu_box .dep2_wrap li:first-child {padding-top:10px;} #header .menu_box .dep2_wrap li:last-child {padding-bottom:10px;} #header .menu_box .dep2_wrap li a {font-size: 14px; color: #666; font-weight:400; display: block;} #header .menu_box .dep2_wrap li.on a {color: #222;} #header .m_menu_btn {width: 30px; height: 15px; position: absolute; right: 15px; top: 50%; margin-top:-8px; cursor: pointer;} #header .m_menu_btn span {background-color:#222; width: 100%; height: 1px; position: absolute; left: 0px; transition: all 0.3s;} #header.scroll .m_menu_btn span {background-color: #363636;} #header .m_menu_btn span:nth-child(1) {top: 0px;} #header .m_menu_btn span:nth-child(2) {top: 7px;} #header .m_menu_btn span:nth-child(3) {bottom: 0px;} #header .m_menu_btn.on span {background-color:#222;} #header .m_menu_btn.on span:nth-child(1) {transform: rotate(315deg); top: 50%; margin-top: -1px;} #header .m_menu_btn.on span:nth-child(2) {display: none;} #header .m_menu_btn.on span:nth-child(3) {transform: rotate(-315deg); top: 50%; margin-top: -1px; bottom: auto;} #footer .foot_menu .inner{max-width:100%; padding:0 15px;} #footer .foot_menu ul li{padding:0 10px;} #footer .foot_menu ul li:before{margin-top:-4px; height:10px;} #footer .foot_menu ul li a{font-size:13px; padding:12px 0;} #footer .foot_info{max-width:100%; padding:24px 15px;} #footer .foot_info > div{margin-top:10px;} #footer .foot_info > div:first-child{margin-top:0;} #footer .foot_info > div span{font-size:12px; color:#666; padding:0 14px; line-height:100%;} #footer .foot_info > div span:before{margin-top:-5px; left:0; width:1px; height:10px;} #footer .foot_info > div span:first-child{padding-left:0;} #footer .foot_info > div span:first-child:before{display:none;} #footer .foot_info > p{font-size:11px; margin-top:24px;} } /* 태블릿&모바일 공통*/ @media all and (max-width:1024px){ #quick_box{width:100%; height:auto; position:fixed; top:auto; bottom:0; right:auto; z-index:10; display:block;} #quick_box.on{right:auto; bottom:0;} #quick_box h1{display:none;} #quick_box ul{width:100%; border:0; border-top:1px solid #dcdcdc; overflow:hidden;} #quick_box ul li{width:25%; float:left; border-top:0; border-left:1px solid #dcdcdc;} #quick_box ul li:first-child{border-left:0;} #quick_box ul li a{height:70px; font-size:12px; line-height:14px; padding-top:36px;} #quick_box ul li a:before{top:8px; margin-left:-12px; width:24px; height:22px;} #quick_box ul li.box01 a:before{background-size:100%;} #quick_box ul li.box02 a:before{background-size:100%;} #quick_box ul li.box03 a:before{background-size:100%;} #quick_box ul li.box04 a:before{background-size:100%;} #quick_box a.top_btn{display:none;} } @media all and (max-width:768px){ #footer .foot_info { flex-direction: column-reverse; } #footer .foot_info > div{margin-top:0;} #footer .foot_info > div span{padding:0; line-height:100%; display:block; line-height:20px;} #footer .foot_info > div span:before{display:none;} #footer .foot_info > div { width: 100%; } #footer .foot_info > div:last-child { justify-content: start; margin-bottom: 20px; } #footer .foot_info > div:last-child ul { display: none; } } /* 회사소개 */ #intro .section01 ul { position: relative; display: flex; justify-content: space-between; width: 100%; max-width: 850px; margin: 50px auto 0; } #intro .section01 ul::after { content: ""; display: block; width: 100%; height: 1px; background-color: #e8e8e8; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: -1; } #intro .section01 ul li { position: relative; width: 30px; height: 30px; border: 1px solid #333; border-radius: 100%; background-color: #fff; cursor: pointer; } #intro .section01 ul li a { position: absolute; left: 50%; transform: translateX(-50%); top: 40px; display: block; width: max-content; transition: all 0.3s; } #intro .section01 ul li::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background-color: #333; border-radius: 100%; transition: all 0.3s; } #intro .section01 ul li:hover { border: 1px solid #B61818; } #intro .section01 ul li:hover a { color: #B61818; } #intro .section01 ul li:hover::after { background-color: #B61818; } #intro .section_title { font-size: 18px; padding-bottom: 50px; } #intro .section_title::before { content: ""; display: block; width: 150px; height: 1px; background-color: #3a3a3a; margin-bottom: 10px; } #intro .section02 {background: url("/kirin/file/IMAGE/uu/f5306a84253d4783a3fc2473baa6122c") no-repeat center center;width: 100%;height: 100vh;margin-top: 100px;margin-bottom: 100px;position: relative;overflow: hidden;} #intro .section02 > div {position: absolute;bottom: 0px;left: 0;width: 100%;} #intro .section02 > div .inner div {position: relative;width: max-content;padding: 10px 40px;border-top: 1px solid #3a3a3a;border-left: 1px solid #3a3a3a;border-right: 1px solid #3a3a3a;} #intro .section02 > div .inner div::before { content: ""; display: block; position: absolute; bottom: 0; right: 100%; width: 999px; height: 1px; background-color: #3a3a3a;} #intro .section02 > div .inner div::after { content: ""; display: block; position: absolute; bottom: 0; left: 100%; width: 3999px; height: 1px; background-color: #3a3a3a;} #intro .section02 > div img {max-width: 54px;} #intro .section03 { padding: 0 20px; } #intro .section03 .inner > div { padding: 100px 0; } #intro .section03 .inner > div:not(:last-child) > div { max-width: 850px; width: 100%; margin: 0 auto; text-align: center; } #intro .section03 .inner #im01 > p:nth-child(2) { text-align: center; font-size: 22px;} #intro .section03 .inner #im01 > p:nth-child(2) span { color: #C30000; } #intro .section03 .inner #im02 > div img { display: block; margin: 0 auto; } #intro .section03 .inner #im02 > div h3 { text-align: center; font-size: 22px; padding-bottom: 50px; } #intro .section03 .inner #im02 > div h4 { font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #3a3a3a; margin-bottom: 10px; } #intro .section03 .inner #im03 > div img { display: block; margin: 0 auto; } #intro .section03 .inner #im03 > div p { font-size: 22px; text-align: center; } #intro .section03 .inner #im04 > div { max-width: max-content; width: 100%; margin: 0 auto; } #intro .section03 .inner #im04 > div ul li { font-size: 22px; display: flex; gap: 10px; } #intro .section03 .inner #im04 > div ul li:not(:last-child) { padding-bottom: 30px; } #intro .section03 .inner #im04 > div ul li span:first-child { width: 100px; display: flex; justify-content: space-between; } #intro .section03 .inner #im04 > div ul li span:last-child { width: calc(100% - 100px); text-align: left; } #intro .section03 .inner #im05 > div { text-align: center; } #intro .section03 .inner #im05 > div > div:first-child { margin-bottom: 20px; } #intro .section03 .inner #im05 > div > div { width: 100%; text-align: center; margin: 0 auto; font-size: 24px; } /* 서브페이지 */ .sub_page_title { margin-top: 150px; } .sub_page_title .inner { max-width: 1300px; margin: 0 auto; } .sub_page_title .inner h2 { font-family: "Oswald", sans-serif; font-size: 36px; } .sub_container .inner .item_list { padding-bottom: 50px; } .sub_container .inner .item_list ul { display: flex; gap: 50px; } .sub_container .inner .item_list ul li { text-align: center; width: 200px; } .sub_container .inner .item_list ul li > a { display: flex; width: 100%; height: 150px; justify-content: center; } .sub_container .inner .item_list ul li > a img { align-self: center; max-width: 80%; max-height: 80%; } .sub_container .inner .item_list ul li div:last-child { padding-top: 10px; margin-top: 10px; border-top: 1px solid #3a3a3a; text-transform: capitalize; } .sub_container .inner .first_info { display: flex; padding-bottom: 100px; } .sub_container .inner .first_info > div { width: 50%; } .sub_container .inner .first_info .imgSwiper { border: 1px solid #3a3a3a; } .sub_container .inner .first_info .imgSwiper.fullsize { border: none; } .sub_container .inner .first_info .imgSwiper .swiper-slide { display: flex; justify-content: center; padding: 50px 0; } .sub_container .inner .first_info .imgSwiper .swiper-slide img { max-width: 80%; max-height: 500px; align-self: center; } .sub_container .inner .first_info .imgSwiper.fullsize .swiper-slide { padding: 0; } .sub_container .inner .first_info .imgSwiper.fullsize .swiper-slide img { max-width: 100%; } .sub_container .inner .first_info > div:last-child { text-align: center; padding: 50px; align-self: center; } .sub_container .inner .first_info > div:last-child > img { max-width: 300px; } .sub_container .inner .first_info > div:last-child > p { font-family: "Oswald", sans-serif; font-size: 24px; padding: 20px 0; } .sub_container .inner .first_info > div:last-child > ul { width: max-content; margin: 0 auto; } .sub_container .inner .first_info > div:last-child > ul.no_tit { padding-top: 50px; } .sub_container .inner .first_info > div:last-child > ul li { display: flex; gap: 20px; padding: 10px 0; } .sub_container .inner .first_info > div:last-child > ul li:not(:first-child) { border-top: 1px solid #e8e8e8; } .sub_container .inner .first_info > div:last-child .btn_wrap { display: flex; gap: 10px; justify-content: center; padding: 50px 0 20px; } .sub_container .inner .first_info > div:last-child .btn_wrap a { display: inline-block; width: 80px; border: 1px solid #3a3a3a; text-align: center; font-size: 14px; padding: 10px; } .sub_container .inner .first_info > div:last-child .btn_wrap a img { width: 80%; } .sub_container .inner .second_info { padding-bottom: 100px; } .sub_container .inner .second_info .tab_list { position: relative; } .sub_container .inner .second_info .tab_list::before { content: ""; display: block; width: 100%; height: 1px; background-color: #3a3a3a; position: absolute; left: 0; bottom: 0; } .sub_container .inner .second_info .tab_list::after { content: ""; display: block; clear: both; } .sub_container .inner .second_info .tab_list li { float: left; border-top: 1px solid #3a3a3a; border-left: 1px solid #3a3a3a; font-size: 20px; position: relative; } .sub_container .inner .second_info .tab_list li:last-child { border-right: 1px solid #3a3a3a; } .sub_container .inner .second_info .tab_list li a { display: block; cursor: pointer; padding: 10px 30px; } .sub_container .inner .second_info .tab_list li.on { border-bottom: 1px solid #ffffff; } .sub_container .inner .second_info .tab_content { padding-top: 50px; } .sub_container .inner .second_info .tab_content > div { display: none; } .sub_container .inner .second_info .tab_content > div.tab_01 { display: block; } .sub_container .inner .second_info .tab_content > div > div { display: flex; gap: 50px; } .sub_container .inner .second_info .tab_content > div > div.vtw { display: block; } .sub_container .inner .second_info .tab_content > div > div:not(:last-child) { padding-bottom: 100px; } .sub_container .inner .second_info .tab_content > div > div > div:first-child { width: 20%; } .sub_container .inner .second_info .tab_content > div > div > div:first-child p { font-size: 18px; } .sub_container .inner .second_info .tab_content > div > div > div:first-child p::before { content: ""; display: block; width: 150px; height: 1px; background-color: #3a3a3a; margin-bottom: 10px; } .sub_container .inner .second_info .tab_content > div > div.vtw > div:first-child { width: 100%; } .sub_container .inner .second_info .tab_content > div > div.vtw > div:first-child span { display: block; margin-top: 20px; padding-left: 6px; position: relative; } .sub_container .inner .second_info .tab_content > div > div.vtw > div:first-child span::before { content: ""; display: block; width: 2px; height: 2px; background-color: #000; border-radius: 100%; position: absolute; top: 12px; left: 0; } .sub_container .inner .second_info .tab_content > div > div.vtw > div:first-child > div { text-align: center; padding-top: 50px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child { width: calc(80% - 50px); } .sub_container .inner .second_info .tab_content > div.tab_03 > div > div:last-child { padding: 50px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul { display: flex; flex-wrap: wrap; gap: 50px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul li { width: calc(50% - 25px); display: flex; justify-content: space-between; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery { gap: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery li { width: calc(25% - 15px); display: flex; position: relative; overflow: hidden; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 { gap: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 li { width: calc(20% - 20px); display: block;} .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 li div { height: 150px; display: flex; justify-content: center; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery.type2 li { width: calc(33.333333% - 13.333333px); } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery.type3 li { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery.type3 li img { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul li img { max-width: 80px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery li img { max-width: 100%; transition: all 0.3s ease; width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 li img { max-width: 100%; max-height: 150px; align-self: end; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 li p { font-size: 16px; padding-top: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery2 li p::before { display: none; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery li:hover img { transform: scale(1.1); } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery li::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); opacity: 0; transition: all 0.3s; z-index: 1; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul.gallery li:hover::before { opacity: 1; } .sub_container .inner .second_info .tab_content > div > div > div:last-child table { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr th, .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr td { border: 1px solid #3a3a3a; padding: 10px; text-align: center; } .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr th:first-child, .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr td:first-child { border-left: none; width: 150px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr th:last-child, .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr td:last-child { border-right: none; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap { display: flex; flex-wrap: wrap; gap: 50px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div { width: calc(50% - 25px); text-align: center; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.type_acs > div { width: calc(33.333333% - 33.333333px); } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div img { max-width: 100%; max-height: 240px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.color { margin-top: 50px;} .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.color > div { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.color > div img { max-height: 570px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.type_max80 > div img { max-width: 80%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.gangpan { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; gap: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.gangpan img { max-width: calc(50% - 20px); } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.gangpan ~ table { table-layout: fixed; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.gangpan ~ table tr td { font-size: 14px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div div { display: flex; height: 240px; justify-content: center; align-items: center; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div p { padding-top: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div p span { color: #b3b3b3; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap2 { text-align: center; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap2 > div img:not(:first-child) { margin-top: 50px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap2.ipm p { margin-top: 20px; } .sub_container .inner .const_ex .sec_tit { width: 150px; } .sub_container .inner .const_ex .sec_tit p { border-top: 1px solid #3a3a3a; padding-top: 20px; font-size: 18px; } .sub_container .inner .const_ex > div:last-child { padding: 50px 50px 0; position: relative; } .sub_container .inner .const_ex > div:last-child .ceImgSwiper .swiper-slide p { width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #CFCFCF; } .full_width { width: 100vw; margin-left: calc(-50vw + 50%); } .full_width.c_title { background-color: #f4f4f4; text-align: center; height: 400px; display: flex; justify-content: center; margin-top: 50px; margin-bottom: 50px; background: url("/kosfa/file/IMAGE/uu/b80fce4b45384ba6b6431a65885a9a2e") no-repeat center/cover; background-attachment: fixed; } .full_width.c_title h4 { font-size: 28px; color: #ffffff; align-self: center; } .full_width.c_title h4 em { color: #6e82d2; } .sub_container { padding: 50px 0; } .faq {max-width: 1300px; margin: 0 auto; padding: 100px 0;} .faq > p {text-align: center; padding: 20px 0; color: #a5a5a5;} .faq .faq_wrap .faq_content {border-top: 1px solid #ddd;} .faq .faq_wrap .faq_content:last-child {border-bottom: 1px solid #ddd;} .faq .faq_wrap .faq_content .faq_question {height:60px; line-height: 60px; cursor: pointer; position: relative; padding-left: 50px; background: url(/asset/dogood/img/common/select_bg.png) right -32px no-repeat; } .faq .faq_wrap .faq_content .faq_question .q_title {position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 500px;} .faq .faq_wrap .faq_content .faq_answer {background-color: #f4f4f4; padding: 20px 50px; border-top: 1px solid #ddd; display: none;} .board_title { font-size: 34px; border-bottom: 2px solid #a3a3a3; padding-bottom: 10px; margin-bottom: 50px; text-shadow: 2px 2px 5px rgb(0 0 0 / 10%); color: #000; } @media (max-width: 1100px) { .sub_banner .inner { padding: 0 15px; } .sub_container .inner { padding: 0 15px; } #intro .section02 { height: 60vh; } #intro .section03 .inner #im05 > div > div { margin: 0; font-size: 16px; width: 100%; } } @media (max-width: 999px) { .sub_page_title .inner { padding: 0 15px; } .sub_container .inner .first_info { flex-wrap: wrap; } .sub_container .inner .first_info > div { width: 100%; } .sub_container .inner .first_info > div:last-child { padding: 50px 0; } .sub_container .inner .first_info > div:last-child > img { max-width: 200px; } .sub_container .inner .first_info > div:last-child > ul { max-width: 100%; } .sub_container .inner .first_info > div:last-child > ul li { flex-wrap: wrap; } .sub_container .inner .first_info > div:last-child > ul li:not(:first-child) { border-top: none; } .sub_container .inner .item_list ul { gap: 20px; } .sub_container .inner .second_info .tab_list li { font-size: 16px; } .sub_container .inner .second_info .tab_content > div > div { flex-wrap: wrap; } .sub_container .inner .second_info .tab_content > div > div > div:first-child { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul { flex-wrap: wrap; } .sub_container .inner .second_info .tab_content > div > div > div:last-child ul li { width: 100%; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap { gap: 20px; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap > div { width: calc(50% - 10px); } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.type_acs > div { width: calc(33.33333% - 13.333333px); } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.gangpan ~ table { table-layout: auto; } .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr th, .sub_container .inner .second_info .tab_content > div > div > div:last-child table tr td { padding: 5px; font-size: 14px; } .sub_container .inner .second_info .tab_content > div.tab_03 > div > div:last-child { padding: 0; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.color { display: flex-wrap: wrap; } .sub_container .inner .second_info .tab_content > div > div > div:last-child .img_wrap.color > div { width: 100%; } } @media (max-width: 768px) { .full_width.c_title { height: 300px; margin-top: 50px; margin-bottom: 50px; } .full_width.c_title h4 { font-size: 24px; word-break: keep-all; padding: 0 30px; } .sub_banner { margin-top: 60px; } .sub_container { padding: 50px 0; } .faq { padding: 50px 15px; } .board_title { font-size: 28px; } }