@charset "UTF-8";

/* ********************************************************************************* *
* 01) Main
* ********************************************************************************* */


@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Black.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Black.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Black.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraBold.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraBold.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraBold.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Bold.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Bold.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Bold.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src:url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-SemiBold.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-SemiBold.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-SemiBold.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Medium.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Medium.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Medium.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Regular.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Regular.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Regular.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Light.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Light.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Light.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraLight.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraLight.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-ExtraLight.ttf') format('trusetype');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Thin.woff2) format('woff2'), url(https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Thin.woff) format('woff');,
	url('https://designlab.chosun.com/2025/muscles/user/lib/fonts/Pretendard-Thin.ttf') format('trusetype');
}

@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#container{ background: url(https://designlab.chosun.com/2025/muscles/user/images/bg.png) repeat #2D3449; position: relative; width: 100%; height: calc(100vh - 39px); display: flex ; align-items: center; overflow: hidden; background-size: 10%; background-position: center;}
#container .inner{ position: relative; width: 100%; max-width: 390px; margin: 0 auto; background: #2D3449; overflow: auto; height: 840px; border-radius: 10px;}
#container .inner::-webkit-scrollbar{ display: none;}
#container .inner .home::-webkit-scrollbar{ display: none;}
#container .inner.active{ overflow: hidden;}
.SBAggroB{ font-family: 'GongGothicMedium'; font-weight: 500; color: #FFF; z-index: 2; position: relative;}

/*section*/
#container .inner > section{ width: 100%; position: absolute; background: #222736;height: auto; position: relative; }
section{ display: none;}
section.active{ display: block;}
section.active > div{ display: none;}
section.active > div.view{ display: block;}

/*intro*/
.intro{padding: 0 22px 35px; height: 840px; position: relative; overflow: hidden;}
.intro-inner{ position: relative; width: 100%; height: 100%;}
.intro h1{ font-size: 56px; line-height: 74px; letter-spacing: 2px; font-family: 'SEBANG_Gothic_Bold'; color: #fff; z-index: 2; position: relative;}
.intro h1 i{ font-size: 56px; position: relative;  font-family: 'SEBANG_Gothic_Bold'; color: #fff;}
.intro h1 i:before{ content:""; position: absolute; width: 10px; height: 10px; background: #FC6E42;  border-radius: 100%; top: -14px; left: 50%; transform: translate(-50%);}
.intro01 h1{ padding-top: 106px; margin-left: 10px; font-weight: 700;z-index: 6; position: relative;}
.video-intro01{width: 268px; height: 361px; margin-right: 10px; float: right; margin-top: 30px; z-index: 1; position: relative;}
.intro02 h3{ font-size: 28px; width: 100%; display: block; text-align: center; padding-top: 155px; }
.intro02 p{ word-break: keep-all; width: 100%; margin-top: 25px; color: #FFF; font-size: 18px; font-weight: 500; line-height: 1.5; margin-bottom: 33px;}
.intro02 p i{color: #FF7E56; font-size: 18px; font-weight: 500; line-height: 1.5;}
.video-intro02{width: 215px; height: 147px; display: block; margin: 0 auto;}

/*home*/
.header{ height: 74px; width: 100%; background: #272C3D; display: flex; justify-content: center; align-items: center; position: sticky; top: 0; z-index: 111; display: none;}
.header h3{font-size: 26px;}
.header.active{ display: flex;}
section.active > .header-wrap{ display: block; position: sticky; top: 0; z-index: 111;}
.list-wrap{ width: 100%; padding: 22px; }
.listbox-st01 h5{ position: relative; display: flex; align-items: center; height: 34px; }
.listbox-st01 h5 i{ font-size: 15px; font-style: normal; font-weight: 800; color: #FFF; z-index: 1; margin-left: 19px; }
.listbox-st01.puple h5{width: 105px;}
.listbox-st01.orange h5{width: 107px;}
.listbox-st01.puple h5:before{ content:""; position: absolute; background: url(https://designlab.chosun.com/2025/muscles/user/images/header_01.png);     width: 105px; height: 34px; background-size: contain; background-position: left; background-repeat: no-repeat;}
.listbox-st01.orange h5:before{ content:""; position: absolute; background: url(https://designlab.chosun.com/2025/muscles/user/images/header_02.png);     width: 107px; height: 34px; background-size: contain;    background-position: left; background-repeat: no-repeat;}
.listbox-st01{ position: relative; width: 100%; margin-bottom: 29px;}
.listbox-st01 ul{width: 100%; padding: 18px 29px 18px 20px; border-radius: 6px; border-top-left-radius: 0; }
.listbox-st01 ul li{ width: 100%; display: flex; align-items: center;}
.listbox-st01 ul li:last-child p{ border-bottom :none; }
.listbox-st01 ul li em{ width: 55px; height: 55px; border-radius: 100%; flex-shrink: 0; background-size: contain;}
.listbox-st01 ul li p{font-size: 18px; margin-left: 13px; display: block;  padding: 20px 0;border-bottom: 1px solid #D9D9D9; flex-grow: 1; font-weight: 600; line-height: 1.3; mix-blend-mode: multiply;}
.listbox-st01.puple ul{ background: #E4D7F7;}
.listbox-st01.orange ul{background: #FFE0C5;}
.home .btn-st01{ position: relative; width: 100%; left: auto; right: auto; margin-bottom: 0;}
.home-slide{display: block; /*display: flex;*/ width: 100%; height: 840px; }
.contents.home{ width: 100%; background: #222736; overflow-y: scroll; flex-shrink: 0; display: none;}
.contents.home.view{ display: block; }
.contents.home.view::-webkit-scrollbar {display: none;}
.home-slide-wrap{ width: 100%; display: block; position: relative; overflow-x: hidden;}
.home-slide-wrap::-webkit-scrollbar { display: none; /* Chrome, Safari */ }
.home .header h3{ opacity: 0;}
.home.view .header h3{ opacity: 1; transition: 0.3s;}

/*exercise*/
.exercise .header{ height: 74px; width: 100%; background: #272C3D; display: flex; justify-content: center; position: sticky; top: 0; z-index: 5;}
.exercise .header h3{font-size: 26px; margin-top: 27px;}
.exercise .header .btn-menu{width: 38px;
 height: 38px; background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_menu.png)no-repeat; background-size: contain; position: absolute; left: 22px; top: 57px; border: none;}
.progress-bar{ border-radius: 30px; height: 7px; background: #F2EFF8; position: absolute; left: 22px; right: 22px; bottom: 16px;}
.progress-bar em{position: relative; width: 30px; border-radius: 30px;
background: #FF7E56; height: 100%; display: block; transition: width 0.4s ease;}
.progress-bar em:before{ content:""; position: absolute; right: 0; top: 50%; margin-top: -7px; width: 14px; height: 14px; display: block; border-radius: 100%; background: #EC5D31;}
.tablist-wrap{ width: 100%; padding: 22px; }
.video-tab{ width: 100%;border-radius: 13px; position: relative; margin-bottom: 17px;}
.video-tab.pupple{ width: 100%; background: #C8B5EA;}
.video-tab.orange{ width: 100%; background: #FFB991;}
.video-exercise{width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 5px;  position: relative; z-index: 1;}
.tab-article{ display: none; }
.tab-wrap{ border: 10.35px solid #C8B5EA; border-radius: 10px; position: relative; border-bottom: none;}
.video-tab.orange .tab-wrap{border: 10.6px solid #FFB991; border-bottom: none;}
.video-tab:before{ content:""; position: absolute;width: 87px; height: 40px; background: url(https://designlab.chosun.com/2025/muscles/user/images/Subtract.png)no-repeat; background-size: contain; top: 1px; left: 0; z-index: 2;}
.video-tab.orange:before{ content:""; position: absolute;width: 87px; height: 40px; background: url(https://designlab.chosun.com/2025/muscles/user/images/Subtract_02.png)no-repeat; background-size: contain; top: 1px; left: 0; z-index: 2;}
.video-tab .top{ font-size: 15px; font-weight: 800; position: absolute;left: 10px; top: 11px; z-index: 3;}
.video-tab.pupple .top{color: #8967CA; }
.video-tab.orange .top{ color: #E5704C; }
.video-tab .bottom{ height: 70px; display: flex ; justify-content: space-between; align-items: center; padding: 0 13.35px; margin-bottom: 11px; line-height: 1.6;}
.video-tab .bottom p{ font-size: 22px; font-style: normal; font-weight: 700;}
.video-tab .bottom em{ display: none; color: #FFF; font-size: 22px; font-weight: 700; z-index: 4; background: none;}

.video-tab.first .video-exercise-wrap{ z-index: 1; transform: translateZ(0); will-change: transform;}

.video-btn{display: block;  width: 48px; height: 48px; position: absolute; left: 50%; top: calc(50% - 30px); transform: translate(-50%,-50%); background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_play_01.png)no-repeat; background-size: contain; z-index: 8;}
.video-tab.orange .video-btn{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_play_02.png)no-repeat; background-size: contain; z-index: 8;}
.video-tab.chk .video-btn{ display: block;background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_replay_01.png)no-repeat; background-size: contain; z-index: 8;}
.video-tab.orange.chk .video-btn{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_replay_02.png)no-repeat; background-size: contain; z-index: 8;}
.video-tab.chk.active .video-btn{ display: none;}

.video-tab.active .tab-article{ display: block;}
.video-tab .video-exercise-wrap{ position: relative; width: 100%; height: auto; z-index: 1; }
.video-tab .video-exercise-wrap:before{ display: block; content:""; width: 48px;
 height: 48px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_play_01.png)no-repeat; background-size: contain; z-index: 4;}
.video-tab.orange .video-exercise-wrap:before{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_play_02.png)no-repeat; background-size: contain; z-index: 4;}
.video-tab.chk.active .video-exercise-wrap:before{ display: none;}
.video-tab.chk .video-exercise-wrap:before{ display: block;background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_replay_01.png)no-repeat; background-size: contain; z-index: 4;}
.video-tab.orange.chk .video-exercise-wrap:before{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_replay_02.png)no-repeat; background-size: contain; z-index: 4;}
.video-tab.chk{ position: relative;}
.video-tab.chk:after{content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; background: rgba(31, 15, 62, 0.28); background-blend-mode: multiply; z-index: 3;}
.video-tab.chk.active .video-exercise-wrap:before{ display: none;}
.video-tab.chk.active:after{ display: none;}
.video-tab.chk.active .bottom em{display: none;}
.video-tab.chk .bottom em{display: block;}
.tab-article{ padding: 0 23px 20px; }
.tab-list01 { color: #222; font-size: 18px; font-weight: 500; line-height: 1.6; border-bottom: 1px solid #AA9AC7; padding-bottom: 20px; margin-bottom: 20px;}
.orange .tab-list01 { border-bottom: 1px solid #D99C7B; }
.tab-list01:last-child{  border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.tab-list01 span{ color: #6E4DA9; font-size: 18px; font-weight: 600; line-height: 20px; margin-bottom: 10px; display: block;}
.tab-list01 span i{color: #6E4DA9; font-size: 24px; font-weight: 600;}
.tab-list01 p{ color: #222; font-size: 16px; font-weight: 500; line-height: 1.6;}
.list-st01 li { display: flex ; align-items: flex-start; margin-bottom: 4px;}
.pupple .tab-list01 span{color: #6E4DA9;}
.orange .tab-list01 span{color: #E05C34;}
.pupple .tab-list01 span i{color: #6E4DA9;}
.orange .tab-list01 span i{color: #E05C34;}
.list-st01 li em { width: 18px; height: 18px; border-radius: 100%; color: #6E4DA9; text-align: center; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; margin-top: 5.5px; flex-shrink: 0;}
.pupple .list-st01 li em{background: #6E4DA9; color: #E4D7F7;}
.orange .list-st01 li em{background: #E05C34; color: #FFDABA;}
.list-st01 li p{ color: #222; font-size: 18px; font-weight: 500; line-height: 1.6; /*word-break: keep-all;*/}
.article-list{ position: relative; padding: 0 22px; padding-bottom: 20px; margin-bottom: 20px;}
.exercise04 .article-list{ padding-bottom: 50px; margin-bottom: 0;}
.article-list h3{color: #FFF; font-size: 24px; font-weight: 400; margin: 40px 0 17px;}
.article-list ul li{border-radius: 13px; background: #3F465A; width: 100%; height: 83px; margin-bottom: 13px;display: flex ; align-items: center;}
.article-list ul li:hover{ background: #65708F;}
.article-list ul li em{ display: block; margin-right: 20px;}
.article-list ul li:nth-child(1) em{ margin-left: 19px; width: 61px; height: 56px; background: url(https://designlab.chosun.com/2025/muscles/user/images/icon_01.png)no-repeat; background-size: contain;}
.article-list ul li:nth-child(2) em{  margin-left: 15px; width: 67px; height: 50px; background: url(https://designlab.chosun.com/2025/muscles/user/images/icon_02.png)no-repeat; background-size: contain; flex-shrink: 0;}
.article-list ul li:nth-child(3) em{  margin-left: 25px; width: 48px; height: 58px; background: url(https://designlab.chosun.com/2025/muscles/user/images/icon_03.png)no-repeat; background-size: contain;}
.article-list ul li a{ color: #FFF; font-size: 19px; font-weight: 500; line-height: 20px;width: 100%; display: flex ; align-items: center; justify-content: flex-start;}
.article-list .btn-st01{ left: 22px; right: 22px; width: auto;}
.caution em{ display: block;width: 22px; width: 18px; height: 15px; margin-right: 5px; margin-top: 3px; flex-shrink: 0; }
.caution{font-size: 15px; font-weight: 500; display:flex ; align-items: flex-start; line-height: 1.5; margin-left: -2px; }
.pupple .caution{color: #6E4DA9; }
.orange .caution{ color: #E05C34;}
.pupple em{color: #6E4DA9; background: url(https://designlab.chosun.com/2025/muscles/user/images/icon_caution_01_01.png)no-repeat; background-size: contain;}
.orange em{ color: #E05C34; background: url(https://designlab.chosun.com/2025/muscles/user/images/icon_caution_02_02.png)no-repeat; background-size: contain;}
.list-st02{ padding-bottom: 90px;}
.list-st02 li{ line-height: 1.7; color: #FFF; font-size: 15px; font-weight: 500; text-align: center;}
.list-st02 li em{ display: inline-block; color: #FFF; font-size: 15px; font-weight: 700;}

/*sec-menu*/ 
.sec-menu{ display: none; position: absolute; width: 100%; top:0; bottom:0; z-index: 10;}
.menu-wrap{ position: absolute; width: 80%; background: #272C3D; top:0; bottom:0; z-index: 10; padding: 0 28px;}
.bak-bg{ position: absolute; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; bottom: 0; right: 0; z-index: 9; mix-blend-mode: multiply;}
.menu-wrap .menu-home a{ display:block; color: #FFF; font-size: 22px; font-weight: 700; width: 100%; background: #3F465A; height: 69px; border-radius: 10px; line-height: 69px; padding: 0 18px;}
.menu-wrap ul li{margin-bottom: 7px;}
.menu-wrap ul li a{ display:block; color: #FFF; font-size: 22px; font-weight: 700; width: 100%; background: #3F465A; height: 69px; border-radius: 10px; line-height: 69px; padding: 0 18px; }
.menu-home{margin-top:203px;}
.menu-subtitle{color: #FFF; font-size: 16px; font-weight: 700; line-height: 2.2; margin-top: 43px; margin-bottom: 3px; margin-left: 19px;}
.btn-close{ position: absolute; top: 18px; right: 16px; width: 38px;
 height: 38px; background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_menu_close.png)no-repeat; background-size: contain; border: none;}
.sec-menu.active{ display: block;}

/*btn*/
.btn-st01{ background: #FC6E42; width: 100%; height: 65px; line-height: 68px; border-radius: 38.5px; display: block; position: absolute; bottom: 0; left: 0; right: 0; font-size: 23px;  border: none;}
.btn-st01:hover{ background: #FFF; color: #FC6E42;}
.btn-wrap{ display: flex; position: sticky; width:100%; padding: 0 22px; height: 0; top: 18px; justify-content: space-between; z-index: 1111;}
.btn-wrap li{ width: 38px;
 height: 38px;}
.btn-wrap li button{ width: 38px;
 height: 38px; border: none;}
.btn-wrap li.prev button{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_prev.png)no-repeat; background-size: contain;}
.btn-wrap li.next button{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_next.png)no-repeat; background-size: contain;}
.btn-wrap li.prev button:hover{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_prev_hover.png)no-repeat; background-size: contain;}
.btn-wrap li.next button:hover{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_next_hover.png)no-repeat; background-size: contain;}
.btn-wrap li.prev.disable button{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_prev_disable_pc.png)no-repeat; background-size: contain;}
.btn-wrap li.next.disable button{ background: url(https://designlab.chosun.com/2025/muscles/user/images/btn_next_disable_pc.png)no-repeat; background-size: contain;}

.final-target{ width: 100%; height: 2px;}

/********************************************************************************** 02) info
**********************************************************************************/