@charset "utf-8";
/*******************************************************
	BF FONTS 종류
	친환경체
	건강체
	행복체
	미래체
	사랑체
*******************************************************/
/* ====친환경체==== */
@font-face {
    font-family: "bodyfriendEco";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendEco"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.eot?#iefix")
            format("embedded-opentype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.ttf")
            format("truetype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_eco/2022bodyfriend_eco.otf")
            format("otf");
}
/* ====건강체==== */
@font-face {
    font-family: "bodyfriendHealth";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendHealth"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.eot?#iefix")
            format("embedded-opentype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.ttf")
            format("truetype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_health/2022bodyfriend_health.otf")
            format("otf");
}
/* ====행복체==== */
@font-face {
    font-family: "bodyfriendHappy";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendHappy"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.eot?#iefix")
            format("embedded-opentype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.ttf")
            format("truetype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_happy/2022bodyfriend_happy.otf")
            format("otf");
}
/* ====미래체==== */
@font-face {
    font-family: "bodyfriendFuture";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendFuture"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.eot?#iefix")
            format("embedded-opentype"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_future/2022bodyfriend_future.ttf")
            format("truetype");
}
/* ====사랑체==== */
@font-face {
    font-family: "bodyfriendLOVE_Light";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendLOVE_Light"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Light.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Light.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Light.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Light.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Light.ttf")
            format("truetype");
}
@font-face {
    font-family: "bodyfriendLOVE_Bold";
    font-weight: normal;
    font-style: normal;
    src: local("bodyfriendLOVE_Bold"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Bold.eot")
            format("eot"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Bold.woff2")
            format("woff2"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Bold.woff")
            format("woff"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Bold.svg")
            format("svg"),
        url("https://fonts.bodyfriend.co.kr/Bodyfriend_love/2021BodyfriendLOVE_Bold.ttf")
            format("truetype");
}
/*******************************************************
	서체페이지
*******************************************************/
/* 폰트 페이지 간격 */
.mt440{margin-top:440px;}
.mt270{margin-top:270px;}
.mt240{margin-top:240px;}
.mt175{margin-top:175px;}
.mt105{margin-top:105px;}
.mb240{margin-bottom:240px;}


.font_tabs{display: flex;padding:0 0 20px 0;float: inherit;width:100%;transition:top .3s;}
.font_tabs.scroll{position: fixed;top: 62px; left: 50%; background: #fff; padding: 0; box-shadow: 10px 10px 20px rgb(0 0 0 / 10%); width: 1150px; transform: translateX(-50%);z-index:1}
.membership_page .font_tabs.scroll{top:0;}
.font_tabs a {width:20%;height:64px;overflow: hidden;background-repeat: no-repeat;background-position:center;background-size:100%;text-indent: -9999px;}
.font_tabs a.sarangche{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-love_nor.png);}
.font_tabs a.sarangche.on{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-love_sel.png);}
.font_tabs a.mirae{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-future_nor.png);}
.font_tabs a.mirae.on{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-future_sel.png);}
.font_tabs a.happy{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-happy_nor.png);}
.font_tabs a.happy.on{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-happy_sel.png);}
.font_tabs a.health{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-health_nor.png);}
.font_tabs a.health.on{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-health_sel.png);}
.font_tabs a.eco{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-eco_nor.png);}
.font_tabs a.eco.on{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/tab/btn-eco_sel.png);}

.tab_contents_fonts .tab_content{display:none;}
.tab_contents_fonts .tab_content.on{display:block;}

.fonts__article{margin-top:0;}
.fonts__article img{max-width:100%;}

.tab_content .group_inner{padding:300px 168px;}

