@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 珥덇린�� */
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
body * {padding: 0; margin: 0;}
body { font-family: 'Open Sans', sans-serif; background: #ebebeb; }
h1, h2, h3, h4, h5, h6, strong {  font-family: 'Open Sans', sans-serif; }

ul {list-style:none;}

/* animation */
.animation { opacity: 1; transform: inherit; transition: 1s; }
.animation.animationBefore { opacity: 0; transform: scale(0); transition: 0s; }
.animation.animationBefore.t2b { transform: translateY(-30px); }
.animation.animationBefore.t2b_s { transform: translateY(-10px); }
.animation.animationBefore.T2B { transform: translateY(-100px); }
.animation.animationBefore.T2B_L { transform: translateY(-300px); }
.animation.animationBefore.b2t { transform: translateY(30px); }
.animation.animationBefore.b2t_s { transform: translateY(10px); }
.animation.animationBefore.B2T { transform: translateY(100px); }
.animation.animationBefore.B2T_L { transform: translateY(300px); }
.animation.animationBefore.l2r { transform: translateX(-30px); }
.animation.animationBefore.l2r_s { transform: translateX(-10px); }
.animation.animationBefore.L2R { transform: translateX(-100px); }
.animation.animationBefore.L2R_L { transform: translateX(-500px); }
.animation.animationBefore.r2l { transform: translateX(30px); }
.animation.animationBefore.r2l_s { transform: translateX(10px); }
.animation.animationBefore.R2L { transform: translateX(100px); }
.animation.animationBefore.R2L_L { transform: translateX(500px); }
.animation.animationBefore.b2s_s { transform: scale(1.05, 1.05); }
.animation.animationBefore.b2s { transform: scale(1.2, 1.2); }
.animation.animationBefore.B2S { transform: scale(2, 2); }
.animation.animationBefore.h2b { transform: scale(1, 0); }
.animation.animationBefore.w2b { transform: scale(0, 1); }
.animation.animationBefore.def { transform: inherit; }
.animation.animationBefore.rt2lb { transform: translateX(200px) translateY(-200px); }
.animation.animationBefore.rb2lt { transform: translateX(200px) translateY(200px); }
.animation.animationBefore.lt2rb { transform: translateX(-200px) translateY(-200px); }
.animation.animationBefore.lb2rt { transform: translateX(-200px) translateY(200px); }
.animation.animationBefore.rot { -ms-transform: rotate(-90deg) scale(0.9, 0.9); -webkit-transform: rotate(-90deg) scale(0.9, 0.9); transform: rotate(-90deg) scale(0.9, 0.9); }
.animation.animationBefore.type2 { transition: 1s; }
.animation.animationBefore.round { transform: translateY(100px) translateX(80px); }

.wrap { width: 1200px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; }
.move { cursor: pointer; }
.page .content > * { position: absolute; }
#bgmswitch { position: absolute; top: 8px; right: -41px; cursor: pointer; width:30px; height:30px; transition: 1s; }
.sound_wrap { width:1200px; height: 800px; margin: auto; position: relative; }

.page1_bg { background: #fff; }
.page1 img:nth-of-type(1) { right: 0px; top: 51px; }
.page1 img:nth-of-type(2) { right: -44px; top: 0px; }
.page1 img:nth-of-type(3) { right: 0px; bottom: 0px; }
.page1 img:nth-of-type(4) { left: 584px; top: -8px; }
.page1 img:nth-of-type(5) { left: 386px; bottom: 0px; }
.page1 img:nth-of-type(6) { right: 149px; bottom: 87px; }
.page1 img:nth-of-type(7) { left: 40px; top: 180px; }
.page1 img:nth-of-type(8) { left: 28px; top: 270px; }
.page1 img:nth-of-type(10) { left: 28px; top: 500px; }
.page1 img:nth-of-type(9) { right: 136px; bottom: 49px; }
.page1 img:nth-of-type(9):hover { transform: scale(1.05, 1.05); }

.page4 .content > img:nth-of-type(1), .page6 .content > img:nth-of-type(1) , .page5 .content > img:nth-of-type(1), .page3 .content > img:nth-of-type(1), .page2 .content > img:nth-of-type(1), .page7 .content > img:nth-of-type(1){ left: 115px; top: 25px;}
.page4 .content > img:nth-of-type(2),.page6 .content > img:nth-of-type(2), .page5 .content > img:nth-of-type(2),.page3 .content > img:nth-of-type(2),.page2 .content > img:nth-of-type(2),.page7 .content > img:nth-of-type(2)  { left: 464px; top: 38px; }
.page4 .content > img:nth-of-type(3), .page6 .content > img:nth-of-type(3), .page5 .content > img:nth-of-type(3), .page3 .content > img:nth-of-type(3) , .page2 .content > img:nth-of-type(3), .page7 .content > img:nth-of-type(3){ right: 50px; top: 59px; }

.page4 .pro_list,.page6 .pro_list , .page5 .pro_list,.page3 .pro_lisT, .page2 .pro_list, .page7 .pro_list{ right: 65px; top: 20px; width: 72%;float: left; height: 45px; box-sizing: border-box; white-space: nowrap; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; overflow: hidden; }
.page4 .pro_list:hover, .page6 .pro_list:hover, .page5 .pro_list:hover, .page3 .pro_list:hover , .page2 .pro_list:hover, .page7 .pro_list:hover  { overflow-x: scroll; height: 43px; }
.page4 .pro_list:hover::-webkit-scrollbar,.page6 .pro_list:hover::-webkit-scrollbar , .page5 .pro_list:hover::-webkit-scrollbar,.page3 .pro_list:hover::-webkit-scrollbar,.page2 .pro_list:hover::-webkit-scrollbar,.page7 .pro_list:hover::-webkit-scrollbar{ height: 0px; border-radius: 15px; }
.page4 .pro_list:hover::-webkit-scrollbar-thumb, .page6 .pro_list:hover::-webkit-scrollbar-thumb, .page5 .pro_list:hover::-webkit-scrollbar-thumb, .page3 .pro_list:hover::-webkit-scrollbar-thumb, .page2 .pro_list:hover::-webkit-scrollbar-thumb, .page7 .pro_list:hover::-webkit-scrollbar-thumb   { background-color: #a9a9a9; border-radius: 15px; height: 10px; }
.page4 .pro_list:hover::-webkit-scrollbar-track, .page6 .pro_list:hover::-webkit-scrollbar-track, .page5 .pro_list:hover::-webkit-scrollbar-track, .page3 .pro_list:hover::-webkit-scrollbar-track , .page2 .pro_list:hover::-webkit-scrollbar-track, .page7 .pro_list:hover::-webkit-scrollbar-track { border-radius: 15px; height: 1px; }
.page4 .pro_list li, .page6 .pro_list li, .page5 .pro_list li, .page2 .pro_list li, .page3 .pro_list li, .page7 .pro_list li    { display: inline-block; color: #202020; cursor: pointer; font-size: 14px; height: 43px; line-height: 43px; box-sizing: border-box; padding: 0 10px; transition: 0.5s; }
.page4 .pro_list li.on, .page4 .pro_list li:hover, .page6 .pro_list li.on, .page6 .pro_list li:hover, .page5 .pro_list li.on, .page5 .pro_list li:hover, .page3 .pro_list li.on, .page3 .pro_list li:hover , .page2 .pro_list li.on, .page2 .pro_list li:hover, .page7 .pro_list li.on, .page7 .pro_list li:hover{ background: #f89920; color: #fff; }
.page4 .pro_list li:hover, .page6 .pro_list li:hover, .page5 .pro_list li:hover, .page3 .pro_list li:hover, .page2 .pro_list li:hover , .page7 .pro_list li:hover{ transition: 0.1s; }
.page4 .line, .page6 .line , .page5 .line, .page3 .line, .page2 .line , .page7 .line{ width: 720px; height: 1px; background: #d1d1d1; left: 460px; top: 130px; }
.page4 .pro_cont, .page6 .pro_cont, .page5 .pro_cont, .page2 .pro_cont, .page3 .pro_cont, .page7 .pro_cont { left: 115px; top: 70px; width: 85%; height: 630px; overflow-y: scroll; line-height: 24px;}
.page2 .pro_cont{     top: 80px; font-size: 14px}
.page4 .pro_cont .ss , .page6 .pro_cont .ss, .page5 .pro_cont .ss , .page3 .pro_cont .ss, .page2 .pro_cont .ss, .page7 .pro_cont .ss{ display: none; }
.page4 .pro_cont .ss:nth-of-type(1), .page6 .pro_cont .ss:nth-of-type(1), .page5 .pro_cont .ss:nth-of-type(1), .page3 .pro_cont.ss:nth-of-type(1), .page2 .pro_cont .ss:nth-of-type(1) , .page7 .pro_cont .ss:nth-of-type(1){ display: block; }
.page4 .pro_cont::-webkit-scrollbar, .page6 .pro_cont::-webkit-scrollbar, .page5 .pro_cont::-webkit-scrollbar, .page3 .pro_cont::-webkit-scrollbar , .page2 .pro_cont::-webkit-scrollbar, .page7 .pro_cont::-webkit-scrollbar{ width: 5px; border-radius: 15px; }
.page4 .pro_cont::-webkit-scrollbar-thumb,.page6 .pro_cont::-webkit-scrollbar-thumb, .page5 .pro_cont::-webkit-scrollbar-thumb,.page3 .pro_cont::-webkit-scrollbar-thumb,.page2 .pro_cont::-webkit-scrollbar-thumb,.page7 .pro_cont::-webkit-scrollbar-thumb     { background-color: #a9a9a9; border-radius: 15px; width: 7px; }
.page4 .pro_cont::-webkit-scrollbar-track, .page6 .pro_cont::-webkit-scrollbar-track , .page5 .pro_cont::-webkit-scrollbar-track, .page3 .pro_cont::-webkit-scrollbar-track  , .page2 .pro_cont::-webkit-scrollbar-track, .page7 .pro_cont::-webkit-scrollbar-track{ background-color: #eeeeee; border-radius: 15px; width: 1px; }

#menu { position: absolute; z-index: 11; display: none; width: 81px; height: 800px; left: 0; top: 0; background: url('img/gioithieu/menu_bg.png'); }
#menu .logo { position: absolute; background: url('img/gioithieu/logo.png'); width: 105px; height: 800px; left: 0px; top: 0px; }
#menu .main { position: absolute; left: 25px; top: 110px; }
#menu .main > li { position: relative; margin: 7px 0; }
#menu .main > li.on { margin-top: 25px; }
#menu .main > li p { padding: 10px; }
#menu .main > li p img:nth-of-type(1){ display: block; }
#menu .main > li p img:nth-of-type(2){ display: none; }
#menu .main > li.on:after { content: ""; width: 2px; height: 20px; display: block; background: #000; position: absolute; top: -12px; right: 13px; }
#menu .main > li.on p img:nth-of-type(1), #menu .main > li:hover p img:nth-of-type(1) { display: none; }
#menu .main > li.on p img:nth-of-type(2), #menu .main > li:hover p img:nth-of-type(2) { display: block; }
#menu .main .sub { display: none; position: absolute; top: 10px; left: 35px; width: 155px; }
#menu .main > li:hover .sub { display: block; }
#menu .sub > ul { background: rgba(255,255,255,0.9); border: 1px solid #b7292d; padding: 5px; }
#menu .sub li { padding: 2px 5px; font-size: 13px; color: #000; letter-spacing: -1px; }
#menu .sub li.on, #menu .sub li:hover { color: #254078; font-weight: 600; }
#menu .sub li:before { content: " - "; margin-right: 3px; }

#btn_nav { display: none; }
#btn_nav div { position: absolute; bottom: 24px; z-index: 11; width: 40px; height: 40px; transition: 0.5s; background: url('img/gioithieu/arrow.png'); }
#btn_nav div:nth-of-type(1) { right: 88px; }
/* #btn_nav div:nth-of-type(1):hover { left: 60px; } */
#btn_nav div:nth-of-type(2) { right: 38px; -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
#btn_nav div:nth-of-type(3) { right: 138px; background: url('img/gioithieu/home.png'); }
/* #btn_nav div:nth-of-type(2):hover { right: 60px; } */

.page { display:none; width: 1200px; height: 800px; overflow: hidden; position: absolute; }
.page > div { width: 1200px; height: 800px; box-sizing: border-box; }
.active { display: block; }
/******************/
.tabs , .tabs1, .tabs2 , .tabs3, .tabs4 , .tabs5{
    position: relative;
  margin: 0px auto;
  border-top: 1px solid #efefef;
}
.tabs input, .tabs1 input , .tabs2 input, .tabs3 input, .tabs4 input, .tabs5 input{
  position: absolute;
  z-index: 1000;
  width: 138px;
  height: 28px;
  left: 0px;
  top: 0px;
  opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  cursor: pointer;
}
.tabs3 input#tab-11{left: 0px; }
.tabs3 input#tab-12,.tabs4 input#tab-15{left: 138px; }
.tabs3 input#tab-13, .tabs4 input#tab-16{left: 276px; }
.tabs4 input#tab-14{left: 0px; }
.tabs input#tab-2, .tabs1 input#tab-5, .tabs2 input#tab-6,  .tabs4 input#tab-14,{
  left: 138px;
}
.tabs input#tab-3, .tabs1 input#tab-5, .tabs2 input#tab-36, , .tabs4 input#tab-14, .tabs5 input#tab-6{
  left: 276px;
}

.tabs label, .tabs1 label ,.tabs2 label, .tabs3 label, .tabs4 label, .tabs5 label     {
 /* background: #5ba4a4;
  background: -moz-linear-gradient(top, #f2f2f2 0%, #cac9c9 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
  background: -webkit-linear-gradient(top, #f2f2f2 0%, #cac9c9 100%);
  background: -o-linear-gradient(top, #f2f2f2 0%, #cac9c9 100%);
  background: -ms-linear-gradient(top,#f2f2f2 0%, #cac9c9 100%);
    background: -webkit-linear-gradient(top, #f2f2f2 0%, #cac9c9 100%);*/
  font-size: 10px;
  line-height: 28px;
  height: 28px;
  position: relative;
  padding: 0 0px;
    float: left;
  display: block;
  width: 138px;
  color: #385c5b;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
/*  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);*/
}

.tabs label:after,.tabs1 label:after, .tabs2 label:after,.tabs3 label:after,.tabs4 label:after,.tabs5 label:after {
    content: '';
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;d
  width: 100%;
  height: 2px;
  display: block;
}

.tabs input:hover + label /*, .tabs1 label:first-of-type*/ {
  background: #f89920; color: #fff
}

.tabs label:first-of-type, .tabs1 label:first-of-type, .tabs2 label:first-of-type, .tabs3 label:first-of-type,.tabs4 label:first-of-type, .tabs5 label:first-of-type  {
    z-index: 6;
/*    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
*/}

.tab-label-2 {
    z-index: 5;
}

.tab-label-3 {
    z-index: 4;
}

.tab-label-4 {
    z-index: 3;
}

.tab-label-5 {
    z-index: 2;
}
.tab-label-6 {
    z-index: 1;
}
.tabs input:checked + label , .tabs1 input:checked + label, .tabs2 input:checked + label , .tabs3 input:checked + label, .tabs4 input:checked + label , .tabs5 input:checked + label{
    background:#231f20;
  z-index: 6; color: #fff;
}

.clear-shadow {
  clear: both;
}

.content_1, .content_2 {
    background: #fff;
  position: relative;
    width: 100%;
  z-index: 99; margin-top: 28px;
}

.content_1 div, .content_2 div  {
  top: 0;
  left: 0;
  padding: 10px 0px;
  z-index: 1;
    opacity: 0;

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s; position: absolute; width: calc(100% - 0px);
}

.tabs input.tab-selector-1:checked ~ .content_1 .content-1,
.tabs input.tab-selector-2:checked ~ .content_1 .content-2,
.tabs input.tab-selector-3:checked ~ .content_1 .content-3,
.tabs1 input.tab-selector-4:checked ~ .content_2 .content-4,
.tabs1 input.tab-selector-5:checked ~ .content_2 .content-5,
.tabs2 input.tab-selector-6:checked ~ .content_2 .content-6, 
.tabs2 input.tab-selector-7:checked ~ .content_2 .content-7, 
.tabs2 input.tab-selector-8:checked ~ .content_2 .content-8, 
.tabs2 input.tab-selector-9:checked ~ .content_2 .content-9, 
.tabs2 input.tab-selector-10:checked ~ .content_2 .content-10, 
.tabs3 input.tab-selector-11:checked ~ .content_2 .content-11, 
.tabs3 input.tab-selector-12:checked ~ .content_2 .content-12, 
.tabs3 input.tab-selector-13:checked ~ .content_2 .content-13, 
.tabs4 input.tab-selector-14:checked ~ .content_2 .content-14, 
.tabs4 input.tab-selector-15:checked ~ .content_2 .content-15, 
.tabs4 input.tab-selector-16:checked ~ .content_2 .content-16
{
  z-index: 999;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
	display: block;
    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;opacity: 1;
}
.content_1 div h2,
.content_1 div h3, .content_2 div h2,
.content_2 div h3, {
  color: #398080;
}
.content_1 div p, .content_2 div p {
  font-size: 16px;
  line-height: 25px;
  text-align: left;
  margin: 0;
  color: #212121;
  padding-left: 0px;
  font-family: arial;
}
.wrap > .page > div > .content >.pro_cont.t2b > div:first-child{display: block;}
.wrap > .page > div > .content >.pro_cont.t2b > div:first-child section .content_1 > div:first-child{opacity: 1;}
.tab_sp_1, .tab_sp_2{overflow: hidden;
       position: fixed;
    height: 30px;
    clear: both;
    z-index: 999;
    background: #fff;
    border-bottom: 1px solid #efefef;}
.content_1 .content-3 h3,.content_2 .content-3 h3{    text-align: center;
    font-size: 40px;
    color: #231f20;
    margin: 36px 0;}
.content_1 .content-3  img, .content_1 .content-3  iframe, .content_2 .content-3  iframe{    display: block; margin: 20px auto}
.tab_sp_2 .tab-label-8{     width: 175px;} 
.tab_sp_2 .tab-label-9{     width: 145px;} 
.tab_sp_2 .tab-label-10{     width:130px;} 
.tab_sp_2  #tab-10{lefT: 80%;}
.tab_sp_2  #tab-9{lefT: 60%;}
.tab_sp_2  #tab-9{lefT: 60%;}
.tab_sp_2  #tab-8{lefT: 34%;}
.tab_sp_2  #tab-7{lefT: 13%;}
.tab_sp_1 #tab-2, .tab_sp_2 #tab-5{ LEFT: 50%}