:root{
	--main-color: #19198e;	
	--sub-color: #ffdc00;	
	--main-text-color: #000000;
	--sub-text-color: #ffffff;
	--bg-gray:#f7f7f7;	
	--bg-navy:#1e207d;
	--bg-main:#1d2187;
}


@font-face {
  font-family: sdcompsans;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSansTTF-dRg.ttf') format('truetype');
  font-weight: 400;
  font-style:normal;
}
@font-face {
  font-family: sdcompsans;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSansTTF-eMd.ttf') format('truetype');
  font-weight: 500;
  font-style:normal;
  
}
@font-face {
  font-family: sdcompsans;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSansTTF-fSb.ttf') format('truetype');
  font-weight: 600;
  font-style:normal;
}

@font-face {
  font-family: sdcompserif;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSerifTTF-cRg.ttf') format('truetype');
  font-weight: 400;
  font-style:normal;
}
@font-face {
  font-family: sdcompserif;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSerifTTF-dMd.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: sdcompserif;
  src: url('https://media.sandollcloud.com/static/previewExtend/fonts/SDCompSerifTTF-eSb.ttf') format('truetype');
  font-weight: 600;
  font-style:normal;
}


.sdcompsans{
	font-family: 'sdcompsans', SDGothicNeo !important;
	
}

.sdcompserif{
	font-family: 'sdcompserif', SDGothicNeo !important;
}

.scrolldown {
	-webkit-animation-name:hvr-icon-bob-float, hvr-icon-bob;
	animation-name:hvr-icon-bob-float, hvr-icon-bob;
	-webkit-animation-duration:.3s, 1.2s;
	animation-duration:.3s, 1.2s;
	-webkit-animation-delay:0s, .3s;
	animation-delay:0s, .3s;
	-webkit-animation-timing-function:ease-in-out, ease-in-out;
	animation-timing-function:ease-in-out, ease-in-out;
	-webkit-animation-iteration-count:1, infinite;
	animation-iteration-count:1, infinite;
}


.mb-30{margin-bottom:30px !important; }
.mb-24{margin-bottom:24px !important; }
.mb-70{margin-bottom:70px !important; }
.text-mb{font-weight:500;}

#compserif{display:none;}
#contents > article.not_webfont > *{
	font-family:'SandollGothicNeo1Unicode' , -apple-system, sans-serif !important;
}
.sdComp .font_tab{text-align:center; margin:70px 0 45px;}
.sdComp .font_tab li {
	opacity:.5;
	display:inline-block; 
	margin:0 50px;  
	position:relative;
}
.sdComp .font_tab li.active{
	opacity:1;
}
.sdComp .font_tab li.active:after{
	position:absolute;
	top:-25px;
	left:calc(50% - 5px);
	width:10px;
	height:10px;
	border-radius:50%;
	content:"";
	background:var(--sub-text-color)
}
.sdComp .font_tab a{
	text-decoration: none; 
	color : var(--sub-text-color); 
	font-size:36px; 
	font-weight:400;
}
.sdComp section h3{
	color: var(--main-color); 
	font-size:60px;
	font-weight:500;
}
.sdComp section h4{
	margin-bottom:30px;
	font-weight:600;
	font-size:34px;
	line-height:1.12;
}
.sdComp section p{font-size:20px; line-height:1.6; font-weight:400;}
.sdComp .main{
	padding:65px 0 40px; 
	background:var(--bg-main); 
	color:var(--sub-text-color);
	text-align:center;
}
.sdComp .main img{width:785px; margin-bottom:20px; }
.sdComp .main svg{display:block; margin:0 auto ;  }


.sdComp .background{
	background:var(--bg-gray);
	padding:160px 0 184px;
}
.sdComp .background .container-1180{
	max-width:1180px; 
	display:flex; 	
	width: 100%;
	margin:0 auto;
  justify-content: space-between;
  align-items: center;
}
.sdComp .background .container-1180 >div{width:50%;}
.sdComp .background .div-left{max-width:520px; margin-right:auto;}
.sdComp .background .div-left h3{margin-bottom:50px;}
.sdComp .background .div-right{max-width:580px;}
.sdComp img{max-width:100%;}
.sdComp .introduction{padding:200px 0 240px;}
.sdComp .introduction h3{margin-bottom:40px;}
.sdComp .introduction .container-1460{
	width: 100%;
  max-width: 1460px;
  margin: 0 auto 220px;
}
.sdComp .introduction .container-1000{
	width: 100%;
  max-width: 1000px;
  margin: 200px auto 0px; 
  text-align:center;
}

.sdComp .introduction .container-1180{
	width: 100%;
  max-width: 1180px;
  margin: 240px auto 0px; 
}

