@charset "UTF-8";

@font-face {
    font-family:'Pretendard';
    font-style:normal;
    font-weight:300;
	src:url('/assets/mobile/font/Pretendard-Regular.woff');
    src:local('Pretendard Regular'),
		url('/assets/mobile/font/Pretendard-Regular.woff2'),
		url('/assets/mobile/font/Pretendard-Regular.woff2') format('woff2'),
		url('/assets/mobile/font/Pretendard-Regular.woff') format('woff');
}
@font-face {
    font-family:'Pretendard';
    font-style:medium;
    font-weight:400;
    src:url('/assets/mobile/font/Pretendard-Medium.woff');
    src:local('Pretendard Medium'),
        url('/assets/mobile/font/Pretendard-Medium.woff2'),
        url('/assets/mobile/font/Pretendard-Medium.woff2') format('woff2'),
        url('/assets/mobile/font/Pretendard-Medium.woff') format('woff');
}
@font-face {
    font-family:'Pretendard';
    font-style:bold;
    font-weight:500;
    src:url('/assets/mobile/font/Pretendard-SemiBold.woff');
    src:local('Pretendard SemiBold'),
        url('/assets/mobile/font/Pretendard-SemiBold.woff2'),
        url('/assets/mobile/font/Pretendard-SemiBold.woff2') format('woff2'),
        url('/assets/mobile/font/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
  font-family:'Pretendard';
  font-style:bold;
  font-weight:600;
  src:url('/assets/mobile/font/Pretendard-Bold.woff');
  src:local('Pretendard Bold'),
      url('/assets/mobile/font/Pretendard-Bold.woff2'),
      url('/assets/mobile/font/Pretendard-Bold.woff2') format('woff2'),
      url('/assets/mobile/font/Pretendard-Bold.woff') format('woff');
}
@font-face {
  font-family:'N-Gothic';
  font-style:regular;
  font-weight:300;
  src:url('/assets/mobile/font/NEXON Lv2 Gothic Regular.woff');
  src:local('ng2_r'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Regular.woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Regular.woff2') format('woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Regular.woff') format('woff');
}
@font-face {
  font-family:'N-Gothic';
  font-style:medium;
  font-weight:400;
  src:url('/assets/mobile/font/NEXON Lv2 Gothic Medium.woff');
  src:local('ng2_m'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Medium.woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Medium.woff2') format('woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Medium.woff') format('woff');
}
@font-face {
  font-family:'N-Gothic';
  font-style:bold;
  font-weight:600;
  src:url('/assets/mobile/font/NEXON Lv2 Gothic Bold.woff');
  src:local('ng2_b'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Bold.woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Bold.woff2') format('woff2'),
        url('/assets/mobile/font/NEXON Lv2 Gothic Bold.woff') format('woff');
}
/* css reset */
*, *:after, *::before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
body { overflow:hidden; }
html, body { width:100%; min-width:320px; font-family:'Pretendard', '맑은고딕', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif, 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; font-weight:300; font-size:15px; color:#5e5e5f; line-height:1.7; letter-spacing:0em; font-smoothing:antialiased;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-shadow:none; text-stroke:0.6px; /*마치 맥의 폰트처럼 두께 라인을 살려준다. */; overflow-x:hidden; scroll-behavior:smooth; word-break:keep-all; background:#fff; } 
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, header, hgroup, menu, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight:300; vertical-align:baseline; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -o-text-size-adjust:100%; }
a, a:link, a:hover, a:link { text-decoration:none;}
h1, h2, h3, h4, h5, h6 { font-weight:normal; color:#272625;}
a[href^="tel"], .tel{ color:inherit; text-decoration:none; }
button, select {font-family:'Pretendard', '맑은고딕', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif, 'Font Awesome 6 Pro', 'Font Awesome 6 Brands' !important; letter-spacing:0em; cursor:pointer; vertical-align:middle; /*line-height:1.3;*/ font-weight:300; color:#5e5e5f; }
label { cursor:pointer; }
address { font-style:normal; }
caption,legend { display:none; } 
/* HTML5 display-role reset for older browsers */
pre { font-family:'Pretendard', '맑은고딕', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif, 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; white-space:normal; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ol, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote::before, blockquote::after, q::before, q::after { content:''; content:none;}
button { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; border:0 none; background-color:transparent; font-family:inherit; font-size:inherit; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; -webkit-box-sizing:border-box; box-sizing:border-box; cursor:pointer; background:#fff; padding:0; border:0; cursor:pointer; vertical-align:middle; font-size:1em; } 
textarea { font-family:'Pretendard', '맑은고딕', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif, 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; display:block; color:#121212; border:1px solid #e5e8ed; padding:20px 25px; width:100%; height:60px; line-height:60px; box-sizing:border-box; font-size:1em; letter-spacing:0; font-weight:300; }
input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"] {
	font-family: 'Pretendard', '맑은고딕', 'Sans-serif'; 
  /* ios 둥근 테두리 제거, 그림자 삭제 */
    -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; 
    -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0; 
    font-size:1em; letter-spacing:0; height:50px; padding:0; background:#fff; font-weight:300; color:#868686; vertical-align:middle; 
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; 
    -webkit-border:0; -moz-border:0; -o-border:0; border:0; -webkit-border-bottom:1px solid #dddfe6; -moz-border-bottom:1px solid #dddfe6; -o-border-bottom:1px solid #dddfe6; border-bottom:1px solid #dddfe6; 
}
input[type="password"] { width:100%; }
input[type="date"] { cursor:pointer; }
select::-ms-expand { display:none; } 
input::-ms-check { display:none; } 
textarea { line-height:1.6; padding:10px; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; display:block; border-radius:0; font-family:inherit; } 
form { display:block; width:100%; } 
a { color:inherit; }
a, a:hover, a:visited, a:link { color:inherit; text-decoration:none; }
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="radio"]:focus + label, input[type="checkbox"]:focus + label, .select:focus .placeholder, textarea:focus { outline:1px dotted #6b778d; }
button:focus { outline:1px dotted #6b778d; }
input[readonly],
input[type="text"]:disabled,
input[type="email"]:disabled { color:#5e5e5f; padding:15px; background:#f1f3f5;  opacity:1; -webkit-text-fill-color: inherit; -webkit-border-color:#e4e9f1; border-color:#e4e9f1; font-weight:400; letter-spacing:-0.01em; cursor:auto; }
input[type="text"] { width:100%; }
input[type="text"].xs { width:50px !important; }
input[type="text"].s { width:100px !important; }
input[type="text"].m { width:200px !important; }
input[type="text"].l { width:400px !important; }


/***********************************************************************************
  align
************************************************************************************/
.alignL { text-align:left !important; }
.alignR { text-align:right !important; }
.alignC { text-align:center !important; }
.fl { float:left !important; }
.fr { float:right !important; }
.fn { float:none !important; }
.block { display:block !important; }
.inlineblock { display:inline-block !important; }
.clear { clear:both !important; *zoom:1; }
.clear::after {content:""; display:block; clear:both; }

table { display:table; width:100%; border-collapse:collapse; border-spacing:0; table-layout:fixed; }
hr { clear:both; display:none; list-style:none; position:absolute; top:0; left:0; width:0; height:0; margin:0; padding:0; border:0; background:none; font-size:0px; line-height:0; visibility:hidden;}

/***********************************************************************************
  placeholder 

************************************************************************************/
input::placeholder { color:#bebeca; font-size:1.15em; letter-spacing:-0.005em; font-weight:300; opacity:1; } 
input::-webkit-placeholder { color:#bebeca; font-weight:300; } /* chrome */
input:-moz-placeholder { color:#bebeca; font-weight:300;  opacity:1; } /* Mozilla Firefox 4 to 18 */
input::-moz-placeholder { color:#bebeca; font-weight:300;  opacity:1; } /* Mozilla Firefox 19+ */
input:-ms-input-placeholder { color:#bebeca; font-weight:300;  } /* IE 10+ */
textarea::placeholder { color:#bebeca; font-weight:300; opacity:1; }
textarea::-webkit-placeholder { color:#bebeca; font-weight:300;  } /* chrome */
textarea:-moz-placeholder { color:#bebeca; font-weight:300;  opacity:1; } /* Mozilla Firefox 4 to 18 */
textarea::-moz-placeholder { color:#bebeca; font-weight:300;  opacity:1; } /* Mozilla Firefox 19+ */
textarea:-ms-textarea-placeholder { color:#bebeca; font-weight:300;  } /* IE 10+ */

/***********************************************************************************
  selection 텍스트 드래그 스타일
************************************************************************************/
::selection { background:#f0f0f0; }
:-webkit-selection { background:#f0f0f0; }
:-moz-selection { background:#f0f0f0; }
::-moz-selection { background:#f0f0f0; }
:-ms-selection { background:#f0f0f0; }
::-ms-selection { background:#f0f0f0; }

/***********************************************************************************
  scroll style
************************************************************************************/
::-webkit-scrollbar { width:11px; height:5px; }
::-webkit-scrollbar-button { width:11px; height:8px; }
::-webkit-scrollbar-thumb { background:#bbb; border:1px none #fff; border-radius:15px; }
::-webkit-scrollbar-thumb:hover { background:#787878; }
::-webkit-scrollbar-thumb:active { background:#0b59b7; }
::-webkit-scrollbar-track { background:#eee; border:65px none #fff; border-radius:34px; }
::-webkit-scrollbar-track:hover { background:#eee; }
::-webkit-scrollbar-track:active { background:#eee; }
::-webkit-scrollbar-corner { background:transparent; }

/***********************************************************************************
  font 
************************************************************************************/
i { display:inline-block; vertical-align:middle; }
.underline { text-decoration:underline !important; }
.hover_under:hover { text-decoration:underline; }
.fw300 { font-weight:300; }
.fw400 { font-weight:400; }
.fw500 { font-weight:500; }
.fw600 { font-weight:600; }
.fs1em { font-size:1em !important; }
.fs8em { font-size:.8em !important; position:relative; top:-2px; }
.fs9em { font-size:.9em !important; position:relative; top:-1px; }
.ng300 { font-family: 'N-Gothic', 'Pretendard', '맑은고딕', 'Sans-serif', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; font-weight:300; }
.ng400 { font-family: 'N-Gothic', 'Pretendard', '맑은고딕', 'Sans-serif', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; font-weight:400; }
.ng600 { font-family: 'N-Gothic', 'Pretendard', '맑은고딕', 'Sans-serif', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; font-weight:600; }
.nowrap { white-space:nowrap; }
.keep_all { word-break:keep-all !important; }
br.mo_2,
br.mo { display:none; }

/* ie10+ > input[type=text]에 포커스 있을 경우 표출되는 X버튼 숨기기 */
input[type=text]::-ms-clear{ display:none !important; }

/***********************************************************************************
  file
************************************************************************************/
.file_wrap .file_hidden {  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); }
.file_wrap .btn_upload { position:relative; width:100%; padding:13px 20px; border:1px dashed #DEE3EA; border-radius:25px; }
.file_wrap .btn_upload::before { content:''; display:inline-block; position:relative; top:-1px; margin-right:.5em; width:18px; height:18px; background:url(/assets/mobile/img/icon_file02.png) no-repeat; vertical-align:middle; }
.file_wrap .file li { display:flex; justify-content:space-between; padding:7px; border-bottom:1px solid #e2e5ea; }
.file_wrap .file li:first-child { padding:7px; margin-top:10px; border-top:1px solid #e2e5ea; }
.file_wrap .file li .file_name { width:calc(100% - 15px); line-height:1.5; word-break:break-all; }
.file_wrap .file li .icon_d::after { content:'\f00d'; display:inline-block; text-align:right; width:15px; font-weight:400; font-family:'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; color:#f1404b; cursor:pointer; }


/***********************************************************************************
  select
************************************************************************************/
.select_wrap { display:inline-block; width:100%; border-bottom:1px solid #e2e5ea; } 
select { position:relative; width:100%; -webkit-appearance:none; border:none; height:50px; line-height:50px; background:url(/assets/mobile/img/icon_select.png) 95% 50% no-repeat; font-size:1.1em; cursor:pointer; } 
select.s { background-position:90% 50%; }
/***********************************************************************************
  checkbox
************************************************************************************/
.check { position:absolute; opacity:0; }

.checkgroup .check01 + label { display:inline-block; position:relative; padding:0; cursor:pointer; }
.checkgroup .check01 + label span { font-size:1.1em; color:#5e5e5f; letter-spacing:-0.02em; }
.checkgroup .check01 + label:before { content:''; display:inline-block; width:24px; height:24px; margin-right:5px; background:#fff; border:1px solid #d0d7df; border-radius:50%; vertical-align:middle; }
.checkgroup .check01:checked + label:before { border:1px solid #0b59b7; }
.checkgroup .check01:disabled + label { color: #d0d7df; cursor: auto; }
.checkgroup .check01:disabled + label:before { background:#f0f0f0; }
.checkgroup .check01 + label:after,
.checkgroup .check01:checked + label:after { content:''; position:absolute; top:50%; left:7px; transform:translateY(-50%); width:10px; height:8px; }
.checkgroup .check01 + label:after { background:url(/assets/mobile/img/icon_check01.png)center no-repeat; }
.checkgroup .check01:checked + label:after { background:url(/assets/mobile/img/icon_check01_active.png)center no-repeat; }

.checkgroup .check01.xs + label span { font-size:unset; }
.checkgroup .check01.xs + label:before { width:17px; height:17px; }
.checkgroup .check01.xs + label::after { top:51%; left:4px; width:9px; background-size:contain; }

.checkgroup .check01.s + label span { font-size:unset; }
.checkgroup .check01.s + label:before { width:21px; height:21px; }
.checkgroup .check01.s + label::after { left:6px; }

.checkgroup02 input[type="checkbox"] + label { position:relative; display:inline-block; width:100%; padding:12px 10px; border:1px solid #e2e5ea; font-weight:600; overflow:hidden; -webkit-transition:.1s linear; transition:.1s linear; vertical-align:middle; }
.checkgroup02 input[type="checkbox"] + label span { display:inline-block; padding-left:32px; vertical-align:middle; }
.checkgroup02 input[type="checkbox"] + label.required span::before { content:'(필수)'; display:inline-block; margin-right:3px; color:#f1404b; }
.checkgroup02 .check01 + label:before{ position:absolute; top:50%; left:10px; transform:translateY(-50%); }
.checkgroup02 .check01 + label:after,
.checkgroup02 .check01:checked + label:after { left:17px;  }

.checkgroup02.all input[type="checkbox"] + label { padding:15px; background:#fff; border:1px solid #0b59b7; font-size:1.1em; font-weight:600; color:#0b59b7; }
.checkgroup02.all input[type="checkbox"] + label span { padding-left:0; }
.checkgroup02.all input[type="checkbox"] + label::after { content:''; position:absolute; top:50%; right:15px; transform:translateY(-50%); width:17px; height:12px; background:url(/assets/mobile/img/icon_check02.png)center no-repeat; }
.checkgroup02.all input[type="checkbox"]:checked + label { padding:15px; background:#0b59b7; border:1px solid #0b59b7; color:#fff; font-weight:600; }
.checkgroup02.all input[type="checkbox"]:checked + label::after { background:url(/assets/mobile/img/icon_check02_active.png)center no-repeat; }

/***********************************************************************************
  radio
************************************************************************************/
.radio { display:flex; flex-wrap:wrap; }
.radio input[type="radio"] { display:none; }

.radio01 input[type="radio"] + label { display:block; position:relative; margin-right:5px; background:#e2e5ea; padding:7px 12px; border-radius:20px; text-align:center; color:#272625; } 
.radio01 input[type="radio"] + label:last-child { margin-right:0; }
.radio01 input[type="radio"]:checked + label { background:#0b59b7; color:#fff; } 
.radio01 input[type="radio"]:checked + label:after { content:"\2713"; position:absolute; left:7px; top:50%; transform:translateY(-50%); width:18px; height:18px; line-height:18px; border-radius:50%; background:#fff; color:#0b59b7; background:#fff; font-weight:600; z-index:99; } 
.radio01 input[type="radio"]:checked + label span { display:inline-block; padding-left:20px; }

.radio02 { display:block; }
.radio02 input[type="radio"] + label { display:block; position:relative; padding-left:25px; margin:0 0 5px 0; color:#272625; } 
.radio02 input[type="radio"] + label:last-child { margin:0; } 
.radio02 input[type="radio"] + label::before { content:''; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%; background:#e5e8ed; }
.radio02 input[type="radio"]:checked + label:after { content:''; position:absolute; left:3px; top:5px; width:11px; height:11px; line-height:11px; border-radius:50%; background:#0b59b7; border:1px solid #fff; } 

/***********************************************************************************
  mediaquery
************************************************************************************/
@media screen and ( max-width :560px ) {
  html, body { font-size:13px; word-break:keep-all; }
  button { font-size:14px; }
  .m_hidden { display:none; }
  br.mo_2 { display:block; }
  
}
@media screen and ( max-width :410px ) {
  br.mo { display:block; }
  br.mo_2 { display:none; }
}

/***********************************************************************************
  border
************************************************************************************/
.b0 { border:0 !important; }
.bl0 { border-left:0 !important; }
.bt0 { border-top:0 !important; }
.br0 { border-right:0 !important; }
.bb0 { border-bottom:0 !important; }

/***********************************************************************************
  padding
************************************************************************************/
.pd0 { padding:0 !important; }
.pd05 { padding:5px !important; }
.pd10 { padding:10px !important; }
.pd15 { padding:15px !important; }
.pd20 { padding:20px !important; }
.pd25 { padding:25px !important; }
.pd30 { padding:30px !important; }
.pl05 { padding-left:5px !important; }
.pl10 { padding-left:10px !important; }
.pl15 { padding-left:15px !important; }
.pl20 { padding-left:20px !important; }
.pl25 { padding-left:25px !important; }
.pl30 { padding-left:30px !important; }
.pt05 { padding-top:5px !important; }
.pt10 { padding-top:10px !important; }
.pt15 { padding-top:15px !important; }
.pt20 { padding-top:20px !important; }
.pt25 { padding-top:25px !important; }
.pt30 { padding-top:30px !important; }
.pr05 { padding-right:5px !important; }
.pr10 { padding-right:10px !important; }
.pr15 { padding-right:15px !important; }
.pr20 { padding-right:20px !important; }
.pr25 { padding-right:25px !important; }
.pr30 { padding-right:30px !important; }
.pb05 { padding-bottom:5px !important; }
.pb10 { padding-bottom:10px !important; }
.pb15 { padding-bottom:15px !important; }
.pb20 { padding-bottom:20px !important; }
.pb25 { padding-bottom:25px !important; }
.pb30 { padding-bottom:30px !important; }

/***********************************************************************************
  margin
************************************************************************************/
.mg0auto { margin:0 auto !important; }
.mg0 { margin:0 !important; }
.mt0 { margin-top:0px !important; }
.mt05 { 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; }
.mt35 { margin-top:35px !important; }
.mt40 { margin-top:40px !important; }
.mt45 { margin-top:45px !important; }
.mt50 { margin-top:50px !important; }
.mt55 { margin-top:55px !important; }
.mt60 { margin-top:60px !important; }
.mb0 { margin-bottom:0px !important; }
.mb02 { margin-bottom:2px !important; }
.mb03 { margin-bottom:3px !important; }
.mb05 { 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; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb45 { margin-bottom:45px !important; }
.mb50 { margin-bottom:50px !important; }
.ml0 { margin-left:0px !important; }
.ml02 { margin-left:2px !important; }
.ml03 { margin-left:3px !important; }
.ml05 { 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; }
.ml35 { margin-left:35px !important; }
.ml40 { margin-left:40px !important; }
.ml45 { margin-left:45px !important; }
.ml50 { margin-left:50px !important; }
.mr0 { margin-right:0px !important; }
.mr02 { margin-right:2px !important; }
.mr03 { margin-right:3px !important; }
.mr04 { margin-right:4px !important; }
.mr05 { 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; }
.mr35 { margin-right:35px !important; }
.mr40 { margin-right:40px !important; }
.mr45 { margin-right:45px !important; }
.mr50 { margin-right:50px !important; }

/***********************************************************************************
  width, height
************************************************************************************/
.width10p { width:10% !important; }
.width20p { width:20% !important; }
.width30p { width:30% !important; }
.width40p { width:40% !important; }
.width50p { width:50% !important; }
.width60p { width:60% !important; }
.width70p { width:70% !important; }
.width80p { width:80% !important; }
.width90p { width:90% !important; }
.width100p { width:100% !important; }
.height100 { height:100px !important; }
.height150 { height:150px !important; }
.height200 { height:200px !important; }
.height300 { height:300px !important; }

/***********************************************************************************
  When the paage load > Effect of each element at the top
************************************************************************************/
.left01 { animation:LeftIn .5s linear 0s forwards; }
.left02 { animation:LeftIn .5s linear 0.3s forwards; }
.left03 { animation:LeftIn .5s linear 0.6s forwards; }
.left04 { animation:LeftIn .5s linear 0.9s forwards; }
.left05 { animation:LeftIn .5s linear 1.2s forwards; }
.left06 { animation:LeftIn .5s linear 1.5s forwards; }
.right01 { animation:RightIn .5s linear 0s forwards; }
.right02 { animation:RightIn .5s linear 0.3s forwards; }
.right03 { animation:RightIn .5s linear 0.6s forwards; }
.right04 { animation:RightIn .5s linear 0.9s forwards; }
.right05 { animation:RightIn .5s linear 1.2s forwards; }
.right06 { animation:RightIn .5s linear 1.5s forwards; }
.top01 { animation:TopIn .5s linear 0s forwards; }
.top02 { animation:TopIn .5s linear 0.3s forwards; }
.top03 { animation:TopIn .5s linear 0.6s forwards; }
.top04 { animation:TopIn .5s linear 0.9s forwards; }
.top05 { animation:TopIn .5s linear 1.2s forwards; }
.top06 { animation:TopIn .5s linear 1.5s forwards; }
.bottom01 { animation:BottomIn .5s linear 0s forwards; }
.bottom02 { animation:BottomIn .5s linear 0.3s forwards; }
.bottom03 { animation:BottomIn .5s linear 0.6s forwards; }
.bottom04 { animation:BottomIn .5s linear 0.9s forwards; }
.bottom05 { animation:BottomIn .5s linear 1.2s forwards; }
.bottom06 { animation:BottomIn .5s linear 1.5s forwards; }

@-webkit-keyframes LeftIn {
    0% { opacity:0; -webkit-transform:translateX(-30px); }
    100% { opacity:1; -webkit-transform:translateX(0); }
}
@-moz-keyframes LeftIn {
    0% { opacity:0; -moz-transform:translateX(-30px); }
    100% { opacity:1; -moz-transform:translateX(0); }
}
@-o-keyframes LeftIn {
    0% { opacity:0; -o-transform:translateX(-30px); }
    100% { opacity:1; -o-transform:translateX(0); }
}
@keyframes LeftIn {
    0% { opacity:0; transform:translateX(-30px); }
    100% { opacity:1; transform:translateX(0); }
}
@-webkit-keyframes RightIn {
    0% { opacity:0; transform:translateX(30px); }
    100% { opacity:1; transform:translateX(0); }
}
@keyframes RightIn {
    0% { opacity:0; transform:translateX(30px); }
    100% { opacity:1; transform:translateX(0); }
}
@-webkit-keyframes TopIn {
    0% { opacity:0; -webkit-transform:translateY(-70px); }
    40% { opacity:0; -webkit-transform:translateY(-40px); }
    100% { opacity:1; -webkit-transform:translateY(0); }
}
@-moz-keyframes TopIn {
    0% { opacity:0; -moz-transform:translateY(-70px); }
    40% { opacity:0; -moz-transform:translateY(-40px); }
    100% { opacity:1; -moz-transform:translateY(0); }
}
@-o-keyframes TopIn {
    0% { opacity:0; -o-transform:translateY(-70px); }
    40% { opacity:0; -o-transform:translateY(-40px); }
    100% { opacity:1; -o-transform:translateY(0); }
}
@keyframes TopIn {
    0% { opacity:0; transform:translateY(-70px); }
    40% { opacity:0; transform:translateY(-40px); }
    100% { opacity:1; transform:translateY(0); }
}
@-webkit-keyframes BottomIn {
    0% { opacity:0; -webkit-transform:translateY(50px); }
    40% { opacity:0; -webkit-transform:translateY(30px); }
    100% { opacity:1; -webkit-transform:translateY(0); }
}
@-moz-keyframes BottomIn {
    0% { opacity:0; -moz-transform:translateY(50px); }
    40% { opacity:0; -moz-transform:translateY(30px); }
    100% { opacity:1; -moz-transform:translateY(0); }
}
@-o-keyframes BottomIn {
    0% { opacity:0; -o-transform:translateY(50px); }
    40% { opacity:0; -o-transform:translateY(30px); }
    100% { opacity:1; -o-transform:translateY(0); }
}
@keyframes BottomIn {
    0% { opacity:0; transform:translateY(50px); }
    40% { opacity:0; transform:translateY(30px); }
    100% { opacity:1; transform:translateY(0); }
}
@-webkit-keyframes scale01 {
  0% { opacity:0; -webkit-transform:scale(0); }
  100% { opacity:1; -webkit-transform:scale(1); }
}
@keyframes scale01 {
  0% { opacity:0; transform:scale(0); }
  100% { opacity:1; transform:scale(1); }
}
@-webkit-keyframes fadeIn { 
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadeIn { 
  0% { opacity:0; }
  100% { opacity:1; }
}