@charset "UTF-8";

/*	
	Project	: ThinkerBell mobile

	Author  : Somi Park
	Date  : 2024-03-27

*/

body { 
	min-height:100%; 
	position:relative;
	-webkit-text-size-adjust: none;
}
.container-promotion {
	min-height:calc(100vh - 130px);
}

/* Main */
.t-block { display:none; }
.m-block { display:none; }
.m-menu {
	display:none;
	position:relative;
	left:calc(6vw - 10px);
}
.m-menu .lnk-lang {
	font-size:12px;
	height:24px;
	padding:0 8px;
	display:inline-flex;
	color:#ff7461;
    align-items: center;
    font-weight:bold;
    justify-content: center;
    border:2px solid #ff7461;
    box-sizing:border-box;
    border-radius:16px;
}
.m-menu .lnk-lang:after {
	content:'';
	display:inline-block;
	width:0;
	height:0;
	border-left:4px solid #ff7461;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-right:0;
	margin-left:4px;
	vertical-align:middle;
	position:relative;
	top:1px;
}
.m-menu .btn-menu {
	background:transparent;
	width:12vw;
	height:12vw;
	position:relative;
}
.m-menu .btn-menu:hover,
.m-menu .btn-menu:focus {
	box-shadow:none;
}
.m-menu .btn-menu span {
	font-size:0;
	display:block;
	position:absolute;
	width:20px;
	height:2px;
	border-radius:1px;
	background:#000;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.m-menu .btn-menu span:before,
.m-menu .btn-menu span:after {
	content:'';
	position:absolute;
	width:100%;
	height:2px;
	background:#000;
	border-radius:1px;
	top:0;
	left:0;
	transform:rotate(0);
	transition:all .3s;
}
.m-menu .btn-menu span:before { transform:rotate(0deg) translateY(-8px); }
.m-menu .btn-menu span:after { transform:rotate(0deg) translateY(8px); }

.m-menu .btn-menu.is-open span { background:transparent; }
.m-menu .btn-menu.is-open span:before {
	transform:rotate(45deg) translateY(0);
}
.m-menu .btn-menu.is-open span:after {
	transform:rotate(-45deg) translateY(0);
}
.info-section ~ .info-section {
	border-top: 1px solid #e3e3e3;
}

/* 웹브로셔 제안 */
#serviceGuide07 .tbl-write {
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    overflow: hidden;
}   
#serviceGuide07 .tbl-write table { table-layout: auto; }
#serviceGuide07 .tbl-write table tbody th { width:120px; }
#serviceGuide07 .tbl-write table tbody td .ui-checkboxradio-label { margin-right:22px; }
.info-section h2 {
    padding-left: 10px;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 700;
}
.info-section h2 ~ h2 { margin-top:30px }
.info-section h2 + .tbl-write tbody tr:last-child th, 
.info-section h2 + .tbl-write tbody tr:last-child td { border-bottom:0; }

.terms-layer { 
	position:absolute;
	/* top:80px; */
	top:0;
	left:0;
	width:100%;
	bottom:130px;
	background:rgba(0,0,0,.8);
	box-sizing:border-box;
	padding-top:120px;
	z-index:1201 !important;
}
.terms-layer .layer-close {
	position:absolute;
	top:-50px;
	right:10px;
    height:50px;
    width:50px;
    border:0;
}
.terms-layer .layer-close span {	
    font-size: 0;
    display: block;
    position: absolute;
    width: 36px;
    height: 3px;
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.terms-layer .layer-close span:before, 
.terms-layer .layer-close span:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 1px;
    top: 0;
    left: 0;
}
.terms-layer .layer-close span:before {
    transform: rotate(45deg) translateY(0);
}
.terms-layer .layer-close span:after {
    transform: rotate(-45deg) translateY(0);
}
.terms-layer h2 {
	color:#fff;
	font-size:20px;
	padding:0 40px;
	
}
.terms-layer .layer-contents {
	max-width:960px;
	margin:0 auto;
	position:relative;
}
.terms-layer .dropout-terms {
	border:0;
	background:transparent;
	color:#fff;
	font-size:16px;
	padding-left:40px;
	padding-right:40px;
}
.terms-layer .dropout-terms strong {
	font-size:18px;
}
.terms-layer .agree {
	background:transparent;
	border:0;
	border-radius:0;
	border-top:1px solid #fff;
	padding:30px 40px;
}
.terms-layer .agree label {
	color:#fff;
	font-size:16px;
}

