.first_dropit:after, .sub_nav .first_nav:after, .sub_nav li a, #m-lnb > ul > li > a:after{ -webkit-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -moz-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -o-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); -ms-transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000); } .lang_kr .logo a{} .lang_en .logo a{} .lang_ch .logo a{} .lang_jp .logo a{} .lang_nav{position: absolute; top: 50%; transform: translateY(-50%); right: calc(4% + 60px); text-align: center;} .lang_nav .nav-dropit{position: relative;} .lang_nav li:first-child{margin-left: 0 !important;} .lang_nav li a.dropit_lang{position: relative; display: block; height: 30px; line-height: 30px; padding-left: 30px; font-size: 19px; font-weight: 700;} .lang_nav li a.dropit_lang:after{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 30px; height: 30px; background: url("../imgs/lang.png") no-repeat center; background-size: 20px;} .lang_nav li .dropit-submenu{position: absolute; width: 60px; left: 50%; margin-left: -30px; padding: 5px 0; background: #E43C00;} .lang_nav li li a{border-left: 0; height: 30px; line-height: 30px; color: #fff; font-weight: 700;} .lang_nav li.active a{text-decoration: underline;} /* Top Link */ .top_link{position: absolute; top: 50%; transform: translate(960px, -50%); right: 50%; text-align: center;} .top_link a{display: inline-block; font-size: 16px; font-weight: 500; padding: 6px 26px; border-radius: 30px; color: #fff;} .top_link a.ebook_btn{background: #000; color: #12DF49; font-weight: 600;} .top_link a.pro_btn{background: var(--one-gradient);} .top_link a:hover{text-decoration: underline;} /* ========================================== PC ========================================== */ /* Header Nav */ #jheader-wrap{position: fixed; z-index: 100; width: 100%; height: 80px; background: #fff; transition: all 0.3s; border-bottom: 1px solid rgba(0, 0, 0, 0);} #jheader-wrap .depth3{display: block;} #jheader{width: 100%;} #jheader .lnb-line{width: 100%; height: 100%; text-align: center;} .jheader_inner{position: relative; width: 100%; max-width: 1400px; margin: 0 auto;} #jheader.fixed{position: fixed; top: 0; width: 100%;} #jheader .lnb-line:after{content: ""; visibility: hidden; display: block; height: 0; clear: both;} #jlnb{width: 100%; padding: 0; box-sizing: border-box; display: inline-block; position: static;} #jlnb *{box-sizing: border-box;} #jlnb > ul:after{content: ""; visibility: hidden; display: block; height: 0; clear: both;} #jlnb > ul{width: 100%; display: flex; justify-content: center;} #jlnb > ul > li{display: inline-block; height: 80px; line-height: 80px; transition: all 0.5s; white-space: nowrap; margin: 0 10px;} #jlnb > ul > li:nth-child(2), #jlnb > ul > li:nth-child(3){margin: 0;} #jlnb > ul > li:nth-child(4){margin-right: 30px;} #jlnb > ul > li > a{position: relative; display: block; width: 100%; height: 100%; text-align: center; font-size: 19px; color: #212121; padding: 0 50px; overflow: hidden; transition: all 0.2s; font-weight: 600;} #jlnb > ul > li > a:hover{color: var(--one-point);} #jlnb > ul > li > a span{position: absolute; display: block; width: 0; height: 0; background: var(--one-point); transition: all 0.4s; bottom: -1px; left: 50%;} #jlnb > ul > li:hover > a span{width: 100%; height: 4px; left: 0;} #jlnb > ul > li > ul{position: absolute; top: 80px; left: 0; width: 100%; display: none; box-sizing: content-box; z-index: 2; background: #fff; height: 75px;} #jlnb > ul > li > ul ul{position: absolute; width: 100%; display: none; border: 1px solid #525252; box-sizing: content-box; top: 0; left: 100%; margin-left: 0px;} #jlnb > ul li.on > div > ul{position: absolute; display: block;} #jlnb > ul li.on > ul{position: absolute; display: block;} #jlnb > ul > li li{line-height: 75px; padding: 0;} #jlnb > ul > li li > a{width: 100%; height: 100%; display: block; padding: 0; color: #212121; font-size: 17px;} #jlnb > ul > li li > a:hover{color: var(--one-point);} #jlnb .arrow{position: absolute; width: 30px; height: 30px; font-size: 14px; color: #fff; display: inline-block; right: -5px; top: 50%; margin-top: -15px; text-align: center; line-height: 30px; z-index: 1;} #jlnb ul.depth2{height: auto;} #jlnb ul.depth2 > li{position: relative; float: left; vertical-align: top; width: 180px; text-align: left; padding: 36px 0; margin-left: 2%;} #jlnb ul.depth2 > li > a{font-size: 16px; font-weight: 400; line-height: 1.6;} #jlnb ul.depth2 .depth2_child > ul{position: relative; width: 100%; border: 0; box-sizing: border-box; top: 0; left: 0; margin-left: 0px; padding-top: 10px;} #jlnb ul.depth2 .depth2_child > ul li{width: 100%; line-height: 23px; padding-left: 2px; margin-bottom: 9px;} #jlnb ul.depth2 .depth2_child > ul li a:hover{color: #000; text-decoration: underline;} #jlnb ul.depth2 > li li > a{display: inline-block; font-size: 16px; white-space:normal;} /* Logo */ .logo{height: 100%; text-align: center; position: absolute; left: 50%; transform: translateX(-960px);} .logo a{display: block; width: 129px; height: 80px; line-height: 80px; background-image: url(../imgs/logo.png); background-position: center left; background-size: 100%; background-repeat: no-repeat;} /* Sitemap Button */ #open-button{position:absolute; z-index:2000; right: 4%; top:0; width:24px; height:80px; cursor:pointer; display:block; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; } #open-button > div{width: 24px; height: 80px;} #open-button .navicon-line{position:absolute; width:24px; height:2px; border-radius:1px; background:#000; -webkit-transition:all .7s ease-out; -moz-transition:all .7s ease-out; -o-transition:all .7s ease-out; transition:all .7s ease-out; } #open-button .nl1{top: 31px;} #open-button .nl2{top: 39px;} #open-button .nl3{top: 47px;} #open-button.on>div>div{width:25px; position:absolute; top:15px; right:10px; margin:0; padding:0; background-color:#000; -ms-transform:rotate(225deg); -webkit-transform:rotate(225deg); transform:rotate(225deg); } #open-button.on>div>div:first-child{ -ms-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); } /* Sitemap */ #sitemap {border:0; width:100%; height: 100%; top: 0 !important; left: 0 !important; position: fixed !important;} #sitemap h2{font-size:36px; color:#fff; text-align:center; padding:0 0 20px 0; width:100%; border-bottom:1px solid rgba(0, 0, 0, .3)} #sitemap .depth1{margin: 120px 50px 0; height: 100%;} #sitemap .depth1 > li{float:left; width:25%; height: 100%; border-left: 1px solid rgba(0, 0, 0, 0.1); padding: 0 20px;} #sitemap .depth1 > li:first-child{border-left: 0;} #sitemap .depth1 > li > a{font-size:25px; display:block;text-align:left;color:#212121;margin-bottom:30px; margin-top: 30px; font-weight: 700;} #sitemap .depth1 .nav_num{display: block; font-size: 28px; font-weight: bold; color: #212121;} #sitemap .depth2 > li{margin-top: 10px;} #sitemap .depth2 > li:first-child{margin-top: 0;} #sitemap .depth2 > li > a{font-size:17px; font-weight: normal; display:block;line-height:1.7;color:#212121;opacity:0.5;} #sitemap .depth2 > li > a:hover{text-decoration: underline;} #sitemap .depth3 > li > a{font-size:14px; display:block; line-height:1.7; padding-left:25px; color:#212121;opacity:0.7;} #sitemap .depth3 > li > a:hover{text-decoration: underline;} #sitemap .mfp-close{position:absolute; right: 5%; top:20px; z-index:1; width:60px; height:60px; border:0; color:#212121; font-size: 30px;} #sitemap .mfp-close:after {background: url(../imgs/arrow_closed.png) no-repeat center center;} #sitemap .arrow i{display:none} .b-modal{opacity: 1 !important;} #sitemap .depth4{display: none !important;} /* 서브 Common : Page Last Depth Navigation */ .sub_nav {position: relative; margin-bottom: 20px;} .sub_nav ul:after {display: block; content: ''; clear: both;} .sub_nav .nav-dropit ul li{position: relative; float: left; text-align: center;} .sub_nav .snum1 li{width: 100%;} .sub_nav .snum2 li{width: 50%;} .sub_nav .snum3 li{width: 33.33%;} .sub_nav .snum4 li{width: 25%;} .sub_nav .snum5 li{width: 20%;} .sub_nav .snum6 li{width: 16.66%;} .sub_nav .snum7 li{width: 14.28%;} .sub_nav li:first-child{margin-left: 0 !important;} .sub_nav li a{display: block; font-size: 17px; height: 60px; line-height: 54px; background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 16px; box-sizing: border-box; color: #9c9c9c; border: 0; border-bottom: 2px solid #9c9c9c; text-align: left;} .sub_nav li a:after{content: ''; position: absolute; top: 25px; right: 15px; width: 20px; height: 20px; background: url("../imgs/snav_gray.png") no-repeat center;} .sub_nav li.active a:after{content: ''; background: url("../imgs/snav_blue.png") no-repeat center;} .sub_nav li a.first_nav{color: #000;} .sub_nav li a:hover{background: #eee;} .sub_nav li.active a{border: 0; border-bottom: 2px solid #0389FF; color: #0389FF;} .sub_nav .first_nav:after{content: ''; position: absolute; top: 25px; right: 15px; width: 20px; height: 20px; background: url("../imgs/s_nav_arrow.png"); background-size: 20px;} .sub_nav .dropit-open .first_nav:after{content: ''; transform: rotate(-180deg);} .sub_nav .dropit-open .dropit-submenu{display: block !important;} /* 배경색 및 폰트 색 */ #jheader-wrap.active{background: #fff;} #jheader-wrap.active #open-button .navicon-line{background: #000;} #jheader-wrap .nav_num{display: none;} body.scrollDown #jheader-wrap{transform: translateY(-100%);} body.scrollDown .m_nav_btn{transform: translateY(-100%);} @media (max-width: 1920px) { .logo{left: 3%; transform: translateX(0);} .top_link{transform: translate(0, -50%); right: 3%;} } @media (max-width: 1420px) { /* Header Nav */ #jlnb{width: 100%;} #jlnb > ul > li{margin: 0;} #jlnb > ul > li > a{padding: 0 30px;} #jlnb ul.depth2{margin-left: 25px !important;} #jlnb ul.depth2 > li{width: 160px;} /* 서브 Common : Page Last Depth Navigation */ .sub_nav{width: 100%;} .sub_nav .nav-dropit ul li{text-align: left;} .sub_nav li a{font-size: 18px;} .jheader_inner{width: 94%; margin: 0 3%;} } @media (max-width:1300px) { /* Header Nav */ #jlnb > ul > li > a{padding: 0 20px;} /* Sitemap */ #sitemap .depth1{margin: 200px 20px 0;} } @media (max-width:1150px) { /* Header Nav */ #jlnb > ul > li > a{padding: 0 15px;} } @media (max-width: 1023px) { /* Header Nav */ #jheader #jlnb{display: none;} #jheader-wrap{position: fixed; top: 0; height: 50px;} /* Logo */ .logo{height: 100%; top: 0;} .logo a{display: block; width: 90px; height: 100%; line-height: 50px;} /* Sitemap */ #sitemap, #open-button{display:none} .jheader_inner{height: 50px;} /* Top Link */ .top_link{right: calc(3% + 40px);} .top_link a{font-size: 14px; padding: 5px 24px;} } @media (max-width: 768px) { /* Top Link */ .top_link{right: calc(3% + 40px);} .top_link a{font-size: 13px; padding: 5px 16px;} } @media (max-width: 640px) { /* Header */ #jheader{position:fixed; display:block; background-color:transparent; top:0;} .scrolled #jheader{border-bottom:0} /* Sitemap Button */ .scrolled #open-button { z-index:9999} .scrolled #open-button .navicon-line { background-color:#333} } /* #jlnb ul.depth2, .nav_bg{display: block !important;} */ /*#jlnb > ul > li:nth-child(1) > .depth2{display: block !important;}*/ /*********************************************** Type2('Horizontal') **********************************************/ /* #jlnb ul.depth2 > li{float: inherit; display: inline-block; width: auto; padding: 25px 30px; margin-left: 30px;} #jlnb ul.depth2 > li:after{content: ''; position: absolute; width: 11px; height: 11px; left: -20px; top: 36px; background: url("../imgs/nav_line.png") no-repeat center right;} #jlnb ul.depth2 > li > a{text-align: center;} #jlnb ul.depth2 > li .depth2_child{display: none !important;} @media (max-width:1400px){ #jlnb ul.depth2{width: auto;} #jheader{height: 50px;} } */ /*#jlnb > ul > li:nth-child(1) > .depth2{display: block !important;}*/ /*********************************************** Type3('Vertical') **********************************************/ /* #jlnb > ul > li{position: relative;} #jlnb ul.depth2{min-width: 100%;} #jlnb ul.depth2 > li{float: inherit; display: block; width: 100%; padding: 10px 0; margin-left: 0; text-align: center;} #jlnb ul.depth2 > li .depth2_child{display: none;} #jlnb ul.depth2 .depth2_child{position: absolute; top: 0; left: 100%; z-index: 2; width: 100%; background: #fff; border-left: 1px solid #f3f3f3;} #jlnb ul.depth2 .depth2_child > ul{padding: 10px 0;} #jlnb ul.depth2 .depth2_child > ul li{width: 100%; padding: 10px 0 10px 20px; margin-bottom: 0;} @media (max-width:1400px){ #jlnb ul.depth2{width: auto;} #jheader{height: 50px;} } */ /* #jheader #jlnb .nav_bg{display: block !important;} #jlnb ul.depth2{display: block !important;} */ /*********************************************** Type4('All') **********************************************/ #jheader{position: relative; height: 80px;} #jheader #jlnb .nav_bg{content: ''; position: absolute; width: 100%; height: 190px; background: #fff; top: 80px; left: 0; display: none; box-shadow: 0 6px 5px rgba(0, 0, 0, 0.1);} #jlnb > ul > li{position: relative;} #jlnb > ul > li > ul{background-color: transparent;} #jlnb ul.depth2{min-width: 100%;} #jlnb ul.depth2 > li{float: inherit; display: block; width: 100%; padding: 8px 0 0; margin-left: 0;} #jlnb ul.depth2 > li:nth-child(1){padding-top: 4px;} /* 서브 메뉴 좌측 공간 수동으로 조절 */ #jlnb > ul > li:nth-child(1) ul.depth2{margin-left: 50px;} #jlnb > ul > li:nth-child(2) ul.depth2{margin-left: 50px;} #jlnb > ul > li:nth-child(3) ul.depth2{margin-left: 50px;} #jlnb > ul > li:nth-child(4) ul.depth2{margin-left: 50px;} #jlnb > ul > li:nth-child(5) ul.depth2{margin-left: 50px;} #jlnb > ul > li:nth-child(6) ul.depth2{margin-left: 50px;} #jlnb ul.depth2 > li .depth2_child{display: none !important;} @media (max-width:1023px){ #jheader{height: 50px;} } /* ========================================== Mobile ========================================== */ /* 모바일 Nav Button */ #btn-menu-m, #btn-menu-m span {display: inline-block; transition: all 0.4s; box-sizing: border-box;} .m_nav_btn{position: fixed; width: 50px; height: 50px; top: 0; right: calc(3% - 13px); z-index: 120; display: none;} #btn-menu-m{position: relative; width: 100%; height: 100%;} #btn-menu-m span{position: absolute; left: 13px; width: 24px; height: 1px; background-color: #000;} #btn-menu-m.active span{width: 24px; background-color: #fff !important; height: 1px;} #btn-menu-m span:nth-of-type(1){top: 16px;} #btn-menu-m span:nth-of-type(2){top: 24px;} #btn-menu-m span:nth-of-type(3){top: 32px;} #btn-menu-m.active span:nth-of-type(1){-webkit-transform: translateY(24px) rotate(-45deg); transform: translateY(24px) rotate(-45deg); top: 0;} #btn-menu-m.active span:nth-of-type(2){opacity: 0;} #btn-menu-m.active span:nth-of-type(3){-webkit-transform: translateY(-24px) rotate(45deg); transform: translateY(-24px) rotate(45deg); top: 48px;} #m-lnb-wrapper{position: fixed; top: 0; right: -100%; z-index: 110; width: 100%; height: 100vh; overflow: auto; background-color: #fff; box-sizing: border-box; transition: all 0.3s;} .m-logo{position: relative; width: 100%; height: 50px; background: #423811; padding-left: 3%;} .m-logo a{display: inline-block; background: url("../imgs/logo_all_white.png") no-repeat center left; width: 90px; height: 50px; background-size: 100%;} #m-lnb-wrapper.on{right: 0px;} #m-lnb > ul{border-bottom: 1px solid #e4e4e4; font-size: 14px;} #m-lnb > ul li > a{color: #173348;} #m-lnb > ul > li > span{position: absolute; right: 0; top: 0; width: 20px; height: 55px; font-size: 17px; text-align: center; transition: all 0.4s; color: rgba(255,255,255,0.5); cursor: pointer} #m-lnb > ul > li.on > span{transform: rotate(180deg);} #m-lnb > ul > li li > span{position: absolute; right: 0; top: 0; width: 40px; height: 40px; font-size: 14px; text-align: center; transition: all 0.4s; color: tomato; cursor: pointer;} #m-lnb > ul > li li > span.arrow_plus2 i{color: rgba(255,255,255,0.5); font-size: 17px;} #m-lnb > ul > li li.on > span{transform: rotate(180deg);} #m-lnb > ul li{position: relative;} #m-lnb > ul > li{line-height: 48px; border-bottom: 1px solid #e4e4e4; background: #F4F5F8;} #m-lnb > ul > li > a{display: inline-block; padding: 0 50px 0 3%; font-size: 17px; width: 100%; font-weight: 700; height: 50px; background: #fff;} #m-lnb > ul > li.arrow > a{position: relative;} #m-lnb > ul > li.arrow > a:after{content: ''; position: absolute; width: 50px; height: 16px; right: 0; top: 50%; margin-top: -8px; background: url("../imgs/icon/quick_crumbs.svg") no-repeat center; background-size: contain; transform: rotate(90deg);} #m-lnb > ul > li.arrow.on > a:after{content: ''; transform: rotate(-90deg);} #m-lnb > ul > li:first-child{border-top: 1px solid #e4e4e4;} #m-lnb > ul > li.on > a{background: #fff; color: var(--one-point);} #m-lnb > ul > li:nth-last-child(1){border-bottom: 0;} #m-lnb > ul > li ul{display: none; line-height: 40px;} #m-lnb > ul > li ul.depth2{padding: 10px 0;} #m-lnb > ul > li li {margin: 0 3%;} #m-lnb > ul > li li li{line-height: 35px;} #m-lnb > ul > li li > a{position: relative; display: inline-block; padding: 5px 15px; width: 100%; font-size: 16px; line-height: 25px;} #m-lnb > ul > li li > a.depth_link2:after{content: ''; position: absolute; width: 20px; height: 20px; text-align: center; right: 0; background: url("../imgs/m-nav-arrow_plus.png") no-repeat center; background-size: 14px; top: 50%; transform: translateY(-50%);} #m-lnb > ul > li li.on > a.depth_link2:after{content: ''; width: 20px; height: 20px; background: url("../imgs/m-nav-arrow_minus.png") no-repeat center var(--one-point); background-size: 10px; border: 0; top: 50%; transform: translateY(-50%);} #m-lnb > ul > li li li > a{display: inline-block; padding: 0 10px 0 10px; font-size: 15px; line-height: 35px;} @media (max-width: 1023px) { .m_nav_btn{display: block;} } /* ========================================== Footer ========================================== */ .top_go, .top_go:active{position:fixed; z-index:20; right:50px; bottom:58px; width:82px; height:82px; background:url(../imgs/top.png) center no-repeat #12DF49; background-size:contain; display:none; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4); border-radius: 50%;} /* Footer */ .footer{position: relative; width: 100%;} .copy_right{background: #fff; padding: 0; padding-bottom: 30px; border-top: 1px solid #CBCBCB;} .copy_right ul:after{display: block; content: ''; clear: both;} .footer_inner{position:relative; max-width:1400px; margin:0 auto;} .footer_link{width: 100%; border-bottom: 1px solid #CBCBCB;} .footer_link ul{max-width: 1400px; width: 100%; margin: 0 auto; padding: 15px 0;} .footer_link li{float: left; margin-right: 50px;} .footer_link li:last-child{margin-right: 0;} .footer_link a{display: block; font-size: 15px; color: #aaaebb; line-height: 30px;} .footer_link li.count_r{float: right; margin-left: 0; margin-right: 0;} .footer_link li.count_r:last-child{margin-right: 50px;} .copy_logo{text-align: center; margin: 40px 0 30px;} .copy_logo img{width: 160px;} .copy_text{text-align: center;} .copy_text p{font-size: 14px; font-weight: 350; line-height: 1.5; color: #888;} .copy_text ul{display: flex; justify-content: center; margin-bottom: 15px;} .copy_text ul.copy_tel{margin-bottom: 5px;} .copy_text ul li{margin-left: 10px;} .copy_text ul li:first-child{margin-left: 0;} @media all and (max-width:1420px){ .copy_right .footer_inner{margin: 0 2%;} .footer_link{padding: 0 3%;} } @media all and (max-width:1023px){ .footer_link{margin-bottom: 20px;} } @media all and (max-width:767px){ .footer_link ul{display: flex; flex-wrap: wrap; justify-content: center;} .footer_link li{text-align: center; float: initial !important; margin: 0 10px !important;} .footer_link li.count_r{display: none;} .footer_link a{font-size: 13px;} .copy_logo{margin: 30px 0 20px;} .copy_logo img{width: 140px;} .copy_text p{font-size: 13px; line-height: 1.7;} .copy_text ul{flex-wrap: wrap; margin-bottom: 10px;} .copy_text ul li{width: 100%; margin-left: 0;} .copy_text ul li span{display: none;} .top_go{display: none !important;} }