/* sub_banner_Wrap */
.sub_banner_Wrap {
    width: 100%;  
    padding: 100px 0px 100px 0px; position: relative; overflow: hidden;
    background-image: url(../images/company_banner.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
}
.sub_banner_Wrap.project{ background-image: url(../images/project_banner.jpg); background-position: center;}
.sub_banner_Wrap .tit {margin-bottom: 4px;}
.head_title {color: #fff; line-height: 1.5;}

.sub_banner_Wrap .conf-link-button { overflow: hidden; color: #fff; background: rgb(86, 0, 206); padding: 12px 0px; display: inline-block; width: 250px; text-overflow: ellipsis; white-space: nowrap; border-radius: 23px; line-height: 1em; border: 2px solid #ffffff; margin-top: 35px; position: relative; box-sizing: border-box;  transition: all .5s ease-out; text-align: left;}
.sub_banner_Wrap .conf-link-button:hover { color: #fff; border-color: transparent; background-position: left bottom; box-shadow: none; transition: all .4s;}
.sub_banner_Wrap .conf-link-button > div {text-align: center;}
.sub_banner_Wrap .conf-link-button:first-child {margin-right: 15px;}
.sub_banner_Wrap.about .conf-link-button {background: darkblue;}

/* sec1 */
.sec1 .img_wrap { display: block; width: 100%; height: 100%;}
.sec1 .img_wrap img {display: block; max-width: 100%; height: auto;}

.sec1 .head_title {text-align: center; margin-bottom: 0;}

.contents_wrap {display: flex; line-height: 1.6;}
.contents_wrap > div {width: 50%;}

.contents_wrap .left {padding-right: 15px;}
.contents_wrap .right {padding-left: 15px;}
.contents_wrap .right .info {padding-left: 0;}
.contents_wrap .right .info li {text-decoration: none; list-style: none;}

/* sec2 */
.sec2 .contents_wrap {padding: 20px 0;}
.sec2 .contents_wrap .right h5 {margin-bottom: 13px;}
.sec2 .contents_wrap .right em {color: rgb(0, 168, 133);}

.divider-box {position: relative; margin: 25px auto 25px 0; width: 10%;}
.divider-box hr {bottom: 0; border-top: 1px solid #c1afa1; height: 1px;}

.sec2 .contents_wrap:nth-child(even) {flex-direction: row-reverse;}
.sec2 .contents_wrap:nth-child(even) .left {padding: 0 0 0 15px;}
.sec2 .contents_wrap:nth-child(even) .right {padding: 0 15px 0 0;}

/* sec3 */
.sec3 .head_line {padding: 20px 0;}
.sec3 .head_line hr {border-bottom: 3px solid rgb(0, 0, 0); width: 100px; margin: 10px auto 10px 0;}
.sec3 .head_title strong {display: block;}

.video-wrapper {width: 100%; padding-bottom: 56%; position: relative;}
.video-wrapper iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.sec3 .contents_wrap .left span {display: block; padding-bottom: 25px;}
.sec3 .contents_wrap .left span.fsize17 {font-weight: 700;}

.sec3 .contents_wrap .left a {display: inline-block; padding: 17px 0px; text-align: center; width: 248px; color: #fff; font-weight: 700; line-height: 1.5; background-color: #01916D; user-select: none; transition: .4s ease;}
.sec3 .contents_wrap .left a:hover {background-color: #027256;}

.sec3 .contents_wrap .left .move_btn:last-child {margin-top: 20px;}

/* sec4 */
.sec4 .contents_wrap .left {width: 65.66666%;}
#map {width: 100%; height: 260px;}

.sec4 .contents_wrap .right {width: 34.33333%;}
.sec4 .contents_wrap .right ul {padding: 0; padding-top: 30px;}
.sec4 .contents_wrap .right li {list-style: none; line-height: 25px; position: relative;}
.sec4 .contents_wrap .right li span {color: #000; display: block;}
.sec4 .contents_wrap .right li span:first-child {position: absolute; left: 0; top: 0;}
.sec4 .contents_wrap .right li span:last-child {padding-left: 60px;}
.sec4 .contents_wrap .right li span a {color: #000;}

/* project */
.click_item_Wrap .container,.item_Wrap .container {padding: 0;}
.click_item_Wrap .box_click_btn {padding: 80px 0 20px 0;}
.box_click_btn {display: flex; padding: 40px 0 20px 0;}
.box_click_btn .item {width: 33.33333%; padding: 0 15px;}
.box_click_btn .item > div {border: 1px solid #e5e5e5;}
.box_click_btn .item > div img {max-width: 100%; display: block; height: auto;margin: 0 auto;}
.item_Wrap .box_click_btn .item > div img {width: 100%;}
.box_click_btn .item .text {padding: 12px 9px; line-height: 1.5;}
.box_click_btn .item .text h5 {font-weight: 700; margin-bottom: 23px;}
.box_click_btn .item .text div span {display: block;}

.box_click_btn .item .text div span:first-child {margin-bottom: 22px; font-weight: 400;}
.box_click_btn .item .text div.fsize13 {letter-spacing: -.5px;}
.box_click_btn .item .text div span.fsize11 {font-weight: 700;}

.click_item_Wrap .box_click_btn .item > div {border: 0;}
.click_item_Wrap .box_click_btn .item .text {padding: 35px 0 0; text-align: center;}
.click_item_Wrap .box_click_btn .item .text strong {display: block; padding-bottom: 15px;}
.click_item_Wrap .box_click_btn .item .text p {color: #999;}

.item_Wrap .container > div {padding: 40px 0 20px 0;}
.item_Wrap .head_line {padding: 0 15px; margin-bottom: 35px;}
.item_Wrap .head_line hr {border-bottom: 2px solid #343434; width: 30px; margin: 10px auto 10px 0;}

.item_Wrap .head_title {padding: 0 15px; line-height: 1.5;}
.item_Wrap .head_title strong {display: block; padding-bottom: 7px; color: #333;}

.item_Wrap .box_click_btn .item {width: 25%; padding: 0 15px; }

.contact_Wrap {
    background-color: #212022;
    background-image: url(../images/contact_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.contact_box {display: flex; align-items: center;}
.contact_box > div {width: 50%; padding: 0 15px;}

.contact_box > .left .image_wrap {max-width: 480px; margin:0 auto; position: relative;}
.contact_box > .left .image_wrap img { position: absolute; left: 0; top: -120px; height: auto; max-width: 100%; display: block;}
.contact_box > .left .image_wrap .box_img { position: relative; top: 0px; width: 388px; height: 320px; background-color: red; margin: 0 auto; margin-top: 120px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/contact_mobile_img.jpg);
}

.contact_box > .right strong {display: block; color: #fff; margin-bottom: 20px;}
.contact_box > .right span {color: #fff; display: block; line-height: 1.5;}
.contact_box > .right .move_btn a {display: inline-block; padding: 17px 0px; width: 262px; text-align: center; color: #fff; font-weight: 700; line-height: 1.5; background-color: #01916D; user-select: none; transition: .4s ease;}
.contact_box > .right .move_btn a:hover {background-color: #027256;}
.contact_box > .right .move_btn:last-child {margin-top: 20px;}


/*media query*/
@media all and (max-width: 1199px) {
    .container {width: 970px ; max-width: 970px;}


    /* project */
    .box_click_btn .item .text h5 {font-size: 14px !important; line-height: 1.6;}
    .contact_box > .left .image_wrap {max-width: 350px;}
    .contact_box > .left .image_wrap img {top: -85px;}
    .contact_box > .left .image_wrap .box_img {margin-top: 85px; width: 282px; height: 234px;}
    .contact_box > .right { position: absolute; top: 50%; transform: translateY(-50%); right: 0; padding-right: 4%;}

    /* #all-in-one_Wrap .box_click_btn .item .text {height: 238px;} */

    /* company */
    .sec1 .head_title .fsize32 {font-size: 30px !important;}
    .sec2 .contents_wrap {display: block;}
    .sec2 .contents_wrap > div {width: 100%;}
    .sec2 .contents_wrap .left,.contents_wrap .right,.sec2 .contents_wrap:nth-child(even) .left,.sec2 .contents_wrap:nth-child(even) .right {padding: 0;}
    .sec2 .contents_wrap .left,.sec2 .contents_wrap:nth-child(even) .right {padding-bottom: 50px;}
    .sec2 .contents_wrap .right,.sec2 .contents_wrap:nth-child(even) .left {padding-bottom: 40px;}
    .sec4 .contents_wrap .right {padding-left: 15px;}
    .sec3 .contents_wrap .right {padding-left: 15px;}
}
@media all and (max-width: 991px) {
    #Wrap {padding-top: 135px;}
    .container {width: 740px;}

    /* project */
    .sub_banner_Wrap .tit {font-size: 24px !important;}
    .sub_banner_Wrap .txt {font-size: 13px !important;}

    .click_item_Wrap .box_click_btn .item .text strong {font-size: 17px !important;}

    .box_click_btn {flex-wrap: wrap;}
    .item_Wrap .box_click_btn .item {padding: 0 10px; width: 50%;}
    .item_Wrap .box_click_btn .item:nth-child(n + 3) {margin-top: 45px;}
    .box_click_btn .item .text {padding: 9.6px 16px;}
    .item_Wrap .head_title strong {font-size: 22px !important;}
    .item_Wrap .head_title span {font-size: 14px !important;}

    .contact_box {flex-direction: column-reverse; }
    .contact_box > div {width: 100%;}
    .contact_box > .left .image_wrap {  position: relative;  margin: 0 auto;  max-width: 56vw;}
    .contact_box > .left .image_wrap .box_img {  position: relative;  margin: 0 auto;  margin-top: 15vw;  width: 46vw;  height: 37.777vw;  z-index: 8;}
    .contact_box > .left .image_wrap img {  top: -14vw;}
    .contact_box > .right {position: relative; top: auto; transform: none; right: auto; margin: 30px 0 20px 0; text-align: center; padding: 0 15px; padding-bottom: 30px;}
    .contact_box > .right strong {font-size: 24px !important;}
    .contact_box > .right span {font-size: 14px !important;}

    /* company */
    .sec1 .head_title .fsize32 {font-size: 23px !important;}
    .sec1 .contents_wrap {font-size: 15px !important;}
    .sec2 .contents_wrap .right h5 {font-size: 13px !important;}
    .sec2 .head_title {font-size: 22px !important;}
    .sec2 .contents_wrap .discaption {font-size: 15px !important;}
    

    .sec3 .head_title strong {font-size: 24px !important;}
    .sec3 .contents_wrap .left span {font-size: 15px !important;}
    .sec4 .contents_wrap .right {font-size: 13px !important;}
    .sec4 .contents_wrap .right strong {font-size: 13px !important;}

    .sec3 .contents_wrap .left a,
    .contact_box > .right .move_btn a {font-size: 20px !important;}
}
@media all and (max-width: 767px) {
    .container {width: 100%;}

    /* project */
    .sub_banner_Wrap .tit {font-size: 19px !important;}
    .box_click_btn .item {width: 100%;}

    .item_Wrap .box_click_btn .item {padding: 0 8px;}

    .click_item_Wrap .box_click_btn .item:nth-child(n+2) {margin-top: 24px;}

    .box_click_btn {padding: 40px 7px 20px;}

    .item_Wrap .head_title strong {font-size: 20px !important;}
    .contact_box > .right span {font-size: 13px !important;}

    /* company */
    .sec1 .contents_wrap {display: block;}
    .sec1 .head_title .fsize32 {font-size: 18px !important;}
    .sec1 .contents_wrap > div {width: 100%; padding: 0; font-size: 14px !important;}
    .sec1 .contents_wrap .right {margin-top: 40px;}

    .sec2 .head_title {font-size: 18px !important;}
    .sec2 .contents_wrap .discaption {font-size: 14px !important;}
    
    .sec3 .head_title strong {font-size: 19px !important;}
    .sec3 .contents_wrap {flex-direction: column-reverse;}
    .sec3 .contents_wrap > div, .sec4 .contents_wrap > div {width: 100% !important; padding: 0 !important;}
    .sec3 .contents_wrap .left {padding-top: 10px !important;}
    .sec3 .contents_wrap .left span {font-size: 14px !important;}
    .sec4 .contents_wrap {display: block;}
    .sec4 .contents_wrap .right {margin-top: 30px;}

    .sec3 .contents_wrap .left a,
    .contact_box > .right .move_btn a {font-size: 18px !important;}
}
@media all and (max-width: 479px) {

    html {scroll-behavior: smooth !important;}
    .fixed_buttons a {padding: 7px 14px;}

    /* project */
    .box_click_btn .item .text {padding: 6px 10px;}
    
    .item_Wrap .head_title strong {font-size: 18px !important;}
    .item_Wrap .head_title span {word-break: keep-all;}
    
    .item_Wrap .box_click_btn .item {width: 100%;}
    .item_Wrap .box_click_btn .item:nth-child(n + 2) {margin-top: 40px;}

    .contact_box > .right span {font-size: 12px !important;}
    .contact_box > .left .image_wrap { max-width: 80vw;}
    .contact_box > .left .image_wrap .box_img {  margin-top: 20vw; width: 67vw; height: 53.777vw;}
    .contact_box > .left .image_wrap img { top: -19vw;}

    /* company */
    .sub_banner_Wrap .tit {font-size: 17px !important;}
    .sub_banner_Wrap .txt {font-size: 12px !important;}

    .sec1 .head_title .fsize32 {font-size: 16px !important;}
    .sec1 .contents_wrap > div {font-size: 13px !important;}
    
    .sec2 .head_title {font-size: 16px !important;}
    .sec2 .contents_wrap .discaption {font-size: 13px !important;}

    .sec3 .head_title strong {font-size: 17px !important;}
    .sec3 .contents_wrap .left span {font-size: 13px !important;}
    .sec3 .contents_wrap .left a,
    .contact_box > .right .move_btn a {font-size: 16px !important;}
}