@charset "utf-8";

@import url("/sites/guide/style/css/guide.css");
@import url("./../../style/css/layout.css");
@import url("main.css");
@import url("main_widjet.css");

/* 템플릿별로 개별 정의해야하는 CSS는 이 밑으로 작성하시면 최종적으로 적용 됩니다. **********/
/* 레이아웃은 같은 타입의 템플릿은 공통으로  적용되어 있습니다.**********/
/* 레이아웃 변경시에는 같은 템플릿은 같이 변경되오니 유의하여 주시고 변경하실 CSS는 각 템플릿의 샘플 템플릿의 layout.css를 수정하시면 됩니다.**********/
/* 개별적인 변경을 하실 경우에는 새로운 템플릿으로 추가해서 작업하시거나 style.css에서 !important처리로 작업하시기 바랍니다.**********/

body{font-size:14px;}
.tableWrap table tbody th{background-color: #eff5ff;}
.intro							{ text-align:center;}
.intro .tit						{ font-size:2.75em; font-weight:700; letter-spacing:-.01em; color:#000}
.intro .tit .first				{ position:relative; color:#426f90;}
.intro .tit .first:before		{ position:absolute; bottom:.3em; left:.25em; width:6.5em; height:.4em; background:#e5eefc; z-index:-1; content:""}
.intro .tit .grey				{ color:#abb7c5;}
.intro .stit					{ max-width:1010px; margin:0 auto 2em; padding-bottom:1.5em; font-size:1.51em; font-weight:300; letter-spacing:-.03em; color:#6a6a6a; line-height:1; word-break:keep-all; border-bottom:1px solid #e8eceb}
.intro .bracket				{ position:relative; max-width:768px ;width:92%; margin:2em auto .5em; padding:.3em 1em; font-weight:500; font-size:2.41em; color:#181818; letter-spacing:-.03em; line-height:1.3; word-break:keep-all; border:5px solid #e7ebed; border-radius:20px; z-index:2}
.intro .bracket:before		{ position:absolute; top:-10%; left:5%; width:90%; height:120%; background:#fff; z-index:-1; content:""}
.intro .object				{ position:relative; max-width:1050px; width:92%; margin:0 auto; padding:4.3em 1em 4em; background:#fff; border:3px solid #0067b2; border-radius:8.5em}
.intro .object>strong		{ position:absolute; top:-1px; left:50%; width:170px; margin-left:-85px; font-size:1.72em; color:#fff; line-height:1.2; background:#0067b2; border-radius:0 0 1em 1em}
.intro .object ol			{ max-width:768px; width:90%; margin:0 auto; text-align:left; counter-reset:number;}
.intro .object ol li			{ position:relative; padding-left:2.5em; margin:.2em 0;  font-size:1.41em; font-weight:300; letter-spacing:-.07em; color:#181818; counter-increment:number;}
.intro .object ol li:before	{ position:absolute; left:0; color:#b0b7bd; font-size:1.07em; font-weight:700; content:"0"counter(number)"_";}
.intro .object ol li strong	{ color:#0067b2}
.intro .img					{ position:relative; padding:3em 1em;}
.intro .img:before			{ position:absolute; top:-10%; left:0; height:90%; width:100%; background:#f9f9f9; z-index:-1; content:""}
.intro .nice li				{ position:relative; display:inline-block; *display:inline; width:20%; margin:.5em 2%; font-size:1.51em; border-width:0 1px 1px 4px; border-style:solid; border-radius:25px; box-shadow:0 0 8px rgba(174,174,174,.4)}
.intro .nice li:before		{ position:absolute; top:-.5em; left:-.9em;width: 80px; padding:.15em 0;font-size: 2em; font-weight:700; text-align:center; background:#fff; border-radius:25px;box-shadow: 5px 5px 5px rgba(174,174,174,.2);}
.intro .nice li dt				{ padding:.5em 0 .5em 1.3em; font-weight:300; color:#fff; letter-spacing:.005em; border-radius:25px 25px 0 0;font-size: 16px;}
.intro .nice li dt strong{color:#fff;margin-top: -12px;display: inline-block;}
.intro .nice li dd			{ padding:1.3em .8em; color:#424242; letter-spacing:-.06em; line-height:1.2;font-size: 18px;}	

.intro .nice li.n				{ border-color:#21c1bd}
.intro .nice li.n:before		{ color:#21c1bd; content:"N"}
.intro .nice li.n dt			{ background:#21c1bd}

.intro .nice li.i				{ border-color:#1a7dc6}
.intro .nice li.i:before		{ color:#1a7dc6; content:"I"}
.intro .nice li.i dt			{ background:#1a7dc6}

.intro .nice li.c				{ border-color:#6d6ec4}
.intro .nice li.c:before		{ color:#6d6ec4; content:"C"}
.intro .nice li.c dt			{ background:#6d6ec4}

.intro .nice li.e				{ border-color:#3c5e77}
.intro .nice li.e:before		{ color:#3c5e77; content:"E"}
.intro .nice li.e dt			{ background:#3c5e77}

@media all and (max-width:1300px) {
  .intro .nice li				{ font-size:1.3em}
  .intro .nice li:before		{ left:-1em; width:70px; }
}
@media all and (max-width:900px) {
  .intro .tit						{ margin-bottom:.5em; line-height:1.1;}
  .intro .tit .grey				{ display:block}
  .intro .bracket br			{ display:none}
  .intro .nice li				{ width:40%; margin:1em 3%;}
}
@media all and (max-width:700px) {
  .intro .tit						{ font-size:2.5em; }
  .intro .stit					{ font-size:1.2em; line-height:1.3}
  .intro .bracket				{ font-size:2em; padding:.3em .5em}
  .intro .object				{ padding:3em .5em 2.5em; border-radius:3em}
  .intro .object>strong		{ font-size:1.5em;}
  .intro .object ol li			{ padding-left:2em; font-size:1.3em;}
}
@media all and (max-width:500px) {
  .intro .tit						{ font-size:2em; }
  .intro .bracket				{ font-size:1.8em;}
  .intro .img					{ padding:2em 1em 1em}
  .intro .nice li				{ width:45%; margin: 1em 1.5%; font-size:1.15em}
  .intro .nice li:before		{ width:50px; padding:0; font-size:28px; line-height:50px; }
  .intro .nice li dt				{ padding:.5em 0 .5em .7em}
}
@media all and (max-width:360px) {
  .intro .nice li:before		{ display:none }
  .intro .nice li dt				{ padding:.5em}
}

.busi_info								{ margin-bottom:4em}	

.item .txt									{ float:left; width:37%; margin-right:5%; padding-top:11%}
.item .img								{ float:right; width:58%; padding:1.5em; text-align:center; background:#fff;}
.item_process							{ margin:.5em 0 5em; list-style-type:none; counter-reset:number; }
.item_process>li						{ float:left; position:relative; width:19%; counter-increment:number; margin-top:1em; word-break:keep-all}
.item_process>li:before				{ content:"0"counter(number); position:absolute; top:0; left:3%; font-weight:500; font-size:2em; color:#4397e5; line-height:1.4; border-bottom:3px solid }
.item_process>li+li					{ margin-left:1.25%}
.item_process li strong				{ display:block; width:94%; margin:0 auto .5em;padding: 10px 0 5px 45px; font-weight:500;font-size: 17px; color:#181818; letter-spacing:-.06em; background:url(/img/content/bg_program01.png) no-repeat 100% 50%; border-bottom:3px solid #f4f5f5}
.item_process li ul						{ min-height:8.5em; padding:1.5em 2em; background:#f4f5f5; border-radius:15px}
.item_process li ul	li					{ position:relative; padding-left:.7em;font-size: 14px; color:#181818;}
.item_process li ul	li:before			{ position:absolute; top:.7em; left:0; width:.3em; height:1px; background:#4397e5; content:""}

.point .img_area						{ margin-top:1em; padding:3em 1.5em; background-image:url(/img/content/bg_program02.jpg); background-repeat:no-repeat; background-position:50%; background-size:cover}
.point>p									{ margin-top:.4em; text-align:center; font-size:1.66em; color:#181818; letter-spacing:-.06em; line-height:1.3; word-break:keep-all}

@media all and (max-width:1024px) {
  .item_process li ul						{ padding:1.5em;}
  .item_process>li						{ width:32.5%;}
  .item_process>li:nth-child(4)		{ margin-left:0}
}
@media all and (max-width:900px) {
  .item .txt									{ float:none; width:100%; margin:0 0 1.5em; padding-top:0}
  .item .img								{ float:none; width:100%}
}
@media all and (max-width:630px) {
  .item_process li ul						{ min-height:9em; padding:1em;}
  .item_process li ul li					{ font-size:1.1em}
  .item_process>li:before				{ font-size:1.8em; line-height:1.4; }
  .item_process li strong				{ font-size:1.5em; }
}
@media all and (max-width:500px) {
  .item_process>li						{ width:48.5%;}
  .item_process>li:nth-child(4)		{ margin-left:1.5%}
  .item_process>li:nth-child(5)		{ margin-left:0}
  .item_process>li:before				{ font-size:1.6em; line-height:1.46; }
  .item_process li ul li					{ margin:.1em 0; line-height:1.3}
  .item_process li strong				{ padding-left:1.3em; font-weight:500; font-size:1.4em; }
}
@media all and (max-width:365px) {
  .item_process li ul						{ min-height:10em;}
}

.busi_info								{ margin-bottom:4em}	

.invest							{ margin-bottom:30px; overflow:hidden; }
.invest li							{ position:relative; float:left; width:22.7%; padding:1em;font-size: 16px; font-weight:500; color:#181818; background:#fff; border:3px solid #0067b2; border-radius:20px;box-shadow: 0 0 10px rgba(0,0,0,.1);box-sizing: border-box;height: 80px;}
.invest li+li						{ margin-left:3%}
.invest li:before					{ position:absolute;right: -15%; top:30%; width:76px; height:31px; background:url(../../images/bg_marketing_arrow.png) no-repeat 100% 0; content:""}
.invest li:last-child:before	{ display:none}
.invest li span					{padding: 0 20px 0 55px;line-height: 1.2; background:no-repeat 0 50%;height: 45px;display: table-cell;vertical-align: middle; background-size: 45px;}
.invest li:nth-child(1) span	{ background-image:url(../../images/bg_invest01.png)}
.invest li:nth-child(2) span	{ background-image:url(../../images/bg_invest02.png)}
.invest li:nth-child(3) span	{ background-image:url(../../images/bg_invest03.png)}
.invest li:nth-child(4) span	{ background-image:url(../../images/bg_invest04.png)}

@media all and (max-width:1230px) {
  .invest li span					{ padding:0; background:none !important;}
  .invest li:before					{ right:-20%; z-index:1 }
}
@media all and (max-width:900px) {
  .invest li							{ width:48%; margin-bottom:1% }
  .invest li+li						{ margin-left:3%}
  .invest li:nth-child(3)			{ margin-left:0}
  .invest li:before					{ right:-9%; width:30px;}
  .invest li span					{ line-height:1.3;}
}
@media all and (max-width:500px) {
  .invest							{ padding:2em 1.3em}
  .invest li							{ padding:.5em .4em; font-size:1.1em; word-break:keep-all}
  .invest li:before					{ right:-12%; width:25px; background-size:150%;}
}

.program								{ margin-top:1.5em}
.program>dl							{ float:left; border-bottom:1px solid #181818}
.program>dl dt						{ padding:.8em; font-size:1.3em; font-weight:700; color:#fff; text-align:center; }
.program>dl:first-child dt			{ background:#0067b2 }
.program>dl:nth-child(2) dt		{ background:#32b5b8 }
.program>dl:nth-child(3) dt		{ background:#ffb930 }
.program>dl:nth-child(4) dt		{ background:#5b5b9f }
.program>dl dd						{ padding:2em 2.5em;}
.program>dl+dl dd					{ border-left:1px solid #e1e1e1}
.program>dl dd .dot li				{ position:relative; margin:.1em 0; padding-left:10px; font-size:1.15em; word-break:keep-all}
.program>dl dd .dot li:before		{ position:absolute; left:0; top:.6em; width:3px; height:3px; border:solid #5a5a5a; border-width:0 1px 1px 0; transform:rotate(-45deg); content:""}

.program.third>dl						{ width:33.33%; }
.program.third>dl dd					{ height:12em }
.program.second>dl						{ width:50%; }
.program.second>dl:nth-child(3) dd	{ border-left:0}


@media all and (max-width:1200px) {
  .program.third>dl dd					{ height:14em }
}
@media all and (max-width:950px) {
  .program>dl dt						{ padding:.6em}
  .program>dl dd						{ padding:1.2em; }
  .program.second>dl dd				{ height:10.3em }
}
@media all and (max-width:730px) {
  .program>dl							{ width:100% !important; }
  .program>dl dt						{ font-size:1.25em}
  .program>dl dd						{ height:auto !important}
  .program>dl+dl dd					{ border-left:0}
}


.marketing									{ margin-top:1.5em; padding-left:1em;}
.marketing li								{ float:left; position:relative;width: 27.3%; padding-right:5%; margin:0 1% 1% 0; text-align:center;}
.marketing li:before						{ position:absolute; right:0; top:50%; width:76px; height:31px; background:url(../../images/bg_marketing_arrow.png) no-repeat 100% 0; z-index:-1; content:""}
.marketing li:last-child:before			{ display:none;}
.marketing li strong						{ display:block;font-size: 18px; font-weight:700; color:#fff; border-radius:20px 20px 0 0;padding: 20px 0 45px;}
.marketing li:nth-child(1) strong		{ background:#40c9c6 }
.marketing li:nth-child(2) strong		{ background:#3eaac4; background:-webkit-linear-gradient(left, #3fbec6, #3c94c4); background:-o-linear-gradient(right, #3fbec6, #3c94c4); background:-moz-linear-gradient(right, #3fbec6, #3c94c4); background:linear-gradient(to right, #3fbec6, #3c94c4);}
.marketing li:nth-child(3) strong		{ background:#3a78c2; background:-webkit-linear-gradient(left, #3b8ac3, #3975c2); background:-o-linear-gradient(right, #3b8ac3, #3975c2); background:-moz-linear-gradient(right, #3b8ac3, #3975c2); background:linear-gradient(to right, #3b8ac3, #3975c2);}
.marketing li:nth-child(4) strong		{ background:#3975c2; background:-webkit-linear-gradient(left, #3975c2, #3971b8); background:-o-linear-gradient(right, #3975c2, #3971b8); background:-moz-linear-gradient(right, #3975c2, #3971b8); background:linear-gradient(to right, #3b8ac3, #3975c2)}
.marketing li:nth-child(5) strong		{ background:#3c6193; background:-webkit-linear-gradient(left, #3a6bab, #3e5679); background:-o-linear-gradient(right, #3a6bab, #3e5679); background:-moz-linear-gradient(right, #3a6bab, #3e5679); background:linear-gradient(to right, #3a6bab, #3e5679) }
.marketing li:nth-child(6) strong		{ background:#3e5474; }
.marketing li p								{ position:relative; margin-top:-28px; padding:1.5em;font-size: 16px; color:#181818; line-height:1.2; background:#fff; border-radius:20px;box-shadow: 0 0 10px rgba(0,0,0,.1); z-index:1}