@charset "utf-8";

* {margin: 0; padding: 0; border: 0;}
ul {list-style: none;}
a {text-decoration: none;}
body {
 font-family: 'NanumSquare', sans-serif;
 	
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-size : 9pt;
/*	background-image: url(/img/bg/bg.gif);*/


scrollbar-face-color: #333333;
scrollbar-shadow-color: #FFFFFF; 
scrollbar-highlight-color: #c6c6c6;
scrollbar-3dlight-color: #000000; 
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #eeeeee;
scrollbar-arrow-color: #8bc0ff;
 
 }
html, body {height: 100%;}

.button1 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#c0c0c0)'; cursor:hand; border:1 ridge #ffffff; height:20; color:#000000; font-family:; font-size:9pt;} 


/* 최상단 헤더 */
header {width: 100%; height: 70px; position: fixed; top: 0; border-bottom: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.1); z-index: 99999;}
#header_container {width: 1600px; height: 70px; margin: auto;}
#header_container h1 {width: 220px; height: 45px; float: left; /*padding-top: 35px;*/ margin-top: 10px; margin-right: 100px; background: url(../imgs/web_logo_sub.png) no-repeat;}
#header_container h1 span {display: block; text-indent: -9999px;} /* IR기법 */
#header_container .lnb {float: left; padding-top: 22px;}
#header_container .lnb ul li {float: left; margin-right: 80px;}
#header_container .lnb ul li a {color: #fff; font-size: 20px; font-weight: bold;}
#header_container .gnb {float: right; padding-top: 25px;}
#header_container .gnb ul li {float: left; margin-left: 50px;}
#header_container .gnb ul li a {color: #fff; font-size: 17px; font-weight: bold; background-repeat: no-repeat;}
/* #header_container .gnb ul li a img {vertical-align: middle;} */
#header_container .gnb .gnb_inq {background-image: url(../img/ico_inquiry.png); padding-left: 20px;}
#header_container .gnb .gnb_lang {background-image: url(../img/ico_language.png), url(../img/ico_clampW_B.png);
                                  background-position: left center, right center;
                                  padding: 0 15px 0 25px;}
#header_container .gnb .gnb_shared {background-image: url(../img/ico_shared.png); padding: 0 0 5px 17px;}
#header_container .gnb .gnb_shared span,
#header_container .gnb .gnb_search span {display: block; text-indent: -9999px;}
#header_container .gnb .gnb_search {background-image: url(../img/ico_header_search.png); padding: 0 0 5px 23px;}
#header_container .gnb .gnb_m_menu {display: none;}


/* 섹션 공통 */
.section {width: 100%; height: 100%;}

/* 섹션 1(메인 비주얼 영역) */
#main_section01 {background: url(../imgs/main_visual_240820.jpg) no-repeat center / cover;}
#visual_container {width: 1400px; height: 450px; margin: auto; padding-top: 390px;}
#visual_container h2 {color: #fff; font-size: 40px; font-weight: 900; text-shadow: 2px 2px 2px rgba(0,0,0,.3); margin-bottom: 48px;}
#visual_container h3 {color: #fff; font-size: 22px; font-weight: 700; text-shadow: 2px 2px 2px rgba(0,0,0,.3); margin-bottom: 70px;}
#visual_container p {color: #fff; font-size: 24px; font-weight: 700; text-shadow: 2px 2px 2px rgba(0,0,0,.3); margin-bottom: 70px;}





