/* ----------------------------------------------------------------

  Custom Properties

----------------------------------------------------------------- */
:root{
--cmn-font-color-base:#333;
--cmn-font-color-link:#06c;
}



/* ----------------------------------------------------------------

Reset browsers css

normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
----------------------------------------------------------------- */
/* ----------------------------------------------------------------
Base
----------------------------------------------------------------- */
html{
-webkit-text-size-adjust:none;
text-size-adjust:none;
}

body{
margin:0;
padding:0 10px;
color:var(--cmn-font-color-base);
background-color:#fff;
line-height:1.65;
font-size:14px;
min-width:960px;
font-family:Arial,Tahoma,helvetica,sans-serif;
}

[lang="zh-cmn-Hans"],
[lang="zh-cmn-Hans"] body{
line-height:1.75;
font-family:Arial,helvetica,'Microsoft YaHei',微软雅黑,sans-serif;
}

[lang="zh-cmn-Hant-TW"],
[lang="zh-cmn-Hant-TW"] body,
[lang="zh-cmn-Hant-HK"],
[lang="zh-cmn-Hant-HK"] body{
font-family:Arial,helvetica,'Microsoft JhengHei',微軟正黑體,sans-serif;
}

[lang="ko"],
[lang="ko"] body{
font-family:Arial,helvetica,'Nanum Gothic','Malgun Gothic',sans-serif;
font-size:13px;
}

/* IE11 adjust */
_:-ms-lang(x)::-ms-backdrop, body{
color:#333;
}


/* ----------------------------------------------------------------
links
----------------------------------------------------------------- */
a{
background-color:transparent;
}

a:link,
a:active{
color:var(--cmn-font-color-link);
}


/* ----------------------------------------------------------------
Typography
----------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
font-size:100%;
}

p{
margin:10px 0 0;
padding:0;
}

strong{
color:#e93939;
font-weight:normal;
}

em{
font-style:normal;
}

b{
font-style:normal;
font-weight:bold;
}

abbr[title]{
border-bottom:none;
text-decoration:underline;
text-decoration:underline dotted;
}

dfn{
font-style:italic;
}

small{
font-size:11px;
}

sub,sup{
position:relative;
line-height:1;
vertical-align:baseline;
font-size:11px;
}

sup{
top:-.5em;
}

sub{
bottom:-.25em;
}


/* ----------------------------------------------------------------
Lists
----------------------------------------------------------------- */
ul,ol,dl{
margin:10px 0 0;
padding:0;
list-style:none;
}

ul ul,
ul ol,
ul dl,
ul p,
ul table,
ol ul,
ol ol,
ol dl,
ol p,
ol table,
dl ul,
dl ol,
dl dl,
dl p,
dl table{
margin:0;
font-size:100%
}

ol{
margin-left:2em;
list-style-type:decimal;
}


/* ----------------------------------------------------------------
Tables
----------------------------------------------------------------- */
table{
margin:10px 0 0;
padding:0;
border-collapse:collapse;
border-spacing:0;
width:100%;
font-size:inherit;
}

td > :first-child{
margin-top:0;
}

td,
th{
padding:0;
}


/* ----------------------------------------------------------------
Embedded content
----------------------------------------------------------------- */
img{
border-style:none;
line-height:1;
max-width:100%;
height:auto;
vertical-align:bottom;
}

figure{
margin:0;
}


/* ----------------------------------------------------------------
Grouping content
----------------------------------------------------------------- */
hr{
box-sizing:content-box;
height:0;
overflow:visible;
}

pre,code,kbd,samp{
font-family:monospace, monospace;
font-size:13px;
}


/* ----------------------------------------------------------------
Forms
----------------------------------------------------------------- */
button,
input,
optgroup,
select,
textarea{
margin:0;
box-sizing:border-box;
vertical-align:baseline;
font-family:inherit;
font-size:100%;
}

input,
button{
overflow:visible;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
height:auto;
}

[type="search"]{
-webkit-appearance:textfield;
outline-offset:-2px;
}

[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
}

