#intro {max-width:1400px; box-sizing: border-box; margin: 0 auto; margin-top: 0px; padding:0 80px;}
#intro .content_wrap {display: flex; width: 100%; word-break: keep-all; padding: 50px 0;  border-bottom: 1px solid #ddd;}
#intro .content_wrap .content {width: 50%;}
#intro .content_wrap .content .flex-wrap {display: flex;}
#intro .content_wrap .content .flex-wrap h2{  font-size:22px; font-weight: 500; margin-bottom: 15px; color:rgb(39, 78, 125); margin-left: 15px;}
#intro .content_wrap .content .flex-wrap img {width: 26px; height: 23px; margin-top: 20px; }
#intro .content_wrap .content p{font-size: 16px; padding:0 22px;}
#intro .content_wrap .content li {font-size: 14px; color: rgb(156, 156, 156); font-weight: 400;}

#intro .content_wrap .img {width: 50%; padding-top: 10%; overflow: hidden; position: relative; }
#intro .content_wrap .img img {width: 100%; height:100%; position: absolute; top: 15px; left: 0;}

#intro .content_wrap .margin-left {margin-left: 80px;}
#intro .content_wrap .margin-right {margin-right: 80px;}

@media screen and (max-width:1300px){ 
   #intro { padding: 0 40px; transition: 1s; } 
}


@media screen and (max-width:750px){
   #intro { padding: 0 15px; height: auto;} 
   #intro .content_wrap {flex-wrap: wrap; }
   #intro .content_wrap .content {width: 100%;}
   #intro .content_wrap .img {width: 100%; height: auto; display: block; margin: 0 auto; transition: 1s;}
   #intro .content_wrap .img img { position: inherit; margin-top: -50px;}
}


#intro2 {max-width:1400px; box-sizing: border-box; margin: 0 auto; margin-top: 0px; padding:0 80px;}
#intro2 .content_wrap {display: flex; width: 100%; word-break: keep-all; padding: 50px 0;  border-bottom: 1px solid #ddd;}
#intro2 .content_wrap .content {width: 100%;}
#intro2 .content_wrap .content .flex-wrap {display: flex;}
#intro2 .content_wrap .content .flex-wrap h2{  font-size:22px; font-weight: 500; margin-bottom: 15px; color:rgb(39, 78, 125); margin-left: 15px;}
#intro2 .content_wrap .content .flex-wrap img {width: 26px; height: 23px; margin-top: 20px; }
#intro2 .content_wrap .content p{font-size: 16px; padding:0 22px;}
#intro2 .content_wrap .content li {font-size: 14px; color: rgb(156, 156, 156); font-weight: 400;}

#intro2 .content_wrap .img {width: 50%; padding-top: 10%; overflow: hidden; position: relative; }
#intro2 .content_wrap .img img {height:100%; position: absolute; top: 15px; right: 0;}

#intro2 .content_wrap .img2 {width: 50%; padding-top: 10%; overflow: hidden; position: relative; }
#intro2 .content_wrap .img2 img {height:100%; position: absolute; top: 15px; left: 0;}

#intro2 .content_wrap .margin-left {margin-left: 80px;}
#intro2 .content_wrap .margin-right {margin-right: 80px;}

@media screen and (max-width:1300px){ 
   #intro2 { padding: 0 40px; } 
}


@media screen and (max-width:750px){
   #intro2 { padding: 0 15px; height: auto;} 
   #intro2 .content_wrap {flex-wrap: wrap; }
   #intro2 .content_wrap .content {width: 100%;}
   #intro2 .content_wrap .img {width: 100%; height: auto; display: block; margin: 0 auto; transition: 1s;}
   #intro2 .content_wrap .img img { position: inherit; margin-top: -50px;}
}





#intro3 {max-width:1400px; box-sizing: border-box; margin: 0 auto; margin-top: 0px; padding:0 80px;}
#intro3 .content_wrap {display: flex; width: 100%; word-break: keep-all; padding: 20px 0;  border-bottom: 1px solid #ddd;}
#intro3 .content_wrap .content {width: 71%;}
#intro3 .content_wrap .content .flex-wrap {display: flex;}
#intro3 .content_wrap .content .flex-wrap h2{  font-size:22px; font-weight: 500; margin-bottom: 15px; color:rgb(39, 78, 125); margin-left: 15px;}
#intro3 .content_wrap .content .flex-wrap img {width: 26px; height: 23px; margin-top: 20px; }
#intro3 .content_wrap .content p{font-size: 16px; padding:0 22px;}
#intro3 .content_wrap .content li {font-size: 14px; color: rgb(156, 156, 156); font-weight: 400;}

