/* 메인공통 */

h2.main_tit {margin: 0 0 90px 0; font-size: 2.813rem; font-weight: 600; color: #000; text-align: left;}





/* main visual */

.visual {position: relative;}
.visual01 {background: url(/calla_lib/images/main/main_visual01.jpg) no-repeat center center / cover;}
.visual02 {background: url(/calla_lib/images/main/main_visual02.jpg) no-repeat center center / cover;}
.visual03 {background: url(/calla_lib/images/main/main_visual03.jpg) no-repeat center center / cover;}
.visual04 {background: url(/calla_lib/images/main/main_visual04.jpg) no-repeat center center / cover;}
.visual05 {background: url(/calla_lib/images/main/main_visual05.jpg) no-repeat center center / cover;}
.visual06 {background: url(/calla_lib/images/main/main_visual06.jpg) no-repeat center center / cover;}

.visual .inner {position: absolute; top: 50%; transform: translateY(-50%); left: 255px; width: 930px; padding: 0 0 130px 0; z-index: 1; transition: all 0.5s ease-in-out;}
.visual .tit {display: block; font-size: 5rem; font-weight: 500; line-height: 1.1; color: #fff; letter-spacing: -2px; transition: all 0.5s ease-in-out;}
.visual .txt {margin: 20px 0 0 0; padding: 20px 0 0 0; line-height: 1.8; font-size: 1.125rem; font-weight: 300; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.5);}
.visual .link_btn {margin: 25px 0 0 0;}
.visual .link_btn:after {display: block; clear: both; content: '';}
.visual .link_btn a {float: left; display: block; box-sizing: border-box; width: 90px; height: 30px; margin: 0 0 0 5px; line-height: 28px; font-family: 'Muli'; font-size: 0.875rem; font-weight: 700; color: #fff; border: 1px solid #fff; text-align: center; background-color: transparent; transition: all 0.5s ease-in-out;}
.visual .link_btn a:first-child {margin: 0;}
.visual .link_btn a:hover {background-color: #fff; color: #0090e8;}
.visual01 .tit {font-family: 'Muli'; font-weight: 300;} 
.visual01 .tit em {font-family: 'Muli'; font-weight: 700;}

.scroll_btn {position: absolute; left: 0; bottom: 0; display: block; box-sizing: border-box; width: 66px; height: 61px; padding: 15px 0 0 15px; background: url(/calla_lib/images/main/scroll.png) no-repeat 0 0; z-index: 1; transition: all 0.4s ease-in-out;}
.scroll_btn span {display: block; font-family: 'Muli'; font-size: 0.875rem; color: #fff;}
.scroll_btn:hover {bottom: -10px;}

.progress_bar {position: fixed; top: 50%; transform: translateY(-50%) rotate(-90deg); left: 0; width: 200px; height: 25px; transition: all 0.5s ease-in-out;}
.progress_bar p {position: absolute; top: 0; bottom: 0; transform: rotate(90deg); font-family: 'Muli'; font-size: 1.25rem; font-weight: 700; color: #fff;}
.progress_bar .current_num {right: -40px;}
.progress_bar .next_num {left: -40px;}
.slider-progress {transform: rotate(180deg); width: 200px; height: 2px; margin: 15px auto; background-color: rgba(255, 255, 255, 0.3);}
.progress {height: 2px; background-color: #20aaff;}








.m_none {display: block;}
.m_block {display: none;}






@media screen and (min-width:1201px) and (max-width: 1600px) {
	
	.inner {box-sizing: border-box; width: 100%; padding: 0 30px;}
	
	.visual .inner {left: 200px; width: 60%;}
	.visual .tit {font-size: 4.5rem;}
	
}

@media screen and (min-width:1025px) and (max-width: 1200px) {
	
	.inner {box-sizing: border-box; width: 100%; padding: 0 30px;}
	
	.visual .inner {left: 200px; width: 60%;}
	.visual .tit {font-size: 4rem;}

	 
}

/* tablet */
@media screen and (min-width:768px) and (max-width: 1024px) {
	
	.inner {box-sizing: border-box; width: 100%; padding: 0 30px;}
	
	.visual .inner {left: 150px; width: 60%;}
	.visual .tit {font-size: 3.5rem;}

	.progress_bar {left: -30px;}
	
 }  
  

@media screen and (min-width:481px) and (max-width:767px) {
	
	.inner {box-sizing: border-box; width: 100%; padding: 0 30px;}
	
	.visual01 {background: url(/calla_lib/images/main/m_main_visual01.jpg) no-repeat center center / cover;}
	.visual02 {background: url(/calla_lib/images/main/m_main_visual02.jpg) no-repeat center center / cover;}
	.visual03 {background: url(/calla_lib/images/main/m_main_visual03.jpg) no-repeat center center / cover;}
	.visual04 {background: url(/calla_lib/images/main/m_main_visual04.jpg) no-repeat center center / cover;}
	.visual05 {background: url(/calla_lib/images/main/m_main_visual05.jpg) no-repeat center center / cover;}
	.visual06 {background: url(/calla_lib/images/main/m_main_visual06.jpg) no-repeat center center / cover;}
	
	#fp-nav {display: none !important;}
	.visual .inner {left: 0; width: 100%; padding: 0 30px 100px;}
	.visual .tit {font-size: 2.571rem;}
	.visual .txt {margin: 15px 0 0 0; padding: 15px 0 0 0; font-size: 1rem; line-height: 1.6;}
	.visual .link_btn a {width: 66px; font-size: 0.8571rem;}
	.scroll_btn {left: 30px;}
	.scroll_btn span {font-size: 0.8571rem;}
	.progress_bar {transform: rotate(0); top: auto; bottom: 100px; left: 0px; right: 0; width: 140px; height: 1px; margin: 0 auto;}
	.progress_bar p {transform: none; font-size: 0.8571rem;}
	.progress_bar .current_num {top: -7px; right: auto; left: -30px;}
	.progress_bar .next_num {top: -7px; left: auto; right: -30px;}
	.slider-progress {transform: rotate(0); width: 140px; margin: 0 auto;}
	.progress {height: 1px;}
	
}


/* mobile */
@media screen and (max-width:480px) {
	
	html, body {font-size: 14px;}
	.inner {box-sizing: border-box; width: 100%; padding: 0 15px;}
	
	h2.main_tit {margin: 0 0 50px 0;}
	
	.m_none {display: none;}
	.m_block {display: block;}
	
	.visual01 {background: url(/calla_lib/images/main/m_main_visual01.jpg) no-repeat center center / cover;}
	.visual02 {background: url(/calla_lib/images/main/m_main_visual02.jpg) no-repeat center center / cover;}
	.visual03 {background: url(/calla_lib/images/main/m_main_visual03.jpg) no-repeat center center / cover;}
	.visual04 {background: url(/calla_lib/images/main/m_main_visual04.jpg) no-repeat center center / cover;}
	.visual05 {background: url(/calla_lib/images/main/m_main_visual05.jpg) no-repeat center center / cover;}
	.visual06 {background: url(/calla_lib/images/main/m_main_visual06.jpg) no-repeat center center / cover;}
	
	#fp-nav {display: none !important;}
	.visual .inner {left: 0; width: 100%; padding: 0 15px 100px;}
	.visual .tit {font-size: 2.571rem;}
	.visual .txt {margin: 15px 0 0 0; padding: 15px 0 0 0; font-size: 1rem; line-height: 1.6;}
	.visual .link_btn a {width: 66px; font-size: 0.8571rem;}
	.scroll_btn {left: 15px;}
	.scroll_btn span {font-size: 0.8571rem;}
	.progress_bar {transform: rotate(0); top: auto; bottom: 100px; left: 0px; right: 0; width: 140px; height: 1px; margin: 0 auto;}
	.progress_bar p {transform: none; font-size: 0.8571rem;}
	.progress_bar .current_num {top: -7px; right: auto; left: -30px;}
	.progress_bar .next_num {top: -7px; left: auto; right: -30px;}
	.slider-progress {transform: rotate(0); width: 140px; margin: 0 auto;}
	.progress {height: 1px;}
	
	
	
	
}