.container-promotion .blt-list.border-box {	
    padding: 20px 30px;
    background: #f6f6f6;
    border: 1px solid #e6e6e6;
}

.agree {
	position:relative;
}
.agree label.ui-checkboxradio-label {
	margin-right:0;
}
.agree .show-terms {
	border:0;
	font-size:14px;
	color:#555;
	border-bottom:1px solid #555;
	position:absolute;
	right:30px;
	top:50%;
	transform:translateY(-50%);
	
}
.agree .show-terms .ico {
	position:absolute;
	background:none;
	width:0;
	height:0;
	min-width:0;
	min-height:0;
	border-left:5px solid #555;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-right:0;
	top:50%;
	margin-top:-3px;
	right:-10px;
}

[lang=ja] .info-tabs-cont p { word-break:break-all; }

/* .bx-viewport { height:auto !important; } */
/* -------------------------------------------------    
	- MOBILE MAX-WIDHT 1080(1024)		
------------------------------------------------- */
@media screen and (max-width:1080px) {
	.t-block { display:block; }
	.t-none { display:none; }
	
	/* layout */
	.header {
		min-width:100%;
		padding-left:40px;
		padding-right:40px;
		box-sizing:border-box;
	}
	.header-section {
		width:100%;
	}
	.header-section .logo a {	
    	height: 7.5vw;
    	background-size:auto 34%;
	}
	.header-section .gnb ul { white-space:nowrap; }
	.header-section .gnb li + li { margin-left:22px; }
	.header-section .gnb li a {
    	font-size: 1.5vw;
	}
	.container-promotion {
		width:calc(100% - 80px);
	}
	h3.tit {
		font-size: 2.35vw;
	}
	.container-promotion {
		min-height:calc(100vh - 110px);
		padding-top:7.5vw;
	}
	.terms-layer {
		/* top:7.5vw; */
		top:0;
		bottom:110px;
	}
	
	/* 프로모션페이지 what's ThinkerBell */	
	.info-main p:nth-of-type(1) {
		font-size:3.5vw;
	}
	.info-main p:nth-of-type(2) {
		font-size:2.35vw;
	}
	.info-main p:nth-of-type(3) {
		font-size:1.5vw;
	}
	.info-section h4 {
		font-size:2.35vw;
	}
	
	.footer {
		min-width:100%;
		padding-left:40px;
		padding-right:40px;
		box-sizing:border-box;
	}
	.footer-info .ci {
    	background-size: contain;
	}
	.footer-info {	
		width:100%;
	}
	.info-section img {
		max-width:100%;
	}
	[lang="ja"] .header-section .gnb li a { font-size:1.6vw; }
	[lang="ja"] .header-section .gnb li ~ li { margin-left:20px; }
}

@media screen and (max-width:768px) {
	.header {
		padding:0 20px;
	}
	.header-section .logo {
		width:20vw;
	}
	.header-section .gnb li a {
		font-size:1.7vw;
	}
	.container-promotion {
		width:calc(100% - 40px);
		padding-bottom:0px;
	}
	.info-section {
		padding-top:30px;
		padding-bottom:30px;
	}
	.info-section .info-list > li > span {
		font-size:2vw;
	}
	.info-section .info-list li li {
		font-size:1.8vw;
	}
	[lang="en"] .info-tabs-nav li a,
	[lang="ja"] .info-tabs-nav li a {
		font-size:1.7vw;
	}
	.info-tabs-cont p { 
		font-size:1.8vw;
	}
	.info-tbl th {
		font-size:2vw;
	}
	.info-tbl td {
		font-size:1.8vw;
	}
	.info-vdo-full p {
		font-size:2vw;
	}
	.ui-dialog {
		width:100% important;
	}
	
	.footer {
		min-width:100%;
		padding-left:20px;
		padding-right:20px;
		box-sizing:border-box;
	}
	.footer-info address > span {
		display:inline-flex;
	}
	.footer-info address > span b {
		margin-right:5px;
		white-space:nowrap;
	}
	
	.terms-layer .layer-close span {
		width:28px;
	}
	.terms-layer h2,
	.terms-layer .dropout-terms,
	.terms-layer .agree {
		padding-left:20px;
		padding-right:20px;
	}
	
	.container-promotion .blt-list.border-box,
	.dialog-alliance  .blt-list.border-box {	padding: 10px 20px;	}
	.container-promotion .blt-list li,
	.dialog-alliance .blt-list li { font-size:14px; }
		
}

