/* 마우스 아이콘 위아래 애니메이션 */
#mouse-anim {
  animation: mouseMove 2.4s infinite cubic-bezier(.4,0,.2,1);
}
@keyframes mouseMove {
  0% { transform: translateY(0); }
  /* 20% { transform: translateY(-12px); }
  40% { transform: translateY(0); } */
  50% { transform: translateY(12px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
/* 항상 오른쪽 아래에 고정되는 Contact 버튼 */
.a_contact {
  position: fixed;
  right: 10px;
  bottom: 32px;
  z-index: 9999;
  /* box-shadow: 0 4px 16px rgba(0,0,0,0.12); */
}

@charset "utf-8";

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}


:root {
  --site_width:1440px;
  --color_primary: #293855;
}

/* body {overflow: hidden;} */
.header_wrap {max-width: var(--site_width); margin: 0 auto; height: 80px;}

.header_wrap > ul {display: flex; justify-content: space-between; align-items: center; height: 80px;}
.header_wrap > ul .logo2 {margin-left: 0;margin-right: 0;display: flex;justify-content: center;align-items: center;width: 100%;}
.header_wrap > ul .logo2 img {display: block;}
.header_wrap .main_menu {display: flex; justify-content: space-between; align-items: center; gap:104px; height: 80px; margin-right: 20px;}
.header_wrap .main_menu >li span { font-family: 'GMarketSans', 'Times New Roman', 'Times, serif'; font-size: 16px; font-weight: 900; cursor: pointer;}
.material-symbols-outlined {font-size: 30px;}
#ham_ico {display: none !important}


.main_menu {list-style: none;padding: 0;margin: 0;display: flex;}
.main_menu > li {position: relative;margin-right: 30px;}
.main_menu > li:hover > span {color: #1a73e8; /* 원하는 컬러로 변경 가능 */transition: color 0.2s, background 0.2s;}


.sub_menulist {display: block; padding: 20px; background: #fff; height: auto; overflow-y: visible; padding-left: 0px; padding-right: 0px;}
.sub_menulist > ul {max-width: var(--site_width); margin: auto;  display: flex; justify-content: end; gap:100px;  padding-right: 20px;}
.sub_menulist > ul > li  > ul > li {display: flex; ; flex-direction: column;  justify-content: center; gap: 0px; padding: 0px; text-align: left; height: 36px; width: 120px;}
.sub_menulist > ul > li  > ul > li span {font-size: 15px; font-weight: 600;}


.sub_menulist {display: none;position: absolute;border-top:1px solid #ddd;position: absolute; border-radius: 10px;; z-index: 100;top:80px;margin-top: -5px;left: 0;right: 0;}
.sub_menulist > ul > li > ul > li span {padding: 0; display: inline;}
.sub_menulist > ul > li > ul > li span:hover {font-size: 16px; color:#1a73e8; cursor: pointer;}

.content .sub-visual {background: #000 url('https://mapletree88.com/image/ring_main5.png') center center/cover no-repeat;height: 900px;}
.content .sub-visual h3{color:#fff; font-size: 28px; font-weight: 500; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.ring_txt span {display: inline; padding: 0px; font-size: 18px; color: #757575; font-weight: bold; border: 0px solid #fff; border-radius: 5px;}
.ring_info {margin-top: 50px; display: inline-block; background: rgba(0,0,0,0.1);;}
.ring_info span {display: inline; padding: 10px; font-size: 18px; color: #ffffff; font-weight: 400; border: 1px solid #fff; border-radius: 5px;}


.contact_us {margin-top: 100px;}
.contact_us span{color: red;  padding: 14px; font-size: 22px; font-weight: 700; border: 1px solid red; border-radius: 5px; cursor: pointer;}
#scroll_mouse {
  position: absolute;
  left: 50%;
  top: 93%;
  bottom: 0px;
  transform: translateX(-50%);
  z-index: 100;
}
/* 스마트 링 정보 */
.ring_info_se1 {margin-top: 80px; margin-bottom: 60px;} 
.ring_select {display: flex; justify-content: center; flex-wrap: wrap;  gap: 20px; padding: 0px; margin: 20px 0; overflow: hidden;}
.ring_select > li {width: 350px; height: auto; border: 1px solid #ddd; border-radius: 10px; padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s;}
.ring_select > li > ul {display: flex; flex-direction: column; gap: 10px; padding: 10px 0 0 0; margin: 0; height: 360px;}
.ring_select > li > ul > li {font-size: 16px; color: #fff; line-height: 1.4; padding: 0px;}
.ring_select h3 {font-size: 26px; color: #fff; border-bottom:1px solid #fff; margin: 20px 0; padding-bottom: 20px;}
.ring_select > li > ul > li span {font-size: 15px;font-weight: 400;margin-bottom: 20px;line-height: 2;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;max-height: 6em;position: relative;}

/* 자세히 보기 버튼 스타일 */
.show-more-btn {display: inline-block;margin-top: -10px;margin-bottom: 20px;color: #1a73e8;background: none;border: none;cursor: pointer;font-size: 14px;font-weight: 600;padding: 0;}
#Heliostar_RING:hover {color: red;}
.info_bg  {background-image: url("https://mapletree88.com/image/info_bg.png"); width: 1920px; overflow: hidden;}

.sec2 {width: 100%;}

/* 스펙 */

.sec3 {background: #000; padding-bottom: 120px; width: 100%; overflow: hidden;}
.sec3 {padding-top: 140px;background: #ffffff;padding-bottom: 80px; max-width: var(--site_width); margin: auto;}
.sec3 .dot {border-top: 8px solid tomato; margin-bottom: -5px; width: 50px;}
.sec3 h2 {font-size: 48px;font-weight: 700;margin-bottom: 20px;}
.sec3 p {font-size: 16px;line-height: 1.6;color: #666;}

.sec3 .product > ul > li span {line-height: 50px; height: 50px; margin-top: 30px; overflow: hidden;} 
.sec3 .product > ul {display: flex; justify-content: center; gap: 40px; align-items: center; padding: 0px;}
.sec3 .product > ul  { border-top: 1px solid #ddd; border-bottom: 0px solid #ddd; height: 50px; margin-bottom: 0px;}

.sec3 .product > ul > li:nth-of-type(1) {background: #ffffff; height: 100%; border-left:0px; border-right:1px solid #ddd;  text-align: center; width: 300px;} 
.sec3 .product > ul > li:nth-of-type(2) {text-align: center; width: 80%; height: 100%; border-right:0px solid #ddd;}  
.sec3 .product > ul:nth-last-child(1) {border-bottom: 1px solid #ddd; width: 100%;}
.sec3 .product > ul:nth-child(2) {border: 0;}
.sec3 > ul {display: flex; justify-content: center; gap: 140px; align-items: center; margin-top: 50px;}
.sec3 .spec_img1 {
  background-image: url("https://mapletree88.com/image/ring_spec_img4.png");
  width: 350px;
  height: 485px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation: spec-img2-grow-shrink 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
} 
.sec3 .spec_img2 {
  background-image: url("https://mapletree88.com/image/ring_spec_img3.png");
  width: 350px;
  height: 485px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  animation: spec-img2-grow-shrink 16s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes spec-img2-grow-shrink {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* quict */


#ring_spec1 {background-image: url("https://mapletree88.com/image/s_1.png");}
#ring_spec2 {background-image: url("https://mapletree88.com/image/s_2.png");}
#ring_spec3 {background-image: url("https://mapletree88.com/image/s_3.png");}
#ring_spec4 {background-image: url("https://mapletree88.com/image/s_4.png");}
#ring_spec5 {background-image: url("https://mapletree88.com/image/s_5.png");}
#ring_spec6 {background-image: url("https://mapletree88.com/image/s_6.png");}
#ring_spec7 {background-image: url("https://mapletree88.com/image/s_7.png");}
#ring_spec8 {background-image: url("https://mapletree88.com/image/s_8.png");}
#ring_spec9 {background-image: url("https://mapletree88.com/image/s_9.png");}
#ring_spec10 {background-image: url("https://mapletree88.com/image/s_10.png");}
#ring_spec11 {background-image: url("https://mapletree88.com/image/s_11.png");}

.ring_line {width: 100%; height: 1px; background: #ddd; margin: 80px 0;}
.ring_spec_space {height: 100px;}
/* .ring_symbols_size {font-size: 100px; color: #fff;} */

/* 폼메일 */
.sec4 {background: #000000;}
.sec4 .inner {max-width: var(--site_width); margin: auto; height: 440px;}
.sec4 .inner h3 {color: #fff; font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.sec4 .inner h4 {color:  tomato; font-size: 40px; font-weight: 800; margin-bottom: 10px;}

.sec4 .contact {display: flex; justify-content:center; align-items: center; gap: 50px; margin-top: 0px;}

/* .sec4 .contact .txt .contact_logo {background-image: url("http://carevibe.shop/maple/image/contact_logo_m.png"); width: 189px; height: 48px; background-repeat: no-repeat; background-size: cover; background-position: center;}  */
.sec4 .contact .txt h3 {font-size: 16px; margin-top: 10px;}
.sec4 .contact .txt h4 {font-size: 30px; margin-top: 10px; color:#fff;}
.sec4 .contact .txt span {display: block; font-size: 18px; color: #fff;  }
/* .sec4 .contact .txt .contact_line {width: 100%; height: 2px; background: #ddd; margin: 20px 0; margin-bottom: 130px;} */
.sec4 .contact .form_mail {color:#fff; height: 400px;  width: 100%;}
.sec4 .contact .form_mail h3 {color:#c0c0c0; font-size: 16px;  width: 100%; margin-bottom: 30px; margin-top: 20px;}
.sec4 .contact .txt {width: 40%; background: rgb(0, 0, 0); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; height: auto;}

/* 폼메일 */
/* .form_mail {background: blue;} */
.form_mail ul {display: flex;  gap: 0px; padding: 0px; justify-content: center; width: 100%; background: #000;}
.form_mail ul li {width: 100%; padding: 10px;}

.form_mail ul .name  {width:100%; height: 50px; border-radius: 10px; padding-left: 10px; border: 1px solid #fff;; background-color: #000;  color:#fff;}
.form_mail ul .phone {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #fff;; background-color: #000;  color:#fff;}
.form_mail ul .email {width:100%; height: 50px; border-radius: 10px; padding-left: 10px;  border: 1px solid #fff;; background-color: #000;  color:#fff;}
.form_mail ul .message {width: 100%; height: 250px; border-radius: 10px; padding: 10px; border: 1px solid #fff;; background-color: #000;  color:#fff; resize: none;}

.form_mail .agree {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%;}
.form_mail .agree .check {color:#fff; margin-top: 0px; width: 100%; text-align: left; display: flex; justify-content: flex-start; gap:10px; align-items: center;}
.form_mail .agree .check input {width: 20px; height: 20px; padding-right: 10px;}
.form_mail .agree .check span {font-size: 14px; color:#fff;}
.form_mail .agree .question {background: #F7941D; width: 250px;  border-radius: 10px; margin-right: 20px;}
.form_mail .agree .question span{padding: 10px; font-size: 20px; font-weight: 600; color:#fff;}

/* input.name placeholder 폰트 크기 줄이기 */
input.name::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}
input.phone::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}
input.email::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}
textarea.message::placeholder {font-size: 15px;font-weight: 600;color: #ffffff;}

/* 모달창 */

.private h3 {font-size: 20px;}
#show-privacy-modal {
  text-decoration: none !important;
}
/* 회사소개 */

.content_company .sub-visual {position: relative; background: #000 url('https://mapletree88.com/image/company_bg.png') center center/cover no-repeat; height: 540px;}
.content_company .sub-visual h3{color:#fff; font-size: 50px; font-weight: 800; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_company .sub-visual h2{color:#cecece; font-size: 30px; font-weight: 600; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_company .sub-visual h4{color:#cecece;  text-align: right; width: 180px; font-size: 15px; font-weight: 400; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}

.content_company .sec1 h4 {color: #000000; font-size: 18px; line-height: 30px; font-weight: 600; text-align: left; margin-bottom: 20px;}
.content_company .sec1 h3 {color: #000000; font-size: 34px; font-weight: 800; text-align: left; margin-bottom: 50px;  line-height: 1.5;}
.content_company .sec1 h3 span {border-bottom: 2px solid #000000;}
.content_company .sec1 p {font-size: 17px; font-weight: 400; text-align: left; width: 100%;  color: #1b1b1b; line-height: 1.8; margin: 0; margin-bottom: 40px; text-align: left;}
.content_company .sec1 .company_tree {display: flex; justify-content: space-between; align-items: center; margin-top: 40px;}
.content_company .sec1 .company_tree > li:nth-of-type(1) {width: 50%;}
.company_m_bg {position: relative;}
.company_m_bg_txt {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 30px; line-height: 2; font-weight: 700; text-align: center;}
.company_m_bg_txt span {color: #fff;}
.company_height {height: 100px; border-bottom: 1px solid #d4d4d4; max-width: var(--site_width); margin: auto;}

/* 연혁 */
.content_company .sec3 {border: 0px solid #1b1b1b; margin-top: 0;}
.content_company .sec3 ul {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0px; margin: 0px;}
.content_company .sec3 ul li {width: 40%;}
.content_company .sec3 ul .history_left {
  padding: 20px;
  border: 1px solid #959595;
  border-radius: 10px;
  background: rgb(0, 0, 0);
  
}

#com_txt {display: none;}
.content_company .sec3 ul .history_left h3 {font-size: 30px; font-weight: 700; color:rgb(255, 255, 255); padding: 20px; margin-bottom: 0px; text-align: center;}
.content_company .sec3 ul .history_left h4 {font-size: 28px; font-weight: 600; color:#DAC4A7; margin-bottom: 60px; text-align: center;}
.content_company .sec3 ul .history_left .view_more {border: 1px solid #F7941D; border-radius: 5px; display: inline-block; padding: 20px; margin-top: 50px; margin-bottom: 20px; background:#DAC4A7;}
.content_company .sec3 ul .history_left .view_more:hover {background: #000; cursor: pointer; transition: background 0.3s;}
.content_company .sec3 ul .history_left .view_more span {font-size: 20px; font-weight: 600; padding: 20px; color:rgb(37, 37, 37); text-align: center;}
.content_company .sec3 ul .history_left .view_more:hover span {color: #F7941D;}


.content_company .sec3 ul .history_right {height: 680px; width: 800px;}
.content_company .sec3 ul .history_right h2{font-size: 34px; font-weight: 700; margin-bottom: 50px;}
.content_company .sec3 ul .history_right h2 span {border-top:6px solid #F7941D;}
.content_company .sec3 ul .history_right ul { display: flex; border-top: 1px solid #a5a5a5;  align-items:center; gap: 0px; padding: 0px; margin: 0px;}
.content_company .sec3 ul .history_right ul li {display: flex; justify-content: space-between; align-items: center; padding: 20px;  width: 100%;}
.content_company .sec3 ul .history_right ul li h3 {font-size: 24px;}
.content_company .sec3 ul .history_right ul li span {height: 2px; background: #000; width: 200px;}
.content_company .sec3 ul .history_right ul li h4 {font-size: 20px; font-weight: 400; display: block; height: 40px; margin-top: 10px;}
.content_company .sec3 ul .history_right ul li .row {display: flex;  flex-direction: column; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0px solid #eee;}
.content_company .sec3 ul .history_right ul:nth-last-child(1) {border-bottom: 1px solid #a5a5a5;}

/* 3차메뉴 */

.menu {height: 50px; border-top:1px solid #eee; width: 100%; background: #f8f8f8; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.menu .inner {max-width: var(--site_width); margin: auto; height: 50px;}

.menu .inner .menu_subT span{font-weight: 500;}
.menu .inner .menu_subT span:hover {color: #1a73e8; cursor: pointer; transition: color 0.2s, background 0.2s; border-bottom: 1px solid #1a73e8;}

.menu ul {display: flex; justify-content: end; gap:80px; align-items: center; padding-right: 80px;}
.menu ul li {padding: 15px 0;}
.menu_subT a {
  text-decoration: none;
  border-bottom: none;
}
.menu_subT a.active {
  border-bottom: 2px solid #000;
}

.hambuger_wrap {display: none;}

header {position: relative;}
.hambuger_wrap {position: absolute; max-width: var(--site_width); top:0px; width: 60%; background: #ab7859; height: 100%; z-index: 1;}
.hambuger_wrap .inner {padding-left: 10px; padding-right: 10px;}
.hambuger_wrap .hambuger .top {margin-top: 30px; text-align: center;}
.hambuger_wrap .hambuger .top > ul {display: flex; justify-content: space-between; align-items: center;}
.hambuger_wrap .hambuger .top:after {content: ""; height: 1px; width: 100%; display: block; background: #e9dddd; margin-top: 10px;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(1) {font-size: 20px; font-weight: 700; color:#fff;}
.hambuger_wrap .hambuger .top > ul  li:nth-of-type(2) {background-image: url("https://mapletree88.com/image/hambuger_close.png"); width:40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.hambuger_wrap .hambuger .hmenu {margin-top: 30px;}
.hambuger_wrap .hambuger .hmenu > ul {display: flex; justify-content: start; align-items: left; gap: 0px; flex-direction: column; color:#fff; font-size: 18px; font-weight: 600;}
.hambuger_wrap .hambuger .hmenu > ul  li {height: 50px; align-items: center; padding-left: 6px;}
.hambuger_wrap .hambuger .hmenu > ul  li span {line-height: 50px; font-size:16px; font-weight: 800;}
.hambuger_wrap .hambuger .hmenu > ul  li:hover {background: none; color: inherit; cursor: default;}

.content_contact .sub-visual {position: relative; background: #000 url('https://mapletree88.com/image/contact.png') center center/cover no-repeat; height: 540px;}
.content_contact .sub-visual h3{color:#fff; font-size: 50px; font-weight: 800; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_contact .sub-visual h2{color:#cecece; font-size: 30px; font-weight: 600; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_contact .sub-visual h4{color:#cecece;  width: 180px; font-size: 15px; font-weight: 400; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}



.m_view {display: none;}
.m_view2 {display: none;}

#form_title {display: none;}
#ring_title {background: #d7504a; display: inline-block; padding: 20px; border-radius: 10px;
  color:rgb(255, 255, 255); font-size:40px; margin-bottom:50px; font-weight:900;
}

select.category, select.category option {
	color: #fff !important;
	background: #000;
}


@media (max-width: 1200px) {
/* .menu {display: none;}
#main_menu {display: none;} */
#ham_ico .material-symbols-outlined {font-size: 52px;}
/* #ham_ico {display: none !important; cursor: pointer;} */
 .ring_m_view {display: none;}
.hambuger_wrap {display: none;}
/* #ham_ico {display: block !important; cursor: pointer;} */

}

@media (max-width: 768px) {
.menu {display: none;}
#main_menu {display: none;}

#scroll_mouse {
  position: absolute;
  left: 90%;
  top: 85%;
  bottom: 0px;
  transform: translateX(-50%);
  z-index: 100;
}

#footer-info .clearfix li{font-size: 16px; text-align: center; width:100%; padding-bottom:10px;}
#ham_ico {display: block !important;padding-right: 20px;}
#ham_ico .material-symbols-outlined {font-size: 52px;}
.content .sub-visual {
    background: #000 url('https://mapletree88.com/image/ring_main_m.png') center center/cover no-repeat;
    height: 580px;
    overflow: hidden;
  }

#ring_title {display: none;}
#ring_subtitle1 {display: none;}
#ring_subtitle2 {display: none;}

/* .content .sub-visual {position: relative;} */
#contact_maple2 {display: none;}

#ring_m_view1 {display: none;}
 #ring_m_view2 {display: none;}
 #ring_m_view3 {display: none;}
 #ring_m_view4 {display: none;}
 #ring_m_view5 {display: none;}
 #ring_m_view6 {display: none;}
 #ring_m_view7 {display: none;}
 #ring_m_view8 {display: none;}
 #ring_m_view9 {display: none;}
 #ring_m_view10 {display: none;}
 #ring_m_view11 {display: none;}
 #ring_m_view12 {display: none;}


/* contact */
.content_contact .sub-visual {position: relative; background: #000 url('https://mapletree88.com/image/contact.png') center center/cover no-repeat; height: 540px;}
.content_contact .sub-visual h3{color:#fff; font-size: 50px; font-weight: 800; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_contact .sub-visual h2{color:#cecece; font-size: 30px; font-weight: 600; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_contact .sub-visual h4{color:#cecece;  text-align: right; width: 180px; font-size: 15px; font-weight: 400; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}


#ring_title {font-size: 20px; padding: 10px 20px;}
/* .sec1 .ring_recomm {background-image: url('http://carevibe.shop/maple/image/banner.png'); width: 1920px; height: 2110px; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 0px; display: block;} */
/* .banner { overflow: hidden;} */

.sec11 h4 {font-size: 24px; font-weight: 600; margin-bottom: 22px; line-height: 40px;}
.sec11 p {font-size: 17px; font-weight: 400;  line-height: 2; margin-bottom: 40px;}
.ring_recomm {display: none;}
.ring_info_se1 {margin-top: 40px; margin-bottom: 60px;} 

#ring_spec {display: none;}
/* .sec3 {margin: 40px; padding: 0px;} */
.sec3 h2 {font-size: 30px; padding-top: 0px;}

/* .m_product ul{justify-content: center; flex-direction: column; gap: 0px; flex-wrap: wrap; margin-top: 0px;} */
.sec3 ul {display: flex; justify-content: center; flex-direction: column-reverse; gap: 0px; flex-wrap: wrap; margin-top: 10px;}
.sec3 {width: 380px;}
.sec3 .spec_img2 {
  margin-top: 50px;
  margin-bottom: 80px;

  background-image: url("https://mapletree88.com/image/ring_m1.png");
  width: 330px;
  height: 277px;
}
.m_view {display: block; line-height: 10px;}
.m_view2 {display: block;}
.sec3 .product > ul > li:nth-of-type(1) {line-height: 58px; height: 50px; border-left:0px; border-right:0px solid #ddd;  text-align: left; width: 120px; padding-left: 4px;} 

.sec3 .product > ul > li:nth-of-type(2) {line-height: 58px; text-align: left; width: 80%; height: 50px; border-right:0px solid #ddd;}  
.sec3 .product > ul > li span {line-height: 20px;} 
#lh2 li:nth-of-type(1) {
  padding-top: 15px;
  line-height: 20px;
}

#lh1 li:nth-of-type(2) {
  padding-top: 10px;
  line-height: 20px;
}
.ring_line {display: none ;}
.spec_img1 {display: none;}
#spec_view {display: none;}
#spec_view2 {display: none;}

.product {width: 360px;}



.sec4 .contact .txt {display: none;}
.sec3 .product > ul:nth-child(2) {border-top: 1px solid #ddd;}
.sec3 .product > ul:nth-child(2) {padding: 0;margin: 0;}

  .sec3 .spec_img2 {
    animation: none;
  }
#form_title {display: block;}
.ring_spec_space {height: 10px;}
.contact .form_mail h4 {color: #fff; font-size: 26px;}
.contact {padding-right: 20px; padding-left: 20px;}
/* .sec4 {width: 380px; margin: auto;} */

.sec4 .inner {max-width: var(--site_width); margin: auto; height: 580px;}
.agree {display: flex; flex-direction: column; gap:60px; align-items: center;}
.agree .question {margin-top: 20px;}
.ring_info_se1 {width: 370px;}

.contact_us {margin-top: 30px;}
.contact_us span{color: red;  padding: 14px; font-size: 18px; font-weight: 500; border: 1px solid red; border-radius: 5px; cursor: pointer;}

.content_company .sub-visual {position: relative; background: #000 url('https://mapletree88.com/image/company_bg.png') center center/cover no-repeat; height: 300px;}
.content_company .sub-visual h3{color:#fff; font-size: 30px; font-weight: 800; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_company .sub-visual h2{display: none;}
.content_company .sub-visual h4{color:#cecece;  text-align: left; width: 180px; font-size: 15px; font-weight: 400; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}

.content_company .sec1 h3 {color: #000000; font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 50px; margin-top: 30px;  line-height: 1.7;}
.content_company .sec1 h3 span {border-bottom: 0px solid #000000;}
.content_company .sec1 h4  { display: inline; text-align: center; border-bottom: 1px solid #000000;}

#company_tree1 {display: none;}
.content_company .sec1 .company_tree {display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 40px;}
.content_company .sec1 .company_tree > li:nth-of-type(1) {width: 100%;}

.company_m_bg_txt {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 370px; font-size: 16px; line-height: 1.5; font-weight: 600; text-align: center;}

.content_company .sec3 ul {display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 0px; margin: 0px;}
.content_company .sec3 ul li {width: 100%;}
.content_company .sec3 ul .history_left {
  padding: 20px;
  border: 1px solid #959595;
  border-radius: 10px;
  background: rgb(0, 0, 0);
}

.content_company .sec3 {padding-top: 50px;}
.content_company .sec3 ul .history_left h3 {font-size: 30px; font-weight: 700; color:rgb(255, 255, 255); padding: 20px; margin-bottom: 0px; text-align: center;}
.content_company .sec3 ul .history_left h4 {font-size: 28px; font-weight: 600; color:#DAC4A7; margin-bottom: 60px; text-align: center;}
.content_company .sec3 ul .history_left .view_more {border: 1px solid #F7941D; border-radius: 5px; display: inline-block; padding: 20px; margin-top: 50px; margin-bottom: 20px; background:#DAC4A7;}
.content_company .sec3 ul .history_left .view_more:hover {background: #000; cursor: pointer; transition: background 0.3s;}
.content_company .sec3 ul .history_left .view_more span {font-size: 20px; font-weight: 600; padding: 20px; color:rgb(37, 37, 37); text-align: center;}
.content_company .sec3 ul .history_left .view_more:hover span {color: #F7941D;}


.content_company .sec3 ul .history_right {height: 490px; width: 380px;}
.content_company .sec3 ul .history_right h2{font-size: 34px; font-weight: 700; margin-bottom: 50px;}
.content_company .sec3 ul .history_right h2 span {border-top:6px solid #F7941D;}
.content_company .sec3 ul .history_right ul { display: flex; border-top: 1px solid #a5a5a5;  align-items:center; gap: 0px; padding: 0px; margin: 0px;}
.content_company .sec3 ul .history_right ul li {display: flex; justify-content: space-between; align-items: center; padding: 20px;  width: 100%;}
.content_company .sec3 ul .history_right ul li h3 {font-size: 19px;}
.content_company .sec3 ul .history_right ul li span {height: 2px; background: #000; width: 200px;}
.content_company .sec3 ul .history_right ul li h4 {font-size: 16px; font-weight: 400; display: block; height: 40px; margin-top: 10px;}
.content_company .sec3 ul .history_right ul li .row {display: flex;  flex-direction: column; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0px solid #eee;}
.content_company .sec3 ul .history_right ul:nth-last-child(1) {border-bottom: 1px solid #a5a5a5;}

#company_history_tit {display: none;}
#com_txt {display: block;}
.company_height {height: 0px;}


.content_contact .sub-visual {position: relative; background: #000 url('https://mapletree88.com/image/contact.png') center center/cover no-repeat; height: 300px;}
.content_contact .sub-visual h3{color:#fff; font-size: 30px; font-weight: 800; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.content_contact .sub-visual h2{display: none;}
.content_contact .sub-visual h4{color:#cecece;  text-align: left; width: 180px; font-size: 15px; font-weight: 400; margin-bottom: 10px; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}


}