@charset "utf-8";

/* 공통적인 표현을 위한 스타일 */

/* font */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* 변수 */
:root{
	/* color */
	--color-primary:#0F2C8E;
	--color-point01:#1A17D9; /* blue */
	--color-point02:#D72B2B; /* red */
	--color-point03:#057C48; /* green */

	/* font-color */
	--color-gray100:#111;
	--color-gray80:#333;
	--color-gray60:#555;

	/* line color */
	--color-gray50:#666;
	--color-gray40:#999;
	--color-gray30:#ccc;

	/* background */
	--color-gray10:#ddd;
	--color-gray05:#f5f5f5;
	--color-gray01:#fafafa;
	
	/* font */
	--font-line-height:1.8rem;
	--font-size-basic:1.5rem;
	--font-family01:'Newsreader';

	/* border-radius */
	--border-radius04:4px;
	--border-radius08:8px;
	--border-radius12:12px;
}

/* reset */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
ol, ul, dl{list-style:none;padding:0;margin:0}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,
q:before,q:after{content:'';content:none}
li{list-style:none}

strong{font-weight:500}

legend,caption{position:absolute;top:-1px;left:-1px;width:0;height:0;line-height:0;font-size:0;color:transparent;text-indent:-9999em;visibility:hidden;overflow:hidden}
table,th,td{table-layout:fixed;border-collapse:collapse;border-spacing:0}
a{text-decoration:none;color:var(--color-gray100)}
button{padding:0;margin:0;cursor:pointer}
label{cursor:pointer;font-size:1.6rem}
input,textarea{font-size:1.6rem;font-family:'Roboto', sans-serif, -apple-system;color:var(--color-gray100)}
*{box-sizing:border-box}

/* common */
html{font-size:62.6%}
body{position:relative;min-height:100vh;font-size:1.6rem;line-height:1.6em;font-family:'Roboto', sans-serif, -apple-system;color:var(--color-gray100);background-color:var(--color-gray05);vertical-align:baseline}
body::before,
body::after{content:'';display:block;position:absolute;left:0;width:100%;height:8px;background:url(/images/ptn_paper.png) repeat-x 0 0}
body::before{top:0}
body::after{bottom:0;transform:scaleY(-1)}

.blind, caption{position:absolute;top:-1px;left:-1px;width:1px;height:1px;line-height:1px;font-size:1px;color:transparent;text-indent:-9999em;visibility:hidden;overflow:hidden;word-break:break-word}
.hidden{display:none}

.pr{position:relative}
.pl{position:absolute;left:0;top:0}
.pr{position:absolute;right:0;top:0}

.fl{float:left !important}
.fr{float:right !important}

.tl{text-align:left !important}
.tc{text-align:center !important}
.tr{text-align:right !important}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}

.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}

.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml25{margin-left:25px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr25{margin-right:25px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}