@import url("sub.css");



/* 회사소개 */
.about_greeting{overflow: hidden;}
.about_greeting .greeting_box{display: flex;}
.about_greeting .greeting_box > div{box-sizing:border-box;}
.about_greeting .greeting_box .img_area{width: 45%;}
.about_greeting .greeting_box .img_area img{width: 100% !important; height: auto !important;}
.about_greeting .greeting_box .txt_area{width: 55%; padding:20px 0 0 70px;}
.about_greeting .greeting_box .txt_area .fs16{padding: 30px 0 0;}
.about_greeting .greeting_box .txt_area .fs16 b{font-weight: 500; color:var(--black);}
.about_greeting .greeting_box .txt_area .ceo{padding: 50px 0 0; color:var(--black);}


.about_motto{background:url("../images/about_motto_bg.jpg") no-repeat center/cover;}
.about_motto .fs60{color:var(--white); }
.about_motto ul{display:flex; margin:50px 0 0; justify-content: center;}
.about_motto li{display:flex; align-items: center; flex-direction: column; justify-content: center; margin:0 -20px; width:370px; aspect-ratio: 1; border-radius:50%; border:1px solid rgba(255,255,255,0.25); }
.about_motto li img{margin:0 0 21px;}
.about_motto li .fs23{color:var(--white); font-weight:500;}


.about_price{}
.about_price .fs23{padding: 50px 0 0; color:var(--black);}
.about_price .fs38{padding: 20px 0 0; color:var(--black);}
.about_price .fs38 b{font-weight: 700; position: relative; display: inline-block;}
.about_price .fs38 b:before{content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--black); position: absolute; left:50%; top:0; margin-left: -4px;}
.about_price .img_box{margin: 40px 0 0;}

.about_philosophy{background:url("../images/about_philosophy_bg.jpg") no-repeat center/cover; overflow: hidden;}
.about_philosophy .fs60{color:var(--white);}
.about_philosophy .fs32{color:var(--white); margin: 50px 0 0; position: relative; display: inline-block;}
.about_philosophy .fs32:after{content:''; display:block; width:213px; height:213px; background:url("../images/curve_text.png") no-repeat center/100% auto; position:absolute; right:-50px; top:50%; margin-top: -106px; animation:rota 15s linear infinite;}
.about_philosophy .fs38{color:var(--white); padding: 10px 0 0; line-height: 120%;}
.about_philosophy .fs16{color:rgba(255,255,255,.6); padding: 20px 0 0; line-height: 165%;}
.about_philosophy .fs16 br{display: block;}



.about_meaning{}
.about_meaning .fs38{padding: 60px 0 0;}
.about_meaning .fs16{padding: 20px 0 0;}
.about_meaning dl{margin: 50px auto 0; display: flex; align-items:center; justify-content: center;}
.about_meaning dl dt{position: relative; z-index: 9; width: 545px; height: 545px; border-radius:50%; overflow: hidden; background:url("../images/about_meaning.jpg") no-repeat center/cover; float: left;}
.about_meaning dl dd{display: flex; justify-content: center; align-items: center; width: 480px; height: 480px; box-sizing:border-box; border:1px solid var(--border); border-radius:50%; position: relative;}
.about_meaning dl dd.one{margin-right: -70px;}
.about_meaning dl dd.two{margin-left: -70px;}
.about_meaning dl dd .in{width: 100%; box-sizing:border-box; padding: 0 80px;}
.about_meaning dl dd .in .fs32{line-height: 120%;}
.about_meaning dl dd .in .fs16{padding: 12px 0 0; line-height: 165%;}




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


/* 회사소개 */
.about_meaning{}
.about_meaning dl dt{width: 445px; height: 445px;}
.about_meaning dl dd{width: 380px; height: 380px;}
.about_meaning dl dd.one{margin-right: -50px;}
.about_meaning dl dd.two{margin-left: -50px;}
.about_meaning dl dd .in{padding: 0 60px;}



}

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