#intro3 .content_wrap .img {width: 10%; padding-top: 21%; overflow: hidden; position: relative; }
#intro3 .content_wrap .img img {width: 100%; position: absolute; top: 15px; left: 0;}

#intro3 .content_wrap .img2 {padding: 40px 0;}
#intro3 .content_wrap .img2 img {padding-left: 40px;}
#intro3 .content_wrap .img2 p {width: 100%; text-align: center;}
#intro3 .content_wrap .img2 a {color: rgb(39, 78, 125);}

#intro3 .content_wrap .margin-left {margin-left: 80px;}
#intro3 .content_wrap .margin-right {margin-right: 80px;}
#intro3 .content_wrap .ideal_img img {width: 130%; padding-top: 30px; padding-left: 35px;}
#intro3 .content_wrap .corevalue img {width: 120%; padding-left: 100px;}

.safety img {width: 30%; padding-left:600px;}


@media screen and (max-width:1300px){ 
   #intro3 { padding: 0 40px; } 
}


@media screen and (max-width:750px){
   #intro3 { padding: 0 15px; height: auto;} 
   #intro3 .content_wrap {flex-wrap: wrap; }
   #intro3 .content_wrap .content {width: 100%;}
   #intro3 .content_wrap .img2 {width: 100%; height: auto; display: block; margin: 0 auto; transition: 1s;}
   #intro3 .content_wrap .img2 img { position: inherit; margin-top: -50px;}
}












#chips { box-sizing: border-box; max-width: 1400px; height: 100%; padding: 0 80px; margin: 60px auto 50px; } 
#chips h5 { font-size: 17px; margin-top: 40px; margin-bottom: 10px; } 

:root { --primary-color: 17, 64, 92; /* primary-color: #ff502f */
 --secondary-color: 91, 209, 215; /* secondary-color: #5bd1d7 */
 --gray-light: 224, 224, 224; /* gray-light: #e0e0e0; */}

.chip { padding: 0 12px; background-color: rgba(0,0,0,0); border-radius: 100px; display: inline-flex; margin: 4px; color: rgb(var(--text-color)); align-items: center; height: 32px; font-size: 14px; cursor: pointer;  border:rgb(var(--text-color)) 1px solid ;} 
.chip_none {display:none;}
.chips__filter { display: flex; justify-content: start; flex-wrap: wrap; } 
.chip .icon { font-size: 16px; color: rgb(var(--point-color)); width: 20px; text-align: center; } 
.chip .icon--leadind { margin: 2px 4px 0 -4px; } 
.chip .icon--trailing { margin: 2px -4px 0 4px; } 
.chips__filter .chip.chip--active { color: rgb(var(--text-color)); border: rgb(var(--point-color)) 2px solid; } 
.chips__filter .chip .chip--check { display: none; }
.chips__filter .chip.chip--active .chip--check { display: block; }




#cardList {max-width: 1400px; padding: 0 80px; margin: 50px auto;  box-sizing: border-box;}
#cardList h3 {margin: 0; margin-bottom: 0px;}
#cardList .top_head {margin-top: 50px;}
#cardList .card_wrap {width: 100%; display: flex; flex-wrap: wrap; justify-content: start;    align-items: center; transition: 0.3s; margin: 0 auto !important;}
#cardList .card_wrap .card {width: 300px; border: 1px solid #ddd; border-radius: 3px; overflow: hidden;  margin: 0 4px 0px; padding: 0; border-radius: 30px;  position: relative;}
#cardList .card_wrap .card .card_img {width: 100%; padding-top: 60%; overflow: hidden;position: relative;}
#cardList .card_wrap .card .card_img img {position: absolute; top: 0; left: 0; width: 100%;}

#cardList .card_wrap .card_content_wrap{text-align: left; padding: 0px 0px; display: flex; justify-content: space-between; border-radius: 50px; border: 1px solid #ddd; margin: 5px 3px 35px;}
#cardList .card_wrap .card_content_wrap h4 {margin: 0; font-size: 1.0em; line-height: 1.2em; padding: 8px 0 0; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#cardList .card_wrap .card_content_wrap p {margin:0; padding: 0; font-size: 0.8em; line-height: 1.2em; }
#cardList .card_wrap .card_content_wrap span {display: block;}
#cardList .card_wrap .card_content_wrap .card_left {padding-left: 25px; padding-top: 10px; width: 190px;}
#cardList .card_wrap .card_content_wrap .card_right a{display: block; width: 80px; height: 80px; border-radius: 50px; background-color : rgb(var(--point-color)); color: white; font-weight: 500; position: relative;}
#cardList .card_wrap .card_content_wrap .card_right a p {position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); font-size: 14px;}












