@import url('d8338b88e9_sub.css'); 



/**** S:: Online Consulting ****/
.online_cont{display: flex;}
.online_cont > div{box-sizing:border-box;}
.online_cont .tit_area{width: 490px;}
.online_cont .tit_area .in{max-width:410px; padding: 50px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:sticky; top:100px; transition: all .5s;}
.online_cont .tit_area .in::before{content:'\f0e2'; display:block; width: 98px; aspect-ratio: 1/1; line-height: 98px; font-size:98px; color:var(--black); opacity: 0.1; position: absolute; right: 0; top:35px; z-index: -1; font-family: var(--icon);}
.online_cont .tit_area h3{}
.online_cont .tit_area p{padding-top: 20px;}
.online_cont .tit_area p ~ p{padding-top: 10px;}
.online_cont .form_area{width: calc(100% - 490px);}
/**** E:: Online Consulting ****/


/**** S:: OEM/ODM Order Guide ****/
.guide_step{}
.guide_step dl{display: flex; padding: 30px 0; border-top: 1px solid var(--border);}
.guide_step dl dt{width: 200px;}
.guide_step dl dt img{width: 100%; height: auto; border-radius:var(--borderR10);}
.guide_step dl dd{width: calc(100% - 200px); padding: 0 0 0 50px; box-sizing:border-box;}
.guide_step dl dd small{display: block; font-size:0.765rem; font-weight: 600; line-height: 120%; padding-bottom: 8px;}
.guide_step dl dd h4{font-weight: 600;}
.guide_step dl dd h5{font-weight: 400; color:var(--black); padding-top: 10px;}
.guide_step dl dd .dots{padding-top: 10px;}
.guide_step dl dd .dots_wrap{padding-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:30px;}
.guide_step dl dd .dots_wrap article .dots{padding-top: 6px;}
.guide_step dl dd .dots_wrap article h5{font-weight: 600; color:var(--sub);}

