@charset "euc-kr";

/****************
È­¸é¸í           : ¸ÞÀÎ
ÃÖÃÊ ÀÛ¾÷ÀÚ      : ÀÌÁ¾Çö
¸¶Áö¸· ¼öÁ¤ÀÚ    : 
¸¶Áö¸· ¼öÁ¤ ÀÏÀÚ : 
¸¶Áö¸· ¼öÁ¤ ¶óÀÎ : {}
****************/
.main #container {background-color:#f7f7f7; padding:21px 0 60px;}
.main #header .siteSupport > div > .box {box-shadow:3px 8px 13px 0px #636363;}

.main h2 {font-size:26px; color:#333333; font-family:'FuturaStd'; margin-bottom:13px; letter-spacing:-0.5px;}
.main .mainVisual {margin-bottom:30px; text-align:center;}
.main .mainVisual ul {overflow:hidden; text-align:left;}
.main .mainVisual ul li {width:25%; height:400px; float:left; position:relative;}
.main .mainVisual ul li.item1 {background:url('../images/main/main_visual_01.png') no-repeat right bottom; background-color:#fb8996}
.main .mainVisual ul li.item2 {background:url('../images/main/main_visual_02.png') no-repeat right bottom; background-color:#ffb14d}
.main .mainVisual ul li.item3 {background:url('../images/main/main_visual_03.png') no-repeat right bottom; background-color:#51ce8d}
.main .mainVisual ul li.item3 .detail a:hover {color:#048236;}
.main .mainVisual ul li.item4 {background:url('../images/main/main_visual_04.png') no-repeat right bottom; background-color:#6cb1ed}
.main .mainVisual ul li.item4 .detail a:hover {color:#1769b1;}
.main .mainVisual ul li > div {padding:22px 24px 24px 23px;}
.main .mainVisual ul li > div .number {position:absolute; top:12px; right:21px; font-family:'FuturaStd'; font-size:48px; color:#fff;}
.main .mainVisual ul li > div dl {margin-bottom:17px;}
.main .mainVisual ul li > div dl dt {font-size:20px; color:#fff; margin-bottom:14px; font-family:'ngb'; letter-spacing:-0.7px;}
.main .mainVisual ul li > div dl dd {min-height:96px; line-height:24px; font-size:14px; color:#fefefe; letter-spacing:-0.7px;}
.main .mainVisual ul li > div .detail a {height:36px; line-height:32px; display:inline-block; padding:0 13px 0 12px; border:2px solid #fff; text-align:center; font-size:16px; color:#ffffff; font-family:'ngb'; letter-spacing:-0.8px;}
.main .mainVisual ul li > div .detail a:hover {background-color:#fff; color:#cf2d2d;}
.main .mainQuickList {background-color:#fff; padding:20px 0; position:relative; margin-bottom:30px;}
.main .mainQuickList ul {overflow:hidden;}
.main .mainQuickList ul li {width:12.5%; float:left; position:relative;}
.main .mainQuickList ul li:before {width:1px; height:80px; background-color:#f0f0f0; content:""; display:block; position:absolute; top:0; left:0;}
.main .mainQuickList ul li:first-child:before {display:none;}
.main .mainQuickList ul li a {display:block; text-align:center;}
.main .mainQuickList ul li a:hover p {color:#ca231a}
.main .mainQuickList ul li a p {font-size:14px; color:#333333; line-height:18px; margin-top:8px; font-family:'ngb'; letter-spacing:-0.5px;}
.main .mainService {overflow:hidden;}
.main .mainService > div {width:550px; overflow:hidden; margin-left:20px}
.main .mainService > div:first-child {margin:0 !important;}
.main .mainService .item {width:265px; height:210px; background-color:#fff; padding:22px 24px 24px; position:relative; float:left;}
.main .mainService .item dl dt {font-size:20px; color:#333333; font-family:'ngb'; letter-spacing:-0.9px; margin-bottom:14px;}
.main .mainService .item dl dd {font-size:14px; color:#666666; line-height:24px; letter-spacing:-0.7px;}
.main .mainService .item .btnSection a {width:100%; height:36px; line-height:35px; display:block; color:#fff; text-align:center; font-family:'ngb'; letter-spacing:-0.5px; font-size:14px; border-radius:4px;}
.main .mainService .item .detail {display:inline-block; position:absolute; top:22px; right:24px;}
.main .mainService .item .detail img {width:24px; height:24px;}
.main .mainService .item .mainNewsList {padding-right:15px;}
.main .mainService .item .mainNewsList li {position:relative; padding-left:7px; margin-top:2px;}
.main .mainService .item .mainNewsList li:first-child {margin-top:0;}
.main .mainService .item .mainNewsList li:before {font-size:14px; color:#666666; content:"-"; display:block; position:absolute; top:0px; left:0px;}
.main .mainService .item .mainNewsList li a {font-size:14px; color:#666666; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main .mainService .item.v1 {margin-right:20px;}
.main .mainService .item.v1 .btnSection {margin-top:30px; position:relative; padding-right:66px;}
.main .mainService .item.v1 .btnSection input {width:100%; height:36px;}
.main .mainService .item.v1 .btnSection a {width:60px; background-color:#666666; position:absolute; top:0; right:0;}
.main .mainService .item.v1 .btnSection a:hover,
.main .mainService .item.v1 .btnSection a:focus {background-color:#4f4f4f;}
.main .mainService .item.v3 {margin:20px 20px 0 0;}
.main .mainService .item.v3 .btnSection {margin-top:20px; padding-top:23px;}
.main .mainService .item.v3 .btnSection a {background-color:#db3128;}
.main .mainService .item.v3 .btnSection a:hover,
.main .mainService .item.v3 .btnSection a:focus {background-color:#ca231a;}
.main .mainService .item.v4 {margin-top:19px;}
.main .mainService .item.v4 dt {margin-bottom:20px;}
.main .mainService .item.v4 dd {text-align:center;}
.main .mainService .leftArea {float:left; margin-right:20px}
.main .mainService .leftArea .item  {float:none;}
.main .mainService .leftArea .mainBanner {width:265px; height:210px; margin-top:20px; position:relative;}
.main .mainService .leftArea .mainBanner li a {display:block;}
.main .mainService .leftArea .mainBanner li img {width:265px; height:210px;}
.main .mainService .leftArea .mainBanner .bx-has-pager {width:100%; padding:0 22px; position:absolute; bottom:24px; overflow:hidden;}
.main .mainService .leftArea .mainBanner .bx-pager {height:4px; float:right; position:relative; top:20px; overflow:hidden;}
.main .mainService .leftArea .mainBanner .bx-controls-auto {float:left; overflow:hidden; margin-right:47px;}
.main .mainService .leftArea .mainBanner .bx-controls-auto > div {float:left;}
.main .mainService .leftArea .mainBanner .bx-controls-auto a {width:24px; height:24px; display:block; text-indent:-9999px;}
.main .mainService .leftArea .mainBanner .bx-controls-auto a.bx-start {background:url('../images/main/btn_play.gif') no-repeat; margin-right:4px;}
.main .mainService .leftArea .mainBanner .bx-controls-auto a.bx-stop {background:url('../images/main/btn_pause.gif') no-repeat;}
.main .mainService .leftArea .mainBanner .bx-pager > div {height:4px; float:left; margin-left:4px;}
.main .mainService .leftArea .mainBanner .bx-pager > div:first-child {margin-left:0;}
.main .mainService .leftArea .mainBanner .bx-pager > div a {width:12px; height:4px; display:inline-block; text-indent:-9999px; background:url('../images/main/main_pager.png') no-repeat; background-size:24px 4px; vertical-align:top;}
.main .mainService .leftArea .mainBanner .bx-pager > div a.active {background:url('../images/main/main_pager_on.png') no-repeat}
.main .mainService .rightArea {float:right;}
.main .mainService .rightArea .item.magazine {height:440px}
.main .mainService .rightArea .item.magazine .tit {font-size:14px; color:#333333; font-family:'ngb'; letter-spacing:-0.8px; margin-bottom:17px; text-align:left;}
.main .mainService .rightArea .item.magazine .tit span {color:#d81d05; font-family:'ngb'; letter-spacing:-0.5px;}
.main .mainService .rightArea .item.magazine dl dd img {width:217px; height:263px;}
.main .mainService .rightArea .item.magazine .btnSection {overflow:hidden; margin-top:21px; text-align:center;}
.main .mainService .rightArea .item.magazine .btnSection a {display:block; float:left; width:auto; height:32px; line-height:32px; padding:0; background-color:#666; color:#fff; font-size:14px;}
.main .mainService .rightArea .item.magazine .btnSection a:first-child {width:88px;}
.main .mainService .rightArea .item.magazine .btnSection a:last-child {width:119px; float:right;}
.main .mainService .rightArea .item.magazine .btnSection a:hover,
.main .mainService .rightArea .item.magazine .btnSection a:focus {background-color:#4f4f4f;}

/* 2017-06-02 ½Å±Ô Ãß°¡ */
.mainHealthNotice {position:relative; margin:0; padding:0;}
.mainHealthNotice .date {position: absolute; right:0; top:-7px; font-family:'FuturaStd_m'; font-size: 12px; line-height:13px; color:#333; letter-spacing:0;}
.mainHealthNotice .standard {position: absolute; right:0; top:10px; font-size: 11px; line-height:12px; color:#666;}
.mainHealthNotice .graph {width:150px; height:75px;  margin:0 auto; padding:0; background-position:0 0; background-repeat: no-repeat; background-size:100% auto;}
.mainHealthNotice .graph .dis-table {display:table; width:100%; table-layout: fixed; border:0;}
.mainHealthNotice .graph .dis-table .dis-table-td {display:table-cell; width:100%; height:75px; vertical-align:bottom;}
.mainHealthNotice .graph em {display:block; margin:0; padding:0 0 10px 0; text-align:center; font-size:14px; line-height:15px; font-family: 'ngb';}
.mainHealthNotice .graph span {display:block; margin:-8px 0 0 0; padding:0 0 4px 0; text-align:center; font-family:'FuturaStd'; font-size:12px; line-height:13px;}

.mainHealthNotice .graph.bg01 {background-image:url('../images/bg_mainHealthNotice01.png');}
.mainHealthNotice .graph.bg02 {background-image:url('../images/bg_mainHealthNotice02.png');}
.mainHealthNotice .graph.bg03 {background-image:url('../images/bg_mainHealthNotice03.png');}
.mainHealthNotice .graph.bg04 {background-image:url('../images/bg_mainHealthNotice04.png');}
.mainHealthNotice .graph.bg01 em {color:#1d9bb7;}
.mainHealthNotice .graph.bg02 em {color:#387c0b;}
.mainHealthNotice .graph.bg03 em {color:#e35000;}
.mainHealthNotice .graph.bg04 em {color:#d92b37;}

.mainHealthNotice .tab {margin:15px 0 0 0; padding:0; border:1px solid #ddd; border-radius:3px; background-color:#fafafa;}
.mainHealthNotice .tab:after {display:block; content:""; clear:both}
.mainHealthNotice .tab > a {display:block; float:left; width:20%; height:100%; margin:-1px 0; line-height:32px; font-family:'ngb'; color:#666; text-align: center; font-size:12px; border-left:1px solid #ddd; box-sizing:border-box;}
.mainHealthNotice .tab > a:first-child {border-left:0;}
.mainHealthNotice .tab > a.active {}
.mainHealthNotice .tab > a.active > span {display:block; color:#fff; background-color:#00a5b4;}
.mainHealthNotice .tab > a:first-child > span {margin-left:-1px; border-radius:3px 0 0 3px;}
.mainHealthNotice .tab > a:last-child > span {margin-right:-1px; border-radius:0 3px 3px 0;}

@media (max-width: 1160px){
	.main #container {padding-bottom:40px;}
	.main .mainVisual ul li {width:50%; height:300px}
	.main .mainVisual ul li > div dl dd {min-height:inherit}
	.main .mainQuickList {padding:20px 40px}
	.main .mainQuickList .bx-controls a {width:41px; height:120px; display:inline-block; text-indent:-9999px; position:absolute; top:0; background-color:#fff !important;}
	.main .mainQuickList .bx-controls .bx-prev {border-right:1px solid #f7f7f7; background:url('../images/main/arrow_main_quick_l.gif') no-repeat center; left:0;}
	.main .mainQuickList .bx-controls .bx-next {border-left:1px solid #f7f7f7; background:url('../images/main/arrow_main_quick_r.gif') no-repeat center; right:0;}
	
	.main .mainService > div {width:100%; float:none; margin:20px 0 0 0;}
	.main .mainService .item {width:49%;}
	.main .mainService .item.v1 {margin-right:2%}
	.main .mainService .item.v3 {margin:20px 2% 0 0;}
	.main .mainService .leftArea {width:49%; margin-right:2%}
	.main .mainService .leftArea .item {width:100%;}
	.main .mainService .leftArea .mainBanner {width:100%; height:auto;}
	.main .mainService .leftArea .mainBanner li img {width:100% !important; height:auto !important;}
	.main .mainService .leftArea .mainBanner .bx-has-pager {width:100%; left:0; padding:0 24px;}
	.main .mainService .rightArea {width:49%; float:left;}
	.main .mainService .rightArea .item.magazine {width:100%; height:100%;}
	.main .mainService .rightArea .item.magazine dl dd {text-align:center;}
	.main .mainService .rightArea .item.magazine dl dd img {min-width:217px; width:82%; height:auto;}
	.main .mainService .rightArea .item.magazine .btnSection {text-align:center;}
	.main .mainService .rightArea .item.magazine .btnSection a {display:inline-block; float:none !important; width:45% !important;}
	.main .mainService .rightArea .item.magazine .btnSection a:first-child {margin-left:0;}
}
@media (max-width: 980px){
	.main .mainService .rightArea .item.magazine dl dd img {width:87%;}
}
@media (max-width: 767px){
	.main #container {padding:15px 0 30px;}
	.main #container #contents {padding:0;}

	.main h2 {padding:0 15px; font-size:20px}
	.main .mainVisual {margin-bottom:15px; height:340px; overflow:hidden;}
	.main .mainVisual ul li {height:340px;}
	.main .mainVisual ul li > div {padding:20px;}
	.main .mainVisual ul li > div dl dt {font-size:20px}
	.main .mainVisual ul li > div dl dd {min-height:88px; font-size:14px; line-height:22px;}
	.main .mainVisual .bx-has-pager {position:relative; bottom:32px;}
	.main .mainVisual .bx-pager > div {height:4px; display:inline; margin-left:8px;}
	.main .mainVisual .bx-pager > div:first-child {margin-left:0;}
	.main .mainVisual .bx-pager > div a {width:24px; height:4px; display:inline-block; text-indent:-9999px; background:url('../images/main/main_pager.png') no-repeat; background-size:24px 4px;}
	.main .mainVisual .bx-pager > div a.active {background:url('../images/main/main_pager_on.png') no-repeat}
	.main .mainQuickList {padding:12px 25px; margin-bottom:15px;}
	.main .mainQuickList ul li:before {height:70px; top:4px;}
	.main .mainQuickList ul li a p {font-size:12px; line-height:16px; margin-top:7px;}
	.main .mainQuickList .bx-controls a {width:26px; height:100px; background-size:12px 22px !important;}
	
	.main .mainService {padding:0 10px;}
	.main .mainService > div {margin-top:10px;}
	.main .mainService .item {width:100%; height:auto; margin:10px 0 0 !important; padding:15px;}
	.main .mainService .item:first-child {margin-top:0 !important;}
	.main .mainService .item dl dt {font-size:16px; margin-bottom:8px;}
	.main .mainService .item dl dd {font-size:12px; line-height:19px;}
	.main .mainService .item .detail {top:8px; right:15px;}
	.main .mainService .item .detail img {width:32px; height:32px;}
	.main .mainService .item .btnSection a {height:32px; line-height:32px; font-size:12px;}
	.main .mainService .item .mainNewsList {padding-right:40px;}
	.main .mainService .item .mainNewsList li a {font-size:12px;}
	.main .mainService .item.v1 dd {display:none;}
	.main .mainService .item.v1 .btnSection {margin-top:20px;}
	.main .mainService .item.v1 .btnSection input {height:32px; line-height:30px;}
	.main .mainService .item.v2:after, .main .mainService .item.v3:after {bottom:15px; right:15px;}
	.main .mainService .item.v2:after {width:39px; height:39px;}
	.main .mainService .item.v3 dt {margin-bottom:18px;}
	.main .mainService .item.v3 dd {overflow:hidden;}
	.main .mainService .item.v3 dd p {width:50%; float:left; padding-left:2%; margin-bottom:0 !important;}
	.main .mainService .item.v3 dd p:first-child {padding-left:0;}
	.main .mainService .item.v3 dd a {height:32px; line-height:30px; font-size:12px;}
	.main .mainService .item.v4 dd a {display:block;}
	.main .mainService .item.v4 dd a img {max-width:100%;}
	.main .mainService .leftArea,
	.main .mainService .rightArea {width:100%; float:none;}
	.main .mainService .leftArea {margin-bottom:10px;}
	.main .mainService .leftArea .mainBanner {margin-top:10px;}
	.main .mainService .leftArea .mainBanner .bx-has-pager {bottom:15px; padding:0 15px;}
	.main .mainService .rightArea .item.magazine .tit {font-size:12px; margin-bottom:13px;}
	.main .mainService .rightArea .item.magazine dl dd img {width:100%;}
	.main .mainService .rightArea .item.magazine .btnSection {margin-top:15px;}
	.main .mainService .rightArea .item.magazine .btnSection a {width:49% !important; font-size:12px;}
}