@charset "utf-8";

/*Font*/
@font-face{
    font-family:NotoSans;
    src:url(font/NotoSansKR-Regular.eot);
    src:local('※'), url(font/NotoSansKR-Regular.woff) format('woff');
}

@font-face{
    font-family:NotoSansL;
    src:url(font/NotoSansKR-Light.eot);
    src:local('※'), url(font/NotoSansKR-Light.woff) format('woff');
}

@font-face{
    font-family:NotoSansDL;
    src:url(font/NotoSansKR-DemiLight.eot);
    src:local('※'), url(font/NotoSansKR-DemiLight.woff) format('woff');
}

@font-face{
    font-family:NotoSansM;
    src:url(font/NotoSansKR-Medium.eot);
    src:local('※'), url(font/NotoSansKR-Medium.woff) format('woff');
}

@font-face{
    font-family:NotoSansB;
    src:url(font/NotoSansKR-Bold.woff);
    src:local('※'), url(font/NotoSansKR-Bold.woff) format('woff');
}

@font-face{
    font-family:NotoSansB;
    src:url(font/NotoSansKR-Bold.woff);
    src:local('※'), url(font/NotoSansKR-Bold.woff) format('woff');
}

@font-face{
    font-family:NotoSansBL;
    src:url(font/NotoSansKR-Black.eot);
    src:local('※'), url(font/NotoSansKR-Black.woff) format('woff');
}

@font-face{
    font-family:Roboto;
    src:url(font/Roboto-Regular.eot);
    src:local('※'), url(font/Roboto-Regular.woff) format('woff');
}

@font-face{
    font-family:RobotoL;
    src:url(font/Roboto-Light.eot);
    src:local('※'), url(font/Roboto-Light.woff) format('woff');
}

@font-face{
    font-family:RobotoM;
    src:url(font/Roboto-Medium.eot);
    src:local('※'), url(font/Roboto-Medium.woff) format('woff');
}

@font-face{
    font-family:RobotoB;
    src:url(font/Roboto-Bold.eot);
    src:local('※'), url(font/Roboto-Bold.woff) format('woff');
}

/* 건너뛰기 */
#divAccessibility{position:absolute; left:0; top:0; z-index:1}
#divAccessibility li{float:left}
#divAccessibility a{position:absolute; width:1px; height:1px; top:-50px; overflow:hidden; text-align:center}
#divAccessibility a:focus, #divAccessibility a:active{position:absolute; top:0; width:200px; height:auto; padding:5px; background-color:#fff; border:solid 1px #0079c6; color:#0079c6; z-index:2} 

/*common*/
input{font-family: RobotoL,sans-serif;}
h2, h3{font-weight: normal;}
.ko{font-family: NotoSans,sans-serif;}

/*Layout*/
#divWrapper{position: relative; min-width: 1200px; font-family: Roboto,sans-serif; line-height:1.4em;}
#divContents{margin:0 auto;}
#divHeader{position: relative; z-index: 40; height: 108px; background-color: #fff;}
.header{width: 1200px; margin:0 auto;}
.header::after {content:"";display:block;clear:both}
#divFooter{height: 114px;padding-top: 53px;background:#f4f4f4;}

/*header*/
.logo{float: left; margin-top: 34px;}
#divLogin{float: right; text-align: right;}
#divLogin>div {display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center; -ms-flex-align: center; align-items: center;height:108px}
#divLogin h2{display: inline-block; padding-left: 15px; line-height: 20px; font-size: 14px; color: #179b90; background: url(../img/login.png) no-repeat 0 4px;}
#divLogin h2 a {color:#5f5f5f;font-family: Roboto,sans-serif;letter-spacing: 0;}
#divLogin h2 span{font-family: RobotoM,sans-serif; color: #179b90;}
#divLogin ul{text-align: right}
#divLogin li{display:inline; margin-left: 5px; line-height: 20px; padding-left: 11px; background: url(../img/gnbLine.png) no-repeat 0 7px;} 
#divLogin li:first-child{padding-left: 0; margin-left: 0; background: none;}
#divLogin li a{font-size: 15px; line-height: 15px; color: #707e8c;}
#divLogin li a:hover{text-decoration: underline}
#divLogin .myList {display:inline-block;margin-left:18px;padding:4px 12px 4px 36px;color:#009da1;background:url(../img/list.png) no-repeat left 15px center;border:1px solid #dcdfe7;border-radius: 5px;font-family:Roboto,sans-serif;font-size:14px;box-shadow: 1px 1px 0px 0px rgba(4, 4, 4, 0.05);-webkit-box-shadow: 1px 1px 0px 0px rgba(4, 4, 4, 0.05)}

