@charset "utf-8";
/* Dickson Furniture Co.,Ltd. 鈻 CSS Document */


.page_banner  {width:100%; height:700px; min-width:1200px; background-color:#e9e9e9; position:relative; z-index:0; user-select:none; -moz-user-select:none;}
.banner_bg    {background:no-repeat center top; background-size:cover; width:100%; height:100%;}

.i_con_lay    {width:100%; height:100%; position:absolute; left:0px; top:0px;}
.i_con_lay_c  {width:100%; margin:0px auto; min-width:1200px; max-width:1400px; position:relative;}
.i_con_lay_t  {width:220px; padding:40px; position:absolute; top:155px; right:10px; background-color:#FFF; border-radius:4px; text-align:center;}
.i_con_lay_t h1   {font-size:48px; margin:0px; font-weight:normal;}
.i_con_lay_t p    {font-size:16px; color:#999; margin:0px; text-align:center;}
.i_con_lay_t .n   {color:#ed4545; font-size:1.2em; padding:10px; display:inline-block;}

.i_con_scenes     {padding-top:50px; padding-bottom:130px; background-color:#f7f7f7;}
.i_con_scenes h1  {font-size:48px; text-align:center;}
.i_con_scenes_l   {margin-top:60px; text-align:center;}
.i_con_scenes_li  {display:inline-block; width:130px; font-size:18px; color:#333; text-align:center; cursor:pointer; filter:grayscale(100%); -webkit-filter:grayscale(100%); opacity:0.35;}
.i_con_scenes_li img   {width:66px; height:66px; display:block; margin:0px auto;}
.i_con_scenes_li:hover {opacity:1; filter:grayscale(0%); -webkit-filter:grayscale(0%);}
.i_con_scenes_li_act   {opacity:1; filter:grayscale(0%); -webkit-filter:grayscale(0%);}
.i_con_scene      {width:1200px; height:auto; min-height:600px; position:relative; margin-top:10px; margin-bottom:10px; overflow:hidden;}
.i_con_scene_layer{position:absolute; width:250px; height:auto; left:0px; top:0px; font-size:16px; color:#FFF;}
.i_con_scene_layer:before {content:''; display:inline-block; position:absolute; width:32px; height:32px; left:-16px; top:-40px; background:url(/pub/icon/drop.png) no-repeat center center; background-size:contain;}
.i_con_scene_p    {position:absolute; width:28px; border-radius:30px; height:28px; left:-80px; top:-80px; background-color:#ffda1d; box-shadow:0px 0px 8px rgba(255,218,29,1); transform:translate3d(-14px,-14px,0px); -webkit-transform:translate3d(-14px,-14px,0px);}
.i_con_scene_d    {position:absolute; width:230px; padding:10px; background-color:rgba(0,0,0,0.2); border-radius:3px; color:#FFF; left:110%; top:0px;}
.i_con_pros       {font-size:16px; color:#999;}
.i_con_pro        {display:inline-block; border:solid 1px #ccc; margin-right:30px; margin-top:20px; line-height:1; padding:17px; cursor:pointer;}
.i_con_pro:hover  {background-color:#ffda1d; border-color:#ffda1d; color:#000;}
.i_con_pro_act    {background-color:#ffda1d; border-color:#ffda1d; color:#000;}


.i_con_mat        {}
.i_con_mat h1     {margin:60px; font-size:48px; text-align:center;}
.i_con_mat_c      {width:1200px; height:480px; box-shadow:0px 0px 10px rgba(0,0,0,0.1);}
.i_con_mat_c_l    {width:740px; height:480px; display:inline-block; float:left; background-color:#f7f7f7; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.i_con_mat_c_r    {width:460px; height:480px; float:right; text-align:center; overflow:hidden;}
.i_con_mat_c_rt   {width:460px; height:480px; display:table-cell; vertical-align:middle; text-align:center;}
.i_con_mat_c_rc   {display:inline-block; text-align:left; max-width:400px;}
.i_con_mat_c_rc .brand {font-size:16px; color:#666;}
.i_con_mat_c_rc h2     {font-size:36px; line-height:1; margin-top:10px; margin-bottom:40px;}
.i_con_mat_c_rc ul     {font-size:18px; color:#999; list-style:none; margin:10px auto; padding:0px;}
.i_con_mat_c_rc li     {margin:10px auto;}
.i_con_mat_c_rc li:before {content:'鈼?; width:30px; display:inline-block; color:#ffda1d;}
.i_con_mat_b       {text-align:center; font-size:18px; color:#999; margin-top:30px;}
.i_con_mat_b .div  {display:inline-block; width:150px; text-align:center;}
.i_con_mat_b .span {display:inline-block; cursor:pointer;}
.i_con_mat_b .span:hover {color:#333; border-bottom:solid 2px #666;}
.i_con_mat_b .sel  {color:#000; font-weight:bold; border-bottom:solid 2px #333;}

.i_con_wallsys     {width:100%; height:1060px; background:url(/pub/img/i-construction/i_construction_wallsys_bg.jpg) no-repeat center center; background-size:cover;}
.i_con_wallsys h1  {font-size:48px; color:#FFF; margin-top:70px; margin-bottom:70px; text-align:center;}
.i_con_wallsys_p   {margin-top:60px; text-align:center;}
.i_con_wallsys_pi  {display:inline-block; width:180px; font-size:16px; color:#FFF;}
.i_con_wallsys_pm  {float:left;display:inline-block; text-align:center; width:33%; font-size:18px; color:#FFF;}
.i_con_wallsys_pm img {margin-bottom:25px;}
.i_con_color       {position:relative; z-index:10; margin-top:-60px; padding-top:60px; padding-bottom:40px; background-color:#FFF; box-shadow:0px 0px 16px rgba(0,0,0,0.1); -webkit-box-shadow:0px 0px 16px rgba(0,0,0,0.1); text-align:center;}
.i_con_color h2    {font-size:28px; margin:5px;}
.i_con_color .sl   {font-size:18px; color:#999; line-height:1.2;}
.i_con_colors      {font-size:18px; color:#999; margin-top:20px;}
.i_con_colors_i    {width:78px; display:inline-block; font-size:0.8em; float:left; margin-left:7px; padding-top:10px; padding-bottom:30px;}
.i_con_colors_i img{margin-bottom:10px;}


.i_con_brands      {width:880px; height:400px; margin:0px auto; background:url(/pub/img/i-construction/i-construction_brands.png) no-repeat center top;}
.i_con_brands .l   {width:220px; text-align:center; height:45px; padding-top:75px; font-size:14px; color:#CCC; display:inline-block; float:left;}
.i_con_brands .l:hover {color:#333;}

.i_con_more        {width:500px; margin-left:95px; margin-top:80px; display:inline-block; float:left; cursor:pointer;}
.i_con_more h2     {font-size:28px;}
.i_con_more p      {font-size:18px; color:#999;}
.i_con_more a      {font-size:18px; color:#999; text-decoration:none;}
.i_con_more .l     {display:inline-block; float:left; padding:30px 30px 50px 30px;}
.i_con_more:hover a{color:#b39c19;}


/* 鏂板姞鏁堟灉鍥炬牱寮 */
.cases_list {width: 30%; margin: 2% 1% 1% 1%; display: inline-block; vertical-align: top;}
.cases_img {width: 100%; height: 0px; padding-top: 60%; display: block; border-radius: 3px; background-color: #EEE; background-repeat: no-repeat; background-size: cover; background-position: center center; cursor: pointer; transition: all ease-in-out 0.2s; -webkit-transition: all ease-in-out 0.2s;}
.cases_img:hover {box-shadow: 0px 0px 7px rgba(0,0,0,.7);}
.cases_lks {margin: 10px 1% 1% 1%; display: block; color: #333; font-size: 18px; text-align: center;}

#imgViewer {position:fixed; z-index:9201; width:100%; height:100%; left:0pt; top:0pt; background-color:#222;}
#imgContainer {width:100%; height:100%; text-align:center; transition:all ease-in-out 0.3s; -webkit-transition:all ease-in-out 0.3s; opacity:0;}
.imgContainer {opacity:1 !important; cursor:alias;}


/* 杞湀鍔ㄧ敾 */

.spinner {
    margin: 100px auto;
    width: 20px;
    height: 20px;
    position: relative;
}

.container1>div,
.container2>div,
.container3>div {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 {
    top: 0;
    left: 0;
}

.circle2 {
    top: 0;
    right: 0;
}

.circle3 {
    right: 0;
    bottom: 0;
}

.circle4 {
    left: 0;
    bottom: 0;
}

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0.0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}