/* 메인공통 */

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(../images/main/main_visual01.jpg) no-repeat center center / cover;}
.visual02 {background: url(../images/main/main_visual02.jpg) no-repeat center center / cover;}
.visual03 {background: url(../images/main/main_visual03_.jpg) no-repeat center center / cover;}
.visual04 {background: url(../images/main/main_visual03.jpg) no-repeat center center / cover;}
.visual05 {background: url(../images/main/main_visual04.jpg) no-repeat center center / cover;}
.visual06 {background: url(../images/main/main_visual05.jpg) no-repeat center center / cover;}
.visual07 {background: url(../images/main/main_visual06.jpg) no-repeat center center / cover;}
.visual08 {background: url(../images/main/main_visual07.jpg) no-repeat center center / cover;}
.visual09 {background: url(../images/main/main_visual08.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 {text-shadow:2px 3px 4px rgba(0,0,0,0.5); display: block; font-size: 4rem; font-weight: 500; line-height: 1.1; color: #fff; letter-spacing: -2px; transition: all 0.5s ease-in-out;}
.visual01 .tit {font-size:3rem; line-height:1.4;}
.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 .tag {width: 60%; margin: 30px 0 0 0;}
.visual .tag p {display: inline-block; box-sizing: border-box; /* width: 120px; */ margin: 5px 10px 0 0; height: 36px; line-height: 34px; font-size: 1rem; font-weight: 300; color: #fff; border: 1px solid #fff; border-radius: 25px; text-align: center; transition: all 0.5s ease-in-out; cursor: pointer; padding: 0px 15px 10px 15px;}
.visual .tag p span {display: inline; margin: 0 5px 0 0; color: #20aaff; transition: all 0.5s ease-in-out;}
.visual .tag p:hover {background-color: #0090e8; border: 1px solid #0090e8;}
.visual .tag p:hover span {color: #fff;}
.visual .link_btn {margin: 25px 0 0 0;}
.visual .link_btn:after {display: block; clear: both; *zoom: 1; content: '';}
.visual .link_btn a {float: left; display: block; box-sizing: border-box; min-width: 90px; height: 30px; padding: 0 10px; 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;}
.visual .link_btn a.active {background-color: #fff; color: #0090e8; }

.visual01 .tit {font-family: 'Muli', 'Noto Sans KR'; font-weight: 400; } 
.visual01 .tit em {font-family: 'Muli', 'Noto Sans KR'; 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(../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;}

#A_Wrap{position: relative;}
#A_Wrap:after {content: ''; position: absolute; top:0; left: 0; background-color: #fff; width: 100%; height: 100%; z-index:999999;
    -webkit-transition: color 300ms;
    transition: color 300ms;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;}

/*   &:before
    content: ""
    position: absolute
    z-index: -1
    top: 0
    bottom: 0
    left: 0
    right: 0
    background: #2098d1
    -webkit-transform: scaleX(0)
    transform: scaleX(0)
    -webkit-transform-origin: 50%
    transform-origin: 50%
    -webkit-transition-property: transform
    transition-property: transform
    -webkit-transition: 300ms ease-out
    transition: 300ms ease-out
  &:hover:before
    -webkit-transform: scaleX(1)
    transform: scaleX(1) */


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

.pageEffect {position: relative; width: 100%; height: 100%;}
@keyframes effect {
    0% {height:100%; }
    20% {height: 100%}
    50% {height:100%;;transform:translateY(0%)}
    100% {height:100%;  transform:translateY(-100%)}
}

.effectPage { position: absolute; top:0; left:0; width: 100%;height:100%; background: #000;z-index:99999999;transform:translateY(100%);  }
.effectPage.on {animation:effect 1.5s ease-out; animation-fill-mode:both; animation-delay:0s;}

.visual.v_motion {transition:0.5s; background-size: 110%;  filter:blur(10px) }
.visual.on {animation:visual_eff 1.5s ease-out; animation-fill-mode:both;  }

@keyframes visual_eff {
0% {background-size:110%; filter:blur(10px)}
30% {background-size: 105%;filter:blur(0px)}
100% {background-size: 107%;filter:blur(0px)}
}



@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: 3rem;}
	
}

@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;}
	.visual01 .tit {font-size: 2rem;}

	.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(../images/main/m_main_visual01.jpg) no-repeat center center / cover;}
	.visual02 {background: url(../images/main/m_main_visual02.jpg) no-repeat center center / cover;}
	.visual03 {background: url(../images/main/m_main_visual03_.jpg) no-repeat center center / cover;}
	.visual04 {background: url(../images/main/m_main_visual03.jpg) no-repeat center center / cover;}
	.visual05 {background: url(../images/main/m_main_visual04.jpg) no-repeat center center / cover;}
	.visual06 {background: url(../images/main/m_main_visual05.jpg) no-repeat center center / cover;}
    .visual07 {background: url(../images/main/m_main_visual06.jpg) no-repeat center center / cover;}
    .visual08 {background: url(../images/main/m_main_visual07.jpg) no-repeat center center / cover;}
    .visual09 {background: url(../images/main/m_main_visual08.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 .txt span {height: 30px; line-height: 28px; padding: 0 10px; margin: 5px 5px 0 0;}
	.visual .tag {width: 90%;}
	.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(../images/main/m_main_visual01.jpg) no-repeat center center / cover;}
	.visual02 {background: url(../images/main/m_main_visual02.jpg) no-repeat center center / cover;}
	.visual03 {background: url(../images/main/m_main_visual03_.jpg) no-repeat center center / cover;}
	.visual04 {background: url(../images/main/m_main_visual03.jpg) no-repeat center center / cover;}
	.visual05 {background: url(../images/main/m_main_visual04.jpg) no-repeat center center / cover;}
	.visual06 {background: url(../images/main/m_main_visual05.jpg) no-repeat center center / cover;}
    .visual07 {background: url(../images/main/m_main_visual06.jpg) no-repeat center center / cover;}
    .visual08 {background: url(../images/main/m_main_visual07.jpg) no-repeat center center / cover;}
    .visual09 {background: url(../images/main/m_main_visual08.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;}
	.visual01 .tit {font-size: 1.5rem;}
	.visual .txt {margin: 15px 0 0 0; padding: 15px 0 0 0; font-size: 1rem; line-height: 1.6;}
	.visual .txt span {height: 30px; line-height: 28px; padding: 0 10px; margin: 5px 5px 0 0;}
	.visual .tag {width: 100%;}
	.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;}
	
	
	
	
}