/* 회사소개 */
.about_meaning{}
.about_meaning .fs38{padding: 50px 0 0;}
.about_meaning .fs16{padding: 15px 0 0;}
.about_meaning dl dt{width: 400px; height: 400px;}
.about_meaning dl dd{width: 300px; height: 300px;}
.about_meaning dl dd .in .fs16{padding: 10px 0 0;}



}

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



/* 회사소개 */
.about_greeting .greeting_box{}
.about_greeting .greeting_box .txt_area{padding:0 0 0 40px;}
.about_greeting .greeting_box .txt_area .fs38 br{display: none;}
.about_greeting .greeting_box .txt_area .fs16{padding: 20px 0 0;}
.about_greeting .greeting_box .txt_area .ceo{padding: 40px 0 0; }


.about_motto{}
.about_motto ul{margin:30px 0 0; }
.about_motto li img{margin:0 0 15px; height:74px}


.about_price{}
.about_price .fs23{padding: 30px 0 0;}
.about_price .fs38{padding: 15px 0 0;}
.about_price .img_box{margin: 20px 0 0;}

.about_philosophy .fs32{margin: 30px 0 0;}
.about_philosophy .fs32:after{width:180px; height:180px; right:-40px; margin-top: -90px;}
.about_philosophy .fs16{padding: 15px 0 0;}


.about_meaning{}
.about_meaning .fs38{padding: 30px 0 0;}
.about_meaning .fs16{padding: 10px 0 0;}
.about_meaning dl{margin: 30px auto 0;}
.about_meaning dl dt{width: 260px; height: 260px;}
.about_meaning dl dd{width: 210px; height: 210px;}
.about_meaning dl dd.one{margin-right: -30px;}
.about_meaning dl dd.two{margin-left: -30px;}
.about_meaning dl dd .in{padding: 0 40px;}
.about_meaning dl dd .in .fs16{padding: 8px 0 0;}





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

/* 회사소개 */
.about_greeting .greeting_box{flex-wrap:wrap;}
.about_greeting .greeting_box .img_area{width: 100%;}
.about_greeting .greeting_box .txt_area{width: 100%; padding:30px 0 0 ;}
.about_greeting .greeting_box .txt_area .fs16{padding: 15px 0 0;}
.about_greeting .greeting_box .txt_area .ceo{padding: 20px 0 0;}

.about_motto{}
.about_motto ul{margin:20px auto 0; max-width:360px; flex-wrap:wrap; align-items: center;}
.about_motto li{margin:-10px -10px; width:180px;}
.about_motto li img{margin:0 0 15px; height:58px}


.about_price{}
.about_price .fs23{padding: 20px 0 0;}
.about_price .fs38{padding: 10px 0 0;}
.about_price .img_box{margin: 15px 0 0;}

.about_philosophy .fs32{margin: 20px 0 0;}
.about_philosophy .fs32:after{width:120px; height:120px; right:-30px; margin-top: -60px;}
.about_philosophy .fs38{padding: 8px 0 0;}
.about_philosophy .fs16{padding: 10px 0 0;}
.about_philosophy .fs16 br{display: none;}


.about_meaning{}
.about_meaning .fs38{padding: 20px 0 0;}
.about_meaning .fs16{padding: 8px 0 0;}
.about_meaning dl{margin: 20px auto 0; flex-direction: column;}
.about_meaning dl dt{width: 260px; height: 260px;}
.about_meaning dl dd{width: 210px; height: 210px;}
.about_meaning dl dd.one{margin:0 0 -50px;}
.about_meaning dl dd.two{margin: -50px 0 0;}
.about_meaning dl dd.one .in{padding: 0 20px 20px;}
.about_meaning dl dd.two .in{padding: 20px 20px 0;}
.about_meaning dl dd .in .fs16{padding: 6px 0 0;}



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





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




}