button,
[type="button"],
[type="reset"],
[type="submit"]{
-webkit-appearance:button;
}

button,
select{
cursor:pointer;
text-transform:none;
}

button[disabled],
select[disabled]{
cursor:default;
}

button:focus,
select:focus,
input:focus,
textarea:focus,
[role="button"]:focus,
[tabindex="0"]:focus{
outline:1px solid #3798e0;
outline-offset:-1px;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
border-style:none;
padding:0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
outline:1px dotted ButtonText;
}

fieldset{
padding:0;
}

legend{
padding:0;
color:inherit;
box-sizing:border-box;
display:table;
max-width:100%;
white-space:normal;
}

progress{
vertical-align:baseline;
}

textarea{
overflow:auto;
}

::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit;
}

::placeholder{
color:#949494;
}

::-ms-input-placeholder{
color:#949494;
}

::-ms-clear{
display:none;
}

/* checkbox
----------------------------------------------- */
[type=checkbox]{
margin:0;
padding:0;
border:none;
border-radius:0;
width:13px;
height:13px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display:inline-block;
background:url(/element/shared/images/icon/icon-form-checkbox.svg) 0 0 no-repeat;
cursor:pointer;
}

[type=checkbox]:checked{
background-image:url(/element/shared/images/icon/icon-form-checkbox-on.svg);
}

[type=checkbox]:disabled{
opacity:1;
cursor:default;
background-image:url(/element/shared/images/icon/icon-form-checkbox-disabled.svg);
cursor:default;
}

/* radiobox
----------------------------------------------- */
[type=radio]{
margin:0;
padding:0;
border:none;
border-radius:0;
width:13px;
height:13px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display:inline-block;
background:url(/element/shared/images/icon/icon-form-radio.svg) 0 0 no-repeat;
cursor:pointer;
}

[type=radio]:checked{
background-image:url(/element/shared/images/icon/icon-form-radio-on.svg);
}

[type=radio]:disabled{
opacity:1;
cursor:default;
background-image:url(/element/shared/images/icon/icon-form-radio-disabled.svg);
cursor:default;
}


/* ----------------------------------------------------------------
Misc
----------------------------------------------------------------- */
template{
display:none;
}


/* ----------------------------------------------------------------
HTML5 display definitions
----------------------------------------------------------------- */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section{
display:block;
}

summary{
display:list-item;
}



/* ----------------------------------------------------------------

Common Modules

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
Heading
----------------------------------------------------------------- */
/* .cmn-hdg-category
----------------------------------------------- */
.cmn-hdg-category{
padding:13px 20px 10px;
color:#fff;
background-color:#2d7bc1;
line-height:1.25;
}

/* .cmn-hdg-category-wording
----------------------------------------------- */
.cmn-hdg-category-wording{
text-shadow:1px 1px 1px rgba(0,0,0,.35);
font-size:30px;
font-weight:normal;
}

.cmn-hdg-category-wording > a{
color:#fff !important;
text-decoration:none;
}

/* .cmn-hdg-category-sup
----------------------------------------------- */
.cmn-hdg-category-sup{
margin-top:5px;
font-size:15px;
}


/* ----------------------------------------------------------------
Break Word
----------------------------------------------------------------- */
/* .cmn-break-word
----------------------------------------------- */
.cmn-break-word{
word-break:break-all !important;
overflow-wrap:break-word !important;
}


/* ----------------------------------------------------------------
Link
----------------------------------------------------------------- */
/* .cmn-solid
----------------------------------------------- */
.cmn-solid{
padding:0 0 1px;
--cmn-solid-color:#ccc;
--cmn-solid-font-color:var(--cmn-font-color-base);
--cmn-solid-hover-color:var(--cmn-font-color-link);
--cmn-solid-hover-font-color:var(--cmn-font-color-link);

color:var(--cmn-solid-font-color) !important;
box-shadow:0 -1px 0 var(--cmn-solid-color) inset;
text-decoration:none !important;
}

.cmn-solid:active,
.cmn-solid:hover,
.cmn-solid:focus{
color:var(--cmn-solid-hover-font-color) !important;
box-shadow:0 -1px 0 var(--cmn-solid-hover-color) inset;
}