/*content1*/
.content1{position:relative; z-index:30; height: 553px}

/* mainBg */
.mainBg{position:absolute;top:0;left:0;width:100%}
.mainBg .bg1 {display:none;position:absolute;top:0;left:0;width:100%;height:553px;overflow:hidden}
.mainBg .bg1.on {display:block}
.mainBg .bg1 img {position:absolute;top:0;left:50%;transform:translateX(-50%)}
@media screen and (min-width:1921px) {
    .mainBg .bg1 img {width:100%;height:553px;}
    
}

/*divSearch*/
.blackBg{display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 30; background: url(../img/advancedBg.png) repeat 0 0;}
#divSearch > div.searchWrap{position: relative;margin:0 auto;height: 120px;width: 690px;top: 158px;background: url(../img/searchBg.png) no-repeat 0 65px;}
#divSearch > div > span{display: block;}
#divSearch .searchTitle{display: block; margin-bottom: 17px; font-size: 48px; color: #fff; line-height: 48px;}
#divSearch .searchWrap form p{margin:0 80px 0 20px;}
#divSearch .searchWrap form p::after {content:"";display:block;clear:both}
#divSearch form div .searchInput{float: left; height: 55px; width: 100%; font-size: 18px; line-height: 55px; color:#535357; border: none; outline: none; background: #f0f2f4;}
#divSearch form div input[type=image]{position: absolute; right: 22px; top: 75px;}
#divSearch .advanced{position: absolute; top: 17px; right: 0; display: inline-block; border: 1px solid #cccdd0; width: 151px; height: 37px; text-align: center; line-height: 37px; font-family: NotoSansM,sans-serif; font-size: 15px; color: #f0f2f4;}
#divSearch .advanced .bg{display: block; position: relative;}
#divSearch .advanced .bg .bgc{display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;  visibility: hidden; opacity: 0; background: url(../img/advancedBg2.png) repeat 0 0; -webkit-transition: all .3s linear; transition: all .3s linear;}
#divSearch .advanced:hover{text-decoration: none; border: 1px solid #2aa197;}
#divSearch .advanced:hover .bgc{visibility: visible; opacity: 1}
#divSearch .advanced .txt{display: block; position: relative; top: 0; left: 0; width: 100%; z-index: 10;}

