.layout_label { position:absolute; right:0px; top:0px; font-size:1rem; color:#111; font-weight:600; padding:5px 20px; background:#f7f7f7; z-index:11; } /*---------------------------------------------------------------------- @ Layout About 1 ----------------------------------------------------------------------*/ #layout_about_1 { position:relative; display:flex; flex-direction:row; align-items:center; justify-content:center; height:100vh; padding-top:6.25rem; padding-bottom:6.25rem; background:#d3d6db; } #layout_about_1 .container { width:100%; margin:0 auto} #layout_about_1 .thk-row { margin-right:0rem; } #layout_about_1 .thk-col { flex-direction:row; align-items:center; justify-content:center;margin-right:0rem; } #layout_about_1 .thk-col:last-of-type { display:flex; align-items:center; justify-content:flex-start; } #layout_about_1 .row-md2 .thk-col { width: calc((100% / 2 )); } #layout_about_1 .about1_img { text-align:right; } #layout_about_1 .about1_cont { padding-left:7.5rem; } #layout_about_1 .about1_title { font-size:2.688rem; color:#222; font-weight:400; line-height:1.4; } #layout_about_1 .about1_title b { } #layout_about_1 .about1_summ { font-size:1.125rem; color:#8d8d8d; font-weight:400; line-height:1.66; margin-top:1.25rem; word-break:keep-all; } #layout_about_1 .about1_desc { font-size:1rem; color:#666; font-weight:400; line-height:1.66; margin-top:2.5rem; word-break:keep-all; } #layout_about_1 .about1_btn { position:relative; text-align:left; margin-top:3.125rem; } #layout_about_1 .about1_btn a { display:inline-block; font-size:13px; color:#333; font-weight:600; padding:1rem 3.125rem; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); background:#fff; } #layout_about_1 .about1_btn a:hover { color:#fff; } #layout_about_1 .about1_btn a:after { background:#333; } @media screen and (max-width:1200px){ #layout_about_1 { padding-top:5rem; padding-bottom:5rem; } #layout_about_1 .container { margin:0 15px; } #layout_about_1 .thk-col { display:flex; align-items:center; justify-content:center; } #layout_about_1 .thk-col:last-of-type { justify-content:center; } #layout_about_1 .about1_cont { padding:1.25rem; } } @media screen and (max-width:1024px){ #layout_about_1 { padding-top:4rem; padding-bottom:4rem; } #layout_about_1 .about1_title { font-size:1.875rem; } #layout_about_1 .about1_summ br { display:none; } } @media screen and (max-width:640px){ #layout_about_1 { height:revert; } #layout_about_1 .thk-row { flex-direction:column; } #layout_about_1 .row-md2 .thk-col { width: calc((100% / 1)); } #layout_about_1 .about1_cont { padding:0rem; } } /*---------------------------------------------------------------------- @ Layout About 2 ----------------------------------------------------------------------*/ #layout_about_2 { position:relative; display:flex; align-items:center; justify-content:center; } #layout_about_2 .container { width:100%; margin:0 auto} #layout_about_2 .thk-row { margin-right:0rem; } #layout_about_2 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; min-height:100vh; } #layout_about_2 .thk-col:last-of-type { } #layout_about_2 .row-md2 .thk-col { width: calc((100% / 2 )); } #layout_about_2 .thk-col:nth-of-type(1) { background:#1d2126; padding:0.938rem; padding-top:3.125rem; padding-bottom:7.5rem; padding-left:8.125rem; padding-right:8.125rem; } #layout_about_2 .thk-col:nth-of-type(2) { } #layout_about_2 .about2_cont { text-align:left; color:#fff; } #layout_about_2 .about2_category { display:block; } #layout_about_2 .about2_category span { font-size:11px; color:#fff; font-weight:600; border:1px solid #fff; padding:10px 25px; opacity:0.7; letter-spacing:0; } #layout_about_2 .about2_date { font-size:13px; color:#fff; font-weight:200; margin-bottom:10px; letter-spacing:0; } #layout_about_2 .about2_title { font-size:1.875rem; font-weight:600; line-height:1.2; letter-spacing:0rem; word-break:keep-all; } #layout_about_2 .about2_summ { position:relative; font-size:1rem; font-weight:300; line-height:1.875; margin-top:1.875rem; word-break:keep-all; } #layout_about_2 .about2_inner { display:flex; flex-direction:column; justify-content:space-between; height:100%; } #layout_about_2 .about2_row { display:flex; flex-direction:column; justify-content:space-between; height:50%; } #layout_about_2 .about2_row:nth-of-type(1) { padding:3.125rem 6.25rem 7.5rem 6.25rem; } #layout_about_2 .about2_row:nth-of-type(2) { justify-content:center; } #layout_about_2 .about2_btn { position:relative; text-align:left; margin-top:3.125rem; } #layout_about_2 .about2_btn a { display:inline-block; font-size:12px; color:#14171d; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); background:#fff; } #layout_about_2 .about2_btn a:hover { color:#fff; } #layout_about_2 .about2_btn a:after { background:#14171d; } #layout_about_2 .about2_row:nth-of-type(2) { text-align:center; padding:7.5rem 6.25rem; background:#fff; } #layout_about_2 .about2_row:nth-of-type(2) .about2_cont { text-align:center; } #layout_about_2 .about2_row:nth-of-type(2) .about2_title { font-size:3rem; color:#2a2d2e; font-weight:600; line-height:1.2; letter-spacing:0rem; word-break:keep-all; } #layout_about_2 .about2_row:nth-of-type(2) .about2_summ { position:relative; font-size:1.25rem; color:#666; font-weight:400; line-height:1.5; margin-top:1.875rem; word-break:keep-all; } #layout_about_2 .about2_row:nth-of-type(2) .about2_btn { position:relative; text-align:center; margin-top:2.5rem; } #layout_about_2 .about2_row:nth-of-type(2) .about2_btn a { display:inline-flex; font-size:12px; color:#fff; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; background:#2a2d2e; box-shadow:none;} #layout_about_2 .about2_row:nth-of-type(2) .about2_btn a:hover { color:#fff; } #layout_about_2 .about2_row:nth-of-type(2) .about2_btn a:after { background:#14171d; } #layout_about_2 .about2_row:nth-of-type(2) .arrow_icon3 { display:inline-block; width:16px; height:14px; background:url('/images/layout_n/about2_arrow.png') no-repeat; margin-left:1rem; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_2 .thk-col { min-height:revert; } #layout_about_2 .thk-col:nth-of-type(1) { padding-top:2.5rem; padding-bottom:5rem; padding-left:4rem; padding-right:4rem; } #layout_about_2 .about2_row:nth-of-type(1) { padding:2.5rem 4rem 5rem 4rem; } #layout_about_2 .about2_row:nth-of-type(2) { } #layout_about_2 .about2_row:nth-of-type(2) .about2_title { font-size:1.875rem; } #layout_about_2 .about2_row:nth-of-type(2) .about2_summ { font-size:1.125rem; } #layout_about_2 .about2_row:nth-of-type(2) .about2_btn { margin-top:1.875rem; } } @media screen and (max-width:1024px){ #layout_about_2 .about2_row:nth-of-type(2) { padding-left:3rem; padding-right:3rem; } } @media screen and (max-width:640px){ #layout_about_2 .row-md2 .thk-col { width: calc((100% / 1 )); } #layout_about_2 .about2_inner { justify-content:revert; height:revert; } #layout_about_2 .thk-col:nth-of-type(1) { padding:3rem 2rem 3rem 2rem; } #layout_about_2 .about2_row:nth-of-type(1) { padding:3rem 2rem 3rem 2rem; } #layout_about_2 .about2_row:nth-of-type(2) { padding:3rem 2rem 3rem 2rem; text-align:left; } #layout_about_2 .about2_row:nth-of-type(2) .about2_cont { text-align:left; } #layout_about_2 .about2_row:nth-of-type(2) .about2_btn { text-align:left; } #layout_about_2 .about2_category { margin-bottom:1.875rem; } } /*---------------------------------------------------------------------- @ Layout About 3 ----------------------------------------------------------------------*/ #layout_about_3 { position:relative; display:flex; align-items:center; justify-content:center; background:#000; } #layout_about_3 .container { width:100%; max-width:1170px; margin:0 auto} #layout_about_3 .thk-row { margin-right:0rem; } #layout_about_3 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; padding:10rem 2.5rem; } #layout_about_3 .thk-col:last-of-type { } #layout_about_3 .row-md1 .thk-col { width: calc((100% / 1 )); } #layout_about_3 .about3_cont { text-align:center; color:#fff; } #layout_about_3 .about3_comma { } #layout_about_3 .about3_title { font-size:1.875rem; font-weight:600; line-height:1.2; letter-spacing:0rem; } #layout_about_3 .about3_summ { position:relative; max-width:50rem; font-size:1.25rem; color:#ccc; font-weight:400; font-style:italic; line-height:1.85; margin-top:1.875rem; word-break:keep-all; } #layout_about_3 .about3_copy { font-size:13px; font-weight:600; margin-top:1.563rem; letter-spacing:0; } #layout_about_3 .about3_copy span { position:relative; } #layout_about_3 .about3_copy span:before { content:''; position:absolute; left:-25px; top:8px; width:20px; height:2px; background:#fff; } #layout_about_3 .about3_copy span:after { content:''; position:absolute; right:-25px; top:8px; width:20px; height:2px; background:#fff; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_3 .thk-col { padding:8rem 2.5rem; } } @media screen and (max-width:1024px){ #layout_about_3 .thk-col { padding:6rem 2.5rem; } } @media screen and (max-width:640px){ #layout_about_3 .about3_summ { font-size:1.125rem; } } /*---------------------------------------------------------------------- @ Layout About 4 ----------------------------------------------------------------------*/ #layout_about_4 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#59517b; } #layout_about_4 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_about_4 .thk-row { align-items:center; } #layout_about_4 .thk-col:last-of-type { } #layout_about_4 .about4_img { text-align:right; } #layout_about_4 .about4_cont { color:#fff; } #layout_about_4 .about4_title { font-size:2.188rem; font-weight:400; line-height:1.4; } #layout_about_4 .about4_title b { } #layout_about_4 .about4_summ { position:relative; font-size:1rem; color:#fff; font-weight:300; line-height:1.56; padding-top:1.25rem; margin-top:1.25rem; word-break:keep-all;} #layout_about_4 .about4_summ:after { content:''; position:absolute; top:0rem; left:0px; width:170px; height:2px; background:#fff; } #layout_about_4 .about4_btn { position:relative; text-align:left; margin-top:3.125rem; } #layout_about_4 .about4_btn a { display:inline-block; font-size:12px; color:#333; font-weight:600; letter-spacing:0; padding:1rem 2.5rem; background:#fff; border-radius:3px; } #layout_about_4 .about4_btn a:hover { color:#fff; } #layout_about_4 .about4_btn a:after { background:#333; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_4 { padding-top:5rem; padding-bottom:5rem; } #layout_about_4 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_about_4 { padding-top:4rem; padding-bottom:4rem; } #layout_about_4 .about4_title { font-size:1.875rem; } } @media screen and (max-width:640px){ #layout_about_4 .thk-row { flex-direction:column; margin-right:0rem; } #layout_about_4 .thk-col:first-of-type { margin-bottom:1.875rem; } #layout_about_4 .row-md2 .thk-col { width: calc((100% / 1) ); margin-right:0rem; } #layout_about_4 .about4_img { text-align:center; } } /*---------------------------------------------------------------------- @ Layout About 5 ----------------------------------------------------------------------*/ #layout_about_5 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_about_5 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_about_5 .mueeui{ width:100%; } #layout_about_5 .thk-col:last-of-type { } #layout_about_5 .about5_img { position:relative; text-align:left; } #layout_about_5 .about5_img:after { content:''; position:absolute; left:0px; top:0px; width:calc(100% - 4.375rem); height:calc(100% - 4.375rem); background:#eff4f4; z-index:-1; } #layout_about_5 .about5_inner { position:relative; padding-top:4.375rem; margin-left:4.375rem; overflow-x:clip; } #layout_about_5 .about5_thumb { } #layout_about_5 .about5_text { display:flex; flex-direction:column; align-items:center; justify-content:center;position:absolute; left:0px; top:0px; width:100%; height:100%; color:#fff; } #layout_about_5 .about5_text_medium { font-size:3rem; font-weight:700; line-height:1; } #layout_about_5 .about5_text_big { font-size:3.75rem; font-weight:700; line-height:0.8; } #layout_about_5 .about5_text_small { font-size:1rem; font-weight:700; letter-spacing:0.05em; } #layout_about_5 .about5_cont { padding:4.375rem 0 4.375rem 4.375rem; color:#222; } #layout_about_5 .about5_subtitle { font-size:1.375rem; font-weight:400; margin-bottom:5px; } #layout_about_5 .about5_title { font-size:2.375rem; font-weight:600; line-height:1.4; } #layout_about_5 .about5_title b { } #layout_about_5 .about5_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#333; margin-top:1.563rem; } #layout_about_5 .about5_summ { position:relative; font-size:1rem; color:#666; font-weight:300; line-height:1.56; margin-top:0.725rem; word-break:keep-all; } #layout_about_5 .about5_btn { position:relative; text-align:left; margin-top:3.125rem; } #layout_about_5 .about5_btn a { display:inline-flex; align-items:center; font-size:14px; color:#000; font-weight:600; letter-spacing:0; padding:0.625rem 1.875rem; background:#fff; border:2px solid #222; } #layout_about_5 .about5_btn a:hover { color:#fff; } #layout_about_5 .about5_btn a:after { background:#333; } #layout_about_5 .about5_btn .arrow_icon6 { margin-top:2px; margin-left:10px; } #layout_about_5 .about5_btn .arrow_icon6 .material-icons { font-size:20px; } #layout_about_5 .about5_img2 { position:relative; text-align:left; padding-top:2.188rem; padding-left:2.188rem; margin-top:4.375rem; } #layout_about_5 .about5_img2 img { max-width:100%; } #layout_about_5 .about5_img2:after { content:''; position:absolute; left:0px; top:0px; width:calc(100% - 4.375rem); height:calc(100% - 4.375rem); border-top:10px solid #addcdb; border-left:10px solid #addcdb; z-index:-1; } #layout_about_5 .swiper-button-prev:after { content:'PREVIOUS'; } #layout_about_5 .swiper-button-next:after { content:'NEXT'; } #layout_about_5 .swiper-button-prev:after, #layout_about_5 .swiper-button-next:after { font-size:14px; color:#999; font-weight:700; transition:all 0.4s ease; letter-spacing:0.1em; } #layout_about_5 .swiper-button-prev:hover:after, #layout_about_5 .swiper-button-next:hover:after { color:#282828; } #layout_about_5 .swiper-button-prev {left:revert; right:60px; top:revert; bottom:-45px; width:100px; height:45px; margin-top:0rem; justify-content:flex-end; } #layout_about_5 .swiper-button-next { right:0px; top:revert; bottom:-45px; width:55px; height:45px; margin-top:0rem; justify-content:flex-end; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_5 { padding-top:5rem; padding-bottom:5rem; } #layout_about_5 .container { margin:0 15px; } #layout_about_5 .about5_cont { padding:4.375rem 0 2.375rem 2.375rem; } } @media screen and (max-width:1024px){ #layout_about_5 { padding-top:4rem; padding-bottom:4rem; } #layout_about_5 .about5_inner { padding-top:2.5rem; margin-left:2.5rem; } #layout_about_5 .about5_cont { padding:2.5rem 0 0; } #layout_about_5 .about5_text_medium { font-size:2rem; } #layout_about_5 .about5_text_big { font-size:2.5rem; line-height:0.9; } #layout_about_5 .about5_text_small { font-size:0.875rem; } #layout_about_5 .about5_subtitle { font-size:1.25rem; } #layout_about_5 .about5_title { font-size:2rem; } } @media screen and (max-width:640px){ #layout_about_5 .container { padding:0 15px; } #layout_about_5 .mueeui{ width:revert; } #layout_about_5 .thk-row { flex-direction:column; margin-right:0rem; } #layout_about_5 .thk-col:first-of-type { margin-bottom:1.875rem; } #layout_about_5 .row-md2 .thk-col { width: calc((100% / 1) ); margin-right:0rem; } #layout_about_5 .about5_thumb img { width:100%; } #layout_about_5 .about5_img2 img { width:100%; } } /*---------------------------------------------------------------------- @ Layout About 6 ----------------------------------------------------------------------*/ #layout_about_6 { position:relative; display:flex; align-items:center; justify-content:center; background:#e7e7e7; } #layout_about_6 .container { width:100%; margin:0 auto} #layout_about_6 .thk-row { margin-right:0rem; } #layout_about_6 .thk-col { margin-right:0rem; padding:5.625rem; } #layout_about_6 .thk-col:last-of-type { } #layout_about_6 .row-md2 .thk-col { width: calc((100% / 2 )); } #layout_about_6 .thk-col:nth-of-type(1) { background:#55447b; } #layout_about_6 .thk-col:nth-of-type(2) { background:;padding:0rem; } #layout_about_6 .about6_bg {position:relative;width:100%;height:100%; text-align:center; overflow:hidden} #layout_about_6 .about6_bg img {position:absolute; width:100%; height:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_about_6 .about6_cont { text-align:center; background:#fff; padding:7.5rem; word-break:keep-all; } #layout_about_6 .about6_title { font-size:1.875rem; color:#333; font-weight:600; line-height:1.5; } #layout_about_6 .about6_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#282828; letter-spacing:0; margin-bottom:1.875rem; } #layout_about_6 .about6_btn { position:relative; margin-top:2.188rem; } #layout_about_6 .about6_btn a { display:inline-block; font-size:0.875rem; color:#333; font-weight:700; padding:0.725rem 1.25rem 0.625rem 1.563rem; background:#fff; border:2px solid #222; } #layout_about_6 .about6_btn a:hover { color:#fff; } #layout_about_6 .about6_btn a:after { background:#333; } #layout_about_6 .about6_btn .arrow_icon7 { margin-top:2px; margin-left:0px; } #layout_about_6 .about6_btn .arrow_icon7 .material-icons { font-size:20px; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_6 .container { margin:0 0; } #layout_about_6 .thk-col { padding:3rem; } #layout_about_6 .thk-col:last-of-type { justify-content:center; } #layout_about_6 .about6_cont { padding:2.5rem; } #layout_about_6 .about6_title { font-size:1.563rem; } } @media screen and (max-width:1024px){ #layout_about_6 .about6_title { font-size:1.25rem; } #layout_about_6 .about6_entitle { font-size:1rem; } } @media screen and (max-width:640px){ #layout_about_6 .row-md2 .thk-col { width: calc((100% / 1 )); } #layout_about_6 .about6_bg { height:0; padding-top:56.25%; } #layout_about_6 .about6_bg img { width:100%; height:revert; } } /*---------------------------------------------------------------------- @ Layout About 7 ----------------------------------------------------------------------*/ #layout_about_7 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:6.25rem; padding-bottom:6.25rem; } #layout_about_7 .container { width:100%; max-width:1170px; margin:0 auto} #layout_about_7 .thk-col:last-of-type { display:flex; align-items:center; justify-content:center; } #layout_about_7 .about7_bg { position:absolute; left:0px; top:0px; width:100%; height:100%; background:url('/images/layout_n/about7_img2.png') no-repeat; background-size:cover; } #layout_about_7 .about7_img { text-align:center; } #layout_about_7 .about7_cont { text-align:right; } #layout_about_7 .about7_title { font-size:1.875rem; color:#fff; font-weight:700; line-height:1.4; } #layout_about_7 .about7_summ { position:relative; font-size:1rem; color:#999; font-weight:300; line-height:1.875; padding-top:1.563rem; margin-top:1.25rem; word-break:keep-all; } #layout_about_7 .about7_summ:after { content:''; position:absolute; top:0rem; right:0px; width:170px; height:2px; background:var(--main); } #layout_about_7 .about7_btn { position:relative; text-align:right; margin-top:2.188rem; } #layout_about_7 .about7_btn a { display:inline-block; font-size:13px; color:#fff; font-weight:700; letter-spacing:0; padding:1rem 3.125rem; background:var(--main); } #layout_about_7 .about7_btn a:hover { color:#333; } #layout_about_7 .about7_btn a:after { background:#fff; } /* Responsive */ @media screen and (max-width:1200px){ #layout_about_7 { padding-top:5rem; padding-bottom:5rem; } #layout_about_7 .container { margin:0 15px; } #layout_about_7 .thk-col { display:flex; align-items:center; justify-content:center; } #layout_about_7 .thk-col:last-of-type { justify-content:center; } #layout_about_7 .about7_cont { padding:1.25rem; } } @media screen and (max-width:1024px){ #layout_about_7 { padding-top:4rem; padding-bottom:4rem; } #layout_about_7 .about7_bg { background-position:center; } #layout_about_7 .mueeui .thk-col.md4 { width:calc(((100% / 12) * 5) - 1.875rem) !important; } #layout_about_7 .mueeui .thk-col.md8 { width:calc(((100% / 12) * 7) - 1.875rem) !important; } } @media screen and (max-width:640px){ #layout_about_7 .mueeui .thk-col.md4 { width:calc(((100% / 12) * 12) - 1.875rem) !important; } #layout_about_7 .mueeui .thk-col.md8 { width:calc(((100% / 12) * 12) - 1.875rem) !important; } #layout_about_7 .about7_cont { text-align:left; } #layout_about_7 .about7_summ:after { right:revert; left:0px; } #layout_about_7 .about7_btn { text-align:left; } } /*---------------------------------------------------------------------- @ Layout Service 1 ----------------------------------------------------------------------*/ #layout_service_1 { position:relative; display:flex; align-items:center; justify-content:center; } #layout_service_1 .container { width:100%; margin:0 auto} #layout_service_1 .thk-row { margin-right:0rem; } #layout_service_1 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; min-height:43.75rem; padding:0.938rem; background-repeat:no-repeat; background-size:cover;background-position:; } #layout_service_1 .thk-col:last-of-type { } #layout_service_1 .row-md4 .thk-col { width: calc((100% / 4 )); } #layout_service_1 .service1_cont { text-align:center; color:#fff; } #layout_service_1 .service1_subtitle { font-size:12px; color:#fff; font-weight:500; letter-spacing:0.1rem; margin-bottom:5px; } #layout_service_1 .service1_title { font-size:2.25rem; font-weight:600; line-height:1.2; letter-spacing:0rem; } #layout_service_1 .service1_summ { position:relative; font-size:1rem; font-weight:400; line-height:1.875rem; margin-top:1.875rem; padding-top:1.875rem; word-break:keep-all; } #layout_service_1 .service1_summ:after { content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:25px; height:2px; background:#fff; } /* Responsive */ @media screen and (max-width:1200px){ #layout_service_1 .service1_summ br { display:none; } } @media screen and (max-width:1024px){ #layout_service_1 .thk-col { min-height:revert; padding:5.75rem 1.25rem; } #layout_service_1 .row-md4 .thk-col { width: calc((100% / 2 )); } } @media screen and (max-width:640px){ #layout_service_1 .row-md4 .thk-col { width: calc((100% / 1 )); } #layout_service_1 .service1_summ br { display:block; } } @media screen and (max-width:414px){ #layout_service_1 .service1_summ br { display:none; } } /*---------------------------------------------------------------------- @ Layout Service 2 ----------------------------------------------------------------------*/ #layout_service_2 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem;} #layout_service_2 .container { width:100%; max-width:1170px; margin:0 auto} #layout_service_2 .service2_cont { display:flex; flex-direction:column; align-items:center; text-align:center; color:#333; padding:0 0.625rem; } #layout_service_2 .service2_circle { position:relative; display:flex; align-items:center; justify-content:center; max-width:9.375rem; min-width:9.375rem; aspect-ratio:1; border-radius:50%; background: linear-gradient( 42deg, rgb(0,240,255) 0%, rgb(118,206,254) 39%, rgb(235,172,253) 100%); margin-bottom:2.5rem; z-index:-1; } #layout_service_2 .service2_circle:after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:1px; background:var(--main); border-radius:50%; opacity:0; z-index:-1; transition:all 0.3s ease; } #layout_service_2 .service2_title { font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_service_2 .service2_summ { position:relative; font-size:0.938rem; color:#666; font-weight:400; line-height:1.66; margin-top:1.25rem; word-break:keep-all; } #layout_service_2 .thk-col a:hover .service2_circle:after { width:100%; height:100%; opacity:1; } /* Responsive */ @media screen and (max-width:1200px){ #layout_service_2 { padding-top:4.5rem; padding-bottom:4.5rem; } } @media screen and (max-width:1024px){ #layout_service_2 .row-md4 .thk-col { margin-bottom:1.875rem; } } /*---------------------------------------------------------------------- @ Layout Service 3 ----------------------------------------------------------------------*/ #layout_service_3 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#f4f4f4; } #layout_service_3 .container { width:100%; max-width:1170px; margin:0 auto} #layout_service_3 .service3_sec_title_wrap { margin-bottom:3.75rem; } #layout_service_3 .service3_sec_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#999; letter-spacing:0; margin-bottom:0.625rem; } #layout_service_3 .service3_sec_title { font-size:1.875rem; color:#2f2933; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_service_3 .service3_sec_summ { position:relative; font-size:1rem; color:#666; font-weight:400; line-height:1.875; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all;} #layout_service_3 .service3_sec_summ:after { content:''; position:absolute; top:0rem; left:0px; width:170px; height:2px; background:var(--main); } #layout_service_3 .service3_cont { display:flex; flex-direction:column; text-align:left; color:#333; background:#fff; } #layout_service_3 .service3_img { display:block;width:100%; height:0; padding-top:100%; position: relative;overflow:hidden; transition:all 0.3s ease; } #layout_service_3 .service3_img:after { content:''; position:absolute; left:0px; top:0px; width:100%;height:100%; background:rgba(0,0,0, 0.5); opacity:0; transition:all 0.3s; z-index:1; } #layout_service_3 .service3_img img {display: block; width:100%; position: absolute;top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_service_3 .service3_text_wrap { padding:1.563rem; } #layout_service_3 .service3_title { font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:0.03rem; } #layout_service_3 .service3_summ { position:relative; font-family:'Merriweather'; font-size:0.875rem; font-style:italic; color:#666; font-weight:400; letter-spacing:0; margin-top:0.625rem; word-break:keep-all; } /* Hover */ #layout_service_3 .thk-col a:hover .service3_img:after { opacity:1; } /* Responsive */ @media screen and (max-width:1200px){ #layout_service_3 { padding-top:5rem; padding-bottom:5rem; } #layout_service_3 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_service_3 { padding-top:4rem; padding-bottom:4rem; } #layout_service_3 .thk-col { margin-bottom:1.875rem; } } @media screen and (max-width:640px){ #layout_service_3 .mueeui .row-md4 .thk-col { width: calc((100% / 2 ) - 1.875rem); } } @media screen and (max-width:414px){ #layout_service_3 .mueeui .row-md4 .thk-col { width: calc((100% / 1 ) - 1.875rem); } } /*---------------------------------------------------------------------- @ Layout Service 4 ----------------------------------------------------------------------*/ #layout_service_4 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem;} #layout_service_4 .container { width:100%; max-width:1170px; margin:0 auto} #layout_service_4 .service4_cont { display:flex; flex-direction:row; text-align:left; color:#333; padding:0 0.625rem 0; } #layout_service_4 .service4_circle { display:flex; align-items:center; justify-content:center; max-width:70px; min-width:70px; max-height:70px; aspect-ratio:1; border-radius:50%; background-image: -webkit-linear-gradient( 42deg, rgb(0,240,255) 0%, rgb(118,206,254) 39%, rgb(235,172,253) 100%); margin-right:1.25rem; transition:all 0.3s ease; } #layout_service_4 .service4_title { font-size:1rem; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_service_4 .service4_summ { position:relative; font-size:0.938rem; color:#666; font-weight:400; line-height:1.66; margin-top:1.25rem; word-break:keep-all; } #layout_service_4 .thk-col a:hover .service4_circle { background-image: -webkit-linear-gradient( 42deg, rgb(105,210,231) 0%, rgb(105,210,231) 39%, rgb(105,210,231) 100%); } /* Responsive */ @media screen and (max-width:1200px){ #layout_service_4 { padding-top:5rem; padding-bottom:5rem; } #layout_service_4 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_service_4 { padding-top:4rem; padding-bottom:4rem; } #layout_service_4 .row-md3 .thk-col { width: calc((100% / 3 ) - 1.875rem); } #layout_service_4 .service4_cont { flex-direction:column; align-items:center; text-align:center; } #layout_service_4 .service4_circle { margin-bottom:1.25rem; margin-right:0rem; } } @media screen and (max-width:640px){ #layout_service_4 .row-md3 .thk-col { width: calc((100% / 1) - 1.875rem); margin-bottom:1.875rem; } #layout_service_4 .service4_cont { display:flex; flex-direction:row; align-items:flex-start;text-align:left; } #layout_service_4 .service4_circle { margin-bottom:1.25rem; margin-right:1.25rem; } } /*---------------------------------------------------------------------- @ Layout Service 5 ----------------------------------------------------------------------*/ #layout_service_5 { position:relative; display:flex; align-items:center; justify-content:center; } #layout_service_5 .container { width:100%; margin:0 auto} #layout_service_5 .thk-row { margin-right:0rem; } #layout_service_5 .thk-col { display:flex; align-items:flex-end; justify-content:flex-start; margin-right:0rem; min-height:43.75rem; padding-bottom:3.125rem; background:#808a8f; background-repeat:no-repeat; background-size:cover; background-position:center; } #layout_service_5 .thk-col:before { content:''; position:absolute; bottom:0px; left:0px; width:100%; height:100%; background-image: -moz-linear-gradient(90deg, rgb(17,17,17,0.5) 0%, rgb(17,17,17,0) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(17,17,17,1) 0%, rgb(17,17,17,0.15) 50%, rgb(17,17,17,0) 100%);background-image: -ms-linear-gradient( 90deg, rgb(17,17,17,0.8) 0%, rgb(17,17,17,0) 100%); z-index:1; opacity:1; transition:all .3s ease; } #layout_service_5 .thk-col:last-of-type { } #layout_service_5 .row-md4 .thk-col { width: calc((100% / 4 )); } #layout_service_5 .thk-col:nth-of-type(1) { background-image:url('/images/layout_n/service5_img1.jpg'); } #layout_service_5 .thk-col:nth-of-type(2) { background-image:url('/images/layout_n/service5_img2.jpg'); } #layout_service_5 .thk-col:nth-of-type(3) { background-image:url('/images/layout_n/service5_img3.jpg'); } #layout_service_5 .thk-col:nth-of-type(4) { background-image:url('/images/layout_n/service5_img4.jpg'); } #layout_service_5 .service5_cont { position:relative; text-align:left; color:#fff; padding:0 2.813rem; z-index:3; } #layout_service_5 .service5_categoy { display:block; } #layout_service_5 .service5_categoy span { display:inline-block; font-family:'Merriweather'; font-size:14px; font-style:italic; color:#fff; letter-spacing:0rem; background:#84bc4e; padding:0.625rem 1.25rem; border-radius:5px; } #layout_service_5 .service5_summ { position:relative; font-size:1.125rem; font-weight:600; line-height:1.4; margin-top:0.938rem; word-break:keep-all; } #layout_service_5 .thk-col:nth-of-type(1) .service5_categoy span { background:#84bc4e; } #layout_service_5 .thk-col:nth-of-type(2) .service5_categoy span { background:#3acbfa; } #layout_service_5 .thk-col:nth-of-type(3) .service5_categoy span { background:#ff5d3a; } #layout_service_5 .thk-col:nth-of-type(4) .service5_categoy span { background:#6a64f2; } /* Hover */ #layout_service_5 .thk-col:hover { z-index:3; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.35);transition:all .3s ease; } #layout_service_5 .thk-col:hover:before { background-image: -moz-linear-gradient(90deg, rgb(17,17,17,0.5) 0%, rgb(17,17,17,0) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(17,17,17,1) 0%, rgb(17,17,17,0.75) 50%, rgb(17,17,17,0.2) 100%);background-image: -ms-linear-gradient( 90deg, rgb(17,17,17,0.8) 0%, rgb(17,17,17,0) 100%); } /* Responsive */ @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ #layout_service_5 .thk-col { min-height:revert; padding:10rem 0.938rem 3.125rem; } #layout_service_5 .row-md4 .thk-col { width: calc((100% / 2 )); } #layout_service_5 .service5_cont { padding:0 1.563rem; } } @media screen and (max-width:414px){ #layout_service_5 .row-md4 .thk-col { width: calc((100% / 1 )); } } /*---------------------------------------------------------------------- @ Layout Service 6 ----------------------------------------------------------------------*/ #layout_service_6 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#1e1f20; } #layout_service_6 .container { width:100%; max-width:1170px; margin:0 auto} #layout_service_6 .service6_cont { display:flex; flex-direction:column; text-align:center; color:#fff; padding:0 ; } #layout_service_6 .service6_circle { display:flex; align-items:center; justify-content:center; min-height:70px; margin-bottom:2.5rem; transition:all 0.3s ease; } #layout_service_6 .service6_num { font-size:3rem; font-weight:800; color:var(--main); line-height:1.2; letter-spacing:0rem; } #layout_service_6 .service6_summ { position:relative; font-family:'Merriweather'; font-size:0.875rem; font-style:italic; color:#fff; letter-spacing:0; margin-top:0.938rem; word-break:keep-all; } #layout_service_6 .thk-col a:hover .service6_circle { background-image: -webkit-linear-gradient( 42deg, rgb(105,210,231) 0%, rgb(105,210,231) 39%, rgb(105,210,231) 100%); } /* Responsive */ @media screen and (max-width:1200px){ #layout_service_6 { padding-top:5rem; padding-bottom:5rem; } #layout_service_6 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_service_6 { padding-top:4rem; padding-bottom:4rem; } #layout_service_6 .row-md4 .thk-col { width: calc((100% / 4 ) - 1.875rem); } #layout_service_6 .thk-col { margin-bottom:1.875rem; } } @media screen and (max-width:640px){ #layout_service_6 .row-md4 .thk-col { width: calc((100% / 2 ) - 1.875rem); } #layout_service_6 .thk-col { margin-bottom:1.875rem; } } @media screen and (max-width:414px){ #layout_service_6 .row-md4 .thk-col { width: calc((100% / 1 ) - 1.875rem); } #layout_service_6 .thk-col { margin-bottom:2.5rem; } #layout_service_6 .service6_circle { margin-bottom:1.25rem; } } /*---------------------------------------------------------------------- @ Layout Service 7 ----------------------------------------------------------------------*/ #layout_service_7 { position:relative; display:flex; align-items:center; justify-content:center; } #layout_service_7 .container { width:100%; margin:0 auto} #layout_service_7 .thk-row { flex-wrap:nowrap; margin-right:0rem; } #layout_service_7 .thk-col { position:relative; display:flex; align-items:center; justify-content:center; margin-right:0rem; min-height:37.5rem; padding:0.938rem; background-repeat:no-repeat; background-size:cover;background-position:center center; } #layout_service_7 .thk-col:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.6); opacity:0; transition:all 0.4s ease; z-index:0; } #layout_service_7 .thk-col:last-of-type { } #layout_service_7 .row-md6 .thk-col { flex:revert; width: calc((100% / 6 )); transition:all 0.5s ease; } #layout_service_7 .service7_cont { text-align:center; color:#fff; pointer-events: none; z-index:2; } #layout_service_7 .service7_title { font-size:1.563rem; font-weight:700; line-height:1.2; letter-spacing:0rem; transition:all 0.4s ease; } #layout_service_7 .service7_summ { position:relative; font-size:1.125rem; color:#b4b4b4; font-weight:400; line-height:1.25; margin-top:1.875rem; word-break:keep-all; transition:all 0.4s ease; } /* active */ #layout_service_7 .row-md6 .thk-col.active { width: calc(((100% / 6 ) * 2.7) - 0rem); } #layout_service_7 .row-md6 .thk-col.active:after { opacity:1; } #layout_service_7 .row-md6 .thk-col.active .service7_title { font-size:2.188rem; } #layout_service_7 .row-md6 .thk-col.active .service7_summ { font-size:1.25rem; color:#fff; } /* Responsive */ @media screen and (max-width: 1440px) and (min-width: 1025px){ #layout_service_7 .service7_title { font-size:1.25rem; } #layout_service_7 .service7_summ { font-size:1rem; margin-top:1.25rem; } #layout_service_7 .row-md6 .thk-col.active .service7_title { font-size:1.563rem; } #layout_service_7 .row-md6 .thk-col.active .service7_summ { font-size:1.12rem; } } @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ #layout_service_7 .thk-col { min-height:16.875rem; } #layout_service_7 .thk-row { flex-wrap:wrap; } #layout_service_7 .row-md6 .thk-col, #layout_service_7 .row-md6 .thk-col.active { width: calc((100% / 3 )); } /* 7개 일때 #layout_service_7 .row-md6 .thk-col:nth-of-type(n+4), #layout_service_7 .row-md6 .thk-col.active:nth-of-type(n+4) { width: calc((100% / 4 )); } */ #layout_service_7 .service7_title { font-size:1.25rem; } #layout_service_7 .service7_summ { font-size:1rem; margin-top:1.25rem; } #layout_service_7 .row-md6 .thk-col.active .service7_title { font-size:1.563rem; } #layout_service_7 .row-md6 .thk-col.active .service7_summ { font-size:1.12rem; } } @media screen and (max-width:768px){ #layout_service_7 .row-md6 .thk-col, #layout_service_7 .row-md6 .thk-col.active { width: calc((100% / 2 )) !important; } /* 7개 일때 #layout_service_7 .row-md6 .thk-col:nth-of-type(n+7), #layout_service_7 .row-md6 .thk-col.active:nth-of-type(n+7) { width: calc((100% / 1 )) !important; } */ } @media screen and (max-width:640px){ #layout_service_7 .service7_summ br { display:block; } } @media screen and (max-width:480px){ #layout_service_7 .row-md6 .thk-col, #layout_service_7 .row-md6 .thk-col.active { width: calc((100% / 1 )) !important; } #layout_service_7 .service7_summ br { display:none; } } /*---------------------------------------------------------------------- @ PORTFOLIO LAYER POPUP ----------------------------------------------------------------------*/ #layout_popup { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; overflow-y: auto; } #layout_popup .back { position:fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index:98; opacity:0.7; } #layout_popup .navi { position: fixed; top: 50%;left: 0; right: 0; width: 100%; margin: 0 auto; z-index: 100; } #layout_popup .navi button { position:absolute; background:none; border:none; color:#fff; opacity:0.7; transition:all 0.3s; } #layout_popup .navi button:hover { opacity:1; } #layout_popup .navi ._prev { left:15px; } #layout_popup .navi ._next { right:15px; } #layout_popup .layer_inner { position: relative ; width: 100%; max-width: 1170px; height: 100%; margin: 0 auto; color: #fff; padding: 3.75rem 0; z-index:101; } #layout_popup .portfolio_view { position:relative; } #layout_popup .portfolio_view .portfolio_view_entitle { font-size:1rem; color:#fff; font-weight:400; margin-bottom:0.325rem; } #layout_popup .portfolio_view .portfolio_view_title { font-size:1.563rem; color:#fff; font-weight:600; margin-bottom:1.875rem; } #layout_popup .portfolio_view .portfolio_view_close { position:absolute; top:0px; right:0px; } #layout_popup .portfolio_view .portfolio_view_close a { color:#fff; } #layout_popup .portfolio_view .portfolio_view_close a span { transition:all 0.3s; } #layout_popup .portfolio_view .portfolio_view_close a:hover span { transform:rotate(180deg); } /*---------------------------------------------------------------------- @ Layout Portfolio 1 ----------------------------------------------------------------------*/ #layout_portfolio_1 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:0rem; padding-bottom:7.5rem; } #layout_portfolio_1 .container { width:100%; margin:0 auto} #layout_portfolio_1 .thk-row { margin-right:0rem; } #layout_portfolio_1 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; transition:all 0.3s ease; } #layout_portfolio_1 .thk-col:last-of-type { } #layout_portfolio_1 .thk-col a { width:100%; height:100%; } #layout_portfolio_1 .row-md4 .thk-col { width: calc((100% / 4 )); } #layout_portfolio_1 .portfolio1_thumb { position:relative; width:100%; height:100%; } #layout_portfolio_1 .portfolio1_img {position:relative;width:100%;height:100%;padding-top:116.66%;text-align:center; overflow:hidden} #layout_portfolio_1 .portfolio1_img img {position:absolute; width:100%; height:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_1 .portfolio1_info { display:flex; align-items:center; justify-content:center; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.7); opacity:0; transition:all 0.3s ease; } #layout_portfolio_1 .portfolio1_cont { text-align:center; color:#fff; } #layout_portfolio_1 .portfolio1_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_1 .portfolio1_entitle { font-family:'Merriweather'; font-size:0.813rem; font-style:italic; color:#fff; margin-top:0.625rem; letter-spacing:0rem;} #layout_portfolio_1 .portfolio1_summ { position:relative; font-size:1rem; font-weight:400; line-height:1.875rem; margin-top:1.875rem; padding-top:1.875rem; word-break:keep-all; } #layout_portfolio_1 .portfolio1_summ:after { content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:25px; height:2px; background:#fff; } #layout_portfolio_1 .portfolio1_btn { position:relative; text-align:center; margin-top:3.125rem; } #layout_portfolio_1 .portfolio1_btn a { display:inline-block; min-width:15.625rem; font-size:0.938rem; color:#14171d; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; border:1px solid #e9e9e9; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); background:#fff; } #layout_portfolio_1 .portfolio1_btn a:hover { color:#fff; } #layout_portfolio_1 .portfolio1_btn a:after { background:#14171d; } #layout_portfolio_1 .thk-col a:hover .portfolio1_info { opacity:1; } /* Responsive */ @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ #layout_portfolio_1 .row-md4 .thk-col { width: calc((100% / 4 )); } } @media screen and (max-width:768px){ #layout_portfolio_1 .row-md4 .thk-col { width: calc((100% / 2 )); } } @media screen and (max-width:640px){ } @media screen and (max-width:414px){ #layout_portfolio_1 .row-md4 .thk-col { width: calc((100% / 1 )); } } /*---------------------------------------------------------------------- @ Layout Portfolio 2 ----------------------------------------------------------------------*/ #layout_portfolio_2 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_portfolio_2 .container { width:100%; margin:0 auto} #layout_portfolio_2 .thk-col { margin-bottom:1.875rem; } #layout_portfolio_2 .portfolio2_sec_title_wrap { text-align:center; margin-bottom:3.75rem; } #layout_portfolio_2 .portfolio2_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_2 .portfolio2_sec_summ { position:relative; font-size:1rem; color:#999; font-weight:400; line-height:1.875; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all;} #layout_portfolio_2 .portfolio2_sec_summ:after { content:''; position:absolute; top:0rem; left:50%; transform:translateX(-50%); width:10.625rem; height:2px; background:var(--main);; } #layout_portfolio_2 .portfolio2_list { margin:0 6.25rem; } #layout_portfolio_2 .portfolio2_thumb {position:relative;width:100%;height:0;padding-top:85.78%;text-align:center; overflow:hidden} #layout_portfolio_2 .portfolio2_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_2 .portfolio2_info { display:flex; align-items:center; justify-content:center; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.7); opacity:0; transition:all 0.3s ease; } #layout_portfolio_2 .portfolio2_cont { text-align:center; color:#fff; } #layout_portfolio_2 .portfolio2_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_2 .portfolio2_entitle { font-family:'Merriweather'; font-size:0.813rem; font-style:italic; color:#fff; margin-top:0.625rem; letter-spacing:0rem;} #layout_portfolio_2 .portfolio2_summ { position:relative; font-size:1rem; font-weight:400; line-height:1.875rem; margin-top:1.875rem; padding-top:1.875rem; word-break:keep-all; } #layout_portfolio_2 .portfolio2_summ:after { content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:25px; height:2px; background:#fff; } #layout_portfolio_2 .portfolio2_btn { position:relative; text-align:center; margin-top:3.125rem; } #layout_portfolio_2 .portfolio2_btn a { display:inline-block; min-width:15.625rem; font-size:0.938rem; color:#14171d; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; border:1px solid #e9e9e9; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); background:#fff; } #layout_portfolio_2 .portfolio2_btn a:hover { color:#fff; } #layout_portfolio_2 .portfolio2_btn a:after { background:#14171d; } #layout_portfolio_2 .thk-col a:hover .portfolio2_info { opacity:1; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_2 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_2 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_portfolio_2 { padding-top:4rem; padding-bottom:4rem; } #layout_portfolio_2 .thk-row { margin-right:-1.25rem; } #layout_portfolio_2 .row-md4 .thk-col { width: calc((100% / 4 ) - 1.25rem); margin-right:1.25rem; } #layout_portfolio_2 .portfolio2_list { margin:0 auto; } } @media screen and (max-width:768px){ #layout_portfolio_2 .thk-row { margin-right:-1.25rem; } #layout_portfolio_2 .row-md4 .thk-col { width: calc((100% / 2 ) - 1.25rem); margin-right:1.25rem; } #layout_portfolio_2 .portfolio2_list { margin:0 auto; } } @media screen and (max-width:414px){ #layout_portfolio_2 .thk-row { margin-right:-1.25rem; } #layout_portfolio_2 .row-md4 .thk-col { width: calc((100% / 1 ) - 1.25rem); margin-right:1.25rem; } } /*---------------------------------------------------------------------- @ Layout Portfolio 3 ----------------------------------------------------------------------*/ #layout_portfolio_3 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#f4f4f4; } #layout_portfolio_3 .container { width:100%; max-width:1170px; margin:0 auto} #layout_portfolio_3 .thk-col { margin-bottom:1.875rem; overflow:hidden; } #layout_portfolio_3 .portfolio3_sec_title_wrap { text-align:center; margin-bottom:3.75rem; } #layout_portfolio_3 .portfolio3_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_3 .thk-col a { width:100%; height:100%; overflow:hidden; } #layout_portfolio_3 .portfolio3_list { } #layout_portfolio_3 .portfolio3_thumb_wrap { overflow:hidden; } #layout_portfolio_3 .portfolio3_thumb {position:relative;width:100%;height:0;padding-top:73%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_3 .portfolio3_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition:all 0.3s ease; } #layout_portfolio_3 .portfolio3_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_3 .portfolio3_info { display:flex; background:#fff; padding:1.875rem; transition:all 0.3s ease; z-index:2; } #layout_portfolio_3 .portfolio3_cont { text-align:left; color:#333; } #layout_portfolio_3 .portfolio3_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_3 .portfolio3_date { font-size:0.875rem; font-weight:400; color:#666; margin-top:0.938rem; letter-spacing:0; } #layout_portfolio_3 .thk-col:hover .portfolio3_thumb { transform:scale(1.1); } #layout_portfolio_3 .thk-col:hover .portfolio3_thumb:after { opacity:1; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_3 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_3 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_portfolio_3 { padding-top:4rem; padding-bottom:4rem; } } @media screen and (max-width:768px){ #layout_portfolio_3 .thk-row { margin-right:-1.25rem; } #layout_portfolio_3 .row-md3 .thk-col { width: calc((100% / 2 ) - 1.25rem); margin-right:1.25rem; } } @media screen and (max-width:640px){ #layout_portfolio_3 .row-md3 .thk-col { margin-right:1.25rem !important; } } @media screen and (max-width:414px){ #layout_portfolio_3 .row-md3 .thk-col { width: calc((100% / 1 ) - 1.25rem ); } } /*---------------------------------------------------------------------- @ Layout Portfolio 4 ----------------------------------------------------------------------*/ #layout_portfolio_4 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_portfolio_4 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_portfolio_4 .thk-col { margin-bottom:1.875rem; overflow:hidden; } #layout_portfolio_4 .portfolio4_sec_title_wrap { text-align:left; margin-bottom:2.5rem; } #layout_portfolio_4 .portfolio4_sec_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#999; margin-bottom:5px; } #layout_portfolio_4 .portfolio4_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_4 .portfolio4_sec_summ { position:relative; font-size:1rem; color:#999; font-weight:400; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all; } #layout_portfolio_4 .portfolio4_sec_summ:after { content:''; position:absolute; top:0rem; width:10.625rem; height:2px; background:var(--main);; } #layout_portfolio_4 .thk-col a { width:100%; height:100%; overflow:hidden; } #layout_portfolio_4 .portfolio4_list { } #layout_portfolio_4 .portfolio4_list_inner { overflow:hidden; } #layout_portfolio_4 .portfolio4_thumb_wrap { position:relative;overflow:hidden; } #layout_portfolio_4 .portfolio4_thumb {position:relative;width:100%;height:0;padding-top:73%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_4 .portfolio4_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition:all 0.3s ease; } #layout_portfolio_4 .portfolio4_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_4 .portfolio4_info { display:flex; border:1px solid #dbdbdb; background:#fff; padding:1.563rem; transition:all 0.3s ease; z-index:2; } #layout_portfolio_4 .portfolio4_cont { text-align:left; color:#333; } #layout_portfolio_4 .portfolio4_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_4 .portfolio4_summ { width:100%; font-size:0.938rem; color:#666; font-weight:400; -webkit-line-clamp : 3; line-height:1.6em; height:4.8em; overflow:hidden; text-align:left; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; margin-top:1.25rem; } #layout_portfolio_4 .portfolio4_date { display:flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; left:0px; top:0px; width:60px; height:60px; background:rgba(42,45,46,0.5); z-index:3; } #layout_portfolio_4 .portfolio4_date span { display:block; color:#fff; } #layout_portfolio_4 .portfolio4_date .day { font-size:1.5rem; color:#fff; line-height:1;letter-spacing:0; } #layout_portfolio_4 .portfolio4_date .mon { font-size:0.875rem; color:#fff; line-height:1;letter-spacing:0.05em; } #layout_portfolio_4 .thk-col:hover .portfolio4_thumb { transform:scale(1.1); } #layout_portfolio_4 .thk-col:hover .portfolio4_thumb:after { opacity:1; } #layout_portfolio_4 .swiper-container { position:revert; overflow:revert; } #layout_portfolio_4 .swiper-position { position:absolute; top:52%; width:100%; max-width:1170px; z-index:99; } #layout_portfolio_4 .swiper-button-prev:after, #layout_portfolio_4 .swiper-button-next:after { font-size:10px; color:#fff; font-weight:700; transition:all 0.4s ease; } #layout_portfolio_4 .swiper-button-prev {left:-4.375rem; top:calc(50% - 1.5625rem);width:3.125rem; height:3.125rem; background:#8c8c8d; } #layout_portfolio_4 .swiper-button-next {right:-4.375rem;top:calc(50% - 1.5625rem); width:3.125rem; height:3.125rem; background:#8c8c8d; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_4 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_4 .container { margin:0 15px; } #layout_portfolio_4 .swiper-position { left:0px; } #layout_portfolio_4 .swiper-button-prev { left:10px; } #layout_portfolio_4 .swiper-button-next { right:10px; } } @media screen and (max-width:1199px){ #layout_portfolio_4 .container { padding:0 15px; margin:0 auto; } } @media screen and (max-width:1024px){ #layout_portfolio_4 { padding-top:4rem; padding-bottom:4rem; } #layout_portfolio_4 .container { :0 15px; } } /*---------------------------------------------------------------------- @ Layout Portfolio 5 ----------------------------------------------------------------------*/ #layout_portfolio_5 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#f4f4f4; } #layout_portfolio_5 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_portfolio_5 .thk-col { margin-bottom:1.875rem; overflow:hidden; } #layout_portfolio_5 .portfolio5_sec_title_wrap { text-align:left; margin-bottom:2.5rem; } #layout_portfolio_5 .portfolio5_sec_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#999; margin-bottom:5px; } #layout_portfolio_5 .portfolio5_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_5 .portfolio5_sec_summ { position:relative; font-size:1rem; color:#666; font-weight:400; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all; } #layout_portfolio_5 .portfolio5_sec_summ:after { content:''; position:absolute; top:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_portfolio_5 .thk-col a { width:100%; height:100%; overflow:hidden; } #layout_portfolio_5 .portfolio5_list { } #layout_portfolio_5 .portfolio5_list_inner { overflow:hidden; } #layout_portfolio_5 .portfolio5_thumb_wrap { position:relative;overflow:hidden; } #layout_portfolio_5 .portfolio5_thumb {position:relative;width:100%;height:0;padding-top:73%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_5 .portfolio5_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition:all 0.3s ease; } #layout_portfolio_5 .portfolio5_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_5 .portfolio5_info { display:flex; background:#fff; padding:1.563rem; transition:all 0.3s ease; z-index:2; } #layout_portfolio_5 .portfolio5_cont { text-align:left; color:#333; } #layout_portfolio_5 .portfolio5_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_5 .portfolio5_cate { font-size:0.875rem; color:#666; font-weight:400; margin-top:0.625rem; letter-spacing:0; } #layout_portfolio_5 .thk-col:hover .portfolio5_thumb { transform:scale(1.1); } #layout_portfolio_5 .thk-col:hover .portfolio5_thumb:after { opacity:1; } #layout_portfolio_5 .swiper-container { position:revert; overflow:; } #layout_portfolio_5 .swiper-position { position:absolute; top:52%; width:100%; max-width:1170px; } #layout_portfolio_5 .swiper-button-prev:after, #layout_portfolio_5 .swiper-button-next:after { font-size:10px; color:#fff; font-weight:700; transition:all 0.4s ease; } #layout_portfolio_5 .swiper-button-prev {left:-4.375rem; top:calc(50% - 1.5625rem);width:3.125rem; height:3.125rem; background:#8c8c8d; } #layout_portfolio_5 .swiper-button-next {right:-4.375rem;top:calc(50% - 1.5625rem); width:3.125rem; height:3.125rem; background:#8c8c8d; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_5 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_5 .container { margin:0 15px; } #layout_portfolio_5 .swiper-position { left:0; } #layout_portfolio_5 .swiper-button-prev { left:10px; } #layout_portfolio_5 .swiper-button-next { right:10px; } } @media screen and (max-width:1199px){ #layout_portfolio_5 .container { padding:0 15px; margin:0 auto; } } @media screen and (max-width:1024px){ #layout_portfolio_5 { padding-top:4rem; padding-bottom:4rem; } #layout_portfolio_5 .container { :0 15px; } } /*---------------------------------------------------------------------- @ Layout Portfolio 6 ----------------------------------------------------------------------*/ #layout_portfolio_6 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:0rem; padding-bottom:0rem; } #layout_portfolio_6 .container { width:100%; margin:0 auto; } #layout_portfolio_6 .thk-row { margin-right:0rem; } #layout_portfolio_6 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; min-height:35rem; background:#808a8f; } #layout_portfolio_6 .thk-col:last-of-type { } #layout_portfolio_6 .row-md4 .thk-col { width: calc((100% / 4 )); } #layout_portfolio_6 .portfolio6_sec_title_wrap { text-align:left; margin-bottom:2.5rem; } #layout_portfolio_6 .portfolio6_sec_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#999; margin-bottom:5px; } #layout_portfolio_6 .portfolio6_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_6 .portfolio6_sec_summ { position:relative; font-size:1rem; color:#666; font-weight:400; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all; } #layout_portfolio_6 .portfolio6_sec_summ:after { content:''; position:absolute; top:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_portfolio_6 .thk-col a { width:100%; height:100%; overflow:hidden; } #layout_portfolio_6 .portfolio6_list { overflow:hidden; } #layout_portfolio_6 .portfolio6_thumb_wrap { position:relative;overflow:hidden; } #layout_portfolio_6 .portfolio6_thumb {position:relative;width:100%;height:0;padding-top:106.25%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_6 .portfolio6_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition:all 0.3s ease; } #layout_portfolio_6 .portfolio6_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_6 .portfolio6_info { display:flex; background:#fff; padding:3.125rem; transition:all 0.3s ease; z-index:2; background:#2a2d2e; } #layout_portfolio_6 .thk-col:nth-of-type(even) .portfolio6_info { background:#63696f; } #layout_portfolio_6 .portfolio6_cont { text-align:left; color:#fff; } #layout_portfolio_6 .portfolio6_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_6 .portfolio6_summ { width:100%; font-size:0.938rem; font-weight:400; -webkit-line-clamp : 3; line-height:1.6em; height:4.8em; overflow:hidden; text-align:left; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; word-wrap:break-word; word-break:keep-all; margin-top:1.875rem; } #layout_portfolio_6 .portfolio6_date { font-size:0.875rem; font-weight:400; margin-top:0.625rem; letter-spacing:0; } #layout_portfolio_6 .thk-col:hover .portfolio6_thumb { transform:scale(1.1); } #layout_portfolio_6 .thk-col:hover .portfolio6_thumb:after { opacity:1; } #layout_portfolio_6 .swiper-container { position:revert; overflow:; } #layout_portfolio_6 .swiper-position { position:absolute; top:52%; width:100%; max-width:revert; } #layout_portfolio_6 .swiper-button-prev:after, #layout_portfolio_6 .swiper-button-next:after { font-size:10px; color:#fff; font-weight:700; transition:all 0.4s ease; } #layout_portfolio_6 .swiper-button-prev {left:0rem; top:calc(50% + 1.5625rem);width:3.125rem; height:3.125rem; background:#5b6065; opacity:1; } #layout_portfolio_6 .swiper-button-next {right:0rem;top:calc(50% + 1.5625rem); width:3.125rem; height:3.125rem; background:#5b6065; opacity:1;} /* Responsive */ @media screen and (max-width:1200px){ } @media screen and (max-width:1024px){ #layout_portfolio_6 .thk-col { min-height:revert; } } /*---------------------------------------------------------------------- @ Layout Portfolio 7 ----------------------------------------------------------------------*/ #layout_portfolio_7 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_portfolio_7 .container { width:100%; margin:0 auto} #layout_portfolio_7 .thk-row { margin-right:0rem; } #layout_portfolio_7 .thk-col { display:flex; align-items:center; justify-content:center; margin-right:0rem; } #layout_portfolio_7 .thk-col:last-of-type { } #layout_portfolio_7 .row-md5 .thk-col { width: calc((100% / 5 )); } #layout_portfolio_7 .thk-col a { width:100%; height:100%; } #layout_portfolio_7 .portfolio7_list { overflow:hidden; } #layout_portfolio_7 .portfolio7_thumb_wrap { position:relative;width:100%; height:100%; overflow:hidden; } #layout_portfolio_7 .portfolio7_thumb {position:relative;width:100%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_7 .portfolio7_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.8); opacity:0; transition:all 0.3s ease; } #layout_portfolio_7 .portfolio7_thumb img {position:relative; width:100%; -o-object-fit: cover;object-fit: cover;} #layout_portfolio_7 .portfolio7_info { display:flex; align-items:center; justify-content:center; position:absolute; left:0px; top:0px; width:100%; height:100%; opacity:1; transition:all 0.3s ease; z-index:2; } #layout_portfolio_7 .portfolio7_cont { text-align:center; color:#fff; } #layout_portfolio_7 .portfolio7_title { font-size:1.125rem; font-weight:600; line-height:1.2; } #layout_portfolio_7 .portfolio7_entitle { font-family:'Merriweather'; font-size:0.813rem; font-style:italic; color:#666; margin-top:0.625rem; letter-spacing:0rem; transition:all 0.3s ease;} #layout_portfolio_7 .portfolio7_summ { position:relative; font-size:1rem; font-weight:400; line-height:1.875rem; margin-top:1.875rem; padding-top:1.875rem; word-break:keep-all; } #layout_portfolio_7 .portfolio7_summ:after { content:''; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:25px; height:2px; background:#fff; } #layout_portfolio_7 .portfolio7_btn { position:relative; text-align:center; margin-top:3.125rem; } #layout_portfolio_7 .portfolio7_btn a { display:inline-block; min-width:15.625rem; font-size:0.938rem; color:#14171d; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; border:1px solid #e9e9e9; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); background:#fff; } #layout_portfolio_7 .portfolio7_btn a:hover { color:#fff; } #layout_portfolio_7 .portfolio7_btn a:after { background:#14171d; } #layout_portfolio_7 .thk-col:hover .portfolio7_info { opacity:1; } #layout_portfolio_7 .thk-col:hover .portfolio7_thumb:after { opacity:1; } #layout_portfolio_7 .thk-col:hover .portfolio7_entitle { color:#fff; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_7 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_7 .row-md5 .thk-col { width: calc((100% / 4 )); } } @media screen and (max-width:1024px){ #layout_portfolio_7 { padding-top:4rem; padding-bottom:4rem; } #layout_portfolio_7 .row-md5 .thk-col { width: calc((100% / 3 )); } } @media screen and (max-width:768px){ #layout_portfolio_7 .row-md5 .thk-col { width: calc((100% / 2 )); } } /*---------------------------------------------------------------------- @ Layout Portfolio 8 ----------------------------------------------------------------------*/ #layout_portfolio_8 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_portfolio_8 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_portfolio_8 .thk-row { display:block; } #layout_portfolio_8 .thk-row:after { content:''; display:block; clear:both; } #layout_portfolio_8 .thk-col { float:left; margin-bottom:1.875rem; } #layout_portfolio_8 .row-md4 .thk-col:nth-of-type(1) { width: calc((100% / 2 ) - 1.875rem); } #layout_portfolio_8 .portfolio8_sec_title_wrap { text-align:center; margin-bottom:3.75rem; } #layout_portfolio_8 .portfolio8_sec_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_portfolio_8 .portfolio8_thumb { position:relative;width:100%; height:100%; } #layout_portfolio_8 .portfolio8_thumb_wrap { position:relative;overflow:hidden; } #layout_portfolio_8 .portfolio8_thumb {position:relative;width:100%;height:0;padding-top:100%;text-align:center; overflow:hidden; transition:all 0.3s ease; z-index:1; } #layout_portfolio_8 .portfolio8_thumb:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.8); opacity:0; transition:all 0.3s ease; } #layout_portfolio_8 .portfolio8_thumb img {position:absolute; width:100%; top:50%;left:50%; transform:translate(-50%,-50%); -o-object-fit: cover;object-fit: cover;} #layout_portfolio_8 .portfolio8_info { display:flex; align-items:center; justify-content:center; position:absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; transition:all 0.3s ease; z-index:2; } #layout_portfolio_8 .portfolio8_cont { text-align:center; color:#fff; } #layout_portfolio_8 .portfolio8_title { font-size:1.125rem; font-weight:600; line-height:1.2; transition:all 0.3s ease} #layout_portfolio_8 .portfolio8_entitle { font-family:'Merriweather'; font-size:0.813rem; font-style:italic; color:#999; margin-top:0.625rem; letter-spacing:0rem; transition:all 0.3s ease} #layout_portfolio_8 .portfolio8_btn { position:relative; text-align:center; margin-top:3.125rem; } #layout_portfolio_8 .portfolio8_btn a { display:inline-block; min-width:15.625rem; font-size:0.938rem; color:#14171d; font-weight:600; padding:1rem 3.125rem; letter-spacing:0; border:1px solid #e9e9e9; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); background:#fff; } #layout_portfolio_8 .portfolio8_btn a:hover { color:#fff; } #layout_portfolio_8 .portfolio8_btn a:after { background:#14171d; } #layout_portfolio_8 .portfolio8_category { display:flex; align-items:center; justify-content:center; margin-bottom:2.5rem; } #layout_portfolio_8 .portfolio8_category .portfolio8_category_list { } #layout_portfolio_8 .portfolio8_category a { display:inline-block; font-size:0.875rem; color:#666; font-weight:400; margin-right:2.813rem; margin-bottom:0.625rem; letter-spacing:0; transition:all 0.3s ease; } #layout_portfolio_8 .portfolio8_category a span { position:relative; } #layout_portfolio_8 .portfolio8_category a span:after { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--main); transition:all 0.3s ease; } #layout_portfolio_8 .portfolio8_category a:last-of-type { margin-right:0; } #layout_portfolio_8 .portfolio8_category a.on, #layout_portfolio_8 .portfolio8_category a:hover { color:var(--main); font-weight:600; } #layout_portfolio_8 .portfolio8_category a.on span:after, #layout_portfolio_8 .portfolio8_category a:hover span:after { width:100%; } #layout_portfolio_8 .thk-col:hover .portfolio8_info { opacity:1; } #layout_portfolio_8 .thk-col:hover .portfolio8_thumb { } #layout_portfolio_8 .thk-col:hover .portfolio8_thumb:after { opacity:1; } #layout_portfolio_8 .thk-col:hover .portfolio8_title { color:#fff; } #layout_portfolio_8 .thk-col:hover .portfolio8_entitle { color:#fff; } /* Responsive */ @media screen and (max-width:1200px){ #layout_portfolio_8 { padding-top:5rem; padding-bottom:5rem; } #layout_portfolio_8 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_portfolio_8 { padding-top:4rem; padding-bottom:4rem; } #layout_portfolio_8 .row-md4 .thk-col { width: calc((100% / 4 ) - 1.875rem); } #layout_portfolio_8 .row-md4 .thk-col:nth-of-type(1) { width: calc((100% / 2 ) - 1.875rem); } } @media screen and (max-width:1024px){ #layout_portfolio_8 .portfolio8_category a { margin-right:1.875rem; } #layout_portfolio_8 .portfolio8_category a:last-of-type { margin-right:0; } #layout_portfolio_8 .thk-row { margin-right:-1.25rem; } #layout_portfolio_8 .row-md4 .thk-col { width: calc((100% / 2 ) - 1.25rem); margin-right:1.25rem; } #layout_portfolio_8 .row-md4 .thk-col:nth-of-type(1) { width: calc((100% / 2 ) - 1.25rem); } } /*---------------------------------------------------------------------- @ Layout Slider 1 ----------------------------------------------------------------------*/ #layout_slider_1 {position:relative;padding:0 !important;background:#000; } #layout_slider_1 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_1 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_1 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_1 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_1 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);background-size:cover;z-index:-1;} #layout_slider_1 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_1 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1440px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #layout_slider_1 .slider__slogun {display:flex;height:100%;justify-content:center;align-items:flex-start;flex-direction:column;text-align:left;font-weight:900; color:#fff;} #layout_slider_1 .slider__slogun > b.title {margin-bottom:1.875rem; display:block;font-weight:400;font-size:1.563rem; color:rgba(255,255,255,0.5); overflow:hidden; letter-spacing:0.3em; } #layout_slider_1 .slider__slogun > b {position:relative;display:block;font-weight:700;font-size:3.75rem;line-height:1.2;color:#fff;overflow:hidden; word-break:keep-all;} #layout_slider_1 .slider__slogun > b.subtitle {margin-top:1.875rem; display:block;font-weight:300;font-size:1.563rem;line-height:1;color:#fff;overflow:hidden; word-break:keep-all;} #layout_slider_1 .slider__slogun > b > span, #layout_slider_1 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_1 .slider__slogun > p {position:relative;margin-top:20px;font-weight:400;font-size:1.375rem;line-height:1.47;color:#fff;overflow:hidden; word-break:keep-all;} #layout_slider_1 .slider__slogun_btn {position:relative;display:block;padding:1rem 2rem; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;transition:all 0.3s ease-out;opacity:0; } #layout_slider_1 .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;transition:all 0.3s ease-out } #layout_slider_1 .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} #layout_slider_1 .slider__slogun_btn > span:after {content:'More View';} /*스크롤*/ #layout_slider_1 .slider-scroll { position:relative; } #layout_slider_1 .slider-scroll a {display:block;position:absolute; width:1.25rem; height:10rem; right:7.5rem;margin:0 auto;font-weight:500;font-size:0.813rem;color:#fff;animation:scrolltype1 2s linear infinite;cursor:pointer;text-align:center;letter-spacing:0.1em; ;z-index:9;writing-mode:vertical-lr;} #layout_slider_1 .slider-scroll a:before {content:'';position:absolute; bottom:0; display:block;width:17px;height:24px;margin:0 auto;background-image:url(/images/common/visual_scroll_new.png);background-repeat:no-repeat;background-position:center;background-size:cover;} @keyframes scrolltype1 {0%{bottom:3.125rem;}50%{bottom:4.375rem;}100%{bottom:3.125rem;}} /*액션*/ #layout_slider_1 .slider__thumb .slider__thumb_bg {transition: all 8s ease-out; transform: scale(1,1);} #layout_slider_1 .slider__slogun {position:relative;top:0rem; transition: all .8s ease-out;} #layout_slider_1 .swiper-slide-active .slider__slogun {top:0;} #layout_slider_1 .swiper-slide-active .slider__thumb .slider__thumb_bg {transition: all 8s ease-out; transform: scale(1.25);} /* SWIPER PAGINATION */ #layout_slider_1 .swiper-button-prev:after, #layout_slider_1 .swiper-button-next:after {font-size:1rem;color:#fff;} #layout_slider_1 .swiper-button-prev { right:30px; left:revert; } #layout_slider_1 .swiper-button-next { right:10px; } /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_1 .swiper_control_wrap { position:absolute; left:50%; transform:translateX(-50%); z-index:12; bottom:80px; max-width:1440px; width:100%; height:auto; margin:0 auto; } #layout_slider_1 .main_visual_state {display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} /*.main_visual_wrap .main_visual_state {display: block;max-width: 1520px;margin: 0 auto;position: absolute;left: 112px;right: 112px;top: calc(50% - 183px); -webkit-transition: all 300ms;transition: all 300ms;width: 100%; z-index:100;}*/ #layout_slider_1 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_1 .swiper_control {position: absolute; left: 50%; width:100%; font-size: 0;z-index: 2; } /* pagination */ #layout_slider_1 .swiper_control .swiper-pagination {position: static;} #layout_slider_1 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_1 .swiper_control .swiper-pagination-fraction {display: inline-block; display:none; vertical-align: middle;width: auto;} #layout_slider_1 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_1 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:calc(100% - 125px); height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_1 .swiper_progress_wrap {display: block;width:calc(100% - 125px);height: 3px;position: absolute;left: 35px;top: 50%;margin-top: -1px;background: #767779;overflow: hidden;} #layout_slider_1 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_1 .swiper_play_state {display: inline-block;vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_1 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_1 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_1 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_1 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1720px){ #layout_slider_1 .slider-scroll a { bottom:4rem; right:1.25rem; } } @media screen and (max-width: 1520px){ #layout_slider_1 .swiper_control_wrap { margin-left:0px; } #layout_slider_1 .swiper_progress_hidden_space { width:calc(100% - 170px); } #layout_slider_1 .swiper_progress_wrap { width:calc(100% - 170px); } #layout_slider_1 .swiper-button-prev { right:80px; left:revert; } #layout_slider_1 .swiper-button-next { right:60px; } } @media screen and (max-width: 1480px){ #layout_slider_1 .slider__mxw { margin:0 20px;} } @media screen and (max-width: 1200px){ #layout_slider_1 .slider__mxw { padding:0 15px; margin:0 auto; } } @media screen and (max-width: 1024px){ #layout_slider_1 .slider-scroll { display:none; } #layout_slider_1 .slider__slogun > b.title { font-size:1.25rem; ; word-break:keep-all;} #layout_slider_1 .slider__slogun > b { font-size:2.75rem; word-break:keep-all;} #layout_slider_1 .slider__slogun > b.subtitle { font-size:1.25rem;line-height:1.2; word-break:keep-all; } #layout_slider_1 .slider__slogun > p { font-size:1.25rem; } #layout_slider_1 .slider__slogun img { max-width:85%; } #layout_slider_1 .swiper_progress_hidden_space { width:calc(100% - 100px); } #layout_slider_1 .swiper_progress_wrap { width:calc(100% - 100px); } #layout_slider_1 .swiper_play_state { left:5px;} #layout_slider_1 .swiper-button-prev { right:30px; left:revert; } #layout_slider_1 .swiper-button-next { right:10px; } } @media screen and (max-width: 640px){ #layout_slider_1 .slider__infos {height:640px;} #layout_slider_1 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_1 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} #layout_slider_1 .slider__slogun > b { font-size:2.25rem; } #layout_slider_1 .slider__slogun > p { font-size:1rem; } } @media screen and (max-width: 540px){ #layout_slider_1 .slider__slogun > b { font-size:2rem; } #layout_slider_1 .slider__slogun > b.subtitle {font-size:1rem; } #layout_slider_1 .swiper_control_wrap { bottom:10%; } } @media screen and (max-width: 480px){ #layout_slider_1 .slider__infos {height:480px;} } /*---------------------------------------------------------------------- @ Layout Slider 2 ----------------------------------------------------------------------*/ #layout_slider_2 {position:relative;padding:0 !important;background:#000; } #layout_slider_2 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_2 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_2 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_2 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_2 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);background-size:cover;z-index:-1;} #layout_slider_2 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_2 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1400px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #layout_slider_2 .slider__mxw { display:flex; justify-content:flex-start;align-items:flex-start; overflow:hidden; } #layout_slider_2 .slider__slogun {display:flex;height:100%;justify-content:flex-start;align-items:flex-start;flex-direction:column; top:calc(50% - 5px);position:relative; text-align:left;font-weight:900; color:#fff; margin-left:3.75rem;} #layout_slider_2 .slider__slogun > b {position:relative;display:block;font-weight:700;font-size:4.375rem;line-height:1.2;color:#fff;overflow:hidden; margin-bottom:0.625rem; word-break:keep-all; } #layout_slider_2 .slider__slogun > b.subtitle {display:block;font-weight:700;font-size:3.125rem;line-height:1.2;color:transparent;overflow:hidden;-webkit-text-stroke: 1.5px #fff; margin-bottom:0rem; letter-spacing:0; word-break:keep-all;} #layout_slider_2 .slider__slogun > b > span, #layout_slider_2 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_2 .slider__slogun > p {position:relative; font-weight:400;font-size:1.25rem;line-height:1.47;color:#fff;overflow:hidden; opacity:0.7; word-break:keep-all;} #layout_slider_2 .slider__slogun_btn {position:relative;display:block;padding:7px 50px 7px 15px; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;transition:all 0.3s ease-out;opacity:0;} #layout_slider_2 .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;transition:all 0.3s ease-out } #layout_slider_2 .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} #layout_slider_2 .slider__slogun_btn > span:after { content:'More Details View'; font-family:'Play'; font-weight:400; } #layout_slider_2 .slider__slogun_btn:hover {border-color:var(--menu);} #layout_slider_2 .slider__slogun_btn:hover:before {background-color:var(--menu);opacity:1;} #layout_slider_2 .slider__slogun_btn > i { position:absolute; right:12px; top:8px; display:inline-block; font-size:18px; } /*스크롤*/ #layout_slider_2 .slider-scroll-type2 { display:block; position:absolute; left:0;right:0px; text-align:center; bottom:0px; width:80px;height:100px;margin:0 auto;z-index:9; } #layout_slider_2 .slider-scroll-type2 .scroll_text { font-size:14px; color:#fff; letter-spacing:0; } #layout_slider_2 .slider-scroll-type2 .scroll_line { position:relative; width:1px; height:60px; background:rgba(255,255,255, 0.4); margin:0 auto; margin-top:10px; } #layout_slider_2 .slider-scroll-type2 .scroll_line:after { content:''; position:absolute; width:5px; height:5px; top:0px; left:-2px; background:var(--menu); border-radius:50%; z-index:2; animation:scroll_circle 3s ease infinite 0.1s;} #layout_slider_2 .slider-scroll-type2 .scroll_line:before { content:''; position:absolute; width:1px; height:50px; top:0px; background:#fff; z-index:1; animation:scroll_line 3s ease infinite 0.1s; } @keyframes scroll_circle {0%{top:0px;}50%{top:60px;}100%{top:0px;}} @keyframes scroll_line {0%{height:0px;}50%{height:60px;}100%{height:0px;}} /*좌우 부가 설정*/ #layout_slider_2 .swiper_navigation { display:none; } #layout_slider_2 .swiper-button-prev:after, #layout_slider_2 .swiper-button-next:after {font-size:2rem;color:#fff;} #layout_slider_2 .swiper-pagination-bullet {background-color:#e1e1e1; opacity:0.8; transition:all 0.3s ease; } #layout_slider_2 .swiper-pagination {top:calc(50% + 7px); left:50%;width:auto;margin-left:-700px;text-align:left; } #layout_slider_2 .swiper-pagination-bullet {display:block;width:2px;height:45px;margin:0;border-radius:0px;background-color:#e1e1e1;opacity:0.8;} #layout_slider_2 .swiper-pagination-bullet-active {background-color:var(--menu); height:60px;opacity:1; } /*액션*/ #layout_slider_2 .slider__thumb .slider__thumb_bg {transition: all 15s ease-out; transform: scale(1,1);} #layout_slider_2 .slider__slogun {position:relative;top:calc(50% - 5px);; transition: all .8s ease-out;} #layout_slider_2 .swiper-slide-active .slider__thumb .slider__thumb_bg {transform: scale(1.25);} /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_2 .swiper_control_wrap { position:absolute; left:50%; top:calc(50% + 7px); z-index:12; max-width:1400px; width:100%; height:auto; margin:0 auto; } #layout_slider_2 .main_visual_state { display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} #layout_slider_2 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_2 .swiper_control { position: absolute; left: 50%; width:100%; font-size: 0;z-index: 2; } /* pagination */ #layout_slider_2 .swiper_control .swiper-pagination {position: static;} #layout_slider_2 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_2 .swiper_control .swiper-pagination-fraction {display: inline-block; display:none; vertical-align: middle;width: auto;} #layout_slider_2 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_2 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:calc(100% - 125px); height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_2 .swiper_progress_wrap {display: none;width:calc(100% - 125px);height: 3px;position: absolute;left: 35px;top: 50%;margin-top: -1px;background: #767779;overflow: hidden;} #layout_slider_2 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_2 .swiper_play_state {display: inline-block;display:none;vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_2 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_2 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_2 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_2 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1460px){ #layout_slider_2 .slider__mxw { padding:0 15px; } #layout_slider_2 .swiper_control { left:15px; } #layout_slider_2 .swiper_control_wrap { top:calc(40% + 14px); } #layout_slider_2 .swiper-pagination { margin-left:0; } #layout_slider_2 .slider__slogun { top:40%; } } @media screen and (max-width: 1024px){ #layout_slider_2 .slider__slogun { padding:0 15px; margin-left:2rem;} #layout_slider_2 .slider-scroll-type2 { display:none; } } @media screen and (max-width:768px){ #layout_slider_2 .slider__slogun { text-align:left; } #layout_slider_2 .slider__slogun > b { font-size:3rem; line-height:1.3; margin-bottom:0rem; } #layout_slider_2 .slider__slogun > b.subtitle { font-size:2.5rem;line-height:1.3;margin-bottom:0rem;color:transparent;overflow:hidden;text-transform:uppercase;-webkit-text-stroke: 1px #fff; } #layout_slider_2 .slider__slogun > p { font-size:1rem;line-height:1.47;color:#fff;overflow: } #layout_slider_2 .swiper-pagination-bullet { height:2.5rem; } #layout_slider_2 .swiper-pagination-bullet-active { height:3.438rem;} } @media screen and (max-width: 640px){ #layout_slider_2 .slider__infos {height:640px;} #layout_slider_2 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_2 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} #layout_slider_2 .slider__slogun { margin-left:1rem;} } @media screen and (max-width: 540px){ #layout_slider_2 .slider__slogun > b { font-size:2.5rem; line-height:1.3; margin-bottom:0rem; } #layout_slider_2 .slider__slogun > b.subtitle { font-size:2rem;line-height:1.3;margin-bottom:0rem;color:transparent;overflow:hidden;text-transform:uppercase;-webkit-text-stroke: 0.5px #fff; } #layout_slider_2 .slider__slogun > p { font-size:1rem;line-height:1.47;color:#fff;overflow: } } @media screen and (max-width: 480px){ #layout_slider_2 .slider__infos {height:480px;} } /*---------------------------------------------------------------------- @ Layout Slider 3 ----------------------------------------------------------------------*/ #layout_slider_3 {position:relative;padding:0 !important;background:#000; } #layout_slider_3 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_3 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_3 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_3 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_3 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%); background-size:cover;z-index:-1;} #layout_slider_3 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_3 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1400px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #layout_slider_3 .slider__slogun {display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column; top:4rem;position:relative; text-align:center;font-weight:900; color:#fff; } #layout_slider_3 .slider__slogun > b {position:relative;display:block;font-weight:700;font-size:3.438rem;line-height:1.2;color:#fff;overflow:hidden; margin-bottom:0.625rem; word-break:keep-all;} #layout_slider_3 .slider__slogun > b.subtitle {display:block;font-weight:400;font-size:2.688rem;line-height:1.2;color:#fff;overflow:hidden;margin-bottom:0rem; word-break:keep-all;} #layout_slider_3 .slider__slogun > b > span, #layout_slider_3 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_3 .slider__slogun > p {position:relative; font-weight:400;font-size:1.25rem;line-height:1.47;color:#fff;overflow:hidden; opacity:0.7; word-break:keep-all;} #layout_slider_3 .slider__slogun_btn {position:relative;display:block;padding:7px 50px 7px 15px; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;transition:all 0.3s ease-out;opacity:0;} #layout_slider_3 .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;transition:all 0.3s ease-out } #layout_slider_3 .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} #layout_slider_3 .slider__slogun_btn > span:after { content:'More Details View'; font-family:'Play'; font-weight:400; } #layout_slider_3 .slider__slogun_btn:hover {border-color:var(--menu);} #layout_slider_3 .slider__slogun_btn:hover:before {background-color:var(--menu);opacity:1;} #layout_slider_3 .slider__slogun_btn > i { position:absolute; right:12px; top:8px; display:inline-block; font-size:18px; } /*스크롤*/ #layout_slider_3 .slider-scroll { position:relative; } #layout_slider_3 .slider-scroll a {display:block;position:absolute; width:1.25rem; height:10rem; right:7.5rem;margin:0 auto;font-weight:500;font-size:0.813rem;color:#fff;animation:scrolltype1 2s linear infinite;cursor:pointer;text-align:center;letter-spacing:0.1em; ;z-index:9;writing-mode:vertical-lr;} #layout_slider_3 .slider-scroll a:before {content:'';position:absolute; bottom:0; display:block;width:17px;height:24px;margin:0 auto;background-image:url(/images/common/visual_scroll_new.png);background-repeat:no-repeat;background-position:center;background-size:cover;} @keyframes scrolltype1 {0%{bottom:3.125rem;}50%{bottom:4.375rem;}100%{bottom:3.125rem;}} /*좌우 부가 설정*/ #layout_slider_3 .swiper-button-prev:after, #layout_slider_3 .swiper-button-next:after {font-size:2rem;color:#fff;} #layout_slider_3 .swiper-pagination-bullet {background-color:#e1e1e1; opacity:0.8; transition:all 0.3s ease; } #layout_slider_3 .swiper-pagination { } #layout_slider_3 .swiper-pagination-bullet {display:block;width:2px;height:45px;margin:0;border-radius:0px;background-color:#e1e1e1;opacity:0.8;} #layout_slider_3 .swiper-pagination-bullet-active {background-color:var(--menu); height:60px;opacity:1; } /*액션*/ #layout_slider_3 .slider__thumb .slider__thumb_bg {transition: all 15s ease-out; transform: scale(1,1);} #layout_slider_3 .slider__slogun {position:relative;top:0rem; transition: all .8s ease-out;} #layout_slider_3 .swiper-slide-active .slider__thumb .slider__thumb_bg {transform: scale(1.25);} /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_3 .swiper_navigation { display:none; } #layout_slider_3 .swiper_control_wrap { position:absolute; left:50%;transform:translateX(-50%); bottom:25%; z-index:12; max-width:1170px; width:100%; height:auto; margin:0 auto; } #layout_slider_3 .main_visual_state { display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} #layout_slider_3 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_3 .swiper_control { position: absolute; left: 50%; font-size: 0;z-index: 2; } /* pagination */ #layout_slider_3 .swiper_control .swiper-pagination {position: static;} #layout_slider_3 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_3 .swiper_control .swiper-pagination-fraction {display: inline-block; vertical-align: middle;width: auto;} #layout_slider_3 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_3 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:125px; height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_3 .swiper_progress_wrap {display:block ;width:125px; height: 3px;position: absolute;left: 25px;top: 50%;margin-top: -1px;background:rgba(255,255,255,0.5);overflow: hidden;} #layout_slider_3 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_3 .swiper_play_state {display: inline-block; vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_3 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_3 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_3 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_3 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1920px){ #layout_slider_3:before { top:-300px; right:-178px; width:300px; height:178px; background-size:cover; } #layout_slider_3:after { bottom:-270px; left:-268px; width:270px; height:266px; background-size:cover; } } @media screen and (max-width: 1600px){ } @media screen and (max-width: 1200px){ #layout_slider_3 .slider-scroll a { right:1.25rem; } } @media screen and (max-width: 1024px){ #layout_slider_3 .slider__slogun {padding:0 15px;} #layout_slider_3:before { top:-200px; right:-119px; width:200px; height:119px; } #layout_slider_3:after { bottom:-182px; left:-180px; width:182px; height:180px; } #layout_slider_3 .slider-scroll { display:none; } #layout_slider_3 .slider__slogun > b.title { font-size:1.25rem; padding-left:25px; padding-right:25px; word-break:keep-all;} #layout_slider_3 .slider__slogun > b { font-size:2.75rem; padding-left:25px; padding-right:25px; word-break:keep-all;} #layout_slider_3 .slider__slogun > b.subtitle {margin-top:1.875rem; font-size:1.25rem;line-height:1.2; padding-left:1.563rem; padding-right:1.563rem; word-break:keep-all; margin-bottom:0.625rem;} #layout_slider_3 .slider__slogun img { max-width:85%; } #layout_slider_3 .swiper-button-prev { left:5px; } #layout_slider_3 .swiper-button-next { right:5px; } } @media screen and (max-width: 768px){ #layout_slider_3 .swiper_control_wrap { bottom:15%; } #layout_slider_3 .slider_new .main_visual_state { min-width:210px; } } @media screen and (max-width: 640px){ #layout_slider_3 .slider__infos {height:640px;} #layout_slider_3 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_3 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} @keyframes scrollImage {0%{bottom:30px;}50%{bottom:50px;}100%{bottom:30px;}} #layout_slider_3 .slider__slogun > b.title { font-size:1.125rem; } #layout_slider_3 .slider__slogun > b { font-size:2.25rem; } #layout_slider_3 .slider__slogun > b.subtitle { font-size:1.125rem; } } @media screen and (max-width: 540px){ #layout_slider_3 .slider__slogun > b.title { font-size:1rem; } #layout_slider_3 .slider__slogun > b { font-size:2rem; } #layout_slider_3 .slider__slogun > b.subtitle {font-size:1rem; } } @media screen and (max-width: 480px){ #layout_slider_3 .slider__infos {height:480px;} } /*---------------------------------------------------------------------- @ Layout Slider 4 ----------------------------------------------------------------------*/ #layout_slider_4 {position:relative;padding:0 !important;background:#000; } #layout_slider_4 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_4 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_4 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_4 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_4 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%); background-size:cover;z-index:-1;} #layout_slider_4 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_4 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1600px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #layout_slider_4 .slider__slogun {display:flex;height:100%;justify-content:center;align-items:flex-start;flex-direction:column; top:4rem;position:relative; text-align:left;font-weight:900; color:#fff; } #layout_slider_4 .slider__slogun > b {position:relative;display:block;font-weight:800;font-size:3.75rem;line-height:1.2;color:#2ca6e0; font-style:italic;overflow:hidden; margin-bottom:0.625rem;word-break:keep-all; } #layout_slider_4 .slider__slogun > b.subtitle {display:block;font-weight:600;font-size:2.813rem;line-height:1.2;color:#fff;font-style:normal; overflow:hidden; margin-bottom:0rem; word-break:keep-all;} #layout_slider_4 .slider__slogun > b > span, #layout_slider_4 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_4 .slider__slogun > p {position:relative; font-weight:300;font-size:1.375rem;line-height:1.47;color:#fff;overflow:hidden; margin-top:2.188rem; word-break:keep-all;} #layout_slider_4 .slider__slogun > p b { font-weight:700; } #layout_slider_4 .slider__slogun_wrap { position:relative; display:inline-block; margin-top:3.75rem;overflow:hidden; opacity:0;} #layout_slider_4 .slider__slogun_wrap:after { content: "More View"; display: block; width: 105%; height: 2px; background-color: #fff; margin-top:10px; opacity:0.4;} #layout_slider_4 .slider__slogun_btn span { position:relative; display:inline-block; font-size:1.25rem; color:#fff; font-weight:300; padding-left:1.875rem; } #layout_slider_4 .slider__slogun_btn span:before { position:absolute; left:2px; top:6px; content:""; border : transparent 6px solid; border-left-color: #fff; display : inline-block; } #layout_slider_4 .slider__slogun_btn span:hover:before { animation: bound .4s ease forwards;} #layout_slider_4 .slider__slogun_btn span:after { content: ""; display: block; position:absolute; width:0;left:0px; height: 2px; background-color: #fff; margin-top:10px; bottom:-12px; transition:all 0.4s ease; } #layout_slider_4 .slider__slogun_btn span:hover:after { width:105%; } /*스크롤*/ #layout_slider_4 .slider-scroll-type2 { display:block; position:absolute; left:0;right:0px; text-align:center; bottom:0px; width:80px;height:75px;margin:0 auto;z-index:9; } #layout_slider_4 .slider-scroll-type2 .scroll_text { font-size:14px; color:#fff; letter-spacing:0; } #layout_slider_4 .slider-scroll-type2 .scroll_line { position:relative; width:1px; height:60px; background:rgba(255,255,255, 0.4); margin:0 auto; margin-top:10px; } #layout_slider_4 .slider-scroll-type2 .scroll_line:after { content:''; position:absolute; width:5px; height:5px; top:0px; left:-2px; background:var(--menu); border-radius:50%; z-index:2; animation:scroll_circle 3s ease infinite 0.1s;} #layout_slider_4 .slider-scroll-type2 .scroll_line:before { content:''; position:absolute; width:1px; height:50px; top:0px; background:#fff; z-index:1; animation:scroll_line 3s ease infinite 0.1s; } @keyframes scroll_circle {0%{top:0px;}50%{top:60px;}100%{top:0px;}} @keyframes scroll_line {0%{height:0px;}50%{height:60px;}100%{height:0px;}} /*좌우 부가 설정*/ #layout_slider_4 .swiper-button-prev:after, #layout_slider_4 .swiper-button-next:after {font-size:2rem;color:#fff;} #layout_slider_4 .page_number { display:inline-block; color:#fff; font-size:13px; font-weight:400; margin-right:10px; transition:all 0.4s ease; } #layout_slider_4 .page_total { display:inline-block; color:#fff; font-size:13px; font-weight:400; } #layout_slider_4 .swiper-pagination-bullet { display:inline-block; width:4px; height:4px; border-radius:50%; background:#fff; margin-right:15px; opacity:0.5; vertical-align:middle; transition:all 0.4s ease; } #layout_slider_4 .swiper-pagination-bullet-active { width:8px; height:8px; opacity:1; } /*액션*/ #layout_slider_4 .slider__thumb .slider__thumb_bg {transition: all 15s ease-out; transform: scale(1,1);} #layout_slider_4 .slider__slogun {position:relative;top:0rem; transition: all .8s ease-out;} #layout_slider_4 .swiper-slide-active .slider__thumb .slider__thumb_bg {transform: scale(1.25);} /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_4 .swiper_navigation { display:none; } #layout_slider_4 .swiper_control_wrap { position:absolute; left:50%;transform:translateX(-50%); bottom:20%; z-index:12; max-width:1600px; width:100%; height:auto; margin:0 auto; } #layout_slider_4 .main_visual_state { display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} #layout_slider_4 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_4 .swiper_control { width:100%; /*position: absolute; left: 50%; font-size: 0;z-index: 2;*/ } /* pagination */ #layout_slider_4 .swiper_control .swiper-pagination { display:inline-block; position: relative; width:revert; bottom:revert; } #layout_slider_4 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_4 .swiper_control .swiper-pagination-fraction {display: inline-block; vertical-align: middle;width: auto;} #layout_slider_4 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_4 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:125px; height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_4 .swiper_progress_wrap {display:none ;width:125px; height: 3px;position: absolute;left: 25px;top: 50%;margin-top: -1px;background: #767779;overflow: hidden;} #layout_slider_4 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_4 .swiper_play_state {display: none; vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_4 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_4 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_4 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_4 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1630px){ #layout_slider_4 .slider__mxw { margin:0 30px; } #layout_slider_4 .main_visual_state { margin:0 30px; } } @media screen and (max-width: 1200px){ #layout_slider_4 .slider__mxw { margin:0 15px; } #layout_slider_4 .main_visual_state { margin:0 15px; } #layout_slider_4 .slider__slogun > b { font-size:3.75rem; } #layout_slider_4 .slider__slogun > b.subtitle { font-size:2.813rem; } #layout_slider_4 .slider__slogun > p { font-size:1.25rem;} } @media screen and (max-width: 1024px){ #layout_slider_4 .slider__mxw { margin:0 0px; } #layout_slider_4 .slider__slogun {padding:0 15px;} #layout_slider_4 .swiper-pagination-wrap { margin:0 15px; } #layout_slider_4 .slider-scroll-type2 { display:none; } #layout_slider_4 .slider__slogun > b { font-size:3.5rem; } #layout_slider_4 .slider__slogun > b.subtitle { font-size:2.25rem; } #layout_slider_4 .slider__slogun > p { font-size:1.125rem; margin-top:1rem;} #layout_slider_4 .slider__slogun_wrap { margin-top:1.563rem; } } @media screen and (max-width: 768px){ #layout_slider_4 .slider__slogun > b { font-size:2.5rem; } #layout_slider_4 .slider__slogun > b.subtitle { font-size:1.5rem; } #layout_slider_4 .slider__slogun > p { font-size:1rem; margin-top:1rem;} #layout_slider_4 .slider__slogun_wrap { margin-top:1.25rem; } #layout_slider_4 .slider__slogun_btn span { font-size:1rem; padding-left:1.25rem;} #layout_slider_4 .slider__slogun_btn span:before { top:2px; } } @media screen and (max-width: 640px){ #layout_slider_4 .slider__infos {height:640px;} #layout_slider_4 .slider__mxw {height:100%;} #layout_slider_4 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_4 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} #layout_slider_4 .swiper_control_wrap { bottom:10%; } } @media screen and (max-width: 480px){ #layout_slider_4 .slider__infos {height:480px;} } @media screen and (max-width: 360px){ #layout_slider_4 .slider__slogun > b { font-size:2.25rem; } #layout_slider_4 .slider__slogun > b.subtitle { font-size:1.25rem; line-height:1.3; } #layout_slider_4 .slider__slogun > p { font-size:1rem; margin-top:1rem;} #layout_slider_4 .slider__slogun > p br { display:none; } } /*---------------------------------------------------------------------- @ Layout Slider 5 ----------------------------------------------------------------------*/ #layout_slider_5 {position:relative;padding:0 !important;background:#000; } #layout_slider_5 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_5 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_5 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_5 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_5 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%); background-size:cover;z-index:-1;} #layout_slider_5 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_5 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1170px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ /*#layout_slider_5 .slider__mxw { display:flex; justify-content:center;align-items:flex-start; overflow:hidden; } */ #layout_slider_5 .slider__slogun {display:flex;height:100%;justify-content:center;align-items:flex-start;flex-direction:column; top:4rem;position:relative; text-align:left;font-weight:900; color:#fff; } #layout_slider_5 .slider__slogun > b {position:relative;display:block;font-weight:800;font-size:5rem;line-height:1.2;color:#16222b; overflow:hidden; margin-bottom:0.625rem; word-break:keep-all; } #layout_slider_5 .slider__slogun > b.subtitle {display:block;font-weight:600;font-size:1.375rem;line-height:1.2;color:#16222b; overflow:hidden; margin-bottom:0rem; word-break:keep-all;} #layout_slider_5 .slider__slogun > b > span, #layout_slider_5 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_5 .slider__slogun > p {position:relative; font-weight:300;font-size:1.375rem;line-height:1.47;color:#16222b;overflow:hidden; margin-top:0.938rem; word-break:keep-all;} #layout_slider_5 .slider__slogun > p b { font-weight:700; } #layout_slider_5 .slider__slogun_btn {position:relative;display:block;padding:7px 50px 7px 50px; border:1px solid #16222b;font-size:1rem;color:#16222b;font-weight:400;text-align:center;box-sizing:border-box;transition:all 0.3s ease-out; margin-top:2.5rem;opacity:0;} #layout_slider_5 .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;transition:all 0.3s ease-out } #layout_slider_5 .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} #layout_slider_5 .slider__slogun_btn > span:after { content:''; font-weight:400; } #layout_slider_5 .slider__slogun_btn:hover {color:#fff;border-color:#16222b;} #layout_slider_5 .slider__slogun_btn:hover:before {background-color:#16222b;opacity:1;} #layout_slider_5 .slider__slogun_btn > i { position:absolute; right:12px; top:8px; display:inline-block; font-size:18px; } /*스크롤*/ #layout_slider_5 .slider-scroll-type3 { position:absolute; left:0;right:0; width:5rem; bottom:50px; margin:0 auto;z-index:9; cursor:pointer; } #layout_slider_5 .slider-scroll-type3:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-50px; width:1px; height:50px; background:rgba(255,255,255,0.3); } #layout_slider_5 .circle_progress.fixed { /* position: fixed; bottom: 2.5rem; right:2.5rem; z-index:999; */ } #layout_slider_5 .circle_wrap { position:relative; } #layout_slider_5 .circle_text { position:absolute; top:50%;left:50%;transform:translate(-50%, -50%); font-size:0.835rem; color:#fff; letter-spacing:0;opacity:0.5; animation: opacity 2s linear infinite; } #layout_slider_5 .circle_fix { position:absolute; top:0px; height:calc(5rem); width: calc(5rem); border:1px solid rgba(255,255,255,0.3); border-radius:50%; } #layout_slider_5 .circle { position:relative; height: 5rem; width: 5rem; border: 1px solid #2ca6e0; border-radius: 50%; border-top:none; border-left: ; border-bottom:none; border-right:none; animation: rotation 2s linear infinite; } #layout_slider_5 .circle:after { content:''; position:absolute; width:6px; height:6px; top:-2px;left:50%; background:#2ca6e0; border-radius:50%; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes opacity { 0% { opacity:0.5; } 50% { opacity:1; } 100% {opacity:0.5;} } /*좌우 부가 설정*/ #layout_slider_5 .swiper-button-prev:after, #layout_slider_5 .swiper-button-next:after {font-size:2rem;color:#fff;} #layout_slider_5 .page_number { display:none; color:#fff; font-size:13px; font-weight:400; margin-right:10px; transition:all 0.4s ease; } #layout_slider_5 .page_total { display:none; color:#fff; font-size:13px; font-weight:400; } #layout_slider_5 .swiper-pagination-bullet { display:inline-block; width:30px; height:6px; border-radius:15px; background:#fff; margin-right:5px; opacity:0.7; vertical-align:middle; transition:all 0.4s ease; } #layout_slider_5 .swiper-pagination-bullet-active { width:50px; height:6px; background:#2e3b46; opacity:1; } /*액션*/ #layout_slider_5 .slider__thumb .slider__thumb_bg {transition: all 15s ease-out; transform: scale(1,1);} #layout_slider_5 .slider__slogun {position:relative;top:0; transition: all .8s ease-out;} #layout_slider_5 .swiper-slide-active .slider__thumb .slider__thumb_bg {transform: scale(1.25);} /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_5 .swiper_navigation { display:none; } #layout_slider_5 .swiper_control_wrap { position:absolute; left:50%;transform:translateX(-50%); bottom:25%; z-index:12; max-width:1170px; width:100%; height:auto; margin:0 auto; } #layout_slider_5 .main_visual_state { display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} /*.main_visual_wrap .main_visual_state {display: block;max-width: 1520px;margin: 0 auto;position: absolute;left: 112px;right: 112px;top: calc(50% - 183px); -webkit-transition: all 300ms;transition: all 300ms;width: 100%; z-index:100;}*/ #layout_slider_5 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_5 .swiper_control { width:100%; /*position: absolute; left: 50%; font-size: 0;z-index: 2;*/ } /* pagination */ #layout_slider_5 .swiper_control .swiper-pagination { display:inline-block; position: relative; width:revert; bottom:revert; } #layout_slider_5 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_5 .swiper_control .swiper-pagination-fraction {display: inline-block; vertical-align: middle;width: auto;} #layout_slider_5 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_5 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:125px; height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_5 .swiper_progress_wrap {display:none ;width:125px; height: 3px;position: absolute;left: 25px;top: 50%;margin-top: -1px;background: #767779;overflow: hidden;} #layout_slider_5 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_5 .swiper_play_state {display: none; vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_5 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_5 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_5 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_5 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1200px){ #layout_slider_5 .slider__mxw { margin:0 15px; } #layout_slider_5 .main_visual_state { margin:0 15px; } #layout_slider_5 .slider__slogun > b { font-size:4rem; } #layout_slider_5 .slider__slogun > b.subtitle { font-size:1.375rem; } #layout_slider_5 .slider__slogun > p { font-size:1.375rem; } } @media screen and (max-width: 1024px){ #layout_slider_5 .slider__mxw { margin:0 0px; } #layout_slider_5 .slider__slogun {padding:0 15px;} #layout_slider_5 .swiper-pagination-wrap { margin:0 15px; } #layout_slider_5 .slider-scroll-type3 { display:none; } #layout_slider_5 .slider__slogun > b { font-size:3rem; } #layout_slider_5 .slider__slogun > b.subtitle { font-size:1.25rem; } #layout_slider_5 .slider__slogun > p { font-size:1.125rem; } } @media screen and (max-width: 768px){ #layout_slider_5 .slider__slogun > b { font-size:2rem; } #layout_slider_5 .slider__slogun > b.subtitle { font-size:1.25rem; margin-bottom:0.313rem; line-height:1.3; } #layout_slider_5 .slider__slogun > p { font-size:1.083rem;} #layout_slider_5 .swiper-pagination-wrap { bottom:15%; } } @media screen and (max-width: 640px){ #layout_slider_5 .slider__infos {height:640px;} #layout_slider_5 .slider__mxw {height:100%;} #layout_slider_5 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_5 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} #layout_slider_5 .swiper-pagination-wrap { bottom:10%; } } @media screen and (max-width: 360px){ #layout_slider_5 .slider__slogun > p br { display:none; } } /*---------------------------------------------------------------------- @ Layout Slider 6 ----------------------------------------------------------------------*/ #layout_slider_6 {position:relative;padding:0 !important;background:#000; } #layout_slider_6 .slider__infos {overflow:hidden;height:100vmin;} /*배경*/ #layout_slider_6 .slider__thumb {position:relative;width:100%;height:100%; } #layout_slider_6 .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;} #layout_slider_6 .slider__thumb .slider__thumb_mo {display:none;} #layout_slider_6 .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%); background-size:cover;z-index:-1;} #layout_slider_6 .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_slider_6 .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1400px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #layout_slider_6 .slider__slogun {display:flex;height:100%;justify-content:center;align-items:center;flex-direction:column; top:0;position:relative; text-align:center;font-weight:900; color:#fff; } #layout_slider_6 .slider__slogun > b {position:relative;display:block;font-weight:700;font-family:"Josefin Sans";font-size:2.188rem;line-height:1.2;color:#fff;overflow:hidden; margin-bottom:0.625rem; letter-spacing:0.15em; word-break:keep-all; } #layout_slider_6 .slider__slogun > b.subtitle {display:block;font-weight:400;font-size:2.688rem;line-height:1.2;color:#fff;overflow:hidden;margin-bottom:0rem; word-break:keep-all; } #layout_slider_6 .slider__slogun > b > span, #layout_slider_6 .slider__slogun > p > span { display:block; position:relative; opacity:0; } #layout_slider_6 .slider__slogun > p {position:relative; font-weight:400;font-size:1.125rem;line-height:1.47;color:#fff;overflow:hidden; opacity:1; word-break:keep-all;} #layout_slider_6 .slider__slogun_btn {position:relative;display:block;padding:7px 50px 7px 15px; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;transition:all 0.3s ease-out} #layout_slider_6 .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;transition:all 0.3s ease-out } #layout_slider_6 .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} #layout_slider_6 .slider__slogun_btn > span:after { content:'More Details View'; font-family:'Play'; font-weight:400; } #layout_slider_6 .slider__slogun_btn:hover {border-color:var(--menu);} #layout_slider_6 .slider__slogun_btn:hover:before {background-color:var(--menu);opacity:1;} #layout_slider_6 .slider__slogun_btn > i { position:absolute; right:12px; top:8px; display:inline-block; font-size:18px; } /*스크롤*/ #layout_slider_6 .slider-scroll { position:relative; } #layout_slider_6 .slider-scroll a {display:block;position:absolute;left:0;right:0; width:1.5rem; height:3.063rem; margin:0 auto;font-weight:500;font-size:0rem;color:#fff;animation:scrolltype6 2s linear infinite;cursor:pointer;text-align:center;letter-spacing:0.1em; ;z-index:9;text-indent:-999;} #layout_slider_6 .slider-scroll a:before {content:'';position:absolute; bottom:0; display:block;width:1.5rem; height:3.063rem;margin:0 auto;background-image:url(/images/common/visual_scroll_type6.png);background-repeat:no-repeat;background-position:center;background-size:cover;} @keyframes scrolltype6 {0%{bottom:3.125rem;}50%{bottom:4.375rem;}100%{bottom:3.125rem;}} /*좌우 부가 설정*/ #layout_slider_6 .swiper-button-prev:after, #layout_slider_6 .swiper-button-next:after {font-size:1.25rem;color:#fff;} #layout_slider_6 .swiper-button-prev { width:60px; height:60px; left:revert; top:revert;right:61px; background:rgba(0,0,0,0.1); bottom:0px; transition:all 0.3s } #layout_slider_6 .swiper-button-next { width:60px; height:60px; top:revert; right:0px; bottom:0px; background:rgba(0,0,0,0.1); transition:all 0.3s } #layout_slider_6 .swiper-button-prev:hover { background:rgba(255,255,255,0.5); } #layout_slider_6 .swiper-button-next:hover { background:rgba(255,255,255,0.5); } #layout_slider_6 .swiper-pagination-bullet {background-color:#e1e1e1; opacity:0.8; transition:all 0.3s ease; } #layout_slider_6 .swiper-pagination { } #layout_slider_6 .swiper-pagination-bullet {display:block;width:2px;height:45px;margin:0;border-radius:0px;background-color:#e1e1e1;opacity:0.8;} #layout_slider_6 .swiper-pagination-bullet-active {background-color:var(--menu); height:60px;opacity:1; } /*액션*/ #layout_slider_6 .slider__thumb .slider__thumb_bg {transition: all 15s ease-out; transform: scale(1,1);} #layout_slider_6 .slider__slogun {position:relative;top:0rem; transition: all .8s ease-out;} #layout_slider_6 .swiper-slide-active .slider__thumb .slider__thumb_bg {transform: scale(1.25);} /*---------------------------------------------------------------------- @ MAIN 슬라이드 컨트롤러 ----------------------------------------------------------------------*/ #layout_slider_6 .swiper_navigation { display:; } #layout_slider_6 .swiper_control_wrap { position:absolute; left:50%;transform:translateX(-50%); bottom:35%; z-index:12; max-width:1170px; width:100%; height:auto; margin:0 auto; } #layout_slider_6 .main_visual_state { display: block;position: absolute;left:50%;transform:translateX(-50%); top: 0%;-webkit-transition: all 300ms;transition: all 300ms;z-index:100;} #layout_slider_6 .swiper-pagination-fraction {color:#aaa;} /* controller */ #layout_slider_6 .swiper_control { position: absolute; left: 50%; font-size: 0;z-index: 2; } /* pagination */ #layout_slider_6 .swiper_control .swiper-pagination {position: static;} #layout_slider_6 .swiper_control .swiper-pagination-wrap {position: relative;} #layout_slider_6 .swiper_control .swiper-pagination-fraction {display: inline-block; vertical-align: middle;width: auto;} #layout_slider_6 .swiper_control .swiper-pagination-fraction > span {display: inline-block;vertical-align: middle;min-width: 20px;font-size: 14px;color:#fff; font-weight: 600;letter-spacing: 0.1em;text-align: center;line-height: 1;} /* progress */ #layout_slider_6 .swiper_progress_hidden_space {display: inline-block;vertical-align: middle;width:125px; height: 3px;margin: 0 2px 0 13px;position: relative;} #layout_slider_6 .swiper_progress_wrap {display:block ;width:125px; height: 3px;position: absolute;left: 25px;top: 50%;margin-top: -1px;background:rgba(255,255,255,0.5);overflow: hidden;} #layout_slider_6 .swiper_progress {display: block;width: 0;height: 100%;background: #fff;} /* state */ #layout_slider_6 .swiper_play_state {display: inline-block; vertical-align: middle;width: 26px;height: 26px;position: relative;top: 0px;left:5px;} #layout_slider_6 .swiper_play_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0;visibility: hidden;-webkit-transition: opacity 300ms;transition: opacity 300ms;} #layout_slider_6 .swiper_play_state .material-icons { color:#fff; font-size:20px; margin-top:4px; } #layout_slider_6 .swiper_play_state.play .swiper_state_pause {opacity: 1; visibility: visible;} #layout_slider_6 .swiper_play_state.pause .swiper_state_play {opacity: 1; visibility: visible;} /* Responsive */ @media screen and (max-width: 1024px){ #layout_slider_6 .slider__slogun {padding:0 15px;} #layout_slider_6 .slider-scroll { display:none; } #layout_slider_6 .swiper-button-prev { width:3.125rem; height:3.125rem; right:3.188rem; } #layout_slider_6 .swiper-button-next { width:3.125rem; height:3.125rem; } #layout_slider_6 .slider__slogun > b { font-size:2rem; } #layout_slider_6 .slider__slogun > p { margin-top:1.125rem; } } @media screen and (max-width: 640px){ #layout_slider_6 .slider__infos {/*height:640px;*/} #layout_slider_6 .slider__infos {height:640px;} #layout_slider_6 .slider__mxw {height:100%;} #layout_slider_6 .slider__thumb .slider__thumb_bg {display:none;} #layout_slider_6 .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} #layout_slider_6 .swiper_control_wrap { bottom:25%; } #layout_slider_6 .slider_new .main_visual_state { min-width:210px; } } @media screen and (max-width: 480px){ #layout_slider_6 .slider__infos {/*height:480px;*/} } @media screen and (max-width: 360px){ /* #layout_slider_6 .slider__slogun > b { font-size:2rem; letter-spacing:0.05em; } #layout_slider_6 .slider__slogun > p { margin-top:1.25rem; font-size:1rem; } */ } /*---------------------------------------------------------------------- @ Layout Contact 1 ----------------------------------------------------------------------*/ #layout_contact_1 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#16181e; } #layout_contact_1 .container { width:100%; max-width:1170px; margin:0 auto; padding:0 4.375rem } #layout_contact_1 .contact1_title_wrap { text-align:center; margin-bottom:3.75rem; } #layout_contact_1 .contact1_title { font-size:1.875rem; color:#fff; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_contact_1 .contact1_summ { position:relative; font-size:1rem; color:#999; font-weight:400; line-height:1.875; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all;} #layout_contact_1 .contact1_summ:after { content:''; position:absolute; top:0rem; left:50%; transform:translateX(-50%); width:10.625rem; height:2px; background:var(--main);; } #layout_contact_1 .form .form_row { margin-bottom:1.25rem; } #layout_contact_1 .form .form_text { margin-bottom:0.625rem !important; } #layout_contact_1 .form .form_row > label { display:none; } #layout_contact_1 .form .form_tag label { font-size:0.875rem; color:#999; } #layout_contact_1 .form input[type=text], #layout_contact_1 .form input[type=password] { font-size:0.875rem; color:#fff; border:1px solid #444957; background:transparent; } #layout_contact_1 .form textarea { font-size:0.875rem; color:#fff; height:12.5rem; border:1px solid #444957; background:transparent; } #layout_contact_1 .form ::-webkit-input-placeholder { color: #999; font-size:0.875rem; font-weight:300; } /* Chrome/Opera/Safari */ #layout_contact_1 .form input[type=text]:focus, #layout_contact_1 .form input[type=password]:focus, #layout_contact_1 .form select:focus, #layout_contact_1 .form textarea:focus {border-color:var(--main) !important; box-shadow: 0 0 0.2rem 0.25rem rgba(0, 0, 0, 0.03); } #layout_contact_1 .form .form_row input[type="checkbox"] + label span.check { border:1px solid #444957; } #layout_contact_1 .contact1_btn { position:relative; text-align:center; margin-top:2px; } #layout_contact_1 .contact1_btn a { display:; font-size:1rem; color:#fff; font-weight:600; letter-spacing:0; padding:1rem 3.125rem; background:var(--main); border-radius:3px; transition:all 0.3s ease; } #layout_contact_1 .contact1_btn a:hover { color:#333; } #layout_contact_1 .contact1_btn a:after { background:#fff; } #layout_contact_1 .contact1_btn .material-icons { font-size:20px; margin-right:5px; } /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_1 .container { margin:0 15px; padding:0; } } @media screen and (max-width:1024px){ #layout_contact_1 { padding-top:4rem; padding-bottom:4rem; } } @media screen and (max-width:768px){ #layout_contact_1 .row-md2 .thk-col { width: calc((100% / 1) - 1.875rem); } } /*---------------------------------------------------------------------- @ Layout Contact 2 ----------------------------------------------------------------------*/ #layout_contact_2 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#f4f4f4; } #layout_contact_2 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_contact_2 .thk-col:last-of-type { background:#fff; } #layout_contact_2 .contact2_cont { } #layout_contact_2 .contact2_title_wrap { text-align:left; margin-bottom:2.5rem; } #layout_contact_2 .contact2_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_contact_2 .contact2_summ { position:relative; font-size:1rem; color:#666; font-weight:300; line-height:1.5625; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all;} #layout_contact_2 .contact2_summ:after { content:''; position:absolute; top:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_contact_2 .form .form_row { margin-bottom:0.625rem; } #layout_contact_2 .form .form_text { margin-bottom:0.625rem !important; } #layout_contact_2 .form .form_row > label { display:none; } #layout_contact_2 .form .form_tag label { font-size:0.875rem; color:#666; font-weight:300; } #layout_contact_2 .form input[type=text], #layout_contact_2 .form input[type=password] { font-size:0.875rem; color:#fff; border:1px solid transparent; background:#fff; } #layout_contact_2 .form textarea { font-size:0.875rem; color:#fff; border:1px solid transparent; background:#fff; } #layout_contact_2 .form ::-webkit-input-placeholder { color: #666; font-size:0.875rem; font-weight:300; } /* Chrome/Opera/Safari */ #layout_contact_2 .form input[type=text]:focus, #layout_contact_2 .form input[type=password]:focus, #layout_contact_2 .form select:focus, #layout_contact_2 .form textarea:focus {border-color:var(--main) !important; box-shadow: 0 0 0.2rem 0.25rem rgba(0, 0, 0, 0.03); } #layout_contact_2 .form .form_row input[type="checkbox"] + label span.check { width:15px; height:15px; border:1px solid #dbdbdb; background:#fff; } #layout_contact_2 .contact2_btn { position:relative; text-align:center; margin-top:2px; } #layout_contact_2 .contact2_btn a { display:; font-size:1rem; color:#fff; font-weight:600; letter-spacing:0; padding:1rem 3.125rem; background:var(--main); border-radius:3px; transition:all 0.3s ease; } #layout_contact_2 .contact2_btn a:hover { color:#333; } #layout_contact_2 .contact2_btn a:after { background:#fff; } #layout_contact_2 .contact2_btn .material-icons { font-size:20px; margin-right:5px; } #layout_contact_2 .location_title { position:relative; font-size:14px; color:#fff; font-weight:400; background:#2a2d2e; padding:1.25rem 1.563rem; letter-spacing:0; } #layout_contact_2 .location_title .material-icons { position:absolute; top:1.15rem; right:1.563rem; } #layout_contact_2 .location_map_wrap { position:relative; padding:1.563rem; background:#fff; } #layout_contact_2 .location_map { position:relative;width:100%; height:100%; text-align:center; overflow:hidden; } #layout_contact_2 .location_map::after { display:none; content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99 } #layout_contact_2 .root_daum_roughmap .wrap_map {height:225px !important; border-bottom:1px solid #ddd; } #layout_contact_2 .root_daum_roughmap_landing {width:100% !important;padding:0 !important;} #layout_contact_2 .root_daum_roughmap .wrap_controllers {display:none;} #layout_contact_2 .root_daum_roughmap .wrap_btn_zoom {display:none;} #layout_contact_2 .location_more { font-size:1rem; color:#666; font-weight:400; line-height:1.56; margin-top:1.563rem; } #layout_contact_2 .location_more_link { display:flex; margin-top:1.563rem; } #layout_contact_2 .location_more_link a { position:relative; font-size:0.875rem; color:var(--main); margin-right:1rem; } #layout_contact_2 .location_more_link a:after { content:''; position:absolute; top:4px; margin:0 8px; width:1px; height:14px; background:#e7e7e7; } #layout_contact_2 .location_more_link a:last-of-type { margin-right:0; } #layout_contact_2 .location_more_link a:last-of-type:after { display:none; } #layout_contact_2 .location_more_link a span { position:relative; } #layout_contact_2 .location_more_link a span:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-3px; width:0; height:1px; background:var(--main); transition:all 0.3s ease; } #layout_contact_2 .location_more_link a:hover span:after { width:100%; } #layout_contact_2 .location_addr { margin-top:1.563rem; } #layout_contact_2 .location_addr .addr_row { font-size:1rem; color:#666; margin-bottom:1.25rem; } #layout_contact_2 .location_addr .addr_row:last-of-type { margin-bottom:0rem; } #layout_contact_2 .location_addr .addr_row b { display:block; color:#333; font-weight:500; margin-bottom:8px; } /* Hover */ /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_2 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_contact_2 { padding-top:4rem; padding-bottom:4rem; } } @media screen and (max-width:768px){ #layout_contact_2 .row-md2 .thk-col { width: calc((100% / 1) - 1.875rem); } #layout_contact_2 .row-md2 .thk-col:last-of-type { margin-top:1.563rem; } } /*---------------------------------------------------------------------- @ Layout Contact 3 ----------------------------------------------------------------------*/ #layout_contact_3 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; } #layout_contact_3 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_contact_3 .contact3_title_wrap { text-align:left; margin-bottom:2.5rem; } #layout_contact_3 .contact3_entitle { font-family:'Merriweather'; font-size:1.125rem; font-style:italic; color:#999; margin-bottom:5px; } #layout_contact_3 .contact3_title { font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_contact_3 .contact3_summ { position:relative; font-size:1rem; color:#999; font-weight:400; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all; } #layout_contact_3 .contact3_summ:after { content:''; position:absolute; top:0rem; width:10.625rem; height:2px; background:var(--main);; } #layout_contact_3 .form .form_row { margin-bottom:0.625rem; } #layout_contact_3 .form .form_text { margin-bottom:0.625rem !important; } #layout_contact_3 .form .form_row > label { display:none; } #layout_contact_3 .form .form_tag label { font-size:0.875rem; color:#999; } #layout_contact_3 .form input[type=text], #layout_contact_3 .form input[type=password] { font-size:0.875rem; color:#333; border:1px solid #ececec; background:transparent; } #layout_contact_3 .form textarea { font-size:0.875rem; color:#333; height:10rem; border:1px solid #ececec; background:transparent; } #layout_contact_3 .form ::-webkit-input-placeholder { color: #666; font-size:0.875rem; font-weight:300; } /* Chrome/Opera/Safari */ #layout_contact_3 .form input[type=text]:focus, #layout_contact_3 .form input[type=password]:focus, #layout_contact_3 .form select:focus, #layout_contact_3 .form textarea:focus {border-color:var(--main) !important; box-shadow: 0 0 0.2rem 0.25rem rgba(0, 0, 0, 0.03); } #layout_contact_3 .form .form_row input[type="checkbox"] + label span.check { border:1px solid #ececec; } #layout_contact_3 .contact3_btn { position:relative; text-align:center; margin-top:2px; } #layout_contact_3 .contact3_btn a { display:; font-size:1rem; color:#fff; font-weight:600; letter-spacing:0; padding:1rem 3.125rem; background:var(--main); border-radius:3px; transition:all 0.3s ease; } #layout_contact_3 .contact3_btn a:hover { color:#333; } #layout_contact_3 .contact3_btn a:after { background:#fff; } #layout_contact_3 .contact3_btn .material-icons { font-size:20px; margin-right:5px; } #layout_contact_3 .location_addr { } #layout_contact_3 .location_addr .addr_row { font-size:1rem; color:#666; font-weight:500; margin-bottom:2.5rem; } #layout_contact_3 .location_addr .addr_row:last-of-type { margin-bottom:0rem; } #layout_contact_3 .location_addr .addr_row b { display:block; color:#333; letter-spacing:0; margin-bottom:8px; } #layout_contact_3 .location_map_wrap { } #layout_contact_3 .location_map { position:relative;width:100%; text-align:center; overflow:hidden; } #layout_contact_3 .location_map iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #layout_contact_3 .root_daum_roughmap .wrap_map {height:220px !important;} #layout_contact_3 .root_daum_roughmap_landing {width:100% !important;padding:0 !important;} #layout_contact_3 .root_daum_roughmap .wrap_controllers {display:none;} #layout_contact_3 .location_more { font-size:0.938rem; color:#666; font-weight:400; line-height:1.56; margin-top:1.563rem; } #layout_contact_3 .location_more_title { font-size:1rem; color:#333; font-weight:700; letter-spacing:0; } #layout_contact_3 .location_more_text { margin-top:1.875rem; } #layout_contact_3 .location_more_link { display:flex; margin-top:1.563rem; } #layout_contact_3 .location_more_link a { position:relative; font-size:0.875rem; color:var(--main); margin-right:1rem; letter-spacing:0;} #layout_contact_3 .location_more_link a:after { content:''; position:absolute; top:4px; margin:0 8px; width:1px; height:14px; background:#e7e7e7; } #layout_contact_3 .location_more_link a:last-of-type { margin-right:0; } #layout_contact_3 .location_more_link a:last-of-type:after { display:none; } #layout_contact_3 .location_more_link a span { position:relative; } #layout_contact_3 .location_more_link a span:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-3px; width:0; height:1px; background:var(--main); transition:all 0.3s ease; } #layout_contact_3 .location_more_link a:hover span:after { width:100%; } /* Hover */ /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_3 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_contact_3 { padding-top:4rem; padding-bottom:4rem; } #layout_contact_3 .thk-col:nth-of-type(1) { width: calc(((100% / 12) * 12) - 1.875rem) !important; margin-bottom:1.875rem; } #layout_contact_3 .thk-col:nth-of-type(2) { width: calc(((100% / 12) * 6) - 1.875rem) !important; } #layout_contact_3 .thk-col:nth-of-type(3) { width: calc(((100% / 12) * 6) - 1.875rem) !important; } #layout_contact_3 .contact3_title_wrap { margin-bottom:0rem; } #layout_contact_3 .location_addr { display:flex; flex-wrap:wrap; margin-right:-1.875rem; } #layout_contact_3 .location_addr .addr_row { flex: 0 0 auto; margin-right:1.875rem; margin-bottom:0rem; } #layout_contact_3 .location_addr .addr_row:nth-of-type(1) { width:calc(50% - 1.875rem); } #layout_contact_3 .location_addr .addr_row:nth-of-type(2) { width:calc(25% - 1.875rem); } #layout_contact_3 .location_addr .addr_row:nth-of-type(3) { width:calc(25% - 1.875rem); } } @media screen and (max-width:640px){ #layout_contact_3 .thk-col:nth-of-type(1) { width: calc(((100% / 12) * 12) - 1.875rem) !important; margin-bottom:1.875rem; } #layout_contact_3 .thk-col:nth-of-type(2) { width: calc(((100% / 12) * 12) - 1.875rem) !important; margin-bottom:1.875rem; } #layout_contact_3 .thk-col:nth-of-type(3) { width: calc(((100% / 12) * 12) - 1.875rem) !important; } #layout_contact_3 .location_addr { flex-direction:column; } #layout_contact_3 .location_addr .addr_row:nth-of-type(1) { width:calc(100% - 1.875rem); margin-bottom:1.25rem; } #layout_contact_3 .location_addr .addr_row:nth-of-type(2) { width:calc(100% - 1.875rem); margin-bottom:1.25rem; } #layout_contact_3 .location_addr .addr_row:nth-of-type(3) { width:calc(100% - 1.875rem); } } /*---------------------------------------------------------------------- @ Layout Contact 4 ----------------------------------------------------------------------*/ #layout_contact_4 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#16181e; } #layout_contact_4 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_contact_4 .contact4_title_wrap { text-align:left; margin-bottom:3.75rem; } #layout_contact_4 .contact4_title { font-size:1.875rem; color:#fff; font-weight:700; line-height:1.2; letter-spacing:0rem; } #layout_contact_4 .contact4_summ { position:relative; font-size:1rem; color:#999; font-weight:400; line-height:1.875; padding-top:1.563rem; margin-top:1.563rem; word-break:keep-all; } #layout_contact_4 .contact4_summ:after { content:''; position:absolute; top:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_contact_4 .location_addr {margin-top:3.125rem;} #layout_contact_4 .location_addr .addr_row { font-size:1rem; color:#fff; font-weight:500; margin-bottom:2.5rem; } #layout_contact_4 .location_addr .addr_row:last-of-type { margin-bottom:0rem; } #layout_contact_4 .location_addr .addr_row b { display:block; color:#fff; letter-spacing:0; margin-bottom:8px; } #layout_contact_4 .form .form_row { margin-bottom:1.25rem; } #layout_contact_4 .form .form_text { margin-bottom:0.625rem !important; } #layout_contact_4 .form .form_row > label { display:none; } #layout_contact_4 .form .form_tag label { font-size:0.875rem; color:#999; } #layout_contact_4 .form input[type=text], #layout_contact_4 .form input[type=password] { font-size:0.875rem; color:#fff; border:1px solid #444957; background:transparent; } #layout_contact_4 .form textarea { font-size:0.875rem; color:#fff; height:12.5rem; border:1px solid #444957; background:transparent; } #layout_contact_4 .form ::-webkit-input-placeholder { color: #999; font-size:0.875rem; font-weight:300; } /* Chrome/Opera/Safari */ #layout_contact_4 .form input[type=text]:focus, #layout_contact_4 .form input[type=password]:focus, #layout_contact_4 .form select:focus, #layout_contact_4 .form textarea:focus {border-color:var(--main) !important; box-shadow: 0 0 0.2rem 0.25rem rgba(0, 0, 0, 0.03); } #layout_contact_4 .form .form_row input[type="checkbox"] + label span.check { border:1px solid #444957; } #layout_contact_4 .contact4_btn { position:relative; text-align:center; margin-top:2px; } #layout_contact_4 .contact4_btn a { display:; font-size:1rem; color:#fff; font-weight:600; letter-spacing:0; padding:1rem 3.125rem; background:var(--main); border-radius:3px; transition:all 0.3s ease; } #layout_contact_4 .contact4_btn a:hover { color:#333; } #layout_contact_4 .contact4_btn a:after { background:#fff; } #layout_contact_4 .contact4_btn .material-icons { font-size:20px; margin-right:5px; } /* Hover */ /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_4 { padding-top:5rem; padding-bottom:5rem; } #layout_contact_4 .container { margin:0 15px; } } @media screen and (max-width:1024px){ #layout_contact_4 { padding-top:4rem; padding-bottom:4rem; } } @media screen and (max-width:768px){ #layout_contact_4 .row-md2 .thk-col { width: calc((100% / 1) - 1.875rem); } #layout_contact_4 .row-md2 .thk-col:last-of-type { margin-top:1.563rem; } } /*---------------------------------------------------------------------- @ Layout Contact 5 ----------------------------------------------------------------------*/ #layout_contact_5 { position:relative; display:flex; align-items:center; justify-content:center; padding-top:7.5rem; padding-bottom:7.5rem; background:#f4f4f4; } #layout_contact_5 .container { width:100%; max-width:1170px; margin:0 auto; } #layout_contact_5 .contact5_cont { } #layout_contact_5 .thk-col:last-of-type .contact5_cont { padding-left:4.375rem; } #layout_contact_5 .contact5_title_wrap { text-align:left; margin-bottom:1.563rem; } #layout_contact_5 .contact5_title { position:relative; font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem;padding-bottom:0.625rem; margin-bottom:0.625rem; } #layout_contact_5 .contact5_title:after { content:''; position:absolute; bottom:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_contact_5 .contact5_btn { position:relative; text-align:center; margin-top:2.5rem; } #layout_contact_5 .contact5_btn a { display:; max-width:15.625rem; font-size:0.875rem; color:#fff; font-weight:600; letter-spacing:0; padding:0.825rem 3.125rem; background:var(--main); border-radius:2px; transition:all 0.3s ease; } #layout_contact_5 .contact5_btn a:hover { color:#333; } #layout_contact_5 .contact5_btn a:after { background:#fff; } #layout_contact_5 .contact5_btn .material-icons { font-size:20px; margin-right:5px; } #layout_contact_5 .location_map_wrap { position:relative; } #layout_contact_5 .location_map_wrap::before { position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; z-index:99 } #layout_contact_5 .location_map { position:relative; width:100%; text-align:center; } #layout_contact_5 .root_daum_roughmap .wrap_map {height:420px !important; border-bottom:1px solid #ddd; } #layout_contact_5 .root_daum_roughmap_landing {width:100% !important;padding:0 !important;} #layout_contact_5 .root_daum_roughmap .wrap_controllers {display:none;} #layout_contact_5 .root_daum_roughmap .wrap_btn_zoom {display:none;} #layout_contact_5 .location_more_wrap { position:relative; } #layout_contact_5 .location_more { font-size:1rem; color:#666; font-weight:400; line-height:1.56; } #layout_contact_5 .location_more_text { font-size:1.125rem; color:#111; font-weight:600; } #layout_contact_5 .location_more_link { display:flex; margin-top:0.3125rem; } #layout_contact_5 .location_more_link a { position:relative; font-size:0.875rem; color:var(--main); margin-right:1.25rem; letter-spacing:0; } #layout_contact_5 .location_more_link a:after { content:''; position:absolute; top:4px; margin:0 10px; width:1px; height:14px; background:#e7e7e7; } #layout_contact_5 .location_more_link a:last-of-type { margin-right:0; } #layout_contact_5 .location_more_link a:last-of-type:after { display:none; } #layout_contact_5 .location_more_link a span { position:relative; } #layout_contact_5 .location_more_link a span:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-3px; width:0; height:1px; background:var(--main); transition:all 0.3s ease; } #layout_contact_5 .location_more_link a:hover span:after { width:100%; } #layout_contact_5 .location_addr { margin-top:1.563rem; } #layout_contact_5 .location_addr .addr_row { font-size:1rem; color:#666; margin-bottom:1.25rem; } #layout_contact_5 .location_addr .addr_row:last-of-type { margin-bottom:0rem; } #layout_contact_5 .location_addr .addr_row b { display:block; color:#333; font-weight:500; margin-bottom:8px; } /* Hover */ /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_5 .container { margin:0 15px; } #layout_contact_5 .thk-col:last-of-type .contact5_cont { padding-left:0; } } @media screen and (max-width:1024px){ #layout_contact_5 { padding-top:4rem; padding-bottom:4rem; } } @media screen and (max-width:768px){ #layout_contact_5 .row-md2 .thk-col { width: calc((100% / 1) - 1.875rem); } #layout_contact_5 .row-md2 .thk-col:last-of-type { margin-top:1.563rem; } #layout_contact_5 .contact5_btn a { max-width:revert; } } /*---------------------------------------------------------------------- @ Layout Contact 6 ----------------------------------------------------------------------*/ #layout_contact_6 { position:relative; display:flex; align-items:center; justify-content:center; min-height:40rem } #layout_contact_6 .container { position:relative; width:100%; margin:0 auto; } #layout_contact_6 .contact6_inner { position:absolute; left:calc(50% - 585px); top:50%; transform:translateY(-50%); z-index:99; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } #layout_contact_6 .contact6_cont { width:25rem; max-width:25rem; background:#fff; padding:1.875rem 3.75rem; } #layout_contact_6 .contact6_title_wrap { text-align:left; margin-bottom:1.563rem; } #layout_contact_6 .contact6_title { position:relative; font-size:1.875rem; color:#222; font-weight:700; line-height:1.2; letter-spacing:0rem;padding-bottom:0.625rem; margin-bottom:0.625rem; } #layout_contact_6 .contact6_title:after { content:''; position:absolute; bottom:0rem; left:0; width:10.625rem; height:2px; background:var(--main);; } #layout_contact_6 .contact6_btn { position:relative; text-align:center; margin-top:2.5rem; } #layout_contact_6 .contact6_btn a { display:; max-width:15.625rem; font-size:0.875rem; color:#fff; font-weight:600; letter-spacing:0; padding:0.825rem 3.125rem; background:var(--main); border-radius:2px; transition:all 0.3s ease; } #layout_contact_6 .contact6_btn a:hover { color:#333; } #layout_contact_6 .contact6_btn a:after { background:#fff; } #layout_contact_6 .contact6_btn .material-icons { font-size:20px; margin-right:5px; } #layout_contact_6 .location_map_wrap { position:relative; width:100%; } #layout_contact_6 .location_map_wrap:after { content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10; } #layout_contact_6 .location_map { position:relative; width:100%; height:100%; text-align:center; } #layout_contact_6 .root_daum_roughmap .wrap_map {height:40rem !important; border-bottom:1px solid #ddd; } #layout_contact_6 .root_daum_roughmap_landing {width:100% !important;padding:0 !important;} #layout_contact_6 .root_daum_roughmap .wrap_controllers {display:none;} #layout_contact_6 .root_daum_roughmap .wrap_btn_zoom {display:none;} #layout_contact_6 .location_more_wrap { position:relative; } #layout_contact_6 .location_more { font-size:1rem; color:#666; font-weight:400; line-height:1.56; } #layout_contact_6 .location_more_text { font-size:1.125rem; color:#111; font-weight:600; } #layout_contact_6 .location_more_link { display:flex; margin-top:0.3125rem; } #layout_contact_6 .location_more_link a { position:relative; font-size:0.875rem; color:var(--main); margin-right:1.25rem; letter-spacing:0; } #layout_contact_6 .location_more_link a:after { content:''; position:absolute; top:4px; margin:0 10px; width:1px; height:14px; background:#e7e7e7; } #layout_contact_6 .location_more_link a:last-of-type { margin-right:0; } #layout_contact_6 .location_more_link a:last-of-type:after { display:none; } #layout_contact_6 .location_more_link a span { position:relative; } #layout_contact_6 .location_more_link a span:after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-3px; width:0; height:1px; background:var(--main); transition:all 0.3s ease; } #layout_contact_6 .location_more_link a:hover span:after { width:100%; } #layout_contact_6 .location_addr { margin-top:1.563rem; } #layout_contact_6 .location_addr .addr_row { font-size:1rem; color:#666; margin-bottom:1.25rem; } #layout_contact_6 .location_addr .addr_row:last-of-type { margin-bottom:0rem; } #layout_contact_6 .location_addr .addr_row b { display:block; color:#333; font-weight:500; margin-bottom:8px; } /* Hover */ /* Responsive */ @media screen and (max-width:1200px){ #layout_contact_6 .container { margin:0 auto; } #layout_contact_6 .contact6_inner { left:15px; } } @media screen and (max-width:1024px){ #layout_contact_6 { } #layout_contact_6 .contact6_cont { padding:1.875rem 1.875rem; } } @media screen and (max-width:640px){ #layout_contact_6 { min-height:revert } #layout_contact_6 .contact6_inner { position:relative; top:revert; transform:revert; box-shadow:revert; } #layout_contact_6 .contact6_cont { width:100%; max-width:revert; padding:1.875rem 0; } }