@charset "UTF-8";

:root{
	--default-color: #4db3d2;
	--page-color: #6c2196;
	--back-color: #f3eff7;
}

html,body{overflow-x:hidden; width:100%;}

/** section, img width 100% **/
section[id*='section']{margin: 0 auto; width: 1920px;}
@media screen and (max-width: 900px){section[id*='section']{width: 100%;}}
section[id*='section'] img{width: 100%;}

/** center_wrap , full_wrap **/
.center-wrap{margin: 0 auto; width: 900px;}
.full-wrap{margin: 0 auto; width: 1920px;}
.center-wrap-flex{display: flex; flex-direction: column; justify-content: center; align-items: center;width: 1200px;}
@media screen and (max-width: 900px){section[id*='section'] div[class*='-wrap']{width: 100%; height: 100%;}}

/** 모바일 시 flex 방향 **/
@media screen and (max-width: 900px){section[id*='section'] .flex-mo{flex-direction: column;}}

/** 모바일 패딩 **/
@media screen and (max-width: 900px){.mo-p5{padding: .5rem;}}
@media screen and (max-width: 900px){.mo-p10{padding: 1rem;}}
@media screen and (max-width: 900px){.mo-p15{padding: 1.5rem;}}
@media screen and (max-width: 900px){.mo-p20{padding: 2rem;}}

/** br관련 **/
br.pc{display: block !important;}
@media screen and (max-width: 900px){br.pc{display: none !important;}}
br.mo{display: none !important;}
@media screen and (max-width: 900px){br.mo{display: block !important;}}

/** 모바일일 때 요소 숨김 관련 **/
.-visual-pc{display: block !important;}
@media screen and (max-width: 900px){.-visual-pc{display: none !important;}}
.-visual-mo{display: none !important;}
@media screen and (max-width: 900px){.-visual-mo{display: block !important;}}

/** clear_fix 모바일 div 삭제 **/
@media screen and (max-width: 900px){div[class*='clear_fix'].skip{display: none !important;}}

/** 본문 p 여백 관련 **/
section[id*='section'] p[class*='title'],
section[id*='section'] p[class*='contetns']{margin-bottom: 1.2em; line-height: 2.1;}
  
/** 폰트 관련 **/
.color-1{color: #4db3d2!important;}

.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}

.title1{font-size: 1.2rem !important;}  
.title2{font-size: 1.8rem !important;}
.title3{font-size: 2.2rem !important;}
.title4{font-size: 2.7rem !important;}

@media screen and (max-width: 900px){
	.title1{font-size: calc(1.0 * 1.2rem) !important;}
	.title2{font-size: calc(0.9 * 1.8rem) !important;}
	.title3{font-size: calc(0.8 * 2.2rem) !important;}
	.title4{font-size: calc(0.7 * 2.7rem) !important;}
}

.contents1{font-size: 1rem !important;}
.contents2{font-size: 1.4rem !important;}
.contents3{font-size: 1.8rem !important;}
.contents4{font-size: 2.2rem !important;}

@media screen and (max-width: 900px){
	.contents1{font-size: calc(1.0 * 1rem) !important;}
	.contents2{font-size: calc(0.9 * 1.4rem) !important;}
	.contents3{font-size: calc(0.8 * 1.8rem) !important;}
	.contents4{font-size: calc(0.7 * 2.2rem) !important;}
}

.font10{font-size: 1rem !important;}
.font12{font-size: 1.2rem !important;}
.font15{font-size: 1.5rem !important;}
.font20{font-size: 2rem !important;}
.font25{font-size: 2.5rem !important;}
.font30{font-size: 3rem !important;}


@media screen and (max-width: 900px){
	.font10{font-size: calc(0.9 * 1rem) !important;}
	.font12{font-size: calc(0.9 * 1.2rem) !important;}	
	.font15{font-size: calc(0.8 * 1.5rem) !important;}	
	.font20{font-size: calc(0.8 * 2rem) !important;}
	.font25{font-size: calc(0.7 * 2.5rem) !important;}
	.font30{font-size: calc(0.7 * 3rem) !important;}		
}

#section3 .sec3_2 p span{font-size: 2.1rem;}

#section4{background: #bc9975;}

@media screen and (max-width: 900px){
	#section3 .sec3_2 p{font-size: 1rem;}
}