@charset "utf-8";
@import url("font.css");

/*base*/
body{background:#000;}/*0619추가, 1022수정*/
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
    margin:0px;
    padding:0px;
    -webkit-text-size-adjust:100%;
    -ms-overflow-x: hidden;

}
body, input, textarea, select, button, table, th, td, p{
    font-size:1em;
    line-height:1.5em;
    font-family:"HDHarmonyL",AppleGothic,"dotum",dotum;
}
p {
    text-align:justify;
    color:#bebebe;
}

img {
    border:0 none transparent;
    display:block;
}
img, embed, object, video {
 max-width:100%
}
ul, ol {
 list-style:none
}
table {
    border:0;
    border-collapse:collapse;
    table-layout:fixed;
}
table caption {
    display:none;
}
a {
    color:#fff;
    text-decoration:none;
}
em {
    font-style:normal;
}

.wrap {position: relative;width:100%; max-width: 1400px; min-width:1024px;margin: 0 auto; display: block;overflow:hidden;}
.main_logo{position:absolute;z-index:9;top:20px;left:30px;}
.main_movie{position: relative;width:100%; max-width: 1400px;height: 86vh;min-height: 652px;margin: 0 auto;background: url(../images/movie_sample_pc.jpg) no-repeat center center;background-size: cover; background-position-y: -37px; overflow: hidden;}
.main_movie_play {position:relative; overflow:hidden; width:100%; max-width:1400px; min-width:1024px; height: 86vh; background:url(../../tablet/images/movie_sample_2.jpg) no-repeat center center;}
.main_movie_click {width:100%; height:100%;}

