@charset "utf-8";

/* Link Css */
a:link,  a:visited,  a:active , a:hover {text-decoration:none}
ul, ol , li , p , dl , dt , dd ,h1 ,h2, h3, h4, h5 , h6 , input { list-style: none; margin: 0; padding: 0; }
em,i {font-style:normal;}
button ,label{ cursor: pointer; }
.table { display: table; width: 100%; height: 100%;}
.table .table-cell { display: table-cell; vertical-align: middle;}
.contents { position: relative; width: 960px; height: 100%; margin: 0 auto; }

.btn_wrap { text-align: center; padding: 40px 0;}
.btn_st1 ,
.btn_st2 ,
.btn_st3 { display: inline-block; padding: 18px 36px; font-size: 18px; color: #fff; background-color: #006cff;  border-radius: 2px; min-width: 100px; }
.btn_st2 { background-color: #898989; }
.btn_st3 { background-color: transparent; border:1px solid #006cff; color: #006cff;padding:17px 7px;margin-left:15px;}
.btn_st1:hover {background-color: #025edc; }
.btn_st2:hover {background-color: #727272; }
.red { color: #ff4646; }
.tech_top span,
.tech_middle ul li span,
.tech_request .input_area h5 i,
.tech_bj_listtop span ,
.tech_bj_list .list li div a ,
.tech_bj_list .list li div a em ,
.tech_bj_Survey_header a { background-image: url('/images/tech_bj/split.png');}

#tech_bj ,input ,textarea { font-family: 'NG','dotum','AppleGothic','sans-serif'; }

.btn_st1,
.btn_st2,
.select_box > a em ,
.tech_bj_list .list li div a em , 
.select_box ul ,
.select_box ul a ,
.tech_request .input_area h5 a ,
.group button { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
input[type=radio   ]:not(old) + label:before ,
input[type=radio   ]:not(old) + label:after { opacity: 1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}



input[type=radio   ] { height: 24px; width: 24px; vertical-align: middle; }
input[type=radio   ] + label { position: relative; cursor: pointer; display: inline-block; line-height: 25px; height: 26px; padding-left: 5px; color:#949494;  vertical-align: middle; }
input[type=radio   ]:not(old) {width:0; margin:0; padding:0; opacity:0;}
input[type=radio   ]:not(old) + label { padding-left: 32px;  }


input[type=radio   ]:not(old) + label:before,
input[type=radio   ]:not(old) + label:after { content:''; display: block; cursor: pointer; position: absolute; left: 0; top: -1px; height: 24px; width: 24px; border: 1px solid #d7d7d7; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=radio   ]:not(old) + label:before,
    input[type=radio   ]:not(old) + label:after { top: 0px; }
}
@-moz-document url-prefix(){
    input[type=radio   ]:not(old) + label:before,
    input[type=radio   ]:not(old) + label:after { top: 0px; }
}


input[type=radio   ]:not(old) + label:before { border-radius: 13px;}
input[type=radio   ]:not(old) + label:after { left: 6px; top: 50%; width: 14px; height: 14px; margin-top: -8px; border: none; border-radius: 7px; background-color: #d7d7d7; }

.write input[type=radio   ]:not(old) + label:before,
.edit input[type=radio   ]:not(old) + label:before { top: 7px; }
.write input[type=radio   ]:not(old) + label:after,
.edit input[type=radio   ]:not(old) + label:after { margin-top: 2px; }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type=radio   ]:not(old) + label:after { margin-top: -7px; }
}
@-moz-document url-prefix(){
    input[type=radio   ]:not(old) + label:after { margin-top: -7px; }
}

input[type=radio   ]:not(old):checked + label:after {
    background-color: #515151;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* css이펙트용 */
.quick_menu,
.message,
.quick_menu a,
.quick_menu a span ,
.quick_menu a em,
#dowoomiB .sets .slist .bold a,
#dowoomiB .sets .slist .ul_style li a.btn,
#dowoomiB .tip em,
#dowoomiB .tip strong,
#dowoomiB .action a:before
{ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#dowoomiB .tip strong { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}






.tech_top { height: 324px; }
.tech_top h4 { padding: 55px 0 15px; font-size: 32px; color: #4b4b4b; letter-spacing: -2px}
.tech_top h4 strong { color:#006cff; }
.tech_top p { font-size: 18px; color: #4b4b4b; line-height: 1.4; margin-bottom: 25px; }
.tech_top span { position: absolute; right: 0; top: 0; bottom: 0; width: 430px; height: 100%; background-position: 0 0; }

.tech_middle { background-color: #ebecf8; text-align: center; }
.tech_middle .contents { height: auto; padding: 60px 0 90px; }
.tech_middle h5 { font-size: 30px; color: #2b2b2b; }
.tech_middle p { margin: 20px 0 30px;  font-size: 18px;color: #4b4b4b; letter-spacing: -1px; }
.tech_middle ul { margin: 0 -3px ; overflow: hidden; }
.tech_middle ul li {position: relative; float: left; width: 235px; margin: 0 3px; background-color: #fff; }
.tech_middle ul li p { height: 92px; margin: 0; border-top: 1px solid #aec2f1; background-color: #678de4; text-align: center; color: #fff; font-size: 18px; font-weight: bold; *height: 67px; *padding-top: 25px; }
.tech_middle ul li span { display: block; width: 100%; height: 206px;  }
.tech_middle ul li span.img1 {background-position: 0 -440px;}
.tech_middle ul li span.img2 {background-position: -240px -440px;}
.tech_middle ul li span.img3 {background-position: -480px -440px;}
.tech_middle ul li span.img4 {background-position: -720px -440px;}


.tech_footer { text-align: center; }
.tech_footer .contents { height: auto; padding: 60px 0 0; }
.tech_footer h5 { font-size: 30px; color: #2b2b2b; }
.tech_footer ol {display:flex; justify-content:center; align-items:center; overflow: hidden; margin: 40px 0 0; padding: 40px 56px; background-color: #fcfcfe; border: 1px solid #e0e2ff; border-radius: 100px; }
.tech_footer ol li { position: relative;  height: auto; padding-left: 30px; margin-left: 25px; box-sizing:border-box;}
.tech_footer ol li p { display: inline-block; max-width: 150px; font-size: 20px; color: #00042e; letter-spacing: -1px; font-weight: 600; line-height: 1.4; }
.tech_footer ol li p span {display:block; font-size: 18px; color: #5b61af; font-weight: normal; }
.tech_footer ol li em { position: absolute; left: 0; top: 50%; margin-top: -5px; border-left: 7px solid #ff4da5; border-top: 5px solid transparent; border-bottom: 5px solid transparent;  }
.tech_footer ol li:first-child { padding-left: 0; margin-left: 0; }


.tech_request { background-color: #f9f9f9; padding:75px 0 0; margin-bottom: -57px; }
.tech_request h4 { font-size: 24px; }
.tech_request .input_area { padding: 35px 40px; margin:15px 0 0; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 8px; }
.tech_request .input_area h5 { font-size: 17px; color:#333; }
.tech_request .input_area h5 i { display: inline-block; width: 17px; height: 15px; padding-top: 2px; border-radius: 50%; margin:-2px 5px 0 0; vertical-align: middle; color: #fff; font-size: 0; text-align: center; background-position: -120px -700px; }
.tech_request .input_area h5 a { padding: 5px 10px; font-size: 14px; font-weight: normal; color: #fff; vertical-align: 1px; background-color: #656472; }
.tech_request .input_area h5 a:hover { background-color: #727272;}
.tech_request .input_area p {padding-right:160px;font-size: 15px; color:#9a9a9a; margin-top: 8px; line-height: 1.3; word-wrap: break-word;}
.tech_request .input_area textarea { width: 855px; height: 100px; margin-top: 15px; padding: 10px; border: 1px solid #d6d6d6; color:#000; font-size: 14px; resize: none; }
.tech_request .input_area input[type=text] { width: 855px; height: 28px; margin-top: 15px; padding: 5px 10px; border: 1px solid #d6d6d6; color:#000; font-size: 14px; }

.group { clear:both; position: relative; margin-bottom: 40px;  }
.group .btn_wrap { position: absolute; top: 25px; right: 0; padding: 0; }
.group button { height: 40px; width: 73px; margin-right: 5px; font-size: 14px; color: #a5a5a5; border: 1px solid #d6d6d6; background-color: #fff; }
.group button:hover { background-color: #f3f3f3;}

.select_box_wrap ol > li { position: relative; height: 40px;  margin-top: 15px; }
.select_box_wrap li span { float: left; display: inline-block; height: 100%; line-height: 40px; min-width: 85px; font-size: 14px; color: #949494; }
.select_box_wrap li span em { color:#ff5353; }
.select_box { position: relative; height: 100%; display: inline-block; margin-right: 13px; text-indent: 10px; }
.select_box > a { position: relative; z-index: 3; display: block; width: 235px; height: 38px; line-height: 38px; border: 1px solid #d6d6d6;  font-size: 14px; color: #949494; }
.select_box > a em { position: absolute; top: 50%; right: 10px; margin-top: -3px; border-top: 6px solid #949494; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.select_box ul { height: 0; opacity:0; filter: alpha(opacity=0);-moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 2; top: 100%; left: 0; right: 0; margin-top: -1px; max-height: 145px; overflow-x: auto; border-bottom: 1px solid #d6d6d6; background-color: #fff;  }
.select_box ul li a { display: block; height: 28px; line-height: 28px; font-size: 14px; color: #949494; border: 1px solid #d6d6d6; border-bottom: none; }
.select_box ul li a:hover { background-color: #eee; }

.select_box.on > a { z-index: 5; }
.select_box.on > a em { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); }
.select_box.on ul { z-index: 6; opacity:1; filter: alpha(opacity=100);-moz-opacity: 1; -khtml-opacity: 1; height: auto; }


.radio_wrap { padding:0 0 40px;  }
.radio_wrap > div { position: relative; display:inline-block; float: left; min-width: 80px; }
.radio_wrap > div span { position: absolute; top: 32px; left: 0; font-size: 11px; color: #7f7f7f; }

.gray_box { border: 1px solid #d6d6d6; background-color: #f9f9f9; margin-top: 15px; }
.gray_box h6 { margin-bottom: 10px; font-size: 18px; font-weight: normal; color: #333;}
/* .gray_box strong { fz15 } */
.gray_box.array_st1 { padding: 10px 15px; font-size: 14px; color: #949494; }
.gray_box.array_st2 { padding: 35px 30px; font-size: 16px; color: #777; margin-top: 30px; }
.gray_box.array_st1 li { margin-top: 4px; }
.gray_box.array_st2 li { margin-top: 6px; }

.input_wrap { margin-top: 15px; font-size: 16px; color: #777; vertical-align: middle;}
.input_wrap input { width: 22px; height: 22px; border: 1px solid #ddd; background-color: #fff; vertical-align: middle; }
.input_wrap label { padding-left: 5px; vertical-align: middle;  }

.tech_bj_list{}
.tech_bj_listtop { box-sizing: border-box;border-bottom: 1px solid #cdcdcd; font-size: 19px; color: #4b4b4b; letter-spacing: -1px; }
.tech_bj_listtop .contents {display: flex;flex-direction: column; justify-content: center;min-height: 162px;padding-right:360px;box-sizing: border-box;}
.tech_bj_listtop h4 { padding: 0 0 5px; }
.tech_bj_listtop p {  }
.tech_bj_listtop span { position: absolute; right: 0; top: 0; bottom: 0; width: 348px; height: 100%; background-position: -1086px -462px; }

.tech_bj_list .list { padding-top: 75px; }
.tech_bj_list .list ul { margin-bottom: 40px; }
.tech_bj_list .list li { position: relative; height: 45px; padding: 30px 48px 30px 110px; margin-bottom: 20px; border: 1px solid #e9e9e9; }
.tech_bj_list .list li span { position: absolute; left: 20px; top: 50%; display: block; width: 66px; height: 66px; margin-top: -33px; background-size: cover; border-radius: 50%; background-repeat: no-repeat; background-position: center; }
.tech_bj_list .list li span img { width: 66px; height: 66px; border-radius: 50%; border: none; }
.tech_bj_list .list li h5 { color:#3d82f6; margin-bottom: 8px; }
.tech_bj_list .list li p { font-size: 18px; color:#484848; }
.tech_bj_list .list li div { position: absolute; top: 50%; right: 48px; margin-top: -11px; }
.tech_bj_list .list li div a { position: relative; overflow: hidden; display: inline-block; width: 22px; height: 21px; text-indent: -9999em; background-position: -50px -700px; }
.tech_bj_list .list li div a em { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 100%; width: 100%; background-position: -72px -700px; opacity:0; filter: alpha(opacity=0);-moz-opacity: 0; -khtml-opacity: 0; }
.tech_bj_list .list li div a.on em,
.tech_bj_list .list li div a:hover em { opacity:1; filter: alpha(opacity=100);-moz-opacity: 1; -khtml-opacity:1; }
.tech_bj_list .list li div a:first-child { display: inline-block; width: 21px; margin-right: 10px; background-position: 0 -700px; }

.tech_bj_Survey { background-color: #e6e6e6; }
.tech_bj_Survey_header { height: 60px; padding: 0 25px; background-color: #fff;}
.tech_bj_Survey_header h1 { line-height: 59px; font-size: 18px; color: #424242; letter-spacing: -1px; }
.tech_bj_Survey_header h1 a { float: left; width: 120px; height: 60px; margin-right: 5px; background-position: 0 -730px;}
.tech_bj_Survey_body { padding-top: 60px; }
.tech_bj_Survey_body h2 { padding-left: 15px; font-size: 26px; color: #292929; letter-spacing: -1px; }
.tech_bj_Survey_body p { padding: 8px 15px 25px ; font-size: 17px; color: #292929; letter-spacing: -1px; }
.tech_bj_Survey_body .input_area { padding:55px 60px ; background-color: #fff; border: 1px solid #d3d3d3; border-radius: 8px;}
.tech_bj_Survey_body .input_area h3 { margin-bottom: 10px; color: #333; font-size: 17px; }
.tech_bj_Survey_body .input_area h3 em { color: #919191; font-weight: normal; }
.tech_bj_Survey_body textarea { width: 815px; height: 70px; border: 1px solid #d6d6d6; resize: none; padding: 10px; }
.tech_bj_Survey_body input[type=text] { width: 219px; height: 38px; padding: 0 8px; line-height: 38px; border: 1px solid #d6d6d6; }

.footer { padding: 40px 0; text-align: center; font-size: 12px; color:#474747; }

/* paging */
.paging {font-size:0; line-height:0; text-align:center;
	a {display:inline-block; height:28px; padding:0 8px; border-radius:2px; color:#555; font-size:13px; line-height:28px; transition:all .2s ease;
		&:hover {background:#f0f0f0;}
		&:first-child {margin-left:0;}
		&.on {background:#4279ff; color:#fff;}
	}
	span {width:32px; color:#555; font-size:13px; text-align:center; line-height:1.2;}
	.prev, .next {background:#fff; width:30px; height:30px; padding:0; border:1px solid #d9dddf; border-radius:1px; vertical-align:19px; font:0/0 a;}
	.prev:before , .next:before {content:""; display:inline-block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' stroke='%23888' viewBox='0 0 7.5 11.5'%3e%3cpath fill='none' d='M1.267.509l5.06 4.995-5.06 4.996'/%3e%3c/svg%3e"); background-size:100% 100%; background-position:50% 50%; background-repeat:no-repeat; width:7px; height:11px; margin:0 auto; vertical-align:-21px;}
	.prev {margin-right:12px;
		&:before {-webkit-transform:rotate(180deg); -ms-transform:rotate(180deg); transform:rotate(180deg);}
	}
	.next {margin-left:12px;}
	&.cmmt + .board.view{margin-top:-57px;}
}

html:not([lang^="ko"]) {
	.tech_top span {background:none;}
	.tech_middle ul li span.img1 { background: url('/images/tech_bj/list_img1.png') no-repeat 50% 50%; background-size: 160px 133px;}
	.tech_footer ol {padding:40px 24px; box-sizing:border-box;}
	.tech_footer ol li {width:calc(100% / 5 - 9px); padding-left:18px; margin-left:12px;}
	.tech_footer ol li:first-child {padding:0; margin:0;}
	.tech_footer ol li p {font-size:18px;}
	.tech_footer ol li p span {font-size:14px; line-height:1.4;}
}

html[lang^="en"] {
	.tech_footer ol {height:170px;}
	.tech_footer ol li p {letter-spacing: -1.2px;}
}

html[lang^="th"] {
	.tech_footer ol li p {letter-spacing: -1.6px;}
}

html[lang^="zh"] {
	.tech_footer ol li p {letter-spacing: -1.6px;}
}