@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable.css");
@font-face {font-family: 'NotoSerifKR'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');

.cg {font-family: 'Cormorant Garamond';}
.pt {font-family: 'Pretendard Variable';}
.mt {font-family: 'Montserrat';}
.ro {font-family: 'Roboto';}
.noto-serif-kr {font-family: 'NotoSerifKR';}
.noto-serif-sc {
    font-family: "Noto Serif SC", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.noto-sans-sc {
    font-family: "Noto Sans SC", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }


body {font-family: "Noto Sans KR", sans-serif; letter-spacing: 0; color: #222;}
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
body::-webkit-scrollbar-track {background-color: #fff;}

#wrap {}

.img > img {width: 100%;}
.center {display: grid; place-items: center;}
.flex {display: flex;}
.flex2 {display: flex; flex-wrap: wrap;}
.flex3 {display: flex; justify-content: space-between;}

.inner_wrap {max-width: 1700px;}
.inner {max-width: 1320px;}

.lt10 {letter-spacing: -0.01em;}
.lt25 {letter-spacing: -0.025em;}
.lt40 {letter-spacing: -0.04em;}
.lt50 {letter-spacing: -0.05em;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}

[data-trigger] {opacity: 0; position: relative; top: 30px; transition: .6s;}
[data-trigger].animatedIn {top: 0; opacity: 1;}
[data-trigger2] {opacity: 0; position: relative; top: 90px; transition: .6s;}
[data-trigger2].animatedIn {top: 0; opacity: 1;}
[data-trigger3] {opacity: 0; position: relative; top: 150px; transition: .6s;}
[data-trigger3].animatedIn {top: 0; opacity: 1;}

[data-trigger4] {opacity: 0; position: relative; top: -20px; transition: 1s;}
[data-trigger4].animatedIn {top: 0; opacity: 1;}
[data-trigger5] {opacity: 0; position: relative; top: 20px; transition: 1s;}
[data-trigger5].animatedIn {top: 0; opacity: 1;}
[data-trigger6] {opacity: 0; position: relative; padding-left: 160px; transition: 1s;}
[data-trigger6].animatedIn {padding-left: 120px; opacity: 1;}
[data-trigger7]::before {width: 0; transition: 1s;}
[data-trigger7].animatedIn::before {width: 37%;}
[data-trigger8] {}
[data-trigger8].animatedIn {}


.pc_view {display: block;}
.mo_view {display: none;}

@media all and (max-width: 1020px){
    .pc_view {display: none;}
    .mo_view {display: block;}

    .inner_wrap {max-width: 100%;}
    .inner {max-width: 92%;}
}

.btn_eft {display: inline-block; overflow: hidden;}
.btn_eft:hover {color: #fff}
.btn_eft:hover a {border: 1px solid #8FB73E !important;}
.btn_eft:hover span.aa {border: 1px solid #8FB73E !important;}
.btn_eft:hover img {filter: brightness(100);}
.btn_eft .btn_eft_bg {background: #8FB73E; position: absolute; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 0; max-height: 0;}


.btn_eft2 {display: inline-block; overflow: hidden;}
.btn_eft2:hover {color: #fff}
.btn_eft2 .btn_eft_bg {background: #8FB73E; position: absolute; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 0; max-height: 0;}


#pc_head {position: fixed; z-index: 999; width: 100%; top: 0;}
#pc_head .head_inner {width: 94%; margin: 30px auto 0; border: 1px solid #fff; color: #fff; transition: 0.1s}
#pc_head .head_inner::after {content: ''; display: block; position: absolute; top: calc(100% + 1px); left: 0; width: 100%; height: 0; background: #fff; transition: 0.5s;}

#pc_head .head_inner .logo {padding: 23px 43px; border-right: 1px solid #fff; min-width: 200px; box-sizing: border-box;}
#pc_head .head_inner .logo a {display: inline-block; max-width: 113px; margin-top: auto;}
#pc_head .head_inner .logo a img.active {display: none}

#pc_head .head_inner .gnb_wrap {align-items: center; width: 100%; justify-content: center; z-index: 1;}
#pc_head .head_inner .gnb {margin-left: auto; width: 100%; height: 100%; padding: 0 5%;}
#pc_head .head_inner .gnb > li {font-size: 17px; width: calc(100% / 5); text-align: center; display: grid; place-items: center; position: relative;}
#pc_head .head_inner .gnb > li a {}
#pc_head .head_inner .gnb > li .lnb_box {position: absolute; width: 100%; top: 100%; box-sizing: border-box; height: 0; overflow: hidden; transition: height 0.5s}
#pc_head .head_inner .gnb > li .lnb_box .tit {padding-bottom: 1.2rem; padding-top: 2rem;}
#pc_head .head_inner .gnb > li .lnb_box .lnb {}
#pc_head .head_inner .gnb > li .lnb_box .lnb li {padding-bottom: 0.5rem;}
#pc_head .head_inner .gnb > li .lnb_box .lnb li a {display: block;}

#pc_head .head_inner .lang {border-right: 1px solid #fff; border-left: 1px solid #fff; padding: 0 30px;}
#pc_head .head_inner .lang li {font-size: 14px; padding-right: 10px; margin-right: 10px; font-weight: 400;}
#pc_head .head_inner .lang li::before {content: ''; display: block; position: absolute; right: 0; height: 60%; background: #C7C7C7; width: 1px; top: 50%; transform: translateY(-50%);}
#pc_head .head_inner .lang li:last-child {padding-right: 0; margin-right: 0; border-right: 0;}
#pc_head .head_inner .lang li:last-child::before {display: none}
#pc_head .head_inner .lang li.on {color: #C8CF04;}

#pc_head .head_inner .search {padding: 26px; cursor: pointer;}

#pc_head .head_inner.active {background: #fff; color: #000; border:0; border-bottom: 1px solid #eee}
#pc_head .head_inner.active::after {height: 21rem;}
#pc_head .head_inner.active .logo {border-right: 1px solid #eee}
#pc_head .head_inner.active .logo img {display: none}
#pc_head .head_inner.active .logo img.active {display: block;}
#pc_head .head_inner.active .lang {border-right: 1px solid #eee; border-left: 1px solid #eee;}
#pc_head .head_inner.active .search {filter: brightness(0);}

#pc_head .head_inner.drop {background: #fff; color: #000; margin: 10px auto 0; border: 1px solid #eee}
#pc_head .head_inner.drop .logo {border-right: 1px solid #eee}
#pc_head .head_inner.drop .logo img {display: none}
#pc_head .head_inner.drop .logo img.active {display: block}
#pc_head .head_inner.drop .lang {border-right: 1px solid #eee; border-left: 1px solid #eee;}
#pc_head .head_inner.drop .search {filter: brightness(0);}


#pc_head .head_inner .gnb li.colored {background: #8FB73E; color: #fff;}
#pc_head .head_inner .gnb li.colored::after {content: ''; display: block; position: absolute; width: 100%; height: 1px; bottom: -1px; background: #8FB73E}
#pc_head .head_inner .gnb > li.colored .lnb_box {background: #8FB73E;}
#pc_head .head_inner.active .gnb > li .lnb_box {height: 21rem; }

@media all and (max-width: 1420px){
    #pc_head .head_inner .gnb {gap: 15px; padding: 0 2%}
    #pc_head .head_inner .gnb > li {font-size: 14px;}
    #pc_head .head_inner .logo {padding: 23px 23px; min-width: 80px;}
    #pc_head .head_inner .lang {border-right: 1px solid #fff; border-left: 1px solid #fff; padding: 0 20px;}
    #pc_head .head_inner .lang li {font-size: 12px; padding-right: 10px; margin-right: 10px; font-weight: 400;}
}   

@media all and (max-width: 1150px){
    #mo_haeder {position: fixed; width: 100%; top: 0; z-index: 99; transition: background 0.3s; padding: 30px; box-sizing: border-box;}

    #mo_haeder .mo_head {justify-content: space-between; border: 1px solid #fff;}
    #mo_haeder .mo_head .logo {width: 150px; padding: 20px 23px; }
    #mo_haeder .mo_head .menu_btn {width: 8%; padding: 27px 18px; border-left: 1px solid #fff;}

    #mo_haeder .mo_menu_wrap {position: fixed; width: 100%; height: 100%; top: 0; display: none;}
    #mo_haeder .mo_menu_wrap .mo_black_bg {width: 110%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top:0; left: -10%;}

    #mo_haeder .mo_menu_box {width: 80%; height: 100%; margin-left: auto; background: #fff; right: -100%; transition: 1s;}
    #mo_haeder .mo_menu_box .menu_logo {padding: 40px 33% 20px; filter: brightness(0.5);}

    #mo_haeder .mo_menu_box .menu_login {display: flex; justify-content: center;}
    #mo_haeder .mo_menu_box .menu_login li {font-size: 1rem; padding: 0 10px;}
    #mo_haeder .mo_menu_box .menu_login li a {}

    #mo_haeder .menu_gnb {padding: 20px;margin-top: 20px}
    #mo_haeder .menu_gnb_lst {padding: 8px; border-bottom: 1px solid #e1e1e1;}
    #mo_haeder .menu_gnb_lst .gnb_name {font-size: 1.1rem; display: block;}
    #mo_haeder .menu_gnb_lst .gnb_name:after {content: ''; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 15px; height: 15px; background: url('../img/mo_menu_arrow.png') no-repeat; background-size: contain; transition: 0.4s}
    #mo_haeder .menu_gnb_lst .gnb_name.on:after {transform: translateY(-50%) rotate(180deg);}

    #mo_haeder .lang {border-right: 1px solid #fff; border-left: 1px solid #fff; padding: 0 30px; position: absolute;top: 90px;margin-left: 42px}
    #mo_haeder .lang li {font-size: 14px; padding-right: 10px; margin-right: 10px; font-weight: 400;}
    #mo_haeder .lang li::before {content: ''; display: block; position: absolute; right: 0; height: 60%; background: #C7C7C7; width: 1px; top: 50%; transform: translateY(-50%);}
    #mo_haeder .lang li:last-child {padding-right: 0; margin-right: 0; border-right: 0;}
    #mo_haeder .lang li:last-child::before {display: none}
    #mo_haeder .lang li.on {color: #C8CF04;}

    #mo_haeder .head_inner .search {padding: 26px; cursor: pointer;}


    #mo_haeder .menu_lnb {display: none; margin: 15px 0;}
    #mo_haeder .menu_lnb .menu_lnb_lst {}
    #mo_haeder .menu_lnb .menu_lnb_lst a {display: block; font-size: 1rem; padding: 5px; color: #5a5a5a;}

    #mo_haeder.fixed .mo_head {background: #fff; border: 1px solid #ccc;}
    #mo_haeder.fixed .mo_head .menu_btn {filter: brightness(0.5);}
    #mo_haeder.fixed .mo_head .logo {filter: brightness(0.5);}
}

@media all and (max-width: 1150px){
    #mo_haeder {padding: 10px;}
    #mo_haeder .mo_head .logo {width: 80px; padding: 15px;}
    #mo_haeder .mo_head .menu_btn {width: 6%; display: flex; align-items: center; padding: 0 12px;}
}

.search_area {z-index: 99999; position: fixed;  background: #fff; width: 100%; padding: 0 10%; box-sizing: border-box; padding-top: 3rem; padding-bottom: 2rem; justify-content: space-between; top: -100%; transition: all 0.3s;}
.search_area.active {top: 0;}
.search_area .sc_logo {max-width: 113px}
.search_area .sc_input {width: 70%;}
.search_area .sc_input .txt {font-size: 1rem; color: #727272; padding: 0.6rem 0 1rem;}
.search_area .sc_input .area {position: relative;}
.search_area .sc_input .area input {border: 0; box-shadow: none; border-bottom: 2px solid #ccc; border-radius: 0; width: 100%; height: 4rem; font-size: 1.5rem;}
.search_area .sc_input .area input:focus {outline: 0;}
.search_area .sc_input .area img {filter: brightness(0.7); width: 1.5rem; position: absolute; bottom: 1rem; right: 0.5rem; cursor: pointer;}
.search_area .sc_close {cursor: pointer;}
.search_area .sc_close img {}

#search_result {padding-top: 230px; background: #F7F7F7;}
#search_result .result_inner {max-width: 1320px; margin: 0 auto}
#search_result .title_area {text-align: center; padding-bottom: 60px;}
#search_result .title_area .tit {font-size: 81px; font-weight: bold; padding-bottom: 16px;}
#search_result .title_area .wrt {font-size: 20px; font-weight: 500; letter-spacing: -0.5px;}
#search_result .title_area .wrt i {color: #8FB73E}
#search_result .search_list_area {flex-wrap: wrap; gap: 24px; padding: 74px 0 46px; border-top: 3px solid #111111; border-bottom: 1px solid #111111;}
#search_result .search_list {width: calc((100% - 72px) / 4); margin-bottom: 26px;}
#search_result .search_list .img {border-radius: 30px; overflow: hidden; transition: 0.5s;}
#search_result .search_list .img .link_btn {font-size: 15px; position: absolute; color: #fff; background: #8FB73E; border-radius: 32px; padding: 15px 0; text-align: center; width: 80%; bottom: 15px; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.2s;}
#search_result .search_list .txt {font-size: 18px; padding-top: 36px;}
#search_result .search_list .txt .subt {font-weight: 500; color: #8FB73E; padding-bottom: 9px;}
#search_result .search_list .txt .tit {font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

#search_result .search_list .img:hover {box-shadow: 0 0 20px rgba(0,0,0,0.1);}
#search_result .search_list .img:hover .link_btn {opacity: 1;}

@media all and (max-width:1320px){
    #search_result .search_list {width: calc((100% - 72px) / 3);}
}
@media all and (max-width:1150px){
    #search_result {padding-top: 150px;}
    #search_result .result_inner {max-width: 90%}
    #search_result .title_area {padding-bottom: 30px;}
    #search_result .title_area .tit {font-size: 60px; padding-bottom: 0}
    #search_result .title_area .wrt {font-size: 18px;}
    #search_result .search_list_area {padding: 34px 0 24px; }
}
@media all and (max-width:1150px){
    #search_result .title_area .tit {font-size: 40px}
    #search_result .title_area .wrt {font-size: 15px}
    #search_result .search_list_area {gap: 0; justify-content: space-between;}
    #search_result .search_list {width: calc((100% - 15px) / 2);}
    #search_result .search_list .txt {padding-top: 18px; font-size: 15px}
    #search_result .search_list .txt .subt {padding-bottom: 5px}
}

footer {background: #212121;}
footer .foot_wrap {margin: 0 auto;}
footer .foot_cont {justify-content: space-between; color: #fff; padding: 80px 0;}
footer .catalog .tit {font-size: 37px; letter-spacing: -0.04em; line-height: 40px; font-weight: bold; padding-bottom: 0px}
footer .catalog .cata_btn {gap: 15px}
footer .catalog .cata_btn .btn {background: #213B34; font-size: 20px; font-weight: bold; align-items: center; padding: 13px 22px 13px 25px; gap: 40px}
footer .catalog .cata_btn .btn:hover {background: #23483e}
footer .catalog .cata_btn .copy {font-size: 11px; line-height: 18px; gap: 2px}
footer .catalog .cata_btn .copy i {}
footer .menu {padding-right: 90px;}
footer .menu ul li {letter-spacing: -0.04em; color: #A2A2A2; font-size: 15px; padding-bottom: 8px}
footer .menu ul li.on {color: #fff;}
footer .number {letter-spacing: -0.04em;}
footer .number .fm_wrap {}
footer .number .fm_wrap .site {font-size: 11px; gap: 127px; padding: 13px 17px; border: 1px solid #A2A2A2; color: #A2A2A2; align-items: center; font-weight: 600; position: relative; cursor: pointer;}
footer .number .fm_wrap .site::before {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 10px; height: 1px; background: #A2A2A2; right: 10%; transition: 0.5s; opacity: 1}
footer .number .fm_wrap .site::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #A2A2A2; right: 12.62%; transition: 0.3s; opacity: 1}
footer .number .fm_wrap.on .site::before {transform: rotate(90deg); }
footer .number .fm_wrap.on .site::after {transform: rotate(90deg); opacity: 0}
footer .number .fm_wrap .site_slide {border: 1px solid #A2A2A2; box-sizing: border-box; font-size: 12px; padding: 15px; position: absolute; width: 100%; background: #212121; z-index: 1; max-height: 200px; overflow: hidden; overflow-y: scroll; display: none}
footer .number .fm_wrap .site_slide li {color: #dddddd; padding: 8px 0;}
footer .number .fm_wrap .site_slide li.sbj {color: #9b9b9b;}
footer .number .fm_wrap .site_slide li.line {color: #9b9b9b;}
footer .number .fm_wrap .site_slide li a {}
footer .number .fm_wrap .site_slide::-webkit-scrollbar {width: 6px;}
footer .number .fm_wrap .site_slide::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 1px solid transparent;}
footer .number .fm_wrap .site_slide::-webkit-scrollbar-track {background-color: #212121;}
footer .number .num {font-size: 15px; font-weight: bold; margin-top: 25px}

.float {position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999;}
.float a {display: block; background: #2C2A29; padding: 20px 15px; height: 180px; position: relative;}
.float a .img {display: inline-block; max-width: 22px;}
.float a .txt {color: #fff; left: -41px; top: 116px; white-space: nowrap; transform: rotate(90deg); display: inline-block; position: absolute; font-weight: bold; font-size: 15px;}

@media all and (max-width: 1150px){
    footer .foot_cont {flex-direction: column; padding: 65px 0 80px;}
    footer .number .site {justify-content: space-between; font-size: 20px; margin: 25px 0 30px;}
}

@media all and (max-width: 1150px){

    footer .number .fm_wrap .site::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #A2A2A2; right: 11.34%; transition: 0.3s; opacity: 1}

    footer .foot_cont {padding: 40px 0;}
    footer .catalog .tit {font-size: 20px; line-height: 30px; padding-bottom: 22px;}
    footer .number .site {font-size: 16px;}

    .float {display: none;}
}