@charset "utf-8";

/* common */
html {scroll-behavior: smooth;}
body {font-family:'NotoSansM';word-break: keep-all;}
.table {display:table; width:100%; height:100%;}
.table_cell {display:table-cell; vertical-align:middle; height:100%;}
#dimLayer {z-index:99; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7)}
.layer_popup {z-index:100; display:none; position:absolute; left:50%; background:#fff}
.layer_popup .btn_close {position:absolute; right:0; top:0; display:block; font-size:0; text-indent:-9999px; transition:all 0.3s ease-in-out}
.layer_popup .btn_close:hover {transform: rotate(90deg);}
.layer_popup .layer_cont {width:100%; height:100%;}

.btn_top {z-index:10; position:fixed; right:30px; bottom:30px; width:78px; height:78px; font-size:0; background:#f2f2f2 url(../img/btn_top.png) no-repeat; outline:none}

.inner_content {width:1200px; margin:0 auto;}

/* button */
.btn_list {display:block; width:200px; height:60px; color:#fff; font-family:'NotoSansL'; font-size:18px;  line-height:59px; text-align:center; margin:50px auto 0; background:#000;}

.btn_black {overflow:hidden;position:relative;display:inline-block;line-height: 62px;color:#fff;font-family:'NotoSansL';font-size:16px;text-align:center;padding:0 50px;border:1px solid #000;background:#fff;}
.btn_black span {z-index:10;position:relative;}
.btn_black span img {display:inline-block; vertical-align: middle; margin-top:-3px}
.btn_black span img.on {display:none;}
.btn_black:before {z-index:1; content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:#000; transition: all 0.3s ease-out;}
.btn_black:hover {color:#000}
.btn_black:hover:before {left:100%}
.btn_black:hover span img {display:none;}
.btn_black:hover span img.on {display:inline-block;}

.btn_black.arrow {width:258px; text-align:left;}
.btn_black.arrow:after {z-index:2; content:''; position:absolute; left:186px; top:50%; display:block; width:32px; height:20px; margin-top:-10px; background:url(../img/btn_black_arrow.png) no-repeat}
.btn_black.arrow:hover:after {background:url(../img/btn_black_arrow_on.png) no-repeat}

/* 텍스트없고 화살표만 있는 버튼 */
.btn_black_arrow {overflow:hidden; position:relative; display:inline-block; width:64px; height:64px; line-height:64px; color:#fff; font-family:'NotoSansL'; font-size:0; text-align:center; border:1px solid #000; background:#fff url(../img/btn_black_arrow_on.png) center center no-repeat}
.btn_black_arrow span {display:none;}
.btn_black_arrow:before {z-index:1; content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:#000 url(../img/btn_black_arrow.png) center center no-repeat; transition: all 0.2s ease-out;}
.btn_black_arrow:hover {color:#000}
.btn_black_arrow:hover:before {left:100%; background-position:-9999px 0;}

.btn_prc_gray {display:inline-block; color:#666; font-family: 'NotoSansL'; font-size:16px; height:54px; line-height:53px; margin:0 10px; text-align:center; padding:0 30px; background:#e1e1e1;}
.btn_prc_black {display:inline-block; color:#fff; font-family: 'NotoSansL'; font-size:16px; height:54px; line-height:53px; margin:0 10px; text-align:center; padding:0 30px; background:#000;}

.depth_menu {width:100%; text-align:center; padding-top:74px; border-bottom:1px solid #f0f0f0; background:#f7f7f7}
.depth_menu a {display:inline-block; color:#000; font-family:'NotoSansL'; font-size:17px; padding:0 40px 20px; margin:0 40px}
.depth_menu a.on {font-family:'NotoSansM'; border-bottom:2px solid #000}

.tab_menu {width:100%; font-size:0; text-align:center;}
.tab_menu a {display:inline-block; height:70px; line-height:68px; color:#000; font-family:'NotoSansL'; font-size:20px; text-align:center; padding:0 105px; margin-left:20px; border:1px solid #000}
.tab_menu a:first-child {margin-left:0;}
.tab_menu a.on {color:#fff; background:#000}

.radio_box input {position:absolute; left:-99999px; width:0; height:0;}
.radio_box label {position:relative; padding-left:26px;}
.radio_box label:before {content:'';position:absolute;left:0;top:50%;display:block;width: 16px;height: 16px;border-radius:100%;border:1px solid #acacac;margin-top:-9px;}
.radio_box input:checked + label:before {background:#000}

.check_box input[type="checkbox"]::-ms-check{display:none}
.check_box input {position:absolute; left:-99999px; width:0; height:0;}
.check_box label {position:relative;padding-left:26px;font-family: 'NotoSansL';font-size: 16px;}
.check_box label:before {content:'';position:absolute;left:0;top:50%;display:block;width: 15px;height: 15px;border:1px solid #acacac;margin-top: -7px;}
.check_box input:checked + label:before {background:#000}

/* 데이터 없음 */
.list_empty {width:100%;color:#999;font-family: 'NotoSansL';font-size:20px;text-align:center;padding: 150px 0;}

/* pagination */
.pagination {text-align:center; display:flex; justify-content:center;}
.pagination button {width:46px; height:46px; margin:0; display:block;}
.pagination .btn_wrap {width:102px; display:flex; justify-content:space-between;}
.pagination .btn_prev {background-image:url('../img/brand/btn_prev.png');}
.pagination .btn_next {background-image:url('../img/brand/btn_next.png');}
.pagination .btn_first {background-image:url('../img/brand/btn_first.png');}
.pagination .btn_last {background-image:url('../img/brand/btn_last.png');}
.pagination .numbox {display:flex;justify-content: center;height:24px;margin: 10px 20px;}
.pagination a {display:block;font-family: 'NotoSansM';color: #8e8e8e;line-height: 17px;padding: 0 2px;margin: 0 19px;}
.pagination a:hover {color:#000;}
.pagination a.current {border-bottom:3px solid #000;color: #000;}

/* aos */
[data-aos="motion_down"] {transform: translateY(-100px); transition:all 1s ease-in-out}
[data-aos="motion_down"].aos-animate {transform: translateY(0);}
[data-aos="motion_up"] {transform: translateY(100px); transition:all 1s ease-in-out}
[data-aos="motion_up"].aos-animate {transform: translateY(0);}

/* layout */
#wrap {overflow:hidden;position:relative;width:100%;min-width:1200px;max-width:1920px;margin:0 auto;padding-top: 136px;}
header {background-color:#fff;}
header {z-index:11;position: fixed;min-width:1300px;width: 100%;border-bottom:1px solid #eee;top: 0;left:0;}
header .head {position:relative; width:1300px; height:72px; border-bottom:1px solid #f0f0f0; margin:0 auto;}
header .head h1 {position:absolute; left:50%; top:21px; transform: translateX(-50%);}
header .head h1 a {margin:0;}
header .head .util {padding-top:21px;}
header .head .util a {position:relative; display:inline-block; vertical-align:middle; margin-right:17px}
header .head .util .btn_menu {z-index:9; width:24px; height:22px; font-size:0; text-indent:-9999px;}
header .head .util .btn_menu span {position:absolute; left:0; width:100%; height:2px; background:#666; transition: all 0.3s ease-in-out;}
header .head .util .btn_menu span:nth-child(1) {top:0;}
header .head .util .btn_menu span:nth-child(2) {top:50%; margin-top:-1px;}
header .head .util .btn_menu span:nth-child(3) {bottom:0;}
header .head .util .btn_menu:hover span {background:#000}

header.total_open .head .util .btn_menu span:nth-child(1) {top:50%; margin-top:-1px; transform: rotate(45deg);}
header.total_open .head .util .btn_menu span:nth-child(2) {opacity:0;}
header.total_open .head .util .btn_menu span:nth-child(3) {bottom:50%; margin-bottom:-1px; transform: rotate(-45deg);}

header .head .lang {position:absolute; right:0; top:21px; font-size:0;}
header .head .lang a {display:inline-block; width:50px; height:31px; font-size:14px; padding-top:4px; color:#cccccc; text-align:center;}
header .head .lang a.on {width:61px; color:#000; border:1px solid #b7b7b7; border-radius:20px;}
header nav .gnb {position:relative; font-size:0; text-align:center;}
header nav .gnb > li {display:inline-block; margin:0 12px;}
header nav .gnb > li > a {display:block; height:63px; color:#000; font-family:'NotoSansL'; font-size:18px;  padding:17px 40px 0;}
header nav .gnb > li > a:hover,
header nav .gnb > li > a.on {font-family:'NotoSansM'; border-bottom:3px solid #000;}
header nav .gnb > li .depth2 {z-index:10; display:none; position:absolute; left:0; top:63px; width:100%; text-align:center; background:#f4f4f7}
header nav .gnb > li:nth-child(2) .depth2 .depth2_type1 {padding-left:164px}
header nav .gnb > li:nth-child(5) .depth2 .depth2_type1 {padding-left:700px}
header nav .gnb > li:nth-child(5) .depth2 .depth2_type1.eng {padding-left:790px}
header nav .gnb > li:nth-child(7) .depth2 .depth2_type1 {text-align:right; padding-right:17px}
header nav .gnb > li .depth2 .depth2_type1 {width:1200px; font-size:0; text-align:left; margin:0 auto; padding-left:17px}
header nav .gnb > li .depth2 .depth2_type1 li {display:inline-block}
header nav .gnb > li .depth2 .depth2_type1 li a {display:block; height:65px; color:#000; font-family:'NotoSansL'; font-size:16px; padding:20px 17px 0;}
header nav .gnb > li .depth2 .depth2_type1 li a:hover {font-family:'NotoSansM';}

header nav .gnb > li .depth2 .depth2_type2 {display:inline-block; width:160px; text-align:left; vertical-align:top; padding:45px 0; margin:0 30px}
header nav .gnb > li .depth2 .depth2_type2 dt {color:#000; font-family:'NotoSansL'; font-size:16px; padding-bottom:13px; border-bottom:1px solid #000}
header nav .gnb > li .depth2 .depth2_type2 dd {margin-top:12px;}
header nav .gnb > li .depth2 .depth2_type2 dd a {color:#666666; font-family:'NotoSansL'; font-size:15px;}
header nav .gnb > li .depth2 .depth2_type2 dd a:hover {color:#000; font-family:'NotoSansM';}

/* 전체메뉴 */
header .gnb_total {overflow-x:hidden; overflow-y:auto; position:fixed; left:0; top:-100%; width:100%; height:100%; padding-bottom:50px; background:#fff;}
header.total_open .gnb_total {top:0; transition: all 0.2s ease-in}
header .gnb_total .inner {position:relative; width:1200px; margin:0 auto}
header .gnb_total .inner > ul {overflow:hidden; width:100%;}
header .gnb_total .inner > ul > li {float:left; width:242px; padding-left:20px;}
header .gnb_total .inner > ul > li:nth-child(2) {width:474px;}
header .gnb_total .inner > ul > li .main_menu {margin-top:90px;}
header .gnb_total .inner > ul > li .main_menu,
header .gnb_total .inner > ul > li .main_menu a {color:#000; font-family:'NotoSansM'; font-size:24px;}
header .gnb_total .inner > ul > li .sub_menu_type1 {margin-top:30px;}
header .gnb_total .inner > ul > li .sub_menu_type1 > li {margin-top:11px}
header .gnb_total .inner > ul > li .sub_menu_type1 > li a {color:#666; font-family:'NotoSansL'; font-size:16px}
header .gnb_total .inner > ul > li .sub_menu_type1 > li a:hover {color:#000;}
header .gnb_total .inner > ul > li .sub_menu_type1 > li a.on {color:#000; font-family:'NotoSansM'; text-decoration: underline;}

header .gnb_total .inner > ul > li .overflow {overflow:hidden}
header .gnb_total .inner > ul > li .sub_menu_type2 {float:left; width:225px;vertical-align: top;}
header .gnb_total .inner > ul > li .sub_menu_type2 .category {color:#333; font-family:'NotoSansL'; font-size:16px;margin-top:30px;}
header .gnb_total .inner > ul > li .sub_menu_type2 ul {margin-top:10px; padding-left:20px; border-left:1px solid #acacac}
header .gnb_total .inner > ul > li .sub_menu_type2 ul li {margin-top:12px;}
header .gnb_total .inner > ul > li .sub_menu_type2 ul li a {color:#666; font-family:'NotoSansL'; font-size:15px}
header .gnb_total .inner > ul > li .sub_menu_type2 ul li a:hover {color:#000;}
header .gnb_total .inner > ul > li .sub_menu_type2 ul li a.on {color:#000; font-family:'NotoSansM'; text-decoration:underline}

#container {position:relative;}

footer {margin-top:110px; padding:100px 0; background:#000;}
footer a {color:#fff}
footer .inner {position:relative; width:1430px; margin:0 auto}
footer .inner:after {content:''; display:block; clear:both}
footer .inner .logo {position:absolute; left:0; top:5px;}
footer .inner .left_area {float:left; padding-left:232px;}
footer .inner .left_area .link a {color:#707070; font-family:'NotoSansR'; font-size:16px; margin-right:40px;}
footer .inner .left_area .link a:hover,
footer .inner .left_area .link a:focus {color:#fff}
footer .inner .left_area .email {position:relative; display:inline-block; padding-right:22px;}
footer .inner .left_area .email:after {content:''; position:absolute; right:10px; top:50%; display:block; width:2px; height:13px; margin-top:-6px; background:#8f8f8f}
footer .inner .left_area address {color:#eeeeee; font-family:'NotoSansR'; font-size:14px; font-style: normal; line-height:24px; margin-top:70px}
footer .inner .left_area .copyright {color:#707070; font-family:'NotoSansR'; font-size:14px; font-style: normal; margin-top:24px}
footer .inner .right_area {float:right; text-align:right}
footer .inner .right_area .sns_box {font-size:0;}
footer .inner .right_area .sns_box a {display:inline-block; font-size:0; text-indent: -9999px;} 
footer .inner .right_area .sns_box a:nth-child(1) {width:60px; height:45px; background:url(../img/icon_youtube.png) center center no-repeat} 
footer .inner .right_area .sns_box a:nth-child(2) {width:55px; height:45px; background:url(../img/icon_instargram.png) center center no-repeat} 
footer .inner .right_area .sns_box a:nth-child(3) {width:30px; height:45px; background:url(../img/icon_facebook.png) right center no-repeat} 
footer .inner .right_area .sns_box a:nth-child(1):hover {background:url(../img/icon_youtube_on.png) center center no-repeat} 
footer .inner .right_area .sns_box a:nth-child(2):hover {background:url(../img/icon_instargram_on.png) center center no-repeat} 
footer .inner .right_area .sns_box a:nth-child(3):hover {background:url(../img/icon_facebook_on.png) right center no-repeat} 

footer .inner .right_area .family_site {position:relative; text-align:left; margin-top:104px;}
footer .inner .right_area .family_site .btn {display:block;width:240px;height:48px;line-height:47px;color:#707070;font-family:'NotoSansR';font-size:16px;padding-left:22px;border:1px solid #7a7a7a;background:url(../img/arrow_family_site.png) right center no-repeat;}
footer .inner .right_area .family_site .site_list {display:none; position:absolute; bottom:100%; left:0; width:100%; margin-bottom:-1px; padding-bottom:20px; border:1px solid #fff; background:#000}
footer .inner .right_area .family_site .site_list li a {display:block; color:#fff; font-family:'NotoSansL'; font-size:16px; margin:20px 22px 0}
footer .inner .right_area .family_site.on .btn {color:#fff; border-color:#fff; background:url(../img/arrow_family_site_on.png) right center no-repeat}
footer .inner .right_area .family_site.on .site_list {display:block;}


/* 검색 */

/* 상단 검색창 */
header .search_wrap {display:none;top:136px;z-index: -9;position:absolute;}

.search_wrap {width:100%;position: relative;height:auto;background-color:#fafafa;padding: 73px 0 79px 0;/* margin-bottom:32px; */}
.search_wrap .inner {width:750px; margin:0 auto;}
.search_wrap form {position:relative;margin-bottom: 15px;border-bottom:2px solid #000;display:flex;}
.search_wrap .input_search {background-color: transparent;width:calc(100% - 48px);height:68px;font-size:22px;font-family: 'NotoSansR';padding: 0 10px;color: #000;}
.search_wrap .input_search.on {color:#000;}
.search_wrap .input_search::placeholder {color:#aaa;}
.search_wrap .btn_search {width:48px; height:68px; background-image:url('../img/search/btn_search.png'); background-repeat:no-repeat; font-size:0;}

.search_wrap h3 {font-size:20px;display:inline-block;margin-top: 26px;}
.search_wrap .btn_delete {font-size:14px;color:#555;margin-left: 5px;}
.search_wrap .btn_delete::before {content:'';width:13px;height:12px;display:inline-block;background-image: url('../img/search/btn_del.png');}

.search_wrap .search_list {display:flex;flex-wrap:wrap; font-size:15px;font-family:'NotoSansL';margin-top: 15px;}
.search_wrap .search_list li {position:relative; margin-right:12px; margin-bottom:10px;}
.search_wrap .search_list span {padding:3px 13px;background-color:#fff;border:1px solid #e4e4e4;border-radius:4px;display: inline-block; cursor:pointer;}
.search_wrap .recent_search .search_list span {padding:3px 34px 3px 13px;}
.search_wrap .search_list span:hover {font-family:'NotoSansM'; background-color:#e9e9e9;}
.search_wrap .search_list li .btn_del {position:absolute; right:15px; top:50%; display:block; width:12px; height:12px; font-size:0; margin-top:-6px; outline:none;}
.search_wrap .search_list li .btn_del::before{content:'';position:absolute;right: 0;top: 50%;width: 11px;height: 1px;background-color: #918a88;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.search_wrap .search_list li .btn_del::after{content:'';position:absolute;right: 0;top: 50%;width: 11px;height: 1px;background-color: #918a88;-webkit-transform: rotate(45deg);transform: rotate(45deg);}

.search_wrap .btn_search_close {display:none; overflow:hidden; width:64px; height:64px; border-radius:100%; background:#3d3d3d url('../img/search/btn_close.png'); background-position:center; font-size:0; position:absolute; left:calc(50% - 32px); bottom:-32px;}
.search_wrap.on .btn_search_close {opacity:1;transition: opacity 0.3s 10s;}


/* 검색결과페이지 */
.search_wrap::after {width:100%;height:100%;position:absolute;top:0;left:0;bottom:0;right:0;background-image:url('../img/search/search_bg.png');background-position:top center;background-repeat:no-repeat;opacity:0.2;}


/* 연관 검색어*/
.search_wrap .relate_search h3 {font-size:18px; font-family:'NotoSansR'; margin-top:2px;}
.search_wrap .relate_search .relate_list {display:inline-flex;margin-left: 10px;}
.search_wrap .relate_search .relate_list span {font-size:16px;font-family:'NotoSansL';margin: 0 14px;}

.autocomplete {display:none;min-height:382px;position:absolute;width:100%;top:69px;align-items:stretch;background-color:#fafafa;border:1px solid #000;padding: 0;line-height:40px;z-index:9;}
.autocomplete.none {display:none!important;}
.autocomplete.on {display:flex;}
.autocomplete ul {width:439px; font-size:18px; font-family:'NotoSansL'; letter-spacing:-0.015em; padding:20px 22px;}
.autocomplete ul span {color:#c52121;}
.autocomplete button {position:absolute;bottom: 22px;left: 28px;border-bottom:1px solid #000;line-height: 19px;}
.autocomplete .right {width:311px; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#fff; padding:20px 20px 20px 30px;}
.autocomplete .right figcaption {font-size:15px; line-height:22px; margin-top:22px;font-family:'NotoSansL';}
.autocomplete .right img {width:100%}

/*en*/
html[lang="en"] header nav .gnb > li:nth-child(2) .depth2 .depth2_type1 {padding-left: 240px;}