@charset "UTF-8";
/*-------------------------------------------------
Author : ksi
Create date : 2019-09-03
-------------------------------------------------*/
#wrap { overflow-x: hidden; }

.web { display: block !important; }

.mobile { display: none !important; }

.container { width: 68rem; margin: 0 auto; max-width: 100%; }

/* header */
#header { width: 100%; height: 5rem; position: relative; z-index: 8; background: #fff; -webkit-transition: all .1s; transition: all .1s; /* 활성화 */ /* 찰싹 */ }

#header::before { content: ''; width: 100%; height: 1px; background: #ddd; position: absolute; bottom: 0; left: 0; }

#header > .container { width: 86rem; margin: 0 auto; max-width: 100%; position: relative; text-align: center; }

#header .logo { position: absolute; top: 0; left: 0; }

#header .logo a { display: inline-block; height: 5rem; }

#header .logo a img { display: block; margin-top: 1rem; width: 12.4rem; }

#header .bg { position: absolute; top: 5rem; left: 0; width: 100%; overflow: hidden; z-index: -1; -webkit-transition: all .1s; transition: all .1s; height: 31rem; overflow: hidden; opacity: 0; visibility: hidden; }

#header .bg::before { content: ''; width: 100%; height: 0; position: fixed; top: 5rem; left: 0; z-index: -1; background: rgba(0, 0, 0, 0.5); }

#header .bg .top { width: 100%; height: 31rem; position: relative; background: #fff; }

#header .bg .top::before { display: none; }

#header .bg .bottom { display: none; }

#header #gnb { position: relative; z-index: 2; display: inline-block; text-align: justify; margin-left: 3.5rem; letter-spacing: -1px; }

#header #gnb .topmenu { margin: 0 auto; width: 58.7rem; height: 5rem; }

#header #gnb .topmenu::after { content: ""; clear: both; display: table; }

#header #gnb .topmenu > li { float: left; height: 5rem; padding: 1.5rem 0.8rem 1rem; position: relative; }

#header #gnb .topmenu > li.lnb1 { padding: 1.5rem 1.8rem 1rem; }

#header #gnb .topmenu > li.lnb2 { padding: 1.5rem 2.7rem 1rem; }

#header #gnb .topmenu > li.lnb3 { padding: 1.5rem 1rem 1rem; }

#header #gnb .topmenu > li.lnb6 { padding: 1.5rem 1rem 1rem; }

#header #gnb .topmenu > li.lnb7 { display: none; }

#header #gnb .topmenu > li > a { display: block; font-size: .9rem; color: #333; font-weight: 700; position: relative; padding: .5rem 0 .6rem; }

#header #gnb .topmenu > li > a::before { content: ''; width: 0; height: .2rem; background: #f49f17; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: all 0.1s; transition: all 0.1s; }

#header #gnb .topmenu > li > a::after { content: ''; width: .3rem; height: .3rem; background: #f49f17; position: absolute; top: 0; right: -.3rem; border-radius: 50%; opacity: 0; -webkit-transition: all 0.1s; transition: all 0.1s; }

#header #gnb .topmenu > li.active > a::before { opacity: 1; width: 100%; }

#header #gnb .topmenu > li.active > a::after { opacity: 1; }

#header #gnb .topmenu > li.active .submenu::before { opacity: 1; }

#header #gnb .submenu { position: absolute; top: 5rem; left: 0; width: 100%; padding-top: 1rem; opacity: 0; visibility: hidden; -webkit-transition: all .1s; transition: all .1s; }

#header #gnb .submenu::before { content: ''; width: 100%; height: 31rem; background: #f8f9fa; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -webkit-transition: all .1s; transition: all .1s; }

#header #gnb .submenu ul[class^="sub"] { position: relative; z-index: 1; }

#header #gnb .submenu ul[class^="sub"] > li { width: 100%; margin-bottom: 0.8rem; }

