/* ******************************************************* * filename : layout_responsive.css ******************************************************** */ @media all and (max-width: 1366px) { .foot_r { padding-top: 30px; } .foot_l ul { margin-top: 30px; } .foot_l ul li h2 { padding-bottom: 3px; } .foot_l ul li a { font-size: 14px; line-height: 20px; margin: 6px 0; } .foot_l { padding-bottom: 10px; } .footimg { padding-top: 30px; } .footdown { padding-top: 15px; padding-bottom: 15px; font-size: 14px; } #header #gnb>ul>li>a, #header #gnb .li>a{ padding: 0 10px; } } @media all and (max-width: 1279px) { #gnb>ul>li>a, #gnb .li>a { padding: 0 15px; } } @media all and (max-width: 1200px) { #gnb>ul>li>a, #gnb .li>a { padding: 0 12px; } .gnb-2dep-menu-txt { padding-left: 30px; } .header-util-box { margin-right: 15px; } .header-lang { padding-right: 15px; margin-left: 15px; } #header .logo { left: 40px; } .gnb-2dep-menu-list { padding-left: 40px; } .header-util-box .header-lang:nth-child(2) { display: none; } #gnb { display: none; } #header .header-util-box{ width: 235px; } } @media all and (max-width: 1100px) { #gnb>ul>li>a, #gnb .li>a { padding: 0 10px; } } @media all and (max-width: 991px) { #header .header-util-box{ border-left: none; } .index-wrapper .header-lang .lang-open-btn{display: none;} #header .header-lang:before, #header .header_ser:after{ display: none; } #header, #headerInnerWrap { height: 100px; } .head_nav { background: transparent; width: 100px; height: 100px; text-align: center; right: 0; top: 0; position: fixed; z-index: 10000; } .header-right { position: inherit; float: right; display: none; } .index-wrapper #header { position: fixed; z-index: 99 } .index-wrapper #headerInnerWrap { position: fixed; z-index: 10000; } #header .logo .pc-logo { display: none; } #header .logo .m-logo { display: block; } #header.sub-hidden { -ms-transform: translateY(-81px); -o-transform: translateY(-81px); -moz-transform: translateY(-81px); -webkit-transform: translateY(-81px); transform: translateY(-81px); } .search-box-container { padding: 0 30px; } .header-util-box { right: 0px; } .sitemap-line-btn, .sitemap-custom-btn { display: none; } .index-wrapper .header-lang.mobile-gnb-open { background-color: #000; border-color: #000 } .index-wrapper .header-lang.mobile-gnb-open .lang-open-btn { color: #fff; } .index-wrapper .header-lang.mobile-gnb-open>ul { background-color: #000; border-color: #000 } .index-wrapper .header-lang.mobile-gnb-open>ul>li>a { color: #fff; } .gnb-overlay-bg { display: none } .gnb-overlay-bg-m { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998; } #gnbM { display: block; position: fixed; top: 0px; right: -100%; width: 100%; height: 100%; background-color: #fff; z-index: 9999; transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); visibility: hidden; } #gnbM.open { right: 0px; visibility: visible; } .gnb-navigation-wrapper { position: relative; height: 100%; box-sizing: border-box; padding-top: 80px; overflow-y: auto; margin: 0 15px; } /* padding-top : Header 높이값 */ .header-util-menu-box+.gnb-navigation-wrapper { padding-top: 0 } .index-wrapper #headerInnerWrap .mn-bar { top: 80px; } .footup { padding: 0 30px; } .footdown { padding: 15px 30px; } .foot_r { padding-left: 30px; } .foot_top { padding: 28px 30px; } .footimg { padding-top: 30px; } .link .dropdown { padding-top: 30px; } /* GNB Mobile */ #navigation>li { border-bottom: 1px solid #e5e5e5; position: relative; text-align: left; overflow: hidden; } #navigation>li:first-child { border-top: 1px solid #e5e5e5; } #navigation>li>a { position: relative; display: block; float: left; padding: 15px; color: #222; font-size: 17px; font-weight: 700; } #navigation>li>a .kr { font-weight: 400; } #navigation>li .mm { position: absolute; width: 30px; top: 15px; right: 0px; cursor: pointer; } #navigation>li .mm svg { font-size: 12px; color: #CFCFCF; width: 26px; height: 26px; } #navigation>li .mm svg path { fill: #CFCFCF; } #navigation>li.active { border-bottom-color: transparent; } #navigation>li.active>a { color: #D81F27; } #navigation>li.active .mm svg { color: #ed1c24; transform: rotate(-180deg) } #navigation>li .gnb-2dep { display: none; background-color: #f5f5f5; padding: 0 15px; border: 1px solid #e5e5e5; border-left: none; border-right: none; float: left; width: 100%; } #navigation>li .gnb-2dep>li { position: relative; height: auto !important; border-bottom: 1px solid #e5e5e5; } #navigation>li .gnb-2dep>li:last-child { border-bottom: 0 } #navigation>li .gnb-2dep>li>a { display: block; color: #999; font-size: 16px; padding: 12px 0px; } #navigation>li .gnb-2dep>li>a .gnb-icon { right: 0px; } #navigation>li .gnb-2dep>li.on { border-bottom-color: #ed1c24 } #navigation>li .gnb-2dep>li.on>a, #navigation>li .gnb-2dep>li.on>a .gnb-icon i { color: #ed1c24; } #navigation>li .gnb-2dep>li>.gnb-3dep { display: none; padding: 10px; background-color: #aaa; margin: 0 10px } #navigation>li .gnb-2dep>li>.gnb-3dep>li>a { display: block; padding: 8px 0; font-size: 13px; color: #fff; } #navigation>li .gnb-2dep>li>.gnb-3dep>li>a:before { display: inline-block; content: "-"; margin-right: 5px; } header #util-search-box { z-index: 100000; } #header .logo { left: 15px; } .nav-open-btn { display: inline-block; outline: 0; background: none; border: none; padding: 0; margin-top: 30px; width: 30px; height: 35px; transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); } .nav-open-btn .line { display: block; width: 15px; float: right; height: 2px; margin: 5px 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header .nav-open-btn .line{ background-color: #fff; } #header.white-bg .nav-open-btn .line{ background-color: #a4a4a4; } .nav-open-btn .line:nth-child(2) { width: 30px; } .nav-open-btn:hover .line { width: 30px; } .nav-open-btn.active .line { background-color: #a8a8a8; } .nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4) { opacity: 0; } .nav-open-btn.active .line:nth-child(1) { -webkit-transform: translateY(12px) rotate(45deg); -ms-transform: translateY(12px) rotate(45deg); -o-transform: translateY(12px) rotate(45deg); transform: translateY(12px) rotate(45deg); width: 30px; } .nav-open-btn.active .line:nth-child(3) { width: 30px; -webkit-transform: translateY(-12px) rotate(-45deg); -ms-transform: translateY(-12px) rotate(-45deg); -o-transform: translateY(-12px) rotate(-45deg); transform: translateY(-12px) rotate(-45deg); } #header.sub-hidden .nav-open-btn, #header.content-menu-fixed .nav-open-btn { transform: translateY(-80px) } #header.sub-hidden.up .nav-open-btn { transform: translateY(0) } #header.content-menu-fixed.up .nav-open-btn { transform: translateY(-80px) } #header .header-lang svg path { fill: #CFCFCF; stroke: #CFCFCF; } #header .sousuoend svg path, #header .cuohao svg path { fill: #CFCFCF; } .search { top: 80px; } #sitemapContent { display: none } .gnb-navigation-wrapper { position: relative; height: 100%; box-sizing: border-box; padding-top: 100px; overflow-y: auto; margin: 0 15px; } /* padding-top : Header 높이값 */ .header-util-menu-box+.gnb-navigation-wrapper { padding-top: 0 } .index-wrapper #headerInnerWrap .mn-bar { top: 100px; } } @media all and (max-width: 640px) { .header-lang { padding-right: 8px; margin-left: 8px; width: 35px; } #headerInner { padding-left: 0; } .header_ser { margin-left: 8px; } .header-util-box { margin-right: 10px; } #header .logo { width: 38%; } .foot_l ul li a { font-size: 16px; margin: 8px 0 } header #util-search-box .search-box-container .auto-compile .auto-compile-list ul>li { width: 50%; } .header_ser{ margin: 0 8px; } #header .header_ser:after{ right: -8px; } #header.white-bg .header-util-box{ border-left-color: transparent; } #header .header-util-box{ width: 180px; } } @media all and (max-width: 480px) { #header.sub-hidden { -ms-transform: translateY(-61px); -o-transform: translateY(-61px); -moz-transform: translateY(-61px); -webkit-transform: translateY(-61px); transform: translateY(-61px); } .gnb-style-full-member .gnb-navigation-wrapper { bottom: 60px; } #navigation>li>a { font-size: 18px; } } @media all and (max-width: 1200px) { .footup, .footdown { padding: 0 30px; } .foot_top { padding: 28px 30px; } } @media all and (max-width:1220px) { .footer-partner-wrapper { margin: 0 30px } } @media all and (max-width:800px) { /* -------- FOOTER -------- */ #footerPartnerListContent { padding: 10px 0; } #footerPartnerListContent .area-box { padding: 0 } #footerTop { padding: 20px 0 } } /* ****************** MODAL LAYERPOPUP ********************** */ @media all and (max-width: 991px) { /*footer*/ .foot_r { float: right; width: 100%; padding-left: 0; padding-bottom: 15px; } .foot_l { float: left; width: 100%; padding-bottom: 15px; max-width: inherit; } .footdown { display: block; min-height: inherit; padding: 15px 30px; line-height: 1.4; } .footdown .right { float: left; width: 100%; } .modal-close-btn i { font-size: 24px } } @media all and (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs { display: block !important; } /*footer*/ .back-top { bottom: 112px; width: 30px; height: 30px; padding: 5px; line-height: 20px; } .back-top img { max-width: 11px; } .foot_top { padding: 28px 15px; } .footup { padding: 30px 0 15px 0; } .footdown { padding: 15px 0; text-align: center; } .footer { padding-bottom: 0px; } .foot_r { padding-top: 0; } .footimg p { font-size: 14px; margin: 5px 0; line-height: 24px; } .footimg { padding-top: 15px; width: 100%; } .foot_l ul li h2 i { display: block; float: right; background-image: url("../images/footnav.png"); background-position: center; background-repeat: no-repeat; background-size: 8px 15px; width: 30px; height: 30px; cursor: pointer; } .foot_l .collapse { padding-top: 10px; } .foot_l ul { margin-top: 0; margin: 0; } .foot_l ul li { width: 100%; padding: 0; padding-top: 10px; padding-bottom: 10px; } .foot_l ul li h2 { overflow: hidden; padding: 0; margin: 0; line-height: 30px; padding-bottom: 5px; border-bottom: 1px solid #DBDBDB; } .foot_l ul li h2 a { float: left; margin: 0; line-height: inherit; } .link_eject ul li { width: 100%; } }