@charset "UTF-8"; .popup { position: fixed; top: 200px; left: 200px; width: 400px; height: 300px; background: url(../images/pop.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; z-index: 999999999999; } .popup p { cursor: pointer; position: absolute; text-align: right; bottom: 0px; width: 100%; color: #fff; font-size: 20px; font-weight: 600; background: #0061a9; } .wrap { width: 100%; } section { padding-top: 61px; } .fxContainer { position: fixed; width: 100%; z-index: 999999; /*header 끝*/ } .fxContainer header { display: none; width: 100%; padding-left: 390px; background-color: #fff; border-bottom: 1px solid #dddddd; } .fxContainer header > .inner > ul { width: 200px; margin-left: 25px; border: 1px solid #dddddd; border-top: none; border-bottom: none; } .fxContainer header > .inner > ul > li { float: left; width: 50%; height: 35px; line-height: 35px; text-align: center; } .fxContainer header > .inner > ul > li > a { font-size: 12px; color: #999999; } .fxContainer header > .inner > ul > li > a:hover { color: #333333; } .fxContainer nav { background-color: #fff; width: 100%; height: 60px; border-bottom: 1px solid #dddddd; } .fxContainer nav > .inner { position: relative; width: 1200px; margin: 0 auto; } .fxContainer nav > .inner > .logo { float: left; width: 130px; margin-left: 40px; text-indent: -99999px; } .fxContainer nav > .inner > .logo > a { display: block; height: 50px; background: url(../images/BULE.png); background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; } .fxContainer nav > .inner > ul { float: right; width: 810px; } .fxContainer nav > .inner > ul > li { position: relative; float: left; width: 20%; line-height: 60px; text-align: left; } .fxContainer nav > .inner > ul > li:nth-child(1) ul { height: 145px; } .fxContainer nav > .inner > ul > li:nth-child(2) ul { height: 145px; } .fxContainer nav > .inner > ul > li:nth-child(3) { width: 25%; } .fxContainer nav > .inner > ul > li:nth-child(3) ul { margin: 0 auto; width: 100%; height: 145px; letter-spacing: -1px; text-align: left; } .fxContainer nav > .inner > ul > li:nth-child(4) { width: 25%; } .fxContainer nav > .inner > ul > li:nth-child(5) { width: 5%; font-weight: 900; } .fxContainer nav > .inner > ul > li:nth-child(5) > a { color: #ddd; transition: color 0.3s; } .fxContainer nav > .inner > ul > li:nth-child(5) > a:hover { color: #0061a9; } .fxContainer nav > .inner > ul > li > .point { position: absolute; top: 56px; left: 0%; width: 2%; height: 5px; background-color: #0061a9; content: ''; } .fxContainer nav > .inner > ul > li > a { display: block; height: 60px; font-size: 14px; color: #333333; } .fxContainer nav > .inner > ul > li > ul { display: none; width: 100%; transition: 0.8s; } .fxContainer nav > .inner > ul > li > ul > li { line-height: 35px; text-align: left; padding-left: 0px; } .fxContainer nav > .inner > ul > li > ul > li > a { display: block; color: #666; width: 100%; font-size: 13px; font-weight: 500; } .fxContainer nav > .inner > ul > li > ul > li > a:hover { color: #0061a9; font-weight: 700; text-decoration: underline; } .fxContainer nav > .language { float: right; width: 50px; background-color: red; } .fxContainer nav > .subMenuBg { display: none; position: absolute; top: 60px; left: 0; width: 100%; height: 145px; border-bottom: 1px solid #d7d7d7; background-color: #fff; opacity: 0.95; z-index: -1; } /*nav 끝*/ /* footer { width: 100%; //height: 170px; background-color: #f1f1f1; >.inner { width: 1200px; position: relative; padding-top: 20px; //margin: 0 auto; >ul { padding-top: 20px; >li { float: left; margin-right: 30px; text-align: center; font-size: 16px; >ul { padding: 10px 0 20px; >li { text-align: center; font-size: 14px; line-height: 40px; >a { color: #999; } } } &:last-child { margin-right: 0; } } }//end of ul }//end of inner >.f_section { width: 100%; border-top: 1px solid #ddd; padding: 20px 0; >ul { width: 1200px; margin: 0 auto; li { float: left; >img { width: 160px; } >dl { color: #000; dt { line-height: 1.7em; >em { color: #0061a9; font-weight: 600; } } dd { line-height: 1.7em; >span { >em { color: #0061a9; font-weight: 600; } >a { color: #000; } } } } } }//end of ul }//end of f_section }//end of footer */ footer { width: 100%; height: 170px; background-color: #444; } footer > .inner { position: relative; width: 1200px; margin: 0 auto; padding-top: 20px; } footer > .inner > h1 { float: left; margin-left: 40px; width: 130px; height: 50px; text-indent: -99999px; background-image: url(../images/logo_w.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } footer > .inner > .f_left { float: left; margin-left: 50px; } footer > .inner > .f_left > ul { width: 280px; } footer > .inner > .f_left > ul > li { width: 400px; text-align: center; } footer > .inner > .f_left > ul > li > dl > dt { margin: 0 auto; width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > .f_left > ul > li > dl > dd { text-align: left; margin-top: 8px; font-size: 15px; line-height: 1.2em; color: #fff; } footer > .inner > .f_left > ul > li > dl > dd > em { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > address { float: left; margin-top: 0px; margin-left: 30px; width: 340px; } footer > .inner > address > ul { width: 350px; } footer > .inner > address > ul > li { width: 320px; text-align: center; } footer > .inner > address > ul > li:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } footer > .inner > address > ul > li:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } footer > .inner > address > ul > li:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } footer > .inner > address > ul > li > dl > dt { margin: 0 auto; width: 50px; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > address > ul > li > dl > dd { text-align: left; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > address > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > address > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > address > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > .f_nav { float: right; margin-top: 0px; width: 270px; } footer > .inner > .f_nav > ul > li { width: calc(270px/5+ (9*5)); float: left; text-align: right; margin-right: 9px; background-image: url(../images/f_right.png); background-repeat: no-repeat; background-position: 100% 73%; } footer > .inner > .f_nav > ul > li:last-child { margin-right: none; background-image: none; } footer > .inner > .f_nav > ul > li > a { font-size: 13px; color: #fff; } footer > .inner > .copyright { position: absolute; top: 120px; right: -141px; transform: translateX(-50%); width: 315px; font-size: 13px; letter-spacing: 1px; color: #fff; } footer > .inner:after { position: absolute; top: 30px; left: 200px; transform: translateX(-50%); width: 1px; height: 120px; background-color: #808080; content: ''; } footer > .inner > .snsBox{ position: absolute; right: 11px; top: 85px; } footer > .inner > .snsBox > ul > li:nth-child(1) a { width: 45px; height: 30px; font-size: 13px; color: #fff; background: url('../images/footer_ico/youtube.png') no-repeat; background-size: 30px; display: block; } /*footer 끝*/ /* *************************************************************************** RW 적용 CSS**************************************************************** *************************************************************************** */ @media screen and (max-width: 768px) { .toggleActive { background-image: url(../images/toggle_cls.png) !important; } .toggleActiveSub { display: block !important; } .fxContainer { position: fixed; width: 100%; z-index: 999999; /*header 끝*/ } .fxContainer > .mobileToggle { cursor: pointer; position: absolute; top: 0; right: 0; width: 100px; height: 60px; background-image: url(../images/toggle.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 70%; z-index: 9999999; } .fxContainer header { display: none; width: 100%; padding-left: 390px; background-color: #fff; border-bottom: 1px solid #dddddd; } .fxContainer header > .inner > ul { width: 200px; margin-left: 25px; border: 1px solid #dddddd; border-top: none; border-bottom: none; } .fxContainer header > .inner > ul > li { float: left; width: 50%; height: 35px; line-height: 35px; text-align: center; } .fxContainer header > .inner > ul > li > a { font-size: 12px; color: #999999; } .fxContainer header > .inner > ul > li > a:hover { color: #333333; } .fxContainer nav { width: 100%; height: 60px; border-bottom: 1px solid #dddddd; } .fxContainer nav > .inner { position: relative; width: 100%; height: 100%; margin: 0 auto; } .fxContainer nav > .inner > .logo { float: left; width: 130px; margin-left: 0px; text-indent: -99999px; } .fxContainer nav > .inner > .logo > a { display: block; margin-top: 10px; height: 40px; background: url(../images/BULE.png); background-repeat: no-repeat; background-position: 80% -50%; background-size: cover; } .fxContainer nav > .inner > ul { display: none; float: right; margin-top: 11px; width: 100%; } .fxContainer nav > .inner > ul > li { position: relative; float: inherit; width: 100%; line-height: 60px; text-align: center; background-color: #666; border-bottom: 1px solid #444; } .fxContainer nav > .inner > ul > li:nth-child(1) ul { height: auto; } .fxContainer nav > .inner > ul > li:nth-child(2) ul { height: auto; } .fxContainer nav > .inner > ul > li:nth-child(3) { width: 100%; } .fxContainer nav > .inner > ul > li:nth-child(3) > ul { width: 100%; height: auto; text-align: center; text-align-last: inherit; letter-spacing: 0px; } .fxContainer nav > .inner > ul > li:nth-child(4) { width: 100%; } .fxContainer nav > .inner > ul > li:last-child { width: 100%; } .fxContainer nav > .inner > ul > li > .point { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: 0%; height: 5px; background-color: #0061a9; content: ''; } .fxContainer nav > .inner > ul > li > a { display: block; height: 60px; color: #fff; } .fxContainer nav > .inner > ul > li > ul { display: none; width: 100%; transition: 0.8s; } .fxContainer nav > .inner > ul > li > ul > li { display: none; text-align: center; line-height: 45px; background-color: #ddd; border-bottom: 1px solid #bbb; } .fxContainer nav > .inner > ul > li > ul > li > a { display: block; color: #666; font-size: 14px; font-weight: 00; } .fxContainer nav > .inner > ul > li > ul > li > a:hover { color: #0061a9; font-weight: 500; } .fxContainer nav > .subMenuBg { display: none; position: absolute; top: 60px; left: 0; width: 100%; height: 190px; border-bottom: 1px solid #d7d7d7; background-color: #fff; opacity: 0.95; z-index: -1; } /* footer {// end of footer 768px width: 100%; background-color: #f1f1f1; >.inner { width: 100%; // 1200px margin: 0 auto; >ul { padding-top: 20px; >li { float: inherit; //left margin-right: 0px;//30px text-align: center; font-size: 16px; >ul { padding: 10px 0 20px; >li { text-align: center; font-size: 14px; line-height: 40px; >a { color: #999; } } } &:last-child { margin-right: 0; } } }//end of ul }//end of inner >.f_section { width: 100%; border-top: 1px solid #ddd; padding: 20px 0; >ul { width: 100%;//1200px margin: 0 auto; li { float: inherit; >img { display: block; width: 160px; margin: 0 auto; } >dl { padding: 0 0px;// 0 25px dt { line-height: 1.7em; border-bottom: 1px solid #888;//추가 padding: 0px 25px 10px;//추가 } dd { line-height: 1.7em; padding: 10px 0;;// 추가 >span { display: block; text-align: center; &:last-child {//추가 padding-bottom: 10px; border-bottom: 1px solid #888; } >a { color: #000; } } } .copyright { // 추가 text-align: center; } } } }//end of ul }//end of f_section }//end of footer */ footer { width: 100%; height: auto; background-color: #444; } footer > .inner { position: relative; padding-top: 20px; width: 100%; } footer > .inner > h1 { float: inherit; margin: 0 auto 180px; width: 200px; height: 40px; text-indent: -99999px; background-image: url(../images/logo_w.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 0%; } footer > .inner > .f_left { float: inherit; margin: 0 auto; width: 100%; padding-top: 20px; } footer > .inner > .f_left > ul { width: 100%; } footer > .inner > .f_left > ul > li { width: 100%; } footer > .inner > .f_left > ul > li > dl > dt { display: none; margin: 0 auto; width: 100%; height: 50px; text-indent: -99999px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } footer > .inner > .f_left > ul > li > dl > dd { padding-left: 20px; text-align: left; margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > .f_left > ul > li > dl > dd > em { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > .f_left > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > .f_left > ul > li > dl > dd > a:hover { text-decoration: none; } footer > .inner > address { border-top: 1px solid #666; float: inherit; margin: 10px auto; width: 100%; } footer > .inner > address > ul { width: 100%; } footer > .inner > address > ul > li { width: 100%; text-align: center; } footer > .inner > address > ul > li:nth-child(1) dl dt { background-image: url(../images/f_icon_mail.png); } footer > .inner > address > ul > li:nth-child(2) dl dt { background-image: url(../images/f_icon_tel.png); } footer > .inner > address > ul > li:nth-child(3) dl dt { background-image: url(../images/f_icon_location.png); } footer > .inner > address > ul > li > dl > dt { display: none; } footer > .inner > address > ul > li > dl > dd { padding-left: 20px; text-align: left; margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 1.2em; color: #fff; } footer > .inner > address > ul > li > dl > dd:nth-child(2) { font-weight: 700; } footer > .inner > address > ul > li > dl > dd:nth-child(3) { color: #909090; } footer > .inner > address > ul > li > dl > dd > a { font-size: 13px; color: #909090; } footer > .inner > address > ul > li > dl > dd > a:hover { text-decoration: underline; } footer > .inner > .f_nav { position: absolute; top: 75px; float: inherit; margin-top: 0px; width: 100%; } footer > .inner > .f_nav > ul > li { width: 100%; text-align: center; float: inherit; margin-right: 0px; padding-right: 0px; background-image: none; background-repeat: no-repeat; background-position: 100% 73%; border-top: 1px solid #666; } footer > .inner > .f_nav > ul > li:last-child { margin-right: none; background-image: none; border-bottom: 1px solid #666; } footer > .inner > .f_nav > ul > li > a { display: block; height: 35px; line-height: 35px; font-size: 13px; color: #fff; } footer > .inner > .copyright { border-top: 1px solid #666; position: static; padding: 20px 0; top: 10px; right: 50%; transform: translateX(0); width: 100%; font-size: 13px; letter-spacing: 1px; text-align: center; color: #fff; } footer > .inner:after { display: none; } footer > .inner > .snsBox{ position: static; margin: 0 auto; text-align: center; border-top: 1px solid #666; } footer > .inner > .snsBox > ul > li:nth-child(1) a { width: 30px; height: 30px; font-size: 13px; color: #fff; background: url('../images/footer_ico/youtube.png') no-repeat; background-size: 30px; display: inline-block; } } /*# sourceMappingURL=layout.css.map */