@media screen and (max-width:1300px){ 
  #cardList { padding: 0 40px; } 
    #chips { padding: 0 40px; } 
        #mainCard { padding: 0 40px; } 
       #mainCard .sub_slider {justify-content:center;}
      #cardList .card_wrap {justify-content:center;}

}


@media screen and (max-width:750px){
        #chips { padding: 0 15px; } 
  #cardList{ padding: 0 15px; height: auto;} 
      #search { padding: 0 15px; } 
           #mainCard { padding: 0 15px; } 

    
}








#overview {max-width: 1400px; box-sizing: border-box; padding:0 80px; margin: 0 auto; margin-top: 65px;}
#overview .content-wrap .content .main-wrap {display: flex; width: 100%; justify-content: space-between;}

/*#overview .content-wrap .content .over-txt {width: 90px; height: 25px; background-color: rgb(12, 47, 54); line-height: 25px; color: white; text-align: center; border-radius: 8px; margin-top: -28px; margin-left: 30px;}*/

#overview .content-wrap .content .over-txt {color: rgb(12, 47, 54); margin-left: 30px;  font-size: 28px; font-weight: 700;}

/*#overview .content-wrap .content .over-txt p::after {position: absolute; display: block; content: ""; width: 100%; padding: 0 0.25vw; background: yellow;}*/

#overview .content-wrap .content .line-wrap {display: flex; }
#overview .content-wrap .content .line-wrap .line-box{width: 8px; height: 36px; background-color: rgb(38, 77, 124); margin-top: 28px;}


/*#overview .content-wrap .content .line {width: 100%; border-bottom: 1px solid rgb(169, 169, 169); margin-top: 120px;}*/
#overview .content-wrap .content .title {margin-left: 30px; display: flex; justify-content: space-between;}
#overview .content-wrap .content .title .txt1 {font-weight: 500;}
#overview .content-wrap .content .title .txt2 {color: rgb(96, 98, 100);}

#overview .content-wrap .content .main-wrap .main-img {padding-right: 30px;}
#overview .content-wrap .content .main-wrap .main-img img {width: 100%;}
#overview .content-wrap .content .main-wrap .main-txt {padding-left: 20px; width: 60%; border-top: 1px solid rgb(205, 205, 205); border-bottom: 1px solid rgb(205, 205, 205); display:block;display:block}
#overview .content-wrap .content .main-wrap .main-txt p {padding-bottom: 5px; padding-top: 8px; display:flex;}
#overview .content-wrap .content .main-wrap .main-txt p span {padding-left: 15px; width:100%;}
#overview .content-wrap .content .main-wrap .main-txt p .txt {font-weight: 500;  width: 25%; }


#overview .content-wrap .content .content-slide {padding-top: 60px;}
#overview .content-wrap .content .content-slide img {padding-left: 2px; padding-right: 2px; width:100%;}


#overview .content-wrap .content .content-other .other-wrap {width: 100%; height: 280px; margin-top: 60px; margin-bottom: 60px; background-color: rgb(229, 229, 229); background}
#overview .content-wrap .content .content-other .other-wrap .txt {text-align: center; line-height: 60px; font-weight: 500;}


#overview .content-wrap .content .portfolio_other { margin: 35px 0 0; background-color: #e5e5e5; }
#overview .content-wrap .content .portfolio_other .outer { overflow: hidden; max-width: 1200px; margin: 0 auto; }
#overview .content-wrap .content .portfolio_other .outer .other_title { margin: 23px 0 0; font-family: 'NanumSquare'; font-weight: 800; font-size: 17px; line-height: 17px; color: #4c4c4c; text-align: center; }
#overview .content-wrap .content .portfolio_other .outer .other_list { margin: 20px 0 30px; }
#overview .content-wrap .content .portfolio_other .outer .other_list ul { margin: 0; padding: 0; }
#overview .content-wrap .content .portfolio_other .outer .other_list li { position: relative; list-style: none; float: left; margin-left: 5px; line-height: 0; cursor: pointer; }
#overview .content-wrap .content .portfolio_other .outer .other_list li img {width:100%;}
#overview .content-wrap .content .portfolio_other .outer .other_list li:first-child { margin-left: 0; }

