/* 메인 슬라이드 */ .main-carousel {display: block; height: 900px; padding: 0;} .main-carousel .jarallax {min-height: 900px;} .main-carousel .li {position: relative; height: 900px;} .main-carousel .li.img01 {background: url(../images/slide01.jpg) no-repeat center;} .main-carousel .li.img02 {background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../images/slide02.jpg) no-repeat center; background-size: cover;} .main-carousel .li .copy_area_wrap {max-width: 1400px; margin: 0 auto;} .main-carousel .li .copy_area {position: absolute; width: 100%; max-width: 1400px; margin: 0 auto; top: 50%; transform: translateY(-50%); color: #fff; z-index: 2;} .main-carousel .li .copy_area h2 {margin-bottom: 80px; font-family: 'MangoDdobak'; font-size: 58px; font-weight: 700; letter-spacing: -3px; word-break: keep-all;} .main-carousel .li .copy_area h2 span {position: relative; display: inline-block; margin-left: 40px; filter: brightness(100);} .main-carousel .li .copy_area h2 span:after {position: absolute; display: block; content: ""; width: 94px; height: 94px; top: -60px; right: -60px; background: url(../images/footprint.png) no-repeat center;} .main-carousel .li .copy_area h2 span img {position: relative; bottom: -8px;} .main-carousel .li .copy_area p {font-size: 24px; font-weight: 300; line-height: 34px; letter-spacing: -1px; word-break: keep-all; background: linear-gradient();} @media screen and (max-width: 1400px) { .main-carousel .li .copy_area {padding: 0 15px;} } @media screen and (max-width: 1200px) { .main-carousel .li.img01 {background: url(../images/m_slide01.jpg) no-repeat center; background-size: cover;} .main-carousel .li .copy_area {text-align: center;} .main-carousel .li .copy_area h2 span {margin-left: 20px;} } @media screen and (max-width: 960px) { .main-carousel .li .copy_area h2 span img {width: 120px; bottom: -2px;} .main-carousel .li .copy_area h2 span:after {width: 50px; height: 50px; top: -34px; right: -34px; background-size: cover;} } @media screen and (max-width: 640px) { .main-carousel {height: 520px;} .main-carousel .jarallax {min-height: 520px;} .main-carousel .li {height: 520px;} .main-carousel .li .copy_area h2 {margin-bottom: 40px; font-size: 36px; letter-spacing: 1.5px;} .main-carousel .li .copy_area h2 span {display: block; width: 90px; margin: 20px auto 0;} .main-carousel .li .copy_area h2 span:after {width: 30px; height: 30px; top: -14px; right: -20px; background-size: cover;} .main-carousel .li .copy_area h2 span img {width: 90px;} .main-carousel .li .copy_area p {font-size: 18px; line-height: 26px; letter-spacing: -0.5px;} } /* 메인 슬라이드 */ /* 메인 페이지 공통 */ .con:not(#con3) {padding: 180px 0;} .con .con_wrap {display: flex; justify-content: space-between; width: 100%; max-width: 1400px; margin: 0 auto;} .con .txtBox {width: 50%; padding-right: 20px;} .con .txtBox h2 {margin-bottom: 90px; font-family: 'MangoDdobak'; font-size: 60px; font-weight: 700; color: #8f2b8c; letter-spacing: -3px; word-break: keep-all;} .con .txtBox > p {margin-bottom: 50px; font-size: 24px; font-weight: 300; color: #333; line-height: 50px; letter-spacing: -1px; word-break: keep-all;} .con .txtBox > a {position: relative; display: block; width: 200px; height: 50px; border: 1px solid #8f2b8c; border-radius: 25px; font-size: 22px; font-weight: 300; color: #8f2b8c; text-align: center; line-height: 48px; letter-spacing: -1px; overflow: hidden; white-space: nowrap; transition: 0.3s;} .con .txtBox > a:after {position: absolute; display: block; content: ""; width: 0; height: 52px; top: -1px; left: -1px; border-radius: 25px; background: #8f2b8c; transition: 0.3s; z-index: -1;} .con .txtBox > a:hover {color: #fff;} .con .txtBox > a:hover:after {width: calc(100% + 2px);} .con .txtBox > a span {display: inline-block; margin-left: 6px;} .con .txtBox > a span img {margin-top: -6px; filter: brightness(); transition: 0.3s;} .con .txtBox > a:hover span img {filter: brightness(100);} @media screen and (max-width: 1400px) { .con .con_wrap {padding: 0 15px;} } @media screen and (max-width: 960px) { .con .con_wrap {display: block;} .con .txtBox {width: 100%; margin-bottom: 50px; padding: 0;} .con .imgBox {width: 100%;} } @media screen and (max-width: 640px) { .con:not(#con3) {padding: 80px 0;} .con .txtBox h2 {margin-bottom: 28px; font-size: 44px;} .con .txtBox > p {margin-bottom: 30px; font-size: 20px; line-height: 30px; letter-spacing: -0.5px;} .con .txtBox > a {width: 150px; height: 40px; font-size: 18px; line-height: 38px; letter-spacing: -0.5px;} .con .txtBox > a:after {height: 42px;} .con .txtBox > a span {margin-left: 2px;} .con .txtBox > a span img {width: 16px; margin-top: -4px;} } /* 메인 페이지 공통 */ /* con1 */ #con1 {overflow: hidden;} #con1 .imgBox {position: relative; width: 580px;} #con1 .imgBox:after {position: absolute; display: block; content: ""; width: 100%; height: 100%; top: -20px; right: -20px; background: #8f2b8c; clip-path: path("M376.64,109.88c18.9-35.49,57.59-51.82,86.43-36.47c28.84,15.35,36.9,56.57,18.01,92.07c-18.9,35.5-57.59,51.82-86.43,36.47 C365.81,186.6,357.75,145.38,376.64,109.88z M252.32,148.76c31.9,7.08,64.82-19,73.53-58.26c8.71-39.25-10.08-76.82-41.97-83.9 c-31.9-7.08-64.82,19-73.53,58.26C201.63,104.12,220.42,141.68,252.32,148.76z M98.73,197.05c28.9-0.95,51.39-30.56,50.22-66.14 c-1.17-35.58-25.54-63.65-54.45-62.7c-28.9,0.95-51.39,30.56-50.22,66.14C45.45,169.93,69.83,198,98.73,197.05z M565.81,271.49 c-17.17-23.27-54.3-25.01-82.94-3.88s-37.95,57.12-20.78,80.39s54.3,25.01,82.94,3.88C573.67,330.76,582.97,294.76,565.81,271.49z M384.46,258.24c-11.15-13.55-44.6-53.06-101.66-66.6c-74.29-17.63-136.45,21.15-159.71,35.66c-21.25,13.26-38.89,31.76-74.19,68.76 c-20.49,21.49-35.08,39.17-40.86,64.5c-3.78,16.53-2.22,29.4-1.68,33.24c2.95,20.9,12.77,35.03,18.13,42.55 c4.92,6.9,27.96,37.56,66.8,45.65c0,0,12.61,2.4,57.31,2.13c3.08-0.02,6.14-0.25,9.19-0.67c10.46-1.45,29.58-6.77,43.73-0.31 c24.65,11.24,22.08,36.03,53.72,62.56c28.95,24.28,62.28,27.41,71.34,28.14c11.21,0.9,29.52,2.38,49.99-6.39 c34.32-14.71,48.28-46.88,52.14-55.78c9.58-22.07,10.88-43.9,6.44-82.11C425.44,345.96,420.31,301.8,384.46,258.24z"); z-index: -1;} #con1 .imgBox img {clip-path: path("M376.64,109.88c18.9-35.49,57.59-51.82,86.43-36.47c28.84,15.35,36.9,56.57,18.01,92.07c-18.9,35.5-57.59,51.82-86.43,36.47 C365.81,186.6,357.75,145.38,376.64,109.88z M252.32,148.76c31.9,7.08,64.82-19,73.53-58.26c8.71-39.25-10.08-76.82-41.97-83.9 c-31.9-7.08-64.82,19-73.53,58.26C201.63,104.12,220.42,141.68,252.32,148.76z M98.73,197.05c28.9-0.95,51.39-30.56,50.22-66.14 c-1.17-35.58-25.54-63.65-54.45-62.7c-28.9,0.95-51.39,30.56-50.22,66.14C45.45,169.93,69.83,198,98.73,197.05z M565.81,271.49 c-17.17-23.27-54.3-25.01-82.94-3.88s-37.95,57.12-20.78,80.39s54.3,25.01,82.94,3.88C573.67,330.76,582.97,294.76,565.81,271.49z M384.46,258.24c-11.15-13.55-44.6-53.06-101.66-66.6c-74.29-17.63-136.45,21.15-159.71,35.66c-21.25,13.26-38.89,31.76-74.19,68.76 c-20.49,21.49-35.08,39.17-40.86,64.5c-3.78,16.53-2.22,29.4-1.68,33.24c2.95,20.9,12.77,35.03,18.13,42.55 c4.92,6.9,27.96,37.56,66.8,45.65c0,0,12.61,2.4,57.31,2.13c3.08-0.02,6.14-0.25,9.19-0.67c10.46-1.45,29.58-6.77,43.73-0.31 c24.65,11.24,22.08,36.03,53.72,62.56c28.95,24.28,62.28,27.41,71.34,28.14c11.21,0.9,29.52,2.38,49.99-6.39 c34.32-14.71,48.28-46.88,52.14-55.78c9.58-22.07,10.88-43.9,6.44-82.11C425.44,345.96,420.31,301.8,384.46,258.24z");} @media screen and (max-width: 960px) { .imgBox {margin: 0 auto;} } @media screen and (max-width: 640px) { #con1 .imgBox {width: 320px;} #con1 .imgBox:after {top: -10px; right: -10px; clip-path: path("M207.16,61.96c10.29-19.32,31.35-28.21,47.05-19.85s20.09,30.79,9.8,50.11c-10.29,19.32-31.35,28.21-47.05,19.85 S196.88,81.28,207.16,61.96z M116.64,37.46c4.74-21.37,22.66-35.56,40.02-31.71s27.59,24.3,22.85,45.67s-22.66,35.56-40.02,31.71 C122.13,79.27,111.9,58.83,116.64,37.46z M53.59,39.28c15.73-0.52,29,14.76,29.64,34.13c0.64,19.36-11.6,35.48-27.34,36 s-29-14.76-29.64-34.13S37.86,39.8,53.59,39.28z M264.98,147.82c15.59-11.5,35.8-10.56,45.15,2.11 c9.34,12.67,4.28,32.26-11.31,43.76s-35.8,10.56-45.15-2.11C244.32,178.91,249.39,159.32,264.98,147.82z M5.61,216.5 c-0.29-2.09-1.14-9.1,0.91-18.09C9.67,184.62,17.62,175,28.77,163.3c19.21-20.14,28.82-30.21,40.38-37.43 c12.66-7.9,46.49-29.01,86.93-19.41c31.06,7.37,49.27,28.88,55.33,36.25c19.51,23.71,22.31,47.75,27.59,93.26 c2.42,20.8,1.71,32.68-3.51,44.69c-2.1,4.84-9.7,22.35-28.38,30.36c-11.14,4.77-21.11,3.97-27.21,3.48 c-4.93-0.4-23.07-2.1-38.83-15.32c-17.22-14.44-15.82-27.93-29.24-34.05c-7.7-3.52-18.11-0.62-23.8,0.17 c-1.66,0.23-3.33,0.35-5,0.36c-24.33,0.15-31.19-1.16-31.19-1.16c-21.14-4.4-33.68-21.09-36.36-24.85 C12.56,235.57,7.22,227.88,5.61,216.5z");} #con1 .imgBox img {width: 100%; clip-path: path("M207.16,61.96c10.29-19.32,31.35-28.21,47.05-19.85s20.09,30.79,9.8,50.11c-10.29,19.32-31.35,28.21-47.05,19.85 S196.88,81.28,207.16,61.96z M116.64,37.46c4.74-21.37,22.66-35.56,40.02-31.71s27.59,24.3,22.85,45.67s-22.66,35.56-40.02,31.71 C122.13,79.27,111.9,58.83,116.64,37.46z M53.59,39.28c15.73-0.52,29,14.76,29.64,34.13c0.64,19.36-11.6,35.48-27.34,36 s-29-14.76-29.64-34.13S37.86,39.8,53.59,39.28z M264.98,147.82c15.59-11.5,35.8-10.56,45.15,2.11 c9.34,12.67,4.28,32.26-11.31,43.76s-35.8,10.56-45.15-2.11C244.32,178.91,249.39,159.32,264.98,147.82z M5.61,216.5 c-0.29-2.09-1.14-9.1,0.91-18.09C9.67,184.62,17.62,175,28.77,163.3c19.21-20.14,28.82-30.21,40.38-37.43 c12.66-7.9,46.49-29.01,86.93-19.41c31.06,7.37,49.27,28.88,55.33,36.25c19.51,23.71,22.31,47.75,27.59,93.26 c2.42,20.8,1.71,32.68-3.51,44.69c-2.1,4.84-9.7,22.35-28.38,30.36c-11.14,4.77-21.11,3.97-27.21,3.48 c-4.93-0.4-23.07-2.1-38.83-15.32c-17.22-14.44-15.82-27.93-29.24-34.05c-7.7-3.52-18.11-0.62-23.8,0.17 c-1.66,0.23-3.33,0.35-5,0.36c-24.33,0.15-31.19-1.16-31.19-1.16c-21.14-4.4-33.68-21.09-36.36-24.85 C12.56,235.57,7.22,227.88,5.61,216.5z");} } /* con1 */ /* con2 */ #con2 {background: url(../images/con2_bg.png) no-repeat center, linear-gradient(#f5f5f5, #f5f5f5); background-size: cover;} #con2 .txtBox {position: sticky; top: 180px; align-self: flex-start;} #con2 .imgBox {width: 50%;} #con2 .imgBox ul:after {clear: both; display: block; content: "";} #con2 .imgBox ul li {position: relative; width: 100%; max-width: 440px;} #con2 .imgBox ul li:nth-child(2n) {float: right;} #con2 .imgBox ul li:not(:last-child) {margin-bottom: 140px;} #con2 .imgBox ul li a {position: relative; display: block; border-radius: 50px; box-shadow: 12px 12px 26px rgba(0, 0, 0, 0.3); overflow: hidden; transition: 0.5s;} #con2 .imgBox ul li:hover a {transform: rotate3d(0, -20, 0, 180deg); box-shadow: -12px 12px 26px rgba(0, 0, 0, 0.3);} #con2 .imgBox ul li .imgBox2 {position: relative; z-index: 2; transition: 0.5s;} #con2 .imgBox ul li:hover .imgBox2 {z-index: 1;} #con2 .imgBox ul li .imgBox2 img {width: 100%;} #con2 .imgBox ul li .txtBox2 {position: absolute; width: 100%; bottom: 0; left: 0; padding: 30px 40px; background: rgba(255, 255, 255, 0.7);} #con2 .imgBox ul li .txtBox2 h3 {margin-bottom: 10px; font-family: 'MangoDdobak'; font-size: 36px; font-weight: 700; color: #8f2b8c; letter-spacing: -1.5px; word-break: keep-all;} #con2 .imgBox ul li .txtBox2 p {font-size: 20px; font-weight: 300; color: #555; letter-spacing: -0.5px; word-break: keep-all;} #con2 .imgBox ul li span {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; padding-top: 50%; border-radius: 50px; font-size: 24px; font-weight: 300; background: url(../images/con2_bg.png) no-repeat center, #8f2b8c; background-size: cover; color: #fff; text-align: center; letter-spacing: -1px; word-break: keep-all; transform: rotate3d(0, 20, 0, 180deg); z-index: 1; transition: 0.5s;} #con2 .imgBox ul li:hover span {z-index: 2;} #con2 .imgBox ul li span b {display: block; margin-bottom: 10px; font-family: 'MangoDdobak'; font-size: 36px; font-weight: 700; letter-spacing: -1.5px;} @media screen and (max-width: 960px) { #con2 .txtBox {position: static;} #con2 .imgBox {width: 100%;} #con2 .imgBox ul {display: flex; justify-content: space-between;} #con2 .imgBox ul li {width: 48%; margin: 0 auto!important;} #con2 .imgBox ul li:nth-child(2n) {float: none;} } @media screen and (max-width: 640px) { #con2 .imgBox ul {display: block;} #con2 .imgBox ul li {width: 100%;} #con2 .imgBox ul li:not(:last-child) {margin-bottom: 30px!important;} #con2 .imgBox ul li a {border-radius: 30px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3);} #con2 .imgBox ul li:hover a {box-shadow: 6px -6px 10px rgba(0, 0, 0, 0.3);} #con2 .imgBox ul li .txtBox2 {padding: 20px 30px;} #con2 .imgBox ul li .txtBox2 h3 {margin-bottom: 8px; font-size: 26px; letter-spacing: -1px;} #con2 .imgBox ul li .txtBox2 p {font-size: 16px; letter-spacing: -0.3px;} #con2 .imgBox ul li span {font-size: 18px; letter-spacing: -0.5px;} #con2 .imgBox ul li span b {margin-bottom: 6px; font-size: 28px; letter-spacing: -1px;} } /* con2 */ /* con3 */ #con3 {padding-top: 110px; overflow: hidden;} #con3 .con3_wrap {position: relative;} #con3 .txtBox {padding-top: 70px;} #con3 .txtBox ul {display: flex; justify-content: space-between; flex-wrap: wrap;} #con3 .txtBox ul li {width: 49%; padding: 30px 26px; border-radius: 30px; background: #e3d8e6; transition: 0.3s;} #con3 .txtBox ul li:last-child {display: flex; justify-content: center; align-items: center;} #con3 .txtBox ul li:not(:last-child):hover {background: #d8c2df;} #con3 .txtBox ul li:not(:first-child, :last-child) {background: #f5f5f5;} #con3 .txtBox ul li:not(:first-child, :last-child):hover {background: #ddd;} #con3 .txtBox ul li:nth-child(-n+2) {margin-bottom: 10px;} #con3 .txtBox ul li h3 {position: relative; display: inline-block; margin-bottom: 12px; font-family: 'MangoDdobak'; font-size: 28px; font-weight: 400; color: #8f2b8c; letter-spacing: -1px; word-break: keep-all; transition: 0.3s;} #con3 .txtBox ul li h3:after {position: absolute; display: block; content: ""; width: 30px; height: 30px; top: -20px; right: -24px; background: url(../images/footprint.png) no-repeat center; background-size: cover; opacity: 0; filter: brightness(); transition: 0.3s;} #con3 .txtBox ul li:hover h3:after {opacity: 1;} #con3 .txtBox ul li p {font-size: 18px; font-weight: 300; color: #777; letter-spacing: -0.5px; word-break: keep-all; transition: 0.3s;} #con3 .txtBox ul li img {width: 150px;} #con3 .imgBox {width: 650px; clip-path: path("M11.61,278.09c0.67,0,1.34-0.19,1.94-0.59c48.84-32.92,92.5-34.98,121.48-30.42 c-1.34,10.42-1.65,20.02-1.04,28.88c-30.25,5.63-72.74,22.95-109.12,72.72c-1.13,1.55-0.8,3.72,0.75,4.85 c0.61,0.45,1.34,0.67,2.04,0.67c1.07,0,2.13-0.49,2.81-1.42c34.92-47.77,75.39-64.48,104.18-69.95 c5.75,44.67,36.75,68.83,80.31,81.46c0,0,0,0,0,0c-0.78,1.14-1.56,2.64-2.33,4.48c-12.12,23.91-67.07,140.55-59.37,275 c0,0-9.98,26.6-11.31,53.87c-0.68,13.95-0.15,47.14,1.68,82.38h493.96c35.19-106.12-59.29-178.37-78.68-214.72 c-21.28-39.9-69.83-112.39-87.12-136.33c-13.48-18.67-22.92-59.16-26.42-76.1c26.54-15.15,45.15-37.85,50.41-69.28 c28.54,6.15,67.24,23.38,100.74,69.2c0.68,0.93,1.74,1.42,2.81,1.42c0.71,0,1.43-0.22,2.05-0.67c1.55-1.13,1.89-3.3,0.75-4.85 c-34.93-47.78-75.48-65.65-105.43-71.98c0.95-9.34,0.78-19.39-0.64-30.2c28.91-3.73,70.78-0.41,117.38,31 c0.6,0.4,1.27,0.59,1.94,0.59c1.11,0,2.21-0.54,2.88-1.53c1.07-1.59,0.65-3.75-0.94-4.82c-48.38-32.61-92.03-36.03-122.31-32.08 c-3.52-20.11-11.21-42.7-23.82-67.91c24.17-72.82,18.14-126.36,13.54-148.79c-1.21-5.88-7.83-8.84-13.03-5.85L368.4,76.37 c-13.07-3.67-27.79-5.91-44.24-5.86c-23.46,0.07-45.63,2.38-66.05,8.09L150.93,17.1c-5.21-2.99-11.82-0.03-13.03,5.85 c-4.74,23.06-10.97,79,15.64,154.96c-6.15,15.31-11.38,32.62-15.58,52.2c-0.74,3.46-1.37,6.82-1.91,10.13 c-30.37-4.78-75.79-2.6-126.38,31.49c-1.59,1.07-2.01,3.23-0.94,4.82C9.4,277.55,10.49,278.09,11.61,278.09z"); opacity: 0.7;} @media screen and (max-width: 1400px) { #con3 {padding-top: 180px;} #con3 .con3_wrap {padding: 0 15px 180px;} #con3 .txtBox {padding: 0;} #con3 .imgBox {position: absolute; bottom: 0; left: 50%; opacity: 0.3;} } @media screen and (max-width: 960px) { #con3 .txtBox ul li img {width: 90px;} #con3 .imgBox {display: none;} } @media screen and (max-width: 640px) { #con3 {padding: 80px 0;} #con3 .con3_wrap {padding: 0 15px;} #con3 .txtBox ul {display: block;} #con3 .txtBox ul li {width: 100%;padding: 26px 20px; border-radius: 20px;} #con3 .txtBox ul li:nth-child(3) {margin-bottom: 10px; background: #e3d8e6;} #con3 .txtBox ul li:nth-child(3):hover {background: #d8c2df;} #con3 .txtBox ul li:nth-child(4) {background: #f5f5f5;} #con3 .txtBox ul li h3 {margin-bottom: 8px; font-size: 22px;} #con3 .txtBox ul li h3:after {width: 20px; height: 20px; top: -14px; right: -16px;} #con3 .txtBox ul li p {font-size: 16px; letter-spacing: -0.3px;} } /* con3 */ /*서브상단*/ .sub_visual{position:relative;margin:0 auto;height:522px;overflow:hidden;} .sub_visual.visual01 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual01.jpg) no-repeat center; background-size: cover;} .sub_visual.visual02 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual02.jpg) no-repeat center; background-size: cover;} .sub_visual.visual03 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual03.jpg) no-repeat center; background-size: cover;} .sub_visual.visual04 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual04.jpg) no-repeat center; background-size: cover;} .sub_visual.visual05 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual05.jpg) no-repeat center; background-size: cover;} .sub_visual.visual06 .bg{background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/sub_visual06.jpg) no-repeat center; background-size: cover;} .sub_visual:hover .bg{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)} .sub_visual .title_warp { max-width:1240px; margin:0 auto; display:table} .sub_visual .title_warp .title_page { height:522px; position: relative; display:table-cell; vertical-align:middle; text-align:center; margin:0 auto; z-index:2} .sub_visual h3{font-size:16px;font-weight:300; color:#ddd} .sub_visual .main_title{font-family: 'MangoDdobak';font-size:40px; font-weight:700; text-align:center; color:#fff; letter-spacing:-1px } .sub_visual .inBox {font-size:16px; padding:20px 0 40px; color:#fff} .sub_visual .inBox i { font-size:16px; color:#fff; display:inline-block;} .sub_visual .inBox a { padding:0 13px 0 0} .sub_visual .inBox span {padding:0 13px; opacity:0.8} .sub_visual .inBox span.strong { opacity:1; padding:0 0 0 13px} .sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:1200px;opacity:.6;z-index:1} .sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease} .sub_visual.tmp {height:100px; background-color:#fff;} .sub_visual.tmp .title_warp {display:none;} /*서브상단*/ /*서브 제목*/ .content_wrap { width:100%;} .content_wrap .txtCon { max-width:1400px; margin:0 auto; padding:20px 0 50px; font-size:17px; line-height:1.75; letter-spacing:-0.02em; color:#444; font-weight:300; clear:both} .content_wrap .txtCon .sub_title{margin:110px 0 50px; padding:0 0; text-align:center;} .content_wrap .txtCon .sub_title h2 {padding-bottom: 20px; font-family: 'MangoDdobak'; font-size: 56px; font-weight: 700; color: #8f2b8c; letter-spacing: -2px; word-break: keep-all;} .content_wrap .txtCon .sub_title p {font-size: 16px; color:#555; word-break:keep-all;} .content_wrap .txtboard { max-width:1400px; margin:0 auto; padding:20px 0 50px; font-size:14px; line-height:1.75; letter-spacing:-0.02em; font-weight:300; color:#333; clear:both} @media screen and (max-width: 1400px) { .content_wrap .txtCon {padding: 20px 15px 50px;} .content_wrap .txtboard {padding: 20px 15px 50px;} .content_wrap .txtCon .sub_title {margin: 80px 0 40px;} .content_wrap .txtCon .sub_title h2 {font-size: 30px; letter-spacing: -1.5px;} } /*서브 제목*/ /*푸터*/ #footer {background: #333; text-align: center;} #footer ul {width: 100%; max-width: 1400px; margin: 0 auto 40px;} #footer ul li {display: inline-block; margin: 20px;} #footer ul li:first-child {margin-left: 0;} #footer ul li:last-child {margin-right: 0;} #footer ul li a {padding: 0 20px; font-size: 18px; font-weight: 600; color: #fff; line-height: 40px; letter-spacing: -0.5px;} #footer ul li:first-child a {padding-left: 0;} #footer ul li:last-child a {padding-right: 0;} #footer .ft_con {width: 100%; max-width: 1400px; margin: 0 auto; padding-bottom: 40px; word-break: keep-all;} #footer .ft_con #ft_logo {margin-bottom: 40px;} #footer .ft_con #ft_logo img {width: 150px; filter: brightness(100);} #footer .ft_con span {display: inline-block; font-size: 16px; font-weight: 300; color: #ddd; line-height: 26px; letter-spacing: -0.3px; word-break: keep-all;} #footer .ft_con span a {color: #ddd;} #footer .ft_con .copyright {margin-top: 30px; font-weight: 500!important; word-break: keep-all;} @media screen and (max-width: 1400px) { #footer ul {padding: 0 15px;} #footer .ft_con {padding: 0 15px 40px;} } @media screen and (max-width: 960px) { #footer .ft_con #ft_logo img {width: 90px;} } @media screen and (max-width: 640px) { #footer ul {margin-bottom: 30px; padding-top: 14px;} #footer ul li {margin: 0;} #footer ul li a {padding: 0 10px; font-size: 16px; line-height: 28px; letter-spacing: -0.3px;} #footer .ft_con {padding-bottom: 30px;} #footer .ft_con #ft_logo {margin-bottom: 30px;} #footer .ft_con span {font-size: 14px; line-height: 24px; letter-spacing: 0;} #footer .ft_con .copyright {margin-top: 20px;} } /*푸터*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#076aa3;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#00a19a;font-weight:normal;} .f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close_w.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } #tl_quick .mfp-close:after {background: url("../img/btn_close.png") no-repeat center center;} .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }