@charset "utf-8";

#mainContainer{width:100%;}

/* Main visual(circle)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	/* INTRO -------------------------------------*/
	#mainVisual{position:relative; padding:100px 0 30px; width:100%; min-height:65vh; overflow:hidden; background:url('/images/basic_blue/main/main_visual_img_mo.jpg'), url('/images/basic_blue/main/m_main_bg.jpg'); 
	background-size:contain, cover; background-position:center 120px, center bottom; background-repeat:no-repeat;}

	/* ROLLING CIRCLE -------------------------------------*/
	.roll-circle{z-index:555; position:absolute; top:100px; left:0; right:0; margin:0 auto; width:300px; transition:1s all ease-in-out;}
	.roll-circle .progress{transform:rotate(-75deg); border-radius:50%;}
	.roll-circle svg{overflow:unset;}

	.roll-circle .progress{width:300px; height:300px; border:2px solid #fff;}
	.roll-circle circle{fill:none; stroke:#fff; stroke-dasharray:942px; stroke-dashoffset:942px; animation:pcDraw 24s linear infinite;}

	/* SLIDER -------------------------------------*/
	.bx-wrapper{position:relative; padding:0; height:100%; *zoom:1; -ms-touch-action:pan-y; touch-action:pan-y;}
	.bx-viewport{z-index:777; /* fix other elements on the page moving (in Chrome) */ -webkit-transform:translateZ(0);}

	.bxslider{margin:0; padding:0; /*fix flickering when used background-image instead of <img> (on Chrome)*/ -webkit-perspective:1000; width:100%; height:100%; overflow:hidden;}

	/* slider caption */
	.slider-caption{/* position:absolute; top:5%; left:0; right:0; */ margin:0 auto; padding:0 20px; width:100%; text-align:center;}
	.slider-caption .center-area{margin:0 auto 60px; height:300px; text-align:center;}
	.slider-caption.sc01 .center-area{padding-top:23px; width:216px;}
	.slider-caption.sc02 .center-area{padding-top:34px; width:184px;}
	.slider-caption.sc03 .center-area{padding-top:36px; width:196px;}
	.slider-caption.sc04 .center-area{padding-top:30px; width:196px;}
	.slider-caption.sc05 .center-area{padding-top:30px; width:160px;}
	.slider-caption.sc06 .center-area{padding-top:30px; width:153px;}
	.slider-caption .center-area img{max-width:100%;}


	.slider-caption .main-copy{margin-bottom:10px; line-height:1.2; font-size:24px; font-weight:700; word-break:keep-all;}
	.slider-caption .sub-copy{margin-bottom:25px; line-height:1.3; font-size:12px; font-weight:400; word-break:keep-all;}
	
	.slider-caption h4{margin-bottom:15px;}
	.slider-caption h4 img{max-width:100%;}
	.slider-caption.sc01 h4 img{width:200px;}
	.slider-caption.sc02 h4 img{width:135px;}
	.slider-caption.sc03 h4 img{width:180px;}
	.slider-caption.sc04 h4 img{width:150px;}
	.slider-caption.sc05 h4 img{width:180px;}
	.slider-caption.sc06 h4 img{width:180px;}
	.slider-caption .type-cate{margin-bottom:7px; line-height:0; font-size:0;}
	.slider-caption .type-cate span{display:inline-block; margin-left:10px; padding-left:10px; vertical-align:middle; line-height:16px; font-size:16px; border-left:1px solid #58595b;}
	.slider-caption .type-cate span:first-child{margin-left:0; padding-left:0; border-left:0;}
	.slider-caption .age-kg{line-height:1.4; font-size:12px;}

	.slider-caption .btn-more{margin-top:20px; font-size:18px;}

	/* pager */
	.bx-has-pager{z-index:666; position:absolute; top:0; left:0; right:0;}
	.bx-wrapper .bx-pager{position:relative; text-align:center; margin:0 auto; width:300px; height:300px;}

	.bx-wrapper .bx-pager-item{position:absolute; font-size:0; line-height:0;}
	.bx-wrapper .bx-pager-item:nth-child(1),
	.bx-wrapper .bx-pager-item:nth-child(4){top:2px; right:100px;}
	.bx-wrapper .bx-pager-item:nth-child(2),
	.bx-wrapper .bx-pager-item:nth-child(5){top:280px; right:83px;}
	.bx-wrapper .bx-pager-item:nth-child(3),
	.bx-wrapper .bx-pager-item:nth-child(6){top:145px; left:-6px;}

	.bx-wrapper .bx-pager.bx-default-pager a{position:relative; display:block; width:12px; height:12px; background:#58595b; text-indent:-9999px; outline:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
	.bx-wrapper .bx-pager.bx-default-pager a.active:before{position:absolute; top:-5px; left:-5px; content:""; display:block; width:20px; height:20px; border:1px solid #58595b; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; animation:pagerEffet 1.5s infinite;}


	/* ANIMATION -------------------------------------*/
	@keyframes pcDraw{
		50%{stroke-dashoffset:0;}
		100%{stroke-dashoffset:-942px;}
	}
	@keyframes stripeMove{
		from{transform:translate(-200%, 200%);}
		to{transform:translate(200%, -200%);}
	}
	@keyframes pagerEffet{
		from{transform:scale(1); opacity:1;}
		to{transform:scale(1.2); opacity:0;}
	}

/* 다이치 뉴스
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#newsArea { width: 100%; background: #fff;}
	.newsPg { width:100%; position:relative; padding: 20px 10px 0px 10px; }
	.newsPg > img {width:100%;}
	.newsPg a {display:inline-block; position:absolute;}
	.newsPg a.left_link {width:30%; height:70%; bottom:0; left:10px;}
	.newsPg a.right_link {width:25%; height:70%; bottom:0; right:10px;}

/* 우리 아이 카시트 찾기
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#findCarseat{position:relative; width:100%;}
	.find-carseat > img{width:100%;}
	.find-carseat .txt-area{position:absolute; top:0; bottom:0; margin:auto; padding:20px; height:180px;;}
	.find-carseat h3{margin-bottom:15px; font-size:30px; line-height:1.1; font-weight:300; color:#808285;}
	.find-carseat h3 strong{font-weight:700;}
	.find-carseat h3 img{display:block; margin-bottom:5px; width:110px;}
	.find-carseat h3 + p{margin-bottom:15px; line-height:1.3; color:#808285;}


/* 충돌 테스트 영상
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#safeVideo{position:relative; width:100%;}
	#safeVideo > img{width:100%;}
	
	.safe-video .video-area{position:absolute;top:10%; padding:0 12px; width:83%; overflow:hidden; cursor:pointer; background:#000; transform: translateX(10%);}
	.safe-video .video-area:before{position:absolute; top:0; left:0; content:""; display:block; width:12px; height:100%; background:url('/images/basic_blue/main/safe_line.gif') repeat-y center top;}
	.safe-video .video-area:after{position:absolute; top:0; right:0; content:""; display:block; width:12px; height:100%; background:url('/images/basic_blue/main/safe_line.gif') repeat-y center top;}
	.safe-video .video-area > img{width:100%; transition:.5s all; opacity:0.5;}
	.safe-video .video-area .btn-play{position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:50px; height:50px; transition:.5s all; transform:scale(0.9);}
	.safe-video .video-area .btn-play img{width:100%;}

	#videoPop{z-index:999; display:none; position:fixed; top:0; left:0; width:100%; height:100%;}
	.video-pop-bg{width:100%; height:100%; background:rgba(0,0,0,0.7);}
	.video-pop{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; padding-bottom:53%; width:94%; height:0;}
	.video-pop iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
	.video-pop .btn-close{position:absolute; top:-40px; right:0; width:30px; height:30px; cursor:pointer;}
	.video-pop .btn-close span{position:absolute; top:50%; left:50%; display:inline-block; margin-left:-19px; width:38px; height:1px; background:rgba(255,255,255,0.7);}
	.video-pop .btn-close span:first-child{transform:rotate(45deg);}
	.video-pop .btn-close span:last-child{transform:rotate(-45deg);}

	.safe-video .txt-area{position:relative; padding:10px 20px; background:#414042;}
	.safe-video .txt-area:after{content:""; display:block; clear:both;}
	.safe-video .txt-area h4{position:absolute; top:50%; float:left; height:24px; line-height:1; font-size:24px; font-weight:300; color:#a7a9ac; transform:translateY(-50%);}
	.safe-video .txt-area h4 strong{font-weight:700;}

	.safe-certifi{float:right; width:calc(100% - 200px); line-height:0; font-size:0; text-align:right;}
	.safe-certifi li{display:inline-block; margin-left:9px;}
	.safe-certifi li:first-child{margin-left:0;}
	.safe-certifi li img{max-width:100%;}

	@media all and (max-width:480px){
		.safe-certifi li{margin-left:5px; width:calc(25% - 5px);}
	}

/* 다이치 패밀리
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#daiichiFamily{position:relative; padding:0 20px; width:100%;}
	.dic-family > img{width:100%;}

	.dic-family .txt-area{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:50px; text-align:center;}
	.dic-family .main-copy{margin-bottom:10px; line-height:1; font-weight:500; font-size:17px;}
	.dic-family h3{display:inline-block; margin-right:10px; line-height:1; letter-spacing:-1px; font-size:17px; font-weight:300;}


/* 다이치 화보
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#findCarseat{width:100%;}

	/* Slick Slider Plugin */
	.slick-slider{position:relative; display:block; height:100%; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}

	.slick-list{position:relative; overflow:hidden; display:block; margin:0; padding:0; height:100%;}
	.slick-list:focus{outline:none;}
	.slick-loading .slick-list{background:#fff url("./ajax-loader.gif") center center no-repeat;}
	.slick-list.dragging{cursor:pointer; cursor:hand;}

	.slick-slider .slick-track{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}

	.slick-track{position:relative; left:0; top:0; display:block; height:100%;}
	.slick-track:before, .slick-track:after{content:""; display:table;}
	.slick-track:after{clear:both;}
	.slick-loading .slick-track{visibility:hidden;}

	.slick-slide{float:left; min-height:1px; display:none;}
	[dir="rtl"] .slick-slide{float:right;}
	.slick-slide.slick-loading img{display:none;}
	.slick-slide.dragging img{pointer-events:none;}
	.slick-initialized .slick-slide{display:block;}
	.slick-loading .slick-slide{visibility:hidden;}
	.slick-vertical .slick-slide{display:block; height:auto; border:1px solid transparent;}

	/* Dots */
	.slick-dots{z-index:666; position:absolute; display:block; transform:translateY(-50%); text-align:center; list-style:none; line-height:0; font-size:0;}
	.slick-dots li{display:inline-block; height:10px; width:10px; box-sizing:content-box; line-height:0; font-size:0; cursor:pointer;}
	.slick-dots li button{position:relative; display:block; height:10px; width:10px; outline:none; line-height:0; font-size:0; text-indent:-9999em; overflow:hidden; color:transparent; border:0; background:transparent; cursor:pointer;}
	.slick-dots li button:hover, 
	.slick-dots li button:focus{outline:none;}
	.slick-dots li button:before{position:absolute; top:0; left:0; content:""; width:10px; height:10px; background:#fff; border-radius:50%; transition:.3s opacity linear;}

	/* CUSTOM -------------------------------------*/
	/* 다이치 화보 */
	.pic-slide .slide{width:100%;}
	.pic-slide .slide img{width:100%;}

	.pic-slide .slick-dots{bottom:16px; left:50%; transform:translateX(-50%); width:100%;}
	.pic-slide .slick-dots li{padding:0 6px;}
	.pic-slide .slick-dots li button:before{opacity:0.3;}
	.pic-slide .slick-dots li button:hover:before, 
	.pic-slide .slick-dots li.slick-active button:before{opacity:1;}


/* 다이치 가이드
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#daiichiGuide{padding:30px 20px; width:100%; background:#fff;}

	.dic-guide li{position:relative; display:table; padding:5px 0; width:100%; word-break:keep-all;}
	.dic-guide .img-area{display:table-cell; width:27%; vertical-align:middle;}
	.dic-guide .txt-area{display:table-cell; padding-left:10%; width:73%; vertical-align:middle; background:#c6c6c8;}
	.dic-guide h4{margin-bottom:5px; line-height:1; font-size:16px; font-weight:500; color:#555; word-break:keep-all;}
	.dic-guide img{display:block; width:100%;}
	.dic-guide p{line-height:1.4; font-size:12px; color:#555;}