#overview .content-wrap .content .portfolio_other .outer .other_list .side { position: absolute; width: 100%; height: 61px; left: 0; bottom: 0; background:url("../images/main/list_icon.png") no-repeat 343px 18px; background-color: rgba(0,0,0,0.7); }
#overview .content-wrap .content .portfolio_other .outer .other_list .side .side_text { margin: 0 60px 0 12px; font-family: 'NanumSquare'; font-weight: 700; font-size: 20px; line-height: 24px; color: #ffffff; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#overview .content-wrap .content .portfolio_other .outer .other_list .side .side_text span { display: block; margin-top: 6px; font-weight: 400; font-size: 17px; }

#overview .content-wrap .content .portfolio_other .outer .other_list .list_pop { display: none; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); }
#overview .content-wrap .content .portfolio_other .outer .other_list .list_pop .pop_more { margin: 63px 0 0; line-height: 0; text-align: center; }
#overview .content-wrap .content .portfolio_other .outer .other_list .list_pop .pop_title { margin: 18px 0 0; font-family: 'NanumSquare'; font-weight: 700; font-size: 20px; line-height: 20px; color: #ffffff; text-align: center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#overview .content-wrap .content .portfolio_other .outer .other_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

@media screen and (max-width:1300px){ 
   #overview { padding: 0 40px; } 
}


@media screen and (max-width:750px){
   #overview { padding: 0 15px; height: auto;} 
   #overview .content_wrap {flex-wrap: wrap; }
   #overview .content_wrap .content {width: 100%;}
   #overview .content_wrap .img {width: 100%; height: auto; display: block; margin: 0 auto;}
   #overview .content_wrap .img img { position: inherit; margin-top: -50px;}
   #overview .content-wrap .content .main-wrap {flex-wrap: wrap;}
   #overview .content-wrap .content .main-wrap .main-txt {width: 100%;}
   #overview .content-wrap .content .title {flex-wrap: wrap;}
}



