@charset "utf-8";
/* archi102 Document */ 

/* ==================================================
	웹 폰트
================================================== */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700i|Sintony');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');


/* ==================================================
	공통레이아웃
================================================== */
#header, #footer {width:100%;}
.size {width:100%; max-width:1200px; height:auto; margin:0 auto; position:relative;}
.inner  {width:100%; box-sizing:border-box; position:relative;}}
.wrapper {max-width:1920px; width:100%; position:relative; overflow:hidden; margin:0 auto; min-height:600px;}

.cw {color:#fff !important;}
.cb {color:#e30613;}
.cb2 {color:#e23326;}
.cdb {color:#003355;}
.back_b {background:#2deaff;}
.back_db {background:#003355;}
.black{color:#242424;}


/* ==================================================
	header
================================================== */
#header {height:90px; z-index:100;  border-bottom:1px solid rgba(256,256,256,.2); box-sizing:border-box;background:none;}
#header .logo {margin-left:20px; margin-top:-26px;}
#header .logo a {display:block; margin-top:-3px;}
#header .logo a img{width:200px;}
#header .menu {right:20px;}
#header .gnb { max-width:940px; margin:0 auto; height:90px;text-align:center;}
#header .gnb .depth1 > li {height:90px; padding:25px 0; position:relative; box-sizing:border-box;}
#header .gnb .depth1 > li > a {display:inline-block; color:#fff; height:40px; line-height:40px; font-weight: 600; }
#header .gnb .depth1 > li > a.on {color:#e33326;}
#header .gnb .depth2 {width:100%; top:90px; z-index:100; padding:10px 0; display:none; height:170px; box-sizing:border-box;}
#header .gnb .depth2 > li {height:30px; box-sizing:border-box; padding:5px 0;}
#header .gnb .depth2 > li a {display:inline-block; color:#fff; height:20px; line-height:36px; font-size:1.2rem;}

#header .gnb .depth1 > li > a:hover {color:#e30613;}
#header .gnb .depth2 > li > a:hover {color:#e33326;}
#header .gnb .depth1 > li > a.on span {color:#e30613;}
#header .gnb .depth1 > li > a.on, #header .gnb .depth1 > li > a.active ,#header .gnb .depth1 > li > a:hover {color:#e33326;}
#header .gnb .depth2 > li > a.on, #header .gnb .depth2 > li > a.active, #header .gnb .depth2 > li > a:hover {color:#e33326;}
#header .menu {margin-top:-15px; z-index:100;}
#header .menu a {float:left; margin-left:10px; display:block; height:30px; line-height:26px; color:#fff; text-align:center;}
#header .menu a img.close{display:none;}
#header .menu .on img.all{display:none}
#header .menu .on img.close{display:block;max-width:28px}
#header .header_bg { top:90px; left:0; width:100%; background:rgba(0,0,0,.9); z-index:50; height:0; }
#header .line{position:absolute; background:#e33326; height:1px; width:00px; top:89px; z-index:999;margin-left:25px;}

#m_header {display:none; z-index:100;width:100%; padding:20px;border-bottom:1px solid rgba(255,255,255,0.2);box-sizing:border-box;}
#m_header .m_head {height:40px;}
#m_header .m_head h1 {display:inline-block;}
#m_header .m_head h1 a {display:block; height:40px; line-height:40px; font-size:0; }
#m_header .m_head h1 a img {vertical-align:middle;width:150px;}
#m_header .m_head .m_pavi {display:block; width:40px; height:40px; background:url('/img/m_menu.png') no-repeat center center; background-size:30px; text-indent:-9999px; }

#m_header .m_menu {position:absolute; width:100%;top:0;left:-100%;}
#m_header .m_menu .m_top {width:100%; height:80px; background:#fff; padding: 20px; box-sizing:border-box;}
#m_header .m_menu .m_top h1{display:inline-block;}
#m_header .m_menu .m_top h1 a {display:block; vertical-align:middle; line-height:40px; font-size:0;}
#m_header .m_menu .m_top h1 a img {vertical-align:middle; width:150px;}
#m_header .m_menu .m_top .m_close {display:block; width:40px; height:40px; background:url('/img/m_close.png') no-repeat center center ;background-size:30px; text-indent:-9999px; }
#m_header .m_menu .m_gnb {width:100%;}

#m_header .m_menu .m_gnb .mdepth1 > li > a {font-size:20px;position:relative;display: block;width:100%;height:55px; 
line-height:55px; padding:0 30px;  border-bottom: 1px solid rgba(255,255,255,0.2); background:#242424 url('/img/mdepth_down.png') no-repeat calc(100% - 30px) center; color:#fff; box-sizing:border-box;background-size:25px;}

#m_header .m_menu .m_gnb .mdepth1 > li > a.on{background:#242424 url('/img/mdepth_up.png') no-repeat calc(100% - 30px) center; background-size:25px; }

#m_header .m_menu .m_gnb .mdepth2 {display:none;}
#m_header .m_menu .m_gnb .mdepth2 > li > a {font-size:18px;display:block; width:100%; height:55px; line-height:55px; padding:0 30px; 
border-top:1px solid #fff;  background:#eee;  color:#242424; box-sizing:border-box; }
#m_header .m_menu .m_gnb .mdepth2 > li:first-child a {border-top:0; }
#m_header .m_menu .m_gnb .mdepth2 > li a:hover, #m_header .m_menu .m_gnb .mdepth2 > li > a.on {background:#e33326; color:#fff;}
.mbg {display:none; width:100%; height:100%; position:absolute; background:rgba(0,0,0,.8); z-index:99;}

#header.sub_header{background: rgba(0,0,0,0.2);}
#header.sub_header.scrolled{background: #242424;}
#m_header.m_sub_header{background: rgba(0,0,0,0.2);}
#m_header.m_sub_header.scrolled{background: #242424;}



/* ==================================================
	footer
================================================== */
#footer {width:100%; height: 160px;background:#242424; border-top:1px solid  rgba(255,255,255,0.2);}
#footer .inner {height:160px; padding:40px 30px; box-sizing:border-box; position:relative; background:url('/img/footer_logo.svg') no-repeat 30px 35px; background-size:45px auto;}
#footer .util {position:absolute; right:20px; top:0; z-index:2;}
#footer .util a {display:block; font-size:17px; color:rgba(255,255,255,0.8); width:180px; height:40px; line-height:39px; font-size:14px; border:1px solid rgba(255,255,255,0.8); text-align:center; letter-spacing:-1px; }
#footer .address {position:relative; padding-right:220px; box-sizing:border-box; z-index:1; padding-left:60px;}
#footer .address ul {}
#footer .address ul li {overflow:hidden; margin-bottom:5px; color:#fff; font-size:14px; line-height:20px; letter-spacing:-0.5px;}
#footer .address ul .c_name {font-size:18px; margin-bottom:15px; letter-spacing:-0.5px; font-weight:800;}
#footer .address ul li span {display:inline-block; vertical-align:top; float:left; margin-left:15px; font-weight:200;}
#footer .address ul li span:first-child {margin-left:0; }
#footer .address ul li span b {font-weight:600;}
#footer .address .copy {position:absolute; right:20px; top:50px; color:rgba(255,255,255,0.4); font-size:13px; line-height:20px;  letter-spacing:-0.5px; font-weight:300;}

.sub {min-height:800px; padding-bottom:60px;  }

.sub_tab_m {display:none; position:absolute; top:81px; left:0; width:100%; z-index:10;}
.sub_tab_m .mtab_wrap {width:100%; position:relative;}
.sub_tab_m .mtab_wrap .dropbox {float:left; width:50%; }
.sub_tab_m .mtab_wrap .dropbox > a {display:block; height:50px; line-height:50px; padding:0 15px; box-sizing:border-box;  background-color:#242424; background-image:url('/img/mdepth_down.png'); background-repeat:no-repeat; background-position:calc(100% - 15px) center; background-size:15px;  color:#fff; font-size:16px; border-left:1px solid #335c77;}
.sub_tab_m .mtab_wrap .dropbox > a.on {background-image:url('/img/mdepth_up.png');}
.sub_tab_m .mtab_wrap .dropbox:first-child > a{border-left:0; }
.sub_tab_m .mtab_wrap .dropbox ul {width:100%; display:none;}
.sub_tab_m .mtab_wrap .dropbox li a {display:block; height:50px; line-height:50px; border-bottom:1px solid #545559; background:#292b2f; color:#fff; font-size:16px; padding:0 15px; box-sizing:border-box;}
.sub_tab_m .mtab_wrap .dropbox li a.on {background:#e33326; color:#fff; }

@media(max-width:1200px){
	#header .gnb { margin-left:200px}
	#header .gnb .depth1 > li {width:18%;}
}

@media(max-width:960px){
	
	#header {display:none;}
	#m_header {display:block;}
	#sub_tab {display:none; }
	.sub_tab_m {display:block;}
	#sub_top .sub_visual{padding-top:131px;}
	#footer {height:auto;}
	#footer .inner {padding:80px 20px 30px 20px; box-sizing:border-box; height:auto;  background-position:center 30px }
	#footer .util {position:relative; right:initial; top:initial; left:initial; text-align:center; margin-top:20px; }
	#footer .util a {display:inline-block; }
	#footer .address{padding-right:0;  padding-left:0;  }
	#footer .address ul {}
	#footer .address ul li{text-align:center;margin-bottom:0}
	#footer .address ul li span { float:none;}
	#footer .address ul li .width100 {display:block;width:100%;margin-left:0;}
	#footer .address ul li:first-child span {display:block; margin-left:0;  }
	#footer .address .copy{position:relative; right:initial; top:initial; text-align:center; padding-top:5px;  }
	
	.sub {min-height:auto;}

}
@media(max-width:480px){
	.construction .wrap .con{margin-top: 120px;margin-bottom: 100px;box-sizing: border-box;}
}
@media(max-width:330px){
     #footer .address ul li span{font-size:12px; font-weight: 200;}
	#footer .address .copy {font-size:12px;  font-weight: 200;}
	#footer .util {font-size:12px;}

}

/* ==================================================
	skip
================================================== */
a.skip{display:block;position:absolute;top:-1px;z-index:999;width:0;height:0;overflow:hidden;text-align:center}
a.skip:active,a.skip:focus{z-index:999;width:100%;height:auto;padding:5px;background:#FFF}

a:hover{transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;}


h2{margin:0 0 10px 0;}
input[type=button] {cursor:pointer !important;}
.bt{cursor:pointer !important;}
/* 정렬 */
.tb {display: table; height:100%; width:100%}
.tbc {display:table-cell; vertical-align:middle}


/* inptu / select / textarea */
input[type='text'],input[type='password'], input[type='tel'], input[type='email'], input[type='number'], input[type='url'], select {border:1px solid #cccccc; height:40px; line-height: 40px; vertical-align: middle; padding:0 5px; width:100%; box-sizing:border-box;}
textarea{border:1px solid #cccccc; }
input[readonly], input[readonly="readonly"], input:read-only {background:#fafafa;}

/* 셀렉트박스 */
.select{display:inline-block;  position:relative; height:40px; width:100%; vertical-align: middle;}
.select select{display: block; cursor: pointer;  max-width:100%;  -moz-appearance:none; /* Firefox */   -webkit-appearance:none; /* Safari and Chrome */  appearance:none;}
select::-ms-expand { display:none; } 
.select select:not([multiple]){padding-right: right:5px;}
.select:not(.is-multiple):not(.is-loading)::after{border: 2px solid #333; border-radius: 2px; border-right: 0; border-top: 0; content: ' '; display: block; height: 6px; margin-top: -6px; pointer-events: none; position: absolute; top: 50%; transform: rotate(-45deg); transform-origin: center; width: 6px; right:10px; z-index: 4;}

/* 체크박스 */
.check_box { position:relative;}
.check_box input[type="checkbox"]{display:inline-block; position:absolute; left:-9999px; opacity:0; visibility:hidden; width:1px; height:1px; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); overflow:hidden; }
.check_box label {display:inline-block; padding-left:30px; color:#333; cursor:pointer; position:relative; line-height:24px;}
.check_box label:before  {position:absolute; left:0; top:50%; width:24px; height:24px; box-sizing:border-box; margin-top:-12px; border:1px solid #cccccc; line-height:20px; text-align:center; clear:both; content:''; display:block;}
.check_box input[type="checkbox"]:checked + label:before {content:'\2714'; font-size:18px; font-weight: 500;}

/**/

.radio_box { position:relative;}
.radio_box input[type="radio"]{display:inline-block; position:absolute; left:-9999px; opacity:0; visibility:hidden; width:1px; height:1px; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); overflow:hidden; }
.radio_box label {display:inline-block; padding-left:30px; color:#333; cursor:pointer; position:relative; line-height:24px;}
.radio_box label:before  {position:absolute; left:0; top:50%; width:24px; height:24px; box-sizing:border-box; margin-top:-12px; border:1px solid #cccccc; line-height:20px; text-align:center; clear:both; content:''; display:block;}
.radio_box input[type="radio"]:checked + label:before {content:'\2714'; font-size:18px; font-weight: 500;}


/* 라디오 버튼 */
/*
.radio_box label{}
.radio_box label + label{margin:0 0 0 24px;}
*/

/* input type="file"*/
.fileBox{position:relative;}
.fileBox .inputBox{float:left; box-sizing: border-box;}
.fileBox input[type="text"]{float:left;overflow:hidden;box-sizing:border-box;height:32px;padding:8px 10px;border:1px solid #cccccc;line-height:1;background:#fafafa;  box-sizing: border-box;}
.fileBox .fileBtn{float:left;margin-left:5px;  box-sizing: border-box;}
.fileBox .fileBtn label{display:inline-block;width:110px;font-size:14px;line-height:40px; height:40px; letter-spacing:-1px;color:#fff;background:#999;text-align:center; border-radius: 4px;  box-sizing: border-box;}
.fileBox .fileBtn input[type="file"]{visibility:hidden;width:0;height:0;padding:0;margin:0;}



.wid10{width:10%;}
.wid20{width:20%;}
.wid30{width:30%;}
.wid40{width:40%;}
.wid50{width:50%;}
.wid60{width:60%;}
.wid70{width:70%;}
.wid80{width:80%;}
.wid90{width:90%;}
.wid100{width:100%;}

.max100 {max-width:100px;}
.max150 {max-width:150px;}
.max200 {max-width:200px;}
.max250 {max-width:250px;}
.max300 {max-width:300px;}
.max350 {max-width:350px;}
.max400 {max-width:400px;}
.max450 {max-width:450px;}
.max500 {max-width:500px;}
.max550 {max-width:550px;}
.max600 {max-width:600px;}
.max650 {max-width:650px;}
.max700 {max-width:700px;}
.max750 {max-width:750px;}
.max800 {max-width:800px;}
.max850 {max-width:850px;}
.max900 {max-width:900px;}
.max950 {max-width:950px;}
.max1000 {max-width:1000px;}

.mt0 {margin-top:0px !important;}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt60{margin-top:60px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}

.mb0 {margin-bottom:0px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb70 {margin-bottom:70px !important;}
.mb80 {margin-bottom:80px !important;}
.mb90 {margin-bottom:90px !important;}
.mb100 {margin-bottom:100px !important;}

.ml0 {margin-left:0px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.ml40 {margin-left:40px !important;}
.ml50 {margin-left:50px !important;}

.mr0 {margin-right:0px !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}
.mr40 {margin-right:40px !important;}
.mr50 {margin-right:50px !important;}

.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt60 {padding-top:60px !important;}
.pt70 {padding-top:70px !important;}

.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}
.pb60 {padding-bottom:60px !important;}
.pb70 {padding-bottom:70px !important;}


.auto {margin-left:auto !important; margin-right:auto !important;}
.bno{border:none !important;}
.blind{position:absolute; top:-999999px; width:0; height:0; font-size:0; overflow:hidden;}
.clear:after {clear:both;content:'';display:block;}
.hidden {text-indent:-9999px; width:0px; height:0px; line-height:0px; font-size:0px; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); overflow:hidden; visibility:hidden;}


.fl_l{float:left !important;}
.fl_r{float:right !important;}


.wbreak{word-break:break-all !important;}

.tb {display:table;}
.tbc {display:table-cell; vertical-align:middle; }


/* Font */
.ft12 {font-size:12px !important;}
.ft13 {font-size:13px !important;}
.ft14 {font-size:14px !important;}
.ft15 {font-size:15px !important;}
.ft16 {font-size:16px !important;}
.ft17 {font-size:17px !important;}
.ft18 {font-size:18px !important;}
.ft19 {font-size:19px !important;}
.ft20 {font-size:20px !important;}
.ft21 {font-size:21px !important;}
.ft22 {font-size:22px !important;}
.ft23 {font-size:23px !important;}
.ft24 {font-size:24px !important;}
.ft25 {font-size:25px !important;}
.ft26 {font-size:26px !important;}
.ft27 {font-size:27px !important;}
.ft28 {font-size:28px !important;}
.ft29 {font-size:29px !important;}
.ft30 {font-size:30px !important;}
.ft31 {font-size:31px !important;}
.ft32 {font-size:32px !important;}
.ft65 {font-size:65px !important; letter-spacing:-4px; line-height:60px;}
.ft2 {font-size:2rem !important; letter-spacing:-1px; line-height:1.4;}
.ft3 {font-size:3rem !important; letter-spacing:-2px; line-height:1.4;}

.txt_l{text-align:left !important;}
.txt_c{text-align:center !important;}
.txt_r{text-align:right !important;}
.ver_t{vertical-align:top !important;}
.txt_b{font-weight:bold !important;}
.txt_line{text-decoration:underline !important;}

.txt_black {color:#000 !important;}
.txt_white {color:#fff !important;}

.fw200 {font-weight:200 !important;}
.fw300 {font-weight:300 !important;}
.fw400 {font-weight:400 !important;}
.fw500 {font-weight:500 !important;}
.fw600 {font-weight:600 !important;}
.fw800 {font-weight:800 !important;}

/* col width */
.col02 > * {width:50% !important;}
.col03 > * {width:33.3333% !important;}
.col04 > * {width:25% !important;}
.col05 > * {width:20% !important;}
.col06 > * {width:16.6666% !important;}
.col07 > * {width:14.285% !important;}
.col08 > * {width:12.5% !important;}
.col09 > * {width:11.1111% !important;}
.col10 > * {width:10% !important;}

.wbreak{word-break:break-all !important;}

.disTbl {display:table;}
.disTbl_c {display:table-cell; vertical-align:middle; }
/* Position */

.Abs {position:absolute;}
.Fix {position:fixed;}
.Abs_lt {position:absolute; top:0; left:0;}
.Abs_rt {position:absolute; top:0; right:0; }
.Abs_lb {position:absolute; bottom:0; left:0; }
.Abs_rb {position:absolute; bottom:0; right:0; }
.Abs_cc {position:absolute; left:50%; top:50%; }
.Abs_lc {position:absolute; left:0; top:50%;}
.Abs_rc {position:absolute; right:0; top:50%; }
.Fix_lt {position:fixed; top:0; left:0; }
.Fix_rt {position:fixed; top:0; right:0; }
.Fix_lb {position:fixed; bottom:0; left:0; }
.Fix_rb {position:fixed; bottom:0; right:0; }
.Fix_cc {position:fixed; left:50%; top:50%; }
.Fix_lc {position:fixed; left:0; top:50%;}
.Fix_rc {position:fixed; right:0; top:50%; }


/* 웹폰트 정의 */

.sintony {font-family:'Sintony', sans-serif;}
.roboto {font-family:'Roboto Condensed', sans-serif;}


/* itemList */


.itemList2 > * {width:50%; float:left;}
.itemList3 {width:100%;float:left;}
.itemList3 > * {width:33.3333%;float:left;}
.itemList4 > * {width:25%;float:left;}
.itemList5 > * {width:20%;float:left;}
.itemList6 > * {width:16.6666%;float:left;}
.itemList7 > * {width:14.285%;float:left;}
.itemList8 > * {width:12.5%;float:left;}
.itemList9 > * {width:11.1111%;float:left;}
.itemList10 > * {width:10%;float:left;}

/* animated */

.animate [class*='ani-']{opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0);}
.fromLeft:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(-50px, 0, 0); -webkit-transform:translate3d(-50px, 0, 0); -o-transform:translate3d(-50px, 0, 0); -ms-transform:translate3d(-50px, 0, 0);  -moz-transform:translate3d(-50px,0,0);}
.fromRight:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(50px, 0, 0); -webkit-transform:translate3d(50px, 0, 0); -o-transform:translate3d(50px, 0, 0); -ms-transform:translate3d(50px, 0, 0); -moz-transform:translate3d(50px, 0, 0); }
.fromBottom:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(0, 100px, 0); -webkit-transform:translate3d(0, 100px, 0); -o-transform:translate3d(0, 100px, 0); -ms-transform:translate3d(0, 100px, 0); -moz-transform:translate3d(0, 100px, 0);}
.fromTop:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:translate3d(0, -100px, 0); -webkit-transform:translate3d(0, -100px, 0); -o-transform:translate3d(0, -100px, 0); -ms-transform:translate3d(0, -100px, 0); -moz-transform:translate3d(0, -100px, 0); }
.fromCenter:not(.done) {opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:scale(0.8) translate3d(0,0,0) ; -webkit-transform:scale(0.8) translate3d(0,0,0); -o-transform:scale(0.8) translate3d(0,0,0); -ms-transform:scale(0.8) translate3d(0,0,0); -moz-transform:scale(0.8) translate3d(0,0,0); }

.animate [class*='ani-'] {transition-property:transform, opacity; -webkit-transition-property:transform, opacity; transition-duration:0.8s; -webkit-transition-duration:0.8s; -o-transition-duration:.8s; -moz-transition-duration:.8s;   }
.animate.fast [class*='ani-'] {transition-duration:0.6s; -webkit-transition-duration:0.6s; -o-transition-duration:.6s; -moz-transition-duration:.6s;}
.animate.slow [class*='ani-'] {transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; -moz-transition-duration:1s;  }

.animate .ani-1 {transition-delay:10ms; -webkit-transition-delay:10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;}
.animate .ani-2 {transition-delay:160ms; -webkit-transition-delay:160ms; -o-transition-delay:160ms; -moz-transition-delay:160ms;}
.animate .ani-3 {transition-delay:320ms; -webkit-transition-delay:320ms; -o-transition-delay:320ms; -moz-transition-delay:320ms;}
.animate .ani-4 {transition-delay:480ms; -webkit-transition-delay:480ms; -o-transition-delay:480ms; -moz-transition-delay:480ms;}
.animate .ani-5 {transition-delay:640ms; -webkit-transition-delay:640ms; -o-transition-delay:640ms; -moz-transition-delay:640ms;}
.animate .ani-6 {transition-delay:800ms; -webkit-transition-delay:800ms; -o-transition-delay:800ms; -moz-transition-delay:800ms;}
.animate .ani-7 {transition-delay:960ms; -webkit-transition-delay:960ms; -o-transition-delay:960ms; -moz-transition-delay:960ms;}
.aniamte .ani-8 {transition-delay:1120ms; -webkit-transition-delay:1120ms; -o-transition-delay:1120ms; -moz-transition-delay:1120ms;}
.aniamte .ani-9 {transition-delay:1280ms; -webkit-transition-delay:1280ms; -o-transition-delay:1280ms; -moz-transition-delay:1280ms; }
.animate .ani-10 {transition-delay:1440ms; -webkit-transition-delay:1440ms; -o-transition-delay:1440ms; -moz-transition-delay:1440ms; }
.animate .ani-11 {transition-delay:1600ms; -webkit-transition-delay:1600ms; -o-transition-delay:1600ms; -moz-transition-delay:1600ms; }
.fast.animate .ani-1 {transition-delay: 10ms;-webkit-transition-delay: 10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;}
.fast.animate .ani-2 {transition-delay: 140ms;-webkit-transition-delay: 140ms; -o-transition-delay:140ms; -moz-transition-delay:140ms;}
.fast.animate .ani-3 {transition-delay: 270ms;-webkit-transition-delay: 270ms; -o-transition-delay:270ms; -moz-transition-delay:270ms;}
.fast.animate .ani-4 {transition-delay: 400ms;-webkit-transition-delay: 400ms;-o-transition-delay:400ms; -moz-transition-delay:400ms;}
.fast.animate .ani-5 {transition-delay: 530ms;-webkit-transition-delay: 530ms;-o-transition-delay:530ms; -moz-transition-delay:530ms;}
.fast.animate .ani-6 {transition-delay: 660ms;-webkit-transition-delay: 660ms;-o-transition-delay:660ms; -moz-transition-delay:660ms;}
.fast.animate .ani-7 {transition-delay: 790ms;-webkit-transition-delay: 790ms;-o-transition-delay:790ms; -moz-transition-delay:790ms;}
.fast.animate .ani-8 {transition-delay: 920ms;-webkit-transition-delay: 920ms;-o-transition-delay:920ms; -moz-transition-delay:920ms;}

.slow.animate .ani-1 {transition-delay: 10ms;	-webkit-transition-delay: 10ms;-o-transition-delay:10ms;-moz-transition-delay:10ms;}
.slow.animate .ani-2 {transition-delay: 210ms;-webkit-transition-delay: 210ms;-o-transition-delay:210ms; -moz-transition-delay:210ms;}
.slow.animate .ani-3 {transition-delay: 420ms;-webkit-transition-delay: 420ms;-o-transition-delay:420ms; -moz-transition-delay:420ms;}
.slow.animate .ani-4 {transition-delay: 630ms;-webkit-transition-delay: 630ms;-o-transition-delay:630ms; -moz-transition-delay:630ms;}
.slow.animate .ani-5 {transition-delay: 840ms;-webkit-transition-delay: 840ms;-o-transition-delay:840ms; -moz-transition-delay:840ms;}
.slow.animate .ani-6 {transition-delay: 1050ms;-webkit-transition-delay: 1050ms;-o-transition-delay:1050ms; -moz-transition-delay:1050ms;}
.slow.animate .ani-7 {transition-delay: 1260ms;-webkit-transition-delay: 1260ms;-o-transition-delay:1260ms; -moz-transition-delay:1260ms;}
.slow.animate .ani-8 {transition-delay: 1470ms;-webkit-transition-delay: 1470ms;-o-transition-delay:1470ms; -moz-transition-delay:1470ms;}

.scale [class*='sc-'] {transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); transition-property:transform; -webkit-transition-property:transform; -o-transition-property:transform; -moz-transition-property:transform; transition-duration:0.8s; -webkit-transition-duration:0.8s; -o-transition-duration:0.8s; -moz-transition-duration:0.8s; }

.scale .fromSc9:not(.done) {transform:scale(0.9); -webkit-transform:scale(0.9); -o-transform:scale(0.9); -ms-transform:scale(0.9); -moz-transform:scale(0.9);}
.scale .fromSc8:not(.done) {transform:scale(0.8); -webkit-transform:scale(0.8); -o-transform:scale(0.8); -ms-transform:scale(0.8); -moz-transform:scale(0.8);}
.scale .fromSc7:not(.done) {transform:scale(0.7); -webkit-transform:scale(0.7); -o-transform:scale(0.7); -ms-transform:scale(0.7); -moz-transform:scale(0.7); }
.scale .fromSc6:not(.done) {transform:scale(0.6); -webkit-transform:scale(0.6); -o-transform:scale(0.6); -ms-transform:scale(0.6); -moz-transform:scale(0.6); }
.scale .fromSc5:not(.done) {transform:scale(0.5); -webkit-transform:scale(0.5); -o-transform:scale(0.5); -ms-transform:scale(0.5); -moz-transform:scale(0.5); }
.scale .fromSc11:not(.done) {transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1);}
.scale .fromSc12:not(.done) {transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); -moz-transform:scale(1.2); }
.scale .fromSc13:not(.done) {transform:scale(1.3); -webkit-transform:scale(1.3); -o-transform:scale(1.3); -ms-transform:scale(1.3); -moz-transform:scale(1.3); }
.scale .fromSc14:not(.done) {transform:scale(1.4); -webkit-transform:scale(1.4); -o-transform:scale(1.4); -ms-transform:scale(1.4); -moz-transform:scale(1.4);}
.scale .fromSc15:not(.done) {transform:scale(1.5); -webkit-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); -moz-transform:scale(1.5); }

.scale .sc-1 {transition-delay:10ms; -webkit-transition-delay:10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;}
.scale .sc-2 {transition-delay:160ms; -webkit-transition-delay:160ms; -o-transition-delay:160ms; -moz-transition-delay:160ms;}
.scale .sc-3 {transition-delay:320ms; -webkit-transition-delay:320ms; -o-transition-delay:320ms; -moz-transition-delay:320ms;}
.scale .sc-4 {transition-delay:480ms; -webkit-transition-delay:480ms; -o-transition-delay:480ms; -moz-transition-delay:480ms;}
.scale .sc-5 {transition-delay:640ms; -webkit-transition-delay:640ms; -o-transition-delay:640ms; -moz-transition-delay:640ms;}
.scale .sc-6 {transition-delay:800ms; -webkit-transition-delay:800ms; -o-transition-delay:800ms; -moz-transition-delay:800ms;}
.scale .sc-7 {transition-delay:960ms; -webkit-transition-delay:960ms; -o-transition-delay:960ms; -moz-transition-delay:960ms;}
.scale .sc-8 {transition-delay:1120ms; -webkit-transition-delay:1120ms; -o-transition-delay:1120ms; -moz-transition-delay:1120ms;}

.fast.scale .sc-1 {transition-delay: 10ms;-webkit-transition-delay: 10ms; -o-transition-delay:10ms; -moz-transition-delay:10ms;}
.fast.scale .sc-2 {transition-delay: 140ms;-webkit-transition-delay: 140ms; -o-transition-delay:140ms; -moz-transition-delay:140ms;}
.fast.scale .sc-3 {transition-delay: 270ms;-webkit-transition-delay: 270ms; -o-transition-delay:270ms; -moz-transition-delay:270ms;}
.fast.scale .sc-4 {transition-delay: 400ms;-webkit-transition-delay: 400ms;-o-transition-delay:400ms; -moz-transition-delay:400ms;}
.fast.scale .sc-5 {transition-delay: 530ms;-webkit-transition-delay: 530ms;-o-transition-delay:530ms; -moz-transition-delay:530ms;}
.fast.scale .sc-6 {transition-delay: 660ms;-webkit-transition-delay: 660ms;-o-transition-delay:660ms; -moz-transition-delay:660ms;}
.fast.scale .sc-7 {transition-delay: 790ms;-webkit-transition-delay: 790ms;-o-transition-delay:790ms; -moz-transition-delay:790ms;}
.fast.scale .sc-8 {transition-delay: 920ms;-webkit-transition-delay: 920ms;-o-transition-delay:920ms; -moz-transition-delay:920ms;}


.slow.scale .sc-1 {transition-delay: 10ms;	-webkit-transition-delay: 10ms;-o-transition-delay:10ms;-moz-transition-delay:10ms;}
.slow.scale .sc-2 {transition-delay: 210ms;-webkit-transition-delay: 210ms;-o-transition-delay:210ms; -moz-transition-delay:210ms;}
.slow.scale .sc-3 {transition-delay: 420ms;-webkit-transition-delay: 420ms;-o-transition-delay:420ms; -moz-transition-delay:420ms;}
.slow.scale .sc-4 {transition-delay: 630ms;-webkit-transition-delay: 630ms;-o-transition-delay:630ms; -moz-transition-delay:630ms;}
.slow.scale .sc-5 {transition-delay: 840ms;-webkit-transition-delay: 840ms;-o-transition-delay:840ms; -moz-transition-delay:840ms;}
.slow.scale .sc-6 {transition-delay: 1050ms;-webkit-transition-delay: 1050ms;-o-transition-delay:1050ms; -moz-transition-delay:1050ms;}
.slow.scale .sc-7 {transition-delay: 1260ms;-webkit-transition-delay: 1260ms;-o-transition-delay:1260ms; -moz-transition-delay:1260ms;}
.slow.scale .sc-8 {transition-delay: 1470ms;-webkit-transition-delay: 1470ms;-o-transition-delay:1470ms; -moz-transition-delay:1470ms;}


.vertical-i {animation:vb 1s infinite;}

@keyframes vb {
	0%{
		bottom: 0;
	}
	50% {
		bottom:10px;
	}
	100% {
		bottom:0px; 
	}
}

@keyframes vt{
	0%{
		top: 0;
	}
	50%{
		top:10px;
	}
	100%{
		top:0;
	}
}

/* ==================================================
                    Utility
================================================== */

/***** Flex *****/

/* align-items: center; justify-content: center */
.flex-center { display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center;  align-items: center; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center;}
/* align-items: center; justify-content: start */
.flex-center-start { display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: flex-start; -ms-flex-pack: justify; justify-content: flex-start;}
/* align-items: center; justify-content: end */
.flex-center-end { display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -moz-justify-content: flex-end; -ms-flex-pack: justify;  justify-content: flex-end}
/* align-items: center; justify-content: between */
.flex-center-between {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center; align-items: center;}

/* align-items: start; justify-content: center */
.flex-start-center {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; -webkit-box-align: flex-start;  -moz-align-items: flex-start;  -ms-flex-align: flex-start; align-items: flex-start;}
/* align-items: start; justify-content: start */
.flex-start-start {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: start; -ms-flex-pack: justify; justify-content: start; -webkit-box-align: flex-start;  -moz-align-items: flex-start;  -ms-flex-align: flex-start; align-items: flex-start;}

/* align-items: end; justify-content: start */
.flex-end-start {display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -moz-justify-content: start; -ms-flex-pack: justify; justify-content: start; -webkit-box-align: flex-end;  -moz-align-items: flex-end;  -ms-flex-align: flex-end; align-items: flex-end;}


.flex-box { display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex;}
.flex1 {flex: 1;}

.justify-content-center { -webkit-box-pack: justify; -moz-justify-content: center;  -ms-flex-pack: justify; justify-content: center;}
.justify-content-start { -webkit-box-pack: justify; -moz-justify-content: flex-start;  -ms-flex-pack: justify;  justify-content: flex-start;}
.justify-content-end { -webkit-box-pack: justify; -moz-justify-content: flex-end;  -ms-flex-pack: justify;  justify-content: flex-end }
.justify-content-between { -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.justify-content-around { -webkit-box-pack: justify; -moz-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around;}
.justify-content-evenly { -webkit-box-pack: justify; -moz-justify-content: space-evenly; -ms-flex-pack: justify; justify-content: space-evenly;}

.align-items-center { -webkit-box-align: center;  -moz-align-items: center;  -ms-flex-align: center;  align-items: center; }
.align-items-stretch { -webkit-box-align: stretch;  -moz-align-items: stretch;  -ms-flex-align: stretch;  align-items: stretch; }
.align-items-start { -webkit-box-align: start;  -moz-align-items: flex-start;  -ms-flex-align: start;  align-items: flex-start; }
.align-items-end { -webkit-box-align: end; -moz-align-items: flex-end;  -ms-flex-align: end;  align-items: flex-end; }
.align-items-baseline { -webkit-box-align: baseline;  -moz-align-items: baseline;  -ms-flex-align: baseline; align-items: baseline; }

.flex-column { -webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;}
.flex-row { -webkit-box-orient: horizontal;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row;} 
.flex-column-reverse { -webkit-box-orient: vertical;  -webkit-box-direction: reverse;  -moz-flex-direction: column-reverse;  -ms-flex-direction: column-reverse;  flex-direction: column-reverse;}
.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse;  -moz-flex-direction: row-reverse;  -ms-flex-direction: row-reverse;  flex-direction: row-reverse;}

.flex-nowrap {-webkit-box-lines: multiple; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap;  flex-wrap: nowrap; } 
.flex-wrap {-webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap;  flex-wrap: wrap; } 

/***** Grid *****/
.grid-box {display: -webkit-box; /* 구형 Safari 브라우저 */ display: -ms-grid; /* 구형 Internet Explorer */ display: grid; /* 최신 브라우저 */}
.grid-box.col2 { grid-template-columns: repeat(2, 1fr); }
.grid-box.col3 { grid-template-columns: repeat(3, 1fr); }
.grid-box.col4 { grid-template-columns: repeat(4, 1fr); }
.grid-box.col5 { grid-template-columns: repeat(5, 1fr); }
.grid-box.col6 { grid-template-columns: repeat(6, 1fr); }
.grid-box.col7 { grid-template-columns: repeat(7, 1fr); }
.grid-box.col8 { grid-template-columns: repeat(8, 1fr); }

.grid-c-gap-10 { grid-column-gap: 10px; }
.grid-c-gap-20 { grid-column-gap: 20px; }
.grid-c-gap-30 { grid-column-gap: 30px; }
.grid-c-gap-40 { grid-column-gap: 40px; }
.grid-c-gap-50 { grid-column-gap: 50px; }
.grid-c-gap-60 { grid-column-gap: 60px; }
.grid-c-gap-100 { grid-column-gap: 100px; }

.grid-r-gap-10 { grid-row-gap: 10px; }
.grid-r-gap-16 { grid-row-gap: 16px; }
.grid-r-gap-20 { grid-row-gap: 20px; }
.grid-r-gap-30 { grid-row-gap: 30px; }
.grid-r-gap-32 { grid-row-gap: 32px; }
.grid-r-gap-40 { grid-row-gap: 40px; }
.grid-r-gap-50 { grid-row-gap: 50px; }
.grid-r-gap-60 { grid-row-gap: 60px; }

.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
.order-6 { order: 6 !important; }
.order-7 { order: 7 !important; }
.order-8 { order: 8 !important; }
.order-9 { order: 9 !important; }
.order-10 { order: 10 !important; }

.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; }
.gap-60 { gap: 60px; }
.gap-70 { gap: 70px; }
.gap-80 { gap: 80px; }
.gap-90 { gap: 90px; }
.gap-100 { gap: 100px; }
.gap-110 { gap: 110px; }
.gap-120 { gap: 120px; }

.row { display: flex; flex-wrap: wrap;}
.row>* { flex-shrink: 0; width: 100%;  max-width: 100%;}
.row-cols-auto>* { flex: 0 0 auto; width: auto}
.row-cols-1>* { flex: 0 0 auto;  width: 100% !important;}
.row-cols-2>* { flex: 0 0 auto;  width: 50% !important;}
.row-cols-3>* { flex: 0 0 auto; width: 33.3333333333% !important;}
.row-cols-4>* {  flex: 0 0 auto;  width: 25% !important;}
.row-cols-5>* { flex: 0 0 auto;  width: 20% !important;}
.row-cols-6>* {  flex: 0 0 auto;  width: 16.6666666667% !important;}