@import url('../../../css/normalize.css');
@import url('../../../css/common.css');
@import url('../../../css/webfont.css');

/*
------------------------------------------------
 common 
------------------------------------------------
*/

body{}
body ::selection{ background: #555; color: #fff}
.body_wrap{width:1280px; height:900px;}
.content_container { display:none; position:absolute; top:0; left:50%; width:1280px; height:900px; margin:0 0 0 -640px; overflow:hidden;}
.content_page_wrap { display:none;}
/*#content_page {position:absolute; width:1280px; height:900px; z-index:1;}*/
div.pages { display:none; position:absolute; top:0; left:0; width:1280px; height:900px; overflow:hidden;}
.acc_tag{position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }

.show { display:block; }
.hide { display:none; }

/* btns 20140619 */
.bn-back, .bn-preview, .bn-next{display:none; position:absolute;}
.bn-back {top:0; right:0; z-index:10;}
.bn-preview {top:50%; left:0; margin-top:-33px;z-index:100; padding:23px 25px;}
.bn-next {top:50%; right:0; margin-top:-33px; z-index:100; padding:23px 25px;}
.bn-back span, .bn-preview span, .bn-next span{display:block; text-indent:-9999px; overflow: hidden;}
.bn-back span{width:60px; height:60px; background:url('../img/bn_back.png') no-repeat left top}
.bn-preview span{width:14px; height:21px; background:url('../img/bn_preview.png') no-repeat left top}
.bn-next span{width:14px; height:21px; background:url('../img/bn_next.png') no-repeat left top}
.inverse.bn-back span{background:url('../img/bn_back_white.png') no-repeat left top}
.inverse.bn-preview span{background:url('../img/bn_preview_white.png') no-repeat left top}
.inverse.bn-next span{background:url('../img/bn_next_white.png') no-repeat left top}

/* sns 20140619 */
.sns-bns {position:absolute; bottom:40px; left:32px; display:none; z-index:10000;}
.sns-bns li {border-bottom:1px solid #000}
.sns-bns li.inverse{border-bottom:1px solid #fff;}
.sns-bns li a { display:block; width:21px; height:51px; background-position:left center; background-repeat:no-repeat; overflow: hidden; text-indent:-9999px }
.sns-bns li.sns_3 { border: none}
.sns-bns li.sns_0 a{background-image:url('../img/bn_facebook.png');}
.sns-bns li.sns_1 a{background-image:url('../img/bn_twitter.png');}
.sns-bns li.sns_2 a{background-image:url('../img/bn_qqq.png');}
.sns-bns li.sns_3 a{background-image:url('../img/bn_google.png');}
.sns-bns li.inverse.sns_0 a{background-image:url('../img/bn_facebook_white.png');}
.sns-bns li.inverse.sns_1 a{background-image:url('../img/bn_twitter_white.png');}
.sns-bns li.inverse.sns_2 a{background-image:url('../img/bn_qqq_white.png');}
.sns-bns li.inverse.sns_3 a{background-image:url('../img/bn_google_white.png');}


/* indicator */
.indicator {position:absolute; left:50%; top:95%; z-index:10; margin-left:-105px; }
.indicator li{position:relative; width:15px; height:15px; margin: 0px 6px 0px 0px; float: left; cursor : pointer;}
.indicator li a{display:block; width:15px; height:15px; text-indent:-10000px; overflow:hidden;}
.indicator-btn {background:URL('../img/indicator.png') 0 0 no-repeat;}
.indicator-btn.on {background:URL('../img/indicator_on.png') 0 0 no-repeat;}
.indicator-btn.inverse {background:URL('../img/indicator_white.png') 0 0 no-repeat;} /* 20140619 jong */
.indicator-btn.inverse.on {background:URL('../img/indicator_on_white.png') 0 0 no-repeat;}

/* loading */
.loading { position:absolute; top:50%; left:50%; margin:-8px 0 0 -38px; width:76px; height:16px; background:url('../img/loading.png') 0 0; }
.loading p { position:relative; left:0%; top:25px; text-align:center; font:12px/1 'samsungif_bd'; }

/* info_rotate */
.info_rotate { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; z-index:9999; display:none; }
.info_rotate img { width:100%; }

/*
------------------------------------------------
 customized contents
------------------------------------------------
*/
.page01 { background: #fff}
.page01 .webfont{ position: absolute; left: 361px; top: 204px; line-height: 21px; width: 558px; height: 495px; text-align: center; z-index: 1; opacity: 0}
.page01 .main_bg {position: absolute; width: 1280px; height: 900px; background: url("../img/bg_sc01.jpg") no-repeat; left: 0; top: 0; z-index: 0; opacity: 0}
.page01 .webfont p { background: url("../img/txt_sc01_1.png") no-repeat 87px 60px; padding: 395px 0 0 0}
.page01 .webfont span.txtbox { position: absolute; width: 558px; top: 394px; display: block; letter-spacing: -1px; font-size: 15px}
.page01 .webfont span.txtbox span { letter-spacing: 0}

.page02 { background: url("../img/bg_sc02.jpg") no-repeat}
.page02 h3{ position: absolute; left:53px; top:31px}
.page02 p{ position: absolute; left: 54px; top: 172px; width: 362px;}
.page02 .webfont{ position: absolute; left: 67px; top: 87px; width: 500px; height: 300px; background: none}

.page03 { background: url("../img/bg_sc03.jpg") no-repeat}
.page03 h3{ position: absolute; left: 101px; top: 41px;}
.page03 p{ position: absolute; left: 49px; top: 137px; width: 405px;}
.page03 .webfont{ position: absolute; left: 388px; top: 312px; width: 504px; height: 277px;}

.page04 { background: url("../img/bg_sc04.jpg") no-repeat}
.page04 p{ position: absolute; left:53px; top:81px}
.page04 .webfont{ position: absolute; left: 100px; top: 100px; width: 500px; height: 300px;}

.page05 { background: url("../img/bg_sc05.jpg") no-repeat}
.page05 h3{ position: absolute; left: 55px; top: 29px;}
.page05 p{ position: absolute; left: 349px; top: 27px;}
.page05 .webfont{ position: absolute; left: 100px; top: 100px; width: 1035px; height: 300px; background: none}

.page06 { background: url("../img/bg_sc06.jpg") no-repeat}
.page06 h3{ position: absolute; left: 50px; top: 41px;}
.page06 p{ position: absolute; left: 50px; top: 137px; width: 474px;}
.page06 .webfont{ position: absolute; left: 100px; top: 101px; width: 575px; height: 299px;}

.page07 { background: url("../img/bg_sc07.jpg") no-repeat}
.page07 h3{ position: absolute; left: 50px; top: 40px;}
.page07 p{ position: absolute; left: 49px; top: 136px; width: 375px;}
.page07 .webfont{ position: absolute; left: 706px; top: 546px; width: 474px; height: 254px;}

.page08 { background: #fff}
.page08 .boxAnimate { position: absolute; left: 0; top: 0; width: 1280px; height: 900px;}
.page08 .boxAnimate span { position: absolute; display: block; width: 1280px; height: 900px; left: 0; opacity: 0}
.page08 .boxAnimate .img01 { background: url("../img/bg_sc08_1.png") no-repeat top; top: 0px;}
.page08 .boxAnimate .img02 { background: url("../img/bg_sc08_2.png") no-repeat bottom; bottom: 0;}
.page08 .webfont{ position: absolute; left: 435px; top: 394px; width: 411px; height: 112px; z-index: 1; opacity: 0; letter-spacing: -1px}
.page08 .webfont p{ position: absolute; left: 32px; top: 36px; text-align: center; width: 349px;}

.page09 { background: url("../img/bg_sc09_0.jpg") no-repeat}
.page09 .img_guide{ position: absolute; left: 0; bottom: 0}
.page09 h3{ position: absolute; left: 50px; top: 42px;}
.page09 p{ position: absolute; left: 49px; top: 139px; width: 266px;}
.page09 .webfont{ position: absolute; left: 100px; top: 100px; width: 364px; height: 572px; z-index: 2}
.page09 .mask {position: absolute; width: 1280px; height: 900px; background: url("../img/bg_sc09_1.jpg") no-repeat; left: 0; top: 0; z-index: 1}

.page10 { background: url("../img/bg_sc10.jpg") no-repeat}
.page10 p{ position: absolute; left:0px; top:0px; text-align: center}
.page10 .webfont{ position: absolute; left: 351px; top: 245px; width: 700px; height: 300px; background: none}

/* 2014.05.19 webFont ADD */
/*.webfont_head{ margin-bottom:18px; font-size: 18px; line-height: 28px; font-family:secgcb}*/
.webfont{ font-size: 14px; font-family: secgcm; letter-spacing: -0.5px; line-height: 21px; text-align:justify; word-break: normal; color: #000; background-image: url("../img/bg_font_box.png")}
.webfont span { letter-spacing: 0; }
/* 2014.05.19 webFont ADD */