@charset "utf-8";

body{width: 100%; max-width: 2560px; margin: 0 auto;}

.landingHeader {color: #000; width:100%; margin: 0 auto; height: 130px; padding: 0; position: fixed; top: 0; background: none; z-index: 10; border-bottom: 1px solid #fff;}
/* .landingHeader .headerDim {position: absolute; width: 100%; height: 130px; opacity: 0.2; background: rgb(0, 0, 0); z-index: -1; display: none;} */
/* .landingHeader:hover .headerDim{display: block;} */
.landingHeader .logoArea{position: absolute; width:100px; height: 100px; padding: 15px 0; margin: 0; left: 10%; z-index: 0;}
.landingHeader .logoArea .logo{ height: 100%; margin: 0;}
.landingHeader .logoArea .logo img{height: 100%;}
.landingHeader .menuArea{position: absolute; width:70%; height: 100px; padding: 15px 0; margin: 0; right: 10%; z-index: 1;}
.landingHeader .menuArea .menu{width:100%; height: 100%; text-align: right;}
/* .landingHeader .menuArea .menu .btn{cursor: pointer; margin-right: 50px; font-size: 1.2em;} */
.landingHeader .menuArea .menu ul{list-style: none; height: calc(100% - 10px);}
.landingHeader .menuArea .menu ul li{float: right; margin: 0 10px; padding: 0 10px; font-size: 16px; height: 100%; line-height: 5em;}
.landingHeader .menuArea .menu ul li span{cursor: pointer; color: #fff;}
.landingHeader .menuArea .menu ul li:hover span{color: #57afff; font-weight: bold;}
.landingHeader .menuArea .menu ul li.on{border-bottom: 5px solid #57afff;}

.landingHeader .menuBtn{color:#fff; font-size:28px; position:absolute; right:10px; top:10px; display:none; z-index: 11; transition: all ease 0.3s;}
.landingHeader .menuBtn:hover {transform: rotate( 180deg );}
 

.bigSlide{position: relative; height: 100vh;}

.bigSlide .sliderTxtArea{position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%;}
.bigSlide .sliderTxtArea .sliderTxtBox{padding: 0; text-align: center;}
.bigSlide .sliderTxtArea .sliderTxtBoxDim{position: absolute; width: 100%; height: 100%; opacity: 20%; background: rgb(0, 0, 0); z-index: -1; border-radius: 30px;}
.bigSlide .sliderTxtArea .txt1{color: #fff; font-size: 44px; margin: 10px 0; padding: 20px 20px 0 20px; font-weight: 700;}
.bigSlide .sliderTxtArea .txt2{color: #fff; font-size: 66px; margin: 10px 0; padding: 0 20px; font-weight: 800;}
.bigSlide .sliderTxtArea .txt3{color: #fff; font-size: 18px; margin: 10px 0; padding: 0 20px 20px 20px;}


.contents{margin-top: 0 !important; min-height: 600px;}
.cont .wc{color: #fff;}
.section{width: 100%; position: relative;}
.lndImg{width: 100%; height: 100%; z-index: 0;}

.cont .bx-pager {bottom: 5% !important;}
.cont .bx-pager-item a{background: #ffffff !important;
	width: 20px !important;
	height: 5px !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
/* .cont .bx-pager-item .active{width: 30px !important; background: #57afff !important;} */
.cont .bx-pager-item .active{ background: #57afff !important;}

.contents .swiper-button-next{color: #fff !important;}
.contents .swiper-button-prev{color: #fff !important;}

.project{margin-top: 500px; padding: 10px; min-height: 800px;}
.work{margin-top: 500px; padding: 10px; min-height: 800px;}

.cardWrap{height: 370px;}
.cardWrap .card{border: 1px #ccc solid; border-radius: 10px; width: 300px; box-sizing: border-box; position: relative; overflow: hidden;}
/* .cardWrap .card:hover{opacity:.7;} */
.cardWrap .card .cardImg{width: 100%; height: 220px; object-fit: cover;}
.cardWrap .card .cardInfo{padding: 10px 20px;}
.cardWrap .card .cardInfo .tag{margin: 10px 0; color: #10BDE5; font-size: 14px; word-break: break-all; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cardWrap .card .cardInfo .title{margin: 10px 0 15px 0;/*height: 45px;*/color: #333; font-size: 18px; font-weight: bold; word-break: break-all; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.cardWrap .card .cardInfo .desc{margin: 10px 0; padding-top: 15px; border-top: 1px #EEECEC solid; font-size: 14px; color: #555; height: 32px; overflow: hidden;}

.txtWrap{text-align: center; position: absolute; z-index: 1; left: 50%; bottom: 1%; transform: translate(-50%, -50%); width: 95%;}
.txtWrap .txt1{font-size: 34px; font-weight: 700; margin-top: 30px;}
.txtWrap .txt2{font-size: 23px; font-weight: 400; margin-top: 10px;}

.titleWrap{position: relative; text-align: center;}
.titleWrap .tit{font-size: 60px; font-weight: 700;}

/* .more{font-size: 14px; color: #ff6f28; position: absolute; right: 5px;; top: 20px; padding: 10px 20px; background: #fff; border: 1px solid #ff6f28; border-radius: 5px; font-weight: 400px;} */
/* .more:hover{color: #fff; background: #ff6f28; border: 1px solid #ff6f28; transition: 0.5s;} */

.more{font-size: 14px; color: #ff6f28; position: absolute; right: 5px;; top: 20px; padding: 10px 20px; background: #fff; font-weight: 400px;}
.more:hover{text-decoration: underline; transition: 0.5s;}


.about{margin-top: 200px; padding: 10px; min-height: 800px;}
.about .aboutLogo{width: 200px;}
.about .box1{width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row;}
.about .box1 div{flex: 1; background: #f9f9f9; border-radius: 25px; padding: 50px; box-sizing: border-box; margin: 0 15px;}
.about .box1 .lbox{font-size: 34px; background-image: url("../images/main/hand-wr.png"); background-position: right 20px bottom 20px; background-repeat: no-repeat; background-size: 150px; color: #b42e2e;}
.about .box1 .lbox .p1{font-size: 21px; font-weight: 400;}
.about .box1 .lbox .p2{font-size: 50px; font-weight: 700; margin-top: 30px;}
.about .box1 .rbox{font-size: 18px; white-space: pre-line; color: #868686; line-height: 30px; word-break: keep-all;}

.about .box2{width: 100%; max-width: 1000px; margin: 0 auto; color: #868686; line-height: 30px; text-align: center;}
.about .box2 .b1{background: #f9f9f9; border-radius: 25px; padding: 50px; box-sizing: border-box; font-size: 20px; margin: 15px 15px 0 15px;}
.about .box2 .b1 .p3{color: #b42e2e; font-weight: 700; word-break: keep-all;}
.about .box2 .b1 .p4{color: #000; font-weight: 400; word-break: keep-all;}
.about .box2 .img1{margin-top: 50px; width: 90%;}


.contact{margin-top: 500px; padding: 10px; min-height: 800px;}
.contact .box1{width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row;}
.contact .box1 div{flex: 1; border-radius: 25px; box-sizing: border-box; margin: 0 15px;}
/* .contact .box1.bn div{background: none !important;} */
.contact .box1 .lbox{font-size: 22px; color: #1d63e4; padding: 50px; background: #f9f9f9;}
.contact .box1 .lbox .p1{font-size: 30px; font-weight: 700; margin-bottom: 30px;}
.contact .box1 .lbox .p2{font-size: 18px; font-weight: 400; margin-top: 10px;}
.contact .box1 .rbox{padding: 30px 20px; background: #f9f9f9;}
.contact .box1 .rbox .mapImg{width: 100%; height: 270px; object-fit: cover;}



.Partner{margin-top: 200px; padding: 10px; min-height: 800px;}
.Partner .pList{width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-flow: wrap; justify-content: center;}
.Partner .pList .item{flex-basis: 180px; height: 90px; padding: 20px; border-radius: 5px; box-sizing: border-box; border: 1px solid #cecece; margin:40px 10px; text-align: center; cursor: pointer; position: relative;}
.Partner .pList .item img{width: 100%; height: 100%; object-fit: contain;}
.Partner .pList .item p{margin-top: 25px; font-size: 15px;}



.footer {color: rgb(223, 223, 223); width:100%; margin:200px 0 0 0; padding: 0; height: 90px; position: relative; background: rgb(70, 70, 70); padding: 10px 0; clear: both; font-size: 13px;}/*border-bottom: 2px solid #000;*/
.footer .sub {position: relative; width: 90%; padding: 0; margin: 0 auto; text-align: center; font-weight: 700;}
.footer .sub .fmenu {float: left; width: 50%; text-align: left;}
.footer .sub .fmenu .t1{margin-right: 30px; cursor: pointer;}
.footer .sub .fmenu .t1:hover{color: rgb(181110, 218, 218);}
.footer .sub .fmenu .finfo{font-weight: 400; margin-top: 10px;}
.footer .sub .flogo {float: right; width: 40%; font-weight: bold; text-align: right;}
.footer .sub .flogo .p1{color: rgb(180, 180, 180);}
.footer .sub .flogo .p2{color: rgb(180, 180, 180);}
.footer .sub .flogo .p3{color: rgb(180, 180, 180);}
.footer .sub .flogo .p1 a{color: rgb(180, 180, 180);}



.boardTitle{margin-top: 120px; margin-bottom: 50px; text-align: center;}
.boardWrap{width: 90%; max-width: 800px; margin: 0 auto;}
.boardWrap dl{display: flex; flex-direction: row; border-top:1px solid #ddd; margin-top: 10px; margin-bottom: 20px; padding-top: 10px;}
.boardWrap dl:hover{background: #fff;}
.boardWrap dl dt{width: 50%; margin: 0; padding: 0; cursor: pointer;}
.boardWrap dl dt img{width: 100%;}
.boardWrap dl dd{width: 50%; margin: 0; padding: 0;}
.boardWrap dl dd ul{list-style: none; margin: 0; padding: 10px 20px 10px 30px;}
.boardWrap dl dd ul li{font-size: 14px; cursor: pointer;}
.boardWrap dl dd ul li.date{color: #df7000;}
.boardWrap dl dd ul li.title{font-size: 18px; font-weight: bold; color: #333; margin-top: 8px;}
.boardWrap dl dd ul li.subTitle{font-size: 15px; color: #555; margin-top: 6px;}
.boardWrap dl dd ul li.tag{color: #10BDE5; margin-top: 15px;}

/* paging */
.page_wrap { width:100%; font-size:0; text-align:center; margin:30px 0 50px; }
.page_wrap .page_num { position:relative; }
.page_wrap .page_num a { display:inline-block; font-size:14px; line-height:30px; height:28px; min-width:28px; text-align:center; margin:0 1px; border:1px solid #e1e1e1; color:#474747; vertical-align:top; }
.page_wrap .page_num a.active { border-color:#57afff; color:#57afff; }
.page_wrap .page_num a.first { width:30px; height:30px; margin:0; border:0; background:url('/web/images/paging/icon_paging_first.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.prev { width:30px; height:30px; margin:0 20px 0 3px; border:0; background:url('/web/images/paging/icon_paging_prev.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.next { width:30px; height:30px; margin:0 3px 0 17px; border:0;background:url('/web/images/paging/icon_paging_next.gif') no-repeat 0 0; text-indent:-999999px; }
.page_wrap .page_num a.last { width:30px; height:30px; margin:0; border:0;background:url('/web/images/paging/icon_paging_last.gif') no-repeat 0 0; text-indent:-999999px; }


.boardDtlPop{position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100;}
.boardDtlPop .dim{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: 75%; z-index: 0;}
.boardDtlPop .boardDtlWrap{position: absolute; width: 100%; max-width: 800px; height: 90%; top: 5%; left: 50%; transform: translate(-50%, -4%);}
.boardDtlPop .boardDtlWrap .popClose{position: absolute; top: 0; right: -40px; z-index: 2; cursor: pointer; font-size: 30px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: #fff; padding: 0;}
.boardDtlPop .boardDtlWrap .boardDtl{padding: 30px 20px; text-align: center; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 1; background: #fff;}
.boardDtlPop .boardDtlWrap .boardDtl .title{font-size: 24px; font-weight: bold; color: #333; margin-top: 8px;}
.boardDtlPop .boardDtlWrap .boardDtl .subTitle{font-size: 18px; color: #555; margin-top: 6px;}
.boardDtlPop .boardDtlWrap .boardDtl .date{border-top: 1px solid #ddd; font-size: 14px; color: #df7000; margin-top: 10px; text-align: right; padding-top: 20px}
.boardDtlPop .boardDtlWrap .boardDtl .tag{font-size: 15px; color: #10BDE5; margin-top: 8px; text-align: right;}
.boardDtlPop .boardDtlWrap .boardDtl .cont{margin-top: 30px;}
.boardDtlPop .boardDtlWrap .boardDtl .attc img{max-width: 100%;}


@media ( max-width: 1920px ) {
/* 	.txtWrap{bottom: 10%;} */
}

@media ( max-width: 1200px ) {

	.bigSlide .sliderTxtArea .txt1{font-size: 30px;}
	.bigSlide .sliderTxtArea .txt2{font-size: 46px;}
	.bigSlide .sliderTxtArea .txt3{font-size: 13px;}
	
	.landingHeader .menuArea .menu ul li{margin: 0 5px; padding: 0 5px;}
	
}

@media ( max-width: 1000px ) {
	.boardDtlPop .boardDtlWrap .popClose{right: 0; border-radius: 10px;}
}

@media ( max-width: 800px ) {

	.landingHeader {height: 50px;}
	.landingHeader .headerDim{height: 50px;}
	.landingHeader .logoArea{width:auto; height: 40px; padding: 5px 0; left: 10px;}
	.landingHeader .menuArea{width:100%; height: 50px; padding: 0; right: 0;}
	.landingHeader .menuArea .menu ul{height: 35px;}
	.landingHeader .menuArea .menu ul li{margin: 0; padding: 0 5px; line-height: 2em;}
	
	.landingHeader .menuArea{position: fixed; width:100%; height: 100%; padding: 0; margin: 0; right: 0; z-index: 10; background:#fff; display:none;}
	.landingHeader .menuArea .menu{width:100%; height: 100%; text-align: right;}
	.landingHeader .menuArea .menu ul{list-style: none; height: auto; width: auto; position:absolute; right:0; margin-top:60px; transform: rotate(180deg);}
	.landingHeader .menuArea .menu ul li{float: none; margin: 0 0 10px 0; padding: 0; font-size: 1.3em; width:100%; height: auto; line-height: 2em; transform: rotate(-180deg);}
	.landingHeader .menuArea .menu ul li span{cursor: pointer; color: #000;}
	.landingHeader .menuArea .menu ul li:hover span{color: #57afff; font-weight: bold;}
	.landingHeader .menuArea .menu ul li.on{border-bottom: 5px solid #57afff;}

	.landingHeader .menuBtn{display:block;}
	.landingHeader .menuBtn.on{color:#000;}
	
	.bigSlide .sliderTxtArea{width: 80%;}
	.bigSlide .sliderTxtArea .txt1{font-size: 20px;}
	.bigSlide .sliderTxtArea .txt2{font-size: 30px;}
	.bigSlide .sliderTxtArea .txt3{font-size: 12px;}
	
	.more{font-size: 12px;right: 5px;; top: 20px; padding: 5px 10px; border: 0; background: none; text-decoration: underline;}
	.more:hover{color: #ff6f28; border: 0; background: none;}
	
	.txtWrap{bottom: 0%;}
	.txtWrap .txt1{font-size: 20px;}
	.txtWrap .txt2{font-size: 16px;}
	.titleWrap .tit{font-size: 40px;}
	
	.about .box1{display: inline-block;}
	.about .box1 div{padding: 30px;}
	.about .box1 .lbox{background-size: 90px; background-position: right 20px center;}
	.about .box1 .lbox .p1{font-size: 14px;}
	.about .box1 .lbox .p2{font-size: 34px;}
	.about .box1 .rbox{margin-top: -40px; font-size: 14px;}
	.about .box2 .b1 .p3{font-size: 16px;}
	.about .box2 .b1 .p4{font-size: 14px;}
	
	.contact .box1{display: inline-block;}
	.contact .box1 div{padding: 30px;}
	.contact .box1 .lbox{padding: 40px 15px 50px 15px; text-align: center;}
	.contact .box1 .lbox .p1{font-size: 24px;}
	.contact .box1 .lbox .p2{font-size: 14px;}
	.contact .box1 .rbox{margin-top: -40px; padding: 30px 0;}
	
}


@media ( max-width: 600px ) {
	.project{margin-top: 200px; min-height: 500px;}
	.work{margin-top: 200px; min-height: 500px;}
	.contact{margin-top: 200px; min-height: 500px;}
	.Partner{margin-top: 200px; min-height: 500px;}
}

@media ( max-width: 480px ) {
	
	
	.Partner .pList .item{flex-basis: 120px; height: 60px; padding: 15px; margin:25px 10px 35px 10px; }
	.Partner .pList .item p{margin-top: 25px; font-size: 12px;}
	.test{background: #fff;}
	
	.boardWrap dl{display: flex; flex-direction: column; margin-top: 60px;}
	.boardWrap dl dt{width: 100%;}
	.boardWrap dl dd{width: 100%;}
	.boardWrap dl dd ul li{text-align: center;}
	
	.boardDtlPop .boardDtlWrap .boardDtl .title{font-size: 18px;}
	.boardDtlPop .boardDtlWrap .boardDtl .subTitle{font-size: 14px;}
	
	.footer {font-size: 10px;}
	
}


@media ( max-width: 360px ) {
	.bigSlide .sliderTxtArea .txt1{font-size: 18px;}
	.bigSlide .sliderTxtArea .txt2{font-size: 24px;}
	.bigSlide .sliderTxtArea .txt3{font-size: 10px;}
}