23/10/11 헤더 css 수정
This commit is contained in:
subsub
parent
726b12dfce
commit
011a7fe5cb
@ -10,13 +10,15 @@ body {color: #222;}
|
|||||||
.logo img {width: 200px;}
|
.logo img {width: 200px;}
|
||||||
|
|
||||||
/* header */
|
/* header */
|
||||||
header{width: 100%; height: 130px; position: fixed; top: 0; left: 0; transition: height .4s ease-in-out, background-color .4s ease-in-out, margin .4s ease-in-out; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid #e2e4e6; z-index: 20; background-color: #fff;}
|
header{width: 100%; height: 130px; position: fixed; top: 0; left: 0; transition: height .4s ease-in-out, background-color .4s ease-in-out, margin .4s ease-in-out; overflow: hidden; box-sizing: border-box;z-index: 20; background-color: #fff;}
|
||||||
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
|
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
|
||||||
header::before{position: absolute; content: " "; display: block; top: 130px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .4s ease-in-out;}
|
header::before{position: absolute; content: " "; display: block; top: 130px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .4s ease-in-out;}
|
||||||
header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 130px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
|
header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 130px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
|
||||||
header.on::after{top: 130px; opacity: 1;}
|
header.on::after{top: 130px; opacity: 1;}
|
||||||
header.on::before{opacity: 1;}
|
header.on::before{opacity: 1;}
|
||||||
|
header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
|
||||||
|
|
||||||
|
/* .gnb_wrap{width: 100%; background-color: #eef0f3; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;} */
|
||||||
.gnb_wrap{width: 100%; background-color: #fff; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
|
.gnb_wrap{width: 100%; background-color: #fff; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
|
||||||
.gnb_wrap .inner{max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
|
.gnb_wrap .inner{max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
|
||||||
.gnb_wrap .site {padding: 8px 20px; background-color: #f5680b ; height: 100%; box-sizing: border-box; vertical-align: middle;}
|
.gnb_wrap .site {padding: 8px 20px; background-color: #f5680b ; height: 100%; box-sizing: border-box; vertical-align: middle;}
|
||||||
@ -32,12 +34,12 @@ header.on::before{opacity: 1;}
|
|||||||
.gnb_wrap .area_right a i {display: inline-block; background-repeat: no-repeat; vertical-align: middle; margin-bottom: 2px; margin-right: 5px;}
|
.gnb_wrap .area_right a i {display: inline-block; background-repeat: no-repeat; vertical-align: middle; margin-bottom: 2px; margin-right: 5px;}
|
||||||
.gnb_wrap .area_right .header_login i {background-image: url(../images/common/headerTop_icon1.png); width: 11px; height: 15px;}
|
.gnb_wrap .area_right .header_login i {background-image: url(../images/common/headerTop_icon1.png); width: 11px; height: 15px;}
|
||||||
.gnb_wrap .area_right .header_join {padding-right: 22px;margin:0 -10px 0 0;}
|
.gnb_wrap .area_right .header_join {padding-right: 22px;margin:0 -10px 0 0;}
|
||||||
.gnb_wrap .area_right .header_join i {background-image: url(../images/common/headerTop_icon2.png); width: 14px; height: 15px;}
|
.gnb_wrap .area_right .header_join i {background-image: url(../images/common/headerTop_icon3.png); width: 14px; height: 15px;}
|
||||||
.gnb_wrap .area_right a:hover{text-decoration: underline;}
|
.gnb_wrap .area_right a:hover{text-decoration: underline;}
|
||||||
.gnb_wrap .area_right .login_info::before,.gnb_wrap .area_right .login_after::before{position: absolute; content: " ";width: 1px; height: 13px; background-color: #dbdbdb; top: 50%; right: 13px; transform: translateY(-50%);}
|
.gnb_wrap .area_right .login_info::before,.gnb_wrap .area_right .login_after::before{position: absolute; content: " ";width: 1px; height: 13px; background-color: #dbdbdb; top: 50%; right: 13px; transform: translateY(-50%);}
|
||||||
.gnb_wrap .area_right .login_after::before {right:7px;}
|
.gnb_wrap .area_right .login_after::before {right:7px;}
|
||||||
.gnb_wrap .area_right .login_info:last-of-type:before{display: none;}
|
.gnb_wrap .area_right .login_info:last-of-type:before{display: none;}
|
||||||
.gnb_wrap .area_left p{display: inline-block; height: 40px; border-right: 1px solid #e5e5e5; font-size: 15px; color: #444; padding: 0 15px; vertical-align: middle; line-height: 36px;}
|
.gnb_wrap .area_left p{display: inline-block;background-color: #fff; height: 40px; border-right: 1px solid #e5e5e5; font-size: 15px; color: #444; padding: 0 15px; vertical-align: middle; line-height: 36px;margin: 0 0 0 -4px;}
|
||||||
.gnb_wrap .btn_util {margin:0 0 0 10px;}
|
.gnb_wrap .btn_util {margin:0 0 0 10px;}
|
||||||
.gnb_wrap .btn_util button{width: 40px; height: 40px; vertical-align: middle; background-repeat: no-repeat; background-position: center; border-left: 1px solid #e2e4e6; }
|
.gnb_wrap .btn_util button{width: 40px; height: 40px; vertical-align: middle; background-repeat: no-repeat; background-position: center; border-left: 1px solid #e2e4e6; }
|
||||||
.gnb_wrap .btn_util button:hover{box-shadow: 0 0 5px rgba(0,0,0,.15);}
|
.gnb_wrap .btn_util button:hover{box-shadow: 0 0 5px rgba(0,0,0,.15);}
|
||||||
@ -50,28 +52,27 @@ header.on::before{opacity: 1;}
|
|||||||
.header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: 100%; margin: 0 50px;}
|
.header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: 100%; margin: 0 50px;}
|
||||||
.header_inner #menu{width: 100%; margin: 0 auto; height: 100%;}
|
.header_inner #menu{width: 100%; margin: 0 auto; height: 100%;}
|
||||||
.header_inner .depth01 {display: flex; height: 100%;}
|
.header_inner .depth01 {display: flex; height: 100%;}
|
||||||
.header_inner .dep_li_01,
|
.header_inner .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;}
|
||||||
.header_inner .dep_li_02,
|
.header_inner .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
|
||||||
.header_inner .dep_li_03 {justify-content:flex-start;}
|
|
||||||
.header_inner .dep_li_04,
|
|
||||||
.header_inner .dep_li_05,
|
|
||||||
.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
|
|
||||||
.header_inner .depth01_li{position: relative; padding: 0; box-sizing: border-box;}
|
.header_inner .depth01_li{position: relative; padding: 0; box-sizing: border-box;}
|
||||||
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
|
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
|
||||||
.header_inner .dep_li_01 .depth01_li{width: 100%;}
|
.header_inner .dep_li_01 .depth01_li{width: 100%;}
|
||||||
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
|
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
|
||||||
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;}
|
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;}
|
||||||
.header_inner .dep_li_05 .depth01_li{width: calc((100% - 50px)/5);}
|
.header_inner .dep_li_05 .depth01_li{width: calc(100%/5);}
|
||||||
.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
|
.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
|
||||||
.header_inner .dep_li_07 .depth01_li{width: auto;}
|
.header_inner .dep_li_07 .depth01_li{width: auto;}
|
||||||
.header_inner .menu_link{font-size: 18px; font-weight: 600; letter-spacing: -1px; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; position: relative;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; line-height: 1.25;}
|
.header_inner .menu_link{font-size: 20px; font-weight: 600; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; position: relative;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; line-height: 1.25;}
|
||||||
.header_inner .menu_link::before{position: absolute; content: " "; display: block; width: 0; height: 4px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 87px; z-index: 1;}
|
.header_inner .menu_link::before{position: absolute; content: " "; display: block; width: 0; height: 4px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 87px; z-index: 1;}
|
||||||
.header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; }
|
.header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; }
|
||||||
.header_inner .on .menu_link{color: #E95504;}
|
.header_inner .on .menu_link{color: #E95504;}
|
||||||
.on .nav_wrap .on .menu_link::before{width: 100%;}
|
.on .nav_wrap .on .menu_link::before{width: 100%;}
|
||||||
.header_inner .depth02{position: absolute; text-align: center; margin-top: 25px; width: 100%; left: 50%; transform: translateX(-50%);}
|
.header_inner .depth02{position: absolute; text-align: center; padding: 15px 0; width: 100%; left: 50%; transform: translateX(-50%);border-right: 1px solid #d5d5d5;}
|
||||||
|
.header_inner .depth01_li:first-child .depth02{border-left: 1px solid #d5d5d5;}
|
||||||
|
.header_inner .depth01_li:hover .depth02::after{position:absolute;content:"";width:calc(100% + 4px);height:100%;background-color:#fff8f4;left:-2px;top:0;}
|
||||||
|
.header_inner .depth01_li:hover .depth02 li{position:relative;z-index:1;}
|
||||||
.header_inner .depth02 a{font-size: 17px; font-weight: 300; line-height: 1.3; height: 45px; display: flex; align-items: center; justify-content: center; word-break: keep-all;white-space:nowrap;}
|
.header_inner .depth02 a{font-size: 17px; font-weight: 300; line-height: 1.3; height: 45px; display: flex; align-items: center; justify-content: center; word-break: keep-all;white-space:nowrap;}
|
||||||
.header_inner .depth02 a:hover,.header_inner .depth02 a:focus{color: #E95504;}
|
.header_inner .depth02 a:hover,.header_inner .depth02 a:focus{color: #E95504;font-weight:500;}
|
||||||
|
|
||||||
.header_inner button{width: 27px; height: 26px; background-repeat: no-repeat;}
|
.header_inner button{width: 27px; height: 26px; background-repeat: no-repeat;}
|
||||||
.header_inner .btn_search{background-image: url(../images/common/btn_search.png); margin-right: 25px; margin-top: -2px;}
|
.header_inner .btn_search{background-image: url(../images/common/btn_search.png); margin-right: 25px; margin-top: -2px;}
|
||||||
@ -86,19 +87,29 @@ header.on::before{opacity: 1;}
|
|||||||
/* //header */
|
/* //header */
|
||||||
|
|
||||||
/* full menu */
|
/* full menu */
|
||||||
.full_menu{visibility: hidden; width: 100%; position: fixed; background-color: #fff; min-height: 500px; padding: 50px; box-sizing: border-box; top: -500px; transition: top 0.5s ease, box-shadow 0.3s ease; z-index: 21;}
|
.full_menu{visibility: hidden; width: 100%; position: fixed; background-color: #eef0f3; min-height: 500px; padding: 100px 50px 50px 50px; box-sizing: border-box; top: -500px; transition: top 0.5s ease, box-shadow 0.3s ease; z-index: 21; border-radius: 0 0 20px 20px;}
|
||||||
.full_menu.on{visibility: visible; top: 0; box-shadow: 0 5px 8px rgba(0,0,0,0.1);}
|
.full_menu.on{visibility: visible; top: 0; box-shadow: 0 5px 8px rgba(0,0,0,0.3);}
|
||||||
.full_menu .inner{max-width: 1400px; width: 100%; position: relative; margin: 0 auto;}
|
.full_menu .inner{display: flex; max-width: 1400px; width: 100%; position: relative; margin: 0 auto; justify-content: space-between; align-items: flex-start;}
|
||||||
.full_menu .btn_close{background-image: url(../images/common/btn_close.png); width: 40px; height: 40px; background-repeat: no-repeat; position: absolute; right: 0; top: 15px; border: 1px solid #ef7b0f; border-radius: 3px; background-position: center;}
|
.full_menu .logo{width: 230px;}
|
||||||
.full_menu .depth01{display: flex; justify-content: space-around; text-align: center; margin: 80px 50px 0 50px;}
|
.full_menu .logo img{width: 220px;}
|
||||||
|
.full_menu .btn_close{background-image: url(../images/common/btn_close.png); width: 40px; height: 40px; background-repeat: no-repeat; border: 1px solid #ef7b0f; border-radius: 3px; background-position: center;}
|
||||||
.full_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.15); transition: width .4s ease-in-out;}
|
.full_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.15); transition: width .4s ease-in-out;}
|
||||||
.full_menu .depth01 .menu_link{font-size: 20px; font-weight: 500; color: #ea5404; position: relative; padding-bottom: 25px; letter-spacing: -1px; text-align: center; height: 40px;}
|
.full_menu .depth01{width: calc(100% - 500px);}
|
||||||
|
.full_menu .depth01_li{display: flex; border-bottom: 1px solid #d5d5d5; padding: 20px 0;}
|
||||||
|
.full_menu .depth01_li:first-child{padding: 0 0 20px 0;}
|
||||||
|
.full_menu .depth01_li:last-child{border-bottom: 0;}
|
||||||
|
.full_menu .depth01_li .menu_link{width:350px;font-size: 22px; font-weight: 500; color: #222;}
|
||||||
|
.full_menu .depth01_li:hover .menu_link,.full_menu .depth01_li .depth02 li:hover{color: #e95504;}
|
||||||
|
.full_menu .depth01_li .depth02 li:hover{font-weight: 500;}
|
||||||
|
.full_menu .depth01_li .depth02{display: flex; width: calc(100% - 350px); font-size: 18px; font-weight: 300; color: #666; justify-content: space-between;}
|
||||||
|
|
||||||
|
/* .full_menu .depth01 .menu_link{font-size: 20px; font-weight: 500; color: #ea5404; position: relative; padding-bottom: 25px; letter-spacing: -1px; text-align: center; height: 40px;}
|
||||||
.full_menu .depth01 .menu_link>span {display: block; padding-top: 5px;}
|
.full_menu .depth01 .menu_link>span {display: block; padding-top: 5px;}
|
||||||
.full_menu .depth01 .menu_link::before{position: absolute; content: " "; width: 75px; height: 3px; background-color: #ea5404; left: 50%; bottom: 0; transform: translateX(-50%);}
|
.full_menu .depth01 .menu_link::before{position: absolute; content: " "; width: 75px; height: 3px; background-color: #ea5404; left: 50%; bottom: 0; transform: translateX(-50%);}
|
||||||
.full_menu .depth02{margin-top: 10px;}
|
.full_menu .depth02{margin-top: 10px;}
|
||||||
.full_menu .depth02 a{height: 40px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; font-size: 17px; font-weight: 400;}
|
.full_menu .depth02 a{height: 40px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; font-size: 17px; font-weight: 400;}
|
||||||
.full_menu .depth02 a:hover {font-weight: 700;}
|
.full_menu .depth02 a:hover {font-weight: 700;}
|
||||||
.full_menu .link{display: inline-block; width: 16px; height: 16px; background-image: url(../images/common/link_icon.png);background-repeat: no-repeat; margin-left: 6px;}
|
.full_menu .link{display: inline-block; width: 16px; height: 16px; background-image: url(../images/common/link_icon.png);background-repeat: no-repeat; margin-left: 6px;} */
|
||||||
/* //full menu */
|
/* //full menu */
|
||||||
|
|
||||||
/* moblie menu */
|
/* moblie menu */
|
||||||
@ -143,25 +154,27 @@ header.on::before{opacity: 1;}
|
|||||||
.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
|
.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
|
||||||
|
|
||||||
/* footer */
|
/* footer */
|
||||||
footer{width: 100%; background-color: #fff; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative;}
|
/* footer{width: 100%; background-color: #eef0f3; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 80px auto 0 auto;} */
|
||||||
footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #e2e3e7; border-bottom: 1px solid #e2e3e7; position: absolute; top: 0; left: 0;}
|
footer{width: 100%; background-color: #fff; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative; margin: 0 auto 0 auto;}
|
||||||
|
footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; position: absolute; top: 0; left: 0;}
|
||||||
footer .site ul {display: flex; height: 50px; align-items: center;}
|
footer .site ul {display: flex; height: 50px; align-items: center;}
|
||||||
footer .inner{max-width: 1400px; width: 100%; margin: 0 auto; }
|
footer .inner{max-width: 1400px; width: 100%; margin: 0 auto; }
|
||||||
footer .area_top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 45px 0;}
|
footer .area_top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 45px 0;}
|
||||||
footer .site{font-size: 16px; position: relative;}
|
footer .site{font-size: 16px; position: relative;}
|
||||||
footer .site li{padding: 0 24px; position: relative; font-weight: 300; transition: all 0.3s ease;}
|
footer .site li{padding: 0 24px; position: relative; font-weight: 400; transition: all 0.3s ease;}
|
||||||
footer .site li::before{position: absolute; content: " "; width: 1px; height: 14px; background-color: #cbced4; top: 50%; right: 0; transform: translateY(-50%);}
|
footer .site li::before{position: absolute; content: " "; width: 1px; height: 14px; background-color: #cbced4; top: 50%; right: 0; transform: translateY(-50%);}
|
||||||
footer .site li:last-child::before{display: none;}
|
footer .site li:last-child::before{display: none;}
|
||||||
footer .site li:first-child{padding-left: 0;}
|
footer .site li:first-child{padding-left: 0;}
|
||||||
footer .site li a:hover {text-decoration: underline;}
|
footer .site li a:hover {text-decoration: underline;}
|
||||||
footer select{height: 40px; border: 1px solid #cbcdd1; background-image: url(../images/common/footer_select.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; padding: 0 10px; font-size: 15px; color: #666;}
|
footer select{width: 204px; height: 40px; border: 1px solid #cbcdd1; background-image: url(../images/common/footer_select.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; padding: 0 10px; font-size: 15px; color: #666;}
|
||||||
footer .btn_go{width: 50px; height: 40px; border: 1px solid #cbcdd1; background-color: #eaecef; vertical-align: middle; border-radius: 5px; color: #666; transition: all 0.1s linear; font-size: 16px;}
|
footer .btn_go{width: 50px; height: 40px; border: 1px solid #cbcdd1; background-color: #eaecef; vertical-align: middle; border-radius: 5px; color: #666; transition: all 0.1s linear; font-size: 16px; margin: 0 0 0 4px;}
|
||||||
footer .btn_go:hover{box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: all 0.1s linear;}
|
footer .btn_go:hover{box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: all 0.1s linear;}
|
||||||
footer .logo,footer address{display: inline-block; vertical-align: middle;}
|
footer .logo,footer address{display: inline-block; vertical-align: middle;}
|
||||||
footer .logo{/*padding: 47px 0;*/ transition: all 0.3s ease;}
|
footer .logo{/*padding: 47px 0;*/ transition: all 0.3s ease;}
|
||||||
footer address {font-size: 14px; font-weight: 300; margin-left: -40px; transition: all 0.3s ease;}
|
footer address {font-size: 14px; font-weight: 400; margin-left: -90px; transition: all 0.3s ease;}
|
||||||
footer address p:first-child{margin-bottom: 8px;}
|
footer address p:first-child{margin-bottom: 8px;}
|
||||||
footer .wa_mark .wa {width: 110px;}
|
footer .site_go{display: flex;align-items: center;justify-content: space-between;}
|
||||||
|
footer .wa_mark .wa {width: 110px;margin: 0 40px 0 0;}
|
||||||
/* //footer */
|
/* //footer */
|
||||||
|
|
||||||
.error_page{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
|
.error_page{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
|
||||||
|
|||||||
274
src/main/webapp/visitEdu/usr/publish/css/common_bak_231011.css
Normal file
274
src/main/webapp/visitEdu/usr/publish/css/common_bak_231011.css
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
body {color: #222;}
|
||||||
|
|
||||||
|
.clearfix::after{display:block;content:"";clear:both;}
|
||||||
|
|
||||||
|
.skip_menu {position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:999;}
|
||||||
|
.skip_menu a{display:block; position:absolute; left:0; padding:10px 20px; height: 50px; line-height:30px; color:#fff; background:#000;width:100%;text-align:center;font-size: 18px;box-sizing: border-box;}
|
||||||
|
.skip_menu a:link,.skip_menu a:visited,.skip_menu a:active{top:-10000px;}
|
||||||
|
.skip_menu a:hover,.skip_menu a:focus{top:0;}
|
||||||
|
|
||||||
|
.logo img {width: 200px;}
|
||||||
|
|
||||||
|
/* header */
|
||||||
|
header{width: 100%; height: 130px; position: fixed; top: 0; left: 0; transition: height .4s ease-in-out, background-color .4s ease-in-out, margin .4s ease-in-out; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid #e2e4e6; z-index: 20; background-color: #fff;}
|
||||||
|
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
|
||||||
|
header::before{position: absolute; content: " "; display: block; top: 130px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .4s ease-in-out;}
|
||||||
|
header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 130px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
|
||||||
|
header.on::after{top: 130px; opacity: 1;}
|
||||||
|
header.on::before{opacity: 1;}
|
||||||
|
|
||||||
|
.gnb_wrap{width: 100%; background-color: #fff; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;}
|
||||||
|
.gnb_wrap .inner{max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
|
||||||
|
.gnb_wrap .site {padding: 8px 20px; background-color: #f5680b ; height: 100%; box-sizing: border-box; vertical-align: middle;}
|
||||||
|
.gnb_wrap .site span{display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600; padding: 0 4px; box-sizing: border-box; background-color: #fff; color: #f5680b; border-radius: 5px; margin-left: 10px; transition: background-color 0.3s ease;}
|
||||||
|
.gnb_wrap .site:hover {background-color: #e86016; transition: background-color 0.3s ease;}
|
||||||
|
.gnb_wrap .area_right *{display: inline-block;}
|
||||||
|
.gnb_wrap .area_right a,.gnb_wrap .area_right .login_after{height: 25px; font-size: 14px; color: #717171; font-weight: 400; line-height: 1.6; letter-spacing: -0.45px; vertical-align: unset;}
|
||||||
|
.gnb_wrap .area_right .login_after{padding-right: 20px; text-align: right; position: relative;}
|
||||||
|
.gnb_wrap .area_right .login_info {position: relative;}
|
||||||
|
.gnb_wrap .area_right .login_after + .login_info {padding-right:20px;}
|
||||||
|
.gnb_wrap .area_right .login_after + .login_info::before {right:7px;}
|
||||||
|
.gnb_wrap .area_right .header_login_wrap {padding-right: 33px;}
|
||||||
|
.gnb_wrap .area_right a i {display: inline-block; background-repeat: no-repeat; vertical-align: middle; margin-bottom: 2px; margin-right: 5px;}
|
||||||
|
.gnb_wrap .area_right .header_login i {background-image: url(../images/common/headerTop_icon1.png); width: 11px; height: 15px;}
|
||||||
|
.gnb_wrap .area_right .header_join {padding-right: 22px;margin:0 -10px 0 0;}
|
||||||
|
.gnb_wrap .area_right .header_join i {background-image: url(../images/common/headerTop_icon2.png); width: 14px; height: 15px;}
|
||||||
|
.gnb_wrap .area_right a:hover{text-decoration: underline;}
|
||||||
|
.gnb_wrap .area_right .login_info::before,.gnb_wrap .area_right .login_after::before{position: absolute; content: " ";width: 1px; height: 13px; background-color: #dbdbdb; top: 50%; right: 13px; transform: translateY(-50%);}
|
||||||
|
.gnb_wrap .area_right .login_after::before {right:7px;}
|
||||||
|
.gnb_wrap .area_right .login_info:last-of-type:before{display: none;}
|
||||||
|
.gnb_wrap .area_left p{display: inline-block; height: 40px; border-right: 1px solid #e5e5e5; font-size: 15px; color: #444; padding: 0 15px; vertical-align: middle; line-height: 36px;}
|
||||||
|
.gnb_wrap .btn_util {margin:0 0 0 10px;}
|
||||||
|
.gnb_wrap .btn_util button{width: 40px; height: 40px; vertical-align: middle; background-repeat: no-repeat; background-position: center; border-left: 1px solid #e2e4e6; }
|
||||||
|
.gnb_wrap .btn_util button:hover{box-shadow: 0 0 5px rgba(0,0,0,.15);}
|
||||||
|
.gnb_wrap .btn_util .btn_minus{margin-right: -5px; background-image: url(../images/common/headerTop_btn1.png);}
|
||||||
|
.gnb_wrap .btn_util .btn_plus{background-image: url(../images/common/headerTop_btn2.png); border-right: 1px solid #e2e4e6;}
|
||||||
|
|
||||||
|
.header{padding: 0 20px; box-sizing: border-box;}
|
||||||
|
.header_inner{max-width: 1400px; width: 100%; height: 90px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; position: relative;}
|
||||||
|
.header_inner .area_right{display: flex;}
|
||||||
|
.header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: 100%; margin: 0 50px;}
|
||||||
|
.header_inner #menu{width: 100%; margin: 0 auto; height: 100%;}
|
||||||
|
.header_inner .depth01 {display: flex; height: 100%;}
|
||||||
|
.header_inner .dep_li_01,
|
||||||
|
.header_inner .dep_li_02,
|
||||||
|
.header_inner .dep_li_03 {justify-content:flex-start;}
|
||||||
|
.header_inner .dep_li_04,
|
||||||
|
.header_inner .dep_li_05,
|
||||||
|
.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
|
||||||
|
.header_inner .depth01_li{position: relative; padding: 0; box-sizing: border-box;}
|
||||||
|
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
|
||||||
|
.header_inner .dep_li_01 .depth01_li{width: 100%;}
|
||||||
|
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
|
||||||
|
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);max-width:270px;}
|
||||||
|
.header_inner .dep_li_05 .depth01_li{width: calc((100% - 50px)/5);}
|
||||||
|
.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
|
||||||
|
.header_inner .dep_li_07 .depth01_li{width: auto;}
|
||||||
|
.header_inner .menu_link{font-size: 18px; font-weight: 600; letter-spacing: -1px; display: flex; align-items: center; justify-content: center; flex-flow: column; height: 100%; position: relative;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; line-height: 1.25;}
|
||||||
|
.header_inner .menu_link::before{position: absolute; content: " "; display: block; width: 0; height: 4px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 87px; z-index: 1;}
|
||||||
|
.header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; }
|
||||||
|
.header_inner .on .menu_link{color: #E95504;}
|
||||||
|
.on .nav_wrap .on .menu_link::before{width: 100%;}
|
||||||
|
.header_inner .depth02{position: absolute; text-align: center; margin-top: 25px; width: 100%; left: 50%; transform: translateX(-50%);}
|
||||||
|
.header_inner .depth02 a{font-size: 17px; font-weight: 300; line-height: 1.3; height: 45px; display: flex; align-items: center; justify-content: center; word-break: keep-all;white-space:nowrap;}
|
||||||
|
.header_inner .depth02 a:hover,.header_inner .depth02 a:focus{color: #E95504;}
|
||||||
|
|
||||||
|
.header_inner button{width: 27px; height: 26px; background-repeat: no-repeat;}
|
||||||
|
.header_inner .btn_search{background-image: url(../images/common/btn_search.png); margin-right: 25px; margin-top: -2px;}
|
||||||
|
.header_inner .btn_menu{background-image: url(../images/common/btn_menu.png);}
|
||||||
|
.header_inner button.btn_mobile{display: none; margin: 0 8px; vertical-align: middle; margin-top: -2px;height:100%;background-position:center center;}
|
||||||
|
.header_inner .btn_login{background-image: url(../images/common/m_headerTop_icon1.png);background-size:21px auto;}
|
||||||
|
.header_inner .btn_logout{background-image: url(../../../../kccadrPb/usr/image/common/btn_logout.png);}
|
||||||
|
.header_inner .btn_join{width: 35px; background-image: url(../images/common/m_headerTop_icon2.png);background-size:26px auto;}
|
||||||
|
.header_inner .btn_usredit{width: 35px; background-image: url(../../../../kccadrPb/usr/image/common/btn_usredit.png);}
|
||||||
|
.header_inner .m_header_login,
|
||||||
|
.header_inner .m_header_join {display:none;}
|
||||||
|
/* //header */
|
||||||
|
|
||||||
|
/* full menu */
|
||||||
|
.full_menu{visibility: hidden; width: 100%; position: fixed; background-color: #fff; min-height: 500px; padding: 50px; box-sizing: border-box; top: -500px; transition: top 0.5s ease, box-shadow 0.3s ease; z-index: 21;}
|
||||||
|
.full_menu.on{visibility: visible; top: 0; box-shadow: 0 5px 8px rgba(0,0,0,0.1);}
|
||||||
|
.full_menu .inner{max-width: 1400px; width: 100%; position: relative; margin: 0 auto;}
|
||||||
|
.full_menu .btn_close{background-image: url(../images/common/btn_close.png); width: 40px; height: 40px; background-repeat: no-repeat; position: absolute; right: 0; top: 15px; border: 1px solid #ef7b0f; border-radius: 3px; background-position: center;}
|
||||||
|
.full_menu .depth01{display: flex; justify-content: space-around; text-align: center; margin: 80px 50px 0 50px;}
|
||||||
|
.full_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.15); transition: width .4s ease-in-out;}
|
||||||
|
.full_menu .depth01 .menu_link{font-size: 20px; font-weight: 500; color: #ea5404; position: relative; padding-bottom: 25px; letter-spacing: -1px; text-align: center; height: 40px;}
|
||||||
|
.full_menu .depth01 .menu_link>span {display: block; padding-top: 5px;}
|
||||||
|
.full_menu .depth01 .menu_link::before{position: absolute; content: " "; width: 75px; height: 3px; background-color: #ea5404; left: 50%; bottom: 0; transform: translateX(-50%);}
|
||||||
|
.full_menu .depth02{margin-top: 10px;}
|
||||||
|
.full_menu .depth02 a{height: 40px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; font-size: 17px; font-weight: 400;}
|
||||||
|
.full_menu .depth02 a:hover {font-weight: 700;}
|
||||||
|
.full_menu .link{display: inline-block; width: 16px; height: 16px; background-image: url(../images/common/link_icon.png);background-repeat: no-repeat; margin-left: 6px;}
|
||||||
|
/* //full menu */
|
||||||
|
|
||||||
|
/* moblie menu */
|
||||||
|
#m_menu{visibility: hidden; height: 0;}
|
||||||
|
/* //moblie menu */
|
||||||
|
|
||||||
|
/* path */
|
||||||
|
.path {width: 100%; background-color: #ebedf2; height: 50px;}
|
||||||
|
.path .pathedfr {max-width: 1400px; padding: 0 10px; margin: 0 auto; box-sizing: border-box;}
|
||||||
|
.path .pathedfr ul {display: flex; align-items: center; height: 50px;}
|
||||||
|
.path .pathedfr ul li {align-self: center; font-size: 16px; color: #666; font-weight: 300;}
|
||||||
|
.path .pathedfr ul li:nth-child(even) {color: #666; font-size: 14px; margin: 0 8px;}
|
||||||
|
.path .pathedfr ul li.home i {background-image: url(../images/common/home_icon.png); width: 19px; height: 17px; display: inline-block; margin-bottom: -2px; margin-right: 10px;}
|
||||||
|
.path .m_pathedfr {display:none;}
|
||||||
|
|
||||||
|
/* snb */
|
||||||
|
/* .snb {width:230px;} */
|
||||||
|
.snb > p {color:#333333;font-size:27px; font-weight: 600;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif;}
|
||||||
|
.snb > h2 > span {color: #e95504; display: block; font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; padding-top: 9px;}
|
||||||
|
.snb .ssleftxt{width:100%;margin-top:25px;}
|
||||||
|
.snb .ssleftxt ul li{width: 100%; height: 45px; border-radius: 5px; border: 1px solid #d5d7dc; margin-bottom: 5px; display: table;}
|
||||||
|
.snb .ssleftxt ul li:last-child {margin-bottom: 0;}
|
||||||
|
.snb .ssleftxt ul li a{width:100%;height:100%;color:#666;padding:0 15px;box-sizing:border-box; font-size: 18px; display: table-cell; vertical-align: middle; font-weight: 300;}
|
||||||
|
.snb .ssleftxt ul li a span{font-size: 18px; line-height: 18px;}
|
||||||
|
.snb .ssleftxt ul li.menu_on{background-color: #ec5908 ; border: 1px solid #ec5908;}
|
||||||
|
.snb .ssleftxt ul li.menu_on a {color:#fff; background-image: url(../images/common/arrow.png); background-repeat: no-repeat; background-position: 91% 50%;}
|
||||||
|
/*// snb */
|
||||||
|
|
||||||
|
.navigation {height:50px;border-bottom:1px solid #d5d5d5;}
|
||||||
|
.container .navigation .inner{margin: 0 auto;}
|
||||||
|
.navigation .list {border-left:1px solid #d5d5d5;}
|
||||||
|
.navigation .list:after {content:'';display:block;clear:both;}
|
||||||
|
.navigation .list > li {position:relative;float:left;border-right:1px solid #d5d5d5;}
|
||||||
|
.navigation .list > li:first-child {border-left:1px solid #d5d5d5;}
|
||||||
|
.navigation .list > li.home {display:none;border-left:1px solid #d5d5d5;}
|
||||||
|
.navigation .list > li.home a {display:block;width:49px;height:50px;font-size:0;text-indent:-9999em;background:url(../images/content/select.png) no-repeat center center;}
|
||||||
|
.navigation .list > li .navi_title {position:relative;width:230px;padding:0 20px;font-size:16px;line-height:50px;text-align:left;color:#555;box-sizing:border-box;}
|
||||||
|
.navigation .list > li .navi_title:after {content:'';position:absolute;right:20px;top:1px;width:18px;height:48px;background:url(../images/content/select.png) no-repeat center center;}
|
||||||
|
.navigation .list > li .navi_depth {display:none;position:absolute;left:-1px;top:50px;width:100%;border:1px solid #d5d5d5;background:#fff;z-index:2;}
|
||||||
|
.navigation .list > li .navi_depth li a {display:block;height:40px;padding:0 20px;font-size:16px;line-height:40px;}
|
||||||
|
.navigation .list > li .navi_depth li a:hover,
|
||||||
|
.navigation .list > li .navi_depth li a:focus {font-weight:500;color:#ff6009;background:#fff3ec;}
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer{width: 100%; background-color: #fff; position: relative; padding: 0 10px; box-sizing: border-box; color: #666; position: relative;}
|
||||||
|
footer::before { content: ""; width: 100%; height: 50px; border-top: 1px solid #e2e3e7; border-bottom: 1px solid #e2e3e7; position: absolute; top: 0; left: 0;}
|
||||||
|
footer .site ul {display: flex; height: 50px; align-items: center;}
|
||||||
|
footer .inner{max-width: 1400px; width: 100%; margin: 0 auto; }
|
||||||
|
footer .area_top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 45px 0;}
|
||||||
|
footer .site{font-size: 16px; position: relative;}
|
||||||
|
footer .site li{padding: 0 24px; position: relative; font-weight: 300; transition: all 0.3s ease;}
|
||||||
|
footer .site li::before{position: absolute; content: " "; width: 1px; height: 14px; background-color: #cbced4; top: 50%; right: 0; transform: translateY(-50%);}
|
||||||
|
footer .site li:last-child::before{display: none;}
|
||||||
|
footer .site li:first-child{padding-left: 0;}
|
||||||
|
footer .site li a:hover {text-decoration: underline;}
|
||||||
|
footer select{height: 40px; border: 1px solid #cbcdd1; background-image: url(../images/common/footer_select.png); background-position: calc(100% - 15px) center; background-repeat: no-repeat; padding: 0 10px; font-size: 15px; color: #666;}
|
||||||
|
footer .btn_go{width: 50px; height: 40px; border: 1px solid #cbcdd1; background-color: #eaecef; vertical-align: middle; border-radius: 5px; color: #666; transition: all 0.1s linear; font-size: 16px;}
|
||||||
|
footer .btn_go:hover{box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: all 0.1s linear;}
|
||||||
|
footer .logo,footer address{display: inline-block; vertical-align: middle;}
|
||||||
|
footer .logo{/*padding: 47px 0;*/ transition: all 0.3s ease;}
|
||||||
|
footer address {font-size: 14px; font-weight: 300; margin-left: -40px; transition: all 0.3s ease;}
|
||||||
|
footer address p:first-child{margin-bottom: 8px;}
|
||||||
|
footer .wa_mark .wa {width: 110px;}
|
||||||
|
/* //footer */
|
||||||
|
|
||||||
|
.error_page{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
|
||||||
|
.error_wrap{border: 1px solid #d5d5d5; display: inline-flex; align-items: center; margin: 200px auto 50px auto; padding: 15px 50px 15px 0; justify-content: center;}
|
||||||
|
.error_wrap i{display: block; width: 266px; height: 200px; background-image: url(../../../adm/publish/image/warming.jpg); border-right: 1px solid #d5d5d5; }
|
||||||
|
.error_wrap .text_area{width: calc(100% - 266px); font-size: 20px; padding-left: 30px; text-align: left;}
|
||||||
|
.error_wrap .text_area p{font-size: 16px; color: #555; margin-top: 10px; line-height: 1.4;}
|
||||||
|
.error_wrap .error_btn {text-align:center;}
|
||||||
|
.error_page .error_btn button {background-color:#1b6fcd; color: #fff; padding: 8px 25px; font-size: 16px;}
|
||||||
|
|
||||||
|
@media all and (max-width: 1280px){
|
||||||
|
/* header */
|
||||||
|
.header_inner .nav_wrap{padding: 0 5px; margin: 0 5px;}
|
||||||
|
.header_inner .menu_link{font-size: 17px; letter-spacing: -0.25px;}
|
||||||
|
/* //header */
|
||||||
|
footer address {width: 36%;}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1024px){
|
||||||
|
/* moblie menu */
|
||||||
|
.nav_wrap,#menu{display: none;}
|
||||||
|
|
||||||
|
#m_menu{position: fixed; width: 100%; height: 100%; background-color: #fff; box-sizing: border-box; top: 0; right: -100%; transition: all 0.5s ease; z-index: 26;}
|
||||||
|
#m_menu.on{visibility: visible; right: 0; transition: all 0.5s ease;}
|
||||||
|
#m_menu .area_top{text-align: right;}
|
||||||
|
#m_menu .btn_close_wrap {width: 100%; height: 70px; position: absolute; top:0; left: 0; background-color: #ef7b0f;}
|
||||||
|
#m_menu .btn_close{background-image: url(../images/common/btn_close2.png);background-repeat: no-repeat; background-position: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 3px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
|
||||||
|
#m_menu .btn_close:hover {box-shadow: 0 0 5px rgba(0,0,0,.25);}
|
||||||
|
#m_menu .depth01{width: 100%; padding: 0 10px; margin-top: 70px;box-sizing: border-box;}
|
||||||
|
#m_menu .depth01_li{overflow: hidden; height: 60px; transition: height 0.3s linear; display: block; position: relative;}
|
||||||
|
#m_menu .depth01_li::before{position: absolute; content: " "; width: 100%; height: 1px; background-color: #e5e5e5; opacity: 0;}
|
||||||
|
#m_menu .depth01_li.on{height: 280px;transition: height 0.3s linear;}
|
||||||
|
#m_menu .depth01_li.on::before{opacity: 1; bottom: 0;}
|
||||||
|
#m_menu .menu_tit{font-size: 20px; height: 60px; border-bottom: 1px solid #e5e5e5; width: 100%; text-align: left; padding-left: 20px; position: relative;}
|
||||||
|
#m_menu .menu_tit::after {background-image: url(../images/common/m_menu_plus.png); background-position: center; background-repeat: no-repeat; width: 36px; height: 36px; content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
|
||||||
|
#m_menu .menu_tit span {color: #f37632;}
|
||||||
|
#m_menu .depth01_li.on .menu_tit {border-bottom: 1px solid #f37632; color: #f37632;}
|
||||||
|
#m_menu .depth02{visibility: hidden; height: 100%; margin: 10px 0; opacity: 0; transition: all 0.3s linear; background-color: #f5f5f5;}
|
||||||
|
#m_menu .on .depth02{visibility: visible; height: auto; transition: all 0.3s linear; opacity: 1;}
|
||||||
|
#m_menu .depth02 a{height: 50px; display: flex; align-items: center; padding-left: 20px; font-size: 17px;}
|
||||||
|
/*// moblie menu */
|
||||||
|
|
||||||
|
.snb {display: none;}
|
||||||
|
.header_inner button.btn_mobile {display:block;}
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer .area_top {align-items: flex-start; padding: 40px 0 90px 0;}
|
||||||
|
footer address {width: 72%}
|
||||||
|
footer .wa_mark {position: absolute; bottom: 6px; right: 0;}
|
||||||
|
footer .site_go {position: absolute; bottom: 23px; left: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px){
|
||||||
|
/* header */
|
||||||
|
header {height:70px;border-bottom:1px solid #e2e4e6;box-sizing:border-box;}
|
||||||
|
header .gnb_wrap {overflow:visible;height:0;border:0;}
|
||||||
|
header .gnb_wrap .site,
|
||||||
|
header .gnb_wrap .btn_util {display:none;}
|
||||||
|
header .gnb_wrap .area_right, .gnb_wrap .area_left p {display:none;}
|
||||||
|
header .header {padding:0 8px 0 10px;}
|
||||||
|
header .header .header_inner {height:70px;}
|
||||||
|
header .header .header_inner h1 a {display:flex;height:70px;align-items:center;}
|
||||||
|
header .header .header_inner h1 a img {height:43px;}
|
||||||
|
header .header .header_inner .area_right {height:100%;}
|
||||||
|
header .header .header_inner .area_right .btn_search {display:none;}
|
||||||
|
header .header .header_inner .area_right .btn_menu {width:35px;height:100%;background-image:url(../images/common/m_btn_menu.png);background-size:29px 21px;background-position:center center;}
|
||||||
|
header .header .header_inner .area_right .m_header_login {display:flex;width:40px;height:100%;margin:0 5px 0 0;padding:0;font-size:0;align-items:center;justify-content:center;text-indent:-9999em;z-index:1;}
|
||||||
|
header .header .header_inner .area_right .m_header_login i {width:21px;height:28px;margin:0;background-image:url(../images/common/m_headerTop_icon1.png);background-size:21px auto;}
|
||||||
|
header .header .header_inner .area_right .m_header_join {display:flex;width:40px;height:100%;margin:0 5px 0 0;padding:0;font-size:0;align-items:center;justify-content:center;text-indent:-9999em;z-index:1;}
|
||||||
|
header .header .header_inner .area_right .m_header_join i {width:26px;height:28px;margin:0;background-image:url(../images/common/m_headerTop_icon2.png);background-size:26px auto;}
|
||||||
|
|
||||||
|
.path {height:50px;background:#f5680b;}
|
||||||
|
.path .pathedfr {display:none;}
|
||||||
|
.path .m_pathedfr {display:block;}
|
||||||
|
.path .m_pathedfr > ul:after {content:'';display:block;clear:both;}
|
||||||
|
.path .m_pathedfr > ul > li {position:relative;float:left;width:50%;height:100%;border-left:1px solid #fcae83;box-sizing:border-box;}
|
||||||
|
.path .m_pathedfr > ul > li:first-child {border:0 none;}
|
||||||
|
.path .m_pathedfr > ul > li .path_btn {position:relative;display:block;width:100%;height:50px; padding:0 0 0 10px;font-size:18px;text-align:left;color:#fff;}
|
||||||
|
.path .m_pathedfr > ul > li .path_btn:after {content:'';position:absolute;right:15px;top:0; width:18px;height:50px;background:url(../images/common/path_btn_arrow.png) no-repeat left top;}
|
||||||
|
.path .m_pathedfr > ul > li .path_btn.active:after {transform:rotate(180deg);}
|
||||||
|
.path .m_pathedfr > ul > li ul {display:none;position:absolute;left:0;top:50px;width:100%; padding:3px 0;border-top:1px solid #fcae83;background:#fb8b4e;box-sizing:border-box;}
|
||||||
|
.path .m_pathedfr > ul > li ul li a {display:block;padding:0 0 0 10px;font-size:16px;line-height:35px;color:#fff;}
|
||||||
|
|
||||||
|
.container .navigation .inner {padding:0;}
|
||||||
|
.navigation .list > li {width: calc((100% - 2px)/2);}
|
||||||
|
.navigation .list > li .navi_title{width: 100%;}
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer .site {margin:0 -10px;}
|
||||||
|
footer .site ul {justify-content:center;}
|
||||||
|
footer .site ul li {padding:0 10px;font-size:14px;text-align:center;}
|
||||||
|
footer .site ul li:first-child {padding:0 10px;}
|
||||||
|
footer .area_top {display:block;padding:20px 10px;}
|
||||||
|
footer .area_top .logo {display:block;}
|
||||||
|
footer .area_top .logo a {display:block;}
|
||||||
|
footer .area_top .logo a img {width:140px;}
|
||||||
|
footer .area_top address {display:block; width: 100%; margin:15px 0 80px 0;}
|
||||||
|
footer .area_top address p {margin:0 0 4px;font-size:14px;line-height:20px;}
|
||||||
|
footer .area_top .site_go {left:initial;right:0;top:20px;width:calc(100% - 165px);}
|
||||||
|
footer .area_top .site_go:after {content:'';display:block;clear:both;}
|
||||||
|
footer .wa_mark {left: 0; bottom: 12px;}
|
||||||
|
footer .area_top .site_go select {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;float:left;width:calc(100% - 45px);height:35px;padding:0 35px 0 15px;font-size:14px;background-size:10px;}
|
||||||
|
footer .area_top .site_go .btn_go {float:right;width:40px;height:35px;font-size:14px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
|
||||||
|
.header_inner .area_right{/* width: 80px; */justify-content: space-between;}
|
||||||
|
.header_inner .btn_search{margin-right: 0;}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user