@import url('/font/remixicon.css');
@import url('/font/fonts.css');
.content_box.flatform { width: 100%; margin-top: 2rem;}
span.mdown { padding: 1rem 4rem 1rem 2rem; background: #434141; border-radius: 1.5rem; color: #fff; font-weight: 700; position: relative; font-size: 1.2rem; cursor: pointer;}
.mdown img { position: absolute; right: 20px;}
.toparea { display: flex; align-items: center; justify-content: space-between;}
p.slogan { text-align: center; margin-bottom: 2rem;}
.linkarea { margin-top: 7rem;}
ul.reglist { display: none; background: #22a463; border-radius: 2rem; margin-top: -3rem; padding: 5rem 2rem 2rem 2rem; position: absolute; width: 272px; z-index: 100;}
ul.reglist:before { content: ''; /* background: #ff5050; */ position: absolute; /* display:inline-block; */ height: 5rem; width: 100%; top: -46px; left: 0; z-index: -90;}
.reg:hover .reglist { display: block;}
.reg button { background: #22a463; color: #fff; padding: 1.5rem 11rem 1.5rem 4rem; font-size: 1.5rem; border-radius: 2rem; font-weight: 700; position: relative; z-index: 1000;}
.reg button:after { content: ''; background: url(/images/location.png); position: absolute; left: 22px; right':'; display: block; z-index: 100; width: 32px; height: 37px; top: 22px;}
.reglist li { font-size: 1.5rem; font-weight: 700; color: #fff; padding: 0.2rem 0rem 0.2rem 1rem; border-radius: .8rem; transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer;}
.reglist li:hover { color: yellow;}
.reg:hover button { background: #136f41;}
.reg button::before { content: ''; background: url(/images/location_arrow.png); position: absolute; right: 22px; display: block; z-index: 100; width: 26px; height: 16px; top: 32px; transition: transform 0.2s ease;}
.reg button:hover::before { transform: rotate(180deg);}
.reglist li + li { margin-top: .5rem;}
.reglist li:hover { background: #136f41;}
span.mdown:hover { background: #22a463;}
.link_tab li { height: 150px; background: #f1f1f1; flex: 1; border-radius: 1rem; display: flex; justify-content: center; align-items: flex-end; transition: background-color 0.3s ease, color 0.3s ease;}
.link_tab ul { display: flex; gap: 1rem;}
.link_tab { margin-top: 3rem;}
.link_tab li span { font-size: 1.6rem; font-weight: 800; width: 100%; display: block; color: #383838; letter-spacing: -2px;}
.link_tab ul li em { width: 60px; height: 60px; display: inline-block; background: url(/images/tab_normal.png) no-repeat; margin: 24px 0 15px 0;}
.link_tab ul li:hover em { width: 60px; height: 60px; display: inline-block; background: url(/images/tab_normal_on.png) no-repeat; margin: 24px 0 15px 0;}
.link_tab ul li:nth-child(1) em { background-position-x: 5px;}
.link_tab ul li:nth-child(2) em { background-position-x: -525px;}
.link_tab ul li:nth-child(3) em { background-position-x: -346px;}
.link_tab ul li:nth-child(4) em { background-position-x: -870px;}
.link_tab ul li:nth-child(5) em { background-position-x: -176px;}
.link_tab ul li:nth-child(6) em { background-position-x: -870px;}
.link_tab ul li:nth-child(7) em { background-position-x: -1051px;}
.link_tab ul li a { text-align: center; height: 100%; cursor: pointer;}
.link_tab li:hover { background: #22a463;}
.link_tab li:hover span { color: #fff;}
.platformCont:before { content: ''; position: absolute; width: 300%; background: url(/images/bg.png) no-repeat top center; min-height: 2100px; margin-top: 5rem; transform: translateX(-33%);  z-index: -2;}
.platformCont { min-height: 2538px;}
.platformCont .saveTree { color: #b4b488; font-size: 1.5rem; letter-spacing: -3px; text-align: center; margin-top: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center;}
span.Tnumber { background: #22a463; padding: .2rem 1rem; border-radius: 1rem; color: #02ff03; font-weight: 600; letter-spacing: 0; font-size: 2rem; margin: 0 .5rem;}
.treeGroup ul li { position: absolute;}
.treeGroup ul li:nth-child(1) { left: 0px !important; width: 196px; height: 187px; background: url(/images/t1_off.png) no-repeat; opacity: .52; bottom: -20px; z-index: -1;}
.treeGroup ul li:nth-child(2) { left: 110px !important; width: 172px; height: 251px; background: url(/images/t2_off.png) no-repeat; bottom: -42px; opacity: .5; z-index: 1;}
.treeGroup ul li:nth-child(3) { bottom: -16px; left: 250px !important; width: 102px; height: 193px; background: url(/images/t3_off.png) no-repeat; z-index: -1;}
.treeGroup ul li:nth-child(4) { left: 278px !important; width: 197px; height: 330px; background: url(/images/t4_off.png) no-repeat; bottom: -38px; z-index: -2;}
.treeGroup ul li:nth-child(5) { left: 401px !important; width: 214px; height: 293px; background: url(/images/t5_off.png) no-repeat; bottom: -97px; z-index: 1;}
.treeGroup ul li:nth-child(6) { left: 464px !important; width: 276px; height: 375px; background: url(/images/t6_off.png) no-repeat; bottom: -20px;}
.treeGroup ul li:nth-child(7) { left: 670px !important; width: 212px; height: 266px; background: url(/images/t7_off.png) no-repeat; bottom: -67px; z-index: 1;}
.treeGroup ul li:nth-child(8) { left: 831px !important; width: 164px; height: 307px; background: url(/images/t8_off.png) no-repeat; opacity: .6; bottom: -10px; z-index: -1;}
.treeGroup ul li:nth-child(9) { left: 937px !important; width: 138px; height: 230px; background: url(/images/t9_off.png) no-repeat; bottom: -20px; z-index: 1;}
.treeGroup ul li:nth-child(10) { left: 1067px !important; width: 131px; height: 253px; background: url(/images/t10_off.png) no-repeat; opacity: .5; bottom: -20px; z-index: -1;}
.treeGroup ul li.on:nth-child(1) { background: url(/images/t1.png);}
.treeGroup ul li.on:nth-child(2) { background: url(/images/t2.png);}
.treeGroup ul li.on:nth-child(3) { background: url(/images/t3.png);}
.treeGroup ul li.on:nth-child(4) { background: url(/images/t4.png);}
.treeGroup ul li.on:nth-child(5) { background: url(/images/t5.png);}
.treeGroup ul li.on:nth-child(6) { background: url(/images/t6.png);}
.treeGroup ul li.on:nth-child(7) { background: url(/images/t7.png);}
.treeGroup ul li.on:nth-child(8) { background: url(/images/t8.png);}
.treeGroup ul li.on:nth-child(9) { background: url(/images/t9.png);}
.treeGroup ul li.on:nth-child(10) { background: url(/images/t10.png);}
.linkarea fieldset { display: flex; align-items: center;}
.linkarea .input_data { flex: 1; width: 100%; border: 4px solid #ddd; border-radius: 2rem; height: 80px; margin-left: 1em; font-size: 1.5rem; padding-left: 2rem; letter-spacing: -2px; display: flex; align-items: center;}
.platformCont .PCtitle { text-align: center; padding-top: 9rem;}
.treeGroup { position: relative; height: 459px;}
.treeGroup ul { display: flex; align-items: flex-end;}
.Con_area { text-align: center; position: absolute; z-index: -2; transform: translateX(6%);}
.input_data .category button { color: #22a463; font-size: 1.5rem; font-weight: 700; padding: 1rem 4rem 1rem 0; z-index: 1000; position: absolute;}
.input_data input { width: 79%;  height: 80px;  font-size: 1.5rem;   padding-left: 2rem;   letter-spacing: -2px;  background: transparent;   outline: none !important;}
.category { display: inline-block; position: relative; width: 176px; height: 64px;}
.input_data .category ul { position: absolute; background: #e5fdeb; border: 3px solid #22a463; padding: 5rem 1rem 1rem 1rem; border-radius: 2rem; width: 189px; left: -35px; top: -11px; display: none;}
.input_data .category ul li { color: #22a463; padding: .5rem 0 .5rem 1rem; cursor: pointer;}
.category:hover ul { display: block;}
.input_data .category ul li:hover { background: #22a463; border-radius: 1rem; color: #fff;}
.input_data .category button::after { content: ''; width: 17px; height: 13px; position: absolute; background: url(/images/input_arrow.png) no-repeat center right; transition: transform 0.2s ease; top: 27px; right: 0;}
.input_data .category:hover button::after { transform: rotate(180deg);}