@charset "utf-8";

.coral{position:relative; max-width:2560px; margin:0 auto; color:#666; line-height:1.5}
.coral .container{width:100%; margin:0 auto; max-width:1000px; position:relative; box-sizing:border-box}
.coral em{font-weight:bold !important}
.coral .tit{position:relative; padding:120px 0 20px 0;}

.onlyW{display:inline-block !important}
.onlyM{display:none !important}

.con01{position:relative; text-align:center; padding:100px 0; background:#fff}
.con02{position:relative; text-align:center; padding:100px 0; background:url(images/con02_bg.jpg) center top / cover}

.con01 .txt{position:relative; line-height:1.5; font-size:17px; color:#666}
.con01 .ft_txt{position:relative; padding:50px 0 0 0; color:#555; font-size:17px}

.con02 .tit{padding-top:0 !important}
.con02 .friendly{position:relative; max-width:870px; margin:0 auto; margin-top:50px; font-size:0; text-align:left}
.con02 .friendly .logo{display:inline-block; vertical-align:middle;}
.con02 .friendly .con{display:inline-block; vertical-align:middle; max-width:620px; margin-left:20px; color:#666666; font-size:23px; padding:35px 20px; position:relative; box-sizing:border-box}
.con02 .friendly .con.small{font-size:20px;}
.con02 .friendly .con:before{width:33px; height:22px; content:''; display:inline-block; background:url(images/coleft.png) no-repeat; position:absolute; left:0; top:0}
.con02 .friendly .con:after{width:33px; height:22px; content:''; display:inline-block; background:url(images/coright.png) no-repeat; position:absolute; right:0; bottom:0}
.con02 .tail{position:relative; font-weight:bold; color:#222; font-size:22px; padding:100px 0 0 0}
.con02 .tail span{display:inline-block; color:#fff; background:#074975; padding:3px 2px; line-height:1.2}

.pdlist{position:relative; overflow:hidden}
.pdlist ul{position:relative}
.pdlist ul li{position:relative; text-align:left}
.pdlist ul li .img{display:inline-block; vertical-align:middle; width:485px;}
.pdlist ul li .con{display:inline-block; vertical-align:middle; width:485px; margin-left:25px; font-size:19px; color:#222; position:relative}
.pdlist ul li .con p{margin-bottom:3px}
.pdlist ul li .con p:nth-last-child(1){margin-bottom:0}
.pdlist .bar{width:310px; border-bottom:1px solid #222; display:inline-block; position:absolute; left:-100px; top:-70px; font-size:22px}
.pdlist ul li:nth-child(2){margin-top:-80px; height:470px;}
.pdlist ul li:nth-child(2) .img{position:absolute; right:0; top:0}
.pdlist ul li:nth-child(2) .con{margin-left:0; position:absolute; left:0; top:50%; transform:translateY(-50%)}
.pdlist ul li:nth-child(2) .bar{left:auto; right:-100px; text-align:right}
.pdlist ul li:nth-child(3){margin-top:50px}

.pdlink{position:relative; overflow:hidden; text-align:center; padding:50px 0 0 0}
.pdlink .pd_tit{position:relative; font-weight:bold; font-size:42px; padding:0 0 15px 0; color:#20364b}
.pdlink .pdbox{position:relative; margin-bottom:70px}
.pdlink .pdbox:nth-child(2){margin-bottom:0}
.pdlink .pdbox:nth-child(2) .pd_tit{color:#ffb401}
.pdlink .pdbox ul{position:relative; font-size:0}
.pdlink .pdbox ul li{display:inline-block; vertical-align:top; margin-right:5px;}
.pdlink .pdbox ul li .pd{padding:5px; background:#fff; position:relative}
.pdlink .pdbox ul li:nth-child(2){margin-right:0}
.pdlink .pdbox ul li .img{position:relative}
.pdlink .pdbox ul li .con{position:relative; padding:5px 0; color:#222; font-size:19px; font-weight:bold; }
.pdlink .pdbox ul li a{display:inline-block; color:#fff; font-size:19px; border-radius:3px; line-height:1.2; padding:9px 20px; background:#20364b; margin-top:20px}

/* TH */
.th .pdlist ul li .con{font-size:17px}
.th .pdlist ul li .con p em{font-size:22px}
.th .con01 .ft_txt{letter-spacing:-1px}


/* SG */
.sg .pdlist .con em {font-size: 22px;}
.sg .ft_txt {font-size: 18px; letter-spacing: -1px;}
.sg2 .visual img {margin-top: 20px;} 
.sg2 .con small {font-size: 24px;} 
.sg2 .tail {font-size: 24px; letter-spacing: -1px;} 
.sg2 .pdlink .con {font-size: 20px;}

/* MY */
.my .pdlist ul li .con p em{font-size:22px}
.my .con02 .friendly{}
.my .con02 .friendly .logo{display:block; margin:0 auto; text-align:center}
.my .con02 .friendly .con{display:block; max-width:none; text-align:center}

/* IN */
.in .pdlist ul li .con p em{font-size:22px}


@media screen and (max-width: 1020px){
	.coral .container{padding:0 20px}
	.coral .tit{padding:100px 0 20px 0;}
	
	.con01, .con02{padding:70px 0}
	
	.con01 .txt{font-size:15px;}
	.con01 .ft_txt{padding:30px 0 0 0; font-size:15px}
	
	.con02 .friendly{max-width:auto}
	.con02 .friendly .con{max-width:auto; width:calc(100% - 250px); font-size:18px}
	.con02 .friendly .con.small{font-size:16px}
	.con02 .tail{padding:70px 0 0 0; font-size:18px}
	
	.pdlist{max-width:700px; margin:0 auto}
	.pdlist ul li{position:relative; text-align:left; height:auto !important; margin-top:0 !important; margin-bottom:40px !important}
	.pdlist ul li:nth-last-child(1){margin-bottom:0 !important}
	.pdlist ul li .img{width:auto; display:block; position:relative !important; left:auto !important; right:auto !important; top:auto !important;}
	.pdlist ul li .img img{width:100%}
	.pdlist ul li .con{width:auto; display:block; position:relative !important; left:auto !important; top:auto !important; transform:none !important; margin-left:0; padding:70px 20px 0 20px; font-size:17px}
	.pdlist .bar{width:140px; border-bottom:1px solid #222; display:inline-block; position:absolute; left:-100px !important; right:auto !important; top:20px; font-size:19px; text-align:right}
	
	.pdlink{max-width:700px; margin:0 auto}
	.pdlink .pd_tit{font-size:30px; padding:0 0 10px 0}
	.pdlink .pdbox{margin-bottom:30px}
	.pdlink .pdbox ul li{margin-bottom:30px}
	
	/* TH */
	.th .pdlist ul li .con{font-size:15px}
	.th .pdlist ul li .con p em{font-size:18px}


	/* SG */
	.sg .pdlist .con em {font-size: 18px;}
	.sg .ft_txt {letter-spacing: -0.5px;}
	.sg2 .tail {letter-spacing: 0;} 
	
	/* MY */
	.my .pdlist ul li .con p em{font-size:18px}
	.my .con02 .friendly .con{width:auto}
	
	/* IN */
	.in .pdlist ul li .con p em{font-size:18px}
}

@media screen and (max-width: 768px){
	.onlyW{display:none !important}
	.onlyM{display:inline-block !important}

	.coral .tit{padding:70px 0 15px 0;}
	.con01, .con02{padding:50px 0}
	.con01{padding:0 0 50px 0}
	
	.con01 .visual{position:relative; overflow:hidden; width:calc(100% + 40px); margin-left:-20px}
	.con01 .visaul img{}
	.con01 .txt{font-size:13px;}
	.con01 .txt br{display:none}
	.con01 .ft_txt{padding:20px 0 0 0; font-size:13px}
	.con01 .ft_txt br{display:none}
	
	.con02 .friendly{max-width:auto; margin-top:15px}
	.con02 .friendly .logo{width:90px}
	.con02 .friendly .con{max-width:auto; width:calc(100% - 120px); font-size:13px; padding:22px 10px}
	.con02 .friendly .con.small{font-size:12px}
	.con02 .friendly .con:before, .con02 .friendly .con:after{width:21px; height:15px; background-size:cover}
	.con02 .tail{padding:50px 0 0 0; font-size:15px}
	
	.pdlist{overflow:visible}
	.pdlist ul li .con{overflow:visible; font-size:14px}
	.pdlist .bar{font-size:17px}
	
	.pdlink{max-width:700px; margin:0 auto}
	.pdlink .pd_tit{font-size:20px;}
	.pdlink .pdbox ul li{width:calc(50% - 3px); box-sizing:border-box}
	.pdlink .pdbox ul li .con{font-size:15px}
	.pdlink .pdbox ul li a{padding:7px 15px; font-size:14px}
	
	/* TH */
	.th .pdlist ul li .con{font-size:13px}
	.th .pdlist ul li .con p em{font-size:15px}
	.th .pdlist ul li .con br{display:none}

	/* SG */
	.sg .pdlist .con em {font-size: 15px;}
	
	/* MY */
	.my .pdlist ul li .con p em{font-size:15px}
	.my .con02 .friendly{margin-top:20px}
	
	/* IN */
	.in .pdlist ul li .con p em{font-size:15px}
}

@media screen and (max-width: 600px){
	/* TH */
	.pdlink .pdbox ul li .con{}
}