@charset "utf-8";

#portfolio{}
#portfolio .contArea{margin-top: 60px;}
#portfolio .contArea .search_box{}
#portfolio .contArea .search_box form{}
#portfolio .contArea .search_box form .search_form{display:flex; max-width: 675px; margin: 0 auto;}
#portfolio .contArea .search_box form .search_form input{width: calc(100% - 42px); height: 42px; background: transparent; color: #222; font-size:16px; border:none; border-bottom: 1px solid #dddddd; box-sizing:border-box; outline:none}
#portfolio .contArea .search_box form .search_form input::placeholder{font-size:20px; color: #ccc; font-weight:300;}
#portfolio .contArea .search_box form .search_form button{background: transparent; outline:none; box-sizing:border-box; width: 42px; height: 42px; border:none; cursor: pointer;}
#portfolio .contArea .search_box .tag{display:flex; justify-content:center; align-items:center; margin-top: 30px;}
#portfolio .contArea .search_box .tag li{margin-right: 30px;}
#portfolio .contArea .search_box .tag li:last-of-type{margin-right: 0;}
#portfolio .contArea .search_box .tag li a{font-size:16px; color: #999;}
#portfolio .btn_area {display:flex; align-items: center; justify-content:flex-end; margin-top: 60px; }
#portfolio .btn_area a { margin-right: 10px; }
#portfolio .btn_area a:last-child { margin-right: 0;}

#gall_allchk {margin-top: 60px;}

