@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* s : reset */
*{  /* 전체선택자->모든 태그에 여백을 뺌 */
	margin:0;
	padding:0;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
menu,nav,section,summary,time,mark,audio,video{margin:0; padding:0;}
/*블록요소들을 이렇게 여백 0으로 초기화 시켜 모든 브라우저에서 앞으로 주는 여백이 
동일한 결과로 적용되도록 함. 전체 선택자 *를 사용하는 것보다 이렇게 블록을 나열하면 성능이 올라감
*/

html,body{
	width:100%; 
	height:100%;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html{
	/* ************************************************************
		종류:overflow(가로,세로)/overflow-x(가로)/overflow-y(세로)
		표현방식:auto/scroll/hidden 
	    ************************************************************ */
	overflow-y:scroll; /* 문서전체에 세로 스크롤바자국 항상 표시 */
	overflow-x:hidden; /* 문서전체에 가로 스크롤바자국 항상 숨김 */
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ 
	display:block; 
	/*시맨틱태그를 지원하지 않은 브라우저 
	-> 인식하지 못하는 태그를 인라인으로 인식하기때문에 강제로 블럭으로 설정함*/
}
li{list-style-type:none;}   /*목록에 점 없애기 */
a{
	text-decoration:none; /*하이퍼링크 밑줄 없애기*/
	color:inherit;  /*하이퍼링크의 글자색 부모한테 상속받기*/
}  
button {
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

h1,h2,h3,h4,h5,h6{font-size:100%;}
/*제목 태그들에 글자크기를 초기화하여 앞으로 부여하는 크기의 기준을 똑같이 설정함*/

body,input,textarea{
	font-size:18px;  /*모든글자 기본글자크기*/
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-weight: 700;
}

img{
	vertical-align:top; /*이미지에 원치 않는 여백이 생성되는 브라우저 오류가 발생하는 경우가 있음*/
	font-size:0;  /*폰트 크기 초기화*/
	border:0; /* 이미지 링크시 기본적으로 나타나는 테두리 제거 */
	max-width:100%; /*ipad사이즈에서 userlogin 의 title등 %로 된  것을 위해*/
}
table{border-collapse:collapse;} /* 칸사이의 기본 여백 제거 및 중첩 테두리 상쇄 효과 */
input,select{vertical-align:middle;} /*문자와 나란히 입력박스를 배치하면 높낮이가 맞지않아 맞추기 위함 */

.clear:after{    /* 자식이 모두 float 을 사용할때 부모가 높이를 갖게하기 위함 */
	content:"";
	display:block;
	clear:both;
}
.indent{     /* 글자 안보이게 밀어놓기 */
	display:block;
	text-indent:-9999px;
}
.hidden{display:none;}
/* e : reset */


.wrapper{
  position: relative;
  width:100%;
  max-width:100%;
  overflow: hidden;
  padding: 80px 0;
}

.inner { max-width: 1200px; margin: 0 auto;}

.main { text-align: center;}
.main .main-title { font-size: 36px; margin-bottom: 15px; font-weight: 800;}
.main .main-text { display: inline-block; font-size: 20px; font-weight: 500;}
.main .main-text + .main-text { display: block; margin-top: 10px;}

.main ~ [class^=sec] { position: relative; margin-top: 100px;}

[class^=sec] .top { margin-bottom: 30px;}
[class^=sec] .top > .title { font-size: 32px;}

.navi { position: relative; width: 100%; height: 81px;  background: #fff; border-bottom: 1px solid #eee; box-sizing: border-box; margin-top: 30px;}
.navi.fixed .navi-list {position:fixed; top: 0; left: 0; right: 0; bottom: 0;  width: 100%; height: 81px; z-index: 10 ;background: #fff; border-bottom: 1px solid #eee; box-sizing: border-box;}
.navi .navi-list .navi-inner { display: flex; max-width: 1200px; margin: 0 auto;}
.navi .navi-list .navi-item{ position: relative; flex: 1; padding: 32px 0 29px; cursor: pointer; text-align: center; color: #888; font-size: 20px; line-height: 1; z-index: 11;}
.navi .navi-list .navi-item.active { color: #000;}
.navi .navi-list .navi-item.active::after { content: ''; position: absolute; display: block; width: 100%; height: 4px; background: #000; bottom: 0; left: 0;}

.warning { display: block; font-size: 20px; color: red; font-weight: 700; line-height: 20px; margin-top: 15px;}

.list .item { padding: 45px 0; border-bottom: 1px solid #cecece;}
.list .item:first-child { padding-top: 0;}

.btn-img { display: inline-block; width: 150px; height: 150px; border-radius: 10px; overflow: hidden;}

.img-area.border { display: inline-block; border: 1px solid #333;}

.info-area { position: relative;}
.info-area .account-link { display: inline-block; background: rgb(0, 117, 200); font-size: 20px; font-weight: 600; line-height: 32px; padding: 10px; border-radius: 5px; color: #fff;}
.info-area .account-link + .info-text { margin-top: 5px;}

.img-area + .info-area, .link-area + .info-area { margin-top: 30px;} 
.info-area span { display: block; font-size: 20px; font-weight: 600; line-height: 32px;}
.info-area span.info-title { font-size: 24px; font-weight: 700; margin-bottom: 15px;}
.info-area span.warning { font-size: 18px;  margin-top: 8px;}

.info-area .info-list { margin-top: 15px;}
.info-area .info-list .info-item { padding: 5px 0; font-size: 18px; font-weight: 600;}

.info-area .info-list + .info-text { margin-top: 15px;}

.link-area { margin-top: 30px;}

.link-area a { display: inline-block; padding: 20px; border-radius: 15px; background: #ba1118; color: #fff;}

.img-area.border + .img-area.border { display: inline-block; margin-left: 15px;}

@media (max-width:920px) {
	.img-area.border + .img-area.border { margin-left: 0; margin-top: 10px;}
}

@media (max-width:760px) {

	.img-area + .img-area { display: block;}

	.wrapper{padding: 40px 0;}

  .inner { padding: 0 20px;}

	.main .main-title { font-size: 28px; margin-bottom: 10px;}
	.main .main-text {font-size: 14px;}

	.main ~ [class^=sec] { margin-top: 50px;}

	[class^=sec] .top { margin-bottom: 20px;}
	[class^=sec] .top > .title { font-size: 24px;}
	
	.navi { height: 55px;}
  .navi.fixed .navi-list { height: 55px;}
  .navi .navi-list .navi-item { padding: 22px 0 19px; font-size: 14px;}

	.warning { font-size: 18px; line-height: 24px;}

	.btn-img { width: 100px; height: 100px;}

	.info-area span { display: block; font-size: 14px; line-height: 22px;}
	.info-area .account-link { font-size: 14px; line-height: 22px; font-weight: 600;}
	.info-area span.info-title { font-size: 18px; line-height: 26px; margin-bottom: 10px;}
	.info-area span.warning { font-size: 14px; line-height: 22px;}

	.info-area .info-list .info-item { padding: 3px 0; font-size: 16px; line-height: 22px;}

	.link-area a { font-size: 16px;}

	video { width: 100%;} 
}