#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 ; }
section >* { z-index: 3; }
section:not(#quickSearch) .h2title  {font-size: 40px;font-weight: 600;color: #1768e5;background: var(--gradient-4);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;letter-spacing: 0.08em;}
section .text   {padding-bottom: 3vw;font-size: 18px;text-align: center;letter-spacing: 0.04em;font-weight: 500;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* product_area */
#product_area{text-align:center;}
#product_sub_list {margin: 0 0 50px;}
#product_sub_list .platlist {display: flex;align-items: center;flex-wrap: wrap;gap: 12px;justify-content: center;}
#product_sub_list .platlist a {position: relative;display: inline-flex;align-items: center;justify-content: center;padding: 6px 22px 6px;border: 1px solid #c7ced8;border-radius: 8px;font-size: 15px;font-weight: 500;line-height: 1.5;text-decoration: none;transition: color .3s ease,border-color .3s ease,background-color .3s ease,transform .3s ease;}
#product_sub_list .platlist a:hover {border-color: #1768e5;background: #1768e5;color: #fff;}
#product_sub_list .platlist a:first-child { border-color: #1768e5; background: linear-gradient(135deg,#1768e5 0%,#1647c9 100%); color: #fff; }

#product_list ul{display:grid;grid-template-columns: repeat(4, 1fr);gap: 30px;}
#product_list li img{aspect-ratio:1/1;object-fit: cover;}
#product_list li:hover{transform: translateY(-5px);}

/* quickSearch */
#quickSearch {background: linear-gradient(90deg, #f4f9ff 0%, #ebf5fd 50%, #fefaf6 100%);padding-top: 30px;}
#quickSearch >div{width: min(90%, 1000px);}
#quickSearch .h2title {font-size: 18px;font-weight: 500;letter-spacing: 0.04em;}
#quickSearch .quick_search_title { margin-bottom: 24px; color: #172852; font-size: clamp(26px,3vw,36px); font-weight: 800; line-height: 1.3; text-align: center; letter-spacing: .04em; }
#quickSearch .quick_search_form {margin: 10px 0 0;}
#quickSearch .quick_search_field label { display: block; margin-bottom: 9px; color: #252b35; font-size: 15px; font-weight: 700; }
#quickSearch .quick_search_control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
#quickSearch .quick_search_control input {width: 100%;padding: 15px 18px;border: 1px solid #c7ced8;border-radius: 8px;background: #fff;color: #252b35;font: inherit;font-size: 16px;line-height: 1.5;outline: none;transition: border-color .3s ease,box-shadow .3s ease;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#quickSearch .quick_search_control input::placeholder { color: #7b8491; }
#quickSearch .quick_search_control input:focus { border-color: #1768e5; box-shadow: 0 0 0 4px rgba(23,104,229,.12); }
#quickSearch .quick_search_control button {min-width: 126px;padding: 15px 25px;border: 0;border-radius: 8px;background: var(--gradient-4);color: #fff;font: inherit;font-size: 16px;font-weight: 500;line-height: 1.5;cursor: pointer;transition: transform .3s ease,background .3s ease;}
#quickSearch .quick_search_control button:hover {background: linear-gradient(135deg,#1647c9 0%,#1768e5 100%);}
#quickSearch .quick_search_control button:focus-visible { outline: 3px solid rgba(255,122,33,.45); outline-offset: 3px; }
#quickSearch .popular_search { margin-top: 28px; }
#quickSearch .popular_search_title {margin-bottom: 13px;font-size: 15px;font-weight: 500;letter-spacing: 0.04em;}
#quickSearch .popular_search_list {display: flex;align-items: center;flex-wrap: wrap;gap: 10px;}
#quickSearch .popular_search_list a {display: inline-flex;align-items: center;justify-content: center;padding: 8px 17px;border: 1px solid rgba(23,104,229,.2);border-radius: 50px;color: #6b79a0;font-size: 14px;font-weight: 500;line-height: 1.4;text-decoration: none;transition: color .3s ease,border-color .3s ease,background-color .3s ease,transform .3s ease;letter-spacing: 0.04em;}
#quickSearch .popular_search_list a:hover {border-color: #ff7a21;background: #ff7a21;color: #fff;}
#quickSearch .popular_search_list a:focus-visible { outline: 3px solid rgba(255,122,33,.35); outline-offset: 2px; }

/* about_area */
#about_area .workframe {display: grid;grid-template-columns: 50% 42%;justify-content: space-between;align-items: center;}
#about_area .h2title{line-height: 1.4;word-break: keep-all;}
#about_area #about_img{order: -1;margin: 0;padding: 0;}
#about_area #about_img img{    animation: about_img 10s linear infinite;}
@keyframes about_img{0%,100%{border-radius: 20%;}50%{border-radius: 50%;}}
@-webkit-keyframes about_img{0%,100%{border-radius: 20%;}50%{border-radius: 50%;}}

/* news_area */
#news_area .workframe{text-align:center;}
#news_area li{background: white;border-radius: 20px;outline: 1px solid rgb(0 0 0 / 15%);outline-offset: -15px;margin: 20px;}
#news_area li .text{padding:50px;position: relative;}
#news_area li .text:before{content:"”";font-size: 100px;position: absolute;top: -15px;right: -20px;line-height: 100%;color: var(--primary);}
#news_area li .h3{height:auto;-webkit-line-clamp: 2;font-size: 20px;line-height: 1.5;margin-bottom: 20px;}
#news_area li article{overflow: hidden;height: 100px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;font-size: 15px;margin-top: 5px;text-align: justify;color: #494848;font-weight: 400;letter-spacing: 0.04em;}
#news_area .slick-dots li button{width: 10px;height: 2px;padding:6px}
#news_area .slick-dots li button:before{content:'';width: 10px;height: 1px;line-height:0px;background: #000;}
#news_area .slick-dots{position:relative;margin-top: 15px;bottom:0}
#news_area .slick-dots li{width: 10px;height: 1px;display:inline-flex;background: none;border-radius: unset;margin: 0 5px;outline-offset: unset;outline: unset;}

/* contact_area */
#contact_area{padding: 0;background-image: url(/images/44/img-bottom.png);background-repeat: no-repeat;background-position: 50% top;background-size: 100%;}
#contact_area:before{content:url(/images/44/img-coin2.png);position: absolute;right: 7%;top: 10%;zoom: 18%;animation: aboutImgAnimation 2s ease-in-out infinite;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(50px);transform:translateY(50px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#contact_area .workframe{width: min(90%, 1000px);}
#pageform1{border: 10px solid var(--gray);padding: 45px 90px;background: var(--white);border-radius: 50px;}
#pageform1 fieldset{display:flex;flex-wrap: wrap;justify-content: space-between;}
#pageform1 fieldset p{width: 45%;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;margin: 5px 0;position: relative;}
#pageform1 fieldset p:last-child{width:100%;justify-content: center;margin-top: 25px;margin-bottom: 0;}
#pageform1 fieldset p label{width:100px;}
#pageform1 fieldset p input{width: calc(100% - 130px);background: none;border-bottom: 1px solid #ddd;color: #5c5353;font-weight: 400;margin: 0;}
#pageform1 fieldset p #rand-img{position:absolute;right: 10px;width: 55px;}
#pageform1 fieldset p input::placeholder{color:#7c7a7a;}
#pageform1 fieldset p select{width: calc(100% - 100px);border-bottom: 1px solid #ddd;color: #7c7a7a;-webkit-appearance: none;background: url(/images/44/arrow.png) no-repeat scroll 98% center transparent;background-repeat: no-repeat;background-position: 98% 50%;}
#contact_area .contact_box{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-top: 40px;}
#contact_area .title_box{padding:0;}
#contact_area .title_box .h2{margin-bottom: 20px;line-height: 120%;align-items: center;font-size: 35px;font-weight: 600;color: var(--info);display: inline-block;letter-spacing: 0.08em;}
#contact_area .title_box .h5{font-size: 20px;font-weight: 400;}
#contact_area .btnn{display:flex;flex-direction: column;}
#contact_area .btnn a{margin: 10px 0;text-align: center;}
#contact_area .btnn a b{letter-spacing: 0.04em;font-weight: 500;color: white;}
#contact_area .btnn a:last-child{background: var(--gradient-3);}
#contact_area .btnn a:last-child:hover{background: linear-gradient(185deg, #ffd33d 0%, #ff7a21 100%);}

/* fakeNumber */
#fakeNumber{margin-top: 50px;border-bottom: 1px solid rgb(199 206 216 / 50%);padding-bottom: 40px;}
#fakeNumber ul{display:flex;flex-wrap: wrap;justify-content: space-between;width: 95%;margin: 0 auto;}
#fakeNumber li{width:calc(100%/4)}
#fakeNumber li .eva{}
#fakeNumber li .eva p{font-size:20px;font-weight: 500;margin-bottom: 10px;}
#fakeNumber li .eva .h2{display:flex;align-items: flex-end;font-size: 20px;}
#fakeNumber li .eva .h2 b{font-size: 50px;margin-right: 10px;line-height: 100%;color: #1768e5;background: var(--gradient-4);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-family: "Arimo", sans-serif;}
@media screen and (max-width: 1680px) {
    #contact_area{background-position: 50% bottom;}
}
@media screen and (max-width: 1460px) {
    #about_area .h2title{display: unset !important;}
    #contact_area:before{zoom: 14%;right: 2%;top: 30%;}
}
@media screen and (max-width: 1024px) {
    #about_area .workframe{display: flex;flex-direction: column;gap: 40px;}
	#product_list ul{grid-template-columns: repeat(2, 1fr);}
    #contact_area:before{display:none;}
    #contact_area{background-size: 150%;}
    #about_info{text-align:center;}
}
@media screen and (max-width: 980px) {
	section { padding: 10vw 0; }
    #pageform1{padding: 45px 60px;}
    #pageform1 fieldset p{width:100%}
}
@media screen and (max-width: 760px) {
    section .clip img{height:auto;}
	section { padding: 8vw 0 ; }
}
@media screen and (max-width: 550px) {
    #about_info{width:100%}
    #quickSearch .h2title{font-size: 15px;}
    #contact_area .contact_box, #fakeNumber{display:none;}
    #pageform1{border-radius: 0;border: 0;background: #f2f2f2;padding: 35px;}
    #product_list ul{gap:20px;}
    #product_sub_list .platlist, #quickSearch .popular_search_list{gap:5px}
    section .text{padding: 0 5% 6vw;font-size: 17px;}
    section:not(#quickSearch) .h2title{font-size: 30px;}
    #about_area .h2title{line-height:1.2}
    #quickSearch .popular_search_list a{font-size:12px}
}