.portfolio_other { margin: 65px 0 0; background-color: #e5e5e5; }
.portfolio_other .outer { overflow: hidden; width: 1400px; margin: 0 auto; box-sizing: border-box; padding:0 80px;}
 .portfolio_other .outer .other_title { margin: 23px 0 0; font-family: 'NanumSquare'; font-weight: 800; font-size: 17px; line-height: 17px; color: #4c4c4c; text-align: center; }
.portfolio_other .outer .other_list { margin: 20px 0 30px; }
.portfolio_other .outer .other_list ul { margin: 0; padding: 0; }
.portfolio_other .outer .other_list li { position: relative; list-style: none; float: left; margin-left: 25px; line-height: 0; cursor: pointer; width:31.9%;}
.portfolio_other .outer .other_list li img {width:100%}
.portfolio_other .outer .other_list li:first-child { margin-left: 0; }

.portfolio_other .outer .other_list .side { position: absolute; width: 100%; height: 61px; left: 0; bottom: 0; background:url("../images/list_icon.png") no-repeat 343px 18px; background-color: rgba(0,0,0,0.7); }
.portfolio_other .outer .other_list .side .side_text { margin: 0 60px 0 12px; font-family: 'NanumSquare'; font-weight: 700; font-size: 20px; line-height: 24px; color: #ffffff; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.portfolio_other .outer .other_list .side .side_text span { display: block; margin-top: 6px; font-weight: 400; font-size: 17px; }

.portfolio_other .outer .other_list .list_pop { display: none; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); }
.portfolio_other .outer .other_list .list_pop .pop_more { margin: 63px 0 0; line-height: 0; text-align: center; }
.portfolio_other .outer .other_list .list_pop .pop_more img {width:55px;}
.portfolio_other .outer .other_list .list_pop .pop_title { margin: 18px 0 0; font-family: 'NanumSquare'; font-weight: 700; font-size: 20px; line-height: 20px; color: #ffffff; text-align: center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.portfolio_other .outer .other_list:after { content:""; display:block; clear:both; }
@media screen and (max-width:1300px){ 
   .portfolio_other p{ padding: 0 40px; box-sizing:border-box;} 
   .portfolio_other .outer .other_title {text-align: center;}
}


@media screen and (max-width:750px){
   .portfolio_other {padding: 0 15px; box-sizing:border-box; box-sizing:border-box;} 
   .portfolio_other .outer .other_title p {text-align: center; box-sizing: border-box; width:100%;}
   .portfolio_other .outer .other_list {flex-wrap: wrap;}
   .portfolio_other .outer .other_list ul li {float: none; margin: 0 auto; padding-top: 10px;}
    .portfolio_other .outer .other_list ul { width: 100%;}
    .portfolio_other .outer .other_list .list_pop {top: 0; bottom: 0;}
}




#tab {padding:20px 0px; margin: 0 auto; padding-top: 60px; max-width: 1580px; margin-left: -40px;}
#tab ul li {list-style: none; float: left; text-align: center; width: 33.33333%; border: 1px solid white; box-sizing: border-box;}
#tab a {display: block; color: black; font-size: 18px; line-height: 44px; font-weight: 500; letter-spacing: -1.5px; background-color: rgb(242, 242, 242); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
#tab a:hover {  background-color: rgb(35, 140, 162); color: #fff; }
#tab li.select a, #tab li.select a:hover {color: #fff; background-color: rgb(35, 140, 162);}
#tab li:first-child { border-left: none; }
#tab:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}




#subBanner {width:100% ; max-height:350px; position:relative; }
#subBanner img {width:100%;}
#subBanner h4 {position:absolute; bottom : 5%; left:50%; transform: translateX( -50%); font-size:2em; color:white;}
#left {max-width: 1400px; box-sizing: border-box; padding:0 80px; margin: 0 auto; margin-top: 60px;}


#contect {max-width: 1400px; box-sizing: border-box; padding:0 80px; margin: 60px auto;}
#contect .contect_content_wrap {display:flex; }
#contect .contect_content_wrap .img {width:55%}
#contect .contect_content_wrap .img img {width:100%}
#contect .contect_content_wrap .cotent{padding:15px; padding-left:50px;  position:relative; width:45%; box-sizing:border-box;}
#contect .contect_content_wrap .cotent h2 {margin:0; padding:0; font-size:1.2em; margin-bottom:20px;}
#contect .contect_content_wrap .cotent h4 {margin:0; padding:0}
#contect .contect_content_wrap .cotent p {margin:0; padding:0; font-size:14px; color:rgb(156, 156, 156);}
#contect .contect_content_wrap .cotent .location_wrap{margin-bottom:40px;}
#contect .contect_content_wrap .cotent .icon_wrap {display:flex; margin-bottom:10px;}
#contect .contect_content_wrap .cotent .icon_wrap i {margin-top:5px; margin-right:10px;}
#contect .contect_content_wrap .cotent .content_rewrap{position:absolute; left:50px; top:50%; transform: translateY( -50%); word-break: keep-all;}
@media screen and (max-width:1300px){ 
 #left { padding: 0 40px; } 
    #contect { padding: 0 40px; } 
}


@media screen and (max-width:750px){
  #left{ padding: 0 15px; height: auto;} 
  #contect{ padding: 0 15px; height: auto;} 
    #contect .contect_content_wrap {display:block; }
    #contect .contect_content_wrap .img{width:100%;}
    #contect .contect_content_wrap .cotent{width:100%;padding:0; padding-top:50px}
    #contect .contect_content_wrap .cotent .content_rewrap{position:relative; top:0 ;left:0; transform:none;}
}



.category_wrap {display: flex ; justify-content: space-between;}

.search_input {width: 25%; margin: 0px 0; position: relative;}
.search_input input {width: 100%;  height: 50px; border-radius: 50px; box-sizing: border-box; padding: 7px 40px  5px; border:2px solid; margin:0;}
.search_input input:focus {outline: 2px solid #264B7B;}
.search_input input::placeholder {color: rgb(180, 180, 180);   font-family: 'Roboto', 'Noto Sans KR', sans-serif ; margin-top: 2px;}
.search_input button {background-color: rgba(0, 0, 0, 0); border: none; display: block; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
 .search_input button img {width: 30px; height: 30px;}
 .search_input .search_list {display: block; height: 0px; overflow: hidden; list-style: none; line-height: 1.7em;  padding: 10px 30px; width: calc(100% - 70px);  border-radius: 0 0  10px 10px; border: 1px solid #ddd;margin: 0 auto; box-sizing: border-box;position: absolute; top: 52px; left: 50%; transform: translateX(-50%);background-color: white; z-index: 12; opacity: 0; transition: height 0.3s;}
.search_input .search_list li a {width: 100%; display: block;}
 .search_input .search_list li a:hover {color:#264B7B;}
.h3margin {margin-top: 60px; margin-left: 10px;}

@media screen and (max-width:1300px){ 
   .category_wrap {display: block;}
   .search_input{width: 100%; margin: 050px 0;}
  }