@charset "utf-8";

html {position: relative; height: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust:none;}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family: 'Montserrat', 'Pretendard', 'Apple SD Gothic Neo', 'sans-serif'; overflow-y: auto; overflow-x: hidden; letter-spacing: 0;}
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;font-family: 'Montserrat', 'Pretendard', 'Apple SD Gothic Neo', 'sans-serif'; word-break: keep-all;}
input,button,textarea,select{font-family: 'Montserrat', 'Pretendard', 'Apple SD Gothic Neo', 'sans-serif'; }
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none;}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
textarea {font-size: 16px; resize: none;}
textarea:focus {outline:none;}
textarea::placeholder {color:#bbb;}
form .hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
input {border: 1px solid #e6e6e6; font-size: 16px; font-weight: 400; height: 60px; border-radius: 10px; padding: 0;}
input::placeholder {font-weight: 400; color:#bbb;}
select {border: none; border: 1px solid #e6e6e6; font-size: 16px; height: 60px; background: url('../images/select_arrow_x3.png') transparent no-repeat right 5px center / 11px 6px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding: 0 20px; color:#222;}
textarea {font-size: 16px; resize: none;border: none;border: 1px solid #ddd; height: 300px; width: 100%; border-radius: 10px; padding: 20px;}
.radio_box {display: flex;}
.radio_box .rd {margin-right: 30px;}
.radio_box .rd:last-child {margin-right: 0;}
.radio_box .rd .f16 {margin-left: 6px; color: #bbb; line-height: 20px; white-space : nowrap;}
input[type="radio"] {display:none;}
input[type="radio"] + label {cursor: pointer; display: flex; align-items: center; }
input[type="radio"] + label:hover .icon {background: #f5f5f5;}
input[type="radio"] + label .icon {width: 16px; height : 16px; border:1px solid #bbb; border-radius: 50%; justify-content: center; margin: 0 auto; text-align: center; flex-shrink: 0;}
input[type="radio"] + label .icon span {display: inline-block; width: 9px; height: 6px; margin: 4px 1px 0 0; vertical-align: super; background: none; cursor: pointer;}
input[type="radio"]:checked + label .icon {border: 1px solid #000; flex-shrink: 0;}
input[type="radio"]:checked + label .icon span {background:url('../images/check_on.png') center no-repeat; background-size: cover;}
input[type="radio"] + label .caption {cursor: pointer; display: inline-block; font-size: 16px; font-weight: 300; color:#999; vertical-align: revert;}
input[type="radio"]:checked + label .caption {color:#000;}
input[type="radio"]:checked + label .f16 {color: #000;}
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {cursor: pointer; display: flex; align-items: center;}
input[type="checkbox"] + label:hover .icon {background: #f5f5f5;}
input[type="checkbox"] + label .icon {width: 16px; height : 16px; border:1px solid #bbb; border-radius: 50%; justify-content: center; margin: 0 auto; text-align: center; flex-shrink: 0;}
input[type="checkbox"] + label .icon span {display: inline-block; width: 9px; height: 6px; margin: 4px 1px 0 0; vertical-align: super; background: none; cursor: pointer;}
input[type="checkbox"]:checked + label .icon {border: 1px solid #000; flex-shrink: 0;}
input[type="checkbox"]:checked + label .icon span {background:url('../images/check_on.png') center no-repeat; background-size: cover;}
input[type="checkbox"] + label .f16 {cursor: pointer; display: inline-block; font-size: 16px; font-weight: 500; color:#bbb; vertical-align: revert; margin-left: 8px;}
input[type="checkbox"]:checked + label .f16 {color:#000;}

.wrapper {width: 100%; max-width: 1492px; padding: 0 16px; margin: 0 auto; position: relative;}
.image100 img {width: 100%;}
.line_btn {border: 1px solid #000; font-family: 'Gloock', serif; color: #000; width: 200px; height: 68px; display: flex; justify-content: center; align-items: center; transition: all 0.2s; font-size: 12px; letter-spacing: 1px !important;}
.line_btn:hover {background: #8a2332; color: #fff; border: 1px solid #8a2332; transition: all 0.3s;}
.line_btn2 {border: 1px solid #000; color: #000; width: 200px; height: 68px; display: flex; justify-content: center; align-items: center; transition: all 0.2s; font-size: 16px; font-weight: 600;}
.line_btn2:hover {background: #8a2332; color: #fff; border: 1px solid #8a2332; transition: all 0.3s;}
.color_btn {background: #8a2332; color: #fff; width: 200px; height: 68px; display: flex; justify-content: center; align-items: center; transition: all 0.2s; font-size: 16px; letter-spacing: 1px !important;}
.color_btn:hover {background: #fff; color: #000; transition: all 0.3s;}


/** Pagination**/
.pagination {text-align: center; display: flex; align-items: center; justify-content: center; margin-top: 20px;}
.pagination a {font-size: 16px; color:#ccc; font-weight: 600; line-height: 22px; vertical-align: top; display: flex; align-items: center; justify-content: center; margin: 0 13px; border-radius: 50%; transition: all 0.3s;}
.pagination a:hover, .pagination a.on {color:#000; font-weight: 700; transition: all 0.2s;}
.pagination a.prev, .pagination a.next {width: 42px; height: 42px; border: 2px solid #000; transition: all 0.3s; flex-shrink: 0;}
.pagination a.prev {margin-right: 35px; }
.pagination a.next {margin-left: 35px;} 
.pagination a.prev:hover {transform: translateX(-6px); transition: all 0.3s;}
.pagination a.next:hover {transform: translateX(6px); transition: all 0.3s;}
.pagination span {display: flex; align-items: center; justify-content: center; width: 15px; height: 13px;}
.pagination a.prev span {background: url('../images/pagination_prev.png') no-repeat center / cover;}
.pagination a.next span {background: url('../images/pagination_next.png') no-repeat center / cover;}


/** Header **/
.headerContainer {position:fixed; top:0; left:0; width:100%;  z-index:3;  height:90px; background-color:#fff; overflow:hidden; background-position:0% 175px; transition:	all 0.4s ease-in-out; -webkit-transition:	all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition:	all 0.4s ease-in-out;-webkit-transition:	all 0.4s ease-in-out;}
.headerContainer.top	{background-color:transparent; height:120px;}
.headerContainer.open {height:400px; background-color:#fff;}
.headerContainer.open header nav a {color:#666;}
.headerContainer.open header .bg {content:""; display: inline-block; background: url('../images/emblem.png') no-repeat center / cover; width: 331px; height: 399px; position: absolute; top: 0; right: 0;}
.headerContainer header	{display:flex; justify-content:space-between; padding:0 80px;}
.headerContainer header a {display:flex; align-items:center; justify-content: center;}
.headerContainer header .bg {display: none;}
.headerContainer header .logo {display: flex; align-items: center; height: 90px;}
.headerContainer header.top .logo {height: 120px;}
.headerContainer header .logo a {display:inline-block; width: 234px; height: 49px; background: url('../images/logo.png') no-repeat center / cover;}
.headerContainer.open header .logo a {background: url('../images/logo.png') no-repeat center / cover !important;}
.headerContainer header nav {text-align:center;}
.headerContainer header nav a	{font-size:15px; color:#999;}
.headerContainer header nav > ul	{display:flex; height: 400px;}
.headerContainer header nav li li a	{padding:12px 0; width:100%;}
.headerContainer header nav li li:first-child a {padding-top: 0;}
.headerContainer header nav > ul > li > .cate {position:relative;}
.headerContainer header nav > ul > li > .cate > a {display:flex; justify-content:center; align-items:center; width:170px; height:90px; font-weight:600;cursor: pointer;font-size: 18px; color: #000;}
.headerContainer.top header nav > ul > li > .cate > a {height:120px;}
.headerContainer header nav > ul > li > ul {display: none;}
.headerContainer.open header nav > ul > li > ul {display: inline-block;}
.headerContainer header nav > ul > li:hover > p:after	{width:100%;background-color:#e71650; left:0;}
.headerContainer header > ul {display:flex; height:100px; align-items:center; margin:0 45px 0 25px;}
.headerContainer header > ul > li + li:before {content:""; width:1px; height:11px; background-color:rgba(0,0,0,.3); display:inline-block; vertical-align:middle;}
.headerContainer.top header > ul	 > li + li:before	{background-color:rgba(255,255,255,.3);}
.headerContainer header > ul > li > a {font-size:18px; color:#222; font-weight:600; padding:0 15px;}
.headerContainer.top header > ul	 > li > a {color:#fff;}
.headerContainer.open header > ul > li > a {color:#222;}
.headerContainer header > ul > li.on > a {color:#fff;}
.headerContainer.open header nav > ul > li:hover {background: #8a2332; z-index: 99;}
.headerContainer.open header nav > ul > li:hover a {color:#c0979c;}
.headerContainer.open header nav > ul > li:hover a:hover {color: #fff;}
.headerContainer.open header nav > ul > li:hover .cate > a {color: #fff;}
.headerContainer.open header nav > ul > li > .cate {position: relative;}
.headerContainer.open header nav > ul > li > .cate > a {color: #000 !important;}
.headerContainer.open header nav > ul > li:hover > .cate > a {color: #fff !important;}
.headerContainer .right_menu {display: flex; align-items: center; height: 90px;}
.headerContainer.top .right_menu {height: 120px;}
.headerContainer .right_menu .box {display: flex; align-items: center; justify-content: center;}
.headerContainer .right_menu .box.all_menu_box {cursor: pointer; transition: all 0.3s; display: none; margin-left: 20px;} 
.headerContainer .right_menu .all_menu {display: inline-block; position: relative; width: 25px; height: 18px; vertical-align: middle;}
.headerContainer .right_menu .all_menu span {display: block;position: absolute; right: 0; width: 100%; height: 2px; background: #000; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; transition: all 0.30s ease-in-out;}
.headerContainer .right_menu .all_menu span:nth-child(1) {top: 0;}
.headerContainer .right_menu .all_menu span:nth-child(2) {top: 8px; width: 60%;}
.headerContainer .right_menu .all_menu span:nth-child(3) {top: 16px;}
.headerContainer .right_menu .lang {display: flex; position: relative; padding: 20px 0; cursor: pointer; margin: 0;}
.headerContainer .right_menu .lang a { margin-left: 20px; position: relative;}
.headerContainer .right_menu .lang a:first-child {margin-left: 0;}
.headerContainer .right_menu .lang a .f14 {font-weight: 500; color: #000;}
.headerContainer .right_menu .lang a .f14:hover {color: #8a2332;}
.headerContainer.open .right_menu .lang a .f14 {color: #000 !important;}
.headerContainer.open .right_menu .lang a.active .f14 {color: #8a2332 !important;}
.headerContainer.open .right_menu .lang a .f14:hover {color: #8a2332 !important;}
.headerContainer .right_menu .lang a.active .f14, .headerContainer .right_menu .lang a:hover {color: #8a2332;}
.headerContainer .right_menu .lang a.active .underline {content: ''; display: inline-block; width: 100%; height: 1px; background: #8a2332; position: absolute; bottom: -1px; left: 0;}
.headerContainer.open .right_menu .lang a.active .underline {background: #8a2332 !important;}
/**  Header Modal Popup **/
.hd_modal {display: none; position: fixed; width: 100%; height: 100vh; top: 0; right: 0; bottom: 0; z-index: 999; background:#8a2332;}
.hd_modal .header_close_btn {display: inline-block; width: 24px; height: 24px;  position: absolute;  right: 20px;  top: 24px; cursor: pointer; z-index: 1;}
.hd_modal .header_close_btn span { display: inline-block; background: #fff; height: 24px;  position: relative; width: 1px; transform: rotate( 135deg); left: 10px;}
.hd_modal .header_close_btn span:after {content: ""; background: #fff; height: 1px; position: absolute; top: 12px;  left: -11px; width: 24px;}
.hd_modal .container {height: 100vh; padding-top: 0;}
.hd_modal ul#myMenu {position: relative; top: 50%; transform: translateY(-52%); text-align: center;}
.hd_modal li {white-space: nowrap;}
.hd_modal li.category {margin-bottom: 20px; cursor: pointer; line-height: 30px;}
.hd_modal li.category a.cate_txt {font-size: 18px; font-weight: 600; color: #fff;} 
.hd_modal ul.sub_menu {margin-top: 6px; display: none;}
.hd_modal ul.sub_menu li {padding: 3px 0;}
.hd_modal ul.sub_menu li a {font-size: 16px; font-weight: 500; color:#e7c6ca; line-height: 28px; display: inline-block; position: relative;}
.hd_modal ul.sub_menu li .depth {margin-bottom: 10px;}
.hd_modal ul.sub_menu li .depth li a {color:#a4c6d9; font-weight: 400; font-size: 15px;}
.hd_modal li a span {display: inline-block;  z-index: 1;  height: 3px; width: 0%;  background-color: #fff; position: absolute; bottom: 1px; left: 0;}
.hd_modal li a:hover {color:#fff; transition: all 0.8s;} 
.hd_modal li a:hover span { width: 100%; transition: all 0.8s;} 
.hd_modal li a .circle {display: inline-block;  width: 12px; height: 12px; background-color: #ec6617; border-radius: 50%; position: absolute; right: -30px; top: 0; opacity: 0; }
.hd_modal li a:hover .circle {opacity: 1; transition: all 0.8s;}
/**  Header Modal Popup **/
/** Header **/


/** Footer **/
.footer {background: #111; padding: 90px 80px 70px;}
.footer .inner {display: flex; justify-content: space-between;}
.footer .inner .left {display: flex; justify-content: space-between; flex-flow: column;}
.footer .inner .left .top .f60 span {color: #fff; display: block; font-family: 'Gloock', serif; letter-spacing: 2px; font-weight: 400; margin-bottom: 10px;}
.footer .inner .left .ft_info li {color: #fff; margin-bottom: 4px;}
.footer .inner .left .ft_info li span {margin-right: 20px;}
.footer .inner .right .top_btn {display: flex; justify-content: flex-end; margin-bottom: 140px;}
.footer .inner .right .top_btn a {display: flex; justify-content: center; align-items: center; width: 152px; height: 152px; border: 1px solid #fff; border-radius: 50%; transition: all 0.3s;}
.footer .inner .right .top_btn a:hover {background: #8a2332; border: 1px solid #8a2332; transition: all 0.2s;}
.footer .inner .right .top_btn a .arrow {background: url('../images/top_icon.png') no-repeat center / cover; width: 16px; height: 42px;}
.footer .inner .right .family_site {position: relative;}
.footer .inner .right .family_site .box {display: flex; align-items: center;  justify-content: space-between; width: 270px; border-bottom: 2px solid #fff; cursor: pointer; padding: 15px 8px;}
.footer .inner .right .family_site .box .f18 {color:#fff;}
.footer .inner .right .family_site .box .arrow {display: inline-block;  background: url('../images/select_arrow2_x3.png') no-repeat  center / cover; width: 15px; height: 9px; vertical-align: middle; margin-left: 5px;}
.footer .inner .right .family_site ul {position: absolute; bottom: 59px; left: 0; width: 100%; display: none;}
.footer .inner .right .family_site ul.active {display: inline-block;}
.footer .inner .right .family_site ul li {border-bottom: 1px solid #333; background-color: #232323; }
.footer .inner .right .family_site ul li:last-child {border: none;}
.footer .inner .right .family_site ul li a {display: inline-block; font-size: 15px; width: 100%; color: #888; margin: 0; padding: 14px 20px;}
.footer .inner .right .family_site ul li a:hover {color: #ddd;}
.footer .inner .right .family_site_wrap select {border: 0; border-bottom: 2px solid #fff; color: #fff; padding: 0 10px;  width: 270px; background: url('../images/select_arrow2_x3.png') transparent no-repeat right 25px center / 15px 9px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; cursor: pointer;}
.footer .inner .right .family_site_wrap select option {color: #000;}
/** Footer **/







@media (max-width: 1600px) {
   .headerContainer header {padding: 0 20px;}
}


@media (max-width: 1440px) { 
   .headerContainer, .headerContainer.top {height: 90px;}
   .headerContainer header .logo, .headerContainer.top header .logo {height: 90px;}
   .headerContainer header .logo a {width: 190px; height: 39px;}
   .headerContainer .right_menu, .headerContainer.top .right_menu {height: 90px;}
   .headerContainer header nav li li a {padding: 10px 0;} 
   .headerContainer header nav > ul > li > .cate > a, .headerContainer.top header nav > ul > li > .cate > a {width: 130px; height: 90px; font-size: 16px;}
   .headerContainer.open {height: 400px;}
   .headerContainer.open header nav > ul > li:hover > .cate::after {top: 88px;}
   select {background: url('../images/select_arrow_x3.png') transparent no-repeat right 15px center / 11px 7px;}
   .footer .inner .right .top_btn a {width: 100px; height: 100px;}
}


@media (max-width: 1199px) { 
   .headerContainer, .headerContainer.top {height: 70px;}
   .headerContainer header {padding: 0 16px;}
   .headerContainer header .logo, .headerContainer.top header .logo {height: 70px;}
   .headerContainer header .logo a {width: 165px; height: 34px;}
   .headerContainer .right_menu, .headerContainer.top .right_menu {height: 70px;}
   .headerContainer header nav > ul > li > .cate > a, .headerContainer.top header nav > ul > li > .cate > a {width: 120px; height: 70px; font-size: 16px;}
   .headerContainer header nav a {font-size: 14px;}
   .headerContainer.open {height: 290px;}
   .headerContainer.open header nav > ul > li:hover > .cate::after {width: 120px;}
   .headerContainer.open header .bg {width: 240px; height: 289px;}
   .headerContainer .right_menu .lang a {margin-left: 14px;}
   .footer {padding: 60px 20px 50px;}
   input, select {height: 54px;}
   textarea {height: 240px;}
   .line_btn, .line_btn2, .color_btn {width: 180px; height: 56px;}
   select {background: url('../images/select_arrow_x3.png') transparent no-repeat right 5px center / 11px 7px;}
}


@media (max-width: 1024px) { 
   .headerContainer header nav > ul {display: none;}
   .headerContainer .right_menu .box.all_menu_box {display: inline-block;}
   .footer {padding: 50px 16px 50px;}
   .footer .inner .right .top_btn {margin-bottom: 100px;}
   input, select, textarea {font-size: 16px;}
}


@media (max-width: 959px) { 
}


@media (max-width: 767px) {
   .footer .inner .left .top .f60 span {margin-bottom: 4px;}
   .footer .inner .right .family_site .box {width: 200px;}
   .footer .inner .right .top_btn a {width: 80px; height: 80px;}
   .footer .inner .right .top_btn a .arrow {width: 10px; height: 30px;}
   textarea {height: 200px;}
   .pagination span {width: 13px; height: 10px;}
   .pagination a.prev, .pagination a.next {width: 32px; height: 32px;}
   .pagination a.prev {margin-right: 15px;}
   .pagination a.next {margin-left: 15px;}
}


@media (max-width: 640px) {
   .footer {padding: 40px 16px;}
   .footer .inner .left .top .f60 {margin-bottom: 16px;}
   .footer .inner {flex-flow: column;}
   .footer .inner .right {display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px;}
   .footer .inner .right .family_site {order: 1;}
   .footer .inner .right .top_btn {order: 2; margin-bottom: 0;}
   .footer .inner .right .top_btn a { width: 60px; height: 60px;}
   .pagination a {font-size: 15px; line-height: 21px;}
   .line_btn, .line_btn2, .color_btn {font-size: 15px; line-height: 25px;}
}


@media (max-width: 479px) {
   .pagination a {margin: 0 6px;}
   .footer .inner .left .ft_info li span {display: block;}
}


@media (max-width: 374px) {
   .pagination a.prev {margin-right: 14px;}
   .pagination a.next {margin-left: 14px;}
}


@media (max-height: 650px) {
   .line_btn, .line_btn2, .color_btn {width: 180px; height: 50px;}
}