/* .cmn-dashed
----------------------------------------------- */
.cmn-dashed{
--cmn-dashed-grad:linear-gradient(90deg, var(--cmn-dashed-color), var(--cmn-dashed-color) 50%, transparent 50%, transparent 100%) repeat-x 0 100%;
--cmn-dashed-color:#949494;
--cmn-dashed-size:6px 1px;
--cmn-dashed-font-color:var(--cmn-font-color-base);
color:var(--cmn-dashed-font-color) !important;
background:var(--cmn-dashed-grad);
background-size:var(--cmn-dashed-size);
text-decoration:none !important;
}

/* IE11 adjust */
_:-ms-lang(x)::-ms-backdrop, .cmn-dashed{
border-bottom:1px dashed;
}


/* ----------------------------------------------------------------
Button
----------------------------------------------------------------- */
/* .cmn-btn-siwtch-device
----------------------------------------------- */
.cmn-btn-siwtch-device{
margin:10px auto 15px;
padding:40px 5px 50px;
border:2px solid #bbb;
border-radius:8px;
color:#666;
box-shadow:0 -10px 0 #ccc inset;
display:block;
max-width:960px;
box-sizing:border-box;
line-height:1;
background-color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
font-size:56px;
}

.cmn-btn-siwtch-device:link,
.cmn-btn-siwtch-device:visited,
.cmn-btn-siwtch-device:active,
.cmn-btn-siwtch-device:focus{
color:#666;
}


/* ----------------------------------------------------------------
FAQ Icon
----------------------------------------------------------------- */
/* .cmn-faq-hook
----------------------------------------------- */
.cmn-faq-hook{
color:rgba(0,0,0,0) !important;
width:12px;
height:12px;
display:inline-block;
box-sizing:border-box;
overflow:hidden;
vertical-align:middle;
background:0 0 no-repeat url(/element/shared/images/icon/icon-tip-faq.svg);
background-size:12px 12px;
cursor:pointer;
}

.cmn-faq-hook:active,
.cmn-faq-hook:hover,
.cmn-faq-hook:focus{
background-image:url(/element/shared/images/icon/icon-tip-faq-disabled.svg)
}


/* ----------------------------------------------------------------
Informationn Icon
----------------------------------------------------------------- */
/* .cmn-info-hook
----------------------------------------------- */
.cmn-info-hook{
display:inline-block;
cursor:pointer;
vertical-align:middle;
}

/* .cmn-info-hook-icon
----------------------------------------------- */
.cmn-info-hook .cmn-info-hook-icon{
color:rgba(0,0,0,0) !important;
width:12px;
height:12px;
display:inline-block;
box-sizing:border-box;
overflow:hidden;
background:0 0 no-repeat url(/element/shared/images/icon/icon-tip-info.svg);
background-size:12px 12px;
cursor:pointer;
vertical-align:middle;
}

.cmn-info-hook:active .cmn-info-hook-icon,
.cmn-info-hook:hover .cmn-info-hook-icon,
.cmn-info-hook:focus .cmn-info-hook-icon{
background-image:url(/element/shared/images/icon/icon-tip-info-disabled.svg)
}


/* ----------------------------------------------------------------
Caution Icon
----------------------------------------------------------------- */
/* .cmn-caution-hook
----------------------------------------------- */
.cmn-caution-hook{
display:inline-block;
cursor:pointer;
vertical-align:middle;
}

/* .cmn-caution-hook-icon
----------------------------------------------- */
.cmn-caution-hook .cmn-caution-hook-icon{
color:rgba(0,0,0,0) !important;
width:12px;
height:12px;
display:inline-block;
box-sizing:border-box;
overflow:hidden;
background:0 0 no-repeat url(/element/shared/images/icon/icon-tip-caution.svg);
background-size:12px 12px;
cursor:pointer;
vertical-align:middle;
}

.cmn-caution-hook:active .cmn-caution-hook-icon,
.cmn-caution-hook:hover .cmn-caution-hook-icon,
.cmn-caution-hook:focus .cmn-caution-hook-icon{
background-image:url(/element/shared/images/icon/icon-tip-caution-disabled.svg)
}


