.border_box, .border_box *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

.visual{position:relative; background:#234777;}
.visual .txt{position:absolute; left:44px;}
.visual .txt.s1{top:65px; left:48px;}
.visual .txt.s2{top:65px; left:220px;}
.visual .txt.s3{top:175px;}

.section1{border:2px solid #5c95d8; border-bottom:none; overflow:hidden; margin:30px 0 0; padding:32px 45px; font-family:'malgun gothic'; letter-spacing:-1px;}
.section1 .left{float:left; font-weight:bold; text-align:center; border-right:1px solid #cdd6e4; padding:0 40px 0 0;}
.section1 .left .s1{color:#e34665; font-size:26px; display:block;}
.section1 .left .s2{background:url(img/txt1.png) no-repeat; width:155px; height:25px; text-indent:-9999em; display:block; margin:12px 0 0;}
.section1 .right{float:left; color:#585e82; font-size:14px; margin:5px 0 0 25px; width:410px; line-height:1.5; display:table; height:40px;}
.section1 .right > div{display:table-cell; vertical-align:middle;}

.section2{border:2px solid #5c95d8; overflow:hidden;}
.section2 .boxWrap{position:relative; float:left; width:50%; cursor:pointer;}
.boxWrap .recommend{position:absolute; left:0; top:0; color:#fff; font-size:11px; text-align:center; padding:4px 9px;; background:#5c95d8}
.boxWrap.icon01{background:url(img/icon1.png) no-repeat 90% 20px;}
.boxWrap.icon02{background:url(img/icon2.png) no-repeat 90% 20px;}
.boxWrap.icon03{background:url(img/icon3.png) no-repeat 90% 20px;}
.boxWrap.icon04{background:url(img/icon4.png) no-repeat 90% 20px;}
.boxWrap.icon05{background:url(img/icon5.png) no-repeat 90% 20px;}
.boxWrap.icon06{background:url(img/icon6.png) no-repeat 90% 20px;}
.boxWrap.icon07{background:url(img/icon7.png) no-repeat 90% 20px;}
.boxWrap.icon08{background:url(img/icon8.png) no-repeat 90% 20px;}
.boxWrap.icon09{background:url(img/icon9.png) no-repeat 90% 20px;}
.boxWrap.icon10{background:url(img/icon10.png) no-repeat 90% 20px;}
.boxWrap.icon11{background:url(img/icon11.png) no-repeat 90% 20px;}
.boxWrap.icon12{background:url(img/icon12.png) no-repeat 90% 20px;}
.boxWrap.icon13{background:url(img/icon13.png) no-repeat 90% 20px;}
.boxWrap.icon14{background:url(img/icon14.png) no-repeat 90% 20px;}
.boxWrap.icon15{background:url(img/icon15.png) no-repeat 90% 20px;}
.section2 .boxWrap:first-child{border-right:1px solid #5c95d8;}
.section2 .boxWrap .inner{padding:35px 40px 20px;}
.boxWrap .inner .tit{ font-family:'malgun gothic';}
.boxWrap .inner .tit .s1{color:#666; font-size:13px; display:block; font-weight:bold;}
.boxWrap .inner .tit .s2{color:#333; font-size:24px; display:block; font-weight:bold; margin:0; letter-spacing:-1.5px;}
.boxWrap .inner .tit .s2 .red{color:#e34665;}
.boxWrap .inner .txt{font-size:13px; line-height:1.2; margin:48px 0 0; letter-spacing:-0.5px;}
.boxWrap .inner .txt > div{
	padding:3px 0 0;
	/* height:28px;  */
	line-height:1.5;
	overflow:hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
}
.boxWrap .bottom{background:#fafafa; border-top:1px solid #f0f0f0; padding:10px 40px; overflow:hidden; font-family:'malgun gothic'; min-height:39px;}
.boxWrap .bottom .s1{position:relative; float:left; color:#333; font-size:13px; font-weight:bold; padding:0 20px 0 15px; transition:all 0.3s; min-width:118px;}
.boxWrap.blet01 .bottom .s1{background:url(img/blet1.png) no-repeat left center;} /* °ú¸ñº° °øºÎ¹ý */
.boxWrap.blet02 .bottom .s1{background:url(img/blet2.png) no-repeat left center;} /* ½ÃÇè´ëºñ °øºÎ¹ý */
.boxWrap.blet03 .bottom .s1{background:url(img/blet3.png) no-repeat left center;} /* °øºÎ¹ý ÀÔ¹®¿ë */
.boxWrap.blet04 .bottom .s1{background:url(img/blet4.png) no-repeat left center;} /* »óÀ§±Ç µµ¾à¿ë */
.boxWrap.blet05 .bottom .s1{background:url(img/blet5.png) no-repeat left center;} /* ÃÖ»óÀ§±Ç µµ¾à¿ë */

.boxWrap.blet01:hover .bottom .s1{color:#17a978;} /* °ú¸ñº° °øºÎ¹ý */
.boxWrap.blet02:hover .bottom .s1{color:#f75d5e;} /* ½ÃÇè´ëºñ °øºÎ¹ý */
.boxWrap.blet03:hover .bottom .s1{color:#ffb21d;} /* °øºÎ¹ý ÀÔ¹®¿ë */
.boxWrap.blet04:hover .bottom .s1{color:#48a1ed;} /* »óÀ§±Ç µµ¾à¿ë */
.boxWrap.blet05:hover .bottom .s1{color:#9764ff;} /* ÃÖ»óÀ§±Ç µµ¾à¿ë */

.section3 .boxWrap.blet01:hover{border:1px solid #17a978;}
.section3 .boxWrap.blet02:hover{border:1px solid #f75d5e;}
.section3 .boxWrap.blet03:hover{border:1px solid #ffb21d;}
.section3 .boxWrap.blet04:hover{border:1px solid #48a1ed;}
.section3 .boxWrap.blet05:hover{border:1px solid #9764ff;}

.boxWrap .bottom .s1:before{position:absolute; content:""; right:0; top:4px; background:#d9d9d9; width:1px; height:11px;}
.boxWrap .bottom .s2{float:left; position:relative;}
.boxWrap .bottom .s2 .HeartAnimation{position:absolute; left:0; top:-16px; display:inline-block;}
.boxWrap .bottom .s2 .count{position:absolute; left:37px; top:0; display:inline-block; font-size:13px; letter-spacing:0; font-weight:bold; cursor:pointer; width:150px}
.boxWrap .bottom .s2 .Heart:hover .count{color:#cc3444;}
.boxWrap .bottom .s2 .Heart .icon{position:absolute; left:19px; top:3px; background:url(img/heart.png) no-repeat; width:14px; height:13px;}

.section3{width:110%; overflow:hidden; margin:30px 0 0;}
.section3 .boxWrap{position:relative; float:left; width:410px; margin:0 30px 20px 0; border:1px solid #d9d9d9; cursor:pointer; transition:all 0.3s;}
.section3 .boxWrap .inner{padding:0;}
.section3 .boxWrap .inner .tit{padding:30px 0 0 35px;}

.boxWrap .inner .tit .s1{height:22px;}
.boxWrap .inner .tit .s2{height:35px;}
.boxWrap .inner .tit > span{word-wrap: break-word; word-break: break-all; display: -webkit-box; text-overflow: ellipsis; white-space: nowrap; -webkit-box-orient: vertical; overflow:hidden; line-height:1.5; width:195px;}


.section3 .boxWrap .inner .txt{border-top:1px solid #f2f2f2; padding:20px 30px; margin:40px 0 0;}

.HeartAnimation{
	background-image: url(img/web_heart_animation.png);
	background-repeat: no-repeat;
	background-position: left;
	height: 50px;
	width: 50px;
	cursor:pointer;
	background-position: 0 0;
	-webkit-transition: background-position 1s steps(28);
	transition: background-position 1s steps(28);
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
	background-size:1450px;
}
.HeartAnimation.on{
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	background-position: right;
}

.section_tab{display:block; margin:1px 0 0 1px;}
.section_tab:after{content:""; display:block; clear:both;}
.section_tab li a{float:left; color:#333; font-size:20px; font-family:'malgun gothic'; font-weight:bold; text-align:center; width:33.45%; height:70px; line-height:65px; border:1px solid #333; margin:-1px 0 0 -1px; z-index:1; position:relative;}
.section_tab li.on a{color:#fff; background:#e34665; border:1px solid #b92c48; z-index:2;}

.line_mid{padding:0 0 30px; margin:30px 0 0; border-top:1px dashed #d9d9d9; width:100%;}

.seciotn_detail_top{overflow:hidden;}
.seciotn_detail_top .left{float:left; display:inline-block; color:#333; border-top:1px solid #333; height:34px; border-bottom:1px solid #333; line-height:36px; padding:0 34px 0 13px; font-weight:bold; background:url(img/icon_detailView.png) no-repeat 95% center;}
.seciotn_detail_top .right{float:right; overflow:hidden;}
.seciotn_detail_top .right .s1{float:left;}
.seciotn_detail_top .right .s2{float:left; margin:0 0 0 5px;}
.seciotn_detail_top .right .s1 select{width:157px;}
.seciotn_detail_top .right .s2 select{width:356px;}
.seciotn_detail_top .right .select-title{height:34px; line-height:34px; padding:5px 10px 0 18px; background: #fff url(img/selectarrow.png) no-repeat 100% 0; border:1px solid #666; color:#333;}
.seciotn_detail_top .right .select-title.active{background-position: 100% -32px;}
.select-option span, .select-option strong{padding:8px 10px 10px 18px !important; border-top:1px solid #ccc; cursor:pointer;}
.select-option li:first-child span{border-top:none;}
.select-option{max-height:200px !important;}

.seciotn_detail_visual{background:url(img/section_detail_visualBg.png) no-repeat; width:730px; height:179px; margin:20px 0 0; overflow:hidden;}
.seciotn_detail_visual .left{float:left; font-family:'malgun gothic'; margin:34px 0 0 40px;}
.seciotn_detail_visual .left .s1{background:#003975; color:#fff; font-size:13px; display:inline-block; padding:5px 5px 5px 19px; font-weight:bold;}
.seciotn_detail_visual.blet00 .left .s1{background:none;}
.seciotn_detail_visual.blet01 .left .s1{background:#003975 url(img/blet1.png) no-repeat 5px center;}
.seciotn_detail_visual.blet02 .left .s1{background:#003975 url(img/blet2.png) no-repeat 5px center;}
.seciotn_detail_visual.blet03 .left .s1{background:#003975 url(img/blet3.png) no-repeat 5px center;}
.seciotn_detail_visual.blet04 .left .s1{background:#003975 url(img/blet4.png) no-repeat 5px center;}
.seciotn_detail_visual.blet05 .left .s1{background:#003975 url(img/blet5.png) no-repeat 5px center;}

.seciotn_detail_visual .left .s2{color:#fff; font-weight:bold; font-size:30px; line-height:1.2; margin:2px 0 0; width:430px; height:80px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap:break-word;
	word-break: break-all;
}
.seciotn_detail_visual .right{float:right; margin:31px 56px 0 0;}
.seciotn_detail_visual .right .s1{background:url(img/seciotn_detail_visual_bloo.png) no-repeat; width:156px; height:51px; padding:10px 2px; text-align:center; color:#333; letter-spacing:-0.5px; line-height:1.2;}
.seciotn_detail_visual .right .s1 .red{color:#e34665;}
.seciotn_detail_visual .right .s2{position:relative; cursor:pointer; width:156px; height:57px; border:1px solid #333; background:#fff; border-radius:1px; margin:5px 0 0; font-family:'malgun gothic';}
.seciotn_detail_visual .right .s2 .HeartAnimation{position:absolute; left:-18px; top:-22px; z-index:2;}
.seciotn_detail_visual .right .s2 .count{position:absolute; left:53px; top:18px; color:#333; font-size:16px; font-weight:bold; z-index:1;}
.seciotn_detail_visual .right .s2 .HeartAnimation{	background-image: url(img/web_heart_animation.png); width:100px; height:100px;	background-size:2900px;}
.seciotn_detail_visual .right .s2:hover .count{color:#e34665;}

/* titleArea */
.knowhow .titleArea{margin:30px 0 0;padding:17px;background:#FCFAEF;border:1px solid #EEEAD3;*zoom:1;}
.knowhow .titleArea:after{content:' ';display:block;clear:both;}
.knowhow .titleArea .imgArea{float:left;display:inline-block;margin-bottom:0;}
.knowhow .titleArea .imgArea img{margin:0 22px 0 0;}
.knowhow .titleArea p{color:#6e6e6e;line-height:200%;}

/* txtBlock */
.knowhow .txtBlock{color:#6e6e6e;line-height:200%;padding:0 4px;margin:35px 0 0 0;}

/* howto */
.knowhow .howto{margin:15px 0 0 0; border:1px solid #3F6BA3;}
.knowhow .howto h3{display:block;text-indent:18px;font:normal 15px malgun gothic;letter-spacing:-1px;color:#FFF;padding:5px 0 8px 20px;background:#3F6BA3 url(/Knowledge/knowhow/img/ico_howto.gif) 20px 8px no-repeat;}
.knowhow .howto p{line-height:200%;color:#6e6e6e;margin:15px 25px;}

.athor_howknow{color:#333; font-size:16px; font-family:'malgun gothic'; font-weight:bold;}

table.tbl01 tbody td{padding:15px 10px !important; font-family:'dotum';}
table.tbl01 tbody tr:hover td{background:#fbfbfb;}
table.tbl01 tbody td.tit{font-weight:bold; font-family:'malgun gothic';}
table.tbl01 tbody td .blet{display:inline-block; width:10px; height:10px; margin:0 5px 0 0;}
table.tbl01 tbody td .blet.blet01{background: url(img/blet1.png) no-repeat 0 center;}
table.tbl01 tbody td .blet.blet02{background: url(img/blet2.png) no-repeat 0 center;}
table.tbl01 tbody td .blet.blet03{background: url(img/blet3.png) no-repeat 0 center;}
table.tbl01 tbody td .blet.blet04{background: url(img/blet4.png) no-repeat 0 center;}
table.tbl01 tbody td .blet.blet05{background: url(img/blet5.png) no-repeat 0 center;}

.heart_on{display:inline-block; background:url(img/heart_on.png) no-repeat center; width:7px; height:9px; margin:0 5px 0 0;}


.btnPrev{display:inline-block; color:#fff; padding:10px 30px 10px 20px; margin:10px 0; font-family:'malgun gothic'; font-size:13px; font-weight:bold; background:#d94f5c url(img/icon_go.png) no-repeat 91% center; transition:all 0.3s;}
.btnPrev:hover{color:#fff; background-color:#c74753;}



/* finish */
.finish{background:#F8F8F8;border:1px solid #E4E4E4;margin:35px 0 0; padding:20px;}
.finish p{color:#6e6e6e; line-height:200%;}
.finish .mission{background:#FFF;border:1px solid #E4E4E4;padding:15px 20px;*zoom:1;}
.finish .mission:after{content:' ';display:block;clear:both;}
.finish .mission h4{float:left;display:inline-block;margin:0 18px 0 0;}
.finish .mission p{display:inline-block;color:#3c6098;margin:12px 0 0 0;*margin-top:28px;}

/* ¸®´º¾ó¼öÁ¤ */
.seciotn_detail_visual{width:850px;}
.seciotn_detail_top .right select{height:34px; line-height:34px; padding:0 0 0 18px; background: #fff url(img/selectarrow.png) no-repeat 100% 0; border:1px solid #666; color:#333;-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;}
.seciotn_detail_top .right select::-ms-expand {
	display: none;
}
.seciotn_detail_top .right .s1 select{width:200px;}
.seciotn_detail_top .right .s2 select{width:435px;}
.seciotn_detail_visual .left{margin-left:90px;}
.seciotn_detail_visual .right{margin-right:90px;}