@charset "utf-8";


/* visual */
#mainVisual{position:relative;width:980px;height:360px;background:url('../img/main/main_visual04.jpg') no-repeat 0 0}
/*#mainVisual h2{position:absolute;left:10px;top:12px;display:block;padding:60px 0 11px 17px;font-size:400%;color:#202125;font-weight:bold;letter-spacing:0.02em}*/
#mainVisual h2{position:relative;left:25px;top:70px;display:block;padding:0;font-size:450%;color:#202020;font-weight:bold;letter-spacing:-0.02em} /*2014-12-04 Edit */
#mainVisual h2 em{padding-left:6px;font-size:24%;color:#6e717a;font-weight:normal;line-height:580%}
.inquiry{position:absolute;left:13px;top:160px}
.inquiry p.rep{width:310px;height:40px;padding-left:57px;font-size:180%;color:#fff;font-weight:bold;letter-spacing:0.01em;line-height:40px;background:url('../img/main/inquiry_bg.png') no-repeat 0 0}
.inquiry p.rep strong{font-size:110%}
.inquiry p{padding-left:58px;font-size:130%;color:#3795e4;font-weight:bold;letter-spacing:0.1em;line-height:280%}


/* notice */
#mainNotice{position:relative;float:left;width:326px;height:181px;border-left:1px solid #cbcbcb;border-top:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;background-color:#fff}
#mainNotice h2{margin:24px 0 0 24px;font-size:180%;color:#1c2cba;font-weight:bold}/* 웹접근성 명도대비 9.91:1 — AAA(7:1) 충족 (기존 #1c8be4 3.58:1) */
#mainNotice ul{margin:22px 24px 0 24px}
#mainNotice li:after{content:"";display:block;clear:both}
#mainNotice li{line-height:200%}
#mainNotice li a{float:left;display:block;width:170px;height:22px;margin-bottom:2px;font-size:110%;color:#333;letter-spacing:-0.05em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#mainNotice li a:hover,#mainNotice li a:focus,#mainNotice li a:active{color:#333;text-decoration:underline}
#mainNotice li em{float:right;display:block;width:77px;text-align:right;font-size:90%;color:#585858;letter-spacing:-0.02em}/* 명도대비 AAA 7.11:1 (기존 #666 5.74:1) */
#mainNotice .noticeNew{float:left;margin:6px 0 0 6px}
#mainNotice .noticeMore{position:absolute;right:24px;top:22px}


/* research */
#mainResearch{position:relative;float:left;width:326px;height:181px;border-left:1px solid #cbcbcb;border-top:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;background-color:#fff}
#mainResearch h2{margin:24px 0 0 24px;font-size:180%;color:#00501b;font-weight:bold}/* 웹접근성 명도대비 9.71:1 — AAA(7:1) 충족 (기존 #1da33f 3.30:1) */
#mainResearch ul{margin:22px 24px 0 24px}
#mainResearch li:after{content:"";display:block;clear:both}
#mainResearch li{line-height:200%}
#mainResearch li a{float:left;display:block;width:170px;height:22px;margin-bottom:2px;font-size:110%;color:#333;letter-spacing:-0.05em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#mainResearch li a:hover,#mainResearch li a:focus,#mainResearch li a:active{color:#333;text-decoration:underline}
#mainResearch li em{float:right;display:block;width:77px;text-align:right;font-size:90%;color:#585858;letter-spacing:-0.02em}/* 명도대비 AAA 7.11:1 (기존 #666 5.74:1) */
#mainResearch .researchNew{float:left;margin:6px 0 0 6px}
#mainResearch .researchMore{position:absolute;right:24px;top:22px}


/* bxslider */
#mainSlider{position:relative;float:left;width:325px;height:183px;background-color:#cbcbcb}
#mainSlider #sliderWrap{margin:1px;width:324px;height:181px}
#mainSlider .bx-wrapper{margin:0}
#mainSlider .bx-wrapper .bx-viewport{box-shadow:0 0 0 #fff;border:none;left:0}
#mainSlider .bx-wrapper .bx-pager{width:100%;text-align:center;bottom:-1px;padding-top:0}/* bxSlider 기본값 padding-top:20px 를 제거한다. 페이저 상자는 bottom 으로 아래가 고정돼 있어 점 위치는 그대로이고, 투명한 패딩 20px 이 배너 링크 위를 덮어 클릭을 가로채던 것만 사라진다 */
#mainSlider .bx-wrapper .bx-controls-auto{bottom:7px;right:4px;z-index:5}/* 웹접근성 조작 가능: 확대된 활성화 영역이 슬라이더 영역 밖으로 잘리지 않도록 */
/* [Web Accessibility] item 3 : 현재 슬라이드를 색상만이 아니라 모양(도넛)으로도 구분
   [Web Accessibility] item 12 : 점은 ::before 로 그리고 a 상자만 24x24 로 키워 활성화 영역을 확보한다.
   a 에 직접 padding·border 를 주면 테두리가 점이 아니라 24x24 상자에 그려져 큰 네모로 보인다(실제 발생). */
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a{position:relative;box-sizing:border-box;width:24px;height:24px;margin:0 1px;padding:0;border:0;border-radius:0;background:none}
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a:before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;box-sizing:border-box;border:2px solid #767676;border-radius:5px;background-color:#767676}
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a:hover:before{border-color:#4a4a4a;background-color:#4a4a4a}
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a.active:before{border-color:#333;background-color:#fff}
/* [Web Accessibility] item 9 : override bxslider outline:0 for focus visibility */
/* [Web Accessibility] item 9-2 : 슬라이드 링크 초점 표시
   ① a 가 인라인이라(자식 img 만 block) 초점링이 그려질 상자가 없었다 → block 으로 바꾼다.
      img 가 이미 display:block 으로 324x181 을 채우므로 시각적 변화는 없다.
   ② 링크 상자가 .bx-viewport(overflow:hidden) 와 정확히 같은 324x181 이라 바깥쪽 초점링은 4면 모두 잘린다
      → 음수 offset 으로 안쪽에 그린다.
   ③ 배너가 사진/컬러라 파란 링만으로는 대비가 약할 수 있어 안쪽에 흰 테두리를 겹친다. */
#bxslider a{display:block;position:relative}
#bxslider a:focus{outline:3px solid #0b5fa4;outline-offset:-3px}
#bxslider a:focus:after{content:"";position:absolute;left:3px;top:3px;right:3px;bottom:3px;border:2px solid #fff;pointer-events:none}
#mainSlider .bx-wrapper .bx-controls-direction a:focus,
#mainSlider .bx-wrapper .bx-controls-auto .bx-start:focus,
#mainSlider .bx-wrapper .bx-controls-auto .bx-stop:focus{outline:2px solid #0b5fa4;outline-offset:1px}
/* 페이저는 상자(24x24)가 아니라 점에 초점 표시를 그린다 — 작은 점 주위에 큰 네모가 뜨지 않도록 */
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a:focus{outline:0}
#mainSlider .bx-wrapper .bx-pager.bx-default-pager a:focus:before{outline:2px solid #0b5fa4;outline-offset:2px}
#mainSlider .bx-wrapper .bx-controls-auto .bx-start,#mainSlider .bx-wrapper .bx-controls-auto .bx-stop,#mainSlider .bx-wrapper .bx-prev,#mainSlider .bx-wrapper .bx-next{background-image:url('../img/main/controls.png')}
#mainSlider .bx-wrapper .bx-prev{left:0}
#mainSlider .bx-wrapper .bx-next{right:0}
/* [Web Accessibility] item 10·12 : 시작/정지(10x11) 컨트롤의 활성화 영역 확대
   (페이저는 위쪽 .bx-default-pager a 규칙에서 24x24 로 처리한다)
   시작/정지는 세로로 붙어 있어 겹침이 생기므로 오버레이 대신 padding 으로 실제 상자를 키우고, background-origin 으로 스프라이트 위치를 유지한다 */
#mainSlider .bx-wrapper .bx-controls-auto .bx-start,#mainSlider .bx-wrapper .bx-controls-auto .bx-stop{padding:7px;margin:0;background-origin:content-box;background-clip:content-box}

/* #timediv */
#timediv {
width:300px;
height:50px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:300px;
border:3px double #eff4fb;
background-color:#afc8e9;
z-index: 999;
padding: 10px;
}