/* ----------------------------------------------------------------
Loading
----------------------------------------------------------------- */
/* cmn-loading-spinner
----------------------------------------------- */
@keyframes cmn-loading-spinner-rotate{
100%{
transform:rotate(360deg);
}
}

.cmn-loading-spinner{
margin:20px auto;
display:block;
width:24px;
height:24px;
overflow:hidden;
background:url(/element/shared/images/icon/icon-loading-spinner.svg) no-repeat 50% 50%;
background-size:100% 100%;
animation:cmn-loading-spinner-rotate 2s linear infinite;
}

.cmn-loading-spinner > span{
height:0;
overflow:hidden;
position:absolute;
}

/* IE11 adjust */
_:-ms-lang(x)::-ms-backdrop, .cmn-loading-spinner{
animation:none;
background:url(/element/shared/images/icon/icon-loading-spinner-legacy.gif) no-repeat 0% 0%;
}

/* .cmn-loading-spinner-wording-top / .cmn-loading-spinner-wording-btm
----------------------------------------------- */
.cmn-loading-spinner-wording-top,
.cmn-loading-spinner-wording-btm{
margin:20px auto;
text-align:center;
line-height:1.35;
}

.cmn-loading-spinner-wording-top::after,
.cmn-loading-spinner-wording-btm::before{
margin:0 auto;
content:'';
display:block;
color:rgba(0,0,0,0);
width:24px;
height:24px;
overflow:hidden;
background:url(/element/shared/images/icon/icon-loading-spinner.svg) no-repeat 50% 50%;
background-size:100% 100%;
animation:cmn-loading-rotate 2s linear infinite;
}

.cmn-loading-spinner-wording-top > span,
.cmn-loading-spinner-wording-btm > span{
display:block;
text-align:center;
line-height:1.35;
}

.cmn-loading-spinner-wording-top > span{
margin-bottom:8px;
}

.cmn-loading-spinner-wording-btm > span{
margin-top:8px;
}

/* IE11 adjust */
_:-ms-lang(x)::-ms-backdrop, .cmn-loading-spinner-wording-top::after{
animation:none;
background:url(/element/shared/images/icon/icon-loading-spinner-legacy.gif) no-repeat 0% 0%;
}
_:-ms-lang(x)::-ms-backdrop, .cmn-loading-spinner-wording-btm::before{
animation:none;
background:url(/element/shared/images/icon/icon-loading-spinner-legacy.gif) no-repeat 0% 0%;
}

/* .cmn-loading-spinner-dot
------------------------------------------------- */
.cmn-loading-spinner-dot{
margin:20px auto;
display:block;
width:24px;
height:24px;
overflow:hidden;
position:relative;
background:url(/element/shared/images/icon/icon-loading-spinner-dot.gif) no-repeat 0 0;
background-size:contain;
}

.cmn-loading-spinner-dot > span{
height:0;
overflow:hidden;
position:absolute;
}

/* .cmn-loading-spinner-dot-wht
------------------------------------------------- */
.cmn-loading-spinner-dot-wht{
margin:20px auto;
display:block;
width:24px;
height:24px;
overflow:hidden;
position:relative;
background:url(/element/shared/images/icon/icon-loading-spinner-dot.gif) no-repeat 0 0;
background-size:contain;
mix-blend-mode:hard-light;
}

.cmn-loading-spinner-dot-wht > span{
height:0;
overflow:hidden;
position:absolute;
}


/* ----------------------------------------------------------------
SNS
----------------------------------------------------------------- */
/* .cmn-sns-list
----------------------------------------------- */
.cmn-sns-list{
margin:20px 0 10px;
text-align:right;
}

.cmn-sns-list > li{
margin-left:10px;
display:inline-block;
vertical-align:top;
}

.cmn-sns-list iframe{
vertical-align:top;
}


/* ----------------------------------------------------------------
Alert Component
----------------------------------------------------------------- */
/* .cmn-alert-layer
----------------------------------------------- */
.cmn-alert-layer{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:999;
}