#divSearch .koKeyboard {margin-top:6px;text-align: right;}
#divSearch .koKeyboard a {display:inline-block;padding:2px 9px;background:#9d9d9d;color:#fff;font-size:11px; font-family:RobotoM,sans-serif;border-radius: 3px;letter-spacing: 0.025em;}
#divSearch .koKeyboard a .ko {font-family: NotoSansM,sans-serif;letter-spacing: 0;}
#divSearch > div.asWrap{display: none; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 30;}
.asWrap .asTitle{position: relative;top: -123px;line-height: 33px;text-align: center;font-family: Roboto,sans-serif;font-size: 33px;color:#fff;height: 0; opacity: 0.9;visibility: hidden; opacity: 0; transform: translateY(-5px); transition: all .3s ease;}
.asWrap.on .asTitle{visibility: visible; opacity: 1; transform: translateY(0);}
.asTabWrap{position: relative; margin-top: 175px;}
.asTabWrap .asFormWrap{display: none;}
.asTabWrap .on .asFormWrap{display: block;}
.asTabWrap .fll{text-align: center;}
.asTabWrap .fll > li{display: inline;}
.asTabWrap .fll > li > a{display: inline-block;vertical-align:top;margin-top: -47px;margin-left: -3px;padding:0 35px;height: 47px;line-height: 47px;font-family: Roboto,sans-serif;font-size: 16px;color:#fff;background-color: #5d6979; transition:0.25s ease;}
.asTabWrap .fll > li > a:HOVER{text-decoration: underline;}
.asTabWrap .fll > li.on > a{color:#475055; background-color: #eff0f4;}
.asFormWrap{position: absolute; top: 0; left: 0; width: 100%; background-color: #eff0f4;}
.asFormWrap > div{position: relative;width: 620px;margin:0 auto;padding-bottom: 45px;}
.asFormWrap ul{padding-top: 45px; margin-bottom: 34px;}


.srchW{position:relative;margin-top:7px;}
.srchW:first-child{margin-top:0;}
.select1{position:relative;background:url(../img/selectArrow1.png) no-repeat top 16px right 17px;cursor:pointer}
.select2{position:absolute;right:0;top:0;width:62px;height: 39px;background:url(../img/selectArrow2.png) no-repeat right 8px top 18px #00bc9c;cursor:pointer;border-radius:3px;-webkit-box-shadow:0 2px 0 0 #00a085;box-shadow:0 2px 0 0 #00a085;}
.srch{position:relative;height:39px;margin-top:7px;margin-right:72px;background-color: #fcfcfc;border:1px solid #d1d1d1;}
.srch:first-child{margin-top:0;}
.srch .selW{position:absolute;left:0;top:0;width:140px;height:39px;background: #fcfcfc;}
.srch .srchBox{margin-left:145px;}
.srch .srchInput{width:100%;height:39px;border:none;background-color:#fafafa;}
.select1 label{display:block;padding:0 0 0 35px;color:#636674;font-size:15px;line-height:39px;cursor:pointer;text-align:left}
.select1 > select{display:none;}
.selW .customSelect{position:absolute;left:-1px;top:53px;opacity:0;visibility:hidden;width:141px;background-color:#fcfcfc;border:1px solid #c3c3c3;-webkit-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);z-index:10;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.selW .customSelect.on{opacity:1;visibility:visible;top:47px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.selW .customSelect ul {padding-top:14px;margin-bottom:30px}
.selW .customSelect ul > li > a{display:block;padding:5px 18px;color:#353535;font-size:15px;text-align:left}
.selW .customSelect ul > li > a:hover{background-color:#d4eee9;}
.srch .selW2{position:absolute;right:0;top:0;width:62px;height:41px;}
.select2 label{display:block;height: 39px;padding:0 11px;color:#fff;font-size:14px;font-family:Roboto;line-height: 39px;cursor:pointer;text-align:left;}
.select2 > select{display:none;}
.selW2 .customSelect{width:62px;position:absolute;right:0;top:54px;opacity:0;visibility:hidden;background-color:#fff;border-radius:2px;z-index:10;-webkit-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.selW2 .customSelect.on{opacity:1;visibility:visible;top:48px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
.selW2 .customSelect ul {padding:14px 13px;margin-bottom:0}
.selW2 .customSelect ul > li > a{display:block;color:#646464;text-align:left;font-size:13px}
.selW2 .customSelect ul > li > a:hover{color:#47b19d;text-decoration:underline;}






.asFormWrap li span{display: block; border: 1px solid #e3e3e5; padding:0 13px; background-color: #fff;}
.asFormWrap .asInput {height: 39px; width: 100%; font-size: 15px; line-height: 39px; color: #85929b; border: none; outline: none; background: #fff;}
.asFormWrap p{font-family: Roboto,sans-serif; font-size: 15px; line-height: 24px; color: #5d6979; text-align: center;}
.asFormWrap .ko{font-family: NotoSans,sans-serif; font-size: 14px;}
.asFormWrap .searchBtnW {display:inline-block}
.asFormWrap .searchBtn2{margin-bottom: 20px;height: 43px; padding-right: 49px; padding-left: 74px; text-align: left;border: none;color: #fff;font-family: RobotoM,sans-serif;letter-spacing:0;font-size: 16px;cursor: pointer;line-height: 43px;overflow: visible; background: #00bc9c; border-radius: 3px; box-shadow: 0 2px 0 0 #00a085; transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;}
.asFormWrap .searchBtn2:hover{background-color: #00a085; box-shadow: 0 2px 0 0 #00bc9c;}
.asFormWrap .btnReset {display:inline-block;margin-left:12px;margin-bottom: 20px;height: 43px; padding-right: 49px; padding-left: 74px; text-align: left;border: none;color: #fff;font-family: RobotoM,sans-serif;letter-spacing:0;font-size: 16px;cursor: pointer;line-height: 43px;overflow: visible; background:url(../img/reset.png) no-repeat left 43px top 14px #a3b3bd; border-radius: 3px; box-shadow: 0 2px 0 0 #96a5ae; transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;}
.asFormWrap .btnReset:hover {background:url(../img/reset.png) no-repeat left 43px top 14px #8ea0ac;text-decoration:none}


.asFormWrap .por {display:inline-block;position: relative;}
.asFormWrap .searchBg{position: absolute; top: 12px; left: 43px; width: 20px; height: 20px; background: url(../img/searchBtn3.png) no-repeat 0 0;}
.asWrap .close{position: relative; height: 0; z-index: 31; width: 1200px; margin:0 auto;}
.asWrap .close a{display: block;position: absolute;right: 38px;top: 283px;}

/*kategorie 20200302_KHW*/
.kategorie{position: absolute; bottom: 0; left: 0;z-index: 20; width: 100%;height: 104px;background: url(../img/main/userGuideBg.png) repeat 0 0;}
.kategorie > div{width: 1200px; margin:0 auto;}
.kategorie > div > ul > li{position: relative;float: left;width:175px;height: 104px;margin-left: 10px;padding-left: 15px;background: url(../img/main/userGuideBg2.png) no-repeat 0 50%;}
.kategorie > div > ul > li:first-child{margin-left: 0; padding-left: 0; background: none;}/*0302_khw*/
.kategorie > div > ul > li a{display: block; overflow: hidden; color: #fff;}
.kategorie > div > ul > li .icon{display: block; float: left; margin-top: 21px; padding-bottom: 35px; font-family: NotoSansB,sans-serif; font-size: 12px; background: url(../img/main/kategorie1.png) no-repeat 2px 100%;}
.kategorie > div > ul > li.kategorie2 .icon{background-image: url(../img/main/kategorie2.png); background-position: 4px 26px;}
.kategorie > div > ul > li.kategorie3 .icon{background-image: url(../img/main/kategorie3.png); background-position: 2px 27px;}
.kategorie > div > ul > li.kategorie4 .icon{background-image: url(../img/main/kategorie4.png); background-position: 8px 25px;}
.kategorie > div > ul > li.kategorie5 .icon{background-image: url(../img/main/kategorie5.png); background-position: 8px 100%;}
.kategorie > div > ul > li.kategorie6 .icon{background-image: url(../img/main/kategorie6.png); background-position: 8px 100%;}
.kategorie > div > ul > li .num{position: absolute;bottom: 35px;right: 16px;display: block;float: left;margin-top: 42px;margin-left: 34px;padding-left:30px;font-family: NotoSansBL,sans-serif;font-size: 20px;letter-spacing:-0.2px;transition:0.25s ease;}
.kategorie > div > ul > li a:hover .num{color: #00ffc1}
.kategorie > div > ul > li .ko{display: block; float: left; margin-top: 52px; padding-left: 133px; color: #ccc; font-size: 14px; font-family: NotoSansM,sans-serif; line-height: 14px;}

/*content2*/
.content2{position: relative; z-index: 1; width: 1200px;height: 346px;margin: 54px auto 75px;}
.content2 h2{font-family: RobotoM,sans-serif; font-size: 23px; color: #3c4a53;}

/*notice*/
.notice{position: relative;z-index:1;float: left;width: 581px;margin-right: 36px;}
.notice h2{margin-bottom: 26px;}
.notice li{position: relative; line-height: 28px; overflow: hidden; margin: 0;}
.notice li a{display: block; margin-right: 99px; font-size: 15px; color: #3c4a53; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: 0.25s ease;}
.notice li a:hover{font-size: 16px; text-decoration: underline;}
.notice li .date{position: absolute; top: 0; right: 0; font-size: 14px; color: #96a1ab;}
.notice .more{position: absolute; top: 5px; right: 0;}
.notice .serviceBtn{position: relative; top: 30px; height: 101px; background: url(../img/main/noticeBtnBg.jpg) no-repeat 0 0;}
.notice .serviceBtn a{display: block; padding-left: 92px; padding-top: 29px; height: 72px; font-family: Roboto,sans-serif; font-size: 19px; color: #fff; line-height: 21px; background: url(../img/main/noticeBtnIcon.png) no-repeat 40px 50%;}
.notice .serviceBtn .arrowMore{position: absolute; top: 33px; right: 41px;}

/*userGuide*/
.userGuide{float: left;width: 583px;}
.userGuide ul{margin-left: 13px;}
.userGuide h2{margin-bottom: 30px;margin-left: 51px;}
.userGuide li{float: left; position: relative; width: 25%; height: 144px; margin-bottom: 16px; text-align: center; background: url(../img/main/userGuideOff.png) no-repeat 50% 0;}
.userGuide li .bg{display: block; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/main/userGuideOn.png) no-repeat 50% 0;}
.userGuide li a{position: relative; z-index: 10; display: block; padding-bottom: 5px; padding-top: 107px; font-size: 15px; line-height: 16px; color: #3c4a53; background: url(../img/main/userGuide1.png) no-repeat 50% 29px; transition: 0.25s ease;}
.userGuide li a:hover{text-decoration: underline;}
.userGuide li.userGuide1{margin-left:64px}
.userGuide li.userGuide1 a{background-image: url(../img/main/userGuide1.png); background-position: 53% 29px;}
.userGuide li.userGuide2 a{background-image: url(../img/main/userGuide2.png); background-position: 55% 30px;}
.userGuide li.userGuide3 a{background-image: url(../img/main/userGuide9.png); background-position: 53% 30px;}
.userGuide li.userGuide4 a{background-image: url(../img/main/userGuide4.png); background-position: 50% 28px;}
.userGuide li.userGuide5 a{background-image: url(../img/main/userGuide6.png); background-position: 52% 27px;}
.userGuide li.userGuide6 a{background-image: url(../img/main/userGuide5.png); background-position: 52% 27px;}
.userGuide li.userGuide7 a{background-image: url(../img/main/userGuide7.png); background-position: 52% 27px;}

.userGuide li a .ko{font-family: NotoSansDL,sans-serif; font-size: 14px;}

/*footer*/
.footer{width: 1200px; margin:0 auto}
.footerLogo{float: left; width: 117px; height: 55px; text-indent: -9999em; overflow: hidden; background: url(../img/footerLogo.png) no-repeat 0 0;}
.footerLogo a{display: block}
.footerMenu{margin-left: 167px;margin-bottom: 7px;height: 23px;}
.footerMenu > ul > li{float: left; padding-left: 14px; margin-left: 16px; background: url(../img/footerLine.png) no-repeat 0 6px;}
.footerMenu > ul > li:first-child{padding: 0; margin: 0; background: none;}
.footerMenu > ul > li.privacy > a{color: #3c4a53; font-family: Roboto,sans-serif;}
.footerMenu > ul > li > a{font-size: 14px; color: #707e8c; font-family: Roboto,sans-serif;}
.footerMenu > ul > li >span.email {font-size: 14px; color: #707e8c; font-family: Roboto,sans-serif;}
.address{float: left; margin-left: 49px;}
.address{overflow: hidden; color:#848484; line-height: 18px; font-size: 13px; font-family: NotoSansL,sans-serif;}
.address address{float: left; margin-right: 4px;}
.address ul{overflow: hidden;}
.address ul, .address li{float: left; font-family: NotoSans,sans-serif; font-weight: normal;}
.address li{padding-left: 10px; background: url(../img/footerBg.png) no-repeat 2px 3px;}
.address p{clear: both; margin-top: 3px;}
.footer .color{color: #0f4374;}
.familySite{float: right; margin-top: -12px;}
.familySite li{float: left; margin-left: 14px; padding-left: 16px;background: url(../img/bannerList.png) no-repeat 0 11px;}
.familySite li:first-child{margin-left: 0; padding-left: 0; background: none;}
.familySite li a{display: inline-block; height: 25px; font-size: 0; text-indent: -9999em; overflow: hidden;}
.familySite li.familySite1 a{width: 48px; background-image: url(../img/banner1.png);}
.familySite li.familySite2 a{width: 68px; background-image: url(../img/banner2.png);}
.familySite li.familySite3 a{width: 84px; background-image: url(../img/banner3.png);}