@charset "utf-8";

/* 서브페이지 기본 세팅 s */
.contents * {line-height:140%}

ol.basic { margin-top:20px;}
ol.basic > li {list-style-type:decimal; margin-left:17px;  border-bottom: 1px dashed #ddd;  padding:7px 0 7px 10px;}
ol.basic > li > ul { margin-top:5px; color:#000; margin-bottom:5px;}
ol.basic > li > ul li {  padding:0 0 0 10px;}
.finish { margin-top:70px; margin-bottom:120px;}


ul.basic {margin-top: 15px;font-family: 'Open Sans', sans-serif;}
ul.basic li{padding-left: 10px; position: relative; margin-bottom: 5px; line-height: 150%; word-break: keep-all;}
ul.basic li:last-child {margin-bottom: 0;}
ul.basic li:before {width: 2px; height: 2px; position: absolute; background-color: #333; content: ""; top: 12px; left: 0;}

/* h3, .h3 { word-break: keep-all; margin-top:35px; color:#005383; font-size:26px; font-weight: 400; vertical-align: middle; letter-spacing: -1px; position: relative; padding-left: 34px; line-height: 140%;} */
/* h3::before, .h3::before { content:''; display: inline-block; width:22px; height:22px;  background:url("/resources/img/sub/h3_ico.png") center no-repeat; vertical-align: middle; position: absolute; left:0; top:8px;} */
/* h4, .h4 { word-break: keep-all; margin-top:25px;  font-size:20px; font-weight: 500;line-height: 140%;} */
.c0 { margin-top: 0;}
.h3box { position: relative; margin-top:55px;}
.h3box h3, .h3box h4 { display: inline-block; margin-top: 0;}
.h3box::after {clear: both;  content: ''; display: block;}
p.basic { margin-top: 10px;}
p.basic.c0 {margin-top: 0;}


select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
button {/* width: 100%; height: 100%; */ background: none; border: none; cursor: pointer;}

table.basic thead th {background-color: #ececec;}
table.basic tbody th {background-color: #f6f6f6;}
table.basic tbody th.th {background-color: #ececec;}
table.basic tbody td.th {background-color: #f6f6f6;}

/* flicking */
.f_wrapper { border-radius:10px; width:100%; margin-top: 40px;}
.f_wrapper .f_wrapper_inner {overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;}
.f_wrapper .touch {display:none; background:url("/resources/img/common/ico_flicking.png") left 3px top -2px no-repeat; height:27px; background-size:contain; padding:0 0 0 36px; line-height:27px; margin-bottom:10px;}
.f_wrapper .touch.active {display: block;}
.f_scroller {display:block; height:100%; padding:0; width:100%; text-align:left;}
.f_wrapper .list_table,.f_wrapper .colum_table { margin-top:20px;}
.flicking {min-width: 900px /* !important */;}
.line_dot { border-bottom: 1px dotted #ddd; display: block; margin: 20px 0 10px;}
.c_box { word-break: keep-all; margin-top:20px; width:100%; height: 100%; padding:20px 30px; box-sizing: border-box; border:3px solid #ddd; position: relative;} 


/* print_youtube 기본설정값  */
.prt_video_wrap {display: block; width: 100%; height: 100%;}
.prt_video {position: relative; width: 100%; height: auto; padding-bottom: 56.75%; overflow: hidden;}
.prt_video .print_youtube {position: absolute; width: 100%; height: 100%;}
.prt_video .print_youtube img {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); cursor: pointer;}
.prt_video .prt_video_view {display: none; position: absolute;  width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
.prt_video .prt_video_view iframe {width: 100%; height: 100%;}
.prt_video .prt_btn_play {position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); background: url(/resources/img/main/prt_btn_play.png) no-repeat center/cover; cursor: pointer; z-index: 2;}
.prt_video:hover .prt_btn_play {background: url(/resources/img/main/prt_btn_play_hover.png) no-repeat center/cover;}

/*라디오*/
input[type=radio] + label {display: inline-block; cursor: pointer; line-height: 18px; padding-left: 27px; background: url("/resources/img/sub/rd_off.png") left/18px no-repeat; margin-right: 10px;}
input[type=radio]:checked + label { background-image: url("/resources/img/sub/rd.png"); }
/*체크박스*/
input[type=checkbox] + label {display: inline-block; cursor: pointer; line-height: 18px; padding-left: 27px; background: url("/resources/img/sub/chk_off.jpg") left/18px no-repeat;}
input[type=checkbox]:checked + label { background-image: url("/resources/img/sub/chk.jpg"); }


table.basic {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; border-right:1px solid #ddd;  border-left: 1px solid #ddd; table-layout: fixed;font-family: 'Noto Sans KR', sans-serif; font-weight: 300; min-width: 1024px;}
table.basic th, table.basic td {border-top: 1px solid #ddd; border-right: 1px solid #ddd; width: 30%; padding: 10px 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: break-all; white-space: normal;}
table.basic td:last-child {width: 30%;}
table.basic td:last-child {border-right: none;}
table.basic img {width: 100%;}
/* 서브페이지 기본 세팅 e */

#container.sub {position: relative;}
/* #container.sub {overflow: hidden; position: relative;} */


.sub_vis {width: 100%; height: 330px; position: relative; background: url("/resources/img/sub/sub_vis01.jpg")no-repeat center/cover;}
.sub_vis02 {background: url("/resources/img/sub/sub_vis02.jpg")no-repeat center/cover;}
.sub_vis03 {background: url("/resources/img/sub/sub_vis03.jpg")no-repeat center/cover;}
.sub_vis04 {background: url("/resources/img/sub/sub_vis04.jpg")no-repeat center/cover;}
.sub_vis05 {background: url("/resources/img/sub/sub_vis05.jpg")no-repeat center/cover;}
.sub_vis06 {background: url("/resources/img/sub/sub_vis06.jpg")no-repeat center/cover;}
.sub_vis h2 {color: #fff; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; width: 100%;}
.sub_vis h2 .en_tit { font-weight: 600; letter-spacing: 8px;}
.sub_vis h2 .tit {font-size: 32px; font-weight: 600; margin-top: 14px;letter-spacing: 7px; display:block;}


.lnb {height:65px; background:#f9f9f9;border:1px solid #ddd; border-top:0; border-left: 0; z-index:1; position: absolute; left:50%; transform: translateX(-50%); top: 298px; font-size: 17px; box-sizing: border-box;width: 100%; margin: 0 auto; max-width: 1100px; display: none;}
.lnb div {float: left;}
.lnb .home {width: 65px; height: 100%; background: #005383 url("/resources/img/common/home_ico.png")no-repeat center;}
.lnb .home a {display: inline-block; width: 100%; height: 100%; text-indent: -9999px;}
.lnb .depth1_name { border-right: 1px solid #ddd; min-width:220px; display: table; height: 100%;  box-sizing: border-box;}
.lnb .depth1_name span {color: #555; font-size: 18px; display: table-cell;vertical-align: middle; padding:0 30px; text-align: center; width: 100%; height: 100%; box-sizing: border-box; font-weight: 500;}
.lnb .lnb_menu { display: inline-block;  box-sizing: border-box; max-width: 260px; width: 100%; position: relative; z-index: 1; vertical-align: middle;}
.lnb .lnb_menu .lnb_title {padding: 24px 0; padding-left:26px; display: block; font-size:17px; cursor: pointer;  border-right:1px solid #ddd}
.lnb .lnb_menu ul { border-top: none; border-bottom: none;box-sizing: border-box; width:100%; display: none; position: absolute; left:0;}
.lnb .lnb_menu li {  box-sizing: border-box; }
.lnb .lnb_menu li a { font-size: 15px; transition: .3s ease; color: #eee; box-sizing: border-box; display: block; padding: 10px 20px; width: 100%; border: 1px solid #206a94; border-top: 0; background: #005383 }
.lnb .lnb_menu li a:hover, .lnb .lnb_menu li.on a {background-color: #0e253c;}
.lnb .lnb_menu li a span { }
.lnb .lnb_menu li.on a span {vertical-align: middle; display: table-cell; transform: skew(-0.03deg);}

.lnb .lnb_menu .more_btn {width: 18px; height: 10px; background: url("/resources/img/sub/lnb_ico.png")no-repeat left 0px bottom 0px; position: absolute; top: 50%; right: 10px; text-indent: -99999px; transform: translateY(-50%); cursor: pointer; transition: all .3s ease-in-out;}
.lnb_menu .more_btn.more_add { transform: translateY(-50%) rotate(-180deg); top: 45%;}

/* pdi */
.pdi_sub_bg {width: 100%; height: 900px;}
.pdi_bg01 { background:url('/resources/img/sub/pdi_sub_vis01.jpg') no-repeat center/cover;}
.pdi_bg02 { background:url('/resources/img/sub/pdi_sub_vis02.jpg') no-repeat center/cover;}
.pdi_bg03 { background:url('/resources/img/sub/pdi_sub_vis03.jpg') no-repeat center/cover;}
.pdi_bg04 { background:url('/resources/img/sub/pdi_sub_vis04.jpg') no-repeat center/cover;}
.pdi_bg05 { background:url('/resources/img/sub/pdi_sub_vis05.jpg') no-repeat center/cover;}
.pdi_bg06 { background:url('/resources/img/sub/pdi_sub_vis06.jpg') no-repeat center/cover;}
.pdi_bg07 { background:url('/resources/img/sub/pdi_sub_vis07.jpg') no-repeat center/cover;}

/*contents s*/
.contents {padding: 100px 0 240px 0;  min-height:268px;}
.contents .inner {width:97%; max-width: 1440px; margin: 0px auto; position: relative;}
.contents .sub_tit{font:500 24px/100% 'Open Sans'; margin-bottom:50px;}
.contents .sub_tit.ko_b{margin-top: 70px;}
.tit_wrap {width:46%; background:white; padding-top: 29px; height: 120px; position: absolute; top:790px;}
.tit_box { width:97%; max-width: 1440px; margin:0px auto; position: absolute; left:50%; transform: translateX(-50%); top:790px;}
.tit_box p{ font:500 24px/100% 'Open Sans';  margin-bottom:16px;}
.tit_box h2{ font:300 50px/100% 'Open Sans';}
.tit_box .white_box {height:120px; background:white; width:47%; padding-top: 30px;}

/* member */
.member .member_wrap{width:100%;}
.member .member_wrap .member_box{width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.member .member_wrap .member_box li{width:20%; position: relative; overflow: hidden; text-align: center;}

.member .member_wrap .member_box li img {width:100%; height:100%; transition: 0.3s; z-index: -1; position: relative;}

.member .member_wrap .gray_info {width:100%; height: 100%; text-align: right; position: absolute; color:#fff; box-sizing: border-box; background:rgba(187, 187, 187, 0.45);  opacity: 0; transition: 0.3s;}.member .member_wrap .gray_info.no_img {opacity: 1;}
.member .member_wrap .info_inner {width:100%; position: absolute; bottom: 27px; right: 0px; padding:0 30px; box-sizing: border-box;}
.member .member_wrap .info_n {font:500 23px/100% 'Open Sans'; margin:3px;}
.member .member_wrap .info_c {font:300 18px/100% 'Open Sans'; }

.member .member_wrap p.no_img {width:100%; color:white; position: absolute; top:50%; font-size: 36px; left:50%; transform: translate(-50%,-50%);}

.member .member_wrap .member_box li:hover .gray_info { opacity: 1; }
.member .member_wrap .member_box li:hover img { scale: 1.1; }

.member .member_wrap .member_box .red {color:red; font-weight:500;}


/* project 상세페이지 */
.contents.detail{padding:0 0 240px 0;}
.contents.detail >.inner {width:100%;}
.detail .sub_tit {padding-top:120px;}
.detail .sub_tit a{display: inline-block;}
.detail .sub_tit a::before { content: ""; width:18px; height:18px; background: url('/resources/img/sub/project_i.png') no-repeat center/contain; display: inline-block; margin-right: 10px;}
.detail .project_wrap {width:100%;}
.detail .project_box {height: 100%;}
.detail .project_box .infobox {width:47%; position: sticky; top:0; float:left;}
.detail .project_box .infobox .tit {width:100%; font:500 32px/100% 'Open Sans'; margin-bottom:40px;}
.detail .project_box .infobox .tit::after {content: ""; width:100%; height:1px; background-color: #333333; display: block; margin-top: 6px;}
.detail .project_box .infobox ul {margin-bottom:94px;}
.detail .project_box .infobox ul li{font:400 20px/100% 'Open Sans'; margin-bottom:19px;}
.detail .project_box .infobox .des {width:90%; font:400 20px/180% 'Open Sans'; margin-bottom:150px;}

.detail .project_box .imgbox {width:53%; float:left;}
.detail .project_box .imgbox .main_img {width:100%; margin-bottom:40px;}
.detail .project_box .imgbox ul{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;-webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;}
.detail .project_box .imgbox ul li { width:47.50%; margin-bottom: 40px; }
.detail .project_box .imgbox ul li .thumb-img-box { overflow: hidden; position: relative; }
.detail .project_box .imgbox ul li .thumb-img-box img {width:100%; height:100%;  object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* contact */
.contact h3{font:500 30px/100% 'Open Sans'; margin-bottom: 50px;}
.contact .flex_box {margin-bottom: 100px; position: relative;}
.contact .flex_box1 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
.contact .flex_box2 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: 80px;}
.contact .find_l {visibility:hidden; position: absolute; width:20%; height:auto; z-index: 1; transition: .3s;}
.contact .find_l.on {visibility:visible;}
.contact .find_l h3{font:500 30px/100% 'Open Sans'; margin-bottom: 30px;}
.contact .find_l h3::after{width:50px; height:3px; content: ""; background-color: black; opacity: 0.25; display: block;margin-top: 25px;}
.contact .find_l li{display: none; padding: 20px 20px 25px 20px; border: solid 1px #888; box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1); box-sizing: border-box; background: white;}
.contact .find_l li.on{display: block;}
.contact .find_l p{font:400 16px/160% 'Open Sans';}
.contact .find_l .local{font:500 24px/100% 'Open Sans'; margin-bottom: 24px;}
.contact .find_l .local_box{margin-bottom: 16px;}
.contact .find_l .local_box:last-child{margin-bottom: 0px;}
.contact .find_l .local_info{font:500 18px/100% 'Open Sans'; margin-bottom: 10px;}

.contact .find_r {width:100%; position:relative;}
.contact .find_members {position: absolute; bottom:10%; z-index: 1;}
.contact .find_members li{font:400 14px/100% 'Open Sans'; margin-bottom: 16px; cursor: pointer;}
.contact .find_members li span{display: inline-block; width:30px; margin-right: 10px; height: 20px; position: relative; top: 4px;}
.contact .find_members li:hover span{border:solid 4px #ff8282; box-sizing: border-box;}
.contact .find_members li:nth-child(1) span{background-color: #f4a78d;}
.contact .find_members li:nth-child(2) span{background-color: #ef8164;}
.contact .find_members li:nth-child(3) span{background-color: #e9563d;}
.contact .find_members li:nth-child(4) span{background-color: #e51a23;}

.contact .find_button {margin-left:20px; margin-bottom: 82px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.contact .find_button li {width:50px; height:10px; background-color: #F3B9B6; margin-right: 7px; float:left; }

.contact .find_map {width:100%; position: relative;}
.contact .find_map img{width:100%;}

.contact .find_map .minneapolis {position: absolute; width:5%; height:5%; left:23.2%; top:28.5%; border-radius: 50px; z-index: 2;}
.contact .find_map .hawaii {position: absolute;width:5%; height:5%; left:3%; top:42%; border-radius: 50px; z-index: 2; }
.contact .find_map .los_angeles {position: absolute; width:5%; height:5%; left: 15.5%; top: 34.2%; border-radius: 50px; z-index: 2;}
.contact .find_map .china {position: absolute; width:5%; height:5%;left:77%; top:35%; border-radius: 50px; z-index: 2; }
.contact .find_map .korea {position: absolute; width:5%; height:5%; left:82.5%; top:33%; border-radius: 50px; z-index: 2;}
.contact .find_map .c1 {position: absolute; background-color: white; width:8px; height:8px; opacity: 0.8; border-radius: 62px; z-index: 2;left: 50%; top: 50%; transform: translate(-50%,-50%);}
.contact .find_map .c2 { background-color: #f8aca8; animation-name: spread; animation-iteration-count:infinite; animation-duration: 3s; position: absolute; width:40px; height:40px; border-radius: 62px; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%);left: 50%; top: 50%; transform: translate(-50%,-50%);}
.contact .find_map .c3 { background-color: #f8aca8; animation-name: spread2; animation-iteration-count:infinite; animation-duration: 3s; position: absolute; width:40px; height:40px; border-radius: 62px; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); left: 50%; top: 50%; transform: translate(-50%,-50%);}
.contact .find_map .minneapolis .c1{background-color: #f1ff20;}
.contact .find_map .minneapolis .c2{background-color: #f6f8d4;}
.contact .find_map .minneapolis .c3{background-color: #f6f8d4;}

.contact .offices_li .pop_img { visibility:hidden; position: absolute; transition: .3s; top:0; opacity: 0;}
.contact .offices_li .defalut {display: block; position:relative; opacity: 1;}
.contact .offices_li .on { visibility:visible; opacity: 1;}
.contact .off_info { position: absolute; top:-20px; left:50%; transform: translateX(-50%);padding: 0 14px; background: rgb(255 123 123 / 50%); color: white; font-size: 14px; z-index: 2;}

@keyframes spread {
    0% { width: 0%; height: 0%; }
    90% {opacity: 0.4;}
    100% {  width: 40px; height: 40px; opacity: 0;}
}    
@keyframes spread2 {
    0% { width: 0%; height: 0%; }
    40% { width: 0%; height: 0%; }
    90% {opacity: 0.6;}
    100% {  width: 40px; height: 40px; opacity: 0;}
}    


.contact .map{width:49.5%; height:390px;}

.contact .bt_info {width:47%;}
.contact .bt_info ul {width:100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.contact .bt_info li {width: 45%; height: 144px; border-top:1px solid #ddd; box-sizing: border-box; padding:30px;}
.contact .bt_info .txt {font-weight: 600;font-size: 20px; margin-bottom: 12px;}
.contact .bt_info .num,.contact .bt_info .tit {font-size: 16px; color:#333; line-height: 130%;}
.emt-space { display: inline-block; width: 28px; }


/* form */
.form_wrap {width:50%; padding:0px 0px 0px 36px;}
.form_wrap .form_item {width:100%; align-items: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; }
.form_wrap .form_item.memo{align-items: normal; margin-bottom: 0px;}
.form_wrap .form_item .form_title{font:600 20px/100% "Noto Sans KR"; width:100px; line-height: 45px;}
.form_wrap .form_item .form_desc {font:400 16px/100% "Noto Sans KR"; width: calc(100% - 100px);}
.form_wrap .form_item .form_desc input {width:100%; height: 45px; border:solid 1px #888888; background-color: #fff; padding:0 14px; box-sizing: border-box;}
.form_wrap .form_item .form_desc textarea {width:100%; height:190px; resize: none; border:solid 1px #888888;  padding:10px 14px;}

.d-flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top:18px; align-items: end; box-sizing: border-box;}
.d-flex div{margin-bottom: 0px !important;}

.form_wrap .form_item.cap {width:300px; max-width: 350px;}
.form_wrap .form_item.cap .form_desc {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%;}
.form_wrap .form_item.cap .capt_btn {display: none;}
.form_wrap .form_item.cap img {width:100px; height: 36px;}
.form_wrap .form_item.cap input {height: 36px; border: solid 1px #ddd; width: 48%; margin-right: 4%;}
.form_wrap .form_item.cap label { width:16px; height: 16px; background:url('/resources/img/main/capt_btn.png') no-repeat center; background-size: contain; display: inline-block; margin-top: 9px;}

.form_wrap .form_item.agree {width:68%;}
.form_wrap .form_item.agree .form_desc {width:100%; font:400 14px/140% 'Noto Sans KR'; color:#222;}
.form_wrap .form_item.agree .form_desc .agree_chk {padding-left: 5%;}
.form_wrap .form_item.agree .form_desc .agree_chk input {width:12px; height: 12px; border: solid 1px #888888; border-radius: 0px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; outline: 0; border-radius: 0px; margin: -2px 0 0 10px; padding:0;}
.form_wrap .form_item.agree .form_desc .agree_chk input[type="checkbox"]::after { border: solid #fff; border-width: 0 2px 2px 0; content: ''; display: none; width: 45%; height: 64%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -60%) rotate(45deg); }
.form_wrap .form_item.agree .form_desc .agree_chk input[type="checkbox"]:checked {background: #E3282F ; border-style: none;}
.form_wrap .form_item.agree .form_desc .agree_chk input[type="checkbox"]:checked::after { display: block;}

.basic_form_btn {width:213px; margin-top: 42px; float:right;}
.basic_form_btn button {width:100%; border: solid 1px #E3282F; color:#E3282F; background-color: transparent; text-align: center; padding:13px 0px; transition: 0.3s ease-out; cursor: pointer;}
.basic_form_btn button:hover{color:white;}
.basic_form_btn button::before {content: ''; position: absolute; left: 0px; bottom:0px; z-index:-1; width: 100%; height:100%; background: transparent; box-shadow: inset 0px 0px 0px #E3282F; display: block; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
.basic_form_btn button:hover::before {box-shadow: inset 300px 0px 0px #E3282F;}

@keyframes blink1 {
    0% { background-color: rgba(255,255,255,0.1); top: 8px;}
    50% { background-color: rgba(255,255,255,0.5);}
    100% { background-color: rgba(255,255,255,1); top: 15px;}
}

/* philoshopy */
.contents.phi{padding:140px 0px 220px 0px;}
.phi h3{font:500 32px/100% 'Open sans'; margin-bottom: 28px;}
.phi .sec {padding-bottom: 140px;}
.phi .ds_phi{width:100%; height:520px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; background: url('/resources/img/pdi/sub/phi_bg01.jpg') no-repeat center/cover; margin-bottom: 34px;}
.phi .ds_phi li{width:20%; height: 50%; border: solid 1px #fff; text-align: center; color:white; font:500 24px/100% 'Open Sans'; box-sizing: border-box; padding-top: 7.5%;}
.phi .ds_phi span {font-size:34px;}

.phi .phi_des_wrap{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap;}
.phi .phi_des_l {width:50%; box-sizing: border-box; padding-right:30px; border-right:solid 1px rgba(0, 0, 0, 0.15);}
.phi .phi_des_l .col_f{height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.phi .phi_des_l p {font: 400 18px/160% 'Open sans'; text-align: justify;}
.phi .phi_des_r {width:50%; box-sizing: border-box; padding-left:30px;}
.phi .phi_des_r p{font: 400 18px/160% 'Open sans'; text-align: justify; margin-bottom: 31px;}
.phi .phi_des_r p:last-child{margin-bottom: 0px;}

.phi .ds_app {width:100%; height:640px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background: url('/resources/img/pdi/sub/phi_bg02.jpg') no-repeat center/cover;}
.phi .ds_app li{width:34%; height: 100%; border: solid 1px #fff; color:white; font:500 24px/120% 'Open Sans'; text-align: center; box-sizing: border-box; padding: 20% 1%; position: relative; transition: 0.3s ease-out;}
.phi .ds_app li span{font-size: 34px;}
.phi .ds_app li.on{width:73%; padding:32px 2% 30px; text-align: justify;}
.phi .ds_app li.on::after{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 100%);}
.phi .ds_app li.on p{position: relative; z-index: 1;}
.phi .ds_app li.off{width:14%; padding:15% 1%;}

.app_des{display: none;}
.app_des.on{display: block; position: relative; z-index: 1; margin-top:20px;}
.app_des p{font:400 18px/150% 'Open Sans'; text-align: justify; margin-bottom: 10px;}
.app_des p:last-child{margin-bottom: 0px;}

.sus p{font:400 18px/150% 'Open Sans'; margin-bottom: 16px; text-align: justify;}
.sus p:last-child{margin-bottom: 0px;}

/* about */
.about h3 {font:500 32px/100% 'Open sans'; margin-bottom: 32px;}
.about .ceo_wrap {text-align: justify; margin-bottom: 152px;}
.about .ceo_l .ceo_tit {font:450 22px/160% 'Open Sans'; margin-bottom: 18px;}
.about .ceo_l p {margin-bottom: 16px; font:400 18px/160% 'Open Sans'; }

.about .ceo_r {float:right; padding-left:3%; text-align: end; width:32%; position: relative; min-width: 300px;}
.about .ceo_r .ceo_txtbox {background: rgb(0,0,0,0.6); position: absolute; bottom: 0px; right: 0px; width: 170px; height: 72px;}
.about .ceo_r p {position: absolute; top:16px; right:16px; color:white;}
.about .ceo_r p:first-child{font:500 19px/100% 'Open Sans'; }
.about .ceo_r p:nth-child(2){font:300 15px/100% 'Open Sans';top:42px;}
.about .ceo_r img{width:100%; background-color: #D0D8DB;}

.about .ser_txt {width:100%; font:400 18px/160% 'Open Sans'; text-align: justify; margin-bottom: 32px;}
.about .ser_wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    position: relative;
}
.about .ser_wrap img{width:100%; height: 100%; object-fit: cover;}
.about .ser_50 {width:50%; min-height: 320px; position: relative;}
.about .ser_25 {width:25%; min-height: 320px; position: relative;}
.about .ser_tit {font: 450 22px/130% 'Open Sans'; padding:26px 30px 12px; box-sizing: border-box;}
.about .ser_des {font:400 18px/150% 'Open Sans'; text-align: justify; padding:0px 30px 30px; box-sizing: border-box;}
.about .img_txt {position: absolute !important; color:white;}
.about .txt-e p {text-align: justify; text-align-last: right;}
.about .tablet-b {display: none;}

    /* common.css */
.sec_tit{position: relative; text-align: left; text-transform: uppercase; color:#aacd06; font-family: 'Montserrat'; word-break: keep-all;}
.sec_tit_b{text-align: center;}
.sec_tit_b:before{position: absolute; content: ""; display: block; width: 1px; height: 75px; background-color: #aacd06; top: -100px; left: 50%;}
.sec_tit .txt{font-size:15px; font-weight: 300; letter-spacing: 2px;}
.sec_tit .tit{font-size: 40px; font-weight: 700;}

.bold{font-weight: 800;}
.tb_btn{position:relative; color: #aacd06; border: 1px solid #aacd06; width:260px; height: 50px; line-height: 50px; text-align: center; vertical-align: middle; display: block; font-weight: 600; font-family: 'Montserrat'; text-transform: uppercase; font-size: 15px; transition:all 0.5s; box-sizing:border-box; z-index: 10;}

.tb_btn:before { content:''; position:absolute; width:0; height:100%; top:0; left:0; background:#aacd06; z-index:-1; transition:all 0.5s;}
.tb_btn:hover {color:#fff;}
.tb_btn:hover:before {width:100%;}
.tb_btn2{margin: 0 auto;}

    /*sec1*/
.main_tb .sec1 .sec1_cont{margin:70px 0 100px 0; width: 100%; box-sizing: border-box;}
.main_tb .sec1 .sec1_cont a{display: block; transition: all .3s ease-in-out;}
.main_tb .sec1 .sec1_cont .box{float: left; width: 32%; height: 500px; background:gray; position: relative; bottom: 0; box-sizing: border-box; padding: 40px; text-transform: uppercase;  color:#fff; transition: all .3s ease-in-out;}
.main_tb .sec1 .sec1_cont .box:hover{color: #aacd06; transition: all .3s ease-in-out; border: 2px solid #aacd06; bottom: 40px; box-shadow: 0px 20px 30px 5px rgb(0 0 0 / 15%);}
.main_tb .sec1 .sec1_cont .box2{margin: 0 2% 0 2%;}
.main_tb .sec1 .sec1_cont .box .tit{text-align: left;}
.main_tb .sec1 .sec1_cont .box .tit h4{font-size:24px !important; font-family: 'Montserrat'; font-weight: 700 !important; margin-top: 0;}
.main_tb .sec1 .sec1_cont .box .tit p{font-size:17px; font-weight: 300;}
.main_tb .sec1 .sec1_cont .box .btn{position: absolute; right: 40px; bottom:40px; font-size:15px; font-family: 'Montserrat'; font-weight: 300;}
    /*sec2*/
.main_tb .sec2{position: relative; background: gray; width: 100%; height:840px; }
.main_tb .sec2 .sec2_wrap{top: 50%; transform: translateY(-50%);}
.main_tb .sec2_txt{word-break: keep-all; margin-bottom: 50px;}
.main_tb .sec2_txt h4{font-size: 30px; color: #2b2b2b; font-weight: 300; margin: 50px 0 30px 0;}
.main_tb .sec2_txt p{font-size: 17px; color: #333; line-height: 1.6; }
    /*sec3*/
.sec3{background: #f7f7f7; padding: 170px 0 150px 0;}
.sec3 .sec3_cont{margin: 70px 0 50px 0; width: 100%; box-sizing: border-box;display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative;}
.sec3 .box{position: relative; overflow: hidden;float: left; width: 23.5%; height: 412px; background: gray; margin-right: 2%; text-align: center; color: #fff; box-sizing: border-box;}
.sec3 .box4{margin-right: 0; transition: all .2s ease-in-out;}
/*.sec3 .box_wrap{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 100%;}*/
.sec3 .box .icon{width:80px; height: 80px; border: 1px solid red; margin: 0 auto; }
.sec3 .box .tit{margin-top: 30px; font-size: 21px; font-weight: 700; font-family: 'Montserrat';}
.sec3 .box .tit:after{position: relative; content: ""; display: block; width: 1px; height: 10px; background-color: #fff; top: 50%; left: 50%; margin: 25px 0 25px 0;}
.sec3 .box .txt{font-size: 17px; font-weight: 200;}
        /*hover효과*/
.sec3 .box:before{top: 0;}
.sec3 .box:after{bottom: 0;}
.sec3 .box:hover > *:before, .sec3 .box:hover > *:after{transform: translate3d(0, 0, 0);} 
.sec3 .box:hover:before, .sec3 .box:hover:after{transform: translate3d(0, 0, 0);}
.sec3 .box:before {left: 0;}
.sec3 .box:after {right: 0;}
.sec3 .box > *:before, .sec3 .box > *:after {content: "";position: absolute;left: 0;z-index: 9;height: 2px;width: 100%;background-color: #aacd06;}
.sec3 .box > *:before {top: 0;transform: translate3d(-105%, 0, 0); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.sec3 .box > *:after {bottom: 0;transform: translate3d(105%, 0, 0); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.sec3 .box:before, .sec3 .box:after { content: ""; position: absolute; top: 0; z-index: 9; height: 100%; width: 2px; background-color: #aacd06;}
.sec3 .box:before { left: 0; transform: translate3d(0, 105%, 0);  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.sec3 .box:after { right: 0; transform: translate3d(0, -105%, 0);  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
    /*txt_svg*/
.txt_svg svg{display: block;}
.txt_svg_wrap{position: relative;}
.txt_svg_wrap .txt_svg{position: absolute; top: -120px; right: 50px;}
    /*sec4*/
.sec4{background:#f7f7f7; padding: 70px 0 150px 0;}
.sec4_cont{width: 100%; margin-top: 70px;}
.sec4_cont .sec4_left{float: left; width: 49%; margin-right: 1%;}
.sec4_cont .sec4_left .left_img{width: 510px; height: 300px; margin: 0 auto; border: 1px solid red;}
.sec4_cont .sec4_left .left_txt{color: #333; margin: 30px 0 0 30px;}
.sec4_cont .sec4_left .left_txt li{margin-bottom: 20px;}
.sec4_cont .sec4_left .left_txt li:last-child{margin-bottom: 0;}
.sec4_cont .sec4_left .left_txt .tit{font-family: 'Montserrat'; font-weight: 700; font-size: 17px;}
.sec4_cont .sec4_left .left_txt .icon{display: inline-block; width: 18px; height: 18px; vertical-align: middle; margin-right: 3%; border: 1px solid red;}
.sec4_cont .sec4_left .left_txt .txt{font-size: 16px; font-weight: 300; line-height: 1.4; display: inline-block; margin-left: 2%;}

.sec4_cont .sec4_right{float: right; width: 49%;}
.sec4_cont .sec4_right h4{font-size:15px; font-weight: 700; letter-spacing: 2px; color:#aacd06; text-transform: uppercase; margin: 0 0 20px 0;}
.sec4_cont .sec4_right .input_list li{padding: 10px 20px; border: 1px solid #d8d8d8; border-bottom: 0; box-sizing: border-box; background: #fff;}
.sec4_cont .sec4_right .input_list li:last-child{border: 1px solid #d8d8d8;}
.sec4_cont .sec4_right .input label{float: left; width: 95px; line-height: 30px; color: #666; font-size: 16px; font-weight: 500;}
.sec4_cont .sec4_right .input input[type="text"]{float: left; width: calc(100% - 105px); text-indent: 10px; height: 30px; line-height: 30px; background-color: transparent; border: 0; box-sizing: border-box; color: #aaa; font-size: 14px; font-weight: 300;}
.sec4_cont .sec4_right .question{margin-top: 15px;}
.sec4_cont .sec4_right .question textarea{min-height: 130px !important; padding: 10px 18px;}
.sec4_cont .sec4_right .question textarea::placeholder{color: #666; font-size: 16px; font-weight: 500;}
.sec4_cont .sec4_right .agree{margin:10px 0 40px 0;}
.sec4_cont .sec4_right .agree label{font-size: 14px; vertical-align: middle;}
.sec4_cont .sec4_right .agree input[type="checkbox"]{width: 16px; height: 16px; margin:0 1% 0 0; vertical-align: middle;} 
.sec4_cont .sec4_right .agree .view{font-size: 12px; margin-left: 1.5%; background: #666; color: #fff; border-radius: 100px; padding: 1px 10px;}


/*contents e*/

@media screen and (max-width:1500px){
    .pics .video_wrap{height: auto;}
    .pics .video .vd video{height: auto;}
}
@media screen and (max-width:1440px){
    .app_des p {font-size: 15px;}
    .about .ser_25 .ser_des {font-size: 16px;}
    
    .tit_box {width:100%; padding:0 40px; box-sizing: border-box;}
    .member .member_wrap .info_inner {bottom:1vw;}
    .member .member_wrap .info_n{font-size: 20px;}
    .member .member_wrap p.no_img{font-size: 28px;}

    .about .ceo_r .ceo_txtbox{height:62px;}
    .about .ceo_r p:first-child {top:12px;}
}

@media screen and (max-width:1100px){
    /* 타이틀 */
    .tit_box p{font-size: 18px;}
    .tit_box h2{font-size: 40px;}
    .contents .sub_tit{font-size: 18px;}

    .detail .sub_tit a::before{width:14px; height:14px;}
    .detail .project_box .infobox .tit {font-size: 22px;}
    .detail .project_box .infobox ul { margin-bottom: 60px;}
    .detail .project_box .infobox ul li {font-size: 16px; margin-bottom: 12px;}
    .detail .project_box .infobox .des {font-size: 16px; margin-bottom: 50px;}
    
    .member .member_wrap .info_inner {padding:0px 20px;}
    .member .member_wrap .info_n {font-size: 18px;}
    .member .member_wrap .info_c {font-size: 14px;}

    .contact .find_l {}
    .contact .find_l h3{font-size: 18px; margin-bottom: 18px;}
    .contact .find_l h3::after {margin-top:14px;}
    .contact .find_l .local {font-size: 18px; margin-bottom: 20px;}
    .contact .find_l .local_info {font-size: 16px;}
    .contact .find_l p {font-size: 14px;}
    .contact .find_l .local_box {margin-bottom: 18px;}

    .contact .bt_info li { width:100%; padding: 12px 12px 18px; height: auto; }
    .contact .bt_info .txt{font-size: 18px;}
    .contact .bt_info .num, .contact .bt_info .tit {font-size: 14px;}

    /* .contact .bt_info{width:35%;} */
    .contact .flex_box{margin-bottom: 80px;}
    /* .form_wrap{width:65%;} */

    .phi h3{font-size: 24px;}
    .phi .ds_phi {height: 300px;}
    .phi .ds_phi li{font-size: 18px; padding-top:5.5vw;}
    .phi .ds_phi span{font-size: 24px;}
    .phi .phi_des_l p{font-size: 14px;}
    .phi .phi_des_r p{font-size: 14px; margin-bottom: 24px;}
    .phi .sec{padding-bottom: 80px;}
    .sus p {font-size: 14px;}
    .phi .ds_app li{font-size: 16px; padding:25vw 1%;}
    
    .phi .ds_app li.on{padding:15px 2% 30px;}
    .app_des p{font-size: 13px;}

    .about h3{font-size: 24px;}
    .about .ceo_wrap {margin-bottom: 80px;}
    .about .ceo_l .ceo_tit{font-size: 18px;}
    .about .ceo_l p, .ceo_c p{font-size: 16px;}

    .about .ser_25{width:50%; height:320px;}
    .about .tablet-b{display: block; position: absolute !important;}
    .about .tablet-n {display: none;}
    .about .ser_txt {font-size: 16px;}
    .about .ser_tit {font-size: 18px;}
    .about .ser_des {font-size: 16px;}

    .member .member_wrap .member_box li{width:25%;}
    .member .member_wrap p.no_img {font-size: 20px;}

    .contact .find_members li{font-size: 12px; margin-bottom: 8px;}
    .contact .find_l {width:auto;}

    .form_wrap .form_item{ -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2px;}
    .form_wrap .form_item .form_desc {width: 100%;}
}
@media screen and (max-width:1024px){
    .pics .ment{transform: translateX(-50%) translateY(-50%) scale(0.6);}
    .contents.phi{padding:100px 0 160px 0;}
}

@media screen and (max-width:768px){
    .tit_box {width:100%; padding:0 20px;}
    .tit_box .white_box { width: 70%; }

    .lnb { border:none; border-bottom:1px solid #ddd; left: 0; transform: none;}
    .lnb .home { display:none;}
    .lnb .depth1_name {display:none;}
    .lnb .lnb_menu {min-width:100%; width:100%; border-right:none;}
    .member_content.fullwidth {    padding: 30px 35px;}
    h3, .h3 {font-size: 22px;}
    h4, .h4 {font-size: 19px;}
    .pics .ment{transform: translateX(-50%) translateY(-50%) scale(0.4);}
    
    .contents .inner{width:92%;}
    .contents.phi{padding:100px 0 100px 0;}
    .contents.detail { padding: 0 0 100px 0;}

    /* 타이틀 */
    .pdi_sub_bg{height:500px;}
    .tit_wrap {top:400px;}
    .tit_box {top:400px;}
    .tit_box p {font-size: 16px;}
    .tit_box h2 {font-size: 30px;}

    .detail .project_box .infobox {width:100%; position: relative}
    .detail .project_box .imgbox {width:100%;}

    .member .member_wrap .member_box li{width:33%;}

    .member .member_wrap .member_box li .gray_info,
    .member .member_wrap .member_box li:hover .gray_info { opacity: 1; background: rgba(0, 0, 0, 0.15); }
    .member .member_wrap .member_box li img,
    .member .member_wrap .member_box li:hover img { scale: 1; }

    .member .member_wrap .info_n { font-size: 14px; }
    .member .member_wrap .info_c { font-size: 13px; }

    .d-none-sm {display: none;}
    .member .member_wrap .info_inner {padding:0 10px;}

    .form_wrap .form_item{ -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2px;}
    .form_wrap .form_item .form_title {font-size: 16px; line-height: 38px;}
    .form_wrap .form_item .form_desc {width: 100%;}
    .form_wrap .form_item .form_desc input{height: 38px;}
    
    .contact .flex_box{-webkit-box-lines: multiple;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;}
    .contact .find_l{width:100%;}
    .contact .find_r{width:100%; padding:0px;}
    .contact .bt_info{width:100%; margin-bottom: 40px;}
    .form_wrap{width:100%; padding: 0px;}
    .contact .flex_box2{-webkit-box-lines: multiple;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;}
    .contact .flex_box1{
        -webkit-box-lines: multiple;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .contact .map{width:100%;}
    .contact .map:first-child{margin-bottom: 10px;}
    .basic_form_btn{width:100%;}
    .d-flex { flex-direction: column; }
    .form_wrap .form_item.cap { width: 100%; max-width: none; }
    .form_wrap .form_item.agree { width: 100%; }
    .form_wrap .form_item.agree .form_desc .agree_chk { padding-top: 10px; padding-left: 0; }

    .basic_form_btn button,
    .basic_form_btn button:hover { color: #fff; }
    .basic_form_btn button::before,
    .basic_form_btn button:hover::before {box-shadow: inset 768px 0px 0px #E3282F;}


    .contact .find_members {position: relative;}
    .contact .find_l {position: relative;}
    .contact .offices {
        margin-top: 10px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; 
        -webkit-box-pack: justify;
        -moz-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .contact .find_l li {margin-bottom: 10px; width:49%;}
    .contact .off_info {top: -28px; padding:0 8px;}
    
    
    
    .phi .ds_phi{height:230px;}
    .phi .ds_phi li{width:25%;}
    .phi .ds_phi li.mobile_n{display: none;}

    .phi .phi_des_wrap {-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    .phi .phi_des_l{width:100%; padding:0px; border-bottom: solid 1px rgba(0, 0, 0, 0.15);border-right:solid 0px rgba(0, 0, 0, 0.15);}
    .phi .phi_des_l p{margin-bottom: 14px;}
    .phi .phi_des_l p:last-child{margin-bottom: 24px;}
    .phi .phi_des_r{width:100%; padding:20px 0px 0px; }
    .phi .phi_des_r p{margin-bottom: 14px;}

    /* approach */
    .phi .ds_app{background: none;}
    .phi .ds_app li.on {width:100%; color:#333; padding:0px 0px 50px;}
    .phi .ds_app li.on:last-child{padding: 0px;}
    .phi .ds_app li span{font-size: 20px;}
    .phi .ds_app li{font-size: 14px;}
    .phi .ds_app li.on > p::before {width: 100%; height:90px; content: ""; display: block; margin-bottom: 16px;}
    .phi .ds_app li.on:nth-child(1) > p::before {background: url('/resources/img/pdi/sub/phi_bg03.jpg') no-repeat center/cover;}
    .phi .ds_app li.on:nth-child(2) > p::before {background: url('/resources/img/pdi/sub/phi_bg04.jpg') no-repeat center/cover;}
    .phi .ds_app li.on:nth-child(3) > p::before {background: url('/resources/img/pdi/sub/phi_bg05.jpg') no-repeat center/cover;}
    .phi .ds_app{-webkit-box-lines: multiple;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;}
    .phi .ds_app li.on::after {display: none;}
    .phi .ds_app{height: auto;}
    .app_des.on{margin-top:10px ;}

    .about .ceo_l .ceo_tit {font-size: 16px;}
    .about .ceo_l p, .ceo_c p {font-size: 14px;}
    .about .ser_txt, .about .ser_des {font-size: 14px;}
    .about .ser_25 .ser_des {font-size: 14px;}
    .about .ser_50,.about .ser_25 {width:100%; min-height: auto; height:auto;}
    /* .about .ser_50,.about .ser_25 {width:100%; min-height: auto; color: white; margin-bottom: 10px;} */
    .about .ser_50 p,.about .ser_25 p {position: relative; z-index: 1; color:#333;}

    /* .about .ser_50::after,.about .ser_25::after{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 100%);} */
    .about .ser_50.arc::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_01.jpg') no-repeat center/cover;}
    .about .ser_50.pla::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_02.jpg') no-repeat center/cover;}
    .about .ser_25.lan::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_03.jpg') no-repeat center/cover;}
    .about .ser_25.lan .ser_tit {padding:30px 30px;}
    .about .ser_25.con::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_04.jpg') no-repeat center/cover;}
    .about .ser_25.con .ser_tit {padding:30px 30px;}
    .about .ser_25.int::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_05.jpg') no-repeat center/cover;}
    .about .ser_25.fes::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_05.jpg') no-repeat center/cover;}
    .about .ser_25.gra::before {content: ""; width:100%; height: 220px; display: block; background: url('/resources/img/pdi/sub/about_06.jpg') no-repeat center/cover;}
    
    .about .ser_img{display: none;}
    .about .ser_25 img {display: none;}
    
    .about .ceo_r{min-width: 250px;}
    .about .ceo_r .ceo_txtbox {width:130px; height:52px;}
    .about .ceo_r p:first-child {font-size: 14px;}
    .about .ceo_r p:nth-child(2) {font-size: 12px; top:34px;}
    .about .txt-e p {text-align: justify; text-align-last: auto;}
    .about .tablet-b {position: relative !important;}
    .about .ser_tit {padding:26px 0px 12px;}
    .about .ser_des{padding:0px 0px 30px;}
    .about .ser_25.lan .ser_tit,.about .ser_25.con .ser_tit{padding:30px 0px;}
    
}


@media screen and (max-width:500px){
    .pdi_sub_bg{height:300px;}
    .tit_wrap {top:230px;}
    .tit_box {top:230px;}
    .tit_box .white_box {padding-top:20px;}
    .tit_box p {font-size: 14px; margin-bottom: 8px;}
    .tit_box h2 {font-size: 24px;}
    .member .member_wrap .member_box li { width:50%; padding:5px; box-sizing: border-box;}
    
    .form_wrap .form_item .form_desc textarea {height: 150px;}

    .member .member_wrap .gray_info {width:calc(100% - 10px); height: calc(100% - 10px); text-align: center;}
    .member .member_wrap .member_box li {overflow: visible; margin-bottom: 38px;}
    .member .member_wrap .info_inner {width:100%; right:50%; transform: translateX(50%); padding:2vw  1vw; bottom:-40px; background:rgb(0,0,0,1); height: 70px;
        display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
    .member .member_wrap .info_n,.member .member_wrap .info_c {width:100%;}

    .contact .find_l li{width:100%;}
    .contact .off_info {font-size: 12px; padding:0 6px;}

    .phi .ds_phi{height: 170px;}
    .phi .ds_phi li{font-size: 14px;padding-top: 7vw;}
    .phi .ds_phi span {font-size: 18px;}
    .phi h3{font-size: 18px;}

    .about h3{font-size: 18px;}
    .about .ceo_r {width:100%; margin-bottom: 10px;}
    .about .ceo_r .ceo_txtbox {width:160px; height:62px;}
    .about .ceo_r p:first-child {font-size: 16px;}
    .about .ceo_r p:nth-child(2) {font-size: 14px; top: 38px;}
    .about .ser_50::before,.about .ser_25::before{height:100px !important;}
    .about .ser_tit{font-size: 16px;}
    .about .ser_tit {padding:18px 0px 10px;}
    .about .ser_des{padding:0px 0px 20px;}
    .about .ser_25.lan .ser_tit,.about .ser_25.con .ser_tit{padding:18px 0px 20px;}
    
}