/*!
 * CSS (Cascading Style Sheet) 초기화
 * @author Aaron Jo
 * @date 2015
 */
/* @charset "ISO-8859-1"; */
@charset "utf-8";

/* CSS Document */

/***********************************************************
** Description
***********************************************************/

/*
    웹 퍼블리싱 작업을 하다 보면 가장 습관적으로 설정해놓고 시작하는 작업이 있다.
    바로 CSS 초기화 작업이다. CSS 초기화는 각 브라우저마다 Html 시맨틱 태그에 대한
    기본값(Default)이 조금씩 다르기 때문에 그 차이를 없애기 위해 필요하다.

    CSS 초기화는
    "HTML5 Element, Typograph, Table, List 등의 요소들에 일관성 있게 스타일을 적용시키는 기본 단계"

    - CSS - Resetting VS Normalize
        https://tuhbm.github.io/2018/02/21/cssReset/

    - most popular CSS Reset scripts, all in one place
        https://cssreset.com/


    - The CSS Handbook: a handy guide to CSS for developers
        https://medium.freecodecamp.org/the-css-handbook-a-handy-guide-to-css-for-developers-b56695917d11
*/


/***********************************************************
** CSS 의존성 설정, snc-reset.css 보더 먼저 로딩 될 css 정의
***********************************************************/

/*
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url("normalize.css");
*/


/***********************************************************
** media query 에 따라 css 불러오기
** https://www.w3.org/TR/css3-mediaqueries/
***********************************************************/

/*
@import url(css/base.css); // 미디어 쿼리가 없으므로 모든 장치에 적용된다
@import url(css/medium.css) (min-width: 481px) and (max-width: 768px);
@import url(css/small.css) (max-width: 480px);
@import url(css/mobile.css) (max-width: 320px);

// 모바일을 기준으로 css 작성, media query 를 통해 다른 해상도 대응
// CSS 초기화 스타일은 여기에 작성
/// 모바일 단말을 비롯한 모든 장치에 적용될 기본 스타일은 여기에 작성
body {
    // body 에 적용될 속성 선언
}

// 중간 크기 디스플레이에 적용될 스타일 정의
@media (min-width: 481px) and (max-width: 768px) {
    body {
        // 태블릿에만 적용될 속성 선언
    }
}

// 큰 디스플레이에 적용될 스타일 정의
@media (min-width: 769px) {
    body {
        // 큰 모니터에만 적용될 속성 선언
    }
}
*/


/***********************************************************
** responsive animated Layout
***********************************************************/

/*
CSS transforms VS transitions

They're completely different things.

    Transitions 속성:

        CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
        CSS 전환을 사용하면 CSS 값의 속성 변경을 지정된 기간 동안 원활하게 수행 할 수 있습니다.

    Transforms 속성:

        CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.
        CSS 변환은 CSS로 스타일이 지정된 요소를 2 차원 또는 3 차원 공간에서 변형 할 수있게합니다.

ex)
    body {
        ...

        // Property Syntax: "transition: [property-name] [duration] [timing-function] [delay]"
        //  Default value:	all 0s ease 0s
        //
        //  [property-name]
        //    transition-property: none|all|property|initial|inherit;
        //    1) none: No property will get a transition effect
        //    2) all: Default value. All properties will get a transition effect
        //    3) <property>: css property 이름 작성, 여러개는 comma 로 구분하여 작성. ex) "width, height"
        //    4) initial: Sets this property to its default value. Read about initial
        //    5) inherit: Inherits this property from its parent element. Read about inherit
        //
        //  [timing-function]
        //    1) linear : 직선처럼 처음부터 끝까지 일정한 속도로 진행
        //    2) ease : 처음엔 천천히, 점점 빨라졌다가 다시 천천히
        //    3) ease-in : 전환이 천천히 시작
        //    4) ease-out : 전환이 천천히 끝남
        //    5) ease-in-out : 천천히 시작되고 천천히 끝남
        //    6) cubic-bezier(n,n,n,n) : 사용자가 정의한대로 진행

        transition: 0.6s ease;

        transition: all 2s ease-out 0s;
    }

    혹은

    body {
        ...

        // Property Syntax: "transform: [rotate] [skew] [scale] [translate] [perspective]"

        -webkit-transition: width .75s ease-in;
        -moz-transform: width .75s ease-in;
        -ms-transform: width .75s ease-in;
        -o-transform: width .75s ease-in;
        transform:  width .75s ease-in;
    }
*/


