@import url("common.css");


/*** Visual ***/
#ch_visual {margin: 56px 0 0; width:100%; height: 300px; overflow: hidden; background:#fff; position: relative;}

#ch_visual .ch_visual_in{width: 100%; height: 100%; position: relative;}
#ch_visual .ch_visual_in .roll{width: 100%; height: 300px;}
#ch_visual .ch_visual_in .roll .v_img { width: 1280px; margin: 60px auto 0; text-align: center;}
#ch_visual .ch_visual_in .roll .v_txt{ width: 1280px; margin: 20px auto 0; text-align: center;}
#ch_visual .ch_visual_in .roll .v_txt h2 { font-size: 28px; font-weight: 700; line-height: normal; }

.lnb_wrap { display: flex; gap: 20px; margin-bottom: 40px;}
.lnb_wrap li {width: 100%;}

.lnb_wrap li .selectBox {
  position: relative;
  width: 100%;
  height: 34px;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.lnb_wrap li .selectBox1 {
    /* border-left: 1px solid #CFCFCF; */
    /* border-right: 1px solid #CFCFCF; */
}
.lnb_wrap li .selectBox2 {
    /* border-right: 1px solid #CFCFCF; */
}
.lnb_wrap li .selectBox .select {
  width: 100%;
  height: inherit;
  font-size: 18px;
  color: #000;
  background: transparent;
  border: 0 none;
  outline: 0 none;
  padding: 5px 10px;
  position: relative;
  text-transform: uppercase;
  z-index: 999;
}
.lnb_wrap li .selectBox .select option {
  background: #fff;
  color: #000;
  padding: 3px 0;
  font-size: 18px;
}

.lnb_wrap li .selectBox .icoArrow {
  position: absolute; 
  top: 5px; 
  right: 10px; 
  z-index: 1; 
  width: 24px; 
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lnb_wrap li .selectBox .icoArrow img {
  width: 100%;
  transition: .3s;
}

.lnb_wrap li .selectBox .select:focus + .icoArrow img {
  transform: rotate(180deg);
}

.project_wrap {display:flex; gap: 20px; margin-bottom: 40px;}
.project_wrap .project_list { position: relative; width: 50%;}
.project_wrap .project_list .tbl_wrap {position: sticky; top: 100px;}
.project_wrap .project_list .tbl_wrap table {width: 100%;border-top: 1px solid #000;}
.project_wrap .project_list .tbl_wrap td {font-size:16px; font-weight:500; letter-spacing: 1; line-height: 120%; color: #333;border-bottom: 1px solid #000; padding: 5px;}
.project_wrap .project_list .tbl_wrap td a:hover {color: var(--main);}
.project_wrap .project_list .tbl_wrap td .td_subject {}
.project_wrap .project_con { width: 50%;}
.project_wrap .project_con .view_index a { display: inline-flex; font-family: var(--eng); text-transform: uppercase; font-weight: 500;}
.project_wrap .project_con .view_title { padding: 0 5px; margin-bottom: 20px;}
.project_wrap .project_con .view_title .subject { font-size: 16px; color: #000; margin-top: 6px; margin-bottom: 10px;}
.project_wrap .project_con .view_title .content {position: relative; display: flex; gap: 20px;}
.project_wrap .project_con .view_title .content li {font-size: 12px; color: #333;}
.project_wrap .project_con .view_title .content li::after {position: absolute; content: ""; margin-top: 3px; margin-left: 10px; width: 1px; height: 12px; background: #CFCFCF;}
.project_wrap .project_con .view_title .content li:last-child::after { display: none;}
.project_wrap .project_con .view_content {padding: 0 !important;width: 100%;border-bottom: 0 !important;}
.project_wrap .project_con .view_content img {width:100% !important; height:auto !important;}
.project_wrap .project_con .view_content a {cursor: default;}
.project_wrap .project_con .bbs_btn_list {display: flex; align-items: center; justify-content: center; gap: 10px;}

.photo_list {display: grid; grid-template-columns: repeat(2, 1fr);  gap: 30px 30px;}
.photo_list dl {position:relative;}
.photo_list dl .checkbox {display:inline-block; position: absolute; left:5px; top:5px; z-index:2;}
.photo_list dl a {display: block; transition:all .3s linear;}
.photo_list dl dt {position:relative; overflow: hidden;}
.photo_list dl dt::after {content:''; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; margin:0; transition:all 0.3s ease-in-out; z-index:-1;}
.photo_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.photo_list dl dt .no_image {display: block;color: #fff;text-align: center;}

.photo_list dl dd.titArea {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}
.photo_list dl dd.titArea .tit {position:absolute; left:0; bottom:42px; width:100%; padding:0 32px; box-sizing:border-box;}
.photo_list dl dd.titArea .tit h4 {display: inline-block; padding: 0 7px; font-size: 0.813rem; font-weight:400; background: #fff; margin-bottom: 10px;}
.photo_list dl dd.titArea .tit h3 {font-size:16px; font-weight:500; letter-spacing: 1; line-height: 120%; color: #333;}

.photo_list dl dd .con { margin-top: 10px;}
.photo_list dl dd .con h4 {display: inline-block; padding: 0 7px; font-size: 0.813rem; font-weight:400; background: #F0F0F0; margin-bottom: 10px;}
.photo_list dl dd .con h3 {font-size:16px; font-weight:500; letter-spacing: 1; line-height: 120%; color: #333; padding: 0 5px; box-sizing: border-box; display: -webkit-box; -webkit-line-clamp: 2; /* 2줄로 제한 */ -webkit-box-orient: vertical; overflow: hidden; /*margin-bottom: 20px;*/}
.photo_list dl dd .con p { font-size: 0.875rem !important; line-height: 140%;}

.photo_list dl:hover dd h3 { color: var(--main);}

.about_wrap {padding: 0 40px; }
.about_wrap .about_ko { margin-bottom: 60px;}
.about_wrap .about_en {font-family: var(--eng);}
.about_wrap p a {color: var(--main); text-decoration: underline;text-underline-offset: 3px;}
.contact_wrap { margin-top: 60px;}
.contact_wrap ul {display: flex; gap: 40px;}
.contact_wrap .address { padding-left:20px; box-sizing:border-box; position:relative; }
.contact_wrap .address::before {content:'\e158'; font-family:var(--icon); font-size:17px; line-height:1; position:absolute; top:6px; left:0; font-weight:400;}
.contact_wrap .address a {color: var(--main); text-decoration: underline;text-underline-offset: 3px;}
.contact_wrap .tel { padding-left:20px; box-sizing:border-box; position:relative; }
.contact_wrap .tel::before {content:'\e0b0'; font-family:var(--icon); font-size:17px; line-height:1; position:absolute; top:6px; left:0; font-weight:400;}
.contact_wrap .tel a {color: var(--main); text-decoration: underline;text-underline-offset: 3px;}
.contact_wrap .contact a { text-transform:uppercase; color: #fff; background: var(--main); padding: 10px 20px; border-radius: 50px;}





/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1700px) { 



}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 



}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 



}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

    #ch_visual {margin: 56px 0 0; height: 240px;}

    #ch_visual .ch_visual_in .roll{ height: 240px;}
    #ch_visual .ch_visual_in .roll .v_img { width: 94%; margin: 30px auto 0;}
    #ch_visual .ch_visual_in .roll .v_txt{ width: 94%;}
    #ch_visual .ch_visual_in .roll .v_txt h2 { font-size: 24px;}
    #ch_visual .ch_visual_in .roll .v_txt .contact_btn {display: none;}


    .project_wrap {flex-wrap: wrap;}
    .project_wrap .project_list { display: none; width: 100%;}
    .project_wrap .project_con { width: 100%; }

    .about_wrap {padding: 0; }

    .contact_wrap ul { flex-wrap: wrap;}
    .contact_wrap .contact { width: 100%; text-align: center;}



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

    #ch_visual .ch_visual_in .roll .v_txt h2 { font-size: 20px;}

    .photo_list {grid-template-columns: repeat(2, 1fr);  gap: 40px 20px;}
    .photo_list dl dd .con h3 {font-size:14px;}

}