@charset "utf-8";
@import url('main.css');

/* ==============================
 * common - 컨텐츠 공통
 * ============================== */
 
body.hidden {overflow: hidden;}
body.scrollLock {overflow: hidden;}

/* 글자색 */
.txtRed1 { color:#de190a;}
.txtBlue1 { color:#003388;}
.txtGray1 { color:#999999;}

/* 글자 숨기기 */
.hidden { overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0;}
 
/* dotList */
.dotList {}
.dotList li { position:relative; padding-left:20px;}
.dotList li:before { content:''; display:block; position:absolute; top:9px; left:0; width:3px; height:3px; border-radius:50%; background:#999999;}
.dashList {}
.dashList li { position:relative; padding-left:15px;}
.dashList li:before { content:''; display:block; position:absolute; top:11px; left:0; width:4px; height:2px; background:#788391;}

@media screen and (max-width:767px) {
	.dotList li { padding-left:10px;}
}

/* 게시판 */
[class*=table] .width1 { width:200px;}
[class*=table] .width2 { width:10%;}
[class*=table] .width3 { width:15%;}
[class*=table] .width4 { width:23%;}

.tableView {}
.tableView table{ border-top:2px solid #0b3c8c; border-bottom:1px solid #010201;}
.tableView th { padding:25px 0 25px 40px; border-right:1px solid #e9e9e9; font-size:16px; color:#111; text-align:left; font-weight:300; background:#fbfcfb;}
.tableView td { padding:25px 0 25px 60px; font-size:16px; color:#444; font-weight:300; background:#fff;}
.tableView td.line { border-left:1px solid #e9e9e9;}
.tableView tr + tr th,
.tableView tr + tr td { border-top:1px solid #e9e9e9;}
.tableView.type2 table { border-top-width:4px;}
.tableView.type2 table th { padding:24px 14px;}
.tableView.type2 table td { padding:10px 14px;}
.tableView .tr { margin-bottom:10px; font-size:14px; color:#444444;}
.tableView img { max-width:100%;}

.tableList {}
.tableList th { height:55px; border-bottom:1px solid #f0f0f0; border-top:1px solid #787878; font-size:16px; color:#111; font-weight:300; background:#f5f7f6;}
.tableList td { padding:20px 10px; border-bottom:1px solid #e3e3e3; font-size:16px; text-align:center; font-weight:300; color:rgba(17,17,17,0.7);}
.tableList td.tl { padding-left:40px}
.tableList td.number { color:#000;}
.tableList td.data { color:rgba(17,17,17,0.7); font-weight:200;}
.tableList td a { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap;}

.tableList2 {}
.tableList2 th { padding:15px; border-bottom:1px solid #f0f0f0; border-top:1px solid #787878; font-size:16px; color:#111; font-weight:300; background:#f5f7f6;}
.tableList2 td { padding:15px; border-bottom:1px solid #e3e3e3; font-size:16px; text-align:center; font-weight:300; color:#111;}

.boardView {}
.boardView .boardHeader { display:table; width:100%; border-top:1px solid #787878; border-bottom:1px solid #f0f0f0; background:#fbfbfb;}
.boardView .boardHeader p { display:table-cell; height:80px; vertical-align:middle; text-align:center;}
.boardView .boardHeader .title { padding:0 35px; font-size:16px; color:#000; text-align:left;}
.boardView .boardHeader .data { width:160px; font-size:16px; color:#000; font-weight:100; text-align:center}
.boardView .boardCont { padding:50px 30px; border-bottom:1px solid #f0f0f0; font-size:16px; color:#444444;}
.boardView .boardBtn { position:relative; height:48px; margin-top:20px;}
.boardView .boardBtn .btnLeft { position:absolute; top:10px; left:0; font-size:14px; color:#111;}
.boardView .boardBtn .btnLeft:before { content:''; display:inline-block; width:10px; height:2px; margin-right:50px; vertical-align:middle; background:#000;}
.boardView .boardBtn .btnLeft:after { content:''; display:block; position:absolute; bottom:-1px; left:0; width:0; height:1px; background:#000; transition: all .3s ease;}
.boardView .boardBtn .btnRight { position:absolute; top:10px; right:0; font-size:14px; color:#111;}
.boardView .boardBtn .btnRight:after { content:''; display:inline-block; width:10px; height:2px; margin-left:50px; vertical-align:middle; background:#000;}
.boardView .boardBtn .btnRight:before { content:''; display:block; position:absolute; bottom:-1px; right:0; width:0; height:1px; background:#000; transition: all .3s ease;}
.boardView .boardBtn .btnLeft:hover:after,
.boardView .boardBtn .btnRight:hover:before { width:100%;}
.boardView .boardBtn .btnList { position:absolute; top:0; left:50%; width:180px; height:48px; margin-left:-90px; padding-left:30px; border:1px solid #cccccc; letter-spacing:7px; line-height:46px; font-size:12px; color:#111; text-transform:uppercase; transition:all .3s ease;}
.boardView .boardBtn .btnList:after { content:''; display:block; position:absolute; top:50%; right:28px; width:10px; height:2px; margin-top:-1px; background:#000; transition:all .3s ease;}
.boardView .boardBtn .btnList:hover { color:#fff; background:#111;}
.boardView .boardBtn .btnList:hover:after { background:#fff;}

/* 페이징 */
.paging { margin-top:40px; font-size:0; text-align:center;}
.paging strong,
.paging a { display:inline-block; width:40px; height:40px; margin:0 2px; border:1px solid #d9d9d9; vertical-align:middle; font-size:14px; line-height:38px;}
.paging a:hover { border-color:#3d644a; transition: all .3s ease;}
.paging strong { color:#fff; background:#111; }
.paging a[class*=btn] { border:0; font-size:0;}
.paging a.btnFirst { background:url('../images/common/btn_paging_prev1.jpg') no-repeat;}
.paging a.btnPrev { background:url('../images/common/btn_paging_prev2.jpg') no-repeat;}
.paging a.btnNext { background:url('../images/common/btn_paging_next1.jpg') no-repeat;}
.paging a.btnLast { background:url('../images/common/btn_paging_next2.jpg') no-repeat;}

/* 클릭 모션 */
.clickMotion { overflow:hidden; position:relative;}
.click-in { display:block; position:absolute; background:rgba(255,255,255,0.4); border-radius:100%; transform:scale(0); -webkit-transform:scale(0);}
.click-in.animate {-webkit-animation:btnClick 0.65s linear;animation:btnClick 0.65s linear;}

.clickMotion1.on { overflow:hidden; position:relative; animation:clickMotionM .65s;}
.clickMotion2.on { overflow:hidden; position:relative; animation:clickMotionM2 .65s;}

@keyframes clickMotionM{
	0% {transform:scale(1)}
	20% {transform:scale(0.9)}
	40% {transform:scale(1.1)}
	60% {transform:scale(0.95)}
	80% {transform:scale(1)}
	100% {transform:scale(1)}
}
@keyframes clickMotionM2{
	25% {transform:skewX(10deg) skewY(5deg)}
	75% {transform:skewX(-10deg) skewY(-5deg)}
}
@keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}
@-webkit-keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}


/* layerPopup */
.layerPopWrap { visibility:hidden; overflow-y:auto; display:flex; justify-content: center; align-items:center; position:fixed; top:0; left:0; z-index:150; width:100%; height:100%; padding:20px 0; z-index:100; opacity:0; transition:all .2s ease; background:rgba(0,0,0,0.7);}
.layerPopWrap .layerPopCont {display:flex; display:-ms-flex; flex-direction:column; position: relative; width:960px; margin:auto 0; background:#fff}
.layerPopWrap .layerPopCont h1 { display:flex; height:100px; margin:0 60px; font-size:24px; color:#111111; align-items: center;}
.layerPopWrap .layerPopCont h1.border { border-bottom:1px solid #ccc;}
.layerPopWrap .popCont { padding:0px 60px 0px;}
.layerPopWrap .popCont h2 { margin-top:35px; margin-bottom:80px; font-size:20px; color:#2fac66; font-weight:bold;}
.layerPopWrap .popCont h2 span { margin-left:15px; font-weight: normal; font-size:14px; color:#999999;}

.layerPopWrap .btnClose { display:block; position:absolute; top:30px; right:45px; width:50px; height:50px; font-size:0; background:url('../images/common/btn_pop_close.png') no-repeat center center;}

.layerPopWrap.on { visibility:visible; opacity:1;}
.layerPopWrap.on .layerPopCont{ animation:fadeInDown .4s ease-in-out forwards;}

.layerPopWrap.type2 {}
.layerPopWrap.type2 .layerPopCont { width:720px; padding:80px 60px; border-radius:20px;}
.layerPopWrap.type2 .layerPopCont h1 { height:auto; margin:0 0 50px; font-size:30px;}
.layerPopWrap.type2 .popCont { padding:0;}
.layerPopWrap.type2 .btnClose { top:70px;}

@media screen and (max-width:767px) {
	.layerPopWrap .layerPopCont {width: calc(100% - 20px); margin:auto 10px;}
	.layerPopWrap .layerPopCont h1 { height:60px; margin:0 20px; font-size:20px;}
	.layerPopWrap .popCont { padding:0 20px;}
	.layerPopWrap .popCont h2 { margin-top:20px; margin-bottom:40px; font-size:18px;}
	.layerPopWrap .popCont h2 span { display:block; margin-top:10px; margin-left:0px; font-size:12px;}

	.layerPopWrap .btnClose { top:5px; right:5px;}

	.layerPopWrap.type2 .layerPopCont { padding:20px 20px; border-radius:10px;}
	.layerPopWrap.type2 .layerPopCont h1 { margin:0 0 25px; font-size:20px;}
	.layerPopWrap.type2 .btnClose { top:9px;}
}

/* ==============================
* content
* ============================== */
#container { overflow:hidden; margin-top:80px; margin-bottom:150px;}
#container.mb0 { margin-bottom:0;}
.innerBox { position:relative; max-width:1360px; margin:0 auto; padding:0 20px;}

#container .subTit { margin-top:90px; font-size:30px; color:#111111; font-weight:bold; animation: fadeInUp .6s ease both;}
#container .subTit .smallText { font-size:16px; color:#cccccc; vertical-align: middle;}
#container .subText { margin-top:20px; margin-bottom:90px; font-size:18px; color:#999999; animation: fadeInUp .6s ease .3s both;}
#container .subText.mb0 { margin-bottom:0;}
#container .subText.type2 { margin-top:10px; color:#111;}
#container .subText.type2 a { color:#2fac66; text-decoration:underline;}

#container .warning { display:flex; font-size:14px; color:#ff4850;}
#container .warning:before { content:''; display:inline-block; width:24px; height:24px; margin-right:10px; vertical-align: middle; background:url('../images/common/ico_warning.png') no-repeat; background-size:100%;}

/* about us */
.aboutusWrap img { max-width:100%;}
.aboutusWrap .bg { display:block; height:400px; background-position:center center; background-repeat: no-repeat; background-size:cover;}

.aboutusWrap .introduceBox {}
.aboutusWrap .introduceBox .sec01 { display:flex; margin-top:100px;}
.aboutusWrap .introduceBox .sec01 h2 { margin-right:20px; font-size:30px; color:#111; line-height:1.4; letter-spacing: -1px; }
.aboutusWrap .introduceBox .sec01 .img { margin-left:auto;}

.aboutusWrap .introduceBox .sec02 { display:flex;}
.aboutusWrap .introduceBox .sec02 h3 { flex:0 0 auto; width:300px; padding-top:80px; border-right:1px solid #111; font-size:20px; color:#111111; letter-spacing: -1px; }
.aboutusWrap .introduceBox .sec02 p { padding-top:80px; padding-left:80px; font-size:16px; color:#111; line-height:1.625}

.aboutusWrap .introduceBox .bgFooter { height:480px; margin-top:180px; background:url('../images/aboutus/bg_introduce2.png') no-repeat center center; background-size:cover;}
.aboutusWrap .introduceBox .bgFooter .box { display:inline-block; padding:80px; margin-top:-80px; background:#2fac66;}
.aboutusWrap .introduceBox .bgFooter ul {}
.aboutusWrap .introduceBox .bgFooter li { margin-bottom:10px; font-size:16px; color:#ffffff;}
.aboutusWrap .introduceBox .bgFooter li strong { font-weight:bold;}

.aboutusWrap .historyBox { padding:100px 0 150px; background:#f8f8f8}
.aboutusWrap .historyBox .innerBox > div { display:flex;}
.aboutusWrap .historyBox .innerBox > div + div { margin-top:80px; padding-top:80px; border-top:1px solid #cccccc;}
.aboutusWrap .historyBox .innerBox > div.right { flex-flow: row-reverse;}
.aboutusWrap .historyBox .innerBox > div.right .view { margin-left:0; margin-right:auto;}
.aboutusWrap .historyBox .innerBox > div.right .view > div { margin-left:0; margin-right:40px;}
.aboutusWrap .historyBox h2 { font-size:60px; color:#111; font-weight:bold; line-height:1;}
.aboutusWrap .historyBox h2 span { font-size:30px; color:#ccc;}
.aboutusWrap .historyBox .view { display:flex; margin-left:auto;}
.aboutusWrap .historyBox .view > div { display:flex; flex-flow: column; height:380px; margin-left:40px;}
.aboutusWrap .historyBox .view .year { margin-bottom:18px; font-size:20px; color:#111111; line-height:1; font-weight:bold;}
.aboutusWrap .historyBox .view .textBox { display:flex;}
.aboutusWrap .historyBox .view .textBox > div { flex:1 1 auto;}
.aboutusWrap .historyBox .view .textBox > div:nth-child(2) { padding-left:48px;}


.aboutusWrap .historyBox .view .text { display:flex; margin-bottom:5px; font-size:14px; color:#999; font-weight:bold;}
.aboutusWrap .historyBox .view .text span { flex: 0 0 auto; margin-right:5px; font-size:14px; color:#999; font-weight:bold;}
.aboutusWrap .historyBox .view .img { margin-top:auto;}

.aboutusWrap .certificationBox { padding:80px 0 100px; background:#f8f8f8}
.aboutusWrap .certificationBox h2 { font-size:30px; color:#111;}
.aboutusWrap .certificationBox ul { display:flex; margin-top:90px; justify-content: space-between;}
.aboutusWrap .certificationBox ul li + li { margin-left:20px;}
.aboutusWrap .certificationBox ul .text { margin-top:35px; font-size:14px; color:#111; text-align:center;}

.aboutusWrap .partnersBox { padding-top:90px;}
.aboutusWrap .partnersBox h2 { font-size:30px; color:#111;}
.aboutusWrap .partnersBox ul { display:flex; flex-wrap: wrap; margin-top:90px; margin-left:-20px;}
.aboutusWrap .partnersBox ul li { flex:0 1 auto; width:calc(25% - 20px); margin-left:20px; margin-bottom:20px;}

.aboutusWrap .locationBox { display:flex;}
.aboutusWrap .locationBox > div { flex:1 1 auto; width:50%; height:700px;}
.aboutusWrap .locationBox .textBox { display:flex; background:url('../images/aboutus/bg_location.png') no-repeat right center; background-size:cover; align-items: center;}
.aboutusWrap .locationBox .textBox > div { width:420px; height:370px; padding:60px; margin-left:auto; margin-right:240px; background:#2fac66;}
.aboutusWrap .locationBox .textBox dl {}
.aboutusWrap .locationBox .textBox dt { font-size:14px; color:#fff; font-weight:bold;}
.aboutusWrap .locationBox .textBox dt ~ dt { margin-top:20px;}
.aboutusWrap .locationBox .textBox dd { margin-top:5px; font-size:14px; color:#fff;}
.aboutusWrap .locationBox .map {}
.aboutusWrap .locationBox .map iframe { width:100%; height:100%;}

/* capabilities */
.capabilitiesWrap {}
.capabilitiesWrap .tabWrap { position:absolute; top:27px; right:20px; display:flex;}
.capabilitiesWrap .tabWrap a { display:flex; position:relative; width:220px; height:60px; padding-left:30px; border:1px solid #ccc; border-bottom-color:#2fac66; align-items: center; font-size:14px; color:#111111;}
.capabilitiesWrap .tabWrap a + a { margin-left:-1px;}
.capabilitiesWrap .tabWrap a:after { content:''; display:block; position:absolute; top:50%; right:30px; width:20px; height:14px; transform: translateY(-50%); background:url('../images/capabilities/ico_tab.png') no-repeat; background-size:100%;}
.capabilitiesWrap .tabWrap a.on { z-index:1; border-color:#2fac66; font-weight:bold; border-bottom-color:transparent; color:#2fac66;}
.capabilitiesWrap .tabWrap a.on:after { background-image:url('../images/capabilities/ico_tab_on.png')}
.capabilitiesWrap .bg { display:block; height:400px; background-position:center center; background-repeat: no-repeat; background-size:cover;}
.capabilitiesWrap h2 { margin:80px 0 50px; font-size:30px; color:#111;}
.capabilitiesWrap .processList { display:flex; flex-wrap: wrap; margin-right:-80px;}
.capabilitiesWrap .processList.mt { margin-top:100px;}
.capabilitiesWrap .processList li { flex:0 1 auto; margin-right:80px; margin-bottom:40px;}
.capabilitiesWrap .processList li > div { position:relative; display:flex; flex-flow: column; width:200px; height:200px; border:1px solid #101010; border-radius:50%; align-items: center; justify-content: center; text-align:center;}
.capabilitiesWrap .processList li > div:after { content:''; display:block; position:absolute; top:50%; right:-42px; width:42px; height:16px; background:url('../images/capabilities/ico_arrow.png') no-repeat; background-size:100%; transform: translateY(-50%);}
.capabilitiesWrap .processList li:last-child > div:after { display:none;}
.capabilitiesWrap .processList li .number { font-size:20px; color:#101010;}
.capabilitiesWrap .processList li .text { font-size:15px; color:#101010;}

.capabilitiesWrap .blueBox { overflow:hidden; background:#2fac66;}
.capabilitiesWrap .blueBox h2 { color:#ffffff;}
.capabilitiesWrap .blueBox .processList { margin-bottom:100px;}
.capabilitiesWrap .blueBox .processList li > div { border-color:#63c18c}
.capabilitiesWrap .blueBox .processList li > div:after { background-image:url('../images/capabilities/ico_arrow_w.png');}
.capabilitiesWrap .blueBox .processList li .number,
.capabilitiesWrap .blueBox .processList li .text { color:#fff;}

.capabilitiesWrap .processListAction li { opacity:0;}
.capabilitiesWrap .processListAction:not(.wait-animation) li { animation: fadeInRight .8s ease both;}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(1) { animation-delay:0s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(2) { animation-delay:0.15s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(3) { animation-delay:0.3s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(4) { animation-delay:0.45s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(5) { animation-delay:0.6s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(6) { animation-delay:0.75s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(7) { animation-delay:0.9s}
.capabilitiesWrap .processListAction:not(.wait-animation) li:nth-child(8) { animation-delay:1.05s}

.capabilitiesWrap .equipmentList { display:flex; flex-wrap: wrap; margin-left:-2px; margin-top:100px;}
.capabilitiesWrap .equipmentList li { flex:0 1 auto; width:25%; padding-left:2px;}
.capabilitiesWrap .equipmentList li img { max-width:100%;}
.capabilitiesWrap .equipmentList .textBox { padding:35px 30px 80px;}
.capabilitiesWrap .equipmentList .textBox .tit { margin-bottom:16px; font-size:16px; color:#111; font-weight:bold;}
.capabilitiesWrap .equipmentList .textBox .text { font-size:16px; color:#111}
.capabilitiesWrap .equipmentList .textBox .text2 { margin-top:10px; font-size:14px; color:#999;}

.capabilitiesWrap .equipmentList.type2 { margin-left:-20px;}
.capabilitiesWrap .equipmentList.type2 li { width:50%; padding-left:20px;}
.capabilitiesWrap .equipmentList.type2 li .img { position:relative;}
.capabilitiesWrap .equipmentList.type2 li .img span { display:flex; position:absolute; bottom:0; right:0; width:96px; height:80px; align-items: center; justify-content: center; font-size:16px; color:#fff; font-weight:bold; background:#2fac66;}
.capabilitiesWrap .equipmentList.type2 li .text { font-size:22px;}
.capabilitiesWrap .equipmentList.type2 li .text2 { font-size:15px;}

.capabilitiesWrap .equipmentList.type3 li { width:20%;}

.capabilitiesWrap .equipmentList.type4 { margin-left:-40px;}
.capabilitiesWrap .equipmentList.type4 li { width:25%; padding-left:40px;}

.capabilitiesWrap .grayBox { overflow:hidden; padding-bottom:150px; background:#f8f8f8;}
.capabilitiesWrap .grayBox.type2 { padding:0;}
.capabilitiesWrap .grayBox.type2 .innerBox { display:flex;}
.capabilitiesWrap .grayBox.type2 .innerBox > div { flex:1 1 auto; position:relative; width:50%;}
.capabilitiesWrap .grayBox.type2 .innerBox > div + div { margin-left:20px;}
.capabilitiesWrap .grayBox.type2 .innerBox > div + div:after { content:''; display:block; position:absolute; top:0; left:0; width:20px; height:100%; background:#fff;}
.capabilitiesWrap .grayBox.type2 .innerBox img { width:100%;}

.capabilitiesWrap .grayBox h2 { color:#3379fb}

.capabilitiesWrap .valueProcess { display:flex; flex-wrap: wrap; margin-left:-118px;}
.capabilitiesWrap .valueProcess li { flex:1 1 auto; display:flex; flex-flow: column; width:calc(50% - 118px); margin-left:118px; padding-top:40px; margin-top:155px; border-top:1px solid #97d5b2;}
.capabilitiesWrap .valueProcess li img { width:100%;}
.capabilitiesWrap .valueProcess li .tit { margin-bottom:16px; font-size:20px; color:#111; font-weight:bold;}
.capabilitiesWrap .valueProcess li .text { margin-bottom:20px; font-size:15px; color:#999;}
.capabilitiesWrap .valueProcess li .img { margin-top:auto;}


/* q-program */
.introduceWrap { overflow:hidden; background:#fff;}
#container .introduceWrap .subTit { margin-top:100px; color:#101010; font-size:40px;}
#container .introduceWrap .subText { margin-top:35px; margin-bottom:0; font-size:24px; color:#999999;}

.introduceWrap .list { display:flex; flex-wrap: wrap; margin-left:-60px; margin-top:-160px; margin-bottom:90px;}
.introduceWrap .list > a { overflow:hidden; flex:0 1 auto; position:relative; width:calc(50% - 60px); height:630px; padding:70px 80px; margin-left:60px; margin-bottom:60px;}
.introduceWrap .list > a:first-child { margin-left:calc(50% + 60px);}
.introduceWrap .list > a:nth-child(2) { margin-top:-320px;}
.introduceWrap .list > a:nth-child(4) { margin-top:-320px;}
.introduceWrap .list > a:before {content:''; display:block; position:absolute; top:0; left:0; z-index:1; width:0%; height:0%; border:4px solid #2bb572; border-width:4px 0 0 4px; box-sizing:border-box; opacity:0; transition:all .3s ease;}
.introduceWrap .list > a:after { content:''; display:block; position:absolute; bottom:0; right:0; z-index:1; width:0%; height:0%; border:4px solid #2bb572; border-width:0 4px 4px 0; box-sizing:border-box; opacity:0; transition:all .3s ease;}
.introduceWrap .list > a .bg { position:absolute; top:0; left:0; width:100%; height:100%; transition:all .3s ease;}
.introduceWrap .list .bg1 .bg { background:url('../images/qprogram/img_introduce_1.png') no-repeat center center; background-size:cover;}
.introduceWrap .list .bg2 .bg { background:url('../images/qprogram/img_introduce_2.png') no-repeat center center; background-size:cover;}
.introduceWrap .list .bg3 .bg { background:url('../images/qprogram/img_introduce_3.png') no-repeat center center; background-size:cover;}
.introduceWrap .list .bg4 .bg { background:url('../images/qprogram/img_introduce_4.png') no-repeat center center; background-size:cover;}
.introduceWrap .list h2 { position:relative; margin-top:0; margin-bottom:0; font-size:36px; color:#ffffff; font-weight:bold;}
.introduceWrap .list .text { position:relative; margin-top:30px; font-size:20px; color:#999999;}
.introduceWrap .list i { position:absolute; right:80px; bottom:80px; width:115px; height:115px; transition:all .3s ease;}
.introduceWrap .list i:before { content:''; display:block; position:absolute; top:0; left:50%; width:1px; height:100%; margin-left:-0.5px; background:#999}
.introduceWrap .list i:after { content:''; display:block; position:absolute; left:0; top:50%; width:100%; height:1px; margin-top:-0.5px; background:#999}

.introduceWrap .list a:hover:before,
.introduceWrap .list a:hover:after { width:100%; height:100%; opacity:1;}
.introduceWrap .list a:hover .bg { transform: scale(1.2);}
.introduceWrap .list a:hover i { transform: rotate(180deg);}
.introduceWrap .list a:hover i:before,
.introduceWrap .list a:hover i:after { background:#2bb572;}

.qprogramWrap h2 { margin-top:-40px; margin-bottom:80px; font-size:64px; color:#111111;}
.qprogramWrap .prosList { display:flex; margin-bottom:120px;}
.qprogramWrap .prosList dt { flex: 0 0 auto; width:300px; font-size:30px; color:#2fac66; font-weight:bold;}
.qprogramWrap .prosList dd { flex:1 1 auto; width:100%;}
.qprogramWrap .prosList dd > div { display:flex; align-items: center;}
.qprogramWrap .prosList dd > div + div { margin-top:20px;}
.qprogramWrap .prosList .img { flex:0 0 auto; width:120px; height:120px;}
.qprogramWrap .prosList .img img { width:100%;}
.qprogramWrap .prosList .text { margin-left:40px; font-size:20px; color:#111111; font-weight:bold; }

.qprogramWrap .imgTextBox { position:relative; background:#f3f3f3;}
.qprogramWrap .imgTextBox .textBox { width:50%; height:460px; background:#2fac66;}
.qprogramWrap .imgTextBox .textBox > div { display:flex; width:660px; height:100%; padding-left:20px; margin-left:auto; flex-flow: column; justify-content: center;}
.qprogramWrap .imgTextBox .textBox h3 {font-size:30px; font-weight:bold; color:#fff;}
.qprogramWrap .imgTextBox .textBox .dotList { margin-top:30px;}
.qprogramWrap .imgTextBox .textBox .dotList li { font-size:20px; color:#fff;}
.qprogramWrap .imgTextBox .textBox .dotList li:before { top:13px; background:#fff;}
.qprogramWrap .imgTextBox .textBox .smallText { margin-top:25px; font-size:16px; color:#a6c9b6;}
.qprogramWrap .imgTextBox .imgBox { width:50%; background:#eeeeee;}
.qprogramWrap .imgTextBox .imgBox img { max-width:100%;}
.qprogramWrap .imgTextBox .imgBox .img1 { display:flex; width:660px; height:460px; margin-left:auto; align-items: center;}
.qprogramWrap .imgTextBox .imgBox .img2 { position:absolute; bottom:0; left:50%;}
.qprogramWrap .imgTextBox .imgBox .img2 .btn { display:flex; position:absolute; bottom:100px; right:0; width:200px; height:60px; border-radius:30px; border:1px solid #999999; align-items: center; justify-content: center; font-size:18px; color:#111111; font-weight:bold; transition: all .3s ease;}
.qprogramWrap .imgTextBox .imgBox .img2 .btn:hover { color:#fff; background:#111;}

.qprogramWrap .galleryBox { padding-bottom:100px; background:#f8f8f8;}
.qprogramWrap .galleryBox h3 { padding:80px 0 75px; font-size:30px; color:#2fac66;}
.qprogramWrap .galleryBox .slickWrap { margin-left:-40px;}
.qprogramWrap .galleryBox .item { width:25%; outline:none;}
.qprogramWrap .galleryBox .itemBox { display:block; position:relative; max-width:300px; margin-left:40px; outline:none;}
.qprogramWrap .galleryBox .itemBox:before {content:''; display:block; position:absolute; top:0; left:0; width:0%; height:0%; border:4px solid #2fac66; border-width:4px 0 0 4px; box-sizing:border-box; opacity:0; transition:all .3s ease;}
.qprogramWrap .galleryBox .itemBox:after { content:''; display:block; position:absolute; bottom:0; right:0; width:0%; height:0%; border:4px solid #2fac66; border-width:0 4px 4px 0; box-sizing:border-box; opacity:0; transition:all .3s ease;}
.qprogramWrap .galleryBox .itemBox i { position:absolute; top:40px; right:40px; width:20px; height:20px; opacity:0; transition:all .3s ease;}
.qprogramWrap .galleryBox .itemBox i:before { content:''; display:block; position:absolute; top:0; left:50%; width:4px; height:100%; margin-left:-2px; background:#2fac66}
.qprogramWrap .galleryBox .itemBox i:after { content:''; display:block; position:absolute; left:0; top:50%; width:100%; height:4px; margin-top:-2px; background:#2fac66}
.qprogramWrap .galleryBox .img img { max-width:100%;}
.qprogramWrap .galleryBox .text { position:absolute; bottom:40px; left:0; right:0; text-align:center; font-size:14px; color:#111;}


.qprogramWrap .galleryBox .slick-arrow { position:absolute; top:50%; width:60px; height:60px; font-size:0; margin-top:-30px; outline:none; background:url('../images/qprogram/btn_slick_arrow.png') no-repeat; transition:all .3s ease;}
.qprogramWrap .galleryBox .slick-prev { left:10px; z-index:1;}
.qprogramWrap .galleryBox .slick-next { right:-30px; transform: rotate(180deg);}
.qprogramWrap .galleryBox .slick-arrow:hover { background-image:url('../images/qprogram/btn_slick_arrow_on.png')}

.qprogramWrap .galleryBox .itemBox:hover:before,
.qprogramWrap .galleryBox .itemBox:hover:after { width:100%; height:100%; opacity:1;}
.qprogramWrap .galleryBox .itemBox:hover i { transform: rotate(180deg); opacity:1;}

.qprogramWrap .UPMBox h3 { font-size:30px; color:#2fac66;}
.qprogramWrap .UPMBox .dotList { margin-top:60px;}
.qprogramWrap .UPMBox .dotList li { font-size:20px; color:#111;}
.qprogramWrap .UPMBox .dotList li + li { margin-top:5px;}
.qprogramWrap .UPMBox .dotList li:before {top:13px;}
.qprogramWrap .UPMBox .img { margin-left:10px;}
.qprogramWrap .UPMBox .btn { margin-left:10px; margin-top:auto;}
.qprogramWrap .UPMBox .btn a { display:flex; width:100%; height:120px; align-items: center; justify-content: center; font-size:30px; color:#ffffff; background:#2fac66;}

.qprogramWrap .UPMBox .innerBox { display:flex;}
.qprogramWrap .UPMBox > .innerBox { padding:100px 20px;}
.qprogramWrap .UPMBox > .innerBox.pb0 { padding-bottom:0;}
.qprogramWrap .UPMBox .innerBox > * { flex:1 1 auto; width:50%;}
.qprogramWrap .UPMBox .innerBox img { max-width:100%;}

.qprogramWrap .UPMBox .double { background:#f8f8f8;}
.qprogramWrap .UPMBox .double p { padding:35px 0 50px;border-right:10px solid #fff;}
.qprogramWrap .UPMBox .double p + p { border-left:10px solid #fff; border-right:0;}

.qprogramWrap .UPMBox .warning { margin-top:40px;}

.qprogramWrap .infoBox h3 { margin-top:80px; font-size:30px; color:#2fac66;}
.qprogramWrap .infoBox h4 { margin:45px 0 30px; font-size:20px; color:#2fac66; font-weight:normal;}
.qprogramWrap .infoBox .dotList { margin-top:60px;}
.qprogramWrap .infoBox .dotList li { font-size:20px; color:#111;}
.qprogramWrap .infoBox .dotList li:before {top:13px;}
.qprogramWrap .infoBox .dotList .smallText { margin-top:10px; font-size:14px; color:#999999; vertical-align: middle;}
.qprogramWrap .infoBox .tableWrap { border-top:2px solid #2fac66; border-bottom:1px solid #cccccc; margin-bottom:100px;}
.qprogramWrap .infoBox .tableWrap th { border-right:1px solid #ececec; border-bottom:1px solid #ececec; font-size:16px; color:#111111; font-weight:normal; background:#f8fcfa;}
.qprogramWrap .infoBox .tableWrap td { padding:30px 10px; border-bottom:1px solid #ececec; font-size:16px; color:#111111; text-align:center;}
.qprogramWrap .infoBox .tableWrap td.bg { color:#fff; background:#2fac66;}
.qprogramWrap .infoBox .tableWrap td + td {border-left:1px solid #ececec;}
.qprogramWrap .infoBox .tableWrap td img { max-width:100%;}
.qprogramWrap .infoBox .tableWrap tr:last-child th,
.qprogramWrap .infoBox .tableWrap tr:last-child td { border-bottom:0;}

.layerPopWrap.imgPop .layerPopCont { width:auto;}
.layerPopWrap.imgPop .layerPopCont .popCont { padding:0;}
.layerPopWrap.imgPop .layerPopCont .popCont img {max-width:100%;}
.layerPopWrap.imgPop .btnClose { top:10px; right:10px;}

/* quotation */
.quotationWrap .listBox { display:flex; flex-wrap: wrap; margin-left:-20px;}
.quotationWrap .listBox > div { width:50%; padding-left:20px; margin-bottom:20px;}
.quotationWrap .listBox a { display:block; position:relative; height:100%; padding:80px 80px 160px; background:#fafafa;}
.quotationWrap .listBox a:before { content:'견적문의'; display:flex; position:absolute; bottom:0; left:0; width:100%; height:0px; font-size:18px; text-align:center; color:#fff; background:rgba(0,0,0,0.9); opacity:0; transition:all .3s ease; align-items: center; justify-content: center;}
.quotationWrap .listBox a:after { content:''; display:block; position:absolute; bottom:80px; right:80px; width:70px; height:70px; background:url('../images/quotation/ico_quotation_list1.png') no-repeat; background-size:100%;}
.quotationWrap .listBox h2 { margin-bottom:40px; font-size:30px; color:#2fac66; font-weight:bold; }
.quotationWrap .listBox .dotList li { font-size:14px; color:#111; font-weight:bold;}
.quotationWrap .listBox .dotList li + li { margin-top:10px;}
.quotationWrap .listBox p { padding-left:20px; margin-top:15px; font-size:14px; color:#999999;}
.quotationWrap .listBox i { display:block; position:absolute; left:80px; bottom:80px; width:20px; height:20px; margin-top:70px; transition:all .3s ease;}
.quotationWrap .listBox i:before { content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:3px; background:#cccccc; transform: translate(-50%, -50%); transition:all .3s ease;}
.quotationWrap .listBox i:after { content:''; display: block; position:absolute; top:50%; left:50%; width:3px; height:100%; background:#cccccc; transform: translate(-50%, -50%); transition:all .3s ease;}

.quotationWrap .listBox .ico1 a:after { background-image:url('../images/quotation/ico_quotation_list1.png');}
.quotationWrap .listBox .ico2 a:after { background-image:url('../images/quotation/ico_quotation_list2.png');}
.quotationWrap .listBox .ico3 a:after { background-image:url('../images/quotation/ico_quotation_list3.png');}
.quotationWrap .listBox .ico4 a:after { background-image:url('../images/quotation/ico_quotation_list4.png');}

.quotationWrap .bgImg { height:540px; margin-top:-120px; background:url('../images/quotation/bg_quotation_list.png') no-repeat center center; background-size:cover;}

.quotationWrap .listBox a:hover { box-shadow:0 0 0 1px rgba(47,172,102,0.5);}
.quotationWrap .listBox a:hover i { transform:rotate(180deg);}
.quotationWrap .listBox a:hover i:before,
.quotationWrap .listBox a:hover i:after { background:#000}
/* .quotationWrap .listBox a:hover:before { opacity:1; height:60px;}
.quotationWrap .listBox a:hover i { opacity:0;} */

.quotationWrap .grayBox { padding:100px 0 80px; background:#f8f8f8;}
.quotationWrap .grayBox .titBox { margin-top:0;}
.quotationWrap .titBox { display:flex; margin-bottom:50px; margin-top:90px;}
.quotationWrap .titBox h2 { font-size:30px; color:#2fac66; font-weight:bold; line-height:1;}
.quotationWrap .titBox .right { margin-left:auto; font-size:14px; color:#999999; align-self: flex-end;}

.quotationWrap .formBoxWrap { display:flex; flex-wrap: wrap; margin-left:-40px;}
.quotationWrap .formBoxWrap .formBox { flex:1 1 auto; display:flex; width:calc(50% - 40px); height:80px; margin-left:40px; margin-bottom:20px; border-bottom:2px solid #cccccc; align-items:center;}
.quotationWrap .formBoxWrap .formBox.full { width:calc(100% - 40px);}
.quotationWrap .formBoxWrap .formBox .tit { flex:0 0 auto; position:relative; width:160px; padding-left:10px; color:#111; font-size:16px; font-weight:bold;}
.quotationWrap .formBoxWrap .formBox .tit.normal { font-weight:normal;}
.quotationWrap .formBoxWrap .formBox .tit .important { color:#2fac66;}
.quotationWrap .formBoxWrap .formBox .tit:before { content:''; display:block; position:absolute; right:0; top:50%; width:1px; height:35px; background:#e2e2e2; transform: translateY(-50%);}
.quotationWrap .formBoxWrap .formBox .text { flex:1 1 auto; position:relative; padding-left:40px; color:#2fac66; font-size:16px;}
.quotationWrap .formBoxWrap .formBox .text.type2 { flex:0 1 auto; width:160px; color:#333333;}
.quotationWrap .formBoxWrap .formBox .text.type2:before { content:''; display:block; position:absolute; right:0; top:50%; width:1px; height:35px; background:#e2e2e2; transform: translateY(-50%);}
.quotationWrap .formBoxWrap .formBox select { flex:1 1 auto; height:80px; padding-left:40px; margin-right:20px; border:0; font-size:16px; background:none; outline:none;}
.quotationWrap .formBoxWrap .formBox input { flex:1 1 auto; height:80px; padding-left:40px; margin-right:20px; border:0; font-size:16px; background:none; outline:none;}
.quotationWrap .formBoxWrap .formBox .moreView { flex:0 1 auto; width:180px; height:40px; border:1px solid #e2e2e2; border-radius:20px; color:#111; font-size:14px; text-align:center; line-height:38px;}

.quotationWrap .formBoxWrap .formBox.textareaBox { display:block; height:auto;}
.quotationWrap .formBoxWrap .formBox.textareaBox .tit { display:block; width:auto; margin-top:30px;}
.quotationWrap .formBoxWrap .formBox.textareaBox .tit:before { display:none;}
.quotationWrap .formBoxWrap .formBox.textareaBox textarea { width:100%; margin-top:30px; padding:20px 10px; border:0; font-size:16px; resize: none; box-sizing:border-box; background:none;}

.quotationWrap .formBoxWrap .formBox.inputFile { position:relative;}
.quotationWrap .formBoxWrap .formBox.inputFile input { position:absolute; left:160px; opacity:0; width:calc(100% - 160px); padding:0; margin:0;}
.quotationWrap .formBoxWrap .formBox.inputFile label { display:block; width:100%; position:relative;}
.quotationWrap .formBoxWrap .formBox.inputFile label p { padding-left:40px; padding-right:160px;}
.quotationWrap .formBoxWrap .formBox.inputFile label span { display:block; position:absolute; top:50%; right:0; width:150px; height:42px; border-radius:21px; transform: translateY(-50%); font-size:16px; color:#ffffff; text-align:center; line-height:42px; font-weight:bold; background:#cccccc;}

.quotationWrap .formBoxWrap .warning { width:100%; margin-left:40px; margin-top:15px; padding-bottom:60px; margin-bottom:60px; border-bottom:4px solid #111111;}

.quotationWrap .infoAgreeBox { position:relative; margin-top:15px;}
.quotationWrap .infoAgreeBox .tit { position:relative; color:#111; font-size:16px; font-weight:bold;}
.quotationWrap .infoAgreeBox .checkbox { position:relative; margin-top:25px; color:#999999;}
.quotationWrap .infoAgreeBox .checkbox input { position:absolute; opacity:0;}
.quotationWrap .infoAgreeBox .checkbox label { display:inline-block; position:relative; height:24px; padding-left:35px; font-size:14px; color:#999999; cursor: pointer; line-height:24px;}
.quotationWrap .infoAgreeBox .checkbox label:before { content:''; display:block; position:absolute; top:0; left:0; width:26px; height:24px; background:url('../images/common/ico_checkbox.png') no-repeat; background-size:100%;}
.quotationWrap .infoAgreeBox .checkbox input:checked + label:before {  background:url('../images/common/ico_checkbox_on.png') no-repeat; background-size:100%;}
.quotationWrap .infoAgreeBox .checkbox a { padding-left:17px; color:#2fac66; font-size:14px; text-decoration: underline; font-weight:bold;}
.quotationWrap .infoAgreeBox .btnSubmit { display:flex; position:absolute; bottom:0; right:0; width:400px; height:70px; font-size:20px; color:#ffffff; font-weight:bold; background:#2fac66; align-items:center; justify-content: center;}

/* popup */
.layerPopWrap .productImgList { display:flex; flex-wrap: wrap; margin-bottom:95px;}
.layerPopWrap .productImgList li { flex:1 1 auto; width:33.333%;}
.layerPopWrap .productImgList li:nth-child(n+4) { margin-top:80px;}
.layerPopWrap .productImgList li p { margin-top:35px; font-size:14px; color:#000000; font-weight:bold; text-align:center;}
.layerPopWrap .productImgList img { max-width:100%;}

.layerPopWrap .UndercutImgList { display:flex; margin:0 -60px; padding:60px; background:#f8f8f8}
.layerPopWrap .UndercutImgList img { max-width:100%;}
.layerPopWrap .UndercutImgList li { flex:1 1 auto; width:60%; border-right:1px solid #e7e7e7;}
.layerPopWrap .UndercutImgList li + li { display: flex; width:40%; border:0; flex-flow: column;align-items: center;}
.layerPopWrap .UndercutImgList .tit { font-size:20px; color:#2fac66; font-weight:bold;}
.layerPopWrap .UndercutImgList .tit span { font-size:16px; color:#111; font-weight:normal}

.layerPopWrap .UndercutImgList.bg1 { background:#d4d4d4;}
.layerPopWrap .UndercutImgList.bg1 .tit { color:#111;}
.layerPopWrap .UndercutImgList.bg1 .tit span { color:#fff;}

.layerPopWrap .bossOrHoleImgList { display:block; margin:0 -60px; padding:0px;}
.layerPopWrap .bossOrHoleImgList img { max-width:100%;}
.layerPopWrap .bossOrHoleImgList ul { padding:50px 60px;}
.layerPopWrap .bossOrHoleImgList li { display:flex;}
.layerPopWrap .bossOrHoleImgList li + li { margin-top:60px; padding-top:60px; border-top:1px solid #e5e5e5;}
.layerPopWrap .bossOrHoleImgList li .textBox { flex:0 0 auto; width:150px;}
.layerPopWrap .bossOrHoleImgList li .textBox .tit { font-size:20px; color:#2fac66; font-weight:bold;}
.layerPopWrap .bossOrHoleImgList li .textBox .tit span { font-size:16px; color:#111; font-weight:normal}
.layerPopWrap .bossOrHoleImgList li .textBox .number { display:block; margin-top:15px; font-size:50px; color:rgba(214,214,214,0.4); font-family: 'Gmarket'; font-weight:bold;}
.layerPopWrap .bossOrHoleImgList li .img { display:flex; width:100%; margin-left:-30px;}
.layerPopWrap .bossOrHoleImgList li .img p { flex:0 1 auto; width:25%; padding-left:30px;}

.layerPopWrap .successCont { padding-bottom:30px; background:url('../images/quotation/pop/ico_success.png') no-repeat right bottom;}
.layerPopWrap .successCont p { margin-bottom:40px; font-size:18px; color:#111111; letter-spacing: -0.5px;}
.layerPopWrap .successCont p:last-child { margin-bottom:0; margin-top:80px; font-weight:bold;}

.layerPopWrap .agreePopCont { overflow-y:auto; max-height:380px;}
.layerPopWrap .agreePopCont .tit { margin-top:40px; font-size:18px; color:#2fac66; font-weight:bold;}
.layerPopWrap .agreePopCont .tit:first-child { margin-top:0;}
.layerPopWrap .agreePopCont .dotList { margin-top:10px;}
.layerPopWrap .agreePopCont .dotList li { font-size:16px; color:#111;}
.layerPopWrap .agreePopCont .dotList li + li { margin-top:10px;}


@media screen and (max-width:1360px) {
	#container .subText br { display:none;}

	/* capabilities */
	.capabilitiesWrap .subText { margin-right:450px;}
	.capabilitiesWrap .processList li > div { width:150px; height:150px;}

	.capabilitiesWrap .valueProcess { margin-left:-60px;}
	.capabilitiesWrap .valueProcess li { flex:1 1 auto; width:calc(50% - 60px); margin-left:60px; padding-top:40px; margin-top:155px;}
	.capabilitiesWrap .valueProcess li br { display:none;}

	.aboutusWrap .locationBox .textBox > div { margin-left:20px; margin-right:0px;}

	/* q-program */
	#container .introduceWrap .subText br { display:block;}

	.qprogramWrap .imgTextBox .textBox > div { width:100%;}
	.qprogramWrap .imgTextBox .imgBox .img1 { width:100%;}
	.qprogramWrap .imgTextBox .imgBox .img2 .btn {right:20px;}
	.qprogramWrap .prosList .text br { display:none;}

	/* quotation */
	.quotationWrap .listBox a { padding:40px 40px 80px;}
	.quotationWrap .listBox a:after { top:40px; bottom:auto; right:40px;}
	.quotationWrap .listBox p { padding-left:20px; margin-top:15px; font-size:14px; color:#999999;}
	.quotationWrap .listBox i { left:40px; bottom:40px;}

	.quotationWrap .bgImg { height:270px;}

	.quotationWrap .formBoxWrap .formBox { width:calc(100% - 40px);}

	.quotationWrap .infoAgreeBox .btnSubmit { position:relative; top:0; left:0; margin:60px auto 0;}
}

@media screen and (max-width:1000px) {

	/* about us */
	.aboutusWrap .introduceBox .sec01 { display:block; margin-top:100px;}
	.aboutusWrap .introduceBox .sec01 h2 { margin-right:0px; margin-bottom:40px;}
	.aboutusWrap .introduceBox .sec01 h2 br { display:none;}
	.aboutusWrap .introduceBox .sec01 .img { margin-left:auto;}
	.aboutusWrap .introduceBox .sec01 .img img { width:100%;}
	
	.aboutusWrap .introduceBox .sec02 { margin-top:40px;}
	.aboutusWrap .introduceBox .sec02 p br { display:none;}
	
	.aboutusWrap .introduceBox .bgFooter { height:480px; margin-top:180px; background:url('../images/aboutus/bg_introduce2.png') no-repeat center center; background-size:cover;}
	.aboutusWrap .introduceBox .bgFooter .box { display:inline-block; padding:80px; margin-top:-80px; background:#2fac66;}
	.aboutusWrap .introduceBox .bgFooter ul {}
	.aboutusWrap .introduceBox .bgFooter li { margin-bottom:10px; font-size:16px; color:#ffffff;}
	.aboutusWrap .introduceBox .bgFooter li strong { font-weight:bold;}

	.aboutusWrap .historyBox .innerBox > div { display:block;}
	.aboutusWrap .historyBox .innerBox > div.right .view { margin-left:-40px;}
	.aboutusWrap .historyBox .innerBox > div.right .view > div { margin-left:40px; margin-right:0px;}
	.aboutusWrap .historyBox h2 { margin-bottom:80px; font-size:60px; color:#111; font-weight:bold; line-height:1;}
	.aboutusWrap .historyBox h2 span { font-size:30px; color:#ccc;}
	.aboutusWrap .historyBox .view { margin-left:-40px;}
	.aboutusWrap .historyBox .view > div { flex:1 1 auto; width:50%; min-height:380px; height:auto; margin-left:40px;}
	.aboutusWrap .historyBox .view .img { padding-top:60px;}
	.aboutusWrap .historyBox .view .img img { width:100%;}

	.aboutusWrap .partnersBox ul li { width:calc(33.333% - 20px);}

	.aboutusWrap .locationBox { display:block;}
	.aboutusWrap .locationBox > div { width:100%; height:500px;}
	.aboutusWrap .locationBox .textBox { justify-content: center;}

	/* capabilities */
	.capabilitiesWrap .subText { margin-right:0px;}
	.capabilitiesWrap .tabWrap { position:static; margin-bottom:50px;}
	.capabilitiesWrap .tabWrap a { width:100%; max-width:220px;}
	.capabilitiesWrap .processList { flex-wrap: wrap; justify-content: center; margin-right:-55px;}
	.capabilitiesWrap .processList li { flex:0 1 auto; margin-right:55px; margin-bottom:20px;}
	.capabilitiesWrap .processList li > div { width:150px; height:150px;}

	.capabilitiesWrap .equipmentList li { width:33.333%;}

	.capabilitiesWrap .equipmentList.type2 { margin-left:-15px;}
	.capabilitiesWrap .equipmentList.type2 li { padding-left:15px;}

	.capabilitiesWrap .equipmentList.type3 li { width:33.333%;}

	.capabilitiesWrap .equipmentList.type4 { margin-left:-20px;}
	.capabilitiesWrap .equipmentList.type4 li { padding-left:20px; margin-bottom:20px;}

	.capabilitiesWrap .valueProcess { margin-left:-40px;}
	.capabilitiesWrap .valueProcess li { flex:1 1 auto; width:calc(50% - 40px); margin-left:40px;}

	/* q-program */
	#container .introduceWrap .subText br { display:none;}
	.introduceWrap .list { margin-top:40px; margin-left:-40px;}
	.introduceWrap .list > a {width: calc(50% - 40px); padding:60px; margin-left:40px; margin-bottom:40px;}
	.introduceWrap .list > a:first-child { margin-left:40px;}
	.introduceWrap .list > a:nth-child(2) { margin-top:0px;}
	.introduceWrap .list > a:nth-child(4) { margin-top:0px;}
	.introduceWrap .list i { right:60px; bottom:60px;}

	.qprogramWrap .prosList { display:block;}
	.qprogramWrap .prosList dt { width:100%; margin-bottom:25px;}
	.qprogramWrap .prosList dd { flex:1 1 auto; width:100%;}

	.qprogramWrap .imgTextBox .textBox { width:100%; height:auto; padding:60px 0;}
	.qprogramWrap .imgTextBox .imgBox { display:flex; width:100%; align-items: center;}
	.qprogramWrap .imgTextBox .imgBox .img1 { flex:1 1 auto; width:50%; height:auto; padding:40px 0;}
	.qprogramWrap .imgTextBox .imgBox .img2 { flex:1 1 auto; width:50%; position:static;}
	.qprogramWrap .imgTextBox .imgBox .img2 .btn { bottom:30px; right:20px; width:150px; height:50px;}

	.qprogramWrap .UPMBox > .innerBox.pb0 { display:block;}
	.qprogramWrap .UPMBox > .innerBox > * { width:100%;}

	.qprogramWrap .UPMBox .btn { margin-top:40px;}
	.qprogramWrap .UPMBox .btn a { height:100px;}

	/* quotation */
	.quotationWrap .formBoxWrap .formBox .tit { width:130px;}
	.quotationWrap .formBoxWrap .formBox .text { padding-left:20px;}
	.quotationWrap .formBoxWrap .formBox .text.type2 { width:130px; padding-left:20px;}
	.quotationWrap .formBoxWrap .formBox input,
	.quotationWrap .formBoxWrap .formBox select { padding-left:20px;}
}

@media screen and (max-width:767px) {
	#container { margin-top:60px; margin-bottom:75px;}

	#container .subTit { margin-top:45px; font-size:25px;}
	#container .subText { margin-top:10px; margin-bottom:45px; font-size:15px;}

	/* about us */
	.aboutusWrap .bg { height:200px;}

	.aboutusWrap .introduceBox .sec01 { margin-top:50px;}
	.aboutusWrap .introduceBox .sec01 h2 { font-size:25px;}

	.aboutusWrap .introduceBox .sec02 { display:block;}
	.aboutusWrap .introduceBox .sec02 h3 { width:100%; padding-top:40px; border-right:0; font-size:15px;}
	.aboutusWrap .introduceBox .sec02 p { padding-top:20px; padding-left:0px; font-size:14px;}

	.aboutusWrap .introduceBox .bgFooter { height:240px; margin-top:90px;}
	.aboutusWrap .introduceBox .bgFooter .box { padding:30px; margin-top:-40px;}
	.aboutusWrap .introduceBox .bgFooter li { margin-bottom:8px; font-size:14px;}

	.aboutusWrap .historyBox { padding:50px 0 75px;}
	.aboutusWrap .historyBox .innerBox > div + div { margin-top:40px; padding-top:40px;}
	.aboutusWrap .historyBox .innerBox > div.right .view { margin-left:-20px;}
	.aboutusWrap .historyBox .innerBox > div.right .view > div { margin-left:20px;}
	.aboutusWrap .historyBox h2 { margin-bottom:30px; font-size:30px;}
	.aboutusWrap .historyBox h2 span { font-size:15px;}
	.aboutusWrap .historyBox .view { margin-left:-20px;}
	.aboutusWrap .historyBox .view > div { width:50%; min-height:inherit; margin-left:20px;}
	.aboutusWrap .historyBox .view .year { margin-bottom:10px; font-size:18px;}
	.aboutusWrap .historyBox .view .text { margin-bottom:5px; font-size:13px;}
	.aboutusWrap .historyBox .view .text br { display:none;}
	.aboutusWrap .historyBox .view .img { padding-top:30px;}
	.aboutusWrap .historyBox .view .textBox { display:block;}
	.aboutusWrap .historyBox .view .textBox > div:nth-child(2) {  padding-left:0;}

	.aboutusWrap .certificationBox { padding:40px 0 50px;}
	.aboutusWrap .certificationBox h2 { font-size:25px;}
	.aboutusWrap .certificationBox ul { margin-top:45px;}
	.aboutusWrap .certificationBox ul .text { margin-top:18px; font-size:12px;}

	.aboutusWrap .partnersBox { padding-top:45px;}
	.aboutusWrap .partnersBox h2 { font-size:25px;}
	.aboutusWrap .partnersBox ul { margin-top:45px;}
	.aboutusWrap .partnersBox ul li { width:calc(50% - 20px);}

	.aboutusWrap .locationBox > div { height:auto;}
	.aboutusWrap .locationBox .textBox { padding:75px 0;}
	.aboutusWrap .locationBox .textBox > div { width:auto; height:auto; padding:30px; margin:0 20px;}
	.aboutusWrap .locationBox .textBox dt { font-size:13px;}
	.aboutusWrap .locationBox .textBox dt ~ dt { margin-top:10px;}
	.aboutusWrap .locationBox .textBox dd { margin-top:5px; font-size:13px;}
	.aboutusWrap .locationBox .map { height:300px;}

	/* capabilities */
	.capabilitiesWrap .tabWrap a { width:50%; max-width:100%; height:50px; padding-left:20px; padding-right:35px; font-size:15px;}
	.capabilitiesWrap .tabWrap a:after { right:10px;}
	.capabilitiesWrap .bg { height:200px;}
	.capabilitiesWrap h2 { margin:40px 0 30px; font-size:25px;}
	.capabilitiesWrap .processList { margin-right:0px;}
	.capabilitiesWrap .processList.mt { margin-top:50px;}
	.capabilitiesWrap .processList li { margin-bottom:10px; margin-right:40px;}
	.capabilitiesWrap .processList li > div { width:130px; height:130px;}
	.capabilitiesWrap .processList li > div:after { right:-30px; width:30px; height:12px;}
	.capabilitiesWrap .processList li .number { font-size:15px;}
	.capabilitiesWrap .processList li .text { font-size:13px; letter-spacing:-0.5px;}

	.capabilitiesWrap .blueBox .processList { margin-bottom:50px;}

	.capabilitiesWrap .equipmentList { margin-top:50px;}
	.capabilitiesWrap .equipmentList li { width:50%;}
	.capabilitiesWrap .equipmentList li img { width:100%;}
	.capabilitiesWrap .equipmentList .textBox { padding:20px 15px 40px;}
	.capabilitiesWrap .equipmentList .textBox .tit { margin-bottom:8px; font-size:15px;}
	.capabilitiesWrap .equipmentList .textBox .text { font-size:14px;}
	.capabilitiesWrap .equipmentList .textBox .text2 { margin-top:5px; font-size:12px;}

	.capabilitiesWrap .equipmentList.type2 { margin-left:-2px;}
	.capabilitiesWrap .equipmentList.type2 li { width:50%; padding-left:2px;}
	.capabilitiesWrap .equipmentList.type2 li .img span { width:50px; height:40px; font-size:14px;}
	.capabilitiesWrap .equipmentList.type2 .textBox .text { font-size:14px;}
	.capabilitiesWrap .equipmentList.type2 .textBox .text2 { font-size:12px;}

	.capabilitiesWrap .equipmentList.type3 li { width:50%;}

	.capabilitiesWrap .equipmentList.type4 { margin-left:-2px;}
	.capabilitiesWrap .equipmentList.type4 li { width:50%; padding-left:2px; margin-bottom:2px;}

	.capabilitiesWrap .grayBox { padding-bottom:75px;}

	.capabilitiesWrap .valueProcess { margin-left:-10px;}
	.capabilitiesWrap .valueProcess li { flex:1 1 auto; width:calc(50% - 10px); margin-left:10px; padding-top:20px; margin-top:70px;}
	.capabilitiesWrap .valueProcess li .tit { margin-bottom:10px; font-size:15px;}
	.capabilitiesWrap .valueProcess li .text { margin-bottom:15px; font-size:13px;}

	.capabilitiesWrap .grayBox {padding-bottom:75px;}
	.capabilitiesWrap .grayBox.type2 { margin-bottom:40px;}
	.capabilitiesWrap .grayBox.type2 .innerBox { flex-wrap: wrap;}
	.capabilitiesWrap .grayBox.type2 .innerBox > div { width:50%;}
	.capabilitiesWrap .grayBox.type2 .innerBox > div + div { margin-left:0px;}


	/* q-program */
	#container .introduceWrap .subTit { margin-top:50px; font-size:30px;}
	#container .introduceWrap .subText { margin-top:20px; font-size:20px;}

	.introduceWrap .list { margin-top:30px; margin-left:-20px; margin-bottom:50px;}
	.introduceWrap .list > a {width: calc(100% - 20px); height:250px; padding:20px; margin-left:20px; margin-bottom:20px;}
	.introduceWrap .list > a:first-child { margin-left:20px;}
	.introduceWrap .list h2 { font-size:25px;}
	.introduceWrap .list .text { margin-top:15px; font-size:15px;}
	.introduceWrap .list .text br { display:none;}
	.introduceWrap .list i { right:20px; bottom:20px; width:50px; height:50px;}

	.qprogramWrap h2 { margin-top:-10px; margin-bottom:40px; font-size:32px;}
	.qprogramWrap .prosList { margin-bottom:60px;}
	.qprogramWrap .prosList dt { font-size:25px;}
	.qprogramWrap .prosList dd > div + div { margin-top:10px;}
	.qprogramWrap .prosList .img { width:60px; height:60px; margin-bottom:auto;}
	.qprogramWrap .prosList .text { margin-left:20px; font-size:15px;}

	.qprogramWrap .imgTextBox .textBox h3 {font-size:25px;}
	.qprogramWrap .imgTextBox .textBox .dotList { margin-top:15px;}
	.qprogramWrap .imgTextBox .textBox .dotList li { font-size:15px;}
	.qprogramWrap .imgTextBox .textBox .dotList li:before { top:9px;}
	.qprogramWrap .imgTextBox .textBox .smallText { margin-top:15px; font-size:14px;}

	.qprogramWrap .imgTextBox .imgBox .img2 .btn { bottom:15px; right:20px; width:130px; height:35px; font-size:15px;}

	.qprogramWrap .galleryBox { padding-bottom:25px;}
	.qprogramWrap .galleryBox h3 { padding:40px 0 30px; font-size:25px;}
	.qprogramWrap .galleryBox .slickWrap { margin-left:-20px;}
	.qprogramWrap .galleryBox .item { width:25%; outline:none;}
	.qprogramWrap .galleryBox .itemBox { margin-left:20px;}
	.qprogramWrap .galleryBox .itemBox i { opacity:1;}
	.qprogramWrap .galleryBox .text { bottom:30px;}

	.qprogramWrap .galleryBox .slick-arrow { width:45px; height:45px; margin-top:-22.5px; background-size:100%;}
	.qprogramWrap .galleryBox .slick-prev { left:-0px; z-index:1;}
	.qprogramWrap .galleryBox .slick-next { right:-20px; transform: rotate(180deg);}
	.qprogramWrap .galleryBox .slick-arrow,
	.qprogramWrap .galleryBox .slick-arrow:hover { background-image:url('../images/qprogram/btn_slick_arrow_on.png')}

	.qprogramWrap .galleryBox .itemBox:hover:before,
	.qprogramWrap .galleryBox .itemBox:hover:after { display:none;}
	.qprogramWrap .galleryBox .itemBox:hover i { opacity:1;}

	.qprogramWrap .UPMBox h3 { font-size:25px;}
	.qprogramWrap .UPMBox .dotList { margin-top:30px;}
	.qprogramWrap .UPMBox .dotList li { font-size:15px;}
	.qprogramWrap .UPMBox .dotList li + li { margin-top:5px;}
	.qprogramWrap .UPMBox .dotList li:before {top:10px;}
	.qprogramWrap .UPMBox .img { margin-left:0px; margin-top:40px;}
	.qprogramWrap .UPMBox .btn { margin-top:40px; margin-left:00px;}
	.qprogramWrap .UPMBox .btn a { height:60px; font-size:20px;}

	.qprogramWrap .UPMBox .innerBox { display:block;}
	.qprogramWrap .UPMBox > .innerBox { padding:50px 20px;}
	.qprogramWrap .UPMBox > .innerBox.pb0 { padding-bottom:0;}
	.qprogramWrap .UPMBox .innerBox > * { width:100%;}

	.qprogramWrap .UPMBox .double p { padding:15px 0 25px; border-right:0px solid #fff;}
	.qprogramWrap .UPMBox .double p + p { border-left:0px solid #fff; border-right:0;}

	.qprogramWrap .UPMBox .warning { margin-top:20px;}

	.qprogramWrap .infoBox h3 { margin-top:40px; font-size:25px;}
	.qprogramWrap .infoBox h4 { margin:20px 0 15px; font-size:15px;}
	.qprogramWrap .infoBox .dotList { margin-top:30px;}
	.qprogramWrap .infoBox .dotList li { font-size:15px;}
	.qprogramWrap .infoBox .dotList li:before {top:10px;}
	.qprogramWrap .infoBox .dotList .smallText { margin-top:5px; font-size:12px;}
	.qprogramWrap .infoBox .tableWrap { overflow-y:auto; margin-bottom:50px;}
	.qprogramWrap .infoBox .tableWrap table { width:800px;}
	.qprogramWrap .infoBox .tableWrap th { font-size:14px;}
	.qprogramWrap .infoBox .tableWrap td { padding:15px 10px; font-size:14px;}

	/* quotation */
	.quotationWrap .listBox { margin-left:0px;}
	.quotationWrap .listBox > div { width:100%; padding-left:0px; margin-bottom:20px;}
	.quotationWrap .listBox a { padding:40px 20px 80px;}
	.quotationWrap .listBox a:before { height:60px; opacity:1;}
	.quotationWrap .listBox a:after { top:20px; right:20px; width:50px; height:50px;}
	.quotationWrap .listBox h2 { margin-bottom:30px; font-size:25px;}
	.quotationWrap .listBox .dotList li { font-size:14px;}
	.quotationWrap .listBox .dotList li + li { margin-top:8px;}
	.quotationWrap .listBox p { padding-left:15px; margin-top:10px; font-size:14px;}
	.quotationWrap .listBox i { display:none;}

	.quotationWrap .bgImg { height:150px; margin-top:-60px;}

	.quotationWrap .listBox a:hover { box-shadow:0 0 0 1px rgba(0,0,0,0.5);}
	.quotationWrap .listBox a:hover:before { opacity:1; height:60px;}
	.quotationWrap .listBox a:hover i { opacity:0;}

	.quotationWrap .grayBox { padding:50px 0 20px;}
	.quotationWrap .titBox { display:block; margin-bottom:30px; margin-top:45px;}
	.quotationWrap .titBox h2 { font-size:25px;}
	.quotationWrap .titBox .right { margin-top:10px; font-size:12px;}

	.quotationWrap .formBoxWrap .formBox { position:relative; flex-wrap:wrap; height:auto; margin-bottom:30px;}
	.quotationWrap .formBoxWrap .formBox .tit { width:100%; padding-left:10px; margin-bottom:5px; font-size:16px;}
	.quotationWrap .formBoxWrap .formBox .tit:before { display:none;}
	.quotationWrap .formBoxWrap .formBox .tit.normal { width:130px; font-size:14px;}
	.quotationWrap .formBoxWrap .formBox .tit.normal:before { display:block;}
	.quotationWrap .formBoxWrap .formBox .text { height:50px; padding-left:10px; font-size:14px; line-height:50px;}
	.quotationWrap .formBoxWrap .formBox .text.type2 { width:130px; padding-left:10px;}
	.quotationWrap .formBoxWrap .formBox select { height:50px; padding-left:10px; margin-right:10px; font-size:14px;}
	.quotationWrap .formBoxWrap .formBox input { width:100px; height:50px; padding-left:10px; margin-right:10px; font-size:14px;}
	.quotationWrap .formBoxWrap .formBox .moreView { position:absolute; top:-4px; right:0; width:150px; height:30px; line-height:28px; font-size:13px;}
	.quotationWrap .formBoxWrap .formBox .tit.normal ~ .moreView { top:-115px;}

	.quotationWrap .formBoxWrap .formBox.textareaBox .tit { margin-top:0;}
	.quotationWrap .formBoxWrap .formBox.textareaBox textarea { margin-top:0px; font-size:14px;}

	.quotationWrap .formBoxWrap .formBox.inputFile input {left:0px; width:100%; margin-top:20px;}
	.quotationWrap .formBoxWrap .formBox.inputFile label { display:block; width:100%; margin-top:20px; margin-bottom:10px; position:relative;}
	.quotationWrap .formBoxWrap .formBox.inputFile label p { min-height:30px; padding-left:10px; padding-right:110px;}
	.quotationWrap .formBoxWrap .formBox.inputFile label span { width:100px; height:30px; font-size:14px; line-height:30px;}

	.quotationWrap .formBoxWrap .warning { margin-top:5px; padding-bottom:30px; margin-bottom:20px;}

	.quotationWrap .infoAgreeBox { margin-top:15px;}
	.quotationWrap .infoAgreeBox .tit { font-size:16px;}
	.quotationWrap .infoAgreeBox .checkbox { position:relative; margin-top:25px; color:#999999;}
	.quotationWrap .infoAgreeBox .checkbox label { height:24px; padding-left:35px; font-size:13px;}
	.quotationWrap .infoAgreeBox .checkbox label:before { width:26px; height:24px;}
	.quotationWrap .infoAgreeBox .checkbox a { padding-left:10px; font-size:12px;}
	.quotationWrap .infoAgreeBox .btnSubmit { position:relative; width:100%; height:50px; margin-top:40px; font-size:15px;}

	/* popup */
	.layerPopWrap .productImgList { margin-bottom:40px; margin-left:0 -5px;}
	.layerPopWrap .productImgList li { width:50%; padding:0 2.5px;}
	.layerPopWrap .productImgList li:nth-child(n+3),
	.layerPopWrap .productImgList li:nth-child(n+4) { margin-top:40px;}
	.layerPopWrap .productImgList li p { margin-top:20px; font-size:14px;}
	.layerPopWrap .productImgList img { max-width:100%;}

	.layerPopWrap .UndercutImgList { display:block; margin:0 -20px; padding:20px;}
	.layerPopWrap .UndercutImgList li { width:100%; border:0; text-align:center;}
	.layerPopWrap .UndercutImgList li + li { display:block; width:100%;}
	.layerPopWrap .UndercutImgList li + li img { width:50%;}
	.layerPopWrap .UndercutImgList .tit { margin:40px 0 20px; text-align:left; font-size:18px;}
	.layerPopWrap .UndercutImgList .tit span { font-size:14px;}

	.layerPopWrap .bossOrHoleImgList { margin:0 -20px;}
	.layerPopWrap .bossOrHoleImgList ul { padding:25px 20px;}
	.layerPopWrap .bossOrHoleImgList li { display:block;}
	.layerPopWrap .bossOrHoleImgList li + li { margin-top:30px; padding-top:30px;}
	.layerPopWrap .bossOrHoleImgList li .textBox { width:100%; margin-bottom:15px;}
	.layerPopWrap .bossOrHoleImgList li .textBox .tit { font-size:18px;}
	.layerPopWrap .bossOrHoleImgList li .textBox .tit span { font-size:14px;}
	.layerPopWrap .bossOrHoleImgList li .textBox .number { display:none;}
	.layerPopWrap .bossOrHoleImgList li .img { flex-wrap:wrap; margin-left:-5px;}
	.layerPopWrap .bossOrHoleImgList li .img p { width:50%; padding-left:5px;}
	.layerPopWrap .bossOrHoleImgList li .img p:nth-child(n+3) { margin-top:5px;}

	.layerPopWrap .successCont { padding-bottom:20px; background-size:74px;}
	.layerPopWrap .successCont p { margin-bottom:20px; font-size:14px;}
	.layerPopWrap .successCont p:last-child { margin-top:40px;}

	.layerPopWrap .agreePopCont { max-height:380px;}
	.layerPopWrap .agreePopCont .tit { margin-top:20px; font-size:16px;}
	.layerPopWrap .agreePopCont .dotList { margin-top:5px;}
	.layerPopWrap .agreePopCont .dotList li { font-size:14px;}
	.layerPopWrap .agreePopCont .dotList li + li { margin-top:5px;}

}
@media screen and (max-width:450px) {

	.aboutusWrap .certificationBox ul { flex-wrap: wrap; margin-left:-10px;}
	.aboutusWrap .certificationBox ul li { flex:0 1 auto; width:calc(50% - 10px); margin-left:10px; margin-bottom:30px;}
	.aboutusWrap .certificationBox ul li + li { margin-left:10px;}

	.aboutusWrap .partnersBox ul { margin-left:-10px;}
	.aboutusWrap .partnersBox ul li { width:calc(50% - 10px); margin-left:10px; margin-bottom:10px;}

	.capabilitiesWrap .grayBox.type2 .innerBox > div { width:100%;}
	.capabilitiesWrap .grayBox.type2 .innerBox > div + div:before { content:''; display:block; height:20px; margin:0 -20px; background:#fff;}
	.capabilitiesWrap .grayBox.type2 .innerBox > div + div:after { display:none;}

	.capabilitiesWrap .equipmentList li { width:100%;}
	.capabilitiesWrap .equipmentList.type2 li { width:100%;}
	.capabilitiesWrap .equipmentList.type3 li { width:100%;}
	.capabilitiesWrap .equipmentList.type4 li { width:100%;}

	.qprogramWrap .imgTextBox .imgBox { display:block;}
	.qprogramWrap .imgTextBox .imgBox .img1,
	.qprogramWrap .imgTextBox .imgBox .img2  { width:100%;}

	.qprogramWrap .galleryBox .slickWrap { margin:0;}
	.qprogramWrap .galleryBox .itemBox { margin:0 auto;}
	
	.qprogramWrap .galleryBox .slick-prev { left:-20px;}
	.qprogramWrap .galleryBox .slick-next { right:-20px;}
}