.play{ position: absolute; top: 0; background-color: #000;} 
.hide {display:none !important;}
.main_movie #mv { position:absolute; top:0; left:0; width: 100vw; height:100%; background-color:#000;}
.main_movie .mv_twrap {display:flex; height:100%; align-items: center;}
.main_movie .mv_twrap .mv_tin {width:735px; margin-left:100px; }
.main_movie .mv_twrap .mv_tin .mv_tit {font-family: 'HDHarmonyM';font-size: 70px;margin-top:30px; color:#fff;line-height:1.1;letter-spacing: -1px;-ms-overflow-y:hidden;}
.main_movie .mv_twrap .mv_tin .mv_tit span { display: block; margin-left: 18px; color:#5498b3; letter-spacing: -7px;}
.main_movie .mv_twrap .mv_tin .mv_sub {font-family: 'HDHarmonyL';font-size: 23px;padding-left:25px;line-height:1.6;color:#fff;}
.main_movie .mv_twrap .mv_tin .mv_sub.first {margin:56px 0px 0;}
.main_movie .mv_twrap .mv_tin .mv_sub {margin-top:17px;} 
.main_movie .mv_twrap .mv_tin .mv_sub span { color: #5498b3; }


.navigation{display:none;}
.navigation_ver{display:block;position:relative;width:100%;max-width: 1400px; min-width:1024px; margin: 0 auto;margin-top: -84px;}
.navigation_ver .menu{width:100%;height:102px;background:url(../../tablet/images/menu_bg.gif) repeat-x; }
.navigation_ver .menu_k_wrap {position:relative; overflow:hidden; }
.navigation_ver .menu_k_wrap a {position:absolute; right:210px; bottom:0;}
.navigation_ver .menu_k_wrap p { font-family: 'HDHarmonyL'; line-height:1.2; }
.navigation_ver .menu_k_wrap p:after { content: ''; position: absolute; top: 1px; right: -13px;  width: 2px; height: 14px; background-color: #bebebe;}
.navigation_ver .nav_list{overflow:hidden;}
.navigation_ver .nav_list li{float:left; width: 11.1%;}
.navigation_ver .nav_list li a {display:inline-block; overflow:hidden;}
.navigation_ver .nav_list li a img {width:100%;}
.right_float_bg { position: absolute; width: 181px; height: 467px; top:50% !important; transform: translateY(-50%); background: url(../../tablet/images/slide_bg.png) no-repeat top left; z-index:10;}
.close_float { display: block; position: absolute; top: 5px;  right: 5px; width: 15px; height: 15px;}


/* Right Floating Menu */
.right_float_bg {display:none; position:absolute; width:181px; height:467px; top:20px; right:-160px; background:url(../../tablet/images/slide_bg.png) no-repeat top left;}
.close_float {display:block; position:absolute; top:5px; right:5px; width:15px; height:15px;}
.direction_arrow {position:absolute; width:18px; top:180px; left:5px;}
.direction_arrow img {margin-bottom:10px;}
.direction_view {position:absolute; width:18px; top:190px; left:5px; display:none;}
.float_imagelist {position:absolute; width:120px; height:363px; top:76px; right:20px; overflow:hidden;}
.float_imagelist li {width:100%; margin-bottom:14px;}



/* 팝업 무비 - 영상 */
.ver_movie_pop {position:absolute; width:728px; height:504px; top:50%; left:50%; margin-left:-364px; margin-top:-252px; background-color:#3d3d3d; z-index:100;}
.popup_title {position:relative; width:650px; height:58px; margin:0 auto; margin-bottom:18px; border-left:1px solid #5498b3;}
.popup_title img{position:absolute; bottom:0; margin-left:7px;}
.popup_closebtn {display:block; position:absolute; width:15px; height:15px; right:10px; top:10px;}
.movie_view {position:relative; width:650px; margin:0 auto 20px auto;}
.movie_view img {max-width:100%;}
.arrow_left,.arrow_right {display:block; position:absolute; width:40px; height:40px; top:50%; margin-top:-20px;}
.arrow_right {right:0;}
.popup_pause {display:block; position:absolute; width:65px; height:40px; top:50%; margin-top:-20px; left:50%; margin-left:-33px;}
.movie_bar {position:absolute; width:634px; height:31px; bottom:25px; left:11px; background:url(../../tablet/images/popup_playbar_vert2.png) no-repeat top left;}
.movie_progress {position:relative; width:277px; height:7px; margin:12px 0 0 14px; background-color:#5498b3;}
.bar_time {position:absolute; width:39px; height:20px; right:0; margin:-21px -19px 0 0;background:url(../../tablet/images/progress_time.png) no-repeat top left;}
.bar_time span {display:block; height:17px; line-height:17px; text-align:center; font-size:0.7em;}
.popup_sub_title {position:relative; width:650px; margin:0 auto;}


/* 팝업 무비 - 사진과글 */
.ver_movie_pop_photo {position:absolute; width:728px; height:522px; top:50%; left:50%; margin-left:-364px; margin-top:-261px; background-color:#3d3d3d; z-index:100;}
.popup_closebtn_photo {display:block; position:absolute; width:15px; height:15px; right:10px; top:10px;}
.phototext_view {position:relative; width:650px; margin:0 auto 20px auto;}
.phototext_view img {float:left; margin-right:24px;}
.popup_ptext_wrap {position:relative; float:left; width:305px; }
.popup_ptext_textwrap {font-family: 'HDHarmonyM'; height:334px; border-right:1px solid #646464; overflow-y:auto;}
.popup_ptext_wrap h3 { font-family: 'HDHarmonyL';font-size:1.6em; color:#fff; margin:19px 0;}
.popup_ptext_textwrap p {width:285px; margin-bottom:15px; font-size:0.9em; line-height:1.5em; color:#bebdbd;}
.popup_ptext_textwrap p strong {width:285px; line-height:3em; color:#fff;}
.popup_ptext_wrap img {position:absolute; top:62px; right:-29px;}

/* 팝업 무비 - 글만 */
.ver_movie_pop_photo {position:absolute; width:728px; height:522px; top:50%; left:50%; margin-left:-364px; margin-top:-261px; background-color:#3d3d3d; z-index:100;}
.popup_closebtn_photo {display:block; position:absolute; width:15px; height:15px; right:10px; top:10px;}
.onlytext_view {position:relative; width:650px; margin:0 auto 20px auto;}
.popup_otext_wrap {position:relative;}
.popup_otext_wrap h3 {font-size:1.4em; color:#5498b3; margin:50px 0 32px 0;}
.popup_otext_wrap .popup_otext_subtitle {width:650px; margin-bottom:40px; font-size:14px; line-height:1.3em; color:#fff; text-align:right;}
.popup_otext_textwrap {height:235px; border-right:1px solid #646464; overflow-y:scroll;}
.popup_otext_textwrap p {width:630px; margin-bottom:15px; font-size:16px;  line-height:1.5em; padding-right: 10px !important; color:#bebdbd;}
.popup_otext_wrap img {position:absolute; top:127px; right:-5px;}


/*페이스북 팝업*/
.facebook_wrap {position:absolute; width:453px; height:612px; top:50%; left:50%; margin:-306px 0 0 -226px; background-color:#3d3d3d; z-index:110;}
.facebook_title {width:100%; margin-bottom:30px;}
.facebook_title a {position:absolute; top:22px; right:13px; width:19px; height:19px;}
.facebook_list_title {width:100%; margin-left:15px; margin-bottom:14px;}
.facebook_list_photo {position:relative; width:417px; height:244px; margin:0 auto;}
.facebook_list_photo li {float:left; width:90px; height:90px; margin:0 7px 33px 7px;}
.facebook_list_photo li span {display:block; position:relative; width:100%; height:12px; color:#fff; font-size:0.7em; text-align:center; margin-bottom:13px;}
.fb_pagenation {display:block; width:50px; height:10px; margin:0 auto; font-size:0.7em; color:#FFF;}
.fb_pagenation img {float:left;}
.fb_pagenation .page_num {float:left; width:40px; height:10px; text-align:center; margin-top:-8px;}
.fb_pagenation .page_num span{color:#878787;}
.facebook_select_title {width:433px; border-top:1px solid #545454; padding-top:26px; padding-left:5px; margin:10px auto 15px auto; clear:both;}
.fb_select_list {position:relative;width:405px; margin:0 auto; }
.fb_select_list img {float:left;}
.fb_select_list .selection_img {margin-right:11px; border:1px solid #5498b3; }
.fb_btn {position:relative; width:127px; margin:130px auto 0 auto; clear:both;}
.modal_bg {position:fixed; top:0; left:0; font-family: 'HDHarmonyL'; width:100%; height:100%; background-color:rgba(0,0,0,.7); z-index:50;}


/*Memorial Hall Main and Navi*/
.memorial_navi_wrap {position:relative; height:28vh;/*height: 280px;*/background: url(../images/memorial_line_bg.jpg)repeat;overflow:hidden;}
.memorial_navi_wrap a {position:relative;background-size:cover;}
.memorial_navi_wrap a p {position:absolute;bottom: 15px;width:100%;text-align:center;font-family: 'HDHarmonyL';font-size: 23px;color: #fff;}
.memorial_navi_wrap a:hover p {color:#5498b3;}

.memorial_main a {display:block;float: left; width:25%; height: 100%; }
.memorial_main a.close_btn_right {position:absolute; right:0; width:auto; height:auto; z-index:12;}

.memorial_navi_01 {background:url("../images/memorial_pc_top_eng_01.jpg")no-repeat center center;}
.memorial_navi_02 {background:url("../images/memorial_pc_top_eng_02.jpg")no-repeat center center;}
.memorial_navi_03 {background:url("../images/memorial_pc_top_eng_03.jpg")no-repeat center center;}
.memorial_navi_05 {background:url("../images/memorial_pc_top_eng_05.jpg")no-repeat center center;}


/*Memorial Hall Text*/
.memorial_cont{position: relative;top: 0;display: block;margin-top: 0;padding-top: 20px;height: 67.5vh; background:url("../images/memorial_pc_btm.jpg")no-repeat bottom; background-size:cover;background-color: #0f0f0f; overflow:hidden;}
.main_text_wrap {position:absolute;top: 100px;right:20px;width: 45%;height: 100%;/* border-right: 1px solid #5498b3; */}
.main_text_wrap .text_scroll_bar {position:absolute;top:0px;right:-10px;width:11px;height:11px;margin-right: 0;z-index:10;}
.main_text {position:relative;top:0;right:0;height: 56vh;padding-right: 20px;border-right: 2px solid #5498b3;overflow-y:scroll;box-sizing: border-box;}
.main_text p { font-family: 'HDHarmonyL'; font-size:20px; color:#fff; margin-bottom: 20px;line-height:1.6;}
.main_text p:last-child {padding-bottom:50px;}
.main_text h2 { font-family: 'HDHarmonyM'; padding:10px 0 20px 0; font-size:2.5em; color:#fff; margin-bottom:50px;}
.main_text span {right:0;font-family: 'HDHarmonyL';font-size: 20px;color: #fff;float: right;margin-top: -50px;}


/* adjust 0717 */
.main_text_wrap .mini_title{border-top:1px solid #417B91; font-size:20px; padding-top:15px; color:#5498b3;}
.content_date{position:absolute; top:382px;  left:356px; width:339px; border-top:1px solid #6B6B6B; padding-top:10px; font-size:0.8em; color:#8A8A8A;}


/* fix nav */
.fix_wrap { position:fixed; top:0; left:0; width: 100%; height: 200px; text-align: center; color: #fff; font-size: 40px; font-family: 'HDHarmonyL'; z-index:10;}
.fix_wrap .in { position:relative; display: flex;  align-items: center; justify-content: center; width:100%; max-width: 1400px; height: 100%; margin: 0 auto; background-color: #242426;}
.fix_wrap .in h2 {font-size:65px;line-height: 2.5;}
.fix_wrap .in h2 span {font-size:30px;}
.logo_area {position:absolute; top:0; left:-1px; max-width:1400px; min-width:1024px; z-index:11;}
.logo_area a { display: block;  width: 180px; height: 60px; top: 0; left: 0; background: url(../images/img_top_logo.png)no-repeat center center; z-index: 99;}


/* 아산의 생애 */
.asanlife_main,.asanlife_main2 {position:relative;width: 100%; margin-top:200px;}
.asanlife_main .asanlife_contents, .asanlife_main2 .asanlife_contents {width:100%;}
.asanlife_main {overflow: hidden;height: 77vh;}
.asanlife_main .asan_tab_conbox {overflow-y:scroll;}
.asanlife_main2 { height: 77vh; background-size: cover;}
.asanlife_main2 .asanlife_contents { width: 100%; height:100%;  background:url("../images/biography_pc.jpg")no-repeat center bottom; background-size:cover; }
.asanlife_main .asanlife_contents {height: 3650px;background: url("../../tablet/images/asan_life_img_vert2.jpg") repeat-y left top;background-size: contain;}
.asanlife_contents .close_btn {position:absolute; top:0; right:0;} 


.asan_tab_menu .tab1_01 { background: #000; border-bottom: 2px solid #5398b3; }
.asan_tab_menu .tab1_02 { background: rgba(0, 0, 0, 0.4); border-bottom: 2px solid #000; opacity:0.7;}
.asan_tab_menu .tab2_01 { background: rgba(0, 0, 0, 0.4); border-bottom: 2px solid #000; opacity:0.7;}
.asan_tab_menu .tab2_02 { background: #000; border-bottom: 2px solid #5398b3; }

.asan_tab_conbox {position:absolute;top: 80px;width: 100%;height: 60vh;font-family: 'HDHarmonyL';padding-right:20px;clear:both;}
.asan_tab_conbox_contents{width:480px; height:10503px; }
.asan_tab_conbox h2 {margin:10px 10px 0 10px; font-size:1.5em; color:#fff;}
.asan_tab_conbox h2.big_text {font-size:3em; margin-bottom:20px;}
.asan_tab_conbox .bookmark {font-size:1.1em; margin:30px 10px 0 10px; font-family: 'HDHarmonyL'; color:#fff;}
.asan_tab_conbox img.lhthumb {display:none;}
.asan_tab_conbox img.lhthumbVer {display:block;}
.con_p_01,.con_p_02 {width:400px;}

#no_scroll{overflow:hidden;}
.asan_tab_wrap {position:absolute;max-width: 1400px;width: 90%;height:380px;top:51px;left: 50%;transform: translateX(-50%);}
.asan_tab_wrap .text_scroll_bar {position:absolute; top:51px; right:-30px; margin-top: 20px;z-index:10;}
.asan_tab_wrap .scrollArea {width:521px; height:305px; margin-top:10px; border-right:1px solid #444548;}

.asan_tab_menu {margin-bottom:50px;}
.asan_tab_menu a { display: flex; align-items: center; justify-content: center; width: 50%; height: 44px; font-family: 'HDHarmonyL'; font-size: 22px; text-align: center; color: #fff;
 float:left; box-sizing: border-box;}


/*.asan_tab_conbox_contents 이미지 텍스트로 교체 추가 코딩*/
.asan_tab_conbox_contents .intro_txt{padding-bottom:40px; color:#fff;} 
.asan_tab_conbox_contents .intro_txt span{display:block; padding-top:20px;}
.asan_tab_conbox_contents h1{font-size:19px; line-height:35px; text-align:center; color:white; padding-bottom:10px;}
.asan_tab_conbox_contents h1 span{display:block; font-size:18px; line-height:23px;}
.asan_tab_conbox_contents h2{font-size:18px; line-height:25px; color:#5498b3; padding:20px 0 15px; text-align:center;}
.asan_tab_conbox_contents h2.first_h2{padding-top:10px;}
.asan_tab_conbox_contents img{width:482px; height:275px; margin:0 auto; padding-bottom:15px;}
.asan_tab_conbox_contents p{font-size:13px; line-height:20px; padding-bottom:30px;}


div.historySec {width:100%; height:2975px; background:url(../../tablet/images/life_profile_06.png) no-repeat 0 0;}
.history_listbox {color:#fff;}
.history_listbox .cap {margin-top:30px; padding:30px 0 15px 30px;}
.history_listbox .cap:before {  content: '';  position: absolute; left: 0; width: 14px; height: 2px;  margin-top: 12px; background: #5498b3;}
.history_listbox ul li { position: relative; display: inline-table;width:100%;font-size:20px;-ms-overflow-y:hidden;}
.history_listbox ul li p {position: relative;display: inline-table;vertical-align:top;color:#fff;line-height: 2;font-family: 'HDHarmonyL';}
.history_listbox ul li p:nth-child(1) { position:static; width: 100px;font-family: 'HDHarmonyM';}
.history_listbox ul li p:nth-child(2) {width: 105px; padding:0 20px;font-family: 'HDHarmonyM';}
.history_listbox ul li p:nth-child(3) { padding-right: 0px; padding-left:20px; width: 70%; }
.history_listbox ul li p span {font-size:17px; vertical-align: top;}

.history_listbox ul {position:relative; padding-bottom:40px;}
.history_listbox ul li p:first-child:after{ content: ''; position: absolute;  top: 0;  left:99px; width: 1px;  height: 200%; background: #344248;}
.history_listbox ul li p:nth-child(3):after { content: ''; position: absolute;  top: 0;  left: -5px;  width: 1px;  height: 100%;  background: #4c4c4c;}
.history_listbox ul li p:first-child:before {content: ''; width: 3px;  height: 3px;  background: #fff;  position: absolute;  top: 15px; left:99px; border-radius: 100%; z-index: 1;}
.history_listbox ul li p:nth-child(3) span:before {content: ''; width: 3px;  height: 3px;  background: #fff;  position: absolute;  top: 15px; left:0; border-radius: 100%;  margin-left: -6px;z-index:1;}

.history_listbox ul li:first-child p:nth-child(1):after, .history_listbox ul li:first-child p:nth-child(3)::after{top:20px;}
.history_listbox ul li:nth-last-child(2) p:last-child::after {padding-bottom:0; height: 100%;}
.history_listbox ul li:nth-last-child(2) p:first-child:after {  height: 150%;}
.history_listbox ul li:last-child p:nth-child(1)::after { height: 50%;}
.history_listbox ul li:last-child p:nth-child(3)::after {min-height:auto; height:50%;}
.history_listbox ul li p.blue { color: #5498b3;}
.history_listbox ul li p.blue span { padding: 0 10px; vertical-align: middle;}

.bookmark { color:#ddd; line-height:1.8; margin-bottom: 20px; }
.slogan {  width:600px; font-size: 1.3em; line-height: 1.5; font-family: 'HDHarmonyM'; padding:0; margin-top: 40px; margin-bottom: 20px; color: #fff; text-align: center;text-shadow: 0 0 2px #222;}
.slogan_sub {  font-size: 18px; line-height: 1.5; width: 100%;  padding: 0;  margin-top: 40px; margin-bottom: 10px; text-align: center;}
.slogan span { display: block; font-size:28px;}
.min { display:block; padding-top: 20px;  padding-left:10px; color:#bebebe; }


/* 팝업 */
.asan_life{position:relative; height:634px; background:url(../images/asan_life_img.jpg) no-repeat left top;}
.life_pop_bg {position:relative; width:800px; height:570px; top:50%; left:50%; margin-left:-400px; margin-top:-286px; background:url(../images/life_popup_bg.png) no-repeat left 62px;}
.life_pop_head {position:relative; width:800px; height:62px; margin-bottom:18px; background:#2b2b2b; border-bottom:1px solid #5498b3;}
.life_pop_head h1 {position:absolute; padding:14px 0 0 10px; margin-left:40px; border-left:1px solid #5498b3; font-size:1.5em; color:#fff;}
.life_pop_close {position:absolute; right:30px; top:20px;}
.life_list_wrap {position:relative; width:700px; height:405px; margin-left:50px; border-right:1px solid #646464; }
.life_list_scrollbar {position:absolute; top:0; right:-6px; width:11px; height:11px;}
.life_popup_contents{ height:405px;overflow-y:scroll;overflow-x: hidden;}
.life_popup_contents .inner {padding-right:20px;}
.life_popup_contents h1{font-size:19px; line-height:35px; text-align:center; color:white; padding-bottom:10px;}
.life_popup_contents h1 span{display:block; font-size:18px; line-height:23px;}
.life_popup_contents h2 img{padding-top:30px; padding-bottom:15px;}
.life_popup_contents img{margin:0 auto; padding-bottom:30px;}
.life_popup_contents p{font-size:13px; line-height:20px; padding-bottom:15px;}

/* 삶과 도전 수정 */
.asan_life{position:relative; height:1050px; background:url(../../tablet/images/asan_life_img.jpg) no-repeat left top;}
.life_pop_bg {position:relative; width:800px; height:570px; top:50%; left:50%; margin-left:-400px; margin-top:-286px; background:url(../../tablet/images/life_popup_bg.png) no-repeat left 62px;}
.life_pop_head {position:relative; width:800px; height:62px; margin-bottom:18px; background:#2b2b2b; border-bottom:1px solid #5498b3;}
.life_pop_head h1 {position:absolute; padding:14px 0 0 10px; margin-left:40px; border-left:1px solid #5498b3; font-size:1.5em; color:#fff; -ms-overflow-y:hidden;}
.life_pop_close {position:absolute; right:30px; top:20px;}
.life_list_wrap {position:relative; width:700px; height:405px; margin-left:50px; border-right:1px solid #646464; }
.life_list_scrollbar {position:absolute; top:0; right:-6px; width:11px; height:11px;}
.life_popup_contents{width:690px; height:405px; font-family: 'HDHarmonyL'; color: #fff; overflow-y:scroll; overflow-x: hidden;}
.life_popup_contents .inner{padding-right:25px;}
.life_popup_contents .pop_tbox .bookmark { margin-top: 0;  padding-bottom: 10px; padding-top:10px; color: #fff; word-break: keep-all;}
.life_popup_contents .pop_tbox .min{padding:0; opacity: 0.5;}
.life_popup_contents .pop_tbox .first {padding-top:20px;}
.life_popup_contents h1{font-size:19px; line-height:35px; text-align:center; color:white; padding-bottom:30px;}
.life_popup_contents h1 span{display:block; font-size:18px; line-height:23px;}
.life_popup_contents h2 img{padding-top:30px; padding-bottom:15px;}
.life_popup_contents img{margin:0 auto;}
.life_popup_contents p{ font-family: 'HDHarmonyL'; font-size:0.9em;  padding-bottom:15px; color: #bebebe; line-height:1.5;}
.life_popup_contents .fc_blue {color:#5498b3;font-size:28px;}
.life_popup_contents .slogan {  font-size: 18px; line-height: 1.5;  width: 100%; padding:0; margin-top: 40px; margin-bottom: 20px; color: #fff; text-align: center;}
.life_popup_contents .slogan_sub {  font-size: 28px; line-height: 1.5; width: 100%;  padding: 0;  margin-top: 40px; margin-bottom: 10px; text-align: center;}
.life_popup_contents .slogan span { display: block; font-size:28px;}


/* 도서로 보는 아산 */
.book_main {position: relative;height: 77vh;margin-top: 200px;background: url("../images/book_hor_pc.jpg") no-repeat center center;background-size: cover;}
.book_main a {position:absolute;width: 201px;height: 250px;top: 198px;}
.book_main .book1 {left: 210px;}
.book_main .book2 {left: 470px;}
.book_main .book3 {left: 726px;}
.book_main .book4 {left: 993px;}
.book_main .close {width:40px;height:40px;top: 0;right:0;background:url("../../tablet/images/btn_close_box.png") no-repeat 0 0;}
.book_main .book_list_btn {width: 183px;height: 185px;top: 510px;right: 187px;}

/* 도서로 보는 아산 팝업 */
.book_pop_bg {position:relative; width:700px; height:468px; top:50%; left:50%; margin-left:-350px; margin-top:-234px;background-color:#3d3d3d;}
.book_pop_head {position:relative; height:52px; margin-left:15px; margin-bottom:18px; border-left:1px solid #5498b3; width:666px;}
.book_pop_head span {position:absolute; margin-left:11px; bottom:0; font-size:1.5em; color:#fff;}
.book_pop_close {position:absolute; right:0; bottom:4px;}
.book_list_wrap {position:relative; height:368px;  margin-left:15px; border-right:1px solid #646464; width:650px;}
.book_list_wrap .book_list {position:absolute; height:368px; width:635px; overflow-y:scroll;}
.book_list_scrollbar {position:absolute; top:0; right:-6px; width:11px; height:11px;}
.b_bookList { width:100%; text-align:center; color:#5498b3; border-bottom:2px solid #5498b3; }
.book_list th { padding:10px 0 10px 0; color:#5498b3; border-bottom:1px solid #a2a2a2; border-top:1px solid #fff;  font-size:0.8em;}
.book_list td { padding:5px 12px 5px 12px; border-bottom:1px solid #3b5d6b; font-size:0.75em; }
.book_list .title { text-align:left; color:#FFF; }


/* PDF Layer Popup 2012.10.29 추가 */
#pdfPopLayer {background:url("../../tablet/images/bg_pdf_pop.gif") no-repeat 0 0; width:368px; height:210px; position:absolute; top:50%; left:50%; margin:-105px 0 0 -184px; }
#pdfPopLayer p.close {position:absolute; top:22px; right:26px;}
#pdfPopLayer h2 { position: absolute; top: 85px; left: 26px;  font-family: 'HDHarmonyL'; font-size: 30px; color: #fff; -ms-overflow-y:hidden; line-height:1;}
#pdfPopLayer div.btnGroup {position:absolute; top:150px; left:26px;}
#pdfPopLayer div.btnGroup ul {*zoom:1;}
#pdfPopLayer div.btnGroup ul:after {content:""; display:block; clear:both;}
#pdfPopLayer div.btnGroup ul li {float:left; display:inline; padding-right:5px;}

span.tgPrevView {display:block; position:absolute; width:30px; height:30px; top:50%; left:0; margin-top:-15px;}
span.tgPrevView a {display:block; width:30px; height:30px; background:url(../images/arrow_left3.png) no-repeat 0 0; text-indent:-9999px;}
span.tgNextView {display:block; position:absolute; top:50%; right:0; margin-top:-15px;}
span.tgNextView a {display:block; width:30px; height:30px; background:url(../images/arrow_right3.png) no-repeat 0 0; text-indent:-9999px;}

div.historySec {width:500px; height:2975px; background:url(../images/life_profile_06.png) no-repeat 0 0;}


/* 사진으로 만나는 아산 */
.photo_main .close {position:absolute; width:40px; height:40px; top:200px; right:0; background:url(../../tablet/images/btn_close_box.png) no-repeat 0 0;}
.photo_main {position:relative;height:100%;width: 100%;padding-top:260px;margin-right: 25px;background: url(../../tablet/images/sub02_bg_photo.jpg) repeat-y left top; background-size: contain;}
.photo_wrap {position:relative;top:0;left: 10px;width: 100%;overflow:auto;padding: 0 10px 0 5px; box-sizing: border-box;}
.photo_wrap .photo_list {position:relative; width:100%; height:100%; top:0; left:0;}
.photo_wrap .photo_list li {float:left; margin:0 15px 15px 0;}
.photo_wrap .photo_list li img {max-width:100%;}
.photo_wrap .photo_list li.photo_5 {position:relative;  margin-top:-165px;}
.photo_wrap .photo_list li.photo_10 {margin-left:-1000px; margin-top:165px;}

.photo_wrap #photo_list {  width: 100%;}
.photo_wrap #photo_list td {padding-right:15px;}
.photo_wrap #photo_list td div {margin-bottom:15px;position:relative;}
.photo_wrap #photo_list td div img.thumb{margin-bottom:15px;width: 100%;}
.photo_wrap #photo_list td div img.more{position:absolute;bottom:0px;right:0px;}

/* 사진으로 만나는 아산 팝업*/
.photo_pop { position: absolute; width: 876px;  top: 50% !important;  left: 50%; transform: translate(-50%,-50%); background-color: #3d3d3d; z-index: 100;}
.popup_title {position:relative; width:650px; height:58px; margin:0 auto; margin-bottom:18px; border-left:1px solid #5498b3;}
.popup_title span{position:absolute; left:10px; bottom:3px; font-family: 'HDHarmonyL'; color:#fff; font-size:1.8em; font-weight:100;}
.popup_closebtn {display:block; position:absolute; width:15px; height:15px; right:10px; top:10px;}
.photo_pop_view {position:relative; width:650px; margin:0 auto 20px auto;}
.photo_pop_view img {max-width:100%;}
.arrow_left,.arrow_right {display:block; position:absolute; width:40px; height:40px; top:50%; margin-top:-20px;}
.arrow_right {right:0;}
.photo_pop_text4 {position:relative; width:650px; margin:0 auto; font-family: 'HDHarmonyL'; color:#bebdbd; font-size:0.9em; line-height:1.5em;}


/* 영상으로 만나는 아산*/
.movie_main .close {position: absolute;width:40px;height:40px;top: 0;right:0;background:url(../../tablet/images/btn_close_box.png) no-repeat 0 0; z-index:10;}
.movie_main {position:relative;margin-top: 200px;height: 77vh;background:url('../images/saying_img_pc.jpg')no-repeat center center;background-size:cover;}
.movie_wrap {left:0;width:100%;height: 100%;text-align: center;}
.movie_player_bg {position:relative;height:425px;top: 50%;transform: translateY(-50%);padding-top: 8rem;}
.movie_player_bg .mm_player {position:relative; }
.movie_player_bg .mm_player table {width:100%;}
.movie_player_bg .mm_player td { display: inline-block; width: 25%; padding: 0px 20px; margin: 0 10px; overflow: hidden; box-sizing: border-box; vertical-align: top;}
.movie_player_bg .mm_player td img,.movie_player_bg .mm_player video {margin:0 auto;}
.movie_player_bg .mm_player .play_btn {position:absolute; width:65px; height:40px; top:50%; left:50%; margin-left:-32px; margin-top:-20px;}
.movie_player_bg .mm_player .mm_player_bar {position:absolute; bottom:7px; left:13px; width:455px; height:32px; background:url(../../tablet/images/movie_meet_playbar.png) no-repeat left top;}
.movie_player_bg .mm_player .mm_player_bar .mm_player_progress {position:absolute; width:100px; height:8px; background-color:#5498b3; top:12px; left:14px; z-index:100;}
.movie_player_bg .mm_player .mm_player_bar .mm_player_bigview_btn {position:absolute; width:16px; height:16px; top:8px; right:13px;}
.movie_player_bg .mm_title,.movie_player_bg .mm_sub_title {display:block; margin:0 auto; width:100%; text-align:center; font-family: 'HDHarmonyM'; font-size:20px; color:#fff; margin-top:20px;}
.movie_player_bg .mm_sub_title {font-size:0.8em; color:#5498b3; margin-top:5px;}
.movie_wrap .movie_step {position:relative; width:970px; height:21px; margin:7px auto 0 auto; border-top:1px solid #4a4e51;}
.movie_wrap .movie_step .mm_progress_handle {position:absolute; top:0; left:35px; width:11px; height:11px; margin-top:-6px;}
.movie_wrap .movie_step span {float:left; width:242px; height:20px; font-size:0.7em; color:rgba(255,255,255,.5);  margin-top:5px;}
.movie_wrap .movie_step span:nth-child(1) {color:rgba(255,255,255,1);}



/* 아산의 명언 */
.say_main .close {position:absolute; width:40px; height:40px; top:0; right:0; background:url(../../tablet/images/btn_close_box.png) no-repeat 0 0;}
.say_main {position: relative;height: 77vh; margin-top: 200px; background: url(../images/saying_img_pc.jpg) no-repeat center center; background-size: cover; overflow:hidden;}
.say_main:before { content: ''; position: absolute; top: 0;  left: 0; width: 100%;  height: 2px;  background-color: #5598b3;}
.say_wrap { position: relative; top: 50%; transform: translateY(-50%); left: 0;  height: 431px; margin: 0px 120px 0;}
.say_wrap .type_01 {display:-ms-inline-flexbox; font-size:1.2em;}
.say_wrap .type_02 {font-size:1em;}
.say_wrap .type_03 {font-size:2.4em; letter-spacing:-0.06em;}
.say_wrap .type_04 {font-size:2.8em; letter-spacing:-0.06em;}
.say_wrap .type_05 {font-size:3.2em; letter-spacing:-0.06em;}
.say_wrap .color_white20 {color:rgba(255,255,255,.2);}
.say_wrap .color_white30 {color:rgba(255,255,255,.3);}
.say_wrap .color_white40 {color:rgba(255,255,255,.4);}
.say_wrap .color_white50 {color:rgba(255,255,255,.5);}
.say_wrap .color_white80 {color:rgba(255,255,255,.8);}
.say_wrap .color_white100 {color:rgba(255,255,255,1);}
.say_wrap .color_blue40 {color:rgba(84,152,179,.4);}
.say_wrap .color_blue50 {color:rgba(84,152,179,.5);}
.say_wrap .color_blue70 {color:rgba(84,152,179,.7);}
.say_wrap .color_blue100 {color:rgba(84,152,179,1);}
.say_wrap .text_pos {position:relative; line-height:6em; padding-right:60px; font-family:"HDHarmonyL",AppleGothic,"dotum",dotum;}

span.gpLeft{display:block; position:absolute; top:50%; left:0; z-index:10;}
span.gpLeft a {display:block;}
span.gpRight{display:block; position:absolute; top:50%; right:0; z-index:10;}
span.gpRight a {display:block;}



/* 아산의 명언 팝업 */
.say_main .tag_pop_wrap {position:absolute; width:750px; height:440px; top:50%; left:50%; margin-left:-375px; margin-top:-220px; background-color:#3d3d3d; z-index:100;}
.say_pop_close {position:absolute; right:14px; top:14px;}
.say_main .tag_pop_wrap .tag_pop_contents {position:relative; width:690px; height:380px; margin:30px; margin-top:0;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_left {position:absolute; width:321px; height:380px; left:0;  margin-top:30px;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_left .tag_pop_player_bar {position:absolute; width:309px; height:32px; left:6px; bottom:7px; background:url(../../tablet/images/saying_popup_playerbar.png) no-repeat top left;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_left .tag_pop_player_bar .tag_pop_player_progress {position:absolute; width:100px; height:8px; background-color:#5498b3; top:12px; left:14px; z-index:100;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_right {position:absolute; width:339px; height:380px; right:0;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_right p {font-size:0.7em; color:#bebdbd; margin:0 5px; line-height:1.8em;}
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_right .title_line {position:absolute; top:0; leftwidth:1px; height:62px;}
/* 240618 modify */
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_right h1 {position:relative;display:flex;align-items:flex-end;min-height:62px;height:auto;padding-top:10px;box-sizing: border-box;font-size:1.5em;color:#fff;margin:0 5px 20px 5px; padding-left:9px; border-left:1px solid #5498b3; font-weight:normal; -ms-overflow-y:hidden;}
/* .say_main .tag_pop_wrap .tag_pop_contents .tag_con_right h1 span{position:absolute; bottom:0;} */
/* //240618 modify */
.say_main .tag_pop_wrap .tag_pop_contents .tag_con_right h2 {font-size:0.8em; color:#fff; margin:0 5px 10px 5px;  padding-left:9px; font-weight:normal;}


/*footer*/
footer { position: relative; bottom: 0; left:0; width:100%; max-width:1400px; min-width:1024px;height:38px; font-family: "dotum",dotum; margin:0 auto; line-height:38px; color:#414141; font-size:0.8em; background:#000; }

/*add for error*/
.wrap .error_box{ background-color: #262626; width:100%; max-width:1400px; min-width:1024px;height:96vh;}
.wrap .error_box .inner {display: flex;  align-items: center;  justify-content: center; height: 100%; font-size: 20px; font-family: 'HDHarmonyL';}
.wrap .error_box .inner p {padding: 0;margin-top: 0px;font-family: 'HDHarmonyL';color: #fff;display: block;text-align: center;}
.wrap .error_box .inner p a {display: inline-block;background: #5498b3;padding: 5px 15px;margin-top: 40px;font-family: 'HDHarmonyL';color: #fff;-webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);}


.asan_life_all_view{ position: absolute; right: 60px; bottom: 20px; z-index:11;}
.asan_tab_wrap .scrollArea {border:none;}

div.historySec {width:728px; height:4580px; background:url(../../tablet/images/life_profile_06_vert.png) no-repeat 0 0;}




/* 1920 x 1080 */
@media only screen and (max-height:1080px) {

.main_movie #mv { padding-top:30px;}/* 241129 modify */
.logo_area a {height:68px;}
.memorial_navi_wrap {height:27vh;}
.asanlife_main2 {height:77.5vh;}
.book_main a { width: 201px; height: 252px;  top: 205px;}
.book_main .book1 { left: 210px;}
.book_main .book2 { left: 470px;}
.book_main .book3 { left: 732px;}
.book_main .book4 { left: 999px;}
.book_main .book_list_btn { width: 188px; height: 188px; top: 522px; right: 174px;}

}

@media only screen and (max-height:1020px) {
.main_movie #mv {padding-top:55px;}/* 241129 modify */
}

/* 1600 x 900 */
@media only screen and (max-height:900px) {
.wrap {max-width:1300px;}
.main_movie {height:84vh;}
.main_movie .mv_twrap .mv_tin .mv_tit {font-size:60px;}
.main_movie .mv_twrap .mv_tin .mv_sub {font-size:22px;}
.say_wrap .text_pos {line-height:5em;}
.main_movie #mv {padding: 0;}
.navigation_ver {max-width:1300px;}
.asan_tab_wrap {top:40px;}
.fix_wrap .in {max-width:1300px;}
.logo_area a {height:60px;}
.memorial_navi_wrap a p {bottom:5px;font-size:20px;}
.memorial_cont {height:66.5vh;}
.memorial_navi_wrap {background-position:center -28px; height: 27vh;}
.book_main a {  top: 139px;  width: 185px;  height: 233px; }
.book_main .book1 { left: 195px;}
.book_main .book2 { left: 437px;}
.book_main .book3 { left: 679px;}
.book_main .book4 { left: 921px;}
.book_main .book_list_btn { top: 423px;  right: 164px;}
.movie_main,.asanlife_main,.book_main,.asanlife_main2,.say_main {height:73.5vh;}
.movie_player_bg .mm_title, .movie_player_bg .mm_sub_title {font-size:18px;}
footer {margin-top: -5px;max-width:1300px;}

}

/* 1280 x 800 */
@media only screen and (max-height:800px) {
.wrap { max-width: 1100px;}
.main_movie #mv { margin-top: -18px;}
.fix_wrap .in {max-width:1100px;}
.fix_wrap .in h2 {  font-size: 60px; }
.navigation_ver { max-width: 1100px;}
.navigation_ver .menu {height:100px;}
.logo_area a {width: 180px; height:70px;margin-left: 0px;}
.main_movie {height:85vh;}
.fix_wrap{ height: 160px; }
.main_movie .mv_twrap .mv_tin .mv_tit { font-size: 50px; margin-top: 30px;}
.main_movie .mv_twrap .mv_tin .mv_sub {font-size:19px;}
.main_movie .mv_twrap .mv_tin .mv_sub.first { margin: 35px 0px 0;}
.memorial_navi_wrap a p { bottom:10px; font-size:18px;}
.asanlife_main .asan_tab_conbox{height:57vh;}
.main_text_wrap {top:65px;}
.main_text_wrap .mini_title,.main_text p {font-size:16px;}
.memorial_navi_wrap {height:29vh !important;background-position: center 0;}
.asan_tab_wrap {top:25px;}
.asan_tab_conbox {height:45vh;}
.asan_tab_conbox .bookmark {font-size:16px; margin-top: 0;}
.asanlife_main2 .asan_tab_conbox {width:55%;}
.asanlife_main2 .asanlife_contents {background-position:right bottom;}
.photo_main {padding-top:230px;}
.photo_main .close {top:160px;}
.movie_main,.asanlife_main,.book_main,.asanlife_main2,.say_main {height:75.5vh;}
.movie_main, .asanlife_main, .asanlife_main2,.book_main,.say_main {margin-top:160px;}
.movie_player_bg .mm_title, .movie_player_bg .mm_sub_title {font-size:1.1em;}
.movie_player_bg .mm_player img {box-sizing: border-box; padding: 20px 0;}
.movie_player_bg .mm_player td { padding: 0 5px; font-size: 15px; }
.memorial_cont {height:64vh; background-position:center center;} 
.book_main a { top: 140px; width: 160px; height: 196px; }
.book_main .book1 { left: 162px;}
.book_main .book2 { left: 367px;}
.book_main .book3 { left: 575px;}
.book_main .book4 { left: 775px;}
.book_main .book_list_btn { width: 150px; height: 155px; top: 380px;  right: 144px;}
.say_wrap .text_pos {line-height:4em;}
footer {padding-left:5px;box-sizing: border-box;margin-top: -5px;max-width:1100px;}

}

/* 1366 x 768*/
@media only screen and (max-height:768px) {
.main_movie #mv {height:100%;}
.main_text_wrap { top: 50px;}
.main_text_wrap {width:55%;}
.wrap {max-width:1100px;}
.navigation_ver .menu { height: 97px; }
.logo_area a {height:70px;}
.book_main a {top:123px;}
.book_main .book_list_btn{top:363px;}
.memorial_cont { height: 64vh; background-position: left center; background-size: contain;}
.movie_main, .asanlife_main, .book_main, .asanlife_main2, .say_main {  height: 74.5vh;}
.memorial_navi_wrap {height:28vh !important;}
.main_movie .mv_twrap .mv_tin .mv_tit{font-size: 50px; margin-top: 35px;}
.main_movie .mv_twrap .mv_tin .mv_sub.first { margin: 30px 0px 0;}
.main_movie .mv_twrap .mv_tin .mv_sub {margin: 30px 0px 0;    font-size: 18px;}
.slogan {width:540px;font-size:17px;}
}


@media only screen and (max-width:1280px) {
.memorial_navi_wrap {  height: 20vh;}
}

@media only screen and (max-width:1024px) {
.movie_player_bg .mm_title, .movie_player_bg .mm_sub_title { font-size: 1em;}
.say_wrap {margin:0 100px 0;}
.book_main .book1 { left: 152px;}
.book_main .book2 { left: 345px;}
.book_main .book3 { left: 534px;}
.book_main .book4 { left: 723px;}
.book_main .book_list_btn {right:127px;}

}