@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: 'Giants-Regular';
    src: url('../font/Giants-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
	font-family: 'Paperlogy';
	src: url('../font/Paperlogy-6SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
  }
  @font-face {
	font-family: 'Paperlogy';
	src: url('../font/Paperlogy-4Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
  }
  
@font-face {
	font-family: 'Paperlogy';
	src: url('../font/Paperlogy-5Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
  }


article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; font-size: 1em;
    font-family: 'Pretendard', Dotum,'돋움',Helvetica, sans-serif; 
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Pretendard', Dotum,'돋움',Helvetica, sans-serif; }
ol, ul, dl, dd, dt {	padding: 0;	margin:0;	list-style: none;}
a{color: #222222;}
a:hover{text-decoration: none; color : #222222;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}

.displaynone {display: none;}
.max_width {max-width: 1680px; margin: auto;}

:root {
	--main-color : #308ea3;
	--main-color2 : #87c9e7;
	--bg-lightblue :  #c6d5e7;
}

.bg-lightblue { background-color: var(--bg-lightblue);}

.pc_br{display: block;}
.mo_br{display: none;}
@media (max-width: 768px) { 
    .pc_br{display: none;}
    .mo_br{display: block;}
}

/* 본문 바로가기 */
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

.clear:after {display:block;visibility:hidden;clear:both;content:""}
.width100 {width: 100%;}
.w100p {width: 100%;}
.w80p {width: 80%;}
.tx_sm {font-size: 13px;}
.sm_tit {    color: #f37d1b;    font-weight: 500;}
.sub01 .sub_text_name span.tx_sm2 {font-size: 14px; color:#ffffff; padding: 3px 15px; background: #a0c2d8; border-radius: 30px; font-weight: 400;}

html {overflow-x: hidden;}
#wrap {position: relative; overflow: hidden;}

#header{padding: 10px 0; background-color: #ffffff; width: 100%; border-bottom: 1px solid #dcdcdc; position: fixed; z-index: 10; 
	-webkit-transition: all  0.5s ease-in-out 0s;
    -moz-transition: all  0.5s ease-in-out 0s;
    -ms-transition: all  0.5s ease-in-out 0s;
    -o-transition: all  0.5s ease-in-out 0s;
    transition: all  0.5s ease-in-out 0s;}
#header .inner {width: 100%;  padding:0 30px;}
#header .logotx p{font-size: 24px; font-weight: nomal; display: block; color: #ffffff; padding-top: 17px; text-align: center;}
#header .logo {text-align: center;}
#header .logo img {max-width: 180px; margin-bottom: 10px; }
#header .home img{max-width: 36px; padding: 10px 0;}

#header .header_txt{text-align: center; font-size: 20px; font-weight: bold; color: #2b2b2b;}
#header span {color: #d14a3f  }



#content{margin: auto; padding-bottom: 150px; padding-left: 20px; padding-right: 20px; }
p {line-height: 35px; margin: 0; font-size: 18px;     text-align: justify;    word-break: keep-all;}
.main_content { /*  표지 메인  */
	height: 100vh; padding-top: 90px; background: #ebebeb url(../img/bg_main.png) right bottom no-repeat; 
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} 
.main_content .inner{width: 96%; max-width: 1100px; display: flex; 
	justify-content: space-between; 
	align-items: flex-start; gap: 0 30px;	 }
.main_content .inner img {width: 100%; max-width: 350px; box-shadow: 5px 5px 13px 4px #0000003b;}
.main_content .bookcover {flex: 0 0 45%; text-align: center;}
.main_content .desc {flex: 1;}
.main_content h1 { font-size: 34px; font-family: 'Giants-Regular'; margin-bottom: 40px;  }
.main_content .desc > div {margin-bottom: 65px;}
.main_content .desc .linkbtn a {padding: 10px 45px 10px 33px; font-family: 'Paperlogy'; font-size: 20px; color: #ffffff; font-weight: 600; border-radius: 50px;
    margin-right: 10px;    box-shadow: 1px 2px 7px 2px #00000021;}
.main_content .desc a.btn1 {background: #208097 url(../img/arrow-up-right.svg) 90% center no-repeat; background-size: 24px; } 
.main_content .desc a.btn2 { background: #50636b url(../img/arrow-up-right.svg) 90% center no-repeat; background-size: 24px; } 
.main_content .desc .toc a {font-family: 'Paperlogy'; font-size: 23px; padding: 13px 0; display: block; color: #444444; font-weight: 500; }
.main_content .desc .toc a:hover {color: #0d6378; }
.main_content .desc p {font-family: 'Paperlogy'; font-size: 18px; padding: 5px 0;  color: #666666; font-weight: 500; }


@media (max-width: 1200px) {
	#header .inner { padding:0 20px;}
    #content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 768px) {
	#wrap {margin-top: 60px;}
	#header {position: fixed; z-index: 90; width: 100%; height: 70px; top: 0; background-color: #fff; padding-top: 10px;}
	#header .logo {text-align: center; padding: 0; }
	#header .logo img {padding-top: 0px; max-width: 140px;    margin-bottom: 0px;}
	#header .logotx p {font-size: 14px; text-align: center; padding-top: 10px;}
	#header .header_txt {font-size: 15px; white-space: nowrap; text-align: left; padding-right: 0; padding-left: 5px; letter-spacing: -1px;}
	#content {padding-left: 14px; padding-right: 14px;}
	p {font-size: 16px; line-height: 28px; text-align:initial ;     word-break: break-word;} 

	.main_content {height: auto; padding-top: 50px; padding-bottom: 100px;         background-size: 100%;}
	.main_content .inner {  display: block;    }
    .main_content .inner div { width: 100%;         text-align: center;  }
	.main_content h1 {font-size: 24px; text-align: center;}
	.main_content .desc p{font-size: 14px; text-align: center;}
	.main_content .desc > div {margin-bottom: 30px;}
	.main_content .desc .linkbtn a { padding: 10px 35px 10px 23px;	font-size: 16px; margin: 10px auto; display: block; max-width: 60%;}
	.main_content .desc .toc a {font-size: 18px; text-align: left; padding: 10px ;}
	.main_content .inner img {max-width: 250px; margin: 30px auto 30px;}

}


/* 상단 메뉴 */
nav {  display: flex; 
    justify-content: flex-end;
    align-items: center;}
nav .menu {
	position: relative;
	display: inline-block; 
	max-width: 700px;
    /* flex-wrap: wrap; 
    gap: 5px; 
    justify-content: center;  */
	text-align: right;
	padding-right: 40px;
	background: url(../img/chevron-down.svg) center right no-repeat; background-size: 30px;
    }


nav .menu a {font-size: 24px; font-weight: 700;  color: #545454; padding: 12px 0;   display: block; position: relative;  white-space: nowrap; letter-spacing: 1px;	 }
nav .menu a img {width: 30px;}

nav .submenu {position: absolute;    right: 0%;    top: 100%;    background: rgba(0, 0, 0, 0.7);    width: 80%;
    z-index: 50;    transform: translateX(0%);    padding: 20px;    display: none;  }
nav .submenu a{display: block; font-size: 18px; color: #ffffff; padding: 8px 0 8px 28px; text-indent: -25px; text-align: left; font-family: 'Paperlogy'; font-weight: 400;   
	 line-height: 26px; letter-spacing: 0px;	}
nav .menu:hover .submenu,
.menu:focus-within .submenu  {display: block;}
nav .submenu a:hover {color: #87c7cb;}


.btn_menu{    justify-content: center;    align-items: center;  
	width: 40px; height: 40px; margin: 0 0 0 12px;background: transparent; 	border: none; cursor: pointer;  display: none; }
.btn_menu span{  display: block;    transition: all 0.4s ease;}  
.btn_menu > span > span, 
.btn_menu > span::before, 
.btn_menu > span::after {display: block; width: 30px; height: 2px; margin: 10px auto;
	content: ""; background-color: #333333; border-radius: 4px; transition: all 0.2s ease; }
.btn_menu > span > span {  width: 24px;    margin: 2px 0 2px 11px;    font-size: 0;    line-height: 0;}
.btn_menu.is-open > span {transform: rotate(180deg); padding: 0 0 10px;}
.btn_menu.is-open > span > span {opacity: 0;}
.btn_menu.is-open > span::before {transform: translateY(25px) rotate(-45deg);}
.btn_menu.is-open > span::after {transform: translateY(0px) rotate(45deg);}
.btn_menu.is-open > span > span, 
.btn_menu.is-open > span::before, 
.btn_menu.is-open > span::after {width: 30px;}

@media (max-width: 768px){
	nav .menu { display: none;}
	.btn_menu {display: inline-block;}
}


/* 좌측 슬라이드 메뉴  */
#asideright {position: fixed; top:0; right: -530px; max-width: 500px; width: 80%; height: 100%;  z-index: 100; border-left: 1px solid #2b2b2b; 
	padding:40px 20px 0 30px; background-color: #2b2b2b; overflow-y: auto;
    box-shadow: 1px 5px 5px #999;     box-shadow: 2px -1px 10px #777777;

    -webkit-transition: all  0.5s ease-in-out 0s;
    -moz-transition: all  0.5s ease-in-out 0s;
    -ms-transition: all  0.5s ease-in-out 0s;
    -o-transition: all  0.5s ease-in-out 0s;
    transition: all  0.5s ease-in-out 0s;}

#asideright .menu  { text-align: left; margin: auto; font-size: 0;}
#asideright .menu li {display: block;  vertical-align:top; padding: 6px 5px 8px 20px;}

#asideright .menu .big_menu a{font-size: 18px; color: #ffffff; display: block;  font-weight: normal; line-height: 1.5; cursor: pointer; }

#asideright .menu li a{display: block;  color: #fff;  font-size: 16px; text-align: left; letter-spacing: -0.5px; line-height: 1.5; font-weight: 500;     word-break: keep-all;}
#asideright .menu li a span {font-weight: normal; color: #999; font-size: 15px;     display: block;}

#asideright .big_menu .submenu {padding-left: 20px;}
#asideright .submenu{display: none; margin-bottom: 20px;}

#asideright .mainmenuimg{max-width: 20px; margin-left: 10px; padding-bottom: 4px;}
#asideright .mainmenuimg2{max-width: 18px; margin-left: 10px; padding-bottom: 4px;}


#asideright .menu  a.btn_close {position: absolute; top: 15px; right: 20px;}
#asideright .menu  a.btn_close img{width: 40px;}
#asideright h6 {margin-top: -15px;}
#asideright h5 {padding-bottom: 14px; margin-bottom: 30px; border-bottom: 2px solid var(--main-color); font-size: 22px; color: #fff; font-weight: bold;}
#asideright .menu select {font-size: 14px; width: 100%; padding: 6px; margin-bottom: 20px;  }

#asideright .main_site a{font-size: 16px; background: #fff; border-radius: 50px; color: #2b2b2b; padding: 10px 20px; display: inline-block; font-weight: bold; margin-top: 20px;}


a.btn_close { position: fixed; top: 5px; right: 20px; z-index: 110;   -webkit-transition: all  0.5s ease-in-out 0s; display: none; 
    -moz-transition: all  0.5s ease-in-out 0s;
    -ms-transition: all  0.5s ease-in-out 0s;
    -o-transition: all  0.5s ease-in-out 0s;
    transition: all  0.5s ease-in-out 0s;}

a.btn_close img{width: 40px;}

.nav_menu { text-align: right; z-index: 300;  }
.nav_menu select {margin: 17px 10px 10px; height: 28px;padding: 3px; vertical-align: top;}


@media (max-width: 768px){
	#asideright .menu .big_menu{font-size: 15px; display: block;  font-weight: bold; line-height: 1.5; cursor: pointer; padding: 10px 0;}
	#asideright .menu h6 {font-size: 14px;}
	#asideright h5 {font-size: 20px;}
	.nav_menu {display: block;  text-align: right; position: fixed; top: 18px; right: 16px; z-index: 100;}
	#asideright .main_site a {font-size: 14px; }
	#asideright .menu li a {font-size: 14px;}
}


.scroll-to-top {
    position: fixed;
    bottom: 2em;
    right: 15px;
    background: url(../img/arrow-up-circle.svg) no-repeat;
    width: 50px;
    height: 50px;
    padding-right: 1em;
    display: none;
    z-index: 999;
	cursor: pointer;
	opacity: 0.6;
}
.scroll-to-top a {display: block; width: 100%; height: 100%}
.text-bold {font-weight: bold;}



/* 햄버거메뉴  */
	.menu-trigger,
	.menu-trigger span {
		display : inline-block !important;
		transition : all .4s;
		box-sizing : border-box;
	}
	.menu-trigger {
		position : relative;
		width : 40px;
		height : 40px;
		margin: 0px  0;
		font-size: 24px;
	    line-height: 28px;
	}
	.menu-trigger span {
		position : absolute;
		right : 0;
		width : 40px;
		height : 2px;
		background-color : #222;
	}
	.menu-trigger span:nth-of-type(1) {	top : 0px;		}
	.menu-trigger span:nth-of-type(2) {	top : 14px;	 width : 30px;}
	.menu-trigger span:nth-of-type(3) {	top : 28px;	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform:translateY(10px) rotate(-45deg);
		transform:translateY(10px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity : 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform:translateY(-6px) rotate(45deg);
		transform:translateY(-10px) rotate(45deg);
	}
	.menu-trigger.active span {background-color : #fff;}




/* 탭메뉴 */
	.base_tab {    position: relative;    text-align: left;    border-bottom: 1px solid #999999;    font-size: 0;    margin: 20px 0 ;  }
	.base_tab li {z-index: 1;    display: inline-block;    position: relative;    text-align: center;       border: 1px solid #f0f0f0;    border-bottom: 0px;	  margin-left: -1px;  background-color: #fafafa; vertical-align: middle;}
	.base_tab li a{display: block;     padding: 5px 2px;     font-size: 13px;    letter-spacing: -1px;    color: #444; text-decoration:none;  height: 40px; line-height: 30px;	}
	.base_tab li.active {	    z-index: 10;    color: #222;    background: #fff;    border: 1px solid #999999;	border-bottom: 1px solid #fff;    bottom: -1px;    font-weight: normal; background-color: #ffffff; font-weight: bold;}
	.base_tab li:first-child {  margin-left: 0;}
	.base_tab.tab1  li { width: 50%;}
	.base_tab.tab2  li { width: 50%;}
	.base_tab.tab3  li { width: 33.3333%;}
	.base_tab.tab4  li { width: 25%;}
	.base_tab.tab5  li { width: 20%;}
	.base_tab.tab6  li { width: 16.66%;}
	.base_tab.tab7  li { width: 14.28%;}
	.base_tab.tab8  li { width: 12.57%;}
	.base_tab.tab9  li { width: 11.19%;}
	.base_tab.tab12  li { width: 8.4%;}

	 @media screen and (max-width: 992px) {   /* 텝메뉴 2줄로 넘어갈때 */
		.base_tab li a.line2 {line-height: 16px;}
	}






/* 하단 */
#footer {background-color: #e2e2e2; padding:  20px 0 10px; margin:  0;}
#footer .address p {line-height: 1.2; color: #656565; font-size: 14px; }



@media screen and (max-width: 768px) {

	#footer .address p {font-size: 14px;}
	#footer .tail_link li {height: 100px; padding:10px 0; }
	.searchArea_m {display: block;}
	.nav_menu {display: block; z-index: 300;}

}

@media (max-width: 900px) {
	.main_slider .slide_tx h4 p{font-size: 30px;}
	.main_slider .slide_tx h4 span{font-size: 20px; }
	.main_slider .slide_tx a.detail {font-size: 16px;}
	.slider {margin-top: 70px;}
	#top_search  {margin-top: 70px;}
	#top_normal  {margin-top: 70px;}
 }



/*sub*/

/* 공통 */
.sub_bg{height: 200px; position: relative; margin-top: 90px;
	background-image: url('../img/main_sub.jpg');
	background-color: #00000082; /* 배경색 */
    background-blend-mode: multiply; /* 혼합 모드 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

 .title_main{font-size: 30px; font-weight: 400;  color: #fff; margin: auto; text-align: center;   font-family: 'Giants-Regular'; word-break: keep-all;}

.title_main	p{font-size: 35px; margin-bottom: 0px;   letter-spacing: 2px; text-align: center; }

	
.sub_text{font-size: 18px; line-height: 1.5; color: #2b2b2b;}


::selection{background: #accfff;}

/* sub */
.subpage {    display: flex;position: relative; padding-top: 50px;} 
.subpage .left_blank {flex-shrink: 0; flex-basis: 400px; }
.subpage .right_content  {flex-basis: 100%;}
@media screen and (max-width: 1480px) {
	.subpage .left_blank  {        display: none;    }
	.subpage .right_content  {display: block;}
}



.sub01 .title{border-bottom: 1px solid #dddddd; padding: 80px 0; background: url(../img/bg_main.png) right top no-repeat; background-size:auto;}

.sub01 h3{font-size: 38px; color: #11778f; line-height: 1.5;  word-break: keep-all; 	font-family: 'Paperlogy'; font-weight: 600; 
	transition: width 0.3s ease, font-size 0.2s ease; width: 100%; }
.sub01 h3 span{font-size: 25px; font-weight:normal; color: #333333;}

.sub01 h3.fixed {position: fixed; font-size: 30px; top: 110px; width: 360px;}

.sub01 h4 {font-size: 26px;}
.sub01 h4 {font-size: 24px;}

p.sub_text1 {padding-left: 20px; text-indent: 0px; position: relative;}
p.sub_text1::before{position: absolute;    content: "";
    display: inline-block;    width: 14px;    height:14px;    background-color: #ffffff;    border: 1px solid #222222;
	border-radius: 50px;    left: 0;    top: 10px;}

p.sub_text2 {padding-left: 18px; text-indent: 0px; position: relative;}
p.sub_text2::before{position: absolute;    content: "";
    display: inline-block;    width: 8px;    height:8px;    background-color: #707070;   
	border-radius: 50px;    left: 0;    top: 12px;}

p.sub_text3 {font-size: 16px;}

.summary {border: 1px solid #e7e7e7;}
.tit_summary {      /* 요약정리 제목 */
	font-size: 20px;
	padding: 9px 30px;
    display: inline-block;
	border: 1px solid #0a7993;
    background: #0B7F9A;
    color: #ffffff;
    box-shadow: 5px 4px 0px 1px #97979730;}


/* 각주 */

.footnote {border-top: 1px solid #dddddd;  }
.footnote span {font-size: 10px;  }
.footnote p {font-size: 14px; padding-left: 20px;    text-indent: -18px; line-height: 23px; }
p sup a {color: #007e83;}

/* 다음페이지이동 */
#other_list {margin-top: 100px;}
#other_list ul li {	border-bottom:1px solid #888888;}
#other_list ul li:first-child {	border-top:1px solid #888888;}
#other_list ul li dl {	display: flex;	align-items: center;}
#other_list ul li dl dt, #other_list ul li dl dd {	padding:20px;}
#other_list ul li dl dt {	width:120px;	font-weight: 600;}
#other_list ul li dl dd, #other_list ul li dl dd a {	font-size: 18px;	font-weight: 500;	color:#5a5a5a;	transition: all 0.4s ease;}
#other_list ul li dl dd a:hover {	color:#000;}	

@media screen and (max-width: 768px){
	.sub_bg {margin-top: 0;}
	.title_main p {font-size: 25px;}
	.sub01 .title {padding: 30px 0; }
 	.sub01 h3 {font-size: 24px; margin-bottom: 0;}
	.sub01 h4 {font-size: 20px;}
	.sub01 h5 {font-size: 18px;}
	p.sub_text1 {padding-left: 14px;} 
	p.sub_text1::before{width: 10px;    height:10px;    top: 7px;}
	p.sub_text2 {padding-left: 14px;} 
	p.sub_text2::before{width: 6px;    height:6px;    top: 8px;}

	


	#other_list ul li dl dd, #other_list ul li dl dd a {	font-size: 14px;	}
	#other_list ul li dl dt {font-size: 14px; flex: 0 0 90px; padding: 20px 10px; }
	#other_list ul li dl dd {flex: 1; padding: 20px 10px; }

	.tit_summary {  font-size: 16px; padding: 5px 20px;}	
	.footnote {padding-left: 20px; padding-right: 20px;}

}