@charset "utf-8";

/**list**/
.company{max-width: 1600px;margin:0 auto;}
.company .list{border-top:2px solid #001d39;padding-top:40px;}
.company .list > ul{display: grid;grid-template-columns: 1fr 1fr;gap:40px;}
.company .list > ul > li{border:1px solid #ddd;display: flex;padding: 50px 50px 45px 0;transition: all ease .5s;}
.company .list > ul > li:hover{border:1px solid #0070d8;box-shadow: rgba(0,0,0,0.1) 0 0 10px 3px;}
.company .list .img{width:380px;height: 190px;text-align:center;overflow: hidden;}
.company .list .img > a{display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;}
.company .list .img > a img{transition:all ease .25s;}
.company .list .img > a:hover img{transform: scale(1.05);}
.company .list .txt{width:calc(100% - 380px);}
.company .list .txt .title{position: relative;margin-bottom: 15px;}
.company .list .txt .title > strong{display: inline-block;font-family: 'Pretendard Bold';font-size:20px;vertical-align: middle;margin-right:20px;}
.company .list .txt .title a.home{background: #fff url('../images/home-icon.png') no-repeat 17px 46%;color:#0070d8;font-size:14px;font-family: 'Pretendard Regular';display: inline-block;border:1px solid #0070d8;padding:5px 20px 5px 40px;border-radius: 20px;vertical-align: middle;transition: all ease .5s;}
.company .list .txt .title a.home:hover{background:#0070d8 url('../images/home-icon-on.png') no-repeat 17px 46%;color:#fff;}
.company .list .txt > ul > li{font-family: 'Pretendard Medium';font-size: 16px;position: relative;line-height: 1.4;padding-left: 90px;color:#121212;}
.company .list .txt > ul > li + li{margin-top:5px;}
.company .list .txt > ul > li > span{position: absolute;left:0;top:0;width: 80px;color:#353535;font-family: 'Pretendard Regular';}

/**view**/
.company .view{border-top:2px solid #001d39;padding-top:50px;}
.company .view .inner{display: flex;}
.company .view .inner .thum{width:350px;}
.company .view .inner .thum .tit-box{background:#f7f9fc;padding:40px;height: 500px;}
.company .view .inner .thum .tit-box > strong{font-size:30px;font-family: 'Pretendard Bold';display: block;margin-bottom: 30px;}
.company .view .inner .thum .tit-box .img{display: flex;justify-content: center;align-items: center;height: 300px;background: url('../images/g-logo.png') no-repeat center;}
.company .view .inner .thum > ul{margin-top:20px;}
.company .view .inner .thum > ul > li + li{margin-top:15px;}
.company .view .inner .thum > ul > li a{padding:20px 20px 20px 60px;display: block;font-size:16px;font-family: 'Pretendard Medium';}
.company .view .inner .thum > ul > li .home-btn{background: #0082ff url('../images/home-btn-icon.png') no-repeat 30px center;border:1px solid #0082ff;color:#fff;}
.company .view .inner .thum > ul > li .list-btn{background: #fff url('../images/list-btn-icon.png') no-repeat 30px center;border:1px solid #424242;color:#424242;}

.company .view .inner .conts{width:calc(100% - 350px);padding-left:80px;}
.company .view .inner .conts .line{padding:50px 0;border-bottom:1px solid #c8c8c8;}
.company .view .inner .conts .line:nth-child(1){padding-top:0;}
.company .view .inner .conts .line:nth-last-child(1){border-bottom:0;}
.company .view .inner .conts .sub-tit{display: block;font-size:24px;color:#0070d8;font-family: 'Pretendard Bold';margin-bottom:30px;line-height: 1.25;}
.company .view .inner .conts p{font-size:16px;font-family: 'Pretendard Medium';color:#121212;line-height: 1.6;}

/*icon-list*/
.company .view .inner .conts .icon-list{display: flex;margin-bottom: 50px;}
.company .view .inner .conts .icon-list > li{padding-left:65px;}
.company .view .inner .conts .icon-list > li + li{margin-left: 5%;}
.company .view .inner .conts .icon-list > li > span{display:block;color:#666;font-family:'Pretendard Regular';font-size:14px;}
.company .view .inner .conts .icon-list > li > strong{display:block;color: #000;font-family: 'Pretendard Bold';font-size: 21px;}
.company .view .inner .conts .icon-list > li.item > strong{font-size:16px;padding-top: 5px;}
.company .view .inner .conts .icon-list > li.date{background:url('../images/view-icon01.png') no-repeat left top;}
.company .view .inner .conts .icon-list > li.grade{background:url('../images/view-icon02.png') no-repeat left top;}
.company .view .inner .conts .icon-list > li.members{background:url('../images/view-icon03.png') no-repeat left top;}
.company .view .inner .conts .icon-list > li.item{background:url('../images/view-icon04.png') no-repeat left top;}

/*text-list*/
.company .view .inner .conts .text-list > li{font-family: 'Pretendard Medium';font-size:16px;color:#121212;padding-left:180px;position: relative;}
.company .view .inner .conts .text-list > li + li{margin-top:15px;}
.company .view .inner .conts .text-list > li > span{color:#353535;font-family: 'Pretendard Regular';position: absolute;left:0;top:0;width:160px;}

/*img-list*/
.company .view .inner .conts .img-list{overflow-x:scroll;max-width: 1400px;padding-bottom: 30px;}
.company .view .inner .conts .img-list::-webkit-scrollbar{background-color: #fff;height: 4px;overflow: visible;}
.company .view .inner .conts .img-list::-webkit-scrollbar-thumb{background: #0376d8 url('../images/scrollbar-dash.png') no-repeat center;border-radius: 10px;outline:5px solid #0376d8;cursor: grab;}
.company .view .inner .conts .img-list::-webkit-scrollbar-track{border-radius: 10px;background-color: #e5e5e5;height: 4px;}
.company .view .inner .conts .img-list > ul{white-space:nowrap;font-size: 0;}
.company .view .inner .conts .img-list > ul > li{display: inline-block;border: 1px solid #ccc;height: 180px;transition: all ease .5s;position: relative;}
.company .view .inner .conts .img-list > ul > li + li{margin-left:30px;}
.company .view .inner .conts .img-list > ul > li > a{display:block;width: 100%;height: 100%;}
.company .view .inner .conts .img-list > ul > li > a:before{content:'';width:100%;height: 100%;background:rgba(0,0,0,0.25) url(../images/zoom-icon.png) no-repeat center;position: absolute;left:0;top:0;opacity: 0;transition: all ease .5s;}
.company .view .inner .conts .img-list > ul > li > a:hover:before{opacity: 1;}
.company .view .inner .conts .img-list > ul > li img{height: 100%;}

.company .map {width: 100%; height: 540px;}
.company #map {height: 100%;}
.company .desc {position: relative; display: inline-block; width: 100%; margin: -31px 0 0 0; padding: 21px 0 21px 30px; background: #EDF1F4; z-index: 10;}
.company .desc .address,
.company .desc .tel {position: relative; float: left; padding:10px 0 10px 80px;}
.company .desc .tel::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../images/ic_call.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;}
.company .desc .address {margin-right: 45px;}
.company .desc .address::before {content: ""; position: absolute; width: 60px; height: 60px; background: #06988D url("../images/ic_location.png") no-repeat center; border-radius: 50%; left: 0; top: 5px;}
.company .desc strong {display:block; font-family: 'Montserrat'; font-weight: 700; font-size: 14px; color: #333333}
.company .desc p {font-family: 'Noto Light'; font-size: 16px; color: #333;}
.company .desc .btn-location {float: right; position: relative; padding: 15px 0 15px 20px; background: #003956 url('../images/btn_repeat_bg.png'); font-family: 'Noto Regular'; font-size: 18px; color: #fff; width: 190px; margin-right: 30px; }
.company .desc .btn-location::after {content: ""; position: absolute; width: 30px; height: 30px; background: url("../images/ic_location_arrow.png") no-repeat center; right: 20px; top: 14px; transition: right 0.5s;}
.company .desc .btn-location:hover::after {right: 15px;}



/* Button */
.company .board-button {text-align: center; display: inline-block; width: 100%;padding:30px 0;}
.company .board-button .btn-control {float: right;}
.company .board-button .btn-deco {display: inline-block; min-width: 80px; cursor: pointer; font-size: 14px; height: 40px; line-height: 37px; text-align: center; margin: 0 1px; border-radius: 100px; font-family: 'Pretendard Medium';}
.company .board-button a.btn-deco, .board-button  input.btn-deco {color: #fff;}
.company .board-button .btn-deco.color1 {background: #8e99ab; border: 1px solid #8e99ab;}
.company .board-button .btn-deco.color2 {background: #2b3e5c; border: 1px solid #2b3e5c;}
.company .board-button .btn-deco.color3 {background: #06988D; border: 1px solid #06988D;}
.company .board-button .btn-deco.color4 {background: #2b3e5c; border: 1px solid #2b3e5c;}
.company .board-button .btn-deco.color5 {background: #004ea2; border: 1px solid #004ea2;}
.company input[type="submit"],
.company input[type="button"]{cursor: pointer;}

/**Responsive**/
@media all and (max-width:1600px) {
    .company .list > ul > li{padding: 40px 25px 35px 0;}
    .company .list .img{width:35%;}
    .company .list .txt{width:65%;padding-left:5%;}

    .company .view .inner .conts .icon-list {flex-wrap: wrap;}
    .company .view .inner .conts .icon-list > li{width: calc(100% / 3 - 40px);}
    .company .view .inner .conts .icon-list > li.item{width:100%;margin-left:0;margin-top: 20px;}
}

@media all and (max-width:1200px) {
    .company .list > ul{gap:20px;}
    .company .view .inner .thum{width:25%;}

    .company .view .inner .thum .tit-box{padding:25px 15px;height: 380px;}
    .company .view .inner .conts{width:75%;padding-left: 35px;}
    .company .view .inner .thum .tit-box > strong{font-size:20px;}
}

@media all and (max-width:1023px) {
    .company .list > ul > li{display:block;padding: 40px 30px 25px;}
    .company .list .img{width:100%;}
    .company .list .txt{width:100%;padding-left:0;padding-top:35px;}

    .company .view .inner{display: block;}
    .company .view .inner .thum{width:100%;}
    .company .view .inner .conts{width:100%;padding-left:0;padding-top:50px;}

    .company .desc .address,
    .company .desc .tel {float: none; width: 100%}
}

@media all and (max-width: 768px){
    .company .list > ul{display: grid;grid-template-columns: 1fr;gap:25px;}

    .company .view .inner .conts .sub-tit{font-size:18px;margin-bottom:20px;}
    .company .view .inner .conts .icon-list{}
    .company .view .inner .conts .icon-list > li{padding-left:50px;width: calc(100% / 3 - 5px);background-size: 35px !important;}
    .company .view .inner .conts .icon-list > li + li{margin-left:5px;}
    .company .view .inner .conts .icon-list > li > span{font-size:10px;}
    .company .view .inner .conts .icon-list > li > strong{font-size:16px;}
    .company .view .inner .conts .icon-list > li.item > strong{font-size:14px;}
    .company .view .inner .conts .text-list > li{padding-left:0;font-size:14px;}
    .company .view .inner .conts .text-list > li + li{margin-top:20px;}
    .company .view .inner .conts .text-list > li > span{position:initial;display:block;margin-bottom:5px;font-size:15px;}
    
    .company .desc .btn-location {display: inline-block; margin-top: 10px;}
}