.sub_top {}

.history_area {position:relative; background:url("/_resource/hanwha/images/hanwha/history/bg.jpg") center top no-repeat; width:100%; height:100%; overflow:hidden; margin-top:48px;}
.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:#f27824; 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;}
.history_area .timeline .line_group .circle_dots .btn_dot a .border_line {position:absolute; top:0; left:0; border:1px solid #f27824; width:5px; height:5px; border-radius:3px; }
.history_area .timeline .line_group .circle_dots .btn_dot a .small_circle {position:absolute; top:1px; left:1px; background-color: #fff; width:5px; height:5px; border-radius: 3px;}
.history_area .timeline .line_group .circle_dots .btn_dot a .mouse_over {position:absolute; top:-16px; left:-16px; width:40px; height:40px; opacity: 0; background-color: #000;}
.history_area .timeline .line_group .circle_dots .btn_dot a span {position:absolute; top:-4px; font-size:16px; color:#f27824; opacity: 0; pointer-events: none;}

.history_area .timeline .line_group .circle_dots .btn_dot a span.left {left:0; width:100px;}
.history_area .timeline .line_group .circle_dots .btn_dot a span.right {right:0; width:100px; text-align: right;}

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

#intro {position:absolute; top:90px; left:0; width:100%; }
#intro .intro_box {text-align: center;}
#intro .intro_box li {opacity: 0;}
#intro .intro_box .title {font-size:32px; color:#333333; font-weight: 500;}
#intro .intro_box .line1 {width:20px; height:1px; background-color:#f27824; margin:30px auto 49px;}
#intro .intro_box .subtitle span {font-size:50px; color:#f27824; font-weight: 300; display: block; margin-top:30px; letter-spacing: 7px;}
#intro .intro_box .line2 {width:20px; height:1px; background-color:#c2c2c2; margin:30px auto 24px;}
#intro .intro_box .desc {font-size:15px; color:#837f7d; line-height:22px; margin-top:45px; font-weight: 300; letter-spacing: 0.5px;}
#intro .intro_box .start_btn {margin-top:55px;}
#intro .intro_box .start_btn a {display:block; width:181px; height:45px; background-color:#f27824; font-size:17px; color:#fff; margin:0 auto; line-height:46px; font-weight: 600; letter-spacing: 4px;}
#intro .intro_box .start_btn a:hover {background-color:#d36c30;}

#step2 {position:absolute; top:0; left:0; width:100%; text-align: center; display: none;}
#step2 .step2_title {position:absolute; top:190px; left:12px; width:100%;}
#step2 .step2_title span {font-size:16px; color:#f27824; 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:#f27824; font-size:14px; padding:0 18px; border-radius: 18px; height:24px; line-height: 25px;}
#step2 .detail_box .details .title {color:#333333; font-size:24px; margin-top:28px; 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:15px; color:#333333; 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;}


#step2 .detail_popup {position:absolute; top:165px; left:470px; width:472px; height:472px; z-index:3; display: none;}
#step2 .detail_popup .detail_popups {position:absolute; top:0; left:0; width:472px; height:472px; display: none;}

#step2 .detail_popup .detail_popups .detail_popup_contents .bg  {position:absolute; top:0; left:0; z-index:-1;}
#step2 .detail_popup .detail_popups .detail_popup_contents .year {width:82px; height:21px; font-size:12px; color:#fff; background-color:#f27824; border-radius: 21px; margin:29px auto 11px; padding:0 5px; line-height:22px;}
#step2 .detail_popup .detail_popups .detail_popup_contents .title {color:#fff; font-size:14px; font-weight: 300; height:18px; line-height: 18px;}
#step2 .detail_popup .detail_popups .detail_popup_contents .line1 {width:337px; height:1px; background-color:#fff; opacity: 0.2; margin:28px auto 85px;}
#step2 .detail_popup .detail_popups .detail_popup_contents .year2 {font-size:28px; color:#fff; font-weight:300;}
#step2 .detail_popup .detail_popups .detail_popup_contents .line2 {width:13px; height:1px; background-color:#fff; margin:20px auto 18px;}
#step2 .detail_popup .detail_popups .detail_popup_contents .desc {font-size:16px; color:#fff; font-weight: 300; line-height:22px; letter-spacing: 0.5px;}

#step2 .detail_popup .detail_btns {position:relative; z-index:2;}
#step2 .detail_popup .detail_btns .arrow {position:absolute; top:225px; left:0;}
#step2 .detail_popup .detail_btns .arrow a {position:absolute; top:0; left:0;}
#step2 .detail_popup .detail_btns .arrow a:first-child {left:13px; visibility: hidden; opacity: 0;}
#step2 .detail_popup .detail_btns .arrow a:last-child {left:443px;}
#step2 .detail_popup .detail_btns .close_btn {position:absolute; top:424px; left:223px;}


.history_area .bottom_contents {position:relative; width:100%; background:#fff; float:left;}
.history_area .bottom_contents .year_list {position:relative; width:1000px; margin:0 auto; padding-top:40px; overflow:hidden;}
.history_area .bottom_contents .year_list .dot_line1 {position:absolute; top:115px; left:210px; width:222px; overflow:hidden;}
.history_area .bottom_contents .year_list .dot_line2 {position:absolute; top:115px; left:548px; width:222px; overflow:hidden;}
.history_area .bottom_contents .year_list .lists {width:300px; text-align: center; float:left; margin-right:39px;}
.history_area .bottom_contents .year_list .lists_last {margin-right:0;}
.history_area .bottom_contents .year_list .lists .title {font-size:16px; color:#f27824; line-height:25px;}
.history_area .bottom_contents .year_list .lists .term {font-size:12px; color:#666666; padding:0 15px; border:1px solid #b2b2b2; border-radius:20px; display: inline-block; margin-top:14px; height:20px; line-height:21px; vertical-align: middle;}
.history_area .bottom_contents .year_list .lists .line {float:left; width:300px; height:1px; background-color:#e5e5e5; margin-top:30px;}
.history_area .bottom_contents .year_list .lists .detail_list {text-align: left; float:left; height:360px;}
.history_area .bottom_contents .year_list .lists .detail_list li {float:left; clear:both; margin-top:26px;}
.history_area .bottom_contents .year_list .lists .detail_list li span {display: block; float:left; font-size:13px; color:#666666; }
.history_area .bottom_contents .year_list .lists .detail_list li span.year {width:70px; font-weight: 300;}
.history_area .bottom_contents .year_list .lists .detail_list li span.desc {font-weight: 300; width:220px; letter-spacing: 0.5px;}

.history_area .bottom_contents .other_show {position:relative; width:100%; text-align: center; padding:20px 0 100px;}
.history_area .bottom_contents .other_show a {color:#f27824; font-size:14px;}
.history_area .bottom_contents .other_show a .icon {margin:0 0 0 7px;}