@charset "utf-8";

.history-wrap { text-align: right; position:relative; padding-bottom:60px; overflow: hidden;}
.history-wrap .history-item {position:relative; overflow:hidden; z-index:20; background: #ffffff;}
.history-wrap .indicator {display:none;}

.history-item .img-area {position:relative; height:300px; overflow:hidden; }
.history-item .img-area .history-visual.over {display:none;}
.history-item .img-area .history-visual {height:300px; position:absolute; top:0; left:50%; margin-left:-383.5px;}
.history-wrap .text-area {padding:80px 15px; text-align:left;}
.history-wrap .text-area .period {position:relative; padding-bottom:24px; margin-bottom:20px; display:inline-block;}
.history-wrap .text-area .period:after {content:""; position:absolute; bottom:0; left:0; width:27px; height:4px; background:#000;}
.history-wrap .text-area .period span {color:#666;}
.history-wrap .text-area .period strong {color:#0878c3; }
.history-wrap .text-area .tit {margin-bottom:20px;}

.tablet .history-item .img-area {height:auto;}
.tablet .history-item .img-area .history-visual {position:relative; width:100%; height:auto; margin:0; left:0; }
.tablet .history-wrap .text-area {position:absolute; left:30px; top:30%; z-index:2;}
.tablet .history-wrap .text-area.tr {left:auto; right:100px; text-align:right;}
.tablet .history-wrap .text-area.tr .period:after {left:auto; right:0;}
.tablet .history-wrap .text-area {padding:0;}

.tablet .history-wrap .indicator {display:inline-block; position:absolute; top:0; right:0;  z-index:21; }
.tablet .history-wrap .indicator button {display:block; margin:30px 20px; padding-left:20px; text-align:left;}
.tablet .history-wrap .indicator button.on, .history-wrap .indicator button:hover  {color:#0878c3; background:url('/hk/en/resource/img/laneige-story/history/indicator-bg.png') no-repeat;}
.tablet .history-wrap .indicator button strong {margin-bottom:5px;}
.tablet .history-wrap .indicator button strong, .history-wrap .indicator button span {display:block; line-height:1;}


.web .history-wrap {padding-bottom:80px;}
.web .history-wrap .text-area .tit {margin:30px 0;}
.web .history-wrap .text-area {left:150px;}
.web .history-wrap .text-area.tr {right:150px;}
.web .history-wrap .text-area .period strong {color:#000; }
.web .current .text-area .period strong {color:#0878c3; }

.web .history-item .img-area .history-visual.over {position:absolute; z-index:1;}
.web .current .img-area .history-visual.over {display:block;}

.web .history-wrap .indicator button {margin:30px; }


@charset "utf-8";

.history-wrap { text-align: right; position:relative; padding-bottom:60px; overflow: hidden;}
.history-wrap .history-item {position:relative; overflow:hidden; z-index:20; background: #ffffff;}
.history-wrap .indicator {display:none;}

.history-item .img-area {position:relative; height:300px; overflow:hidden; }
.history-item .img-area .history-visual.over {display:none;}
.history-item .img-area .history-visual {height:300px; position:absolute; top:0; left:50%; margin-left:-383.5px;}
.history-wrap .text-area {padding:80px 15px; text-align:left;}
.history-wrap .text-area .period {position:relative; padding-bottom:24px; margin-bottom:20px; display:inline-block;}
.history-wrap .text-area .period:after {content:""; position:absolute; bottom:0; left:0; width:27px; height:4px; background:#000;}
.history-wrap .text-area .period span {color:#666;}
.history-wrap .text-area .period strong {color:#0878c3; }
.history-wrap .text-area .tit {margin-bottom:20px;}

.tablet .history-item .img-area {height:auto;}
.tablet .history-item .img-area .history-visual {position:relative; width:100%; height:auto; margin:0; left:0; }
.tablet .history-wrap .text-area {position:absolute; left:30px; top:30%; z-index:2;}
.tablet .history-wrap .text-area.tr {left:auto; right:100px; text-align:right;}
.tablet .history-wrap .text-area.tr .period:after {left:auto; right:0;}
.tablet .history-wrap .text-area {padding:0;}

.tablet .history-wrap .indicator {display:inline-block; position:absolute; top:0; right:0;  z-index:21; }
.tablet .history-wrap .indicator button {display:block; margin:30px 20px; padding-left:20px; text-align:left;}
.tablet .history-wrap .indicator button.on, .history-wrap .indicator button:hover  {color:#0878c3; background:url('/hk/en/resource/img/laneige-story/history/indicator-bg.png') no-repeat;}
.tablet .history-wrap .indicator button strong {margin-bottom:5px;}
.tablet .history-wrap .indicator button strong, .history-wrap .indicator button span {display:block; line-height:1;}


.web .history-wrap {padding-bottom:80px;}
.web .history-wrap .text-area .tit {margin:30px 0;}
.web .history-wrap .text-area {left:150px;}
.web .history-wrap .text-area.tr {right:150px;}
.web .history-wrap .text-area .period strong {color:#000; }
.web .current .text-area .period strong {color:#0878c3; }

.web .history-item .img-area .history-visual.over {position:absolute; z-index:1;}
.web .current .img-area .history-visual.over {display:block;}

.web .history-wrap .indicator button {margin:30px; }