/* 포트폴리오 리스트 -- 게시판 스킨 내 style.css로 옮길 예정 */ 
.photo_list {display: grid; grid-template-columns: repeat(3, 1fr);  gap: 60px 20px; margin-top: 60px;}
.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; border-radius: 15px; }
.photo_list dl dt::after {content:''; width:100%; height:100%; background:var(--main); position:absolute; top:0; left:0; margin:0; transition:all 0.3s ease-in-out; z-index:-1;}
.photo_list dl dt .description {position: absolute; display: none; left: 30px; right: 30px; bottom: 30px; font-size: var(--fs16); font-weight: 400; line-height: 140%; color: var(--grayBg);}
.photo_list dl:hover dt::after {transition:all 0.3s ease-in-out;}
.photo_list dl:hover dt .description { display: block;}
.photo_list dl dt img {width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.photo_list dl:hover dt img {transition:all 0.3s ease-in-out; opacity:0;}

.photo_list dl dd {box-sizing:border-box;}
.photo_list dl dd h4 {color: var(--black); font-size: var(--fs18); font-weight: 600; line-height: 100%; margin:20px 0 0 10px;}

.empty_list {padding:209px 0;text-align:center;font-size: var(--fs18); font-weight: 600;}


.form_table dl{display: flex; flex-wrap:wrap; align-items: center; margin-bottom:100px;}
.form_table dl:last-of-type{margin-bottom:0;}
.form_table dl dt{width: 260px; font-weight:600; font-size:1.125rem; color: var(--title-color);}
.form_table dl dd{width: calc(100% - 260px);}
.form_table dl dd .input_box{display:flex; flex-wrap:wrap;}
.form_table dl dd .input_box .item{position:relative; width: calc(50% - 25px); height: 50px; margin-right: 50px; margin-bottom:20px;}
.form_table dl dd .input_box .item:last-of-type{margin-right: 0;}
.form_table dl dd .input_box .item.w100{width: 100%; margin-right: 0;}
.form_table dl dd .input_box .item input{border:none; border-bottom: 1px solid var(--border); box-sizing:border-box; width: 100%; padding: 10px 20px; font-size:1rem; color: var(--text-color); height: 100%; outline:none; background: transparent;}
.form_table dl dd .input_box .item p{position:absolute; top: 50%; left: 20px; transform:translateY(-50%); font-weight:400; font-size:1.125rem; color: var(--text-color); z-index: -1;}
.form_table dl dd .input_box .item p span{color: var(--main); margin-left: 4px;}
.form_table dl dd .input_box .item p span.cg{color: #aaaaaa; font-weight: 300; font-size:0.875rem; letter-spacing:0.025em;}
.form_table dl dd .input_box .item.h_auto{height: auto;}
.form_table dl dd .input_box .item.h_auto input{height: 50px;}
.form_table dl dd .input_box .item.h_auto .p_ctn{position:relative; margin-bottom:10px;}

.form_table dl dd .input_box .select{box-sizing:border-box;}
.form_table dl dd .input_box .select select{ border:none; border-bottom: 1px solid var(--border); box-sizing:border-box; width: 100%; padding: 0 20px; font-size:1.125rem; color: var(--text-color); height: 100%; outline:none; background: transparent;}
.form_table dl dd .input_box .textarea{height: 340px; border:1px solid var(--border); padding: 20px; box-sizing:border-box; margin-top: 20px; margin-right: 0; overflow: hidden;}
.form_table dl dd .input_box .textarea > div{height: 340px;}
.form_table dl dd .input_box .textarea textarea{ box-sizing:border-box; width: 100%; height: 300px; font-size:1rem; color: var(--text-color); border: none; outline:none; resize:none; padding: 0;}

.form_table dl dd .input_box .box{display:flex;}
.form_table dl dd .input_box .box h4{width: 154px; font-weight:600; font-size:1.125rem; color: var(--title-color); margin-top: 17px;}
.form_table dl dd .input_box .box .f_ctn{width: calc(100% - /* 274px */151px); margin-bottom:30px;}
.form_table dl dd .input_box .box .f_ctn .file_box{ margin-bottom:10px;}
.form_table dl dd .input_box .box .f_ctn .file_box:last-of-type{margin-bottom:0;}
.form_table dl dd .input_box .box .f_ctn .file_box #fileName{height: 50px; width: 272px; box-sizing:border-box; border:none; border-bottom: 1px solid var(--border); padding: 0 20px; font-size:0.875rem; color: var(--text-color); outline:none; background: transparent;}
.form_table dl dd .input_box .box .f_ctn .file_box .file{display:inline-block; position:relative; width: 120px; height: 50px; box-sizing:border-box; background: var(--border); cursor: pointer; border-radius:5px; margin-left: 20px;}
.form_table dl dd .input_box .box .f_ctn .file_box .file span{display:inline-block; width: 100%; height: 100%; text-align: center; line-height:50px; font-size:0.875rem; color: #6c6c6c;}
.form_table dl dd .input_box .box .f_ctn .file_box .file input{display:none}

.form_table dl dd .input_box .choi_box{display:flex;}
.form_table dl dd .input_box .choi_box .choi{display:flex; align-items:center; margin-right: 88px;}
.form_table dl dd .input_box .choi_box .choi input{display:none; }
.form_table dl dd .input_box .choi_box .choi label{cursor: pointer; display:flex; align-items:center;}
.form_table dl dd .input_box .choi_box .choi label > span{position:relative; width: 23px; height: 23px; box-sizing:border-box; border:1px solid var(--border); line-height:1.3em; border-radius:5px; font-weight:600;}
.form_table dl dd .input_box .choi_box .choi label > span i{position: absolute; top: -1px; left: -1px; color: var(--white); font-size:1.375rem; font-weight:bold; opacity: 0;}
.form_table dl dd .input_box .choi_box .choi label p{width: calc(100% - 23px); font-weight:600; font-size:0.875rem; letter-spacing:-0.015em; color: var(--text-color); padding-left: 12px; box-sizing:border-box; ;line-height:1.4em}
.form_table dl dd .input_box .choi_box .choi label p > span{font-weight:400;}
.form_table dl dd .input_box .choi_box .choi input[type="radio"]:checked + label > span{background: var(--main);}
.form_table dl dd .input_box .choi_box .choi input[type="radio"]:checked + label > span i{opacity: 1;}

.form_table dl dd .input_box .color_box{display:flex;}
.form_table dl dd .input_box .color_box .color{display:flex; align-items:center; margin-right: 88px;}
.form_table dl dd .input_box .color_box .color .colorInput {width: 20px; height: 20px; background: #FFF; border: 1px solid #000; cursor: pointer;}
.form_table dl dd .input_box .color_box .color .colorName p{width: calc(100% - 23px); font-weight:600; font-size:0.875rem; letter-spacing:-0.015em; color: var(--text-color); cursor: pointer; padding-left: 12px; box-sizing:border-box; ;line-height:1.4em}

.form_table dl dd .input_box .color_box .chk{display:flex; align-items:center;}
.form_table dl dd .input_box .color_box .chk input{display:none; }
.form_table dl dd .input_box .color_box .chk label{cursor: pointer; display:flex; align-items:center;}
.form_table dl dd .input_box .color_box .chk label > span{position:relative; width: 23px; height: 23px; box-sizing:border-box; border:1px solid var(--border); line-height:1.3em; border-radius:5px; font-weight:600;}
.form_table dl dd .input_box .color_box .chk label > span i{position: absolute; top: -1px; left: -1px; color: var(--white); font-size:1.375rem; font-weight:bold; opacity: 0;}
.form_table dl dd .input_box .color_box .chk label p{width: calc(100% - 23px); font-weight:600; font-size:0.875rem; letter-spacing:-0.015em; color: var(--text-color); padding-left: 12px; box-sizing:border-box; ;line-height:1.4em}
.form_table dl dd .input_box .color_box .chk label p > span{font-weight:400;}
.form_table dl dd .input_box .color_box .chk input[type="checkbox"]:checked + label > span{background: var(--main);}
.form_table dl dd .input_box .color_box .chk input[type="checkbox"]:checked + label > span i{opacity: 1;}

.form_table .note {font-size: 0.75rem; color: var(--text-color-light); margin-top: 5px;}
.form_table .btn_area {display:flex; align-items: center; justify-content: center;margin-top: 60px;}
.form_table .btn_area a { margin-right: 10px; }

#photo_view .photo_img {margin-top: 72px;}
#photo_view .photo_img img { max-width: 100%; border-radius: 10px;}
#photo_view a.view_image { cursor: default;}

#photo_view .photo_about { display: flex; margin: 40px 0 224px 0; padding: 44px 45px; border-radius: 10px;}
#photo_view .photo_about .left {width: 60%;}
#photo_view .photo_about .left h4 { font-size: 2.625rem; font-weight: 600; line-height: 1.2;}
#photo_view .photo_about .left .description {font-weight: 300; margin-top: 14px;}
#photo_view .photo_about .right {display: flex; flex-wrap: wrap; justify-content: space-between; width: 40%; margin-left: 80px;}
#photo_view .photo_about .right dl {width: 50%;}
#photo_view .photo_about .right dt { font-weight: 600;}
#photo_view .photo_about .right dd {font-weight: 300;}
#photo_view .photo_about .right dd a {text-decoration: underline;}

#photo_view .photo_content p { font-weight: 300;}
#photo_view .btn_area {display:flex; align-items: center; justify-content:flex-end;margin-top: 60px;}
#photo_view .btn_area a { margin-right: 10px; }
#photo_view .btn_area a:last-child { margin-right: 0;}

/* .bo_visual {display:none !important;} */

/* #bo_v_con div { position: relative; margin-bottom: 1rem; }
#bo_v_con img { margin-bottom: 1rem; }
#bo_v_con iframe { position: absolute; width: 100%; height: 100%; }
#bo_v_con .video { position: relative; width: 100%;	padding-bottom: 56.25%;	border-radius: 2px;	overflow: hidden; }
#bo_v_con .video iframe { position: absolute; width: 100%; height: 100%; } */


/*******************************************************************************
    @media  ~1180px               
*******************************************************************************/
@media all and (max-width:1180px){
    .photo_list { grid-template-columns: repeat(2, 1fr);  gap: 60px 50px;}
}

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

    .form_table dl{margin-bottom:50px;}
	.form_table dl dt{width: 100%; margin-bottom:20px;}
    .form_table dl dd{width: 100%;}
    .form_table dl dd .input_box .choi_box{margin-bottom:40px;}
    .form_table dl dd .input_box .chk_box{margin-bottom:40px;}
	.form_table dl dd .input_box .select{padding-right: 0;}

    .form_table dl dd .input_box .item .plus_input{right: 0;}

    .form_table dl dd .input_box .box{flex-wrap:wrap; width: 100%;}
    .form_table dl dd .input_box .box h4{width: 100%; margin-bottom:10px;}
    .form_table dl dd .input_box .box .f_ctn{ width: 100%;}
	.form_table dl dd .input_box .box .f_ctn .file_box #fileName{width:calc(100% - 145px);}

}

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

    #portfolio .contArea .search_box form .search_form{max-width: none;}
    #portfolio .contArea .search_box .tag{flex-wrap:wrap; justify-content:flex-start; margin-top: 15px;}
    #portfolio .contArea .search_box .tag li{margin-bottom:6px;}

    .form_table dl dd .input_box .item{width: 100%; margin-right: 0;}
    .form_table dl dd .input_box .item.tel span{font-size:1rem;}
    .form_table dl dd .input_box .item.email select{font-size:1rem;}
    .form_table dl dd .input_box .item.email span{font-size:1rem;}
    .form_table dl dd .input_box .item p{font-size:1rem;}
    .form_table dl dd .input_box .select select{font-size:1rem;}
    .form_table dl dd .input_box .textarea textarea,
	.form_table dl dd .input_box .textarea{height: 220px;}
    .form_table dl dd .input_box .box .f_ctn .file_box{width: 100%;}

    #photo_view .photo_about {flex-wrap:wrap;}
    #photo_view .photo_about .left {width: 100%;}
    #photo_view .photo_about .right {width: 100%; margin-left: 0;margin-top: 60px;}
    #photo_view .photo_about .right dl {margin-bottom:40px;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
    .photo_list { grid-template-columns: repeat(1, 1fr);  gap: 60px 50px;}
}

/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
    .form_table dl dt{width: 260px; font-weight:600; font-size:1.25rem; color: var(--title-color); margin-top: 6px;}

    .form_table dl dd .input_box .item input{font-size:0.875rem;}
    .form_table dl dd .input_box .item.tel span{font-size:0.875rem;}
    .form_table dl dd .input_box .item.email select{font-size:0.75rem;}
    .form_table dl dd .input_box .item.email span{font-size:0.875rem;}
    .form_table dl dd .input_box .item p{font-size:0.875rem;}
    .form_table dl dd .input_box .select select{font-size:0.875rem;}
    .form_table dl dd .input_box .textarea textarea{ font-size:0.875rem;}

    .form_table dl dd .input_box .choi_box{flex-wrap:wrap; justify-content: space-between; width: 100%;margin-bottom:20px;}
    .form_table dl dd .input_box .choi_box .choi{ width: 50%; margin-right: 0;margin-bottom: 20px;}

    .form_table dl dd .input_box .box h4{width: 154px; font-weight:600; font-size:1.125rem; color: var(--title-color); margin-top: 17px;}

    #photo_view .photo_about { padding: 24px 20px;}
    #photo_view .photo_about .left h4 { font-size: 2rem; font-weight: 600; line-height: 1.2;}
    #photo_view .photo_about .right dl {width: 100%;margin-bottom:40px;}
    #photo_view .photo_about .right dl:last-child{margin-bottom:0;}
}