/* .cmn-alert
----------------------------------------------- */
.cmn-alert{
margin:0;
padding:50px 20px;
box-shadow:rgba(130, 130, 130, .2) 4px 4px 3px 0px;
position:absolute;
top:100px;
width:80%;
max-width:420px;
z-index:1000;
background:#fff;
}

/* .cmn-alert-wording
----------------------------------------------- */
.cmn-alert .cmn-alert-wording{
font-size:16px;
text-align:center;
}

/* .cmn-alert-btn-list
----------------------------------------------- */
.cmn-alert .cmn-alert-btn-list{
margin-top:30px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:stretch;
-ms-flex-align:stretch;
align-items:stretch;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
min-height:40px;
}

.cmn-alert .cmn-alert-btn-list > li{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}

.cmn-alert .cmn-alert-btn-list > li:not(:first-child){
margin-left:15px;
}

.cmn-alert .cmn-alert-btn-list button{
padding:5px;
border-radius:4px;
box-sizing:border-box;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
line-height:1.25;
font-weight:bold;
font-size:17px;
}

/* .cmn-info-btn
----------------------------------------------- */
.cmn-alert .cmn-info-btn{
color:#fff;
border:none;
min-width:230px;
min-height:56px;
background-color:#287ac4;
box-shadow:0 -4px 0 rgba(0,0,0,.18) inset;
text-shadow:1px 1px 2px rgba(0,0,0,.3);
}

/* .cmn-move-btn
----------------------------------------------- */
.cmn-alert .cmn-move-btn{
border:1px solid #ccc;
color:#555;
box-sizing:border-box;
min-width:155px;
box-shadow:0 -3px 0 #d9d9d9 inset;
background-color:#fff;
}

/* .cmn-cancel-btn
----------------------------------------------- */
.cmn-alert .cmn-cancel-btn{
border:1px solid #ccc;
color:#555;
box-shadow:0 -3px 0 #d9d9d9 inset;
min-width:110px;
background-color:#fff;
}