.guide_step dl:nth-child(1) dd small{color:#D5C440;}
.guide_step dl:nth-child(1) dd .dots li::before{background:#D5C440;}
.guide_step dl:nth-child(2) dd small{color:var(--sub3);}
.guide_step dl:nth-child(2) dd .dots li::before{background:var(--sub3);}
.guide_step dl:nth-child(3) dd small{color:var(--main);}
.guide_step dl:nth-child(3) dd .dots li::before{background:var(--main);}
.guide_step dl:nth-child(4) dd small{color:var(--sub2);}
.guide_step dl:nth-child(4) dd .dots li::before{background:var(--sub2);}
.guide_step dl:nth-child(5) dd small{color:var(--sub);}
.guide_step dl:nth-child(5) dd .dots li::before{background:var(--sub);}


.guide_contact{margin-top: 80px; padding: 40px 50px; box-sizing:border-box; background:var(--grayBg); border-radius:var(--borderR10);}
.guide_contact h4{}
.guide_contact dl{padding-top: 15px; display: flex; align-items:center; gap:15px;}
.guide_contact dl dt{}
.guide_contact dl dt span{display: block; width: 40px; aspect-ratio:1/1; border-radius:50%; background:var(--main); position: relative;}
.guide_contact dl dt span::after{content:'\e158'; display: block; width: 100%; height: 100%; font-size:20px; line-height: 40px; text-align:center; position: absolute; left:0; top:0; color:var(--white); font-family:var(--icon);}
.guide_contact dl dd{display: flex; gap:10px;}
.guide_contact dl dd p{color:var(--black); font-weight: 300; line-height: 140%;}
.guide_contact dl dd p.basic{opacity: 0.3;}
.guide_contact ul{margin-top: 25px;}
.guide_contact ul li{padding: 20px 0; border-top: 1px dashed var(--border);}
.guide_contact ul li:last-child{padding-bottom: 0;}
.guide_contact ul li h5{padding-bottom: 10px; line-height: 120%; font-weight: 600; color:var(--main);}
.guide_contact ul li p{}
.guide_contact ul li p b{font-weight: 600; color:var(--black);}
/**** E:: OEM/ODM Order Guide ****/



/**** S:: Contact ****/
.contact_box{padding: 50px 55px; box-sizing:border-box; border-radius:var(--borderR10); background:var(--grayBg); position: relative;}
.contact_box::before{content:'\f0e2'; display: block; width: 150px; line-height: 150px; font-size:150px; color:var(--black); opacity: 0.1; font-family:var(--icon); position: absolute; right: 110px; top:50px;}
.contact_box h3{font-weight: 700; color:var(--black);}
.contact_box strong{display: block; font-weight: 600; color:var(--main); padding-top: 20px;}
.contact_box h4{font-weight: 600; line-height: 130%; color:var(--black); padding: 5px 0 10px;}
.contact_box .line{display: block; width: 100%; height: 1px; border-top:1px dashed var(--border); margin: 25px 0 30px;}
.contact_box article{}
.contact_box article dl{display: flex;}
.contact_box article dl ~ dl{margin-top: 8px;}
.contact_box article dl dt{width: 50px; font-size:0.882rem; font-weight: 400; color:var(--black); line-height: 150%;}
.contact_box article.address dl dt{width: 140px;}
.contact_box article dl dd{flex:1; font-size:0.882rem; font-weight: 400; color:var(--basic); line-height: 150%;}
/**** E:: Contact ****/



/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/**** S:: Online Consulting ****/
.online_cont{flex-wrap:wrap;}
.online_cont .tit_area{width: 100%;}
.online_cont .tit_area .in{max-width:100%; border-bottom:0;}
.online_cont .tit_area h3 br{display: none;}
.online_cont .form_area{width: 100%;}
/**** E:: Online Consulting ****/


/**** S:: OEM/ODM Order Guide ****/
.guide_step{}
.guide_step dl dd .dots_wrap{grid-template-columns: repeat(2, 1fr);}
/**** E:: OEM/ODM Order Guide ****/



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/**** S:: Online Consulting ****/
.online_cont .tit_area .in{padding: 30px 0;}
.online_cont .tit_area .in::before{width: 70px; line-height: 70px; font-size:70px; top:10px;}
.online_cont .tit_area p{padding-top: 10px;}
.online_cont .tit_area p ~ p{padding-top: 5px;}
/**** E:: Online Consulting ****/


/**** S:: OEM/ODM Order Guide ****/
.guide_step{}
.guide_step dl{padding: 20px 0;}
.guide_step dl dt{width: 120px;}
.guide_step dl dd{width: calc(100% - 120px); padding: 0 0 0 30px;}
.guide_step dl dd small{padding-bottom: 5px;}
.guide_step dl dd h5{padding-top: 6px;}
.guide_step dl dd .dots{padding-top: 6px;}
.guide_step dl dd .dots_wrap{padding-top: 6px; grid-gap:20px;}
.guide_step dl dd .dots_wrap article .dots{padding-top: 6px;}

.guide_contact{margin-top: 50px; padding: 30px 40px;}
/**** E:: OEM/ODM Order Guide ****/

/**** S:: Contact ****/
.contact_box{padding: 30px 40px;}
.contact_box::before{width: 100px; line-height: 100px; font-size:100px; right: 20px; top:20px;}
.contact_box strong{padding-top: 10px;}
.contact_box .line{margin: 15px 0 20px;}
/**** E:: Contact ****/


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: OEM/ODM Order Guide ****/
.guide_step{}
.guide_step dl{padding: 20px 0; flex-wrap:wrap;}
.guide_step dl dt{width: 60px;}
.guide_step dl dd{width: calc(100% - 60px); padding: 0 0 0 20px;}
.guide_step dl dd .dots_wrap{grid-template-columns: repeat(1, 1fr); grid-gap:10px;}


.guide_contact{margin-top: 30px; padding: 20px 15px;}
.guide_contact h4{}
.guide_contact dl{padding-top: 10px; gap:10px;}
.guide_contact dl dt{}
.guide_contact dl dt span{width: 30px;}
.guide_contact dl dt span::after{font-size:16px; line-height: 30px;}
.guide_contact dl dd{gap:5px; flex-wrap:wrap;}
.guide_contact ul{margin-top: 10px;}
.guide_contact ul li{padding: 10px 0;}
.guide_contact ul li h5{padding-bottom: 6px;}
/**** E:: OEM/ODM Order Guide ****/

/**** S:: Contact ****/
.contact_box{padding: 25px 30px;}
.contact_box::before{width: 70px; line-height: 70px; font-size:70px;}
.contact_box .line{margin: 10px 0;}
.contact_box article{}
.contact_box article dl dt{width: 40px;}
.contact_box article.address dl{flex-wrap:wrap; gap:3px;}
.contact_box article.address dl dt{width: 100%;}
.contact_box article.address dl dd{flex:auto;}
/**** E:: Contact ****/

}