#header #gnb .submenu ul[class^="sub"] > li.hr { display: block; width: 100%; clear: both; height: 0; margin: 0; padding: 0; }

#header #gnb .submenu ul[class^="sub"] > li > a { display: block; text-align: left; padding: 0 .5rem; }

#header #gnb .submenu ul[class^="sub"] > li:hover > a, #header #gnb .submenu ul[class^="sub"] > li:focus > a { text-decoration: underline; }

#header #gnb .submenu ul[class^="sub"] > li .lnb-detail { display: none; }

#header #gnb.active .submenu { opacity: 1; visibility: visible; }

#header .bottom-link { display: none; }

#header .util { position: absolute; top: 0; right: 0; z-index: 1; height: 5rem; }

#header .util::after { content: ""; clear: both; display: table; }

#header .util > li { float: left; margin-right: 1.5rem; height: inherit; }

#header .util > li:last-child { margin-right: 0; }

#header .util > li > a { display: block; font-size: 1.7rem; color: #333; height: inherit; padding-top: 1.6rem; text-align: center; }

#header .util > li.eng-menu { font-size: 1.3rem; }

#header .util > li.eng-menu > a { padding-top: 1.4rem; }

#header .util > li.eng-menu span { font-size: .6rem; display: block; line-height: 1; margin-top: -0.2rem; }

#header.active .bg { opacity: 1; visibility: visible; z-index: 1; }

#header.active .bg::before { height: 100vh; }

#header.active .bottom-link { opacity: 1; visibility: visible; z-index: 2; }

#header.sticky { position: fixed; top: 0; left: 0; }

/* 검색 */
#search-wrap { width: 100%; background: #fff url("/main/img/main/search_bg.jpg") left bottom no-repeat; -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); position: absolute; top: 5rem; left: 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; height: 0; visibility: hidden; }

#search-wrap .container { position: relative; }

#search-wrap .box { padding: 2.5rem 0 3rem; width: 50rem; max-width: 100%; position: relative; margin: 0 auto; }

#search-wrap .box::after { content: ""; clear: both; display: table; }

#search-wrap .box::before { content: ''; width: 2.5rem; height: 2px; position: absolute; left: 0; top: 4.9rem; z-index: 1; background: #f09917; }

#search-wrap .box input { border: 0; border-bottom: 2px solid #f4f4f4; padding: .5rem 0; color: #555; width: calc(100% - 5rem); position: relative; float: left; height: 2.5rem; }

#search-wrap .box input::-webkit-input-placeholder { color: #555; }

#search-wrap .box input:-ms-input-placeholder { color: #555; }

#search-wrap .box input::-ms-input-placeholder { color: #555; }

#search-wrap .box input::placeholder { color: #555; }

#search-wrap .box .btn { border: 1px solid #28303d; color: #28303d; text-align: center; display: block; width: 4.5rem; height: 2.5rem; float: left; padding: .5rem 0.4rem; }

#search-wrap .box .btn i { font-size: 1rem; display: inline-block; margin-right: .3rem; vertical-align: middle; }

#search-wrap .box .btn span { font-weight: 700; vertical-align: middle; }

#search-wrap .box .btn:hover { background: #28303d; color: #fff; }

#search-wrap .btn-close { display: block; font-size: 1.7rem; color: #333; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#search-wrap.active { opacity: 1; height: 8.5rem; visibility: visible; z-index: 2; }

/* 퀵메뉴 */
#btn-quick { display: none; }

#quick-wrap { display: none; }

/* 전체메뉴 */
.all-menu-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 0; z-index: -1; background: #fff; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; visibility: hidden; overflow: hidden; /* fix */ /* menu */ /* util */ /* active*/ }

.all-menu-wrap::after { content: ""; clear: both; display: table; }

.all-menu-wrap .fix-area { width: 15rem; height: inherit; float: left; background: url("/main/img/common/all_menu_bg.jpg") center top/cover no-repeat; padding-top: 6rem; max-width: 18%; }