/* .cmn-alert-content-btn-close
----------------------------------------------- */
.cmn-alert .cmn-alert-btn-close{
color:rgba(0,0,0,0) !important;
border:none;
width:53px;
height:52px;
position:absolute;
top:-19px;
right:-24px;
background:0 0 no-repeat url(/element/shared/images/icon/icon-modal-btn-close.png);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

.cmn-alert .cmn-alert-btn-close:active,
.cmn-alert .cmn-alert-btn-close:hover,
.cmn-alert .cmn-alert-btn-close:focus{
background-position:0 -65px;
}


/* ----------------------------------------------------------------
Modal Component
----------------------------------------------------------------- */
/* .cmn-modal
----------------------------------------------- */
.cmn-modal{
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:1000;
}

.cmn-modal.cmn-modal-active{
display:block;
}

/* .cmn-modal-content
----------------------------------------------- */
.cmn-modal .cmn-modal-content{
padding:0 20px 20px;
margin:0 auto;
border:10px solid #333;
box-sizing:border-box;
position:absolute;
top:100px;
right:0;
left:0;
width:820px;
background-color:#fff;
}

/* .cmn-modal-header
----------------------------------------------- */
.cmn-modal .cmn-modal-header{
margin:0 -20px 20px;
padding:0 20px 10px;
color:#fff;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
min-height:30px;
background-color:#333;
font-size:15px;
font-weight:bold;
}

/* .cmn-modal-header-hdg
----------------------------------------------- */
.cmn-modal .cmn-modal-header-hdg{
margin-right:10px;
-webkit-box-flex:1;
-ms-flex:1;
flex:1;
line-height:1.35;
}

/* .cmn-modal-header-hdg-sup
----------------------------------------------- */
.cmn-modal .cmn-modal-header-hdg-sup{
margin-top:0;
}

/* .cmn-modal-header-hdg-sup
----------------------------------------------- */
.cmn-modal .cmn-modal-header-hdg-sup{
margin-top:0;
font-weight:normal;
}

/* .cmn-modal-header-hdg-sup-btn
----------------------------------------------- */
.cmn-modal .cmn-modal-header-hdg-sup-btn{
padding:3px 5px;
border:none;
border-radius:3px;
color:#fff;
text-shadow:0 1px 0 rgba(0, 0, 0, .3);
box-shadow:0 -2px 0 rgba(0,0,0,.18) inset;
min-width:7em;
min-height:30px;
background-color:#287ac4;
font-weight:bold;
}

/* .cmn-modal-hdg
----------------------------------------------- */
.cmn-modal .cmn-modal-hdg{
padding:5px;
line-height:1.35;
background-color:#f1f1f1;
font-weight:bold;
font-size:16px;
}

/* .cmn-modal-hdg-01
----------------------------------------------- */
.cmn-modal .cmn-modal-hdg-01{
margin-top:10px;
line-height:1.35;
}

/* .cmn-modal-footer
----------------------------------------------- */
.cmn-modal .cmn-modal-footer{
margin:20px -20px -20px;
padding:10px 20px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
background-color:#e5e5e5;
font-size:13px;
}

/* .cmn-modal-footer-content
----------------------------------------------- */
.cmn-modal .cmn-modal-footer-content{
margin-right:30px;
}

/* .cmn-modal-footer-btn
----------------------------------------------- */
.cmn-modal .cmn-modal-footer-btn{
padding:3px 5px;
border:none;
border-radius:3px;
color:#fff;
text-shadow:0 1px 0 rgba(0, 0, 0, .3);
box-shadow:0 -2px 0 rgba(0,0,0,.18) inset;
min-width:8em;
min-height:45px;
background-color:#287ac4;
font-weight:bold;
font-size:20px;
}

/* .cmn-modal-btn-close
----------------------------------------------- */
.cmn-modal .cmn-modal-btn-close{
color:rgba(0,0,0,0) !important;
border:none;
width:53px;
height:52px;
position:absolute;
top:-30px;
right:-35px;
background:0 0 no-repeat url(/element/shared/images/icon/icon-modal-btn-close.png);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

.cmn-modal .cmn-modal-btn-close:active,
.cmn-modal .cmn-modal-btn-close:hover,
.cmn-modal .cmn-modal-btn-close:focus{
background-position:0 -65px;
}


/* ----------------------------------------------------------------
Tooltip Component
----------------------------------------------------------------- */
/* .cmn-tip-container
----------------------------------------------- */
.cmn-tip-container{
padding:10px 16px;
border:1px solid #aaa;
border-radius:3px;
box-sizing:border-box;
width:370px;
position:absolute;
box-shadow:1px 1px 3px 0 rgba(153,153,153,.75);
z-index:260;
background-color:#fff;
}

/* .cmn-tip-hdg
----------------------------------------------- */
.cmn-tip-container .cmn-tip-hdg{
margin:0 -6px;
padding:8px 6px;
line-height:1.35;
background-color:#eee;
}

/* .cmn-tip-hdg-01
----------------------------------------------- */
.cmn-tip-container .cmn-tip-hdg-01{
margin:10px 0 -5px;
padding-left:14px;
position:relative;
line-height:1.35;
}

.cmn-tip-container .cmn-tip-hdg-01::before{
content:"";
position:absolute;
top:.35em;
left:0;
width:8px;
height:8px;
display:block;
background-color:#333;
}

/* .cmn-tip-hdg-relation
----------------------------------------------- */
.cmn-tip-container .cmn-tip-hdg-relation{
margin:10px -6px 0;
padding:10px 6px 0;
border-top:1px solid #ccc;
line-height:1.35;
font-weight:normal;
}

/* .cmn-tip-link-list
----------------------------------------------- */
.cmn-tip-container .cmn-tip-link-list{
margin-top:8px;
line-height:1.45;
font-size:12px;
}

.cmn-tip-container .cmn-tip-link-list > li:not(:first-child){
margin-top:5px;
}

/* .cmn-tip-link
----------------------------------------------- */
.cmn-tip-container .cmn-tip-link{
margin-left:auto;
display:table;
line-height:1;
}

.cmn-tip-container .cmn-tip-link a{
padding-left:10px;
color:#666 !important;
display:table;
position:relative;
text-decoration:none;
}

.cmn-tip-container .cmn-tip-link a::before{
border-right:1px solid #666;
border-bottom:1px solid #666;
content:"";
display:block;
position:absolute;
top:4px;
left:0;
width:4px;
height:4px;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.cmn-tip-container .cmn-tip-link a:active,
.cmn-tip-container .cmn-tip-link a:hover,
.cmn-tip-container .cmn-tip-link a:focus{
text-decoration:underline;
}


/* ----------------------------------------------------------------
Tooltip Agt Component
----------------------------------------------------------------- */
/* .cmn-tip-agt
----------------------------------------------- */
.cmn-tip-agt{
padding:16px 16px 10px;
border:1px solid #aaa;
position:absolute;
border-radius:4px;
width:360px;
box-sizing:border-box;
box-shadow:1px 1px 3px 0 rgba(153,153,153,.75);
min-height: 115px;
background-color:#fff;
z-index:260;
font-size:12px;
}

.cmn-tip-agt:before{
content:'';
display:block;
width:10px;
height:10px;
position:absolute;
top:-6px;
left:24px;
display:block;
border-width:0 0 1px 1px;
border-style:solid;
border-color:#aaa;
background-color:#fff;
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
transform:rotate(135deg);
}

/* .cmn-tip-agt-header
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-header{
margin-bottom:10px;
display:table;
width:100%;
}

/* .cmn-tip-agt-hdg
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-hdg{
width:100%;
display:table-cell;
vertical-align:top;
line-height:1.25;
font-size:16px;
}

/* .cmn-tip-agt-inquiry
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-inquiry{
display:table-cell;
vertical-align:top;
white-space: nowrap;
text-decoration:none;
}

.cmn-tip-agt .cmn-tip-agt-inquiry:active,
.cmn-tip-agt .cmn-tip-agt-inquiry:hover,
.cmn-tip-agt .cmn-tip-agt-inquiry:focus{
text-decoration:underline;
}

/* .cmn-tip-agt-list
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-list{
border-top:1px solid #dedede;
line-height:1.25;
}

.cmn-tip-agt .cmn-tip-agt-list > li{
border-bottom:1px solid #dedede;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-align-items:stretch;
-ms-flex-align:stretch;
align-items:stretch;
}

.cmn-tip-agt .cmn-tip-agt-list > li > div{
padding:8px 10px 5px;
}

.cmn-tip-agt .cmn-tip-agt-list > li > div:first-child{
width:5.55em;
background-color:#f0f0f0;
font-size:11px;
}

.cmn-tip-agt .cmn-tip-agt-list > li > div:last-child{
padding-right:0;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex: 1
}

/* .cmn-tip-agt-note
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-note{
margin-top:10px;
color:#666;
font-size:11px;
}

.cmn-tip-agt .cmn-tip-agt-note > li{
padding-left:1em;
text-indent:-1em;
}

.cmn-tip-agt .cmn-tip-agt-note > li:not(:first-child){
margin-top:3px;
}

/* .cmn-tip-agt-btn
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-btn{
margin:5px auto;
padding:0 8px;
border:1px solid #bbb;
border-radius:3px;
color:#555;
display:block;
min-height:30px;
background-color:#fff;
font-size:12px;
}

.cmn-tip-agt .cmn-tip-agt-btn::before{
margin-right:3px;
content:'';
display:inline-block;
width:15px;
height:15px;
vertical-align:middle;
opacity:.65;
background:url(/element/shared/images/icon/icon-balloon.svg) 0 0 no-repeat;
background-size:100% auto;
}

/* .cmn-tip-agt-loading
----------------------------------------------- */
.cmn-tip-agt .cmn-tip-agt-loading{
margin:20px auto;
color:transparent;
width:40px;
height:40px;
overflow:hidden;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background:url(/element/shared/images/icon/icon-loading.gif) 0 0 no-repeat;
background-size:40px;
text-align:center;
}