@charset "UTF-8";
/* --------------------------------------------------------------------------------------------
## Box Sizing
-------------------------------------------------------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* --------------------------------------------------------------------------------------------
## Reset
-------------------------------------------------------------------------------------------- */
html,body,h1,h2,h3,h4,h5,h6,p,ul,dl,ol,dt,dd,li,article,aside,
details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
}
html,body {
min-height: 100vh;
height: 100%;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
ul,
ol,
dl {
list-style-type: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a,
img,
input,
textarea,
select,
button {
text-decoration: none;
background: transparent;
border: 0;
border-radius: 0;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
a,
input,
select,
textarea,
button {
font-size: 1em;
background-color: transparent;
}
button,
select {
text-transform: none
}
select,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
form {
margin: 0;
padding: 0;
}
i,
em,
address {
font-style: normal;
}
caption,
legend,
.soundonly,
.sound_only {
position: absolute;
display: block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
}
img,
video {
max-width: 100%;
}
iframe {
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
}
::-moz-selection,
::selection {
color: #000;
background: #c9af6b;
}
.placeholder {
color: #999;
}
/* --------------------------------------------------------------------------------------------
## DISPLAY
-------------------------------------------------------------------------------------------- */
/* Position OPT */
.hide_overflow {overflow: hidden !important;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.static {position: static;}
.sticky {position: sticky;}
/* Display Show & Hide */
.w1280s,.w1200s,.w1152s,
.w1120s,.w1040s,.w1024s,
.w960s, .w880s, .w800s,.w768s,
.w736s, .w720s, .w667s,.w640s,
.w568s, .w560s, .w480s,.w428s,
.w414s, .w400s, .w375s,.w360s,
.w320s, .w280s {
display: none !important;
}
.mobile_only,
.mobile .desktop_only {
display: none;
}
.mobile .mobile_only {
display: block;
}
/* ------------------------------------------------------------------------------------------------------------------
## MARGIN
------------------------------------------------------------------------------------------------------------------ */
/* -- TOP & LEFT -- */
.nomt { margin-top: 0 !important; } .noml { margin-left: 0 !important; }
.mt5 { margin-top: 5px !important; } .ml5 { margin-left: 5px !important; }
.mt10 { margin-top: 10px !important; } .ml10 { margin-left: 10px !important; }
.mt11 { margin-top: 11px !important; } .ml11 { margin-left: 11px !important; }
.mt12 { margin-top: 12px !important; } .ml12 { margin-left: 12px !important; }
.mt13 { margin-top: 13px !important; } .ml13 { margin-left: 13px !important; }
.mt14 { margin-top: 14px !important; } .ml14 { margin-left: 14px !important; }
.mt15 { margin-top: 15px !important; } .ml15 { margin-left: 15px !important; }
.mt16 { margin-top: 16px !important; } .ml16 { margin-left: 16px !important; }
.mt17 { margin-top: 17px !important; } .ml17 { margin-left: 17px !important; }
.mt18 { margin-top: 18px !important; } .ml18 { margin-left: 18px !important; }
.mt19 { margin-top: 19px !important; } .ml19 { margin-left: 19px !important; }
.mt20 { margin-top: 20px !important; } .ml20 { margin-left: 20px !important; }
.mt21 { margin-top: 21px !important; } .ml21 { margin-left: 21px !important; }
.mt22 { margin-top: 22px !important; } .ml22 { margin-left: 22px !important; }
.mt23 { margin-top: 23px !important; } .ml23 { margin-left: 23px !important; }
.mt24 { margin-top: 24px !important; } .ml24 { margin-left: 24px !important; }
.mt25 { margin-top: 25px !important; } .ml25 { margin-left: 25px !important; }
.mt26 { margin-top: 26px !important; } .ml26 { margin-left: 26px !important; }
.mt27 { margin-top: 27px !important; } .ml27 { margin-left: 27px !important; }
.mt28 { margin-top: 28px !important; } .ml28 { margin-left: 28px !important; }
.mt29 { margin-top: 29px !important; } .ml29 { margin-left: 29px !important; }
.mt30 { margin-top: 30px !important; } .ml30 { margin-left: 30px !important; }
.mt35 { margin-top: 35px !important; } .ml35 { margin-left: 35px !important; }
.mt40 { margin-top: 40px !important; } .ml40 { margin-left: 40px !important; }
.mt45 { margin-top: 45px !important; } .ml45 { margin-left: 45px !important; }
.mt50 { margin-top: 50px !important; } .ml50 { margin-left: 50px !important; }
.mt55 { margin-top: 55px !important; } .ml55 { margin-left: 55px !important; }
.mt60 { margin-top: 60px !important; } .ml60 { margin-left: 60px !important; }
.mt65 { margin-top: 65px !important; } .ml65 { margin-left: 65px !important; }
.mt70 { margin-top: 70px !important; } .ml70 { margin-left: 70px !important; }
.mt75 { margin-top: 75px !important; } .ml75 { margin-left: 75px !important; }
.mt80 { margin-top: 80px !important; } .ml80 { margin-left: 80px !important; }
.mt85 { margin-top: 85px !important; } .ml85 { margin-left: 85px !important; }
.mt90 { margin-top: 90px !important; } .ml90 { margin-left: 90px !important; }
.mt95 { margin-top: 95px !important; } .ml95 { margin-left: 95px !important; }
.mt100 { margin-top: 100px !important; } .ml100 { margin-left: 100px !important; }
.mt105 { margin-top: 105px !important; } .ml105 { margin-left: 105px !important; }
.mt110 { margin-top: 110px !important; } .ml110 { margin-left: 110px !important; }
.mt115 { margin-top: 115px !important; } .ml115 { margin-left: 115px !important; }
.mt120 { margin-top: 120px !important; } .ml120 { margin-left: 120px !important; }
.mt125 { margin-top: 125px !important; } .ml125 { margin-left: 125px !important; }
.mt130 { margin-top: 130px !important; } .ml130 { margin-left: 130px !important; }
.mt135 { margin-top: 135px !important; } .ml135 { margin-left: 135px !important; }
.mt140 { margin-top: 140px !important; } .ml140 { margin-left: 140px !important; }
.mt145 { margin-top: 145px !important; } .ml145 { margin-left: 145px !important; }
.mt150 { margin-top: 150px !important; } .ml150 { margin-left: 150px !important; }
.mt155 { margin-top: 155px !important; } .ml155 { margin-left: 155px !important; }
.mt160 { margin-top: 160px !important; } .ml160 { margin-left: 160px !important; }
.mt165 { margin-top: 165px !important; } .ml165 { margin-left: 165px !important; }
.mt170 { margin-top: 170px !important; } .ml170 { margin-left: 170px !important; }
.mt175 { margin-top: 175px !important; } .ml175 { margin-left: 175px !important; }
.mt180 { margin-top: 180px !important; } .ml180 { margin-left: 180px !important; }
.mt185 { margin-top: 185px !important; } .ml185 { margin-left: 185px !important; }
.mt190 { margin-top: 190px !important; } .ml190 { margin-left: 190px !important; }
.mt195 { margin-top: 195px !important; } .ml195 { margin-left: 195px !important; }
.mt200 { margin-top: 200px !important; } .ml200 { margin-left: 200px !important; }
/* -- RIGHT & BOTTOM -- */
.nomr { margin-right: 0 !important; } .nomb { margin-bottom: 0 !important; }
.mr5 { margin-right: 5px !important; } .mb5 { margin-bottom: 5px !important; }
.mr10 { margin-right: 10px !important; } .mb10 { margin-bottom: 10px !important; }
.mr11 { margin-right: 11px !important; } .mb11 { margin-bottom: 11px !important; }
.mr12 { margin-right: 12px !important; } .mb12 { margin-bottom: 12px !important; }
.mr13 { margin-right: 13px !important; } .mb13 { margin-bottom: 13px !important; }
.mr14 { margin-right: 14px !important; } .mb14 { margin-bottom: 14px !important; }
.mr15 { margin-right: 15px !important; } .mb15 { margin-bottom: 15px !important; }
.mr16 { margin-right: 16px !important; } .mb16 { margin-bottom: 16px !important; }
.mr17 { margin-right: 17px !important; } .mb17 { margin-bottom: 17px !important; }
.mr18 { margin-right: 18px !important; } .mb18 { margin-bottom: 18px !important; }
.mr19 { margin-right: 19px !important; } .mb19 { margin-bottom: 19px !important; }
.mr20 { margin-right: 20px !important; } .mb20 { margin-bottom: 20px !important; }
.mr21 { margin-right: 21px !important; } .mb21 { margin-bottom: 21px !important; }
.mr22 { margin-right: 22px !important; } .mb22 { margin-bottom: 22px !important; }
.mr23 { margin-right: 23px !important; } .mb23 { margin-bottom: 23px !important; }
.mr24 { margin-right: 24px !important; } .mb24 { margin-bottom: 24px !important; }
.mr25 { margin-right: 25px !important; } .mb25 { margin-bottom: 25px !important; }
.mr26 { margin-right: 26px !important; } .mb26 { margin-bottom: 26px !important; }
.mr27 { margin-right: 27px !important; } .mb27 { margin-bottom: 27px !important; }
.mr28 { margin-right: 28px !important; } .mb28 { margin-bottom: 28px !important; }
.mr29 { margin-right: 29px !important; } .mb29 { margin-bottom: 29px !important; }
.mr30 { margin-right: 30px !important; } .mb30 { margin-bottom: 30px !important; }
.mr35 { margin-right: 35px !important; } .mb35 { margin-bottom: 35px !important; }
.mr40 { margin-right: 40px !important; } .mb40 { margin-bottom: 40px !important; }
.mr45 { margin-right: 45px !important; } .mb45 { margin-bottom: 45px !important; }
.mr50 { margin-right: 50px !important; } .mb50 { margin-bottom: 50px !important; }
.mr55 { margin-right: 55px !important; } .mb55 { margin-bottom: 55px !important; }
.mr60 { margin-right: 60px !important; } .mb60 { margin-bottom: 60px !important; }
.mr65 { margin-right: 65px !important; } .mb65 { margin-bottom: 65px !important; }
.mr70 { margin-right: 70px !important; } .mb70 { margin-bottom: 70px !important; }
.mr75 { margin-right: 75px !important; } .mb75 { margin-bottom: 75px !important; }
.mr80 { margin-right: 80px !important; } .mb80 { margin-bottom: 80px !important; }
.mr85 { margin-right: 85px !important; } .mb85 { margin-bottom: 85px !important; }
.mr90 { margin-right: 90px !important; } .mb90 { margin-bottom: 90px !important; }
.mr95 { margin-right: 95px !important; } .mb95 { margin-bottom: 95px !important; }
.mr100 { margin-right: 100px !important; } .mb100 { margin-bottom: 100px !important; }
.mr105 { margin-right: 105px !important; } .mb105 { margin-bottom: 105px !important; }
.mr110 { margin-right: 110px !important; } .mb110 { margin-bottom: 110px !important; }
.mr115 { margin-right: 115px !important; } .mb115 { margin-bottom: 115px !important; }
.mr120 { margin-right: 120px !important; } .mb120 { margin-bottom: 120px !important; }
.mr125 { margin-right: 125px !important; } .mb125 { margin-bottom: 125px !important; }
.mr130 { margin-right: 130px !important; } .mb130 { margin-bottom: 130px !important; }
.mr135 { margin-right: 135px !important; } .mb135 { margin-bottom: 135px !important; }
.mr140 { margin-right: 140px !important; } .mb140 { margin-bottom: 140px !important; }
.mr145 { margin-right: 145px !important; } .mb145 { margin-bottom: 145px !important; }
.mr150 { margin-right: 150px !important; } .mb150 { margin-bottom: 150px !important; }
.mr155 { margin-right: 155px !important; } .mb155 { margin-bottom: 155px !important; }
.mr160 { margin-right: 160px !important; } .mb160 { margin-bottom: 160px !important; }
.mr165 { margin-right: 165px !important; } .mb165 { margin-bottom: 165px !important; }
.mr170 { margin-right: 170px !important; } .mb170 { margin-bottom: 170px !important; }
.mr175 { margin-right: 175px !important; } .mb175 { margin-bottom: 175px !important; }
.mr180 { margin-right: 180px !important; } .mb180 { margin-bottom: 180px !important; }
.mr185 { margin-right: 185px !important; } .mb185 { margin-bottom: 185px !important; }
.mr190 { margin-right: 190px !important; } .mb190 { margin-bottom: 190px !important; }
.mr195 { margin-right: 195px !important; } .mb195 { margin-bottom: 195px !important; }
.mr200 { margin-right: 200px !important; } .mb200 { margin-bottom: 200px !important; }
/* ------------------------------------------------------------------------------------------------------------------
## PADDING
------------------------------------------------------------------------------------------------------------------ */
/* -- TOP & LEFT -- */
.nopt { padding-top: 0 !important; } .nopl { padding-left: 0 !important; }
.pt5 { padding-top: 5px !important; } .pl5 { padding-left: 5px !important; }
.pt10 { padding-top: 10px !important; } .pl10 { padding-left: 10px !important; }
.pt11 { padding-top: 11px !important; } .pl11 { padding-left: 11px !important; }
.pt12 { padding-top: 12px !important; } .pl12 { padding-left: 12px !important; }
.pt13 { padding-top: 13px !important; } .pl13 { padding-left: 13px !important; }
.pt14 { padding-top: 14px !important; } .pl14 { padding-left: 14px !important; }
.pt15 { padding-top: 15px !important; } .pl15 { padding-left: 15px !important; }
.pt16 { padding-top: 16px !important; } .pl16 { padding-left: 16px !important; }
.pt17 { padding-top: 17px !important; } .pl17 { padding-left: 17px !important; }
.pt18 { padding-top: 18px !important; } .pl18 { padding-left: 18px !important; }
.pt19 { padding-top: 19px !important; } .pl19 { padding-left: 19px !important; }
.pt20 { padding-top: 20px !important; } .pl20 { padding-left: 20px !important; }
.pt21 { padding-top: 21px !important; } .pl21 { padding-left: 21px !important; }
.pt22 { padding-top: 22px !important; } .pl22 { padding-left: 22px !important; }
.pt23 { padding-top: 23px !important; } .pl23 { padding-left: 23px !important; }
.pt24 { padding-top: 24px !important; } .pl24 { padding-left: 24px !important; }
.pt25 { padding-top: 25px !important; } .pl25 { padding-left: 25px !important; }
.pt26 { padding-top: 26px !important; } .pl26 { padding-left: 26px !important; }
.pt27 { padding-top: 27px !important; } .pl27 { padding-left: 27px !important; }
.pt28 { padding-top: 28px !important; } .pl28 { padding-left: 28px !important; }
.pt29 { padding-top: 29px !important; } .pl29 { padding-left: 29px !important; }
.pt30 { padding-top: 30px !important; } .pl30 { padding-left: 30px !important; }
.pt35 { padding-top: 35px !important; } .pl35 { padding-left: 35px !important; }
.pt40 { padding-top: 40px !important; } .pl40 { padding-left: 40px !important; }
.pt45 { padding-top: 45px !important; } .pl45 { padding-left: 45px !important; }
.pt50 { padding-top: 50px !important; } .pl50 { padding-left: 50px !important; }
.pt55 { padding-top: 55px !important; } .pl55 { padding-left: 55px !important; }
.pt60 { padding-top: 60px !important; } .pl60 { padding-left: 60px !important; }
.pt65 { padding-top: 65px !important; } .pl65 { padding-left: 65px !important; }
.pt70 { padding-top: 70px !important; } .pl70 { padding-left: 70px !important; }
.pt75 { padding-top: 75px !important; } .pl75 { padding-left: 75px !important; }
.pt80 { padding-top: 80px !important; } .pl80 { padding-left: 80px !important; }
.pt85 { padding-top: 85px !important; } .pl85 { padding-left: 85px !important; }
.pt90 { padding-top: 90px !important; } .pl90 { padding-left: 90px !important; }
.pt95 { padding-top: 95px !important; } .pl95 { padding-left: 95px !important; }
.pt100 { padding-top: 100px !important; } .pl100 { padding-left: 100px !important; }
.pt105 { padding-top: 105px !important; } .pl105 { padding-left: 105px !important; }
.pt110 { padding-top: 110px !important; } .pl110 { padding-left: 110px !important; }
.pt115 { padding-top: 115px !important; } .pl115 { padding-left: 115px !important; }
.pt120 { padding-top: 120px !important; } .pl120 { padding-left: 120px !important; }
.pt125 { padding-top: 125px !important; } .pl125 { padding-left: 125px !important; }
.pt130 { padding-top: 130px !important; } .pl130 { padding-left: 130px !important; }
.pt135 { padding-top: 135px !important; } .pl135 { padding-left: 135px !important; }
.pt140 { padding-top: 140px !important; } .pl140 { padding-left: 140px !important; }
.pt145 { padding-top: 145px !important; } .pl145 { padding-left: 145px !important; }
.pt150 { padding-top: 150px !important; } .pl150 { padding-left: 150px !important; }
.pt155 { padding-top: 155px !important; } .pl155 { padding-left: 155px !important; }
.pt160 { padding-top: 160px !important; } .pl160 { padding-left: 160px !important; }
.pt165 { padding-top: 165px !important; } .pl165 { padding-left: 165px !important; }
.pt170 { padding-top: 170px !important; } .pl170 { padding-left: 170px !important; }
.pt175 { padding-top: 175px !important; } .pl175 { padding-left: 175px !important; }
.pt180 { padding-top: 180px !important; } .pl180 { padding-left: 180px !important; }
.pt185 { padding-top: 185px !important; } .pl185 { padding-left: 185px !important; }
.pt190 { padding-top: 190px !important; } .pl190 { padding-left: 190px !important; }
.pt195 { padding-top: 195px !important; } .pl195 { padding-left: 195px !important; }
.pt200 { padding-top: 200px !important; } .pl200 { padding-left: 200px !important; }
/* -- RIGHT & BOTTOM -- */
.nopr { padding-right: 0 !important; } .nopb { padding-bottom: 0 !important; }
.pr5 { padding-right: 5px !important; } .pb5 { padding-bottom: 5px !important; }
.pr10 { padding-right: 10px !important; } .pb10 { padding-bottom: 10px !important; }
.pr11 { padding-right: 11px !important; } .pb11 { padding-bottom: 11px !important; }
.pr12 { padding-right: 12px !important; } .pb12 { padding-bottom: 12px !important; }
.pr13 { padding-right: 13px !important; } .pb13 { padding-bottom: 13px !important; }
.pr14 { padding-right: 14px !important; } .pb14 { padding-bottom: 14px !important; }
.pr15 { padding-right: 15px !important; } .pb15 { padding-bottom: 15px !important; }
.pr16 { padding-right: 16px !important; } .pb16 { padding-bottom: 16px !important; }
.pr17 { padding-right: 17px !important; } .pb17 { padding-bottom: 17px !important; }
.pr18 { padding-right: 18px !important; } .pb18 { padding-bottom: 18px !important; }
.pr19 { padding-right: 19px !important; } .pb19 { padding-bottom: 19px !important; }
.pr20 { padding-right: 20px !important; } .pb20 { padding-bottom: 20px !important; }
.pr21 { padding-right: 21px !important; } .pb21 { padding-bottom: 21px !important; }
.pr22 { padding-right: 22px !important; } .pb22 { padding-bottom: 22px !important; }
.pr23 { padding-right: 23px !important; } .pb23 { padding-bottom: 23px !important; }
.pr24 { padding-right: 24px !important; } .pb24 { padding-bottom: 24px !important; }
.pr25 { padding-right: 25px !important; } .pb25 { padding-bottom: 25px !important; }
.pr26 { padding-right: 26px !important; } .pb26 { padding-bottom: 26px !important; }
.pr27 { padding-right: 27px !important; } .pb27 { padding-bottom: 27px !important; }
.pr28 { padding-right: 28px !important; } .pb28 { padding-bottom: 28px !important; }
.pr29 { padding-right: 29px !important; } .pb29 { padding-bottom: 29px !important; }
.pr30 { padding-right: 30px !important; } .pb30 { padding-bottom: 30px !important; }
.pr35 { padding-right: 35px !important; } .pb35 { padding-bottom: 35px !important; }
.pr40 { padding-right: 40px !important; } .pb40 { padding-bottom: 40px !important; }
.pr45 { padding-right: 45px !important; } .pb45 { padding-bottom: 45px !important; }
.pr50 { padding-right: 50px !important; } .pb50 { padding-bottom: 50px !important; }
.pr55 { padding-right: 55px !important; } .pb55 { padding-bottom: 55px !important; }
.pr60 { padding-right: 60px !important; } .pb60 { padding-bottom: 60px !important; }
.pr65 { padding-right: 65px !important; } .pb65 { padding-bottom: 65px !important; }
.pr70 { padding-right: 70px !important; } .pb70 { padding-bottom: 70px !important; }
.pr75 { padding-right: 75px !important; } .pb75 { padding-bottom: 75px !important; }
.pr80 { padding-right: 80px !important; } .pb80 { padding-bottom: 80px !important; }
.pr85 { padding-right: 85px !important; } .pb85 { padding-bottom: 85px !important; }
.pr90 { padding-right: 90px !important; } .pb90 { padding-bottom: 90px !important; }
.pr95 { padding-right: 95px !important; } .pb95 { padding-bottom: 95px !important; }
.pr100 { padding-right: 100px !important; } .pb100 { padding-bottom: 100px !important; }
.pr105 { padding-right: 105px !important; } .pb105 { padding-bottom: 105px !important; }
.pr110 { padding-right: 110px !important; } .pb110 { padding-bottom: 110px !important; }
.pr115 { padding-right: 115px !important; } .pb115 { padding-bottom: 115px !important; }
.pr120 { padding-right: 120px !important; } .pb120 { padding-bottom: 120px !important; }
.pr125 { padding-right: 125px !important; } .pb125 { padding-bottom: 125px !important; }
.pr130 { padding-right: 130px !important; } .pb130 { padding-bottom: 130px !important; }
.pr135 { padding-right: 135px !important; } .pb135 { padding-bottom: 135px !important; }
.pr140 { padding-right: 140px !important; } .pb140 { padding-bottom: 140px !important; }
.pr145 { padding-right: 145px !important; } .pb145 { padding-bottom: 145px !important; }
.pr150 { padding-right: 150px !important; } .pb150 { padding-bottom: 150px !important; }
.pr155 { padding-right: 155px !important; } .pb155 { padding-bottom: 155px !important; }
.pr160 { padding-right: 160px !important; } .pb160 { padding-bottom: 160px !important; }
.pr165 { padding-right: 165px !important; } .pb165 { padding-bottom: 165px !important; }
.pr170 { padding-right: 170px !important; } .pb170 { padding-bottom: 170px !important; }
.pr175 { padding-right: 175px !important; } .pb175 { padding-bottom: 175px !important; }
.pr180 { padding-right: 180px !important; } .pb180 { padding-bottom: 180px !important; }
.pr185 { padding-right: 185px !important; } .pb185 { padding-bottom: 185px !important; }
.pr190 { padding-right: 190px !important; } .pb190 { padding-bottom: 190px !important; }
.pr195 { padding-right: 195px !important; } .pb195 { padding-bottom: 195px !important; }
.pr200 { padding-right: 200px !important; } .pb200 { padding-bottom: 200px !important; }
.pa5 { padding: 5px !important; } .pa10 { padding: 10px !important; }
.pa15 { padding: 15px !important; } .pa20 { padding: 20px !important; }
.pa25 { padding: 25px !important; } .pa30 { padding: 30px !important; }
.pa35 { padding: 35px !important; } .pa40 { padding: 40px !important; }
.pa45 { padding: 45px !important; } .pa50 { padding: 50px !important; }
.pa55 { padding: 55px !important; } .pa60 { padding: 60px !important; }
.pa65 { padding: 65px !important; } .pa70 { padding: 70px !important; }
.pa75 { padding: 75px !important; } .pa80 { padding: 80px !important; }
.pa85 { padding: 85px !important; } .pa90 { padding: 90px !important; }
.pa95 { padding: 95px !important; } .pa100 { padding: 100px !important; }
.pa105 { padding: 105px !important; } .pa110 { padding: 110px !important; }
.pa115 { padding: 115px !important; } .pa120 { padding: 120px !important; }
.pa125 { padding: 125px !important; } .pa130 { padding: 130px !important; }
.pa135 { padding: 135px !important; } .pa140 { padding: 140px !important; }
.pa145 { padding: 145px !important; } .pa150 { padding: 150px !important; }
.pa155 { padding: 155px !important; } .pa160 { padding: 160px !important; }
.pa165 { padding: 165px !important; } .pa170 { padding: 170px !important; }
.pa175 { padding: 175px !important; } .pa180 { padding: 180px !important; }
.pa185 { padding: 185px !important; } .pa190 { padding: 190px !important; }
.pa195 { padding: 195px !important; } .pa200 { padding: 100px !important; }
/* ------------------------------------------------------------------------------------------------------------------
## Fonts
------------------------------------------------------------------------------------------------------------------ */
/* -- FONT SIZE -- */
.fsem01 { font-size: 0.0625em; } /* 1px */
.fsem02 { font-size: 0.125em; } /* 2px */
.fsem03 { font-size: 0.1875em; } /* 3px */
.fsem04 { font-size: 0.25em; } /* 4px */
.fsem05 { font-size: 0.3125em; } /* 5px */
.fsem06 { font-size: 0.375em; } /* 6px */
.fsem07 { font-size: 0.4375em; } /* 7px */
.fsem08 { font-size: 0.5em; } /* 8px */
.fsem09 { font-size: 0.5625em; } /* 9px */
.fsem10 { font-size: 0.625em; } /* 10px */
.fsem11 { font-size: 0.6875em; } /* 11px */
.fsem12 { font-size: 0.75em; } /* 12px */
.fsem13 { font-size: 0.8125em; } /* 13px */
.fsem14 { font-size: 0.875em; } /* 14px */
.fsem15 { font-size: 0.9375em; } /* 15px */
.fsem16 { font-size: 1em; } /* 16px */
.fsem17 { font-size: 1.0625em; } /* 17px */
.fsem18 { font-size: 1.125em; } /* 18px */
.fsem19 { font-size: 1.1875em; } /* 19px */
.fsem20 { font-size: 1.25em; } /* 20px */
.fsem21 { font-size: 1.3125em; } /* 21px */
.fsem22 { font-size: 1.375em; } /* 22px */
.fsem23 { font-size: 1.4375em; } /* 23px */
.fsem24 { font-size: 1.5em; } /* 24px */
.fsem25 { font-size: 1.5625em; } /* 25px */
.fsem26 { font-size: 1.625em; } /* 26px */
.fsem27 { font-size: 1.6875em; } /* 27px */
.fsem28 { font-size: 1.75em; } /* 28px */
.fsem29 { font-size: 1.8125em; } /* 29px */
.fsem30 { font-size: 1.875em; } /* 30px */
.fsem31 { font-size: 1.9375em; } /* 31px */
.fsem32 { font-size: 2em; } /* 32px */
.fsem33 { font-size: 2.0625em; } /* 33px */
.fsem34 { font-size: 2.125em; } /* 34px */
.fsem35 { font-size: 2.1875em; } /* 35px */
.fsem36 { font-size: 2.25em; } /* 36px */
.fsem37 { font-size: 2.3125em; } /* 37px */
.fsem38 { font-size: 2.375em; } /* 38px */
.fsem39 { font-size: 2.4375em; } /* 39px */
.fsem40 { font-size: 2.5em; } /* 40px */
.fsem41 { font-size: 2.5625em; } /* 41px */
.fsem42 { font-size: 2.625em; } /* 42px */
.fsem43 { font-size: 2.6875em; } /* 43px */
.fsem44 { font-size: 2.75em; } /* 44px */
.fsem45 { font-size: 2.8125em; } /* 45px */
.fsem46 { font-size: 2.875em; } /* 46px */
.fsem47 { font-size: 2.9375em; } /* 47px */
.fsem48 { font-size: 3em; } /* 48px */
.fsem49 { font-size: 3.0625em; } /* 49px */
.fsem50 { font-size: 3.125em; } /* 50px */
.fsem51 { font-size: 3.1875em; } /* 51px */
.fsem52 { font-size: 3.25em; } /* 52px */
.fsem53 { font-size: 3.3125em; } /* 53px */
.fsem54 { font-size: 3.375em; } /* 54px */
.fsem55 { font-size: 3.4375em; } /* 55px */
.fsem56 { font-size: 3.5em; } /* 56px */
.fsem57 { font-size: 3.5625em; } /* 57px */
.fsem58 { font-size: 3.625em; } /* 58px */
.fsem59 { font-size: 3.6875em; } /* 59px */
.fsem60 { font-size: 3.75em; } /* 60px */
.fsem61 { font-size: 3.8125em; } /* 61px */
.fsem62 { font-size: 3.875em; } /* 62px */
.fsem63 { font-size: 3.9375em; } /* 63px */
.fsem64 { font-size: 4em; } /* 64px */
.fsem65 { font-size: 4.0625em; } /* 65px */
.fsem66 { font-size: 4.125em; } /* 66px */
.fsem67 { font-size: 4.1875em; } /* 67px */
.fsem68 { font-size: 4.25em; } /* 68px */
.fsem69 { font-size: 4.3125em; } /* 69px */
.fsem70 { font-size: 4.375em; } /* 70px */
.fsem71 { font-size: 4.4375em; } /* 71px */
.fsem72 { font-size: 4.5em; } /* 72px */
.fsem73 { font-size: 4.5625em; } /* 73px */
.fsem74 { font-size: 4.625em; } /* 74px */
.fsem75 { font-size: 4.6875em; } /* 75px */
.fsem76 { font-size: 4.75em; } /* 76px */
.fsem77 { font-size: 4.8125em; } /* 77px */
.fsem78 { font-size: 4.875em; } /* 78px */
.fsem79 { font-size: 4.9375em; } /* 79px */
.fsem80 { font-size: 5em; } /* 80px */
.fsem81 { font-size: 5.0625em; } /* 81px */
.fsem82 { font-size: 5.125em; } /* 82px */
.fsem83 { font-size: 5.1875em; } /* 83px */
.fsem84 { font-size: 5.25em; } /* 84px */
.fsem85 { font-size: 5.3125em; } /* 85px */
.fsem86 { font-size: 5.375em; } /* 86px */
.fsem87 { font-size: 5.4375em; } /* 87px */
.fsem88 { font-size: 5.5em; } /* 88px */
.fsem89 { font-size: 5.5625em; } /* 89px */
.fsem90 { font-size: 5.625em; } /* 90px */
.fsem91 { font-size: 5.6875em; } /* 91px */
.fsem92 { font-size: 5.75em; } /* 92px */
.fsem93 { font-size: 5.8125em; } /* 93px */
.fsem94 { font-size: 5.875em; } /* 94px */
.fsem95 { font-size: 5.9375em; } /* 95px */
.fsem96 { font-size: 6em; } /* 96px */
.fsem97 { font-size: 6.0625em; } /* 97px */
.fsem98 { font-size: 6.125em; } /* 98px */
.fsem99 { font-size: 6.1875em; } /* 99px */
.fsem100 { font-size: 6.25em; } /* 100px */
/* Font Weight */
.fw100 {font-weight: 100;}
.fw200 {font-weight: 200;}
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw900 {font-weight: 900;}
/* Line Height */
.tlh10 {line-height: 1.0;}
.tlh11 {line-height: 1.1;}
.tlh12 {line-height: 1.2;}
.tlh13 {line-height: 1.3;}
.tlh14 {line-height: 1.4;}
.tlh15 {line-height: 1.5;}
.tlh16 {line-height: 1.6;}
.tlh17 {line-height: 1.7;}
.tlh18 {line-height: 1.8;}
.tlh19 {line-height: 1.9;}
.tlh20 {line-height: 2.0;}
.tlh21 {line-height: 2.1;}
.tlh22 {line-height: 2.2;}
.tlh23 {line-height: 2.3;}
.tlh24 {line-height: 2.4;}
.tlh25 {line-height: 2.5;}
/* Letter Spacing */
.lsp1px { letter-spacing: 1px; }
.lsp2px { letter-spacing: 2px; }
.lsp3px { letter-spacing: 3px; }
.lsp4px { letter-spacing: 4px; }
.lsp5px { letter-spacing: 5px; }
.lsp-1px { letter-spacing: -1px; }
.lsp-2px { letter-spacing: -2px; }
.lsp-3px { letter-spacing: -3px; }
.lsp-4px { letter-spacing: -4px; }
.lsp-5px { letter-spacing: -5px; }
.lsp01em { letter-spacing: 0.01em; }
.lsp02em { letter-spacing: 0.02em; }
.lsp03em { letter-spacing: 0.03em; }
.lsp04em { letter-spacing: 0.04em; }
.lsp05em { letter-spacing: 0.05em; }
.lsp-01em { letter-spacing: -0.01em; }
.lsp-02em { letter-spacing: -0.02em; }
.lsp-03em { letter-spacing: -0.03em; }
.lsp-04em { letter-spacing: -0.04em; }
.lsp-05em { letter-spacing: -0.05em; }
.no-lsp { letter-spacing: 0; }
/* --------------------------------------------------------------------------------------------
## Alignment
-------------------------------------------------------------------------------------------- */
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.taj { text-align: justify; }
.vac {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.avac {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.float-left { float: left; }
.float-right { float: right; }
/* --------------------------------------------------------------------------------------------
## LINE CUT TEXT GROUP
-------------------------------------------------------------------------------------------- */
.vtrow {
display: -webkit-box;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
.vt2row {-webkit-line-clamp: 2;}
.vt3row {-webkit-line-clamp: 3;}
.vt4row {-webkit-line-clamp: 4;}
.vt5row {-webkit-line-clamp: 5;}
.tlcut {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --------------------------------------------------------------------------------------------
## 표준목록템플릿
-------------------------------------------------------------------------------------------- */
/* DASHED LINE LIST */
.dashed_line {
position: relative;
padding: 5px 0 5px 11px;
}
.dashed_line::before {
position: absolute;
display: block;
content: '';
width: 0;
top: 12px;
left: 7px;
bottom: 12px;
z-index: 1;
border-left: 2px dashed #979797;
}
.dashed_line::after {
position: absolute;
display: block;
content: '';
width: 16px;
height: 100%;
top: 0;
left: 0;
background: #f5f5f5;
}
.dashed_line > span {
position: absolute;
display: block;
width: 16px;
height: 16px;
left: 0;
z-index: 2;
background: #f5f5f5;
border-radius: 50%;
}
.dashed_line .top {
top: -5px;
}
.dashed_line .bottom {
bottom: -5px;
}
.dashed_line ul {
margin-left: -11px;
}
.dashed_line li {
position: relative;
margin: 20px 0 0;
z-index: 3;
}
.dashed_line li:first-child {
margin-top: 0;
}
.dashed_line li .ico_line {
position: relative;
display: inline-block;
width: auto;
padding-left: 25px;
line-height: 1;
}
.dashed_line li .ico_line::before {
position: absolute;
display: block;
content: '';
width: 10px;
height: 10px;
margin-top: 3px;
top: 0;
left: 3px;
border-radius: 50%;
-webkit-transition: background 350ms ease;
-moz-transition: background 350ms ease;
transition: background 350ms ease;
}
.dashed_line li .ico_line::before,
.dashed_line.hide_effect li .ico_line:hover::before {
background: #979797;
}
.dashed_line li .ico_line:hover::before {
background: #7ebe72;
}
.dashed_line li .dl_title {
margin-right: 15px;
color: #222;
}
.dashed_line li .dl_con {
color: #979797;
}
.dashed_line li .eline {
position: relative;
display: inline-block;
height: 100%;
font-style: normal;
}
.dashed_line li .eline::after {
position: absolute;
display: inline-block;
content: '';
height: 1px;
padding: 0;
left: 0;
right: 100%;
bottom: -5px;
overflow: hidden;
background: #7ebe72;
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
transition: all 350ms ease;
}
.dashed_line li .eline:hover::after {
right: 0;
}
.dashed_line.hide_effect li .eline::after {
display: none;
}
.dashed_line .dotlist p,
.dashed_line .dotlist li {
line-height: 1.6;
}
/* TOTALL CIRCLE TYPE LIST GROUP OBJECTS */
.dotlist p,
.dotlist li {
position: relative;
padding-left: 12px;
font-size: 16px;
line-height: 1.2;
}
.dotlist p:before,
.dotlist li:before {
position: absolute;
display: block;
content: '';
width: 4px;
height: 4px;
top: 11px;
left: 0;
background: #4d4d4d;
border-radius: 50%;
}
/* LIST TYPE CIRCLE (INDEPENDENT OBJECTS) */
.dv {
position: relative;
padding-left: 15px;
font-size: 1em;
line-height: 1.2;
}
.dv::before {
position: absolute;
display: block;
content: '';
width: 4px;
height: 4px;
top: 11px;
left: 4px;
background: #4d4d4d;
border-radius: 50%;
}
/* LIST TYPE LINE (INDEPENDENT OBJECTS) */
.lv {
position: relative;
padding-left: 10px;
}
.lv::before {
position: absolute;
display: block;
content: '';
width: 5px;
height: 1px;
top: 10px;
left: 0;
background: #4d4d4d;
}
/* -----------------------------------------------------------------------
## LIST BOX - TABLE STYLE : HTML CODE USE SAMPLE
<div class="listbox type(NUM) colgroup">
<!-- ## 반복코드 ## -->
<div class="box_group">
<div class="thead">Title</div>
<div class="tbody">
<ul>
<li>List Text</li>
</ul>
</div>
</div>
<!-- // 반복코드 // -->
</div>
----------------------------------------------------------------------- */
.listbox {
position: relative;
border: 1px solid #ccc;
}
.listbox .thead {
padding: 15px 10px;
color: #222;
text-align: center;
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.listbox .tbody {
padding: 20px;
}
.listbox .tbody li {
position: relative;
margin: 10px 0;
padding-left: 12px;
line-height: 1.4;
}
.listbox .tbody li::before {
position: absolute;
display: block;
content: '';
width: 4px;
height: 4px;
top: 9px;
left: 0;
background: #6e6e6e;
border-radius: 50%;
}
.listbox.type2 .box_group,
.listbox.type3 .box_group,
.listbox.type4 .box_group {
float: left;
}
.listbox.type2 .box_group:first-child,
.listbox.type3 .box_group:first-child,
.listbox.type4 .box_group:first-child {
border-left: 0;
}
.listbox.type2 .box_group { width: 50%; }
.listbox.type3 .box_group { width: 33.33333333333333333%; }
.listbox.type4 .box_group { width: 25%; }
.listbox.type2 .box_group:first-child::before {
position: absolute;
display: block;
content: '';
width: 1px;
height: 100%;
top: 0;
left: 50%;
background: #ccc;
}
/* 가로2단형 */
.listbox.type2 .box_group:nth-child(1)::before,
/* 가로3단형 */
.listbox.type3 .box_group:nth-child(1)::before,
.listbox.type3 .box_group:nth-child(2)::before,
/* 가로4단형 */
.listbox.type4 .box_group:nth-child(1)::before,
.listbox.type4 .box_group:nth-child(2)::before,
.listbox.type4 .box_group:nth-child(3)::before,
.listbox.type4 .box_group:nth-child(4)::before {
position: absolute;
display: block;
content: '';
width: 1px;
height: 100%;
top: 0;
left: 50%;
background: #ccc;
}
.listbox.type3 .box_group:nth-child(1)::before { left: 33.333333333333333333%; }
.listbox.type3 .box_group:nth-child(2)::before { left: 66.666666666666666666%; }
.listbox.type4 .box_group:nth-child(2)::before { left: 25%; }
.listbox.type4 .box_group:nth-child(3)::before { left: 50%; }
.listbox.type4 .box_group:nth-child(4)::before { left: 75%; }
.listbox .pointline {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.listbox .pointline::before,
.listbox .pointline::after {
position: absolute;
display: block;
content: '';
background: #6fbcbc;
}
.listbox .pointline::before {
width: 35px;
height: 3px;
top: -1px;
left: -1px;
}
.listbox .pointline::after {
width: 3px;
height: 35px;
top: -1px;
left: -1px;
}
/* LIST TYPE CIRCLE NUMBER */
.listnum.type_num li {
position: relative;
margin: 5px 0;
padding-left: 20px;
line-height: 1.4;
}
.listnum.type_num li:before {
position: absolute;
display: block;
content: '';
left: 0;
}
.listnum.type_num .num1:before { content: '①'; }
.listnum.type_num .num2:before { content: '②'; }
.listnum.type_num .num3:before { content: '③'; }
.listnum.type_num .num4:before { content: '④'; }
.listnum.type_num .num5:before { content: '⑤'; }
.listnum.type_num .num6:before { content: '⑥'; }
.listnum.type_num .num7:before { content: '⑦'; }
.listnum.type_num .num8:before { content: '⑧'; }
.listnum.type_num .num9:before { content: '⑨'; }
/* Object-fit */
img.ofc {
object-fit: cover;
}
/* --------------------------------------------------------------------------------------------
## Animate & Effect
-------------------------------------------------------------------------------------------- */
/* Zoom Effect [Scale] */
.effect {
position: relative;
overflow: hidden;
}
.effect .scaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
transition: transform 300ms ease;
}
.effect .scaleup:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
/* Text Bottom Center inner Under Line Effect */
.underline {
position: relative;
color: #313131;
font-size: 16px;
font-weight: 900;
-webkit-transition: color 300ms ease;
-moz-transition: color 300ms ease;
transition: color 300ms ease;
}
.underline:hover,
.active .underline,
.underline.active {
color: #00a1cd;
}
.underline:after {
position: absolute;
display: block;
width: 0;
height: 1px;
content: '';
left: 50%;
right: 50%;
bottom: -1px;
background: #00a1cd;
-webkit-transition: width 300ms ease,
left 300ms ease,
right 300ms ease;
-moz-transition: width 300ms ease,
left 300ms ease,
right 300ms ease;
transition: width 300ms ease,
left 300ms ease,
right 300ms ease;
}
.underline:hover:after,
.active .underline:after,
.underline.active:after {
width: 100%;
left: 0;
right: 0;
}
/* Circle Border Animation */
.circle_bre_box {
position: absolute;
width: 200px;
height: 200px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #1c1b29;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.7);
transform: scale(1);
}
.circle_bre_box:before {
position: absolute;
content: '';
width: 150%;
height: 150%;
top: -25%;
left: -25%;
background-image: conic-gradient(#04b0ee 20deg,transparent 120deg);
-webkit-animation: cbrotate 2000ms infinite linear;
-moz-animation: cbrotate 2000ms infinite linear;
animation: cbrotate 2000ms infinite linear;
}
.circle_bre_box:after {
position: absolute;
content: '';
display: grid;
width: 94%;
height: 94%;
top: 3%;
left: 3%;
place-items: center;
background: #1c1b29;
border-radius: 50%;
}
/* Border Box Effect */
.bebox .line {
display: block;
}
.bebox .line .image_area {
position: relative;
width: 100%;
margin-bottom: 10px;
overflow: hidden;
line-height: 0;
}
.bebox .line .border_effect {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.bebox .line .border_effect:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border: 1px solid rgba(255,255,255,0);
-webkit-transition: border 0 ease 0;
-moz-transition: border 0 ease 0;
transition: border 0 ease 0;
}
.bebox .line:hover .border_effect:before {
border-color: rgba(255,255,255,0.15);
-webkit-transition: border 300ms ease 150ms;
-moz-transition: border 300ms ease 150ms;
transition: border 300ms ease 150ms;
}
.bebox .line .top:before,
.bebox .line .bottom:before,
.bebox .line .left:before,
.bebox .line .right:before,
.bebox .line .top:after,
.bebox .line .bottom:after,
.bebox .line .left:after,
.bebox .line .right:after {
position: absolute;
display: block;
content: '';
z-index: 1;
background: #fff;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}
.bebox .line .top:after,
.bebox .line .bottom:after,
.bebox .line .left:after,
.bebox .line .right:after {
position: absolute;
z-index: 1;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: all 10ms ease 0;
-moz-transition: all 10ms ease 0;
transition: all 10ms ease 0;
}
.bebox .line:hover .top:before,
.bebox .line:hover .bottom:before,
.bebox .line:hover .left:before,
.bebox .line:hover .right:before,
.bebox .line:hover .top:after,
.bebox .line:hover .bottom:after,
.bebox .line:hover .left:after,
.bebox .line:hover .right:after {
position: absolute;
z-index: 1;
/* background: #f08607; */
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
}
.bebox .line:hover .top:after,
.bebox .line:hover .bottom:after,
.bebox .line:hover .left:after,
.bebox .line:hover .right:after {
position: absolute;
z-index: 1;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-webkit-transition: all 200ms ease 200ms;
-moz-transition: all 200ms ease 200ms;
transition: all 200ms ease 200ms;
}
.bebox .line .top:before,
.bebox .line .bottom:before {
width: 100%;
height: 1px;
}
.bebox .line .left:before,
.bebox .line .right:before {
width: 1px;
height: 100%;
}
.bebox .line .top:before {
top: 0;
left: 0;
}
.bebox .line .left:before {
top: auto;
left: 0;
bottom: 0;
}
.bebox .line .right:before {
top: 0;
right: 0;
bottom: auto;
}
.bebox .line .bottom:before {
right: 0;
bottom: 0;
}
.bebox .line:hover .top:before,
.bebox .line:hover .bottom:before,
.bebox .line:hover .left:after,
.bebox .line:hover .right:after {
width: 40px;
height: 8px;
}
.bebox .line:hover .left:before,
.bebox .line:hover .right:before,
.bebox .line:hover .top:after,
.bebox .line:hover .bottom:after {
width: 8px;
height: 40px;
}
.bebox .line .top:after,
.bebox .line .bottom:after {
width: 8px;
height: 100%;
}
.bebox .line .left:after,
.bebox .line .right:after {
width: 100%;
height: 8px;
}
.bebox .line .top:after {
top: -100%;
left: 0;
}
.bebox .line .left:after {
left: -100%;
bottom: 0;
}
.bebox .line .right:after {
top: 0;
right: -100%;
}
.bebox .line .bottom:after {
right: 0;
bottom: -100%;
}
.bebox .line:hover .top:after { top: 0; }
.bebox .line:hover .left:after { left: 0; }
.bebox .line:hover .right:after { right: 0; }
.bebox .line:hover .bottom:after { bottom: 0; }
.btn_more {
position: absolute;
width: auto;
height: 30px;
padding: 0 10px;
right: 0;
bottom: 0;
overflow: hidden;
color: #838383;
font-size: 14px;
text-align: center;
line-height: 30px;
background: #fff;
border: 1px solid #c7c7c7;
border-radius: 3px;
-webkit-transition: background 350ms ease, border 350ms ease;
-moz-transition: background 350ms ease, border 350ms ease;
transition: background 350ms ease, border 350ms ease;
}
.btn_more:hover {
color: #fff;
background: #7ebe72;
border-color: rgba(0,0,0,0.2);
-webkit-transition: color 350ms ease, background 350ms ease, border 350ms ease;
-moz-transition: color 350ms ease, background 350ms ease, border 350ms ease;
transition: color 350ms ease, background 350ms ease, border 350ms ease;
}
.btn_more span {
position: relative;
display: inline-block;
margin-left: 3px;
padding-bottom: 5px;
vertical-align: -webkit-baseline-middle;
line-height: 28px;
}
.btn_more span::before {
position: relative;
font-size: 18px;
}
/* --------------------------------------------------------------------------------------------
## Scroll Top Button
-------------------------------------------------------------------------------------------- */
#btn-top {
position: fixed;
display: none;
width: 45px;
height: 45px;
margin: 0;
padding: 0;
right: 10px;
bottom: 50px;
color: #efefef;
text-align: center;
line-height: 45px;
background: rgba(0,0,0,0.65);
}
/* ------------------------------------------------------------------------------------------------------------------
## KEYFRAMES
------------------------------------------------------------------------------------------------------------------ */
@-webkit-keyframes cbrotate {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes cbrotate {
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
/* --------------------------------------------------------------------------------------------
## ClearFix
-------------------------------------------------------------------------------------------- */
header:before,
header:after,
nav:before,
nav:after,
footer:before,
footer:after,
#header:before,
#header:after,
#nav:before,
#nav:after,
#gnb:before,
#gnb:after,
#container:before,
#container:after,
#content:before,
#content:after,
#footer:before,
#footer:after,
.colgroup:before,
.colgroup:after,
.rows:before,
.rows:after,
.clear:before,
.clear:after {
display: block;
content: '';
height: 0;
overflow: hidden;
visibility: hidden;
line-height: 0;
}
header:after,
nav:after,
footer:after,
#header:after,
#nav:after,
#gnb:after,
#container:after,
#content:after,
#footer:after,
.colgroup:after,
.rows:after,
.clear:after,
.clearfix {
clear: both;
}
header,
nav,
footer,
#header,
#nav,
#gnb,
#container,
#content,
#footer,
#container,
#content,
.colgroup,
.rows,
.clear {
zoom: 1;
}
/* --------------------------------------------------------------------------------------------
## RESPONSIVE
-------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1280px) {
.w1280h {display: none !important;}
.w1280s {display: block !important;}
}
@media screen and (max-width: 1200px) {
.w1200h {display: none !important;}
.w1200s {display: block !important;}
}
@media screen and (max-width: 1152px) {
.w1152h {display: none !important;}
.w1152s {display: block !important;}
}
@media screen and (max-width: 1120px) {
.w1120h {display: none !important;}
.w1120s {display: block !important;}
}
@media screen and (max-width: 1040px) {
.w1040h {display: none !important;}
.w1040s {display: block !important;}
}
@media screen and (max-width: 1024px) {
/* Tablet Landscape */
.w1024h {display: none !important;}
.w1024s {display: block !important;}
}
@media screen and (max-width: 960px) {
/* Google Nexus 7 Landscape */
.w960h {display: none !important;}
.w960s {display: block !important;
}
@media screen and (max-width: 880px) {
.w880h {display: none !important;}
.w880s {display: block !important;}
}
@media screen and (max-width: 800px) {
/* Google Nexus 7 Landscape */
.w800h {display: none !important;}
.w800s {display: block !important;}
}
@media screen and (max-width: 768px) {
/* Tablet Portrait */
.w768h {display: none !important;}
.w768s {display: block !important;
}
@media screen and (max-width: 960px) {
/* Google Nexus 7 Landscape */
.w960h {display: none !important;}
.w960s {display: block !important;
}
@media screen and (max-width: 880px) {
.w880h {display: none !important;}
.w880s {display: block !important;}
}
@media screen and (max-width: 800px) {
/* Google Nexus 7 Landscape */
.w800h {display: none !important;}
.w800s {display: block !important;}
}
@media screen and (max-width: 768px) {
/* Tablet Portrait */
.w768h {display: none !important;}
.w768s {display: block !important;}
}
@media screen and (max-width: 736px) {
/* iPhone 6 Plus Landscape */
.w736h {display: none !important;}
.w736s {display: block !important;}
}
@media screen and (max-width: 720px) {
.w720h {display: none !important;}
.w720s {display: block !important;}
}
@media screen and (max-width: 667px) {
/* iPhone 6 Landscape */
.w667h {display: none !important;}
.w667s {display: block !important;}
}
@media screen and (max-width: 640px) {
/* Mobile Landscape */
.w640h {display: none !important;}
.w640s {display: block !important;}
}
@media screen and (max-width: 568px) {
/* iPhone 5 Landscape */
.w568h {display: none !important;}
.w568s {display: block !important;}
}
@media screen and (max-width: 560px) {
.w560h {display: none !important;}
.w560s {display: block !important;}
}
@media screen and (max-width: 480px) {
.w480h {display: none !important;}
.w480s {display: block !important;}
}
@media screen and (max-width: 414px) {
/* iPhone 6 Plus Portrait */
.w428h {display: none !important;}
.w428s {display: block !important;}
}
@media screen and (max-width: 414px) {
/* iPhone 6 Plus Portrait */
.w414h {display: none !important;}
.w414s {display: block !important;}
}
@media screen and (max-width: 400px) {
/* iPhone 6 Plus Portrait */
.w400h {display: none !important;}
.w400s {display: block !important;}
}
@media screen and (max-width: 375px) {
/* iPhone 6 Portrait */
.w375h {display: none !important;}
.w375s {display: block !important;}
}
@media screen and (max-width: 360px) {
/* Mobile Portrait */
.w360h {display: none !important;}
.w360s {display: block !important;}
}
@media screen and (max-width: 359px) {
/* iPhone 5 Portrait */
.w320h {display: none !important;}
.w320s {display: block !important;}
}
@media screen and (max-width: 319px) {
/* iPhone 5 Portrait */
.w280h {display: none !important;}
.w280s {display: block !important;}
}