/*공통*/
@font-face{
    font-family:'ElliotSans';
    src: url('/asset/fonts/ElliotSans-Light.ttf') format('truetype');
}


body { background: url(/asset/images/history/history_bg.png) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
.bg_step1 { background: url(/asset/images/history/history_bg.png) no-repeat center center fixed; background-size: cover; }
.bg_step2 { background: url(/asset/images/history/history_bg2.png) no-repeat center center fixed; background-size: cover; }
.bg_step3 { background: url(/asset/images/history/history_bg3.png) no-repeat center center fixed; background-size: cover; }


.active {width: 86px; height: 86px; z-index: 100; position: absolute;}
.at-hover { background: #000 !important; width: 86px; height: 86px; z-index: 100; position: absolute; opacity: 0.5; filter: alpha(opacity=50);  }
.at-color-blue { background: rgba(0, 155, 235, 0.54); }
.at-color-green { background: rgba(0, 226, 213, 0.56); }
.at-color-purple { background: rgba(144, 72, 225, 0.41); }

.green h1,
.green .text-area strong,
.green .tabs_area .tab-content > strong { color:#00e2d5; }
.blue h1,
.blue .text-area strong,
.blue .tabs_area .tab-content > strong { color: #009beb; }
.purple h1,
.purple .text-area strong,
.purple .tabs_area .tab-content > strong { color: #9048e1; }


.item1{position: absolute; background: url("/asset/images/history/item1.png"); width: 40px; height: 10px; }
.item2{position: absolute; background: url("/asset/images/history/item2.png"); width: 40px; height: 10px; }
.item3{position: absolute; background: url("/asset/images/history/item3.png"); width: 40px; height: 10px; }

.item_up { left: -40px; top: 74px; }
.item_down { left: -40px; bottom: 60px; }

/*E: 공통*/

#sub-full-content > .scroll-container{ width: 100%; height: 20px; }


#wrapper {position:relative; width:100%; padding: 0; padding-bottom:60px; }
#wrapper > div > ul > li { display: inline-block; }
/*#wrapper #wrapper-inner { width:18550px; height: 575px; display: block; content: ''; clear: both; }*/
#wrapper #wrapper-inner { width:7378px; /*height: 575px;*/ white-space: nowrap; display: block; content: ''; clear: both; }


.subtab-container ul { max-width:450px; height:75px; margin:0 auto; padding-top: 115px; }
.subtab-container ul li { float:left; width:33.3%; text-align: center; }
.subtab-container ul li a { display: inline-block; font-size:24px; text-align: center; color:#cccccc; font-weight: normal; line-height: 71px; height:58px; padding:0 2px; }
.subtab-container ul li.selected a { color:#00e2d5; border-bottom:solid 3px #00e2d5; }
.subtab-container ul li+li.selected a { color:#009beb; border-bottom:solid 3px #009beb; }
.subtab-container ul li+li+li.selected a { color:#9048e1; border-bottom:solid 3px #9048e1; }

.subtab-container ul li a:hover { color:#00e2d5; }
.subtab-container ul li+li a:hover { color:#009beb; }
.subtab-container ul li+li+li a:hover { color:#9048e1; }





#wrapper #wrapper-inner .history_area:first-child { margin-left: 315px;  }
#wrapper #wrapper-inner .history_area  { display: inline-block; /*float: left;*/ margin-left: 98px; }


#wrapper #wrapper-inner .history_area > ul > li { display: inline-block;  float: left;   }
#wrapper #wrapper-inner .history_area ul li .tabs_area { height: 502px;     padding-left: 162px;     position: relative; }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tabs img { width: 86px; height: 86px; }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content { position: relative; display:inline-block; float: left;}

#wrapper #wrapper-inner .history_area .history_tt { width: 500px; line-height: 1.5; overflow:hidden;word-wrap:break-word; color: #ffffff; margin-right: 108px;  }
#wrapper #wrapper-inner .history_area .history_tt h1 {font-size: 100.8px;  font-family: 'Elliotsans'; font-weight: 100; height: 75px; line-height: 90px;}
#wrapper #wrapper-inner .history_area .history_tt span {font-size: 60px; margin: 45px 0 15px 0; display: inline-block;}
#wrapper #wrapper-inner .history_area .history_tt p {font-size: 24px;  word-break: keep-all; white-space:normal;  }

#wrapper #wrapper-inner .history_area .li-inline-style li { display: inline-block;     cursor: pointer; }


/*pattern1*/
#wrapper #wrapper-inner .history_area .pattern1 { margin-top: 73px;  }
#wrapper #wrapper-inner .history_area .pattern1 .tabs_area .tab-content > strong { position: absolute; bottom: 0; font-size: 120px;  font-family: 'Elliotsans'; display: inline-block; height: 133px; left: -145px; }

#wrapper #wrapper-inner .history_area .pattern1 .tabs { margin-bottom: 18px; height: 86px;  }

#wrapper #wrapper-inner .history_area .pattern1 .li-inline-style li { float: left;  }
#wrapper #wrapper-inner .history_area .pattern1 .li-inline-style li+li { margin-left: 18px;  }

/*pattern2*/
#wrapper #wrapper-inner .history_area .pattern2 .tabs_area .tab-content > strong { position: absolute; top: 0; font-size: 120px; font-family: 'Elliotsans'; display: inline-block; height: 113px; left: -160px; font-weight: bold; }
 #wrapper #wrapper-inner .history_area .pattern2 .tabs {  position: absolute; bottom: 0; }
#wrapper #wrapper-inner .history_area .pattern2 .li-inline-style li { float: left; margin-top: 18px;  }
#wrapper #wrapper-inner .history_area .pattern2 .li-inline-style li+li { margin-left: 18px;  }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area { display:inline-block; max-width: 510px; height: 398px; overflow:hidden;word-wrap:break-word; float: left; margin: 0 106px 0 60px;  }
#wrapper #wrapper-inner .history_area li .tabs_area .text-area strong{ font-size: 32px; display: block;}

#wrapper #wrapper-inner .history_area li .tabs_area .text-area p{ color: #ccc; font-size: 20px; line-height: 1.5;  white-space: normal;   margin: 2px 0 25px 0; display: inline-block; word-break: break-word; }



@media all and (max-width: 1100px) {


}
@media all and (max-width: 1024px) and (max-height:768px) and (orientation:landscape) {
#sub-full-content { padding-top: 20px;  }
#wrapper {/* height: 679px; */}

.subtab-container ul { height: 180px; padding-top: 90px; }
.subtab-container ul li { float: left; width: 33.3%; text-align: center; }
.subtab-container ul li a { height: 50px; }

#wrapper #wrapper-inner .history_area:first-child { margin-left: 275px;  }
#wrapper #wrapper-inner .history_area { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area { margin-left: 90px; height: 425px;  }

#wrapper #wrapper-inner .history_area .history_tt { width: 420px;}
#wrapper #wrapper-inner .history_area .history_tt h1 { font-size: 90.8px; height: 75px; line-height: 90px;}
#wrapper #wrapper-inner .history_area .history_tt span { font-size: 50px; margin: 45px 0 15px 0; display: inline-block;}
#wrapper #wrapper-inner .history_area .history_tt p {font-size: 20px;}

#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content { width: 430px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content img { width: 100%;  }
#wrapper #wrapper-inner .history_area .pattern2 .tabs_area .tab-content > strong,
#wrapper #wrapper-inner .history_area .pattern1 .tabs_area .tab-content > strong { font-size: 90px; height: 100px; left: -120px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area {  margin: 0 105px 0 60px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area strong { font-size: 28px; }
#wrapper #wrapper-inner .history_area li .tabs_area .text-area p { font-size: 18px; }


.item1{ width: 20px; height: 7px; }
.item2{ width: 20px; height: 7px; }
.item3{ width: 20px; height: 7px; }

.item_up { left: -20px; top: 41px; }
.item_down { left: -20px; bottom: 35px; }

#sub-full-content { padding-top: 100px;  }
#wrapper { /*height: 411px;*/ }
#wrapper #wrapper-inner { /*height: 411px;*/  }
.subtab-container ul { max-width: 400px; height: 20px; padding-top: 63px; padding-bottom: 20px; }
.subtab-container ul li a { font-size: 16px; height: 50px; }

#wrapper #wrapper-inner .history_area:first-child { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area { margin-left: 0px; height: 253px; padding-left:70px;  }

#wrapper #wrapper-inner .history_area .history_tt { width: 290px; margin-right:50px;}
#wrapper #wrapper-inner .history_area .history_tt h1 { font-size: 40px; height: 40px; line-height: 40px;}
#wrapper #wrapper-inner .history_area .history_tt span { font-size: 25px; margin: 15px 0 10px 0;}
#wrapper #wrapper-inner .history_area .history_tt p {font-size: 14px;}


#wrapper #wrapper-inner .history_area .pattern1 .li-inline-style li+li,
#wrapper #wrapper-inner .history_area .pattern2 .li-inline-style li+li { margin-left: 10px; }

#wrapper #wrapper-inner .history_area .pattern1 .tabs { height: 55px; margin-bottom: 10px;  }
.active,
.at-hover,
#wrapper #wrapper-inner .history_area ul li .tabs_area .tabs img { width: 55px; height: 55px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content { width: 250px;  }

#wrapper #wrapper-inner .history_area .pattern2 .tabs_area .tab-content > strong,
#wrapper #wrapper-inner .history_area .pattern1 .tabs_area .tab-content > strong { font-size: 50px; height: 50px; left: -66px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area { margin: 0 28px 0 18px; max-width: 310px; height: 188px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area strong { font-size: 15px; }
#wrapper #wrapper-inner .history_area li .tabs_area .text-area p { font-size: 11px; margin: 2px 0 8px 0; }


}

@media all and (max-width: 950px)  and (orientation:portrait ) {
#sub-full-content { padding-top: 20px;  }
#wrapper {}

.subtab-container ul { height: 180px; padding-top: 90px; }
.subtab-container ul li { float: left; width: 33.3%; text-align: center; }
.subtab-container ul li a { height: 50px; }

#wrapper #wrapper-inner .history_area:first-child { margin-left: 275px;  }
#wrapper #wrapper-inner .history_area { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area { margin-left: 90px; height: 425px;  }

#wrapper #wrapper-inner .history_area .history_tt { width: 420px;}
#wrapper #wrapper-inner .history_area .history_tt h1 { font-size: 90.8px; height: 75px; line-height: 90px;}
#wrapper #wrapper-inner .history_area .history_tt span { font-size: 50px; margin: 45px 0 15px 0; display: inline-block;}
#wrapper #wrapper-inner .history_area .history_tt p {font-size: 20px;}

#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content { width: 430px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content img { width: 100%;  }
#wrapper #wrapper-inner .history_area .pattern2 .tabs_area .tab-content > strong,
#wrapper #wrapper-inner .history_area .pattern1 .tabs_area .tab-content > strong { font-size: 90px; height: 100px; left: -120px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area {  margin: 0 105px 0 60px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area strong { font-size: 28px; }
#wrapper #wrapper-inner .history_area li .tabs_area .text-area p { font-size: 18px; }
}

@media all and (max-width: 768px) {

}

@media all and (max-width: 640px) {

.item1{ width: 20px; height: 7px; }
.item2{ width: 20px; height: 7px; }
.item3{ width: 20px; height: 7px; }

.item_up { left: -20px; top: 41px; }
.item_down { left: -20px; bottom: 35px; }

#sub-full-content { padding-top: 60px;  }
#wrapper { /*height: 411px;*/ }
#wrapper #wrapper-inner { /*height: 411px;*/  }
.subtab-container ul { max-width: 300px; height: 20px; padding-top: 63px; padding-bottom: 20px; }
.subtab-container ul li a { font-size: 17px; height: 50px; }

#wrapper #wrapper-inner .history_area:first-child { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area { margin-left: 65px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area { margin-left: 0px; height: 253px; padding-left:70px;  }

#wrapper #wrapper-inner .history_area .history_tt { width: 290px; margin-right:50px;}
#wrapper #wrapper-inner .history_area .history_tt h1 { font-size: 40px; height: 40px; line-height: 40px;}
#wrapper #wrapper-inner .history_area .history_tt span { font-size: 25px; margin: 15px 0 10px 0;}
#wrapper #wrapper-inner .history_area .history_tt p {font-size: 14px;}


#wrapper #wrapper-inner .history_area .pattern1 .li-inline-style li+li,
#wrapper #wrapper-inner .history_area .pattern2 .li-inline-style li+li { margin-left: 10px; }

#wrapper #wrapper-inner .history_area .pattern1 .tabs { height: 55px; margin-bottom: 10px;  }
.active,
.at-hover,
#wrapper #wrapper-inner .history_area ul li .tabs_area .tabs img { width: 55px; height: 55px;  }
#wrapper #wrapper-inner .history_area ul li .tabs_area .tab-content { width: 250px;  }

#wrapper #wrapper-inner .history_area .pattern2 .tabs_area .tab-content > strong,
#wrapper #wrapper-inner .history_area .pattern1 .tabs_area .tab-content > strong { font-size: 50px; height: 50px; left: -66px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area { margin: 0 28px 0 18px; max-width: 310px; height: 188px; }

#wrapper #wrapper-inner .history_area li .tabs_area .text-area strong { font-size: 15px; }
#wrapper #wrapper-inner .history_area li .tabs_area .text-area p { font-size: 11px; margin: 2px 0 8px 0; }

}

@media all and (max-width: 420px) {
}