@charset "utf-8";

/* 
 * reset setting CSS Document
 */

/***********************************************************************************
  font
************************************************************************************/
@import url('https:/fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"),
    url(../font/Pretendard-Black.subset.woff2) format("woff2"),
    url(../font/Pretendard-Black.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"),
    url(../font/Pretendard-ExtraBold.subset.woff2) format("woff2"),
    url(../font/Pretendard-ExtraBold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"),
    url(../font/Pretendard-Bold.subset.woff2) format("woff2"),
    url(../font/Pretendard-Bold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"),
    url(../font/Pretendard-SemiBold.subset.woff2) format("woff2"),
    url(../font/Pretendard-SemiBold.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"),
    url(../font/Pretendard-Medium.subset.woff2) format("woff2"),
    url(../font/Pretendard-Medium.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"),
    url(../font/Pretendard-Regular.subset.woff2) format("woff2"),
    url(../font/Pretendard-Regular.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"),
    url(../font/Pretendard-Light.subset.woff2) format("woff2"),
    url(../font/Pretendard-Light.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"),
    url(../font/Pretendard-ExtraLight.subset.woff2) format("woff2"),
    url(../font/Pretendard-ExtraLight.subset.woff) format("woff");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"),
    url(../font/Pretendard-Thin.subset.woff2) format("woff2"),
    url(../font/Pretendard-Thin.subset.woff) format("woff");
}

/* @font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 700;
  src: local('Spoqa Han Sans Neo Bold'),
  url('../font/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
  url('../font/SpoqaHanSansNeo-Bold.woff') format('woff'),
  url('../font/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 500;
  src: local('Spoqa Han Sans Neo Medium'),
  url('../font/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
  url('../font/SpoqaHanSansNeo-Medium.woff') format('woff'),
  url('../font/SpoqaHanSansNeo-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 400;
  src: local('Spoqa Han Sans Neo Regular'),
  url('../font/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
  url('../font/SpoqaHanSansNeo-Regular.woff') format('woff'),
  url('../font/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 300;
  src: local('Spoqa Han Sans Neo Light'),
  url('../font/SpoqaHanSansNeo-Light.woff2') format('woff2'),
  url('../font/SpoqaHanSansNeo-Light.woff') format('woff'),
  url('../font/SpoqaHanSansNeo-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Spoqa Han Sans Neo';
  font-weight: 100;
  src: local('Spoqa Han Sans Neo Thin'),
  url('../font/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
  url('../font/SpoqaHanSansNeo-Thin.woff') format('woff'),
  url('../font/SpoqaHanSansNeo-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'RIDIBatang';
  src: url('../font/RIDIBatang.eot');
  src: url('../font/RIDIBatang.eot?#iefix') format('embedded-opentype'),
  url('../font/RIDIBatang.woff2') format('woff2'),
  url('../font/RIDIBatang.woff') format('woff'),
  url('../font/RIDIBatang.ttf') format('truetype'),
  url('../font/RIDIBatang.svg#RIDIBatang') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} */

/***********************************************************************************
  css reset
************************************************************************************/
html, body {width:100%;min-width:320px;font-weight:400;position:relative;color:var(--tc01);line-height: 1.2;font-size:16px;/* scroll-behavior:smooth; */font-family:'Pretendard','sans-serif', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands';letter-spacing: -0.01em;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;} 
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:400; vertical-align:baseline; -ms-text-size-adjust:100%; -webkit-text-size-adjust: 100%;  -moz-text-size-adjust:100%; -o-text-size-adjust:100%; }
*, *:after, *::before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
a, a:link, a:link, a:visited { text-decoration:none;}
a:hover, a:active, a:focus { text-decoration:none; color:var(--tc01); }
h1, h2, h3, h4, h5, h6 { font-weight:normal; color:var(--tc01); }
a[href^="tel"], .tel{ color:inherit; text-decoration:none; }
button, select { font-family:'Pretendard','sans-serif', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; letter-spacing:0em; font-size:0.94em; cursor:pointer; vertical-align:middle; line-height:1.3; font-weight:500; color:var(--tc01); }
label { cursor:pointer; }
address { font-style:normal; }
em { font-style:normal; }
* {-webkit-tap-highlight-color: transparent; }
/* HTML5 display-role reset for older browsers */
pre { font-family: 'Pretendard','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 { font-family:'Pretendard',  sans-serif, 'Font Awesome 6 Pro', 'Font Awesome 6 Brands'; margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; border:0 none; background-color:transparent; border-color:#ededed; 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:transparent; padding:0; border:0; cursor:pointer; vertical-align:middle; font-size:1em; } 
textarea { font-family:'Pretendard', sans-serif; display:block; color:#222a2e; border:1px solid #e9e9e9; border-radius:0; padding:0.5em 1em; width:100%; line-height:1.6; box-sizing:border-box; font-size:1em; letter-spacing:0; font-weight:400; }
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: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  font-size:1em;
  letter-spacing:0;
  width:100%;
  height: 60px;
  padding:0 10px 0 20px;
  background:#fff;
  font-weight:400;
  color: #222a2e;
  vertical-align:middle;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-border:1px solid #c1ced5;
  -moz-border:1px solid #c1ced5;
  -o-border:1px solid #c1ced5;
  border:1px solid #c1ced5;
  line-height: 60px;
}
input[type="date"] { cursor:pointer; }
select::-ms-expand { display:none; } 
input::-ms-check { display: none; } 
/* input,
select,
textarea { padding: 0 15px; -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: 0; font-family: inherit; }  */
form { display: block; width: 100%; } 
a { color:inherit; }
a, a:hover, a:visited, a:link { color:inherit; text-decoration:none; }
a:focus { outline:2px dotted #fff; }
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:2px dotted transparent;/* border:2px dotted transparent; */}
/* button:focus { outline:1px dotted #F2F3F7; } */
input[readonly],
input[type="text"]:disabled,
input[type="email"]:disabled { color:#aaaaaa; background:#F2F3F7; -webkit-border-color:#F2F3F7; border-color:#F2F3F7; 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; }
textarea:disabled { color:#aaa; background:#F2F3F7; }

::placeholder{
	color:#B3B3B3;
  font-size:inherit;
  font-weight:inherit;
}

select::-ms-expand { display:none; } 
input::-ms-check { display: none; } 
textarea { resize: none !important; }
/* input,
select,
textarea { padding: 0 15px; -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: 0; font-family: inherit; }  */

select {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none;width:100%;height: 60px;border-radius: 10px;padding: 0 20px;background: url(/img/ico-select-arr.svg) center right 20px no-repeat #ffffff;border: 1px solid #000000;font-size: 1rem;font-weight: 400;color: #000000;}

/* hr , legend , caption */
hr, legend {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;}
caption, .irtext { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
.irtext { position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */ margin: -1px; /* 부트스트랩에선 안씀 */ width: 1px; height: 1px; padding: 0; border: 0; white-space: nowrap; overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */ clip: rect(0, 0, 0, 0); clip-path: inset(50%); /* H5BP에선 안씀 */}
caption {width:0;height:0;font-size:0;line-height:0;zoom:1;text-indent:-99999px;}
.skip { overflow:hidden; position:absolute; border:0; padding:0; margin:0; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); white-space:nowrap; }  

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;}
caption, legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } 


/***********************************************************************************
  layout
************************************************************************************/
:root { --w1600:1600px; --mo:30px; --area-t-padding:85px 20px 20px 20px; --area-m-padding:80px 10px 10px 10px; --header-h:70px; --header-t-padding:0 20px; --header-m-padding:0 10px; }
.sub { max-width:var(--w1600); margin:0 auto; position:relative; display:block; }

/***********************************************************************************
 checkbox
************************************************************************************/
.check_group li { position:relative; display:inline-block; margin-right:20px; text-align:left; line-height:2; /*line-height:2.5;*/ } 
.check_group li:last-child { margin-right:0; } 
.check { position:absolute; left:0; width:1px !important; height:1px !important; margin:0 !important; font-size:0 !important; opacity:0; } 
.check + label { position:relative; white-space:nowrap; cursor:pointer; padding:0; } 
/* box */
.check + label::before { content:''; display:inline-block; position:relative; top:2px; width:21px; height:21px; margin-right:6px; vertical-align:text-top; background:white; border:1px solid #bbb; } 
.check + label::after { content:'\f00c'; display:block; position:absolute; left:3px; top:11px; line-height:.1; font-weight:500; color:#bbb; z-index:1; } 
/* box checked */
.check:checked + label::before { background:#4b5c65; border-color:#4b5c65; } 
/* disabled state label */
.check:disabled + label { color:#787878; cursor:auto; } 
.check:disabled:checked + label { color:#3c3c3c; cursor:auto; } 
/* disabled box */
.check:disabled + label::before { background:#eee; } 
.check:disabled + label::after { content:none; } 
.check:disabled:checked + label::before,
.check:disabled:checked + label::after { background:#fff; } 
/* checkmark */
.check:checked + label::after { color:#fff; } 
/* checkbox size > small *************************************************************/
.check_group.s .check + label::before { top:2px; width:14px; height:14px; margin-right:4px; } 
.check_group.s .check + label::after { left:2px; top:4px; padding-top:5px; } 

/***********************************************************************************
radio
************************************************************************************/
.radio::after { content:''; display:block; clear:both; } 
.radio li { position:relative; display:inline-block; margin-right:4px; } 
.radio li:last-child { margin-right:0; } 
.radio input[type="radio"] { position:absolute; left:0; opacity:0; width:1px; height:1px; } 
.radio input[type="radio"], .radio[type="radio"] + label { cursor:pointer; } 
.radio input[type="radio"] + label { position:relative; display:inline-block; padding:5px 16px; font-size:.9em; color:#E5E6EA; background:#5B647E; border:1px solid #5B647E; border-radius:30px; white-space:nowrap; -webkit-transition:.1s linear; transition:.1s linear; } 
.radio input[type="radio"] + label::before { display:none; } 
.radio input[type="radio"]:checked + label { padding-left:35px; color:#fff; background:var(--c01); border-color:var(--c01); -webkit-transition:.1s linear; transition:.1s linear; } 
.radio input[type="radio"]:checked + label::before { display:block; content:''; position:absolute; left:16px; top:calc( 50% - 1px ); width:2px; height:2px; -webkit-transform:rotate(45deg) translate(0,-50%); transform:rotate(45deg) translate(0,-50%); background:#fff; box-shadow:2px 0 0 #fff, 4px 0 0 #fff, 5px 0 0 #fff, 5px -1px 0 #fff, 5px -2px 0 #fff, 5px -6px 0 #fff, 5px -4px 0 #fff, 5px -8px 0 #fff; } 
.radio input[type="radio"]:disabled + label { cursor:default; } 
.radio input[type="radio"]:disabled + label::before { background:#eee; box-shadow:none; }
.radio::after { content:''; display:block; clear:both; } 
.require { color:#D4733D; font-size:1.2em; font-weight:500; }

/***********************************************************************************
  text
************************************************************************************/
/* color */
:root { --tc01: #1E2633c; }
:root { --c01: #0c1f3f; } 
.underline { text-decoration:underline !important; }
.hover_under:hover { text-decoration:underline; }
.sp { font-family:'sp', Serif, -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;' }
.nowrap { white-space:nowrap; }
/* ie10+ > input[type=text]에 포커스 있을 경우 표출되는 X버튼 숨기기 */
input[type=text]::-ms-clear{ display:none !important; }

.fw600 { font-weight:600; }
.fw700 { font-weight:700; }
.fw800 { font-weight:800; }

/***********************************************************************************
  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:6px; height: 5px; }
*::-webkit-scrollbar-button { width:5px; height: 5px; }
*::-webkit-scrollbar-thumb { background:#eee; border: 1px none #fff; border-radius:5em; transition:all 0.5s }
*::-webkit-scrollbar-thumb:hover { background: #aaa; }
*::-webkit-scrollbar-thumb:active { background: #aaa; }
*::-webkit-scrollbar-track { background: #eee; border: 65px none #fff; background:rgba(255,255,255,0.5); border-radius:0; }
*::-webkit-scrollbar-track:hover { background: #eee; }
*::-webkit-scrollbar-track:active { background: #eee; }
*::-webkit-scrollbar-corner { background: transparent; }

/***********************************************************************************
  display
  align
  float
  border
************************************************************************************/
.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; }
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}

.block { display:block !important; }
.inlineblock { display:inline-block !important; }

.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; }
.pl40 { padding-left:40px !important; }
.pl50 { padding-left:50px !important; }
.pl60 { padding-left:60px !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; }
.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; }
.mr08 { margin-right:8px !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
************************************************************************************/
.w10p { width:10% !important; }
.w20p { width:20% !important; }
.w30p { width:30% !important; }
.w40p { width:40% !important; }
.w50p { width:50% !important; }
.w60p { width:60% !important; }
.w70p { width:70% !important; }
.w80p { width:80% !important; }
.w90p { width:90% !important; }
.w100p { width:100% !important; }
.h100 { height:100px !important; }
.h150 { height:150px !important; }
.h200 { height:200px !important; }
.h300 { height:300px !important; }

/***********************************************************************************
  keyframe
************************************************************************************/
.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; }
}
/***********************************************************************************
main animation
************************************************************************************/
.main_con01 ul li { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; }
.main_con01.on ul li { opacity:1; transform:translateY(0); }
.main_con01 ul li .txt:before { opacity:0; transform:translateX(-100px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con01.on ul li .txt:before { opacity:1; transform:translateX(0); }
.main_con01 ul li .txt:after { opacity:0; transform:translateX(100px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con01.on ul li .txt:after { opacity:1; transform:translateX(0); }

.main_con01 ul li .txt strong { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.9s; }
.main_con01.on ul li .txt strong { opacity:1; transform:translateY(0); }
.main_con01 ul li i { opacity: 0;transform: translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:1.2s; }
.main_con01.on ul li i{ opacity:1; transform:translateY(0); }
.main_con01 ul li p { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:1.5s; }
.main_con01.on ul li p { opacity:1; transform:translateY(0); }

.main_con01 {position:relative; z-index:3; }
.main_con01:after { content:''; display:block; position:absolute; left:0; top:0; background: #f1f3f6; width:220px; height:100%; z-index:-1; }
.main_con01 .in .txt .tit { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; }
.main_con01.on .in .txt .tit { opacity:1; transform:translateY(0); }
.main_con01 .in .txt p { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.3s; }
.main_con01.on .in .txt p { opacity:1; transform:translateY(0); }
.main_con01 .in .txt .link { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con01.on .in .txt .link { opacity:1; transform:translateY(0); }

.main_con01 .in .graphic .graphic_wrap ul li { opacity:0; transform:translate(-60px, -60px); transition:opacity 1.2s, transform 1s; transition-delay:0.9s; }
.main_con01 .in .graphic .graphic_wrap ul li:nth-child(2) { transform:translate(60px, -60px); }
.main_con01 .in .graphic .graphic_wrap ul li:nth-child(3) { transform:translate(60px, 60px); }
.main_con01 .in .graphic .graphic_wrap ul li:nth-child(4) { transform:translate(-60px, 60px); }
.main_con01.on .in .graphic .graphic_wrap ul li { opacity:1; transform:translate(0,0); }

.main_con02 { position:relative; }
.main_con02::before { content:''; position:absolute; display:block; top:-220px; max-width:90%; width:830px; height:391px; background:url('../img/con03_bg.png') right top; }
.main_con02 .left ul li .img img { transform:scale(1.05); transition:3s; -webkit-box-shadow: 11px 16px 25px 5px rgba(0, 0, 0, 0.24); box-shadow: 11px 16px 25px 5px rgba(0, 0, 0, 0.24); }
.main_con02.on .left ul li .img img { transform:scale(1); }
.main_con02.on .left ul li .img { /*overflow:hidden;*/ }
.main_con02 .tit { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; }
.main_con02.on .tit { opacity:1; transform:translateY(0); }
.main_con02 .wrap > div.left { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.3s; }
.main_con02.on .wrap > div.left { opacity:1; transform:translateY(0); }
.main_con02 .wrap > div.right { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con02.on .wrap > div.right { opacity:1; transform:translateY(0); }

.main_con03 .left .tit strong { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; }
.main_con03.on .left .tit strong { opacity:1; transform:translateY(0); }
.main_con03 .left .tit ul { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; }
.main_con03.on .left .tit ul { opacity:1; transform:translateY(0); }
.main_con03 .left .tit p { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.3s; }
.main_con03.on .left .tit p { opacity:1; transform:translateY(0); }
.main_con03 .left .tit p { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.3s; }
.main_con03.on .left .tit p { opacity:1; transform:translateY(0); }
.main_con03 .left .tit .link{ opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con03.on .left .tit .link{ opacity:1; transform:translateY(0); }

.main_con03 .right { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.9s; }
.main_con03.on .right { opacity:1; transform:translateY(0); }

.main_con04 .bg .img { position:relative; overflow:hidden; }
.main_con04 .bg .img:before,
.main_con04 .bg .img:after { content:'';  position:absolute; display:block; bottom:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.2); transition:1s; }
.main_con04 .bg .img:after { transition-delay: 0.6s; }
.main_con04.on .bg .img:before, .main_con04.on .bg .img:after { height:0; }
.main_con04 .bg .img img { transform:scale(1.05); transition:3s; }
.main_con04.on .bg .img img { transform:scale(1); }

.main_con04 .txt_w { opacity:0; transform:translateY(30px); transition:opacity 1.2s, transform 1s; transition-delay:0.6s; }
.main_con04.on .txt_w { opacity:1; transform:translateY(0)}
.main_con04 .bg .txt { opacity:0; transform:translateX(30px); transition:opacity 1.2s, transform 1s; transition-delay:1s; }
.main_con04.on .bg .txt { opacity:1; transform:translateX(0); }


/***********************************************************************************
mediaquery
************************************************************************************/
@media screen and ( max-width : 1700px ) {}
@media screen and ( max-width : 1400px ) {}
@media screen and ( max-width : 1280px ) {
  html, body {/* font-size:15px; */letter-spacing:-0.01em;}
}
@media screen and ( max-width : 1024px ) {
  .t_hidden { display:none !important; }
  br.tablet { display:block; opacity:1; visibility:visible; }
  br.mo_2,
  br.mo,
  br.desk { display:none; opacity:0; visibility:hidden; }
}
@media screen and ( max-width : 946px ) {
  .radio li { margin-bottom:5px; } 
  .radio li:last-child { margin-bottom:0; } 
}
@media screen and ( max-width : 800px ) {}

@media screen and ( max-width : 768px ) {
  .checks input[type="radio"] + label:before { top:9px; }
  .checks input[type="radio"]:checked + label:after { top:13px; }
}
@media screen and ( max-width : 600px ) {
  html, body {/* font-size:13px; */word-break:break-word;}
  input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"] { height:45px; padding-left:15px; }
  textarea { padding:10px 15px; }
  .checks input[type="radio"] + label:before { top:8px; }
  .checks input[type="radio"]:checked + label:after { top:12px; }
  .filebox label { line-height:1.8; }
  .m_hidden { display:none; }
  .popup { width:90%;}
  .popup.xs,
  .popup.s,
  .popup.m,
  .popup.l { max-width:360px; }
  br.mo { display:block; opacity:1; visibility:visible; }
  br.mo_2,
  br.tablet,
  br.desk { display:none; opacity:0; visibility:hidden; }
}
@media screen and ( max-width : 480px ) {
  br.mo_2 { display:block; opacity:1; visibility:visible; }
  br.mo, 
  br.tablet,
  br.desk { display:none; opacity:0; visibility:hidden; }
  .checks input[type="radio"] + label:before { top:7px; }
  .checks input[type="radio"]:checked + label:after { top:11px; }
}

@media screen and ( max-width : 340px ) {
  br.mo_2,
  br.mo, 
  br.tablet,
  br.desk { display:none; opacity:0; visibility:hidden; }
}