.all-menu-wrap .fix-area::after { content: ""; clear: both; display: table; }

.all-menu-wrap .fix-area .depth1 { margin-top: 1rem; width: 60%; float: right; }

.all-menu-wrap .fix-area .depth1 > li { margin-bottom: 0.5rem; }

.all-menu-wrap .fix-area .depth1 > li > a { display: block; position: relative; padding: 0.5rem 0; font-size: .9rem; font-weight: 300; color: #d7d7d7; }

.all-menu-wrap .fix-area .depth1 > li > a::before { content: ''; width: 0; height: .25rem; background: #fff; position: absolute; right: 0; bottom: 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; }

.all-menu-wrap .fix-area .depth1 > li.active > a, .all-menu-wrap .fix-area .depth1 > li:hover > a { color: #fff; font-weight: 700; }

.all-menu-wrap .fix-area .depth1 > li.active > a::before, .all-menu-wrap .fix-area .depth1 > li:hover > a::before { opacity: 1; width: 100%; }

.all-menu-wrap .menu-area { width: calc(100% - 15rem); height: inherit; float: left; padding-top: 6rem; max-width: 82%; }

.all-menu-wrap .menu-area .box { height: 80vh; width: 74rem; margin: 0 auto; max-width: 100%; position: relative; }

.all-menu-wrap .menu-area .box::before { content: ''; width: 24.75rem; height: 20rem; background: url("/main/img/common/all_menu_box_bg.png") 0 0 no-repeat; position: absolute; bottom: 1.5rem; right: 2.5rem; }

.all-menu-wrap .menu-area .topmenu_all { padding-top: 1.5rem; padding-left: .3rem; }

.all-menu-wrap .menu-area .topmenu_all > li { margin-bottom: 2rem; }

.all-menu-wrap .menu-area .topmenu_all > li::after { content: ""; clear: both; display: table; }

.all-menu-wrap .menu-area .topmenu_all > li > a { display: block; width: 10rem; float: left; margin-right: 4rem; position: relative; background: #222; color: #fff; font-size: 1.3rem; text-align: center; padding: 2.5rem .5rem; }

.all-menu-wrap .menu-area .topmenu_all > li > a::before { content: ''; width: 5.8rem; height: 3.3rem; background: url("/main/img/common/all_menu_deco.png") 0 0 no-repeat; position: absolute; top: -1.5rem; left: -.3rem; }

.all-menu-wrap .menu-area .topmenu_all > li.lnb2 .submenu ul[class^="sub"] > li > a { min-height: 4.1rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu { float: left; width: calc(100% - 15rem); }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] { margin-bottom: 1.5rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"]::after { content: ""; clear: both; display: table; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li { float: left; width: 20%; float: left; padding-right: 1.5rem; margin-bottom: 1.2rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr { display: block; margin: 0; padding: 0; width: 100%; height: 0; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr::after { content: ""; clear: both; display: table; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr3 { display: none; width: 100%; clear: both; height: 0; margin: 0; padding: 0; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li > a { display: block; padding: .1rem .3rem .7rem; position: relative; color: #000; font-size: .9rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -1px; min-height: 3rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li > a::before { content: ''; width: 100%; height: .1rem; position: absolute; bottom: 0; left: 0; background: #000; -webkit-transition: all .3s; transition: all .3s; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li > a.linkWindow::after { content: '\e980'; font-family: "xeicon"; position: absolute; top: .2rem; right: .3rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li { margin-bottom: 0.5rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li > a { display: inline-block; position: relative; font-size: .75rem; color: #555; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li > a::before { content: ''; width: 0; height: .4rem; background: #fce6c3; position: absolute; bottom: 0; left: -.1rem; z-index: -1; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li > a.linkWindow::after { content: '\e980'; font-family: "xeicon"; display: inline-block; margin-left: .3rem; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li:hover > a { color: #353541; }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li .lnb-detail > li:hover > a::before { opacity: 1; width: calc(100% + .5rem); }

.all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li:hover > a::before { background: #f49f17; }

.all-menu-wrap .util-area { width: 85.1rem; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 5rem; max-width: 100%; text-align: right; }

.all-menu-wrap .util-area a { display: inline-block; height: 5rem; color: #333; vertical-align: top; }

.all-menu-wrap .util-area a.eng-btn { text-align: center; padding: 1.5rem 0; margin-right: 2rem; }

.all-menu-wrap .util-area a.eng-btn i { font-size: 1.3rem; display: block; }

.all-menu-wrap .util-area a.eng-btn .txt { font-size: .6rem; display: block; font-weight: 500; }

.all-menu-wrap .util-area a.close-btn { padding: 1.4rem 0; font-size: 1.7rem; }

.all-menu-wrap.active { opacity: 1; visibility: visible; z-index: 3; height: 100vh; }

/* 스크롤 */
.mCSB_scrollTools .mCSB_draggerRail { width: .25rem; background: #ebebeb; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: .25rem; background: #f49f17; }

/* footer */
#footer { background: #192333; color: #99a6bb; }

#footer .container { position: relative; padding: 2.2rem 0; }

#footer address { margin-bottom: .5rem; text-align: center; }

#footer .copyright { text-align: center; }

#footer .sns { text-align: center; margin: 1rem 0; }

#footer .sns a { display: inline-block; border-radius: 50%; width: 1.6rem; height: 1.6rem; text-align: center; background-color: #1a5297; color: #fff; line-height: 1.6rem; margin: 0 .3rem; }

#footer .sns a.twitter { background: #4293e5; }

#footer .sns a.youtube { background: #f40000; }

#footer .sns a.blog { background: #ffffff; }

#footer .sns a.blog img {width:35%;margin:0 0 3px 1px;}

/*================================================*/
/*================== 반응형 ======================*/
/*================================================*/
@media (max-width: 1550px) { #header { padding: 0 .5rem; }
  #header .logo a { width: 5.3rem; overflow: hidden; }
  #header .logo a img { max-width: none; }
  #header #gnb { margin-left: 2rem; }
  #header #gnb .topmenu > li { padding: 1.5rem 0.8rem 1rem; }
  #search-wrap .container { padding: 0 .5rem; }
  #search-wrap .box { padding-right: 3rem; }
  #search-wrap .btn-close { top: 48%; right: 1rem; }
  .all-menu-wrap .menu-area { width: calc(100% - 13rem); padding-top: 5rem; }
  .all-menu-wrap .menu-area .topmenu_all > li > a { margin-right: 2rem; }
  .all-menu-wrap .menu-area .topmenu_all .submenu { width: calc(100% - 12rem); }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li { width: 33.33%; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr { display: none; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr3 { display: block; }
  #footer .container { padding-left: .5rem; padding-right: .5rem; } }

@media (max-width: 1300px) { #header #gnb { display: none; } }

@media (max-width: 1200px) { #btn-quick { position: fixed; top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important; width: 3rem; height: 3rem; padding: .3rem; }
  #btn-quick.white { background: #333 !important; }
  #btn-quick i { font-size: 1rem; }
  #btn-quick span { font-weight: 400; font-size: .55rem; }
  #quick-wrap { padding-top: 5rem; }
  #quick-wrap .container { padding: 0 1rem; }
  #quick-wrap .logo { display: none; }
  #quick-wrap .top .title { font-size: 1.5rem; }
  #quick-wrap .service-area::before { top: .7rem; left: 13rem; }
  #quick-wrap.active .service-area::before { width: calc(100% - 13rem); }
  #quick-wrap .service-area::after { display: none; }
  #quick-wrap .bottom { padding: 0; }
  #quick-wrap .bottom .scroll-box-mobile { width: 100%; }
  #quick-wrap .bottom .row { width: 60rem; }
  #quick-wrap .bottom .box { padding: .5rem 1rem; }
  #quick-wrap .bottom .box .title { font-size: 1.2rem; margin-bottom: 1rem; }
  #quick-wrap .bottom .box .links > li > a { font-size: .7rem; }
  #quick-wrap .btn-close { right: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -3rem; } }

@media (max-width: 1050px) { .all-menu-wrap .fix-area { display: none; }
  .all-menu-wrap .menu-area { width: 100%; float: none; max-width: 100%; } }

@media (max-width: 768px) { .web { display: none !important; }
  .mobile { display: block !important; }
  #header .logo { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  #header .util { width: 100%; height: 0; }
  #header .util > li { float: none; height: 5rem; }
  #header .util > li.search-menu { position: absolute; top: 0; right: 1rem; margin-right: 0; }
  #header .util > li.eng-menu { display: none; }
  #header .util > li.all-menu { position: absolute; left: 1rem; }
  #search-wrap { top: 0; }
  #search-wrap.active { height: 12.5rem; }
  #search-wrap .btn-close { -webkit-transform: none; transform: none; top: 1rem; }
  #search-wrap .box { padding: 3.5rem 0 3rem; }
  #search-wrap .box::before { top: 5.9rem; }
  #search-wrap .box input { float: none; width: 100%; margin-bottom: 1.5rem; }
  #search-wrap .box .btn { float: none; margin: 0 auto; }
  .all-menu-wrap .util-area a.eng-btn { position: absolute; top: 0; left: 1rem; margin-right: 0; }
  .all-menu-wrap .util-area a.close-btn { position: absolute; top: 0; right: 1rem; }
  .all-menu-wrap .menu-area .box { border-top: 1px solid #ddd; height: auto; }
  .all-menu-wrap .menu-area .box #mCSB_1_container { overflow: visible; }
  .all-menu-wrap .menu-area .topmenu_all { padding: 0; height: calc(100vh - 5rem); background: #222; }
  .all-menu-wrap .menu-area .topmenu_all > li { margin-bottom: 0; }
  .all-menu-wrap .menu-area .topmenu_all > li > a { width: 6rem; margin-right: 0; padding: 0.9rem .5rem; float: none; font-size: .9rem; }
  .all-menu-wrap .menu-area .topmenu_all > li > a::before { display: none; }
  .all-menu-wrap .menu-area .topmenu_all .submenu { width: calc(100% - 6rem); position: absolute; top: 0; left: 6rem; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; visibility: hidden; height: calc(100vh - 5rem); background: #fff; overflow-y: auto; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] { padding: 1.5rem; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li.hr3 { display: none; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li { width: 100%; padding-right: 0; }
  .all-menu-wrap .menu-area .topmenu_all .submenu ul[class^="sub"] > li > a { min-height: auto !important; }
  .all-menu-wrap .menu-area .topmenu_all > li.active > a { background: #f49f17; color: #222; font-weight: 700; }
  .all-menu-wrap .menu-area .topmenu_all > li.active .submenu { opacity: 1; visibility: visible; }
  #quick-wrap .bottom .row { width: 47rem; }
  #quick-wrap .bottom .box .links > li > a { letter-spacing: -1px; padding: 1rem 0; height: 6.7rem; }
  #footer .container { padding-top: 1.9rem; }
  #footer .relate-site { top: 0; width: 100%; }
  #footer .links { text-align: center; }
  #footer .links li { display: none; float: none; }
  #footer .links li:nth-child(1) { display: inline-block; }
  #footer .links li:nth-child(2) { display: inline-block; padding-right: 0; }
  #footer .links li:nth-child(2)::before { display: none; }
  #footer address { text-align: center; }
  #footer address span { display: block; }
  #footer .copyright { text-align: center; } }