.sdComp .introduction .container-1460:after{content:""; display:table; clear:both; width:100%;}
.sdComp .introduction .container-1460 > div{width:50%; float:left;}
.sdComp .introduction .container-1460 > div p{min-height:180px; width:500px; margin:0 auto;}
.sdComp .introduction .container-1000 p{margin-bottom:40px; text-align:left;}
.sdComp .char-set-wrap{    
	display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-bottom:120px;
  }
.sdComp.Sans .char-set-wrap .char-set,
.sdComp.Sans .char-set-wrap .zoom{font-family: 'sdcompsans';}
.sdComp.Serif .char-set-wrap .char-set,
.sdComp.Serif .char-set-wrap .zoom{font-family: 'sdcompserif';}
  
.sdComp .char-set-wrap .char-set{
	text-align: center;
	font-family: 'sdcompsans';
	font-weight:400;
	width:60px; 
	height:60px;
	font-size:30px;
	box-sizing:border-box;
	display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}
.sdComp .char-set-wrap .zoom{
	position:absolute; background:#ffffff; 
	width:400px; height:400px; font-size:300px;
	text-align: center;
	font-family: 'sdcompsans';
	justify-content: center;
  align-items: center;
  opacity:0; display:none;
  line-height:1;
	}
.sdComp .char-set-wrap .zoom.char-set-numerators{padding-bottom:80px;}
.sdComp .char-set-wrap .zoom.is-show{opacity:1; display: inline-flex;}
.sdComp .char-set-wrap.color-main .zoom{box-shadow: 1px 0 0 0 var(--main-color), 0 1px 0 0 var(--main-color), 1px 1px 0 0 var(--main-color), 1px 0 0 0 var(--main-color) inset, 0 1px 0 0 var(--main-color) inset;color:var(--main-color);  }
.sdComp .char-set-wrap.color-sub .zoom{box-shadow: 1px 0 0 0 var(--sub-color), 0 1px 0 0 var(--sub-color), 1px 1px 0 0 var(--sub-color), 1px 0 0 0 var(--sub-color) inset, 0 1px 0 0 var(--sub-color) inset;
	color:var(--sub-color); }

.sdComp .char-set-wrap.color-main .char-set{
	box-shadow: 1px 0 0 0 var(--main-color), 0 1px 0 0 var(--main-color), 1px 1px 0 0 var(--main-color), 1px 0 0 0 var(--main-color) inset, 0 1px 0 0 var(--main-color) inset;
	color:var(--main-color);
}
.sdComp .char-set-wrap.color-sub .char-set{
	box-shadow: 1px 0 0 0 var(--sub-color), 0 1px 0 0 var(--sub-color), 1px 1px 0 0 var(--sub-color), 1px 0 0 0 var(--sub-color) inset, 0 1px 0 0 var(--sub-color) inset;
	color:var(--sub-color);
}
/* 공통 합자 */
.sdComp .char-set-wrap .char-set.common-ligatures{
 	font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}
/* 임의 합자 */
.sdComp .char-set-wrap .char-set-discretionary-ligatures{
 font-variant-ligatures: discretionary-ligatures;
 -moz-font-feature-settings: "dlig";
 -webkit-font-feature-settings: "dlig";
 font-feature-settings: "dlig";
}
/* 스타일대체  ligatures */
.sdComp .char-set-wrap .char-set-salt{
	-moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}
/* 작은 대문자 */
.sdComp .char-set-wrap .char-set-small-caps{
	font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}
/* 올드스타일 숫자 */
.sdComp .char-set-wrap .char-set-onum{
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}
/* 고정폭 숫자 */
.sdComp .char-set-wrap .char-set-tunm{
	font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";	
}
/* 올드스타일+고정폭 */
.sdComp .char-set-wrap .char-set-tunmonum{
	font-variant-numeric: tabular-nums oldstyle-nums;
  -moz-font-feature-settings: "tnum" "onum";
  -webkit-font-feature-settings: "tnum" "onum";
  font-feature-settings: "tnum" "onum";	
	}
/* 분수 */
.sdComp .char-set-wrap .char-set-frac{
	font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}
/* 분수 - 분모 ** frac의 경우 숫자만 썼을 때 분자와 분모 처리를 구분하는 것이 없고
	font-feature-settings: "salt"; 도 적용되지 않아서 
  아래첨자와 모양은 같으나 위치가 다르다고 하여 아래첨자로 보이게 하되, 
  padding-bottom 값을 줘서 분모처럼 보이게    */
.sdComp .char-set-wrap .char-set-numerators{
	font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
  padding-bottom: 8px;

}

