@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* board */
/* ul.bbsList{border-top-color:#152f53;}
ul.bbsList li .more.active,
ul.bbsList li .more:hover,
ul.bbsList li .more:focus{border-color:#152f53;}
ul.bbsList li .more em,
ul.bbsList li .subject:hover,
ul.bbsList li .subject:focus,
ul.bbsList li:hover .date,
ul.bbsList li:hover .date i{color:#152f53;}
ul.bbsList li .notice{background:#152f53;} */

.bbsContent img{width:100%; height:auto;}
.faqList dt.on:before{background:#152f53;}

.bbsTitle_cont > i{color:#c6a582; border-bottom-color:#c6a582; display: none;}

#header {position: absolute;}
#header h1 a{background:url(/images/common/logo_w.svg) no-repeat; background-size: cover; }
#header .btn_menu{color:#fff;}
#header .header{position: relative;}
#header h1,#header button.circle{position: absolute;}

#content{min-height: 480px;}
#content .inner{max-width: 1440px; padding: 0 20px; box-sizing: border-box; width: 100%; margin:  0 auto; transition: padding .3s;}

#wrap.change #header h1 a{background:url(/images/common/logo.svg) no-repeat; background-size: cover;}
/* #wrap.change #header .btn_menu{color:#0e0e0e} */
/* #wrap.change #header.fixed .header{background-color: #fff; } */

.area_subVisual{ height: 680px; transition: all .5s;  }
.area_subVisual span.bg{display: block; background-color:#0e0e0e; width: 100%; height: 100%; transition: all .5s;}
.area_subVisual .inner{max-width: 1440px;width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);  padding:0 20px; box-sizing: border-box;}
.area_subVisual .title{padding-top: 220px; transition: all .5s;}
.area_subVisual .title h3{color:#00e7bd; font-size: 100px; font-weight: 800; line-height: 1; transition: all .5s;}
.area_subVisual .title span{color:#fff; display: block; font-size:32px; font-weight: 800; margin-bottom: 6px; text-transform: uppercase; transition: all .5s;}
.area_subVisual p{color:#fff; box-sizing: border-box; padding-left: 56%; font-size: 20px; line-height: 34px; padding-top: 80px; transition: all .5s; }
.visaul_moving.round span.bg{border-radius: 0 0 50px 50px; transform: scale(0.97); transition: all .5s;}

/* work */
.area_workList{ padding:0 16em 150px; margin: 0 auto; width: 100%; margin: 0 auto; background-color: #0e0e0e; box-sizing: border-box; transition: padding .3s;}
.area_workList ul{display: flex; /* gap: 1.3em; */ flex-wrap: wrap; margin-left: -0.6em;box-sizing: border-box;margin-right: -0.6em;}
.area_workList ul li{width:50%; box-sizing: border-box;padding: 0.6em;}
.area_workList ul li a{position: relative; width: 100%; display: block; overflow: hidden; height: 0; padding-bottom: 100%;border-radius: 1em; }
.area_workList ul li a::before{content: ""; width: 100%; height: 100%; transition: all .4s; background-color:#743fde; border-radius: 1.4em;  position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; opacity: 0; visibility: hidden; }
/* .area_workList ul li:nth-child(even) a::before{background-color: #00e7bd;} */
.area_workList ul li a img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; bottom:0; right: 0; object-fit: cover;}
.area_workList ul li a em{position: absolute; z-index: 2; font-size: 24px; font-weight: 800; color:#eee; left: 0; bottom: 0; opacity: 0; visibility: hidden; transition: all .4s;}
.area_workList ul li:hover a::before{opacity: 0.9; visibility: visible;}
.area_workList ul li:hover em{opacity: 1; visibility: visible; left: 2em; bottom: 2em;}

.area_workList .more_view{text-align: right;margin-top: 80px; transition: all .5s; box-sizing: border-box;}
.area_workList .more_view button{color:#fff; background-color: transparent;  font-size: 45px; font-weight: 700; position: relative;padding-right: 27px; transition: all .5s;}
.area_workList .more_view button i{width: 14px; height: 14px; border-radius: 100px; background-color:#00e7bd; position: absolute; bottom: 7px; right: 0; transition: all .5s;}

/* about us */
.area_aboutusTop{padding-top: 225px; position: relative; transition: all .5s;}
.area_aboutusTop .inner{max-width: 1440px;width: 100%;  padding:0 20px; box-sizing: border-box;}
.area_aboutusTop h3{font-size: 100px; font-weight: 800; line-height: 1.3; color:#0e0e0e; transition: all .5s;}
.area_aboutusTop p{font-size:28px; color:#0e0e0e; /* padding-left: 12px; */ margin-top: 80px ;transition: all .5s;;}

.aboutImage{width: 100%; height: 456px; position: relative; margin: 90px 0; transition: all .5s;}
.aboutImage span{width: 100%; height: 100%; background-size: cover; background-attachment: fixed; background-position: 50% 50%; display: block; transform: scale(0.97); border-radius: 50px; overflow: hidden;}
.aboutImage p{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;}

.aboutText strong{display: block; font-size:42px; margin-bottom: 20px;  transition : all .5s;}
.aboutText p{font-size:22px; word-break: keep-all; line-height: 39px; transition : all .5s;}
.aboutText p  + p{margin-top: 60px;}
.aboutText .text{padding-left: 45% ; transition : all .5s;}

.aboutLink{background-color: #743fde; border-radius: 50px 50px 0 0; box-sizing: border-box; margin-top: 120px; padding:120px 0; transition: all .5s;}
.aboutLink .txt{max-width: 1440px; width: 100%; margin: 0 auto; padding:0 20px; box-sizing: border-box; transition: all .5s; }
.aboutLink .txt p{color:#fff; font-weight: 600; font-size:52px; transition: all .5s;}
.aboutLink .txt p span{display: block; font-size:24px; /* font-weight: 300; */color: #02e7bd;}
.aboutLink .button_wrap{text-align: right;}
.aboutLink .button_wrap a{font-size: 32px; font-weight: 800; color:#fff; text-decoration: dashed; position: relative; display: inline-block; }
.aboutLink .button_wrap a::before{content: ""; width: 100%; height: 4px; background-color:#fff; position: absolute; bottom:0; left: 0;}

/* service */
.wrap_line{position: fixed; z-index: -1; left: 50%; top:0; height: 100%; width: 100%;}
.wrap_line span{opacity: 0.1; display: block; position: absolute; }
.wrap_line .vertical{width: 85.416%; position: fixed; z-index: 0; left: 50%; top:0; height: 100%; transform: translateX(-50%); -webkit-transform: translateX(calc(-50% + 0.5px));}
.wrap_line .vertical span{width: 1px; height: 100%; border-right: 1px solid #535353; top:0}
.wrap_line .vertical span.ver01{left: 50%;}
.wrap_line .vertical span.ver02{left: 27.4390%;}
.wrap_line .vertical span.ver03{right: 26.4390%;}
.wrap_line .vertical span.ver04{left:0}
.wrap_line .vertical span.ver05{right:0}
.wrap_line .horizon{position: fixed; z-index: 0; left: 0; top:0; height: 100%; width: 100%;}
.wrap_line .horizon span{width: 100%; height: 1px; border-top: 1px solid #535353; left: 0;}
.wrap_line .horizon span.ver01{top: 90px;}
.wrap_line .horizon span.ver02{top:40.3%}
.wrap_line .horizon span.ver03{bottom:24%}

.area_service{padding: 100px 0 150px; box-sizing: border-box; transition: all .5s;}
.service_tag li{display: inline-block; margin-right:8px; margin-bottom:12px; font-size:20px; background-color:#e3e3e3; padding:18px 42px; border-radius: 50px; transition: all .5s;;}
.ser_table{padding-top: 80px; box-sizing: border-box; transition: all .5s;}
#content table.table thead th{background-color:#0e0e0e; padding:20px; color:#00e7bd; font-size:17px;  }
#content table.table thead th:nth-child(1){border-top-left-radius: 30px;}
#content table.table thead th:last-child{border-top-right-radius: 30px;}
#content table.table tbody td{padding:20px; background-color: #fff; font-size:17px}
#content table.table tbody tr td:first-child, #content table.table tbody tr th:first-child{background-color: #fff; font-size:17px}
#content table.table tbody th,#content table.table tbody td{border:1px solid #333}
#content table.table thead + tbody th{border-right-color: #333;}
#content table.table{border-top: 0;}

/* customer */
.customer_tag{margin-top: 80px; padding-bottom: 90px; transition: all .5s;}
.customer_tag ul{display: flex; justify-content: center; align-items: center; width: 768px; margin: 0 auto; transition: all .5s;}
.customer_tag ul li{width: 33.333%; text-align: center; transition: all .5s; }
.customer_tag ul li a{font-size: 22px; font-weight: 600; color:#0e0e0e;  padding:18px 49px; box-sizing: border-box; display: block; transition: all .5s;}
.customer_tag ul li + li{margin-left: 32px; transition: all .5s;}
.customer_tag ul li.on{background-color: #0e0e0e; border-radius: 90px;box-sizing: border-box; transition: all .5s;}
.customer_tag ul li.on a{color:#00e7bd;}

ul.bbsList{border-top-color:none; border-top: none;}
ul.bbsList li + li{margin-top: 18px;}
ul.bbsList li {border:none; border-radius: 100px; background-color:#f8f8f8;}
ul.bbsList li .notice{background-color: #0e0e0e; padding:8px 20px; font-size:16px}
ul.bbsList li .date{left: 5em;font-family:'pretendard',sans-serif; font-size:17px}
ul.bbsList li .date:before{display: none;}
ul.bbsList li .subject {padding:45px 24px 45px 11em; box-sizing: border-box; display: block;text-overflow: ellipsis; box-sizing: border-box; white-space: nowrap;  }
ul.bbsList li:hover .date,
ul.bbsList li:hover .date i{color:#00e7bd;}
ul.bbsList li .more{display: none;}

.area_customerConts .bbsView{table-layout:inherit;}
.area_customerConts .bbsView tr{display: block;}
.area_customerConts .bbsView tr + tr{margin-top: 50px;}
.area_customerConts .bbsView > tbody > tr > th{font-size:24px; font-weight: 700;}
.area_customerConts .bbsView > tbody > tr > th, 
.area_customerConts .bbsView > tbody > tr > td, 
.area_customerConts .bbsView > thead > tr > th{ border-bottom: 0; display: block; width: 100%;}
.area_customerConts .bbsView > tbody > tr > th{padding:0!important}
.area_customerConts .bbsView > tbody > tr > td{color:#0e0e0e; font-size:17px}
.area_customerConts.ver01 input[type=text], 
.area_customerConts.ver01 input[type=password],
.area_customerConts.ver01 input[type=tel],
.area_customerConts.ver01 input[type=date],
.area_customerConts.ver01 input[type=email],
.area_customerConts.ver01 input[type=number]{border:none; border-bottom: 1px solid #0e0e0e; height: 52px; font-size:17px; }
.area_customerConts textarea{border:none; border-bottom: 1px solid #0e0e0e; }
.area_customerConts .box_privacy textarea{border:1px solid #0e0e0e; box-sizing: border-box; padding: 20px; font-szie:17px}
.area_customerConts textarea::placeholder{color:#ddd; font-size:18px}
.inner_sm{max-width: 960px; width: 100%; padding:0 20px; box-sizing: border-box; margin: 0 auto; height: 100%;}
.area_customerConts{padding:0 0 200px}
.area_customerConts .btn_search{background-color: #0e0e0e; padding:18px 32px; border-radius: 30px; color:#fff;}
.area_customerConts .summit_button{ padding:22px 42px; border-radius: 90px; font-size:24px; background-color: #743fde; border:1px solid #743fde; color:#fff }

.area_customerConts .search_bbs{margin-top: 40px;}
.search_bbs .search{border-bottom: 1px solid #0e0e0e;}
.search_bbs .search > *{border: none!important; font-size:17px}
.area_customerConts.ver02 input[type="submit"]{border-radius: 0; background-color: transparent}
.area_customerConts.ver02 .search_btn{font-size: 0; width: 30px; height: 30px; background: url(/images/content/icon_search.svg) no-repeat; background-size:cover; }


.pagination{margin-top: 60px;}
.pagination > *{border-radius: 100%; height: 44px; width: 44px; border:none; line-height: 43px; font-size:19px;}
.pagination span{background-color:#0e0e0e; color:#00e7bd}
.pagination a[class^="btn_"]{width: 44px; background-position-y:4px}

@media all and (max-width:1760px){
    .area_aboutusTop h3{font-size: 80px; }
    .area_aboutusTop p{font-size:24px; margin-top: 54px; }
    #content .area_aboutusTop .inner,
    #content .aboutText .inner{width: 80%;}
}

@media all and (max-width:1600px){
    .area_subVisual .title h3{font-size: 88px;}
    .area_subVisual .title span{font-size:28px}
    .area_subVisual p br{display: none;}
    .area_subVisual .inner{width: 90%;}
    .aboutText p{font-size: 20px; line-height: 34px;}
}
@media all and (max-width:1440px){

    .aboutLink .txt{width: 80%;}
    .aboutLink .txt p span{font-size:22px}
    .aboutLink .txt p{font-size:42px}
    .aboutLink .button_wrap a{font-size:26px}
    .area_subVisual p{padding-left: 43%;}
    .area_workList{padding:0 2em 100px}
    .area_workList .more_view button{font-size:35px; padding-right: 25px;}
    .area_workList .more_view button i{width: 12px; height: 12px; bottom: 4px;}
    .aboutText .text{padding-left: 0;}
    
}

@media all and (max-width:1366px){

    .area_subVisual .title h3,
    .area_aboutusTop h3{font-size:72px}
    .service_tag li{padding:12px 34px; font-size:18px}

}
@media all and (max-width:1280px){
    .area_service{padding:60px 0 150px }
    
}
@media all and (max-width:1024px){
    .area_subVisual{height: 600px;}
    .area_subVisual p{padding-left:0; padding-top: 60px;}
    .area_workList ul li a::before{ top: inherit; bottom: 0; height: 30%; opacity: 1; visibility: visible; background-color: transparent; /* background: linear-gradient(to top, #743fde, transparent); */}
    .area_workList .more_view{padding-right: 20px;}
    .area_workList ul li a em,.area_workList ul li:hover em{opacity: 1; visibility: visible; left: 1em; bottom: 1em;}
    
    .area_subVisual .title h3,.area_aboutusTop h3{font-size:62px}
    .area_aboutusTop p{margin-top: 40px; font-size:22px; }
    .aboutText strong{font-size:38px}
    .aboutText p{font-size:18px; line-height: 30px;}
    .aboutImage span{background-attachment: inherit;}

    .service_tag li{font-size:16px; padding:12px 24px}
    .ser_table{padding-top: 60px;}

    .customer_tag ul{width: 80%;}
    .customer_tag ul li {width: auto;}
    .customer_tag ul li a{padding:18px 34px; font-size: 18px;}
    .customer_tag ul li + li{margin-left: 0;}

    ul.bbsList li .date{left: 3em;}
    ul.bbsList li .subject{padding:32px 24px 32px 130px}

 
}
@media all and (max-width:960px){

    .area_aboutusTop{padding-top: 180px;}

    .area_workList ul li{width: 50%; padding: 0.4em}
    .area_workList ul li a{border-radius: 1rem;}
    .area_workList ul li a::before{border-radius: 1rem;}
    .area_workList ul{margin: 0;}
    .area_workList{padding:0}

    .aboutLink .button_wrap{margin-top: 50px;}

    .search_bbs .search input[type="text"]{width: 150px;}   
}
@media all and (max-width:820px){
    #content .area_aboutusTop .inner, #content .aboutText .inner{width: 87%;}
    .aboutImage{height: 405px; margin:60px 0}
    .area_subVisual .title span{font-size:22px}
    .area_aboutusTop h3,.area_subVisual .title h3{font-size:52px}
    .area_aboutusTop p{font-size:20px}
    
    .aboutText strong{font-size:34px}
    
}
@media all and (max-width:768px){
    .area_subVisual{height: 500px;}
    .area_subVisual p{padding-top: 60px; font-size:18px; padding-top: 40px;}

    .area_aboutusTop{padding-top: 140px;}
    .aboutLink .txt{width: 90%;}
    .aboutLink{margin-top: 80px; padding: 80px 0}
    .aboutLink .txt p{font-size:36px; }
    .aboutLink .button_wrap{margin-top:30px}
    .aboutLink .button_wrap a{font-size:22px}

    .customer_tag{overflow-x: auto;}
    .customer_tag ul{width: 100%; display: table;}
    .customer_tag ul li {display: table-cell; white-space: nowrap;}
    .customer_tag ul li a{padding:16px 24px; font-size:19px; padding:0; display: inline-block; opacity: 0.4;}
    .customer_tag ul li.on{background:transparent}
    .customer_tag ul li.on a{opacity: 1;}
    .customer_tag{margin-top: 50px; padding-bottom: 50px;}
    .ser_table{padding-top: 40px;}
}
@media all and (max-width:640px){
    #content .inner{padding: 0 16px}
    .area_subVisual{height: 460px;}
    .area_subVisual .title span{font-size:15px}
    .area_subVisual .title{padding-top: 170px;}
    .area_subVisual .title h3, .area_aboutusTop h3{font-size:42px}
    .area_subVisual p{font-size:16px; line-height: 28px;}
    
    .area_workList ul li{width: 100%; padding: 5px 0;}
    .area_workList ul li a{border-radius: 35px;}
    .area_workList ul li a::before{border-radius: 35px;}
    .area_workList .more_view { margin-top: 50px;}
    .area_workList .more_view button{font-size: 28px; padding-right: 20px; }
    .area_workList .more_view button i{width: 10px; height: 10px;}

    #content table.table thead th,
    #content table.table tbody th, 
    #content table.table tbody td,
    #content table.table tbody tr td:first-child,
    #content table.table tbody tr th:first-child{padding: 14px 20px; font-size:15px}

    .area_service{padding:50px 0 80px}
    .area_customerConts{padding:30px 0 80px}
    .area_customerConts .btn_search{padding:11px 18px; font-size:12px; position: absolute; z-index: 1; right: 0; top: 18px;}
    .area_customerConts .summit_button{font-size:18px}
    ul.bbsList li .date{left: 2em; font-size:13px}
    ul.bbsList li .notice{padding:4px 8px; font-size:12px; display: block; width:80px;}
    ul.bbsList li .subject{padding:20px 16px 20px 120px}
    ul.bbsList li .date i{font-size: 25px;}
    .search_bbs .search{float: left; position: relative; height: 50px;}
    .search_bbs .search:nth-child(3){display: none;}
    .search_bbs .search:nth-child(4){width: 100%; display: flex; align-items: center; justify-content: space-between;}

    
    
}
@media all and (max-width:540px){}
@media all and (max-width:480px){
    #content .area_aboutusTop .inner, #content .aboutText .inner{width: 95%;}
    .area_subVisual .inner{width: 100%;}
    .aboutText strong {font-size:28px}
    .aboutText p{font-size:16px; line-height: 28px;}
    .aboutText p + p{margin-top: 30px;}
    .aboutImage{margin:40px 0}
    .aboutLink .txt{width: 100%;}
    .aboutLink .txt p{font-size:28px}
    .aboutLink .button_wrap a{font-size:20px}
    .aboutLink .txt p span{font-size:18px}

    .area_aboutusTop p{font-size:18px}
    .area_aboutusTop p br{display: none;}

    .service_tag li{padding:8px 12px; font-size: 13px;}

    .customer_tag{padding-bottom: 12px;}
    .customer_tag ul li a{font-size:17px}
    .area_customerConts .bbsView > tbody > tr > th{font-size: 18px;}
    
    ul.bbsList li .subject{padding:20px 16px 20px 90px}
    ul.bbsList li .date{left: 1.4em;}
    .area_customerConts.ver02 .search_btn{width: 24px; height: 24px;}
    .search_bbs .search select{width: 80px; height: 40px; font-size:14px}
    
    

}
@media all and (max-width:360px){}
@media all and (max-width:320px){}
@media all and (max-width:240px){}