.tab_content.eco .group_inner{background-color:#21423a;}
.tab_content.health .group_inner{background-color:#b86fff;}
.tab_content.happy .group_inner{background-color:#fef6d1;}
.tab_content.mirae .group_inner{padding:150px 60px;background-color:#171f5e;}
.tab_content.sarangche .group_inner{padding:177px 90px 177px;background-color:#f7f7f7;border-radius: 60px;}

.fonts__other{text-align:center;}
.fonts__article--kr{display:flex;justify-content: space-between;flex-flow:row wrap;}

/*글씨체 적용*/
.tab_content .group_inner i{transition:.3s;cursor:pointer;}
.tab_content.eco .group_inner i{margin-right:11px;margin-bottom:18px;line-height:1.05;color:#ffe8d2;font-style:normal;font-size:65px;font-family:'bodyfriendEco';}
.tab_content.health .group_inner i{margin-right:10px;margin-bottom:18px;line-height:1.05;color:#36007a;font-style:normal;font-size:63px;font-family:'bodyfriendHealth';}
.tab_content.happy .group_inner i{margin-right:13px;margin-bottom:25px;line-height:1.05;font-style:normal;font-size:63px;color:#000;font-family:'bodyfriendHappy';}
.tab_content.mirae .group_inner i{display:inline-block;margin-right:16px;margin-bottom:25px;line-height:1.05;font-style:normal;font-size:85px;color:#fff;font-family:'bodyfriendFuture';}
.tab_content.sarangche .group_inner i,
.tab_content.sarangche .group_inner em {display:inline-block;margin-right:10px;margin-bottom:39px;line-height:1.05;font-style:normal;font-size:60px;color:#37353a;}
.tab_content.sarangche .group_inner .light i{margin-bottom:3vw;font-family: "bodyfriendLOVE_Light";	}
.tab_content.sarangche .group_inner .bold i{margin-bottom: 3vw;font-family: "bodyfriendLOVE_Bold";	}

.tab_content.eco .fonts__other i,
.tab_content.health .fonts__other i{margin-right:18px;}
.tab_content.eco .lower i,
.tab_content.eco .num_simbol > i{margin-right:26px;}
.tab_content.health .lower i,
.tab_content.health .num_simbol > i{margin-right:23px;}
.tab_content.happy .lower i,
.tab_content.happy .num_simbol > i{margin-right:22px;}

.tab_content.eco .group_inner i:nth-child(13n),
.tab_content.health .group_inner i:nth-child(13n),
.tab_content.happy .group_inner i:nth-child(13n),
.tab_content.mirae .group_inner i:nth-child(13n),
.tab_content.sarangche .group_inner i:nth-child(13n) 
.tab_content.sarangche .group_inner em :nth-child(13n) {
	margin-right:0;
}

.tab_content.eco .group_inner i:hover,
.tab_content.eco .group_inner i:active{color:#b3ffb3;}
.tab_content.health .group_inner i:hover,
.tab_content.health .group_inner i:active{color:#00ffff;}
.tab_content.happy .group_inner i:hover,
.tab_content.happy .group_inner i:active{color:#ff6904;}
.tab_content.mirae .group_inner i:hover,
.tab_content.mirae .group_inner i:active{color:#64ffff;}
.tab_content.sarangche .group_inner i:hover,
.tab_content.sarangche .group_inner i:active,
.tab_content.sarangche .group_inner em:hover,
.tab_content.sarangche .group_inner em:active{color:#ea7898;}

.fonts__article--other{text-align:center;}
.fonts__other i:last-child {margin-right:0;}
.fonts__article_group .lower i {text-transform: lowercase;}


.tab_content .fonts__subtt{margin-top:240px;margin-bottom: 40px;font-family: 'NotoSansKR-Regular';text-align: center;}
.tab_content.eco .fonts__subtt{font-size:25px;color:#b3ffb3;}
.tab_content.health .fonts__subtt{font-size:25px;color:#fff;}
.tab_content.happy .fonts__subtt{font-size:30px;color:#000;}
.tab_content.mirae .fonts__subtt{font-size:21px;color:#fff;}
.tab_content.sarangche .fonts__subtt{font-size:21px;color:#37353a;}

.tab_content .group_inner > .fonts__subtt{margin-top:0;}

/*폰트 다운로드*/
.font__download{position:relative;}
.font__download--btn a{display:block;text-indent:-9999px;}

.eco__download--btn {margin:50px auto 0 auto;width: 390px; height: 105px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/eco/BF_eco_download_nor.png') no-repeat center;background-size:100%;}
.eco__download--btn:active,
.eco__download--btn:hover{background-image:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/eco/BF_eco_download_sel.png');}
.health__download--btn{margin:50px auto 0 auto;width: 390px;height: 135px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/health/BF_health_download_nor.png') no-repeat center;background-size:130%;}
.health__download--btn:active,
.health__download--btn:hover{background-image:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/health/BF_health_download_sel.png');background-size:100%;}
.happy__download--btn,
.happy__download--btn:hover,
.happy__download--btn:active{margin:50px auto 0 auto;width:397px;height:116px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/happy/BF_happy_download.webp') no-repeat;background-size:100%;}
.mirae__download--btn,
.mirae__download--btn:hover,
.mirae__download--btn:active{margin:50px auto 0 auto;width:415px;height:123px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/mirae/btn_font_future.webp') no-repeat; background-size:100%;}

.tab_content.sarangche .font__download--btn{width:100%;display: flex;justify-content: center;}
.sarangche__download--btnLight {overflow:hidden;width:353px;height:77px;margin-right: 90px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/sarangche/btn_font_02.png') no-repeat;}
.sarangche__download--btnBold {overflow:hidden;width:353px;height:77px;background:url('https://bodyfriend.speedgabia.com/img/bodyfriend/company/fonts/sarangche/btn_font_01.png') no-repeat;}


@media all and (max-width:1200px){
.font_tabs.scroll{width:100%;}
}
@media all and (max-width:1180px){
.font_tabs.scroll{top:44px;}
}
@media all and (max-width:1024px){
.font_tabs a{height:58px}

.tab_content .group_inner{padding:100px 80px;}
.tab_content .fonts__subtt{margin:120px auto 40px auto;}

.tab_content.eco .group_inner i{margin-right:13px;}
.tab_content.eco .fonts__other i, .tab_content.health .fonts__other i{margin-right:10px;}
.tab_content.eco .lower i, .tab_content.eco .num_simbol > i{margin-right:15px;}
.tab_content.health .group_inner i{margin-right:11px;}
.tab_content.happy .group_inner i{margin-right:16px;}
.tab_content.happy .lower i, .tab_content.happy .num_simbol > i{margin-right:14px;}
.tab_content.mirae .group_inner i{margin-right:12px;font-size:75px;}
.tab_content.sarangche .group_inner i, .tab_content.sarangche .group_inner em{margin-right:10px;font-size:49px;}


.font__download{margin:120px 0!important;}
}

@media all and (max-width:830px){
.font_tabs a{height:49px}

.tab_content.sarangche .group_inner{padding:100px 50px;border-radius:40px;}
.tab_content.eco .group_inner i{margin-right:10px;font-size:53px;}
.tab_content.health .group_inner i{margin-right:8px;font-size:50px;}
.tab_content.happy .group_inner i{margin-right:10px;font-size:51px;}
.tab_content.mirae .group_inner i{margin-right:10px;font-size: 57px;}
.tab_content.sarangche .group_inner i, .tab_content.sarangche .group_inner em{font-size:40px;}

.fonts__article img.mt270,
.fonts__article img.mt240{margin-top:60px !important;}
.fonts__article img.mb240{margin-bottom:60px !important;}

.tab_content.sarangche .font__download--btn{flex-direction: column;}
.sarangche__download--btnLight{margin-right:0;}
}


@media all and (max-width:768px){
.font_tabs a{height:46px;}
.tab_content .group_inner{padding:90px 60px;}	
.tab_content.eco .group_inner i{font-size:48px;}
.tab_content.health .group_inner i{font-size:48px;}
.tab_content.happy .group_inner i{font-size:49px;}
.tab_content.mirae .group_inner i{font-size:52px;}
.tab_content.sarangche .group_inner i, .tab_content.sarangche .group_inner em{font-size:36px;}


.eco__download--btn{width:252px;height:70px;}
.health__download--btn{width:234px;height:70px;}
.happy__download--btn, .happy__download--btn:hover, .happy__download--btn:active{width:230px;height:70px;}
.mirae__download--btn, .mirae__download--btn:hover, .mirae__download--btn:active{width:298px;height:90px;}
.sarangche__download--btnLight,
.sarangche__download--btnBold{display:inline-block;margin:10px auto;background-size:100%;width: 290px; height: 65px;}
}

@media all and (max-width:640px){
.font_tabs a{height:38px;}
.tab_content .fonts__subtt{margin:60px auto 20px auto;font-size:17px !important;}
.tab_content.eco .group_inner i{font-size:36px;}
.tab_content.health .group_inner i{font-size:37px;}
.tab_content.happy .group_inner i{margin-right:12px;font-size:34px;}
.tab_content.mirae .group_inner i{margin-right:10px;font-size:38px;}
.tab_content.sarangche .group_inner i, .tab_content.sarangche .group_inner em{margin-right:5px;font-size:29px;}
}

@media all and (max-width:540px){

.font_tabs a{height:31px;}

.tab_content .group_inner{padding:90px 40px;}

.tab_content.sarangche .group_inner .light,
.tab_content.sarangche .group_inner .bold{text-align:center;}
.tab_content.mirae .group_inner i,
.tab_content.happy .group_inner i,
.tab_content.health .group_inner i,
.tab_content.eco .group_inner i{font-size:53px;}
.tab_content.sarangche .group_inner i, .tab_content.sarangche .group_inner em{margin-right:10px;font-size:56px;}

.tab_content.mirae .fonts__article--kr i{font-size:62px;}
.tab_content.happy .fonts__article--kr i{font-size:63px;}
.tab_content.health .fonts__article--kr i,
.tab_content.eco .fonts__article--kr i{font-size:65px;}

.tab_content.eco .group_inner i:nth-child(13n),
.tab_content.health .group_inner i:nth-child(13n),
.tab_content.happy .group_inner i:nth-child(13n),
.tab_content.mirae .group_inner i:nth-child(13n),
.tab_content.sarangche .group_inner i:nth-child(13n) ,
.tab_content.sarangche .group_inner em :nth-child(13n){margin-right:10px;}

.tab_content.mirae .fonts__article--kr i:nth-child(7n),
.tab_content.health .fonts__article--kr i:nth-child(7n),
.tab_content.eco .fonts__article--kr i:nth-child(7n){margin-right:0;}

.fonts__article img.mt270,
.fonts__article img.mt240{margin-top:40px !important;}
}



@media all and (max-width:414px){
.font_tabs a{height:23px;}

.tab_content.mirae .group_inner{padding:100px 60px;}
.tab_content.sarangche .group_inner{border-radius: 20px;}
.tab_content.mirae .group_inner i, 
.tab_content.happy .group_inner i, 
.tab_content.health .group_inner i, 
.tab_content.eco .group_inner i{font-size:30px;}

.tab_content.health .fonts__article--kr i, 
.tab_content.eco .fonts__article--kr i{font-size:43px;}
.tab_content.happy .fonts__article--kr i{font-size:37px;}
.tab_content.mirae .fonts__article--kr i{font-size:40px;}

.tab_content.sarangche .group_inner i, 
.tab_content.sarangche .group_inner em{font-size:34px;}
}



@media all and (max-width:375px){

.tab_content .fonts__subtt{font-size:14px !important;}
.tab_content.health .group_inner,
.tab_content.happy .group_inner{padding:90px 20px}
.tab_content.sarangche .group_inner{padding:100px 10px;}
.tab_content.mirae .group_inner{padding:100px 40px;}	
.tab_content.eco .fonts__article--kr i{font-size:37px;}
.tab_content.happy .fonts__article--kr i{font-size:32px;}
.tab_content.happy .fonts__article--kr i{font-size:39px;}


}

@media all and (max-width:360px){
	
	
.tab_content.health .fonts__article--kr i{font-size:41px;}
.tab_content.eco .fonts__article--kr i{font-size:34px;}
}