/***********************************************************
** font-family
***********************************************************/

/*
@font-face {
	font-family:ng;
	src:url('../fonts/NanumGothic.eot');
	src:url('../fonts/NanumGothic.ttf');
	src:local(※), url('../fonts/NanumGothic.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'),
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; // Latin glyphs
}
*/


/***********************************************************
** CSS 초기화 (custom)
***********************************************************/
html, body, div, input, empty[comma-value], select, textarea, button, header, section, footer, em {
  /*font-family:inherit;*/
  line-height:1.5;
  color:#303030;
  border:0;
  font-size:inherit;
  font-style:inherit;
  font-weight:inherit;
  margin:0;
  outline:0;
  padding:0;
  letter-spacing:normal;
}
/*html { position:static; }*/    /* default: static, $('body').css('position') */
html { -webkit-font-smoothing:antialiased; }
html { overflow:visible; }
html, body { height:auto; }
html, body { margin:0; padding:0; letter-spacing:-1px; }
/* 복사 방지 (선택블럭 금지) */
html, body {
  -webkit-user-select:none;
  -webkit-touch-callout: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline-style: none;
}
/* iPhone 글자크기 자동조정 방지 */
html {
  -webkit-text-size-adjust: 100%;
}

body { overflow-y:auto; }
/* [주의] html 태그에 overflow-x 속성을 적용하면 Android WebView 56버전 이상에서 화면에 스크롤은 되지만 스크롤바가 출력되지 않는다. */
/* 모바일에서는 overflow-x, overflow-y 속성이 적용되지 않을 경우에는 overflow 속성을 통해 적용해야 한다. */
/*html, body { overflow-x:hidden; }*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, empty[comma-value], select, textarea, p, blockquote, th, td, legend, button { margin:0; padding:0; }
section, nav, header, footer { display:block; }
table { border-spacing:0; border-collapse:collapse; width:100%; }
form, fieldset, img { border:0 none; }
ul, ol, li { list-style:none; }
form { clear:both; }
th, td { text-align:left; font-weight:normal; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block; }
audio, video, canvas { display:inline-block; *display:inline; *zoom:1; }
caption { display:none; height:0; }
audio:not([controls]), [hidden], hr { display:none; height:0; }
label, input[type=button], input[type=submit], button { cursor:pointer; }
button, input, empty[comma-value], select, textarea { margin:0; outline-style:none; font-family:inherit; }
object, embed { max-width:100%; }
input, empty[comma-value], button { width:auto; overflow:visible; }
input, empty[comma-value], select { vertical-align:middle; }
textarea { overflow:auto; resize:none; border:1px solid #e0e0e0; };
pre { white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word; }
pre, code, kbd, samp { font-family:monospace, sans-serif; }
sub, sup { font-size:75%; line-height:0; position:relative; }
sup { top:-0.5em; }
sub { bottom:-0.25em; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
button { background:#ddd; border:1px solid #555; border-radius:3px; padding:0px 10px; margin-top:3px; margin-bottom:3px; letter-spacing:-1px; font-size:1em; }
a { color:inherit; text-decoration:none; cursor:hand; cursor:pointer; }
a:hover { text-decoration:normal; }
legend, caption { visibility:hidden; position:absolute; top:0; left:0; width:1px; height:1px; font-size:0; line-height:0; }
img { vertical-align:top; }


/* override reset.css */
/* 반응형웹 대응: 박스모델 계산방식을 변경해서 padding 과 border 계산에서 벗어나게 해줍니다. */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}