@charset "utf-8";

/* 서브 공통 */
/* top */
/* .header_sub { position: fixed; width: 100%; background-color: rgba(255, 255, 255, .5); border-bottom: 1px solid var(--graydb); z-index: 100;}
.header_subContents { width: calc(100% - 140px); margin: 45px auto;}
.header_subContents a { color: var(--black);}
.h1_logoSub { background: url(../images/common/h1_logoSub.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 190px; height: 33px; z-index: 1; } 
.btn_nav.sub { background-image: url(../images/common/hamberger_sub.svg);}
.megamenu li a { color: var(--white);} */
.header_sub { position: relative; width: 100%; z-index: 100;}
.header_subContents { }
.header_subContents a { color: var(--black);}
.header_nav {  }
.h1_logoSub { background: url(../images/common/h1_logoSub.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 190px; height: 33px; z-index: 1; position: absolute; left: 70px; top: 35px;} 
.header_qna { position: absolute; top: 37px; right: 125px; }
.btn_nav.sub { background-image: url(../images/common/hamberger_sub.svg); position: fixed; top: 35px; right: 70px; display: block; z-index: 100;}
.megamenu li a { color: var(--white);}
.h1_logoSubIn { background: url(../images/common/h1_logo.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 190px; height: 33px; z-index: 1; position: absolute; left: 70px; top: 35px; z-index: 999;}

/* contents */
.sub_contents,
.sub_contentsMap { position: relative; width: 100%; padding-top: 7.75rem; padding-bottom: 12.5rem; }
.sub_contentsMap { padding-bottom: 0;}

/* sub title */
.sub_about,
.sub_projects,
.sub_team,
.sub_contact { height: 12.8125rem; padding: 0 4.375rem; display: flex; align-items: flex-end; }
.sub_contact { padding-bottom: 0;}
.h2_titleSub { font-size: 6.25rem; font-weight: 400; position: relative; z-index: -1; }

/* sub_visual */
.about_visual { width: 100%; height: 37.5rem; padding-top: calc(600 / 1920 * 100%); margin-top: -1.875rem; background:center / cover no-repeat url(../images/sub/about_visual.png); background-attachment: fixed; }

/* sub_contents */
.sub_aboutConts{ width: 100%;}

/* about */
.about_title { padding: 12.5rem 0 10.9375rem 0; text-align: center;}
.about_title p { font-size: 2.5rem; font-weight: 400; line-height: 1.6;}
.about_title span { display: inline-block; padding-top: 2.1875rem; font-size: 1.5625rem; font-weight: 100;}

.about_conts{ width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 11.25rem;}
.about_conts:first-child { margin-top: 0;}
.about_contsTitle { width: 41.875%; line-height: 1.6; display: flex; flex-direction: column; /* align-items: center; */ padding: 0 10.3125rem 0 15.3125rem;}
.about_conts:nth-child(even){ flex-direction:row-reverse;}
.about_conts:nth-child(even) > div { padding: 0 15.3125rem 0 10.3125rem;}

.about_contsTitle p { font-size: 1.875rem; font-weight: 400; }
.about_contsTitle span { font-size: 1.125rem; font-weight: 100; letter-spacing: -.5px; padding-top: 3.125rem; }
.about_contsImg { width: 58.125%;}
.about_contsImg img { width: 100%;}


/* projects */
.sub_projectsConts { display: inline-block; width: 100%; padding: 0 4.375rem; box-sizing: border-box;}
.tab {padding: 0 0 45px; margin-top: 110px;}
.tab ul {display: flex; gap: 17px;}
.tab ul li { position: relative; margin: 0 0 0 -1px; border: 2px solid #dbdbdb; border-radius: 5px; background-color: var(--white); transition: all .2s;}
.tab ul li.on {z-index: 2; border-color: var(--purple);}
.tab ul li.on button {background: var(--purple); color: #fff;}
.tab ul li button {width: 100%; padding: 1.1875rem 2.5rem; background: #fff; font-size: 1.75rem; font-weight: 400; color: #000; transition: all .2s;}
.tab_content {display: none; }
.tab_content.on {display: block;}
.ie9 .tab ul:after {content: ""; display: block; clear: both;}
.ie9 .tab ul li {float: left; width: 33.33%; box-sizing: border-box;}
.ie9 .tab ul.no2 li {width: 50%;}
.ie9 .tab ul.no4 li {width: 25%;}
.ie9 .tab ul.no5 li {width: 20%;}

.projects_list { display: flex; justify-content: flex-start; align-items: flex-start; column-gap: 1.25rem; row-gap: 1.25rem; flex-wrap: wrap;}
.projects_list li { width: calc(33.3333333333% - 13.3333333333px); } 
.projects_list li a { display: block; position: relative; transform: translate(0, 0); transition: transform .5s;} 
.projects_list li a:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, #ffffff, #f7f7fa); opacity:0; transition: opacity .5s;}
.projects_list li a img { width: 100%;}
/* .projects_list li a figcaption { display: none;} */
.projects_list li a figcaption { overflow: hidden; position: absolute; left:25%; top: 25%; z-index: 10; width: fit-content; height: 60px; transform: translate(-25%, -25%); }
.projects_list li a figcaption span { display: block; transform: translateY(60px); font-size:17px; text-transform: uppercase; color: var(--black); line-height: 1.8; transition: transform .5s .2s;}
.projects_list li:hover a:before { opacity: .7;}
.projects_list li:hover figcaption span { transform: translateY(0);}



/* team */
.sub_teamConts { display: inline-block; width: 100%; padding: 0 4.375rem; box-sizing: border-box;}
.team_list { display: flex; column-gap: 40px;}
.team_list li { flex: 1;}
.team_list:first-child { margin-top: 80px;}
.team_list:last-child { margin-top: 30px;}

.team_sp,
.team_md,
.team_rd { min-height: 270px; padding: 50px 0 35px 35px;  border-left: 1px solid var(--black); }

.h3_teamSp,
.h3_teamMd,
.h3_teamRd { font-size: 25px;}
.sp_ul,
.md_ul,
.rd_ul { margin-top: 20px;}
.sp_ul li,
.md_ul li,
.rd_ul li { font-size: 17px; color: var(--gray95); padding-bottom: 10px;}

.sp_imgWrap,
.md_imgWrap,
.rd_imgWrap { background-size: cover; background-position: center;}
.sp_imgWrap { background-image: url(../images/sub/team_img01.png);}
.md_imgWrap { background-image: url(../images/sub/team_img02.png);}
.rd_imgWrap { background-image: url(../images/sub/team_img03.png);}

.sp_imgWrap,
.md_imgWrap,
.rd_imgWrap { position: relative; min-height: 700px; overflow: hidden; padding: 318px 46px 128px; margin-top: 30px;}

.h3_spImg,
.h3_mdImg,
.h3_rdImg { font-size: 70px; font-weight: 700; color: var(--white); position: absolute; z-index: 1;}
/* .h3_spImg::before,
.h3_mdImg::before,
.h3_rdImg::before { content: ""; display: block; padding-bottom: 125%;}
.h3_spImg::after,
.h3_mdImg::after,
.h3_rdImg::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0,0,0,.1);} */

.h3_spImg,
.h3_mdImg,
.h3_rdImg { top: -7px; left: calc(100% + 7px); transform-origin: left top; transform: rotate(90deg);}

/* .img_dim { position: absolute; width: 100%; min-height: 700px; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); transition: all .3s; cursor: pointer;}
.img_dim:hover { background-color: rgba(0, 0, 0, 1)} */
.img_hover { position: absolute; padding: 318px 46px 128px; width: 100%; /* min-height: 700px;  */top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); transition: all .3s; cursor: pointer; transition: all 300ms}
.img_hover:hover { background-color: rgba(0, 0, 0, 1); opacity: 1; z-index: 200; cursor: unset;}
.img_hover:hover .h3_spImgHover, 
.img_hover:hover .h3_mdImgHover, 
.img_hover:hover .h3_rdImgHover,
.img_hover:hover .img_hoverUl { opacity: 1;}

.img_hover .h3_spImgHover,
.img_hover .h3_mdImgHover,
.img_hover .h3_rdImgHover { opacity: 0; font-size: 50px; color: var(--white); }
.img_hoverUl { opacity: 0; border-top: 1px solid var(--white); margin-top: 20px;}
.img_hoverUl li { font-size: 23px; color: var(--white); margin-left: 5px; padding-top: 20px;}
.img_hoverUl li::before { content: '-'; margin-right: 5px; }



/* contact */
.sub_contactConts { padding: 4.6875rem 0 0 5.375rem; position: relative;}
.sub_contactConts p { font-size: 1.0625rem; font-weight: 100; color: var(--gray99); position: relative; height: 150px; }
/*.contact_inquiry{ position: relative; max-width: 18.75rem; padding: 1.875rem 4.375rem; border-radius: 3.125rem; background: var(--purple); text-align: center; z-index: 1;}
.contact_inquiry span { font-size: 1.5rem; font-weight: 400; color: var(--white);} */

.sub_contactWrap,
.sub_contactImg { width: 100%; }
.sub_contactWrap { position: relative; margin-top: -2.8125rem; display: block;}
.sub_contactImg { height: 415px; background: center / cover no-repeat url(../images/sub/contact_map01.png); display: flex; align-items: center; justify-content: center;}
.sub_contactImg img { width: 100%;}

.contact_address { /* padding: 3.75rem 0 2.1875rem 24.375rem;  */display: flex; gap: 5.9375rem; /* position: absolute; z-index: 10; left: 50%; top: 330px; width: max-content; transform: translateX(-50%); */}
.contact_address > li { font-size: 1.25rem; font-weight: 400; color: var(--white); display: flex; align-items: center; flex-direction: column; justify-content: center;}
.contact_address > li span { display: block; margin-bottom: 20px;}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
  }
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }
.material-symbols-outlined { font-size: 5.3125rem !important;}

.sub_contactMap { position: relative; width: 100%; max-width: 100%; margin: 0 auto;}
.sub_contactMap > .root_daum_roughmap { width: 100%; padding-bottom: 26.25rem; /* padding-bottom: 56.25%; */}
.sub_contactMap > .root_daum_roughmap .wrap_map { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 26.25rem;  /* height: 100%; */}



/* footer */
.footer_sub { position: relative; width: 100%; padding: 50px 0; background-color: var(--black);}
.footer_subContents { width: calc(100% - 140px); margin: 0 auto;}
.h1_logoFooter { background: url(../images/common/h1_logo.svg) no-repeat; background-size: 100% 100%; display: inline-block; width: 193px; height: 33px; z-index: 1; }
.footer_subContents p { font-size: 14px; color: var(--gray8c);}
.footer_subContents p > span { color: var(--purple80);}