/* 공통 CSS */
/* ---------------------------------------------------------------------------------------------------------- */
@import url(reset.css);
@import url(common.css);    

/* 디자인 Style */
/* ---------------------------------------------------------------------------------------------------------- */
#container { position:relative; border-top:1px solid #CCC; padding:5%; overflow:hidden; }
#container .image { float:right; position:relative; width:50%; }
#container .image img { -webkit-box-shadow:0 3px 8px rgba(0,0,0,0.7);
-moz-box-shadow:0 3px 8px rgba(0,0,0,0.7); -o-box-shadow:0 3px 8px rgba(0,0,0,0.7);
box-shadow:0 3px 8px rgba(0,0,0,0.7); }
#container .sub-title h1 { position:relative; font-weight:bold;
 font-family: Calibri, Candara, "Gill Sans", "Gill Sans MT", sans-serif; color:#000; }
#contents .sub-title h1:after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 80px;
height: 2px; }
#container .sub-title h2 { font-family: Calibri, Candara, "Gill Sans", "Gill Sans MT", sans-serif; color:#666;
font-weight:normal; }

/* 디자인 랜덤색상
-------------------------------------------------------------------------------------------------------------*/
html.color0 .action .button:hover .line { background-color: #ee7a49; }
html.color1 .action .button:hover .line { background-color: #f5db22; }
html.color2 .action .button:hover .line { background-color: #57BC8A; }
html.color3 .action .button:hover .line { background-color: #4EA8D7; }
html.color4 .action .button:hover .line { background-color: #AB7DC2; }
html.color5 .action .button:hover .line { background-color: #ff6486; }

html.color0 .action .button:hover { border-color: #ee7a49; }
html.color1 .action .button:hover { border-color: #f5db22; }
html.color2 .action .button:hover { border-color: #57BC8A; }
html.color3 .action .button:hover { border-color: #4EA8D7; }
html.color4 .action .button:hover { border-color: #AB7DC2; }
html.color5 .action .button:hover { border-color: #ff6486; }

html.color0 #contents .sub-title h1:after { background: #ee7a49; }
html.color1 #contents .sub-title h1:after { background: #f5db22; }
html.color2 #contents .sub-title h1:after { background: #57BC8A; }
html.color3 #contents .sub-title h1:after { background: #4EA8D7; }
html.color4 #contents .sub-title h1:after { background: #AB7DC2; }
html.color5 #contents .sub-title h1:after { background: #ff6486; }

/* Modal영역 close 버튼 색상 */
html.color0 .close { color: #ee7a49; }
html.color1 .close { color: #f5db22; }
html.color2 .close { color: #57BC8A; }
html.color3 .close { color: #4EA8D7; }
html.color4 .close { color: #AB7DC2; }
html.color5 .close { color: #ff6486; }

html.color0 .close:hover, .close:focus { color: #ee7a49; }
html.color1 .close:hover, .close:focus { color: #f5db22; }
html.color2 .close:hover, .close:focus { color: #57BC8A; }
html.color3 .close:hover, .close:focus { color: #4EA8D7; }
html.color4 .close:hover, .close:focus { color: #AB7DC2; }
html.color5 .close:hover, .close:focus { color: #ff6486; }

/* Modal영역 헤더 글자 색상 */
html.color0 .modal-header h3 { color: #ee7a49; }
html.color1 .modal-header h3{ color: #f5db22; }
html.color2 .modal-header h3 { color: #57BC8A; }
html.color3 .modal-header h3 { color: #4EA8D7; }
html.color4 .modal-header h3 { color: #AB7DC2; }
html.color5 .modal-header h3 { color: #ff6486; }
             

/* 액션버튼 영역 */
/* ---------------------------------------------------------------------------------------------------------- */
.action { margin-top:5%; }
.action .button .arrow { position:absolute; top:15px; right:25px; width:10px; height:10px; border-bottom:4px solid #000; border-right:4px solid #000;
-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg);
transform:rotate(-45deg); -webkit-transition:0.4s ease-out; -moz-transition:0.4s ease-out;
-o-transition:0.4s ease-out; transition:0.4s ease-out; }
.action .button:hover .arrow { right:20px; -webkit-transition:0.4s ease-out; -moz-transition:0.4s ease-out;
-o-transition:0.4s ease-out; transition:0.4s ease-out; }
.action .button { position: relative; border: 2px solid rgba(0,0,0,1); width: 150px; height: 50px;
display: block; -moz-transition: 0.4s ease; -o-transition: 0.4s ease; -webkit-transition: 0.4s ease;
transition: 0.4s ease; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
box-sizing: border-box; font-size: 1.2em; color: #000; font-weight: 700; padding: 0 0 0 20px; line-height: 46px;
text-transform: uppercase; text-decoration: none; text-align: left; }
.action .button .line { position: absolute; background: none; -moz-transition: 0.4s; -o-transition: 0.4s;
-webkit-transition: 0.4s; transition: 0.4s; }
.action .button .line.line-top { width: 0; height: 2px; top: -2px; left: -110%; }
.action .button .line.line-right { width: 2px; height: 0; top: -110%; right: -2px; }
.action .button .line.line-bottom { width: 0; height: 2px; bottom: -2px; right: -110%; }
.action .button .line.line-left { width: 2px; height: 0; bottom: -110%; left: -2px; }
.action .button:hover { border: 2px solid; background-position: 140px center; }
.action .button:hover .line.line-top { width: 100%; left: -2px; }
.action .button:hover .line.line-right { height: 100%; top: -2px; }
.action .button:hover .line.line-bottom { width: 100%; right: -2px; }
.action .button:hover .line.line-left { height: 100%; bottom: -2px; }

/*---- Modal 영역 ---*/
/*------------------------------------------------------------------------------------------------------*/
.fade { opacity: 0;  -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear;  -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; }
.fade.in { opacity: 1; }
.close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; text-shadow: 0 1px 0 #ffffff; opacity: 0.8;
  filter: alpha(opacity=20); }
.close:hover, .close:focus { text-decoration: none; cursor: pointer; opacity: 1; filter: alpha(opacity=40); }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; outline:none; }
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background:rgba(0,0,0,0.5); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); }
.modal { position: fixed; top: 15%; left: 43%; z-index: 1050; width: 800px; margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
outline: none; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; }
.modal.fade { top: -25%; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out; transition: opacity 0.3s linear, top 0.3s ease-out; }
.modal.fade.in { top: 10%; }
.modal-header { padding: 9px 15px; border-top-left-radius:15px; border-top-right-radius:15px; background:#1b1c1e; -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.3);  -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.3);  -o-box-shadow:0px 0px 7px rgba(0,0,0,0.3); box-shadow:0px 0px 7px rgba(0,0,0,0.3); }
.modal-header .close { margin-top: 2px; }
.modal-header h3 { margin: 0; line-height: 30px; }
.modal-body { position: relative;height:auto; padding: 15px; overflow-y: auto; }
.modal-body p { line-height:20px; }
.modal-body p img { max-width:100%;}
.modal-body .img { float:left; width:50%; }
.modal-body .note { float:right; width:45%; margin-top: 10px; color: #000 } 
.modal-form { margin-bottom: 0; }

.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }

@-webkit-keyframes fadeIn { 
0% {
opacity:0
}
1