/* 위첨자 */
.sdComp .char-set-wrap .char-set-sups{
	font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

/* 아래첨자 */
.sdComp .char-set-wrap .char-set-subs{
	font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}
/* case-sensitive forms*/
.sdComp .char-set-wrap .char-set-case{
	font-feature-settings:"case"
}

.sdComp .Function{
	background:var(--bg-navy);
	color:var(--sub-text-color);
	padding: 160px 0 140px; 
}

.sdComp .Function h3{color:var(--sub-text-color); margin-bottom:0;}
.sdComp .Function .container-1180{
	width: 100%;
  max-width: 1190px;
  margin: 0px auto 20px; 
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
}
.sdComp .Function .container-1180 > div{
	width:50%;
}
.sdComp .Function .container-1180 > div.div-left{max-width:540px;}
.sdComp .Function .container-1180 > div.div-left h4{margin-bottom:0;font-weight:500; font-size:34px; line-height:1.12; }
.sdComp .Function .container-1180 > div.div-left p{margin-bottom:0; font-size:20px; word-break: break-word;}
.sdComp .Function .container-1180 > div.div-right{max-width:600px;}
.sdComp .Function .container-1180 > div.div-right img{max-width:100%;}


@media all and (max-width:760px) {
	.sdComp .font_tab{margin:57px 0 116px;}
	.sdComp .font_tab li {

		margin:0 20px;  
	}

	.sdComp .font_tab li.active:after{
		top:-20px;
		left:calc(50% - 4px);
		width:8px;
		height:8px;
	
	}
	.sdComp .font_tab a{
		font-size:24px; 
	}
	.sdComp section h3{
		text-align:center;
		font-size:40px;
		margin-top:0;
	}
	.sdComp section h4{
		font-size:22px;
		margin-top:0;
		margin-bottom:30px;
	}
	.sdComp section p{font-size:16px; line-height:1.5; margin-top:0; }
	.sdComp .main{
		padding:60px 10px 30px; 
	}
	.sdComp .main img{width:100%; margin-bottom:130px; }
	.sdComp .background{padding:120px 0 103px;}
	.sdComp .background .container-1180,
	.sdComp .introduction .container-1000,
	.sdComp .introduction .container-1180{
		max-width:100%; 
		display:block; 	
		width: 100%;
		margin:0 auto;
		padding:0 8%;
	  justify-content: space-between;
	  align-items: center;
	}
	.sdComp .introduction .container-1000,
	.sdComp .introduction .container-1460{
	max-width:100%; 
		display:block; 	
		width: 100%;
		margin:0 auto;
		padding:0;
	}
	.sdComp .introduction .container-1180{padding:0 7%;}
	.sdComp .background .container-1180 >div{width:100%;}
	.sdComp .background div.div-right{margin-top:60px;}
	.sdComp .introduction{padding:120px 0 60px; background:#ffffff;}
	.sdComp .introduction .container-1460{
	  margin: 0 auto 130px;
	}
	.sdComp .introduction .container-1000{
	  margin: 120px auto 0px; 
	}
	.sdComp .introduction .container-1180{
	  margin: 140px auto 0px; 
	}
	
	.sdComp .introduction .container-1460 > div{width:100%; float:inherit;}
	.sdComp .introduction .container-1460 .div-left img{margin:0px 0 20px; }
	.sdComp .introduction .container-1460 hr{ border-bottom:1px solid #cccccc; margin:0 auto; width:84%; margin-bottom:40px;}
	.sdComp .introduction .container-1460 > div p{min-height:inherit; width:100%; margin:0 auto 30px; padding:0 8%;}
	.sdComp .introduction .container-1000 p{margin-bottom:30px; padding:0 8%;}
	.sdComp .introduction .container-1000 img{width:90%; margin:0 5%;}
	.sdComp .char-set-wrap{    
		display: flex;
	  flex-flow: row;
	  flex-wrap: wrap;
	  flex: 0 1 auto;
	  margin-bottom:80px;
	  }
	.sdComp .char-set-wrap .char-set{	
		width:32px; 
		height:32px;
		font-size:16px;
	}
	.sdComp .char-set-wrap .zoom{
		width:200px; height:200px; font-size:150px;
		}
	.sdComp .char-set-wrap .zoom.char-set-numerators{padding-bottom:20px;}
	/* 분수 - 분모   */
	.sdComp .char-set-wrap .char-set-numerators{padding-bottom: 3px;}
	
	.sdComp .Function{padding: 100px 0 184px; }
	.sdComp .Function .container-1180{
		width: 100%;
	  margin: 0px auto 80px; 
	}
	.sdComp .Function .container-1180 > div{
		width:100%;
		max-width:100%;
		padding:0 8%;
	}
	.sdComp .Function .container-1180 > div.div-left{order:2}
	.sdComp .Function .container-1180 > div.div-left h4{ text-align:center; margin-top:0; font-size:30px; }
	.sdComp .Function .container-1180 > div.div-left p{margin-bottom:0; font-size:16px;}
	.sdComp .Function .container-1180 > div.div-left p.text-mb{text-align:center;}
	.sdComp .Function .container-1180 > div.div-right{margin:20px 0 10px; order:1;}
}