.sub_top {}

.history_area {position:relative; background:url("../../img/about/brief/time_bg.jpg") center top no-repeat; background-size:cover; width:100%; height:100%; overflow:hidden;}
.history_area .timeline {position:relative; height:822px;}
.history_area .timeline .line_group {position:absolute; top:0; left:50%; width:2000px; height:822px; margin-left:-1000px;}
.history_area .timeline .line_group .lines {position:absolute; top:0; left:0; width:100%; height:100%; display: none;}
.history_area .timeline .line_group .lines .line_dot {position:absolute; top:0; left:0; width:0; height:1px; background-color:#f27824;}

.history_area .timeline .line_group .guide_line {position:absolute; top:0; left:0; width:100%; height:100%;}
.history_area .timeline .line_group .guide_line .g_line {position:absolute; top:598px; left:50%; width:0; height:1px; background-color:#f27824;}
/*.history_area .timeline .line_group .guide_line .guide_dot {position:absolute; top:595px; left:50%; background:url("/_resource/hanwha/images/hanwha/history/dots.png") 0 0 no-repeat; width:7px; height:7px; opacity:0;}*/

.history_area .timeline .line_group .circle_line {position:absolute; top:0; left:0; width:100%; height:100%; display: none;}
.history_area .timeline .line_group .circle_line #guide_circle_canvas {position:absolute; top:113px; left:716px;}
.history_area .timeline .line_group .circle_line #stroke_circle_canvas {position:absolute; top:113px; left:716px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg);}

.history_area .timeline .line_group .circle_dots {position:absolute; top:402px; left:1004px; display: none; z-index:1;}
.history_area .timeline .line_group .circle_dots li {opacity: 0;}
.history_area .timeline .line_group .circle_dots .default_dot {position:absolute; top:0; left:0; width:12px; height:12px; background-color:#9f223d; border-radius: 6px;}
.history_area .timeline .line_group .circle_dots .btn_dot {position:absolute; top:0; left:0;}
.history_area .timeline .line_group .circle_dots .btn_dot a {position:relative; display: block;cursor:default}
.history_area .timeline .line_group .circle_dots .btn_dot a .border_line {position:absolute; top:0; left:0; border:1px solid rgba(255,255,255,0.3); width:10px; height:10px; border-radius:10px; }


.history_area .timeline .timeline_contents {position:absolute; top:0; left:50%; width:1400px; height:822px; margin-left:-700px;}



#step2 {position:absolute; top:0; left:0; width:100%; text-align: center;}
#step2 .step2_title {position:absolute; top:190px; left:12px; width:100%;}
#step2 .step2_title span {font-size:16px; color:#fff; margin-top:12px; letter-spacing: 2px; display: block;}
#step2 .detail_box {position:absolute; top:0; left:12px; width:100%;}
#step2 .detail_box .details {position:absolute; top:306px; left:0; width:100%; text-align: center; opacity: 0;}
#step2 .detail_box .detail_1 {z-index:1;}
#step2 .detail_box .details .year {display: inline-block; color:#fff; background-color:#9f223d; font-size:14px; padding:0 18px; border-radius: 18px; height:28px; line-height: 28px;}
#step2 .detail_box .details .title {color:#fff; font-size:24px; margin-top:40px; font-weight: 500; letter-spacing: 0.3px; line-height:32px;}
#step2 .detail_box .details .line {width:14px; height:1px; background-color:#97928e; margin:14px auto 20px;}
#step2 .detail_box .details .subtitle {font-size:14px; width:24%; text-align:center; margin:0 auto; color:#fff; font-weight: 300; line-height:22px; letter-spacing: 0.3px;}
#step2 .detail_box .details .detail_btn {margin-top:40px;}
#step2 .detail_box .details .detail_btn a {display: block; width:152px; height:35px; margin:0 auto; border:1px solid #f27824; font-size:14px; color:#f27824; line-height:36px;transition:all 0.5s; letter-spacing: 3px; }
#step2 .detail_box .details .detail_btn a:hover {background-color:#f27824; color:#fff; transition:all 0.5s;}