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

/* Main Style */
/* ---------------------------------------------------------------------------------------------------------- */
#container, #container2 { position:relative; border-top:1px solid #999; padding:5%; overflow:hidden; }
#container .image { float:right; position:relative; width:50%; }
#container2 .image { float:left; position:relative; width:50%; }
#container .image img, #container2 .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); }
#container2 .sub-title2 { float:right; text-align:right; }
#container .sub-title h1, #container2 .sub-title2 h1 { position:relative; font-weight:bold;
 font-family: Calibri, Candara, "Gill Sans", "Gill Sans MT", sans-serif; color:#000; }
#container .sub-title h2, #container2 .sub-title2 h2 { font-family: Calibri, Candara, "Gill Sans", "Gill Sans MT", sans-serif; color:#666;
font-weight:normal; }
#contents .sub-title h1:after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 80px;
height: 2px; }
#container2 .sub-title2 h1:after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 80px;
height: 2px; }

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

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

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

/* 액션버튼1 영역 */
/* ---------------------------------------------------------------------------------------------------------- */
.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; }

/* 액션버튼2 영역 */
/* ---------------------------------------------------------------------------------------------------------- */
.action2 { margin-top:5%; }
.action2 .button .arrow { position:absolute; top:15px; left:25px; width:10px; height:10px;
border-bottom:4px solid #000; border-right:4px solid #000;
-webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg);
transform:rotate(135deg); -webkit-transition:0.4s ease-out; -moz-transition:0.4s ease-out;
-o-transition:0.4s ease-out; transition:0.4s ease-out; }
.action2 .button:hover .arrow { left:20px; -webkit-transition:0.4s ease-out; -moz-transition:0.4s ease-out;
-o-transition:0.4s ease-out; transition:0.4s ease-out; }
.action2 .button span { position:absolute; right:20px; }
.action2 .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; }
.action2 .button .line { position: absolute; background: none; -moz-transition: 0.4s; -o-transition: 0.4s;
-webkit-transition: 0.4s; transition: 0.4s; }
.action2 .button .line.line-top { width: 0; height: 2px; top: -2px; left: -110%; }
.action2 .button .line.line-right { width: 2px; height: 0; top: -110%; right: -2px; }
.action2 .button .line.line-bottom { width: 0; height: 2px; bottom: -2px; right: -110%; }
.action2 .button .line.line-left { width: 2px; height: 0; bottom: -110%; left: -2px; }
.action2 .button:hover { border: 2px solid; background-position: 140px center; }
.action2 .button:hover .line.line-top { width: 100%; left: -2px; }
.action2 .button:hover .line.line-right { height: 100%; top: -2px; }
.action2 .button:hover .line.line-bottom { width: 100%; right: -2px; }
.action2 .button:hover .line.line-left { height: 100%; bottom: -2px; }

@media screen and (min-width: 320px) {
#container .image, #container2 .image { width:100%; }
#container .action, #container2 .action2 { display:none; }
#container .sub-title h1, #container2 .sub-title2 h1 { font-size:23px; line-height:28px; } 
#container .sub-title h2, #container2 .sub-title2 h2 { font-size:11px; line-height:25px; }
#contents .sub-title h1:after { width:50px; }
}/*/mediaquery*/

@media screen and (min-width: 480px) {
#container .image, #container2 .image { width:100%; }
#container .action, #container2 .action2 { display:none; }
#container .detail-wrap, #container2 .detail-wrap { width:100%; }
#container2 .sub-title2 { float:left; }
#container .sub-title h1, #container2 .sub-title2 h1 { font-size:25px; line-height:30px; } 
#container .sub-title h2, #container2 .sub-title2 h2 { font-size:12px; line-height:27px; }
#contents .sub-title h1:after { width:60px; }
}/*/mediaquery*/

@media screen and (min-width: 740px) {
#container .image, #container2 .image { width:50%; }
#container .action { display:block; }
#container2 .action2 { display:block; clear:both; float:right; }
#container .detail-wrap { float:left; position:relative; width:50%; }
#container2 .detail-wrap { float:right; position:relative; width:50%; }
#container .sub-title { margin-top:12%; }
#container2 .sub-title2 { float:right; margin-top:12%; }
#container .sub-title h1, #container2 .sub-title2 h1 { font-size:35px; line-height:35px; } 
#container .sub-title h2, #container2 .sub-title2 h2 { font-size:16px; line-height:25px; }
#contents .sub-title h1:after { width:80px; }	
}/*/mediaquery*/

@media screen and (min-width: 1025px) {
#container .sub-title h1, #container2 .sub-title2 h1 { font-size:45px; line-height:45px; } 
#container .sub-title h2, #container2 .sub-title2 h2 { font-size:18px; line-height:25px; }
}/*/mediaquery*/