@media screen and (max-width:767px) {	
	.m-block { display:block; }
	.m-none { display:none; }
	
	.m-menu {
	    display: flex;
	    margin-left: auto;
	    align-items: center;
	}
	.header {
		padding:20px 20px 0 20px;
	}
	.header-section .logo { width:30vw; }
	.header-section .logo a { height:12vw; }
	.header-section .gnb {
		position:absolute;
		box-sizing:border-box;
		width:100%;
		top:100%;
		left:0;
		background:#fff;
		padding:0 20px;
		text-align:left;
		box-shadow:0 10px 10px rgba(0,0,0,.1);
		transition:all .5s;
		max-height:0;
		overflow:hidden;
	}
	.header-section .gnb.is-open {
		max-height:1000px;
	}
	.header-section .gnb ul {	
		border-top:1px solid #a4a4a4;
		padding:40px 20px;
	}
	.header-section .gnb li {
		display:block;
	}
	[lang="en"] .header-section .gnb li ~ li,
	[lang="ja"] .header-section .gnb li ~ li {
		margin-left:0;
		margin-top:8px;
	}
	.header-section .gnb li a,
	[lang="ja"] .header-section .gnb li a {
		font-size:4vw; 
	}
	
	.header-section .gnb li a:before {
		content:'';
		display:inline-block;
		width:4px;
		height:4px;
		border-radius:50%;
		background:#333;
		margin-right:8px;
		vertical-align:middle;
	}
	.header-section .gnb li.current a:before { background:#ff7461; }
	.header-section .gnb li a:after,
	.header-section .gnb li.current a:after { content:none; }
	
	h3.tit { 
		font-size:20px;
		text-align:center; 
		height:auto;
	}
	
	
	.container-promotion {
		padding-top:calc(12vw + 20px);
	}
	.info-main { padding-bottom:30px; }
	.info-main p:nth-of-type(1) { font-size:24px; }
	.info-main p:nth-of-type(2) { font-size:18px; }
	.info-main p:nth-of-type(3) { font-size:13px;font-weight:bold;line-height:1.5em;margin:5px 20px 0; }
	
	.info-section {
	    padding-top: 7vw;
	    padding-bottom: 7vw;
	}
	.info-section h4 {
	    font-size: 4vw;
	    line-height:1.25;
	    margin-bottom:1em;
	    padding-left:.6em;
	    text-indent:-.6em;
	}
	#serviceGuide06 .info-section h4 {
	    padding-left:1.7em;
	    text-indent:-1.7em;
	}
	.section-summary {
		padding-left:6.5vw;
    	margin-top: -1em;
    	font-size:14px;
    	margin-bottom:1em;
	}
	#serviceGuide01	.info-img {
		width:100%;
		overflow-x:auto;
		padding-bottom:8px;
	}
	#serviceGuide01 .info-img img {
	}
	.info-section .info-list > li > span {
	    font-size: 14px;
	    padding:1em 1.4em;
	    height:auto;
	    line-height:1.4em;
	    border-radius:1.7em;
	}
	[lang="ja"] .info-section .info-list > li > span {
		font-weight:bold;
	}
	.info-section ul,
	.info-section .info-list > li ~ li {
		margin-top:1em;
	}
	.info-section .info-list li li {
		font-size:13px;
		line-height:1.4em;
		text-indent:-.5em;
		margin-bottom:.5em;
	}
	.info-tbl { margin-top:1em; }	
	.info-tbl + .info-img { margin-top:2em; }
	[lang="en"] .info-tbl th,
	[lang="ja"] .info-tbl th { 
		padding:0;
		font-size:13px;
	}
	.info-tbl td {
		padding:10px;
		font-size:12px;
	}	
	
	.info-tbl .tbl-write .w20 {
		width:45% !important;
		margin-bottom:8px;
	}
	.info-tbl .tbl-write .w30 {
		width:45% !important;
	}
	.info-tbl .tbl-write .ui-selectmenu-button {
		width:45% ;
	}
	
	.info-slider {
		overflow:hidden; 
		background:#f6f6f6; 		
	}
	.info-slider .slide-item {
		padding:5vw;
		text-align:center;
	}
	.info-slider .slide-item strong {		
	    font-size: 20px;
	    margin-bottom: 3vw;
	    display: block;
	}
	.info-slider .slide-item p {
		margin-top:2vw;
		font-size:15px;
		font-weight:bold;
	}
	.info-slider .slide-item p small {
		font-weight:normal;
		margin-top:5px;
		display:block;
	}
	.bx-pager { 
		text-align:center;
		padding-bottom:4vw;
		display:flex;
		align-items:center;
    	justify-content: center;
		background:#f6f6f6; 
	}
	.bx-wrapper { 
		position:relative; 
		max-width:100vw !important;
		width:100vw;
		margin-left:-20px;
	}
	.bx-pager .bx-pager-link {
		display:block;  
		width:10px;
		height:4px;
		background:#aaa;
		font-size:0;
		margin:0 2px;
		border-radius:2px;
	}
	.bx-pager .bx-pager-link.active {
		background:#ff7461;	
	}
	.bx-controls-direction a {
		position:absolute;
		top:25vw;
		width:30px;
		height:39px;
		font-size:0;
	}
	.bx-controls-direction a.bx-prev {
		left:0;
	}
	.bx-controls-direction a.bx-next {
		right:0;
	}
	.bx-controls-direction a:before, 
	.bx-controls-direction a:after {
		content:'';
		width:20px;
		height:3px;
		border-radius:2px;
		background:#333;
		position:absolute;
	}
	.bx-controls-direction a.bx-prev:before { right:0;top:12px;transform:rotate(-45deg); } 
	.bx-controls-direction a.bx-prev:after {  right:0;bottom:12px;transform:rotate(45deg);}
	.bx-controls-direction a.bx-next:before { left:0;top:12px;transform:rotate(45deg); } 
	.bx-controls-direction a.bx-next:after { left:0;bottom:12px;transform:rotate(-45deg); }
	
	[lang="ja"] .info-main p:nth-of-type(1) { font-size:16px; }
	[lang="ja"] .info-main p:nth-of-type(2) { font-size:14px; }
	[lang="ja"] .info-main p:nth-of-type(3) { font-size:15px; }
	
	[lang="en"] .info-vdo-full,
	[lang="ja"] .info-vdo-full { 
		width:100vw;
		padding-top:0;
		margin-left:-20px; 
	}
	[lang="en"] .info-vdo-full iframe,
	[lang="ja"] .info-vdo-full iframe { 
		position:relative;
		height:auto; 
    	aspect-ratio: 16 / 9;
	}
	.info-vdo-full p { 
		font-size:13px;
	}
		
	.footer-info {
    	flex-direction: column;
    	align-items: flex-start;
    	justify-content: flex-start;
    	padding:40px 0;
	}
	.footer-info address {
		margin-left:0;
		margin-top:10px;
	}
	.footer .language { display:none; }
	.footer address span {
		margin-bottom:5px;
	}
	.terms-layer {
		position:fixed;
		/* top:calc(12vw + 20px); */
		top:0;
		bottom:0;
		padding-top:70px;
		padding-bottom:20px;
		overflow-y:auto;
	}
	.terms-layer h2 {
		font-size:18px;
	}
	.terms-layer .dropout-terms,
	.terms-layer .agree label {
		font-size:14px;
	}
	.terms-layer .dropout-terms strong {
		font-size:15px;
	}
	.dialog-alliance .tbl-write table tbody th,
	#serviceGuide07 .tbl-write table tbody th {
		display:none;
	}
	.dialog-alliance .tbl-write table tbody td {
		padding-left:0;
	}
	.dialog-alliance .tbl-write table tbody td .w30 { width:50% !important; }
	.dialog-alliance .tbl-write table tbody td .w20,
	.dialog-alliance .tbl-write table tbody td .ui-selectmenu-button  { 
		width:45% !important;
		margin-bottom:8px; 
	}
	.dialog-alliance .tbl-write table tbody td .ui-checkboxradio-label {
		width:30%;
		margin-right:0;
	}
	.agree { padding-bottom:35px; }
	.agree .show-terms {
		top:auto;
		transform:none;
		bottom:15px;
	}
}

@media screen and (max-width:480px) {
	.header-section .gnb li a {
		font-size:4.5vw;
	}
}