
@media screen and (max-width:1200px) {
}
@media screen and (max-width:768px) {
}
/*basic-set*/
input[type=text],
input[type=password],
textarea
{
    -webkit-box-sizing :border-box;‌​
    -moz-box-sizing :border-box;
    box-sizing :border-box;
	line-height:auto;
	vertical-align:top;
}
* { position:relative; word-break:keep-all; }
#wrap * { transition:all ease-in-out 0.3s; }
a.off { pointer-events:none; cursor:default; }
.bt_ov { position:absolute; top:0; left:0; right:0; bottom:0; text-indent:-9999px; }

.target.on { animation: fade_up 1s both; }
.target.top.on { animation-name: fade_up_top; }
.target.d1 { animation-delay: 0.2s; }
.target.d2 { animation-delay: 0.4s; }
.target.d3 { animation-delay: 0.6s; }

@keyframes fade_up {
    0% {
        bottom: -50px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
@keyframes fade_up_top {
    0% {
        top: 50px;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

/* layout */
:root {
    --tit-fonts: 'Cormorant Infant';
}
h2 { font-weight: normal; }

#header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
#header.sticky::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); }
#header.off { top: -100px; }
#header .wrap { margin: 0 60px; height: 100px; }
#header .wrap h1 { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#header .wrap h1 img { height: 65px; }

#gnb { position: absolute; top: 25px; right: 0; display: flex; gap: 49px; }
#gnb li a { display: block; font-size: 16px; color: #fff; font-weight: 600; padding: 0 10px; line-height: 50px; }
.wh #gnb>li>a { color: #000; transition: all 0.2s; }
.sticky.wh #gnb>li>a { color: #fff; }
#gnb>li.on>a,
#gnb>li>a:hover { color: #FFD042; }
#gnb li.hs>a::after { content: ''; display: inline-block; width: 11px; height: 7px; background: url(../images/arr_gnb.png) 0/100% 100%; vertical-align: middle; margin: -3px 0 0 8px; transition: all 0.3s; }
.wh #gnb li.hs>a::after { background-image: url(../images/arr_gnb_bk.png); transition: all 0.2s; }
.sticky.wh #gnb li.hs>a::after { background-image: url(../images/arr_gnb.png); }
#gnb li.hs.on>a::after,
#gnb li.hs:hover>a::after { background-image: url(../images/arr_gnb_ov.png); }
#gnb li.hs.on>a::after { transform: rotate(180deg); }
#gnb li.hs ul { position: absolute; top: 100%; left: 0; width: 170px; padding: 17px 5px; background: #fff; border: 1px solid #EBEBEB; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.06); display: none; }
#gnb li.hs.on ul { display: block; }
#gnb li.hs ul li { margin-bottom: 6px; }
#gnb li.hs ul li:last-child { margin: 0; }
#gnb li.hs ul li a { font-size: 15px; color: #000; font-weight: 500; line-height: 40px; padding: 0 15px; }
#gnb li.hs ul li a:hover { color: #888; }

#gnb li.contact_us a { padding: 0 58px; color: #000 !important; background: #FFD042; border-radius: 25px; color: #000; font-weight: 500; }
#gnb li.contact_us a:hover { background: #b09130; }


#footer { background: #1F2120; padding: 50px 60px 60px; }
#footer .wrap { max-width: 1550px; margin: 0 auto; }
#footer .wrap .logo { margin-bottom: 178px; }
#footer .wrap .logo img { height: 180px; }
#footer .wrap .info { font-size: 16px; color: #969696; font-weight: 500; }
#footer .wrap .info .b_info { margin-top: 22px; display: flex; justify-content: space-between; }
#footer .wrap .info .email { font-size: 20px; color: #fff; text-decoration: underline; }
#footer .wrap .info ul { display: flex; gap: 20px; }
#footer .wrap .info ul a { color: #969696; }
#footer .wrap .info .copyright { font-size: 14px; }

#bt_gnb { display: none; }
@media screen and (max-width:1200px) {
#header .wrap { margin: 0 30px; height: 80px; }
#header .wrap h1 img { height: 50px; }

#gnb { top: 20px; gap: 39px; }
#gnb li a { font-size: 15px; padding: 0 5px; line-height: 40px; }
#gnb li.hs>a::after { width: 10px; height: 6px; margin-left: 6px; }
#gnb li.hs ul { width: 150px; padding: 15px 3px; border-radius: 8px; }
#gnb li.hs ul li { margin-bottom: 4px; }
#gnb li.hs ul li a { font-size: 14px; line-height: 36px; padding: 0 10px; }
#gnb li.contact_us a { padding: 0 45px; }

#footer { padding: 30px 30px 40px; }
#footer .wrap .logo { margin-bottom: 100px; }
#footer .wrap .logo img { height: 120px; }
#footer .wrap .info { font-size: 15px; }
#footer .wrap .info .b_info { margin-top: 18px; flex-wrap: wrap; }
#footer .wrap .info .b_info .copyright { width: 100%; margin-top: 15px; }
#footer .wrap .info .email { font-size: 17px; }
#footer .wrap .info ul { gap: 15px; }
#footer .wrap .info .copyright { font-size: 13px; }

}
@media screen and (max-width:768px) {
#bt_gnb { position:absolute; text-indent: -9999px; top: 50%; right: 0; width: 20px; height: 16px; margin-top: -8px; z-index: 11; display: block; }
#bt_gnb i { position: absolute; left: 0; right: 0; height: 2px; background: #fff; font-size: 0; line-height: 0; border-radius: 2px; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
.wh #bt_gnb i { background: #000; }
.sticky.wh #bt_gnb i { background: #fff; }
#bt_gnb i:nth-child(1) { top: 0; }
#bt_gnb i:nth-child(2),
#bt_gnb i:nth-child(3) { top: 7px; }
#bt_gnb i:nth-child(4) { top: 14px; }
#bt_gnb.on i:nth-child(1),
#bt_gnb.on i:nth-child(4) { opacity: 0; }
#bt_gnb.on i:nth-child(2) { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); }
#bt_gnb.on i:nth-child(3) { transform: rotate(-495deg); -webkit-transform: rotate(-495deg); }

#header .wrap { margin: 0 20px; height: 70px; }
#header .wrap h1 img { height: 40px; }

#gnb { position: fixed; top: 0; bottom: 0; left: 100%; right: -100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); z-index: 10; flex-direction: column; justify-content: center; gap: 20px; padding: 30px; }
#gnb.on { left: 0; right: 0; }
#gnb li { text-align: center; }
#gnb li.hs ul { position: relative; top: auto; left: auto; width: auto; padding: 15px 10px; border: 0; }
#gnb li a { font-size: 15px; padding: 0 5px; line-height: 40px; }
#gnb>li>a { color: #fff; }
#gnb li.hs>a::after { width: 10px; height: 6px; margin-left: 6px; }
#gnb li.hs ul li { margin-bottom: 4px; }
#gnb li.hs ul li a { font-size: 14px; line-height: 36px; padding: 0 10px; }
#gnb li.contact_us a { padding: 0 45px; }

#footer { padding: 20px 20px 30px; }
#footer .wrap .logo { margin-bottom: 50px; }
#footer .wrap .logo img { height: 90px; }
#footer .wrap .info { font-size: 14px; }
#footer .wrap .info .b_info { margin-top: 15px; }
#footer .wrap .info .b_info ul { width: 100%; margin-top: 12px; }
#footer .wrap .info .b_info .copyright { margin-top: 12px; }
#footer .wrap .info .email { font-size: 15px; }
#footer .wrap .info ul { gap: 12px; }
#footer .wrap .info .copyright { font-size: 12px; }
}

#bt_top { position: fixed; bottom: 30px; right: 50%; margin-right: -775px; width: 84px; height: 84px; cursor: pointer; background: url(../images/bt_top.png) center center/100%; border-radius: 100%; text-indent: -9999px; z-index: 10; }
@media screen and (max-width:1610px) {
#bt_top { right: 30px; margin-right: 0; }
}
@media screen and (max-width:1200px) {
#bt_top { width: 64px; height: 64px; }
}
@media screen and (max-width:768px) {
#bt_top { bottom: 20px; right: 20px; width: 54px; height: 54px; background-size: 120%; }
}

/* main */
.mt_area { height: 100vh; background: url(../images/mt_img.png) center center/cover; }
.mt_area .tx { position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: calc(100% - 120px); max-width: 1550px; }
.mt_area .tx.it { top: 45%; }
.mt_area .tx h2 { font-family: var(--tit-fonts); font-size: 130px; letter-spacing: -0.02em; color: #fff; line-height: 114.5%; font-weight: normal; }
.mt_area .tx p { font-size: 20px; color: #fff; line-height: 180%; margin-top: 40px; }
.mt_area .scroll_down { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #fff; font-weight: 700; }
.mt_area .scroll_down .bar { display: block; width: 2px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 4px; margin: 0 auto 12px; }
.mt_area .scroll_down .bar i { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: #FFD042; animation: upAndDown 3s infinite; }
@keyframes upAndDown {
    0% {
        top: 0;
    }
    55% {
        top: calc(100% - 30px);
    }
    100% {
        top: 0;
    }
}
@media screen and (max-width:1200px) {
.mt_area { background-position: 80% center; }
.mt_area .tx h2 { font-size: 90px; }
.mt_area .tx p { font-size: 18px; margin-top: 30px; }
.mt_area .scroll_down { bottom: 65px; }
.mt_area .scroll_down .bar { height: 65px; margin-bottom: 8px; }
.mt_area .scroll_down .bar i { height: 25px; }
@keyframes upAndDown {
    55% {
    top: calc(100% - 25px);
    }
}
}
@media screen and (max-width:768px) {
.mt_area .tx { width: calc(100% - 60px); }
.mt_area .tx h2 { font-size: 50px; }
.mt_area .tx p { font-size: 14px; margin-top: 20px; }
.mt_area .tx p br { display: none; }
.mt_area .scroll_down { bottom: 35px; font-size: 11px; }
.mt_area .scroll_down .bar { height: 50px; margin-bottom: 5px; }
.mt_area .scroll_down .bar i { height: 20px; }
@keyframes upAndDown {
    55% {
    top: calc(100% - 20px);
    }
}
}

.m_sec_tit { font-size: 26px; font-weight: 600; color: #F4C32E; }

.m_waht_we_offer { padding: 150px 60px; }
.m_waht_we_offer .wrap { max-width: 1550px; margin: 0 auto; text-align: center; }
.m_waht_we_offer .wrap h2 { margin-bottom: 25px; }
.m_waht_we_offer .wrap .c_tit { font-family: var(--tit-fonts); font-weight: 500; letter-spacing: -0.02em; font-size: 72px; line-height: 100%; margin-bottom: 30px; }
.m_waht_we_offer .wrap p { font-weight: 300; line-height: 166%; margin: 0 170px 80px; }
.m_waht_we_offer .wrap .list { display: flex; gap: 10px; }
.m_waht_we_offer .wrap .list li { width: 20%; }
.m_waht_we_offer .wrap .list li::before { content: ''; display: block; padding-bottom: 200%; }
.m_waht_we_offer .wrap .list li .ph { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); background: center center/cover; border-radius: 10px; overflow: hidden; }
.m_waht_we_offer .wrap .list li:hover .ph { width: 105.6%; height: 105.6%; }
.m_waht_we_offer .wrap .list li .ph::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); transition: all 0.3s; }
.m_waht_we_offer .wrap .list li:hover .ph::after { background: rgba(0,0,0,0.6); }
.m_waht_we_offer .wrap .list li:nth-child(1) .ph { background-image: url(../images/m_what_we_offer_ph01.png); }
.m_waht_we_offer .wrap .list li:nth-child(2) .ph { background-image: url(../images/m_what_we_offer_ph02.png); }
.m_waht_we_offer .wrap .list li:nth-child(3) .ph { background-image: url(../images/m_what_we_offer_ph03.png); }
.m_waht_we_offer .wrap .list li:nth-child(4) .ph { background-image: url(../images/m_what_we_offer_ph04.png); }
.m_waht_we_offer .wrap .list li:nth-child(5) .ph { background-image: url(../images/m_what_we_offer_ph05.png); }
.m_waht_we_offer .wrap .list li:nth-child(6) .ph { background-image: url(../images/m_what_we_offer_ph06.png); }
.m_waht_we_offer .wrap .list li .tx { position: absolute; top: 50%; left: 5%; right: 5%; transform: translateY(-50%); font-size: 20px; color: #fff; font-weight: 600; text-align: center; }
@media screen and (max-width:1200px) {
.m_sec_tit { font-size: 20px; }

.m_waht_we_offer { padding: 100px 30px; }
.m_waht_we_offer .wrap h2 { margin-bottom: 40px; }
.m_waht_we_offer .wrap .c_tit { font-size: 55px; margin-bottom: 16px; }
.m_waht_we_offer .wrap p { margin: 0 100px 60px; }
.m_waht_we_offer .wrap .list { gap: 8px; }
.m_waht_we_offer .wrap .list li:hover .ph { width: 103.5%; height: 103.5%; }
.m_waht_we_offer .wrap .list li .tx { font-size: 16px; }
}
@media screen and (max-width:768px) {
.m_sec_tit { font-size: 16px; }

.m_waht_we_offer { padding: 60px 20px; }
.m_waht_we_offer .wrap h2 { margin-bottom: 25px; }
.m_waht_we_offer .wrap .c_tit { font-size: 30px; margin-bottom: 12px; }
.m_waht_we_offer .wrap .c_tit br { display: none; }
.m_waht_we_offer .wrap p { margin: 0 30px 40px; }
.m_waht_we_offer .wrap .list { gap: 12px; flex-wrap: wrap; }
.m_waht_we_offer .wrap .list li { width: calc(33.3333% - 8px); }
.m_waht_we_offer .wrap .list li .tx { font-size: 14px; }
}

.m_peoples { padding: 200px 30px; background: #1E211F; overflow: hidden; }
.m_peoples .circle { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); width: 976px; border: 1px solid #414542; border-radius: 100%; }
.m_peoples .circle::before { content: ''; display: block; padding-bottom: 100%; }
.m_peoples .wrap { max-width: 1550px; margin: 0 auto; }
.m_peoples .wrap h2 { padding: 23px 0 29px; }

ul.tab_m_peoples { margin-bottom: 150px; padding-right: calc(53% - 85px); display: flex; flex-wrap: wrap; gap: 14px 25px; }
ul.tab_m_peoples li a { display: block; line-height: 133%; font-weight: 600; color: rgba(255,255,255,0.5); }
ul.tab_m_peoples li a:hover { color: rgba(255,255,255,0.75); }
ul.tab_m_peoples li.active a { color: #fff; }
ul.tab_m_peoples li a::after { content: ''; display: inline-block; width: 24px; height: 24px; background: url(../images/arr_m_people.png) 0/100%; vertical-align: middle; margin: -1px 0 0 10px; opacity: 0.5; transform: all 0.3s; }
ul.tab_m_peoples li.active a::after { opacity: 1; }
.tab_m_peoples_content { display: none; }
.tab_m_peoples_content.on { display: flex; gap: 170px; }

.m_peoples .tx { width: calc(53% - 85px); color: #fff; }
.m_peoples .tx .position { font-size: 24px; font-weight: 600; margin-bottom: 32px; }
.m_peoples .tx .name { font-family: var(--tit-fonts); font-size: 120px; letter-spacing: -0.02em; line-height: 104.6%; margin-bottom: 70px; }
.m_peoples .tx .name span { display: block; margin-left: 90px; }
.m_peoples .tx .career { margin-left: 90px; font-weight: 300; line-height: 166%; }
.m_peoples .tx .career li { padding-left: 30px; }
.m_peoples .tx .career li::before { content: ''; position: absolute; top: 12px; left: 12px; width: 6px; height: 6px; background: #fff; border-radius: 100%; }
.m_peoples .ph { width: calc(47% - 85px); background: no-repeat center center/cover; margin-top: -19%; border-radius: 10px; }
.m_peoples .ph::before { content: ''; display: block; padding-bottom: 143%; }
@media screen and (max-width:1600px) {
.tab_m_peoples_content.on { gap: 40px; }
.m_peoples .tx { width: calc(53% - 20px); }
.m_peoples .ph { width: calc(47% - 20px); margin-top: -19%; }
}
@media screen and (max-width:1500px) {
.m_peoples .tx .name { font-size: 90px; }
.m_peoples .tx .name span { margin-left: 50px; }
}
@media screen and (max-width:1200px) {
.m_peoples { padding: 150px 30px; }
.m_peoples .wrap h2 { padding: 15px 0; }

ul.tab_m_peoples { margin-bottom: 100px; padding-right: calc(53% - 20px); gap: 10px 15px; }
ul.tab_m_peoples li a::after { width: 20px; height: 20px; margin-left: 8px; }
.tab_m_peoples_content.on { gap: 40px; }

.m_peoples .tx { width: calc(53% - 20px); }
.m_peoples .tx .position { font-size: 20px; margin-bottom: 20px; }
.m_peoples .tx .name { font-size: 70px; margin-bottom: 42px; }
.m_peoples .tx .name span { margin-left: 50px; }
.m_peoples .tx .career { margin-left: 70px; }
.m_peoples .tx .career li { padding-left: 24px; }
.m_peoples .tx .career li::before { top: 10px; left: 10px; width: 5px; height: 5px; }
.m_peoples .ph { width: calc(47% - 20px); margin-top: -19%; }
}
@media screen and (max-width:768px) {
.m_peoples { padding: 60px 20px; }
.m_peoples .circle { bottom: 3%; width: 150%; }
.m_peoples .wrap h2 { padding: 0 0 10px; }

ul.tab_m_peoples { margin-bottom: 30px; padding-right: 0; gap: 8px 12px; }
ul.tab_m_peoples li a::after { width: 18px; height: 18px; margin-left: 6px; }
.tab_m_peoples_content.on { flex-wrap: wrap; flex-direction: column-reverse; gap: 20px; }

.m_peoples .tx { width: 100%; }
.m_peoples .tx .position { font-size: 15px; margin-bottom: 18px; }
.m_peoples .tx .name { font-size: 50px; margin-bottom: 24px; }
.m_peoples .tx .name span { margin-left: 0; }
.m_peoples .tx .career { margin-left: 0; }
.m_peoples .tx .career li { padding-left: 20px; }
.m_peoples .tx .career li::before { top: 8px; left: 8px; width: 4px; height: 4px; }
.m_peoples .ph { width: 100%; margin-top: 0; }
}


.m_projects { padding: 28px 0 400px; text-align: center; background: #1E211F; overflow: hidden; }
.m_projects h2 { margin-bottom: 40px; }
.m_projects .t_tx { font-family: var(--tit-fonts); font-weight: 500; letter-spacing: -0.02em; font-size: 72px; line-height: 120%; color: #fff; margin-bottom: 100px; }
.m_projects .slider .mySwiper { overflow: visible; margin: 0 -10%; }
.m_projects .slider .swiper-slide { transition: none !important;  }
.m_projects .slider .swiper-slide .ph::before { content: ''; display: block; padding-bottom: 67.5%; }
.m_projects .slider .swiper-slide .ph .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: no-repeat center center/cover; border-radius: 10px; opacity: 0.5; overflow: hidden; }
.m_projects .slider .swiper-slide-active .ph .inner { opacity: 1; width: 110%; height: 110%; }
.m_projects .slider .swiper-slide .tx { position: absolute; top: calc(100% + 30px); left: 0; right: 0; color: #fff; text-align: center; opacity: 0; }
.m_projects .slider .swiper-slide-active .tx { opacity: 1; }
.m_projects .slider .swiper-slide .tx .tit { font-size: 34px; line-height: 176%; font-weight: 700; margin-bottom: 5px; }
.m_projects .slider .swiper-slide .tx .date { font-size: 16px; margin-bottom: 50px; }
.m_projects .slider .swiper-slide .tx .bt_read_more { display: inline-block; width: 258px; line-height: 58px; border: 1px solid #fff; border-radius: 30px; font-size: 18px; font-weight: 700; color: #fff; }
.m_projects .slider .swiper-button-next,
.m_projects .slider .swiper-button-prev { left: auto; right: auto; width: 80px; height: 80px; background-size: 100% 100%; text-indent: -9999px; }
.m_projects .slider .swiper-button-next { left: calc(66.6666% + 60px); background-image: url(../images/m_projects_bt_next.png); }
.m_projects .slider .swiper-button-prev { right: calc(66.6666% + 60px); background-image: url(../images/m_projects_bt_prev.png); }
@media screen and (max-width:1200px) {
.m_projects { padding: 20px 0 300px; }
.m_projects h2 { margin-bottom: 30px; }
.m_projects .t_tx { font-size: 56px; margin-bottom: 65px; }
.m_projects .slider .mySwiper { margin: 0 -40%; }
.m_projects .slider .swiper-slide .tx { top: calc(100% + 24px); }
.m_projects .slider .swiper-slide .tx .tit { font-size: 28px; margin-bottom: 0; }
.m_projects .slider .swiper-slide .tx .date { font-size: 15px; margin-bottom: 35px; }
.m_projects .slider .swiper-slide .tx .bt_read_more { width: 218px; line-height: 48px; font-size: 16px; }
.m_projects .slider .swiper-button-next,
.m_projects .slider .swiper-button-prev { width: 60px; height: 60px; }
.m_projects .slider .swiper-button-next { left: calc(66.6666% + 45px); }
.m_projects .slider .swiper-button-prev { right: calc(66.6666% + 45px); }
}
@media screen and (max-width:768px) {
.m_projects { padding: 15px 0 70px; }
.m_projects h2 { margin-bottom: 20px; }
.m_projects .t_tx { font-size: 35px; margin: 0 20px 45px; }
.m_projects .t_tx br { display: none; }
.m_projects .slider .mySwiper { margin: 0 -75%; }
.m_projects .slider .swiper-slide .tx { position: relative; top: auto; left: auto; right: auto; margin-top: 20px; }
.m_projects .slider .swiper-slide .tx .tit { font-size: 22px; }
.m_projects .slider .swiper-slide .tx .date { font-size: 14px; margin-bottom: 35px; }
.m_projects .slider .swiper-slide .tx .bt_read_more { width: 188px; line-height: 43px; font-size: 14px; }
.m_projects .slider .swiper-button-next,
.m_projects .slider .swiper-button-prev { display: none; }
}

.m_our_clients { padding: 200px 30px 220px; text-align: center; }
.m_our_clients .wrap { max-width: 1550px; margin: 0 auto; }
.m_our_clients h2 { margin-bottom: 20px; }
.m_our_clients .t_tx { font-family: var(--tit-fonts); font-weight: 500; letter-spacing: -0.02em; font-size: 72px; font-weight: 500; line-height: 105%; margin-bottom: 100px; }
.m_our_clients .list { border: 1px solid #DCDCDC; border-width: 1px 0 0 1px; display: flex; }
.m_our_clients .list li { width: 25%; background: center center/cover; }
.m_our_clients .list li::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #dcdcdc; border-width: 0 1px 1px 0; }
.m_our_clients .list li::before { content: ''; display: block; padding-bottom: 100%; }
@media screen and (max-width:1200px) {
.m_our_clients { padding: 120px 30px 140px; }
.m_our_clients h2 { margin-bottom: 15px; }
.m_our_clients .t_tx { font-size: 56px; margin-bottom: 70px; }
.m_our_clients .t_tx br { display: none; }
}
@media screen and (max-width:768px) {
.m_our_clients { padding: 60px 20px 70px; }
.m_our_clients .t_tx { font-size: 35px; margin-bottom: 40px; }
.m_our_clients .list { flex-wrap: wrap; }
.m_our_clients .list li { width: 50%; }
}


.st_area { height: 100vh; background: center center/cover; display: flex; flex-direction: column; gap: 30px; justify-content: center; text-align: center; padding: 0 50px; }
.st_area.st02 { background-image: url(/assets/images/st_img02.png); }
.st_area h2 { font-family: var(--tit-fonts); font-size: 180px; line-height: 100%; color: #fff; font-weight: normal; text-align: center; }
.st_area h2 span { display: block; font-family: "Inter", sans-serif; font-size: 26px; color: #fff; font-weight: 600; }
.st_area p { max-width: 1000px; margin: 0 auto; font-size: 20px; line-height: 170%; color: #fff; font-weight: 600; }
@media screen and (max-width:1800px) {
.st_area p br { display: none; }
}
@media screen and (max-width:1400px) {
.st_area { gap: 24px; padding: 0 30px; }
.st_area h2 { font-size: 12vw; }
.st_area h2 span { font-size: 20px; }
.st_area p { font-size: 16px; }
}
@media screen and (max-width:768px) {
.st_area { gap: 15px; padding: 0 20px; }
.st_area.st02 { background-image: url(/assets/images/st_img02_mo.jpg); }
.st_area h2 span { font-size: 14px; }
.st_area p { font-size: 14px; margin-bottom: 15%; }
}

.who_we_are { padding: 150px 60px; }
.who_we_are .pt_tx { max-width: 1550px; margin: 0 auto; display: flex; gap: 100px; margin-bottom: 150px; }
.who_we_are .pt_tx dt { width: calc(40% - 50px); font-family: var(--tit-fonts); font-size: 72px; line-height: 100%; font-weight: 500; }
.who_we_are .pt_tx dd { width: calc(60% - 50px); font-weight: 300px; line-height: 187.5%; }
@media screen and (max-width:1200px) {
.who_we_are { padding: 100px 60px 150px; }
.who_we_are .pt_tx { gap: 60px; margin-bottom: 100px; }
.who_we_are .pt_tx dt { width: calc(40% - 30px); font-size: 56px; }
.who_we_are .pt_tx dd { width: calc(60% - 30px); }
}
@media screen and (max-width:768px) {
.who_we_are { padding: 60px 20px; }
.who_we_are .pt_tx { display: block; margin-bottom: 60px; }
.who_we_are .pt_tx dt { width: auto; font-size: 36px; margin-bottom: 20px; }
.who_we_are .pt_tx dd { width: auto; }
}

.who_we_are .our_team { max-width: 1680px; padding: 140px 60px 240px; background: url(../images/out_team_bg.png) center center/cover; border-radius: 10px; text-align: center; color: #fff; margin: 0 auto ; }
.who_we_are .our_team h3 { font-family: var(--tit-fonts); font-size: 120px; color: #fff; line-height: 106%; font-weight: normal; }
.who_we_are .our_team .t_tx { font-size: 20px; margin-bottom: 156px; }
.who_we_are .our_team .list { display: flex; justify-content: center; width: 100%; max-width: 1532px; margin: 0 auto; }
.who_we_are .our_team .list li { width: 25%; background: rgba(255,255,255,0.5); margin: 0 -33px; border-radius: 100%; backdrop-filter: blur(25px); }
.who_we_are .our_team .list li:nth-child(1),
.who_we_are .our_team .list li:nth-child(5) { background: rgba(120, 233, 201, 0.2); z-index: 1; }
.who_we_are .our_team .list li:nth-child(2),
.who_we_are .our_team .list li:nth-child(4) { background: rgb(194, 255, 238, 0.3); z-index: 2; }
.who_we_are .our_team .list li:nth-child(3) { background: rgb(175, 245, 225, 0.5); z-index: 3; }
.who_we_are .our_team .list li::before { content: ''; display: block; padding-bottom: 100%; }
.who_we_are .our_team .list li span { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font-size: 20px; font-weight: 600; }
@media screen and (max-width:1200px) {
.who_we_are .our_team { padding: 100px 60px 160px; }
.who_we_are .our_team h3 { font-size: 90px; }
.who_we_are .our_team .t_tx { font-size: 18px; margin-bottom: 100px; }
.who_we_are .our_team .list { padding: 0; }
.who_we_are .our_team .list li { margin: 0 -20px; }
.who_we_are .our_team .list li span { font-size: 16px; }
}
@media screen and (max-width:1000px) {
.who_we_are .our_team .list { flex-wrap: wrap; }
.who_we_are .our_team .list li { width: 33.3333%; margin: 0 -15px -50px; }
}
@media screen and (max-width:768px) {
.who_we_are .our_team { padding: 60px 30px 80px; }
.who_we_are .our_team h3 { font-size: 72px; }
.who_we_are .our_team .t_tx { font-size: 15px; margin-bottom: 60px; }
.who_we_are .our_team .list { padding: 0; flex-wrap: wrap; }
.who_we_are .our_team .list li { width: 80%; margin: 0 0 10px; border-radius: 10px; }
.who_we_are .our_team .list li span { font-size: 16px; }
.who_we_are .our_team .list li::before { padding-bottom: 70px; }
}

.who_we_are .what_we_offer { max-width: 1550px; margin: 0 auto; padding: 240px 0 200px; }
.who_we_are .what_we_offer h2 { font-size: 48px; margin-bottom: 24px; font-weight: 700; }
.who_we_are .what_we_offer .t_tx { font-size: 20px; line-height: 140%; margin-bottom: 70px; }
.who_we_are .what_we_offer .list { display: flex; flex-wrap: wrap; gap: 24px; }
.who_we_are .what_we_offer .list>li { width: calc(33.3333% - 16px); border-radius: 10px; overflow: hidden; }
.who_we_are .what_we_offer .list>li .ph { padding-bottom: 100%; background: center center/cover; }
.who_we_are .what_we_offer .list>li .tx { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 70px 38px; color: #fff; background: rgba(0,0,0,0.1); }
.who_we_are .what_we_offer .list>li:hover .tx { padding: 60px 38px; background: rgba(0,0,0,0.5); backdrop-filter: blur(15px); }
.who_we_are .what_we_offer .list>li .tx dt { font-size: 30px; font-weight: 700; margin-bottom: 25px; }
.who_we_are .what_we_offer .list>li .tx dd { opacity: 0; }
.who_we_are .what_we_offer .list>li:hover .tx dd { opacity: 1; }
.who_we_are .what_we_offer .list>li .tx dd li { margin-bottom: 20px; line-height: 105%; padding-left: 20px; }
.who_we_are .what_we_offer .list>li .tx dd li:last-child { margin: 0; }
.who_we_are .what_we_offer .list>li .tx dd li::before { content: ''; position: absolute; top: 8px; left: 8px; width: 4px; height: 4px; background: #fff; border-radius: 100%; }
@media screen and (max-width:1200px) {
.who_we_are .what_we_offer { padding: 160px 0; }
.who_we_are .what_we_offer h2 { font-size: 40px; margin-bottom: 20px; }
.who_we_are .what_we_offer .t_tx { font-size: 18px; margin-bottom: 56px; }
.who_we_are .what_we_offer .list { gap: 18px; }
.who_we_are .what_we_offer .list>li { width: calc(33.3333% - 12px); }
.who_we_are .what_we_offer .list>li .tx { padding: 50px 30px; }
.who_we_are .what_we_offer .list>li:hover .tx { padding: 35px 30px; }
.who_we_are .what_we_offer .list>li .tx dt { font-size: 24px; margin-bottom: 18px; }
.who_we_are .what_we_offer .list>li .tx dd li { margin-bottom: 16px; padding-left: 16px; }
.who_we_are .what_we_offer .list>li .tx dd li::before { top: 7px; left: 7px; width: 3px; height: 3px; }
}
@media screen and (max-width:1100px) {
.who_we_are .what_we_offer .list>li { width: calc(50% - 9px); }
}
@media screen and (max-width:768px) {
.who_we_are .what_we_offer { padding: 80px 0; }
.who_we_are .what_we_offer h2 { font-size: 30px; margin-bottom: 15px; }
.who_we_are .what_we_offer .t_tx { font-size: 16px; margin-bottom: 35px; }
.who_we_are .what_we_offer .list { gap: 10px; }
.who_we_are .what_we_offer .list>li { width: calc(50% - 5px); }
.who_we_are .what_we_offer .list>li .tx { padding: 25px; }
.who_we_are .what_we_offer .list>li:hover .tx { padding: 15px; }
.who_we_are .what_we_offer .list>li .tx dt { font-size: 18px; margin-bottom: 15px; }
.who_we_are .what_we_offer .list>li .tx dd li { font-size: 11px; margin-bottom: 10px; }
}

@media screen and (max-width:480px) {
.who_we_are .what_we_offer .list>li .ph { padding-bottom: 130%; }
.who_we_are .what_we_offer .list>li .tx dt { font-size: 16px; margin-bottom: 12px; }
.who_we_are .what_we_offer .list>li .tx dd li { margin-bottom: 7px; }
}

.our_clients li { height: 800px; background: center center/cover; display: flex; justify-content: center; align-items: center; }
.our_clients li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); transition: all 0.3s; }
.our_clients li:hover::before { background: rgba(0,0,0,0.5); }
.our_clients li img { height: 200px; }
@media screen and (max-width:1200px) {
.our_clients li { height: 720px; }
.our_clients li img { height: 160px; }
}
@media screen and (max-width:768px) {
.our_clients li { height: 550px; }
.our_clients li img { height: 120px; }
}

.people { padding: 150px 60px; }
.people .wrap { max-width: 1550px; margin: 0 auto; display: flex; flex-direction: column; gap: 150px; }
.people .wrap .unit { width: 100%; display: flex; gap: 20px; }
.people .wrap .unit:nth-child(2n) { flex-direction: row-reverse; }
.people .wrap .unit .ph { width: 600px; background: center center/cover; border-radius: 10px; }
.people .wrap .unit .ph::before { content: ''; display: block; padding-bottom: 123.3%; }
.people .wrap .unit .tx { width: calc(100% - 720px); padding-left: 100px; display: flex; flex-direction: column; justify-content: center; }
.people .wrap .unit .tx .position { font-weight: 500; margin-bottom: 10px; }
.people .wrap .unit .tx .name { font-family: var(--tit-fonts); font-size: 82px; font-weight: 500; margin-bottom: 50px; letter-spacing: -0.05em; }
.people .wrap .unit .tx .career { font-weight: 300; line-height: 166%; }
.people .wrap .unit .tx .career li { padding-left: 30px; }
.people .wrap .unit .tx .career li::before { content: ''; position: absolute; top: 12px; left: 13px; width: 5px; height: 5px; background: #000; border-radius: 100%; }
@media screen and (max-width:1400px) {
.people .wrap .unit { gap: 60px; }
.people .wrap .unit .ph { width: 500px; }
.people .wrap .unit .tx { width: calc(100% - 560px); padding-left: 0; }
.people .wrap .unit .tx .name { font-size: 70px; }
}
@media screen and (max-width:1400px) {
.people { padding: 100px 30px; }
.people .wrap { gap: 100px; }
.people .wrap .unit { gap: 30px; }
.people .wrap .unit .ph { width: 400px; }
.people .wrap .unit .tx { width: calc(100% - 430px); }
.people .wrap .unit .tx .position { margin-bottom: 8px; }
.people .wrap .unit .tx .name { font-size: 54px; margin-bottom: 40px; }
.people .wrap .unit .tx .career li { padding-left: 24px; }
.people .wrap .unit .tx .career li::before { top: 10px; left: 10px; width: 5px; height: 5px; }
}
@media screen and (max-width:768px) {
.people { padding: 60px 20px; }
.people .wrap { gap: 50px; }
.people .wrap .unit { flex-wrap: wrap; gap: 20px; }
.people .wrap .unit .ph { width: 100%; max-width: 450px; margin: 0 auto; }
.people .wrap .unit .tx { width: 100%; }
.people .wrap .unit .tx .position { margin-bottom: 5px; }
.people .wrap .unit .tx .name { font-size: 36px; margin-bottom: 20px; }
.people .wrap .unit .tx .career li { padding-left: 20px; }
.people .wrap .unit .tx .career li::before { top: 8px; left: 8px; width: 4px; height: 4px; }
}

.projects_list { padding: 160px 60px; overflow: hidden; }
.projects_list .slider { margin: 0 -5.7% 150px; }
.projects_list .slider .swiper-slide { background: center center/cover; border-radius: 10px; transition: none !important; }
.projects_list .slider .swiper-slide::before { content: ''; display: block; padding-bottom: 68%; }
.projects_list .slider::before,
.projects_list .slider::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12.7%; z-index: 11; }
.projects_list .slider::before { left: 0; background: linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 70%); }
.projects_list .slider::after { right: 0; background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 70%); }
.projects_list .list { max-width: 1550px; margin: 0 auto; }
.projects_list .list h3 { font-size: 34px; font-weight: 700; line-height: 60px; margin-bottom: 40px; }
.projects_list .list .search { position: absolute; top: 0; right: 0; }
.projects_list .list .search input { width: 280px; height: 60px; outline: 0; border: 0; background: none; padding: 0 10px 0 62px; font-size: 16px; font-weight: 600; border: 1px solid #c8c8c8; border-radius: 30px; }
.projects_list .list .search input:focus { border: 2px solid #000; }
.projects_list .list .search .bt_search { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 32px; height: 32px; text-indent: -9999px; background: url(../images/ic_search.png) no-repeat center center/84.3%; }
.projects_list .list .search.on .bt_search { background-image: url(../images/ic_search_on.png); }
.projects_list .list ul { display: flex; flex-wrap: wrap; gap: 70px; margin-bottom: 60px; }
.projects_list .list ul li { width: calc(50% - 35px); border-radius: 10px; overflow: hidden; }
.projects_list .list ul li::after { content: ''; display: block; padding-bottom: 81%; }
.projects_list .list ul li .ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: center center/cover; }
.projects_list .list ul li:hover .ph { width: 115%; height: 115%; }
.projects_list .list ul li .tx { position: absolute; bottom: 0; left: 0; right: 0; padding: 55px 50px; font-size: 34px; color: #fff; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); opacity: 0; }
.projects_list .list ul li:hover .tx { opacity: 1; }

.pagination { text-align: center; }
.pagination a { display: inline-block; vertical-align: top; margin: 0 5px; }
.pagination a.pn { text-indent: -9999px; height: 60px; width: 60px; background-size: 100%; }
.pagination a.pn.prev { background-image: url(../images/pn_prev.png); }
.pagination a.pn.next { background-image: url(../images/pn_next.png); }
.pagination a.pn.prev.off { background-image: url(../images/pn_prev_off.png); }
.pagination a.pn.next.off { background-image: url(../images/pn_next_off.png); }
.pagination span a { border-radius: 30px; line-height: 60px; min-width: 30px; padding: 0 15px; font-size: 20px; color: #000; }
.pagination span a:hover { text-decoration: none; }
.pagination span a.on { background: #FFD042; }
@media screen and (max-width:1200px) {
.projects_list .list ul { gap: 50px; }
.projects_list .list ul li { width: calc(50% - 25px); }
}
@media screen and (max-width:1200px) {
.projects_list { padding: 100px 30px; }
.projects_list .slider { margin: 0 -15% 100px; }
.projects_list .list h3 { font-size: 28px; line-height: 50px; margin-bottom: 30px; }
.projects_list .list .search input { width: 220px; height: 50px; padding-left: 50px; font-size: 15px; }
.projects_list .list .search .bt_search { left: 12px; width: 30px; height: 30px; }
.projects_list .list ul { gap: 40px; margin-bottom: 50px; }
.projects_list .list ul li { width: calc(50% - 20px); }
.projects_list .list ul li .tx { padding: 30px 25px; font-size: 24px; }

.pagination a { margin: 0 4px; }
.pagination a.pn { height: 50px; width: 50px; }
.pagination span a { border-radius: 25px; line-height: 50px; padding: 0 10px; font-size: 16px;}
}
@media screen and (max-width:768px) {
.projects_list { padding: 60px 20px; }
.projects_list .slider { margin: 0 -50% 60px; }
.projects_list .list h3 { font-size: 24px; line-height: 40px; margin-bottom: 25px; }
.projects_list .list .search input { width: 180px; height: 40px; padding-left: 40px; font-size: 13px; }
.projects_list .list .search .bt_search { left: 10px; width: 24px; height: 24px; }
.projects_list .list ul { gap: 10px; margin-bottom: 40px; }
.projects_list .list ul li { width: calc(50% - 5px); }
.projects_list .list ul li .tx { padding: 20px 15px; font-size: 16px; }

.pagination a { margin: 0 3px; }
.pagination a.pn { height: 36px; width: 36px; }
.pagination span a { border-radius: 18px; line-height: 36px; min-width: 20px; padding: 0 8px; font-size: 13px;}
}

.projects_view { padding: 168px 60px 200px; }
.projects_view .wrap { max-width: 1550px; margin: 0 auto; }
.projects_view .wrap .date { font-size: 20px; font-weight: 500; line-height: 300%; margin-bottom: 15px; }
.projects_view .wrap .tit { font-family: var(--tit-fonts); font-size: 72px; font-weight: 500; line-height: 103%; margin-bottom: 45px; }

.projects_view .wrap .con img { max-width: 100%; }
.projects_view .wrap .con .ph { margin-bottom: 100px; }
/* .projects_view .wrap .con .tx { margin-bottom: 100px; text-align: center; } */
.projects_view .wrap .con .tx { margin-bottom: 100px; }
.projects_view .wrap .con .tx dt { font-size: 30px; font-weight: 700; line-height: 133%; margin-bottom: 30px; }
.projects_view .wrap .con .tx dd { display: flex; justify-content: center; }
.projects_view .wrap .con .tx dd li { padding-left: 30px; line-height: 200%; text-align: left; }
.projects_view .wrap .con .tx dd li::before { content: ''; position: absolute; top: 16px; left: 15px; width: 5px; height: 5px; background: #000; border-radius: 100%; }

.projects_view .wrap .slider { margin-bottom: 100px; }
.projects_view .wrap .slider .swiper-slide { background: center center/cover; border-radius: 10px; }
.projects_view .wrap .slider .swiper-slide::before { content: ''; display: block; padding-bottom: 47.7419%; }
.projects_view .wrap .slider .swiper-button-next,
.projects_view .wrap .slider .swiper-button-prev { left: auto; right: auto; width: 80px; height: 80px; background-size: 100% 100%; text-indent: -9999px; }
.projects_view .wrap .slider .swiper-button-next { right: 40px; background-image: url(../images/project_view_slider_bt_next.png); }
.projects_view .wrap .slider .swiper-button-prev { left: 40px; background-image: url(../images/project_view_slider_bt_prev.png); }
.projects_view .wrap .slider .swiper-button-next:hover { background-image: url(../images/project_view_slider_bt_next_ov.png); }
.projects_view .wrap .slider .swiper-button-prev:hover { background-image: url(../images/project_view_slider_bt_prev_ov.png); }

.projects_view .wrap .video { background: center center/cover; border-radius: 10px; overflow: hidden; margin-bottom: 100px; }
.projects_view .wrap .video::before { content: ''; display: block; padding-bottom: 47.7419%; }
.projects_view .wrap .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.projects_view .wrap .video .bt_play { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -9999px; background: rgba(0,0,0,0.4); }
.projects_view .wrap .video .bt_play::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120px; height: 120px; background: url(../images/bt_play.png) 0/100%; }

.projects_view .wrap .pn_list { border-top: 1px solid #C8C8C8; }
.projects_view .wrap .pn_list dl { border-bottom: 1px solid #C8C8C8; line-height: 120px; padding: 0 60px; display: flex; gap: 20px; font-size: 20px; }
.projects_view .wrap .pn_list dl dt { font-weight: 600; width: 55px; }
.projects_view .wrap .pn_list dl dd { width: calc(100% - 75px); }
.projects_view .wrap .pn_list dl dd a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media screen and (max-width:1200px) {
.projects_view { padding: 120px 30px; }
.projects_view .wrap .date { font-size: 16px; margin-bottom: 12px; }
.projects_view .wrap .tit { font-size: 56px; margin-bottom: 35px; }

.projects_view .wrap .con .ph { margin-bottom: 80px; }
.projects_view .wrap .con .tx { margin-bottom: 80px; }
.projects_view .wrap .con .tx dt { font-size: 24px; margin-bottom: 24px; }
.projects_view .wrap .con .tx dd li { padding-left: 24px; }
.projects_view .wrap .con .tx dd li::before { top: 13px; left: 14px; width: 4px; height: 4px; }

.projects_view .wrap .slider { margin-bottom: 80px; }
.projects_view .wrap .slider .swiper-button-next,
.projects_view .wrap .slider .swiper-button-prev { width: 64px; height: 64px; }
.projects_view .wrap .slider .swiper-button-next { right: 32px; }
.projects_view .wrap .slider .swiper-button-prev { left: 32px; }

.projects_view .wrap .video { margin-bottom: 80px; }
.projects_view .wrap .video .bt_play::after { width: 96px; height: 96px; }

.projects_view .wrap .pn_list dl { line-height: 96px; padding: 0 40px; gap: 15px; font-size: 16px; }
.projects_view .wrap .pn_list dl dt { width: 50px; }
.projects_view .wrap .pn_list dl dd { width: calc(100% - 65px); }
}
@media screen and (max-width:768px) {
.projects_view { padding: 90px 20px; }
.projects_view .wrap .date { font-size: 14px; margin-bottom: 10px; }
.projects_view .wrap .tit { font-size: 40px; margin-bottom: 25px; }

.projects_view .wrap .con .ph { margin-bottom: 50px; }
.projects_view .wrap .con .tx { margin-bottom: 50px; }
.projects_view .wrap .con .tx dt { font-size: 20px; margin-bottom: 20px; }
.projects_view .wrap .con .tx dd li { padding-left: 20px; }
.projects_view .wrap .con .tx dd li::before { top: 12px; left: 10px; width: 3px; height: 3px; }

.projects_view .wrap .slider { margin-bottom: 50px; }
.projects_view .wrap .slider .swiper-button-next,
.projects_view .wrap .slider .swiper-button-prev { width: 45px; height: 45px; }
.projects_view .wrap .slider .swiper-button-next { right: 15px; }
.projects_view .wrap .slider .swiper-button-prev { left: 15px; }

.projects_view .wrap .video { margin-bottom: 50px; }
.projects_view .wrap .video .bt_play::after { width: 55px; height: 55px; }

.projects_view .wrap .pn_list dl { line-height: 60px; padding: 0 20px; gap: 10px; font-size: 13px; }
.projects_view .wrap .pn_list dl dt { width: 40px; }
.projects_view .wrap .pn_list dl dd { width: calc(100% - 50px); }
}