/* 더보기 버튼 */
.more_btn {background: #fff; border: 2px solid #000; padding: 10px 20px; display: inline-block; color: #000; font-weight: bold; font-size: 17px; margin-bottom: 50px;}
/* .more_btn img {margin-left: 30px;} */
.more_btn::after {content: url(../img/ico_clampBk_R.png); margin-left: 30px;}

/* 슬라이드 페이지 내비게이션 */
.slide_page {color: #fff; font-weight: bold; font-size: 18px; margin: 0 35px;}


/* 섹션 공통 타이틀 */
.title {text-align: center;}
.title h2 {font-size: 50px; font-weight: 900;}
.title p {font-size: 24px; padding: 30px 0 60px; font-weight: 700;}




/* 섹션 2(검색 영역) */
#main_section02 {background: url(../imgs/bg_section1.jpg) no-repeat center / cover;}
#search_container {width: 1600px; margin: auto; padding-top: 250px;}
#search_container .title {color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,.5);}
.searchbox {width: 657px; height: 80px; margin: 35px auto 30px;}
.searchbox input {width: 560px; height: 80px; vertical-align: top; padding-left: 40px; box-sizing: border-box; font-size: 30px; font-family: 'NanumSquare', sans-serif; color: #999;}
.searchbox button {width: 97px; height: 80px; background: #fff;}
.hashtagbox {text-align: center;}
.hashtag {padding: 10px 20px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; color: #fff; font-weight: bold; font-size: 18px; display: inline-block;}
.hashtag:hover {background: #bb0841; border: 1px solid #bb0841;}
.faq {border-top: 1px solid rgba(255,255,255,.5); margin-top: 70px; padding-top: 60px; text-align: center;}
.faq h3 {color: #fff; font-size: 30px; margin-bottom: 35px;}
.faq_item {display: inline-block; background: #fff; padding: 40px; border-radius: 20px; font-size: 20px; font-weight: bold; margin: 0 10px; text-align: left; line-height: 1.6; position: relative;}
.faq_item strong {font-weight: 900;}
.faq_item::before {content: ""; display: block; width: 0; height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #fff;
    border-bottom: 20px solid transparent;
    position: absolute;
    left: 0;
    top: -4px;
}
#search_container .slide_nav {text-align: center; margin-top: 45px;}



/* 섹션 3(IT뉴스) */
#main_section03 {padding-top: 170px; box-sizing: border-box;}
.section03_content {width: 100%; height: 590px; background: url(../img/bg_section2_8.png) no-repeat center / cover; position: relative;}
.section03_nav {width: 640px; height: 590px; position: absolute; left: 100px; top: 0;}
.section03_nav button {width: 100%; height: 40px; background: rgba(0,0,0,.9); cursor: pointer; box-sizing: border-box;}
.section03_nav button.nav_prev {border-bottom: 1px solid rgba(255,255,255,.3);}
.section03_nav button.nav_next {border-top: 1px solid rgba(255,255,255,.3);}
.section03_nav ul li {width: 100%; height: 170px; background: rgba(0,0,0,.9); padding: 40px 60px; box-sizing: border-box; color: #fff;}
.section03_nav ul li p.it_news_title {font-size: 24px; line-height: 1.5; margin-bottom: 10px;}
.section03_nav ul li p.it_news_source {font-size: 18px; text-decoration: underline;}
.section03_nav ul li:nth-child(2) {background: rgba(187,8,65,.9); font-weight: 700;}

.section03_slide {width: 50%; /* width: calc(50% - 30px); */ height: 590px; position: absolute; left: 50%; top: 0; padding: 130px 30px 0 0; box-sizing: border-box; color: #fff;}
.section03_slide h2 {font-size: 70px; font-weight: 900;}
.section03_slide h3 {font-size: 30px; padding: 50px 0 30px;}
.section03_slide p {font-size: 20px; line-height: 1.5; margin-bottom: 35px;}
.section03_slide .more_btn {background: #000; color: #fff;}
.section03_slide .more_btn::after {content: url(../img/ico_clampW_R.png);}


/* 섹션 4(It신기술) */
#main_section04 {padding-top: 175px; box-sizing: border-box;}
.section04_slide {width: 100%; color: #fff;}
.section04_slide ul {overflow: hidden;}
.section04_slide ul li {width: 20%; float: left; position: relative;}
.section04_slide ul li img {width: 100%;}
.section04_slide ul li h4 {font-size: 30px; position: absolute; left: 30px; bottom: 120px; font-weight: 900;}
.section04_slide ul li p {font-size: 20px; position: absolute; left: 30px; bottom: 85px;}

.section04_nav {width: 270px; height: 6px; background: #e8e8e8; clear: both; margin: 60px auto 0; border-radius: 3px; overflow: hidden;}
.section04_nav .bar {width: 112px; height: 6px; background: #bb0841; border-radius: 3px;}


/* 섹션 5(전문지식) */
#main_section05 {background: url(../img/bg_section4.jpg) no-repeat center / cover; padding-top: 245px; box-sizing: border-box;}
#main_section05 .title {color: #fff;}
#main_section05 .title p {padding-bottom: 90px;}
.section05_content {width: 1080px; height: 400px; margin: auto;}
.section05_slide_img {width: 480px; height: 320px; float: left; margin: 0 50px 40px 0;}
.section05_slide_content {width: 550px; height: 320px; float: left; color: #fff;}
.section05_slide_content h4 {font-size: 30px; line-height: 1.4;}
.section05_slide_content p {font-size: 18px; line-height: 1.5; margin: 35px 0 65px;}
.section05_slide_content h6 {font-size: 18px;}
.section05_content .slide_nav {clear: both; text-align: center;}

/* 섹션 6(문의하기) */
#main_section06 {width: 100%; height: 332px; background: url(../img/img_inquiry_Bg.jpg) no-repeat center / cover; color: #fff; text-align: center; padding-top: 110px; box-sizing: border-box;}
#main_section06 h2 {font-size: 30px;}
#main_section06 h3 {font-size: 20px; margin: 20px 0 45px;}
#main_section06 a {font-size: 18px; color: #fff;}
#main_section06 a::after {content: url(../img/ico_contact.png); margin-left: 5px;}


footer {width: 1600px; height: 274px; margin: auto; position: relative; color: #666; font-size: 17px;}
.fnb1 {float: left; padding: 50px 0 30px;}
.fnb1 ul li {float: left; margin-right: 20px; font-size: 17px; font-weight: bold;}
.fnb1 ul li a {color: #000;}
.fnb1 h3 {font-size: 15px; padding:0 0 0 100px;}

.sns {width: 265px; height: 45px; position: absolute; right: 0; top: 102px;}
.sns ul li {width: 45px; height: 45px; float: left; margin-left: 10px;}
.sns ul li:first-child {margin-left: 0;}
.sns ul li a {width: 45px; height: 45px; display: block; border-radius: 50%; background-color: #eee; background-position: center; background-repeat: no-repeat;}
.sns_b {background-image: url(../img/ico_footer_b.png);}
.sns_b:hover {background-image: url(../img/ico_footer_b_on.png); background-color: #626262;}
.sns_f {background-image: url(../img/ico_footer_f.png);}
.sns_f:hover {background-image: url(../img/ico_footer_f_on.png); background-color: #1877f2;}
.sns_n {background-image: url(../img/ico_footer_n.png);}
.sns_n:hover {background-image: url(../img/ico_footer_n_on.png); background-color: #5aaf33;}
.sns_y {background-image: url(../img/ico_footer_y.png);}
.sns_y:hover {background-image: url(../img/ico_footer_y_on.png); background-color: #ea3223;}
.sns_in {background-image: url(../img/ico_footer_in.png);}
.sns_in:hover {background-image: url(../img/ico_footer_in_on.png); background-color: #0a66c2;}
.sns ul li a span {
    /* a태그에 hover했을 때 이미지 자체가 바뀌어야 하는 경우
    1. 이미지 태그나 백그라운드 이미지, 또는 스크립트를 사용하면 됩니다.
    2. 대체 방법으로 CSS만으로 처리할 수 있는 방법이 있음 -> a태그에 백그라운드로 이미지를 깔고 hover했을 때 백그라운드 이미지를 변경하면 됌!
    but, 이미지 태그는 alt속성을 이용해 이미지에 대한 설명을 작성할 수 있으나 백그라운드 이미지로 처리하면 비장애인의 눈으로는 이미지를 확인할 수 있지만 시각장애인에게는 아무것도 없는 빈 박스로 인식(스크린리더가 읽을 것이 없음)하기 때문에 이 부분을 읽지도 않고, 포커스도 잡히지 않음.
    그래서 해당 부분의 내용을 텍스트를 작성한 다음 실제로 눈에 보여지는 부분(이미지나 아이콘)만 볼 수 있게 하기 위해 텍스트를 어디 멀리 보내거나 글자를 안보이게 하는 등의 일종의 꼼수를 쓴다.
    [접근성 측면에서의 IR(Image Replacement)기법]
    이미지 : background, 배경 / 텍스트 : foreground, 전경 */

    /* 스크린리더가 읽지 못함 */
    /* width: 0; height: 0; font-size: 0; */
    /* opacity: 0; */
    /* visibility: hidden; */

    /* display: block; text-indent: -99999px; 많이 쓰는 방법 1 */
    position: absolute; top: -9999px; left: -9999px; /* 많이 쓰는 방법 2 */
}


.family {text-align: right; padding-top: 60px;}
.family select {width: 240px; height: 45px; border: 1px solid #999; padding: 0 30px; box-sizing: border-box; font-size: 18px; font-family: 'NanumSquare', sans-serif; color: #999;}

.fnb2 {clear: both;}
.fnb2 ul li {display: inline; border-right: 1px solid #d8d8d8; padding-right: 20px; margin-right: 16px; font-weight: bold; font-size: 17px;}
.fnb2 ul li:last-child {border-right: 0;}
.fnb2 ul li a {color: #666;}
.fnb2 ul li:first-child a {color: #bb0841;}

footer address {padding: 0 0 10px 0; font-style: normal;}
.footernotice {padding: 20px 0 10px 0; font-style: normal; font-size:14px; color:#d30202; font-weight:bold; font-family: 맑음 고딕, sans-serif;}



/* 기기별 미디어쿼리 */
/* 태블릿(~1024px) */
@media screen and (max-width: 1024px) {
    header {height: 70px;}
    #header_container {width: 100%; height: 70px; padding: 0 20px; box-sizing: border-box;}
    #header_container h1 {width: 90px; background-size: 100%; background-image: url(../imgs/mobile/header_logo_m.png); margin-top: 28px;}
    #header_container .gnb {width: 116px; padding-top: 26px;}
    #header_container .lnb,
    #header_container .gnb .gnb_inq,
    #header_container .gnb .gnb_lang {display: none;}
    #header_container .gnb .gnb_m_menu {display: block;
        background-image: url(../img/mobile/ico_menu_m.png);
        background-size: 16px;
        background-position-y: 3px;
        padding-left: 16px;
    }
    #header_container .gnb .gnb_m_menu span {display: block; text-indent: -9999px;}
    #header_container .gnb ul li {margin-left: 20px;}



    #visual_container {width: 100%; padding: 310px 100px 0; box-sizing: border-box;}

    #search_container {width: 100%; padding: 175px 100px 0; box-sizing: border-box;}
    .faq_item {width: 22%; padding: 25px; vertical-align: text-top;}

    .section03_nav {width: 45%; left: 3%;}
    .section03_nav ul li p.it_news_title {font-size: 20px;}

    .section04_slide ul li {width: 25%;}
    .section04_slide ul li:last-child {display: none;}
    /* 임시로 스크립트 없이 보여지는 부분을 처리하기 위해 설정했음! 원래는 이렇게 하면 안됌! 원래는 스크립트를 이용해서 디바이스의 너비를 인식해 4개만 보여줄 수 있도록 설정을 해야함! */

    .section05_content {width: 100%;}
    .section05_slide_img {width: 45%; margin-right: 5%;}
    .section05_slide_img img {width: 100%;}
    .section05_slide_content {width: 50%;}

    footer {width: 100%; height: auto; text-align: center; margin-bottom: 50px;}
    .fnb1 {float: none;}
    .fnb1 ul li {display: inline; float: none;}
    .sns {position: static; margin: auto;}
    .family {text-align: center; margin-bottom: 50px;}
    .family select {border-left: 0; border-right: 0; width: 310px;}
    .fnb2 ul li {display: block; border-right: 0; padding-right: 0; margin-right: 0; margin-bottom: 10px;}

}



/* 모바일(~768px) */
@media screen and (max-width: 768px) {
    /* vw(Viewport Width)단위 : 뷰포트 화면의 너비(기기의 보여지는 전체 너비)를 100이라고 쳤을 때, 그 비율로 표시하는 방법. 부모요소가 기준이 아닌, 항상 뷰포트 너비가 기준임!!
    ex : 가로 360px 너비가 100vw라고 한다면, 1vw는 3.6px */

    header {height: 20vw;}
    #header_container {height: 20vw;}
    #header_container h1 {width: 24vw; height: 6vw; margin-top: 7vw;}

    #header_container .gnb {width: 19vw; padding-top: 7vw;}
    #header_container .lnb,
    #header_container .gnb .gnb_inq,
    #header_container .gnb .gnb_lang,
    #header_container .gnb .gnb_shared {display: none;}
    #header_container .gnb .gnb_search {
        background-image: url(../img/mobile/ico_header_search_m.png);
        background-size: 4vw;
        padding-left: 4vw;
        padding-bottom: 2vw;
    }
    #header_container .gnb .gnb_m_menu {display: block;
        background-image: url(../img/mobile/ico_menu_m.png);
        background-size: 4vw;
        background-position-y: 3px;
        padding-left: 4vw;
        padding-bottom: 2vw;
    }



    #visual_container {padding: 50vw 11% 0;}
    #visual_container h2 {font-size: 6.6vw;}
	#visual_container h3 {font-size: 5vw; color:#fff; }
    #visual_container p {font-size: 5vw;}

    .title h2 {font-size: 8vw;}
    .title p {display: none;}

    #search_container {padding: 25vw 10% 0;}
    .searchbox {width: 80vw; height: 15vw; margin-bottom: 5vw;}
    .searchbox input {width: 85%; height: 100%; font-size: 5vw; padding: 0 5vw;}
    .searchbox button {width: 15%; height: 100%;}
    .hashtag {font-size: 3.5vw;}
    .hashtag:nth-child(4),
    .hashtag:last-child {display: none;}

    .faq_item {width: 100%; box-sizing: border-box;}
    .faq_item:nth-child(2),
    .faq_item:last-child {display: none;}

    .section03_nav {width: 100%; left: 0;}
    .section03_nav ul li p.it_news_title {font-size: 4vw;}
    .section03_nav ul li:first-child,
    .section03_nav ul li:nth-child(3) {display: none;}
    .section03_nav button,
    .section03_nav ul li {width: 90%; height: 30vw; float: left;}
    .section03_nav ul li {padding: 4vw;}
    .section03_nav button {width: 5%; border: 0;}
    .section03_slide {width: 100%; position: static; padding: 30vw 10vw; box-sizing: border-box;}


    .section04_slide ul li {width: 50%;}
    .section04_slide ul li:nth-child(3),
    .section04_slide ul li:nth-child(4) {display: none;}
    

    .section05_content {width: 80%;}
    .section05_slide_img {width: 100%; float: none;}
    .section05_slide_content {width: 100%;}

    .section06

    footer {width: 100%; height: auto; text-align: center; margin-bottom: 0px;  }
    .fnb1 {float: none;}
    .fnb1 ul li {display: inline; float: none;}
    .fnb2 ul li {display: block; border-right: 0; padding-right: 0; margin-right: 0; margin-bottom: 0px;}
.footernotice {padding: 20px 0 10px 0; font-style: normal; font-size:14px; color:#d30202; font-weight:bold; font-family: 맑음 고딕, sans-serif;}
}